/* Fanta di Zona — calendario aste
   Token e componenti da docs/04-DESIGN.md. Mobile first: si progetta a 380px.

   Regola di colore tenuta stretta: il verde sta SOLO sulla fila di posti e sulla
   CTA di prenotazione. Tutto il resto della card vive di grigi, ambra e peso
   tipografico, così la fila di posti resta l'elemento che si vede per primo. */

/* ---------- Token ---------- */

:root {
  --green:        #5FB259;
  --green-dark:   #3B7A37;
  --bg:           #101411;
  --surface:      #181D18;
  --white:        #FFFFFF;
  --muted:        #9AA39A;
  --amber:        #C9922E;

  /* derivati, sempre dai colori sopra */
  --surface-top:    #1C221C;  /* superficie: bordo alto del gradiente verticale */
  --surface-bottom: #151A15;  /* superficie: bordo basso */
  --line:          rgba(154, 163, 154, .20);
  --line-strong:   rgba(154, 163, 154, .36);
  --surface-up:    #1E241E;
  --white-soft:    rgba(255, 255, 255, .09);
  --white-line:    rgba(255, 255, 255, .30);
  --green-soft:    rgba(95, 178, 89, .14);
  --green-line:    rgba(95, 178, 89, .42);
  --green-faint:   rgba(95, 178, 89, .05);

  /* palette Starcks — SOLO per il box Listone di Zona (deroga chiesta da
     Nick il 13/8: il box è roba Starcks e si veste Starcks). Valori presi
     dai token del company profile Starcks. */
  --starcks-teal:      #2BC5AD;
  --starcks-teal-dark: #1EA58F;
  --starcks-navy:      #0A1F3D;
  --starcks-navy-deep: #04122B;
  --starcks-muted:     #9DB4D4;
  --starcks-line:      rgba(43, 197, 173, .45);
  --starcks-soft:      rgba(43, 197, 173, .15);

  /* blu Telegram — SOLO per i bottoni del blocco "Seguici su Telegram"
     (deroga chiesta da Nick il 13/8, come per Starcks) */
  --telegram-blue:      #2AABEE;
  --telegram-blue-dark: #229ED9;
  --telegram-ink:       #04121C;   /* testo scuro sul blu: contrasto AA */
  --amber-soft:    rgba(201, 146, 46, .13);
  --amber-line:    rgba(201, 146, 46, .55);
  --scrim:         rgba(8, 11, 8, .78);

  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --radius:    14px;
  --radius-sm: 10px;
  --wrap:      1100px;
  --tap:       44px;

  --fast: 140ms;
  --slow: 220ms;

  /* profondità delle superfici sopra l'ambiente: luce sul bordo alto,
     ombra morbida sotto */
  --elevation: inset 0 1px 0 rgba(255, 255, 255, .06),
               0 16px 32px -20px rgba(0, 0, 0, .55);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* base stratificata: appena più chiara in alto, più fonda in basso.
     Scorre col contenuto; l'atmosfera fissa sta nei due pseudo-elementi. */
  background: linear-gradient(180deg, #131813 0%, var(--bg) 35%, #0D100D 100%) var(--bg);
  color: var(--white);
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* stacking context: tiene l'ambiente (::before/::after a z-index -1)
     sopra lo sfondo del body ma sotto tutto il contenuto */
  isolation: isolate;
}

/* ---------- Ambiente ----------
   Sera di stadio: chiazze verde scuro che derivano lente dietro al contenuto,
   più una vignettatura che riporta l'occhio al centro. Solo sfondo: le card
   sopra restano opache e nitide. Gradienti radiali e transform sul compositor,
   niente filter/backdrop-filter: su telefono costa zero. */

body::before {
  content: '';
  position: fixed;
  inset: -25%; /* più grande del viewport: la deriva non scopre mai i bordi */
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 34% at 24% 12%, rgba(59, 122, 55, .16), transparent 70%),
    radial-gradient(50% 40% at 82% 80%, rgba(59, 122, 55, .09), transparent 70%),
    radial-gradient(85% 45% at 50% 0%, rgba(95, 178, 89, .05), transparent 75%);
  animation: drift 90s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(1.5%, 1.5%, 0) scale(1.05); }
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 38%, transparent 58%, rgba(5, 8, 5, .42) 100%);
}

