/* La cassa e la pagina di esito.
   Si carica DOPO home.css, da cui prende colori, caratteri, bottoni, piede e
   tutto il vestito del popup dei contatti (campi, note, casella del consenso,
   rotella del bottone): quelli si riusano identici, non si riscrivono. */

/* ---------- la barra della cassa: solo il logo, nessuna via d'uscita ---------- */
.barra.sola{position:sticky;background:var(--panna);border-bottom:1px solid var(--filo)}
.barra.sola .tel{justify-content:space-between}
.sicuro{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--pece-2);white-space:nowrap}
.sicuro svg{width:19px;height:19px;color:var(--ok);flex:0 0 auto}
/* Su schermo stretto la scritta si accorcia, e sotto i 430 resta il solo
   scudo: mai scendere sotto i 15px per farcela stare. */
.sicuro .corto{display:none}
@media(max-width:620px){.sicuro .lungo{display:none}.sicuro .corto{display:inline}}
@media(max-width:430px){.sicuro .lungo,.sicuro .corto{display:none}}

.cassa{padding:clamp(30px,4.6vw,56px) 0 clamp(50px,7vw,90px)}
.cassa .sopra{max-width:760px}
.cassa h1{font-size:clamp(29px,4.4vw,44px)}

/* le tre tappe: dicono quanto manca, e sono la cosa che tiene in pagina */
.tappe{display:flex;flex-wrap:wrap;gap:10px 26px;margin:22px 0 0;padding:0;list-style:none;counter-reset:none}
.tappe li{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--fumo)}
.tappe li span{width:24px;height:24px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  border:1.5px solid var(--filo);font-size:13px;font-weight:700;font-family:var(--d)}
.tappe li.viva{color:var(--pece);font-weight:700}
.tappe li.viva span{background:var(--br);border-color:var(--br);color:oklch(0.995 0.008 60)}

/* ---------- le due colonne ---------- */
.colonne{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.95fr);
  gap:clamp(26px,3.6vw,52px);align-items:start;margin-top:clamp(28px,4vw,44px)}
/* Sotto i 1000px il riepilogo va SOPRA il modulo: e' la rassicurazione, e su
   telefono deve arrivare prima della fatica dei campi. */
@media(max-width:1000px){
  .colonne{grid-template-columns:1fr}
  .colonne .somma{order:-1}
}

/* ---------- il riepilogo ---------- */
.somma{position:sticky;top:104px}
@media(max-width:1000px){.somma{position:static}}
.somma .scheda{background:var(--panna-2);border:1px solid var(--filo);border-radius:20px;
  padding:clamp(20px,2.4vw,28px)}

.scelta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.scelta .pezzo{display:flex;flex-direction:column;align-items:center;gap:2px;padding:11px 6px;
  background:var(--panna);border:1.5px solid var(--filo);border-radius:12px;cursor:pointer;
  font-family:var(--t);color:var(--pece-2);
  transition:border-color .22s,background .22s,color .22s,transform .3s cubic-bezier(.16,1,.3,1)}
.scelta .pezzo b{font-size:15px}
.scelta .pezzo i{font-style:normal;font-size:13px;color:var(--fumo)}
.scelta .pezzo:hover{border-color:var(--br);transform:translateY(-2px)}
.scelta .pezzo.viva{background:var(--br-velo);border-color:var(--br);color:var(--pece)}
.scelta .pezzo.viva i{color:var(--br-cupo)}

.somma .mini{margin-top:12px;font-size:15px;color:var(--fumo)}

.conta{margin-top:20px;padding-top:18px;border-top:1px solid var(--filo)}
.conta .riga{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-top:10px;font-size:15.5px;color:var(--pece-2)}
.conta .riga:first-child{margin-top:0}
.conta .riga b{font-weight:700;color:var(--pece);white-space:nowrap}
.conta .sconto{color:var(--fumo);font-size:15px}
.conta .sconto b{color:var(--br-cupo)}
.conta .tot{margin-top:16px;padding-top:14px;border-top:1px solid var(--filo);font-size:17px;color:var(--pece)}
.conta .tot b{font-size:23px;font-family:var(--d);letter-spacing:-0.02em}
.conta .poi{display:block;margin-top:12px;font-size:15px;color:var(--fumo);line-height:1.5}
.conta .poi b{font-weight:700;color:var(--pece-2)}

.fidati{margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--filo);list-style:none;display:grid;gap:10px}
.fidati li{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--pece-2);line-height:1.45}
.fidati svg{width:17px;height:17px;flex:0 0 auto;margin-top:3px;color:var(--ok)}

