/* ============================================================================
   SANDIX+  |  Video Modal + Immersive Player  (sandix-video-modal.css)
   ----------------------------------------------------------------------------
   Visual language reuses the SANDIX+ tokens (see sandix-theme.css: this file
   works with or without that stylesheet also being linked, since every
   token below has a warm, on-brand fallback baked in) and the Playfair
   Display + DM Sans pairing already used for the site's more premium
   surfaces. Mobile-first: base rules target small screens, the details
   dialog is progressively upgraded into a large centered surface from
   640px / 1024px up.

   Two very different presentations share this file:
     - .svm-view-details : a centered dialog. Discovery only: poster,
       synopsis, cast, genres, episode picker. Never plays video itself.
     - .svm-view-player   : once "Play" is pressed, the same root element
       switches into "player mode" (see the .svm-player-mode rules near
       the PLAYER section) and the dialog sheds every modal trapping
       (max-width, border radius, backdrop blur, centered margins) to
       become a full-viewport watch page instead of a boxed-in player.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --svm-red: var(--sandix-red, hsl(9 72% 45%));
  --svm-red-hover: var(--sandix-red-hover, hsl(9 72% 52%));
  --svm-gold: var(--sandix-gold, hsl(38 62% 58%));
  --svm-cyan: var(--svm-gold); /* legacy name, now points at the warm gold accent */
  --svm-bg: var(--sandix-bg, hsl(30 13% 6%));
  --svm-surface: var(--sandix-surface, hsl(28 12% 11%));
  --svm-surface-2: var(--sandix-surface-2, hsl(27 11% 15%));
  --svm-border: var(--sandix-border, hsl(32 24% 86% / .10));
  --svm-text: var(--sandix-text, hsl(32 24% 86%));
  --svm-text-strong: var(--sandix-text-strong, hsl(34 30% 95%));
  --svm-text-dim: var(--sandix-text-dim, hsl(32 18% 68%));
  --svm-text-faint: var(--sandix-text-faint, hsl(32 14% 50%));
  --svm-radius: 14px;
}

