/* VA-List: aggiunte del sito vero alla grafica della bozza (stile.css e pagine.css restano quelli della bozza). */

/* I filtri delle news sono link (funzionano anche senza JavaScript) */
a.filtro { display: inline-flex; align-items: center; line-height: 1; }
a.filtro[aria-current="page"] { cursor: default; }

/* News: pagine più vecchie */
.sfoglia {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
}
.sfoglia > :last-child { justify-self: end; }
.sfoglia__conto { font-family: var(--mono); font-size: 13px; color: var(--text-3); }
.sfoglia .btn .icona { width: 16px; height: 16px; }

/* Scheda: le recensioni oltre le prime otto */
.recensioni-altre { margin-top: 14px; }
.recensioni-altre > summary { list-style: none; display: inline-flex; align-items: center; cursor: pointer; }
.recensioni-altre > summary::-webkit-details-marker { display: none; }
.recensioni-altre[open] > summary { margin-bottom: 14px; }

/* Elenco: i nomi delle altre compagnie per chi non ha JavaScript */
.nota-elenco { margin-top: 24px; font-size: 13px; line-height: 1.8; color: var(--text-3); }
.nota-elenco a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }

/* Testi delle compagnie (descrizioni e articoli): elenchi e link */
.prosa ul { margin: 0 0 1em; padding-left: 1.2em; }
.prosa li + li { margin-top: 0.35em; }
.prosa a { overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.int-q__risposta a, .recensione p { overflow-wrap: anywhere; }

/* ---------- Fase 2: moduli veri (accesso, iscrizione, area, recensioni) ---------- */

/* Messaggio del server sopra o dentro un modulo: errore o conferma */
.messaggio-modulo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: var(--r-m);
  font-size: 14.5px;
  line-height: 1.5;
}
.modulo > .messaggio-modulo { margin-top: 0; }
.messaggio-modulo .icona { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.messaggio-modulo a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.messaggio-modulo--errore { background: rgb(255 138 128 / 0.1); outline: 1px solid rgb(255 138 128 / 0.35); outline-offset: -1px; color: #ffc2bb; }
:root[data-theme="light"] .messaggio-modulo--errore { background: #fdecea; outline-color: rgb(198 40 40 / 0.3); color: #8e1c1c; }
.messaggio-modulo--ok { background: var(--accent-soft); outline: 1px solid rgb(242 181 68 / 0.35); outline-offset: -1px; color: var(--text); }
.messaggio-modulo--ok .icona { color: var(--accent-text); }

/* Campo trappola per i programmi che riempiono i moduli: le persone non lo vedono */
.campo-trappola { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Controllo di sicurezza di Cloudflare: posto tenuto, così il modulo non salta quando compare */
.cf-turnstile, .cf-turnstile-passo { min-height: 65px; }
.cf-turnstile[data-size="compact"], .cf-turnstile-passo[data-size="compact"] { min-height: 140px; }

/* "send a new code" nel piede dell'accesso: un pulsante che sembra un link */
.accesso__piede button.link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.accesso__piede button.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Testata da collegato: nome e uscita al posto di "Log in" e "Sign up" */
.testata__utente { max-width: 180px; }
.testata__utente span { overflow: hidden; text-overflow: ellipsis; }
.testata__utente .icona { width: 16px; height: 16px; flex: none; }
.testata__utente[aria-current="page"] { border-color: rgb(242 181 68 / 0.45); }

/* Voto: pulsante della compagnia già votata, pulsanti in attesa */
.btn.is-votato { background: var(--accent-soft); border-color: rgb(242 181 68 / 0.45); color: var(--accent-text); cursor: default; }
.btn.is-votato:hover { background: var(--accent-soft); transform: none; }
.btn.is-votato .icona { width: 16px; height: 16px; }
.btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* Scheda: scrivere una recensione */
.recensioni__nota { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 14.5px; }
.recensioni__nota .icona { width: 16px; height: 16px; color: var(--accent-text); }
.recensione-nuova {
  margin-top: 22px;
  padding: 20px;
  border-radius: var(--r-l);
  background: var(--surface-2);
  outline: 1px solid var(--line);
  outline-offset: -1px;
  scroll-margin-top: calc(var(--testata-h) + 20px);
}
.recensione-nuova textarea { min-height: 130px; resize: vertical; }
.recensione-nuova .azioni { display: flex; justify-content: flex-end; }

/* ---------- Fase 3: area della compagnia ---------- */

/* I suoi articoli: titolo e data */
.elenco-articoli { list-style: none; display: grid; gap: 2px; margin: 12px 0 0; padding: 0; }
.elenco-articoli li { display: grid; gap: 3px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.elenco-articoli li:last-child { border-bottom: 0; }
.elenco-articoli a { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.elenco-articoli a:hover { color: var(--accent-text); }
.elenco-articoli time { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
/* Galleria: il pulsante per togliere una foto sta in un piccolo modulo */
.galleria-gestione figure form { margin: 0; }
.chi-voto small { color: var(--text-3); font-size: 12px; }
/* Nota del sito di prova dentro le pagine legali: tiene i suoi colori */
.prosa-legale p.nota-bozza { color: #f6dfab; }

/* ---------- Pannello admin (sito vero): i pulsanti sono piccoli moduli, elenchi semplici ---------- */
.admin-azione { display: inline-flex; margin: 0; }
.voci-semplici .admin-azione { grid-column: 2; grid-row: 1 / span 2; }
.elenco-admin { list-style: none; display: grid; margin: 0; padding: 0; }
.elenco-admin li { padding: 10px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.elenco-admin li:first-child { border-top: 0; padding-top: 0; }
.elenco-admin b { font-weight: 600; }
.elenco-admin .admin-sotto { margin-top: 3px; }
.pagina-admin .filtri a.filtro .mono { margin-left: 4px; color: var(--text-3); font-size: 12px; }

/* ---------- Pubblicità (AdSense, come oggi): spazi della grafica nuova ---------- */
.annuncio--classifica { margin-block: 18px; }
.annuncio--vero { height: auto; min-height: 90px; border: 0; background: none; overflow: hidden; }
.annuncio--rettangolo.annuncio--vero { min-height: 250px; }
.annuncio--vero::before { background-color: var(--bg); }
/* 728 px non ci stanno: sui telefoni e sui tablet stretti lo spazio della classifica non c'è (lo script non chiede l'annuncio) */
@media (max-width: 759px) { .annuncio--classifica { display: none; } }
/* Telefoni da 320 px: la colonna è di 288 px e l'annuncio della scheda è di 300. Invece di tagliarlo, esce di 6 px per lato nel margine */
@media (max-width: 331px) { .scheda__griglia .annuncio--rettangolo.annuncio--vero { width: 300px; max-width: none; margin-inline: calc((100% - 300px) / 2); } }

/* ---------- Premium (fase Premium) ---------- */
/* Regalo nella scheda: il pulsante apre il nome e PayPal */
.regalo__apri { margin-top: 14px; }
.regalo__apri > summary { list-style: none; cursor: pointer; margin-top: 0; }
.regalo__apri > summary::-webkit-details-marker { display: none; }
.regalo__apri[open] > summary { display: none; }
.regalo__modulo { display: grid; gap: 12px; }
.regalo__modulo .btn { margin-top: 0; }
[data-pulsanti-paypal]:empty { display: none; }
[data-pulsanti-paypal] { margin-top: 4px; min-height: 45px; }
@media (min-width: 641px) and (max-width: 1000px) {
  .scheda__griglia .regalo > details { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .scheda__griglia .regalo > details[open] { grid-column: 1 / -1; grid-row: auto; margin-top: 14px; }
}
/* Video delle schede Premium: il lettore di YouTube arriva solo quando lo si fa partire */
.video-facciata { aspect-ratio: 16 / 9; margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; display: grid; place-content: center; justify-items: center; gap: 12px;
  background: radial-gradient(circle at 50% 42%, var(--surface-2), var(--bg-alt)); }
.video-facciata__gioca { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font: inherit; font-weight: 600; cursor: pointer; }
.video-facciata__gioca:hover { background: var(--accent-hover); }
.video-facciata__gioca .icona { width: 22px; height: 22px; }
.video-facciata__nota { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 13px; }
.video-facciata__nota .icona { width: 16px; height: 16px; }
.video-lettore { display: block; width: 100%; aspect-ratio: 16 / 9; margin-top: 14px; border: 0; border-radius: 14px; background: #000; }
/* Pagina Premium: tre vantaggi (il quarto della bozza, Discord, arriva con la sua fase): tre colonne invece di quattro */
@media (min-width: 641px) { .vantaggi-premium:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Pagine di esito del pagamento: /premium/thank-you (ok, attesa) e /premium/payment-failed (ko) */
.esito-pagamento { padding: clamp(40px, 7vw, 88px) 0 clamp(32px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.esito-pagamento__griglia { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 860px) { .esito-pagamento__griglia { grid-template-columns: minmax(0, 1fr); } }
.esito-pagamento__icona { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text); }
.esito-pagamento__icona .icona { width: 30px; height: 30px; }
.esito-pagamento--attesa .esito-pagamento__icona { background: var(--surface-2); color: var(--text); }
.esito-pagamento--ko .esito-pagamento__icona { background: rgb(255 138 128 / 0.14); color: #ff8a80; }
:root[data-theme="light"] .esito-pagamento--ko .esito-pagamento__icona { background: rgb(198 40 40 / 0.08); color: #c62828; }
.esito-pagamento h1 { margin-top: 6px; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -0.03em; }
.esito-pagamento .testa-pagina__lead { max-width: 48ch; margin-top: 14px; }
.esito-pagamento__azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.esito-pagamento__dettagli h2 { font-size: 18px; }
.esito-pagamento__nota { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--text-2); font-size: 13px; }
.esito-pagamento__nota .icona { flex: none; width: 16px; height: 16px; }
.esito-pagamento .mono { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }

/* ---------- Scheda: la barra laterale segue lo scorrimento (2/11) ----------
   Il binario è .scheda__lato (alto quanto la colonna principale); dentro, il blocco che si sposta.
   Su computer è sticky; app.js sceglie l'aggancio (in alto o in fondo) quando la barra è più alta dello schermo. */
.scheda__lato-dentro { display: grid; gap: 16px; align-content: start; min-width: 0; }
@media (min-width: 1001px) {
  .scheda__lato-dentro { position: sticky; top: calc(var(--testata-h) + 16px); }
}
@media (max-width: 1000px) {
  .scheda__lato-dentro { display: contents; }
}

/* ---------- Visore delle foto della galleria (2/11): si apre dentro la pagina, non più la foto da sola ---------- */
.visore[open] {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 64px 80px 48px;
  border: 0;
  background: transparent;
  color: #fff;
  animation: visore-entra 0.2s ease-out;
}
.visore::backdrop { background: rgb(4 8 18 / 0.92); }
@keyframes visore-entra { from { opacity: 0; } }
.visore__foto { display: grid; justify-items: center; gap: 14px; max-width: 100%; margin: 0; }
.visore__foto img {
  display: block;
  max-width: min(1400px, 100%);
  max-height: calc(100dvh - 120px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.04);
  box-shadow: 0 30px 80px -24px rgb(0 0 0 / 0.85);
}
.visore__foto figcaption { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; color: rgb(255 255 255 / 0.75); }
.visore__btn {
  position: fixed;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.16s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .visore__btn:hover { background: rgb(255 255 255 / 0.24); } }
.visore__btn:active { transform: scale(0.94); }
.visore__btn .icona { width: 22px; height: 22px; stroke-width: 2; }
.visore__chiudi { top: 16px; right: 16px; }
.visore__prima, .visore__dopo { top: 50%; translate: 0 -50%; }
.visore__prima { left: 16px; }
.visore__dopo { right: 16px; }
.visore--una .visore__prima, .visore--una .visore__dopo, .visore--una figcaption { display: none; }
.visore :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
html:has(.visore[open]) { overflow: hidden; }
@media (max-width: 640px) {
  .visore[open] { padding: 72px 12px 96px; }
  .visore__foto img { max-height: calc(100dvh - 190px); border-radius: 8px; }
  .visore__prima, .visore__dopo { top: auto; bottom: 24px; translate: none; }
  .visore__prima { left: calc(50% - 60px); }
  .visore__dopo { right: calc(50% - 60px); }
}