/* ============================================================
   Funnel ordine + pagina di ringraziamento
   ============================================================ */

body.form-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ---------- Barra di avanzamento ---------- */
.f-top {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,244,234,.88);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.f-top-inner {
  max-width: 760px; margin-inline: auto;
  padding: 16px 22px;
  display: flex; align-items: center; gap: 18px;
}
.f-back {
  background: none; border: 0; cursor: pointer;
  color: var(--tx-mute);
  font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 2px; flex: 0 0 auto;
  transition: color .2s var(--ease);
}
.f-back:hover { color: var(--tx); }

.f-progress {
  flex: 1; height: 6px; border-radius: 4px;
  background: rgba(26,16,24,.09);
  overflow: hidden;
}
.f-progress i {
  display: block; height: 100%; width: 0;
  background: var(--grad);
  border-radius: 4px;
  transition: width .55s var(--ease);
}
.f-count {
  font-family: var(--display);
  font-weight: 700; font-size: 13px;
  letter-spacing: -.02em;
  color: var(--tx-mute);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

/* ---------- Corpo ---------- */
.f-main {
  flex: 1;
  display: flex; justify-content: center;
  padding: clamp(34px, 6vw, 64px) 22px 180px;
}
.f-stage { width: 100%; max-width: 720px; }

.f-step { display: none; }
.f-step.active { display: block; animation: stepIn .5s var(--ease); }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .f-step.active { animation: none; } }

.f-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 16px;
}
.f-kicker::before { content: ''; width: 24px; height: 2px; background: var(--grad); }

.f-question {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(32px, 6vw, 58px);
  line-height: .93;
  letter-spacing: -.045em;
  margin: 0 0 14px;
  text-wrap: balance;
}
.f-help {
  color: var(--tx-mute);
  font-size: clamp(15.5px, 1.8vw, 17.5px);
  line-height: 1.5;
  margin-bottom: 34px;
  max-width: 54ch;
}
.f-help.tight { margin-bottom: 26px; }

/* ---------- Opzioni ---------- */
.f-options { display: grid; gap: 10px; }
.f-options.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .f-options.two { grid-template-columns: 1fr; } }

.f-opt {
  display: flex; align-items: center; gap: 15px;
  width: 100%; text-align: left;
  background: var(--paper-2);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 16px 20px;
  font-size: 16.5px; font-weight: 500;
  letter-spacing: -.015em;
  cursor: pointer;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.f-opt:hover {
  border-color: var(--rose);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(220,63,110,.14);
}
.f-opt.selected {
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--rose), 0 8px 22px rgba(220,63,110,.18);
  background: linear-gradient(102deg, rgba(220,63,110,.07), rgba(245,160,63,.07));
}
.f-opt .emo {
  font-size: 20px; line-height: 1; flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(26,16,24,.045);
  transition: background .25s var(--ease);
}
.f-opt:hover .emo, .f-opt.selected .emo { background: rgba(220,63,110,.12); }
.f-opt .txt { flex: 1; }
.f-opt .txt small {
  display: block; font-size: 13px; color: var(--tx-mute);
  font-weight: 400; margin-top: 2px;
}

/* ---------- Campi ---------- */
.f-field { margin-bottom: 22px; }
.f-field label {
  display: block;
  font-size: 14px; font-weight: 600;
  margin-bottom: 9px;
  letter-spacing: -.01em;
}
.f-field label span { font-weight: 400; color: var(--tx-faint); }

