/* ============================================================
   DLG Theme — Elementor Pro Form override
   Stile identico al form HTML originale del sito.
   ============================================================ */

/* ─── Form container ──────────────────────────────────── */
.elementor-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  /* Senza un limite i campi seguivano la colonna di Elementor: 1140px
     per scriverci un nome. Un campo largo piu' del testo che conterra'
     fa sembrare il modulo piu' lungo di quanto sia. */
  max-width: 620px;
}

/* ─── Field group (= .fg) ─────────────────────────────── */
/* In un flex a colonna align-items lavora sull'asse ORIZZONTALE: qui
   restava il "center" di Elementor, pensato per le etichette in linea, e
   ogni etichetta finiva a meta' pagina staccata dal proprio campo. Le
   caselle e il pulsante seguivano la stessa sorte. */
.elementor-form .elementor-field-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;
  margin-bottom: 0 !important;
}

/* ─── Label ───────────────────────────────────────────── */
.elementor-form .elementor-field-label {
  font-family: 'Inter', sans-serif;
  font-size: .65rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* #6b5f58 sul fondo dei campi sta a 3.0:1, sotto la soglia per il testo
     piccolo. Questo e' lo stesso tono usato nel popup: 6.7:1. */
  color: #a3968d !important;
  margin-bottom: 0 !important;
  display: block;
}

/* ─── Inputs, select, textarea ────────────────────────── */
/* :not() esclude spunte e scelte: portano la stessa classe dei campi di
   testo, e con width:100% + padding la casella del consenso diventava una
   barra grigia larga 579px. */
