/* FacileDTF — la finestra del codice sconto.

   Stessa lingua visiva della finestra delle guide, che è quella del sito:
   scheda bianca, angoli da 16, ombra profonda, entrata breve. Niente fascia
   con il gradiente e niente icona dentro un cerchio colorato: sono due cose
   che il resto del sito non fa, e quella finestra sembrava arrivare da un
   altro posto. La gerarchia la fanno peso, dimensione e colore, come nelle
   altre pagine. */

.dtf-popup {
  position: fixed;
  inset: 0;
  z-index: 1200;               /* sopra la testata, sotto il banner dei cookie */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.dtf-popup.hidden { display: none; }

.dtf-popup-fondo {
  position: absolute;
  inset: 0;
  background: rgba(13, 27, 42, 0.7);
  animation: dtfPopupFondo 200ms ease;
  cursor: pointer;
}

@keyframes dtfPopupFondo { from { opacity: 0; } to { opacity: 1; } }

.dtf-popup-finestra {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 30px 60px rgba(13, 27, 42, 0.25), 0 10px 20px rgba(0, 0, 0, 0.12);
  animation: dtfPopupIn 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dtfPopupIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Chi apre la pagina con "riduci le animazioni" acceso non vuole cose che
   entrano volando: la finestra compare e basta. */
@media (prefers-reduced-motion: reduce) {
  .dtf-popup-fondo, .dtf-popup-finestra { animation: none; }
}

/* La crocetta. Grigia su bianco come nella finestra delle guide: prima era
   bianca, e nella seconda schermata, quella senza fascia colorata dietro,
   spariva dentro la pagina. */
.dtf-popup-chiudi {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #7A8A96;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}

.dtf-popup-chiudi:hover { color: #0D1B2A; background: #F4F7FA; }
.dtf-popup-chiudi:focus-visible { outline: 3px solid #0057FF; outline-offset: 2px; }

.dtf-popup-vista { padding: 40px 36px 32px; }
.dtf-popup-vista.hidden { display: none; }

/* ── L'offerta ──────────────────────────────────────────────── */

/* La freccia del marchio: dice di chi è la finestra senza scriverlo. */
.dtf-popup-segno { margin-bottom: 16px; line-height: 0; }
.dtf-popup-segno svg { display: inline-block; }

/* La riga che dice perché lo sconto esiste. Piccola e distanziata: deve farsi
   leggere dopo la percentuale, non prima. */
.dtf-popup-occhiello {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5F6E7A;
}

.dtf-popup-sconto {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin: 0 0 10px;
  flex-wrap: wrap;
}

.dtf-popup-sconto-num {
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #0057FF;
}

.dtf-popup-sconto-nota {
  font-size: 14px;
  font-weight: 600;
  color: #5F6E7A;
}

.dtf-popup-titolo {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #0D1B2A;
}

.dtf-popup-testo {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: #3D4F5C;
}

/* Il modulo attacca al titolo: fra i due non c'è più la frase di
   spiegazione, e senza questo spazio il campo gli finiva addosso. */
.dtf-popup-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}

.dtf-popup-input {
  width: 100%;
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 16px;          /* sotto i 16 iPhone ingrandisce la pagina da solo */
  font-family: inherit;
  color: #0D1B2A;
  background: #fff;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.dtf-popup-input:focus {
  outline: none;
  border-color: #0057FF;
  box-shadow: 0 0 0 3px rgba(0, 87, 255, 0.15);
}

/* Il testo del consenso è lungo e va letto: allineato a sinistra anche se la
   finestra è centrata. */
.dtf-popup-consenso {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.5;
  color: #5F6E7A;
  cursor: pointer;
}

.dtf-popup-consenso input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: #0057FF;
  cursor: pointer;
}

.dtf-popup-consenso a { color: #0057FF; text-decoration: underline; }

.dtf-popup-invia { width: 100%; justify-content: center; }

.dtf-popup-errore {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #DF1B41;
  text-align: left;
}

.dtf-popup-errore.hidden { display: none; }

/* Non "display:none": certi programmi saltano apposta i campi nascosti così,
   e la trappola non scatterebbe. */
.dtf-popup-trappola {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── La vista "controlla la posta" ──────────────────────────── */

.dtf-popup-icona { margin-bottom: 18px; line-height: 0; }
.dtf-popup-icona svg { display: inline-block; }

#dtf-popup-vista-posta { padding-top: 46px; }
#dtf-popup-vista-posta .dtf-popup-testo { margin-bottom: 0; }

.dtf-popup-nota {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: #5F6E7A;
}

/* La pagina dietro non si muove mentre la finestra è aperta. */
body.dtf-popup-aperto { overflow: hidden; }

@media (max-width: 480px) {
  .dtf-popup-vista        { padding: 34px 22px 26px; }
  .dtf-popup-sconto-num   { font-size: 38px; }
  .dtf-popup-titolo       { font-size: 21px; }
}