@charset "UTF-8";
/* =========================================================================
   Dental Design Ozzano — modulo di prenotazione in tre passi
   -------------------------------------------------------------------------
   Solo CSS, nessuna dipendenza. Token, molla, crenatura e preferenze di
   sistema arrivano da base.css: qui si usano, non si ridefiniscono.
   Le misure che toccano il testo sono in rem (se l'utente ingrandisce i
   caratteri il modulo cresce con lui); raggi, bordi e ombre restano in px
   perche' non devono scalare.

   Miglioramento progressivo: senza JavaScript il form resta un modulo unico
   con tutti i passi visibili e inviabile. A nascondere e' la classe .mod--js,
   che il JavaScript aggiunge solo quando puo' davvero gestire i passi.

   Indice
     1. Contenitore, trappola per i bot, testo per i lettori di schermo
     2. Barra dei passi
     3. Passi: transizione direzionale e interrompibile
     4. Passo 1 — schede di scelta
     5. Passo 2 — campi
     6. Errori
     7. Passo 3 — riepilogo e consenso
     8. Bottoni e azioni
     9. Esito dell'invio e conferma
    10. Schermi stretti
    11. Preferenze di sistema (movimento, trasparenza, contrasto)
   ========================================================================= */


/* ------------------------------------------------------------------ 1 */

.mod {
  /* Serve come riferimento al passo che esce, che durante il cambio viene
     tolto dal flusso per non spingere in basso quello che entra. */
  position: relative;
  width: 100%;
  max-width: var(--stretto);
  margin-inline: auto;
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.5;
  text-align: left;
  font-optical-sizing: auto;
}

/* L'altezza accompagna il cambio di passo invece di scattare: senza questo,
   passando da un passo alto a uno basso la pagina sotto fa un salto. */
.mod--js {
  transition: min-height var(--molla-t) var(--molla);
}

/* Trappola per i bot: fuori dallo schermo, fuori dal giro di tabulazione.
   Un utente vero non la vede e non la compila mai. */
.mod__esca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Testo riservato ai lettori di schermo (es. "passo 2 di 3"). */
.mod__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ------------------------------------------------------------------ 2 */
/* Barra dei passi: numeri, etichette, una linea sottile che li unisce.
   Senza JavaScript non ha senso (i passi sono tutti visibili): resta spenta. */

.mod__barra {
  display: none;
}

.mod--js .mod__barra {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin: 0 0 2.125rem;
  padding: 0;
  list-style: none;
  counter-reset: mod-tappa;
  font-size: .84375rem;
  line-height: 1.2;
  /* etichetta piccola: la crenatura si allarga appena, non si stringe */
  letter-spacing: .012em;
  color: var(--ink-3);
}

.mod__tappa {
  counter-increment: mod-tappa;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: .5625rem;
  min-width: 0;
  white-space: nowrap;
  transition: color var(--molla-corta-t) var(--molla);
}

.mod__tappa:last-child {
  flex: 0 0 auto;
}

/* Il numero del passo. */
.mod__tappa::before {
  content: counter(mod-tappa);
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-3);
  font-size: .78125rem;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--molla-corta-t) var(--molla),
              border-color var(--molla-corta-t) var(--molla),
              color var(--molla-corta-t) var(--molla);
}

/* La linea di collegamento verso il passo successivo. */
.mod__tappa::after {
  content: "";
  flex: 1 1 auto;
  min-width: .75rem;
  height: 1px;
  background: var(--line);
}

.mod__tappa:last-child::after {
  display: none;
}

.mod__tappa.is-fatta {
  color: var(--ink-2);
}

