/* =========================================================================
   form.css — modulo di pre-iscrizione, modifica e conferma.
   Dipende da base.css e site.css.

   Il pubblico e' soprattutto donne over 50 che compilano dal telefono:
   campi alti, etichette grandi e sempre visibili, errori vicini al campo
   che li ha generati, nessun trucchetto tipo etichetta che sparisce.
   ========================================================================= */

.modulo { max-width: 44rem; margin-inline: auto; }

.passo {
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--ombra-1);
}

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

.passo__titolo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--t-lg);
  margin-bottom: var(--sp-2);
}

.passo__numero {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-pill);
  background: var(--rosa-tenue);
  color: var(--rosa-testo);
  font-family: var(--font-testo);
  font-size: var(--t-sm);
  font-weight: 700;
}

.passo__aiuto {
  font-size: var(--t-sm);
  color: var(--testo-tenue);
  margin-bottom: var(--sp-4);
}

/* Un blocco disabilitato non deve sembrare rotto, solo "non ancora". */
.passo[disabled],
fieldset[disabled] .passo { opacity: 1; }

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

fieldset[disabled] { opacity: 0.5; }
fieldset[disabled] * { cursor: not-allowed; }

/* -------------------------------------------------------------------------
   CAMPI
   ------------------------------------------------------------------------- */

.campo { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.campo:last-child { margin-bottom: 0; }

.campo > label,
.gruppo-campi > legend {
  font-weight: 650;
  font-size: var(--t-base);
  color: var(--testo);
}

.campo__nota { font-size: var(--t-sm); color: var(--testo-tenue); }

.campo input[type='text'],
.campo input[type='email'],
.campo input[type='tel'],
.campo input[type='date'],
.campo select {
  width: 100%;
  /* 52px di altezza reale: comodo da toccare, e su iOS 16px di corpo evita
     lo zoom automatico all'ingresso nel campo. */
  min-height: 52px;
  padding: 0.75rem 1rem;
  font-size: 16px;
  color: var(--testo);
  background: #fff;
  border: 2px solid var(--bordo);
  border-radius: var(--r-md);
  transition: border-color var(--transizione), box-shadow var(--transizione);
}

.campo input:hover { border-color: #d8ccd1; }

.campo input:focus {
  outline: none;
  border-color: var(--rosa-testo);
  box-shadow: 0 0 0 3px rgba(237, 110, 167, 0.28);
}

.campo input[aria-invalid='true'] { border-color: var(--errore); }

.campo__errore {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--errore);
}

.campo__errore[hidden] { display: none; }

/* -------------------------------------------------------------------------
   CHIP — gruppo e sesso. Mai una tendina: si vede tutto e si tocca una volta.
   ------------------------------------------------------------------------- */

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

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.6em 1.1em;
  border: 2px solid var(--bordo);
  border-radius: var(--r-pill);
  background: #fff;
  font-size: var(--t-base);
  font-weight: 550;
  color: var(--testo);
  cursor: pointer;
  transition: border-color var(--transizione), background var(--transizione),
    color var(--transizione);
}

.chip input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  margin: 0;
  cursor: pointer;
}

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

.chip:has(input:checked),
.chip--scelto {
  border-color: var(--rosa-testo);
  background: var(--rosa-tenue);
  color: var(--rosa-scuro);
  font-weight: 650;
}

.chip:has(input:focus-visible) {
  outline: 3px solid var(--rosa);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   PARTECIPANTI
   ------------------------------------------------------------------------- */

.persona {
  border: 2px solid var(--bordo);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  background: var(--sfondo-alt);
}

.persona + .persona { margin-top: var(--sp-3); }

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

.persona__nome {
  font-family: var(--font-titoli);
  font-size: var(--t-lg);
  font-weight: 600;
}

.persona__via {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--rosa-testo);
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
}

.persona__via:hover { background: var(--rosa-tenue); color: var(--rosa-scuro); }

.coppia { display: grid; gap: var(--sp-4); }

@media (min-width: 560px) {
  .coppia { grid-template-columns: 1fr 1fr; }
}


/* -------------------------------------------------------------------------
   DATA A TRE TENDINE
   Il calendario del telefono e' scomodo per chi cerca il 1948: tre elenchi
   sono piu' lenti da toccare ma molto piu' facili da capire.
   ------------------------------------------------------------------------- */

.tre-tendine {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1.1fr;
  gap: var(--sp-2);
}

.tre-tendine select {
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 0.6rem;
  font-size: 16px;
  color: var(--testo);
  background: #fff;
  border: 2px solid var(--bordo);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--transizione), box-shadow var(--transizione);
}

