/* ==========================================================
   SimplPay Aurora Glass AI
   PATCH-SIMPLPAY-022G-03G
   QR Scanner UI
   ========================================================== */


/* ==========================================================
   Scanner Surface
   ========================================================== */

.qr-scanner-shell,
.qr-scanner-container,
.scanner-container {
    position: relative;
    overflow: hidden;

    border-radius:
        26px;

    background:
        linear-gradient(
            145deg,
            rgba(15,23,42,.96),
            rgba(30,41,59,.90)
        );

    border:
        1px solid
        rgba(255,255,255,.12);

    box-shadow:
        0 28px 70px rgba(15,23,42,.34),
        inset 0 1px 0 rgba(255,255,255,.05);
}


/* ==========================================================
   Video / Camera Layer
   ========================================================== */

.qr-scanner-shell video,
.qr-scanner-container video,
.scanner-container video,
#qrVideo,
#scannerVideo {
    width: 100%;
    height: auto;

    display: block;

    object-fit:
        cover;

    background:
        #020617;
}


/* ==========================================================
   Scanner Frame
   ========================================================== */

.qr-scanner-frame,
.scanner-frame {
    position: absolute;

    left: 50%;
    top: 50%;

    width:
        min(
            72%,
            290px
        );

    aspect-ratio:
        1;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius:
        28px;

    pointer-events:
        none;

    box-shadow:
        0 0 0 9999px rgba(2,6,23,.42);
}


/* ==========================================================
   Scanner Corners
   ========================================================== */

.qr-scanner-frame::before,
.scanner-frame::before {
    content: "";

    position: absolute;
    inset: 0;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            #60a5fa,
            #8b5cf6
        )
        top left / 52px 4px no-repeat,

        linear-gradient(
            180deg,
            #60a5fa,
            #8b5cf6
        )
        top left / 4px 52px no-repeat,

        linear-gradient(
            270deg,
            #22d3ee,
            #8b5cf6
        )
        top right / 52px 4px no-repeat,

        linear-gradient(
            180deg,
            #22d3ee,
            #8b5cf6
        )
        top right / 4px 52px no-repeat,

        linear-gradient(
            90deg,
            #8b5cf6,
            #22d3ee
        )
        bottom left / 52px 4px no-repeat,

        linear-gradient(
            0deg,
            #8b5cf6,
            #22d3ee
        )
        bottom left / 4px 52px no-repeat,

        linear-gradient(
            270deg,
            #60a5fa,
            #22d3ee
        )
        bottom right / 52px 4px no-repeat,

        linear-gradient(
            0deg,
            #60a5fa,
            #22d3ee
        )
        bottom right / 4px 52px no-repeat;

    filter:
        drop-shadow(
            0 0 10px rgba(96,165,250,.38)
        );
}


/* ==========================================================
   Scan Line
   ========================================================== */

.qr-scanner-line,
.scanner-line {
    position: absolute;

    left: 12%;
    right: 12%;
    top: 20%;

    height: 2px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #22d3ee,
            #8b5cf6,
            transparent
        );

    box-shadow:
        0 0 18px rgba(34,211,238,.56),
        0 0 30px rgba(139,92,246,.24);

    animation:
        sp-qr-scan
        2.2s
        ease-in-out
        infinite;
}


@keyframes sp-qr-scan {
    0% {
        top: 18%;
        opacity: .34;
    }

    50% {
        top: 80%;
        opacity: 1;
    }

    100% {
        top: 18%;
        opacity: .34;
    }
}


/* ==========================================================
   Scanner Status
   ========================================================== */

#scannerStatus,
.scanner-status {
    margin-top:
        var(--sp-space-3);

    padding:
        10px
        13px;

    border-radius:
        14px;

    color:
        var(--sp-text-secondary);

    background:
        var(--sp-glass-bg-soft);

    border:
        1px solid
        var(--sp-glass-border-soft);

    font-size:
        11px;

    font-weight:
        var(--sp-weight-bold);

    line-height:
        1.5;

    text-align:
        center;
}


