/* Pagina Contatti — il modulo di WPForms vestito come il resto del sito.

   WPForms disegna i suoi campi con delle variabili CSS: qui gli diamo i
   colori dello studio invece di combattere con le sue regole. Il resto
   (griglia, recapiti, mappa, pulsanti delle scelte) sta in sito.css. */

.colonna-modulo .wpforms-container {
  /* WPForms scrive le sue variabili su "#wpforms-1891": un id, che vince su
     qualsiasi regola scritta per classe. Per questo qui c'è !important —
     è l'unico modo di avere l'ultima parola senza inchiodare il numero del
     modulo dentro al foglio di stile. */
  --wpforms-field-background-color: var(--nero) !important;
  --wpforms-field-border-color: var(--bordo-chiaro) !important;
  --wpforms-field-border-color-spare: var(--bordo-chiaro) !important;
  --wpforms-field-border-size: 1px !important;
  --wpforms-field-border-radius: 3px !important;
  --wpforms-field-text-color: var(--testo) !important;
  --wpforms-field-menu-color: var(--nero) !important;
  --wpforms-field-size-font-size: 17px !important;
  --wpforms-field-size-line-height: 24px !important;
  --wpforms-field-size-input-height: 52px !important;
  --wpforms-field-size-input-spacing: 22px !important;
  --wpforms-field-size-padding-h: 16px !important;

  --wpforms-label-color: var(--testo-2) !important;
  --wpforms-label-sublabel-color: var(--testo-4) !important;
  --wpforms-label-size-font-size: 15px !important;
  --wpforms-label-size-line-height: 20px !important;
  --wpforms-label-error-color: #FFA5A5 !important;

  --wpforms-button-background-color: var(--giallo) !important;
  --wpforms-button-background-color-alt: var(--giallo-chiaro) !important;
  --wpforms-button-text-color: var(--nero) !important;
  --wpforms-button-text-color-alt: var(--nero) !important;
  --wpforms-button-border-radius: 3px !important;
  --wpforms-button-border-style: none !important;
  --wpforms-button-size-height: 52px !important;
  --wpforms-button-size-font-size: 18px !important;
  --wpforms-button-size-padding-h: 26px !important;

  --wpforms-container-padding: 0 !important;
  --wpforms-container-border-style: none !important;

  margin: 0;
}

/* I campi, uno sotto l'altro con lo stesso respiro del prototipo */
.colonna-modulo .wpforms-field { padding: 11px 0; }

.colonna-modulo .wpforms-field-label { font-family: var(--testo-font); font-weight: 400; }

/* Il pulsante di invio: lo stesso di tutti gli altri del sito */
.colonna-modulo .wpforms-submit {
  font: 700 18px/1 var(--titolo);
  padding: 0 26px;
  cursor: pointer;
}

/* L'asterisco dei campi obbligatori, meno urlato */
.colonna-modulo .wpforms-required-label { color: var(--testo-4); }

/* La riga "Inviando accetti la Privacy Policy" sotto il pulsante */
.colonna-modulo .hk-nota-privacy {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--testo-3);
}
.colonna-modulo .hk-nota-privacy a { color: var(--giallo); }

/* Il messaggio che compare dopo l'invio.
   WPForms lo disegna verde chiaro su bianco: qui torna scuro come la pagina.
   Anche questo chiede !important, per la stessa ragione dei campi. */
.colonna-modulo .wpforms-confirmation-container-full {
  background: var(--nero) !important;
  border: 1px solid var(--giallo) !important;
  border-radius: 3px;
  padding: 28px !important;
  margin: 0 !important;
  color: var(--testo-2) !important;
}
.colonna-modulo .wpforms-confirmation-container-full p { margin: 0; }
.colonna-modulo .wpforms-confirmation-container-full strong { color: var(--testo); }

/* Gli errori di compilazione */
.colonna-modulo .wpforms-error { font-size: 15px; }

/* Quando il modulo non c'è */
.senza-modulo { font-size: 18px; line-height: 1.7; color: var(--testo-3); }
.senza-modulo a { color: var(--giallo); }

/* ───────── I cinque pulsanti sopra il modulo ─────────
   Stanno dentro al modulo, e WPForms azzera l'aspetto dei bottoni che
   trova lì dentro: senza queste righe diventano scritte gialle senza
   bordo né imbottitura. Qui tornano identici a quelli delle altre pagine
   (stessi valori di ".scheda" in sito.css). */

.colonna-modulo .campo-scelte .scheda {
  height: 44px !important;
  padding: 0 18px !important;
  border: 1px solid var(--bordo-chiaro) !important;
  border-radius: 3px !important;
  background: rgba(10, 10, 15, .55) !important;
  color: var(--testo-2) !important;
  font: 500 17px/1 var(--titolo) !important;
  width: auto !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  cursor: pointer;
}
.colonna-modulo .campo-scelte .scheda:hover {
  color: var(--testo) !important;
  border-color: #7A7A8C !important;
}
.colonna-modulo .campo-scelte .scheda[aria-pressed="true"] {
  background: var(--giallo) !important;
  border-color: var(--giallo) !important;
  color: var(--nero) !important;
}

/* L'etichetta sopra i pulsanti, come la "domanda" delle altre pagine */
.colonna-modulo .campo-scelte > span {
  font-size: 15px;
  color: var(--testo-2);
}
.colonna-modulo .campo-scelte .schede {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}