/* ══ Bottom sheet mobile (cx-sheet) + rating popup (tc-rate) — portati dal tema SC ══ */
html.cx-sheet-open { overflow: hidden; }
.cx-sheet-overlay {
  position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,.6);
  display: flex; align-items: flex-end; animation: cx-sheet-fade .2s ease;
}
@keyframes cx-sheet-fade { from { opacity: 0; } to { opacity: 1; } }
.cx-sheet {
  /* base font FISSA: il tema mette body{font-size:1.15vw} sotto 499px (≈4.7px) e gli em del
     pannello diventavano minuscoli. Qui ripartiamo da una base fissa (non il vw del tema). */
  font-size: 13px;
  width: 100%; background: #181818; color: #fff;
  border-radius: 14px 14px 0 0; padding: 18px 16px 0; /* niente padding sotto: lo gestisce la riga "Dettagli" */
  box-shadow: 0 -8px 30px rgba(0,0,0,.5); animation: cx-sheet-up .25s ease;
  max-height: 88vh; overflow-y: auto;
}
@keyframes cx-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cx-sheet-head { display: flex; gap: 12px; position: relative; }
.cx-sheet-img { width: 27%; max-width: 108px; height: auto; object-fit: contain; border-radius: 6px; flex: none; background: #222; align-self: flex-start; }
.cx-sheet-info { flex: 1 1 auto; min-width: 0; padding-right: 28px; }
.cx-sheet-title { font-size: 1.85em; font-weight: 700; line-height: 1.15; }
.cx-sheet-meta { font-size: 1.05em; color: #b3b3b3; margin-top: .4em; display: flex; align-items: center; gap: .5em; }
.cx-sheet-sub { border: 1px solid #888; border-radius: 3px; padding: 0 .35em; font-size: .8em; }
.cx-sheet-plot { font-size: 1.05em; color: #d2d2d2; margin: .7em 0 0; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cx-sheet-close { position: absolute; top: 0; right: 0; background: rgba(120,120,120,.45); border: 0; color: #fff; padding: 0; border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; line-height: 0; }
.cx-sheet-close svg { width: 18px; height: 18px; display: block; }
.cx-sheet-actions { display: flex; justify-content: space-between; align-items: flex-start; margin: 20px 0 6px; max-width: 420px; }
.cx-sheet-act { display: flex; flex-direction: column; align-items: center; gap: .6em; color: #fff; text-decoration: none; font-size: 1em; flex: 1; }
.cx-sheet-icon { width: 3.2em; height: 3.2em; border-radius: 50%; background: #2b2b2b; border: 2px solid #4d4d4d; display: grid; place-items: center; font-size: 1em; }
.cx-sheet-play .cx-sheet-icon { background: #fff; color: #000; border-color: #fff; }
.cx-sheet-rcircle { position: relative; width: 3.2em; height: 3.2em; border-radius: 50%; display: grid; place-items: center; font-size: 1em; }
.cx-sheet-rcircle::after { content: ""; position: absolute; inset: 3px; background: #181818; border-radius: 50%; }
.cx-sheet-rval { position: relative; z-index: 1; font-weight: 700; font-size: .85em; }
/* "La mia lista"/"Valuta" sono <button> ora: reset aspetto da bottone */
button.cx-sheet-act { background: none; border: none; cursor: pointer; font: inherit; padding: 0; }
button.cx-sheet-act:disabled { opacity: .6; }
.cx-sheet-icon.cx-on { background: #fff; color: #000; border-color: #fff; }   /* lista aggiunta / titolo già votato */
.cx-sheet-act.cx-open .cx-sheet-icon { background: rgba(245,197,24,.25); }
/* riga stelle per il voto (compare al tap di "Valuta") */
.cx-sheet-rate { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 16px 0 2px; }
.cx-sheet-rate-lbl { font-size: 1.1em; color: #d2d2d2; }
.cx-sheet-stars { display: flex; gap: 8px; }
.cx-sheet-star { background: none; border: none; cursor: pointer; padding: 4px; line-height: 0; color: #f5c518; }
.cx-sheet-star:disabled { opacity: .6; }
/* riga "Episodi/Dettagli e altro": NON un pulsante, ma una riga a tutta larghezza con
   linea sopra (come l'originale), + spazio sotto per la safe-area del telefono */
.cx-sheet-details {
  display: flex; align-items: center; gap: .8em;
  margin: 18px -16px 0;                 /* bleed oltre il padding del sheet → full width */
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 10px)); /* spazio per il bordo del telefono */
  border-top: 1px solid rgba(255,255,255,.12);
  background: none;
  color: #fff; text-decoration: none; font-weight: 600; font-size: 1.45em;
}
.cx-sheet-details svg { width: 1.6em; height: 1.6em; flex: none; }
.cx-sheet-details .cx-sheet-chev { margin-left: auto; opacity: .8; }

/* pannello: i link (azioni/dettagli) restano bianchi al tap/hover, mai azzurri */
.cx-sheet a,
.cx-sheet a:link,
.cx-sheet a:visited,
.cx-sheet a:hover,
.cx-sheet a:active,
.cx-sheet a:focus {
  color: #fff !important;
  -webkit-tap-highlight-color: transparent;
}

/* Mobile: slider home con lo stesso margine sinistro dei Consigliati (~16px), non flush.
   Il Top 10 resta attaccato a sinistra come richiesto. */
@media screen and (max-width: 799px) {
  #home .slider-title { padding-left: 16px; }
  #home .slider-title.cx-top10 { padding-left: 0; }
}

/* pannello: ingrandisci le icone (play, +, ★) dentro i cerchi; il cerchio resta uguale */
.cx-sheet-icon svg { width: 1.8em; height: 1.8em; }

/* play: triangolo leggermente verso destra per apparire centrato nel cerchio */
.cx-sheet-play .cx-sheet-icon svg { margin-left: .28em; }

.tc-rate-wrap {
  position: relative;
}
/* stella del trigger gialla quando l'utente ha votato */
.tc-title-btn.tc-rated {
  color: #f5c518;
}
/* tooltip sotto il bottone */
.tc-rate-tooltip {
  position: absolute;
  top: calc(100% + 0.6em);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5em;
  background: rgba(20, 22, 26, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2em;
  padding: 0.45em 0.8em;
  box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.5);
  z-index: 50;
  white-space: nowrap;
}
.tc-rate-tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 0.45em solid transparent;
  border-bottom-color: rgba(20, 22, 26, 0.95);
}
.tc-rate-clear {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  color: #ff6b6b;
  cursor: pointer;
  padding: 0;
  font-size: 1em;
}
.tc-rate-clear:hover {
  color: #ff8585;
}
/* stelle: layer vuoto (grigio) + layer pieno (giallo) clippato in larghezza */
.tc-rate-stars {
  position: relative;
  display: inline-block;
  cursor: pointer;
  line-height: 0;
}
.tc-rate-empty,
.tc-rate-full-inner {
  display: flex;
}
.tc-rate-empty {
  color: rgba(255, 255, 255, 0.3);
}
.tc-rate-full {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  color: #f5c518;
  pointer-events: none;
}

/* mobile: stelle del voto più grandi (tap comodo col dito), sia nel dettaglio che nel pannello */
@media (max-width: 799px) {
  .tc-rate-tooltip { padding: 0.7em 1.1em; gap: 0.7em; }
  .tc-rate-stars { font-size: 1.85em; }
  .tc-rate-empty, .tc-rate-full-inner { gap: 0.15em; }
  .tc-rate-clear { font-size: 1.5em; }
}
.tc-rate-stars .star {
  width: 1.2em;
  height: 1.2em;
  flex: 0 0 auto;
}