/* uniteam: richiesta.css
 *
 * Modulo a passi «Richiedi un preventivo» e la sua finestra (CONTRATTO-ux §9).
 * Tutto sta sotto .ut-richiesta (il modulo) e .ut-finestra (la finestra), con
 * specificità almeno (0,2,0): il kit Elementor impone pulsanti, titoli e campi con
 * (0,1,1), e (0,2,1) su :hover e :focus dei pulsanti (solo colore e sfondo).
 * I token --ut-* li definisce ux.css; qui si usano sempre col ripiego, così il
 * foglio non dipende dall'ordine di caricamento.
 * Regole per larghezze ridotte in fondo, in ordine di larghezza decrescente.
 *
 * REGOLA DEI COMANDI (19 set 2026): misure e posizione (margini, padding, altezza,
 * font, allineamento, flex) stanno SOLO sui selettori senza stato, con
 * specificità (0,3,1), che batte già il kit anche su :hover e :focus. I selettori
 * con :hover, :focus, :active, :disabled o [aria-disabled] cambiano solo colori,
 * contorni, ombre e decorazioni. Così nessun comando si sposta sotto il
 * puntatore o sotto il dito (il «margin: 0» di un :hover faceva saltare
 * «Avanti» a sinistra e il tocco su tablet non arrivava).
 */

