/* =========================================================
   VANNY DESIGN — movies.css
   Styles for the Movies & TV Shows storefront (movies.html) and the
   watch page (movie-player.html). Reuses style.css's own theme tokens
   (--bg-body, --card-bg, --text-primary, --royal-blue, etc.) but forces
   them to a fixed dark palette below — a MovieBox-style browsing
   experience is always dark, independent of the site-wide light/dark
   toggle every other page (index, gears, account, admin, ...) still
   offers. This file only ever loads on these two pages, so none of the
   overrides below reach anywhere else on the site.
========================================================= */

/* Always-dark MovieBox palette. Overrides the same custom properties
   style.css defines for :root (light, the default) and for
   html[data-theme="dark"] — covering the "unset", "light", and "dark"
   states of the toggle all at once, so these two pages render dark no
   matter what a visitor last picked while browsing the rest of the site.
   (html[data-theme="dark"] normally outranks a plain :root rule on
   specificity; repeating the same values under that selector too keeps
   this override intact even then instead of relying on style.css's own,
   very similar, dark tokens.) */
:root,
html[data-theme="dark"] {
  --bg-body: #0b0e17;
  --bg-surface: #10141f;
  --bg-header: #10141f;
  --border-color: #1c2330;
  --text-primary: #f1f5f9;
  --text-secondary: #b4bccb;
  --text-muted: #7c869c;

  --card-bg: #10141f;
  --card-border: #1c2330;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);

  --header-text: #f1f5f9;
  --header-text-muted: #b4bccb;
  --header-chip-bg: #171d2b;
  --header-chip-bg-hover: #1c2330;
  --header-border: #1c2330;

  color-scheme: dark;
}

/* The toggle has nothing to switch to on these pages any more — hiding
   it rather than leaving a control that visibly does nothing. */
#theme-toggle {
  display: none;
}

/* All of the movies pages' own inner containers (hero, search bar,
   section grids, player info, comments) read this instead of the
   site-wide --container-max (1100px) directly, so they can go wider
   together on large desktop screens without touching that shared token
   — every other page on the site keeps its existing 1100px cap. Defined
   at :root (not scoped to .movies-page) because the search bar lives in
   #sticky-top, a sibling of <main class="movies-page">, not a
   descendant — a custom property only inherits down the DOM tree, so a
   shared ancestor is needed for both to read the same value. This is
   safe at :root because movies.css is only ever loaded on movies.html
   and movie-player.html. */
:root {
  --movies-container-max: var(--container-max);
}

/* Desktop breakpoint starts at 1024px (not 1400px) per the MovieBox
   edge-to-edge spec — a first, more modest widening kicks in there, with
   the wider 1400px+ tier below going further still. */
@media (min-width: 1024px) {
  :root {
    --movies-container-max: 1400px;
  }

  .page-container.movies-page {
    max-width: var(--movies-container-max);
    padding-left: 32px;
    padding-right: 32px;
  }
}

.movies-page {
  padding-bottom: 90px; /* clears the fixed bottom-nav-bar */
  /* Belt-and-braces alongside the same rule on html/body in style.css —
     clips any stray internal overflow without touching this container's
     own max-width/centering behavior (which the desktop breakpoints
     below still rely on). */
  overflow-x: hidden;
}

/* Edge-to-edge desktop layout: at wide viewports the shared 1100px cap
   leaves large empty margins on either side of the page — widen just
   these pages' own containers instead of the site-wide token. Widening
   --movies-container-max alone only affects the section-level containers
   below (.movies-hero, .movies-section, .player-info, etc.) — the shared
   .page-container they all sit inside also needs its own max-width
   raised to match, or it would just re-clip its children back down to
   the site-wide 1100px regardless of what they ask for themselves. */
@media (min-width: 1400px) {
  :root {
    --movies-container-max: 1700px;
  }

  .page-container.movies-page {
    max-width: var(--movies-container-max);
    padding-left: 48px;
    padding-right: 48px;
  }
}

