.series-detail-page-container {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  padding: 0 60px;
  width: 100%;
  color: white;
  height: calc(100 * var(--vh, 1vh));
  animation: fadeInOut 1s ease-in-out;
}

.series-detail-page-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.series-detail-page-content-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 30px;
  overflow: auto;
  height: calc(100 * var(--vh, 1vh));
  padding-bottom: 30px;
  z-index: 2;
}

/* NEW: Prevent main content scrolling when dropdown is open */
.series-detail-page-content-container.dropdown-open {
  overflow: hidden;
}

/* Intestazione unica delle sezioni, come in movieDetailPage.css. */
.series-detail-content-container {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}

.series-detail-content {
  width: 100%;
  display: flex;
}

.series-detail-content .first-content {
  width: 80%;
  display: flex;
  flex-direction: column;
}

.series-detail-content .second-item {
  width: 20%;
  display: flex;
  justify-content: flex-end;
}

.series-detail-content .second-item .inner-card {
  display: flex;
  width: 300px;
  flex-direction: column;
}

.series-detail-content .second-item .card-rating {
  margin-top: 10px;
}

.first-item {
  display: flex;
  margin-bottom: 30px;
  width: 100%;
  justify-content: space-between;
}

.first-item .first {
  font-size: 35px;
  width: 45%;
  font-weight: 600;
}

.first-item .second {
  font-size: 35px;
  width: 100%;
  color: rgba(213, 213, 213, 1);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.series-card-start-icon {
  width: 33px;
  height: 33px;
  object-fit: contain;
}

.series-detail-buttons {
  display: flex;
  white-space: nowrap;
  width: 100%;
}

.series-detail-play-button {
  margin-right: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 28px;
  border: 2.46px solid rgba(255, 255, 255, 0.25);
  color: white;
  font-weight: 600;
  outline: none;
  white-space: nowrap;
  /* text-wrap: nowrap; */
  font-size: 24px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.6);
  padding-right: 28px;
}

.series-detail-more-info-button {
  margin-right: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-wrap: nowrap;
  padding-left: 28px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  color: white;
  font-weight: 600;
  outline: none;
  font-size: 24px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.6);
  padding-right: 28px;
}

.series-detail-button-focused {
  box-shadow: 0 0 0 3px rgba(231, 161, 1, 1) !important;
}

.seasons-and-cast-buttons {
  display: flex;
  width: 100%;
  padding-top: 40px;
}

#seasons-button {
  margin-right: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 28px;
  border: 2.46px solid rgba(255, 255, 255, 0.25);
  color: white;
  font-weight: 600;
  outline: none;
  text-wrap: nowrap;
  font-size: 24px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.6);
  padding-right: 28px;
}

#cast-button {
  margin-right: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 28px;
  border: 2.46px solid rgba(255, 255, 255, 0.25);
  color: white;
  font-weight: 600;
  outline: none;
  text-wrap: nowrap;
  font-size: 24px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.6);
  padding-right: 28px;
}

#seasons-button:hover {
  border: 3px solid rgba(231, 161, 1, 1) !important;
  outline: none !important;
}

#cast-button:hover {
  border: 3px solid rgba(231, 161, 1, 1) !important;
  outline: none !important;
}
.series-detail-card-poster {
  height: 400px;
  border-radius: 5px;
  width: 100%;
  background-color: transparent;
}

.series-detail-description {
  color: rgba(213, 213, 213, 1);
  font-size: 35px;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.series-detail-cast {
  position: relative; /* nella catena degli offsetParent: portaInVista */
  padding-top: 50px;
  overflow-x: auto;
  padding-bottom: 50px;
  display: flex;
  /* Il primo della fila aveva il bordo sinistro tagliato: spazio
     iniziale e scroll-padding >= anello (3px). */
  scroll-padding-left: 10px;
  scroll-padding-right: 10px;
}

.series-cast-item {
  display: flex;
  align-items: center;
  margin-right: 30px;
  border: 3px solid transparent;
  flex-direction: column;
  justify-content: center;
}

.series-cast-item-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
}

.series-cast-item-name {
  padding-top: 10px;
  white-space: nowrap;
  color: white !important;
  font-size: 32px;
  text-align: center;
}

