/* ============================================================
   DLG — Popup di contatto
   Stilizza SOLO il nostro popup: la classe .dlg-popup viene
   agganciata dal generatore, cosi' altri popup restano intatti.
   Contrasti verificati sul fondo #110e0a.
   ============================================================ */

.dlg-popup {
  --pop-bg:     #110e0a;
  --pop-line:   rgba(237, 229, 222, .12);
  --pop-label:  #a3968d;   /*  6.70:1 */
  --pop-holder: #8d8078;   /*  5.03:1 */
  --pop-ok:     #4ade80;   /* 11.05:1 */
  --pop-error:  #ff6b52;   /*  6.85:1 */
}

/* ─── Velo ───────────────────────────────────────────────── */
.dlg-popup.elementor-popup-modal {
  background: rgba(6, 4, 3, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ─── Scatola ────────────────────────────────────────────── */
.dlg-popup .dialog-widget-content {
  background: var(--pop-bg);
  border: 1px solid var(--pop-line);
  /* Filo rosso in testa: lo stesso segno della prima fase nei blocchi.
     E' un bordo e non uno pseudo-elemento, cosi' non serve overflow:hidden,
     che Elementor tiene a visible per il pulsante di chiusura. */
  border-top: 2px solid var(--red, #c0361a);
  border-radius: 3px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}

.dlg-popup .dialog-message {
  padding: 0;
  /* Il tetto a 720px faceva scorrere il popup anche su schermi alti
     1280: il modulo misura circa 800px e il pulsante di invio restava
     sotto il bordo. Ora ci sta intero dove c'e' spazio, e continua a
     scorrere sui portatili bassi. */
  max-height: min(88vh, 880px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(237, 229, 222, .22) transparent;
}

.dlg-popup .dialog-message::-webkit-scrollbar { width: 8px; }
.dlg-popup .dialog-message::-webkit-scrollbar-track { background: transparent; }
.dlg-popup .dialog-message::-webkit-scrollbar-thumb {
  background: rgba(237, 229, 222, .22);
  border-radius: 4px;
}

/* ─── Chiusura ───────────────────────────────────────────── */
/* Posizione e dimensioni restano a Elementor (impostazione "Inside"):
   qui si interviene solo su colore e reazione al passaggio del mouse. */
.dlg-popup .dialog-close-button {
  color: var(--pop-label);
  opacity: 1;
  transition: color .2s, transform .2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}
/* Elementor colora la X via fill dell'SVG, non con color. */
.dlg-popup .dialog-close-button svg {
  fill: currentColor;
}
.dlg-popup .dialog-close-button:hover {
  color: var(--cream, #ede5de);
  transform: rotate(90deg);
}
.dlg-popup .dialog-close-button:focus-visible {
  outline: 2px solid var(--link, #e0522f);
  outline-offset: 3px;
}

/* ─── Testo introduttivo ─────────────────────────────────── */
.dlg-popup .dlg-popup__kicker {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.05;
  color: var(--cream, #ede5de);
  margin: 0 0 .6rem;
}

.dlg-popup .dlg-popup__text {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--text, #c8bcb4);
  margin: 0;
  text-wrap: pretty;
}

/* ─── Campi ──────────────────────────────────────────────── */
.dlg-popup .elementor-field-group {
  margin-bottom: 1.05rem;
}

/*
 * Qui l'!important non e' pigrizia: la tipografia dei campi arriva sia dal
 * foglio generale dei moduli del tema (che usa !important a sua volta) sia
 * dal CSS che Elementor genera per il popup, con selettori a tre classi.
 * Senza, le etichette del popup uscivano in Roboto: il carattere di serie
 * di Elementor, che nel sito non si usa da nessuna parte.
 */
.dlg-popup .elementor-field-label {
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
  font-size: .64rem !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--pop-label) !important;
  margin-bottom: .5rem !important;
  padding: 0;
}

/* Asterisco dei campi obbligatori nel colore del brand. */
.dlg-popup .elementor-mark-required .elementor-field-label::after {
  content: ' *';
  color: var(--red, #c0361a);
}

.dlg-popup .elementor-form .elementor-field-textual {
  background: rgba(237, 229, 222, .035) !important;
  border: 1px solid var(--pop-line) !important;
  border-radius: 2px !important;
  color: var(--cream, #ede5de) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.6;
  padding: .8rem .95rem !important;
  /* 16px pieni: sotto quella soglia iOS ingrandisce la pagina quando
     il campo prende il fuoco, e il popup salta. */
  min-height: 48px;
  transition: border-color .2s, background .2s;
  box-shadow: none;
}

.dlg-popup .elementor-form textarea.elementor-field-textual {
  min-height: 112px;
  resize: vertical;
}

.dlg-popup .elementor-form .elementor-field-textual::placeholder {
  color: var(--pop-holder);
  opacity: 1;
}

.dlg-popup .elementor-form .elementor-field-textual:hover {
  border-color: rgba(237, 229, 222, .22);
}

.dlg-popup .elementor-form .elementor-field-textual:focus {
  outline: none;
  border-color: var(--red, #c0361a);
  background: rgba(237, 229, 222, .06);
  box-shadow: 0 0 0 3px rgba(192, 54, 26, .18);
}

/* Riempimento automatico del browser: senza questo Chrome applica un
   fondo azzurro con testo scuro, illeggibile su tema scuro. */
.dlg-popup .elementor-form .elementor-field-textual:-webkit-autofill,
.dlg-popup .elementor-form .elementor-field-textual:-webkit-autofill:hover,
.dlg-popup .elementor-form .elementor-field-textual:-webkit-autofill:focus {
  -webkit-text-fill-color: #ede5de;
  -webkit-box-shadow: 0 0 0 1000px #1a1510 inset;
  caret-color: #ede5de;
}

/* ─── Consenso privacy ───────────────────────────────────── */
.dlg-popup .elementor-field-type-acceptance .elementor-field-label {
  display: none;
}

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

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

.dlg-popup .elementor-field-option input[type="checkbox"]:hover {
  border-color: rgba(237, 229, 222, .28);
}

/* Spunta disegnata in SVG, non un carattere tipografico: resta nitida
   a qualunque densita' di schermo. */
.dlg-popup .elementor-field-option input[type="checkbox"]:checked {
  background-color: var(--red, #c0361a);
  border-color: var(--red, #c0361a);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='square'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}

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

.dlg-popup .elementor-field-option a {
  color: var(--link, #e0522f);
  border-bottom: 1px solid rgba(224, 82, 47, .4);
}
.dlg-popup .elementor-field-option a:hover {
  color: var(--link-h, #e8663f);
}

/* ─── Pulsante ───────────────────────────────────────────── */
.dlg-popup .elementor-button[type="submit"] {
  background-color: var(--red, #c0361a);
  color: #fff;                       /* 5.55:1 sul rosso */
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: none;
  border-radius: 2px;
  min-height: 52px;
  width: 100%;
  transition: background-color .2s, transform .2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)), box-shadow .2s;
}

.dlg-popup .elementor-button[type="submit"]:hover {
  background-color: var(--red-h, #d94020);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(192, 54, 26, .34);
}

.dlg-popup .elementor-button[type="submit"]:focus-visible {
  outline: 2px solid var(--cream, #ede5de);
  outline-offset: 3px;
}

/* Durante l'invio il pulsante non deve sembrare ancora cliccabile. */
.dlg-popup .elementor-button.elementor-button-state .elementor-button-content-wrapper {
  opacity: .45;
}

/* ─── Messaggi ───────────────────────────────────────────── */
.dlg-popup .elementor-message {
  font-size: .9rem;
  line-height: 1.65;
  margin-top: .9rem;
  padding: .8rem 1rem;
  border-radius: 2px;
  border-left: 2px solid currentColor;
  background: rgba(237, 229, 222, .05);
}

.dlg-popup .elementor-message.elementor-message-success {
  color: var(--pop-ok);
}

.dlg-popup .elementor-message.elementor-message-danger,
.dlg-popup .elementor-message.elementor-message-error {
  color: var(--pop-error);
  font-weight: 500;
}

.dlg-popup .elementor-field-group.elementor-error .elementor-field-textual {
  border-color: var(--pop-error);
}

/* ─── Movimento ridotto ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dlg-popup .dialog-close-button,
  .dlg-popup .elementor-button[type="submit"],
  .dlg-popup .elementor-form .elementor-field-textual,
  .dlg-popup .elementor-field-option input[type="checkbox"] {
    transition: none;
  }
  .dlg-popup .dialog-close-button:hover,
  .dlg-popup .elementor-button[type="submit"]:hover {
    transform: none;
  }
}

/* ─── Schermi piccoli ────────────────────────────────────── */
@media (max-width: 600px) {
  .dlg-popup .dialog-widget-content {
    max-width: calc(100vw - 1.5rem);
  }
  .dlg-popup .dialog-message {
    max-height: 86vh;
  }
}

/* ─── Cursore dentro il popup ────────────────────────────── */
/*
 * Il tema nasconde il cursore di sistema (body { cursor: none }) per
 * disegnarne uno proprio. Dentro un popup questo diventa una trappola:
 * il cursore personalizzato resta sotto il modal e quello vero e'
 * invisibile, quindi non si capisce dove si sta puntando e la X non si
 * riesce a colpire.
 *
 * Dentro il popup si torna al cursore del sistema operativo.
 */
.dlg-popup,
.dlg-popup * {
  cursor: auto;
}

.dlg-popup a,
.dlg-popup button,
.dlg-popup summary,
.dlg-popup label,
.dlg-popup [role="button"],
.dlg-popup .dialog-close-button,
.dlg-popup input[type="checkbox"],
.dlg-popup .elementor-button {
  cursor: pointer;
}

.dlg-popup input:not([type="checkbox"]),
.dlg-popup textarea {
  cursor: text;
}

/* Il popup sta SOPRA il cursore personalizzato del tema (z-index 9999),
   cosi' i suoi puntini non galleggiano davanti al form. */
.dlg-popup.elementor-popup-modal {
  z-index: 10001;
}

/* Bersaglio di chiusura piu' generoso: 44px minimi, come ogni altro
   comando toccabile. */
.dlg-popup .dialog-close-button {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}