.aiuto{margin-top:16px;font-size:15px;color:var(--fumo);text-align:center}
.aiuto button,.aiuto a{font:inherit;background:none;border:0;padding:0;cursor:pointer;
  color:var(--br-cupo);text-decoration:underline;text-underline-offset:2px}
.aiuto button:hover,.aiuto a:hover{color:var(--pece)}

/* ---------- i campi ---------- */
.blocchetto{padding-bottom:clamp(26px,3.4vw,38px);margin-bottom:clamp(26px,3.4vw,38px);
  border-bottom:1px solid var(--filo)}
.blocchetto:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.blocchetto h2{display:flex;align-items:center;gap:12px;font-size:clamp(20px,2.4vw,25px)}
.blocchetto h2 .n{width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  background:var(--br-velo);color:var(--br-cupo);font-size:15px;font-weight:700}
.cassa .dice{margin-top:12px;font-size:16px;color:var(--pece-2);max-width:62ch}
.cassa .blocchetto .dice{margin-bottom:22px}
.cassa .blocchetto h2 + .campo{margin-top:22px}

/* i campi e le note li veste home.css sotto .finestra: qui si ripete la stessa
   regola per la cassa invece di riscriverne una diversa */
.cassa .campo{display:flex;flex-direction:column;gap:7px;margin:0 0 16px}
.cassa label{font-size:15px;font-weight:700;color:var(--pece)}
.cassa .mica{font-weight:400;color:var(--fumo)}
.cassa input[type=text],.cassa input[type=email],.cassa input[type=tel],.cassa input[type=number]{
  font-family:var(--t);font-size:16.5px;line-height:1.5;color:var(--pece);
  background:oklch(1 0 0 / .7);border:1.5px solid var(--filo);border-radius:12px;padding:12px 14px;width:100%;
  transition:border-color .22s,box-shadow .22s,background .22s}
.cassa input::placeholder{color:oklch(0.72 0.01 55)}
.cassa input:hover{border-color:oklch(0.84 0.014 56)}
.cassa input:focus{outline:none;background:var(--panna);border-color:var(--br);
  box-shadow:0 0 0 4px oklch(0.702 0.144 42 / .16)}
.cassa .campo.storto input{border-color:oklch(0.58 0.19 27)}
.cassa .campo.storto input:focus{box-shadow:0 0 0 4px oklch(0.58 0.19 27 / .15)}
/* le frecce del campo numerico non servono e stringono il campo */
.cassa input[type=number]{-moz-appearance:textfield}
.cassa input[type=number]::-webkit-outer-spin-button,
.cassa input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.cassa .nota{display:none;font-style:normal;font-size:15px;color:oklch(0.52 0.19 27)}
.cassa .nota.viva{display:block;animation:fc-nota .32s cubic-bezier(.16,1,.3,1)}
.cassa .nota-tutto{margin-top:12px}

