/* =========================================================
   ZIZ TV — SERIES DETAILS / WATCH PAGE
   ---------------------------------------------------------
   Note: the shared site nav (layouts/app.blade.php) is
   position:fixed, top:0, height:var(--nav-h) -- not part of
   document flow, unlike the ChatGPT mockup's own non-fixed
   nav. Two adjustments vs. the original mockup CSS:
     1. .watch-shell gets a top offset (mobile: padding,
        desktop watch-mode: margin-top + reduced height) so
        content starts below the fixed nav instead of under it.
     2. The desktop "single viewport, internal scroll" height
        calc uses var(--nav-h) instead of a hardcoded 70px.

   Card classes (.drama-card, .poster-shell, etc) intentionally
   match browse.css/search.css/home.css -- all reuse the same
   frontend.partials.drama-card Blade partial.
========================================================= */

:root {
  --gold: #FDC830;
  --orange: #F37335;
  --gradient: linear-gradient(135deg, #FDC830, #F37335);
  --bg: #0a0a0f;
  --surface-1: #13131a;
  --surface-2: #1c1c26;
  --surface-3: #242433;
  --text: #f0f0f0;
  --muted: #888899;
  --hairline: rgba(255,255,255,0.08);
  --display: "Bebas Neue", sans-serif;
  --body: "DM Sans", sans-serif;
  --page-width: 1600px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --ease: cubic-bezier(.22,.8,.26,1);
}

[hidden] { display: none !important; }

.gradient-text {
  color: transparent;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
}


/* =========================================================
   DESKTOP WATCH LAYOUT
========================================================= */

.watch-shell {
  width: min(calc(100% - 32px), var(--page-width));
  margin-inline: auto;
  padding: calc(var(--nav-h) + 22px) 0 40px;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 28px;
}


/* =========================================================
   PLAYER COLUMN
========================================================= */

.player-column { min-width: 0; }

.player-sticky { position: relative; }

.player-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.095);
  border-radius: var(--radius-lg);
  background: #050507;
  box-shadow: 0 26px 70px rgba(0,0,0,.42);
}

.player-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}

.player-state { position: absolute; inset: 0; }


/* =========================================================
   POSTER / PLAY STATE
========================================================= */

.player-state--poster { overflow: hidden; background: var(--surface-1); }

.player-poster {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.player-state--poster::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,15,.15), rgba(10,10,15,.03) 38%, rgba(10,10,15,.76) 100%),
    linear-gradient(90deg, rgba(10,10,15,.16), transparent 55%);
}

.episode-badge {
  position: absolute;
  z-index: 6;
  top: 14px; left: 14px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: var(--text);
  background: rgba(10,10,15,.62);
  backdrop-filter: blur(12px);
  font-size: .66rem;
  font-weight: 700;
}

.player-play-button {
  position: absolute;
  z-index: 7;
  top: 50%; left: 50%;
  width: 74px; height: 74px;
  display: grid;
  place-items: center;
  transform: translate(-50%,-50%);
  border: 0;
  border-radius: 50%;
  color: #0a0a0f;
  background: var(--gradient);
  box-shadow: 0 14px 45px rgba(243,115,53,.26);
  cursor: pointer;
  transition: transform 220ms var(--ease), box-shadow 220ms ease;
}

.player-play-button:hover {
  transform: translate(-50%,-50%) scale(1.07);
  box-shadow: 0 18px 52px rgba(243,115,53,.34);
}

.player-play-button svg { margin-left: 4px; }

.poster-info {
  position: absolute;
  z-index: 6;
  left: 18px; right: 18px; bottom: 17px;
}

.poster-series-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.65rem, 5vw, 2.8rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.poster-genres {
  margin-top: 7px;
  color: rgba(240,240,240,.66);
  font-size: .68rem;
  font-weight: 500;
}


/* =========================================================
   PLAYING STATE
========================================================= */

.player-state--playing { background: #000; }

.player-video {
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}


/* =========================================================
   LOCKED STATE
========================================================= */

.player-state--locked {
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 24px;
  text-align: center;
  background: var(--surface-1);
}

.locked-background {
  position: absolute;
  inset: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  object-fit: cover;
  filter: blur(15px) brightness(.32) saturate(.65);
  transform: scale(1.07);
}

.player-state--locked::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(circle at 50% 40%, rgba(253,200,48,.12), transparent 26rem),
    linear-gradient(180deg, rgba(10,10,15,.35), rgba(10,10,15,.78));
}

.locked-content { position: relative; z-index: 3; width: min(100%, 560px); }

.lock-icon {
  width: 64px; height: 64px;
  margin: 0 auto 17px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(253,200,48,.21);
  border-radius: 50%;
  color: var(--gold);
  background: rgba(19,19,26,.86);
  box-shadow: 0 16px 42px rgba(0,0,0,.28);
}

