/* ============================================================
   configuratore.css  —  Stili del configuratore Tesi online
   Importa i token condivisi da ../tokens.css
   S15: scheletro.  S16: scena full-screen + UI galleggiante.
   ============================================================ */

@import url("../tokens.css");

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  background-image: url("assets/sfondo_configuratore.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  line-height: 1.6;
  min-height: 100vh;
  padding: var(--space-5) var(--space-4);
}

/* ----- gestione schermate (benvenuto <-> wizard) ----- */
.schermata { display: none; }
.schermata--attiva { display: block; }

/* S16: wizard centrato nella scena quando attivo */
#wizard.schermata--attiva {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}

/* ============================================================
   PANNELLO GALLEGGIANTE (base condivisa: velatura + blur)
   Sfondo protagonista: pannelli molto trasparenti ma leggibili.
   ============================================================ */
.pannello {
  background: rgba(245, 239, 227, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(245, 239, 227, 0.55);
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(26,23,20,0.10), 0 12px 30px rgba(26,23,20,0.10);
}

/* ============================================================
   QUADRATO DI BENVENUTO (step 0)
   ============================================================ */
#benvenuto.schermata--attiva {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 22vh;
  padding-left: 2vw;
}
.quadrato-benvenuto {
  background: rgba(245, 239, 227, 0.3);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 2px solid transparent;
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(26,23,20,0.10), 0 12px 30px rgba(26,23,20,0.12);
  padding: var(--space-4) var(--space-4);
  width: 520px;
  max-width: 90vw;
  transition: border-color .6s ease, transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease;
}
.quadrato-benvenuto.in-evidenza {
  border-color: var(--coral);
  transform: translateY(-4px);
  box-shadow: var(--shadow-coral);
}
.qb-testa { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-4); }
.qb-num { font-family: var(--font-serif); font-style: italic; font-size: 44px; line-height: .85; color: var(--coral); }
.qb-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--neutral); padding-top: var(--space-2); }
.qb-icona { margin-bottom: var(--space-3); }
.qb-lente { display: inline-block; width: 22px; height: 22px; border: 2.5px solid var(--ink); border-radius: var(--radius-full); position: relative; }
.qb-lente::after { content: ""; position: absolute; width: 10px; height: 2.5px; background: var(--ink); bottom: -3px; right: -7px; transform: rotate(45deg); }
.qb-titolo { font-family: var(--font-sans); font-weight: 400; font-size: 22px; line-height: 1.05; margin-bottom: var(--space-2); }
.qb-intro { font-size: 13px; color: var(--ink-soft); max-width: 60ch; margin-bottom: var(--space-3); }
.qb-azioni { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.qb-nota { font-family: var(--font-mono); font-size: 12px; color: var(--neutral); }

/* ============================================================
   PULSANTI
   ============================================================ */
.btn { font-family: var(--font-body); font-size: 15px; font-weight: 600; border: none; cursor: pointer; border-radius: var(--radius-pill); padding: 13px 28px; transition: transform .15s ease, opacity .15s ease; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn--primario { background: var(--coral); color: var(--paper-light); }
.btn--primario:hover:not(:disabled) { background: var(--coral-deep); }
.btn--ghost { background: transparent; color: var(--ink-soft); border: 1.5px solid var(--neutral-light); }
.btn--ghost:hover:not(:disabled) { border-color: var(--ink-soft); }

/* ============================================================
   WIZARD: layout a due colonne (anteprima SX, contenuto DX)
   Lo STEPPER verticale e le frecce arrivano nel passo 2 (CMD 23).
   ============================================================ */
.wizard-layout {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr) auto;
  gap: var(--space-5);
  max-width: 1180px;
  margin: 0 auto;
  align-items: start;
}

/* ----- colonna sinistra: ANTEPRIMA VIVA ----- */
.anteprima {
  position: sticky;
  top: var(--space-4);
  background: rgba(245, 239, 227, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(245, 239, 227, 0.55);
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(26,23,20,0.10), 0 12px 30px rgba(26,23,20,0.10);
  padding: var(--space-4);
}
.anteprima-mockup { aspect-ratio: 3 / 4; background: rgba(221,211,189,0.85); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-3); }
.anteprima-placeholder { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; color: var(--neutral); text-transform: uppercase; }
.anteprima-prezzo { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--paper-dark); padding-top: var(--space-3); }
.ap-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--neutral); }
.ap-valore { font-family: var(--font-serif); font-size: 28px; color: var(--coral); }