/* Secondo strato d'ambiente (13/8): due chiazze che derivano in
   controtempo rispetto a body::before, con una rotazione impercettibile —
   il fondo respira, non si muove. Solo gradienti+transform (mai blur),
   si ferma da solo con prefers-reduced-motion. */
.ambience {
  position: fixed;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(30% 24% at 72% 18%, rgba(95, 178, 89, .07), transparent 70%),
    radial-gradient(26% 22% at 16% 72%, rgba(95, 178, 89, .05), transparent 70%);
  animation: drift-2 64s ease-in-out infinite alternate;
}

@keyframes drift-2 {
  from { transform: translate3d(1.2%, 1%, 0) rotate(0deg) scale(1.04); }
  to   { transform: translate3d(-1.2%, -1.4%, 0) rotate(1.2deg) scale(1); }
}

/* Easter egg: un click sul vuoto fa comparire il logo nel punto toccato —
   sale e svanisce da solo. Gioco, non interfaccia. */
.logo-pop {
  position: fixed;
  z-index: 50;
  width: 84px;
  height: 32px;
  margin: -16px 0 0 -42px;
  pointer-events: none;
  animation: logo-pop 1100ms ease-out forwards;
}

@keyframes logo-pop {
  0%   { opacity: 0; transform: translateY(6px) scale(.6); }
  18%  { opacity: .9; transform: translateY(0) scale(1.05); }
  32%  { transform: scale(1); }
  100% { opacity: 0; transform: translateY(-26px) scale(1); }
}

h1, h2, h3, p, ul, ol { margin: 0; }

/* l'attributo hidden deve vincere anche su display:flex/grid dichiarati */
[hidden] { display: none !important; }
ul, ol { padding: 0; list-style: none; }

button {
  margin: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

#contenuto:focus { outline: none; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--sp-4);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 60;
  padding: var(--sp-3) var(--sp-4);
  background: var(--green);
  color: var(--bg);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: top var(--fast) ease;
}

.skip-link:focus { top: var(--sp-3); }

/* ---------- Intestazione e chiusura ---------- */

/* Intestazione centrata: il blocco di testo è stretto (~60ch) e sopra i
   720px centrarlo evita la metà destra inerte — un dato "vivo" lì avrebbe
   legato l'intestazione allo stato dei dati (caricamento, errore, filtri) */
.site-header {
  padding-block: var(--sp-6) var(--sp-5);
  text-align: center;
}

/* Il logo apre la pagina come marchio, non come icona: grande, con aria
   prima del titolo; la firma "Stay in Zona 🏟" resta in fondo — chiude,
   non apre. Il quadratino verde è un posto della fila: segnale, non
   riempimento. Nessun link: solo firma. */
.site-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.site-kicker::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--green);
}

.site-kicker img {
  display: block;
  width: 84px;
  height: 32px;
}