.locked-eyebrow {
  color: var(--gold);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.locked-title {
  margin: 7px 0 0;
  font-family: var(--display);
  font-size: clamp(2.7rem, 10vw, 4.9rem);
  font-weight: 400;
  line-height: .86;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.locked-copy {
  max-width: 470px;
  margin: 12px auto 0;
  color: rgba(240,240,240,.68);
  font-size: .78rem;
  line-height: 1.6;
}

.store-buttons {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}

.store-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 12px;
  background: rgba(19,19,26,.88);
  backdrop-filter: blur(12px);
  transition: transform 180ms var(--ease), border-color 180ms ease, background 180ms ease;
}

.store-button:hover {
  transform: translateY(-2px);
  border-color: rgba(253,200,48,.25);
  background: var(--surface-2);
}

.store-icon { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; }
.store-copy { text-align: left; }
.store-small { display: block; color: var(--muted); font-size: .5rem; line-height: 1; }
.store-name { display: block; margin-top: 3px; color: var(--text); font-size: .76rem; font-weight: 700; line-height: 1; }


/* =========================================================
   EPISODE NAV BELOW PLAYER
========================================================= */

.player-nav {
  min-height: 58px;
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.episode-nav-button {
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 0;
  color: rgba(240,240,240,.66);
  background: transparent;
  font-size: .7rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}

.episode-nav-button:hover { color: var(--text); background: rgba(255,255,255,.025); }
.episode-nav-button:disabled { opacity: .35; pointer-events: none; }
.episode-nav-button.next { justify-content: flex-end; }

.episode-progress {
  min-width: 80px;
  padding: 0 12px;
  text-align: center;
  color: var(--text);
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: .06em;
}

.episode-progress span { color: var(--muted); }


/* =========================================================
   INFO COLUMN
========================================================= */

.detail-column { min-width: 0; }
.detail-inner { padding-bottom: 30px; }


/* =========================================================
   SERIES HEADER
========================================================= */

.series-header { padding: 4px 0 30px; border-bottom: 1px solid var(--hairline); }

.series-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 11px;
  color: var(--muted);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.series-eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--gradient);
  border-radius: 999px;
}

.series-title {
  margin: 0;
  max-width: 820px;
  font-family: var(--display);
  font-size: clamp(4rem, 11vw, 7rem);
  font-weight: 400;
  line-height: .79;
  letter-spacing: .015em;
  text-transform: uppercase;
}

.series-meta {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.genre-chip {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  color: rgba(240,240,240,.7);
  background: var(--surface-1);
  font-size: .64rem;
  font-weight: 600;
}

.series-stat { color: var(--muted); font-size: .65rem; font-weight: 500; }


/* =========================================================
   DETAIL SECTIONS
========================================================= */

.detail-section { padding: 30px 0; border-bottom: 1px solid var(--hairline); }
.detail-section:last-child { border-bottom: 0; }

.section-label {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.section-label .sub-count {
  margin-left: 7px;
  color: var(--muted);
  font-family: var(--body);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}


/* =========================================================
   ABOUT
========================================================= */

.about-copy-wrap { position: relative; margin-top: 13px; }

.about-copy {
  max-width: 760px;
  margin: 0;
  overflow: hidden;
  color: rgba(240,240,240,.68);
  font-size: .82rem;
  line-height: 1.72;
  max-height: 4.9em;
  transition: max-height 300ms var(--ease);
}

.about-copy-wrap:not(.is-expanded)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 24px;
  height: 38px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg));
}

.about-copy-wrap.is-expanded .about-copy { max-height: 300px; }

.about-toggle {
  position: relative;
  z-index: 3;
  margin-top: 8px;
  padding: 0;
  border: 0;
  color: var(--gold);
  background: transparent;
  font-size: .7rem;
  font-weight: 700;
  cursor: pointer;
}


/* =========================================================
   EPISODE RANGE TABS
========================================================= */

.episode-range-shell { position: relative; margin-top: 17px; }

.episode-ranges {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 0 10px;
  scrollbar-width: none;
}

.episode-ranges::-webkit-scrollbar { display: none; }

.range-tab {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-1);
  font-size: .66rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms var(--ease);
}

.range-tab:hover { transform: translateY(-1px); color: var(--text); border-color: rgba(253,200,48,.2); }

.range-tab.is-active {
  color: #0a0a0f;
  border-color: transparent;
  background: var(--gradient);
}


/* =========================================================
   EPISODE GRID
========================================================= */

.episode-grid {
  margin-top: 11px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 8px;
}

.episode-button {
  position: relative;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--hairline);
  border-radius: 11px;
  color: rgba(240,240,240,.67);
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent), var(--surface-1);
  font-size: .69rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms var(--ease);
}

.episode-button:hover {
  transform: translateY(-2px);
  color: var(--text);
  border-color: rgba(253,200,48,.21);
  background: var(--surface-2);
}