#scannerStatus.sp-scanner-success,
.scanner-status.sp-scanner-success {
    color:
        var(--sp-success-strong);

    border-color:
        var(--sp-border-success);

    background:
        rgba(16,185,129,.10);
}


#scannerStatus.sp-scanner-error,
.scanner-status.sp-scanner-error {
    color:
        var(--sp-danger-strong);

    border-color:
        var(--sp-border-danger);

    background:
        rgba(239,68,68,.10);
}


/* ==========================================================
   Scanner Controls
   ========================================================== */

.scan-image-button,
.switch-camera-button,
.scanner-action-button,
.camera-switch-button {
    min-height:
        48px;

    padding:
        9px
        13px;

    border-radius:
        15px;

    color:
        var(--sp-primary);

    background:
        var(--sp-glass-bg-soft);

    border:
        1px solid
        var(--sp-border-primary);

    box-shadow:
        var(--sp-shadow-xs);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    font-weight:
        var(--sp-weight-extrabold);

    transition:
        transform
        var(--sp-transition-spring),
        border-color
        var(--sp-transition-fast),
        background
        var(--sp-transition-fast),
        box-shadow
        var(--sp-transition-fast);
}


.scan-image-button:hover,
.switch-camera-button:hover,
.scanner-action-button:hover,
.camera-switch-button:hover {
    transform:
        translateY(-2px);

    background:
        var(--sp-gradient-primary-soft);

    border-color:
        var(--sp-primary-400);

    box-shadow:
        var(--sp-shadow-sm);
}


/* ==========================================================
   Scanner Action Grid
   ========================================================== */

.scanner-actions,
.qr-scanner-actions {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        10px;

    margin-top:
        var(--sp-space-4);
}


/* ==========================================================
   Scan Success Overlay
   ========================================================== */

.sp-qr-success-overlay {
    position:
        absolute;

    inset:
        0;

    z-index:
        5;

    display:
        grid;

    place-items:
        center;

    pointer-events:
        none;

    background:
        rgba(2,6,23,.46);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


.sp-qr-success-icon {
    width:
        72px;

    height:
        72px;

    border-radius:
        50%;

    display:
        grid;

    place-items:
        center;

    color:
        #ffffff;

    background:
        var(--sp-gradient-success);

    box-shadow:
        0 18px 42px rgba(16,185,129,.32);

    font-size:
        30px;

    font-weight:
        var(--sp-weight-black);

    animation:
        sp-success-pop
        520ms
        var(--sp-ease-spring)
        both;
}


/* ==========================================================
   Camera Permission / Empty State
   ========================================================== */

.scanner-empty,
.qr-scanner-empty {
    min-height:
        260px;

    padding:
        var(--sp-space-6);

    border-radius:
        24px;

    display:
        grid;

    place-items:
        center;

    text-align:
        center;

    color:
        var(--sp-text-tertiary);

    background:
        var(--sp-glass-bg-soft);

    border:
        1px dashed
        var(--sp-border-primary);
}


/* ==========================================================
   Dark Theme
   ========================================================== */

html[data-sp-theme="dark"]
#scannerStatus,
html[data-sp-theme="dark"]
.scanner-status {
    background:
        rgba(15,23,42,.64);
}


/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 430px) {

    .qr-scanner-frame,
    .scanner-frame {
        width:
            min(
                78%,
                270px
            );

        border-radius:
            24px;
    }

    .scanner-actions,
    .qr-scanner-actions {
        grid-template-columns:
            1fr;
    }

}


/* ==========================================================
   Reduced Motion
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .qr-scanner-line,
    .scanner-line {
        animation:
            none !important;
    }

    .scan-image-button,
    .switch-camera-button,
    .scanner-action-button,
    .camera-switch-button {
        transition:
            none !important;
    }

}