/* ============================================================================
   detail-v2.css — nuova pagina dettaglio (route /beta/:type/:id, view detail-v2.ejs)
   Obiettivo: mobile-first, TUTTE le info principali above-the-fold (cover, titolo,
   info, trama, cast, generi, pulsanti Guarda/Trailer/Commenti/Scarica, reazioni).
   Solo i commenti restano sotto la piega (scroll naturale della pagina).
   NON tocca la detail in produzione. Caricato DOPO lo <style> inline e scoped
   sotto body.dp-v2 => vince sempre la cascata.
   ============================================================================ */

:root {
  --v2-accent: #0894D6;
  --v2-accent-2: #1fb6ff;
  --v2-gold: #ffc83d;
  --v2-ink: #eef1f4;
  --v2-ink-dim: #aeb6bf;
  --v2-card: rgba(255,255,255,.045);
  --v2-card-bd: rgba(255,255,255,.10);
  --v2-radius: 14px;
}

/* ====================== LAYOUT GENERALE ====================== */
body.dp-v2 .dp-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

/* ====================== COVER (#dp-hero dentro .dpv2-cover-wrap) ====================== */
/* wrapper: contesto di posizionamento per le icone Lista/Segui sovrapposte alla cover */
body.dp-v2 .dpv2-cover-wrap {
  position: relative;
  margin: .25rem 0 0;
}
body.dp-v2 #dp-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1.85 / 1; /* ~200px su 390: la cover "lavora" e ospita Guarda + icone */
  height: auto;
  min-height: 0;
  border-radius: var(--v2-radius);
  overflow: hidden;
  margin: 0;
  background: #0c0f13;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}

/* icone Lista/Segui in alto a destra SULLA cover */
body.dp-v2 .dpv2-corner {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  display: flex; gap: 8px;
}
/* I due bottoni DEVONO essere identici e allineati. Gli !important annullano gli
   stili base di .watchlist-btn (min 44px) e .follow-btn (margin-top:-.35rem + ciano)
   che li rendevano di misura diversa e disallineati. */
body.dp-v2 .dpv2-corner .dpv2-corner-btn,
body.dp-v2 .dpv2-corner .dpv2-corner-btn.watchlist-btn,
body.dp-v2 .dpv2-corner .dpv2-corner-btn.follow-btn {
  box-sizing: border-box;
  width: 42px !important; height: 42px !important;
  min-width: 42px !important; min-height: 42px !important;
  max-width: 42px; max-height: 42px;
  margin: 0 !important; padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(8,11,16,.6) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff !important;
  gap: 0 !important;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
body.dp-v2 .dpv2-corner .dpv2-corner-btn:active { transform: scale(.92); }
body.dp-v2 .dpv2-corner .dpv2-corner-btn svg {
  width: 20px !important; height: 20px !important; flex: 0 0 20px;
}
/* stato attivo: IDENTICO per entrambi (lista salvata / segui attivo) */
body.dp-v2 .dpv2-corner .dpv2-corner-btn.is-saved,
body.dp-v2 .dpv2-corner .dpv2-corner-btn.is-following {
  background: rgba(8,148,214,.92) !important; border-color: transparent !important;
}
body.dp-v2 .dpv2-corner .dpv2-corner-btn.is-saved svg path { fill: #fff; }
/* etichetta solo per screen-reader (icona = affordance) */
body.dp-v2 .dpv2-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* stati "alti" (gate Telegram, dmca, non disponibile): la cover cresce in altezza.
   :not([hidden]) è cruciale: nelle serie esiste sempre un #dmca-ep-box.dp-box-dmca
   nascosto -> senza il filtro annullerebbe l'aspect-ratio e farebbe collassare la cover. */
body.dp-v2 #dp-hero:has(.dp-tg-lock:not([hidden])),
body.dp-v2 #dp-hero:has(.dp-box-dmca:not([hidden])),
body.dp-v2 #dp-hero:has(.dp-box-unavail:not([hidden])) {
  aspect-ratio: auto;
  cursor: default;
}
body.dp-v2 #dp-hero .dp-box-backdrop {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
body.dp-v2 #dp-hero .dp-box-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,12,18,.05) 0%, rgba(8,12,18,.18) 45%, rgba(8,12,18,.78) 100%);
  pointer-events: none;
}