.series-detail-page-content-container::-webkit-scrollbar,
.series-detail-page-content-container::-webkit-scrollbar {
  display: none;
}

.series-detail-cast::-webkit-scrollbar,
.series-detail-cast::-webkit-scrollbar {
  display: none;
}

.seasons-episodes-list {
  display: flex;
  /* gap: 30px; */
  padding-bottom: 25px;
  padding-left: 10px; /* spazio per l'anello del primo episodio */
  padding-top: 6px; /* e per il bordo superiore */
}

.seasons-episodes-item {
  width: 570px;
  height: 400px;
  margin-right: 30px;
  position: relative;
  border-radius: 10px;
  background-position: center;
  z-index: 0; /* ADD THIS to ensure correct layering */
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  cursor: pointer;
}

/* L'episodio a fuoco sopra i vicini: l'anello (fuori dalla scatola) non
   deve finire sotto la scheda accanto. */
.seasons-episodes-item.series-detail-button-focused {
  z-index: 10;
}

.seasons-episodes-item::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; /* era inset: 0 (Chromium 87); qui webOS 5 */
  background: rgba(0, 0, 0, 0.6);
  z-index: 1; /* must be below progress bar */
}

.episode-card-top-content {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
  background: var(--gold);
  color: #fff;
  border-radius: 5px;
  font-weight: 400;
  font-size: 20px;
}

.play-icon img {
  position: absolute;
  height: 80px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  color: white;
  opacity: 0.9;
  pointer-events: none;
}

.episode-card-bottom-content {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  z-index: 3;
  color: white;
  font-size: 16px;
}

.episode-card-title,
.episode-card-description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.episode-card-title {
  font-size: 30px;
  font-weight: 400;
  margin-bottom: 10px;
  color: white;
}

.seasons-button-container {
  position: relative;
  display: inline-block;
  margin-right: 30px;
}

.seasons-dropdown {
  position: absolute;
  top: 100%;
  overflow-y: auto;
  width: 350px;
  /* le stagioni lunghe (10 ottobre 2026): alta quanto le righe, al piu' lo spazio visibile sotto il tasto (SeriesDetailPage misuraTendina
     la ricalcola all'apertura); prima height: 300px fissi */
  max-height: 300px;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  z-index: 1000;
  margin-top: 5px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  /* NEW: Ensure dropdown stays on top and isolated */
}

/* NEW: Hide scrollbar for dropdown in Tizen OS */
.seasons-dropdown::-webkit-scrollbar {
  display: none;
}

.seasons-dropdown {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* sotto il tasto non c'e' posto e sopra si': la tendina si apre verso l'alto (misuraTendina) */
.seasons-dropdown.seasons-dropdown-su {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 5px;
}

.dropdown-item {
  padding-left: 25px;
  padding-right: 25px;
  text-decoration: underline;
  padding-top: 20px;
  padding-bottom: 10px;
  margin-top: 10px;
  color: white;
  font-size: 24px;
  font-weight: 400;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color 0.2s ease;
  /* NEW: Ensure items are positioned correctly for scrolling */
  position: relative;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item:hover,
.dropdown-item-focused {
  background: rgba(231, 161, 1, 0.2);
  box-shadow: inset 4px 0 0 rgba(231, 161, 1, 1);
}

.dropdown-item-focused {
  background: rgba(231, 161, 1, 0.3);
}

/* Update existing seasons button styles to remove margin since container has it now */
#seasons-button {
  margin-right: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 28px;
  border: 2.46px solid rgba(255, 255, 255, 0.25);
  color: white;
  font-weight: 600;
  outline: none;
  text-wrap: nowrap;
  font-size: 24px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.6);
  padding-right: 28px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#seasons-button i {
  margin-left: 10px;
  transition: transform 0.3s ease;
}

#seasons-button:hover {
  border: 3px solid rgba(231, 161, 1, 1) !important;
  outline: none !important;
}

