/* ========== Popup Video Modal ========== */
.popup-video-modal {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.popup-video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: popupVideoFade 0.25s ease;
}

@keyframes popupVideoFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes popupVideoSlide {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ========== Box — adaptif sesuai aspect ratio video ==========
   Variabel di-set oleh JS dari videoWidth/videoHeight setelah loadedmetadata:
     --video-aspect: width/height (mis: 0.5625 untuk 9:16, 1 untuk 1:1, 1.7778 untuk 16:9)
   Fallback 16:9 kalau JS belum sempat set.
   
   Strategi sizing:
   - Box dibatasi --max-w (lebar) dan --max-h (tinggi)
   - Body video pakai aspect-ratio var → adjust shape mengikuti video
   - Header & footer fixed tinggi → tinggi total = header + body + footer
============================================================================= */
.popup-video-box {
    --video-aspect: 1.7778;  /* default 16:9 fallback */
    --max-w: min(60vw, 720px);
    --max-h: 80vh;
    --header-h: 50px;
    --footer-h: 0px;          /* footer dihilangkan — checkbox sudah tidak ada */

    position: relative;
    background: #1a1a1a;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: popupVideoSlide 0.3s ease;

    /* === Sizing logic ===
       Body video aspect-nya = --video-aspect (W/H).
       Kita perlu pilih W & H sehingga:
           W / (H - header - footer) ≈ aspect
       
       Pendekatan: pakai max-width clamp + max-height clamp,
       lalu width ditentukan oleh aspect × tinggi body, atau
       height ditentukan oleh width / aspect.
    */
    max-width: var(--max-w);
    max-height: var(--max-h);

    /* Trick: width berdasarkan --max-h (kurangi UI), kemudian capped oleh --max-w
       calc((max-h - header - footer) * aspect) = lebar video ideal */
    width: min(
        var(--max-w),
        calc((var(--max-h) - var(--header-h) - var(--footer-h)) * var(--video-aspect))
    );
    /* Height: dari width / aspect + header + footer, capped max-h */
    /* Karena width sudah dibatasi, height otomatis menyesuaikan */
}

/* Saat maximize / fullscreen — biarkan box lebih besar */
.popup-video-box.is-maximized {
    --max-w: 96vw;
    --max-h: 92vh;
}

/* ========== Header ========== */
.popup-video-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    background: #2a2a2a;
    color: #fff;
    flex-shrink: 0;
    min-height: var(--header-h);
    box-sizing: border-box;
}

.popup-video-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.popup-video-header-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.popup-video-fullscreen-btn,
.popup-video-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    font-size: 1.4rem;
    line-height: 1;
    font-family: inherit;
    padding: 0;
}

.popup-video-close-btn {
    font-size: 1.55rem;
    font-weight: 400;
    /* ✨ Tombol X lebih menonjol — outlined kecil */
    background: rgba(255, 255, 255, 0.12);
}

.popup-video-fullscreen-btn:hover,
.popup-video-close-btn:hover {
    background: rgba(255, 255, 255, 0.22);
}

.popup-video-close-btn:hover {
    background: #cc3333;
}

.popup-video-fullscreen-btn:active,
.popup-video-close-btn:active {
    transform: scale(0.94);
}

/* Toggle icon expand/compress berdasarkan state */
.popup-video-fullscreen-btn .ic-compress { display: none; }
.popup-video-box.is-maximized .popup-video-fullscreen-btn .ic-expand { display: none; }
.popup-video-box.is-maximized .popup-video-fullscreen-btn .ic-compress { display: inline-block; }

/* ========== Body (video) — aspect ratio mengikuti video ========== */
.popup-video-body {
    flex: 1 1 auto;
    min-height: 0;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    /* ✨ Aspect ratio mengikuti video — body shape auto-adjust */
    aspect-ratio: var(--video-aspect);
}

.popup-video-body video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #000;
}

/* ============================================
   Mobile: box lebih ramping (max ~50% tinggi viewport)
   ============================================ */
@media (max-width: 768px) {
    .popup-video-modal {
        padding: 0.5rem;
    }
    .popup-video-box {
        /* Lebar boleh sampai 92vw, tinggi maks 50vh sesuai default admin */
        --max-w: 92vw;
        --max-h: 50vh;
        --header-h: 42px;
        --footer-h: 0px;     /* footer dihilangkan */
    }
    .popup-video-title {
        font-size: 0.82rem;
    }
    .popup-video-fullscreen-btn,
    .popup-video-close-btn {
        width: 32px;
        height: 32px;
    }
    .popup-video-close-btn {
        font-size: 1.35rem;
    }
}

/* Mobile sangat sempit & landscape */
@media (max-width: 768px) and (max-height: 500px) {
    .popup-video-box {
        --max-h: 78vh;
    }
}