.mod__tappa.is-fatta::before {
  content: "";
  border-color: var(--sky-ink);
  background-color: var(--sky-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.6 7.4 5.7 10.4 11.4 4' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
}

.mod__tappa.is-attiva {
  color: var(--navy);
  font-weight: 600;
}

.mod__tappa.is-attiva::before {
  border-color: var(--navy);
  background-color: var(--navy);
  color: var(--paper);
}


/* ------------------------------------------------------------------ 3 */
/* Passo: e' un fieldset, quindi va prima ripulito dallo stile del browser. */

.mod__passo {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Senza JavaScript i passi restano tutti in pagina, separati da un filo. */
.mod__passo + .mod__passo {
  margin-top: 2.75rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--line);
}

/* Con JavaScript ne vive uno alla volta. */
.mod--js .mod__passo {
  display: none;
}

.mod--js .mod__passo + .mod__passo {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Due passi possono essere in scena insieme, ma solo durante il cambio: uno
   entra, l'altro esce. Le transizioni CSS sono interrompibili per natura —
   se si preme di nuovo a meta' strada, la nuova parte dal valore che c'e'
   adesso sullo schermo invece di saltare a quello d'arrivo. */
.mod--js .mod__passo.is-attivo,
.mod--js .mod__passo.is-uscendo {
  display: block;
  transition: opacity var(--molla-t) var(--molla),
              transform var(--molla-t) var(--molla);
}

/* Il passo che esce lascia il flusso, cosi' quello che entra prende subito il
   suo posto invece di aspettare. Il JavaScript gli fissa il "top" dov'era e
   gli mette anche l'attributo inert: niente clic, niente tabulazione. */
.mod--js .mod__passo.is-uscendo {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

/* Comparsa breve, usata solo dai messaggi e dalla conferma: i passi hanno la
   loro transizione qui sopra. */
@keyframes mod-comparsa {
  from { opacity: 0; transform: translateY(.375rem); }
  to   { opacity: 1; transform: none; }
}

.mod__legenda {
  display: block;
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--navy);
  /* titolo grande: crenatura stretta */
  font-size: clamp(1.5rem, 3.4vw, 1.9375rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.022em;
  font-optical-sizing: auto;
  text-wrap: balance;
}

/* Il JavaScript sposta qui il fuoco a ogni cambio di passo, cosi' chi usa un
   lettore di schermo sente subito dov'e' finito. Niente anello: con
   tabindex="-1" alla legenda non ci si arriva tabulando, quindi il fuoco e'
   sempre e solo il nostro e un riquadro azzurro sul titolo sarebbe rumore. */
.mod__legenda:focus,
.mod__legenda:focus-visible {
  outline: none;
}

.mod__aiuto {
  max-width: 54ch;
  margin: .625rem 0 0;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: -.006em;
  text-wrap: pretty;
}


/* ------------------------------------------------------------------ 4 */
/* Passo 1 — le scelte sono schede. Il radio resta nel documento (invisibile
   ma raggiungibile da tastiera); bordo e spunta li disegnano i due
   pseudo-elementi di .mod__scelta-t, che il radio raggiunge come fratello. */

.mod__scelte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
  gap: .75rem;
  margin-top: 1.625rem;
}

.mod__scelta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .3125rem;
  padding: 1.0625rem 3.375rem 1.0625rem 1.125rem;
  border-radius: var(--r);
  background-color: var(--mist);
  cursor: pointer;
  touch-action: manipulation;   /* niente attesa dei 300ms sul tocco */
  transition: background-color var(--molla-corta-t) var(--molla),
              box-shadow var(--molla-corta-t) var(--molla),
              transform var(--tocco-t) ease-out;
}

.mod__scelta input[type="radio"] {
  position: absolute;
  top: 1.125rem;
  left: 1.125rem;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.mod__scelta-t {
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.012em;
}

.mod__scelta-d {
  color: var(--ink-3);
  font-size: .90625rem;
  line-height: 1.4;
  letter-spacing: 0;
}

/* Bordo della scheda. */
.mod__scelta-t::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-radius: var(--r);
  pointer-events: none;
  transition: border-color var(--molla-corta-t) var(--molla),
              box-shadow var(--molla-corta-t) var(--molla);
}

/* Pastiglia di selezione in alto a destra. */
.mod__scelta-t::before {
  content: "";
  position: absolute;
  top: 1.0625rem;
  right: 1.0625rem;
  width: 1.3125rem;
  height: 1.3125rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background-color: var(--paper);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
  pointer-events: none;
  transition: background-color var(--molla-corta-t) var(--molla),
              border-color var(--molla-corta-t) var(--molla);
}

@media (hover: hover) {
  .mod__scelta:hover {
    background-color: var(--mist-2);
  }
  .mod__scelta:hover .mod__scelta-t::after {
    border-color: var(--line-forte);
  }
}

.mod__scelta input[type="radio"]:checked ~ .mod__scelta-t::after {
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}

.mod__scelta input[type="radio"]:checked ~ .mod__scelta-t::before {
  border-color: var(--navy);
  background-color: var(--navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.6 7.4 5.7 10.4 11.4 4' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Scheda scelta: fondo bianco, cosi' stacca dalle altre. */
.mod__scelta:has(input[type="radio"]:checked) {
  background-color: var(--paper);
  box-shadow: var(--ombra);
}

/* Nota: quando manca la scelta il JavaScript mette aria-invalid su tutti i
   radio del gruppo, come dev'essere per i lettori di schermo. Non lo si
   traduce pero' in sei schede rosse: sarebbe un allarme sproporzionato. Il
   messaggio rosso sotto la griglia, con il fuoco sulla prima scheda, dice
   gia' tutto. */

/* Il fuoco da tastiera si vede sul contenitore, non sul radio nascosto. */
.mod__scelta input[type="radio"]:focus-visible ~ .mod__scelta-t::after {
  border-color: var(--sky);
  box-shadow: 0 0 0 4px rgba(32, 168, 224, .18);
}

/* La scheda risponde quando il dito TOCCA, non quando si stacca. Va dopo
   :hover, altrimenti col mouse l'elemento e' sempre anche in hover e il tocco
   non si vedrebbe. Staccando il dito fuori dalla scheda il clic non parte:
   e' il comportamento nativo di <label>, e va tenuto. */
.mod__scelta:active {
  transform: scale(0.97);
}


/* Errore del passo 1: il JavaScript lo crea sotto la griglia delle scelte. */
.mod__scelte + .mod__errore {
  margin-top: .875rem;
}


/* ------------------------------------------------------------------ 5 */
/* Passo 2 — campi su due colonne, quelli lunghi a tutta larghezza. */

.mod__campi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1rem;
  margin-top: 1.625rem;
}

.mod__campo {
  display: flex;
  flex-direction: column;
  gap: .4375rem;
  min-width: 0;
  margin: 0;
}

.mod__campo--largo {
  grid-column: 1 / -1;
}

/* Etichetta piccola: crenatura leggermente positiva, come l'occhiello. */
.mod__campo > label:not(.mod__consenso) {
  color: var(--ink-2);
  font-size: .90625rem;
  font-weight: 600;
  letter-spacing: .012em;
}

.mod__opz {
  margin-left: .3125rem;
  color: var(--ink-3);
  font-size: .84375rem;
  font-weight: 400;
  letter-spacing: .01em;
}

.mod input[type="text"],
.mod input[type="tel"],
.mod input[type="email"],
.mod select,
.mod textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: .8125rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background-color: var(--paper);
  color: var(--ink);
  font: inherit;
  /* testo che si legge e si scrive: crenatura a zero */
  font-size: 1.0625rem;
  line-height: 1.4;
  letter-spacing: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--molla-corta-t) var(--molla),
              box-shadow var(--molla-corta-t) var(--molla),
              background-color var(--molla-corta-t) var(--molla);
}

