/* Mosaik Media Engine — player, uploader & admin queue styles */

.mosaik-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}
.mosaik-player__video,
.mosaik-player video {
    width: 100%;
    height: 100%;
    display: block;
}

/* ══════════════════════════════════════════════════════════════════
   NETFLIX-STYLE PLAYER CHROME
   Custom top/bottom control bars built by assets/js/mosaik-player.js
   directly against the native <video> element. The scrubber uses
   Netflix's signature red; everything else stays neutral so it reads
   as "video chrome" rather than site UI.
   ══════════════════════════════════════════════════════════════════ */
.mosaik-player { --msk-accent: #e50914; }

.msk-controls {
    position: absolute; inset: 0; z-index: 4;
    font-family: 'Outfit', -apple-system, sans-serif;
    color: #fff;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
.msk-controls.msk-show,
.msk-controls.msk-is-paused,
.msk-controls.msk-episodes-open,
.msk-controls.msk-scrubbing { opacity: 1; }
.msk-controls.msk-show,
.msk-controls.msk-is-paused,
.msk-controls.msk-scrubbing { pointer-events: auto; }
.msk-controls.msk-episodes-open { pointer-events: auto; }
.msk-controls.msk-buffering .msk-play-pause { opacity: .5; }

.msk-tap-zone { position: absolute; inset: 0; cursor: pointer; pointer-events: auto; }

.msk-gradient-top,
.msk-gradient-bottom {
    position: absolute; left: 0; right: 0; pointer-events: none;
}
.msk-gradient-top {
    top: 0; height: 30%;
    background: linear-gradient(to bottom, rgba(0,0,0,.75), transparent);
}
.msk-gradient-bottom {
    bottom: 0; height: 40%;
    background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
}

/* ── Top bar ── */
.msk-top-bar {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; align-items: center; gap: 14px;
    padding: 16px 24px;
    z-index: 1;
}
.msk-top-titles { flex: 1; min-width: 0; }
.msk-top-show { font-size: 16px; font-weight: 600; line-height: 1.3; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.msk-top-episode { font-size: 12px; color: rgba(255,255,255,.75); margin-top: 2px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }

.msk-episodes-toggle { display: flex; align-items: center; gap: 6px; width: auto !important; padding: 0 12px !important; }
.msk-ep-btn-label { font-size: 13px; font-weight: 500; white-space: nowrap; }
.msk-episodes-toggle svg { width: 18px; height: 18px; }

/* ── Buttons (shared) ── */
.msk-btn {
    background: none; border: none; color: #fff; cursor: pointer;
    width: 34px; height: 34px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 4px; opacity: .9; position: relative;
    transition: opacity .15s ease, background .15s ease;
}
.msk-btn:hover { opacity: 1; background: rgba(255,255,255,.12); }
.msk-btn:focus-visible { outline: 2px solid var(--msk-accent); outline-offset: 1px; }
.msk-btn svg { width: 22px; height: 22px; display: block; }
.msk-btn-active { color: var(--msk-accent); }

.msk-play-pause svg { width: 24px; height: 24px; }
.msk-play-pause { width: 38px; height: 38px; }

.msk-skip-label {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 9px; font-weight: 700;
}

/* ── Bottom bar ── */
.msk-bottom-bar {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 0 24px 14px;
    z-index: 1;
}
.msk-progress-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.msk-time { font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.85); min-width: 34px; text-align: center; }

.msk-scrubber { flex: 1; padding: 8px 0; cursor: pointer; }
.msk-scrubber-track {
    position: relative; height: 3px; border-radius: 2px;
    background: rgba(255,255,255,.25);
    transition: height .1s ease;
}
.msk-scrubber:hover .msk-scrubber-track,
.msk-scrubbing .msk-scrubber-track { height: 5px; }
.msk-buffered {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
    background: rgba(255,255,255,.4); border-radius: 2px;
}
.msk-played {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
    background: var(--msk-accent); border-radius: 2px;
}
.msk-thumb {
    position: absolute; top: 50%; left: 0%;
    width: 13px; height: 13px; border-radius: 50%; background: var(--msk-accent);
    transform: translate(-50%, -50%) scale(0);
    transition: transform .12s ease;
    box-shadow: 0 0 0 3px rgba(0,0,0,.15);
}
.msk-scrubber:hover .msk-thumb,
.msk-scrubbing .msk-thumb { transform: translate(-50%, -50%) scale(1); }

.msk-buttons-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.msk-buttons-left,
.msk-buttons-right { display: flex; align-items: center; gap: 4px; min-width: 0; }
.msk-now-title {
    margin-left: 10px; font-size: 13px; color: rgba(255,255,255,.7);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.msk-volume-group { display: flex; align-items: center; }
.msk-volume-slider {
    width: 0; opacity: 0; margin-left: 0;
    -webkit-appearance: none; appearance: none; height: 3px; border-radius: 2px;
    background: rgba(255,255,255,.3); outline: none; cursor: pointer;
    transition: width .2s ease, opacity .2s ease, margin-left .2s ease;
}
.msk-volume-group:hover .msk-volume-slider { width: 70px; opacity: 1; margin-left: 6px; }
.msk-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%; background: #fff;
}
.msk-volume-slider::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: #fff; border: none; }

@media (max-width: 640px) {
    .msk-top-bar { padding: 10px 14px; }
    .msk-bottom-bar { padding: 0 14px 10px; }
    .msk-now-title { display: none; }
    .msk-top-show { font-size: 14px; }
    .msk-volume-group:hover .msk-volume-slider { width: 44px; }
}

/* ── Episode switcher panel ── */
.msk-episodes-panel {
    position: absolute; top: 60px; right: 20px; z-index: 2;
    width: 320px; max-height: 60%; overflow-y: auto;
    background: rgba(20,20,20,.97); border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.msk-episodes-open .msk-episodes-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.msk-ep-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; text-decoration: none; color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.msk-ep-row:hover { background: rgba(255,255,255,.08); }
.msk-ep-row-active { background: rgba(217,164,65,.12); }
.msk-ep-num { width: 26px; flex-shrink: 0; font-size: 12px; color: rgba(255,255,255,.6); text-align: center; }
.msk-ep-num svg.msk-ep-playing { width: 14px; height: 14px; color: var(--gold, #D9A441); }
.msk-ep-thumb { width: 64px; height: 36px; object-fit: cover; border-radius: 3px; flex-shrink: 0; background: #333; }
.msk-ep-thumb-blank { display: block; }
.msk-ep-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msk-ep-title { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msk-ep-duration { font-size: 11px; color: rgba(255,255,255,.5); }

@media (max-width: 640px) {
    .msk-episodes-panel { width: calc(100% - 28px); right: 14px; top: 54px; }
}

/* ── Language switcher (assets/js/mosaik-player.js, up to 6 tracks —
   English plus up to 5 filmmaker-added alternates, see
   includes/filmmaker-film-editor.php) ── */
.msk-lang-toggle { display: flex; align-items: center; gap: 4px; width: auto !important; padding: 0 10px !important; }
.msk-lang-toggle svg { width: 18px; height: 18px; }
.msk-lang-current { font-size: 11px; font-weight: 700; letter-spacing: .5px; }
.msk-lang-panel {
    position: absolute; bottom: 54px; right: 20px; z-index: 3;
    min-width: 160px; max-height: 260px; overflow-y: auto;
    background: rgba(20,20,20,.97); border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.msk-lang-menu-open .msk-lang-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.msk-lang-row {
    display: block; width: 100%; text-align: left; background: none; border: none;
    color: #fff; font-size: 13px; font-family: 'Outfit', sans-serif; cursor: pointer;
    padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.msk-lang-row:hover { background: rgba(255,255,255,.08); }
.msk-lang-row-active { background: rgba(217,164,65,.14); color: var(--gold, #D9A441); font-weight: 600; }

/* Subtitle/caption language panel — same visual treatment as the audio
   language panel above, opened from the captions (CC) button instead. */
.msk-cc-panel {
    position: absolute; bottom: 54px; right: 20px; z-index: 3;
    min-width: 160px; max-height: 260px; overflow-y: auto;
    background: rgba(20,20,20,.97); border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.msk-cc-menu-open .msk-cc-panel { opacity: 1; visibility: visible; transform: translateY(0); }

/* Quality selector panel — same treatment as the language/caption panels. */
.msk-quality-panel {
    position: absolute; bottom: 54px; right: 20px; z-index: 3;
    min-width: 140px; max-height: 260px; overflow-y: auto;
    background: rgba(20,20,20,.97); border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.msk-quality-menu-open .msk-quality-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.msk-quality-current { font-size: 11px; margin-left: 4px; opacity: .8; }
.msk-hls-active .msk-quality-toggle, .msk-hls-active .msk-quality-panel { display: none !important; }

/* Buffering spinner (Step: playback loading states) */
.msk-spinner-overlay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    pointer-events: none; opacity: 0; transition: opacity .2s ease; z-index: 2;
}
.msk-spinner-overlay.msk-spinner-visible { opacity: 1; }
.msk-spinner {
    width: 48px; height: 48px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,.2); border-top-color: var(--gold, #D9A441);
    animation: msk-spin .8s linear infinite;
}
@keyframes msk-spin { to { transform: rotate(360deg); } }

/* Error overlay (Step: robust error handling) */
.msk-error-overlay {
    position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
    background: rgba(0,0,0,.85); z-index: 5; text-align: center; padding: 20px;
}
.mosaik-player.msk-has-error .msk-error-overlay { display: flex; }
.msk-error-box { max-width: 320px; }
.msk-error-icon { font-size: 32px; margin-bottom: 10px; }
.msk-error-title { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.msk-error-msg { font-size: 13px; color: rgba(255,255,255,.7); margin-bottom: 16px; line-height: 1.5; }
.msk-error-retry {
    background: var(--gold, #D9A441); color: #0A0A0A; border: none; border-radius: 6px;
    padding: 10px 24px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.msk-error-retry:hover { opacity: .9; }

/* Continue-watching progress bar overlaid on posters */
.sf-cw-card { position: relative; }
.sf-cw-progress {
    position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: rgba(255,255,255,.25);
}
.sf-cw-progress > span {
    display: block; height: 100%; background: #D9A441;
}

/* Responsive poster images with lazy loading */
.sf-lazy-img {
    background: #111 center/cover no-repeat;
    display: block; width: 100%; height: 100%;
}
.sf-lazy-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Resumable uploader ── */
.sf-uploader {
    border: 1px dashed rgba(217,164,65,.5);
    border-radius: 8px;
    padding: 16px;
    background: rgba(255,255,255,.02);
}
.sf-uploader__bar {
    width: 100%; height: 8px; border-radius: 4px; background: rgba(255,255,255,.1);
    overflow: hidden; margin-top: 8px;
}
.sf-uploader__bar > span {
    display: block; height: 100%; width: 0%; background: linear-gradient(90deg,#D9A441,#f0c96a);
    transition: width .2s ease;
}
.sf-uploader__status { font-size: 12px; color: #aaa; margin-top: 6px; }
.sf-uploader__actions { margin-top: 8px; display: flex; gap: 8px; }
.sf-uploader__actions button {
    background: transparent; border: 1px solid rgba(217,164,65,.5); color: #D9A441;
    border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.sf-uploader__actions button:hover { background: rgba(217,164,65,.15); }

/* ── Creator studio processing badge ── */
.msk-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; margin-left: 6px; }

/* Accessibility: visible focus rings on interactive player elements */
.mosaik-player video:focus-visible {
    outline: 2px solid #D9A441;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .sf-uploader { padding: 10px; }
}

/* ══════════════════════════════════════════════════════════════════
   AD SLOTS (pre-roll / mid-roll / post-roll)
   Built by assets/js/mosaik-player.js — layered above the normal
   player chrome (z-index 4) while an ad is active. z-index 10 is
   deliberately higher than film-detail.php's #mfd-upnext-overlay
   (z-index 5, a sibling of this player container) so a post-roll ad
   fully covers that prompt instead of the two competing visually.
   Self-hosted, no external ad SDK. See includes/media/ads.php +
   ads-settings.php.
   ══════════════════════════════════════════════════════════════════ */
.msk-ad-overlay {
    position: absolute; inset: 0; z-index: 10;
    background: #000;
    display: none;
    font-family: 'Outfit', -apple-system, sans-serif;
    color: #fff;
}
.msk-ad-overlay.msk-ad-active { display: block; }

.msk-ad-video,
.msk-ad-image {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    background: #000;
    display: none;
}
.msk-ad-code {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    background: #000;
    display: none;
    align-items: center; justify-content: center;
    overflow: auto;
}
.msk-ad-overlay.msk-ad-type-video .msk-ad-video { display: block; }
.msk-ad-overlay.msk-ad-type-image .msk-ad-image { display: block; }
.msk-ad-overlay.msk-ad-type-code .msk-ad-code { display: flex; }

.msk-ad-topbar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(to bottom, rgba(0,0,0,.7), transparent);
}
.msk-ad-badge {
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: rgba(255,255,255,.15); padding: 4px 10px; border-radius: 4px;
}
.msk-ad-countdown { font-weight: 400; text-transform: none; opacity: .85; margin-left: 2px; }
.msk-ad-learnmore {
    color: #fff; font-size: 12px; font-weight: 600; text-decoration: none;
    border: 1px solid rgba(255,255,255,.5); border-radius: 4px; padding: 5px 12px;
}
.msk-ad-learnmore:hover { background: rgba(255,255,255,.15); }

.msk-ad-skip {
    position: absolute; bottom: 34px; right: 16px; z-index: 1;
    display: flex; align-items: center; gap: 4px;
    background: rgba(0,0,0,.75); color: #fff; border: 1px solid rgba(255,255,255,.4);
    border-radius: 4px; padding: 8px 14px; font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.msk-ad-skip svg { width: 16px; height: 16px; }
.msk-ad-skip:hover { background: rgba(0,0,0,.9); }
.msk-ad-skip[hidden] { display: none; }

.msk-ad-progress {
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: rgba(255,255,255,.2);
}
.msk-ad-progress-fill { height: 100%; background: var(--msk-accent, #e50914); width: 0%; }

@media (max-width: 640px) {
    .msk-ad-skip { bottom: 16px; right: 10px; padding: 6px 10px; font-size: 12px; }
    .msk-ad-topbar { padding: 8px 10px; }
}