/* =========================================================
   FB — Moduli (widget Modulo di Elementor)

   Solo i titoli di sezione dentro il modulo: si scrivono in un
   campo di tipo HTML, cosi' spezzano il modulo in blocchi senza
   uscire dal widget.

     <p class="fb-form-titolo">Inserisci i tuoi dati personali</p>

   Il resto dell'aspetto (campi, bottone) resta quello impostato
   nell'editor e nel design system.
   ========================================================= */
.elementor-field-type-html .fb-form-titolo,
.fb-form-titolo {
  margin: 12px 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1b;
}

/* il campo HTML che porta il titolo non ha bisogno dello spazio
   sotto che Elementor lascia agli altri campi */
.elementor-field-type-html:has(.fb-form-titolo) {
  padding-bottom: 0;
}

/* ---------------------------------------------------------
   Domande dei gruppi di scelta

   Nel widget le etichette dei campi sono spente (i campi di testo
   usano il segnaposto dentro il riquadro). Ma in un gruppo di radio
   o di spunte l'etichetta E' la domanda, e sopra un'area di testo
   fa da titolo del blocco: senza, restano opzioni e riquadri senza
   intestazione. Qui torna visibile per questi tre tipi di campo.

   Elementor la nasconde con .elementor-screen-only, che porta anche
   top: -10000em e margin: -1px: vanno rimessi a posto tutti e tre.
   --------------------------------------------------------- */
.elementor-field-type-radio > .elementor-field-label.elementor-screen-only,
.elementor-field-type-checkbox > .elementor-field-label.elementor-screen-only,
.elementor-field-type-textarea > .elementor-field-label.elementor-screen-only {
  position: static;
  top: auto;
  /* riga tutta sua: nel modulo le etichette sono "in linea", quindi
     senza questo la domanda resta appiccicata alla prima opzione o
     al riquadro */
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  margin: 12px 0 8px;
  padding: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  line-height: 1.3;
}

/* La tipografia della domanda NON si tocca qui: e' quella delle
   etichette impostata nel widget (Stile > Etichette), cosi' resta
   modificabile dall'editor. */

/* ---------------------------------------------------------
   Campi obbligatori

   Le etichette dei campi di testo sono spente (segnaposto dentro il
   riquadro), quindi l'asterisco sta nel segnaposto: "Nome *". Il
   "Required Mark" di Elementor vale solo con le etichette accese, per
   cui ai gruppi di scelta (pulsanti, spunte, area di testo) e alla
   spunta privacy l'asterisco lo mette questa regola, dello stesso
   arancione del kit. Basta che il campo sia "Obbligatorio" nel widget.

   Nota sotto il primo titolo:  <p class="fb-form-nota">I campi con *
   sono obbligatori</p>  dentro lo stesso campo HTML del titolo.
   --------------------------------------------------------- */
.elementor-field-group.elementor-field-required > .elementor-field-label::after,
.elementor-field-group.elementor-field-required.elementor-field-type-acceptance label::after {
  content: "*";
  padding-left: 0.2em;
  color: var(--e-global-color-ff10caf, #ed8b00);
}
.fb-form-nota {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.3;
  color: #999999;
}