.tre-tendine select:hover { border-color: #d8ccd1; }

.tre-tendine select:focus {
  outline: none;
  border-color: var(--rosa-testo);
  box-shadow: 0 0 0 3px rgba(237, 110, 167, 0.28);
}


/* La nota compare solo quando la scelta dichiarata e la data non vanno
   d'accordo: spiega chi ha ragione, senza bloccare nulla. */
.nota-quota {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--rosa-velo);
  border-left: 3px solid var(--rosa);
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--testo);
}

.nota-quota[hidden] { display: none; }

/* -------------------------------------------------------------------------
   PILLOLA DELLA QUOTA
   Compare solo quando la data e' completa: senza data non si puo' sapere
   se una persona paga o no, e dirlo lo stesso sarebbe una bugia.
   ------------------------------------------------------------------------- */

.pillola {
  display: inline-flex;
  align-items: center;
  padding: 0.3em 0.85em;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 700;
  white-space: nowrap;
}

.pillola[hidden] { display: none; }
.pillola--gratis { background: #e2f3ea; color: #14603d; }
.pillola--quota { background: var(--rosa-tenue); color: var(--rosa-scuro); }

/* -------------------------------------------------------------------------
   TOTALE
   ------------------------------------------------------------------------- */

.totale {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--rosa-tenue);
  border: 2px solid var(--rosa);
  border-radius: var(--r-lg);
}

.totale__voce { font-size: var(--t-sm); color: var(--rosa-scuro); font-weight: 600; }

.totale__cifra {
  font-family: var(--font-titoli);
  font-size: var(--t-2xl);
  font-variation-settings: 'opsz' 72, 'SOFT' 50;
  line-height: 1;
  color: var(--rosa-scuro);
}

/* -------------------------------------------------------------------------
   CONSENSI
   ------------------------------------------------------------------------- */

.consenso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  cursor: pointer;
}

.consenso:hover { background: var(--rosa-velo); }
.consenso + .consenso { margin-top: var(--sp-2); }

.consenso input {
  width: 26px;
  height: 26px;
  margin: 0;
  accent-color: var(--rosa-testo);
  cursor: pointer;
}

.consenso span { font-size: var(--t-sm); line-height: 1.5; }

/* -------------------------------------------------------------------------
   AVVISI
   ------------------------------------------------------------------------- */

.avviso {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  border-left: 4px solid;
  font-size: var(--t-sm);
}

.avviso[hidden] { display: none; }

.avviso__titolo { font-weight: 700; font-size: var(--t-base); }