.mod textarea {
  min-height: 6.75rem;
  line-height: 1.5;
  resize: vertical;
}

.mod select {
  padding-right: 2.875rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.9 6 6.4 11 1.9' fill='none' stroke='%234A4F60' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.0625rem center;
  background-size: 12px 8px;
  cursor: pointer;
}

.mod ::placeholder {
  color: var(--ink-3);
  opacity: 1;
}

/* Attenzione all'ordine: :hover e :focus pesano uguale, quindi vince quello
   scritto dopo. Il fuoco va per ultimo, altrimenti un campo cliccato col
   mouse (che resta anche in hover) terrebbe il bordo grigio invece che
   azzurro. */
@media (hover: hover) {
  .mod input[type="text"]:hover,
  .mod input[type="tel"]:hover,
  .mod input[type="email"]:hover,
  .mod select:hover,
  .mod textarea:hover {
    border-color: var(--line-forte);
  }
}

.mod input[type="text"]:focus,
.mod input[type="tel"]:focus,
.mod input[type="email"]:focus,
.mod select:focus,
.mod textarea:focus {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 4px rgba(32, 168, 224, .18);
}

.mod__nota-privacy {
  color: var(--ink-3);
  font-size: .84375rem;
  line-height: 1.45;
  letter-spacing: 0;
}


/* ------------------------------------------------------------------ 6 */
/* Errori: rossi ma sobri, e invisibili finche' sono vuoti.
   Il rosso non e' un token del sito: qui serve un solo colore di allarme e
   vive in questo file. */

.mod__errore {
  display: block;
  color: #B3261E;
  font-size: .875rem;
  line-height: 1.4;
  letter-spacing: 0;
}

.mod__errore:empty {
  display: none;
}

