/* 01tag — regole proprie del modulo di contatto (RFID-116/#10383).
   Tenute FUORI da main-LTR.css, che è il foglio di stile del tema acquistato: un suo
   aggiornamento cancellerebbe qualunque modifica fatta lì dentro. Questo file va caricato dopo
   main-LTR.css, così le regole qui sotto vincono senza bisogno di !important. */

/* Il messaggio di errore del tema è in posizionamento assoluto dentro `.input-wrapper`
   (`position:absolute; top:0; right:1rem`), studiato per stare a fianco di un campo di testo.
   Sulla riga del consenso non esiste alcun campo accanto a cui affiancarlo: qui torna nel flusso,
   sotto l'etichetta. */
.custom-form-area .consent-wrapper {
  position: relative;
}

.custom-form-area .consent-wrapper .error-msg {
  position: static;
  transform: none;
  right: auto;
  top: auto;
  display: none;
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

.custom-form-area .consent-wrapper .consent-row {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

/* Il quadratino non deve rimpicciolirsi quando l'etichetta va a capo su schermi stretti. */
.custom-form-area .consent-wrapper .consent-check {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.2rem;
  cursor: pointer;
}

.custom-form-area .consent-wrapper .consent-label {
  cursor: pointer;
  line-height: 1.5;
  margin: 0;
}

/* `--clr-main` è il colore di marca del sito. Sul testo del consenso il collegamento resta
   distinguibile anche per chi non percepisce la differenza di tinta, grazie alla sottolineatura. */
.custom-form-area .consent-wrapper .consent-label a {
  color: var(--clr-main);
  text-decoration: underline;
}

/* Il riquadro flottante del tema (.done-msg) è VERDE per costruzione: nasce come conferma di invio
   riuscito. Ma il JavaScript lo usa anche per gli errori — "Invio non riuscito", "Completa la
   verifica anti-spam" — che comparivano quindi su sfondo di successo, dicendo il contrario di quello
   che significavano. Questa classe, applicata dal JavaScript, lo porta al colore di errore già
   definito dal tema. */
.custom-form-area .done-msg.is-error {
  background-color: var(--clr-danger);
  /* Il tema anima `all` per mezzo secondo, quindi anche il colore di sfondo: passando da un
     messaggio di successo a uno di errore il riquadro sfumava lentamente dal verde al rosso,
     restando ambiguo proprio nell'istante in cui l'utente lo legge. Qui si anima solo la comparsa. */
  transition: opacity 0.5s ease-in-out 0s, visibility 0.5s ease-in-out 0s, margin-bottom 0.5s ease-in-out 0s;
}

/* Su schermo stretto le tre celle anagrafiche stanno una per riga: la griglia se ne occupa da
   sola, ma il margine inferiore del tema (3rem) fra un campo e l'altro diventa eccessivo quando
   i campi diventano tre invece di due. */
@media (max-width: 991.98px) {
  .custom-form-area .input-wrapper {
    margin-bottom: 2.25rem;
  }
}