.elementor-form .elementor-field:where(:not([type="checkbox"]):not([type="radio"])),
.elementor-form input[type="text"],
.elementor-form input[type="email"],
.elementor-form input[type="tel"],
.elementor-form input[type="url"],
.elementor-form input[type="number"],
.elementor-form select,
.elementor-form textarea {
  background: var(--bg3, #18120e) !important;
  border: 1px solid var(--line, rgba(237,229,222,.07)) !important;
  border-radius: 2px !important;
  padding: .875rem 1rem !important;
  color: var(--cream, #ede5de) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .9375rem !important;
  width: 100% !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .2s, box-shadow .2s !important;
  -webkit-appearance: none;
  appearance: none;
  resize: vertical;
}

.elementor-form .elementor-field::placeholder,
.elementor-form textarea::placeholder {
  color: var(--muted, #6b5f58) !important;
}

.elementor-form .elementor-field:focus,
.elementor-form input:focus,
.elementor-form select:focus,
.elementor-form textarea:focus {
  border-color: rgba(192,54,26,.6) !important;
  box-shadow: 0 0 0 3px rgba(192,54,26,.1) !important;
  outline: none !important;
}

/* Select arrow */
.elementor-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b5f58' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  padding-right: 2.5rem !important;
  cursor: pointer;
}

/* Select options */
.elementor-form select option {
  background: #18120e;
  color: #ede5de;
}

/* ─── Two-column row (name + email) ────────────────────── */
.elementor-form .elementor-form-fields-wrapper.elementor-labels-above {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Elementor column layout */
.elementor-form .elementor-col-50 {
  width: 50% !important;
  float: left;
  padding: 0 .625rem;
}
.elementor-form .elementor-col-50:first-child { padding-left: 0; }
.elementor-form .elementor-col-50:last-child  { padding-right: 0; }
.elementor-form .elementor-col-100 { width: 100% !important; padding: 0; }

/* Clear floats */
.elementor-form .elementor-form-fields-wrapper::after {
  content: ''; display: table; clear: both;
}

/* ─── Submit button ────────────────────────────────────── */
.elementor-form .elementor-button-wrapper,
.elementor-form .elementor-field-type-submit {
  margin-top: .25rem !important;
}

.elementor-form .elementor-button,
.elementor-form .elementor-button.elementor-size-md,
.elementor-form button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: .4rem !important;
  background: var(--red, #c0361a) !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  padding: .875rem 2rem !important;
  border-radius: 2px !important;
  border: none !important;
  cursor: pointer !important;
  transition: background .2s, transform .2s cubic-bezier(0.16,1,0.3,1), box-shadow .2s !important;
  line-height: 1 !important;
  width: auto !important;
}

.elementor-form .elementor-button:hover,
.elementor-form button[type="submit"]:hover {
  background: var(--red-h, #d94020) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(192,54,26,.32) !important;
}

/* Loading state */
.elementor-form .elementor-button .elementor-button-text { display: inline; }
.elementor-form .elementor-button .elementor-button-icon  { display: none; }

/* ─── Messages ─────────────────────────────────────────── */
.elementor-form .elementor-message {
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  padding: .75rem 1rem;
  border-radius: 2px;
  margin-top: .5rem;
}

.elementor-form .elementor-message.elementor-message-success {
  color: #4caf50 !important;
  background: rgba(76,175,80,.08);
  border: 1px solid rgba(76,175,80,.2);
}

.elementor-form .elementor-message.elementor-message-danger,
.elementor-form .elementor-message.elementor-message-error {
  color: var(--red, #c0361a) !important;
  background: rgba(192,54,26,.06);
  border: 1px solid rgba(192,54,26,.2);
}

/* ─── Field error state ────────────────────────────────── */
.elementor-form .elementor-field.elementor-field-invalid,
.elementor-form input.elementor-field-invalid,
.elementor-form textarea.elementor-field-invalid {
  border-color: rgba(192,54,26,.5) !important;
}

.elementor-form .elementor-field-group .elementor-field-invalid-message {
  font-size: .72rem;
  color: var(--red, #c0361a);
  margin-top: .25rem;
}

/* ─── Pulsante di invio ────────────────────────────────── */
/* Elementor allinea in fondo a destra (align-items: flex-end su un flex a
   colonna, quindi a destra): il pulsante restava staccato dalla colonna
   dei campi. */
.elementor-form .e-form__buttons,
.elementor-form .elementor-field-type-submit {
  align-items: flex-start !important;
}

/* ─── Consenso privacy ─────────────────────────────────── */
/* Qui c'era un'etichetta "PRIVACY" sopra una casella nuda, e la casella
   veniva centrata come tutto il resto. Ora e' una riga sola: casella,
   testo accanto, tutto a sinistra come i campi. */
.elementor-form .elementor-field-type-acceptance .elementor-field-label {
  display: none;
}

.elementor-form .elementor-field-subgroup {
  width: 100%;
}

.elementor-form .elementor-field-option {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--text, #c8bcb4);
}

.elementor-form .elementor-field-option label {
  cursor: pointer;
}

.elementor-form .elementor-field-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  background: var(--bg3, #18120e);
  border: 1px solid var(--line, rgba(237,229,222,.18));
  border-radius: 2px;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}

.elementor-form .elementor-field-option input[type="checkbox"]:checked {
  background: var(--red, #c0361a);
  border-color: var(--red, #c0361a);
  /* Il segno di spunta e' disegnato qui dentro: nessun font di icone da
     caricare per un quadratino. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.elementor-form .elementor-field-option input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--red, #c0361a);
  outline-offset: 2px;
}

.elementor-form .elementor-field-option a {
  color: #e0522f;                       /* 5.12:1, leggibile sul fondo */
  border-bottom: 1px solid rgba(224,82,47,.38);
}
.elementor-form .elementor-field-option a:hover { color: #e8663f; }

/* ─── Riempimento automatico del browser ───────────────── */
/* Senza questo Chrome applica un fondo azzurro con testo scuro: sul tema
   scuro il campo compilato diventa illeggibile. */
.elementor-form input:-webkit-autofill,
.elementor-form input:-webkit-autofill:hover,
.elementor-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ede5de;
  -webkit-box-shadow: 0 0 0 1000px #18120e inset;
  caret-color: #ede5de;
}

/* ─── Movimento ridotto ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .elementor-form .elementor-button,
  .elementor-form button[type="submit"] { transition: background .2s !important; }
  .elementor-form .elementor-button:hover,
  .elementor-form button[type="submit"]:hover { transform: none !important; }
}

/* ─── Responsive ───────────────────────────────────────── */
@media (max-width: 640px) {
  .elementor-form .elementor-col-50 {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
  }
}