/* Configuratore — stile dedicato */
.conf{padding:3rem 0 5rem;background:#fff;min-height:70vh} /* fondo bianco per il configuratore finestre (richiesta di Daniele, 14/09/2026) */
.conf.conf-pergole{background:var(--fondo-sezione)}
.conf-testata{text-align:center;max-width:44rem;margin:0 auto 2.2rem}
.conf-testata h1{font-size:2.1rem;margin:.2rem 0 .8rem}
.conf-testata p{color:#000} /* testo introduttivo in nero (richiesta di Daniele, 14/09/2026) */
.conf-testata .occhiello{color:#ff6a00} /* arancio acceso, richiesta di Daniele 10/09/2026 */
/* miniatura Ideal 4000 a sinistra del testo sotto il titolo (richiesta di Daniele, 14/09/2026) */
.conf-intro{display:flex;align-items:center;gap:1.2rem;text-align:left;max-width:48rem;margin:0 auto}
.conf-intro .conf-miniatura{flex:none;width:220px;height:auto}
.conf-intro p{margin:0}
@media (max-width:700px){.conf-intro{gap:.8rem;align-items:flex-start}.conf-intro .conf-miniatura{width:120px}.conf-intro p{font-size:.95rem}.conf-intro br{display:none}}
.conf-avviso{background:#fff;border:1px solid var(--bordo);border-radius:4px;padding:1rem 1.2rem}
/* configuratore pergole: stesso impianto, in blu navy (10/09/2026) */
.conf-pergole{--accento:var(--navy);--accento-scuro:var(--navy-scuro)}
.conf-pergole .conf-testata .occhiello{color:#8b5a2b} /* marrone legno, richiesta di Daniele 13/09/2026 (prima violetto fluo) */
.conf-pergole .scheda-scelta.scelta{box-shadow:0 0 0 3px rgba(27,42,74,.12)}
.scheda-scelta.non-attiva{position:relative;cursor:default;opacity:.7;border-style:dashed}
.badge-prossimamente{position:absolute;top:.6rem;right:.6rem;background:var(--fondo-alt);color:var(--testo-tenue);font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .5rem;border-radius:99px}
.scheda-scelta.scheda-modello img{height:180px;object-fit:contain;background:#fff;border:0;border-radius:0}
.scheda-scelta.non-attiva{padding-top:2.6rem}
.tinta-ral{display:grid;place-items:center;color:var(--testo-tenue);font-weight:700;background:repeating-linear-gradient(45deg,#f4f5f3 0 8px,#e6e8e4 8px 16px)}

/* barra passi */
.conf-passi{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;list-style:none;margin:0 0 2rem;padding:0;counter-reset:passo}
.conf-passi li{counter-increment:passo;font-size:.8rem;font-weight:600;color:var(--testo-tenue);background:#fff;border:1px solid var(--bordo);border-radius:99px;padding:.4rem .9rem .4rem .6rem;display:flex;align-items:center;gap:.45rem}
.conf-passi li::before{content:counter(passo);width:22px;height:22px;border-radius:50%;background:var(--fondo-alt);display:grid;place-items:center;font-size:.72rem}
.conf-passi li.attivo{color:#fff;background:var(--accento);border-color:var(--accento)}
.conf-passi li.attivo::before{background:rgba(255,255,255,.25);color:#fff}
.conf-passi li.fatto{color:var(--accento);border-color:var(--accento)}
.conf-passi li.fatto::before{content:"✓";background:var(--accento);color:#fff}

.conf-corpo{max-width:980px;margin:0 auto}
.conf-titolo-passo{text-align:center;font-size:1.35rem;margin:0 0 1.4rem}

/* griglie di scelta */
.conf-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
.scheda-scelta{background:#fff;border:2px solid var(--bordo);border-radius:6px;padding:1.1rem;cursor:pointer;text-align:center;transition:border-color .12s, box-shadow .12s;display:flex;flex-direction:column;gap:.7rem;align-items:center}
.scheda-scelta:hover{border-color:#b9c2cc}
.scheda-scelta.scelta{border-color:var(--accento);box-shadow:0 0 0 3px rgba(28,78,128,.12)}
.scheda-scelta .nome{font-size:.88rem;font-weight:600;color:var(--testo)}
.scheda-scelta .sotto{font-size:.78rem;color:var(--testo-tenue)}
.scheda-scelta svg{width:100%;height:auto}
.scheda-scelta img{border-radius:4px;border:1px solid var(--bordo);width:100%;height:96px;object-fit:cover}
.scheda-scelta .tinta{width:100%;height:96px;border-radius:4px;border:1px solid var(--bordo)}
/* schede del profilo del telaio (foto delle sezioni, intere e su fondo bianco) */
.scheda-profilo img{height:170px;object-fit:contain;background:#fff;border:0;border-radius:0}

/* aperture per anta */
.conf-anteprima{display:grid;place-items:center;margin:0 0 1.6rem}
.conf-anteprima svg{max-width:340px;width:100%;height:auto}
.aperture-anta{background:#fff;border:1px solid var(--bordo);border-radius:6px;padding:1rem 1.2rem;margin-bottom:.9rem}
.aperture-anta h4{margin:0 0 .6rem;font-size:.95rem}
.aperture-anta .opzioni{display:flex;gap:.6rem;flex-wrap:wrap}
/* senso di apertura (22/09/2026, Daniele): etichetta sopra, i due pulsanti sempre affiancati sulla stessa riga */
.aperture-anta .sensi{margin-top:.6rem}
.aperture-anta .sensi-etichetta{flex-basis:100%;font-size:.82rem;color:var(--testo-tenue)}
.aperture-anta .sensi .bottone-opzione{flex:1 1 0;min-width:0}
.bottone-opzione{border:2px solid var(--bordo);background:#fff;border-radius:4px;padding:.55rem .95rem;font-size:.85rem;font-weight:600;color:var(--testo);cursor:pointer}
.bottone-opzione.scelta{border-color:var(--accento);color:var(--accento);background:rgba(28,78,128,.06)}

/* form campi */
.conf-campi{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.1rem;background:#fff;border:1px solid var(--bordo);border-radius:6px;padding:1.4rem}
.campo{display:grid;gap:.35rem;align-content:start} /* i campi non si allungano per riempire la riga: etichette e caselle allineate (10/09/2026) */
.campo label{font-size:.85rem;font-weight:600}
.campo input,.campo select,.campo textarea{font:inherit;padding:.65rem .8rem;border:1px solid #c9cfd6;border-radius:4px;background:#fff;width:100%}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--accento);outline-offset:0;border-color:var(--accento)}
.campo .aiuto{font-size:.78rem;color:var(--testo-tenue)}
.campo.errore input,.campo.errore select{border-color:#b3261e}
.messaggio-errore{color:#b3261e;font-size:.85rem;margin-top:.6rem}

/* filtri colore */
.filtri-gruppo{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.2rem}

/* navigazione */
.conf-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem}
.conf-nav .cta{border:0;cursor:pointer;font:inherit}
.bottone-indietro{background:#fff;border:2px solid var(--bordo);border-radius:3px;padding:.85rem 1.5rem;font:inherit;font-weight:600;cursor:pointer;color:var(--testo)}
.bottone-indietro:hover{border-color:#b9c2cc}
.nota-scelta{align-self:center;color:var(--testo-tenue);font-size:.92rem;text-align:right}

/* riepilogo */
.riepilogo-lista{display:grid;gap:1rem;margin-bottom:1.6rem}
.riepilogo-infisso{background:#fff;border:1px solid var(--bordo);border-radius:6px;padding:1.1rem 1.3rem;display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem;align-items:center}
.riepilogo-infisso svg{width:86px;height:auto}
.riepilogo-infisso h4{margin:0 0 .3rem;font-size:1rem}
.riepilogo-infisso p{margin:0;font-size:.85rem;color:var(--testo-tenue)}
.riepilogo-infisso .azioni-riep{display:grid;gap:.4rem}
.riepilogo-infisso button{font:inherit;font-size:.8rem;border:1px solid var(--bordo);background:#fff;border-radius:4px;padding:.35rem .8rem;cursor:pointer}
.riepilogo-infisso button:hover{border-color:var(--accento);color:var(--accento)}
.aggiungi-altro{display:block;width:100%;text-align:center;border:2px dashed #b9c2cc;background:transparent;border-radius:6px;padding:1rem;font:inherit;font-weight:600;color:var(--accento);cursor:pointer;margin-bottom:2rem}
.aggiungi-altro:hover{border-color:var(--accento)}

/* scheda di modifica di un serramento */
.scheda-modifica{display:grid;gap:.6rem;max-width:720px;margin:0 auto}
.riga-modifica{background:#fff;border:1px solid var(--bordo);border-radius:6px;padding:.9rem 1.2rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.riga-modifica .etichetta{display:block;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--testo-tenue)}
.riga-modifica .valore{display:block;font-size:.95rem;margin-top:.15rem}
.riga-modifica .bottone-opzione{flex:none}

/* foto forma speciale */
.foto-lista{display:flex;gap:.8rem;flex-wrap:wrap;align-items:stretch}
.foto-miniatura{position:relative;width:140px;height:110px;border:1px solid var(--bordo);border-radius:4px;overflow:hidden;background:#f4f5f3}
.foto-miniatura img{width:100%;height:100%;object-fit:cover;display:block}
.foto-miniatura button{position:absolute;top:4px;right:4px;width:24px;height:24px;border:0;border-radius:50%;background:rgba(20,24,28,.75);color:#fff;font-size:1rem;line-height:1;cursor:pointer}
.foto-aggiungi{display:grid;place-items:center;width:140px;height:110px;border:2px dashed #b9c2cc;border-radius:4px;color:var(--accento);font-weight:600;font-size:.88rem;cursor:pointer}
.foto-aggiungi:hover{border-color:var(--accento)}
.foto-aggiungi input{display:none}
.anteprima-foto{display:flex;gap:.6rem;justify-content:center;margin-top:.8rem}
.anteprima-foto img{max-width:45%;max-height:180px;border-radius:4px;border:1px solid var(--bordo)}

/* anteprima ingrandita */
.anteprima-strato{position:fixed;inset:0;background:rgba(20,24,28,.55);display:grid;place-items:center;z-index:100;padding:1rem}
.anteprima-finestra{position:relative;background:#fff;border-radius:8px;padding:2rem 2rem 1.6rem;max-width:560px;width:100%;max-height:92vh;overflow:auto;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.anteprima-finestra h3{margin:0 0 1rem;font-size:1.15rem}
.anteprima-disegno svg{max-width:380px;width:100%;height:auto}
.anteprima-misure{font-weight:600;margin:.8rem 0 .3rem}
.anteprima-descrizione{color:var(--testo-tenue);font-size:.9rem;margin:.3rem 0}
.anteprima-chiudi{position:absolute;top:.6rem;right:.7rem;border:0;background:transparent;font-size:1.8rem;line-height:1;cursor:pointer;color:var(--testo-tenue)}
.anteprima-chiudi:hover{color:var(--testo)}

.conf-successo{text-align:center;background:#fff;border:1px solid var(--bordo);border-radius:6px;padding:3rem 2rem}
.conf-successo h2{margin:.4rem 0 .8rem}
.conf-successo p{color:var(--testo-tenue)}
.spunta-grande{width:74px;height:74px;border-radius:50%;background:var(--verde); /* verde: richiesta di Daniele, 17/09/2026 */display:grid;place-items:center;margin:0 auto 1rem}
.spunta-grande svg{width:34px;height:34px;stroke:#fff;stroke-width:3;fill:none}

.consenso{display:flex;gap:.7rem;align-items:start;font-size:.85rem;color:var(--testo-tenue);background:#fff;border:1px solid var(--bordo);border-radius:6px;padding:1rem 1.2rem;margin-top:1.1rem}
.consenso input{margin-top:.2rem}

@media (max-width:640px){
  .conf-passi li{padding:.35rem .55rem}
  .conf-passi li:not(.attivo){font-size:0;gap:0}
  .conf-passi li:not(.attivo)::before{margin:0}
  .conf-griglia{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .riepilogo-infisso{grid-template-columns:1fr;text-align:center}
  .riepilogo-infisso svg{margin:0 auto}
  .conf-nav{flex-direction:column-reverse}
  .conf-nav .cta,.bottone-indietro{width:100%;text-align:center}
  .nota-scelta{text-align:center}
}

/* modulo contatti: due colonne ordinate */
.conf-campi.contatti{grid-template-columns:1fr 1fr}
@media (max-width:640px){.conf-campi.contatti{grid-template-columns:1fr}}

/* il riquadro di esito dopo l'invio non deve finire sotto la testata fissa (17/09/2026) */
.conf-corpo{scroll-margin-top:6.5rem}