.f-input, .f-textarea {
  width: 100%;
  background: var(--paper-2);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 17px;
  letter-spacing: -.01em;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.f-input:focus, .f-textarea:focus {
  outline: none;
  border-color: var(--rose);
  box-shadow: 0 0 0 4px rgba(220,63,110,.13);
}
.f-input::placeholder, .f-textarea::placeholder { color: var(--tx-faint); }
.f-textarea { min-height: 172px; resize: vertical; line-height: 1.55; font-family: inherit; }

.f-hint { font-size: 13.5px; color: var(--tx-faint); margin-top: 9px; line-height: 1.45; }
.f-counter { font-size: 13px; color: var(--tx-faint); text-align: right; margin-top: 7px; font-weight: 500; }
.f-counter.good { color: #1E8A4C; }

.f-error { color: #C81E3C; font-size: 14.5px; font-weight: 500; margin-top: 12px; display: none; }
.f-error.show { display: block; }

/* suggerimenti sotto le textarea */
.f-prompts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.f-prompts button {
  background: transparent;
  border: 1.5px dashed var(--line);
  border-radius: 100px;
  padding: 9px 16px;
  font-size: 13.5px; font-weight: 500;
  color: var(--tx-mute);
  cursor: pointer;
  transition: all .2s var(--ease);
}
.f-prompts button:hover {
  border-style: solid; border-color: var(--rose);
  color: var(--rose); transform: translateY(-2px);
}

/* ---------- Cosa stai comprando (ultima schermata) ----------
   La cifra e quello che comprende arrivano per primi, in un riquadro
   bianco che stacca dal fondo: e' la risposta alla domanda che uno si
   fa col dito sul pulsante di pagamento. */
.f-recap {
  background: var(--paper-2);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 24px 26px;
}
.f-recap-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
}
.f-recap-top strong {
  font-family: var(--display); font-weight: 800;
  font-size: 21px; letter-spacing: -.035em; line-height: 1.05;
}
.f-recap-price {
  flex: 0 0 auto;
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--display); font-weight: 800;
  font-size: 40px; letter-spacing: -.05em; line-height: 1;
}
/* Solo la cifra che si paga davvero prende il gradiente: il prezzo vecchio
   deve leggersi come qualcosa che non c'e' piu'. */
.f-recap-price > span {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.f-recap-was {
  font-size: 21px; letter-spacing: -.035em;
  color: var(--tx-faint);
  text-decoration-thickness: 2px;
}
.f-recap-deal {
  margin-top: 14px; padding-top: 13px;
  border-top: 1px dashed var(--line);
  font-size: 13.5px; font-weight: 600; color: var(--rose);
}
.f-recap-in {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: grid; gap: 9px;
}
.f-recap-in li {
  position: relative; padding-left: 28px;
  font-size: 14.5px; color: var(--tx-mute); line-height: 1.45;
}
.f-recap-in li::before {
  content: ''; position: absolute; left: 0; top: 2px;
  width: 17px; height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23DC3F6E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E") no-repeat center / 15px;
}
/* La promessa in nero, la conseguenza in grigio come il resto della riga:
   si legge prima cosa arriva, poi cosa succede se non arriva. */
.f-recap-in li strong { color: var(--tx); font-weight: 700; }

/* Le condizioni del rimborso: leggibili, senza rubare l'occhio alla cifra. */
.f-recap-fine {
  margin-top: 14px; padding-top: 13px;
  border-top: 1px dashed var(--line);
  font-size: 11.5px; line-height: 1.5; color: var(--tx-faint);
}
/* Con l'offerta accesa il filetto tratteggiato l'ha gia' messo lei. */
.f-recap-deal + .f-recap-fine { margin-top: 8px; padding-top: 0; border-top: 0; }
.f-recap-fine a { color: var(--tx-mute); text-decoration: underline; text-underline-offset: 2px; }
.f-recap-fine a:hover { color: var(--rose); }

/* ---------- Domanda secondaria (la data desiderata) ----------
   Sotto al prezzo e con la voce piu' bassa: si puo' anche saltare. */
.f-aside {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.f-aside h2 {
  font-family: var(--body);
  font-size: 16.5px; font-weight: 600;
  letter-spacing: -.015em; line-height: 1.35;
  margin-bottom: 7px;
}
.f-aside p {
  font-size: 14px; color: var(--tx-mute);
  line-height: 1.5; margin-bottom: 15px;
  max-width: 62ch;
}

/* ---------- Opzione facoltativa (revisione aggiuntiva) ---------- */
.f-addon {
  display: flex; align-items: center; gap: 15px;
  margin-top: 12px;
  background: var(--paper-2);
  border: 1.5px dashed var(--line);
  border-radius: 16px;
  padding: 16px 20px;
  cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.f-addon:hover { border-color: var(--rose); }
.f-addon.selected {
  border-style: solid; border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--rose);
  background: linear-gradient(102deg, rgba(220,63,110,.06), rgba(245,160,63,.06));
}
.f-addon input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--rose); cursor: pointer; }
.f-addon-info { flex: 1; }
.f-addon-info strong { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.f-addon-info span { font-size: 13.5px; color: var(--tx-mute); }
.f-addon-price {
  font-family: var(--display); font-weight: 800;
  font-size: 20px; letter-spacing: -.03em; flex: 0 0 auto;
}

/* ---------- Conto della spesa ---------- */
.f-total {
  margin-top: 18px;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 18px 22px;
}
.f-total .row {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 15px; padding: 7px 0;
  color: var(--tx-mute);
}
.f-total .row b { font-weight: 600; color: var(--tx); font-variant-numeric: tabular-nums; }
.f-total .row.grand {
  margin-top: 8px; padding-top: 15px;
  border-top: 1px solid var(--line);
  font-size: 17px; color: var(--tx); font-weight: 600;
}
.f-total .row.grand b {
  font-family: var(--display); font-weight: 800;
  font-size: 26px; letter-spacing: -.04em; line-height: 1;
}

/* ---------- Riepilogo ---------- */
.f-summary {
  background: rgba(26,16,24,.035);
  border-radius: 18px;
  padding: 22px 24px;
}
.f-summary h4 {
  font-family: var(--body);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--tx-faint); margin-bottom: 15px;
}
.f-summary dl { display: grid; gap: 9px; margin: 0; }
.f-summary .row { display: flex; gap: 14px; font-size: 14.5px; }
.f-summary dt { color: var(--tx-mute); flex: 0 0 120px; }
.f-summary dd { margin: 0; flex: 1; font-weight: 500; }

/* ---------- Barra azione fissa ---------- */
.f-actions {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: linear-gradient(to top, var(--paper) 58%, rgba(255,244,234,0));
  padding: 34px 22px calc(22px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.f-actions-inner { max-width: 720px; margin-inline: auto; pointer-events: auto; }
.f-actions .btn { width: 100%; }
.f-actions small {
  display: block; text-align: center; margin-top: 12px;
  font-size: 12.5px; color: var(--tx-faint);
}
.btn[disabled] { opacity: .4; pointer-events: none; }
.f-enter-hint { font-size: 12.5px; color: var(--tx-faint); text-align: center; margin-top: 10px; }
@media (max-width: 640px) { .f-enter-hint { display: none; } }

/* ---------- Attesa ---------- */
.f-redirect { text-align: center; padding: 60px 0; }
.f-spinner {
  width: 46px; height: 46px; margin: 0 auto 28px;
  border: 3px solid rgba(26,16,24,.1);
  border-top-color: var(--rose);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.f-trust {
  display: flex; gap: 20px; flex-wrap: wrap;
  margin-top: 24px; font-size: 13px; color: var(--tx-faint);
}
.f-trust span { display: inline-flex; align-items: center; gap: 7px; }

/* ============================================================
   INTERRUZIONE — la schermata dei contatti

   Arriva appena finito il racconto e non deve sembrare la domanda
   dopo: la pagina intera vira sul caldo, il contenuto si raccoglie
   in un riquadro e il titolo scende di tono. Il colore lo accende
   js/form.js mettendo .f-paused sul body.
   ============================================================ */
body.form-page { transition: background-color .55s var(--ease); }
@media (prefers-reduced-motion: reduce) { body.form-page { transition: none; } }

/* Cambiando --paper virano insieme il fondo e la sfumatura della barra
   in basso, che quel colore se lo prende già da lì. */
body.form-page.f-paused {
  --paper: #FADFCB;
  background-color: var(--paper);
}
body.form-page.f-paused .f-top {
  background: rgba(250,223,203,.9);
  border-bottom-color: rgba(26,16,24,.09);
}

.f-pause {
  background: linear-gradient(168deg, rgba(255,251,246,.96), rgba(255,242,231,.9));
  border: 1px solid rgba(255,255,255,.85);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4.6vw, 46px);
  box-shadow: 0 20px 54px rgba(122,63,109,.13), 0 2px 10px rgba(26,16,24,.05);
}

.f-pause-mark {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  margin-bottom: 20px;
  box-shadow: 0 10px 26px rgba(220,63,110,.28);
}
.f-pause-mark svg { width: 25px; height: 25px; }

/* Qui il titolo è una frase intera, non una domanda secca: alla misura
   delle altre schermate riempirebbe il video e suonerebbe come un annuncio. */
.f-pause .f-question {
  font-size: clamp(25px, 3.5vw, 36px);
  line-height: 1.05;
  letter-spacing: -.035em;
  margin-bottom: 12px;
}
.f-pause .f-help {
  font-size: clamp(16px, 1.8vw, 17.5px);
  line-height: 1.6;
  margin-bottom: 30px;
  max-width: 50ch;
}
.f-pause .f-field:last-of-type { margin-bottom: 0; }

/* ============================================================
   PAGINA DI RINGRAZIAMENTO
   ============================================================ */
.ty {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 44px 22px;
  background: var(--ink);
  color: var(--tx-inv);
  position: relative;
  overflow: hidden;
}
.ty::before {
  content: '';
  position: absolute; left: 50%; top: -30%;
  width: 900px; height: 900px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(220,63,110,.34), rgba(245,160,63,.12) 44%, transparent 68%);
  filter: blur(70px);
  pointer-events: none;
}
.ty-card { max-width: 620px; position: relative; z-index: 1; text-align: center; }

.ty-icon {
  width: 72px; height: 72px; margin: 0 auto 30px;
  border-radius: 22px;
  background: var(--grad);
  display: grid; place-items: center;
  box-shadow: 0 14px 40px rgba(220,63,110,.36);
}
.ty-icon svg { width: 32px; height: 32px; color: #fff; }

.ty h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(34px, 6.4vw, 62px);
  line-height: .92; letter-spacing: -.05em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.ty p { color: var(--tx-inv-mute); font-size: 17px; line-height: 1.55; }

.ty-code {
  display: inline-block;
  margin: 30px 0 8px;
  background: rgba(255,244,234,.08);
  border: 1px solid var(--line-inv);
  color: var(--gold);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 20px; letter-spacing: .1em;
  padding: 14px 28px; border-radius: 14px;
}

.ty-steps {
  text-align: left; margin: 36px 0 0;
  border-top: 1px solid var(--line-inv);
}
.ty-steps div {
  display: flex; gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-inv);
  font-size: 15.5px;
  color: var(--tx-inv-mute);
}
.ty-steps b {
  flex: 0 0 auto;
  font-family: var(--display); font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Nota legale sotto il pulsante: dentro la barra azioni, non fissa,
   altrimenti si sovrapporrebbe al pulsante stesso. */
.f-legal {
  text-align: center;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--tx-faint);
  margin-top: 10px;
}
.f-legal a { color: var(--tx-mute); text-decoration: underline; text-underline-offset: 2px; }
.f-legal a:hover { color: var(--rose); }