/* ---------------------------------------------------------
   GLOWING GLASSMORPHISM HEADER — frosted blur + a subtle cyan glow along
   the bottom edge, replacing the site's plain opaque header on just
   these two pages. #sticky-top is the actual sticky element (see
   style.css); .site-header sits inside it.
--------------------------------------------------------- */
#sticky-top {
  background: rgba(11, 14, 23, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-header {
  background: transparent;
  border-bottom: 1px solid rgba(34, 211, 238, 0.2);
  box-shadow: 0 1px 24px rgba(34, 211, 238, 0.12);
}

/* ---------------------------------------------------------
   DESKTOP HEADER NAV — Home / TV Shows / Movies / Animation /
   Most Watched / App, plus Go Premium and Login, all rendered directly
   in the header at >=1024px instead of behind the hamburger. Below that
   the hamburger + drawer (see nav-drawer "Movies Menu") still carries
   the exact same links for mobile/tablet — see movies.html/
   movie-player.html.
--------------------------------------------------------- */
.movies-header-nav {
  display: none;
}

.movies-header-login-btn {
  display: none;
}

#header-premium-btn {
  display: none;
}

@media (min-width: 1024px) {
  .movies-header-nav {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .movies-header-login-btn {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--header-border);
    background: transparent;
    color: var(--header-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }

  .movies-header-login-btn:hover {
    background: var(--header-chip-bg);
  }

  #header-premium-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: 13px;
    white-space: nowrap;
  }

  /* The hamburger icon itself is hidden — its click behavior (opening
     the drawer, still needed for Support/Community/FAQ links that have
     no desktop-nav equivalent) is now triggered by the "More" text link
     below instead (see initHeaderMoreLink() in movies.js/movie-player.js). */
  #drawer-toggle {
    display: none;
  }

  .movies-header-nav-more {
    display: inline-flex;
  }
}

.movies-header-nav-more {
  display: none;
  align-items: center;
  gap: 4px;
}

.movies-header-nav-more .icon {
  width: 14px;
  height: 14px;
}

/* ---------------------------------------------------------
   HERO BANNER / SLIDER
   Mobile: full-width/edge-to-edge banner (MovieBox-style). Desktop:
   contained, wider cinematic aspect ratio, with room for a
   description paragraph — see .movies-hero-desc below.
--------------------------------------------------------- */
.movies-hero {
  position: relative;
  margin: 0 auto;
  padding: 0;
}

/* Subtle rounding (not the old heavy 18px card look) plus a soft ambient
   glow underneath instead of a hard box border — the hero is meant to
   blend into the page, not sit inside a visible container. box-shadow is
   never clipped by this element's own overflow:hidden, so the glow still
   shows even though the video/image content inside is clipped to it. */
.movies-hero-track {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--card-bg);
  border-radius: 8px;
  box-shadow: 0 25px 60px -15px rgba(59, 130, 246, 0.25);
}

@media (min-width: 768px) {
  .movies-hero {
    max-width: var(--movies-container-max);
    margin: 16px auto 0;
    padding: 0 16px;
  }
  .movies-hero-track {
    border-radius: 10px;
    aspect-ratio: 21 / 9;
  }
}

.movies-hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
  /* The whole slide is now the click target (see movies.js) — there is
     no separate "Play Now" button any more. */
  cursor: pointer;
}

.movies-hero-slide:focus-visible {
  outline: 2px solid var(--royal-blue);
  outline-offset: -2px;
}

.movies-hero-slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* Media layer — the backdrop/poster image (or gradient placeholder) sits
   as this element's own background, so an autoplaying preview video laid
   on top of it can fail/hide without ever leaving a blank box behind. */
.movies-hero-media {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(135deg, var(--slide-a, #1d4ed8), var(--slide-b, #0f172a));
}

.movies-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bottom-to-top dark gradient so the title/tags/Play button stay fully
   readable over whatever is playing/showing behind them, without needing
   a separate opaque card background. */
.movies-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #0d1117 0%, rgba(13, 17, 23, 0.6) 32%, rgba(13, 17, 23, 0) 65%);
  pointer-events: none;
}

.movies-hero-content {
  position: relative;
  z-index: 1;
  padding: 16px;
}

@media (min-width: 768px) {
  .movies-hero-content {
    padding: 36px;
  }
}

.movies-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.movies-hero-genre-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  backdrop-filter: blur(4px);
}

