/* di bella design — Verifica prima dell'acquisto.
   Solo cio' che stile.css non ha gia': il wizard (passi, scelte a filetto,
   avanzamento, comandi), il riepilogo che si compila mentre si risponde e i
   rami del modulo. Tutto il resto (modulo, campi, chip,
   tabella, passi) viene dal foglio principale, cosi' la pagina resta della
   stessa famiglia delle altre. */

.ramo{
  display:flex;
  flex-direction:column;
  gap:24px;
  border:0;
  margin:0;
  padding:0;
  min-inline-size:0;
  &[hidden]{ display:none }
}

/* ── Il wizard ─────────────────────────────────────────────────────────── */
.wizard{
  gap:28px;
  scroll-margin-top:calc(var(--testata, 96px) + 28px);
}

/* Un passo: una domanda e le sue risposte. Il `fieldset` si spoglia. */
.passo{
  border:0;
  margin:0;
  padding:0;
  min-inline-size:0;
  display:flex;
  flex-direction:column;
  gap:24px;
  &[hidden]{ display:none }

  & > legend, & .ramo > legend{ padding:0; margin:0 0 24px }
}
/* senza JavaScript i passi stanno in colonna: un filetto li separa */
.wizard:not(.a-passi) .passo + .passo{ padding-top:28px; border-top:1px solid var(--linea) }

/* La domanda: testo corrente grande, non un titolo maiuscolo. E' una
   domanda a una persona, non l'intestazione di una tavola. */
.domanda{
  margin:0;
  font-family:var(--font-sans);
  font-size:clamp(22px, 2.2vw, 28px);
  font-weight:500;
  line-height:1.2;
  letter-spacing:0;
  text-transform:none;
  color:var(--china);
  &:focus{ outline:none }
}
.aiuto{
  margin:-12px 0 0;
  font-size:var(--t-corpo-sm);
  line-height:1.5;
  color:var(--grafite);
}
.passo .campo:has(.scelte){ gap:10px }

/* L'avanzamento: apparato mono e una linea di quota che si allunga. */
.avanzamento{
  display:flex;
  flex-direction:column;
  gap:10px;
  &[hidden]{ display:none }

  & p{
    margin:0;
    font-family:var(--font-mono);
    font-size:var(--t-mono);
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--grafite);
  }
  & .corsa{ display:block; height:1px; background:var(--linea-forte) }
  & .corsa i{ display:block; height:3px; margin-top:-1px; width:0; background:var(--rosso) }
}

