/**
 * Il modulo, come si vede.
 *
 * Deve stare bene sopra un tema qualunque, quindi: nessun reset globale,
 * ogni regola dentro .mh-modulo, e i colori presi da variabili così che
 * chi ha il tema del sito possa cambiarli senza toccare questo file:
 *
 *   .mh-modulo { --mh-accento: #c2410c; }
 *
 * Le misure sono pensate prima per il telefono, che è da dove arriva la
 * maggior parte delle richieste di preventivo.
 */

.mh-modulo {
  --mh-accento: #1d4ed8;
  --mh-accento-scuro: #1e40af;
  --mh-testo: #1f2937;
  --mh-nota: #6b7280;
  --mh-bordo: #d1d5db;
  --mh-bordo-tenue: #e5e7eb;
  --mh-fondo: #ffffff;
  --mh-tenue: #f9fafb;
  --mh-errore: #b91c1c;
  --mh-ok: #15803d;

  max-width: 640px;
  margin: 0 auto;
  color: var(--mh-testo);
  font-size: 16px;
  line-height: 1.5;
}

.mh-modulo *,
.mh-modulo *::before,
.mh-modulo *::after { box-sizing: border-box; }

/* ── Avanzamento ──────────────────────────────────────────────── */
.mh-avanzamento {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}
/* display:flex batte il display:none che il browser dà agli elementi
   nascosti: senza questa riga la barra dei passi resterebbe sopra la
   conferma, e il modulo sembrerebbe ancora da compilare. */
.mh-modulo [hidden] { display: none !important; }
.mh-tacca {
  flex: 1;
  padding: 7px 4px 0;
  border-top: 3px solid var(--mh-bordo-tenue);
  font-size: 12px;
  color: var(--mh-nota);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mh-tacca.attiva { border-top-color: var(--mh-accento); color: var(--mh-accento); font-weight: 600; }
.mh-tacca.fatta { border-top-color: var(--mh-accento); color: var(--mh-testo); }

/* ── Passi ────────────────────────────────────────────────────── */
.mh-passo { display: none; }
.mh-passo.attivo { display: block; }
.mh-titolo {
  margin: 0 0 18px;
  font-size: 22px;
  line-height: 1.25;
}

.mh-campo { margin-bottom: 18px; border: 0; padding: 0; }
.mh-campo > label,
.mh-campo > legend {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
}
.mh-facolt {
  margin-left: 6px;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--mh-nota);
}
.mh-aiuto {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--mh-nota);
}

.mh-modulo input[type="text"],
.mh-modulo input[type="email"],
.mh-modulo input[type="tel"],
.mh-modulo input[type="date"],
.mh-modulo input[type="number"],
.mh-modulo textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--mh-bordo);
  border-radius: 8px;
  background: var(--mh-fondo);
  color: inherit;
  /* Sotto i 16px iOS ingrandisce la pagina al fuoco del campo, e chi
     compila si ritrova il modulo mezzo fuori schermo */
  font: inherit;
  font-size: 16px;
}
.mh-modulo textarea { resize: vertical; min-height: 76px; }
.mh-modulo input:focus,
.mh-modulo textarea:focus {
  outline: 2px solid var(--mh-accento);
  outline-offset: 1px;
  border-color: var(--mh-accento);
}
.mh-corto { max-width: 130px; }

.mh-due { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .mh-due { grid-template-columns: 1fr; gap: 0; } }

/* ── Scelte ───────────────────────────────────────────────────── */
.mh-scelte { display: flex; flex-wrap: wrap; gap: 8px; }
.mh-scelte.grandi { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .mh-scelte.grandi { grid-template-columns: 1fr; } }