.movies-hero-title {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 4px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.movies-hero-year {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 14px;
}

/* Expanded desktop hero only — kept out of the mobile layout entirely so
   the mobile banner stays compact (title + year + Play, nothing else). */
.movies-hero-desc {
  display: none;
}

@media (min-width: 768px) {
  .movies-hero-title {
    font-size: 34px;
  }

  .movies-hero-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 560px;
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  }
}

.movies-hero-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.movies-hero-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--card-border);
  cursor: pointer;
  transition: background-color 0.15s ease, width 0.15s ease;
}

.movies-hero-dot.is-active {
  background: var(--royal-blue);
  width: 18px;
  border-radius: 4px;
}

/* ---------------------------------------------------------
   SEARCH BAR
--------------------------------------------------------- */
/* Sits inside #sticky-top (position:sticky;top:0;z-index:9999 — see
   style.css), directly under the header, so it scrolls away together
   with the header — i.e. never, on both mobile and desktop. The frosted
   backdrop-filter is layered over its own translucent background (the
   header itself is opaque) so scrolling content is visibly blurred
   through the bar as the spec calls for. */
.movies-search-wrap {
  max-width: var(--movies-container-max);
  margin: 0 auto;
  padding: 10px 16px;
  border-top: 1px solid var(--header-border);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html[data-theme="dark"] .movies-search-wrap {
  background: rgba(18, 24, 38, 0.85);
}

.movies-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 10px 14px;
}

@media (min-width: 768px) {
  .movies-search-box {
    max-width: 420px;
  }
}

.movies-search-box .icon-search {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.movies-search-box input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.movies-search-box input::placeholder {
  color: var(--text-muted);
}

/* ---------------------------------------------------------
   CATEGORY CHIPS (reuses .category-strip-wrap/.category-strip/
   .category-chip from style.css for full theme consistency)
--------------------------------------------------------- */
.movies-category-wrap {
  background: transparent;
  border-bottom: none;
  margin-top: 14px;
}

/* ---------------------------------------------------------
   CONTENT SECTIONS
--------------------------------------------------------- */
.movies-section {
  max-width: var(--movies-container-max);
  margin: 0 auto;
  padding: 18px 0 0;
}

.movies-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 10px;
  padding: 0 16px;
}

/* Wraps a section title alongside its "More >" link (see renderSections()
   in movies.js) — the wrapper takes over the title's own horizontal
   padding/bottom margin so the two sit on one row without double
   spacing; a lone .movies-section-title with no wrapper (Related Movies,
   the trailer modal heading) keeps its own padding/margin exactly as
   before. */
.movies-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  padding: 0 16px;
}

.movies-section-header .movies-section-title {
  margin: 0;
  padding: 0;
}

.movies-section-more {
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.movies-section-more:hover {
  color: var(--royal-blue);
}

/* Compact wrapping grid, not a horizontal scroller: 2 columns on phones,
   4 at tablet/desktop, 6 at large desktop, 7 at wide desktop.
   minmax(0, 1fr) — not plain 1fr — on every tier: a bare 1fr track's
   effective minimum width is the content's own min-content size, so a
   grid item whose content (a poster image, a long title) wants to be
   wider than an equal share of the row can force that track wider than
   its neighbors, producing exactly the unequal, misaligned columns seen
   on the actual page. minmax(0, 1fr) pins each track's minimum to 0,
   which is what actually forces every column to the same width
   regardless of what's inside it. */
.movies-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 12px 6px;
}

@media (min-width: 768px) {
  .movies-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 0 16px 6px; }
}

@media (min-width: 1200px) {
  .movies-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1400px) {
  .movies-row { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; }
}