/* ----- colonna destra: stepper + contenuto ----- */
.stepper { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.stepper-voce { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--neutral-light); padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid transparent; background: none; cursor: default; }
.stepper-voce.attiva { color: var(--coral); border-color: var(--coral); }
.stepper-voce.completata { color: var(--ink-soft); cursor: pointer; }

.step-contenuto {
  background: rgba(245, 239, 227, 0.42);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(245, 239, 227, 0.55);
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(26,23,20,0.10), 0 12px 30px rgba(26,23,20,0.10);
  padding: var(--space-5);
  min-height: 320px;
  margin-bottom: var(--space-4);
}
.step-titolo { font-family: var(--font-sans); font-weight: 400; font-size: 24px; margin-bottom: var(--space-3); }
.step-vuoto { font-family: var(--font-mono); font-size: 15px; color: var(--ink); }

.wizard-nav { display: flex; justify-content: space-between; gap: var(--space-3); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .wizard-layout { grid-template-columns: 1fr; }
  .anteprima { position: static; }
  body { background-attachment: scroll; }
}

/* ============================================================
   S17 — FEATURE B: frecce di navigazione dentro al riquadro
   Barra di vetro (velo 0.3 + blur 4px, come .step-contenuto).
   Frecce grandi, etichetta sotto. id invariati (motore intatto).
   ============================================================ */
.wizard-nav {
  margin-top: var(--space-4);
  background: rgba(245, 239, 227, 0.3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(245, 239, 227, 0.55);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn-freccia {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 10px;
  color: var(--ink-soft);
  transition: transform .15s ease, color .15s ease, opacity .15s ease;
}
.btn-freccia:hover:not(:disabled) { color: var(--coral); transform: translateY(-2px); }
.btn-freccia:active:not(:disabled) { transform: scale(.96); }
.btn-freccia:disabled { opacity: .3; cursor: not-allowed; }
.fr-chevron { font-size: 34px; line-height: .9; font-weight: 400; }
.fr-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }

/* ============================================================
   S17 — FEATURE A: stepper VERTICALE come 3a colonna a destra
   Numeri rossi (corallo) 01..05, separatori, nome grigio.
   Popolamento progressivo gestito dal motore (classi attiva/completata).
   ============================================================ */
.stepper {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  margin-bottom: 0;
  align-self: start;
  min-width: 150px;
  max-width: 190px;
}
.stepper-voce {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--neutral);
  padding: var(--space-3) var(--space-2);
  border: none;
  border-bottom: 1px solid rgba(26, 23, 20, 0.12);
  border-radius: 0;
  background: none;
  cursor: default;
}
.stepper-voce:last-child { border-bottom: none; }
.stepper-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  color: var(--coral);
  flex-shrink: 0;
}
.stepper-voce.attiva { color: var(--ink); }
.stepper-voce.completata { color: var(--ink-soft); cursor: pointer; }
.stepper-voce.completata:hover { color: var(--coral); }

/* ============================================================
   S17 — FEATURE A: vetro satinato sulla barra passi
   Stesso velo/blur di .step-contenuto e .wizard-nav (0.3 / blur 4px).
   ============================================================ */