/* Le scelte: celle di una griglia a filetto. Colonne in numero fisso. */
.scelte{
  display:grid;
  gap:1px;
  background:var(--linea-forte);
  border:1px solid var(--linea-forte);
  &.c1{ grid-template-columns:minmax(0, 1fr) }
  &.c2{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
  &.c3{ grid-template-columns:repeat(3, minmax(0, 1fr)) }
  &.c4{ grid-template-columns:repeat(4, minmax(0, 1fr)) }
}

/* dentro un .campo, `label` e' apparato mono (stile.css, `.campo label`):
   la scelta torna testo, con la specificita' che serve per vincere */
.passo .scelta{
  font-family:var(--font-sans);
  font-size:inherit;
  letter-spacing:0;
  text-transform:none;
  color:var(--china);
}

.scelta{
  position:relative;
  display:grid;
  grid-template-columns:12px minmax(0, 1fr);
  column-gap:14px;
  row-gap:6px;
  align-content:start;
  align-items:center;
  min-height:var(--bersaglio);
  padding:16px 18px;
  background:var(--carta);
  cursor:pointer;
  transition:background var(--durata);

  & input{ position:absolute; opacity:0; pointer-events:none }

  /* il segno: un quadrato vuoto, pieno di rosso quando scelto. Forma e
     colore insieme, perche' la scelta si legga anche senza il rosso. */
  & .segno{
    width:12px;
    height:12px;
    border:1px solid var(--grafite);
    transition:background var(--durata), border-color var(--durata);
  }
  & .titolo{
    font-size:var(--t-voce);
    font-weight:500;
    line-height:1.3;
    color:var(--china);
    transition:color var(--durata);
  }
  & .sotto{
    grid-column:2;
    font-size:var(--t-corpo-xs);
    line-height:1.45;
    color:var(--grafite);
  }

  /* un solo cambiamento in hover: il fondo */
  &:hover{ background:var(--superficie) }

  /* scelto: non e' hover, e' uno stato, e deve reggere senza colore */
  &:has(input:checked){ background:var(--superficie) }
  & input:checked ~ .segno{ background:var(--rosso); border-color:var(--rosso) }
  & input:checked ~ .titolo{ color:var(--rosso) }

  &:has(input:focus-visible){ z-index:1; outline:2px solid var(--rosso); outline-offset:3px }
}

/* `.due-colonne p` (stile.css) da' a ogni paragrafo corpo e colore del
   testo: dentro il modulo i paragrafi sono apparato, e tornano tali. */
.verifica{
  & .avanzamento p{ font-size:var(--t-mono); color:var(--grafite); max-width:none }
  & .aiuto{ font-size:var(--t-corpo-sm); color:var(--grafite) }
  & .nota-modulo{ font-size:var(--t-mono-xs); line-height:1.6; color:var(--grafite); max-width:none }
  & .recap-titolo{ font-size:var(--t-mono-sm); color:var(--grafite) }
  & .esito-modulo{ font-size:var(--t-mono-sm); max-width:none }
  & [data-riepilogo]{ display:flex; flex-direction:column; gap:16px }
}

/* Inviato: l'esito prende il posto della domanda, con lo stesso peso */
.wizard .esito-modulo[data-stato="ok"]{
  font-family:var(--font-sans);
  font-size:clamp(22px, 2.2vw, 28px);
  font-weight:500;
  line-height:1.25;
  letter-spacing:0;
  text-transform:none;
  color:var(--china);
  &:focus{ outline:none }
}

/* I comandi: indietro a sinistra, avanti (o l'invio) a destra. */
.comandi{
  display:flex;
  gap:12px;
  align-items:center;
  padding-top:20px;
  border-top:1px solid var(--linea);
  &[hidden]{ display:none }
  & [data-avanti], & [data-invia]{ margin-left:auto }
}

/* Il riepilogo della richiesta, nell'ultimo passo: righe di tavola. */
.recap{
  &[hidden]{ display:none }
  & .recap-titolo{
    margin:0 0 8px;
    font-family:var(--font-mono);
    font-size:var(--t-mono-sm);
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--grafite);
  }
  & dl{ margin:0; border-top:1px solid var(--linea-forte) }
  & dl > div{
    display:grid;
    grid-template-columns:11ch minmax(0, 1fr) auto;
    gap:4px 16px;
    align-items:baseline;
    padding:10px 0;
    border-bottom:1px solid var(--linea);
  }
  & dt{
    font-family:var(--font-mono);
    font-size:var(--t-mono-sm);
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--grafite);
  }
  & dd{ margin:0; font-size:var(--t-corpo-sm); line-height:1.45; color:var(--china) }
}
.recap-modifica{
  appearance:none;
  background:none;
  border:0;
  padding:4px 0;
  min-height:var(--bersaglio);
  font-family:var(--font-mono);
  font-size:var(--t-mono-sm);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--grafite);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  transition:color var(--durata);
  &:hover{ color:var(--rosso) }
  &:focus-visible{ outline:2px solid var(--rosso); outline-offset:3px }
}

.modulo .riga-campi{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:24px;
}

/* il riepilogo: una tavola di controllo, non una card. Bordo china come il
   modulo, fondo superficie per dire che e' l'esito, non la domanda. */
.riepilogo{
  position:sticky;
  top:calc(var(--testata, 72px) + 24px);
  border:1.5px solid var(--china);
  background:var(--superficie);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:16px;

  & h2{
    margin:0;
    font-family:var(--font-mono);
    font-size:var(--t-mono-sm);
    font-weight:400;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--grafite);
  }

  & ul{
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  & li{
    position:relative;
    padding-left:20px;
    font-size:var(--t-corpo-sm);
    line-height:1.45;
  }

  /* il trattino e' la voce di controllo; il quadrato rosso e' il punto da
     approfondire. Forma diversa, non solo colore diverso. */
  & li::before{
    content:"";
    position:absolute;
    left:0;
    top:.62em;
    width:10px;
    height:1.5px;
    background:var(--china);
  }
  & li.allerta::before{
    top:.5em;
    width:6px;
    height:6px;
    background:var(--rosso);
  }

  & .conteggio{
    margin:0;
    font-family:var(--font-mono);
    font-size:var(--t-mono);
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--rosso);
  }

  & .precisione{
    margin:0;
    font-family:var(--font-mono);
    font-size:var(--t-mono-sm);
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--grafite);
  }

  & .limite{
    margin:0;
    padding-top:14px;
    border-top:1px solid var(--linea);
    font-size:var(--t-corpo-xs);
    line-height:1.5;
    color:var(--grafite);
  }
}