/* ---------------------------------------------------------
   MOVIE CARD — compact: a clean 2:3 poster (only corner badges, no
   gradient/title overlay) with plain typography underneath, truncated
   to a single line. Poster art, badges, and hover-zoom are unchanged;
   only where the title/year live has moved off the image itself.
--------------------------------------------------------- */
.movie-card {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  /* A <button> element's default min-width is auto (its content's own
     min-content size), which can be wider than an equal grid-column
     share and push that whole track wider than its neighbors — the same
     unequal-column bug the minmax(0, 1fr) tracks above guard against,
     just from the item's side instead of the track's. Both together
     make the fix robust regardless of which one a given browser leans on. */
  min-width: 0;
}

.movie-poster {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}

/* Separate layer for the poster art itself (a real <img> when a
   poster_url is set, or a gradient placeholder div otherwise) so the
   desktop hover-zoom transform only scales the art, never the badges
   sitting on top of it. */
.movie-poster-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.movie-poster-bg-placeholder {
  background-image: linear-gradient(150deg, var(--poster-a, #2563eb), var(--poster-b, #0f172a));
}

@media (min-width: 768px) {
  .movie-card:hover .movie-poster-bg,
  .movie-card:focus-visible .movie-poster-bg {
    transform: scale(1.08);
  }
}

/* Top-right language badge */
.movie-lang-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(3px);
}

/* Bottom-left quality badge */
.movie-quality-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  z-index: 1;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 2px 6px;
  border-radius: 999px;
  color: #ffffff;
}

.movie-quality-hd { background: #16a34a; }
.movie-quality-4k { background: #7c3aed; }
.movie-quality-vip { background: var(--royal-blue); }

/* Bottom-right TMDB rating badge — only ever present on a TMDB-sourced
   card (see buildMovieCardHtml in movies.js), which is the only movie
   shape in this catalog carrying a real vote_average. */
.movie-rating-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  z-index: 1;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 2px 6px;
  border-radius: 999px;
  color: #0f172a;
  background: #f5c542;
}

.movie-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(37, 99, 235, 0.9);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.movie-card:hover .movie-play-btn,
.movie-card:focus-visible .movie-play-btn {
  opacity: 1;
}

.movie-play-btn .icon {
  width: 18px;
  height: 18px;
}

/* Clean typography underneath the poster — plain page-background text,
   not an overlay, truncated to one line so a 3-per-row mobile grid
   never wraps a long title into a second line. */
.movie-card-title {
  margin: 0;
  padding: 0 2px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.movie-card-year {
  display: block;
  padding: 0 2px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .movie-card-title {
    font-size: 13px;
  }
}

.movies-empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 16px;
  font-size: 14px;
}

/* ---------------------------------------------------------
   PREMIUM POPUP OVERLAY SCAFFOLDING — shared fixed overlay/backdrop/
   panel/close-button mechanics for both stage1 and stage2 popups
   (see .premium-popup-panel, .stage1-panel, .stage2-panel above/below).
--------------------------------------------------------- */
.movie-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: flex-end;
}

.movie-modal[hidden] {
  display: none;
}

.movie-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.movie-modal-panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--card-bg);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3);
}

@media (min-width: 560px) {
  .movie-modal {
    align-items: center;
  }
  .movie-modal-panel {
    border-radius: 18px;
  }
}

.movie-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(15, 23, 42, 0.6);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.movie-modal-close .icon {
  width: 16px;
  height: 16px;
}

/* ---------------------------------------------------------
   MOVIE PLAYER (movie-player.html) — inline on the page, not a modal.
--------------------------------------------------------- */
.player-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

/* Free-preview countdown, shown only while a non-subscriber's 5-minute
   clip is playing (see movie-player.js startPreviewCountdown). */
.movie-preview-countdown {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(245, 158, 11, 0.5);
  backdrop-filter: blur(3px);
  pointer-events: none;
}

/* Persistent "Go Premium" pill, shown alongside the countdown during an
   active free preview so a visitor can jump to Stage 1 without waiting
   for the timer to run out. */
.player-go-premium-pill {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
}

/* Higher specificity than the plain .premium-btn-gold rule (defined
   later in this file) so this compact pill sizing always wins regardless
   of source order. */
.premium-btn-gold.player-go-premium-pill {
  font-size: 11.5px;
  padding: 6px 12px;
}

