/* Consulenze · form a passi, pagamento e calendario (task 8).
   Non nasce dal mockup e non puo' nascerne: extract-for-wp.py estrae solo
   markup e stile statici da friendly-home/, mentre questo foglio veste un
   comportamento vero (Stripe, un calendario reale), mai visibile in un
   mockup fermo. Caricato a mano solo su /consulenze/ da inc/assets.php, dopo
   mbes-theme.css. Usa solo le variabili del design system gia' presenti,
   nessun colore nuovo. Si verifica col collaudo manuale descritto in
   test-consulenze/08-frontend.md, non nel mockup che la titolare apre per
   approvare il design. */

/* ===== indicatore di avanzamento (in cima a ogni passo) ===== */
.cons-steps{display:flex;gap:18px;flex-wrap:wrap;padding-bottom:4px;margin-bottom:4px;border-bottom:1px solid var(--border)}
.cons-step{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted)}
.cons-step b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);color:var(--muted);font-size:12px}
.cons-step.on{color:var(--ink)}
.cons-step.on b{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.cons-step.done{color:var(--ink)}
.cons-step.done b{background:var(--primary-tint);border-color:var(--primary);color:var(--primary)}

/* ===== elenco errori: stessa card, bordo dell'accento crimson gia' nel tema ===== */
.cons-errori{border:1px solid var(--crimson);border-radius:var(--r-md);padding:14px 18px;background:var(--surface)}
.cons-errori-lista{margin:0;padding-left:18px;color:var(--crimson);font-size:14px;line-height:1.6}
.cons-errori-lista li{margin:0}
/* il mailto che chiude gli errori tecnici (conContatto nel JS): il CSS del mockup
   azzera i link (a{color:inherit;text-decoration:none}), senza questa riga non si
   vedrebbe che e' cliccabile. Offset 3px come la nota "Hai dubbi?" sopra il modulo
   (build-pages.py), cosi' l'indirizzo e' sottolineato allo stesso modo ovunque */
.cons-errori-lista a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ===== step 2 · pagamento ===== */
.cons-pay-note{background:var(--primary-tint);border-radius:var(--r-md);padding:16px 18px;font-size:14.5px;line-height:1.6;color:var(--ink)}
.cons-pay-note p{margin:0}
#payment-element{padding:4px 0 8px}

/* ===== step 3 · orario ===== */
.cons-giorno{margin-top:18px}
.cons-giorno:first-child{margin-top:0}
.cons-giorno h4{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--ink);text-transform:capitalize}
.cons-orari{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.cons-orario{min-height:48px;padding:10px 14px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);color:var(--ink);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.cons-orario:hover{border-color:var(--primary);background:var(--primary-tint)}
.cons-orario:active{transform:translateY(1px)}
.cons-orario:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.cons-orario:disabled{opacity:.5;cursor:default}

/* ===== step 4 · fatto ===== */
.cons-fatto h3{margin-bottom:10px}
.cons-fatto p{color:var(--muted);font-size:15px;line-height:1.65;margin:0 0 10px}
.cons-fatto p:last-child{margin-bottom:0}
.cons-fatto a{color:var(--primary);font-weight:600}

@media (max-width:640px){
  .cons-orari{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cons-orario{min-height:52px}
  .cons-steps{gap:12px}
  .cons-step span{white-space:nowrap}
}