.camera-frame-card {
    position: relative;
    width: min(82vw, 458px);
    width: min(82vw, calc(72.028svh - 126.77px), 458px);
    aspect-ratio: 618 / 858;
    isolation: isolate;
}

.camera-frame-card__window {
    position: absolute;
    inset:
        calc(2.45% - 3px)
        calc(4.37% - 3px)
        calc(4.2% - 3px)
        calc(4.85% - 3px);
    z-index: 1;
    overflow: hidden;
    background: #101820;
    border-radius: 18px 18px 15px 15px;
}

.camera-frame-card__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(-1.015, 1.015);
    transform-origin: center;
}

/* html5-qrcode needs a natural-aspect feed for decoding. Its generated
   controls stay off-screen while the visible card mirrors its MediaStream. */
.camera-frame-card__reader {
    position: fixed !important;
    top: 0 !important;
    left: -10000px !important;
    width: 640px;
    height: auto;
    overflow: hidden;
    border: 0 !important;
    pointer-events: none;
    contain: strict;
}

.camera-frame-card__reader video {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
}

.camera-frame-card__reader img[alt="Info icon"],
.camera-frame-card__reader [id$="__scan_region"] > img,
.camera-frame-card__reader [id$="__dashboard"],
.camera-frame-card__reader [id*="__dashboard_section_csr"] span,
.camera-frame-card__reader [id^="qr-shaded-region"] {
    display: none !important;
}

.camera-frame-card__frame {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    filter: drop-shadow(0 8px 6px rgba(5, 20, 55, 0.3));
    pointer-events: none;
}

.camera-frame-card__prompt {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: block;
    width: 60%;
    height: auto;
    opacity: 0.94;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

@media (max-width: 480px) {
    .camera-frame-card {
        width: min(88vw, calc(72.028svh - 121.01px), 458px);
    }
}