/*
 * FILE: richiesta-spedizione.css
 * Grafica delle pagine pubbliche: modulo /richiedi-spedizione e registrazione
 * /register. Era dentro richiesta_spedizione.html; sta qui perche' le due pagine
 * devono essere identiche e una copia in due posti si sarebbe staccata.
 */
/* ==========================================================================
   Pagina pubblica: non eredita il CSS del gestionale, deve reggersi da sola.
   Tutte le misure sono relative e le colonne collassano con il contenuto,
   senza breakpoint scritti a mano dove basta il grid auto-fit.
   ========================================================================== */
:root {
    --verde: #1A6B3C;
    --verde-chiaro: #25994F;
    --rosso: #D10001;
    --arancio: #ffa726;
    --sfondo: #121212;
    --pannello: #1c1c1c;
    --campo: #232323;
    --bordo: #3a3a3a;
    --testo: #f1f1f1;
    --testo-tenue: #a5a5a5;
    /* Veli: sul fondo scuro sono bianchi trasparenti, sul chiaro diventano neri.
       Senza variabile, in chiaro sparirebbero e le righe perderebbero i bordi. */
    --velo-lieve: rgba(255, 255, 255, .02);
    --velo: rgba(255, 255, 255, .05);
    --velo-forte: rgba(255, 255, 255, .1);
    --bordo-tenue: #666;
    --raggio: 2px;
}

/* Versione chiara: cambiano solo i colori, non una regola di impaginazione.
   Verde, rosso e arancio restano gli stessi, si leggono su tutti e due i fondi. */