.mh-scelta {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid var(--mh-bordo);
  border-radius: 8px;
  background: var(--mh-fondo);
  font-size: 14.5px;
  cursor: pointer;
}
.mh-scelta:hover { border-color: var(--mh-accento); }
.mh-scelta input { margin: 2px 0 0; accent-color: var(--mh-accento); }
.mh-scelta:has(input:checked) {
  border-color: var(--mh-accento);
  box-shadow: inset 0 0 0 1px var(--mh-accento);
  background: color-mix(in srgb, var(--mh-accento) 5%, white);
}
/* Per i browser senza :has() resta il pallino: si perde l'evidenza,
   non la funzione */

.mh-evidenza {
  padding: 14px;
  border-radius: 10px;
  background: var(--mh-tenue);
  border: 1px solid var(--mh-bordo-tenue);
}
.mh-evidenza > legend { font-size: 15px; }

.mh-consenso { display: flex; flex-direction: column; gap: 8px; }
.mh-consenso .mh-scelta { font-size: 13.5px; align-items: flex-start; }
.mh-consenso a { color: var(--mh-accento); }

/* Età dei bambini */
.mh-eta-campi { display: flex; flex-wrap: wrap; gap: 8px; }
.mh-eta-uno { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mh-nota); }
.mh-eta-uno input { width: 86px; }

/* ── Bottoni ──────────────────────────────────────────────────── */
.mh-piede { display: flex; gap: 10px; align-items: center; margin-top: 22px; }
.mh-bottone {
  padding: 13px 22px;
  border: 1px solid var(--mh-accento);
  border-radius: 8px;
  background: var(--mh-accento);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.mh-bottone:hover { background: var(--mh-accento-scuro); border-color: var(--mh-accento-scuro); }
.mh-bottone:disabled { opacity: .6; cursor: default; }
.mh-bottone.chiaro { background: transparent; color: var(--mh-accento); }
.mh-bottone.chiaro:hover { background: var(--mh-tenue); }
.mh-invia { margin-left: auto; }

/* ── Errori ed esiti ──────────────────────────────────────────── */
.mh-campo.storto input,
.mh-campo.storto textarea { border-color: var(--mh-errore); }
.mh-errore-campo { margin: 5px 0 0; font-size: 13px; color: var(--mh-errore); }

.mh-esito:empty { display: none; }
.mh-esito {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 8px;
  font-size: 14px;
  background: var(--mh-tenue);
}
.mh-esito.errore { background: #fef2f2; color: var(--mh-errore); }
.mh-esito.attesa { color: var(--mh-nota); }

.mh-avviso {
  margin-bottom: 16px;
  padding: 11px 13px;
  border-radius: 8px;
  font-size: 13.5px;
}
.mh-avviso.mh-attenzione { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }

/* ── Conferma ─────────────────────────────────────────────────── */
.mh-conferma {
  padding: 26px 22px;
  border: 1px solid var(--mh-bordo-tenue);
  border-radius: 12px;
  background: var(--mh-tenue);
  text-align: center;
}
.mh-conferma h3 { margin: 0 0 10px; font-size: 21px; color: var(--mh-ok); }
.mh-conferma p { margin: 0 0 8px; }
.mh-conferma:focus { outline: none; }
.mh-codice {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--mh-bordo);
  font-size: 15px;
}
.mh-codice strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }

/* ── Fiducia ──────────────────────────────────────────────────────
   La scheda che accompagna i tre passi. Sta dentro lo stesso disegno
   del modulo: stessi colori, stessi raggi, stesso spazio. Un bordo
   sottile e un fondo appena diverso bastano a staccarla dai campi
   senza farla sembrare una pubblicità appiccicata di fianco. */

/* La riga sotto il titolo della pagina */
.mh-occhiello {
  margin: 0 0 16px;
  font-size: 15px;
  color: var(--mh-nota);
}

/* Una colonna sola: la seconda si apre più sotto, e solo se c'è posto */
.mh-griglia { display: block; }

.mh-fiducia {
  margin: 22px 0 0;
  border: 1px solid var(--mh-bordo-tenue);
  border-radius: 12px;
  background: var(--mh-tenue);
}
.mh-fiducia-dentro { padding: 16px 18px; }