html.svm-lock-scroll { overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════════
   ROOT / OVERLAY / DIALOG SHELL
   ══════════════════════════════════════════════════════════════════════ */

.svm {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  font-family: 'DM Sans', Arial, sans-serif;
  color: var(--svm-text);
}
.svm.svm-open { display: block; }

.svm-overlay {
  position: absolute;
  inset: 0;
  background: hsl(20 30% 2% / .82);
  backdrop-filter: blur(6px) saturate(0.5);
  animation: svmFadeIn .25s ease both;
}

.svm-dialog {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  max-width: 100%;
  background: var(--svm-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: svmSlideUp .32s cubic-bezier(.16, 1, .3, 1) both;
}

@media (min-width: 720px) {
  .svm-dialog {
    top: 4vh;
    height: 92vh;
    max-width: 900px;
    border-radius: var(--svm-radius);
    border: 1px solid var(--svm-border);
    box-shadow: 0 30px 90px hsl(20 30% 2% / .6);
  }
}

@media (min-width: 1180px) {
  .svm-dialog { max-width: 1040px; }
}

/* ══════════════════════════════════════════════════════════════════════
   PLAYER MODE
   ----------------------------------------------------------------------
   The details view lives in a centered dialog (rules above). The moment
   playback starts, the JS adds .svm-player-mode on the root element and
   the SAME dialog sheds every "boxed modal" trait, at every breakpoint,
   so watching a film feels like landing on its own dedicated page: no
   margins, no max-width, no rounded corners, no floating card, no dimmed
   backdrop behind it. It fills the entire browser viewport edge to edge.
   Leaving the player (Back or Close) removes the class and the dialog
   springs back to its normal centered presentation size.
   ══════════════════════════════════════════════════════════════════════ */

.svm.svm-player-mode .svm-overlay { opacity: 0; }

.svm.svm-player-mode .svm-dialog {
  position: fixed;
  inset: 0;
  top: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* correct viewport height on mobile browsers with dynamic chrome */
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: var(--svm-bg);
  animation: none;
}

@keyframes svmFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes svmSlideUp { from { opacity: 0; transform: translateY(18px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .svm-overlay, .svm-dialog, .svm-view, .svm-controls { animation: none !important; transition: none !important; }
}

.svm-close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 30;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: hsl(20 30% 2% / .55);
  border: 1px solid hsl(32 24% 86% / .12);
  color: var(--svm-text-strong);
  cursor: pointer;
  transition: background .18s, transform .18s;
}
.svm-close:hover { background: hsl(20 30% 2% / .8); transform: scale(1.06); }
.svm-close:focus-visible, .svm button:focus-visible, .svm select:focus-visible, .svm input:focus-visible {
  outline: 2px solid var(--svm-cyan);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════
   VIEWS
   ══════════════════════════════════════════════════════════════════════ */

.svm-view { position: absolute; inset: 0; }
.svm-view[hidden] { display: none; }
.svm-view-details { overflow: hidden; }
.svm-scroll { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ══════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════ */

.svm-hero {
  /* The poster is the focal point of this whole view, so it gets a
     dedicated box sized to *exactly* match its own real proportions -
     the JS (fitHeroToPoster()) reads the poster's natural width/height
     once it loads and sets that as this element's aspect-ratio inline,
     overriding the fallback ratio below. object-fit:contain on
     .svm-hero-img then fills that box edge to edge with zero letterbox,
     whatever the poster's shape (portrait, landscape, ultra-wide banner
     key art, etc). A softly blurred copy of the same artwork fills the
     space behind it (see .svm-hero-media::before) purely as decoration.
     Only max-height remains as a ceiling, so a pathologically tall
     portrait image can't push the whole page down forever - there is
     deliberately NO min-height anymore: a floor here is exactly what
     used to leave a dead black band under wide/short banner posters
     once their real (short) height was applied, so it's gone for good. */
  position: relative;
  width: 100%;
  max-height: 62vh;
  aspect-ratio: 3 / 4;
  background: var(--svm-bg);
  overflow: hidden;
}
@media (min-width: 720px) {
  .svm-hero { aspect-ratio: 21 / 10; max-height: 68vh; }
}

.svm-hero-media { position: absolute; inset: 0; overflow: hidden; }

/* Blurred, scaled-up copy of the poster filling the whole box behind the
   crisp foreground image - keeps the header feeling full and immersive
   even when the real poster (contain'd, so always fully visible) doesn't
   itself reach every edge. Driven purely by the --svm-hero-bg custom
   property, set alongside svmHeroImg.src in openFilm()/openSeries(). */
.svm-hero-media::before {
  content: '';
  position: absolute;
  inset: -10%;
  background-image: var(--svm-hero-bg, none);
  background-size: cover;
  background-position: center;
  filter: blur(32px) brightness(.55) saturate(1.15);
  transform: scale(1.1);
}

.svm-hero-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Soft fade at the very bottom edge of the box, purely to ease the
   transition into .svm-body's flat background beneath it - no text
   sits on top of the poster anymore, so this is decorative only. */
.svm-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 18%;
  background: linear-gradient(to top, var(--svm-bg), transparent);
  pointer-events: none;
}

/* On PC, clicking the poster plays the title - same action as the Play
   button - so it needs to look and behave clickable. Mobile leaves this
   alone (tapping the image does nothing special there; Play stays the
   one obvious tap target). */
@media (min-width: 720px) {
  .svm-hero-media.svm-hero-clickable { cursor: pointer; }
  .svm-hero-media.svm-hero-clickable:hover .svm-hero-img { filter: brightness(1.06); }
}

/* Title/badges/CTA row: no longer overlaid on the poster - it's the
   first block inside .svm-body, directly under the (now much bigger)
   poster, clearly separated from it instead of floating on top of it. */
.svm-hero-content {
  padding: 22px 0 22px;
  border-bottom: 1px solid var(--svm-border);
  margin-bottom: 22px;
}
@media (min-width: 720px) {
  .svm-hero-content { padding: 28px 0 0; margin-bottom: 0; }
}

.svm-eyebrow-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }

.svm-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--svm-cyan);
  padding-left: 12px;
  position: relative;
}
.svm-eyebrow::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--svm-red);
}

