/* Smart Video Embedder — v1.4.6 */
:root {
    --sve-color: #00adef;
    --sve-bg: #000;
    --sve-radius: 4px;
    --sve-watermark-color: rgba(255,255,255,0.7);
    --sve-caption-color: #555;
    --sve-lightbox-bg: rgba(0,0,0,0.92);
}

/* ── Wrapper ───────────────────────────────────────────────── */
.sve-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    background: var(--sve-bg);
    border-radius: var(--sve-radius);
    box-sizing: border-box;
    display: block;
    /* overflow:hidden can clip iframes on some Android WebViews — removed */
}

/* ── Ratio box ─────────────────────────────────────────────── */
.sve-ratio-box {
    position: relative;
    width: 100%;
    height: 0;
    /* overflow hidden only on ratio box, not wrapper */
    overflow: hidden;
    display: block;
}

.sve-ratio-16-9 { padding-bottom: 56.25%; }
.sve-ratio-4-3  { padding-bottom: 75%; }
.sve-ratio-1-1  { padding-bottom: 100%; }
.sve-ratio-9-16 { padding-bottom: 177.78%; }
.sve-ratio-21-9 { padding-bottom: 42.86%; }

/* ── iframe ────────────────────────────────────────────────── */
/* MOBILE FIX v1.4.6:
   Explicit position:absolute on the iframe itself.
   The .sve-ratio-box > * rule with position:absolute is not always
   applied to iframes by Android WebView — must be explicit.
   Also explicit width/height in px fallback via CSS ensures the
   iframe is never treated as 0×0 on mobile. */
.sve-iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    display: block;
    background: #000;
    /* Remove any browser default margin/padding on mobile */
    margin: 0;
    padding: 0;
    /* Ensure mobile browsers don't apply minimum size constraints */
    min-width: 0;
    min-height: 0;
    /* Override any WordPress or theme lazy-load hiding */
    visibility: visible !important;
    opacity: 1 !important;
}

/* ── HTML5 video ───────────────────────────────────────────── */
.sve-video-el {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #000;
    object-fit: contain;
    max-width: 100%;
}

/* ── Lazy facade ───────────────────────────────────────────── */
.sve-lazy-facade {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    background-color: #111;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
}
.sve-facade-play {
    background: var(--sve-color);
    border: none;
    border-radius: 50%;
    width: 68px; height: 68px;
    font-size: 28px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    padding-left: 5px;
    min-width: 44px; min-height: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    pointer-events: none;
    transition: transform 0.2s;
}
.sve-lazy-facade:hover .sve-facade-play { transform: scale(1.1); }

/* ── Error overlay ─────────────────────────────────────────── */
.sve-error {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    color: #aaa;
    font-size: 13px;
    text-align: center;
    padding: 20px;
    z-index: 5;
    line-height: 1.5;
}

/* ── Provider label ────────────────────────────────────────── */
.sve-provider-label {
    display: block;
    margin: 5px 0 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    padding: 0 2px;
    min-height: 1em;
}

/* ── Watermark ─────────────────────────────────────────────── */
.sve-watermark {
    position: absolute;
    z-index: 5;
    font-size: 13px;
    font-weight: 600;
    color: var(--sve-watermark-color);
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    padding: 4px 8px;
    user-select: none;
}
.sve-watermark-top-left     { top:10px; left:10px; }
.sve-watermark-top-right    { top:10px; right:10px; }
.sve-watermark-bottom-left  { bottom:10px; left:10px; }
.sve-watermark-bottom-right { bottom:10px; right:10px; }

/* ── Caption ───────────────────────────────────────────────── */
.sve-caption {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--sve-caption-color);
    font-style: italic;
    text-align: center;
}