.site-title {
  font-size: clamp(28px, 8vw, 40px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.site-subtitle {
  margin-top: var(--sp-2);
  max-width: 60ch;
  margin-inline: auto;
  color: var(--muted);
  font-size: 15px;
}

/* L'enfasi è parte del copy (05-COPY): il grassetto da solo deve bastare
   a chi scorre veloce */
.site-subtitle strong {
  color: var(--white);
  font-weight: 700;
}

/* ---------- Avvisi via mail + Seguici su Telegram ---------- */

/* Due blocchi quieti sotto il contenuto, per tutte le viste: pannelli come
   le superfici della pagina, nessuna competizione con card e listoni. */
.notify,
.follow {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: linear-gradient(180deg, var(--surface-top), var(--surface) 55%, var(--surface-bottom)) var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--elevation);
}

.notify { margin-top: var(--sp-6); }

.extra-title {
  font-size: 16px;
  font-weight: 700;
}

.extra-body {
  margin-top: var(--sp-1);
  color: var(--muted);
  font-size: 14px;
}

.notify-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.notify-form .field-input { flex: 1 1 220px; }

/* i .btn nascono a tutta larghezza per le card: qui stanno in fila */
.notify-form .btn { width: auto; flex: 0 0 auto; }
.follow-actions .btn { width: auto; flex: 1 1 auto; }

.notify .field-help { margin-top: var(--sp-3); }

.follow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* i bottoni Telegram si vestono Telegram: blu pieno, testo scuro */
.btn--telegram {
  background-color: var(--telegram-blue);
  color: var(--telegram-ink);
  transition: background-color var(--fast) ease;
}

.btn--telegram:hover,
.btn--telegram:focus-visible { background-color: var(--telegram-blue-dark); color: var(--telegram-ink); }

/* ---------- Footer ---------- */

/* Il commiato: l'unico punto dove il verde respira — una sfumatura scura
   che sale dal fondo, atmosfera e non insegna. Separato dal contenuto con
   lo spazio, non con una linea. */
.site-footer {
  margin-top: var(--sp-7);
  padding-block: var(--sp-7) var(--sp-6);
  text-align: center;
  background: linear-gradient(180deg, rgba(95, 178, 89, 0), rgba(95, 178, 89, .08));
}

.footer-logo {
  display: block;
  width: 105px;
  height: 40px;
  margin-inline: auto;
}

.signoff {
  margin-top: var(--sp-3);
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

.footer-canali {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding: 0;
  list-style: none;
}

.footer-canali a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  color: var(--muted);
  transition: color var(--fast) ease;
}

.footer-canali a:hover,
.footer-canali a:focus-visible { color: var(--white); }

.footer-canali svg { display: block; }

.footer-privacy { margin-top: var(--sp-4); }

.footer-privacy a {
  color: var(--muted);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--fast) ease;
}

.footer-privacy a:hover,
.footer-privacy a:focus-visible { color: var(--white); }

/* ---------- Toggle vista + filtri ---------- */

