/* Self-contained rainbow UI. ChromaKeyDiv remains a hook for the existing payment lock. */
.engine-ui {
    --engine-accent: var(--ColorBs, #0c578e);
    --engine-text: var(--BkColor, #000);
    --engine-tab-background: var(--ColorLt, #c0e6ff);
    --engine-surface: var(--ColorVl, #e0f5ff);
    --engine-border: var(--ColorLt, #c0e6ff);
    color: var(--engine-text);
    font-family: inherit;
    direction: rtl;
}
.engine-ui, .engine-ui *, .engine-ui *::before, .engine-ui *::after { box-sizing: border-box; }
.engine-ui button { appearance: none; font-family: inherit; text-shadow: none; cursor: pointer; }
.engine-ui button, .engine-ui button::before, .engine-ui button::after { transition: .3s; }
.engine-ui .engine-angles {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    padding: 8px 10px 20px;
    margin-bottom: -14px;
    border: 1px solid var(--engine-border);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: var(--engine-tab-background);
    background: color-mix(in srgb, var(--engine-tab-background) 65%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow-x: auto;
}
.engine-ui .engine-angles-label { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; padding: 0 8px; font-size: 9px; opacity: .65; white-space: nowrap; }
.engine-ui .engine-angles-label .fa { font-size: 15px; }
.engine-ui .engine-angle { position: relative; flex: 1 0 65px; padding: 12px 8px; min-height: 42px; margin: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font-size: 11px; line-height: 1.5; opacity: .8; box-shadow: none; }
.engine-ui .engine-angle::after { content: ''; position: absolute; inset: auto 10px 0; height: 2px; border-radius: 4px; background: var(--engine-accent); opacity: 0; transform: scaleX(.5); }
.engine-ui .engine-angle:hover, .engine-ui .engine-angle.is-selected { opacity: 1; color: var(--engine-accent); }
.engine-ui .engine-angle.is-selected::after { opacity: 1; transform: scaleX(1); }
.engine-ui .engine-material-heading { display: flex; align-items: center; gap: 8px; margin: 20px 0 14px; font-size: 11px; line-height: 1.8; opacity: .75; }
.engine-ui .engine-material-heading .fa { font-size: 14px; }
.engine-ui .engine-material-heading::after { content: ''; flex: 1; height: 1px; margin-inline-start: 4px; background: var(--engine-border); }
.engine-ui .engine-materials { width: 100%; overflow-x: auto; overflow-y: hidden; padding: 4px 2px 14px; text-align: right; scrollbar-color: var(--engine-accent) var(--engine-surface); scrollbar-width: thin; }
.engine-ui .engine-material-row { display: flex; align-items: center; gap: 5px; width: max-content; min-width: 100%; padding: 3px 0; }
.engine-ui .engine-material-row.is-hidden { display: none; }
.engine-ui .engine-material-name { flex: 0 0 60px; font-size: 10px; line-height: 1.6; text-align: center; opacity: .75; }
.engine-ui .engine-swatch { position: relative; flex: 0 0 58px; width: 58px; height: 44px; padding: 0; margin: 0; border: 1px solid var(--engine-border); border-radius: 10px; overflow: hidden; background: var(--Back); background-size: 200px 200px; color: #fff; box-shadow: none; }
.engine-ui .engine-swatch::after { content: ''; position: absolute; inset: 0; background: linear-gradient(-30deg, #0000009e, transparent 60%); pointer-events: none; }
.engine-ui .engine-swatch::before { content: ''; position: absolute; top: 7px; left: 8px; z-index: 2; width: 11px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) scale(.7); opacity: 0; filter: drop-shadow(0 1px 2px #000); }
.engine-ui .engine-swatch.is-selected { border-color: var(--engine-accent); box-shadow: 0 0 0 2px var(--engine-accent); }
.engine-ui .engine-swatch.is-selected::before { opacity: 1; transform: rotate(-45deg) scale(1); }
.engine-ui .engine-swatch > span { position: absolute; bottom: 4px; right: 4px; z-index: 2; font-size: 8px; line-height: 1.2; text-shadow: 0 1px 3px #000; pointer-events: none; }
.engine-ui .engine-swatch:hover { border-color: var(--engine-accent); }
.engine-ui button:focus-visible, .engine-ui .engine-materials:focus-visible { outline: 2px solid var(--engine-accent); outline-offset: -2px; }
/* Same inset-glow treatment as CrusBoot, scoped to this component. */
.engine-ui .engine-materials::-webkit-scrollbar, .engine-ui .engine-angles::-webkit-scrollbar { height: 8px !important; width: 8px !important; }
.engine-ui .engine-materials::-webkit-scrollbar-track, .engine-ui .engine-angles::-webkit-scrollbar-track { margin: 0 16px; border-radius: 4px; background: var(--engine-surface); box-shadow: inset 0 0 3px var(--engine-accent); }
.engine-ui .engine-materials::-webkit-scrollbar-track { margin-inline: 12vh; }
.engine-ui .engine-materials::-webkit-scrollbar-thumb, .engine-ui .engine-angles::-webkit-scrollbar-thumb { border-radius: 4px; background: var(--engine-tab-background); box-shadow: inset 0 0 4px var(--engine-accent); }
.engine-ui .engine-materials::-webkit-scrollbar-thumb:hover, .engine-ui .engine-angles::-webkit-scrollbar-thumb:hover { box-shadow: inset 0 0 7px var(--engine-accent); }
@supports selector(::-webkit-scrollbar) {
    .engine-ui .engine-materials, .engine-ui .engine-angles { scrollbar-color: auto; scrollbar-width: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .engine-ui button, .engine-ui button::before, .engine-ui button::after { transition: none; }
}
.ChromaRoom {
    position: relative;
    max-width: 100%;
    margin: 0;
    display: block;
    /*background: var(--ColorLt);*/
    /*border-radius: 15px;*/
}

.ChromaKeyBox {
    position: relative;
    z-index: 2;
    width: 100%;
    border: 1px solid var(--engine-border);
    border-radius: 18px;
    background: var(--engine-surface);
    box-shadow: none;
    margin: 0;
    overflow: hidden;
    /* Vars */
    --ChromaAnimTime: 1.5s;
    --ChromaOut: 8%;
    --ChromaEase: cubic-bezier(.42, 0, .58, 1);
}

    .ChromaKeyBox:before {
        content: '';
        padding-top: 56.25%;
        position: relative;
        display: block;
        height: 0;
    }

    .ChromaKeyBox .ChromaKeyRender {
        transition: 0.7s;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        transition: filter .28s ease, transform .45s ease, opacity .28s ease;
    }

    .ChromaKeyBox .DeleteChromaKey {
        position: absolute;
        font-size: 17px;
        left: 5px;
        top: 5px;
        line-height: 40px;
        width: 40px;
        z-index: 7;
        color: var(--RedVl, #e77171);
        text-shadow: 0 0 2px var(--RedBs), 0 0 10px var(--RedBs), 0 0 3px var(--RedBs);
        cursor: pointer;
    }

        .ChromaKeyBox .DeleteChromaKey:before {
            content: "\f2ed";
            font-family: "Font Awesome 6 Pro";
        }

        .ChromaKeyBox .DeleteChromaKey:hover:before {
            color: var(--RedLt, #ff9595);
            font-size: 21px;
        }

    .ChromaKeyBox .ChromaLogo {
        transition: 0.4s;
        position: absolute;
        right: 10px;
        bottom: 10px;
        width: 16%;
        max-width: 100px;
        filter: drop-shadow(0px 0px 3px #000);
        opacity: 0.5;
        z-index: 6;
    }

    .ChromaKeyBox .BackLogo {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        padding: 20px;
        padding-right: 40%;
        filter: blur(5px) opacity(0.8);
    }

    .ChromaKeyBox.Blur {
    }

        .ChromaKeyBox.Blur .ChromaLogo {
            transition: 0.3s;
            opacity: 1;
            width: 24%;
            max-width: 150px;
            right: 20px;
            bottom: 20px;
            filter: drop-shadow(0px 0px 10px #000);
        }

    .ChromaKeyBox .ChromaCanvas {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

        .ChromaKeyBox .ChromaCanvas.A {
            z-index: 1;
        }

        .ChromaKeyBox .ChromaCanvas.B {
            z-index: 0;
        }

.ChromaCanvas.RevealLeft {
    --S1: 0%;
    --S2: calc(0% - var(--ChromaOut));
    --S3: calc(-38% - var(--ChromaOut));
    --S4: 0%;
    --E1: 0%;
    --E2: calc(138% + var(--ChromaOut));
    --E3: calc(100% + var(--ChromaOut));
    --E4: 0%;
    animation: ChromaReveal var(--ChromaAnimTime) var(--ChromaEase) both;
}

.ChromaCanvas.RevealRight {
    --S1: calc(138% + var(--ChromaOut));
    --S2: 100%;
    --S3: 100%;
    --S4: calc(100% + var(--ChromaOut));
    --E1: calc(0% - var(--ChromaOut));
    --E2: 100%;
    --E3: 100%;
    --E4: calc(-38% - var(--ChromaOut));
    animation: ChromaReveal var(--ChromaAnimTime) var(--ChromaEase) both;
}

@keyframes ChromaReveal {
    0% {
        clip-path: polygon( var(--S1) 0, var(--S2) 0, var(--S3) 100%, var(--S4) 100% );
    }

    100% {
        clip-path: polygon( var(--E1) 0, var(--E2) 0, var(--E3) 100%, var(--E4) 100% );
    }
}

.ChromaSweepLight {
    position: absolute;
    z-index: 5;
    top: -35%;
    left: -72%;
    width: 36%;
    height: 170%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient( 90deg, transparent 0%, rgba(215, 174, 99, 0.05) 10%, rgba(242, 213, 151, 0.20) 24%, rgba(255, 236, 184, 0.52) 40%, rgba(255, 245, 214, 0.92) 50%, rgba(255, 236, 184, 0.52) 60%, rgba(242, 213, 151, 0.20) 76%, rgba(215, 174, 99, 0.05) 90%, transparent 100% );
    /*filter: blur(10px);*/
    filter: drop-shadow(0 0 12px rgba(242, 213, 151, .32)) drop-shadow(0 0 28px rgba(215, 174, 99, .22));
    transform: skewX(-34deg);
    transform-origin: center center;
}

    .ChromaSweepLight:after {
        content: '';
        position: absolute;
        left: 47%;
        top: 0;
        width: 6%;
        height: 100%;
        pointer-events: none;
        background: linear-gradient( 90deg, transparent 0%, rgba(255, 240, 190, .65) 25%, rgba(255, 255, 245, .85) 50%, rgba(255, 240, 190, .65) 75%, transparent 100% );
        filter: blur(1.5px);
        box-shadow: 0 0 8px rgba(255, 225, 150, .9), 0 0 18px rgba(215, 174, 99, .65), 0 0 32px rgba(215, 174, 99, .35);
    }

    .ChromaSweepLight.Left {
        animation: ChromaSweep var(--ChromaAnimTime) var(--ChromaEase) both;
    }

    .ChromaSweepLight.Right {
        animation: ChromaSweep var(--ChromaAnimTime) var(--ChromaEase) both reverse;
    }

@keyframes ChromaMagicCore {
    0% {
        opacity: .72;
        transform: scaleX(.72);
    }

    100% {
        opacity: 1;
        transform: scaleX(1.18);
    }
}

@keyframes ChromaSweep {
    0% {
        left: calc(-37% - var(--ChromaOut));
        opacity: .92;
    }

    100% {
        left: calc(101% + var(--ChromaOut));
        opacity: .92;
    }
}

.ChromaKeyDiv {
    position: relative;
    margin: 0;
}

    .ChromaKeyDiv.NotPayVidLock {
    }

        .ChromaKeyDiv.NotPayVidLock > * {
            filter: grayscale(0.8) blur(2px);
            pointer-events: none;
        }

        .ChromaKeyDiv.NotPayVidLock .ChromaKeyBox img {
            filter: blur(10px);
            transform: scale(1.2);
            pointer-events: none;
        }

        .ChromaKeyDiv.NotPayVidLock:after {
            font-family: "Font Awesome 6 Pro";
            content: "\f023";
            position: absolute;
            left: calc(50% - 75px);
            top: calc(42% - 75px);
            z-index: 10;
            font-size: 150px;
            width: 150px;
            line-height: 150px;
            color: #ffffff;
            opacity: 0.6;
            pointer-events: none;
            text-shadow: 0 0 10px #000, 0 0 30px #000;
        }