.mod__errore.is-visibile {
  animation: mod-comparsa var(--molla-corta-t) var(--molla) both;
}

/* Il campo va nominato per tipo (input/select/textarea) e non solo con
   [aria-invalid]: serve lo stesso peso delle regole di base qui sopra,
   altrimenti il rosso perderebbe e non si vedrebbe mai. */
.mod input[aria-invalid="true"],
.mod select[aria-invalid="true"],
.mod textarea[aria-invalid="true"] {
  border-color: rgba(179, 38, 30, .5);
}

.mod input[aria-invalid="true"]:hover,
.mod select[aria-invalid="true"]:hover,
.mod textarea[aria-invalid="true"]:hover,
.mod input[aria-invalid="true"]:focus,
.mod select[aria-invalid="true"]:focus,
.mod textarea[aria-invalid="true"]:focus {
  border-color: rgba(179, 38, 30, .85);
}

.mod input[aria-invalid="true"]:focus,
.mod select[aria-invalid="true"]:focus,
.mod textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 4px rgba(179, 38, 30, .13);
}


/* ------------------------------------------------------------------ 7 */
/* Passo 3 — riepilogo e consenso. */

.mod__riepilogo {
  display: grid;
  grid-template-columns: minmax(7.5rem, 32%) 1fr;
  margin: 1.625rem 0 0;
}

/* display:grid batterebbe la regola del browser per [hidden]: va ridetto. */
.mod__riepilogo[hidden] {
  display: none;
}

.mod__riepilogo > dt {
  grid-column: 1;
  padding: .9375rem 1rem .9375rem 0;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .01em;
}

.mod__riepilogo > dd {
  display: flex;
  grid-column: 2;
  align-items: center;
  justify-content: space-between;
  gap: .875rem;
  margin: 0;
  padding: .5rem 0;
  min-height: 3.375rem;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.03125rem;
  line-height: 1.45;
  letter-spacing: -.006em;
}

.mod__riepilogo-v {
  min-width: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Bersaglio da 44px pieni: il testo resta piccolo, l'area da toccare no.
   I margini negativi si riprendono lo spazio in piu' cosi' la riga non
   cresce, e restano dentro la spaziatura della riga: nessuna sovrapposizione
   con quella sopra o sotto. */
.mod__modifica {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  margin: -.75rem -.625rem -.75rem 0;
  padding: 0 .625rem;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--sky-ink);
  font: inherit;
  font-size: .875rem;
  letter-spacing: 0;
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--molla-corta-t) var(--molla),
              background-color var(--molla-corta-t) var(--molla),
              transform var(--tocco-t) ease-out;
}

@media (hover: hover) {
  .mod__modifica:hover {
    color: var(--navy);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

.mod__modifica:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(32, 168, 224, .18);
}

.mod__modifica:active {
  transform: scale(0.97);
}

.mod__campo--consenso {
  margin-top: 1.5rem;
}

.mod__consenso {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  /* 44px di bersaglio anche qui: la riga intera e' cliccabile */
  min-height: 2.75rem;
  padding: .3125rem 0;
  color: var(--ink-2);
  font-size: .96875rem;
  line-height: 1.5;
  letter-spacing: 0;
  cursor: pointer;
  touch-action: manipulation;
}

.mod__consenso input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.375rem;
  margin: .0625rem 0 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background-color: var(--paper);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background-color var(--molla-corta-t) var(--molla),
              border-color var(--molla-corta-t) var(--molla),
              box-shadow var(--molla-corta-t) var(--molla),
              transform var(--tocco-t) ease-out;
}

.mod__consenso input[type="checkbox"]:checked {
  border-color: var(--navy);
  background-color: var(--navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.6 7.4 5.7 10.4 11.4 4' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mod__consenso input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 4px rgba(32, 168, 224, .18);
}

.mod__consenso:active input[type="checkbox"] {
  transform: scale(0.94);
}

.mod__consenso a {
  color: var(--sky-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--molla-corta-t) var(--molla);
}

@media (hover: hover) {
  .mod__consenso a:hover {
    color: var(--navy);
  }
}


/* ------------------------------------------------------------------ 8 */
/* Azioni: primario navy a pastiglia, secondario in punta di penna.
   Stessa meccanica di .btn in base.css: molla sui colori, --tocco-t sul
   transform, risposta al pointerdown. */

.mod__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-top: 1.875rem;
}