.svm-resume-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--svm-text-strong);
  background: hsl(32 24% 86% / .12);
  border: 1px solid hsl(32 24% 86% / .18);
  padding: 3px 9px;
  border-radius: 100px;
}

.svm-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(26px, 6vw, 44px);
  line-height: 1.08;
  letter-spacing: -.01em;
  margin: 0 0 12px;
  color: var(--svm-text-strong);
}

.svm-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.svm-chip {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--svm-text-dim);
}
.svm-chip:not(:last-child)::after { content: '•'; margin-left: 8px; color: var(--svm-text-faint); }
.svm-chip-outline {
  font-size: 11px;
  font-weight: 600;
  border: 1px solid hsl(32 24% 86% / .35);
  padding: 1px 7px;
  border-radius: 4px;
  color: var(--svm-text-dim);
}

.svm-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.svm-play {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--svm-text-strong); color: var(--svm-bg);
  border: none; border-radius: 6px;
  padding: 12px 22px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  transition: background .16s, transform .12s;
}
.svm-play:hover { background: hsl(34 25% 88%); }
.svm-play:active { transform: scale(.97); }

.svm-icon-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: hsl(32 24% 86% / .08);
  border: 1px solid hsl(32 24% 86% / .14);
  color: var(--svm-text-strong);
  border-radius: 6px;
  padding: 11px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background .16s, border-color .16s;
  white-space: nowrap;
}
.svm-icon-btn svg { pointer-events: none; flex-shrink: 0; }
.svm-icon-btn span { pointer-events: none; }
.svm-icon-btn:hover { background: hsl(32 24% 86% / .16); }
.svm-icon-btn.is-active { border-color: var(--svm-red); background: hsl(9 72% 45% / .18); }
.svm-icon-btn.is-active svg { stroke: var(--svm-red); fill: var(--svm-red); }

/* On very small screens, action labels collapse to icons-only to avoid crowding */
@media (max-width: 420px) {
  .svm-icon-btn span { display: none; }
  .svm-icon-btn { padding: 11px; }
}

/* ══════════════════════════════════════════════════════════════════════
   BODY / DETAILS
   ══════════════════════════════════════════════════════════════════════ */

.svm-body { padding: 26px 18px 40px; }
@media (min-width: 720px) { .svm-body { padding: 34px 40px 56px; display: grid; grid-template-columns: minmax(0,1fr); gap: 28px; } }

/* On PC, the synopsis/cast/genres live inside .svm-more-panel, tucked
   away behind the "More information" chevron so the poster stays the
   focal point (see JS applyDesktopCollapse()). On mobile the panel is
   always shown and everything stays visible/scrollable as before. */
.svm-more-panel[hidden] { display: none; }

.svm-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--svm-text-dim);
  max-width: 68ch;
  margin: 0 0 14px;
  /* Long words (or a run-on word with no spaces) used to be able to push
     past the edge of the modal instead of wrapping - on narrow phone
     widths that reads as the description "bugging out". Forcing a wrap
     here means it always breaks to the next line immediately rather
     than overflowing or shrinking the rest of the layout. */
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.svm-more-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  color: var(--svm-text-faint);
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 0 0 16px;
}
.svm-more-toggle:hover { color: var(--svm-text-dim); }
.svm-more-toggle svg { transition: transform .2s; }
.svm-more-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.svm-meta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 24px;
  margin-bottom: 18px;
  padding: 16px 0 4px;
  border-top: 1px solid var(--svm-border);
}
@media (min-width: 640px) { .svm-meta-grid { grid-template-columns: 1fr 1fr; } }

.svm-meta-row { font-size: 13.5px; line-height: 1.5; }
.svm-meta-label {
  display: block;
  color: var(--svm-text-faint);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 2px;
}
.svm-meta-val { color: var(--svm-text); }