.avviso--attenzione { background: var(--rosa-velo); border-color: var(--rosa); color: var(--testo); }
.avviso--errore { background: #fdecea; border-color: var(--errore); color: #7d1c16; }
.avviso--ok { background: #e2f3ea; border-color: var(--successo); color: #14603d; }

.avviso__azioni { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* -------------------------------------------------------------------------
   INVIO
   ------------------------------------------------------------------------- */

.invio { display: grid; gap: var(--sp-3); justify-items: center; margin-top: var(--sp-5); }
.invio .btn { width: 100%; }

@media (min-width: 560px) { .invio .btn { width: auto; min-width: 18rem; } }

/* Rotella di attesa dentro il bottone: dice che qualcosa sta succedendo. */
.filatoio {
  width: 1.1em;
  height: 1.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: gira 700ms linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .filatoio { animation-duration: 2s; }
}

/* -------------------------------------------------------------------------
   CONFERMA
   ------------------------------------------------------------------------- */

.conferma { display: grid; gap: var(--sp-5); justify-items: center; text-align: center; }

.conferma__codice {
  font-family: var(--font-titoli);
  font-size: var(--t-3xl);
  font-variation-settings: 'opsz' 96, 'SOFT' 50;
  letter-spacing: 0.04em;
  color: var(--rosa-testo);
  line-height: 1;
}

.qr {
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: #fff;
  border: 2px solid var(--bordo);
  border-radius: var(--r-lg);
  box-shadow: var(--ombra-1);
}

.qr svg { width: min(260px, 62vw); height: auto; display: block; }

.riepilogo {
  display: grid;
  gap: var(--sp-2);
  width: 100%;
  max-width: 26rem;
  text-align: left;
  padding: var(--sp-4) var(--sp-5);
  background: var(--sfondo-alt);
  border: 1px solid var(--bordo);
  border-radius: var(--r-md);
}

.riepilogo div { display: flex; justify-content: space-between; gap: var(--sp-4); }
.riepilogo dt { color: var(--testo-tenue); font-size: var(--t-sm); }
.riepilogo dd { margin: 0; font-weight: 650; }

.stampa-no { }

@media print {
  .intestazione, .barra-pollice, .piede, .stampa-no { display: none !important; }
  body { padding: 0; }
}

/* -------------------------------------------------------------------------
   VELO DI ATTESA
   Copre l'area coinvolta dalla chiamata e ne impedisce l'uso finche' il
   server non risponde. Chiaro e non nero: sopra un modulo bianco un fondo
   scuro sembrerebbe un errore invece che un'attesa.
   ------------------------------------------------------------------------- */

.in-attesa { position: relative; }

.velo-attesa {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-content: center;
  padding: var(--sp-4);
  /* Velo chiaro appena rosato: si legge che qualcosa sta succedendo senza
     nascondere del tutto quello che c'e' sotto. */
  background: rgba(253, 243, 247, 0.92);
  border-radius: inherit;
  text-align: center;
}

.velo-attesa__corpo {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  text-align: center;
}

/* Modulo piu alto dello schermo: il messaggio segue la vista, altrimenti
   resterebbe al centro del modulo, cioe fuori dalla piega. */
.velo-attesa--lungo { align-content: start; }

.velo-attesa--lungo .velo-attesa__corpo {
  position: sticky;
  top: 38vh;
}

.velo-attesa__rotella {
  width: 2.4rem;
  height: 2.4rem;
  border: 4px solid var(--rosa-tenue);
  border-top-color: var(--rosa-testo);
  border-radius: 50%;
  animation: velo-gira 800ms linear infinite;
}

.velo-attesa__testo {
  /* Grande e scuro: chi ha 70 anni deve leggerlo senza avvicinare il telefono. */
  font-size: var(--t-lg);
  font-weight: 650;
  color: var(--rosa-scuro);
}

@keyframes velo-gira { to { transform: rotate(360deg); } }

/* Con il movimento ridotto la rotella sparisce del tutto: resta il testo,
   che e' quello che porta l'informazione. */
@media (prefers-reduced-motion: reduce) {
  .velo-attesa__rotella { display: none; }
}

/* Sui veli piccoli, come quello del campo email, la rotella si stringe e
   testo e rotella stanno in riga. */
.campo > .velo-attesa .velo-attesa__corpo,
.velo-attesa--riga .velo-attesa__corpo {
  grid-auto-flow: column;
  align-items: center;
}

.campo > .velo-attesa .velo-attesa__rotella {
  width: 1.5rem;
  height: 1.5rem;
  border-width: 3px;
}

.campo > .velo-attesa .velo-attesa__testo { font-size: var(--t-base); }


/* -------------------------------------------------------------------------
   ANNULLAMENTO
   L'unica azione del sito che non e' reversibile: il colore lo dice, e la
   sezione sta staccata dal resto per non farci finire dentro per sbaglio.
   ------------------------------------------------------------------------- */

.passo--pericolo {
  margin-top: var(--sp-7);
  border-color: #f0c9c5;
  background: #fffafa;
}

.passo--pericolo .passo__titolo { color: var(--errore); }

.btn--pericolo {
  background: var(--errore);
  color: #fff;
  border-color: var(--errore);
}

/* Bianco su #b3261e da' 6,5:1, ben oltre la soglia. */
.btn--pericolo:hover {
  background: #8f1d16;
  border-color: #8f1d16;
  color: #fff;
}

#annulla-1, #annulla-2, #annulla-errore { margin-top: var(--sp-4); }

/* -------------------------------------------------------------------------
   ISCRIZIONI CHIUSE
   La pagina parte "chiusa" gia' nel markup e uno script in testa toglie la
   classe .iscrizioni-chiuse dall'elemento html finche' la scadenza non e'
   passata. Al contrario (nascondere l'avviso e mostrare il modulo via JS)
   chi arriva a iscrizioni chiuse vedrebbe il modulo comparire e sparire, e
   senza JS - dove il modulo non funzionerebbe comunque, le persone sono
   clonate da modulo.js - resterebbe un modulo muto invece dell'avviso.

   A iscrizioni aperte nascondiamo con :not(), non ridando un display al
   ramo "chiuse": gli avvisi sono grid e un display:block li appiattirebbe.
   ------------------------------------------------------------------------- */

html:not(.iscrizioni-chiuse) .se-chiuse { display: none !important; }
.iscrizioni-chiuse .se-aperte { display: none !important; }

/* L'avviso che prende il posto del modulo: e' la cosa piu' importante della
   pagina, quindi pesa piu' di un avviso qualunque. */
.avviso--chiusura {
  margin-bottom: var(--sp-6);
  padding: var(--sp-5);
  border-left-width: 6px;
  font-size: var(--t-base);
  box-shadow: var(--ombra-1);
}

.avviso--chiusura .avviso__titolo {
  font-family: var(--font-titoli);
  font-size: var(--t-xl);
  line-height: var(--lh-titolo);
  color: var(--rosa-testo);
}

.avviso--chiusura .avviso__coda {
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rosa-tenue);
  font-size: var(--t-sm);
  color: var(--testo-tenue);
}

.avviso--chiusura .avviso__coda a { color: var(--rosa-testo); }