.mod__avanti,
.mod__indietro,
.mod__invia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  border-radius: var(--r-pill);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--molla-corta-t) var(--molla),
              border-color var(--molla-corta-t) var(--molla),
              color var(--molla-corta-t) var(--molla),
              box-shadow var(--molla-corta-t) var(--molla),
              opacity var(--molla-corta-t) var(--molla),
              transform var(--tocco-t) ease-out;
}

.mod__avanti,
.mod__invia {
  padding: 0 1.875rem;
  border: 0;
  background-color: var(--navy);
  box-shadow: var(--ombra);
  color: var(--paper);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.012em;
}

/* Quando c'e' un "Indietro", il primario va a fine riga. */
.mod__indietro + .mod__avanti,
.mod__indietro + .mod__invia {
  margin-left: auto;
}

/* Senza JavaScript "Continua" e "Indietro" non hanno un passo dove portare:
   sono type="button" e resterebbero li' a non fare niente. Si mostrano solo
   quando il JavaScript c'e'. Sotto restano i campi e "Invia la richiesta",
   che invia davvero. */
.mod__avanti,
.mod__indietro {
  display: none;
}

.mod__azioni:not(:has(.mod__invia)) {
  display: none;
}

.mod--js .mod__avanti,
.mod--js .mod__indietro {
  display: inline-flex;
}

.mod--js .mod__azioni:not(:has(.mod__invia)) {
  display: flex;
}

.mod__indietro {
  padding: 0 1.5rem;
  border: 1px solid var(--line-forte);
  background-color: transparent;
  color: var(--ink-2);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -.01em;
}

@media (hover: hover) {
  .mod__avanti:hover:not(:disabled),
  .mod__invia:hover:not(:disabled) {
    background-color: var(--navy-chiaro);
  }

  .mod__indietro:hover {
    border-color: var(--ink);
    background-color: rgba(16, 19, 31, .03);
    color: var(--ink);
  }
}

.mod__avanti:focus-visible,
.mod__invia:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(32, 168, 224, .35);
}

.mod__indietro:focus-visible {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 4px rgba(32, 168, 224, .18);
}

.mod__invia:disabled {
  opacity: .5;
  box-shadow: none;
  cursor: default;
}

/* Dopo :hover, sempre: col mouse il bottone premuto e' anche in hover. */
.mod__avanti:active:not(:disabled),
.mod__indietro:active,
.mod__invia:active:not(:disabled) {
  transform: scale(0.97);
}


/* ------------------------------------------------------------------ 9 */
/* Esito dell'invio e schermata di conferma. */

.mod__esito {
  margin: 1.125rem 0 0;
  color: var(--ink-2);
  font-size: .96875rem;
  line-height: 1.5;
  letter-spacing: 0;
}

/* Vuoto non si vede, ma resta nel flusso: e' una zona aria-live, toglierla
   dal rendering rischia di far perdere l'annuncio ai lettori di schermo. */
.mod__esito:empty {
  margin: 0;
  padding: 0;
}

.mod__esito.is-attesa {
  color: var(--ink-3);
}

.mod__esito.is-errore {
  padding: .8125rem .9375rem;
  border-radius: 12px;
  background-color: rgba(179, 38, 30, .06);
  color: #B3261E;
}