/* --- Pulsante GUARDA (poster sbloccato) --- */
body.dp-v2 #dp-hero .dp-box-play {
  position: absolute; inset: 0;
  top: 0; left: 0; right: 0; bottom: 0;
  transform: none !important; /* annulla translateY(-50%) ereditato dal CSS legacy */
  margin: 0;
  display: flex; align-items: center; justify-content: center;
  background: none;
}
/* SOLO lo stato sbloccato (poster + #cta-play): GUARDA = barra full-width in basso */
body.dp-v2 #dp-hero .dp-box-play:has(#cta-play) {
  align-items: flex-end;
  justify-content: stretch;
  padding: 11px;
}
body.dp-v2 #cta-play.dpv2-watch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 100%; height: 48px;
  padding: 0 16px;
  border: none;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--v2-accent) 0%, var(--v2-accent-2) 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(8,148,214,.5), 0 2px 0 rgba(255,255,255,.15) inset;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
body.dp-v2 #cta-play.dpv2-watch:active { transform: scale(.98); }
body.dp-v2 #cta-play.dpv2-watch svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
body.dp-v2 .dpv2-watch-label {
  font-size: 1.05rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
}
body.dp-v2 .dpv2-watch-ep { font-weight: 700; opacity: .92; text-transform: none; letter-spacing: 0; }

/* --- gate / dmca / unavail dentro la cover: leggibili e contenuti --- */
body.dp-v2 #dp-hero .dp-tg-lock,
body.dp-v2 #dp-hero .dp-box-dmca,
body.dp-v2 #dp-hero .dp-box-unavail {
  position: relative;
  inset: auto;
}

/* ====================== BLOCCO INFO (titolo, badge, trama, cast) ====================== */
body.dp-v2 .dp-box-info {
  position: static !important;
  inset: auto !important;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  background: none !important;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  transform: none !important;
}

body.dp-v2 .dp-title {
  font-size: 1.4rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
  margin: 0;
}