/* Clickable director/writer/cast/production/creator names (see
   renderPeople() in sandix-video-modal.js) - handed off to the host
   page's own search via window.sandixSearchPerson. Styled to read as
   text, not a button, until hovered/focused. */
.svm-person-link {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: none;
}
.svm-person-link:hover,
.svm-person-link:focus-visible {
  color: var(--sandix-red, #c53920);
  text-decoration: underline;
}

.svm-genres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.svm-genre-pill {
  font-size: 12px; font-weight: 500;
  padding: 5px 12px;
  border-radius: 100px;
  background: hsl(32 24% 86% / .06);
  border: 1px solid var(--svm-border);
  color: var(--svm-text-dim);
}

.svm-attribution {
  margin-top: 18px;
  font-size: 11.5px; font-style: italic;
  color: var(--svm-text-faint);
}

/* ══════════════════════════════════════════════════════════════════════
   SERIES / EPISODES
   ══════════════════════════════════════════════════════════════════════ */

.svm-series { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--svm-border); }
.svm-series-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.svm-series-head h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 19px; font-weight: 600; margin: 0;
}

.svm-season-select-wrap select {
  background: var(--svm-surface);
  color: var(--svm-text-strong);
  border: 1px solid var(--svm-border);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
}

.svm-episode-list { display: flex; flex-direction: column; gap: 8px; }

.svm-episode {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  background: hsl(32 24% 86% / .03);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  text-align: left;
  color: var(--svm-text);
  transition: background .15s, border-color .15s;
}
.svm-episode:hover { background: hsl(32 24% 86% / .07); }
.svm-episode.is-active { border-color: var(--svm-red); background: hsl(9 72% 45% / .10); }

.svm-episode-thumb {
  position: relative;
  flex-shrink: 0;
  width: 108px; aspect-ratio: 16/9;
  border-radius: 6px;
  overflow: hidden;
  background: var(--svm-surface-2);
}
.svm-episode-thumb img { width: 100%; height: 100%; object-fit: cover; }
.svm-episode-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: hsl(20 30% 2% / .35);
  opacity: 0;
  transition: opacity .15s;
  color: var(--svm-text-strong);
}
.svm-episode:hover .svm-episode-play { opacity: 1; }
.svm-episode-progress-dot {
  position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--svm-cyan);
}

.svm-episode-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.svm-episode-num {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--svm-text-faint);
}
.svm-episode-title {
  font-size: 14px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   PLAYER
   ══════════════════════════════════════════════════════════════════════ */

.svm-view-player { background: var(--svm-bg); }

.svm-back {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 30;
  display: flex; align-items: center; gap: 6px;
  background: hsl(20 30% 2% / .55);
  border: 1px solid hsl(32 24% 86% / .12);
  color: var(--svm-text-strong);
  border-radius: 100px;
  padding: 8px 14px 8px 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.svm-back:hover { background: hsl(20 30% 2% / .8); }

.svm-player-stage {
  position: relative;
  width: 100%; height: 100%;
  background: var(--svm-bg);
  outline: none;
}

#svmVideo { width: 100%; height: 100%; object-fit: contain; background: var(--svm-bg); display: block; }

.svm-overlay-state {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 14px;
  background: hsl(20 30% 2% / .55);
  text-align: center; padding: 24px;
  z-index: 15;
}

.svm-spinner {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 3px solid hsl(32 24% 86% / .2);
  border-top-color: var(--svm-red);
  animation: svmSpin .8s linear infinite;
}
@keyframes svmSpin { to { transform: rotate(360deg); } }

.svm-error p { font-size: 14.5px; color: var(--svm-text-dim); max-width: 40ch; }
.svm-error-code {
  font-size: 11px !important;
  letter-spacing: .04em;
  color: hsl(32 24% 86% / .4) !important;
  margin-top: -10px !important;
  max-width: none !important;
}
.svm-error-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.svm-skip-intro {
  position: absolute;
  right: 16px; bottom: 92px;
  z-index: 20;
  background: hsl(28 12% 9% / .85);
  border: 1px solid hsl(32 24% 86% / .25);
  color: var(--svm-text-strong);
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
}

/* ── Controls bar ── */

.svm-controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  padding: 22px 14px 14px;
  background: linear-gradient(to top, hsl(20 30% 2% / .85), transparent);
  transition: opacity .25s, transform .25s;
}
.svm-controls.svm-controls-hidden { opacity: 0; transform: translateY(6px); pointer-events: none; }

.svm-progress-wrap { position: relative; height: 16px; margin-bottom: 6px; display: flex; align-items: center; }
.svm-progress-track {
  position: absolute; left: 0; right: 0;
  height: 4px; border-radius: 100px;
  background: hsl(32 24% 86% / .25);
  overflow: hidden;
  pointer-events: none;
}
.svm-progress-buffer { position: absolute; inset: 0; width: 0%; background: hsl(32 24% 86% / .35); }
.svm-progress-fill { position: absolute; inset: 0; width: 0%; background: var(--svm-red); }
.svm-seek {
  position: relative; z-index: 2;
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 16px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.svm-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--svm-text-strong);
  margin-top: 0;
  box-shadow: 0 0 0 3px hsl(20 30% 2% / .25);
}
.svm-seek::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--svm-text-strong); border: none; }
.svm-seek::-moz-range-track { background: transparent; }

