/* Movie cards, trailer stage and Movies page. Scoped with .mv- so nothing else changes. */
.mv-card .sp-card-media{background:#0b1220}
.mv-card .sp-card-media img,.mv-card .mv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mv-video{background:#000;opacity:0;transition:opacity .35s ease;pointer-events:none}
.mv-card .is-playing .mv-video,.mv-stage.is-playing .mv-video{opacity:1}
.mv-card .sp-card-media::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(to top,rgba(2,6,23,.88),rgba(2,6,23,0));pointer-events:none}
.mv-badges{position:absolute;left:8px;top:8px;display:flex;gap:5px;z-index:2;flex-wrap:wrap;max-width:calc(100% - 56px)}
.mv-badge{background:rgba(2,6,23,.72);color:#fff;font:700 10px/1 var(--sp-font,system-ui);letter-spacing:.06em;text-transform:uppercase;padding:5px 7px;border-radius:6px;backdrop-filter:blur(4px)}
.mv-badge.q{background:var(--accent,#0f766e)}
.mv-sound{position:absolute;right:8px;top:8px;z-index:3;width:34px;height:34px;border:0;border-radius:50%;background:rgba(2,6,23,.72);color:#fff;display:none;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px)}
.mv-sound svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mv-sound .on{display:none}.mv-sound.is-on .on{display:block}.mv-sound.is-on .off{display:none}
.is-playing .mv-sound,.mv-stage.is-playing .mv-sound{display:inline-flex}
.mv-facts{position:absolute;left:10px;right:10px;bottom:9px;z-index:2;display:flex;flex-wrap:wrap;gap:4px 8px;color:#e2e8f0;font:600 11px/1.3 var(--sp-font,system-ui);pointer-events:none}
.mv-facts span+span::before{content:"·";margin-right:8px;opacity:.6}
.mv-rec{position:absolute;left:10px;bottom:30px;z-index:2;display:none;align-items:center;gap:5px;color:#fff;font:700 10px/1 var(--sp-font,system-ui);letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.mv-rec::before{content:"";width:7px;height:7px;border-radius:50%;background:#ef4444;animation:mvpulse 1.2s infinite}
.is-playing .mv-rec{display:inline-flex}
@keyframes mvpulse{50%{opacity:.25}}
.mv-genres{display:flex;flex-wrap:wrap;gap:4px;padding:0 2px 2px}
.mv-genres span{font:600 11px/1 var(--sp-font,system-ui);color:#475569;background:#f1f5f9;border-radius:99px;padding:4px 8px}
.mv-card .sp-card-title .sp-card-name{-webkit-line-clamp:2}
.mv-play{position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none;box-shadow:0 8px 24px rgba(2,6,23,.35);transition:opacity .25s}
.mv-play svg{width:22px;height:22px;fill:#0f172a;margin-left:3px}
.is-playing .mv-play{opacity:0}
.mv-nosrc .mv-play{display:none}

/* Detail page stage */
.mv-stage{position:relative;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;margin-bottom:12px;box-shadow:0 12px 32px rgba(2,6,23,.22)}
.mv-stage .mv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:1;pointer-events:auto}
.mv-stage .mv-stage-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(0);transition:opacity .35s}
.mv-stage.is-playing .mv-stage-poster{opacity:0;pointer-events:none}
.mv-stage .mv-sound{display:inline-flex;width:auto;height:36px;border-radius:99px;padding:0 13px;gap:7px;font:700 12px/1 var(--sp-font,system-ui)}
.mv-stage .mv-badges{top:10px;left:10px}
.mv-stage .mv-sound{right:10px;top:10px}
.mv-lock{display:flex;align-items:center;gap:8px;margin:10px 0 0;padding:10px 12px;border-radius:10px;background:#f0fdfa;color:#115e59;font:600 13px/1.4 var(--sp-font,system-ui)}
.mv-lock svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mv-info{display:grid;gap:10px;margin:14px 0}
.mv-chips{display:flex;flex-wrap:wrap;gap:6px}
.mv-chips span{font:700 12px/1 var(--sp-font,system-ui);color:#0f172a;background:#f1f5f9;border-radius:7px;padding:7px 9px}
.mv-chips span.q{background:var(--accent,#0f766e);color:#fff}

/* Movies page */
.mv-hero{border-radius:16px;background:linear-gradient(120deg,#020617,#0f2a3d 60%,#0f766e);color:#fff;padding:22px 20px;margin:0 0 16px}
.mv-hero h1{margin:0 0 4px;font:800 24px/1.2 var(--sp-font,system-ui)}
.mv-hero p{margin:0 0 14px;color:#cbd5e1;font-size:14px}
.mv-search{display:flex;gap:8px;max-width:520px}
.mv-search input{flex:1;min-width:0;border:0;border-radius:10px;padding:11px 13px;font-size:15px}
.mv-search button{border:0;border-radius:10px;background:#fff;color:#0f172a;font-weight:700;padding:0 16px;cursor:pointer}
.mv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
@media(min-width:900px){.mv-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}}
@media(prefers-reduced-motion:reduce){.mv-video{transition:none}.mv-rec::before{animation:none}}
.mv-media{position:relative}
.mv-manual .mv-play{opacity:1}


/* ===== V78 unified cards: one media ratio for every card so a row never has dead white space ===== */
:root{--sp-card-ratio:4/5}
.sp-card .sp-card-media{aspect-ratio:var(--sp-card-ratio);margin-top:4px;background:#eef2f1}
.sp-card{padding-bottom:12px}
/* Picture is always shown whole (no-crop policy) on a softly blurred copy of itself - no grey bars */
.sp-card-media .sp-card-bg{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);max-width:none!important;max-height:none!important;object-fit:cover!important;filter:blur(16px) saturate(1.15);opacity:.55;transform:none!important;pointer-events:none}
.sp-card-media img:not(.sp-card-bg){position:relative;z-index:1;width:100%;height:100%}
.sp-card:hover .sp-card-media .sp-card-bg{transform:none}
.sp-card-title{min-height:0}
.mv-card .sp-card-media img:not(.sp-card-bg){position:absolute;inset:0}

/* ===== Trailer polish ===== */
.mv-card .sp-card-media::after{height:52%;background:linear-gradient(to top,rgba(2,6,23,.82) 0,rgba(2,6,23,.35) 55%,rgba(2,6,23,0))}
.mv-card .mv-video{z-index:2}
.mv-card .sp-card-media::after{z-index:3}
.mv-card .mv-badges,.mv-card .mv-facts,.mv-card .mv-rec,.mv-card .mv-play,.mv-card .mv-progress{z-index:4}
.mv-badges{left:10px;top:10px;gap:6px}
.mv-badge{background:rgba(15,23,42,.55);border:1px solid rgba(255,255,255,.16);font-size:10px;letter-spacing:.08em;padding:5px 8px;border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mv-badge.q{background:rgba(15,118,110,.85);border-color:rgba(255,255,255,.18)}
.mv-sound{right:10px;top:10px;width:32px;height:32px;background:rgba(15,23,42,.55);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* centre play: glass disc with ring */
.mv-play{width:52px;height:52px;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.75);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 20px rgba(2,6,23,.35);transition:opacity .25s,transform .25s,background .2s}
.mv-play svg{fill:#fff;width:20px;height:20px;margin-left:3px}
.sp-card:hover .mv-play{transform:scale(1.07);background:rgba(255,255,255,.28)}
/* label pill: always visible. idle = play glyph, playing = pulsing red dot */
.mv-rec{display:inline-flex;left:10px;bottom:32px;gap:6px;align-items:center;padding:4px 9px 4px 7px;border-radius:999px;background:rgba(15,23,42,.55);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:10px;letter-spacing:.09em}
.mv-rec i{display:block;width:0;height:0;border-style:solid;border-width:4px 0 4px 7px;border-color:transparent transparent transparent #fff;background:none;border-radius:0;animation:none}
.mv-rec::before{content:none}
.is-playing .mv-rec{display:inline-flex}
.is-playing .mv-rec i{width:7px;height:7px;border:0;border-radius:50%;background:#ef4444;animation:mvpulse 1.2s infinite}
.mv-facts{left:12px;bottom:12px;font-size:11px;font-weight:600;color:#e2e8f0;text-shadow:0 1px 2px rgba(0,0,0,.5)}
/* thin progress bar on the bottom edge */
.mv-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.18);opacity:0;transition:opacity .25s;pointer-events:none}
.mv-progress b{display:block;height:100%;width:calc(var(--p,0)*100%);background:#fff}
.is-playing .mv-progress{opacity:1}
.mv-nosrc .mv-play,.mv-nosrc .mv-rec,.mv-nosrc .mv-progress{display:none}
@media(max-width:560px){.mv-play{width:44px;height:44px}.mv-play svg{width:17px;height:17px}.mv-rec{bottom:30px}.mv-badge{font-size:9px;padding:4px 7px}}
@media(prefers-reduced-motion:reduce){.mv-progress{transition:none}.mv-play{transition:none}}

/* ===== Sound button: always visible, icon always drawn ===== */
.mv-card .mv-sound,.mv-stage .mv-sound{display:inline-flex!important;align-items:center;justify-content:center;z-index:6;padding:0;color:#fff!important;background:rgba(15,23,42,.62)!important;border:1px solid rgba(255,255,255,.22)!important;cursor:pointer}
.mv-card .mv-sound:hover{background:rgba(15,23,42,.82)!important}
.mv-card .mv-sound svg,.mv-stage .mv-sound svg{width:17px;height:17px;fill:none!important;stroke:#fff!important;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mv-sound svg.off{display:block}.mv-sound svg.on{display:none}
.mv-sound.is-on svg.on{display:block}.mv-sound.is-on svg.off{display:none}
.mv-card .mv-sound.is-on{background:rgba(15,118,110,.9)!important}

/* ===== V79 professional polish =====
   1) Opening a movie from a card no longer paints the generic white box over the video: the card
      dims softly with a spinner, and the video itself is hidden so the browser's own buffering
      spinner never shows through.
   2) The movie page uses the same round sound icon as the cards (no text pill). */
.mv-card .sp-card-media,.mv-stage,.mv-sound{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
.mv-card .sp-card-media:focus{outline:none}
.mv-card .sp-card-media:focus-visible{outline:3px solid rgba(20,184,166,.45);outline-offset:-3px;border-radius:inherit}
.sp-card.mv-card.is-opening .sp-card-media::after{content:"";position:absolute;inset:0;height:auto;z-index:7;background:rgba(2,6,23,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:mvOpen .18s ease-out both}
.sp-card.mv-card.is-opening .sp-card-media::before{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:3px solid rgba(255,255,255,.28);border-top-color:#fff;z-index:8;animation:sp-spin .7s linear infinite}
.sp-card.mv-card.is-opening .mv-video{opacity:0!important;visibility:hidden}
.sp-card.mv-card.is-opening .mv-play,.sp-card.mv-card.is-opening .mv-rec{opacity:0}
@keyframes mvOpen{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.sp-card.mv-card.is-opening .sp-card-media::after{animation:none}}

.mv-stage .mv-sound{width:32px;height:32px;padding:0;gap:0;border-radius:50%;right:10px;top:10px}
.mv-stage .mv-sound.is-on{background:rgba(15,118,110,.9)!important}
.mv-stage .mv-sound:hover{background:rgba(15,23,42,.82)!important}
.mv-stage .mv-sound.is-on:hover{background:rgba(15,118,110,1)!important}
/* One sound control only: hide the browser's own mute/volume widgets inside the stage */
.mv-stage video::-webkit-media-controls-mute-button,.mv-stage video::-webkit-media-controls-volume-slider,.mv-stage video::-webkit-media-controls-volume-slider-container{display:none!important}
.mv-stage video:focus{outline:none}