/* ── Indirizzo: via e Comune con i suggerimenti, civico a parte ──────── */
.modulo .riga-campi.indirizzo{ grid-template-columns:minmax(0, 3fr) minmax(0, 1fr) }

.combo{ position:relative }
.combo input{ width:100% }

/* Il menu: una tavola appesa al campo. Bordo china, fondo superficie,
   righe a filetto. Nessuna ombra: lo stacco lo fa il fondo. */
.proposte{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  z-index:5;
  margin:0;
  padding:0;
  list-style:none;
  max-height:min(352px, 50vh);
  overflow-y:auto;
  background:var(--superficie);
  border:1px solid var(--china);
  &[hidden]{ display:none }

  & li{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:16px;
    min-height:var(--bersaglio);
    padding:11px 14px;
    border-bottom:1px solid var(--linea);
    cursor:pointer;
    transition:background var(--durata);
    &:last-child{ border-bottom:0 }
    &:hover, &[aria-selected="true"]{ background:var(--hover) }
  }
  & .via{ font-size:var(--t-corpo); line-height:1.35; color:var(--china); min-width:0 }
  & .comune{
    flex:none;
    font-family:var(--font-mono);
    font-size:var(--t-mono-sm);
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--grafite);
  }
}

/* ── I documenti: la zona di caricamento e i file scelti ──────────────── */
.carica{
  display:flex;
  flex-direction:column;
  gap:12px;

  /* il campo vero resta raggiungibile da tastiera ma non si vede:
     la zona e' la sua etichetta */
  & input[type="file"]{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    overflow:hidden;
  }
  &:has(input:focus-visible) .carica-zona{ outline:2px solid var(--rosso); outline-offset:3px }
}

/* Un riquadro a filetto, come una cella vuota della tavola. Un solo
   cambiamento in hover e quando ci si trascina sopra un file: il fondo. */
.carica-zona{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:var(--bersaglio);
  padding:20px;
  border:1px solid var(--linea-forte);
  background:var(--carta);
  cursor:pointer;
  transition:background var(--durata);
  &:hover{ background:var(--superficie) }
  .carica.sopra &{ background:var(--superficie) }

  & .carica-azione{
    font-family:var(--font-mono);
    font-size:var(--t-mono-md);
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--rosso);
  }
  & .carica-regole{
    font-family:var(--font-mono);
    font-size:var(--t-mono-sm);
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--grafite);
  }
}

.file-scelti{
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--linea-forte);
  &[hidden]{ display:none }

  & li{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto auto;
    gap:16px;
    align-items:center;
    padding:4px 0;
    border-bottom:1px solid var(--linea);
  }
  & .file-nome{
    font-size:var(--t-corpo-sm);
    color:var(--china);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  & .file-peso{
    font-family:var(--font-mono);
    font-size:var(--t-mono-sm);
    letter-spacing:.1em;
    color:var(--grafite);
  }
}