.svm-controls-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }

.svm-ctrl {
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  background: none; border: none; color: var(--svm-text-strong);
  width: 36px; height: 36px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
}
.svm-ctrl:hover { background: hsl(32 24% 86% / .12); }
.svm-ctrl-label { width: auto; padding: 0 10px; font-size: 12.5px; font-weight: 600; }

.svm-volume { position: relative; display: none; align-items: center; gap: 4px; }
@media (min-width: 560px) { .svm-volume { display: flex; } }
.svm-volume input[type="range"] {
  width: 70px; height: 4px;
  accent-color: var(--svm-red);
  cursor: pointer;
}

/* ── Netflix-style volume: bars-count icon + vertical popup slider ──
   Icon: a static speaker cone plus three independent "sound wave" arcs
   that fade in cumulatively (1/2/3 bars) as volume rises, and a bold
   mute slash that replaces all arcs at 0%/muted. Popup: a small vertical
   panel above the button, hidden until hovered/focused, with a
   Netflix-like animated fill track built from a native <input
   type="range"> rotated -90deg (the standard cross-browser technique,
   since a handful of browsers don't support orient="vertical") sitting
   over a separate fill bar that grows/shrinks with a smooth transition. */
.svm-vol-icon { display: block; color: var(--svm-text-strong); }
.svm-vol-bar { opacity: 0; transition: opacity .15s ease; }
.svm-vol-icon.lvl-1 .svm-vol-bar-1 { opacity: 1; }
.svm-vol-icon.lvl-2 .svm-vol-bar-2 { opacity: 1; }
.svm-vol-icon.lvl-3 .svm-vol-bar-3 { opacity: 1; }
.svm-vol-mute-x { opacity: 0; transition: opacity .15s ease; }
.svm-vol-icon.is-muted .svm-vol-bar { opacity: 0; }
.svm-vol-icon.is-muted .svm-vol-mute-x { opacity: 1; }

.svm-vol-popup {
  position: absolute;
  bottom: 40px; left: 50%;
  width: 40px; height: 116px;
  display: flex; align-items: center; justify-content: center;
  background: hsl(28 12% 9% / .97);
  border: 1px solid hsl(32 24% 86% / .12);
  border-radius: 8px;
  box-shadow: 0 12px 32px hsl(20 30% 2% / .5);
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 40;
}
.svm-volume:hover .svm-vol-popup,
.svm-volume:focus-within .svm-vol-popup {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.svm-vol-track {
  position: relative;
  width: 4px; height: 84px;
  background: hsl(32 24% 86% / .25);
  border-radius: 2px;
}
.svm-vol-fill {
  position: absolute;
  bottom: 0; left: 0; width: 100%;
  height: 100%;
  background: var(--svm-red);
  border-radius: 2px;
  transition: height .12s ease;
}
.svm-vol-track input[type="range"] {
  position: absolute;
  top: 50%; left: 50%;
  width: 84px; height: 16px;
  margin: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
  -webkit-appearance: none; appearance: none;
  background: transparent;
  cursor: pointer;
  accent-color: var(--svm-red);
}
.svm-vol-track input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.svm-vol-track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--svm-text-strong); border: none;
  box-shadow: 0 0 0 3px hsl(20 30% 2% / .25);
}
.svm-vol-track input[type="range"]::-moz-range-track { background: transparent; }
.svm-vol-track input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--svm-text-strong); border: none;
}