/* "Watch Trailer" button — sits in the normal document flow below the
   video container, next to the genre/meta tags, so it never sits on top
   of the native HTML5 video controls (play, progress bar, volume,
   fullscreen). Opens #trailer-modal on click. */
.player-trailer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 4px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.player-trailer-btn[hidden] {
  display: none;
}

.player-trailer-btn .icon {
  width: 14px;
  height: 14px;
}

.player-trailer-btn:hover {
  border-color: var(--royal-blue);
  color: var(--royal-blue);
}

/* Source badge — "Trailer Only" label shown when playback is falling
   back to a TMDB title's official trailer instead of a full local
   stream (see resolvePlaySource() in movie-player.js). Sits opposite the
   free-preview countdown so the two never collide. */
.player-source-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  color: #0f172a;
  background: #f5c542;
  pointer-events: none;
}

.player-source-badge[hidden] {
  display: none;
}

/* "Full movie coming soon" placeholder — shown in place of a player when
   a TMDB-sourced title has no local stream and no trailer either. */
.player-coming-soon {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
  color: #f8fafc;
  background: linear-gradient(150deg, #1e293b, #0f172a);
}

.player-coming-soon-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}

.player-coming-soon-desc {
  font-size: 12.5px;
  color: #cbd5e1;
  margin: 0;
  max-width: 320px;
}

/* Trailer modal panel — reuses the shared .movie-modal/.movie-modal-panel
   overlay scaffolding, sized as a compact centered dialog rather than the
   bottom-sheet-style premium popups. */
.trailer-modal-panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: auto;
  padding: 44px 16px 20px;
  border-radius: 16px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}

.trailer-modal-title {
  padding: 0 0 12px;
}

/* Centered dialog rather than the bottom-sheet alignment used by the
   premium popups — a trailer is a quick look, not a full takeover. */
#trailer-modal {
  align-items: center;
  padding: 16px;
}

.player-poster {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(150deg, var(--poster-a, #2563eb), var(--poster-b, #0f172a));
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-play-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  background: rgba(37, 99, 235, 0.92);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.player-play-btn:hover {
  transform: scale(1.06);
}

.player-play-btn .icon {
  width: 30px;
  height: 30px;
}

.player-info {
  max-width: var(--movies-container-max);
  margin: 0 auto;
  padding: 16px 16px 8px;
}

.player-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
}

@media (min-width: 768px) {
  .player-title { font-size: 26px; }
}

.player-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text-secondary);
}

/* Used by the player info row only — the catalog card grid uses
   .movie-lang-badge/.movie-quality-badge instead (see above). */
.movie-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.7);
}

.movie-badge-free { background: #16a34a; }
.movie-badge-paid { background: var(--royal-blue); }

/* Admin-set per-movie premium price, shown next to the VIP badge —
   informational only, see renderMovieInfo() in movie-player.js. */
.movie-premium-price {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 3px 8px;
  border-radius: 999px;
  color: #0b0e17;
  background: #fbbf24;
}
.movie-premium-price[hidden] { display: none; }

.player-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.player-genre-chip {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--header-chip-bg);
  color: var(--header-text-muted);
}

.player-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ---------------------------------------------------------
   ENGAGEMENT BAR — Like / Dislike / Share / Save row directly under the
   description. Same neutral card surface as the rest of the info panel
   (this is everyday UI, not the "premium moment" warm palette below).
--------------------------------------------------------- */
.player-engagement-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 4px;
  flex-wrap: wrap;
}

.player-engagement-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.player-engagement-btn .icon {
  width: 16px;
  height: 16px;
}

.player-engagement-btn:hover {
  border-color: var(--royal-blue);
  color: var(--text-primary);
}

.player-engagement-btn.is-active {
  background: var(--royal-blue);
  border-color: var(--royal-blue);
  color: #ffffff;
}

#player-dislike-btn.is-active {
  background: #64748b;
  border-color: #64748b;
}

/* ---------------------------------------------------------
   COMMENTS SECTION
--------------------------------------------------------- */
.player-comments-section {
  max-width: var(--movies-container-max);
  margin: 16px auto 0;
  padding: 0 16px;
}