.mod__tel {
  color: inherit;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mod__fatto {
  padding: 3rem 1.5rem;
  text-align: center;
  outline: none;
  animation: mod-comparsa var(--molla-t) var(--molla) both;
}

.mod__fatto-segno {
  display: grid;
  place-items: center;
  width: 3.625rem;
  height: 3.625rem;
  margin: 0 auto 1.375rem;
  border-radius: 50%;
  background-color: rgba(32, 168, 224, .12);
  color: var(--sky-ink);
}

.mod__fatto-segno svg {
  display: block;
  width: 1.6875rem;
  height: 1.6875rem;
}

.mod__fatto-t {
  margin: 0 0 .625rem;
  color: var(--navy);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.022em;
  font-optical-sizing: auto;
}

.mod__fatto-d {
  margin: 0;
  color: var(--ink-2);
  font-size: 1.0625rem;
  letter-spacing: -.006em;
}

.mod__fatto-n {
  margin: 1.25rem 0 0;
  color: var(--ink-3);
  font-size: .9375rem;
  letter-spacing: 0;
}


/* ----------------------------------------------------------------- 10 */
/* Schermi stretti, fino a 360px. */

@media (max-width: 620px) {
  .mod__campi {
    grid-template-columns: 1fr;
  }

  .mod__riepilogo {
    grid-template-columns: 1fr;
  }

  .mod__riepilogo > dt {
    grid-column: 1;
    padding: .875rem 0 0;
  }

  .mod__riepilogo > dd {
    grid-column: 1;
    min-height: 0;
    padding: .125rem 0 .875rem;
    border-top: 0;
  }
}

@media (max-width: 520px) {
  .mod {
    font-size: 1rem;
  }

  /* Pila di bottoni, il primario in cima (in codice e' l'ultimo). */
  .mod__azioni {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .mod__azioni > * {
    width: 100%;
    margin-left: 0;
  }

  .mod__scelte {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 400px) {
  .mod--js .mod__barra {
    gap: .4375rem;
    margin-bottom: 1.75rem;
    font-size: .75rem;
  }

  .mod__tappa {
    gap: .375rem;
  }

  .mod__tappa::before {
    width: 1.375rem;
    height: 1.375rem;
    font-size: .71875rem;
  }

  .mod__tappa::after {
    min-width: .375rem;
  }

  .mod__scelta {
    padding: .9375rem 3rem .9375rem 1rem;
  }

  .mod input[type="text"],
  .mod input[type="tel"],
  .mod input[type="email"],
  .mod select,
  .mod textarea {
    padding: .75rem .875rem;
  }

  .mod__fatto {
    padding: 2.375rem .5rem;
  }
}


/* ----------------------------------------------------------------- 11 */
/* Preferenze di sistema. Tre, non una.
   Questo blocco sta in fondo apposta: gli elenchi di selettori qui sotto
   ripetono quelli usati sopra, cosi' a pari peso vince l'ultimo e non serve
   nessun !important. */

/* --- movimento ridotto ---------------------------------------------------
   Meno movimento non vuol dire nessun riscontro. Spariscono scorrimenti e
   scale; restano colore e opacita', che sono quelli che spiegano cosa sta
   succedendo. Il cambio di passo diventa una dissolvenza breve: e' il
   JavaScript a non applicare lo scorrimento, qui si accorcia la durata. */
/* ================================================================ finestra */

/* Il modulo dentro un <dialog> vero: il fuoco confinato, la chiusura con Esc e
   lo sfondo inerte li fa il browser. Qui c'e' solo l'aspetto. */
.popup {
  width: min(46rem, 100vw);
  max-width: none;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
/* la pagina sotto non deve scorrere mentre la finestra e' aperta */
html.popup-aperto, html.popup-aperto body { overflow: hidden; }

.popup::backdrop {
  background: rgba(10, 16, 46, .52);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
}

.popup__foglio {
  position: relative;
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-g);
  background: var(--paper);
  box-shadow: 0 32px 90px rgba(10, 16, 46, .34);
}
/* dentro la finestra il riquadro del modulo non serve: la finestra e' gia' lei
   il riquadro, e due bordi uno dentro l'altro sembrano un errore */
.popup .blocco-modulo {
  max-width: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.popup__chiudi {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(16, 19, 31, .06);
  color: var(--ink-2);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--molla-corta-t) var(--molla),
              color var(--molla-corta-t) var(--molla),
              transform var(--tocco-t) ease-out;
}
.popup__chiudi svg { width: 1.125rem; height: 1.125rem; }
.popup__chiudi:hover { background: rgba(16, 19, 31, .11); color: var(--ink); }
/* dopo :hover, altrimenti col mouse resta sempre anche in hover e il tocco non si vede */
.popup__chiudi:active, .popup__chiudi:hover:active { transform: scale(.92); }

/* Entra con la molla: sale di poco e si ferma, senza rimbalzo. */
@keyframes popup-entra {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes popup-velo { from { opacity: 0; } to { opacity: 1; } }
.popup[open] .popup__foglio { animation: popup-entra .42s var(--molla) both; }
.popup[open]::backdrop { animation: popup-velo .3s ease-out both; }

/* Sul telefono e' un foglio che sale dal basso e tocca i bordi: sopra c'e' la
   maniglia per trascinarlo via, sotto lo spazio della barra di sistema. */
@media (max-width: 640px) {
  .popup { width: 100vw; }
  .popup__foglio {
    max-height: 94dvh;
    border-radius: var(--r-g) var(--r-g) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  @keyframes popup-entra {
    from { opacity: 0; transform: translateY(3rem); }
    to   { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  /* movimento ridotto non vuol dire nessun riscontro: la finestra resta,
     compare senza salire */
  .popup[open] .popup__foglio { animation: popup-velo .15s ease-out both; }
  .popup[open]::backdrop { animation-duration: .15s; }

  .mod--js,
  .mod--js .mod__passo.is-attivo,
  .mod--js .mod__passo.is-uscendo {
    transition-duration: .15s;
  }

  .mod__errore.is-visibile,
  .mod__fatto {
    animation-duration: .15s;
  }

  /* Niente scatto di scala: il riscontro al tocco resta, ma come colore. */
  .mod__scelta:active,
  .mod__modifica:active,
  .mod__consenso:active input[type="checkbox"],
  .mod__avanti:active:not(:disabled),
  .mod__indietro:active,
  .mod__invia:active:not(:disabled) {
    transform: none;
  }

  .mod__scelta:active {
    background-color: var(--mist-2);
  }

  .mod__avanti:active:not(:disabled),
  .mod__invia:active:not(:disabled) {
    background-color: var(--navy-scuro);
  }

  .mod__indietro:active {
    background-color: var(--mist-2);
  }

  .mod__modifica:active {
    background-color: var(--mist-2);
  }
}

/* --- meno trasparenza ----------------------------------------------------
   Le poche superfici velate del modulo diventano piene. I valori solidi sono
   gli stessi colori appiattiti su bianco, cosi' non cambia niente all'occhio
   di chi non ha chiesto questa preferenza. */
@media (prefers-reduced-transparency: reduce) {
  /* niente vetro dietro la finestra: velo pieno */
  .popup::backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(10, 16, 46, .82);
  }

  .mod__fatto-segno {
    background-color: #E4F5FB;      /* era rgba(32,168,224,.12) su bianco */
  }

  .mod__esito.is-errore {
    background-color: #FAF2F2;      /* era rgba(179,38,30,.06) su bianco */
  }

  .mod input[aria-invalid="true"],
  .mod select[aria-invalid="true"],
  .mod textarea[aria-invalid="true"] {
    border-color: #D99B96;          /* era rgba(179,38,30,.5) */
  }

  .mod input[aria-invalid="true"]:hover,
  .mod select[aria-invalid="true"]:hover,
  .mod textarea[aria-invalid="true"]:hover,
  .mod input[aria-invalid="true"]:focus,
  .mod select[aria-invalid="true"]:focus,
  .mod textarea[aria-invalid="true"]:focus {
    border-color: #BB4239;          /* era rgba(179,38,30,.85) */
  }

  @media (hover: hover) {
    .mod__indietro:hover {
      background-color: var(--mist);
    }
  }
}

/* --- contrasto alto ------------------------------------------------------
   base.css alza gia' --line e --line-forte su :root, quindi tutto quello che
   qui usa i token si irrobustisce da solo. Restano da dichiarare i fondi e i
   bordi che di norma sono accennati o trasparenti. */
@media (prefers-contrast: more) {
  .mod__scelta {
    background-color: var(--paper);
  }

  /* Da ferma la scheda ha un bordo vero, non solo un cambio di fondo. */
  .mod__scelta-t::after {
    border-color: var(--line-forte);
  }

  .mod__scelta input[type="radio"]:checked ~ .mod__scelta-t::after {
    border-color: var(--navy);
    box-shadow: inset 0 0 0 2px var(--navy);
  }

  .mod__scelta:has(input[type="radio"]:checked) {
    background-color: var(--mist);
  }

  .mod input[type="text"],
  .mod input[type="tel"],
  .mod input[type="email"],
  .mod select,
  .mod textarea {
    border-color: var(--line-forte);
  }

  .mod__consenso input[type="checkbox"] {
    border-color: var(--line-forte);
  }

  .mod__tappa::before {
    border-color: var(--line-forte);
  }

  /* Rosso piu' scuro: sul bianco arriva a un contrasto pieno. */
  .mod__errore,
  .mod__esito.is-errore {
    color: #8E1B15;
  }

  .mod input[aria-invalid="true"],
  .mod select[aria-invalid="true"],
  .mod textarea[aria-invalid="true"] {
    border-color: #8E1B15;
  }

  .mod__opz,
  .mod__nota-privacy,
  .mod__fatto-n,
  .mod__riepilogo > dt {
    color: var(--ink-2);
  }
}