.svm-time { font-size: 12.5px; color: var(--svm-text-dim); white-space: nowrap; margin-left: 2px; }
.svm-spacer { flex: 1; }

.svm-menu-wrap { position: relative; flex-shrink: 0; }
.svm-menu {
  position: absolute;
  bottom: 46px; right: 0;
  background: hsl(28 12% 9% / .97);
  border: 1px solid hsl(32 24% 86% / .12);
  border-radius: 8px;
  padding: 6px;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  box-shadow: 0 12px 32px hsl(20 30% 2% / .5);
  z-index: 40;
}
.svm-menu button {
  display: block; width: 100%; text-align: left;
  background: none; border: none; color: var(--svm-text-strong);
  font-size: 13px; padding: 8px 10px;
  border-radius: 5px; cursor: pointer;
}
.svm-menu button:hover { background: hsl(32 24% 86% / .08); }
.svm-menu button.is-active { color: var(--svm-cyan); font-weight: 600; }

/* Quality menu: each row can carry a small secondary line - either a
   Premium-lock notice (still clickable, opens the upgrade prompt) or an
   "unavailable for this title" notice (genuinely disabled: the title's
   own data has no URL for that resolution, so there is nothing to
   switch to - see renderQualityMenu()'s honesty note in the JS). */
.svm-quality-label { display: block; }
.svm-quality-note {
  display: block;
  font-size: 10.5px;
  color: var(--svm-text-dim);
  margin-top: 1px;
  font-weight: 400;
}
.svm-menu button.is-locked .svm-quality-note { color: hsl(9 72% 62%); }
.svm-menu button.is-disabled {
  cursor: not-allowed;
  opacity: .4;
}
.svm-menu button.is-disabled:hover { background: none; }

/* Hide the label of secondary control buttons on very narrow screens */
@media (max-width: 480px) {
  .svm-time { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   END SCREEN  (shown when the main content finishes playing)
   ----------------------------------------------------------------------
   Netflix-style: a film shows a small grid of similar titles to watch
   next; a series shows a single "Up Next" card for the next episode
   with a countdown, plus explicit Home / Next Episode actions.
   ══════════════════════════════════════════════════════════════════════ */
.svm-endscreen {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 32px 20px;
  background: linear-gradient(hsl(20 30% 2% / .55), hsl(20 30% 2% / .92) 55%);
  text-align: center;
  overflow-y: auto;
}
.svm-endscreen[hidden] { display: none; }

.svm-endscreen-title {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--svm-text-dim);
  text-transform: uppercase;
}

/* ── Series: "Up Next" card ── */
.svm-upnext {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 420px;
  width: 100%;
}
.svm-upnext-media {
  position: relative;
  width: min(280px, 70vw);
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--svm-surface);
  cursor: pointer;
  box-shadow: var(--sandix-shadow, 0 20px 60px hsl(20 30% 2% / .6));
}
.svm-upnext-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svm-upnext-media .svm-upnext-play {
  position: absolute; inset: 0; margin: auto;
  width: 52px; height: 52px; border-radius: 50%;
  background: hsl(0 0% 100% / .92);
  color: #000;
  display: flex; align-items: center; justify-content: center;
}
.svm-upnext-ring {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px;
}
.svm-upnext-ring circle {
  fill: none;
  stroke-width: 3;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.svm-upnext-ring .track { stroke: hsl(0 0% 100% / .25); }
.svm-upnext-ring .bar { stroke: var(--svm-red); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }

.svm-upnext-label { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--svm-text-dim); }
.svm-upnext-ep { font-size: 13.5px; color: var(--svm-text-dim); }
.svm-upnext-title { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 600; color: var(--svm-text-strong); }

