/* Le regole display qui sotto batterebbero [hidden] dello UA stylesheet
   (gli stili d'autore vincono su quelli del browser): senza questa riga i
   campi condizionali, il form e la conferma resterebbero sempre visibili. */
[hidden] { display: none !important; }

.form-card {
  position: relative;
  margin-top: 34px;
  background: color-mix(in srgb, var(--avorio) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--avorio) 18%, transparent);
  border-radius: 20px;
  padding: 30px 32px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px;
}
@media (max-width: 700px) { .form-card { grid-template-columns: 1fr; padding: 24px 20px; } }

.campo { display: flex; flex-direction: column; gap: 7px; border: 0; padding: 0; margin: 0; }
.campo-largo { grid-column: 1 / -1; }

.campo label, .campo legend {
  font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--avorio) 78%, transparent);
  padding: 0;
}
.campo .aiuto {
  font-size: .85rem; text-transform: none; letter-spacing: 0; font-weight: 400;
  color: color-mix(in srgb, var(--avorio) 60%, transparent);
}

.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"],
.campo input[type="number"], .campo select, .campo textarea {
  font-family: var(--font-body); font-size: 1rem;
  color: var(--avorio);
  background: color-mix(in srgb, var(--notte) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--avorio) 22%, transparent);
  border-radius: 12px; padding: 12px 14px;
  width: 100%;
  transition: border-color .15s ease, background .15s ease;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--azzurro);
  background: color-mix(in srgb, var(--notte) 35%, transparent);
}
.campo input::placeholder, .campo textarea::placeholder {
  color: color-mix(in srgb, var(--avorio) 40%, transparent);
}
.campo select option { color: var(--inchiostro); background: var(--carta); }
.campo textarea { resize: vertical; min-height: 96px; }
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"] { border-color: #F87171; }

.campo-telefono { display: grid; grid-template-columns: 92px 1fr; gap: 8px; }

.scelta {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: .97rem; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: color-mix(in srgb, var(--avorio) 88%, transparent);
  cursor: pointer; padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--avorio) 16%, transparent);
  border-radius: 12px;
  transition: border-color .15s ease, background .15s ease;
}
.scelta:hover { border-color: color-mix(in srgb, var(--azzurro) 55%, transparent); }
.scelta:has(input:checked) {
  border-color: var(--azzurro);
  background: color-mix(in srgb, var(--azzurro) 14%, transparent);
}
.scelta input { margin-top: 3px; accent-color: var(--oro); flex: none; }
.scelta strong { color: var(--avorio); font-weight: 600; }
.scelta a { color: var(--oro); }
fieldset.campo .scelta + .scelta { margin-top: 8px; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form-azioni .btn-wa { background: #25D366; color: #08331B; border: 0; cursor: pointer; font-family: var(--font-body); }
.form-azioni .btn-wa:hover { background: var(--oro); color: var(--notte); }
.form-azioni .btn-wa[disabled] { opacity: .6; cursor: progress; transform: none; }
.form-errore { color: #FCA5A5; font-size: .95rem; margin: 0; }

.form-esito { display: block; }
.form-esito h3 { font-family: var(--font-display); font-size: 1.3rem; color: var(--avorio); margin-bottom: 10px; }
.form-esito p { color: color-mix(in srgb, var(--avorio) 80%, transparent); max-width: 56ch; }
.form-esito .btn-wa, .form-esito .btn-oro { margin-top: 20px; }
.esito-azioni { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Terza uscita del vicolo cieco. Deliberatamente piu sobria delle altre due:
   le CTA piene sono gia una verde e una oro, e una terza pillona pesante
   trasformerebbe il blocco in una vetrina invece che in una scelta. */
.btn-ghost-chiaro {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 11px 20px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--avorio) 40%, transparent);
  color: var(--avorio); text-decoration: none;
  font-weight: 600; font-size: 1rem;
  transition: border-color .18s ease, background .18s ease;
}
.btn-ghost-chiaro:hover {
  border-color: var(--avorio);
  background: color-mix(in srgb, var(--avorio) 12%, transparent);
}

/* Ritorno dal vicolo cieco: deve esserci, ma non competere con le due CTA.
   Resta un link per aspetto, ma non per superficie: e l'unica uscita da un
   radio cliccato per sbaglio, e a 22px di altezza su un telefono si manca.
   min-height 44px e il minimo tocco raccomandato (WCAG 2.5.5). */
.btn-testo {
  display: inline-flex; align-items: center;
  min-height: 44px; margin-top: 10px; padding: 0 4px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: .9rem;
  color: color-mix(in srgb, var(--avorio) 62%, transparent);
  text-decoration: underline; text-underline-offset: 3px;
}
.btn-testo:hover { color: var(--avorio); }