/* modulo.css — il modulo di richiesta preventivo. Sta in un file suo perché lo
   carica solo la pagina che ce l'ha. */

.modulo { max-width: 760px; margin: 0 auto; display: grid; gap: 18px; }

.carte-modulo { display: grid; gap: 16px; }

.carta-modulo {
  background: var(--scheda); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 20px 22px;
}
.carta-testa { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.carta-testa b { color: var(--giallo); }
.via {
  background: transparent; border: 1px solid var(--bordo); color: var(--testo-tenue);
  width: 30px; height: 30px; border-radius: 9px; cursor: pointer; font-size: 15px; line-height: 1;
}
.via:hover { border-color: var(--arancio); color: var(--arancio); }

.campi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 620px) { .campi { grid-template-columns: 1fr; } }

/* `input` elencati per tipo: dimenticarne uno lascia un campo bianco e senza
   stile in mezzo agli altri, e si nota subito — ma solo dopo averlo spedito. */
input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea {
  width: 100%; padding: 12px 14px;
  border-radius: 11px; border: 1px solid var(--bordo);
  background: rgba(0,0,0,.2); color: var(--testo);
  font: 400 1rem/1.5 var(--font-testo);
}
textarea { resize: vertical; }
select { cursor: pointer; }
select option { background: var(--viola-profondo); color: var(--testo); }
input::placeholder, textarea::placeholder { color: var(--testo-tenue); opacity: .8; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--giallo); outline-offset: 1px; border-color: transparent;
}
/* Il riempimento automatico del browser ridipinge il campo di bianco e lo
   rende illeggibile su fondo scuro. Queste due righe lo impediscono. */
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: var(--testo);
  -webkit-box-shadow: 0 0 0 40px #241a45 inset;
  caret-color: var(--testo);
}

.foto-riga { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }

/* Un `<label>` e non un `<div>`: un div NON inoltra il clic all'input file che
   contiene, e il pulsante «scatta» sembrerebbe semplicemente non fare niente. */
.foto {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 16px; border-radius: 12px; cursor: pointer;
  border: 2px dashed var(--bordo); color: var(--testo-tenue);
  font-weight: 700; font-size: .95rem; text-align: center;
  transition: border-color .2s var(--dolce), color .2s var(--dolce), transform .15s var(--molla);
}
.foto:hover { border-color: var(--giallo); color: var(--testo); transform: translateY(-2px); }
.foto .ico { font-size: 1.25rem; }
.foto.pronta { border-style: solid; border-color: var(--giallo); color: var(--giallo); background: rgba(255,202,2,.08); }

.tuoi-dati {
  background: var(--scheda); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 22px;
}
.tuoi-dati h3 { margin-bottom: 14px; }
.tuoi-dati .campi { grid-template-columns: 1fr 1fr 1fr; margin-bottom: 10px; }
@media (max-width: 720px) { .tuoi-dati .campi { grid-template-columns: 1fr; } }

.modulo button[type=submit] { justify-self: center; }
.modulo button:disabled { opacity: .6; cursor: wait; }

.esito {
  max-width: 760px; margin: 22px auto 0; padding: 16px 20px;
  border-radius: var(--raggio); text-align: center; font-weight: 700;
}
.esito.bene { background: rgba(255,202,2,.12); border: 1px solid var(--giallo); color: var(--testo); }
.esito.male { background: rgba(251,73,52,.14); border: 1px solid var(--arancio); color: #ffd9d3; }