/* Accordion header — replaces the old plain heading. Collapsed by
   default while a title has zero comments (see updateCommentsToggle() in
   movie-player.js) so an empty thread never reserves a block of blank
   space on the page; the chevron rotates to show open/closed state. */
.player-comments-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 0;
  border: none;
  background: none;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
}

.player-comments-chevron {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.player-comments-toggle[aria-expanded="true"] .player-comments-chevron {
  transform: rotate(180deg);
}

.player-comments-body {
  padding-top: 6px;
}

.player-comments-empty {
  padding: 10px 0;
  text-align: left;
  font-size: 12.5px;
}

/* Compact single-line composer — a small textarea (rows=1) that only
   grows if the visitor drags the resize handle, not a tall multi-line box. */
.player-comment-form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
}

.player-comment-input {
  flex: 1;
  min-width: 0;
  resize: vertical;
  min-height: 30px;
  max-height: 90px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
}

.player-comment-input:focus {
  border-color: var(--royal-blue);
}

.player-comment-submit {
  flex-shrink: 0;
  padding: 7px 14px;
  font-size: 12px;
}

.player-comment-status {
  min-height: 14px;
  margin: 0 0 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.player-comment-status.is-success { color: #16a34a; }
.player-comment-status.is-error { color: #dc2626; }

.player-comments-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Compact comment card — small padding and a slim header row so a long
   comment thread never dominates the page's vertical space. */
.player-comment-item {
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}

.player-comment-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

/* Small initial-letter avatar (no image asset) — kept deliberately tiny
   so it reads as a label, not a profile-photo-sized element. */
.player-comment-avatar {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--royal-blue);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
}

.player-comment-author {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-primary);
}

.player-comment-body {
  margin: 0;
  padding-left: 24px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.player-comment-reply-btn {
  margin: 4px 0 0 24px;
  border: none;
  background: none;
  padding: 0;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--royal-blue);
  cursor: pointer;
  font-family: inherit;
}

.player-comment-replies {
  margin: 6px 0 0 24px;
  padding-left: 10px;
  border-left: 2px solid var(--card-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.player-comment-reply {
  border: none;
  background: transparent;
  padding: 0;
}

/* ---------------------------------------------------------
   TRAILER / BEHIND THE SCENES
--------------------------------------------------------- */
.player-trailer-wrap {
  padding: 0 16px;
}

/* ---------------------------------------------------------
   LOCAL TOAST — Share "link copied" confirmation, independent from
   app.js's own closure-scoped showToast().
--------------------------------------------------------- */
.player-local-toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translate(-50%, 12px);
  z-index: 6000;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.92);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: 90vw;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-local-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------------------------------------------------------
   TWO-STAGE PREMIUM POPUPS (movie-player.html)
   Warm brown/gold translucent gradient, matching the reference design —
   deliberately its own palette (not the site's blue theme) since a
   paywall is meant to visually stand apart as a distinct "premium" moment.
--------------------------------------------------------- */
.premium-popup-panel {
  background: linear-gradient(160deg, #6b4226 0%, #4a2c16 55%, #2b1810 100%);
  border: 1px solid rgba(240, 193, 75, 0.35);
  color: #f5ead9;
}

.premium-popup-panel .movie-modal-close {
  background: rgba(0, 0, 0, 0.35);
}

/* Shared feature-icon strip used by both stages */
.premium-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0;
}

@media (min-width: 480px) {
  .premium-features { grid-template-columns: repeat(6, 1fr); }
}

.premium-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.premium-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(240, 193, 75, 0.16);
  color: #f0c14b;
  border: 1px solid rgba(240, 193, 75, 0.3);
}

.premium-feature-icon .icon {
  width: 18px;
  height: 18px;
}

.premium-feature-label {
  font-size: 9.5px;
  font-weight: 600;
  color: #e9d9bd;
  line-height: 1.3;
}

/* Gold gradient CTA — the primary action on both stages */
.premium-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 13px 22px;
  font-size: 14.5px;
  font-weight: 800;
  color: #2b1810;
  background: linear-gradient(135deg, #fbe4a1, #f0c14b);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.premium-btn-gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(240, 193, 75, 0.35);
}

.premium-btn-gold:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.premium-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(245, 234, 217, 0.35);
  border-radius: 999px;
  padding: 13px 22px;
  font-size: 14.5px;
  font-weight: 700;
  color: #f5ead9;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

.premium-btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ---------------------------------------------------------
   STAGE 1 — "Don't leave the good part!"
--------------------------------------------------------- */
.stage1-panel {
  max-width: 560px;
  padding: 28px 24px 24px;
}

.stage1-header-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 4px;
}

.stage1-heading-col {
  flex: 1;
  min-width: 0;
}

.stage1-title {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
}

.stage1-subtitle {
  margin: 0;
  font-size: 14px;
  color: #e9d9bd;
}

/* Simple decorative badge (no external image assets) standing in for the
   ticket/popcorn illustration in the reference design. */
.stage1-illustration {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, #fde8ad, #f0c14b 60%, #b9822b 100%);
  box-shadow: 0 8px 20px rgba(240, 193, 75, 0.35);
}

.stage1-illustration .icon {
  width: 36px;
  height: 36px;
  color: #2b1810;
}

.stage1-loved-by {
  text-align: center;
  font-size: 12px;
  font-style: italic;
  color: #d8c4a0;
  margin: 4px 0 18px;
}

.stage1-actions {
  display: flex;
  gap: 10px;
}

.stage1-actions .premium-btn-outline {
  flex: 1;
}

.stage1-actions .premium-btn-gold {
  flex: 2;
}

/* ---------------------------------------------------------
   STAGE 2 — "Unlock Premium Benefits" (tier selection)
--------------------------------------------------------- */
.stage2-panel {
  max-width: 480px;
  padding: 22px;
}

.stage2-title {
  margin: 0 0 16px;
  text-align: center;
  font-size: 19px;
  font-weight: 800;
  color: #ffffff;
  padding-right: 24px;
}

.stage2-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  margin-bottom: 4px;
}