.stepper {
  background: rgba(245, 239, 227, 0.3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(245, 239, 227, 0.55);
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(26,23,20,0.10), 0 12px 30px rgba(26,23,20,0.10);
  padding: var(--space-3) var(--space-4);
}

/* ============================================================
   S17 — COMPONENTE: regolatore anteprima (slider cliente)
   Vetro satinato coerente col sito, accento corallo.
   ============================================================ */
.anteprima-regola {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 9999;
  width: 260px;
  background: rgba(245, 239, 227, 0.3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(245, 239, 227, 0.55);
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(26,23,20,0.10), 0 12px 30px rgba(26,23,20,0.12);
  padding: var(--space-3) var(--space-4);
}
.anteprima-regola .ar-tit {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--coral);
  margin-bottom: var(--space-2);
}
.anteprima-regola input[type="range"] {
  width: 100%;
  accent-color: var(--coral);
  cursor: pointer;
}
.anteprima-regola .ar-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .5px;
  color: var(--ink-soft);
  margin-top: var(--space-2);
  line-height: 1.4;
}

/* ============================================================
   S17 — GUIDA: pulsante "Come funziona" + popup infografica
   Pulsante in basso a sinistra, popup centrato, vetro/overlay.
   ============================================================ */
.guida-btn {
  position: fixed;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--paper-light);
  background: var(--coral);
  border: none;
  border-radius: var(--radius-pill);
  padding: 11px 20px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(26,23,20,0.15), 0 8px 24px rgba(26,23,20,0.18);
  transition: background .15s ease, transform .15s ease;
}
.guida-btn:hover { background: var(--coral-deep); transform: translateY(-2px); }
.guida-btn-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--paper-light);
  border-radius: var(--radius-full);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
}
.guida-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(26, 23, 20, 0.66);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  padding: var(--space-4);
}
.guida-overlay.aperto { display: flex; }
.guida-modale {
  position: relative;
  max-width: 760px;
  max-height: 92vh;
  overflow: auto;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.guida-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.guida-chiudi {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: var(--radius-full);
  background: rgba(26,23,20,0.72);
  color: var(--paper-light);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}
.guida-chiudi:hover { background: var(--coral); }

/* ============================================================
   S18 - N7: pulsante "?" di aiuto nel wizard (riapre la guida).
   Cerchio corallo in alto a destra, visibile solo nel wizard
   (e figlio di #wizard, quindi nascosto nel benvenuto).
   ============================================================ */
.aiuto-btn {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 9998;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--coral);
  color: var(--paper-light);
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(26,23,20,0.15), 0 8px 24px rgba(26,23,20,0.18);
  transition: background .15s ease, transform .15s ease;
}
.aiuto-btn:hover { background: var(--coral-deep); transform: translateY(-2px); }
.aiuto-btn:active { transform: scale(.96); }

/* S18 - N7: slider anteprima abbassato di 58px per lasciare
   l angolo in alto a destra al "?" (override del top via cascata). */
.anteprima-regola { top: calc(var(--space-4) + 58px); }

/* ============================================================
   S18 - N7 (rifinitura): etichetta "Come funziona" a sinistra
   del "?", stesso stile (serif corsivo, bianco su corallo).
   .aiuto-btn diventa contenitore trasparente dei due pezzi.
   ============================================================ */
.aiuto-btn {
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  padding: 0;
  gap: var(--space-2);
}
.aiuto-testo {
  background: var(--coral);
  color: var(--paper-light);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 6px rgba(26,23,20,0.15), 0 8px 24px rgba(26,23,20,0.18);
  transition: background .15s ease;
}
.aiuto-q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: var(--coral);
  color: var(--paper-light);
  border-radius: var(--radius-full);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(26,23,20,0.15), 0 8px 24px rgba(26,23,20,0.18);
  transition: background .15s ease;
}
.aiuto-btn:hover .aiuto-testo,
.aiuto-btn:hover .aiuto-q { background: var(--coral-deep); }

/* ============================================================
   S18 - N7: "Torna al sito" in alto a sinistra (uscita verso la
   vetrina). Tono leggero: pillola semitrasparente, freccia +
   testo corsivo corallo. Visibile solo nel wizard (figlio di #wizard).
   ============================================================ */
