/* ── Pagina d'ordine ───────────────────────────────────────────
   Riusa lo stile del sito; qui solo ciò che serve al modulo. */

.modulo-ordine{max-width:74ch;margin:0 auto;}
.modulo-ordine fieldset{border:none;margin:0 0 34px;padding:0;}
.modulo-ordine legend{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--grigio);padding:0 0 10px;margin-bottom:16px;
  border-bottom:1px solid var(--bordo);width:100%;
}

/* ── Scelta della licenza ───────────────────────────────────── */
.scelte{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.scelta{
  display:block;position:relative;cursor:pointer;
  padding:18px 18px 16px;border:1px solid var(--bordo);border-radius:12px;
  background:var(--bianco);
}
.scelta:hover{border-color:var(--accento-medio);}
.scelta.attiva{border-color:var(--accento-medio);box-shadow:0 0 0 2px var(--accento-medio) inset;background:var(--tinta);}
.scelta input{position:absolute;top:16px;right:16px;accent-color:var(--accento-medio);width:17px;height:17px;}
.scelta b{display:block;font-size:15px;margin-bottom:8px;padding-right:26px;}
.scelta .prezzo{display:block;font-size:28px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.scelta .prezzo em{font-style:normal;font-size:12.5px;font-weight:500;color:var(--grigio);margin-left:6px;}
.scelta .dettaglio{display:block;font-size:12.5px;color:var(--grigio);margin-top:6px;line-height:1.45;}

/* ── Campi ──────────────────────────────────────────────────── */
.griglia-campi{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.campo{display:block;grid-column:span 2;}
.campo-largo{grid-column:1/-1;}
.campo-stretto{grid-column:span 1;}
.campo > span{display:block;font-size:12.5px;font-weight:600;color:var(--inchiostro);margin-bottom:5px;}
.campo em{font-style:normal;font-weight:400;color:var(--grigio);}
.campo input,.campo select,.campo textarea{
  width:100%;box-sizing:border-box;padding:10px 12px;
  font-family:var(--testo);font-size:14.5px;color:var(--inchiostro);
  background:#fbfdfc;border:1px solid var(--bordo);border-radius:8px;outline:none;
}
.campo textarea{resize:vertical;}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--accento-medio);box-shadow:0 0 0 3px rgba(39,115,76,.18);
}
.campo .aiuto{display:block;font-size:12px;color:var(--grigio);margin-top:5px;line-height:1.45;}
.nota-campi{font-size:12.5px;color:var(--grigio);margin:14px 0 0;line-height:1.5;}

/* ── Maiuscolo ──────────────────────────────────────────────
   I dati di fatturazione si scrivono in maiuscolo, come sui
   documenti fiscali. La trasformazione e' sia visiva sia sul dato
   salvato: senza la seconda, il CSV conterrebbe quello che
   l'utente ha davvero digitato e le due cose divergerebbero. */
.campo input[type=text],
.campo input[type=tel],
.campo select,
.campo textarea{text-transform:uppercase;}
/* Email e PEC restano come digitate: sono indirizzi, e su alcuni
   server la parte prima della chiocciola distingue le maiuscole. */
.campo input[type=email]{text-transform:none;}

/* ── Errori ─────────────────────────────────────────────────── */
.errore-campo{display:block;font-size:12.5px;color:#a3312a;margin-top:5px;font-weight:600;}

/* Il campo sbagliato si riconosce prima di leggere il messaggio:
   etichetta rossa, bordo rosso, fondo appena colorato. */
.campo.errato > span{color:#a3312a;}
.campo.errato input,
.campo.errato select,
.campo.errato textarea{border-color:#c0392b;background:#fdf6f5;}
.campo.errato input:focus,
.campo.errato select:focus,
.campo.errato textarea:focus{box-shadow:0 0 0 3px rgba(192,57,43,.18);}
.consensi.errato legend{color:#a3312a;border-bottom-color:#e8bdb8;}
.consensi.errato .consenso input{outline:2px solid #c0392b;outline-offset:2px;}
.scelte.errato .scelta{border-color:#e0a9a2;}
.errore-generale{
  max-width:74ch;margin:0 auto 26px;padding:13px 16px;
  background:#fdf1f0;border:1px solid #f0c9c5;border-radius:10px;
  color:#8f2b24;font-size:14px;
}

/* ── Consensi ───────────────────────────────────────────────── */
.consensi .consenso{
  display:flex;gap:11px;align-items:flex-start;margin-bottom:14px;
  font-size:13.5px;color:#33424e;line-height:1.55;
}
.consensi input{margin-top:3px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--accento-medio);}
.consensi a{color:var(--accento);font-weight:600;}
.invia{width:100%;border:none;cursor:pointer;font-size:15.5px;}
.nota-invio{font-size:12.5px;color:var(--grigio);margin:14px 0 0;text-align:center;line-height:1.5;}

/* ── Esito ──────────────────────────────────────────────────── */
.esito-ordine{max-width:64ch;margin:0 auto;text-align:center;}
.esito-tag{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--bianco);background:var(--accento-medio);
  padding:5px 14px;border-radius:999px;margin:0 0 18px;
}
.esito-ordine h1{font-size:clamp(30px,4vw,42px);font-weight:800;letter-spacing:-.03em;margin-bottom:16px;}
.esito-testo{font-size:16px;line-height:1.7;color:#33424e;margin:0 auto 16px;max-width:56ch;}
.avviso-ordine{
  background:#fff8e8;border:1px solid #ecd9a8;border-radius:10px;
  padding:13px 16px;font-size:14px;color:#7a5a10;margin:0 auto 18px;max-width:56ch;
}
.esito-ordine .azioni{justify-content:center;margin-top:26px;}

@media (max-width:760px){
  .scelte{grid-template-columns:1fr;}
  .griglia-campi{grid-template-columns:repeat(2,1fr);}
  .campo,.campo-stretto{grid-column:span 1;}
  .campo-largo{grid-column:1/-1;}
}
@media (max-width:480px){
  .griglia-campi{grid-template-columns:1fr;}
  .campo,.campo-stretto,.campo-largo{grid-column:1/-1;}
}