.chrome {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.view-toggle {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.view-toggle button {
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  transition: color var(--fast) ease, background-color var(--fast) ease;
}

.view-toggle button[aria-pressed="true"] {
  background: var(--surface-up);
  color: var(--white);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* chip scrollabili in orizzontale su mobile */
.filters {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  margin-inline: calc(var(--sp-4) * -1);
  padding-inline: var(--sp-4);
}

.filters::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--fast) ease, border-color var(--fast) ease, background-color var(--fast) ease;
}

.chip:hover { color: var(--white); border-color: var(--white-line); }

.chip[aria-pressed="true"] {
  background: var(--white-soft);
  border-color: var(--white-line);
  color: var(--white);
  font-weight: 600;
}

/* ---------- Box Listone di Zona ---------- */

/* Il box è roba Starcks e si veste Starcks (deroga di Nick alla regola
   "solo colori ZonaFanta", 13/8): gradiente navy e teal in un mare di
   verde — impossibile scambiarlo per una card. Il navy è più scuro delle
   superfici delle card, quindi la fila di posti resta l'elemento più
   luminoso della lista anche con la CTA teal piena. */
.listone {
  margin-bottom: var(--sp-4);
  padding: var(--sp-4);
  /* gradiente dei due colori Starcks: velo teal che entra dall'alto sul
     navy che scende — colore, non luminanza */
  background:
    linear-gradient(160deg, var(--starcks-soft), transparent 45%),
    linear-gradient(160deg, var(--starcks-navy), var(--starcks-navy-deep) 70%);
  border: 1px solid var(--starcks-line);
  border-radius: var(--radius);
  box-shadow: var(--elevation);
}

.listone-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.listone-desc {
  margin-top: var(--sp-2);
  max-width: 60ch;
  color: var(--starcks-muted);
  font-size: 14px;
}

.listone-highlight {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.listone-badge {
  padding: 3px 10px;
  border: 1px solid var(--starcks-line);
  border-radius: 999px;
  background: var(--starcks-soft);
  font-size: 13px;
  font-weight: 700;
}

/* il montepremi è il richiamo: grande e teal, sono 500€ */
.listone-premi {
  color: var(--starcks-teal);
  font-size: 18px;
  font-weight: 800;
}

.listone-split {
  margin-top: var(--sp-2);
  color: var(--starcks-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.listone-nota {
  margin-top: var(--sp-1);
  color: var(--starcks-muted);
  font-size: 13px;
}

.listone-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.listone-cta,
.listone-regole {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding-inline: var(--sp-4);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.listone-cta {
  flex: 1 1 auto;
  background: var(--starcks-teal);
  color: var(--starcks-navy-deep);
  transition: background-color var(--fast) ease;
}

.listone-cta:hover,
.listone-cta:focus-visible { background: var(--starcks-teal-dark); }

/* versione slim in cima alla vista Fanta: una striscia, non una scheda */
.listone--slim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}

.listone-slim-text { flex: 1 1 200px; }

.listone-slim-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.listone-slim-sub {
  margin-top: 2px;
  color: var(--starcks-teal);
  font-size: 13px;
  font-weight: 700;
}

.listone-cta--slim {
  flex: 0 0 auto;
  padding-inline: var(--sp-3);
  font-size: 14px;
}

/* le regole stanno sulla pagina Starcks del campionato: bottone secondario */
.listone-regole {
  border: 1px solid var(--starcks-line);
  color: var(--starcks-teal);
  transition: border-color var(--fast) ease, background-color var(--fast) ease;
}

.listone-regole:hover,
.listone-regole:focus-visible { border-color: var(--starcks-teal); background: var(--starcks-soft); }

/* ---------- Lista ---------- */

.league-list {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .league-list { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Card lega ---------- */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: linear-gradient(180deg, var(--surface-top), var(--surface) 55%, var(--surface-bottom)) var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* profondità, non effetto: gradiente verticale appena percettibile,
     filo di luce sopra + ombra morbida sotto. La superficie resta opaca;
     quello che ci sta sopra (fila di posti, badge, contatore) resta piatto. */
  box-shadow: var(--elevation);
}

.card--closed { opacity: .7; }

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.card-date {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}

.card-day {
  font-size: 40px;
  font-variant-numeric: tabular-nums;
}

.card-month {
  font-size: 18px;
  text-transform: uppercase;
}

.card-when {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.card-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.card-note {
  color: var(--muted);
  font-size: 13px;
}

.card-foot { margin-top: auto; }

/* ---------- Badge ---------- */

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.badge-row--top {
  justify-content: flex-end;
  flex: 0 0 auto;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}

/* stato: l'unico colorato è "ultimi posti", che è un'informazione di urgenza */
.badge--last {
  border-color: var(--amber-line);
  background: var(--amber-soft);
  color: var(--amber);
  font-weight: 600;
}

/* "Oggi" è il segnale più forte della pagina: contrasto pieno, non verde,
   per non rubare l'occhio alla fila di posti */
.badge--today {
  border-color: var(--white);
  background: var(--white);
  color: var(--bg);
  font-weight: 700;
}

/* ---------- Riga staff (sopra la lista) ---------- */

/* Lo staff c'è in ogni asta: detto una volta qui, non è un badge né un filtro */
.staff-note {
  margin-bottom: var(--sp-4);
  color: var(--muted);
  font-size: 13px;
}

/* ---------- Griglia dettagli ---------- */

.details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3) var(--sp-4);
  padding-block: var(--sp-1);
}

@media (min-width: 1024px) {
  .details { grid-template-columns: repeat(4, 1fr); }
}

.detail-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.detail-value {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- Fila di posti (elemento firma) ---------- */

.seats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: var(--sp-2);
}

.seat {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1.5px solid var(--line-strong);
  background: transparent;
}

.seat--paid {
  border-color: var(--green);
  background: var(--green);
}

.seat--waiting {
  border-color: var(--amber);
  background: transparent;
}

.seats-text {
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.seats-text .free    { color: var(--green); font-weight: 600; }
.seats-text .full    { color: var(--muted); font-weight: 600; }
.seats-text .waiting { color: var(--amber); font-weight: 600; }
.seats-text--unknown { color: var(--muted); }

/* aggiornamento del contatore dopo una prenotazione andata a buon fine */
.seats-flash { animation: flash var(--slow) ease-out 2; }

@keyframes flash {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* ---------- Bottoni ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--fast) ease, border-color var(--fast) ease, color var(--fast) ease;
}

/* La CTA è l'unico posto dove un gradiente verde vero aggiunge vita senza
   rubare niente: il colore pieno sta sotto (e transita all'hover), la luce
   sta in un velo fisso sopra. */
.btn--primary {
  background-color: var(--green);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .14));
  color: var(--bg);
}

.btn--primary:hover { background-color: var(--green-dark); color: var(--white); }

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--white);
}