.torna-sito {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  background: rgba(245, 239, 227, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(245, 239, 227, 0.55);
  border-radius: var(--radius-pill);
  padding: 9px 18px 9px 14px;
  box-shadow: 0 2px 6px rgba(26,23,20,0.10), 0 8px 24px rgba(26,23,20,0.12);
  transition: background .15s ease, transform .15s ease;
}
.torna-sito:hover { background: rgba(245, 239, 227, 0.7); transform: translateY(-2px); }
.torna-sito-fr {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1;
  color: var(--coral);
}
.torna-sito-tx {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1;
  color: var(--coral-deep);
}

/* S18 - N7 (fix): hover di "Come funziona" come pulsante unico.
   Prima il salto translateY mancava sui due pezzi nuovi: ora lo
   applico al contenitore, cosi pillola e "?" si alzano insieme. */
.aiuto-btn { cursor: pointer; transition: transform .15s ease; }
.aiuto-btn:hover { transform: translateY(-2px); }
.aiuto-btn:active { transform: scale(.97); }

/* ============================================================
   S18 - N7 (fix alone): il contenitore .aiuto-btn aveva ancora
   un box-shadow ereditato dal primo "?" (CMD4), ma ora e' 
   trasparente -> ombra senza scatola = alone corallo dietro i
   due pezzi. L'ombra resta solo su pillola (.aiuto-testo) e
   cerchietto (.aiuto-q), che hanno il loro sfondo. */
.aiuto-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(245, 239, 227, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(245, 239, 227, 0.55);
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(26,23,20,0.10), 0 8px 24px rgba(26,23,20,0.12);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1;
  color: var(--coral-deep);
  transition: background .15s ease, transform .15s ease;
}
.aiuto-btn:hover { background: rgba(245, 239, 227, 0.7); transform: translateY(-2px); }
.aiuto-btn:active { transform: scale(.97); }
.aiuto-testo, .aiuto-q { all: unset; font-family: var(--font-serif); font-style: italic; color: var(--coral-deep); }

/* ============================================================
   S24 - CARD BENVENUTO: carta crema invecchiata + trascinabile
   Blocco ADDITIVO in coda: vince per cascata, NON sostituisce
   nulla sopra. Rollback = cancellare questo blocco.
   - carta: crema del menu secondario della vetrina (tono caldo)
   - opaca: risolve il nodo leggibilita (era velo 0.3 + blur 2px)
   - position:relative + left/top: base del DRAG. NON si usa
     transform, che resta riservato all effetto WOW (.in-evidenza).
   - lo SFONDO del body resta INTATTO (velo bocciato in collaudo S24).
   ============================================================ */
.quadrato-benvenuto {
  position: relative;
  left: 0;
  top: 0;
  background-color: #F5E6C8;
  background-image:
    radial-gradient(ellipse at 12% 8%, rgba(255,252,240,0.85) 0%, rgba(255,252,240,0) 55%),
    radial-gradient(ellipse at 88% 92%, rgba(196,168,118,0.30) 0%, rgba(196,168,118,0) 60%),
    linear-gradient(160deg, rgba(247,232,201,0.95) 0%, rgba(238,220,185,0.95) 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(184, 156, 106, 0.55);
  box-shadow: 0 2px 6px rgba(26,23,20,0.14), 0 16px 40px rgba(26,23,20,0.22);
  cursor: grab;
  user-select: none;
}
.quadrato-benvenuto.si-trascina {
  cursor: grabbing;
  transition: none;
  box-shadow: 0 4px 10px rgba(26,23,20,0.18), 0 26px 60px rgba(26,23,20,0.30);
}
.quadrato-benvenuto .btn,
.quadrato-benvenuto .qb-intro {
  cursor: pointer;
}
.quadrato-benvenuto .qb-intro { cursor: text; user-select: text; }