.svm-endscreen-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.svm-es-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  border-radius: 6px;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  border: 1px solid hsl(32 24% 86% / .25);
  background: hsl(32 24% 86% / .1);
  color: var(--svm-text-strong);
}
.svm-es-btn:hover { background: hsl(32 24% 86% / .18); }
.svm-es-btn.is-primary { background: var(--svm-red); border-color: var(--svm-red); }
.svm-es-btn.is-primary:hover { background: var(--svm-red-hover); }

/* ── Film: "You might also like" grid ── */
.svm-endscreen-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 620px;
  width: 100%;
}
.svm-rec-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 2 / 3;
  background: var(--svm-surface);
}
.svm-rec-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svm-rec-card-title {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 8px 8px;
  font-size: 12px; font-weight: 600;
  color: #fff;
  background: linear-gradient(to top, hsl(20 30% 2% / .9), transparent);
  text-align: left;
}
@media (min-width: 480px) {
  .svm-endscreen-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════════════
   TOAST (share link copied, etc.)
   ══════════════════════════════════════════════════════════════════════ */

.svm-toast {
  position: absolute;
  left: 50%; bottom: 24px;
  transform: translate(-50%, 10px);
  background: hsl(28 12% 9% / .95);
  border: 1px solid hsl(32 24% 86% / .15);
  color: var(--svm-text-strong);
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 100px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 60;
  white-space: nowrap;
}
.svm-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ══════════════════════════════════════════════════════════════════════
   PREMIUM ACCESS POP-UP (built at runtime by sandix-access.js)
   ══════════════════════════════════════════════════════════════════════ */

.sandix-access-overlay {
  position: fixed;
  inset: 0;
  /* Must outrank .svm (z-index: 2000): this pop-up is meant to be
     triggerable from INSIDE the already-open video modal (Play button
     on a Premium title while the details sheet is open, and now also
     the Premium quality tiers in the player's Quality menu). At
     z-index 200 it was rendering visually behind the open modal -
     "hidden: false" in the DOM but invisible on screen - so a Free
     user who clicked Play on a Premium title would just see nothing
     happen with no way to know why. */
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: hsl(20 30% 2% / 0);
  transition: background .25s ease;
}
.sandix-access-overlay.is-open { background: hsl(20 30% 2% / .78); }
.sandix-access-overlay[hidden] { display: none; }

.sandix-access-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--svm-surface, hsl(28 12% 11%));
  border: 1px solid hsl(32 24% 86% / .12);
  border-radius: 16px;
  padding: 36px 28px 28px;
  text-align: center;
  box-shadow: 0 24px 64px hsl(20 30% 2% / .6);
  transform: translateY(14px) scale(.97);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.sandix-access-overlay.is-open .sandix-access-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.sandix-access-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border: none;
  background: hsl(32 24% 86% / .08);
  color: var(--svm-text-strong, #fff);
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.sandix-access-close:hover { background: hsl(32 24% 86% / .16); }

.sandix-access-mark {
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--svm-text-strong, #fff);
  margin-bottom: 18px;
  font-size: 15px;
}
.sandix-access-mark .plus { color: var(--svm-red); }

.sandix-access-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--svm-text-strong, #fff);
  margin-bottom: 10px;
}

.sandix-access-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--svm-text-dim, hsl(32 24% 86% / .7));
  margin-bottom: 26px;
}

.sandix-access-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sandix-access-cta {
  display: block;
  background: var(--svm-red);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s ease;
}
.sandix-access-cta:hover { background: var(--svm-red-hover); }

.sandix-access-dismiss {
  background: none;
  border: none;
  color: var(--svm-text-dim, hsl(32 24% 86% / .7));
  font-size: 13px;
  padding: 6px;
  cursor: pointer;
}
.sandix-access-dismiss:hover { color: var(--svm-text-strong, #fff); }