.seasons-dropdown {
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.series-no-cast-message {
  color: rgba(213, 213, 213, 1);
  font-size: 35px;
  font-weight: 400;
}

/* Il cuore (23 settembre 2026), come nella scheda film: solo l'icona. */
.series-detail-fav-button .heart-icon .fa-solid { color: #e0245e; }
.series-detail-fav-button .heart-icon .fa-regular { color: white; }
.series-detail-fav-button .heart-icon i { font-size: 28px; }
.series-detail-fav-button {
  margin-right: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 28px;
  border: 2.46px solid rgba(255, 255, 255, 0.25);
  color: white;
  font-weight: 600;
  outline: none;
  white-space: nowrap;
  /* text-wrap: nowrap; */
  font-size: 24px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.6);
  padding-right: 28px;
}

.seasons-episodes-item {
  position: relative; /* important for absolute child positioning */
  overflow: hidden;
}

.episode-progress-container {
  position: absolute;
  bottom: 5px;
  left: 5px;
  right: 5px;
  height: 5px;
  background-color: rgba(255, 255, 255, 0.3); /* empty part */
  border-radius: 3px;
  z-index: 2; /* above the dark overlay */
}

.episode-progress-bar {
  height: 100%;
  background-color: red; /* filled part */
  border-radius: 3px;
  width: 0%; /* default, updated dynamically */
}

.sidebar-container-series-detail {
  /* Ancorato ai tre puntini dell'intestazione unica, come nelle sezioni
     (.sidebar-container-movie): stesse misure. */
  position: absolute;
  top: 80px;
  right: 0;
  z-index: 9999;
}

.series-detail-start-over-button {
  margin-right: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 28px;
  border: 2.46px solid rgba(255, 255, 255, 0.25);
  color: white;
  font-weight: 600;
  outline: none;
  white-space: nowrap;
  /* text-wrap: nowrap; */
  /* text-wrap: nowrap; */
  font-size: 24px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.6);
  padding-right: 28px;
}

/* ===========================================================================
   La pagina Serie (disegno del 23 settembre 2026, report 2026-09-23-1430):
   locandina a sinistra, metadati e tasti a destra, sotto la lista degli
   episodi della stagione scelta e il cast. Le regole del fuoco sono
   .series-detail-button-focused (box-shadow, il raggio dell'elemento).
   =========================================================================== */