.ut-richiesta,
.ut-finestra {
  --utr-ink: var(--ut-ink, #040401);
  --utr-accent: var(--ut-accent, #FF3600);
  --utr-accent-ink: var(--ut-accent-ink, #CC2E00);
  --utr-accent-soft: var(--ut-accent-soft, rgba(255, 54, 0, .08));
  --utr-navy: var(--ut-navy, #1B3B6F);
  --utr-navy-900: var(--ut-navy-900, #0A142A);
  --utr-cream: var(--ut-cream, #FFF8F6);
  --utr-cool: var(--ut-surface-cool, #F0F4FA);
  --utr-text: var(--ut-text, #616161);
  --utr-muted: var(--ut-muted, #6E6E6E);
  --utr-line: var(--ut-line, #ECECEC);
  --utr-line-cool: var(--ut-line-cool, #E4E9F0);
  --utr-ok: var(--ut-success, #2E8B57);
  --utr-err: var(--ut-error, #D93A3A);
  --utr-head: var(--ut-font-head, 'Epilogue', sans-serif);
  --utr-body: var(--ut-font-body, 'DM Sans', sans-serif);
  --utr-shadow-modal: var(--ut-shadow-modal, 0 16px 48px rgba(10, 20, 42, .25));
  --utr-anello: 0 0 0 3px rgba(27, 59, 111, .18);
  --utr-pad: 0px;
}

/* ─── Contenitore e modulo ─────────────────────────────────────────── */

.ut-richiesta-contenitore.ut-richiesta-contenitore { width: 100%; }
.ut-richiesta.ut-richiesta { width: 100%; scroll-margin-top: 24px; }

.ut-richiesta .ut-rq {
  position: relative;
  container: utrq / inline-size;
  margin: 0;
  font-family: var(--utr-body);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--utr-ink);
  text-align: left;
}
.ut-richiesta .ut-rq *,
.ut-richiesta .ut-rq *::before,
.ut-richiesta .ut-rq *::after { box-sizing: border-box; }
.ut-richiesta .ut-rq [hidden] { display: none !important; }

.ut-richiesta .ut-rq__sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ut-richiesta .ut-rq__sr:focus { outline: none; }

/* ─── Testa: occhiello, titolo, avanzamento ────────────────────────── */

.ut-richiesta .ut-rq__testa { padding: 0 var(--utr-pad); }

.ut-richiesta .ut-rq__occhiello {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-family: var(--utr-head);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--utr-accent-ink);
}
.ut-richiesta .ut-rq__occhiello::before {
  content: "";
  width: 16px; height: 16px;
  flex: none;
  background: url(../wp-content/themes/novaride/assets/images/icon-sub-heading.svg) center / contain no-repeat;
}

.ut-richiesta .ut-rq .ut-rq__titolo {
  margin: 0;
  padding: 0;
  font-family: var(--utr-head);
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--utr-ink);
}
.ut-richiesta .ut-rq .ut-rq__titolo:focus { outline: none; }

.ut-richiesta .ut-rq__sottotitolo {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--utr-text);
}

.ut-richiesta .ut-rq__passi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.ut-richiesta .ut-rq__passo { margin: 0; padding: 0; list-style: none; }
.ut-richiesta .ut-rq__passo::before,
.ut-richiesta .ut-rq__passo::marker { content: none; }

.ut-richiesta .ut-rq button.ut-rq__passo-btn {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  box-shadow: none;
  color: var(--utr-muted);
  font-family: var(--utr-body);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 500;
  text-transform: none;
  text-align: left;
  opacity: 1;
  cursor: default;
}
.ut-richiesta .ut-rq .ut-rq__passo-barra {
  display: block;
  height: 4px;
  border-radius: 100px;
  background: var(--utr-line-cool);
  transition: background-color .25s ease;
}
.ut-richiesta .ut-rq .ut-rq__passo-etichetta { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ut-richiesta .ut-rq .ut-rq__passo-num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
}
.ut-richiesta .ut-rq .ut-rq__passo-num svg { display: none; width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ut-richiesta .ut-rq .ut-rq__passo-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ut-richiesta .ut-rq .ut-rq__passo--attuale .ut-rq__passo-barra { background: var(--utr-accent); }
.ut-richiesta .ut-rq .ut-rq__passo--attuale button.ut-rq__passo-btn { color: var(--utr-ink); font-weight: 700; }
.ut-richiesta .ut-rq .ut-rq__passo--attuale .ut-rq__passo-num { background: var(--utr-ink); border-color: var(--utr-ink); color: #fff; }

.ut-richiesta .ut-rq .ut-rq__passo--fatto .ut-rq__passo-barra { background: var(--utr-navy); }
.ut-richiesta .ut-rq .ut-rq__passo--fatto button.ut-rq__passo-btn { color: var(--utr-navy); font-weight: 600; cursor: pointer; }
.ut-richiesta .ut-rq .ut-rq__passo--fatto .ut-rq__passo-num { background: var(--utr-navy); border-color: var(--utr-navy); }
.ut-richiesta .ut-rq .ut-rq__passo--fatto .ut-rq__passo-cifra { display: none; }
.ut-richiesta .ut-rq .ut-rq__passo--fatto .ut-rq__passo-num svg { display: block; }
@media (hover: hover) {
  .ut-richiesta .ut-rq .ut-rq__passo--fatto button.ut-rq__passo-btn:hover .ut-rq__passo-nome { text-decoration: underline; text-underline-offset: 3px; }
}
.ut-richiesta .ut-rq button.ut-rq__passo-btn:focus:not(:focus-visible) { outline: none; }
.ut-richiesta .ut-rq button.ut-rq__passo-btn:focus-visible { outline: 2px solid var(--utr-navy); outline-offset: 4px; }

/* ─── Corpo e pannelli ─────────────────────────────────────────────── */

.ut-richiesta .ut-rq__corpo { padding: 26px var(--utr-pad) 0; }

.ut-richiesta .ut-rq__pannello--avanti { animation: utrq-da-destra .26s cubic-bezier(.2, .8, .2, 1) both; }
.ut-richiesta .ut-rq__pannello--indietro { animation: utrq-da-sinistra .26s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes utrq-da-destra { from { opacity: 0; transform: translateX(14px); } }
@keyframes utrq-da-sinistra { from { opacity: 0; transform: translateX(-14px); } }

.ut-richiesta .ut-rq__intro {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--utr-text);
}

.ut-richiesta .ut-rq fieldset.ut-rq__gruppo {
  min-width: 0;
  margin: 0 0 26px;
  padding: 0;
  border: 0;
}
.ut-richiesta .ut-rq fieldset.ut-rq__gruppo:last-child { margin-bottom: 0; }
.ut-richiesta .ut-rq legend.ut-rq__domanda {
  float: none;
  display: block;
  width: auto;
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--utr-head);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--utr-ink);
}
.ut-richiesta .ut-rq .ut-rq__facolt {
  margin-left: 6px;
  font-family: var(--utr-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--utr-muted);
  white-space: nowrap;
}

/* ─── Schede di scelta (profilo e categoria) ───────────────────────── */

.ut-richiesta .ut-rq .ut-rq__schede {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.ut-richiesta .ut-rq label.ut-rq__scheda {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  font-weight: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ut-richiesta .ut-rq .ut-rq__scheda input,
.ut-richiesta .ut-rq .ut-rq__pillola input,
.ut-richiesta .ut-rq .ut-rq__casella input {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.ut-richiesta .ut-rq .ut-rq__scheda-corpo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  height: 100%;
  padding: 16px 16px 15px;
  border: 1px solid var(--utr-line-cool);
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px transparent;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
@media (hover: hover) {
  .ut-richiesta .ut-rq .ut-rq__scheda:hover .ut-rq__scheda-corpo { border-color: rgba(27, 59, 111, .45); }
}
.ut-richiesta .ut-rq .ut-rq__scheda input:checked + .ut-rq__scheda-corpo {
  border-color: var(--utr-navy);
  box-shadow: inset 0 0 0 1px var(--utr-navy);
  background: var(--utr-cool);
}
.ut-richiesta .ut-rq .ut-rq__scheda input:focus-visible + .ut-rq__scheda-corpo {
  outline: 2px solid var(--utr-navy);
  outline-offset: 3px;
}
.ut-richiesta .ut-rq .ut-rq__icona {
  width: 28px; height: 28px;
  fill: none;
  stroke: var(--utr-navy);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ut-richiesta .ut-rq .ut-rq__scheda-testi { display: flex; flex-direction: column; gap: 3px; padding-right: 22px; }
.ut-richiesta .ut-rq .ut-rq__scheda-titolo {
  font-family: var(--utr-head);
  font-size: 17px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--utr-ink);
}
.ut-richiesta .ut-rq .ut-rq__scheda-testo {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--utr-muted);
}

/* la spunta: il segno arancio del marchio sulla scelta fatta */
.ut-richiesta .ut-rq .ut-rq__spunta {
  position: absolute;
  top: 12px; right: 12px;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border: 1.5px solid var(--utr-line-cool);
  border-radius: 50%;
  background: #fff;
  transition: background-color .15s ease, border-color .15s ease;
}
.ut-richiesta .ut-rq .ut-rq__spunta svg {
  width: 12px; height: 12px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .15s ease, transform .2s cubic-bezier(.25, 1, .5, 1);
}
.ut-richiesta .ut-rq .ut-rq__scheda input:checked + .ut-rq__scheda-corpo .ut-rq__spunta {
  background: var(--utr-accent);
  border-color: var(--utr-accent);
}
.ut-richiesta .ut-rq .ut-rq__scheda input:checked + .ut-rq__scheda-corpo .ut-rq__spunta svg { opacity: 1; transform: none; }

/* categorie: la sagoma dell'auto sopra il nome */
.ut-richiesta .ut-rq .ut-rq__schede--auto { gap: 10px; }
.ut-richiesta .ut-rq .ut-rq__schede--auto .ut-rq__scheda-corpo {
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 16px 10px 13px;
  text-align: center;
}
.ut-richiesta .ut-rq .ut-rq__schede--auto .ut-rq__scheda-titolo {
  font-family: var(--utr-body);
  font-size: 14.5px;
  line-height: 1.25;
  font-weight: 600;
}
.ut-richiesta .ut-rq .ut-rq__schede--auto .ut-rq__spunta { top: 8px; right: 8px; width: 18px; height: 18px; border-width: 1.5px; }
.ut-richiesta .ut-rq .ut-rq__schede--auto .ut-rq__spunta svg { width: 10px; height: 10px; }
.ut-richiesta .ut-rq .ut-rq__auto {
  display: block;
  width: 64px; height: 30px;
  flex: none;
  fill: none;
  stroke: var(--utr-navy);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.ut-richiesta .ut-rq .ut-rq__auto-incerta { stroke-dasharray: 3 3.2; }
.ut-richiesta .ut-rq .ut-rq__scheda--incerta .ut-rq__auto { stroke: var(--utr-muted); }
.ut-richiesta .ut-rq .ut-rq__scheda input:checked + .ut-rq__scheda-corpo .ut-rq__auto { transform: translateX(3px); }
@media (hover: hover) {
  .ut-richiesta .ut-rq .ut-rq__scheda:hover .ut-rq__auto { transform: translateX(3px); }
}

/* ─── Pillole (budget, anticipo, tempi) ────────────────────────────── */

.ut-richiesta .ut-rq .ut-rq__pillole { display: flex; flex-wrap: wrap; gap: 8px; }
.ut-richiesta .ut-rq label.ut-rq__pillola {
  position: relative;
  display: inline-flex;
  margin: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ut-richiesta .ut-rq .ut-rq__pillola-corpo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 18px;
  border: 1px solid var(--utr-line-cool);
  border-radius: 100px;
  background: #fff;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--utr-ink);
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
@media (hover: hover) {
  .ut-richiesta .ut-rq .ut-rq__pillola:hover .ut-rq__pillola-corpo { border-color: rgba(27, 59, 111, .45); }
}
.ut-richiesta .ut-rq .ut-rq__pillola input:checked + .ut-rq__pillola-corpo {
  border-color: var(--utr-navy);
  background: var(--utr-navy);
  color: #fff;
}
.ut-richiesta .ut-rq .ut-rq__pillola input:focus-visible + .ut-rq__pillola-corpo {
  outline: 2px solid var(--utr-navy);
  outline-offset: 3px;
}

/* ─── Campi ────────────────────────────────────────────────────────── */

.ut-richiesta .ut-rq .ut-rq__campi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
}
.ut-richiesta .ut-rq .ut-rq__campo { min-width: 0; margin: 0; }
.ut-richiesta .ut-rq .ut-rq__campo--largo { grid-column: 1 / -1; }
.ut-richiesta .ut-rq label.ut-rq__etichetta {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  font-family: var(--utr-body);
  font-size: 14.5px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--utr-ink);
}
.ut-richiesta .ut-rq input.ut-rq__input,
.ut-richiesta .ut-rq textarea.ut-rq__input {
  display: block;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 16px;
  border: 1.5px solid var(--utr-line-cool);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  outline: 2px solid transparent;
  font-family: var(--utr-body);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--utr-ink);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ut-richiesta .ut-rq textarea.ut-rq__input {
  height: auto;
  min-height: 104px;
  padding: 13px 16px;
  resize: vertical;
}
.ut-richiesta .ut-rq .ut-rq__input::placeholder { color: var(--utr-muted); opacity: 1; }
@media (hover: hover) {
  .ut-richiesta .ut-rq input.ut-rq__input:hover,
  .ut-richiesta .ut-rq textarea.ut-rq__input:hover { border-color: rgba(27, 59, 111, .45); }
}
.ut-richiesta .ut-rq input.ut-rq__input:focus,
.ut-richiesta .ut-rq textarea.ut-rq__input:focus {
  border-color: var(--utr-navy);
  box-shadow: var(--utr-anello);
  outline: 2px solid transparent;
}
.ut-richiesta .ut-rq .ut-rq--errore input.ut-rq__input,
.ut-richiesta .ut-rq .ut-rq--errore textarea.ut-rq__input { border-color: var(--utr-err); }
.ut-richiesta .ut-rq .ut-rq--errore input.ut-rq__input:focus,
.ut-richiesta .ut-rq .ut-rq--errore textarea.ut-rq__input:focus { box-shadow: 0 0 0 3px rgba(217, 58, 58, .16); }

/* consenso: casella disegnata, la vera resta nel DOM per tastiera e lettori */
.ut-richiesta .ut-rq label.ut-rq__casella {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 2px 0 0;
  padding: 0;
  font-size: 14.5px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--utr-text);
  cursor: pointer;
}
.ut-richiesta .ut-rq .ut-rq__casella-segno {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px; height: 22px;
  margin-top: 1px;
  border: 1.5px solid #B7C1D0;
  border-radius: 6px;
  background: #fff;
  transition: background-color .15s ease, border-color .15s ease;
}
.ut-richiesta .ut-rq .ut-rq__casella-segno svg {
  width: 13px; height: 13px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}
@media (hover: hover) {
  .ut-richiesta .ut-rq .ut-rq__casella:hover .ut-rq__casella-segno { border-color: var(--utr-navy); }
}
.ut-richiesta .ut-rq .ut-rq__casella input:checked + .ut-rq__casella-segno { background: var(--utr-navy); border-color: var(--utr-navy); }
.ut-richiesta .ut-rq .ut-rq__casella input:checked + .ut-rq__casella-segno svg { opacity: 1; }
.ut-richiesta .ut-rq .ut-rq__casella input:focus-visible + .ut-rq__casella-segno { outline: 2px solid var(--utr-navy); outline-offset: 3px; }
.ut-richiesta .ut-rq .ut-rq--errore .ut-rq__casella-segno { border-color: var(--utr-err); }
.ut-richiesta .ut-rq .ut-rq__casella-testo a {
  color: var(--utr-navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (hover: hover) {
  .ut-richiesta .ut-rq .ut-rq__casella-testo a:hover { color: var(--utr-accent-ink); }
}

/* trappola per i bot: nel DOM, fuori dallo schermo */
.ut-richiesta .ut-rq .ut-rq__hp {
  position: absolute !important;
  left: -10000px !important;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ─── Errori e avvisi ──────────────────────────────────────────────── */

.ut-richiesta .ut-rq .ut-rq__errore {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--utr-err);
}
/* il segno è un disegno, non testo: i lettori di schermo leggono solo il messaggio */
.ut-richiesta .ut-rq .ut-rq__errore::before {
  content: "";
  flex: none;
  width: 16px; height: 16px;
  margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23D93A3A'/%3E%3Cpath d='M8 4.2v4.6' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.6' r='1.15' fill='%23fff'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.ut-richiesta .ut-rq .ut-rq__gruppo.ut-rq--errore .ut-rq__scheda-corpo { border-color: rgba(217, 58, 58, .55); }

/* l'avviso generale sta in fondo al corpo, subito sopra il pulsante principale:
 * dopo un invio fallito si legge accanto al comando appena toccato */
.ut-richiesta .ut-rq .ut-rq__avviso {
  margin: 22px 0 0;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid rgba(217, 58, 58, .32);
  background: rgba(217, 58, 58, .07);
  font-size: 15px;
  line-height: 1.45;
  color: var(--utr-ink);
}
.ut-richiesta .ut-rq .ut-rq__avviso:empty { margin: 0; padding: 0; border: 0; }
.ut-richiesta .ut-rq .ut-rq__avviso--ok { border-color: rgba(46, 139, 87, .32); background: rgba(46, 139, 87, .08); }
.ut-richiesta .ut-rq .ut-rq__avviso p { margin: 0; }
.ut-richiesta .ut-rq .ut-rq__avviso p + p { margin-top: 4px; color: var(--utr-text); }
.ut-richiesta .ut-rq .ut-rq__avviso a { color: var(--utr-navy); font-weight: 600; text-decoration: underline; }

/* ─── Piede: Indietro e Avanti ─────────────────────────────────────── */

.ut-richiesta .ut-rq__piede {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  padding: 0 var(--utr-pad);
}

/* Pulsanti del piede. Il selettore senza stato (0,3,1) porta TUTTE le misure e
 * batte il kit (0,2,1) anche su :hover e :focus; gli stati sotto cambiano solo colori. */
.ut-richiesta .ut-rq button.ut-rq__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background: transparent;
  box-shadow: none;
  color: var(--utr-ink);
  font-family: var(--utr-body);
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ut-richiesta .ut-rq button.ut-rq__btn:focus:not(:focus-visible) { outline: none; }
.ut-richiesta .ut-rq button.ut-rq__btn:focus-visible { outline: 2px solid var(--utr-navy); outline-offset: 3px; }

/* Avanti / Invia la richiesta: sempre a destra (margin-left auto), in ogni stato.
 * Testo a 19 px in grassetto: bianco su #FF3600 fa 3,6:1, sufficiente (AA) solo come testo grande */
.ut-richiesta .ut-rq button.ut-rq__btn--avanti {
  margin-left: auto;
  padding: 0 8px 0 26px;
  background: var(--utr-accent);
  color: #fff;
  font-size: 19px;
  transition: background-color .2s ease;
}
.ut-richiesta .ut-rq button.ut-rq__btn--avanti:active { background: var(--utr-accent-ink); color: #fff; }
@media (hover: hover) {
  .ut-richiesta .ut-rq button.ut-rq__btn--avanti:hover { background: var(--utr-accent-ink); color: #fff; }
}
/* invio in corso: il pulsante resta attivo per il fuoco (aria-disabled, non disabled) */
.ut-richiesta .ut-rq button.ut-rq__btn--avanti[aria-disabled="true"],
.ut-richiesta .ut-rq button.ut-rq__btn--avanti:disabled { cursor: progress; background: var(--utr-accent-ink); color: #fff; }
.ut-richiesta .ut-rq .ut-rq__freccia {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--utr-ink);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.ut-richiesta .ut-rq .ut-rq__freccia svg { width: 12px; height: 12px; fill: #fff; }
@media (hover: hover) {
  .ut-richiesta .ut-rq button.ut-rq__btn--avanti:hover .ut-rq__freccia { transform: rotate(45deg); }
}
.ut-richiesta .ut-rq.ut-rq--invio .ut-rq__freccia svg,
.ut-richiesta .ut-rq.ut-rq--inviato .ut-rq__freccia svg { display: none; }
.ut-richiesta .ut-rq.ut-rq--invio .ut-rq__freccia::after {
  content: "";
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: utrq-gira .8s linear infinite;
}
.ut-richiesta .ut-rq.ut-rq--inviato .ut-rq__freccia::after {
  content: "";
  width: 11px; height: 6px;
  margin-top: -3px;
  border: solid #fff;
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}
@keyframes utrq-gira { to { transform: rotate(360deg); } }

.ut-richiesta .ut-rq button.ut-rq__btn--indietro {
  gap: 6px;
  padding: 0 14px 0 8px;
  background: transparent;
  color: var(--utr-navy);
  font-weight: 600;
}
@media (hover: hover) {
  .ut-richiesta .ut-rq button.ut-rq__btn--indietro:hover span { text-decoration: underline; text-underline-offset: 3px; }
  /* il tondo delle larghezze ridotte (in fondo): solo il colore del bordo */
  .ut-richiesta .ut-rq button.ut-rq__btn.ut-rq__btn--indietro:hover { border-color: var(--utr-navy); }
}
.ut-richiesta .ut-rq button.ut-rq__btn--indietro[aria-disabled="true"],
.ut-richiesta .ut-rq button.ut-rq__btn--indietro:disabled { opacity: .5; cursor: default; }
.ut-richiesta .ut-rq button.ut-rq__btn--indietro[aria-disabled="true"] span { text-decoration: none; }
.ut-richiesta .ut-rq button.ut-rq__btn--indietro svg {
  width: 16px; height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── In pagina (/contattaci/) ─────────────────────────────────────── */

.ut-richiesta--pagina .ut-rq .ut-rq__titolo { font-size: 32px; }

/* ─── Finestra ─────────────────────────────────────────────────────── */

.ut-finestra {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ut-finestra[hidden] { display: none !important; }
.ut-finestra .ut-finestra__velo {
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 42, .62);
  opacity: 0;
  transition: opacity .22s ease;
}
/* Altezza FISSA (quella del passo 1, il più alto, errori compresi), non quella del
 * contenuto: la scatola è centrata, e con l'altezza del contenuto il piede saliva e
 * scendeva a ogni passo, a ogni errore e a ogni avviso (fino a 65 px), cioè
 * «Avanti» scappava dal puntatore fra un clic e l'altro. Il corpo scorre dentro. */
.ut-finestra .ut-finestra__scatola {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  height: min(816px, calc(100vh - 48px));
  height: min(816px, calc(100dvh - 48px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  border-radius: 30px;
  background: #fff;
  box-shadow: var(--utr-shadow-modal);
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition: opacity .22s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.ut-finestra .ut-finestra__scatola:focus { outline: none; }
.ut-finestra.ut-finestra--aperta .ut-finestra__velo { opacity: 1; }
.ut-finestra.ut-finestra--aperta .ut-finestra__scatola { opacity: 1; transform: none; }

.ut-finestra .ut-finestra__contenuto.ut-richiesta {
  --utr-pad: 36px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.ut-finestra .ut-richiesta .ut-rq {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.ut-finestra .ut-richiesta .ut-rq__testa { flex: none; padding-top: 30px; padding-right: 76px; }
.ut-finestra .ut-richiesta .ut-rq .ut-rq__titolo { font-size: 26px; }
.ut-finestra .ut-richiesta .ut-rq__passi { margin-top: 18px; margin-right: -40px; }
.ut-finestra .ut-richiesta .ut-rq__corpo {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-top: 24px;
  padding-bottom: 24px;
}
/* il passo riempie il corpo, così l'avviso dell'invio sta in fondo, sopra il piede */
.ut-finestra .ut-richiesta .ut-rq .ut-rq__pannello { flex: 1 0 auto; }
.ut-finestra .ut-richiesta .ut-rq .ut-rq__avviso { flex: none; }
.ut-finestra .ut-richiesta .ut-rq__piede {
  flex: none;
  margin: 0;
  padding-top: 16px;
  padding-bottom: 20px;
  border-top: 1px solid var(--utr-line);
  background: #fff;
}
.ut-finestra .ut-richiesta .ut-rq .ut-rq__schede--profilo .ut-rq__scheda-corpo { padding: 14px 14px 13px; gap: 8px; }
.ut-finestra .ut-richiesta .ut-rq fieldset.ut-rq__gruppo { margin-bottom: 22px; }
.ut-finestra .ut-richiesta .ut-rq fieldset.ut-rq__gruppo:last-child { margin-bottom: 0; }

/* Passo 3: il messaggio prende l'altezza che resta nel corpo (a 1440×900 restavano
 * circa 200 px bianchi sopra il piede fermo) e la cede, fino ai suoi 104 px, agli
 * errori dei campi e all'avviso dell'invio. La scatola non cambia altezza: il piede
 * resta fermo e il consenso, ancorato in fondo, resta dov'era; oltre i 104 px il corpo
 * scorre come prima. Righe della griglia: nome e cognome, email e telefono, messaggio
 * (1fr), consenso. Solo nella finestra centrata (da 641 px), alta al massimo 816 px:
 * lì il messaggio arriva al più a 285 px. A tutto schermo (sotto i 640 px) la finestra
 * può essere alta quanto un tablet in verticale e il messaggio diventerebbe enorme: resta
 * com'era. Un tetto con minmax(auto, 320px) non si può usare: con l'altezza ancora da
 * calcolare la riga prende subito i 320 px anche dove non c'è posto. */
@media (min-width: 641px) {
  .ut-finestra .ut-richiesta .ut-rq .ut-rq__pannello[data-passo="3"] { display: flex; flex-direction: column; }
  .ut-finestra .ut-richiesta .ut-rq .ut-rq__pannello[data-passo="3"] .ut-rq__campi {
    flex: 1 0 auto;
    grid-template-rows: auto auto 1fr auto;
  }
  .ut-finestra .ut-richiesta .ut-rq .ut-rq__campo[data-campo="messaggio"] { display: flex; flex-direction: column; }
  .ut-finestra .ut-richiesta .ut-rq .ut-rq__campo[data-campo="messaggio"] textarea.ut-rq__input { flex: 1 1 auto; }
}

.ut-finestra .ut-finestra__scatola button.ut-finestra__chiudi {
  position: absolute;
  top: 22px; right: 22px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--utr-cool);
  box-shadow: none;
  color: var(--utr-navy);
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transition: background-color .15s ease;
}
.ut-finestra .ut-finestra__scatola button.ut-finestra__chiudi:active { background: #E1E8F2; color: var(--utr-navy); }
@media (hover: hover) {
  .ut-finestra .ut-finestra__scatola button.ut-finestra__chiudi:hover { background: #E1E8F2; color: var(--utr-navy); }
}
.ut-finestra .ut-finestra__scatola button.ut-finestra__chiudi:focus:not(:focus-visible) { outline: none; }
.ut-finestra .ut-finestra__scatola button.ut-finestra__chiudi:focus-visible { outline: 2px solid var(--utr-navy); outline-offset: 3px; }
.ut-finestra button.ut-finestra__chiudi svg {
  width: 16px; height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* a finestra aperta: pagina ferma, WhatsApp e cursore magnetico via */
html.ut-modale-aperta,
html.ut-modale-aperta body { overflow: hidden !important; }
html.ut-modale-aperta .wa__btn_popup,
html.ut-modale-aperta .wa__popup_chat_box,
html.ut-modale-aperta #magic-cursor { display: none !important; }

/* modulo in pagina: il pulsante fisso di WhatsApp si ritira mentre coprirebbe
 * «Avanti / Invia la richiesta» (la classe la mette richiesta.js misurando i due
 * rettangoli; visibility e non display, così il rettangolo resta misurabile) */
html.ut-rq-wa-via .wa__btn_popup {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .15s ease, visibility 0s linear .15s !important;
}

/* ─── Larghezza del modulo (container query), dal più largo ───────── */

@container utrq (min-width: 600px) {
  .ut-richiesta .ut-rq .ut-rq__auto { width: 76px; height: 36px; }
}

@container utrq (max-width: 540px) {
  .ut-richiesta .ut-rq .ut-rq__schede--profilo { grid-template-columns: 1fr; gap: 10px; }
  .ut-richiesta .ut-rq .ut-rq__schede--profilo .ut-rq__scheda-corpo {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
  }
  .ut-richiesta .ut-rq .ut-rq__schede--profilo .ut-rq__spunta { top: 50%; margin-top: -11px; right: 14px; }
  .ut-richiesta .ut-rq .ut-rq__schede--profilo .ut-rq__scheda-testi { padding-right: 30px; }
  .ut-richiesta .ut-rq .ut-rq__campi { grid-template-columns: 1fr; gap: 16px; }
}

/* Sotto i 400 px «Avanti» prende la riga. Prima al passo 1 era largo quanto il modulo e
 * dal passo 2 cedeva la sinistra a «Indietro»: un secondo tocco rapido sul lato sinistro
 * di «Avanti» cadeva su «Indietro». Ora «Indietro» è un tondo col segno (il nome resta
 * per i lettori di schermo) e il suo posto c'è in tutti i passi, invisibile al passo 1
 * (visibility, non display): «Avanti» occupa la stessa area dal primo all'ultimo passo,
 * e «Invia la richiesta» ci sta anche a 360 (prima sbordava di 32 px). Stesse regole
 * per la finestra a tutto schermo, sotto i 640 px (in fondo). */
@container utrq (max-width: 400px) {
  .ut-richiesta .ut-rq .ut-rq__schede--auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ut-richiesta .ut-rq .ut-rq__schede--auto .ut-rq__scheda--incerta { grid-column: 1 / -1; }
  .ut-richiesta .ut-rq .ut-rq__schede--auto .ut-rq__scheda--incerta .ut-rq__scheda-corpo { flex-direction: row; justify-content: center; gap: 12px; padding: 12px 10px; }
  .ut-richiesta .ut-rq .ut-rq__passo-num { display: none; }
  .ut-richiesta .ut-rq .ut-rq__passo-nome { font-size: 13px; white-space: normal; overflow: visible; }
  .ut-richiesta .ut-rq .ut-rq__pillola-corpo { padding: 9px 15px; font-size: 14.5px; }
  .ut-richiesta .ut-rq button.ut-rq__btn--avanti { flex: 1 1 auto; justify-content: space-between; }
  .ut-richiesta .ut-rq button.ut-rq__btn--indietro {
    flex: none;
    width: 52px;
    gap: 0;
    padding: 0;
    border: 1.5px solid var(--utr-line-cool);
    border-radius: 50%;
    background: #fff;
  }
  .ut-richiesta .ut-rq button.ut-rq__btn--indietro[hidden] { display: inline-flex !important; visibility: hidden; }
  .ut-richiesta .ut-rq button.ut-rq__btn--indietro svg { width: 18px; height: 18px; }
  .ut-richiesta .ut-rq button.ut-rq__btn--indietro span {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* ─── Larghezza dello schermo, dal più largo ──────────────────────── */

@media (max-width: 767px) {
  .ut-richiesta--pagina .ut-rq .ut-rq__titolo { font-size: 26px; }
}

@media (max-width: 640px) {
  .ut-finestra { padding: 0; align-items: stretch; }
  .ut-finestra .ut-finestra__scatola {
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
    transform: translateY(28px);
  }
  .ut-finestra .ut-finestra__contenuto.ut-richiesta { --utr-pad: 20px; }
  .ut-finestra .ut-richiesta .ut-rq__testa { padding-top: 18px; padding-right: 72px; }
  .ut-finestra .ut-richiesta .ut-rq .ut-rq__titolo { font-size: 22px; }
  .ut-finestra .ut-richiesta .ut-rq__occhiello { font-size: 14px; margin-bottom: 6px; }
  .ut-finestra .ut-richiesta .ut-rq__passi { margin-top: 16px; margin-right: -52px; }
  .ut-finestra .ut-richiesta .ut-rq__corpo { padding-top: 20px; padding-bottom: 20px; }
  .ut-finestra .ut-richiesta .ut-rq__piede {
    padding-top: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 24px rgba(10, 20, 42, .06);
  }
  /* come sotto i 400 px (container query): «Avanti» nella stessa area in tutti i passi */
  .ut-finestra .ut-richiesta .ut-rq button.ut-rq__btn--avanti { flex: 1 1 auto; justify-content: space-between; }
  .ut-finestra .ut-richiesta .ut-rq button.ut-rq__btn--indietro {
    flex: none;
    width: 52px;
    gap: 0;
    padding: 0;
    border: 1.5px solid var(--utr-line-cool);
    border-radius: 50%;
    background: #fff;
  }
  .ut-finestra .ut-richiesta .ut-rq button.ut-rq__btn--indietro[hidden] { display: inline-flex !important; visibility: hidden; }
  .ut-finestra .ut-richiesta .ut-rq button.ut-rq__btn--indietro svg { width: 18px; height: 18px; }
  .ut-finestra .ut-richiesta .ut-rq button.ut-rq__btn--indietro span {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .ut-finestra .ut-finestra__scatola button.ut-finestra__chiudi { top: 12px; right: 12px; }
}

/* ─── Schermo basso (telefono in orizzontale), dopo le larghezze ─────
 * Testa su una riga (titolo, barre dei passi, chiudi), niente occhiello né nomi
 * dei passi (restano nell'aria-label dei pulsanti e nei titoli nascosti dei
 * pannelli), piede più basso: il corpo del modulo resta alto almeno 200 px
 * anche a 568×320. */
@media (max-height: 480px) {
  .ut-finestra .ut-richiesta .ut-rq__testa {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 52px;
    padding-top: 6px;
    padding-right: 64px;
  }
  .ut-finestra .ut-richiesta .ut-rq__occhiello { display: none; }
  .ut-finestra .ut-richiesta .ut-rq .ut-rq__titolo { flex: none; font-size: 19px; white-space: nowrap; }
  .ut-finestra .ut-richiesta .ut-rq__passi { flex: 1 1 auto; min-width: 0; margin: 0; gap: 6px; }
  .ut-finestra .ut-richiesta .ut-rq button.ut-rq__passo-btn { padding: 10px 0; }
  .ut-finestra .ut-richiesta .ut-rq .ut-rq__passo-etichetta { display: none; }
  .ut-finestra .ut-richiesta .ut-rq__corpo { padding-top: 14px; padding-bottom: 14px; }
  .ut-finestra .ut-richiesta .ut-rq__piede {
    padding-top: 8px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .ut-finestra .ut-richiesta .ut-rq button.ut-rq__btn { min-height: 44px; }
  .ut-finestra .ut-richiesta .ut-rq .ut-rq__freccia { width: 32px; height: 32px; }
  .ut-finestra .ut-finestra__scatola button.ut-finestra__chiudi { top: 10px; right: 12px; width: 40px; height: 40px; }
}
@media (max-height: 480px) and (min-width: 641px) {
  .ut-finestra { padding: 8px 24px; }
  .ut-finestra .ut-finestra__scatola {
    height: calc(100vh - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 16px;
  }
}
/* finestra a tutto schermo e bassa (568×320, 640×360): il tondo di «Indietro» alto
 * quanto «Avanti» */
@media (max-height: 480px) and (max-width: 640px) {
  .ut-finestra .ut-richiesta .ut-rq button.ut-rq__btn--indietro { width: 44px; }
}

/* Telefoni da 320 px (piede largo fino a 300 px: in pagina è la larghezza del modulo,
 * in finestra il modulo comprende i 20 px di margine per lato, quindi 340):
 * «Invia la richiesta» a 19 px chiede 235 px e accanto al tondo ne restavano 216.
 * Stesso corpo del testo (grande, AA sull'arancio), meno aria intorno: ne servono 215,
 * ce ne sono 222. Dopo la finestra sotto i 640 px e lo schermo basso, che toccano le
 * stesse proprietà. */
@container utrq (max-width: 300px) {
  .ut-richiesta--pagina .ut-rq .ut-rq__piede { gap: 10px; }
  .ut-richiesta--pagina .ut-rq .ut-rq__piede button.ut-rq__btn--indietro { width: 48px; min-height: 48px; }
  .ut-richiesta--pagina .ut-rq .ut-rq__piede button.ut-rq__btn--avanti { gap: 8px; padding: 0 6px 0 16px; }
  .ut-richiesta--pagina .ut-rq .ut-rq__piede .ut-rq__freccia { width: 34px; height: 34px; }
}
@container utrq (max-width: 340px) {
  .ut-finestra .ut-richiesta .ut-rq .ut-rq__piede { gap: 10px; }
  .ut-finestra .ut-richiesta .ut-rq .ut-rq__piede button.ut-rq__btn--indietro { width: 48px; min-height: 48px; }
  .ut-finestra .ut-richiesta .ut-rq .ut-rq__piede button.ut-rq__btn--avanti { gap: 8px; padding: 0 6px 0 16px; }
  .ut-finestra .ut-richiesta .ut-rq .ut-rq__piede .ut-rq__freccia { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .ut-richiesta .ut-rq *,
  .ut-finestra .ut-finestra__velo,
  .ut-finestra .ut-finestra__scatola { transition: none !important; animation: none !important; }
  .ut-finestra .ut-finestra__scatola { transform: none !important; }
  .ut-richiesta .ut-rq.ut-rq--invio .ut-rq__freccia::after { animation: none; border-color: #fff; }
}