.mh-fiducia-capo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--mh-accento);
}
.mh-fiducia-icona { display: inline-flex; }
.mh-fiducia-icona svg { display: block; }
.mh-fiducia-conta {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--mh-nota);
  font-variant-numeric: tabular-nums;
}

.mh-fiducia-titolo {
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
}
.mh-fiducia-testo {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--mh-nota);
}

.mh-fiducia-evidenza {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 9px;
  background: var(--mh-fondo);
  border: 1px solid var(--mh-bordo-tenue);
}
.mh-fiducia-evidenza-titolo {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  /* Il testo scuro sul fondo bianco, non l'accento: si legge meglio e
     resta sopra il rapporto di contrasto anche a questa misura */
  color: var(--mh-testo);
}
.mh-fiducia-evidenza-testo {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mh-nota);
}

.mh-fiducia-micro {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--mh-bordo-tenue);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--mh-nota);
}

/* Quando è dentro il passo, sopra i bottoni: più bassa e più stretta di
   spazi, perché lì sotto sta già il resto del modulo */
.mh-fiducia.mh-fiducia-in-passo { margin: 18px 0 0; }
.mh-fiducia.mh-fiducia-in-passo .mh-fiducia-dentro { padding: 13px 14px; }
.mh-fiducia.mh-fiducia-in-passo .mh-fiducia-titolo { font-size: 14.5px; }
.mh-fiducia.mh-fiducia-in-passo .mh-fiducia-testo { font-size: 13px; }
.mh-fiducia.mh-fiducia-in-passo .mh-fiducia-micro { margin-top: 10px; padding-top: 8px; }

/* La colonna di fianco: solo se il tema le dà davvero lo spazio. La
   larghezza la decide il JavaScript misurando il contenitore, così un
   tema con la colonna stretta non si ritrova il modulo schiacciato. */
@media (min-width: 1100px) {
  .mh-modulo[data-mh-larghezza="ampia"] { max-width: 1024px; }
  .mh-modulo[data-mh-larghezza="ampia"] .mh-griglia {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 34px;
    align-items: start;
  }
  .mh-modulo[data-mh-larghezza="ampia"] .mh-colonna-form { max-width: 640px; }
  .mh-modulo[data-mh-larghezza="ampia"] .mh-fiducia {
    margin: 0;
    position: sticky;
    top: 24px;
  }
  /* Conferma e avvisi restano larghi quanto il modulo, non quanto la
     griglia: a richiesta mandata la seconda colonna sparisce comunque,
     questa è la rete se qualcosa va storto */
  .mh-modulo[data-mh-larghezza="ampia"] .mh-conferma { max-width: 640px; margin-inline: auto; }
  .mh-modulo[data-mh-larghezza="ampia"] .mh-avviso,
  .mh-modulo[data-mh-larghezza="ampia"] .mh-occhiello { max-width: 640px; }
}

/* ── Micro-messaggi ──────────────────────────────────────────────── */
.mh-micro {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--mh-nota);
}
.mh-micro-contatti {
  margin: -4px 0 14px;
  padding-left: 11px;
  border-left: 2px solid var(--mh-bordo-tenue);
}

/* La riga sotto il bottone finale */
.mh-garanzie {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--mh-nota);
}
.mh-garanzie li { display: flex; align-items: baseline; gap: 6px; }
.mh-garanzie li::before {
  content: "✓";
  color: var(--mh-ok);
  font-weight: 700;
}

@media (prefers-reduced-motion: no-preference) {
  .mh-fiducia.mh-cambia .mh-fiducia-dentro,
  .mh-occhiello.mh-cambia { animation: mh-sfuma .2s ease-out; }
  @keyframes mh-sfuma {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: none; }
  }
}

/* Il campo che vedono solo i robot */
.mh-nonvedere {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .mh-passo.attivo { animation: mh-entra .18s ease-out; }
  @keyframes mh-entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}