.duetre{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.tretre{display:grid;grid-template-columns:120px minmax(0,1fr) 100px;gap:0 16px}
@media(max-width:620px){.duetre,.tretre{grid-template-columns:1fr}}

/* la casella del consenso: stesso disegno del popup, scoped alla cassa */
/* ---------- i riquadri della carta ----------
   Dentro c'e' un frame di Stripe, che il nostro CSS non raggiunge: qui si veste
   la SCATOLA esattamente come un input della pagina, e lo stato (fuoco, errore)
   lo riporta il JavaScript, che quello di dentro lo sa. L'altezza e' fissa
   perche' il frame arriva un istante dopo, e senza la pagina farebbe un salto. */
.cassa .stripe-box{display:block;width:100%;min-height:51px;padding:13px 14px;
  background:oklch(1 0 0 / .7);border:1.5px solid var(--filo);border-radius:12px;
  transition:border-color .22s,box-shadow .22s,background .22s}
.cassa .stripe-box:hover{border-color:oklch(0.84 0.014 56)}
.cassa .stripe-box.viva{background:var(--panna);border-color:var(--br);
  box-shadow:0 0 0 4px oklch(0.702 0.144 42 / .16)}
.cassa .stripe-box.storta{border-color:oklch(0.58 0.19 27)}
.cassa .carta-guasta{margin:0;padding:16px 18px;border:1.5px solid var(--filo);border-radius:12px;
  background:var(--panna);color:var(--pece-2);font-size:15px}

/* ---------- «pagamenti sicuri», in fondo e fuori dai campi ---------- */
.cassa .sicuri{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;margin-top:14px}
.cassa .sicuri .detto{display:inline-flex;align-items:center;gap:8px;
  font-size:15px;color:var(--fumo)}
.cassa .sicuri .detto svg{width:17px;height:17px;flex:0 0 auto;color:var(--ok)}
.cassa .marchi{display:inline-flex;align-items:center;gap:7px}
.cassa .marchi svg{width:38px;height:25px;border-radius:5px;flex:0 0 auto}

.cassa .assenso{display:flex;align-items:flex-start;gap:11px;margin-top:6px;font-weight:400;
  font-size:15px;color:var(--pece-2);cursor:pointer;line-height:1.5}
.cassa .assenso input{position:absolute;opacity:0;width:1px;height:1px}
.cassa .quadro{flex:0 0 auto;width:22px;height:22px;margin-top:1px;display:grid;place-items:center;
  background:var(--panna);border:1.5px solid var(--filo);border-radius:7px;color:oklch(0.995 0.008 60);
  transition:background .22s,border-color .22s}
.cassa .quadro svg{width:14px;height:14px;stroke-dasharray:22;stroke-dashoffset:22;
  transition:stroke-dashoffset .3s cubic-bezier(.16,1,.3,1)}
.cassa .assenso:hover .quadro{border-color:var(--br)}
.cassa .assenso input:checked + .quadro{background:var(--br);border-color:var(--br)}
.cassa .assenso input:checked + .quadro svg{stroke-dashoffset:0}
.cassa .assenso input:focus-visible + .quadro{outline:3px solid var(--br);outline-offset:3px}
.cassa .assenso.storto .quadro{border-color:oklch(0.58 0.19 27)}
.cassa .assenso .detto a{color:var(--br-cupo);text-decoration:underline;text-underline-offset:2px}
.cassa .assenso.grosso{font-size:16px;color:var(--pece);padding:16px 18px;background:var(--panna-2);
  border:1px solid var(--filo);border-radius:14px}

.cassa .esca{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.cassa .manda{width:100%;margin-top:22px}
.cassa .dice-attesa,.cassa .ruota{display:none}
.cassa .ruota{width:20px;height:20px}
.cassa[data-stato="manda"] .manda,.colonne[data-stato="manda"] .manda{pointer-events:none;background:var(--br-cupo)}
.colonne[data-stato="manda"] .dice-manda{display:none}
.colonne[data-stato="manda"] .dice-attesa{display:inline}
.colonne[data-stato="manda"] .ruota{display:inline-block;animation:fc-ruota .85s linear infinite}
.cassa .minuta{margin-top:14px;font-size:15px;color:var(--fumo);text-align:center}

/* ---------- la pagina di esito ---------- */
.cassa.esito .tel{max-width:660px;text-align:center}
.cassa.esito h1{margin-top:22px}
.cassa.esito .dice{margin:16px auto 0;text-align:left;max-width:56ch;font-size:17px}
.cassa.esito .rif{margin-top:18px;font-size:15px;color:var(--fumo)}
.cassa.esito .tasti{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.bollino.grande{display:inline-grid;place-items:center;width:88px;height:88px;color:var(--br)}
.bollino.grande svg{width:88px;height:88px}
.bollino.grande .giro{stroke-dasharray:145;stroke-dashoffset:145;opacity:.32;
  animation:fc-giro .7s cubic-bezier(.16,1,.3,1) forwards}
.bollino.grande .segno{stroke-dasharray:44;stroke-dashoffset:44;
  animation:fc-spunta .5s .3s cubic-bezier(.16,1,.3,1) forwards}
.bollino.grande.attesa{color:var(--pece-2)}
.bollino.grande.fermo{color:oklch(0.58 0.19 27)}

.dopo{display:grid;gap:12px;margin:30px auto 0;padding:0;list-style:none;max-width:56ch;text-align:left}
.dopo li{display:flex;align-items:center;gap:12px;font-size:16px;color:var(--pece-2)}
.dopo li > span:last-child{flex:1}
/* ⚠️ Il pallino e' il PRIMO span, non tutti: il testo sta in un secondo
   span, e senza :first-child prendeva anche lui fondo, colore e 28px di
   altezza — le tre righe si accavallavano. */
.dopo li > span:first-child{width:28px;height:28px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:50%;background:var(--br-velo);color:var(--br-cupo);font-size:14px;font-weight:700;
  font-family:var(--d)}

@media(max-width:560px){
  .cassa.esito .tasti .bot{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){
  .scelta .pezzo:hover{transform:none}
  .bollino.grande .giro,.bollino.grande .segno{stroke-dashoffset:0;animation:none}
}