/* per chi legge con lo screen reader: quante proposte ci sono */
.solo-lettori{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* Il bottone che apre il riepilogo esiste solo sul telefono e sul tablet */
.riepilogo-apri{ display:none }

@media (max-width: 1020px){
  /* il riepilogo sale sopra il modulo, chiuso in una riga */
  .verifica .riepilogo{ position:static; order:-1; padding:0 }
  .verifica .riepilogo-apri:not([hidden]){
    appearance:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    width:100%;
    min-height:var(--bersaglio);
    padding:14px 20px;
    background:none;
    border:0;
    font-family:var(--font-mono);
    font-size:var(--t-mono);
    letter-spacing:.1em;
    text-transform:uppercase;
    text-align:left;
    color:var(--rosso);
    cursor:pointer;
    transition:background var(--durata);
    &:hover{ background:var(--hover) }
    &:focus-visible{ outline:2px solid var(--rosso); outline-offset:3px }
    & .stato-apri{ color:var(--grafite); white-space:nowrap }
  }
  /* col bottone, il titolo e' gia' nella riga; il corpo si apre sotto */
  .verifica .riepilogo:has(.riepilogo-apri:not([hidden])){
    & > h2{ display:none }
    & [data-riepilogo]{ padding:0 20px 20px; display:flex; flex-direction:column; gap:16px }
    & .conteggio{ display:none }
    &:not(.aperto) [data-riepilogo]{ display:none }
  }
  .verifica .riepilogo:not(:has(.riepilogo-apri:not([hidden]))){ padding:24px }
}

@media (max-width: 760px){
  .modulo .riga-campi{ grid-template-columns:1fr }
  .modulo .riga-campi.indirizzo{ grid-template-columns:minmax(0, 2fr) minmax(0, 1fr) }
  .proposte li{ flex-direction:column; gap:2px }
  .scelte.c2, .scelte.c3{ grid-template-columns:minmax(0, 1fr) }
  .scelte.c4{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .scelta{ padding:14px 16px }
  .comandi [data-indietro]{ flex:0 0 auto }
  .comandi [data-avanti], .comandi [data-invia]{ flex:1 1 auto }
  .comandi [data-avanti], .comandi [data-invia]{ margin-left:0 }
  .recap dl > div{ grid-template-columns:minmax(0, 1fr) auto }
  .recap dd{ grid-column:1 }
  .recap .recap-modifica{ grid-column:2; grid-row:1 / span 2 }
}

/* ── Robustezza sul telefono ─────────────────────────────────────────────
   Su un iPhone il modulo e' uscito dalla pagina (05.11.2026): al passo 1
   erano visibili insieme Indietro, Avanti e Invia, e la riga dei tre
   bottoni allargava tutto. Tre difese, qualunque sia la causa:
   1. nel wizard `[hidden]` vince su qualunque `display` dei bottoni;
   2. la riga dei comandi puo' andare a capo, i bottoni possono restringersi;
   3. le colonne non si allargano oltre lo schermo per un testo lungo
      (con `1fr` il minimo e' il contenuto: `minmax(0,1fr)` lo azzera). */
.wizard [hidden]{ display:none !important }
.comandi{ flex-wrap:wrap }
.comandi .btn{ min-width:0; white-space:normal }
.verifica > *{ min-width:0 }
.verifica .riepilogo-apri > span{ min-width:0; overflow-wrap:anywhere }
@media (max-width: 1020px){
  .due-colonne.verifica{ grid-template-columns:minmax(0, 1fr) }
}

/* ── Il punto sulla mappa (passo 2) ──────────────────────────────────────
   Una cornice a filetto con la carta o la foto aerea; il segnaposto e' il
   quadratino rosso del «SEI QUI», piu' grande perche' si deve vedere su
   una foto. Toccare fissa il punto, trascinare sposta la mappa. */
.punto{
  display:flex;
  flex-direction:column;
  gap:10px;
  &[hidden]{ display:none }
  & .aiuto{ margin:0 }
}
.mappa-punto{
  position:relative;
  overflow:hidden;
  border:1px solid var(--china);
  background:var(--superficie);
  touch-action:none;
  cursor:crosshair;
  & img{ display:block; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; pointer-events:none }
}
.segnaposto{
  position:absolute;
  width:14px;
  height:14px;
  margin:-7px 0 0 -7px;
  background:var(--rosso);
  outline:2px solid #FFF;
  pointer-events:none;
  &[hidden]{ display:none }
}
.mappa-comandi{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.mappa-btn{
  appearance:none;
  min-width:var(--bersaglio);
  min-height:var(--bersaglio);
  padding:0 10px;
  border:1px solid var(--linea-forte);
  background:var(--carta);
  color:var(--china);
  font-family:var(--font-mono);
  font-size:var(--t-mono-md);
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background var(--durata);
  &:hover{ background:var(--superficie) }
  &:focus-visible{ outline:2px solid var(--rosso); outline-offset:3px }
}
.mappa-stato{
  flex:1 1 12ch;
  font-family:var(--font-mono);
  font-size:var(--t-mono-sm);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--grafite);
  &[data-stato="ok"]{ color:var(--china) }
  &[data-stato="errore"]{ color:var(--rosso) }
}
.verifica .mappa-fonte{
  margin:0;
  font-family:var(--font-mono);
  font-size:var(--t-mono-xs);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--grafite);
}

/* ── Il pagamento (solo se attivo: prezzo.php) ───────────────────────── */
.verifica .pagamento{
  display:flex; flex-direction:column; gap:12px;
  border-top:1px solid var(--linea-forte); padding-top:16px;
  & .prezzo-totale{ margin:0; font-size:var(--t-corpo) }
  & .scelta .titolo{ font-size:var(--t-corpo-sm); font-weight:400; line-height:1.45 }
}