.btn--ghost:hover { border-color: var(--white-line); background: var(--white-soft); }

.btn--gap { margin-top: var(--sp-4); }

.btn[disabled] {
  border-color: var(--line);
  background: none;
  color: var(--muted);
  cursor: not-allowed;
}

.btn[aria-busy="true"] { color: transparent; position: relative; }

.btn[aria-busy="true"]::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  color: var(--bg);
  animation: spin 700ms linear infinite;
}

.btn--ghost[aria-busy="true"]::after { color: var(--white); }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Calendario ---------- */

.calendar {
  max-width: 560px;
  margin-inline: auto;
  padding: var(--sp-4);
  background: linear-gradient(180deg, var(--surface-top), var(--surface) 55%, var(--surface-bottom)) var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--elevation);
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.cal-month {
  font-size: 17px;
  font-weight: 700;
  text-transform: capitalize;
}

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--white);
  font-size: 17px;
  transition: border-color var(--fast) ease, background-color var(--fast) ease;
}

.cal-nav:hover:not([disabled]) { border-color: var(--white-line); background: var(--white-soft); }
.cal-nav[disabled] { color: var(--muted); border-color: var(--line); cursor: not-allowed; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

/* sotto i 420px il calendario stringe i margini: serve a tenere le caselle
   dei giorni a 44px di lato, la misura minima per il dito */
@media (max-width: 420px) {
  .calendar { padding: var(--sp-3); }
  .cal-grid { gap: 2px; }
}

.cal-dow {
  padding-bottom: var(--sp-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
}

.cal-cell { display: flex; justify-content: center; }

.cal-day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 56px;
  height: 46px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--fast) ease, border-color var(--fast) ease, color var(--fast) ease;
}

.cal-day--empty { visibility: hidden; }

/* i giorni con aste sono caselle verdi piene (Nick, 13/8): il calendario
   dice a colpo d'occhio dov'è occupato. Il pallino diventa ridondante lì
   e si spegne */
.cal-day--has {
  color: var(--bg);
  background: var(--green);
  border-color: transparent;
  font-weight: 700;
}

.cal-day--has:hover { background: var(--green-dark); color: var(--white); }

.cal-day--has .cal-dot { display: none; }

/* il giorno di partenza di un listone è blu Starcks; se quel giorno c'è
   anche un'asta la casella resta cliccabile e il pallino verde dice che
   l'asta c'è comunque */
.cal-day--listone {
  color: var(--white);
  background: var(--starcks-navy);
  border-color: var(--starcks-teal);
}

.cal-day--listone:hover { background: var(--starcks-navy-deep); border-color: var(--starcks-teal); color: var(--white); }

.cal-day--listone .cal-dot { display: block; background: var(--green); }

.cal-day--today { box-shadow: inset 0 0 0 1px var(--white-line); }

.cal-day[aria-pressed="true"] {
  background: var(--white);
  border-color: var(--white);
  color: var(--bg);
}

.cal-dot {
  position: absolute;
  bottom: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
}

.cal-day[aria-pressed="true"] .cal-dot { background: var(--green-dark); display: block; }

/* la striscia slim dentro il riquadro del calendario: sopra ha la griglia,
   il margine sotto non serve */
.calendar .listone--slim { margin: var(--sp-3) 0 0; }

/* Finestra "in arrivo": periodo con aste previste ma date non confermate.
   Tratteggio come il coming soon — informazione, non lega: si deve leggere
   subito come diversa dai giorni con le aste vere */
.cal-window {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
}

/* i testi cedono spazio alla CTA: sugli schermi stretti l'etichetta va su
   due righe e il bottone resta a fianco, mai sotto */
.cal-window-text {
  flex: 1;
  min-width: 0;
}

.cal-window .notify-jump { flex: none; margin-top: 0; }

.cal-window-label {
  display: block;
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
}

