/* ===== Layout ===== */
.scan-page {
    min-height: calc(100vh - 120px);
}
.scan-card {
    border-radius: 20px;
    overflow: hidden;
}
.scan-header {
    background: linear-gradient(
        135deg,
        rgba(13, 110, 253, 0.08),
        rgba(25, 135, 84, 0.08)
    );
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* ===== Video Wrapper ===== */
.scanner-wrap {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* يحافظ على نسبة عرض جميلة على كل الأجهزة */
.scanner-wrap::before {
    content: "";
    display: block;
    padding-top: 62.5%; /* 16:10 */
}

.scanner-wrap video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== Overlay ===== */
.scan-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.scan-frame {
    position: absolute;
    inset: 0;
    margin: auto;
    width: min(74%, 360px);
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    border: 3px solid rgba(255, 255, 255, 0.88);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.38);
    display: flex;
    align-items: center;
    justify-content: center;
}

.scan-corners::before,
.scan-corners::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 22px;
    border: 2px solid rgba(25, 135, 84, 0.9);
    clip-path: polygon(
        0% 0%,
        16% 0%,
        16% 4%,
        4% 4%,
        4% 16%,
        0% 16%,
        0% 0%,
        100% 0%,
        84% 0%,
        84% 4%,
        96% 4%,
        96% 16%,
        100% 16%,
        100% 0%,
        0% 100%,
        16% 100%,
        16% 96%,
        4% 96%,
        4% 84%,
        0% 84%,
        0% 100%,
        100% 100%,
        84% 100%,
        84% 96%,
        96% 96%,
        96% 84%,
        100% 84%,
        100% 100%
    );
    opacity: 0.9;
}

.scan-line {
    position: absolute;
    left: 10%;
    right: 10%;
    height: 3px;
    top: 12%;
    background: rgba(25, 135, 84, 0.95);
    border-radius: 999px;
    filter: drop-shadow(0 0 6px rgba(25, 135, 84, 0.65));
    animation: scanMove 1.4s infinite ease-in-out;
}

@keyframes scanMove {
    0% {
        top: 12%;
        opacity: 0.75;
    }
    50% {
        top: 82%;
        opacity: 1;
    }
    100% {
        top: 12%;
        opacity: 0.75;
    }
}

/* ===== Controls ===== */
.scan-actions .btn {
    border-radius: 14px;
    padding: 0.65rem 1rem;
    font-weight: 600;
}

.hint {
    font-size: 0.95rem;
    color: #6c757d;
}

/* ===== Responsive tweaks ===== */
@media (max-width: 576px) {
    .scanner-wrap::before {
        padding-top: 88%;
    } /* أقرب للموبايل */
    .scan-frame {
        width: min(78%, 320px);
        border-radius: 16px;
    }
}

@media (min-width: 992px) {
    .scanner-wrap::before {
        padding-top: 52%;
    } /* أجمل على الديسكتوب */
}