.episode-button.is-current {
  color: #0a0a0f;
  border-color: transparent;
  background: var(--gradient);
  box-shadow: 0 7px 20px rgba(243,115,53,.12);
}

.episode-button.is-locked { color: rgba(240,240,240,.48); background: rgba(19,19,26,.7); }
.episode-button.is-locked:hover { color: rgba(240,240,240,.76); }

.mini-lock { width: 11px; height: 11px; opacity: .72; }


/* =========================================================
   MORE LIKE THIS
   Same card DNA as Home / Browse / Search
========================================================= */

.related-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 42vw);
  gap: 12px;
  overflow-x: auto;
  margin-top: 17px;
  padding: 3px 2px 24px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.related-rail::-webkit-scrollbar { display: none; }

.drama-card { min-width: 0; scroll-snap-align: start; }

.poster-shell {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  transform-origin: center bottom;
  transition: transform 320ms var(--ease), border-color 220ms ease, box-shadow 320ms var(--ease);
}

.poster-shell > img {
  height: 100%;
  object-fit: cover;
  transition: transform 650ms var(--ease), filter 320ms ease;
}

.poster-shell::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: .72;
  background: linear-gradient(180deg, transparent 42%, rgba(10,10,15,.16) 65%, rgba(10,10,15,.97) 100%);
  transition: opacity 220ms ease;
}

.drama-card:hover .poster-shell {
  transform: perspective(760px) translateY(-7px) rotateX(1.5deg);
  border-color: rgba(253,200,48,.23);
  box-shadow: 0 22px 52px rgba(0,0,0,.42);
}

.drama-card:hover .poster-shell > img { transform: scale(1.045); filter: saturate(1.08) contrast(1.02); }
.drama-card:hover .poster-shell::after { opacity: 1; }

.poster-overlay {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 260ms var(--ease);
}

.drama-card:hover .poster-overlay { opacity: 1; transform: translateY(0); }

.overlay-play {
  width: 40px; height: 40px;
  margin: 0 0 auto auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #0a0a0f;
  background: var(--gradient);
  box-shadow: 0 12px 26px rgba(243,115,53,.2);
}

.overlay-title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: .95;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.overlay-meta { margin-top: 5px; color: rgba(240,240,240,.63); font-size: .61rem; font-weight: 500; }

.card-copy { padding: 9px 3px 0; }

.card-title {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .79rem;
  font-weight: 600;
}

.card-meta { margin-top: 4px; color: var(--muted); font-size: .63rem; font-weight: 500; }


/* =========================================================
   RESPONSIVE
========================================================= */

@media (min-width: 620px) {
  .episode-grid { grid-template-columns: repeat(8, minmax(0,1fr)); }
  .related-rail { grid-auto-columns: minmax(165px, 29vw); gap: 14px; }
}

@media (min-width: 980px) {
  body.dp-watch-mode { overflow: hidden; }

  .watch-shell {
    height: calc(100vh - var(--nav-h));
    margin-top: var(--nav-h);
    padding: 22px 0;
    grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr);
    gap: 32px;
  }

  .player-column { height: 100%; overflow: hidden; }
  .player-sticky { position: sticky; top: 0; }

  .detail-column {
    height: 100%;
    overflow-y: auto;
    padding: 3px 12px 50px 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--surface-3) transparent;
  }

  .detail-column::-webkit-scrollbar { width: 7px; }
  .detail-column::-webkit-scrollbar-track { background: transparent; }
  .detail-column::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--surface-3); }

  .series-header { padding-top: 3px; }
  .series-title { font-size: clamp(4.5rem, 7vw, 7.5rem); }
  .episode-grid { grid-template-columns: repeat(8, minmax(0,1fr)); }
  .related-rail { grid-auto-columns: 180px; }
}

@media (min-width: 1280px) {
  .watch-shell { grid-template-columns: minmax(0, 1.3fr) minmax(430px, .7fr); gap: 38px; }
  .episode-grid { grid-template-columns: repeat(10, minmax(0,1fr)); }
}

@media (max-width: 979px) {
  .watch-shell { padding-top: calc(var(--nav-h) + 16px); }
  .series-title { margin-top: 2px; }
  .player-frame { border-radius: 18px; }
  .player-play-button { width: 64px; height: 64px; }
}

@media (max-width: 430px) {
  .episode-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .player-nav { grid-template-columns: 1fr auto 1fr; }
  .episode-nav-button { padding: 0 11px; font-size: .64rem; }
  .locked-title { font-size: 2.65rem; }
  .store-buttons { flex-direction: column; }
  .store-button { width: 100%; justify-content: center; }
}

@media (hover: none) {
  .poster-overlay { display: none; }
  .drama-card:hover .poster-shell { transform: none; box-shadow: none; }
  .drama-card:hover .poster-shell > img { transform: none; }
}

:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}