.cal-window-note {
  display: block;
  margin-top: var(--sp-1);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

/* la CTA "Avvisami" (finestre in arrivo + coming soon) non è una
   prenotazione: bottone piccolo, non a tutta larghezza come le CTA delle
   card. Nel coming soon (testo centrato) si centra da sola; il margine
   sopra serve lì, nella fascia flex non fa danni perché vince il gap */
.notify-jump {
  width: auto;
  min-height: var(--tap);
  font-size: 14px;
  margin-top: var(--sp-3);
}

.cal-results { margin-top: var(--sp-4); }

.cal-results-title {
  margin-bottom: var(--sp-3);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

/* Blocco "coming soon" in fondo alla lista: quieto, non è una card e non
   compete con niente */
.coming-soon {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.coming-soon-title {
  color: var(--white);
  font-weight: 700;
}

.coming-soon-body {
  margin-top: var(--sp-2);
  font-size: 13px;
}

/* ---------- Stati di sistema ---------- */

.state {
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--muted);
  background: linear-gradient(180deg, var(--surface-top), var(--surface) 55%, var(--surface-bottom)) var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--elevation);
}

.state-title {
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
}

.state-body {
  margin: var(--sp-2) auto 0;
  max-width: 40ch;
  font-size: 15px;
}

.state .btn {
  width: auto;
  min-width: 200px;
  margin-top: var(--sp-4);
}

/* Scheletro: è una card vera col testo spento, quindi le altezze coincidono
   per costruzione e l'arrivo dei dati non sposta niente. */
.card--skeleton { pointer-events: none; }

.card--skeleton .seats-text { color: transparent; }

.card--skeleton .card-day,
.card--skeleton .card-month,
.card--skeleton .card-when,
.card--skeleton .card-name,
.card--skeleton .badge,
.card--skeleton .detail-label,
.card--skeleton .detail-value,
.card--skeleton .seats-text span,
.card--skeleton .seat,
.card--skeleton .btn {
  color: transparent;
  background: var(--white-soft);
  border-color: transparent;
  border-radius: 6px;
  animation: pulse 1.4s ease-in-out infinite;
}

.card--skeleton .btn { border-radius: var(--radius-sm); }
.card--skeleton .seat { border-radius: 4px; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}

/* ---------- Modale ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--scrim);
  animation: fade var(--slow) ease;
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: 100%;
  max-height: 100dvh;
  padding: var(--sp-5) var(--sp-4) var(--sp-6);
  overflow-y: auto;
  background: var(--surface);
  border-top: 1px solid var(--line-strong);
}

/* a schermo pieno su mobile */
@media (max-width: 599px) {
  .modal { min-height: 100dvh; }
}

@media (min-width: 600px) {
  .modal-backdrop { align-items: center; }
  .modal {
    max-width: 460px;
    max-height: 92dvh;
    padding: var(--sp-5);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
  }
}

.modal:focus { outline: none; }

.modal-close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
}

.modal-close:hover { color: var(--white); background: var(--white-soft); }

/* durante l'invio la modale non si chiude: il ✕ lo dice anche a vista */
.modal-close[disabled] { opacity: .4; cursor: not-allowed; background: none; }

.modal-title {
  padding-right: var(--tap);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.15;
}

.modal-sub {
  margin-top: var(--sp-1);
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

.modal-body {
  color: var(--muted);
  font-size: 15px;
  white-space: pre-line;
}

.modal-note {
  color: var(--muted);
  font-size: 13px;
}

.modal-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* ---------- Form ---------- */

.field { display: block; }

.field + .field { margin-top: var(--sp-4); }

.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
}

.field-input {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--white);
  font: inherit;
  font-size: 16px; /* sotto i 16px iOS zooma al focus */
  transition: border-color var(--fast) ease;
}

.field-input::placeholder { color: var(--muted); opacity: .7; }
.field-input:hover { border-color: var(--white-line); }

.field-help {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.field-error {
  display: block;
  margin-top: 6px;
  color: var(--amber);
  font-size: 13px;
  font-weight: 500;
}

.field--invalid .field-input { border-color: var(--amber); }

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-error {
  padding: var(--sp-3);
  background: var(--amber-soft);
  border: 1px solid var(--amber-line);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-size: 14px;
}

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--sp-5);
  z-index: 60;
  transform: translateX(-50%);
  padding: var(--sp-3) var(--sp-4);
  background: var(--white);
  border-radius: 999px;
  color: var(--bg);
  font-size: 14px;
  font-weight: 700;
  animation: toast-in var(--slow) ease;
}

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- Movimento ---------- */

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