[data-tema="chiaro"] {
    --sfondo: #f4f4f4;
    --pannello: #ffffff;
    --campo: #e6e6e6;
    --bordo: #d6d6d6;
    --testo: #1a1a1a;
    --testo-tenue: #6b6b6b;
    --velo-lieve: rgba(0, 0, 0, .02);
    --velo: rgba(0, 0, 0, .04);
    --velo-forte: rgba(0, 0, 0, .07);
    --bordo-tenue: #c2c2c2;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--sfondo);
    color: var(--testo);
    font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    /* iPhone con notch */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
/* 48rem e non 62: piu' largo di cosi' i campi si stiravano e fra una colonna e
   l'altra restava uno spazio vuoto sproporzionato */
.contenitore { width: min(100% - 2rem, 48rem); margin-inline: auto; padding-block: clamp(1.25rem, 4vw, 2.5rem); }

/* Scelta lingua: stessi pallini dell'area cliente (area-cliente.css), qui
   ripetuti perche' questa pagina non carica quel foglio di stile. Fuori dal
   riquadro, in alto a destra. */
.barra-alto { display: flex; align-items: center; justify-content: space-between;
              margin-bottom: .5rem; }
.lingue { display: flex; justify-content: flex-end; gap: 2px; }
/* Interruttore del fondo: si vede l'icona di dove si va, non di dove si sta */
.tema-btn {
    background: none; border: none; cursor: pointer; padding: 3px;
    display: inline-flex; align-items: center;
    /* i pulsanti non ereditano il carattere: senza questa riga l'etichetta
       usciva nel font di sistema invece che nel Montserrat della pagina */
    font: inherit;
    transition: opacity .2s;
}
.tema-btn:hover { opacity: .75; }
.tema-btn svg { width: 22px; height: 22px; display: block; }
/* Il sole in arancio: in grigio tenue, sul fondo scuro, non si vedeva.
   La luna resta nel colore del testo, che sul chiaro e' gia' ben staccata. */
.tema-btn .sole { color: var(--arancio); }
/* Nera piena: in sola linea, e nel grigio del testo, si perdeva sul bianco */
.tema-btn .luna { color: #000; fill: currentColor; }
/* Una parola per dire dove si va: la sola icona lascia il dubbio, una frasetta
   intera ruba spazio ai pallini delle lingue. Il pulsante tiene comunque
   l'aria-label completa, che e' quella che sente un lettore di schermo. */
/* Bianca sul nero e nera sul bianco, come l'icona accanto: nel grigio tenue
   si leggeva a fatica */
.tema-btn .etichetta { font-size: .75rem; color: #fff; white-space: nowrap; }
[data-tema="chiaro"] .tema-btn .etichetta { color: #000; }
.tema-btn .verso-chiaro { display: none; }
[data-tema="chiaro"] .tema-btn .verso-scuro { display: none; }
[data-tema="chiaro"] .tema-btn .verso-chiaro { display: inline; }
.tema-btn .luna { display: none; }
[data-tema="chiaro"] .tema-btn .sole { display: none; }
[data-tema="chiaro"] .tema-btn .luna { display: block; }
.lang-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 3px; text-decoration: none; opacity: .5; transition: opacity .2s, filter .2s;
}
.lang-btn img {
    width: 22px; height: auto; display: block; border-radius: 50%;
    -webkit-mask-image: radial-gradient(circle, black 50%, transparent 100%);
    mask-image: radial-gradient(circle, black 50%, transparent 100%);
}
.lang-btn:hover { opacity: 1; }
.lang-btn.active { opacity: 1; filter: brightness(1.3); }

/* Intestazione */
.testata { text-align: center; margin-bottom: clamp(1.25rem, 4vw, 2rem); }
.marchio { margin: 0 0 .35rem; line-height: 0; }
/* Altezza in clamp e non larghezza: l'immagine e' verticale e su schermo
   stretto una percentuale la farebbe diventare altissima */
/* logo_4 e' orizzontale (248x93) e su fondo chiaro: si vincola la larghezza,
   non l'altezza come serviva al 3 che era verticale.
   La maschera sfuma i bordi nel fondo scuro: il file e' un JPG e senza di
   essa resta un rettangolo chiaro netto. */
.marchio img {
    width: clamp(9rem, 40vw, 13rem);
    height: auto;
    /* Due sfumature incrociate invece di una ellittica: i bordi si dissolvono
       sui quattro lati ma la forma resta rettangolare */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
                        linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
                linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
    mask-composite: intersect;
}
.marchio a { display: inline-block; line-height: 0; cursor: pointer; }

/* Nastro del preventivo di origine */
.nastro {
    background: rgba(37, 153, 79, .12);
    border: 1px solid var(--verde-chiaro);
    color: var(--verde-chiaro);
    border-radius: var(--raggio);
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: .9rem;
    text-align: center;
}

/* Sezioni */
.sezione {
    background: var(--pannello);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: clamp(1rem, 3.5vw, 1.5rem);
    margin-bottom: 1rem;
}
.sezione h2 {
    font-size: .78rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--verde-chiaro);
    margin: 0 0 1rem;
    font-weight: 600;
}

/* Campi: il grid si adatta da solo, una colonna su schermo stretto */
.griglia { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.griglia .larga { grid-column: 1 / -1; }
/* Nome+Societa su una riga, Telefono+email sulla successiva. Sempre due per
   riga: lasciandoli alla griglia auto-fit finivano tutti e quattro in fila. */
.coppie { grid-column: 1 / -1; display: grid; gap: .85rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .coppie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.campo { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
/* Serve l'!important: [hidden] nasconde solo gli elementi senza display
   esplicito, e .campo qui sopra ne ha uno. Senza questa riga i campi del ramo
   preventivo restavano tutti a video. */
[hidden] { display: none !important; }
label { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--testo-tenue); }
/* email si scrive minuscola: il maiuscolo delle altre etichette la sfigurerebbe */
label.minuscola { text-transform: lowercase; }
label .obbligatorio { color: var(--rosso); }
input, textarea, select {
    width: 100%;
    background: var(--campo);
    /* Niente bordo a riposo: distingue il fondo. Resta trasparente e non
       assente, cosi' quando il focus o un errore lo colorano il campo non
       cambia dimensione. */
    border: 1px solid transparent;
    border-radius: var(--raggio);
    color: var(--testo);
    padding: .7rem .8rem;
    font: inherit;
    /* 16px sotto i 480px: sotto questa misura iOS ingrandisce la pagina al focus */
    font-size: max(1rem, 16px);
    min-height: 2.9rem;
}
/* Altezza fissa, non minima: lasciata al browser, select e campi di testo la
   calcolano in modo diverso (le select ignorano l'interlinea) e in fila si
   vedeva lo scalino. Con box-sizing border-box sono identici ovunque. */
input:not([type="radio"]):not([type="checkbox"]), select {
    height: 2.9rem;
    line-height: normal;
}
textarea { line-height: 1.5; }
/* Il pulsante sta in riga con username e password: segue la loro misura, non
   quella degli altri pulsanti della pagina */
.accesso .pulsante { height: 2.9rem; min-height: 0; padding-block: 0; }
textarea { min-height: 5.5rem; resize: vertical; }
/* I pallini non sono campi di testo: senza questa eccezione prendevano
   width 100% e min-height 2.9rem dalla regola qui sopra, diventando enormi e
   spingendo servizio e prezzo fuori dal riquadro. */
input[type="radio"], input[type="checkbox"] {
    width: auto; min-height: 0; padding: 0; flex: 0 0 auto;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--verde-chiaro); }
input.errore, textarea.errore { border-color: var(--rosso); }
.errore-testo { color: var(--arancio); }


/* Pulsanti */
.pulsante {
    appearance: none; border: 1px solid transparent; border-radius: var(--raggio);
    padding: .8rem 1.4rem; font: inherit; font-weight: 600; cursor: pointer;
    min-height: 2.9rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
/* L'icona non si stringe e l'etichetta non va a capo sotto di lei */
.pulsante svg { flex-shrink: 0; }
#intro-invia-codice, #prev-codice { white-space: nowrap; }
.pulsante-verde { background: var(--verde); border-color: var(--verde); color: #fff; }
.pulsante-verde:hover { background: var(--verde-chiaro); border-color: var(--verde-chiaro); }
.pulsante-verde:disabled { opacity: .6; cursor: default; }
/* Rosso identico al pulsante Spedisci del form preventivo */
.pulsante-rosso { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.pulsante-rosso:hover { background: #b00001; border-color: #b00001; }
.pulsante-rosso:disabled { opacity: .6; cursor: default; }
.pulsante-vuoto { background: transparent; border-color: var(--bordo); color: var(--testo-tenue); }
/* La freccia sta appena piu' in alto del testo e un filo piu' grande:
   allineata alla base sembrava caduta */
.freccia-indietro { font-size: 1.05em; line-height: 1; margin-right: -.15rem; }
/* Primo passo: le due domande d'ingresso, a pulsanti invece che a radio
   perche' il modulo si compila quasi sempre dal telefono.
   In fila e larghi quanto il loro contenuto, non in colonne uguali: con la
   griglia "Terza parte" occupava lo stesso di voci molto piu' lunghe e il
   testo andava a capo dove non serviva. Su telefono ognuno prende tutta la
   riga, che sotto i 30rem e' l'unico modo per restare leggibili. */
.scelte { display: flex; flex-wrap: wrap; gap: .6rem; }
/* I pulsanti si dividono tutta la riga: cosi' il blocco comincia e finisce
   dove cominciano e finiscono i campi sotto, con gli stessi margini */
.scelta { flex: 1 1 100%; }
@media (min-width: 30rem) { .scelta { flex: 1 1 0; } }
.scelta {
    background: transparent; border: 1px solid var(--bordo); border-radius: 2px;
    color: var(--testo); padding: .85rem 1.5rem; font: inherit; cursor: pointer;
    text-align: left; line-height: 1.3; min-height: 2.9rem;
}
.scelta:hover { border-color: var(--verde-chiaro); }
.scelta[aria-pressed="true"] { border-color: var(--verde-chiaro); background: rgba(37,153,79,.12); }
.scelta small { display: block; color: var(--testo-tenue); font-size: .8rem; margin-top: .15rem; }
.domanda { margin: 0 0 .6rem; color: var(--testo-tenue); }
.passo-2 { margin-top: 1.4rem; }

/* Il primo passo e' una schermata a se': tutto centrato, comprese le scelte e
   il pulsante sotto. Le domande hanno lo stesso font delle scelte, invece del
   maiuscoletto verde usato per i titoli di sezione: qui sono domande, non
   etichette di un blocco di campi. */
#intro { text-align: center; }
#intro h2, #intro .domanda {
    font-size: inherit;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    margin: 0 0 .9rem;
}
#intro h2 { color: var(--verde-chiaro); }
#intro .domanda { color: var(--testo-tenue); }
#intro .scelta { text-align: center; }
#intro .campo label { text-align: center; }
#intro .azioni { justify-content: center; }
#intro .azioni .pulsante { flex: 0 1 14rem; }

/* Box tariffa: stessa grafica dei servizi nell'area cliente
   (.prev-service-box in templates/cliente/dettaglio_preventivo.html) - riga
   compatta, bordo sinistro del colore del servizio, prezzo a destra. */
/* Quello che ha inserito, sopra le tariffe: senza, arrivato ai prezzi non
   ha piu' sotto gli occhi da dove a dove e con che peso li ha chiesti */
.prev-riepilogo {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    margin-bottom: 1rem; font-size: .82rem; color: var(--testo-tenue);
}
.prev-riepilogo .riga {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
    gap: .3rem .6rem;
}
#intro-riepilogo { cursor: pointer; }
.prev-riepilogo strong { color: var(--testo); font-weight: 500; }
.prev-riepilogo .freccia { color: var(--verde-chiaro); }
.prev-riepilogo .servizio-scelto { color: var(--testo); font-weight: 600; }
.prev-riepilogo .prezzo-scelto { color: var(--verde-chiaro); font-weight: 600; font-size: 1rem; }
/* La barretta verticale del colore del servizio, come nei box delle tariffe */
.prev-riepilogo .servizio-riga {
    border-left: 9px solid var(--bordo-tenue); padding: .25rem .7rem; margin-top: .15rem;
    background: var(--velo);
}

.prev-servizi { display: flex; flex-direction: column; gap: 4px; }
.prev-servizio {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    border-left: 9px solid var(--bordo-tenue); padding: 10px 12px; min-height: 30px;
    background: var(--velo); opacity: .85; transition: all .2s ease;
}
.prev-servizio:hover { background: var(--velo-forte); opacity: 1; }
.prev-servizio { cursor: pointer; }
.prev-servizio input[type="radio"] { margin: 0 .4rem 0 0; accent-color: var(--verde-chiaro); }
.prev-servizio-testo { flex: 1 1 auto; min-width: 0; }
.prev-servizio.scelto { opacity: 1; background: rgba(37, 153, 79, .14); }
.prev-servizio-nome { font-size: 13px; color: var(--testo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prev-servizio-peso { font-size: 11px; color: var(--testo-tenue); }
.prev-servizio-prezzo { font-size: 15px; font-weight: 600; color: var(--testo); white-space: nowrap; }
.nota-iva { margin: .7rem 0 0; font-size: .78rem; color: var(--testo-tenue); text-align: center; }
/* Titoli delle schermate del preventivo al centro, come nel primo passo */
#prev-2 h2, #prev-3 h2, #prev-1 .domanda { text-align: center; }
/* Peso, imballaggio e le tre misure su una riga sola da laptop in su:
   con auto-fit a 13rem si spezzavano in due righe sbilanciate */
@media (min-width: 60rem) {
    /* Tre sopra (tipologia, imballaggio, peso) e tre sotto (le misure):
       sei in fila su una riga sola diventavano strettissimi */
    #prev-2 .griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #prev-2 .griglia .larga { grid-column: 1 / -1; }
}
.aiuto { color: var(--testo-tenue); font-size: .75rem; }
/* Username, password e pulsante in riga; su telefono uno sotto l'altro */
.accesso { display: grid; gap: .5rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .accesso { grid-template-columns: 1fr 1fr auto; } }
.accesso .pulsante { min-height: 2.9rem; }
/* Colli del preventivo: la testata compare solo quando ce n'e' piu' d'uno,
   altrimenti su una spedizione normale sarebbe un'intestazione inutile */
.prev-collo + .prev-collo { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--bordo); }
.prev-collo-testata { display: flex; align-items: center; justify-content: space-between;
                      margin-bottom: .6rem; font-size: .78rem; color: var(--testo-tenue);
                      text-transform: uppercase; letter-spacing: .05em; }
.collegato { color: var(--verde-chiaro); }
/* La gomma per sganciare l'account e ripulire quello che aveva riempito */
.gomma {
    background: none; border: none; color: var(--testo-tenue); cursor: pointer;
    font: inherit; font-size: .75rem; text-decoration: underline; padding: 0 0 0 .5rem;
}
.gomma:hover { color: var(--rosso); }
/* Le tre uscite del preventivo: una sotto l'altra, non affiancate, perche' le
   etichette sono lunghe e schiacciate diventano illeggibili */
/* Uno sotto l'altro perche' le etichette sono lunghe e in fila non ci stanno,
   ma larghi quanto basta: a tutta cassa sembravano lastroni, diversi da quelli
   di ogni altra schermata. La misura minima li tiene allineati fra loro. */
.azioni-colonna { flex-direction: column; align-items: center; }
/* Due classi nel selettore, non una: .azioni .pulsante piu' sotto dice
   flex: 1 1 12rem e, in una colonna, quel grow si prende l'altezza. Sotto i
   34rem i quattro pulsanti diventavano alti 192px l'uno. */
.azioni.azioni-colonna .pulsante { flex: 0 0 auto; width: auto; min-width: 16rem; }

/* nazione scritta a mano che non e' in elenco */
.non-valido { border-color: var(--rosso) !important; }
.pulsante-vuoto:hover { border-color: var(--verde-chiaro); color: var(--verde-chiaro); }
.pulsante-togli {
    background: transparent; border: none; color: var(--rosso);
    /* font: inherit prima della misura, o la riscriverebbe: i pulsanti non
       ereditano il carattere e questo restava in Arial */
    font: inherit;
    cursor: pointer; font-size: 1.35rem; line-height: 1; padding: 0 .35rem; min-height: auto;
}
/* Centrati, non a destra: sono le due uscite del modulo e su schermo stretto
   stavano appiccicati al bordo */
.azioni { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.25rem; }
.azioni .pulsante { flex: 1 1 12rem; }
@media (min-width: 34rem) { .azioni .pulsante { flex: 0 0 auto; } }

/* Esito */
.esito {
    display: none; border-radius: var(--raggio); padding: .9rem 1rem;
    margin-bottom: 1rem; font-size: .92rem; text-align: center;
}
.esito.avviso { display: block; background: rgba(255,167,38,.14); border: 1px solid var(--arancio); color: var(--arancio); }
.esito.errore { display: block; background: rgba(209,0,1,.14); border: 1px solid var(--rosso); color: var(--rosso); }

/* Conferma finale */
.conferma { display: none; text-align: center; padding: clamp(2rem, 8vw, 3.5rem) 1rem; }
.conferma .segno {
    width: 4.5rem; height: 4.5rem; border-radius: var(--raggio); margin: 0 auto 1.25rem;
    background: rgba(37,153,79,.15); border: 2px solid var(--verde-chiaro); color: var(--verde-chiaro);
    display: flex; align-items: center; justify-content: center; font-size: 2.2rem;
}
.conferma h2 { margin: 0 0 .5rem; font-size: clamp(1.2rem, 4.5vw, 1.6rem); }
.conferma p { color: var(--testo-tenue); margin: .35rem 0; }

.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.piede { text-align: center; color: var(--testo-tenue); font-size: .82rem; margin-top: 1.5rem; line-height: 1.7; }
.piede a { color: var(--verde-chiaro); text-decoration: none; }

@media (prefers-reduced-motion: no-preference) {
    .sezione { transition: border-color .2s ease; }
}

/* Preventivo veloce: le icone del tipo di collo, come nella dashboard cliente
   (cliente-dashboard.css): sempre affiancate in una riga, piu' piccole su
   telefono; buste gialline, scatola e pedana color cartone. */
.tipi { display: flex; gap: .4rem; margin-bottom: 1.1rem; }
.tipo {
    flex: 1 1 0; min-width: 0;
    background: var(--velo-lieve); border: 1px solid var(--bordo); border-radius: var(--raggio);
    color: var(--testo-tenue); font: inherit; cursor: pointer; padding: .7rem .3rem;
    display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; line-height: 1.15;
}
.tipo svg { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tipo[data-imballaggio="3"] svg, .tipo[data-imballaggio="6"] svg { fill: #A0703C; stroke: #e6e6e6; }
.tipo[data-imballaggio="2"] svg { fill: #EED68A; stroke: #e6e6e6; }
.tipo span { font-size: .82rem; color: var(--testo); }
.tipo small { display: block; font-size: .72rem; color: inherit; }
.tipo:hover { border-color: var(--verde-chiaro); }
.tipo[aria-pressed="true"] { border-color: var(--verde-chiaro); background: rgba(37,153,79,.12); color: var(--verde-chiaro); }
.tipo[aria-pressed="true"] span { color: var(--verde-chiaro); font-weight: 600; }
/* scelto un tipo, gli altri si attenuano */
.tipi:has(.tipo[aria-pressed="true"]) .tipo:not([aria-pressed="true"]) { opacity: .65; }
@media (max-width: 34rem) {
    .tipi { gap: 3px; }
    .tipo { padding: .45rem 1px; gap: .2rem; }
    .tipo svg { width: 26px; height: 26px; }
    .tipo span { font-size: 11px; }
    .tipo small { font-size: 10px; white-space: nowrap; }
    /* Scatola e Pedana hanno una parola sola: lo spazio va alle altre tre */
    .tipo:nth-child(-n+3) { flex-grow: 1.15; }
    .tipo:nth-child(n+4) { flex-grow: .8; }
}
.link-accesso { text-align: center; margin: .9rem 0 0; font-size: .88rem; }
.link-accesso a { color: var(--verde-chiaro); text-decoration: none; }

/* togliere un collo si fa con il meno sotto, non con quello rosso di riga */
#prev-colli .pulsante-togli { display: none !important; }
/* Piu' e meno al posto di "Aggiungi collo": solo il segno, verde e rosso,
   come la barra dei colli del form cliente (custom-cliente-form-shared.css) */
/* l'ultima misura con piu' e meno a destra */
.con-tasti { display: flex; align-items: center; gap: .15rem; }
.con-tasti input { flex: 1 1 auto; min-width: 0; }
.tasto-collo {
    background: none; border: none; padding: .25rem .4rem; cursor: pointer; line-height: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.tasto-collo svg { width: 1.35rem; height: 1.35rem; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; fill: none; }
#prev-aggiungi-collo { color: #41a962; }
#prev-togli-ultimo { color: #DC0000; }
.tasto-collo:hover { opacity: .75; }
.tasto-collo:disabled { opacity: .3; cursor: default; }
/* Titolo del preventivo veloce come le domande della prima schermata: niente maiuscoletto */
/* Anteprima della scelta fatta con le icone, al centro sopra i colli */
.anteprima-tipo { margin: 1.1rem 0 0; font-size: 1rem; }
/* sotto i campi di partenza e arrivo non serve un secondo riassunto: c'e' l'anteprima */
#prev_mitt_riassunto, #prev_dest_riassunto { display: none; }
/* Colli del preventivo veloce: tipologia e imballaggio li decide l'icona, a
   video restano peso e tre misure, su una riga su schermo largo */
/* Peso e dimensioni su una riga, anche da telefono: il peso stretto, le tre
   misure attaccate in un campo solo con una riga sottile fra l'una e l'altra */
#prev-colli .griglia { grid-template-columns: minmax(4.5rem, 1fr) minmax(0, 3fr); gap: .6rem; }
.dimensioni { display: flex; flex: 1 1 auto; min-width: 0; background: var(--campo); border-radius: var(--raggio); }
.dimensioni input { flex: 1 1 0; min-width: 0; background: transparent; border-radius: 0; text-align: center; }
.dimensioni input + input { border-left: 1px solid var(--velo-forte); }
.dimensioni input:focus { border-color: transparent; box-shadow: inset 0 -2px 0 var(--verde-chiaro); }
.dimensioni:focus-within { outline: 1px solid var(--verde-chiaro); }
/* Etichette del preventivo veloce (Collo 1, Peso, misure) come "Partenza" e
   "Arrivo": stesso carattere, niente maiuscoletto */
#prev-1 label, #prev-1 .prev-collo-testata {
    font-size: inherit; text-transform: none; letter-spacing: normal; color: var(--testo-tenue);
}
/* Accesso: etichetta e "Chiudi" sulla stessa riga */
.accesso-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.chiudi-accesso { color: var(--testo-tenue); font-size: .85rem; text-decoration: none; }
.chiudi-accesso:hover { color: var(--testo); }

/* Tariffe: titolo come "Cosa devi spedire?" e nomi dei servizi senza maiuscolo
   (la riga e' un <label>, che nel modulo e' in maiuscoletto) */
#prev-3 > h2 { text-align: center; text-transform: none; letter-spacing: normal; font-size: inherit; font-weight: 400; }
.prev-servizio { text-transform: none; letter-spacing: normal; font-size: inherit; }

/* Azioni delle tariffe affiancate: Spedisci e Salva per dopo in coppia,
   la richiesta di codice sotto, larga quanto loro */
#prev-3 .azioni.azioni-colonna { flex-direction: row; flex-wrap: wrap; justify-content: center; }
#prev-3 .azioni.azioni-colonna .pulsante { flex: 1 1 0; min-width: 0; }
#prev-3 .azioni.azioni-colonna #prev-codice { flex-basis: 100%; }

/* Preventivo veloce piu' vicino alla grafica delle icone: campi un po' piu'
   bassi e testo piu' piccolo da PC (su telefono restano a 16px, o iOS ingrandisce) */
@media (min-width: 34rem) {
    #prev-1 input:not([type="radio"]):not([type="checkbox"]) { font-size: .92rem; height: 2.6rem; min-height: 0; }
}
/* Da telefono le tre misure sono strette: meno margine interno e segnaposto
   piu' piccolo, o "lungh." e "largh." si tagliano */
@media (max-width: 34rem) {
    .dimensioni input { padding-inline: .15rem; }
    .dimensioni input::placeholder { font-size: .72rem; }
}
/* Peso e dimensioni come le icone sopra: etichette centrate sul loro campo,
   stessa misura del testo delle icone; anche il peso scritto al centro */
#prev-colli label, #prev-colli .prev-collo-testata { font-size: .82rem; }
#prev-colli .campo label { text-align: center; }
#prev-colli .peso { text-align: center; }
@media (min-width: 34rem) {
    #prev-colli input:not([type="radio"]):not([type="checkbox"]) { font-size: .82rem; }
}
@media (max-width: 34rem) {
    #prev-colli label, #prev-colli .prev-collo-testata { font-size: 11px; }
}
/* Preventivo veloce e tariffe: tutto il testo alla misura delle scritte delle
   icone (etichette, campi, anteprima, tariffe, pulsanti). Restano piu' grandi
   solo i due titoli e il link "Hai un account?". Da telefono i campi restano a
   16px: sotto, l'iPhone ingrandisce la pagina quando li si tocca. */
#prev-1 .domanda, #prev-1 label, #prev-1 .prev-collo-testata, #prev-1 .chiudi-accesso,
#prev-1 .anteprima-tipo, #prev-1 .anteprima-tipo *, #prev-1 .pulsante, #prev-1 .aiuto,
#prev-1 input:not([type="radio"]):not([type="checkbox"]),
#prev-3 .prev-servizio, #prev-3 .prev-servizio *, #prev-3 .nota-iva, #prev-3 .pulsante, #prev-3 .esito,
#prev-1 .esito { font-size: .82rem; }
@media (max-width: 34rem) {
    #prev-1 .domanda, #prev-1 label, #prev-1 .prev-collo-testata, #prev-1 .chiudi-accesso,
    #prev-1 .anteprima-tipo, #prev-1 .anteprima-tipo *, #prev-1 .pulsante, #prev-1 .aiuto,
    #prev-3 .prev-servizio, #prev-3 .prev-servizio *, #prev-3 .nota-iva, #prev-3 .pulsante, #prev-3 .esito,
    #prev-1 .esito { font-size: 11px; }
    #prev-1 input:not([type="radio"]):not([type="checkbox"]) { font-size: 16px; }
}
/* ---- Preventivo veloce piu' delicato ----
   Campi piu' bassi, testo dei campi alla misura delle icone anche da telefono
   (la pagina non si ingrandisce al tocco: lo impedisce il viewport), peso
   attaccato alle tre misure come un campo solo, separatori quasi invisibili,
   pesi del carattere piu' leggeri. */
#prev-1 input:not([type="radio"]):not([type="checkbox"]) { height: 2.1rem; min-height: 0; }
@media (max-width: 34rem) {
    #prev-1 input:not([type="radio"]):not([type="checkbox"]) { font-size: 11px; height: 2.2rem; }
}
#prev-colli .griglia { column-gap: 0; }
#prev-colli .peso { border-radius: var(--raggio) 0 0 var(--raggio); }
#prev-colli .dimensioni { border-radius: 0 var(--raggio) var(--raggio) 0; border-left: 1px solid var(--velo); }
.dimensioni input + input { border-left: 1px solid var(--velo); }
#prev-1 .anteprima-tipo strong { font-weight: 400; }
#prev-1 .pulsante, #prev-3 .pulsante { font-weight: 500; }
#prev-3 .prev-servizio-prezzo { font-weight: 500; }
.tipo[aria-pressed="true"] span { font-weight: 500; }
/* Pulsanti del preventivo veloce e delle tariffe alti come i campi */
#prev-1 .pulsante, #prev-3 .pulsante { height: 2.1rem; min-height: 0; padding-block: 0; }
@media (max-width: 34rem) {
    #prev-1 .pulsante, #prev-3 .pulsante { height: 2.2rem; }
}
/* Accesso aperto: un po' d'aria dalle dimensioni sopra */
#prev-1 #blocco-accesso { margin-top: 1.4rem; }
/* Piu' e meno in uno spazio fisso a destra, uguale su tutti i colli: le tre
   misure hanno la stessa larghezza in ogni riga e "Dimensioni cm" si centra
   sopra di loro, cioe' sopra la misura di mezzo */
#prev-colli .con-tasti { position: relative; padding-right: 4.2rem; }
#prev-colli .con-tasti .tasto-collo { position: absolute; top: 50%; transform: translateY(-50%); }
#prev-colli .con-tasti #prev-togli-ultimo { right: 2.1rem; }
#prev-colli .con-tasti #prev-aggiungi-collo { right: 0; }
#prev-colli .campo-dimensioni label { padding-right: 4.2rem; }

/* Da PC piu' raccolto: le icone restano larghe, partenza e arrivo un po'
   piu' strette, peso e misure ancora di piu' (citta' e numeri sono corti) */
@media (min-width: 34rem) {
    #veloce-luoghi, #prev-1 #blocco-accesso { max-width: 38rem; margin-inline: auto; }
    #prev-colli { max-width: 30rem; margin-inline: auto; }
    #prev-1 #blocco-accesso { width: 100%; }
}
/* lo spazio fisso di piu' e meno sta a destra: altrettanto a sinistra, cosi'
   peso e misure restano al centro del riquadro */
@media (min-width: 34rem) {
    #prev-colli { padding-left: 4.2rem; max-width: 34.2rem; }
}
/* Preventivo veloce e tariffe senza il bordo del riquadro */
#prev-1.sezione, #prev-3.sezione { border-color: transparent; }
/* Tariffe nella stessa sezione del preventivo, staccate solo da un po' d'aria */
.tariffe-veloce { margin-top: 1.6rem; }
@media (min-width: 34rem) {
    /* le tariffe larghe quanto partenza e arrivo */
    .tariffe-veloce { max-width: 38rem; margin-inline: auto; }
}
/* Anteprima: tutto nel colore del testo, solo l'importo del servizio in verde */
.anteprima-tipo strong { color: var(--testo); }
.anteprima-tipo .prezzo-anteprima { color: var(--verde-chiaro); }
/* Scelto un servizio, gli altri si spengono */
.prev-servizi:has(.scelto) .prev-servizio:not(.scelto) { opacity: .3; }
.prev-servizi:has(.scelto) .prev-servizio:not(.scelto):hover { opacity: .6; }
/* ---- Da PC tutto in una colonna sola, larga quanto peso e misure ----
   Partenza e arrivo, colli, accesso, tariffe e pulsanti hanno gli stessi
   bordi sinistro e destro. Piu' e meno escono dalla colonna, a destra, cosi'
   non la restringono. Le icone restano a tutta larghezza. */
@media (min-width: 34rem) {
    #veloce-luoghi, #prev-colli, #prev-1 #blocco-accesso, .tariffe-veloce {
        max-width: 30rem; margin-inline: auto; padding-left: 0;
    }
    #prev-colli .con-tasti { padding-right: 0; }
    #prev-colli .campo-dimensioni label { padding-right: 0; }
    #prev-colli .con-tasti #prev-togli-ultimo { right: -4.4rem; }
    #prev-colli .con-tasti #prev-aggiungi-collo { right: -2.3rem; }
}
/* "Hai un account con noi?" piccolo come etichette e campi */
#prev-1 .link-accesso { font-size: .82rem; }
@media (max-width: 34rem) { #prev-1 .link-accesso { font-size: 11px; } }
/* Tariffe e pulsanti larghi quanto l'anteprima: la larghezza la mette lo
   script (allineaTariffe), misurando la riga piu' lunga dell'anteprima */
@media (min-width: 34rem) {
    .tariffe-veloce { max-width: 30rem; }
}
/* pulsanti delle tariffe su una riga: stretti, il testo non va a capo */
#prev-3 .pulsante { white-space: nowrap; padding-inline: .8rem; }
/* Accesso aperto nel preventivo veloce: il link sopra ha gia' fatto la
   domanda, resta solo "Chiudi" a destra */
#prev-1 #prev-accesso-label { display: none; }
#prev-1 .accesso-testa { justify-content: flex-end; }
/* testo dei pulsanti senza grassetto */
#prev-1 .pulsante, #prev-3 .pulsante { font-weight: 400; }
/* Accesso aperto: dai campi sopra a username lo stesso spazio che dalla
   nota sotto all'anteprima ("Chiudi" occupa gia' una riga) */
#prev-1 #blocco-accesso { margin-top: .3rem; }
#prev-1 #blocco-accesso { margin-top: 0; margin-bottom: .4rem; }
/* I tre pulsanti sotto le tariffe restano spenti finche' non si sceglie un servizio */
.tariffe-veloce:not(:has(.prev-servizio.scelto)) .azioni .pulsante { opacity: .3; pointer-events: none; }
/* "Hai un account con noi?" staccato dalle dimensioni sopra */
#prev-1 .link-accesso { margin-top: 1.6rem; }
/* blocco aperto: "Chiudi" staccato dalle misure quanto la nota dall'anteprima */
#prev-1 #blocco-accesso { margin-top: 1.5rem; }
/* un filo d'aria in piu' fra l'accesso e l'anteprima sotto */
#prev-1 #blocco-accesso { margin-bottom: .75rem; }
#prev-1 .link-accesso { margin-bottom: .35rem; }
/* Pulsanti sotto le tariffe, tre stadi: spenti senza servizio (.3), appena
   velati col servizio scelto (.8), accesi passandoci sopra (1). Il colore non
   cambia: prima "Spedisci" si scuriva e sembrava spegnersi. */
.tariffe-veloce:has(.prev-servizio.scelto) .azioni .pulsante { opacity: .8; transition: opacity .15s; }
.tariffe-veloce:has(.prev-servizio.scelto) .azioni .pulsante:hover { opacity: 1; }
.tariffe-veloce .pulsante-rosso:hover { background: var(--rosso); border-color: var(--rosso); }
.tariffe-veloce .pulsante-verde:hover { background: var(--verde); border-color: var(--verde); }
/* Bordo delle icone sottilissimo: mezzo pixel (sugli schermi che lo
   disegnano) e nel colore del velo, appena percettibile */
.tipo { border-width: .5px; border-color: var(--velo); }
.tipo[aria-pressed="true"] { border-color: var(--verde-chiaro); }
/* "Collegandoti applichiamo le tue condizioni" al centro, ovunque compaia l'accesso */
#prev-accesso-nota { display: block; text-align: center; }
/* "Collegato come ..." ed "Esci" staccati */
#prev-scollega { margin-left: .8rem; }

/* =========================================================================
   STESSA GRAFICA PER TUTTE LE PAGINE PUBBLICHE
   Le regole nate per il preventivo veloce valgono ovunque: riferimenti,
   modulo di spedizione, conferme, registrazione, login, password.
   Testo alla misura delle icone (13px, 11px da telefono), etichette senza
   maiuscoletto, campi e pulsanti bassi e della stessa altezza, pulsanti
   senza grassetto, riquadri senza bordo, titoli come "Cosa devi spedire?".
   ========================================================================= */
.sezione { border-color: transparent; }
.sezione h2 { text-align: center; text-transform: none; letter-spacing: normal; font-size: inherit; font-weight: 400; color: var(--verde-chiaro); }
label, .domanda, .aiuto, .nota, .spunta, .esito, .scelta, .scelta small, .collegamenti,
.prev-collo-testata, .conferma p {
    font-size: .82rem; text-transform: none; letter-spacing: normal;
}
label { color: var(--testo-tenue); }
label.minuscola { text-transform: none; }
input:not([type="radio"]):not([type="checkbox"]), select, textarea { font-size: .82rem; }
input:not([type="radio"]):not([type="checkbox"]), select { height: 2.1rem; min-height: 0; padding-block: 0; }
textarea { min-height: 4.5rem; padding-block: .5rem; }
.pulsante { height: 2.1rem; min-height: 0; padding-block: 0; font-size: .82rem; font-weight: 400; white-space: nowrap; }
.scelta { min-height: 0; padding: .55rem 1rem; }
@media (max-width: 34rem) {
    label, .domanda, .aiuto, .nota, .spunta, .esito, .scelta, .scelta small, .collegamenti,
    .prev-collo-testata, .conferma p,
    input:not([type="radio"]):not([type="checkbox"]), select, textarea, .pulsante { font-size: 11px; }
    input:not([type="radio"]):not([type="checkbox"]), select, .pulsante { height: 2.2rem; }
}
.accesso .pulsante { height: 2.1rem; min-height: 0; }
@media (max-width: 34rem) { .accesso .pulsante { height: 2.2rem; } }
/* Riferimenti nella stessa colonna del preventivo veloce */
#intro { max-width: 30rem; margin-inline: auto; }
/* Riferimenti: la preview copiata dal veloce, con la sua grafica */
#intro .anteprima-tipo, #intro .anteprima-tipo * { font-size: .82rem; }
#intro .anteprima-tipo strong { font-weight: 400; }
#intro .anteprima-tipo { cursor: pointer; margin: 0 0 1.4rem; }
@media (max-width: 34rem) { #intro .anteprima-tipo, #intro .anteprima-tipo * { font-size: 11px; } }
#intro #titolo-riferimenti { color: var(--verde-chiaro); }
/* Importo in grassetto: leggero, sul fondo chiaro si perdeva */
#prev-1 .anteprima-tipo .prezzo-anteprima, #intro .anteprima-tipo .prezzo-anteprima { font-weight: 600; }
/* Indietro e Continua affiancati, a dividersi la riga */
#intro .azioni { flex-wrap: nowrap; }
#intro .azioni .pulsante { flex: 1 1 0; min-width: 0; }
/* "Tu sei?": scelto uno, gli altri due si spengono (restano cliccabili) */
#scelta-ruolo:has(.scelta[aria-pressed="true"]) .scelta:not([aria-pressed="true"]) { opacity: .35; transition: opacity .15s; }
#scelta-ruolo:has(.scelta[aria-pressed="true"]) .scelta:not([aria-pressed="true"]):hover { opacity: .8; }

/* Logo sulla stessa riga di chiaro/scuro e lingue, al centro esatto anche se
   i due lati sono larghi diversi */
.barra-alto { display: grid; grid-template-columns: 1fr auto 1fr; margin-bottom: clamp(1rem, 3vw, 1.5rem); }
.barra-alto .tema-btn { justify-self: start; }
.barra-alto .lingue { justify-self: end; }
.barra-alto .marchio { margin: 0; }
.barra-alto .marchio img { width: clamp(8rem, 34vw, 13rem); }

/* Dentro il sito docsparcels.com (incorporato.js): logo, chiaro/scuro, lingue e
   piede li ha gia' il sito. Fondo trasparente, cosi' sotto c'e' quello della pagina. */
/* anche l'html: lo spazio in fondo per i suggerimenti di Google si sovrappone al sito e deve lasciarlo vedere */
html.incorporato, html.incorporato body { background: transparent; }
/* l'altezza la segue il riquadro del sito: niente barra di scorrimento interna */
html.incorporato, html.incorporato body { overflow: hidden; }
.incorporato .barra-alto, .incorporato .piede { display: none !important; }
/* 1px sotto: tiene dentro il margine dell'ultima sezione, che incorporato.js deve contare */
.incorporato .contenitore { padding-block: 0 1px; }
/* il riquadro (anche sfocato sopra un'immagine) lo disegna la pagina del sito */
.incorporato .sezione { background: transparent; margin-bottom: 0; padding-top: 14px; padding-bottom: 14px; }
/* sotto le icone il margine serve solo quando compaiono partenza e arrivo */
.incorporato #prev-1 .tipi { margin-bottom: 0; }
.incorporato #veloce-luoghi { margin-top: 1.1rem; }
/* nel sito le scritte delle icone nel blu del sito */
.incorporato .tipo span, .incorporato .tipo small { color: #1d1a4e; }
.incorporato .tipo:hover { border-color: #1d1a4e; }
.incorporato .tipo[aria-pressed="true"] { border-color: #1d1a4e; background: rgba(29, 26, 78, .06); color: #1d1a4e; }
.incorporato .tipo[aria-pressed="true"] span { color: #1d1a4e; }

/* ---------------------------------------------------------------------------
   Nel sito (incorporato): il preventivo veloce e' una fase alla volta, sempre
   alla stessa altezza. La fase e' una classe sull'html (fase-tipi, -luoghi,
   -colli, -accesso, -tariffe, -azioni), messa dallo script del modulo.
   --------------------------------------------------------------------------- */
.fase-indietro, .fase-tipo { display: none; }
/* 160px; cresce solo se il contenuto non ci sta: piu' colli, piu' servizi del cliente collegato */
.incorporato #prev-1 { position: relative; box-sizing: border-box; min-height: 160px; display: flex;
                       flex-direction: column; justify-content: center; padding-top: 10px; padding-bottom: 10px; }
.incorporato .fase-indietro { display: block; position: absolute; top: 50%; left: 12px; transform: translateY(-50%); z-index: 2;
                             background: none; border: 0; padding: 4px 8px; cursor: pointer; font: inherit;
                             font-size: 28px; line-height: 1; color: #1d1a4e; }
.incorporato .fase-indietro:hover { opacity: .7; }
.incorporato.fase-tipi .fase-indietro { display: none; }
/* margini dei passi pensati per la pagina lunga: qui spariscono */
.incorporato #veloce-luoghi, .incorporato #veloce-colli > div:first-child { margin-top: 0 !important; }
.incorporato #prev-1-esito { margin-top: 6px !important; margin-bottom: 0; }
.incorporato #prev-1 .anteprima-tipo { margin: 8px 0 0; }
.incorporato #prev-1 .azioni { margin-top: 8px; }
/* "Hai un account con noi?" in basso a destra, piccolo */
.incorporato #link-accesso { position: absolute; bottom: 10px; right: 24px; margin: 0; }
.incorporato #link-accesso a { color: #1d1a4e; }
/* accesso: tutto nel blu del sito */
.incorporato #blocco-accesso label, .incorporato #chiudi-accesso, .incorporato #prev-accesso-nota { color: #1d1a4e; }
.incorporato #prev-accedi { color: #1d1a4e; border-color: #1d1a4e; }
.incorporato #prev-accedi:hover { background: #1d1a4e; color: #fff; }
.incorporato input:focus { border-color: #1d1a4e; }
/* collegato: nella fase di Calcola resta solo "Collegato come ... Esci", in basso a destra */
.incorporato.fase-colli.accesso-fatto #veloce-colli > .griglia { display: block !important; position: absolute; bottom: 10px; right: 24px; }
.incorporato.fase-colli.accesso-fatto #blocco-accesso { display: block !important; }
.incorporato.fase-colli.accesso-fatto #blocco-accesso .accesso-testa,
.incorporato.fase-colli.accesso-fatto #blocco-accesso .accesso { display: none !important; }
.incorporato #prev-accesso-nota .gomma { color: #1d1a4e; }
/* piu' e meno dentro la colonna: fuori dal campo uscivano dal riquadro e il meno non si vedeva */
/* Peso e misure in squadra: quattro caselle uguali larghe quanto Calcola, etichette a
   sinistra; meno e piu' piccoli sulla riga delle etichette, in fondo a destra */
.incorporato #prev-colli .griglia { grid-template-columns: 1fr 3fr !important; column-gap: 0 !important; }
.incorporato #prev-colli .campo label { text-align: left !important; padding-right: 0 !important; padding-left: 4px; }
.incorporato #prev-colli .con-tasti { padding-right: 0 !important; }
.incorporato #prev-colli .con-tasti .tasto-collo { top: -1.55rem !important; transform: none !important; width: 1.4rem; height: 1.4rem; }
.incorporato #prev-colli .con-tasti .tasto-collo svg { width: 1rem; height: 1rem; }
.incorporato #prev-colli .con-tasti #prev-togli-ultimo { right: 1.6rem !important; }
.incorporato #prev-colli .con-tasti #prev-aggiungi-collo { right: 0 !important; }
.incorporato #prev-colli .prev-collo-testata { margin-bottom: 2px; font-size: 12px; }
/* Campi su base blu: niente bordo intorno, fondo un filo piu' scuro; in peso e
   misure solo le divisioni verticali fra una casella e l'altra */
.incorporato input:not([type="radio"]):not([type="checkbox"]) { background: #dcdde6; border: 1px solid transparent; }
.incorporato input:not([type="radio"]):not([type="checkbox"]):focus { border-color: transparent; box-shadow: inset 0 -2px 0 #1d1a4e; }
.incorporato .dimensioni { box-sizing: border-box; height: 2.1rem; background: #dcdde6; border: 0 !important;
                           border-left: 1px solid rgba(29, 26, 78, .35) !important; }
.incorporato .dimensioni input:not([type="radio"]) { border: 0; background: transparent; height: 100%; }
.incorporato .dimensioni input + input { border-left: 1px solid rgba(29, 26, 78, .35) !important; }
/* scrivendo in una misura niente cornice intorno alle tre caselle: solo la linea blu sotto */
.incorporato .dimensioni:focus-within { outline: none; }
.incorporato .dimensioni input:focus { box-shadow: inset 0 -2px 0 #1d1a4e; }
/* "Dimensioni cm" al centro delle tre caselle */
.incorporato #prev-colli .campo-dimensioni label { text-align: center !important; }
.incorporato #prev-colli .tasto-collo { color: #1d1a4e; }
.incorporato #prev-colli .dimensioni input { padding-left: 2px; padding-right: 2px; text-align: center; }
/* nella fase di Calcola il link (o "Collegato come") sta sotto Calcola, allineato a destra:
   in fondo al riquadro finiva sopra il pulsante quando i colli lo allungano */
.incorporato.fase-colli #link-accesso { position: static; order: 5; text-align: right; margin: 6px 0 0; }
.incorporato.fase-colli.accesso-fatto #veloce-colli > .griglia { position: static !important; order: 5; text-align: right; margin-top: 6px; }
.incorporato.fase-colli #azioni-calcola { order: 4; }
.incorporato.fase-colli #prev-1-esito { order: 3; }
/* tariffe e uscite larghe quanto partenza e arrivo; le tre uscite in fila */
.incorporato #prev-3 { width: auto !important; max-width: none; }
.incorporato #prev-3 .azioni.azioni-colonna { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; margin: 0; }
.incorporato #prev-3 .azioni.azioni-colonna { gap: 6px; }
.incorporato #prev-3 .azioni.azioni-colonna .pulsante { flex: 0 0 auto; width: 100%; min-width: 0; height: 32px; min-height: 32px; }
.incorporato .fase-tipo { text-align: center; margin: 10px 0 0; color: #1d1a4e; font-size: .82rem; }
/* freccia avanti accanto alla preview: uguale a quella che torna indietro */
.incorporato .fase-avanti { background: none; border: 0; padding: 0 8px; margin-left: 12px; cursor: pointer; font: inherit;
                            font-size: 28px; line-height: 1; color: #1d1a4e; vertical-align: middle; }
.incorporato .fase-avanti:hover { opacity: .7; }
/* Calcola largo quanto peso e misure */
.incorporato.fase-colli #azioni-calcola .pulsante { flex: 1 1 auto; width: 100%; }
/* righe delle tariffe piu' basse: ne stanno tre anche a riquadro fisso */
.incorporato .prev-servizio { padding-top: 5px; padding-bottom: 5px; }
/* etichette nel blu del sito (i segnaposto restano grigi) */
.incorporato label, .incorporato .domanda, .incorporato #prev-1 label { color: #1d1a4e; }
/* partenza e arrivo piu' larghi: c'e' posto, la freccia sta a sinistra */
/* ---- Due colonne: la preview a sinistra, campi, servizi e pulsanti a destra ---- */
.incorporato.fase-luoghi #prev-1 { display: grid; grid-template-columns: 1fr 1fr; align-items: center; align-content: center; column-gap: 28px; padding-left: 56px; padding-right: 24px; }
.incorporato.fase-luoghi #fase-tipo { grid-column: 1; grid-row: 1; margin: 0; text-align: left; }
.incorporato.fase-luoghi #veloce-luoghi { grid-column: 2; grid-row: 1; max-width: none; margin: 0; }
/* partenza e arrivo uno sopra l'altro nella colonna di destra */
.incorporato.fase-luoghi #veloce-luoghi { grid-template-columns: 1fr !important; gap: 8px; }
.incorporato.fase-colli #prev-1, .incorporato.fase-tariffe #prev-1, .incorporato.fase-azioni #prev-1 { padding-left: 56px; padding-right: 24px; }
.incorporato.fase-colli #veloce-colli { display: grid; grid-template-columns: 1fr 1fr; align-items: center; column-gap: 28px; }
.incorporato.fase-colli #veloce-colli > * { grid-column: 2; }
.incorporato.fase-colli #veloce-colli > .griglia { display: none; }
.incorporato.fase-colli #veloce-colli > #anteprima-tipo { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
.incorporato.fase-colli #prev-colli { max-width: none; }
/* servizi e pulsanti stretti, preview larga */
.incorporato.fase-tariffe #prev-3, .incorporato.fase-azioni #prev-3 { display: grid !important; grid-template-columns: 1fr auto 230px; align-items: center; column-gap: 20px; }
.incorporato.fase-tariffe #prev-3 > *, .incorporato.fase-azioni #prev-3 > * { grid-column: 3; }
.incorporato.fase-tariffe #prev-3 > #anteprima-tipo, .incorporato.fase-azioni #prev-3 > #anteprima-tipo { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
/* "Richiedi un codice clienti" nel blu del sito; passando sopra si accende: fondo blu, testo bianco */
.incorporato #prev-codice { color: #1d1a4e; border-color: #1d1a4e; opacity: 1; }
.incorporato #prev-codice svg { stroke: currentColor; }
.incorporato #prev-codice:hover { background: #1d1a4e; color: #fff; border-color: #1d1a4e; }
/* partenza e arrivo nel blu del sito; il prezzo del servizio scelto al centro */
.incorporato #prev-1 .anteprima-tipo .riga:first-child strong { color: #1d1a4e; }
.incorporato #prev-1 .anteprima-tipo .riga:has(.prezzo-anteprima) { align-self: center; }
/* la preview, a sinistra, allineata a sinistra */
.incorporato #prev-1 .anteprima-tipo { align-items: flex-start; text-align: left; }
/* due righe: partenza -> arrivo, poi tipo, peso e misure (piu' il prezzo quando c'e') */
.incorporato #prev-1 .anteprima-tipo .riga { justify-content: flex-start; flex-wrap: nowrap; white-space: nowrap; }
/* cosa si vede in ogni fase */
.incorporato.fase-tipi #veloce-luoghi, .incorporato.fase-tipi #veloce-colli, .incorporato.fase-tipi #prev-3 { display: none !important; }
.incorporato.fase-luoghi #tipi, .incorporato.fase-luoghi #veloce-colli, .incorporato.fase-luoghi #prev-3 { display: none !important; }
.incorporato.fase-luoghi .fase-tipo { display: flex; align-items: center; }
.incorporato.fase-colli #tipi, .incorporato.fase-colli #veloce-luoghi, .incorporato.fase-colli #prev-3,
.incorporato.fase-colli #blocco-accesso { display: none !important; }
.incorporato.fase-accesso #tipi, .incorporato.fase-accesso #veloce-luoghi, .incorporato.fase-accesso #prev-3,
.incorporato.fase-accesso #prev-colli, .incorporato.fase-accesso #link-accesso, .incorporato.fase-accesso #anteprima-tipo,
.incorporato.fase-accesso #azioni-calcola { display: none !important; }
.incorporato.fase-tariffe #tipi, .incorporato.fase-tariffe #veloce-luoghi, .incorporato.fase-tariffe #veloce-colli,
.incorporato.fase-tariffe #prev-3 .azioni { display: none !important; }
.incorporato.fase-azioni #tipi, .incorporato.fase-azioni #veloce-luoghi, .incorporato.fase-azioni #veloce-colli,
.incorporato.fase-azioni #prev-servizi { display: none !important; }

/* ---- Nel sito, dopo Spedisci: "Tu sei?" e, per la terza parte o per Salva per
   dopo, i recapiti. Stesso riquadro delle fasi del preventivo: preview a
   sinistra, il resto a destra, freccia per tornare indietro ---- */
.incorporato #intro { position: relative; box-sizing: border-box; min-height: 160px; max-width: none; margin: 0;
                      display: grid; grid-template-columns: 1fr 250px; align-items: center; align-content: center; column-gap: 28px;
                      padding: 10px 24px 10px 56px; text-align: left; }
.incorporato #intro > * { grid-column: 2; }
.incorporato #intro > #intro-riepilogo { grid-column: 1; grid-row: 1 / span 3; margin: 0; cursor: default; }
.incorporato #intro #intro-dati { margin: 0; }
.incorporato #intro #codice-intro, .incorporato #intro #titolo-riferimenti { display: none !important; }
.incorporato #intro-riepilogo { align-items: flex-start; text-align: left; }
.incorporato #intro-riepilogo .riga { justify-content: flex-start; flex-wrap: nowrap; white-space: nowrap; }
.incorporato #intro-riepilogo .riga:first-child strong { color: #1d1a4e; }
.incorporato #intro-riepilogo .riga:has(.prezzo-anteprima) { align-self: center; }
/* le frecce: Indietro diventa la freccia a sinistra */
.incorporato #intro-indietro, .incorporato #intro-indietro-tariffe { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    border: 0; background: none; padding: 4px 8px; height: auto; min-height: 0; font-size: 0; }
.incorporato #intro-indietro .freccia-indietro, .incorporato #intro-indietro-tariffe .freccia-indietro { font-size: 28px; color: #1d1a4e; margin: 0; }
.incorporato #intro .azioni { margin-top: 8px; }
.incorporato #intro .azioni .pulsante:not(#intro-indietro):not(#intro-indietro-tariffe) { flex: 1 1 auto; width: 100%; }
/* "Tu sei?": domanda e tre scelte una sotto l'altra, senza le note */
.incorporato #domanda-ruolo { margin: 0 0 6px !important; text-align: left; }
.incorporato #scelta-ruolo { flex-direction: column; gap: 6px; }
.incorporato #scelta-ruolo .scelta { flex: 0 0 auto; padding: 6px 10px; text-align: center; color: #1d1a4e; border-color: rgba(29, 26, 78, .35); }
.incorporato #scelta-ruolo .scelta:hover { border-color: #1d1a4e; }
.incorporato #scelta-ruolo small { display: none; }
.incorporato.rif-ruolo #intro-dati .griglia, .incorporato.rif-ruolo #intro-continua { display: none !important; }
/* recapiti (terza parte, Salva per dopo): campi con il testo dentro, niente etichette */
.incorporato.rif-terzi #domanda-ruolo, .incorporato.rif-terzi #scelta-ruolo,
.incorporato.rif-salva #domanda-ruolo, .incorporato.rif-salva #scelta-ruolo { display: none !important; }
.incorporato.rif-terzi #intro-dati label, .incorporato.rif-salva #intro-dati label { display: none; }
.incorporato.rif-terzi #intro-dati .griglia, .incorporato.rif-salva #intro-dati .griglia { gap: 6px; }
.incorporato.rif-terzi #intro-dati .coppie, .incorporato.rif-salva #intro-dati .coppie { gap: 6px; }
/* comandi nel blu del sito */
.incorporato #intro-continua, .incorporato #intro-salva-dopo { background: #1d1a4e; border-color: #1d1a4e; color: #fff; }
.incorporato #intro-continua:hover, .incorporato #intro-salva-dopo:hover { background: #2c2870; border-color: #2c2870; }
.incorporato #scelta-ruolo .scelta[aria-pressed="true"] { background: #1d1a4e; color: #fff; border-color: #1d1a4e; }

/* ---- Nel sito su telefono (sotto 576px): le fasi restano una alla volta, ma
   la preview va sopra e campi, servizi e pulsanti sotto, a tutta larghezza.
   La freccia indietro sale in alto a sinistra ---- */
@media (max-width: 575px) {
    .incorporato #prev-1, .incorporato #intro { padding: 40px 12px 12px !important; justify-content: flex-start; }
    .incorporato.fase-tipi #prev-1 { padding-top: 12px !important; justify-content: center; }
    .incorporato #prev-3 { margin-top: 0 !important; padding-top: 0 !important; }
    .incorporato .fase-indietro, .incorporato #intro-indietro, .incorporato #intro-indietro-tariffe { top: 4px !important; left: 4px !important; transform: none !important; }
    .incorporato.fase-luoghi #prev-1, .incorporato.fase-colli #veloce-colli,
    .incorporato.fase-tariffe #prev-3, .incorporato.fase-azioni #prev-3 { display: flex !important; flex-direction: column; align-items: stretch; gap: 10px; }
    /* senza !important: quando e' nascosto deve restarlo */
    .incorporato #intro { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
    /* la preview sempre in cima */
    .incorporato #prev-1 .anteprima-tipo, .incorporato #intro-riepilogo, .incorporato.fase-luoghi #fase-tipo { order: -1; }
    .incorporato.fase-luoghi #fase-tipo { justify-content: center; text-align: center; }
    .incorporato #prev-1 .anteprima-tipo, .incorporato #intro-riepilogo { align-items: center; text-align: center; }
    .incorporato #prev-1 .anteprima-tipo .riga, .incorporato #intro-riepilogo .riga { flex-wrap: wrap; white-space: normal; justify-content: center; }
    /* "Hai un account" e "Collegato come" in fondo, sotto il pulsante */
    .incorporato #link-accesso { position: static; text-align: center; margin-top: 8px; }
    .incorporato.fase-colli.accesso-fatto #veloce-colli > .griglia { position: static !important; text-align: center; }
    .incorporato #blocco-accesso .accesso { grid-template-columns: 1fr !important; }
}

/* ---- Nel sito: frecce un filo piu' spesse ---- */
.incorporato .fase-indietro, .incorporato .fase-avanti,
.incorporato #intro-indietro .freccia-indietro, .incorporato #intro-indietro-tariffe .freccia-indietro {
    -webkit-text-stroke: 1.4px #1d1a4e;
}
/* Servizi: colonna a destra (230px) con poco margine, il nome del servizio su una riga;
   la freccia avanti nella colonna di mezzo, fra anteprima e servizi, centrata */
.incorporato.fase-tariffe #prev-1, .incorporato.fase-azioni #prev-1 { padding-right: 12px; }
.incorporato .prev-servizio { white-space: nowrap; }
.fase-avanti-servizi { display: none; }
.incorporato.fase-tariffe #prev-3 > .fase-avanti-servizi:not([hidden]) { display: block; grid-column: 2; grid-row: 1 / span 4;
    align-self: center; margin: 0; }

/* Telefono, pagina aperta da sola (anche dal QR della home), non nel sito: etichette e
   contenuto dei campi 2px piu' grandi (da 11 a 13px). Icone, titoli e pulsanti restano come sono */
@media (max-width: 34rem) {
    html:not(.incorporato) label, html:not(.incorporato) .domanda, html:not(.incorporato) .aiuto,
    html:not(.incorporato) .nota, html:not(.incorporato) .spunta, html:not(.incorporato) .esito,
    html:not(.incorporato) .scelta, html:not(.incorporato) .scelta small, html:not(.incorporato) .collegamenti,
    html:not(.incorporato) .prev-collo-testata, html:not(.incorporato) .conferma p,
    html:not(.incorporato) input:not([type="radio"]):not([type="checkbox"]),
    html:not(.incorporato) select, html:not(.incorporato) textarea,
    html:not(.incorporato) #prev-1 .domanda, html:not(.incorporato) #prev-1 label,
    html:not(.incorporato) #prev-1 .prev-collo-testata, html:not(.incorporato) #prev-1 .chiudi-accesso,
    html:not(.incorporato) #prev-1 .anteprima-tipo, html:not(.incorporato) #prev-1 .anteprima-tipo *,
    html:not(.incorporato) #prev-1 .aiuto,
    html:not(.incorporato) #prev-1 input:not([type="radio"]):not([type="checkbox"]),
    html:not(.incorporato) #prev-1 .esito, html:not(.incorporato) #prev-1 .link-accesso,
    html:not(.incorporato) #prev-colli label,
    html:not(.incorporato) #prev-3 .prev-servizio, html:not(.incorporato) #prev-3 .prev-servizio *,
    html:not(.incorporato) #prev-3 .nota-iva, html:not(.incorporato) #prev-3 .esito,
    html:not(.incorporato) #intro .anteprima-tipo, html:not(.incorporato) #intro .anteprima-tipo * { font-size: 13px; }
    /* le etichette due pixel in piu' del contenuto dei campi */
    html:not(.incorporato) label, html:not(.incorporato) .domanda, html:not(.incorporato) .prev-collo-testata,
    html:not(.incorporato) #prev-1 .domanda, html:not(.incorporato) #prev-1 label,
    html:not(.incorporato) #prev-1 .prev-collo-testata, html:not(.incorporato) #prev-colli label { font-size: 15px; }
    /* pulsanti (Calcola, Spedisci, Salva per dopo...) come i servizi */
    html:not(.incorporato) .pulsante, html:not(.incorporato) #prev-1 .pulsante, html:not(.incorporato) #prev-3 .pulsante { font-size: 13px; }
    /* testo dei box dei servizi: nome, peso e prezzo */
    html:not(.incorporato) #prev-3 .prev-servizio, html:not(.incorporato) #prev-3 .prev-servizio * { font-size: 15px; }
    /* testo dentro i campi */
    html:not(.incorporato) input:not([type="radio"]):not([type="checkbox"]), html:not(.incorporato) select,
    html:not(.incorporato) textarea, html:not(.incorporato) #prev-1 input:not([type="radio"]):not([type="checkbox"]) { font-size: 15px; }
    /* peso largo quanto ciascuna delle tre misure: a destra delle misure restano 4.2rem per il + */
    html:not(.incorporato) #prev-colli .griglia { grid-template-columns: calc((100% - 4.2rem) / 4) minmax(0, 1fr); }
    /* cosi' stretto "Peso kg *" andrebbe a capo e abbasserebbe il campo: resta su una riga */
    html:not(.incorporato) #prev-colli .campo:not(.campo-dimensioni) label { white-space: nowrap; }
}
/* "Cosa devi spedire?" sopra le icone: solo nella pagina aperta da sola */
.titolo-veloce { text-align: center; margin: 0 0 .9rem; }
.incorporato .titolo-veloce { display: none; }
/* Pagina aperta da sola: scrivendo in peso e misure niente bordo quadrato, solo la riga sotto */
html:not(.incorporato) .dimensioni:focus-within { outline: none; }
html:not(.incorporato) #prev-colli .peso:focus { border-color: transparent; box-shadow: inset 0 -2px 0 var(--verde-chiaro); }