.stage2-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fbe4a1, #b9822b);
  color: #2b1810;
}

.stage2-avatar .icon {
  width: 16px;
  height: 16px;
}

.stage2-guest-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: #f5ead9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage2-plan-badge {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 999px;
  color: #2b1810;
  background: #e9d9bd;
}

.stage2-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.stage2-plan-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  border-radius: 12px;
  border: 1px solid rgba(245, 234, 217, 0.18);
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.stage2-plan-card:hover {
  border-color: rgba(240, 193, 75, 0.5);
}

.stage2-plan-card.is-selected {
  border-color: #f0c14b;
  background: rgba(240, 193, 75, 0.12);
}

.stage2-plan-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #f5ead9;
}

.stage2-plan-price {
  font-size: 15px;
  font-weight: 800;
  color: #f0c14b;
}

.stage2-plan-unit {
  font-size: 10px;
  color: #c9b18c;
}

.stage2-more-plans-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px;
  margin-bottom: 12px;
  border: none;
  background: none;
  color: #e9d9bd;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.stage2-more-plans-btn .icon {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.stage2-more-plans-btn.is-expanded .icon {
  transform: rotate(180deg);
}

.stage2-more-plans-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: -4px 0 12px;
}

.stage2-more-plans-row[hidden] {
  display: none;
}

.stage2-field {
  margin-bottom: 14px;
}

.stage2-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #e9d9bd;
  margin-bottom: 6px;
}

.stage2-field input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(245, 234, 217, 0.2);
  background: rgba(0, 0, 0, 0.2);
  color: #f5ead9;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}

.stage2-field input::placeholder {
  color: #a3927a;
}

.stage2-pay-btn {
  width: 100%;
}

.stage2-status {
  margin: 10px 0 0;
  font-size: 13px;
  text-align: center;
  color: #e9d9bd;
  min-height: 18px;
}

.stage2-status.is-error { color: #f87171; }
.stage2-status.is-success { color: #86efac; }