/* ── Lightbox trigger ──────────────────────────────────────── */
.sve-lightbox-trigger {
    display: block;
    position: relative;
    width: 100%;
    cursor: pointer;
    border: none;
    padding: 0;
    background: transparent;
    overflow: hidden;
    border-radius: var(--sve-radius);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.sve-lightbox-trigger img { display:block; width:100%; height:auto; }
.sve-lightbox-poster-placeholder { width:100%; padding-bottom:56.25%; background:#111; }
.sve-play-icon {
    position: absolute;
    top:50%; left:50%;
    transform: translate(-50%,-50%);
    background: var(--sve-color);
    color: #fff;
    border-radius: 50%;
    width: 72px; height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    padding-left: 5px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.45);
    transition: transform 0.2s;
    pointer-events: none;
}
.sve-lightbox-trigger:hover .sve-play-icon { transform: translate(-50%,-50%) scale(1.1); }

/* ── Lightbox modal ────────────────────────────────────────── */
.sve-lightbox-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: var(--sve-lightbox-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(20px, env(safe-area-inset-top))
             max(20px, env(safe-area-inset-right))
             max(20px, env(safe-area-inset-bottom))
             max(20px, env(safe-area-inset-left));
    box-sizing: border-box;
    animation: sveFadeIn 0.2s ease;
}
.sve-lightbox-modal[hidden] { display: none !important; }
@keyframes sveFadeIn { from { opacity:0; } to { opacity:1; } }
.sve-lightbox-modal .sve-ratio-box { width: min(90vw, 1280px); border-radius: var(--sve-radius); overflow:hidden; }
.sve-lightbox-close {
    position: absolute; top:14px; right:18px;
    background: none; border: none;
    color: #fff; font-size: 36px;
    cursor: pointer; line-height: 1; opacity: 0.75;
    transition: opacity 0.15s; z-index: 10;
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.sve-lightbox-close:hover { opacity:1; }

/* ── GDPR gate ─────────────────────────────────────────────── */
.sve-gdpr-gate { position:relative; height:0; background:#1a1a2e; border-radius:var(--sve-radius); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.sve-gdpr-inner { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; color:#ddd; text-align:center; }
.sve-gdpr-inner p { margin:0 0 16px; font-size:14px; }
.sve-gdpr-accept { background:var(--sve-color); color:#fff; border:none; padding:10px 24px; border-radius:4px; cursor:pointer; font-size:14px; font-weight:600; min-height:44px; touch-action:manipulation; }

/* ── HLS quality badge ─────────────────────────────────────── */
.sve-quality-badge { position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,0.6); color:#fff; font-size:11px; padding:2px 6px; border-radius:3px; pointer-events:none; z-index:5; }

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .sve-facade-play, .sve-play-icon { width:54px; height:54px; font-size:22px; }
    .sve-lightbox-modal { padding:10px; }
    .sve-lightbox-modal .sve-ratio-box { width:100%; }
    .sve-wrapper { border-radius:0; }
    .sve-lightbox-close { top:8px; right:8px; font-size:32px; }

    /* Extra mobile iframe insurance */
    .sve-iframe {
        /* Some Android browsers ignore % height on iframes inside height:0 containers.
           Force-fill via absolute positioning which is more reliable. */
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
    }
}

@media (prefers-color-scheme:dark) { .sve-caption { color:#aaa; } .sve-provider-label { color:#666; } }
@media (prefers-reduced-motion:reduce) { .sve-lightbox-modal { animation:none; } .sve-facade-play,.sve-play-icon { transition:none; } }


/* ── Mobile tap-to-play poster (v1.4.6) ──────────────────────────── */
.sve-mobile-tap {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #111;
    cursor: pointer;
    z-index: 20;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.sve-mobile-tap-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--sve-color, #00adef);
    color: #fff;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 6px;
    box-shadow: 0 4px 28px rgba(0,0,0,0.5);
    margin-bottom: 12px;
    transition: transform 0.12s, opacity 0.12s;
}

.sve-mobile-tap:active .sve-mobile-tap-btn {
    transform: scale(0.9);
    opacity: 0.8;
}

.sve-mobile-tap-lbl {
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}

/* ── Loading shimmer (v1.4.6) ────────────────────────────────────── */
/* Shown while lazy iframes haven't loaded yet.                       */
.sve-shimmer {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: linear-gradient(
        90deg,
        #1a1a1a 25%,
        #2a2a2a 50%,
        #1a1a1a 75%
    );
    background-size: 200% 100%;
    animation: sveShimmer 1.4s ease-in-out infinite;
    pointer-events: none;
    transition: opacity 0.4s;
}
.sve-shimmer.done {
    opacity: 0;
    pointer-events: none;
}
@keyframes sveShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .sve-shimmer { animation: none; background: #1a1a1a; }
}