.serie-alto {
  display: flex;
  margin-top: 40px;
}
.serie-locandina {
  width: 300px;
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.serie-meta {
  flex: 1;
  padding-left: 60px;
  min-width: 0;
}
.serie-meta .first-item {
  display: flex;
  margin-bottom: 20px;
}
.serie-meta .first {
  width: 300px;
  flex: 0 0 300px;
  font-size: 35px;
  font-weight: 600;
  margin: 0;
}
.serie-meta .second {
  font-size: 35px;
  color: rgba(213, 213, 213, 1);
  margin: 0;
}
.serie-trama-blocco {
  flex: 1;
  min-width: 0;
}
/* La trama a DUE righe; l'integrale sta nella modale. */
.serie-trama-blocco .series-detail-description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.serie-leggi {
  margin-top: 10px;
  padding: 6px 18px;
  border: 2.46px solid rgba(255, 255, 255, 0.25);
  color: white;
  font-weight: 600;
  outline: none;
  font-size: 22px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
.serie-meta .series-detail-buttons {
  margin-top: 30px;
  align-items: center;
}
.series-detail-fav-button {
  padding-left: 20px;
  padding-right: 20px;
  border: 2.46px solid rgba(255, 255, 255, 0.25);
  color: white;
  outline: none;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.6);
  padding-top: 10px;
  padding-bottom: 10px;
  margin-right: 30px;
  font-size: 24px;
}
/* L'ordine verticale (c27, forma 5): cast, riga dei tasti, episodi, uno sotto l'altro a tutta larghezza. */
.serie-cast-riga {
  margin-top: 30px;
}
.serie-cast-riga .series-detail-cast {
  padding-top: 10px;
  padding-bottom: 10px;
}
.serie-tasti {
  margin-top: 30px;
  align-items: center;
  padding-left: 6px; /* spazio per l'anello */
  /* punto 2 (17 ottobre 2026): "Stagione 0 · 18 stagioni" e' piu' lungo; dove la riga non basta (il telefono) va a capo. Il margine
     sotto ogni tasto e quello negativo della riga si compensano: sui TV la riga resta com'era */
  flex-wrap: wrap;
  margin-bottom: -12px;
}
.serie-tasti > * {
  margin-bottom: 12px;
}
/* il suggerimento sopra il tasto Stagione (SeriesDetailPage: una volta per serie, 4 s o il primo tasto) */
.stagione-suggerimento {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: 14px;
  padding: 10px 18px;
  white-space: nowrap;
  font-size: 22px;
  font-weight: 600;
  color: #111;
  background: var(--gold);
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  z-index: 1001;
  pointer-events: none;
}
.stagione-suggerimento::after {
  content: "";
  position: absolute;
  left: 32px;
  top: 100%;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--gold);
}
.serie-episodi {
  margin-top: 30px;
  padding-bottom: 40px;
  padding-left: 6px; /* spazio per l'anello delle righe */
}
.serie-sezione-titolo {
  color: var(--gold);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 14px 0;
}
.serie-episodio {
  display: flex;
  align-items: center;
  height: 120px;
  margin-bottom: 12px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.43);
  padding: 8px;
  cursor: pointer;
  position: relative;
  z-index: 0;
}
.serie-episodio.series-detail-button-focused {
  z-index: 10;
}
.serie-episodio-miniatura {
  width: 178px;
  height: 100px;
  flex: 0 0 178px;
  border-radius: 6px;
  background-color: #283c46;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}
.serie-episodio-testi {
  flex: 1;
  min-width: 0;
  padding-left: 20px;
}
.serie-episodio-titolo {
  font-size: 28px;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.serie-episodio-riga2 {
  margin: 8px 0 0 0;
  font-size: 20px;
  display: flex;
  align-items: center;
}
.serie-episodio-riga2 .fa-star {
  color: #777;
  margin-right: 4px;
}
.serie-episodio-riga2 .fa-star.piena {
  color: var(--gold);
}
.serie-episodio-durata {
  margin-left: 20px;
  color: rgba(213, 213, 213, 1);
  font-size: 22px;
}
.serie-episodio-visto {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  margin-left: 16px;
}
/* La modale della trama integrale: sopra tutto, Back la chiude. */
.serie-modale {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.serie-modale.hidden {
  display: none;
}
.serie-modale-scatola {
  width: 70%;
  height: 80%;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.6);
  padding: 40px;
  display: flex;
  flex-direction: column;
}
.serie-modale-titolo {
  color: var(--gold);
  font-size: 35px;
  font-weight: 600;
  margin: 0 0 20px 0;
}
.serie-modale-testo {
  flex: 1;
  overflow-y: auto;
  font-size: 35px;
  line-height: 1.35;
  color: rgba(213, 213, 213, 1);
  white-space: pre-line;
}

/* IL FORMATO DETTO PRIMA (9 ottobre 2026): al posto di Riproduci e sulla riga dell'episodio, nel browser, quando il browser non
   decodifica l'episodio. Non e' un tasto: niente fuoco. */
.serie-formato-web {
  margin: 0 30px 0 0;
  padding: 12px 24px;
  border: 2.46px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #f0b4a8;
  font-size: 22px;
  font-weight: 600;
  white-space: nowrap;
}
.serie-episodio-formato {
  margin-left: 16px;
  color: #f0b4a8;
  font-size: 0.85em;
}

/* L'AVVISO DELL'AUDIO (9 ottobre 2026, notte): sotto la riga dei tasti e sulla riga dell'episodio; il tasto resta. */
.serie-avviso-audio {
  margin: 12px 0 0 0;
  color: #f3d58a;
  font-size: 20px;
  font-weight: 600;
}
.serie-episodio-avviso {
  margin-left: 16px;
  color: #f3d58a;
  font-size: 0.85em;
}

/* LA RIGA "VERSIONE" (decisione 110, D4 a; components/Versioni.js): prima di Play, come gli altri tasti */
.series-detail-version-button {
  margin-right: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 28px;
  padding-right: 28px;
  border: 2.46px solid rgba(255, 255, 255, 0.25);
  color: white;
  font-weight: 600;
  outline: none;
  white-space: nowrap;
  font-size: 24px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.6);
}