/* riga badge: voto + anno + durata + HD */
body.dp-v2 .dp-badges {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin: 0;
}
body.dp-v2 .dp-badge {
  font-size: .76rem; font-weight: 700;
  padding: .2rem .5rem;
  border-radius: .45rem;
  background: var(--v2-card);
  border: 1px solid var(--v2-card-bd);
  color: var(--v2-ink-dim);
  line-height: 1.2;
}
body.dp-v2 .dp-badge-imdb {
  background: linear-gradient(135deg, #3a2c00, #5a4400);
  border-color: rgba(255,200,61,.45);
  color: var(--v2-gold);
}

/* salva in lista + segui: pill secondarie compatte affiancate */
body.dp-v2 .dp-save-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .7rem;
  border-radius: 999px;
  background: var(--v2-card);
  border: 1px solid var(--v2-card-bd);
  color: var(--v2-ink);
  font-size: .82rem; font-weight: 600;
  cursor: pointer;
  width: auto;
}
body.dp-v2 .dp-save-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
body.dp-v2 .dp-save-btn.is-active,
body.dp-v2 .dp-save-btn.active {
  background: rgba(8,148,214,.16);
  border-color: rgba(8,148,214,.5);
  color: #cdeefe;
}
/* affianca watchlist + follow su UNA riga, DUE pulsanti IDENTICI per stile */
body.dp-v2 .dpv2-save-row {
  display: flex; gap: .5rem; flex-wrap: nowrap;
}
body.dp-v2 .dpv2-save-row .dp-save-btn,
body.dp-v2 .dpv2-save-row .dp-save-btn.follow-btn,
body.dp-v2 .dpv2-save-row .dp-save-btn.watchlist-btn {
  flex: 1 1 0; min-width: 0;
  justify-content: center;
  margin: 0 !important;
  min-height: 38px;
  padding: .4rem .5rem;
  font-size: .8rem; font-weight: 600;
  background: var(--v2-card) !important;        /* annulla il ciano di .follow-btn (style.css) */
  border: 1px solid var(--v2-card-bd) !important;
  color: var(--v2-ink) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.dp-v2 .dpv2-save-row .dp-save-btn svg { width: 16px; height: 16px; flex: 0 0 16px; }
body.dp-v2 .dpv2-save-row .dp-save-btn span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* stato attivo coerente per entrambi (salvato / segui attivo) */
body.dp-v2 .dpv2-save-row .dp-save-btn.is-saved,
body.dp-v2 .dpv2-save-row .dp-save-btn.is-following {
  background: rgba(8,148,214,.18) !important;
  border-color: rgba(8,148,214,.55) !important;
  color: #cdeefe !important;
}

/* generi = chip cliccabili */
body.dp-v2 .dp-genres {
  display: flex; flex-wrap: wrap; gap: .4rem;
  font-size: 0; /* azzera gli spazi/"·" testuali tra gli <a> */
  margin: .05rem 0 0;
}
body.dp-v2 .dp-genres a {
  font-size: .8rem; font-weight: 600;
  padding: .28rem .66rem;
  border-radius: 999px;
  background: rgba(8,148,214,.12);
  border: 1px solid rgba(8,148,214,.32);
  color: #bfe6fb;
  text-decoration: none;
  line-height: 1.25;
  white-space: nowrap;
}
body.dp-v2 .dp-genres a:active { background: rgba(8,148,214,.24); }

/* trama leggibile, clamp a 4 righe, tap per espandere */
body.dp-v2 .dp-plot {
  font-size: .9rem;
  line-height: 1.45;
  color: #d4d9df;
  margin: .05rem 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
}
/* link "altro/meno" iniettato via JS quando la trama è troncata */
body.dp-v2 .dpv2-plot-more {
  display: inline-block; margin-top: .15rem;
  font-size: .85rem; font-weight: 700; color: var(--v2-accent-2);
  cursor: pointer; background: none; border: none; padding: 0;
}
body.dp-v2 .dp-plot.is-expanded {
  -webkit-line-clamp: unset;
  display: block;
}

/* cast / regia = testo-link inline (più leggero/denso/SEO delle chip), UNA riga */
body.dp-v2 .dp-crew {
  font-size: .85rem;
  line-height: 1.4;
  margin: .05rem 0 0;
  color: var(--v2-ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.dp-v2 .dp-crew-label {
  font-weight: 700; color: var(--v2-ink-dim); margin-right: .15rem;
}
body.dp-v2 .dp-crew a {
  color: #e9edf1; font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.22);
}
body.dp-v2 .dp-crew a:active { color: var(--v2-accent-2); }

/* now playing (TV) */
body.dp-v2 .dp-now-playing {
  font-size: .84rem; color: var(--v2-ink-dim); margin: .1rem 0 0;
}

/* ====================== AZIONI: Guarda / Trailer / Commenti / Scarica ====================== */
body.dp-v2 .dp-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: .5rem;
  margin: .15rem 0 0;
  padding: 0;
  background: none;
  border: none;
}
body.dp-v2 .dp-action,
body.dp-v2 .dp-download .dp-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  min-height: 46px;
  padding: .38rem .3rem;
  border-radius: 11px;
  background: var(--v2-card);
  border: 1px solid var(--v2-card-bd);
  color: var(--v2-ink);
  font-size: .68rem; font-weight: 600; line-height: 1.05;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  position: relative;
}
body.dp-v2 .dp-action svg { width: 18px; height: 18px; }
body.dp-v2 .dp-action span { line-height: 1.1; }
body.dp-v2 .dp-action:active { background: rgba(255,255,255,.1); }
body.dp-v2 .dp-action-download { background: linear-gradient(135deg, rgba(8,148,214,.18), rgba(31,182,255,.1)); border-color: rgba(8,148,214,.4); color: #d6effc; }
body.dp-v2 .dp-download { display: block; }
body.dp-v2 .dp-action-badge {
  position: absolute; top: 4px; right: 8px;
  font-size: .62rem; font-weight: 800;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px;
  background: var(--v2-accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
/* la scritta lunga "Scarica (1 al giorno)" -> compatta */
body.dp-v2 .dp-action-download span { font-size: .7rem; }

/* ====================== REAZIONI ====================== */
body.dp-v2 .title-reactions {
  display: flex; flex-wrap: nowrap; align-items: center; gap: .35rem;
  max-width: none;
  margin: .05rem 0 0 !important;
  padding: .4rem .55rem !important;
  border: 1px solid var(--v2-card-bd);
  border-radius: 12px;
  background: var(--v2-card);
  overflow-x: auto; scrollbar-width: none;
}
body.dp-v2 .title-reactions::-webkit-scrollbar { display: none; }
body.dp-v2 .title-reactions strong {
  width: auto;
  flex: 0 1 auto;
  font-size: .76rem; font-weight: 700;
  color: var(--v2-ink-dim);
  margin: 0 .15rem 0 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.dp-v2 .title-react-btn {
  display: inline-flex; align-items: center; gap: .25rem;
  flex: 0 0 auto;
  padding: .26rem .5rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--v2-card-bd);
  color: var(--v2-ink);
  font-size: .9rem;
  cursor: pointer;
}
body.dp-v2 .title-react-btn[aria-pressed="true"],
body.dp-v2 .title-react-btn.is-active {
  background: rgba(8,148,214,.18);
  border-color: rgba(8,148,214,.5);
}
body.dp-v2 .title-react-btn span { font-size: .78rem; color: var(--v2-ink-dim); }

/* ====================== SELETTORE EPISODI (TV) — SOPRA, subito sotto la cover ====================== */
/* azione primaria per le serie: compatto, sotto la cover, prima di titolo/info */
body.dp-v2 #dpv2-episodes { margin: 0; padding: 0; border: none; }
body.dp-v2 .dp-tv-selector { margin: 0; padding: 0; }
/* è dentro .dp-main (già con padding 12px) -> niente doppio padding nel container interno */
body.dp-v2 .dp-main #dpv2-episodes .container { padding: 0; max-width: none; }
body.dp-v2 #dpv2-episodes .dp-sel-row:first-child { margin-top: 0; }
body.dp-v2 .dp-sel-row {
  display: flex; align-items: center; gap: .5rem;
  margin: .28rem 0 0;
}
body.dp-v2 .dp-sel-label {
  font-size: .76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--v2-ink-dim);
  flex: 0 0 auto; width: 64px;
}
body.dp-v2 .dp-sel-chips-wrap { flex: 1 1 auto; min-width: 0; }
body.dp-v2 .dp-sel-chips {
  display: flex; gap: .4rem; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
body.dp-v2 .dp-sel-chips::-webkit-scrollbar { display: none; }
body.dp-v2 .dp-sel-chip {
  flex: 0 0 auto;
  min-width: 32px; height: 30px; padding: 0 .5rem;
  border-radius: 8px;
  background: var(--v2-card);
  border: 1px solid var(--v2-card-bd);
  color: var(--v2-ink);
  font-size: .85rem; font-weight: 700;
  cursor: pointer;
}
body.dp-v2 .dp-sel-chip.active {
  background: linear-gradient(135deg, var(--v2-accent), var(--v2-accent-2));
  border-color: transparent; color: #fff;
}
body.dp-v2 .dp-sel-chip.dp-ep-dmca { opacity: .45; }

/* ====================== COMMENTI = sotto la piega, sezione "scrollabile" ====================== */
/* (resta sotto: la pagina scrolla naturalmente fin qui; tutto il resto è above-fold) */
body.dp-v2 #comments,
body.dp-v2 .dp-comments {
  margin-top: 1rem;
}

/* ====================== DESKTOP / TABLET ====================== */
@media (min-width: 760px) {
  body.dp-v2 .dp-main {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
    grid-template-areas:
      "cover info"
      "actions actions"
      "react react"
      "rest rest";
    align-items: start;
    gap: 1rem 1.4rem;
  }
  body.dp-v2 #dp-hero { grid-area: cover; margin-top: 0; aspect-ratio: 16 / 9; }
  body.dp-v2 .dp-box-info { grid-area: info; }
  body.dp-v2 .dp-actions { grid-area: actions; grid-auto-columns: minmax(0,160px); justify-content: start; }
  body.dp-v2 .title-reactions { grid-area: react; max-width: 520px; }
  body.dp-v2 .dp-title { font-size: 1.8rem; }
  body.dp-v2 .dp-plot { -webkit-line-clamp: 8; }
  body.dp-v2 .dp-crew { flex-wrap: wrap; overflow: visible; white-space: normal; }
  body.dp-v2 .dp-action { min-height: 56px; font-size: .8rem; }
  body.dp-v2 .dp-action svg { width: 20px; height: 20px; }
}