/* =============================================================================
   FriTrak UI — design system (foglio di stile unico, framework-independent)
   -----------------------------------------------------------------------------
   Fonte di stile UNICA per il refactoring grafico graduale del sito.

   Regole d'oro:
   - niente Bootstrap: solo CSS moderno (custom properties, flex, grid, clamp).
   - i componenti vivono nello SCOPE `.ft` e si scrivono `.ft .ft-*` → specificità
     (0,2,0) che vince sui selettori contestuali legacy senza `!important`.
   - **dimensioni in px, NON in rem**: il Bootstrap legacy imposta
     `html { font-size: 10px }`, quindi i `rem` si rimpicciolirebbero. In px il
     nostro stile è indipendente dal root legacy e si vede alla dimensione giusta.
   - `.ft` ridefinisce font-size/line-height base, così il testo non eredita i
     14px del body legacy.
   ========================================================================== */

:root {
    --ft-navy:        #0e385c;
    --ft-navy-700:    #0b2c49;
    --ft-navy-300:    #3e6180;
    --ft-blue-grey:   #83a0b9;
    --ft-orange:      #ff9600;
    --ft-orange-600:  #f48d00;

    --ft-ink:      #1f2a37;
    --ft-muted:    #667085;
    --ft-line:     #dfe5ee;
    --ft-surface:  #ffffff;

    --ft-danger:     #c0392b;
    --ft-danger-bg:  #fdecea;
    --ft-info:       #1d6fb8;
    --ft-info-bg:    #eaf4fb;

    --ft-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ft-radius:    18px;
    --ft-radius-sm: 11px;
    --ft-shadow:    0 16px 48px rgba(14, 56, 92, .12);
    --ft-ring:      0 0 0 4px rgba(255, 150, 0, .28);
    --ft-transition: 160ms ease;
}

.ft,
.ft *,
.ft *::before,
.ft *::after {
    box-sizing: border-box;
}
.ft {
    font-family: var(--ft-font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ft-ink);
}

/* =============================================================================
   Card di autenticazione (login, registrazione) — DENTRO il layout del sito.
   `.ft-auth` centra soltanto: nessuno sfondo a pannello (niente "box nel box").
   ========================================================================== */
.ft.ft-auth {
    display: flex;
    justify-content: center;
    /* poco spazio sopra: la card resta "incollata" alla navbar, così il bottone
       primario si vede senza dover scrollare. */
    padding: clamp(14px, 2.5vw, 24px) 16px 44px;
}

.ft .ft-auth__card {
    width: 100%;
    max-width: 600px;
    background: var(--ft-surface);
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius);
    box-shadow: var(--ft-shadow);
    padding: clamp(28px, 4vw, 48px);
}
/* registrazione: card più ampia da desktop, dove c'è spazio (wizard a 2 colonne) */
.ft .ft-auth__card--wide {
    max-width: 880px;
}

.ft .ft-auth__card::before {
    content: "";
    display: block;
    width: 54px;
    height: 5px;
    border-radius: 999px;
    margin-bottom: 18px;
    background: linear-gradient(90deg, var(--ft-orange), var(--ft-orange-600));
}

.ft .ft-auth__title {
    margin: 0 0 8px;
    font-size: clamp(27px, 2.4vw, 33px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--ft-navy);
}
.ft .ft-auth__subtitle {
    margin: 0 0 22px;
    color: var(--ft-muted);
    font-size: 16px;
    line-height: 1.5;
}

/* ---- campi ---- */
.ft .ft-field { margin-bottom: 16px; }

.ft .ft-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ft-navy);
}

.ft .ft-input {
    display: block;
    width: 100%;
    height: 54px;
    padding: 0 16px;
    font-size: 16px;
    font-family: inherit;
    color: var(--ft-ink);
    background: #fff;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius-sm);
    transition: border-color var(--ft-transition), box-shadow var(--ft-transition);
}
.ft .ft-input::placeholder { color: #98a2b3; }
.ft .ft-input:hover { border-color: var(--ft-blue-grey); }
.ft .ft-input:focus,
.ft .ft-input:focus-visible {
    outline: none;
    border-color: var(--ft-orange);
    box-shadow: var(--ft-ring);
}

.ft .ft-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 26px;
    font-size: 15px;
    color: var(--ft-muted);
    user-select: none;
}
.ft .ft-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--ft-navy);
    cursor: pointer;
}
.ft .ft-check label { cursor: pointer; margin: 0; font-weight: 400; }

/* ---- bottoni ---- */
.ft .ft-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    padding: 0 22px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--ft-radius-sm);
    cursor: pointer;
    transition: background var(--ft-transition), border-color var(--ft-transition), transform var(--ft-transition);
}
.ft .ft-btn:focus-visible { outline: none; box-shadow: var(--ft-ring); }
.ft .ft-btn:active { transform: translateY(1px); }

.ft .ft-btn--primary { color: #fff; background: var(--ft-orange); }
.ft .ft-btn--primary:hover { color: #fff; background: var(--ft-orange-600); }

.ft .ft-btn--ghost {
    color: var(--ft-navy);
    background: #fff;
    border-color: var(--ft-line);
}
.ft .ft-btn--ghost:hover { color: var(--ft-navy); border-color: var(--ft-navy-300); background: #f8fafc; }

.ft .ft-auth__actions {
    display: grid;
    gap: 12px;
    margin-top: 8px;
}

.ft .ft-auth__foot {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--ft-line);
    text-align: center;
    font-size: 15px;
    color: var(--ft-muted);
}
.ft .ft-auth__foot a { color: var(--ft-navy); font-weight: 600; text-decoration: none; }
.ft .ft-auth__foot a:hover { text-decoration: underline; }

/* ---- avvisi ---- */
.ft .ft-alert {
    margin: 0 0 22px;
    padding: 14px 16px;
    border-radius: var(--ft-radius-sm);
    border-left: 4px solid transparent;
    font-size: 15px;
    line-height: 1.45;
}
.ft .ft-alert a { font-weight: 600; }
.ft .ft-alert--info { background: var(--ft-info-bg); border-left-color: var(--ft-info); color: #134e7a; }
.ft .ft-alert--error { background: var(--ft-danger-bg); border-left-color: var(--ft-danger); color: #8a2218; }

/* =============================================================================
   Registrazione: griglia, select, errori di campo
   ========================================================================== */
.ft .ft-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
}
@media (max-width: 560px) {
    .ft .ft-grid-2 { grid-template-columns: 1fr; gap: 0; }
}

.ft .ft-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .ft .ft-grid-3 { grid-template-columns: 1fr 1fr; } }

/* Gruppo radio a "chip" per i campi categoria (sì/no, opzioni brevi) */
.ft .ft-choice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.ft .ft-choice__opt { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border: 1.5px solid var(--ft-line); border-radius: 10px; cursor: pointer; font-size: 14px; color: var(--ft-navy); transition: border-color .15s, background .15s; }
.ft .ft-choice__opt:hover { border-color: #c5d0dc; }
.ft .ft-choice__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.ft .ft-choice__opt::before { content: ""; width: 15px; height: 15px; border: 2px solid #c5d0dc; border-radius: 50%; flex: 0 0 auto; transition: border-color .15s, box-shadow .15s; }
.ft .ft-choice__opt:has(input:checked) { border-color: var(--ft-orange); background: #fff8ef; font-weight: 600; }
.ft .ft-choice__opt:has(input:checked)::before { border-color: var(--ft-orange); box-shadow: inset 0 0 0 3px var(--ft-orange); }
.ft .ft-choice__opt:has(input:focus-visible) { outline: 2px solid var(--ft-navy); outline-offset: 2px; }

.ft .ft-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%230e385c' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    cursor: pointer;
}

.ft .ft-business {
    border-left: 3px solid var(--ft-line);
    padding-left: 18px;
    margin-bottom: 4px;
}

.ft .ft-error {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--ft-danger);
}

.ft .ft-check--terms {
    align-items: flex-start;
    margin: 4px 0 26px;
    color: var(--ft-ink);
    line-height: 1.45;
}
.ft .ft-check--terms input[type="checkbox"] { margin-top: 2px; flex: 0 0 auto; }
.ft .ft-check--terms a { color: var(--ft-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ft .ft-check--terms a:hover { color: var(--ft-orange-600); }

.ft .cf-turnstile { margin: 4px 0 18px; }

/* =============================================================================
   Selettore a step con tile + icone (registrazione)
   ========================================================================== */
.ft .ft-step { margin-bottom: 14px; }
.ft .ft-step[hidden] { display: none; }

.ft .ft-step__label {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ft-navy);
}

.ft .ft-tiles { display: grid; gap: 8px; }
.ft .ft-tiles--2 { grid-template-columns: 1fr 1fr; }
.ft .ft-tiles--cats { grid-template-columns: repeat(3, 1fr); }
.ft .ft-tiles[hidden] { display: none; }
@media (max-width: 520px) { .ft .ft-tiles--2 { grid-template-columns: 1fr; } }
@media (max-width: 360px) { .ft .ft-tiles--cats { grid-template-columns: 1fr 1fr; } }

.ft .ft-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    background: #fff;
    border: 1.5px solid var(--ft-line);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color var(--ft-transition), background var(--ft-transition), box-shadow var(--ft-transition);
}
.ft .ft-tile:hover { border-color: var(--ft-blue-grey); }
.ft .ft-tile input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.ft .ft-tile.is-active {
    border-color: var(--ft-orange);
    background: #fff8ef;
    box-shadow: 0 0 0 3px rgba(255, 150, 0, .16);
}

.ft .ft-tile__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #eef3f8;
    color: var(--ft-navy);
}
.ft .ft-tile__icon svg { width: 21px; height: 21px; }
.ft .ft-tile.is-active .ft-tile__icon { background: var(--ft-orange); color: #fff; }

.ft .ft-tile__text { display: flex; flex-direction: column; min-width: 0; }
.ft .ft-tile__title { font-size: 14px; font-weight: 600; color: var(--ft-ink); line-height: 1.2; }
.ft .ft-tile__sub { font-size: 11.5px; color: var(--ft-muted); }

/* tile categoria: chip verticale compatta (icona sopra, etichetta sotto) */
.ft .ft-tile--cat {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 7px;
    padding: 12px 6px;
}
.ft .ft-tile--cat .ft-tile__icon { width: 36px; height: 36px; }
.ft .ft-tile--cat .ft-tile__title { font-size: 13px; line-height: 1.15; }

/* =============================================================================
   Wizard: indicatore di avanzamento (cliccabile per tornare ai passi fatti)
   ========================================================================== */
.ft .ft-wizard__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}
.ft .ft-wizard__navitem {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ft-muted);
}
.ft .ft-wizard__navitem:not(:last-child)::after {
    content: "";
    width: 30px;
    height: 2px;
    margin: 0 12px;
    background: var(--ft-line);
    flex: 0 0 auto;
}
.ft .ft-wizard__dot {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef3f8;
    color: var(--ft-muted);
    font-size: 13px;
    font-weight: 700;
}
.ft .ft-wizard__navitem.is-current { color: var(--ft-navy); }
.ft .ft-wizard__navitem.is-current .ft-wizard__dot { background: var(--ft-orange); color: #fff; }
.ft .ft-wizard__navitem.is-done { color: var(--ft-navy); cursor: pointer; }
.ft .ft-wizard__navitem.is-done .ft-wizard__dot { background: var(--ft-navy); color: #fff; }
.ft .ft-wizard__navitem.is-done:hover .ft-wizard__lbl { text-decoration: underline; }

.ft .ft-wizard__panel[hidden] { display: none; }

@media (max-width: 480px) {
    .ft .ft-wizard__lbl { display: none; }
    .ft .ft-wizard__navitem:not(:last-child)::after { width: 40px; }
}

/* =============================================================================
   Mobile: recupera lo spazio orizzontale "mangiato" dai padding sommati
   (contenitore legacy .container + sezione + card).
   ========================================================================== */
@media (max-width: 560px) {
    /* Card a tutta larghezza (margin 0). Il container Bootstrap legacy si
       auto-centra (margin auto ~19px su una larghezza fissa): lo annullo e lo
       porto a 100%. La card diventa "full-bleed": niente angoli/bordi laterali/
       ombra, ma mantiene il padding interno per il contenuto. */
    #main.container:has(.ft-auth) {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .ft.ft-auth { padding-left: 0; padding-right: 0; }
    .ft .ft-auth__card {
        padding: 24px 18px 32px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }
}

/* =============================================================================
   Navbar del sito (.ft-nav) — barra superiore UNICA, guest + loggato.
   Sostituisce il markup Bootstrap di head.tpl (+ il vecchio navbar_menu.tpl).
   Sticky, navy, responsive: hamburger < 860px con pannello a tendina.
   ========================================================================== */
.ft.ft-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--ft-navy);
    color: #fff;
    box-shadow: 0 2px 14px rgba(14, 56, 92, .22);
}
.ft .ft-nav__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 9px 20px;
    min-height: 64px;
}

/* --- brand --- */
.ft .ft-nav__brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    flex: 0 0 auto;
    text-decoration: none;
}
.ft .ft-nav__logo {
    display: block;
    width: 152px;
    height: 34px;
    background: url("../img/fritrak/fritrak-logo-beta.png") left center / contain no-repeat;
}
.ft .ft-nav__tagline {
    font-size: 11px;
    line-height: 1;
    color: var(--ft-blue-grey);
    letter-spacing: .2px;
    white-space: nowrap;
}

.ft .ft-nav__spacer { flex: 1 1 auto; }

/* --- menu (lato destro) --- */
.ft .ft-nav__menu {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* --- ricerca --- */
.ft .ft-nav__search { position: relative; display: flex; align-items: center; }
.ft .ft-nav__search input[type="text"] {
    height: 40px;
    width: 200px;
    padding: 0 14px 0 38px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ft-ink);
    background: #fff;
    border: 1px solid transparent;
    border-radius: 999px;
    transition: box-shadow var(--ft-transition);
}
.ft .ft-nav__search input::placeholder { color: #98a2b3; }
.ft .ft-nav__search input:focus { outline: none; box-shadow: var(--ft-ring); }
.ft .ft-nav__search-ic {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--ft-muted); pointer-events: none;
}
.ft .ft-nav__search button { /* submit accessibile, attivabile con Invio */
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); border: 0;
}

/* --- link testuale --- */
.ft .ft-nav__link {
    display: inline-flex; align-items: center; gap: 7px;
    height: 40px; padding: 0 13px;
    color: #fff; font-size: 15px; font-weight: 600; text-decoration: none;
    border-radius: var(--ft-radius-sm); white-space: nowrap;
    transition: background var(--ft-transition);
}
.ft .ft-nav__link:hover { color: #fff; background: rgba(255, 255, 255, .12); }

/* --- CTA "Registrati" --- */
.ft .ft-nav__cta {
    display: inline-flex; align-items: center; justify-content: center;
    height: 40px; padding: 0 20px;
    color: #fff; background: var(--ft-orange);
    font-size: 15px; font-weight: 700; text-decoration: none;
    border-radius: 999px; white-space: nowrap;
    transition: background var(--ft-transition), transform var(--ft-transition);
}
.ft .ft-nav__cta:hover { color: #fff; background: var(--ft-orange-600); }
.ft .ft-nav__cta:active { transform: translateY(1px); }

/* --- campanella notifiche --- */
.ft .ft-nav__bell {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; color: #fff; border-radius: 50%;
    transition: background var(--ft-transition);
}
.ft .ft-nav__bell:hover { background: rgba(255, 255, 255, .12); }
.ft .ft-nav__bell svg { width: 20px; height: 20px; }
.ft .ft-nav__badge {
    position: absolute; top: 3px; right: 2px;
    min-width: 17px; height: 17px; padding: 0 4px;
    background: var(--ft-orange); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
    border-radius: 999px; box-shadow: 0 0 0 2px var(--ft-navy);
}
.ft .ft-nav__badge.is-zero { display: none; }

/* --- menu account (dropdown) --- */
.ft .ft-nav__account { position: relative; flex: 0 0 auto; }
.ft .ft-nav__account-btn {
    display: inline-flex; align-items: center; gap: 9px;
    height: 40px; padding: 0 10px 0 8px;
    color: #fff; background: rgba(255, 255, 255, .1);
    border: 0; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-size: 15px; font-weight: 600;
}
.ft .ft-nav__account-btn:hover { background: rgba(255, 255, 255, .18); }
.ft .ft-nav__avatar {
    flex: 0 0 auto;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--ft-orange); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.ft .ft-nav__avatar svg { width: 16px; height: 16px; }
.ft .ft-nav__account-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft .ft-nav__chev { width: 16px; height: 16px; transition: transform var(--ft-transition); }
.ft .ft-nav__account.is-open .ft-nav__chev { transform: rotate(180deg); }

.ft .ft-nav__dropdown {
    position: absolute; right: 0; top: calc(100% + 9px);
    min-width: 224px; padding: 8px;
    background: #fff; border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius-sm); box-shadow: var(--ft-shadow);
    display: none;
}
.ft .ft-nav__account.is-open .ft-nav__dropdown { display: block; }
.ft .ft-nav__dropitem {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border-radius: 9px;
    color: var(--ft-ink); font-size: 14px; font-weight: 500; text-decoration: none;
}
.ft .ft-nav__dropitem:hover { background: #f3f6fa; color: var(--ft-navy); }
.ft .ft-nav__dropitem svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--ft-muted); }
.ft .ft-nav__dropitem:hover svg { color: var(--ft-navy); }
.ft .ft-nav__dropsep { height: 1px; margin: 6px 6px; background: var(--ft-line); }
.ft .ft-nav__dropitem--danger,
.ft .ft-nav__dropitem--danger svg { color: var(--ft-danger); }
.ft .ft-nav__dropitem--danger:hover { background: var(--ft-danger-bg); color: var(--ft-danger); }
.ft .ft-nav__dropitem--danger:hover svg { color: var(--ft-danger); }

/* --- hamburger --- */
.ft .ft-nav__toggle {
    display: none;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    color: #fff; background: transparent; border: 0; cursor: pointer;
    border-radius: 10px;
}
.ft .ft-nav__toggle:hover { background: rgba(255, 255, 255, .12); }
.ft .ft-nav__toggle svg { width: 26px; height: 26px; }

/* --- responsive: < 860px → hamburger + pannello a tendina --- */
@media (max-width: 860px) {
    /* l'hamburger resta agganciato al bordo destro a ogni larghezza */
    .ft .ft-nav__toggle { display: inline-flex; margin-left: auto; }
    .ft .ft-nav__spacer { display: none; }
    .ft .ft-nav__menu {
        position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: 8px;
        padding: 14px 16px 18px;
        background: var(--ft-navy-700);
        border-top: 1px solid rgba(255, 255, 255, .08);
        box-shadow: 0 16px 28px rgba(0, 0, 0, .24);
        display: none;
    }
    .ft.ft-nav.is-open .ft-nav__menu { display: flex; }
    .ft .ft-nav__search input[type="text"] { width: 100%; }
    .ft .ft-nav__link,
    .ft .ft-nav__cta { width: 100%; height: 46px; justify-content: center; }
    .ft .ft-nav__bell { width: auto; justify-content: flex-start; gap: 10px; padding: 0 4px; border-radius: 10px; }
    .ft .ft-nav__account { width: 100%; }
    .ft .ft-nav__account-btn { width: 100%; justify-content: space-between; }
    .ft .ft-nav__dropdown {
        position: static; display: block;
        min-width: 0; margin-top: 6px; padding: 4px;
        background: rgba(0, 0, 0, .14); border: 0; box-shadow: none;
    }
    .ft .ft-nav__dropitem { color: #fff; }
    .ft .ft-nav__dropitem svg { color: rgba(255, 255, 255, .85); }
    .ft .ft-nav__dropitem:hover { background: rgba(255, 255, 255, .12); color: #fff; }
    .ft .ft-nav__dropitem:hover svg { color: #fff; }
    .ft .ft-nav__dropsep { background: rgba(255, 255, 255, .14); }
    .ft .ft-nav__dropitem--danger,
    .ft .ft-nav__dropitem--danger svg { color: #ffb4ab; }
    .ft .ft-nav__dropitem--danger:hover { background: rgba(255, 255, 255, .12); color: #ffb4ab; }
}

/* =============================================================================
   Breadcrumb / titolo pagina (.ft-crumbs) — sotto la navbar.
   ========================================================================== */
.ft.ft-crumbs {
    background: #f4f7fb;
    border-bottom: 1px solid var(--ft-line);
    /* resta agganciato sotto la navbar (alta 66px), come la navbar stessa */
    position: sticky;
    top: 66px;
    z-index: 999; /* sotto la navbar (1000), sopra il contenuto */
}
.ft .ft-crumbs__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 13px 20px;
}
.ft .ft-crumbs__item {
    color: var(--ft-muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}
.ft .ft-crumbs__item:hover { color: var(--ft-navy); }
.ft .ft-crumbs__sep { color: var(--ft-blue-grey); font-size: 14px; }
.ft .ft-crumbs__current {
    color: var(--ft-navy);
    font-weight: 700;
    font-size: 14px;
    text-transform: capitalize;
}

/* =============================================================================
   Footer del sito (.ft-footer) — navy, ordinato, responsive.
   ========================================================================== */
.ft.ft-footer {
    background: var(--ft-navy);
    color: #c6d3e1;
}
.ft .ft-footer__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 36px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 52px 20px 36px;
}
.ft .ft-footer__brand { max-width: 280px; }
.ft .ft-footer__logo {
    display: block;
    width: 150px;
    height: 34px;
    background: url("../img/fritrak/fritrak-logo-beta.png") left center / contain no-repeat;
}
.ft .ft-footer__tagline {
    margin: 12px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ft-blue-grey);
}
.ft .ft-footer__social { display: flex; gap: 10px; margin-top: 18px; }
.ft .ft-footer__social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255, 255, 255, .08); color: #fff;
    transition: background var(--ft-transition);
}
.ft .ft-footer__social a:hover { background: var(--ft-orange); }
.ft .ft-footer__social svg { width: 18px; height: 18px; }

.ft .ft-footer__title {
    margin: 0 0 14px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #fff;
}
.ft .ft-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ft .ft-footer__links a {
    color: #c6d3e1;
    font-size: 14px;
    text-decoration: none;
    transition: color var(--ft-transition);
}
.ft .ft-footer__links a:hover { color: #fff; }

.ft .ft-footer__bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 28px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 22px 20px 28px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.ft .ft-footer__copy { margin: 0; font-size: 13px; color: #93a6bb; text-align: center; }

@media (max-width: 860px) {
    .ft .ft-footer__inner { grid-template-columns: 1fr 1fr; gap: 30px 24px; padding: 40px 20px 28px; }
    .ft .ft-footer__brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 520px) {
    .ft .ft-footer__inner { grid-template-columns: 1fr; }
}

/* =============================================================================
   Barra cookie (.ft-cookie) — fissa in basso. La persistenza è client-side
   (cookie ft_cookie_consent, vedi cookie_dialog.tpl): una volta accettata non
   riappare.
   ========================================================================== */
.ft.ft-cookie {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1100;
    background: var(--ft-navy-700);
    color: #e7eef6;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .22);
}
.ft.ft-cookie[hidden] { display: none; }
.ft .ft-cookie__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 18px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 20px;
}
.ft .ft-cookie__text {
    flex: 1 1 320px;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #d7e2ee;
}
.ft .ft-cookie__text a { color: #fff; font-weight: 600; text-decoration: underline; }
.ft .ft-cookie__actions { flex: 0 0 auto; display: flex; gap: 10px; }
.ft .ft-cookie__btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 42px; padding: 0 24px;
    color: #fff; background: var(--ft-orange);
    font-size: 15px; font-weight: 700; text-decoration: none;
    border-radius: 999px; white-space: nowrap;
    transition: background var(--ft-transition);
}
.ft .ft-cookie__btn:hover { color: #fff; background: var(--ft-orange-600); }
@media (max-width: 560px) {
    .ft .ft-cookie__actions { width: 100%; }
    .ft .ft-cookie__btn { width: 100%; }
}

/* =============================================================================
   Layout del sito: footer "sticky" in fondo, senza spazi vuoti.
   Il body legacy aveva `margin-bottom: 80px` (→ striscia bianca SOTTO il footer)
   e `#wrapper { min-height: 100% }` (inefficace). Qui rendiamo `#wrapper` una
   colonna flex alta quanto la viewport e spingiamo il footer in fondo con
   `margin-top: auto`: niente bianco sotto, niente bisogno dei vecchi <br>.
   Caricato solo sul sito (fritrak-ui.css è linkato solo in index.tpl).
   ========================================================================== */
body { margin-bottom: 0; }
/* `div#wrapper` per battere la specificità della regola legacy
   `div#wrapper { min-height:100% }` (altrimenti lo sticky non si attiva). */
div#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin-bottom: 0;
}
div#wrapper > .ft-footer { margin-top: auto; }

/* Respiro fra il chrome (navbar/breadcrumb) e il contenuto delle pagine legacy,
   che altrimenti resta troppo "incollato". Le pagine .ft-auth (login,
   registrazione, recupero/reset password) hanno gia' la loro spaziatura: escluse. */
#main.container:not(:has(.ft-auth)) {
    padding-top: clamp(22px, 2.6vw, 34px);
}

/* =============================================================================
   Home — sezioni. Stile PULITO: sezioni su sfondo bianco, separate solo da una
   hairline e da spazio (niente bande grigie). Intestazione centrata condivisa.
   ========================================================================== */
.ft.ft-section {
    padding: clamp(40px, 6vw, 72px) 20px;
    border-top: 1px solid var(--ft-line);
}
.ft .ft-section__inner { max-width: 1180px; margin: 0 auto; }
.ft .ft-section__head { max-width: 660px; margin: 0 auto clamp(28px, 4vw, 44px); text-align: center; }
.ft .ft-section__eyebrow {
    margin: 0 0 10px;
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--ft-blue-grey);
}
.ft .ft-section__title {
    margin: 0;
    font-size: clamp(23px, 3vw, 31px); font-weight: 700;
    letter-spacing: -.01em; line-height: 1.15; color: var(--ft-navy);
}
.ft .ft-section__sub { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--ft-muted); }

/* ---- "Ci hanno gia' scelto": strip di marchi ---- */
.ft .ft-trusted__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: clamp(18px, 2.4vw, 32px) clamp(10px, 2vw, 24px);
}
.ft .ft-trusted__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 11px; }
.ft .ft-trusted__logo {
    width: 88px; height: 88px; border-radius: 50%;
    background: #fff; border: 1px solid var(--ft-line); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    transition: transform var(--ft-transition), box-shadow var(--ft-transition), border-color var(--ft-transition);
}
.ft .ft-trusted__item:hover .ft-trusted__logo { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(14, 56, 92, .12); border-color: var(--ft-blue-grey); }
.ft .ft-trusted__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft .ft-trusted__name {
    font-size: 13px; font-weight: 600; color: var(--ft-navy); line-height: 1.3; max-width: 15ch;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ft .ft-trusted__city { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ft-muted); }
.ft .ft-trusted__city svg { width: 12px; height: 12px; flex: 0 0 auto; color: var(--ft-blue-grey); }
@media (max-width: 880px) { .ft .ft-trusted__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .ft .ft-trusted__grid { grid-template-columns: repeat(2, 1fr); } .ft .ft-trusted__logo { width: 74px; height: 74px; } }

/* ---- Recensioni ---- */
.ft .ft-reviews__group { margin-bottom: clamp(24px, 3vw, 36px); }
.ft .ft-reviews__group:last-child { margin-bottom: 0; }
.ft .ft-reviews__grouptitle {
    margin: 0 0 16px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em; color: var(--ft-navy-300);
}
.ft .ft-reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.ft .ft-review {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--ft-line); border-radius: var(--ft-radius-sm);
    padding: 22px 22px 18px; box-shadow: 0 1px 2px rgba(14, 56, 92, .04);
    transition: transform var(--ft-transition), box-shadow var(--ft-transition);
}
.ft .ft-review:hover { transform: translateY(-2px); box-shadow: var(--ft-shadow); }
.ft .ft-review__quote { font-family: Georgia, "Times New Roman", serif; font-size: 40px; line-height: .8; color: #d6deea; height: 22px; }
.ft .ft-review__text { flex: 1; margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--ft-ink); }
.ft .ft-review__author { margin: 0; font-size: 14px; font-weight: 700; color: var(--ft-navy); }
.ft .ft-review__meta { margin: 2px 0 0; font-size: 12px; color: var(--ft-muted); }

/* ---- Bacheca (ultime richieste) ---- */
.ft .ft-requests { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ft .ft-request {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    grid-template-areas: "route merce ago cta";
    align-items: center;
    gap: 10px 18px;
    padding: 14px 16px;
    background: #fff; border: 1px solid var(--ft-line); border-radius: var(--ft-radius-sm);
    transition: border-color var(--ft-transition), box-shadow var(--ft-transition);
}
.ft .ft-request:hover { border-color: var(--ft-blue-grey); box-shadow: 0 6px 18px rgba(14, 56, 92, .07); }
.ft .ft-request__route { grid-area: route; display: flex; align-items: center; gap: 10px; min-width: 0; }
.ft .ft-request__loc { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ft-ink); min-width: 0; }
.ft .ft-request__loc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft .ft-request__pin { flex: 0 0 auto; width: 16px; height: 16px; }
.ft .ft-request__pin--from { color: #1a9e54; }
.ft .ft-request__pin--to { color: var(--ft-danger); }
.ft .ft-request__arrow { flex: 0 0 auto; width: 18px; height: 18px; color: var(--ft-blue-grey); }
.ft .ft-request__merce {
    grid-area: merce;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; color: var(--ft-navy);
    background: #eef3f8; border-radius: 999px; padding: 5px 12px; white-space: nowrap;
}
.ft .ft-request__merce svg { flex: 0 0 auto; width: 15px; height: 15px; }
.ft .ft-request__ago { grid-area: ago; font-size: 12.5px; color: var(--ft-muted); white-space: nowrap; }
.ft .ft-request__cta {
    grid-area: cta;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--ft-orange); color: #fff; text-decoration: none;
    transition: background var(--ft-transition);
}
.ft .ft-request__cta:hover { background: var(--ft-orange-600); color: #fff; }
.ft .ft-request__cta svg { width: 18px; height: 18px; }
.ft .ft-requests__more { margin-top: 22px; text-align: center; }
@media (max-width: 720px) {
    /* da mobile: merce IN TESTA (per importanza), poi percorso, poi tempo + CTA */
    .ft .ft-request {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "merce merce"
            "route route"
            "ago   cta";
        gap: 11px 12px;
    }
    .ft .ft-request__merce { justify-self: start; font-size: 13.5px; }
    .ft .ft-request__route { flex-direction: column; align-items: flex-start; gap: 7px; }
    .ft .ft-request__arrow { transform: rotate(90deg); }
    .ft .ft-request__ago { align-self: center; }
    .ft .ft-request__cta { justify-self: end; align-self: center; }
}

/* ---- Blog ---- */
.ft .ft-blog__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ft .ft-blog__card {
    display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 1px solid var(--ft-line); border-radius: var(--ft-radius-sm);
    text-decoration: none; transition: transform var(--ft-transition), box-shadow var(--ft-transition), border-color var(--ft-transition);
}
.ft .ft-blog__card:hover { transform: translateY(-3px); box-shadow: var(--ft-shadow); border-color: var(--ft-blue-grey); }
.ft .ft-blog__media {
    position: relative; aspect-ratio: 16 / 10; overflow: hidden;
    /* segnaposto (icona immagine) sotto la foto: si vede se il post non ha foto
       o se l'immagine è rotta (l'<img> viene rimossa via onerror). */
    background: #e7eef6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' fill='none' stroke='%2383a0b9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.8'/%3E%3Cpath d='M21 15l-5-5L7 19'/%3E%3C/svg%3E") center / 44px no-repeat;
}
.ft .ft-blog__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft .ft-blog__tag {
    position: absolute; top: 10px; left: 10px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: #fff; background: rgba(14, 56, 92, .9); border-radius: 999px; padding: 4px 10px;
}
.ft .ft-blog__body { padding: 16px 16px 18px; }
.ft .ft-blog__title {
    margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ft-navy);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ft .ft-blog__more { margin-top: 26px; text-align: center; }
.ft .ft-blog__empty { text-align: center; color: var(--ft-muted); font-size: 15px; }
@media (max-width: 980px) { .ft .ft-blog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ft .ft-blog__grid { grid-template-columns: 1fr; } }

/* ---- Blog: pagina listing (/blog) ---- */
.ft .ft-blog__grid--index { grid-template-columns: repeat(3, 1fr); }
.ft .ft-blog__title--index {
    -webkit-line-clamp: 2; font-size: 16px; margin: 0 0 8px;
}
.ft .ft-blog__excerpt {
    margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ft-muted);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ft .ft-blog__readmore {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 12px;
    font-size: 13px; font-weight: 700; color: var(--ft-orange);
}
.ft .ft-blog__readmore svg { transition: transform var(--ft-transition); }
.ft .ft-blog__card:hover .ft-blog__readmore svg { transform: translateX(3px); }
/* i tag/rubriche come chip navigabili */
.ft .ft-blogtags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.ft .ft-blogtag {
    font-size: 13px; font-weight: 600; color: var(--ft-navy); text-decoration: none;
    background: #eef3f8; border: 1px solid var(--ft-line); border-radius: 999px;
    padding: 6px 14px; transition: background var(--ft-transition), color var(--ft-transition), border-color var(--ft-transition);
}
.ft .ft-blogtag:hover { background: var(--ft-navy); color: #fff; border-color: var(--ft-navy); }
/* paginazione */
.ft .ft-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 34px 0 4px; }
.ft .ft-pagination__link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 12px; box-sizing: border-box;
    font-size: 14px; font-weight: 700; color: var(--ft-navy); text-decoration: none;
    background: #fff; border: 1px solid var(--ft-line); border-radius: 10px;
    transition: background var(--ft-transition), color var(--ft-transition), border-color var(--ft-transition);
}
.ft .ft-pagination__link:hover { border-color: var(--ft-blue-grey); background: #f4f8fb; }
.ft .ft-pagination__link.is-active {
    background: var(--ft-navy); color: #fff; border-color: var(--ft-navy); cursor: default;
}
@media (max-width: 860px) { .ft .ft-blog__grid--index { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .ft .ft-blog__grid--index { grid-template-columns: 1fr; } }

/* ---- Blog: articolo singolo (/blog/<id>/) ---- */
/* .ft-article è sullo stesso elemento di .ft → selettore composto per il wrapper */
.ft.ft-article { max-width: 820px; margin-left: auto; margin-right: auto; }
.ft .ft-article__head { margin: 14px 0 22px; }
.ft .ft-article__title {
    font-size: clamp(26px, 4vw, 34px); font-weight: 800; line-height: 1.2;
    color: var(--ft-navy); letter-spacing: -.015em; margin: 10px 0 0;
}
.ft .ft-article__meta { font-size: 13.5px; color: var(--ft-muted); margin: 12px 0 0; font-weight: 600; }
.ft .ft-article__hero {
    border-radius: var(--ft-radius); overflow: hidden; margin: 0 0 26px;
    background: #e7eef6; border: 1px solid var(--ft-line);
}
.ft .ft-article__hero img { display: block; width: 100%; height: auto; }
.ft .ft-article__body { margin-bottom: 30px; }
/* le immagini dentro il corpo articolo non devono sfondare */
.ft .ft-article__body img { max-width: 100%; height: auto; border-radius: var(--ft-radius-sm); }
/* share */
.ft .ft-share {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    padding: 18px 0; border-top: 1px solid var(--ft-line); border-bottom: 1px solid var(--ft-line);
}
.ft .ft-share__label { font-size: 13px; font-weight: 700; color: var(--ft-navy); margin-right: 4px; }
.ft .ft-share__btn {
    display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
    font-size: 13.5px; font-weight: 700; color: #fff; border-radius: 10px; padding: 9px 16px;
    transition: transform var(--ft-transition), filter var(--ft-transition);
}
.ft .ft-share__btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.ft .ft-share__btn--fb { background: #1877f2; }
.ft .ft-share__btn--wa { background: #25d366; }
/* correlati */
.ft .ft-related { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--ft-line); }
.ft .ft-related__title { font-size: 19px; font-weight: 800; color: var(--ft-navy); margin: 0 0 18px; }

/* ---- bottone compatto auto-largo (CTA "Mostra tutti", ecc.) ---- */
.ft .ft-btn--inline { display: inline-flex; width: auto; min-height: 46px; padding: 0 24px; }

/* =============================================================================
   Home — HERO "a due strade": la scelta principale (spedisci / trasporta).
   Sostituisce i vecchi 2 tastoni + la foto panoramica decorativa.
   ========================================================================== */
.ft.ft-hero { padding: clamp(30px, 5vw, 56px) 20px clamp(10px, 2vw, 20px); }
.ft .ft-hero__inner { max-width: 1120px; margin: 0 auto; }
.ft .ft-hero__top {
    display: grid; grid-template-columns: 1.02fr .98fr;
    gap: clamp(20px, 4vw, 52px); align-items: center;
    margin-bottom: clamp(26px, 4vw, 42px);
}
.ft .ft-hero__title {
    margin: 0; max-width: 16ch;
    font-size: clamp(28px, 4vw, 43px); font-weight: 800;
    letter-spacing: -.02em; line-height: 1.1; color: var(--ft-navy);
}
.ft .ft-hero__sub {
    margin: 16px 0 0; max-width: 48ch;
    font-size: clamp(16px, 1.7vw, 18px); line-height: 1.55; color: var(--ft-muted);
}
/* slot illustrazione hero: pronto sia per SVG (segnaposto) sia per una <img> reale */
.ft .ft-hero__art svg,
.ft .ft-hero__art img { width: 100%; height: auto; display: block; border-radius: var(--ft-radius); }
.ft .ft-hero__art img { object-fit: cover; }
@media (max-width: 760px) {
    .ft .ft-hero__top { grid-template-columns: 1fr; text-align: center; gap: 22px; }
    .ft .ft-hero__title, .ft .ft-hero__sub { margin-left: auto; margin-right: auto; }
    .ft .ft-hero__art { max-width: 340px; margin: 0 auto; }
}
@media (max-width: 460px) { .ft .ft-hero__art { display: none; } }

.ft .ft-paths { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 880px; margin: 0 auto; text-align: left; }
.ft .ft-path {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: clamp(22px, 3vw, 32px);
    background: #fff; border: 1px solid var(--ft-line); border-radius: var(--ft-radius);
    transition: transform var(--ft-transition), box-shadow var(--ft-transition), border-color var(--ft-transition);
}
.ft .ft-path:hover { transform: translateY(-3px); box-shadow: var(--ft-shadow); border-color: var(--ft-blue-grey); }
.ft .ft-path__icon {
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 15px; margin-bottom: 16px;
}
.ft .ft-path__icon svg { width: 30px; height: 30px; }
.ft .ft-path__title { margin: 0 0 6px; font-size: clamp(19px, 2.2vw, 23px); font-weight: 700; color: var(--ft-navy); }
.ft .ft-path__text { margin: 0 0 22px; font-size: 15px; line-height: 1.5; color: var(--ft-muted); }
.ft .ft-path .ft-btn { margin-top: auto; }
.ft .ft-path--ship .ft-path__icon { background: #fff2e0; color: var(--ft-orange-600); }
.ft .ft-path--carry .ft-path__icon { background: #e9f0f7; color: var(--ft-navy); }

.ft .ft-btn--navy { color: #fff; background: var(--ft-navy); }
.ft .ft-btn--navy:hover { color: #fff; background: var(--ft-navy-700); }

@media (max-width: 680px) { .ft .ft-paths { grid-template-columns: 1fr; } }

/* ---- Fascia numeri (riprova sociale) ---- */
.ft.ft-stats { padding: clamp(20px, 3vw, 30px) 20px; }
.ft .ft-stats__inner {
    max-width: 880px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    text-align: center;
}
.ft .ft-stat__num { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; color: var(--ft-navy); line-height: 1; letter-spacing: -.01em; }
.ft .ft-stat__label { margin-top: 7px; font-size: 13.5px; color: var(--ft-muted); }
@media (max-width: 520px) {
    .ft .ft-stats__inner { grid-template-columns: 1fr; gap: 18px; }
}

/* ---- "Come funziona": 3 step ---- */
.ft .ft-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 28px); counter-reset: ftstep; }
.ft .ft-step-card { text-align: center; padding: 4px 8px; }
.ft .ft-step-card__icon {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 18px; margin-bottom: 16px;
    background: #eef3f8; color: var(--ft-navy);
}
.ft .ft-step-card__icon svg { width: 30px; height: 30px; }
.ft .ft-step-card__n {
    position: absolute; top: -7px; right: -7px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--ft-orange); color: #fff;
    font-size: 13px; font-weight: 700; line-height: 24px;
    box-shadow: 0 0 0 3px #fff;
}
.ft .ft-step-card__title { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--ft-navy); }
.ft .ft-step-card__text { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ft-muted); }
@media (max-width: 680px) {
    .ft .ft-steps { grid-template-columns: 1fr; gap: 22px; max-width: 360px; margin: 0 auto; }
}

/* ---- Bacheca: "carica altri" su mobile (riduce la lista) ---- */
.ft .ft-requests__more { margin-top: 22px; text-align: center; }
.ft .ft-requests__more button {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 46px; padding: 0 22px;
    background: #fff; color: var(--ft-navy);
    border: 1px solid var(--ft-line); border-radius: var(--ft-radius-sm);
    font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.ft .ft-requests__more button:hover { border-color: var(--ft-navy-300); background: #f8fafc; }
@media (max-width: 720px) {
    .ft .ft-requests:not(.is-expanded) .ft-request:nth-child(n+7) { display: none; }
}
@media (min-width: 721px) { .ft .ft-requests__more { display: none; } }

/* ---- Spinner (loader) ---- */
.ft .ft-spinner {
    display: inline-block; width: 17px; height: 17px;
    border: 2.5px solid rgba(14, 56, 92, .18);
    border-top-color: var(--ft-navy);
    border-radius: 50%;
    animation: ft-spin .6s linear infinite;
    vertical-align: -3px;
}
@keyframes ft-spin { to { transform: rotate(360deg); } }

/* ---- Spaziatura sezioni: stato vuoto blog più compatto ---- */
.ft .ft-blog__empty { padding: 8px 0 4px; }

/* =============================================================================
   Pagina /trasporto — scegli la categoria merceologica.
   ========================================================================== */
.ft.ft-trasporto { padding: clamp(6px, 1.5vw, 16px) 20px clamp(34px, 5vw, 54px); }
.ft .ft-trasporto__inner { max-width: 1080px; margin: 0 auto; }

.ft .ft-trasporto__search { position: relative; max-width: 560px; margin: 0 auto clamp(24px, 3.5vw, 36px); }
.ft .ft-trasporto__search svg {
    position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; color: var(--ft-muted); pointer-events: none;
}
.ft .ft-trasporto__search .ft-input { height: 54px; padding-left: 48px; }

.ft .ft-cats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr; /* tutte le righe alla stessa altezza (la più alta) → card uniformi */
    gap: 12px;
}
@media (max-width: 860px) { .ft .ft-cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .ft .ft-cats { grid-template-columns: 1fr; grid-auto-rows: auto; } }
.ft .ft-cat {
    display: flex; align-items: stretch; min-height: 104px;
    background: #fff; border: 1px solid var(--ft-line); border-radius: var(--ft-radius-sm);
    overflow: hidden; text-decoration: none;
    transition: transform var(--ft-transition), box-shadow var(--ft-transition), border-color var(--ft-transition);
}
.ft .ft-cat:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(14, 56, 92, .1); border-color: var(--ft-blue-grey); }

/* Le thumbnail originali sono icone BIANCHE su sfondo trasparente: vanno su un
   tile scuro (navy) per risaltare, come nel layout originale. */
.ft .ft-cat__media {
    flex: 0 0 84px; align-self: stretch;
    display: flex; align-items: center; justify-content: center;
    background: var(--ft-navy);
    padding: 8px;
    transition: background-color var(--ft-transition);
}
.ft .ft-cat:hover .ft-cat__media { background-color: var(--ft-orange); }
.ft .ft-cat__media img {
    max-width: 100%; max-height: 60px; width: auto; height: auto;
    object-fit: contain; display: block;
}
/* Segnaposto se l'immagine manca/è rotta (es. in produzione un file assente). */
.ft .ft-cat__media--empty::after {
    content: ""; width: 30px; height: 30px; opacity: .55;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5 9 5 9-5z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5 9 5 9-5z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Corpo a centro verticale: tutte le card hanno la stessa altezza (min-height su
   .ft-cat) e il contenuto è allineato in ALTO, così i titoli di una stessa riga
   sono tutti sulla stessa linea (struttura omogenea anche con testi di lunghezza
   diversa). */
.ft .ft-cat__body { min-width: 0; padding: 11px 14px; display: flex; flex-direction: column; justify-content: flex-start; }
.ft .ft-cat__title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 15.5px; font-weight: 700; color: var(--ft-navy); margin-bottom: 3px;
}
.ft .ft-cat__star { color: var(--ft-blue-grey); font-weight: 400; }

/* Esempi: la lista del DB resa inline (separata da "·"), mostrata PER INTERO (no
   troncamento). L'omogeneità delle altezze è data da grid-auto-rows:1fr sulla
   griglia. Le liste del DB hanno uno `style='padding-left:15px'` inline (che
   rientrerebbe il testo e lo disallineerebbe dal titolo): lo annulliamo con
   !important perché lo stile inline non si batte per specificità. */
.ft .ft-cat__examples {
    font-size: 12.5px; line-height: 1.45; color: var(--ft-muted);
}
.ft .ft-cat__examples ul { margin: 0; padding: 0 !important; list-style: none; display: inline; }
.ft .ft-cat__examples li { display: inline; }
.ft .ft-cat__examples li:not(:last-child)::after { content: " · "; color: var(--ft-blue-grey); }
.ft .ft-cat__examples .div_note_piccole { display: none; }

.ft .ft-cats__empty { text-align: center; color: var(--ft-muted); font-size: 15px; padding: 30px 0; }
.ft .ft-cats__empty a { color: var(--ft-navy); font-weight: 600; }
.ft .ft-trasporto__foot { margin-top: 28px; text-align: center; }

@media (max-width: 460px) {
    .ft .ft-cat__media { flex-basis: 72px; }
    .ft .ft-cat__media img { max-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
    .ft .ft-input, .ft .ft-btn, .ft .ft-tile,
    .ft .ft-nav__cta, .ft .ft-nav__chev,
    .ft .ft-footer__social a, .ft .ft-footer__links a, .ft .ft-cookie__btn,
    .ft .ft-trusted__logo, .ft .ft-review, .ft .ft-request, .ft .ft-blog__card,
    .ft .ft-path, .ft .ft-cat { transition: none; }
}

/* ==========================================================================
   Pagine di contenuto (link in footer: chi siamo, lavora con noi, contatti,
   FAQ, partner, press, booklet, condizioni, cookie, privacy).
   Header pagina condiviso + tipografia "prose" + componenti specifici.
   Restiamo dentro il layout del sito (navbar/breadcrumb/footer): restyliamo
   solo il contenuto, in una card .ft pulita.
   ========================================================================== */
.ft.ft-page { padding: clamp(8px, 1.6vw, 18px) 20px clamp(40px, 6vw, 66px); }
.ft .ft-page__inner { max-width: 880px; margin: 0 auto; }
.ft .ft-page--wide .ft-page__inner { max-width: 1080px; }

.ft .ft-page__head { text-align: center; margin-bottom: clamp(26px, 4vw, 42px); }
.ft .ft-page__eyebrow {
    display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ft-orange-600); margin-bottom: 9px;
}
.ft .ft-page__title { font-size: clamp(26px, 4.4vw, 40px); line-height: 1.12; font-weight: 800; color: var(--ft-navy); margin: 0; }
.ft .ft-page__lead { margin: 13px auto 0; max-width: 620px; font-size: clamp(15px, 1.8vw, 17px); line-height: 1.6; color: var(--ft-muted); }

.ft .ft-page__card {
    background: #fff; border: 1px solid var(--ft-line); border-radius: var(--ft-radius);
    padding: clamp(22px, 3.4vw, 40px); box-shadow: 0 1px 2px rgba(14, 56, 92, .04);
}
.ft .ft-page__cta { margin-top: clamp(22px, 3vw, 30px); text-align: center; }

/* --- Prose: testo lungo (chi siamo, legale) ----------------------------- */
.ft .ft-prose { color: var(--ft-ink); font-size: 15.5px; line-height: 1.7; }
.ft .ft-prose > :first-child { margin-top: 0; }
.ft .ft-prose > :last-child { margin-bottom: 0; }
.ft .ft-prose p { margin: 0 0 15px; }
.ft .ft-prose a { color: var(--ft-info); text-decoration: underline; text-underline-offset: 2px; }
.ft .ft-prose a:hover { color: var(--ft-navy); }
.ft .ft-prose strong, .ft .ft-prose b { color: var(--ft-navy); font-weight: 700; }
.ft .ft-prose ul, .ft .ft-prose ol { margin: 0 0 15px; padding-left: 22px; }
.ft .ft-prose li { margin-bottom: 7px; }
.ft .ft-prose li::marker { color: var(--ft-blue-grey); }
.ft .ft-prose h2 { font-size: 21px; font-weight: 800; color: var(--ft-navy); line-height: 1.25; margin: 30px 0 12px; }
.ft .ft-prose h3 { font-size: 17px; font-weight: 700; color: var(--ft-navy); line-height: 1.3; margin: 22px 0 8px; }
.ft .ft-prose h2:first-child, .ft .ft-prose h3:first-child { margin-top: 0; }
.ft .ft-prose hr { border: 0; border-top: 1px solid var(--ft-line); margin: 26px 0; }

/* Hook legacy (#sezione/#domanda/#risposta/.blu-sfondo/#logo_text) usati nei
   template legali che AVVOLGIAMO senza riscrivere: in fritrak.css sono selettori
   ID, quindi qui serve !important per riallinearli al nuovo stile. */
.ft .ft-prose [id="sezione"] { font: 800 20px/1.3 var(--ft-font) !important; color: var(--ft-navy) !important; margin: 28px 0 12px !important; }
.ft .ft-prose [id="sezione"]:first-child { margin-top: 0 !important; }
.ft .ft-prose [id="domanda"] { font: 700 16px/1.4 var(--ft-font) !important; color: var(--ft-navy) !important; margin: 18px 0 4px !important; }
.ft .ft-prose [id="risposta"] { font-family: var(--ft-font) !important; margin: 0 0 14px !important; }
.ft .ft-prose .blu-sfondo { color: inherit; background: none; }
.ft .ft-prose [id="logo_text"] { height: 1.05em !important; width: auto !important; margin: 0 1px !important; padding: 0 !important; vertical-align: -2px; }

/* --- FAQ: accordion nativo <details>/<summary> (niente JS) --------------- */
.ft .ft-faq { display: flex; flex-direction: column; gap: 10px; }
.ft .ft-faq__group { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ft-blue-grey); margin: 24px 0 2px; }
.ft .ft-faq__group:first-child { margin-top: 0; }
.ft .ft-faq details { border: 1px solid var(--ft-line); border-radius: var(--ft-radius-sm); background: #fff; overflow: hidden; }
.ft .ft-faq details[open] { border-color: var(--ft-blue-grey); }
.ft .ft-faq summary {
    list-style: none; cursor: pointer; position: relative;
    padding: 15px 48px 15px 18px; font-weight: 700; color: var(--ft-navy); font-size: 15.5px;
    transition: color var(--ft-transition);
}
.ft .ft-faq summary::-webkit-details-marker { display: none; }
.ft .ft-faq summary:hover { color: var(--ft-orange-600); }
.ft .ft-faq summary::after {
    content: ""; position: absolute; right: 19px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
    border-right: 2px solid var(--ft-blue-grey); border-bottom: 2px solid var(--ft-blue-grey);
    transform: rotate(45deg); transition: transform var(--ft-transition);
}
.ft .ft-faq details[open] summary::after { transform: rotate(-135deg); }
.ft .ft-faq__a { padding: 0 18px 16px; color: var(--ft-ink); line-height: 1.65; font-size: 14.5px; }
.ft .ft-faq__a a { color: var(--ft-info); text-decoration: underline; }

/* --- Contatti: card con icona ------------------------------------------- */
.ft .ft-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.ft .ft-contact-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--ft-line); border-radius: var(--ft-radius-sm); background: #fff; }
.ft .ft-contact-card__ic { flex: 0 0 42px; height: 42px; border-radius: 11px; background: var(--ft-navy); color: #fff; display: flex; align-items: center; justify-content: center; }
.ft .ft-contact-card__ic svg { width: 21px; height: 21px; }
.ft .ft-contact-card__label { display: block; font-size: 12.5px; color: var(--ft-muted); margin-bottom: 3px; }
.ft .ft-contact-card__value { font-size: 15.5px; font-weight: 700; color: var(--ft-navy); text-decoration: none; word-break: break-word; }
.ft a.ft-contact-card__value:hover { color: var(--ft-orange-600); text-decoration: underline; }

/* --- Partner: griglia di loghi ------------------------------------------ */
.ft .ft-partners { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 14px; }
.ft .ft-partner {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 11px;
    padding: 22px 16px; border: 1px solid var(--ft-line); border-radius: var(--ft-radius-sm);
    background: #fff; text-decoration: none;
    transition: transform var(--ft-transition), box-shadow var(--ft-transition), border-color var(--ft-transition);
}
.ft .ft-partner:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(14, 56, 92, .1); border-color: var(--ft-blue-grey); }
.ft .ft-partner__logo { height: 54px; display: flex; align-items: center; justify-content: center; }
.ft .ft-partner__logo img { max-height: 54px; max-width: 150px; width: auto; object-fit: contain; }
.ft .ft-partner__name { font-size: 13px; color: var(--ft-muted); line-height: 1.4; }

/* --- Download: card con icona (booklet, press) -------------------------- */
.ft .ft-downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.ft .ft-download {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
    padding: 24px 18px; border: 1px solid var(--ft-line); border-radius: var(--ft-radius-sm);
    background: #fff; text-decoration: none; color: var(--ft-navy);
    transition: transform var(--ft-transition), box-shadow var(--ft-transition), border-color var(--ft-transition);
}
.ft .ft-download:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(14, 56, 92, .1); border-color: var(--ft-blue-grey); }
.ft .ft-download__ic { width: 60px; height: 60px; border-radius: 15px; background: var(--ft-navy); color: #fff; display: flex; align-items: center; justify-content: center; }
.ft .ft-download__ic svg { width: 30px; height: 30px; }
.ft .ft-download__title { font-weight: 700; font-size: 15.5px; color: var(--ft-navy); }
.ft .ft-download__meta { font-size: 12px; color: var(--ft-muted); display: flex; align-items: center; gap: 5px; }

/* --- Form a griglia (segnacollo e simili) ------------------------------- */
.ft .ft-formsec { font-size: 16px; font-weight: 800; color: var(--ft-navy); margin: 6px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--ft-line); }
.ft .ft-formgrid + .ft-formsec { margin-top: 30px; }
.ft .ft-formgrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px 16px; }
.ft .ft-formgrid > div { min-width: 0; }
.ft .ft-col-12 { grid-column: span 12; }
.ft .ft-col-11 { grid-column: span 11; }
.ft .ft-col-10 { grid-column: span 10; }
.ft .ft-col-9  { grid-column: span 9; }
.ft .ft-col-8  { grid-column: span 8; }
.ft .ft-col-7  { grid-column: span 7; }
.ft .ft-col-6  { grid-column: span 6; }
.ft .ft-col-5  { grid-column: span 5; }
.ft .ft-col-4  { grid-column: span 4; }
.ft .ft-col-3  { grid-column: span 3; }
.ft .ft-col-2  { grid-column: span 2; }
.ft .ft-formactions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.ft .ft-formactions .ft-btn { flex: 1 1 220px; }
/* Tablet: 6 colonne → i campi corti (prov/cap/paese) restano in riga da 3. */
@media (max-width: 760px) {
    .ft .ft-formgrid { grid-template-columns: repeat(6, 1fr); }
    .ft .ft-formgrid > .ft-col-12,
    .ft .ft-formgrid > .ft-col-8,
    .ft .ft-formgrid > .ft-col-6,
    .ft .ft-formgrid > .ft-col-5 { grid-column: span 6; }
    .ft .ft-formgrid > .ft-col-4,
    .ft .ft-formgrid > .ft-col-3 { grid-column: span 3; }
    /* campi che su tablet/mobile devono andare a tutta larghezza (es. il Titolo,
       che su desktop è volutamente stretto ma sotto i 760px risulterebbe angusto) */
    .ft .ft-formgrid > .ft-col--full-sm { grid-column: 1 / -1; }
}
/* Telefono: tutto a colonna singola. */
@media (max-width: 460px) {
    .ft .ft-formgrid { grid-template-columns: 1fr; }
    .ft .ft-formgrid > .ft-col-12,
    .ft .ft-formgrid > .ft-col-8,
    .ft .ft-formgrid > .ft-col-6,
    .ft .ft-formgrid > .ft-col-4,
    .ft .ft-formgrid > .ft-col-3,
    .ft .ft-formgrid > .ft-col-2 { grid-column: 1 / -1; }
}

/* Mobile: le pagine .ft-page accumulano troppe gutter impilate (container 15 +
   page 20 + card 22 = 57px/lato → contenuto strozzato). Le riduciamo per dare
   più larghezza: azzero la gutter del container Bootstrap e stringo page+card. */
@media (max-width: 560px) {
    #main.container:has(.ft-page) { padding-left: 0; padding-right: 0; }
    .ft.ft-page { padding-left: 14px; padding-right: 14px; }
    .ft .ft-page__card { padding-left: 16px; padding-right: 16px; }
}

/* --- Pagina di ricerca (?pag=search) ------------------------------------ */
.ft .ft-searchbox { position: relative; max-width: 580px; margin: 0 auto clamp(26px, 4vw, 40px); }
.ft .ft-searchbox svg { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ft-muted); pointer-events: none; }
.ft .ft-searchbox .ft-input { height: 54px; padding-left: 48px; }

/* Intestazione di sezione (categorie / trasportatori): icona + titolo + conteggio,
   con una riga di base spessa che le separa nettamente. */
.ft .ft-searchsec { margin-top: clamp(30px, 4.5vw, 46px); }
.ft .ft-searchsec:first-of-type { margin-top: 0; }
.ft .ft-searchsec__head {
    display: flex; align-items: center; gap: 11px;
    margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--ft-line);
}
.ft .ft-searchsec__ic {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
    background: var(--ft-navy); color: #fff; display: flex; align-items: center; justify-content: center;
}
.ft .ft-searchsec__title { font-size: 17px; font-weight: 800; color: var(--ft-navy); }
.ft .ft-searchsec__count {
    margin-left: auto; font-size: 13px; font-weight: 700; color: var(--ft-navy-300);
    background: #eef2f7; padding: 3px 11px; border-radius: 999px;
}
.ft .ft-formsec__sub { font-weight: 400; color: var(--ft-muted); font-size: 13px; }

.ft .ft-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .ft .ft-results { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .ft .ft-results { grid-template-columns: repeat(2, 1fr); } }
.ft .ft-result {
    display: flex; flex-direction: column; background: #fff; overflow: hidden;
    border: 1px solid var(--ft-line); border-radius: var(--ft-radius-sm); text-decoration: none;
    transition: transform var(--ft-transition), box-shadow var(--ft-transition), border-color var(--ft-transition);
}
.ft .ft-result:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(14, 56, 92, .1); border-color: var(--ft-blue-grey); }
/* Box-logo prominente in alto: logo aziendale contenuto, o camioncino centrato come
   segnaposto. Se l'<img> fallisce, l'onerror la rimuove → :has() non matcha più →
   ricompare il camioncino. Box di altezza fissa = card uniformi anche con loghi misti. */
.ft .ft-result__media {
    height: 94px; display: flex; align-items: center; justify-content: center; padding: 14px;
    background: #fff; border-bottom: 1px solid var(--ft-line);
}
.ft .ft-result__logo { max-width: 100%; max-height: 100%; object-fit: contain; }
.ft .ft-result__truck { width: 38px; height: 38px; color: var(--ft-blue-grey); }
.ft .ft-result__media:has(.ft-result__logo) .ft-result__truck { display: none; }
.ft .ft-result__body { padding: 12px 14px 14px; min-width: 0; }
.ft .ft-result__name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: calc(1.3em * 2);
    font-weight: 700; color: var(--ft-navy); font-size: 14.5px; line-height: 1.3; margin-bottom: 5px;
}
.ft .ft-result:hover .ft-result__name { color: var(--ft-orange-600); }
.ft .ft-result__city { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ft-muted); }
.ft .ft-result__city svg { flex: 0 0 auto; color: var(--ft-blue-grey); }

.ft .ft-hint {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px;
    padding: 16px 18px; background: #f4f7fb; border: 1px solid var(--ft-line); border-radius: var(--ft-radius-sm);
}
.ft .ft-hint__text { color: var(--ft-ink); font-size: 14.5px; }
.ft .ft-hint__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.ft .ft-empty { text-align: center; padding: clamp(34px, 6vw, 64px) 20px; }
.ft .ft-empty > svg { width: 54px; height: 54px; color: var(--ft-blue-grey); opacity: .55; margin-bottom: 14px; }
.ft .ft-empty__title { font-size: 19px; font-weight: 700; color: var(--ft-navy); margin: 0 0 6px; }
.ft .ft-empty__text { color: var(--ft-muted); font-size: 15px; margin: 0; }
.ft .ft-empty__text a { color: var(--ft-info); text-decoration: underline; }

/* Modale .ft (overlay + card centrata) — sostituisce i modali Bootstrap legacy.
   Reso via markup dentro .ft, mostrato togliendo [hidden] con JS vanilla. */
.ft .ft-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ft .ft-modal[hidden] { display: none; }
.ft .ft-modal__backdrop { position: absolute; inset: 0; background: rgba(14, 30, 50, .55); }
.ft .ft-modal__card { position: relative; z-index: 1; width: 100%; max-width: 440px; background: #fff; border-radius: 16px; box-shadow: 0 24px 64px rgba(6, 20, 40, .32); padding: 28px; text-align: center; animation: ft-modal-in .18s ease-out; }
.ft .ft-modal__close { position: absolute; top: 10px; right: 14px; border: 0; background: transparent; font-size: 26px; line-height: 1; color: var(--ft-muted); cursor: pointer; padding: 4px; }
.ft .ft-modal__close:hover { color: var(--ft-navy); }
.ft .ft-modal__icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e8f5ee; color: #1f9d55; }
.ft .ft-modal__title { margin: 0 0 8px; font-size: 21px; font-weight: 800; color: var(--ft-navy); }
.ft .ft-modal__text { margin: 0 0 22px; color: var(--ft-ink); font-size: 15px; line-height: 1.55; }
.ft .ft-modal__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@keyframes ft-modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { .ft .ft-result { transition: none; } .ft .ft-modal__card { animation: none; } }

/* Notice .ft (avviso inline) — variante warn ambra (es. dati assicurativi mancanti) */
.ft .ft-notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; margin: 0 0 18px; border: 1px solid var(--ft-line); background: #fff; }
.ft .ft-notice__ic { flex: 0 0 auto; margin-top: 1px; }
.ft .ft-notice__body { min-width: 0; font-size: 14px; color: var(--ft-ink); }
.ft .ft-notice__body strong { display: block; margin-bottom: 4px; color: var(--ft-navy); }
.ft .ft-notice__links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ft .ft-notice__links a { color: var(--ft-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ft .ft-notice--warn { background: #fff8e8; border-color: #f5d78a; }
.ft .ft-notice--warn .ft-notice__ic { color: #b7791f; }

/* Parco veicoli — griglia di card mezzo (media navy on-brand + icona) */
.ft .ft-vehiclegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.ft .ft-vehicle { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ft-line); border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; transition: border-color var(--ft-transition), box-shadow var(--ft-transition), transform var(--ft-transition); }
.ft a.ft-vehicle:hover { border-color: var(--ft-blue-grey); box-shadow: 0 10px 26px rgba(14, 56, 92, .10); transform: translateY(-2px); }
.ft .ft-vehicle__media { height: 118px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0e385c, #14507f); color: rgba(255, 255, 255, .92); }
.ft .ft-vehicle__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.ft .ft-vehicle__name { font-size: 16px; font-weight: 800; color: var(--ft-navy); }
.ft .ft-vehicle__type { font-size: 13px; color: var(--ft-muted); }
.ft .ft-vehicle__plate { font-size: 12px; font-weight: 700; letter-spacing: .4px; color: var(--ft-ink); background: #eef2f7; border-radius: 6px; padding: 2px 8px; align-self: flex-start; margin-top: 2px; }
.ft .ft-vehicle .ft-badge { align-self: flex-start; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .ft a.ft-vehicle { transition: none; } .ft a.ft-vehicle:hover { transform: none; } }

/* ---- Wizard veicolo (form_veicolo.tpl): restyle .ft su struttura + JS legacy ----
   Markup e JS (accordion Bootstrap + AJAX che genera le card + validazione) restano
   legacy: si restyla via CSS scoped (.ft-vwizard), senza toccare il JS. Le tile
   prendono il bg da JS (navy/arancio-selezionato); qui diamo forma, layout, tipografia. */
.ft.ft-vwizard { max-width: none; width: 100%; }
.ft.ft-vwizard .panel-group { margin: 0; }
.ft.ft-vwizard .panel { background: #fff; border: 1px solid var(--ft-line); border-radius: 14px; margin: 0 0 14px; box-shadow: none; overflow: hidden; }
.ft.ft-vwizard .panel-heading { background: #f7f9fc; padding: 0; border: 0; }
.ft.ft-vwizard .panel-title { margin: 0; font-size: 15px; }
.ft.ft-vwizard .panel-title a { display: block; padding: 15px 18px; color: var(--ft-navy); font-weight: 700; text-decoration: none; }
.ft.ft-vwizard .panel-title a:hover { color: var(--ft-orange-600); }
.ft.ft-vwizard .panel-body { padding: 18px; }

/* Tile selettori (macro-categoria / categoria veicolo / merci) */
.ft.ft-vwizard .macro_cat_container,
.ft.ft-vwizard .cat_v_container,
.ft.ft-vwizard #step3 label { display: inline-flex; flex-direction: column; width: 150px; margin: 0; vertical-align: top; }
.ft.ft-vwizard #step3 input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; }
.ft.ft-vwizard a#macro_cat, .ft.ft-vwizard a#cat_v, .ft.ft-vwizard #step3 label a { text-decoration: none; color: inherit; display: block; cursor: pointer; }
.ft.ft-vwizard .div_macro_cat_img,
.ft.ft-vwizard .div_cat_v_img2 { background: var(--ft-navy); border-radius: 12px; height: 110px; display: flex; align-items: center; justify-content: center; padding: 10px; transition: transform var(--ft-transition), box-shadow var(--ft-transition); }
.ft.ft-vwizard a:hover .div_macro_cat_img,
.ft.ft-vwizard a:hover .div_cat_v_img2 { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(14, 56, 92, .14); }
.ft.ft-vwizard .div_macro_cat_img img,
.ft.ft-vwizard .div_cat_v_img2 img,
.ft.ft-vwizard .img_merce_overflow img { max-width: 100%; max-height: 86px; width: auto !important; height: auto !important; object-fit: contain; border: 0; background: transparent; }
.ft.ft-vwizard .img_merce_overflow { display: flex; align-items: center; justify-content: center; height: 100%; }
/* Griglia pulita dei tile per step (allineamento a sinistra, wrap ordinato) */
.ft.ft-vwizard #step1 .panel-body,
.ft.ft-vwizard #step2 .panel-body,
.ft.ft-vwizard #step3 .panel-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
.ft.ft-vwizard #ok_step_3 { flex: 1 0 100%; margin-top: 8px; }
.ft.ft-vwizard .gifLoading { flex: 1 0 100%; }

/* Step 3 (merci): il tile è l'<a> (bg navy di default, arancio in selezione via JS/.merce_checked);
   .div_cat_v_img2 dentro = wrapper trasparente. Immagini piccole (icone), testo bianco. */
.ft.ft-vwizard #step3 label { width: 132px; }
.ft.ft-vwizard #step3 label a { width: 100%; box-sizing: border-box; min-width: 0; background: var(--ft-navy); border-radius: 12px; padding: 14px 8px 11px; display: flex; flex-direction: column; align-items: center; transition: transform var(--ft-transition), box-shadow var(--ft-transition); }
.ft.ft-vwizard #step3 label a:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(14, 56, 92, .14); }
.ft.ft-vwizard #step3 label a.merce_checked { background: var(--ft-orange); }
.ft.ft-vwizard #step3 .div_cat_v_img2 { background: transparent; height: auto; padding: 0; display: flex; flex-direction: column; align-items: center; }
.ft.ft-vwizard #step3 .img_merce_overflow { height: 46px; margin: 0 0 8px; }
.ft.ft-vwizard #step3 .img_merce_overflow img { max-height: 46px !important; max-width: 58px !important; width: auto !important; height: auto !important; }
.ft.ft-vwizard #step3 .div_cat_v_img2 p { color: #fff; margin: 0; text-align: center; font-size: 12px; font-weight: 600; line-height: 1.2; }
.ft.ft-vwizard #step3 label a.merce_checked .div_cat_v_img2 p { color: var(--ft-navy); }

/* Altezza uniforme dei tile: la label riserva 2 righe così le icone restano
   allineate anche quando i nomi vanno a capo su righe diverse. */
.ft.ft-vwizard .macro_cat_container p,
.ft.ft-vwizard .cat_v_container p,
.ft.ft-vwizard #step3 .div_cat_v_img2 p { min-height: 2.4em; display: flex; align-items: flex-start; justify-content: center; }
.ft.ft-vwizard #step3 label a { height: 100%; justify-content: space-between; }

/* Riga campi affiancati nello step 4 (capacità + dimensioni) */
.ft.ft-vwizard .ft-fieldrow { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 14px; }
.ft.ft-vwizard .ft-fieldrow .form-group { flex: 1 1 130px; margin: 0; }

/* Checkbox assicurazione come chip .ft (accendono in arancio quando spuntate) */
.ft.ft-vwizard #coperture > label { display: block; margin-bottom: 10px; }
.ft.ft-vwizard #coperture .checkbox { display: inline-block; margin: 0 8px 8px 0; }
.ft.ft-vwizard #coperture .checkbox label { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ft-line); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--ft-ink); background: #fff; cursor: pointer; transition: border-color var(--ft-transition), background var(--ft-transition); margin: 0; }
.ft.ft-vwizard #coperture .checkbox label:hover { border-color: var(--ft-blue-grey); }
.ft.ft-vwizard #coperture .checkbox input { position: static; accent-color: var(--ft-orange); width: 16px; height: 16px; margin: 0; flex: 0 0 auto; }
.ft.ft-vwizard #coperture .checkbox:has(input:checked) label { border-color: var(--ft-orange); background: #fff5e8; color: var(--ft-navy); font-weight: 600; }
.ft.ft-vwizard .macro_cat_container p,
.ft.ft-vwizard .cat_v_container p,
.ft.ft-vwizard #step3 label p { margin: 8px 0 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--ft-navy); line-height: 1.3; }

/* Campi step 4 */
.ft.ft-vwizard .form-group { margin: 0 0 14px; float: none; padding: 0; }
.ft.ft-vwizard .form-group > label,
.ft.ft-vwizard #coperture > label { display: block; font-size: 13px; font-weight: 600; color: var(--ft-navy); margin: 0 0 6px; }
.ft.ft-vwizard .form-control { width: 100%; height: 44px; border: 1px solid var(--ft-line); border-radius: 10px; padding: 0 12px; font-size: 15px; color: var(--ft-ink); background: #fff; box-shadow: none; }
.ft.ft-vwizard .form-control:focus { border-color: var(--ft-blue-grey); outline: none; box-shadow: 0 0 0 3px rgba(131, 160, 185, .25); }
.ft.ft-vwizard .checkbox { margin: 6px 0; }
.ft.ft-vwizard .checkbox label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ft-ink); cursor: pointer; font-weight: 500; }
.ft.ft-vwizard hr { border: 0; border-top: 1px solid var(--ft-line); margin: 18px 0; }

/* Bottoni */
.ft.ft-vwizard .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 10px; font-size: 15px; font-weight: 700; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background var(--ft-transition); white-space: nowrap; }
.ft.ft-vwizard .btn-primary { background: var(--ft-orange); color: #fff; }
.ft.ft-vwizard .btn-primary:hover { background: var(--ft-orange-600); }
.ft.ft-vwizard .btn-default,
.ft.ft-vwizard .btn-success,
.ft.ft-vwizard .fileinput-button { background: #fff; color: var(--ft-navy); border-color: var(--ft-line); }
.ft.ft-vwizard .btn-block { display: flex; width: 100%; margin-top: 12px; }
.ft.ft-vwizard label.has-error { color: var(--ft-danger); font-size: 13px; display: block; margin-top: 5px; }

/* Dettaglio veicolo (.ft) — card mezzo + lista tratte */
.ft .ft-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ft-muted); text-decoration: none; margin-bottom: 8px; }
.ft .ft-back:hover { color: var(--ft-navy); }
.ft .ft-veicolo { overflow: hidden; }
.ft .ft-veicolo__media { height: 150px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0e385c, #14507f); color: rgba(255, 255, 255, .9); }
.ft .ft-veicolo__media img { max-height: 118px; max-width: 80%; width: auto; object-fit: contain; }
.ft .ft-veicolo__media img + .ft-veicolo__ph { display: none; }
.ft .ft-triplist { display: flex; flex-direction: column; gap: 10px; }
.ft .ft-trip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: center; background: #fff; border: 1px solid var(--ft-line); border-radius: 12px; padding: 14px 16px; text-decoration: none; color: inherit; transition: border-color var(--ft-transition), box-shadow var(--ft-transition); }
.ft .ft-trip:hover { border-color: var(--ft-blue-grey); box-shadow: 0 8px 20px rgba(14, 56, 92, .08); }
.ft .ft-trip__route { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ft-navy); }
.ft .ft-trip__route svg { color: var(--ft-orange); flex: 0 0 auto; }
.ft .ft-trip__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ft-muted); }

@media (max-width: 560px) {
    .ft .ft-contact-card { padding: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .ft .ft-faq summary, .ft .ft-faq summary::after, .ft .ft-partner, .ft .ft-download { transition: none; }
}

/* ==========================================================================
   Wizard richiesta trasporto (/trasporto/<merce>/ → wizard_richiesta.tpl)
   Riusa .ft-wizard__nav/.ft-wizard__panel (registrazione) + componenti form.
   ========================================================================== */
.ft .ft-wizard__change { display: inline-block; font-size: 13px; font-weight: 600; color: var(--ft-navy); text-decoration: none; margin-bottom: 10px; }
.ft .ft-wizard__change:hover { color: var(--ft-orange-600); text-decoration: underline; }

.ft .ft-wizard__actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; }
.ft .ft-wizard__actions .ft-btn { width: auto; }
.ft .ft-wizard__actions .ft-btn--primary { flex: 1 1 auto; }
.ft .ft-wizard__actions .ft-btn--ghost { flex: 0 0 auto; min-width: 120px; }

.ft .ft-checks { display: flex; flex-direction: column; gap: 11px; margin: 6px 0 2px; }
.ft .ft-opt { font-weight: 400; color: var(--ft-muted); font-size: 12.5px; }

.ft .ft-wizard__confirm { color: var(--ft-ink); line-height: 1.6; margin: 0 0 14px; }
.ft .ft-reassure { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ft .ft-reassure li { position: relative; padding-left: 28px; color: var(--ft-ink); font-size: 14.5px; }
.ft .ft-reassure li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: #e7f3ea; }
.ft .ft-reassure li::after { content: ""; position: absolute; left: 5px; top: 6px; width: 7px; height: 4px; border-left: 2px solid #2e8b57; border-bottom: 2px solid #2e8b57; transform: rotate(-45deg); }

/* select e textarea con lo stile .ft-input */
.ft select.ft-input {
    appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
}
.ft textarea.ft-input { height: auto; min-height: 84px; padding-top: 11px; padding-bottom: 11px; resize: vertical; line-height: 1.5; }
.ft .ft-input.is-invalid { border-color: var(--ft-danger); }

/* GPS "rileva posizione" */
.ft .ft-gps {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 10px 16px; margin-bottom: 14px;
    background: var(--ft-info-bg); color: var(--ft-info); border: 1px solid #cfe4f5; border-radius: 999px;
    font-weight: 700; font-size: 14px; transition: background-color var(--ft-transition);
}
.ft .ft-gps:hover { background: #dceefb; }
.ft .ft-gps.is-loading { opacity: .65; pointer-events: none; }
.ft .ft-gps svg { flex: 0 0 auto; }
.ft .ft-gps__hint { font-size: 13px; color: var(--ft-muted); margin: -4px 0 14px; }
.ft .ft-gps__hint.is-error { color: var(--ft-danger); }

/* Nota informativa dentro i campi merce (es. edile → link pallet) */
.ft .ft-note { font-size: 13px; color: var(--ft-muted); background: var(--ft-info-bg); border: 1px solid #cfe4f5; border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; }
.ft .ft-note a { color: var(--ft-info); font-weight: 700; }

/* Blocco località (ritiro / consegna) quando la categoria ha entrambi */
.ft .ft-locblock + .ft-locblock { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ft-line); }
.ft .ft-locblock__title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--ft-navy); margin: 0 0 12px; }
.ft .ft-locblock__title svg { flex: 0 0 auto; color: var(--ft-orange); }
.ft .ft-locblock__sub { font-weight: 400; font-size: 13px; color: var(--ft-muted); }

/* --- Wizard richiesta: header, opzioni, multi-articolo, finder ---------- */
.ft .ft-wizard__topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ft .ft-wizard__cat {
    display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600;
    color: var(--ft-muted); text-decoration: none;
    padding: 6px 13px 6px 9px; border: 1px solid var(--ft-line); border-radius: 999px; background: #fff;
}
.ft .ft-wizard__cat:hover { color: var(--ft-navy); border-color: var(--ft-blue-grey); }

/* Mobile: i due link della topbar (Cambia categoria / Calcola fabbisogno) diventano
   due bottoni pieni-larghezza, coerenti e chiari (prima "Calcola…" era solo testo). */
@media (max-width: 600px) {
    .ft .ft-wizard__topbar { flex-direction: column; align-items: stretch; gap: 8px; }
    .ft .ft-wizard__topbar .ft-wizard__cat,
    .ft .ft-wizard__topbar .ft-linkbtn {
        display: flex; align-items: center; justify-content: center; gap: 6px;
        width: 100%; padding: 11px 14px; border-radius: 10px;
        font-size: 14px; font-weight: 600; text-decoration: none;
    }
    .ft .ft-wizard__topbar .ft-linkbtn {
        border: 1px solid var(--ft-orange); color: var(--ft-orange-600); background: #fff;
    }
    .ft .ft-wizard__topbar .ft-linkbtn:hover { text-decoration: none; }
}
.ft .ft-wizard__head { position: relative; }

/* Icona categoria accanto al titolo (le thumbnail sono bianche → tile navy) */
.ft .ft-wizard__title { display: inline-flex; align-items: center; gap: 14px; }
.ft .ft-wizard__ticon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--ft-navy); flex: 0 0 auto; }
.ft .ft-wizard__ticon img { width: 32px; height: 32px; object-fit: contain; }
@media (max-width: 600px) {
    .ft .ft-wizard__ticon { width: 42px; height: 42px; border-radius: 11px; }
    .ft .ft-wizard__ticon img { width: 26px; height: 26px; }
}

/* Lista città in fondo (link SEO → /trasporto/<merce>/<città>/) */
.ft .ft-citylist { max-width: 1180px; margin: 40px auto 8px; padding: 0 4px; }
.ft .ft-citylist__title { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8a97a6; margin: 0 0 12px; }
.ft .ft-citylist__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 16px; }
.ft .ft-citylist__item { font-size: 14px; color: var(--ft-muted); text-decoration: none; padding: 3px 0; }
.ft .ft-citylist__item:hover { color: var(--ft-orange-600); text-decoration: underline; }
.ft .ft-lead--1l { max-width: 760px; }

.ft .ft-req { color: var(--ft-orange-600); font-weight: 700; }

/* dot dello stepper con icona SVG (al posto del numero) */
.ft .ft-wizard__dot svg { width: 16px; height: 16px; }

/* opzioni acqua come card con icona */
.ft .ft-optcards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 4px; }
.ft .ft-optcard {
    position: relative; display: flex; align-items: center; gap: 11px; cursor: pointer; margin: 0;
    padding: 12px 46px 12px 14px; border: 1.5px solid var(--ft-line); border-radius: var(--ft-radius-sm); background: #fff;
    transition: border-color var(--ft-transition), background var(--ft-transition);
}
.ft .ft-optcard input { position: absolute; opacity: 0; width: 0; height: 0; }
.ft .ft-optcard__ic { flex: 0 0 38px; height: 38px; border-radius: 9px; background: #eef2f7; color: var(--ft-navy); display: flex; align-items: center; justify-content: center; transition: background var(--ft-transition), color var(--ft-transition); }
.ft .ft-optcard__txt { font-size: 13.5px; line-height: 1.35; color: var(--ft-ink); font-weight: 600; }
/* indicatore di spunta (cerchio a destra): vuoto = off, navy con ✓ = selezionato */
.ft .ft-optcard::after {
    content: ""; position: absolute; right: 13px; top: 50%; margin-top: -11px; width: 22px; height: 22px;
    border-radius: 50%; border: 2px solid var(--ft-line); background: #fff;
    transition: border-color var(--ft-transition), background var(--ft-transition);
}
.ft .ft-optcard.is-on { border-color: var(--ft-navy); background: #f5f9ff; }
.ft .ft-optcard.is-on .ft-optcard__ic { background: var(--ft-navy); color: #fff; }
.ft .ft-optcard.is-on::after {
    border-color: var(--ft-navy);
    background: var(--ft-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
@media (max-width: 600px) { .ft .ft-optcards { grid-template-columns: 1fr; } }

/* multi-articolo */
.ft .ft-article { position: relative; }
.ft .ft-article + .ft-article { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--ft-line); }
.ft .ft-article__remove { position: absolute; top: 0; right: 0; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--ft-line); background: #fff; color: var(--ft-muted); font-size: 20px; line-height: 1; cursor: pointer; }
.ft .ft-article__remove:hover { color: var(--ft-danger); border-color: var(--ft-danger); }
.ft .ft-article__tools { margin-top: 12px; }
/* carica foto: drop-zone + anteprime + fotocamera */
.ft .ft-dropzone {
    display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; cursor: pointer;
    padding: 18px; border: 1.5px dashed var(--ft-blue-grey); border-radius: var(--ft-radius-sm); background: #f8fafc;
    transition: border-color var(--ft-transition), background var(--ft-transition);
}
.ft .ft-dropzone:hover { background: #f2f6fb; }
.ft .ft-dropzone.is-drag { border-color: var(--ft-orange); background: #fff7ec; }
.ft .ft-dropzone input[type="file"] { display: none; }
.ft .ft-dropzone__ic { color: var(--ft-blue-grey); }
.ft .ft-dropzone__txt { font-size: 13.5px; color: var(--ft-muted); }
.ft .ft-dropzone__txt strong { color: var(--ft-navy); }
.ft .ft-dropzone__cam {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 7px 15px; border: 1px solid var(--ft-line); border-radius: 999px; background: #fff;
    color: var(--ft-navy); font-family: inherit; font-weight: 600; font-size: 13px;
}
.ft .ft-dropzone__cam:hover { border-color: var(--ft-blue-grey); }
.ft .ft-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ft .ft-thumb { position: relative; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; border: 1px solid var(--ft-line); background: #f3f6fa; }
.ft .ft-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft .ft-thumb__rm {
    position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border: 0; border-radius: 50%;
    background: rgba(14, 56, 92, .82); color: #fff; font-size: 15px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.ft .ft-thumb__rm:hover { background: var(--ft-danger); }

.ft .ft-step__extra { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin: 18px 0 4px; }
.ft .ft-linkbtn { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ft-navy); text-decoration: none; }
.ft .ft-linkbtn:hover { color: var(--ft-orange-600); text-decoration: underline; }

/* dropdown autocomplete (jQuery UI) in stile .ft */
.ui-autocomplete.ui-menu {
    border: 1px solid var(--ft-line); border-radius: 12px; background: #fff; padding: 6px;
    box-shadow: 0 16px 40px rgba(14, 56, 92, .14); z-index: 9999; max-height: 320px; overflow-y: auto;
    font-family: var(--ft-font);
}
.ui-autocomplete .ui-menu-item-wrapper, .ui-autocomplete .ui-menu-item a {
    display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: #1f2a37; cursor: pointer; line-height: 1.35;
}
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item a.ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper:hover { background: #eef4fb; color: #0e385c; border: 0; margin: 0; }

/* --- Finder: loader camioncino → risultato/gate ------------------------ */
.ft .ft-wizard__actions--center { justify-content: center; }
.ft .ft-finder { text-align: center; padding: clamp(26px, 5vw, 46px) 10px; }
.ft .ft-truck { position: relative; width: 170px; height: 86px; margin: 0 auto 16px; display: flex; align-items: flex-end; justify-content: center; }
.ft .ft-truck__svg { color: var(--ft-navy); animation: ft-truckbob .55s ease-in-out infinite; }
.ft .ft-truck__road { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 3px; border-radius: 2px;
    background: repeating-linear-gradient(90deg, var(--ft-blue-grey) 0 14px, transparent 14px 28px); background-size: 28px 3px;
    animation: ft-road .5s linear infinite; }
.ft .ft-finder__txt { color: var(--ft-muted); font-size: 15px; font-weight: 600; }
@keyframes ft-truckbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes ft-road { from { background-position: 0 0; } to { background-position: -28px 0; } }

.ft .ft-finder__result { text-align: center; padding: clamp(14px, 3vw, 26px) 6px; }
.ft .ft-finder__badge { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: #e7f3ea; color: #2e8b57; display: flex; align-items: center; justify-content: center; }
.ft .ft-finder__title { font-size: clamp(19px, 2.4vw, 23px); font-weight: 800; color: var(--ft-navy); line-height: 1.25; margin: 0 0 8px; max-width: 520px; margin-left: auto; margin-right: auto; }
.ft .ft-finder__sub { color: var(--ft-muted); font-size: 15px; line-height: 1.55; margin: 0 auto 20px; max-width: 460px; }
.ft .ft-finder__result .ft-reassure { display: inline-flex; flex-direction: column; gap: 8px; margin: 20px auto 0; text-align: left; }
.ft .ft-finder__back { margin-top: 18px; color: var(--ft-muted); }

@media (prefers-reduced-motion: reduce) { .ft .ft-truck__svg, .ft .ft-truck__road { animation: none; } }

/* --- Select custom (.ft dropdown) — desktop; su mobile resta il nativo ---- */
.ft .ft-cs { position: relative; }
.ft .ft-cs__native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; pointer-events: none; }
.ft .ft-cs__btn {
    width: 100%; text-align: left; cursor: pointer; display: flex; align-items: center; padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
}
.ft .ft-cs__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft .ft-cs.is-open .ft-cs__btn { border-color: var(--ft-orange); box-shadow: var(--ft-ring); }
.ft .ft-cs__menu {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; margin: 0; padding: 6px; list-style: none;
    background: #fff; border: 1px solid var(--ft-line); border-radius: 12px; box-shadow: 0 16px 40px rgba(14, 56, 92, .14);
    max-height: 288px; overflow-y: auto;
}
.ft .ft-cs__opt { padding: 10px 12px; border-radius: 8px; font-size: 15px; color: var(--ft-ink); cursor: pointer; line-height: 1.3; }
.ft .ft-cs__opt:hover { background: #eef4fb; color: var(--ft-navy); }
.ft .ft-cs__opt.is-sel { background: #eef4fb; color: var(--ft-navy); font-weight: 700; }

/* ============================================================
   Flusso richiesta — auth inline (step 4) + lista trasportatori .ft
   ============================================================ */

/* Auth box inline (accedi / registrati dentro il wizard) */
.ft .ft-authbox { max-width: 440px; margin: 16px auto 0; text-align: left; }
.ft .ft-authbox__tabs { display: flex; gap: 6px; background: #eef2f6; padding: 4px; border-radius: 10px; margin-bottom: 14px; }
.ft .ft-authtab { flex: 1; border: 0; background: transparent; padding: 9px 10px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #6b7785; cursor: pointer; }
.ft .ft-authtab.is-active { background: #fff; color: var(--ft-navy); box-shadow: 0 1px 3px rgba(14,56,92,.12); }
.ft .ft-authform { display: flex; flex-direction: column; gap: 10px; }
/* [hidden] deve sempre vincere sui display: flex/grid dei componenti .ft
   (auth form, badge "preventivo richiesto", telefono, bottoni azione, ecc.) */
.ft [hidden] { display: none !important; }

/* Alcune regole legacy (nei CSS Bootstrap/minificati) colorano di BIANCO i <p>
   dentro la card del wizard → i testi di feedback dei nostri componenti .ft
   (errori, hint, sottotitoli) risultavano invisibili (bianco su bianco). Li
   forziamo con !important (stesso pattern usato per gli hook legacy in .ft-prose). */
.ft .ft-authform__err { color: #c0392b !important; }
.ft .ft-error { color: var(--ft-danger) !important; }
.ft .ft-finder__sub,
.ft .ft-finder__txt,
.ft .ft-gps__hint { color: var(--ft-muted) !important; }
.ft .ft-gps__hint.is-error { color: var(--ft-danger) !important; }
.ft .ft-authform .ft-btn { width: 100%; margin-top: 2px; }
.ft .ft-authform__err { color: #c0392b; font-size: 13px; margin: 2px 0 0; }
.ft .ft-authform__alt { text-align: center; font-size: 13px; margin: 6px 0 0; }
.ft .ft-authform__alt a { color: var(--ft-orange); text-decoration: none; }
.ft .ft-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #4b5763; cursor: pointer; }
.ft .ft-check input { margin-top: 3px; }

/* Riepilogo della richiesta — pannellino compatto (in cima allo step 4) */
.ft .ft-recap { max-width: 440px; margin: 0 auto 20px; padding: 13px 18px; background: #f7f9fb; border: 1px solid var(--ft-line); border-radius: 14px; text-align: left; }
.ft .ft-recap__title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a97a6; margin: 0 0 6px; }
.ft .ft-recap__row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ft-navy); padding: 5px 0; line-height: 1.35; }
.ft .ft-recap__row svg { flex: 0 0 auto; color: var(--ft-orange); }
.ft .ft-recap__row:not([hidden]) + .ft-recap__row:not([hidden]) { border-top: 1px solid #edf1f5; }
.ft .ft-recap__photos { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ft .ft-recap__ph { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; border: 1px solid var(--ft-line); }
.ft .ft-recap__ph-more { font-size: 12px; font-weight: 700; color: #6b7785; padding: 0 4px; }
.ft .ft-recap__edit { margin: 10px 0 0; padding: 0; font-size: 13px; }

/* Step 4 — scelta visibilità (pubblica/privata) come radio-card */
.ft .ft-review { max-width: 560px; margin: 0 auto; }
.ft .ft-visibility { border: 0; margin: 0 0 18px; padding: 0; }
.ft .ft-visibility__legend { font-size: 15px; font-weight: 700; color: var(--ft-navy); margin: 0 0 12px; padding: 0; text-align: center; width: 100%; }
.ft .ft-visibility__opt { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin: 0 0 10px; border: 1.5px solid var(--ft-line); border-radius: 14px; cursor: pointer; transition: border-color .15s, background .15s; text-align: left; }
.ft .ft-visibility__opt:hover { border-color: #c5d0dc; }
.ft .ft-visibility__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.ft .ft-visibility__mark { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; border: 2px solid #c5d0dc; border-radius: 50%; position: relative; transition: border-color .15s; }
.ft .ft-visibility__mark::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ft-orange); transform: scale(0); transition: transform .15s; }
.ft .ft-visibility__opt:has(input:checked) { border-color: var(--ft-orange); background: #fff8ef; }
.ft .ft-visibility__opt:has(input:checked) .ft-visibility__mark { border-color: var(--ft-orange); }
.ft .ft-visibility__opt:has(input:checked) .ft-visibility__mark::after { transform: scale(1); }
.ft .ft-visibility__opt:has(input:focus-visible) { outline: 2px solid var(--ft-navy); outline-offset: 2px; }
.ft .ft-visibility__body { display: flex; flex-direction: column; gap: 3px; }
.ft .ft-visibility__t { font-size: 15px; font-weight: 700; color: var(--ft-navy); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ft .ft-visibility__tag { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #fff; background: var(--ft-orange); border-radius: 999px; padding: 2px 8px; }
.ft .ft-visibility__d { font-size: 13px; line-height: 1.4; color: var(--ft-muted); }

/* Campo password con occhietto "mostra/nascondi" */
.ft .ft-pwd { position: relative; }
.ft .ft-pwd .ft-input { width: 100%; padding-right: 44px; }
.ft .ft-pwd__toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #8a97a6; cursor: pointer; border-radius: 8px; }
.ft .ft-pwd__toggle:hover { color: var(--ft-navy); }
.ft .ft-pwd__toggle.is-on { color: var(--ft-orange); }

/* Lista trasportatori (card .ft) */
.ft .ft-carriers-wrap { margin-top: 4px; }
.ft .ft-carriers { display: flex; flex-direction: column; gap: 14px; }
.ft .ft-carriers__head { font-size: 16px; color: var(--ft-navy); font-weight: 700; text-align: center; margin: 0 0 4px; }
.ft .ft-carriers__note { font-size: 12px; color: #8a97a6; text-align: center; margin: 8px 0 0; }

.ft .ft-carrier { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--ft-line); border-radius: 14px; background: #fff; }
.ft .ft-carrier__media { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 12px; background: var(--ft-navy); display: flex; align-items: center; justify-content: center; color: #fff; overflow: hidden; }
.ft .ft-carrier__logo { width: 100%; height: 100%; object-fit: contain; background: #fff; }
/* Se c'è il logo: sfondo bianco e NIENTE camioncino. Se il logo si rompe
   (onerror lo rimuove), :has non matcha più → torna il camioncino su navy. */
.ft .ft-carrier__media:has(.ft-carrier__logo) { background: #fff; }
.ft .ft-carrier__media:has(.ft-carrier__logo) .ft-carrier__truck { display: none; }
.ft .ft-carrier__body { flex: 1 1 auto; min-width: 0; }
.ft .ft-carrier__name { font-weight: 700; color: var(--ft-navy); font-size: 16px; }
.ft .ft-carrier__city { display: flex; align-items: center; gap: 5px; color: #6b7785; font-size: 13px; margin-top: 2px; }
.ft .ft-carrier__cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ft .ft-carrier__cat { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; background: var(--ft-navy); border-radius: 7px; }
.ft .ft-carrier__phone { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--ft-navy); font-size: 15px; }
.ft .ft-carrier__actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 190px; }
.ft .ft-carrier__btn { width: 100%; padding: 9px 14px; font-size: 14px; }
.ft .ft-btn:disabled { opacity: .6; cursor: default; }
.ft .ft-carrier__done { display: flex; align-items: center; justify-content: center; gap: 8px; color: #1a8a4a; font-size: 12px; line-height: 1.3; text-align: left; }
.ft .ft-carrier__done svg { flex: 0 0 auto; }
.ft .ft-carrier__done-txt strong { display: block; font-size: 14px; font-weight: 700; }

@media (max-width: 640px) {
    .ft .ft-carrier { flex-direction: column; align-items: stretch; text-align: center; }
    .ft .ft-carrier__media { margin: 0 auto; }
    .ft .ft-carrier__city, .ft .ft-carrier__cats, .ft .ft-carrier__phone { justify-content: center; }
    .ft .ft-carrier__actions { min-width: 0; }
}

/* ============================================================================
   App-shell area cliente (.ft-app) — sidebar navy + topbar + contenuto.
   Layout indipendente dal Bootstrap legacy del contenuto ({$main}).
   ============================================================================ */
body.ft-app-body { margin: 0; background: #f4f6f9; }
.ft-app { display: flex; min-height: 100vh; }

/* Sidebar */
.ft-app__nav {
    position: fixed; top: 0; left: 0; bottom: 0; width: 260px; z-index: 50;
    background: var(--ft-navy); color: #eaf0f7;
    display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.ft-app__brand { padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ft-app__brandlink { display: flex; flex-direction: column; text-decoration: none; }
.ft-app__brandmark { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.ft-app__brandsub { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8fa6bd; margin-top: 2px; }
/* Logo brand: immagine FriTrak (bianca su navy) o logo azienda in box bianco */
.ft-app__brandlogo { display: block; height: 32px; width: auto; max-width: 168px; object-fit: contain; }
.ft-app__brandlogo--company { height: 40px; max-width: 150px; padding: 5px 8px; background: #fff; border-radius: 8px; box-sizing: border-box; }
.ft-app__brandmini { display: none; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.ft-app__menu { padding: 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ft-app__navsep { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #7e97b0; padding: 16px 12px 6px; }
.ft-app__navitem {
    display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px;
    color: #d6e0ec; text-decoration: none; font-size: 15px; font-weight: 500;
    transition: background var(--ft-transition), color var(--ft-transition);
}
.ft-app__navitem:hover { background: rgba(255,255,255,.07); color: #fff; }
.ft-app__navitem.is-active { background: var(--ft-orange); color: #fff; font-weight: 700; }
.ft-app__navitem--sm { font-size: 13.5px; color: #a9bccf; padding: 8px 12px; }
.ft-app__navfoot { padding: 10px 12px 18px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 2px; }
.ft-app__ic { flex: 0 0 auto; display: inline-flex; width: 20px; height: 20px; }
.ft-app__ic .ft-app__svg { display: block; }
.ft-app__lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Brand + toggle rail */
.ft-app__brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ft-app__railtoggle { flex: 0 0 auto; border: 0; background: rgba(255,255,255,.06); color: #cbd8e6; width: 30px; height: 30px; border-radius: 8px; display: none; align-items: center; justify-content: center; cursor: pointer; transition: background var(--ft-transition); }
.ft-app__railtoggle:hover { background: rgba(255,255,255,.14); color: #fff; }
@media (min-width: 901px) { .ft-app__railtoggle { display: inline-flex; } }

/* Stato RAIL: sidebar a sole icone (solo desktop) */
@media (min-width: 901px) {
    .ft-app--rail .ft-app__nav { width: 74px; }
    .ft-app--rail .ft-app__frame { margin-left: 74px; }
    .ft-app--rail .ft-app__lbl { display: none; }
    .ft-app--rail .ft-app__brand { flex-direction: column; gap: 10px; padding: 14px 0; }
    .ft-app--rail .ft-app__brandlink { align-items: center; }
    .ft-app--rail .ft-app__brandlogo { display: none; }
    .ft-app--rail .ft-app__brandmini { display: block; }
    .ft-app--rail .ft-app__navitem { justify-content: center; padding: 11px; }
    .ft-app--rail .ft-app__navsep { height: 1px; padding: 0; margin: 12px; background: rgba(255,255,255,.12); color: transparent; overflow: hidden; }
    .ft-app--rail .ft-app__railtoggle svg { transform: rotate(180deg); }
}

/* Frame (topbar + main), sfalsato dalla sidebar */
.ft-app__frame { flex: 1; min-width: 0; margin-left: 260px; display: flex; flex-direction: column; }
.ft-app__bar {
    position: sticky; top: 0; z-index: 30; height: 64px; background: #fff;
    border-bottom: 1px solid var(--ft-line); display: flex; align-items: center; gap: 14px; padding: 0 22px;
}
.ft-app__burger { display: none; border: 0; background: transparent; color: var(--ft-navy); cursor: pointer; padding: 6px; margin-left: -6px; }
.ft-app__title { font-size: 18px; font-weight: 700; color: var(--ft-navy); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-app__search { position: relative; display: flex; align-items: center; }
.ft-app__searchic { position: absolute; left: 13px; color: #9aa7b6; pointer-events: none; }
.ft-app__search input { width: 220px; max-width: 34vw; height: 40px; padding: 0 14px 0 36px; border: 1px solid var(--ft-line); border-radius: 999px; font-size: 14px; background: #f7f9fb; outline: none; }
.ft-app__search input:focus { border-color: var(--ft-navy-300); background: #fff; }

/* Topbar: azioni a destra (ricerca + campanella + account) */
.ft-app__baractions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ft-app__iconbtn { position: relative; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--ft-navy); text-decoration: none; transition: background var(--ft-transition); }
.ft-app__iconbtn:hover { background: #eef2f7; }
.ft-app__badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--ft-orange); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.ft-app__acct { position: relative; }
.ft-app__acctbtn { display: flex; align-items: center; gap: 8px; border: 1px solid var(--ft-line); background: #fff; border-radius: 999px; padding: 4px 8px 4px 4px; cursor: pointer; transition: border-color var(--ft-transition); }
.ft-app__acctbtn:hover { border-color: #c5d0dc; }
.ft-app__avatar { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: #eef2f7; color: var(--ft-navy); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ft-app__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ft-app__acctname { font-size: 14px; font-weight: 600; color: var(--ft-navy); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-app__chev { color: #9aa7b6; flex: 0 0 auto; }
.ft-app__acctmenu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 224px; background: #fff; border: 1px solid var(--ft-line); border-radius: 12px; box-shadow: 0 14px 34px rgba(15,40,70,.16); padding: 6px; z-index: 60; }
.ft-app__acctmenu[hidden] { display: none; }
.ft-app__acctitem { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--ft-ink); text-decoration: none; font-size: 14px; }
.ft-app__acctitem:hover { background: #f2f5f9; }
.ft-app__acctitem--danger { color: #c0392b; }
.ft-app__acctitem--danger:hover { background: #fdecec; }

/* Popup notifiche (campanella topbar) */
.ft-app__notif { position: relative; }
.ft-app__notifmenu { position: absolute; right: 0; top: calc(100% + 8px); width: 320px; max-width: 88vw; background: #fff; border: 1px solid var(--ft-line); border-radius: 14px; box-shadow: 0 16px 40px rgba(15,40,70,.18); padding: 6px; z-index: 60; }
.ft-app__notifmenu[hidden] { display: none; }
.ft-app__notifhead { padding: 9px 12px 6px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #8a97a6; }
.ft-app__notifitem { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px; color: var(--ft-ink); text-decoration: none; font-size: 14px; line-height: 1.3; }
.ft-app__notifitem:hover { background: #eef4fb; color: var(--ft-navy); }
.ft-app__notific { flex: 0 0 auto; display: inline-flex; color: var(--ft-navy); }
.ft-app__notific svg { width: 18px; height: 18px; }
.ft-app__notifall { display: block; text-align: center; padding: 10px; margin-top: 4px; border-top: 1px solid var(--ft-line); color: var(--ft-orange); font-weight: 700; font-size: 13px; text-decoration: none; }
.ft-app__notifall:hover { color: var(--ft-orange-600); }
.ft-app__notifempty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 16px; color: var(--ft-muted); font-size: 14px; text-align: center; }
.ft-app__notifempty svg { color: var(--ft-blue-grey); opacity: .6; }

/* Bottom tab bar (mobile) + scrim drawer */
.ft-app__tabbar { display: none; }
.ft-app__tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: transparent; color: var(--ft-muted); font-size: 11px; font-weight: 600; text-decoration: none; cursor: pointer; padding: 6px 2px; }
.ft-app__tab.is-active { color: var(--ft-orange); }
.ft-app__tabic { display: inline-flex; }
.ft-app__scrim { position: fixed; inset: 0; background: rgba(15,30,50,.45); z-index: 48; }
.ft-app__scrim[hidden] { display: none; }
.ft-app__main { padding: 24px; flex: 1; }
.ft-app__main > .ft-flash { margin-bottom: 16px; }

.ft-flash { padding: 12px 16px; border-radius: 12px; font-size: 14px; }
.ft-flash--error { background: #fdecec; border: 1px solid #f5c2c2; color: #c0392b; }

/* Responsive: sidebar → drawer off-canvas */
@media (max-width: 900px) {
    .ft-app__nav { transform: translateX(-100%); transition: transform var(--ft-transition); box-shadow: 0 0 40px rgba(0,0,0,.3); }
    .ft-app--navopen .ft-app__nav { transform: translateX(0); }
    .ft-app__frame { margin-left: 0; }
    .ft-app__burger { display: inline-flex; }
    .ft-app__search { display: none; }
    .ft-app__acctname { display: none; }
    .ft-app__acctbtn { padding: 4px; }
    .ft-app__tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 58px; z-index: 44; background: #fff; border-top: 1px solid var(--ft-line); padding-bottom: env(safe-area-inset-bottom); }
    .ft-app__main { padding: 16px 16px 74px; }
}

/* ============================================================================
   Componenti gestionale .ft (riusabili nelle sezioni dell'area cliente).
   Usare dentro un contenitore con classe .ft.
   ============================================================================ */
/* Card contenuto */
.ft .ft-card { background: #fff; border: 1px solid var(--ft-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(16,40,70,.04); }
.ft .ft-card + .ft-card { margin-top: 18px; }
.ft .ft-card__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ft-line); }
.ft .ft-card__title { font-size: 16px; font-weight: 700; color: var(--ft-navy); margin: 0; flex: 1; }
.ft .ft-card__body { padding: 20px; }
.ft .ft-card__foot { padding: 14px 20px; border-top: 1px solid var(--ft-line); display: flex; gap: 10px; justify-content: flex-end; }

/* Intestazione di sezione (titolo + azioni) */
.ft .ft-secthead { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin: 0 0 20px; }
.ft .ft-secthead__main { flex: 1; min-width: 0; }
.ft .ft-secthead__title { font-size: 22px; font-weight: 800; color: var(--ft-navy); margin: 0; letter-spacing: -.01em; }
.ft .ft-secthead__sub { font-size: 14px; color: var(--ft-muted); margin: 4px 0 0; }
.ft .ft-secthead__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ft .ft-secthead__actions .ft-btn { width: auto; flex: 0 0 auto; }

/* Toolbar filtri/azioni */
.ft .ft-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.ft .ft-toolbar__spacer { flex: 1; }

/* KPI / stat card (dashboard) */
.ft .ft-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin: 0 0 22px; }
.ft .ft-kpi { background: #fff; border: 1px solid var(--ft-line); border-radius: 16px; padding: 18px 20px; display: flex; align-items: center; gap: 14px; }
.ft .ft-kpi__ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #eef4fb; color: var(--ft-navy); }
.ft .ft-kpi__ic--orange { background: #fff2e0; color: var(--ft-orange-600); }
.ft .ft-kpi__num { font-size: 26px; font-weight: 800; color: var(--ft-navy); line-height: 1; }
.ft .ft-kpi__lbl { font-size: 13px; color: var(--ft-muted); margin-top: 3px; }

/* Badge di stato */
.ft .ft-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #eef1f5; color: #56657a; }
.ft .ft-badge--ok { background: #e7f6ee; color: #1a7f47; }
.ft .ft-badge--warn { background: #fdf3e0; color: #a56a12; }
.ft .ft-badge--danger { background: #fdecec; color: #c0392b; }
.ft .ft-badge--info { background: #e8f1fb; color: #1d5fa8; }

/* Tabella responsive → card su mobile (usare td[data-label] per le etichette) */
.ft .ft-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ft .ft-table th { text-align: left; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: #8a97a6; font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--ft-line); }
.ft .ft-table td { padding: 12px 14px; border-bottom: 1px solid #eef1f5; color: var(--ft-ink); vertical-align: middle; }
.ft .ft-table tr:last-child td { border-bottom: 0; }
.ft .ft-table tbody tr:hover { background: #f7f9fc; }
@media (max-width: 720px) {
    .ft .ft-table, .ft .ft-table tbody, .ft .ft-table tr, .ft .ft-table td { display: block; width: 100%; }
    .ft .ft-table thead { display: none; }
    .ft .ft-table tr { background: #fff; border: 1px solid var(--ft-line); border-radius: 14px; margin-bottom: 12px; padding: 6px 4px; }
    .ft .ft-table td { border: 0; display: flex; justify-content: space-between; gap: 16px; padding: 8px 14px; text-align: right; }
    .ft .ft-table td::before { content: attr(data-label); font-weight: 700; color: #8a97a6; text-align: left; text-transform: uppercase; font-size: 11px; letter-spacing: .03em; }
}

/* Tabs di sezione */
.ft .ft-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ft-line); margin: 0 0 20px; overflow-x: auto; }
.ft .ft-tabs__tab { padding: 11px 16px; font-size: 14px; font-weight: 600; color: var(--ft-muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.ft .ft-tabs__tab:hover { color: var(--ft-navy); }
.ft .ft-tabs__tab.is-active { color: var(--ft-navy); border-bottom-color: var(--ft-orange); }

/* Dashboard — accessi rapidi */
.ft .ft-dashboard { max-width: 1080px; }
.ft .ft-dashgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.ft .ft-dashcard { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: #fff; border: 1px solid var(--ft-line); border-radius: 16px; text-decoration: none; transition: border-color var(--ft-transition), box-shadow var(--ft-transition), transform var(--ft-transition); }
.ft .ft-dashcard:hover { border-color: #c5d0dc; box-shadow: 0 8px 24px rgba(16,40,70,.08); transform: translateY(-2px); }
.ft .ft-dashcard__ic { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: #eef4fb; color: var(--ft-navy); }
.ft .ft-dashcard__ic svg { width: 24px; height: 24px; }
.ft .ft-dashcard__body { flex: 1; min-width: 0; }
.ft .ft-dashcard__t { display: block; font-size: 16px; font-weight: 700; color: var(--ft-navy); }
.ft .ft-dashcard__d { display: block; font-size: 13px; color: var(--ft-muted); margin-top: 2px; line-height: 1.35; }
.ft .ft-dashcard__arr { color: #b7c2d0; flex: 0 0 auto; }

/* Wrapper contenuto sezione (larghezza leggibile) */
.ft .ft-page--app { max-width: 920px; }

/* Definition list — dati in sola lettura (label + valore) */
.ft .ft-dl { margin: 0; }
.ft .ft-dl__row { display: grid; grid-template-columns: 220px 1fr; gap: 12px; padding: 12px 2px; border-bottom: 1px solid #eef1f5; }
.ft .ft-dl__row:last-child { border-bottom: 0; }
.ft .ft-dl__row dt { color: var(--ft-muted); font-size: 14px; font-weight: 600; margin: 0; }
.ft .ft-dl__row dd { color: var(--ft-ink); font-size: 15px; margin: 0; word-break: break-word; }
.ft .ft-dl__row dd:empty::after { content: "—"; color: #b7c2d0; }
@media (max-width: 560px) { .ft .ft-dl__row { grid-template-columns: 1fr; gap: 2px; padding: 10px 2px; } }

/* Testata profilo (avatar iniziali + nome + azione) — viste datiUtente/datiAzienda */
.ft .ft-profilehead { display: flex; align-items: center; gap: 18px; margin: 0 0 20px; flex-wrap: wrap; }
.ft .ft-avatar { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; background: var(--ft-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; text-transform: uppercase; }
.ft .ft-avatar--orange { background: var(--ft-orange); }
.ft .ft-profilehead__main { flex: 1 1 240px; min-width: 0; }
.ft .ft-profilehead__name { margin: 0; font-size: clamp(20px, 3vw, 26px); font-weight: 800; color: var(--ft-navy); line-height: 1.2; }
.ft .ft-profilehead__sub { margin: 4px 0 0; color: var(--ft-muted); font-size: 14px; word-break: break-word; }
.ft .ft-profilehead__actions { flex: 0 0 auto; }
.ft .ft-profilehead__actions .ft-btn { width: auto; }
@media (max-width: 560px) {
    .ft .ft-profilehead__actions { width: 100%; }
    .ft .ft-profilehead__actions .ft-btn { width: 100%; }
}

/* Riga azioni form + hint */
.ft .ft-formactions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 6px; }
/* Regola generale form: su mobile le azioni vanno a colonna con l'azione PRIMARIA
   (Salva, ultima nel DOM) IN CIMA → column-reverse inverte l'ordine Annulla/Salva. */
@media (max-width: 560px) {
    .ft .ft-formactions { flex-direction: column-reverse; }
    .ft .ft-formactions .ft-btn { flex: 1 1 auto; width: 100%; }
}
.ft .ft-fieldhint { font-size: 13px; color: var(--ft-muted); margin-top: 6px; }
.ft .ft-formrow { max-width: 460px; }
.ft .ft-formsection { font-size: 15px; font-weight: 700; color: var(--ft-navy); margin: 22px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--ft-line); }
.ft .ft-formsection:first-child { margin-top: 0; }

/* ---- Liste/tabelle area cliente: wrapper scroll, azioni riga, ricerca avanzata ---- */
.ft .ft-btn--sm { padding: 8px 14px; font-size: 13px; gap: 6px; }
.ft .ft-btn--danger { color: #fff; background: var(--ft-danger); border-color: var(--ft-danger); }
.ft .ft-btn--danger:hover { background: #a5301f; border-color: #a5301f; }

.ft .ft-tablewrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ft .ft-rowactions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ft .ft-table td.ft-ops { white-space: nowrap; }
/* i .ft-btn di default sono width:100% (form) → in questi contesti flex tornano a contenuto */
.ft .ft-toolbar > .ft-btn,
.ft .ft-adv__foot .ft-btn,
.ft .ft-rowactions .ft-btn { width: auto; flex: 0 0 auto; white-space: nowrap; }

/* Cella "percorso" + testi ausiliari nelle liste richieste */
.ft .ft-route { display: flex; flex-direction: column; gap: 4px; }
.ft .ft-route__line { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ft-navy); flex-wrap: wrap; }
.ft .ft-route__line svg { color: var(--ft-orange); flex: 0 0 auto; }
.ft .ft-route__km { font-size: 12.5px; color: var(--ft-muted); }
.ft .ft-muted-sm { font-size: 12.5px; color: var(--ft-muted); margin-top: 6px; }
.ft .ft-muted-sm strong { color: var(--ft-ink); font-weight: 700; }
.ft .ft-inlineicons { display: flex; gap: 14px; align-items: center; }
.ft .ft-inlineicons svg { color: var(--ft-navy); vertical-align: -2px; margin-right: 3px; }
.ft .ft-thumbimg { max-width: 90px; height: auto; border-radius: 8px; margin-top: 6px; display: block; }

/* Filtro merce a chip selezionabili (sostituisce le tile-immagine legacy) */
.ft .ft-chipfilter { margin-top: 16px; }
.ft .ft-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ft .ft-chip__cb { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ft .ft-chip { display: inline-flex; align-items: center; margin: 0; padding: 8px 14px; border: 1px solid var(--ft-line); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ft-navy); background: #fff; cursor: pointer; user-select: none; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.ft .ft-chip:hover { border-color: var(--ft-navy-300); }
.ft .ft-chip.is-checked { background: var(--ft-orange); border-color: var(--ft-orange); color: #fff; }
.ft .ft-chip__cb:focus-visible + .ft-chip { outline: 2px solid var(--ft-navy-300); outline-offset: 2px; }
.ft .ft-chipfilter__loader { margin-top: 10px; }

/* neutralizza il fondo navy legacy di .form_fritrak quando è dentro lo scope .ft
   (la classe resta perché il JS ricerca viaggi seleziona form.form_fritrak) */
.ft .form_fritrak { background: transparent; border: none; padding: 0; box-shadow: none; }

/* neutralizza il tema navy legacy di "div#pag_veicolo ..." (fritrak.css, selettori ID)
   quando la tabella viaggi è resa come .ft-table: il wrapper #pag_veicolo ha background navy */
.ft #pag_veicolo { background: transparent; padding: 0; border: none; }
.ft #pag_veicolo .ft-table,
.ft #pag_veicolo .ft-table > thead > tr > th,
.ft #pag_veicolo .ft-table > tbody > tr,
.ft #pag_veicolo .ft-table > tbody > tr > td { background: transparent; }
.ft #pag_veicolo .ft-table > tbody > tr > td { color: var(--ft-ink); border-bottom: 1px solid #eef1f5; }
.ft #pag_veicolo .ft-table > thead > tr > th { color: #8a97a6; border-bottom: 1px solid var(--ft-line); }
.ft #pag_veicolo .ft-table > tbody > tr:hover > td { background: #f7f9fc; }
.ft #pag_veicolo .ft-table a.ordina { color: #8a97a6; }

/* Ricerca avanzata: <details> nativo, niente collapse Bootstrap */
.ft .ft-adv { margin: 2px 0 18px; border: 1px solid var(--ft-line); border-radius: 14px; background: #fff; }
.ft .ft-adv > summary { cursor: pointer; list-style: none; padding: 13px 16px; font-weight: 700; font-size: 14px; color: var(--ft-navy); display: flex; align-items: center; gap: 9px; }
.ft .ft-adv > summary::-webkit-details-marker { display: none; }
.ft .ft-adv > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ft-navy); border-bottom: 2px solid var(--ft-navy); transform: rotate(-45deg); transition: transform .18s ease; }
.ft .ft-adv[open] > summary::before { transform: rotate(45deg); }
.ft .ft-adv__body { padding: 4px 16px 6px; }
.ft .ft-adv__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px 16px; }
.ft .ft-adv__count { font-size: 14px; color: var(--ft-muted); }
.ft .ft-adv__count b { color: var(--ft-navy); }

@media (max-width: 720px) {
    .ft .ft-tablewrap { overflow-x: visible; }
    .ft .ft-table td.ft-col-sec, .ft .ft-table th.ft-col-sec { display: none; }
    .ft .ft-table td.ft-ops { white-space: normal; }
}

/* ---- Modifica dati azienda (company_edit): uploader + specializzazioni + validate ---- */
.ft .ft-checks--grid { flex-direction: row; flex-wrap: wrap; gap: 10px 22px; margin-top: 4px; }
.ft .ft-checks--grid .ft-check { flex: 0 0 auto; min-width: 210px; margin: 0; }

.ft .ft-upload { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ft .ft-upload__btn.fileinput-button { position: relative; overflow: hidden; }
.ft .ft-upload__btn.fileinput-button input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; font-size: 200px; direction: ltr; }
.ft .ft-upload__spinner { display: none; width: 52px; height: auto; }
.ft .ft-upload__preview:empty { display: none; }
.ft .ft-upload__preview img { display: block; max-width: 180px; height: auto; border-radius: 12px; border: 1px solid var(--ft-line); }
.ft .ft-upload__progress { width: 220px; max-width: 100%; height: 6px; border-radius: 99px; background: var(--ft-line); overflow: hidden; }
.ft .ft-upload__progress .bar { height: 100%; width: 0; background: var(--ft-orange); transition: width .2s ease; }

/* CAP: <select> iniettato via JS quando la città ha più CAP */
.ft #billing_cap_select select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--ft-line); border-radius: 12px; background: #fff; font: inherit; color: var(--ft-ink); }

/* messaggi jQuery-validate + check P.IVA */
.ft .ft-field.has-error .ft-input { border-color: var(--ft-danger); }
.ft label.has-error { display: block; margin-top: 5px; color: var(--ft-danger); font-size: 13px; font-weight: 600; }
.ft #div_check_piva #check_piva { color: var(--ft-danger); font-size: 13.5px; margin: 0; }

/* ===========================================================================
   Anagrafica cliente FriTrak (admin): ricerca autocomplete + header scheda
   =========================================================================== */
.ft .ft-help { margin: 6px 0 0; font-size: 13px; color: var(--ft-muted); }

.ft .ft-ac { position: relative; }
.ft .ft-ac__menu { position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + 5px);
    background: #fff; border: 1px solid var(--ft-line); border-radius: 14px;
    box-shadow: 0 14px 36px rgba(14, 56, 92, .16); max-height: 360px; overflow-y: auto; display: none; }
.ft .ft-ac__menu.is-open { display: block; }
.ft .ft-ac__item { display: block; width: 100%; text-align: left; border: 0; background: none;
    padding: 11px 15px; cursor: pointer; border-bottom: 1px solid var(--ft-line); font: inherit; }
.ft .ft-ac__item:last-child { border-bottom: 0; }
.ft .ft-ac__item:hover, .ft .ft-ac__item.is-active { background: #f1f6fb; }
.ft .ft-ac__name { display: block; font-weight: 700; color: var(--ft-navy); font-size: 14px; }
.ft .ft-ac__meta { display: block; font-size: 12.5px; color: var(--ft-muted); margin-top: 2px; }
.ft .ft-ac__empty { padding: 13px 15px; color: var(--ft-muted); font-size: 13.5px; }

.ft .ft-cli-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ft .ft-cli-head__main { min-width: 0; }
.ft .ft-cli-head__name { font-size: 20px; font-weight: 800; color: var(--ft-navy); margin: 0 0 4px; }
.ft .ft-cli-head__meta { font-size: 13.5px; color: var(--ft-muted); display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; }

.ft .ft-soon { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ft-orange); background: rgba(255, 150, 0, .12);
    border-radius: 999px; padding: 2px 9px; margin-left: 6px; }
.ft .ft-adv-list { display: flex; flex-direction: column; gap: 10px; }

/* ===========================================================================
   Segnacollo (Step 1): due colonne Mittente | Destinatario, ordinato e responsive
   =========================================================================== */
/* larghezza contenuta: selettore composto perché .ft e .ft-page--wide sono sullo stesso nodo */
.ft.ft-page--wide .ft-page__inner { max-width: 1080px; }

.ft .ft-sg__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.ft .ft-sg__card { border: 1px solid var(--ft-line); border-radius: 16px; background: #fff;
    padding: 20px 22px 22px; min-width: 0; box-shadow: 0 1px 2px rgba(14, 56, 92, .04); }
.ft .ft-sg__card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.ft .ft-sg__num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    background: var(--ft-navy); color: #fff; font-size: 14px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; }
.ft .ft-sg__num--2 { background: var(--ft-orange); }
.ft .ft-sg__card-title { margin: 0; font-size: 16px; font-weight: 800; color: var(--ft-navy); }
.ft .ft-sg__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px 14px; }
.ft .ft-sg__f { min-width: 0; }
.ft .ft-sg__f > .ft-label { display: block; margin-bottom: 5px; }
.ft .ft-sg__f > .ft-input { width: 100%; }
.ft .ft-sg__f.c2 { grid-column: span 2; }
.ft .ft-sg__f.c3 { grid-column: span 3; }
.ft .ft-sg__f.c4 { grid-column: span 4; }
.ft .ft-sg__f.c6 { grid-column: span 6; }
.ft .ft-sg__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.ft .ft-sg__actions .ft-help { margin: 0; }
@media (max-width: 820px) {
    .ft .ft-sg__cols { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 520px) {
    .ft .ft-sg__grid { grid-template-columns: 1fr; }
    .ft .ft-sg__f.c2, .ft .ft-sg__f.c3, .ft .ft-sg__f.c4, .ft .ft-sg__f.c6 { grid-column: auto; }
}

/* ===========================================================================
   Veicoli (Step 2): lista full-width + form a tile (categorie/merci)
   =========================================================================== */
.ft.ft-page--full .ft-page__inner { max-width: none; }

/* testata standard (riusabile in tutti i moduli): titolo a sinistra, azione a destra */
.ft .ft-pagehead { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ft .ft-pagehead__main { min-width: 0; }
.ft .ft-pagehead__main .ft-secthead__title { margin: 0; }
.ft .ft-pagehead .ft-btn { width: auto; flex: 0 0 auto; }

/* lista: miniatura + azioni a icona */
.ft .ft-vtable th:first-child, .ft .ft-vtable td.ft-vthumb { width: 56px; }
.ft .ft-vthumb img { width: 46px; height: 46px; border-radius: 8px; }
.ft .ft-vthumb__photo { object-fit: cover; background: #f4f7fa; }
.ft .ft-vthumb__icon { object-fit: contain; background: var(--ft-navy); padding: 6px; }
.ft .ft-vactions { display: flex; gap: 8px; align-items: center; }
.ft .ft-vactions form { margin: 0; }
.ft .ft-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    border: 1px solid var(--ft-line); border-radius: 9px; background: #fff; color: var(--ft-navy); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.ft .ft-iconbtn:hover { border-color: var(--ft-navy); background: #f4f7fa; }
.ft .ft-iconbtn--danger:hover { border-color: var(--ft-danger); color: var(--ft-danger); background: #fdecec; }

/* tile categorie/merci con iconcina */
.ft .ft-vtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; margin: 6px 0 4px; }
.ft .ft-vtiles__macro { margin: 16px 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ft-muted); }
.ft .ft-vtiles__macro:first-of-type { margin-top: 4px; }
.ft .ft-vtile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 7px;
    padding: 12px 8px; min-height: 92px; border: 1.5px solid var(--ft-line); border-radius: 12px; cursor: pointer; text-align: center;
    transition: border-color .15s, background .15s, box-shadow .15s; }
.ft .ft-vtile:hover { border-color: #c5d0dc; }
.ft .ft-vtile input { position: absolute; opacity: 0; width: 0; height: 0; }
.ft .ft-vtile img { width: 48px; height: 48px; object-fit: contain; background: var(--ft-navy); border-radius: 10px; padding: 8px; }
.ft .ft-vtile span { font-size: 12px; line-height: 1.2; color: var(--ft-navy); font-weight: 600; }
/* il tile "macro" è un <button>: reset */
.ft .ft-macro { font: inherit; background: #fff; }
/* selezione evidente ma non pacchiana: bordo arancio 2px + spunta d'angolo */
.ft .ft-vtile:has(input:checked), .ft .ft-macro.is-active { border-color: var(--ft-orange); border-width: 2px; background: #fff8ef; }
.ft .ft-vtile:has(input:checked)::after, .ft .ft-macro.is-active::after { content: "\2713"; position: absolute; top: 6px; right: 6px;
    width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
    background: var(--ft-orange); color: #fff; border-radius: 50%; font-size: 11px; font-weight: 700; line-height: 1; }
.ft .ft-vtile:has(input:focus-visible) { outline: 2px solid var(--ft-navy); outline-offset: 2px; }

/* reveal progressivo degli step */
.ft .ft-reveal:not([hidden]) { animation: ftReveal .28s ease; }
@keyframes ftReveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* refrigerato: checkbox (col-4) + select tipo (col-8) affiancati; select rivelata via :has */
.ft .ft-vrefrigrow { margin-top: 14px; align-items: end; }
.ft .ft-vrefrigrow .ft-choice { margin: 0; }
.ft .ft-vrefrig { display: none; }
.ft.ft-vform:has(#flag_refrig:checked) .ft-vrefrig { display: block; }
.ft .ft-vopt { color: var(--ft-muted); font-size: 13px; font-weight: 400; }

/* coperture assicurative impilate (una sotto l'altra) nel pannello */
.ft .ft-choice--stack { flex-direction: column; align-items: stretch; }
.ft .ft-choice--stack .ft-choice__opt { justify-content: flex-start; }

.ft .ft-vform__foot { display: flex; justify-content: flex-end; gap: 12px; }
@media (max-width: 560px) {
    .ft .ft-vtiles { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* Eyebrow sopra il titolo di sezione (usato da Veicoli e Tratte) */
.ft .ft-secthead__eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ft-orange); }

/* ===========================================================================
   Tratte (Step 3): lista "Origine → Destinazione" + form percorso (città + raggio)
   =========================================================================== */

/* Lista: riga tratta orizzontale (ha una sua classe .ft-lane per non ereditare il
   .ft-route colonnare del wizard) */
.ft .ft-lane { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ft .ft-lane__end { color: var(--ft-navy); font-size: 15px; }
.ft .ft-lane__end strong { font-weight: 700; }
.ft .ft-lane__prov { color: var(--ft-muted); font-weight: 400; font-size: 13px; }
.ft .ft-lane__arrow { color: var(--ft-orange); font-size: 20px; line-height: 1; font-weight: 700; }
.ft .ft-trtable td[data-label="Tratta"] .ft-badge { margin-top: 6px; }

/* Form: griglia percorso (Origine | swap | Destinazione) — margine sopra per non far
   sovrapporre i tag ORIGINE/DESTINAZIONE al titolo "Percorso" */
.ft .ft-locgrid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin: 26px 0 6px; }
.ft .ft-trloc { position: relative; border: 1px solid var(--ft-line); border-radius: 14px; padding: 18px 14px 14px; background: #fbfcfe; }
.ft .ft-trloc .ft-field + .ft-field { margin-top: 10px; }
.ft .ft-trloc .ft-range { margin-top: 8px; }
.ft .ft-trloc__tag { position: absolute; top: -11px; left: 16px; display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .03em;
    text-transform: uppercase; color: #fff; }
.ft .ft-trloc__tag--from { background: var(--ft-navy); }
.ft .ft-trloc__tag--to { background: var(--ft-orange); }

/* Bottone inverti origine/destinazione al centro */
.ft .ft-swap { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ft-line);
    background: #fff; color: var(--ft-navy); display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s, color .15s, transform .15s; }
.ft .ft-swap:hover { background: var(--ft-navy); color: #fff; transform: rotate(180deg); }

/* Slider raggio */
.ft .ft-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
    background: #e3e9f0; outline: none; margin-top: 12px; }
.ft .ft-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px;
    border-radius: 50%; background: var(--ft-orange); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(14,56,92,.35); cursor: pointer; }
.ft .ft-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--ft-orange);
    border: 3px solid #fff; box-shadow: 0 1px 4px rgba(14,56,92,.35); cursor: pointer; }
.ft .ft-range:focus-visible { outline: 2px solid var(--ft-navy); outline-offset: 4px; }

/* Textarea, toolbar allineata a destra, empty inline */
.ft .ft-textarea { min-height: 62px; resize: vertical; font-family: inherit; line-height: 1.5; }
.ft .ft-toolbar--right { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
/* Mini-azioni merci (seleziona/deseleziona) sotto le tile, piccole e discrete */
.ft .ft-merci-tools { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.ft .ft-merci-tools__sep { color: var(--ft-muted); font-size: 12px; }
.ft .ft-minibtn { border: 0; background: none; padding: 2px 2px; font-size: 12.5px; font-weight: 600;
    color: var(--ft-navy); cursor: pointer; opacity: .75; }
.ft .ft-minibtn:hover { opacity: 1; text-decoration: underline; }
.ft .ft-empty--inline { padding: 22px; text-align: center; }
.ft .ft-empty--inline p { margin: 0 0 12px; color: var(--ft-muted); }

@media (max-width: 720px) {
    .ft .ft-locgrid { grid-template-columns: 1fr; }
    .ft .ft-swap { justify-self: center; }
    .ft .ft-swap:hover { transform: rotate(90deg); }
}

/* Ricorrenza: radio in riga + sotto-blocchi (giorni) */
.ft .ft-choice--row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ft .ft-choice--row .ft-choice__opt { flex: 0 0 auto; }
.ft .ft-ricbox { margin-top: 14px; padding: 14px; border: 1px dashed var(--ft-line); border-radius: 12px; background: #fbfcfe; }
.ft .ft-weekdays { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ft .ft-weekday { position: relative; cursor: pointer; }
.ft .ft-weekday input { position: absolute; opacity: 0; width: 0; height: 0; }
.ft .ft-weekday span { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 8px 10px;
    border: 1px solid var(--ft-line); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ft-navy); background: #fff; }
.ft .ft-weekday input:checked + span { background: var(--ft-navy); color: #fff; border-color: var(--ft-navy); }
.ft .ft-weekday input:focus-visible + span { outline: 2px solid var(--ft-orange); outline-offset: 2px; }

/* Fermate intermedie */
.ft .ft-fermata { border: 1px solid var(--ft-line); border-radius: 12px; padding: 12px; margin-bottom: 10px; background: #fbfcfe; }
.ft .ft-fermata__row { display: flex; align-items: center; gap: 10px; }
.ft .ft-fermata__city { flex: 1; min-width: 0; margin: 0; }
.ft .ft-fermata__dev { margin-top: 10px; }
.ft .ft-fermata__dev .ft-label { margin-bottom: 2px; }
.ft .ft-miniselect { flex: 0 0 auto; height: 42px; border: 1px solid var(--ft-line); border-radius: 10px; background: #fff;
    padding: 0 30px 0 12px; font-size: 14px; color: var(--ft-navy); font-weight: 600; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230e385c' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; }
#tr_add_fermata { margin-top: 2px; }

/* Layout a due colonne: mappa (sinistra, sticky, prominente) + form compatto (destra) */
.ft .ft-trlayout { display: grid; grid-template-columns: 1fr; gap: 18px; }
.ft .ft-mapcard { background: #fff; border: 1px solid var(--ft-line); border-radius: 14px; padding: 12px; }
.ft .ft-map { height: 300px; border-radius: 10px; border: 1px solid var(--ft-line); overflow: hidden; z-index: 0; background: #eef2f6; }
.ft .ft-map__note { margin: 8px 2px 0; font-size: 12px; color: var(--ft-muted); font-style: italic; }
.ft .ft-map__legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; padding: 0 2px; }
.ft .ft-lgd { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ft-navy); font-weight: 600; }
.ft .ft-lgd__dot { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px;
    border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ft-line); flex: 0 0 auto;
    color: #fff; font-size: 10px; font-weight: 900; line-height: 1; }
.ft .ft-lgd__pin { width: 13px; height: 13px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
    border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ft-line); flex: 0 0 auto; }
/* Marker mappa (divIcon): niente box bianco di default; badge circolare per le fermate */
.ft .ft-mk { background: transparent; border: 0; }
.ft .ft-stopmk { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(14,56,92,.45); box-sizing: border-box; }

/* Blocchi collassabili del form (accordion nativo <details>) */
.ft .ft-acc { border: 1px solid var(--ft-line); border-radius: 14px; background: #fff; margin-bottom: 14px; }
.ft .ft-acc__sum { display: flex; align-items: center; gap: 12px; padding: 15px 18px; cursor: pointer; list-style: none; border-radius: 13px; }
.ft .ft-acc__sum::-webkit-details-marker { display: none; }
.ft .ft-acc__sum:hover { background: #f8fafc; }
.ft .ft-acc__titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ft .ft-acc__title { font-size: 16px; font-weight: 800; color: var(--ft-navy); }
.ft .ft-acc__hint { font-size: 12.5px; color: var(--ft-muted); }
.ft .ft-acc__chev { margin-left: auto; color: var(--ft-muted); transition: transform .2s ease; flex: 0 0 auto; }
.ft .ft-acc[open] > .ft-acc__sum { border-bottom: 1px solid var(--ft-line); border-radius: 13px 13px 0 0; }
.ft .ft-acc[open] > .ft-acc__sum .ft-acc__chev { transform: rotate(180deg); }
.ft .ft-acc__body { padding: 16px 18px 18px; }
/* Sotto-titolo dentro un blocco (es. Fermate, Quando parti) — separatore leggero */
.ft .ft-subhead { font-size: 13px; font-weight: 800; color: var(--ft-navy); margin: 16px 0 10px; padding-top: 14px; border-top: 1px solid var(--ft-line); }
.ft .ft-subhead:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ft .ft-trfoot { margin-top: 4px; padding-bottom: 8px; }

@media (min-width: 980px) {
    .ft .ft-trlayout { grid-template-columns: minmax(320px, 36%) 1fr; align-items: start; }
    .ft .ft-trlayout__aside { position: sticky; top: 14px; }
    .ft .ft-map { height: calc(100vh - 210px); min-height: 460px; }
}
/* Desktop stretti (< 1200px): la colonna form è troppo stretta per affiancare Origine/Destinazione
   → si impilano (la geografia la mostra la mappa). Da 1200px in su restano affiancati = più compatti. */
@media (min-width: 980px) and (max-width: 1199px) {
    .ft .ft-trlayout__main .ft-locgrid { grid-template-columns: 1fr; }
    .ft .ft-trlayout__main .ft-swap { justify-self: center; }
    .ft .ft-trlayout__main .ft-swap:hover { transform: rotate(90deg); }
}

@media (max-width: 560px) {
    .ft .ft-fermata__row { flex-wrap: wrap; }
    .ft .ft-fermata__city { flex: 1 1 100%; order: 3; }
}

/* ===========================================================================
   Le mie richieste (Richieste inviate) — indice riusabile: chip stato, filtri, pager
   =========================================================================== */
.ft .ft-statechips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.ft .ft-reqfilters .ft-field--statosel { display: none; } /* su desktop lo stato è nei chip; la select è per il mobile */
.ft .ft-statechip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--ft-line); background: #fff; color: var(--ft-navy); font-size: 13.5px; font-weight: 600;
    text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.ft .ft-statechip:hover { border-color: #c5d0dc; background: #f8fafc; }
.ft .ft-statechip.is-active { background: var(--ft-navy); border-color: var(--ft-navy); color: #fff; }
.ft .ft-statechip__n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
    padding: 0 6px; border-radius: 999px; background: #eef1f5; color: #56657a; font-size: 12px; font-weight: 800; }
.ft .ft-statechip.is-active .ft-statechip__n { background: rgba(255,255,255,.22); color: #fff; }
/* Chip colorati per tono di stato (= colore del badge in card) */
.ft .ft-statechip__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.ft .ft-statechip--neutral .ft-statechip__dot { background: #8494a8; }
.ft .ft-statechip--info .ft-statechip__dot { background: #1d5fa8; }
.ft .ft-statechip--warn .ft-statechip__dot { background: #d98a1f; }
.ft .ft-statechip--ok .ft-statechip__dot { background: #1a7f47; }
.ft .ft-statechip--neutral.is-active { background: #eef1f5; border-color: #d3dae3; color: #56657a; }
.ft .ft-statechip--info.is-active { background: #e8f1fb; border-color: #bcd6f2; color: #1d5fa8; }
.ft .ft-statechip--warn.is-active { background: #fdf3e0; border-color: #f2ddb4; color: #a56a12; }
.ft .ft-statechip--ok.is-active { background: #e7f6ee; border-color: #bfe6cf; color: #1a7f47; }
.ft .ft-statechip--info.is-active .ft-statechip__n,
.ft .ft-statechip--warn.is-active .ft-statechip__n,
.ft .ft-statechip--ok.is-active .ft-statechip__n,
.ft .ft-statechip--neutral.is-active .ft-statechip__n { background: rgba(0,0,0,.08); color: inherit; }

/* Contenitore filtri: da desktop la label è nascosta (barra sempre visibile); da mobile è un accordion
   pure-CSS (checkbox hack, niente JS: il contenuto del modulo è iniettato e gli script non girerebbero) */
.ft .ft-filterwrap { margin-bottom: 16px; }
.ft .ft-filterwrap__sum { display: none; }
.ft .ft-filtertoggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.ft .ft-reqfilters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.ft .ft-reqfilters__search { flex: 1 1 260px; min-width: 200px; }
.ft .ft-reqfilters__search .ft-input { width: 100%; }
.ft .ft-reqfilters .ft-select { flex: 0 0 auto; }

.ft .ft-reqroute { display: block; font-size: 13px; color: var(--ft-muted); margin-top: 3px; }
.ft .ft-reqroute__arrow { color: var(--ft-orange); font-weight: 700; }
.ft .ft-reqcount { display: inline-block; font-size: 12.5px; color: var(--ft-muted); margin-right: 8px; }
.ft .ft-reqcount--recv { color: #1a7f47; font-weight: 700; }
.ft .ft-txt-danger { color: #c0392b; }
.ft .ft-reqtable td[data-label="Scadenza"] .ft-badge { margin-left: 6px; }

/* ===== Lista richieste: card con bordo-sinistro nel tono dello stato ===== */
.ft .ft-reqlist { display: flex; flex-direction: column; gap: 12px; }
.ft .ft-reqcard { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff;
    border: 1px solid var(--ft-line); border-left: 4px solid #c9d2dd; border-radius: 14px; text-decoration: none;
    transition: box-shadow .15s, border-color .15s, transform .15s; }
.ft .ft-reqcard:hover { box-shadow: 0 8px 20px rgba(14,56,92,.10); transform: translateY(-1px); }
.ft .ft-reqcard--neutral { border-left-color: #c1cbd7; }
.ft .ft-reqcard--info { border-left-color: #2f74c0; }
.ft .ft-reqcard--warn { border-left-color: #e0952a; }
.ft .ft-reqcard--ok { border-left-color: #23955a; }
.ft .ft-reqcard__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ft .ft-reqcard__top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ft .ft-reqcard__id { font-size: 15px; font-weight: 800; color: var(--ft-navy); }
.ft .ft-reqcard__name { font-size: 14px; font-weight: 600; color: var(--ft-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.ft .ft-reqcard__route { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; font-size: 14px; font-weight: 700; color: var(--ft-navy); }
.ft .ft-reqcard__pt { display: inline-flex; align-items: center; gap: 4px; }
.ft .ft-reqcard__arrow { color: var(--ft-orange); font-weight: 800; }
.ft .ft-reqcard__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ft-muted); }
.ft .ft-reqcard__m { display: inline-flex; align-items: center; gap: 5px; }
.ft .ft-reqcard__m svg { opacity: .65; flex: 0 0 auto; }
.ft .ft-reqcard__m--counts { color: var(--ft-navy); font-weight: 600; }
.ft .ft-reqcard__m--counts b { color: #1a7f47; }
.ft .ft-reqcard__chev { flex: 0 0 auto; color: #b3bfce; transition: color .15s, transform .15s; }
.ft .ft-reqcard:hover .ft-reqcard__chev { color: var(--ft-orange); transform: translateX(2px); }
@media (max-width: 719px) {
    .ft .ft-reqcard { padding: 13px 12px; gap: 8px; }
    .ft .ft-reqcard__name { max-width: 100%; }
    /* Filtri: accordion "Ricerca e filtri" da mobile (toggle checkbox, niente JS) */
    .ft .ft-filterwrap { border: 1px solid var(--ft-line); border-radius: 12px; background: #fff; }
    .ft .ft-filterwrap__sum { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer;
        font-size: 14px; font-weight: 800; color: var(--ft-navy); user-select: none; }
    .ft .ft-filterwrap__chev { margin-left: auto; color: var(--ft-muted); transition: transform .2s; }
    .ft .ft-filtertoggle:checked ~ .ft-filterwrap__sum .ft-filterwrap__chev { transform: rotate(180deg); }
    .ft .ft-filterwrap > .ft-reqfilters { display: none; padding: 0 12px 12px; margin-bottom: 0; }
    .ft .ft-filtertoggle:checked ~ .ft-reqfilters { display: flex; }
    /* Da mobile: niente striscia chip da scrollare — lo stato è una select dentro i filtri */
    .ft .ft-statechips { display: none; }
    .ft .ft-reqfilters .ft-field--statosel { display: flex; }
}

.ft .ft-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.ft .ft-pager__btn { padding: 8px 14px; border: 1px solid var(--ft-line); border-radius: 10px; background: #fff;
    color: var(--ft-navy); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.ft .ft-pager__btn:hover { background: #f8fafc; border-color: #c5d0dc; }
.ft .ft-pager__info { font-size: 13px; color: var(--ft-muted); }

@media (max-width: 640px) {
    .ft .ft-reqfilters .ft-select { flex: 1 1 100%; }
}

/* ===========================================================================
   Dettaglio richiesta (richiedente) — detail-view responsive (2 col + tab/accordion)
   =========================================================================== */
.ft .ft-backlink { display: inline-block; margin-bottom: 10px; font-size: 13.5px; font-weight: 600; color: var(--ft-muted); text-decoration: none; }
.ft .ft-backlink:hover { color: var(--ft-navy); }
.ft .ft-rdbadges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ft .ft-rdtoolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 18px; }
.ft .ft-rdtoolbar .ft-btn { width: auto; flex: 0 0 auto; }
.ft .ft-rdcancel { color: #c0392b; border-color: #f0cfcb; }
.ft .ft-rdcancel:hover { background: #fdecec; border-color: #e3b6b0; color: #a3301f; }
/* Menu "Altro" (dropdown pure-CSS via <details>) */
.ft .ft-menu { position: relative; }
.ft .ft-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.ft .ft-menu > summary::-webkit-details-marker { display: none; }
.ft .ft-menu__list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 190px;
    background: #fff; border: 1px solid var(--ft-line); border-radius: 12px; box-shadow: 0 12px 30px rgba(14,56,92,.16);
    padding: 6px; display: flex; flex-direction: column; }
.ft .ft-menu[open] > summary { background: #eef2f8; }
.ft .ft-menu__item { padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ft-navy);
    text-decoration: none; white-space: nowrap; }
.ft .ft-menu__item:hover { background: #f2f6fb; }
.ft .ft-quote__actions .ft-btn { width: auto; flex: 0 0 auto; }

.ft .ft-rdlayout { display: grid; grid-template-columns: 1fr; gap: 18px; }
.ft .ft-rdlayout__aside > .ft-card { margin-bottom: 14px; }
.ft .ft-card--flush { overflow: hidden; }
.ft .ft-card--flush .ft-map { height: 240px; border: 0; border-radius: 0; }

/* Riepilogo */
/* Route timeline (Ritiro → Consegna) con linea di collegamento */
.ft .ft-rdroute { position: relative; display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.ft .ft-rdroute__pt { position: relative; display: flex; align-items: center; gap: 12px; }
.ft .ft-rdroute__pin { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--ft-line); z-index: 1; }
.ft .ft-rdroute__pt--from .ft-rdroute__pin { background: var(--ft-navy); }
.ft .ft-rdroute__pt--to .ft-rdroute__pin { background: var(--ft-orange); }
.ft .ft-rdroute__pt--from::before { content: ""; position: absolute; left: 6px; top: 16px; width: 2px; height: calc(100% + 12px); background: var(--ft-line); }
.ft .ft-rdroute__txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ft .ft-rdroute__tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ft-muted); }
.ft .ft-rdroute__city { font-size: 15px; font-weight: 700; color: var(--ft-navy); overflow-wrap: anywhere; }
.ft .ft-rdroute__addr { font-size: 13px; color: var(--ft-muted); overflow-wrap: anywhere; }
.ft .ft-rdroute__who { font-size: 12.5px; color: var(--ft-muted); }
/* Contatti richiedente nel riepilogo */
.ft .ft-rdcontacts { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ft-line); }
.ft .ft-rdcontacts__tag { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ft-muted); margin-bottom: 8px; }
.ft .ft-rdcontacts__row { display: flex; flex-wrap: wrap; gap: 8px; }
.ft .ft-rdcontact { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--ft-line);
    border-radius: 999px; background: #f7f9fc; color: var(--ft-navy); font-size: 13px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.ft .ft-rdcontact:hover { border-color: #c5d0dc; background: #eef2f8; }
.ft .ft-rdcontact svg { color: var(--ft-orange); flex: 0 0 auto; }
/* Fact tiles (Merce / Distanza / Inserita / Scadenza) */
.ft .ft-rdfacts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 14px; border-top: 1px solid var(--ft-line); }
.ft .ft-rdfact { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ft .ft-rdfact__ic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto;
    border-radius: 9px; background: #eef2f8; color: var(--ft-navy); }
.ft .ft-rdfact__ic--danger { background: #fdecec; color: #c0392b; }
.ft .ft-rdfact__txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ft .ft-rdfact__k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ft-muted); }
.ft .ft-rdfact__v { font-size: 14px; font-weight: 700; color: var(--ft-navy); overflow-wrap: anywhere; }
.ft .ft-rdparty { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ft .ft-rdparty__tag { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ft-muted); }
.ft .ft-rdparty__name { font-weight: 700; color: var(--ft-navy); margin-top: 2px; }
.ft .ft-rdparty__addr { font-size: 13px; color: var(--ft-muted); margin-top: 2px; }
.ft .ft-rdparams + .ft-rdparams { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ft-line); }
.ft .ft-rdparams__n { font-size: 12px; font-weight: 800; color: var(--ft-muted); margin-bottom: 6px; }
.ft .ft-rdparam { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13.5px; border-bottom: 1px solid #f0f3f7; }
.ft .ft-rdparam span { color: var(--ft-muted); text-transform: capitalize; }
.ft .ft-rdparam b { color: var(--ft-navy); text-align: right; }
.ft .ft-rdnote { margin: 0; font-size: 14px; color: #445; line-height: 1.55; }

/* Tab (desktop) */
.ft .ft-rdtabs { display: flex; gap: 4px; border-bottom: 2px solid var(--ft-line); margin-bottom: 16px; }
.ft .ft-rdtab { border: 0; background: none; padding: 11px 14px; margin-bottom: -2px; cursor: pointer;
    font-size: 14px; font-weight: 700; color: var(--ft-muted); border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 7px; }
.ft .ft-rdtab:hover { color: var(--ft-navy); }
.ft .ft-rdtab.is-active { color: var(--ft-navy); border-bottom-color: var(--ft-orange); }
.ft .ft-rdtab__n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; background: #eef1f5; color: #56657a; font-size: 12px; font-weight: 800; }
.ft .ft-rdtab.is-active .ft-rdtab__n { background: #fdecd7; color: #a56a12; }
.ft .ft-rdpanel__head { display: none; }

/* Preventivo (quote card) */
.ft .ft-quote { border: 1px solid var(--ft-line); border-radius: 14px; padding: 16px; margin-bottom: 12px; background: #fff; }
.ft .ft-quote--accepted { border-color: #bfe6cf; background: #f6fcf8; }
.ft .ft-quote__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ft .ft-quote__carrier strong { display: block; font-size: 15px; font-weight: 800; color: var(--ft-navy); }
.ft .ft-quote__city { font-size: 13px; color: var(--ft-muted); }
.ft .ft-quote__price { font-size: 22px; font-weight: 800; color: var(--ft-navy); white-space: nowrap; }
.ft .ft-quote__iva { font-size: 12px; font-weight: 600; color: var(--ft-muted); }
.ft .ft-quote__valid { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--ft-muted); }
.ft .ft-quote__valid svg { color: var(--ft-orange); flex: 0 0 auto; }
.ft .ft-quote__note { margin: 10px 0 0; font-size: 14px; color: #445; line-height: 1.5; }
.ft .ft-quote__att { display: inline-block; margin-top: 10px; color: var(--ft-navy); font-weight: 600; font-size: 12.5px; text-decoration: none; }
.ft .ft-quote__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ft-line); }
/* Mobile: nome+città in alto, prezzo sotto, poi validità, poi il resto */
@media (max-width: 560px) {
    .ft .ft-quote__top { flex-direction: column; gap: 4px; }
    .ft .ft-quote__price { font-size: 24px; }
}
/* Richieste inviate: lista pulita (no tabella) */
.ft .ft-sentlist { display: flex; flex-direction: column; gap: 8px; }
.ft .ft-sent { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--ft-line); border-radius: 12px; background: #fff; }
.ft .ft-sent__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ft .ft-sent__name { font-size: 14.5px; font-weight: 700; color: var(--ft-navy); overflow-wrap: anywhere; }
.ft .ft-sent__city { font-size: 12.5px; color: var(--ft-muted); }
.ft .ft-sent__date { font-size: 12px; color: var(--ft-muted); margin-top: 2px; }
.ft .ft-sent .ft-iconbtn { flex: 0 0 auto; }

@media (min-width: 980px) {
    .ft .ft-rdlayout { grid-template-columns: minmax(320px, 38%) 1fr; align-items: start; }
    .ft .ft-rdlayout__aside { position: sticky; top: 14px; }
    .ft .ft-rdpanel > .ft-rdpanel__body { display: none; }
    .ft .ft-rdpanel.is-active > .ft-rdpanel__body { display: block; }
}
@media (max-width: 979px) {
    .ft .ft-rdtabs { display: none; }
    .ft .ft-rdpanel { border: 1px solid var(--ft-line); border-radius: 14px; margin-bottom: 12px; background: #fff; }
    .ft .ft-rdpanel__head { display: flex; align-items: center; gap: 9px; width: 100%; padding: 15px 16px; cursor: pointer;
        border: 0; background: none; font-size: 15px; font-weight: 800; color: var(--ft-navy); }
    .ft .ft-rdpanel__chev { margin-left: auto; color: var(--ft-muted); transition: transform .2s; flex: 0 0 auto; }
    .ft .ft-rdpanel.is-open .ft-rdpanel__chev { transform: rotate(180deg); }
    .ft .ft-rdpanel > .ft-rdpanel__body { display: none; padding: 0 16px 16px; }
    .ft .ft-rdpanel.is-open > .ft-rdpanel__body { display: block; }
    .ft .ft-rdparty { grid-template-columns: 1fr; gap: 12px; }
}

/* --- Richieste inviate: rifiniture (pin lista, filtri mobile, chat, riepilogo mobile) --- */
.ft .ft-reqpin { flex: 0 0 auto; vertical-align: -1px; margin-right: 1px; }
.ft .ft-reqpin--from { fill: var(--ft-navy); }
.ft .ft-reqpin--to { fill: var(--ft-orange); }
.ft .ft-reqroute { display: block; font-size: 13px; color: var(--ft-muted); margin-top: 3px; }

/* Filtri: ricerca a tutta larghezza + griglia (merce/scaduta/date/go), impila pulito su mobile */
.ft .ft-reqfilters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; align-items: stretch; }
.ft .ft-reqfilters__search .ft-input { width: 100%; }
.ft .ft-reqfilters__grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ft .ft-field--inline { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.ft .ft-field--inline .ft-flabel { font-size: 11px; font-weight: 700; color: var(--ft-muted); text-transform: uppercase; letter-spacing: .03em; }
.ft .ft-field--inline .ft-select, .ft .ft-field--inline .ft-input { min-width: 130px; }
.ft .ft-reqfilters__go { align-self: flex-end; width: auto; flex: 0 0 auto; min-width: 110px; }
@media (max-width: 640px) {
    .ft .ft-reqfilters__grid { flex-direction: column; align-items: stretch; }
    .ft .ft-field--inline .ft-select, .ft .ft-field--inline .ft-input { min-width: 0; width: 100%; }
    .ft .ft-reqfilters__go { width: 100%; }
}

/* Dettaglio: mappa nel box riepilogo + icone label */
.ft .ft-rdsummary { overflow: hidden; }
.ft .ft-map--sm { height: 180px; min-height: 0; border: 0; border-radius: 0; }
.ft .ft-di { color: var(--ft-muted); flex: 0 0 auto; }
.ft .ft-dl dt { display: flex; align-items: center; gap: 7px; }
.ft .ft-quote__hint { margin: 8px 0 0; font-size: 12px; color: var(--ft-muted); font-style: italic; line-height: 1.4; }

/* Messaggi (chat) */
.ft .ft-chat { border: 1px solid var(--ft-line); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.ft .ft-chat__head { font-weight: 800; color: var(--ft-navy); font-size: 14px; margin-bottom: 10px; }
.ft .ft-msg { max-width: 80%; margin-bottom: 8px; }
.ft .ft-msg--mine { margin-left: auto; text-align: right; }
.ft .ft-msg__bubble { display: inline-block; padding: 8px 12px; border-radius: 12px; background: #eef2f6; color: var(--ft-navy); font-size: 14px; line-height: 1.45; text-align: left; }
.ft .ft-msg--mine .ft-msg__bubble { background: var(--ft-navy); color: #fff; }
.ft .ft-msg__date { font-size: 11px; color: var(--ft-muted); margin-top: 3px; }

/* Dettagli merce/note: aperto su desktop, collassato su mobile (toggle checkbox, niente JS) */
.ft .ft-rdmore__cb { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ft .ft-rdmore__sum { display: none; }
.ft .ft-rdmore__body > .ft-card { margin-bottom: 14px; }
@media (max-width: 979px) {
    .ft .ft-rdmore { border: 1px solid var(--ft-line); border-radius: 12px; background: #fff; margin-bottom: 12px; }
    .ft .ft-rdmore__sum { display: flex; align-items: center; gap: 8px; padding: 13px 16px; cursor: pointer;
        font-size: 14px; font-weight: 800; color: var(--ft-navy); user-select: none; }
    .ft .ft-rdmore__chev { margin-left: auto; color: var(--ft-muted); transition: transform .2s; }
    .ft .ft-rdmore__cb:checked ~ .ft-rdmore__sum .ft-rdmore__chev { transform: rotate(180deg); }
    .ft .ft-rdmore__body { display: none; }
    .ft .ft-rdmore__cb:checked ~ .ft-rdmore__body { display: block; }
    .ft .ft-rdmore__body > .ft-card { margin: 0 10px 10px; }
    .ft .ft-rdtoolbar .ft-btn { min-height: 40px; padding: 6px 12px; font-size: 13px; }
    .ft .ft-quote__actions .ft-btn { min-height: 40px; padding: 6px 12px; font-size: 13px; }
    .ft .ft-map--sm { height: 160px; min-height: 0; }
}
.ft .ft-reqfilters__search { flex: 0 0 auto; min-width: 0; }

/* ④ Consulta richieste: campo provincia compatto */
.ft .ft-input--prov { max-width: 96px; text-transform: uppercase; }

/* ===== ③ Richieste ricevute (carrier inbox) ===== */
/* KPI/sezioni cliccabili per stato */
.ft .ft-kpi-grid--states { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ft .ft-kpi--link { text-decoration: none; padding: 14px 16px; gap: 11px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ft .ft-kpi--link:hover { border-color: #c5d0dc; box-shadow: 0 6px 16px rgba(14,56,92,.08); transform: translateY(-1px); }
.ft .ft-kpi__dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: #8494a8; }
.ft .ft-kpi--info .ft-kpi__dot { background: #2f74c0; }
.ft .ft-kpi--warn .ft-kpi__dot { background: #e0952a; }
.ft .ft-kpi--ok .ft-kpi__dot { background: #23955a; }
.ft .ft-kpi--danger .ft-kpi__dot { background: #c0392b; }
.ft .ft-kpi--neutral .ft-kpi__dot { background: #8494a8; }
.ft .ft-kpi__body { display: flex; flex-direction: column; min-width: 0; }
.ft .ft-kpi--link .ft-kpi__num { font-size: 22px; }
.ft .ft-kpi--info.is-active { border-color: #2f74c0; box-shadow: 0 0 0 1px #2f74c0 inset; }
.ft .ft-kpi--warn.is-active { border-color: #e0952a; box-shadow: 0 0 0 1px #e0952a inset; }
.ft .ft-kpi--ok.is-active { border-color: #23955a; box-shadow: 0 0 0 1px #23955a inset; }
.ft .ft-kpi--danger.is-active { border-color: #c0392b; box-shadow: 0 0 0 1px #c0392b inset; }
.ft .ft-kpi--neutral.is-active { border-color: #8494a8; box-shadow: 0 0 0 1px #8494a8 inset; }
@media (max-width: 719px) {
    /* Chip Tutte/Scadute visibili anche in ③ (① li nasconde per usare la select stato) */
    .ft .ft-statechips--filter { display: flex; }
    /* KPI compatti: una riga corta ciascuno, impilati (numero e label in linea) */
    .ft .ft-kpi-grid--states { grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; }
    .ft .ft-kpi--link { padding: 10px 14px; gap: 11px; }
    .ft .ft-kpi--link .ft-kpi__body { flex-direction: row; align-items: baseline; gap: 8px; }
    .ft .ft-kpi--link .ft-kpi__num { font-size: 18px; }
    .ft .ft-kpi--link .ft-kpi__lbl { margin-top: 0; }
}

/* Contatti bloccati (upsell abbonamento) */
.ft .ft-lock { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 14px; border: 1px dashed var(--ft-line);
    border-radius: 12px; background: #f8fafc; }
.ft .ft-lock__ic { color: var(--ft-muted); }
.ft .ft-lock__txt { font-size: 13.5px; color: #445; line-height: 1.4; }
.ft .ft-rdcontact--plain { background: #fff; cursor: default; }

/* Il mio preventivo */
.ft .ft-myquote--won { border-color: #bfe6cf; background: #f6fcf8; }
.ft .ft-myquote__won { font-size: 16px; font-weight: 800; color: #1a7f47; margin-bottom: 8px; }
.ft .ft-myquote__price { font-size: 24px; font-weight: 800; color: var(--ft-navy); margin: 2px 0 6px; }

/* Form invia preventivo */
.ft .ft-quoteform { display: flex; flex-direction: column; gap: 12px; }
.ft .ft-quoteform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ft .ft-quoteform .ft-field { margin: 0; }
.ft .ft-quoteform textarea.ft-input { resize: vertical; min-height: 64px; }
.ft .ft-quoteform .ft-btn--primary { align-self: flex-start; }

/* Riga azioni (chiedi info / rifiuta) */
.ft .ft-rdactions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ft .ft-rdactions .ft-btn { width: auto; flex: 0 0 auto; }
.ft .ft-inlineform { display: inline; margin: 0; }
@media (max-width: 560px) {
    .ft .ft-quoteform__row { grid-template-columns: 1fr; }
    .ft .ft-quoteform .ft-btn--primary { align-self: stretch; width: 100%; }
    .ft .ft-rdactions .ft-btn, .ft .ft-inlineform, .ft .ft-inlineform .ft-btn { width: 100%; }
}

/* =========================================================================
   Albo (⑤) — rubrica unificata clienti+fornitori
   ========================================================================= */

/* Intestazione con azione a destra */
.ft .ft-pagehead__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.ft .ft-badge--muted { background: #eef1f5; color: #64748b; }

/* Lista contatti */
.ft .ft-contactlist { display: flex; flex-direction: column; gap: 10px; }
.ft .ft-contactcard { display: flex; align-items: center; gap: 14px; padding: 13px 16px; background: #fff;
    border: 1px solid var(--ft-line); border-radius: 12px; text-decoration: none; color: inherit;
    transition: box-shadow .15s, transform .15s, border-color .15s; }
.ft .ft-contactcard:hover { box-shadow: 0 8px 20px rgba(14,56,92,.10); transform: translateY(-1px); border-color: #d3dce6; }
.ft .ft-contactcard__avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
    letter-spacing: .3px; background: #e8f1fb; color: #1d5fa8; }
.ft .ft-contactcard__avatar--C { background: #e7f6ee; color: #1a7f47; }
.ft .ft-contactcard__avatar--lg { width: 64px; height: 64px; font-size: 22px; }
.ft .ft-contactcard__body { flex: 1 1 auto; min-width: 0; }
.ft .ft-contactcard__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ft .ft-contactcard__name { font-weight: 700; color: var(--ft-navy); font-size: 15.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ft .ft-contactcard__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 5px;
    font-size: 13px; color: #64748b; }
.ft .ft-contactcard__m { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ft .ft-contactcard__m svg { flex: 0 0 auto; color: #94a3b8; }
.ft .ft-contactcard__m--piva { color: #94a3b8; }
.ft .ft-contactcard__chev { flex: 0 0 auto; color: #b6c2cf; }
.ft .ft-contactcard:hover .ft-contactcard__chev { color: var(--ft-orange); }
.ft .ft-empty--inline { margin-top: 14px; text-align: center; color: #64748b; }

/* Scheda contatto (dettaglio) */
.ft .ft-contactview__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding-bottom: 18px; margin-bottom: 4px; border-bottom: 1px solid var(--ft-line); }
.ft .ft-contactview__title { flex: 1 1 220px; min-width: 0; }
.ft .ft-contactview__name { margin: 0 0 7px; font-size: 22px; font-weight: 800; color: var(--ft-navy);
    line-height: 1.2; }
.ft .ft-contactview__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ft .ft-contactview__actions { display: flex; gap: 8px; flex: 0 0 auto; }
.ft .ft-contactview__actions .ft-btn { width: auto; }
.ft .ft-contactview__dl { margin-top: 18px; }
.ft .ft-contactview__dl a { color: var(--ft-navy); font-weight: 600; text-decoration: none; }
.ft .ft-contactview__dl a:hover { text-decoration: underline; }
.ft .ft-contactview__note { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ft-line); }
.ft .ft-contactview__note p { margin: 6px 0 0; color: var(--ft-ink); line-height: 1.5; }
.ft .ft-contactview__empty { margin-top: 16px; }

/* Selettore tipo (nuovo contatto) */
.ft .ft-typegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 4px; }
.ft .ft-typecard { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    border: 1.5px solid var(--ft-line); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.ft .ft-typecard:hover { border-color: #c5d0dc; }
.ft .ft-typecard input { position: absolute; opacity: 0; width: 0; height: 0; }
.ft .ft-typecard__ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px; background: #f1f5f9;
    display: inline-flex; align-items: center; justify-content: center; color: var(--ft-navy); transition: background .15s, color .15s; }
.ft .ft-typecard__tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ft .ft-typecard__tx strong { color: var(--ft-navy); font-size: 15px; }
.ft .ft-typecard__tx small { color: #64748b; font-size: 12.5px; line-height: 1.35; }
.ft .ft-typecard.is-checked, .ft .ft-typecard:has(input:checked) { border-color: var(--ft-orange); background: #fff8ef; }
.ft .ft-typecard.is-checked .ft-typecard__ic, .ft .ft-typecard:has(input:checked) .ft-typecard__ic { background: var(--ft-orange); color: #fff; }
.ft .ft-typecard:has(input:focus-visible) { outline: 2px solid var(--ft-navy); outline-offset: 2px; }
.ft .ft-typefixed { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ft .ft-typefixed .ft-label { margin: 0; }

@media (max-width: 640px) {
    .ft .ft-pagehead__actions { width: 100%; }
    .ft .ft-pagehead__actions .ft-btn { width: 100%; }
    .ft .ft-typegrid { grid-template-columns: 1fr; }
    .ft .ft-contactview__head { gap: 12px; }
    .ft .ft-contactview__actions { width: 100%; }
    .ft .ft-contactview__actions .ft-btn { flex: 1 1 0; }
    .ft .ft-contactcard__avatar { width: 40px; height: 40px; font-size: 14px; }
}

/* =========================================================================
   Profilo pubblico (⑥) — vetrina aziendale del trasportatore
   ========================================================================= */

.ft .ft-vetrina { --vaccent: var(--ft-orange); }
.ft .ft-vetrina .ft-page__inner { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* HERO */
.ft .ft-vhero { position: relative; background: #0e385c center/cover no-repeat; color: #fff;
    padding: 0; overflow: hidden; }
.ft .ft-vhero--nocover { background: linear-gradient(135deg, #0e385c 0%, #14507f 55%, #1d6ba5 100%); }
.ft .ft-vhero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,32,54,.55) 0%, rgba(9,32,54,.82) 100%); }
.ft .ft-vhero__inner { position: relative; display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap;
    padding-top: 96px; padding-bottom: 26px; }
.ft .ft-vhero__logo { flex: 0 0 auto; width: 108px; height: 108px; border-radius: 18px; background: #fff;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.ft .ft-vhero__logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.ft .ft-vhero__logo.is-fallback, .ft .ft-vhero__initials { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--ft-navy), #1d6ba5); color: #fff; font-weight: 800; font-size: 40px; }
.ft .ft-vhero__head { flex: 1 1 340px; min-width: 0; }
.ft .ft-vhero__name { margin: 0 0 8px; font-size: clamp(24px, 4vw, 36px); font-weight: 800; line-height: 1.1;
    text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.ft .ft-vhero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ft .ft-vhero__pin { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; opacity: .95; }
.ft .ft-vhero__slogan { margin: 12px 0 0; font-size: 16px; font-style: italic; opacity: .95; max-width: 640px; }
.ft .ft-vhero__owner { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-left: auto; }
.ft .ft-vhero__ownertag { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; opacity: .8; }
.ft .ft-btn--light { background: #fff; color: var(--ft-navy); border: none; }
.ft .ft-btn--light:hover { background: #f0f4f8; }

.ft .ft-vbadge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
    font-size: 12.5px; font-weight: 700; }
.ft .ft-vbadge--cert { background: rgba(255,150,0,.22); color: #ffd9a0; border: 1px solid rgba(255,150,0,.45); }

/* Rating a stelle (via --r 0..5) */
.ft .ft-vrating { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.ft .ft-vrating strong { font-weight: 800; }
.ft .ft-vrating small { opacity: .8; }
.ft .ft-vstars { --r: 0; position: relative; display: inline-block; color: rgba(255,255,255,.34); letter-spacing: 2px; font-size: 16px; }
.ft .ft-vstars::before { content: "★★★★★"; position: absolute; left: 0; top: 0; width: calc(var(--r) / 5 * 100%);
    overflow: hidden; white-space: nowrap; color: #ffb400; }
.ft .ft-vstars--sm { font-size: 14px; letter-spacing: 1px; color: #dbe2ea; }

/* CONTACT STRIP */
.ft .ft-vbar { background: #fff; border-bottom: 1px solid var(--ft-line); box-shadow: 0 2px 10px rgba(14,56,92,.05); }
.ft .ft-vbar__inner { display: flex; flex-wrap: wrap; gap: 6px 24px; padding-top: 12px; padding-bottom: 12px; }
.ft .ft-vbar__item { display: inline-flex; align-items: center; gap: 8px; color: var(--ft-navy); font-weight: 600;
    font-size: 14px; text-decoration: none; }
.ft .ft-vbar__item svg { color: var(--vaccent); flex: 0 0 auto; }
.ft .ft-vbar__item:hover { color: var(--ft-orange); }
.ft .ft-vbar__item--muted { color: #94a3b8; font-weight: 500; }

/* LAYOUT 2 colonne */
.ft .ft-vlayout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; padding: 30px 0 48px; align-items: start; }
.ft .ft-vmain { min-width: 0; }
.ft .ft-vaside { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }

.ft .ft-vsection { margin-bottom: 34px; }
.ft .ft-vsection__head { margin-bottom: 16px; }
.ft .ft-vsection__title { margin: 0; font-size: 20px; font-weight: 800; color: var(--ft-navy); }
.ft .ft-vsection__hint { margin: 4px 0 0; color: #64748b; font-size: 14px; }

/* MERCI = superficie di conversione (tile navy, icone bianche) */
.ft .ft-vmerci { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.ft .ft-vmerce { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 18px 12px 14px; border-radius: 14px; background: linear-gradient(160deg, #0e385c, #14507f);
    color: #fff; text-decoration: none; text-align: center; overflow: hidden;
    transition: transform .16s, box-shadow .16s; }
.ft .ft-vmerce:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(14,56,92,.28); }
.ft .ft-vmerce__ic { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }
.ft .ft-vmerce__ic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ft .ft-vmerce__lbl { font-weight: 700; font-size: 14px; line-height: 1.2; }
.ft .ft-vmerce__go { font-size: 12px; font-weight: 700; color: #ffd9a0; opacity: 0; transform: translateY(4px);
    transition: opacity .16s, transform .16s; }
.ft .ft-vmerce:hover .ft-vmerce__go { opacity: 1; transform: translateY(0); }

/* ZONE / TRATTE */
.ft .ft-vlanes { display: flex; flex-wrap: wrap; gap: 10px; }
.ft .ft-vlane { display: inline-flex; align-items: center; gap: 10px; padding: 9px 15px; border-radius: 999px;
    background: #f1f5f9; border: 1px solid var(--ft-line); font-size: 14px; color: var(--ft-navy); }
.ft .ft-vlane__pt { font-weight: 600; }
.ft .ft-vlane__pt small { color: #94a3b8; font-weight: 500; }
.ft .ft-vlane__arrow { color: var(--ft-orange); font-weight: 700; font-size: 16px; }

/* GALLERIA MEZZI */
.ft .ft-vgallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.ft .ft-vgallery__item { margin: 0; border-radius: 12px; overflow: hidden; background: #f1f5f9; position: relative; aspect-ratio: 4/3; }
.ft .ft-vgallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; display: block; }
.ft .ft-vgallery__item:hover img { transform: scale(1.06); }
.ft .ft-vgallery__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 10px 8px;
    background: linear-gradient(transparent, rgba(9,32,54,.8)); color: #fff; font-size: 12.5px; font-weight: 600; }

/* RECENSIONI */
.ft .ft-vreviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ft .ft-vreview { margin: 0; padding: 16px 18px; border: 1px solid var(--ft-line); border-radius: 14px; background: #fff; }
.ft .ft-vreview__txt { margin: 8px 0 10px; color: var(--ft-ink); line-height: 1.5; font-size: 14.5px; }
.ft .ft-vreview__by { color: #64748b; font-size: 13px; font-weight: 600; }

/* SIDEBAR cards */
.ft .ft-vcard { background: #fff; border: 1px solid var(--ft-line); border-radius: 14px; padding: 18px 20px; }
.ft .ft-vcard__title { margin: 0 0 12px; font-size: 16px; font-weight: 800; color: var(--ft-navy); }
.ft .ft-vcard__bio { margin: 0; color: var(--ft-ink); line-height: 1.55; font-size: 14.5px; }
.ft .ft-vchips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.ft .ft-vchip { padding: 5px 12px; border-radius: 999px; background: #eef4f9; color: var(--ft-navy);
    font-size: 12.5px; font-weight: 600; }
.ft .ft-vdl { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ft .ft-vdl > div { display: flex; flex-direction: column; gap: 2px; }
.ft .ft-vdl dt { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: #94a3b8; font-weight: 700; }
.ft .ft-vdl dd { margin: 0; color: var(--ft-navy); font-weight: 600; font-size: 14px; word-break: break-word; }
.ft .ft-vdl a { color: var(--ft-navy); text-decoration: none; }
.ft .ft-vdl a:hover { color: var(--ft-orange); text-decoration: underline; }
.ft .ft-vshare { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ft-line); }
.ft .ft-vshare__lbl { font-size: 13px; color: #64748b; font-weight: 600; }
.ft .ft-vshare__btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border-radius: 50%; background: #f1f5f9; color: var(--ft-navy); transition: background .15s, color .15s; }
.ft .ft-vshare__btn:hover { background: var(--ft-navy); color: #fff; }
.ft .ft-vpay { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ft .ft-vpay__ic { height: 30px; width: auto; }

/* RESPONSIVE */
@media (max-width: 900px) {
    .ft .ft-vlayout { grid-template-columns: 1fr; gap: 24px; }
    .ft .ft-vaside { position: static; }
}
@media (max-width: 620px) {
    .ft .ft-vhero__inner { padding-top: 80px; gap: 14px; }
    .ft .ft-vhero__logo { width: 84px; height: 84px; border-radius: 14px; }
    .ft .ft-vhero__owner { width: 100%; align-items: flex-start; margin-left: 0; }
    .ft .ft-vhero__owner .ft-btn { width: 100%; }
    .ft .ft-vbar__inner { gap: 6px 16px; }
    .ft .ft-vmerci { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
    .ft .ft-vmerce__go { opacity: 1; transform: none; }
}

/* ⑥ Banner "richiesta target" nel wizard (dal profilo pubblico) */
.ft .ft-targetbanner { display: flex; align-items: center; gap: 12px; padding: 13px 16px; margin-bottom: 20px;
    border-radius: 12px; background: #fff8ef; border: 1px solid #ffd9a0; color: #92510a; font-size: 14.5px; }
.ft .ft-targetbanner svg { flex: 0 0 auto; color: var(--ft-orange); }
.ft .ft-targetbanner strong { color: #7a4408; }

/* =========================================================================
   Notifiche (⑦) — campanella del trasportatore
   ========================================================================= */
.ft .ft-notiflist { display: flex; flex-direction: column; gap: 10px; }
.ft .ft-notif__sectitle { margin: 26px 0 12px; font-size: 16px; font-weight: 800; color: var(--ft-navy); }
.ft .ft-notif { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff;
    border: 1px solid var(--ft-line); border-radius: 12px; border-left: 3px solid #c1cbd7;
    text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s, border-color .15s; }
.ft a.ft-notif:hover { box-shadow: 0 8px 20px rgba(14,56,92,.10); transform: translateY(-1px); }
.ft .ft-notif.is-new { border-left-color: var(--ft-orange); background: #fffaf2; }
.ft .ft-notif--static { cursor: default; }
.ft .ft-notif__ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; background: #eef4fb;
    display: inline-flex; align-items: center; justify-content: center; color: #1d5fa8; }
.ft .ft-notif__ic--star { background: #fdf3e0; color: #e0a53a; }
.ft .ft-notif__body { flex: 1 1 auto; min-width: 0; }
.ft .ft-notif__route { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; color: var(--ft-navy); font-size: 15px; }
.ft .ft-notif__pt { display: inline-flex; align-items: center; gap: 5px; }
.ft .ft-notif__arrow { color: var(--ft-orange); }
.ft .ft-notif__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; font-size: 13px; color: #64748b; }
.ft .ft-notif__m--due { color: #a56a12; }
.ft .ft-notif__note { margin: 8px 0 0; font-size: 13.5px; color: var(--ft-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft .ft-notif__cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; color: var(--ft-navy); font-weight: 700; font-size: 14px; }
.ft a.ft-notif:hover .ft-notif__cta { color: var(--ft-orange); }
@media (max-width: 560px) {
    .ft .ft-notif__cta span, .ft .ft-notif__cta { font-size: 0; }
    .ft .ft-notif__cta svg { width: 18px; height: 18px; }
}

/* Landing 404 — pagina non trovata */
.ft .ft-notfound { text-align: center; padding: 48px 20px 60px; max-width: 560px; margin: 0 auto; }
.ft .ft-notfound__code { font-size: clamp(72px, 16vw, 128px); font-weight: 800; line-height: 1;
    background: linear-gradient(135deg, var(--ft-navy), #1d6ba5); -webkit-background-clip: text;
    background-clip: text; -webkit-text-fill-color: transparent; color: var(--ft-navy); }
.ft .ft-notfound__title { margin: 10px 0 8px; font-size: 26px; font-weight: 800; color: var(--ft-navy); }
.ft .ft-notfound__lead { margin: 0 0 26px; color: #64748b; font-size: 16px; line-height: 1.5; }
.ft .ft-notfound__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ft .ft-notfound__actions .ft-btn { width: auto; }
@media (max-width: 480px) { .ft .ft-notfound__actions .ft-btn { width: 100%; } }

/* Chat — form di risposta (richiedente/trasportatore) */
.ft .ft-chatreply { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.ft .ft-chatreply__ta { flex: 1 1 auto; resize: vertical; min-height: 40px; }
.ft .ft-chatreply .ft-btn { flex: 0 0 auto; }
@media (max-width: 480px) { .ft .ft-chatreply { flex-direction: column; align-items: stretch; } .ft .ft-chatreply .ft-btn { width: 100%; } }

/* --- Pannello admin: galleria mockup email (Configurazione → Templates notifiche email) --- */
.ft .ft-mailtpl { padding: 4px 0 24px; }
.ft .ft-mailtpl__head { margin: 0 0 20px; }
.ft .ft-mailtpl__head h1 { margin: 4px 0 8px; color: var(--ft-navy); font-size: 26px; }
.ft .ft-mailtpl__lead { color: #64748b; font-size: 15px; max-width: 640px; line-height: 1.5; margin: 0; }
.ft .ft-mailtpl__lead code, .ft .ft-mailcard__id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ft .ft-mailgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.ft .ft-mailcard { border: 1px solid var(--ft-border, #e2e8f0); border-radius: 14px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.ft .ft-mailcard__meta { padding: 16px 18px; border-bottom: 1px solid var(--ft-border, #e2e8f0); }
.ft .ft-mailcard__label { margin: 0 0 4px; font-size: 16px; color: var(--ft-navy); }
.ft .ft-mailcard__desc { margin: 0 0 10px; color: #64748b; font-size: 13px; line-height: 1.45; }
.ft .ft-mailcard__subject { margin: 0 0 8px; font-size: 13px; color: #1f2d3d; }
.ft .ft-mailcard__subject span { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: #94a3b8; background: #f1f5f9; border-radius: 5px; padding: 2px 6px; margin-right: 6px; }
.ft .ft-mailcard__id { font-size: 11px; color: #94a3b8; }
.ft .ft-mailcard__preview { background: #f8fafc; padding: 12px; }
.ft .ft-mailcard__preview iframe { width: 100%; height: 420px; border: 0; border-radius: 8px; background: #fff; display: block; }
.ft .ft-mailtpl__empty { color: #64748b; }
@media (max-width: 560px) { .ft .ft-mailgrid { grid-template-columns: 1fr; } .ft .ft-mailcard__preview iframe { height: 380px; } }

/* --- Preventivatore interno (admin) --- */
.ft .ft-prev { padding: 4px 0 28px; }
.ft .ft-prev__head { margin: 0 0 14px; }
.ft .ft-prev__head h1 { margin: 4px 0 0; color: var(--ft-navy); font-size: 26px; }
.ft .ft-prev__note { color: #64748b; font-size: 13px; margin: 6px 0 0; }
.ft .ft-prev__tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ft-border, #e2e8f0); margin: 0 0 20px; flex-wrap: wrap; }
.ft .ft-prev__tabs a { padding: 10px 16px; text-decoration: none; color: #64748b; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ft .ft-prev__tabs a.is-active { color: var(--ft-navy); border-bottom-color: var(--ft-orange); }
.ft .ft-prev .ft-card { margin: 0 0 18px; }
.ft .ft-prev__cardtitle { margin: 0 0 10px; font-size: 16px; color: var(--ft-navy); }
.ft .ft-prev__hint { color: #64748b; font-size: 13px; margin: -4px 0 12px; }
.ft .ft-multgrid { display: flex; flex-direction: column; gap: 0; max-width: 560px; }
.ft .ft-multgrid__item { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--ft-border, #eef2f7); }
.ft .ft-multgrid__item:last-child { border-bottom: 0; }
.ft .ft-multgrid__item span { color: #334155; flex: 1 1 auto; }
.ft .ft-multgrid__item .ft-input { width: 160px; flex: 0 0 auto; text-align: right; }
.ft .ft-prev__bands .ft-input { width: 100%; }
.ft .ft-prev__addrow { margin-top: 8px; }
.ft .ft-prev__ac { position: relative; }
.ft .ft-prev__acmenu { position: absolute; z-index: 20; left: 0; right: 0; background: #fff; border: 1px solid var(--ft-border, #e2e8f0); border-radius: 8px; margin-top: 2px; box-shadow: 0 8px 24px rgba(15,56,92,.12); max-height: 280px; overflow-y: auto; }
.ft .ft-prev__acmenu:empty { display: none; }
.ft .ft-prev__acitem { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 9px 12px; cursor: pointer; font-size: 14px; }
.ft .ft-prev__acitem:hover { background: #f1f5f9; }
.ft .ft-prev__acitem small { color: #94a3b8; }
.ft .ft-prev__selname { color: #64748b; font-size: 13px; align-self: center; }
.ft .ft-prev__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.ft .ft-prev__facts > div { display: flex; flex-direction: column; }
.ft .ft-prev__facts span { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #94a3b8; }
.ft .ft-prev__break td { padding: 8px 10px; }
.ft .ft-prev__totals { display: flex; gap: 16px; flex-wrap: wrap; margin: 14px 0; }
.ft .ft-prev__tot { background: #f1f5f9; border-radius: 10px; padding: 14px 18px; min-width: 160px; }
.ft .ft-prev__tot span { display: block; font-size: 12px; color: #64748b; }
.ft .ft-prev__tot strong { font-size: 24px; color: var(--ft-navy); }
.ft .ft-prev__tot small { display: block; color: #94a3b8; font-size: 12px; }
.ft .ft-alert--warn { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; border-radius: 8px; padding: 12px 14px; margin: 0 0 16px; }

/* --- Preventivatore: form listino a sezioni collassabili --- */
.ft .ft-prev--form .ft-prev__form { max-width: 940px; }
.ft .ft-prev__sec { border: 1px solid var(--ft-border, #e2e8f0); border-radius: 14px; background: #fff; margin: 0 0 14px; overflow: hidden; }
.ft .ft-prev__sec[open] { box-shadow: 0 4px 16px rgba(15,56,92,.06); }
.ft .ft-prev__sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 16px 18px; font-size: 16px; font-weight: 700; color: var(--ft-navy); user-select: none; }
.ft .ft-prev__sum::-webkit-details-marker { display: none; }
.ft .ft-prev__sum small { font-weight: 400; font-size: 13px; color: #94a3b8; margin-left: 2px; }
.ft .ft-prev__sum::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8; transform: rotate(45deg); transition: transform .15s; }
.ft .ft-prev__sec[open] .ft-prev__sum::after { transform: rotate(225deg); }
.ft .ft-prev__sum:hover { background: #f8fafc; }
.ft .ft-prev__sumn { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--ft-navy); color: #fff; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.ft .ft-prev__secbody { padding: 4px 18px 20px; border-top: 1px solid var(--ft-border, #e2e8f0); }
.ft .ft-formgrid--tight { gap: 12px 16px; }
.ft .ft-formgrid--tight .ft-label small { color: #94a3b8; font-weight: 400; }
.ft .ft-prev__mult { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ft .ft-prev__h3 { font-size: 14px; color: var(--ft-navy); margin: 4px 0 8px; }
.ft .ft-prev__h3 small { color: #94a3b8; font-weight: 400; }
.ft .ft-prev__rows, .ft .ft-prev__bands { width: 100%; margin: 0 0 8px; }
.ft .ft-prev__rows td, .ft .ft-prev__bands td { padding: 4px 4px; border: 0; vertical-align: middle; }
.ft .ft-prev__rows th, .ft .ft-prev__bands th { padding: 2px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #94a3b8; border: 0; text-align: left; }
.ft .ft-prev__rows th small, .ft .ft-prev__bands th small { text-transform: none; letter-spacing: 0; }
.ft .ft-prev__rows .ft-input, .ft .ft-prev__rows .ft-select, .ft .ft-prev__bands .ft-input { width: 100%; padding: 8px 10px; }
.ft .ft-prev__multval { width: 84px; }
.ft .ft-prev__multval .ft-input { text-align: right; }
.ft .ft-iconbtn { border: 1px solid var(--ft-border, #e2e8f0); background: #fff; color: #94a3b8; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; }
.ft .ft-iconbtn:hover { border-color: #ef4444; color: #ef4444; }
.ft .ft-prev__savebar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; padding: 14px 0; margin-top: 6px; background: linear-gradient(to top, var(--ft-bg, #f6f8fb) 60%, transparent); }
@media (max-width: 720px) { .ft .ft-prev__mult { grid-template-columns: 1fr; gap: 16px; } .ft .ft-prev__savebar { position: static; } }

/* --- Preventivatore: polish condiviso di tutte le pagine --- */
.ft .ft-prev .ft-formgrid { gap: 12px 16px; }            /* form compatti ovunque (niente sparso) */
.ft .ft-prev__lead { color: #64748b; font-size: 14px; margin: -8px 0 18px; max-width: 720px; line-height: 1.5; }
.ft .ft-prev__card { border: 1px solid var(--ft-border, #e2e8f0); border-radius: 14px; background: #fff; margin: 0 0 16px; }
.ft .ft-prev__card > .ft-prev__cardhd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--ft-border, #e2e8f0); }
.ft .ft-prev__card > .ft-prev__cardhd h2 { margin: 0; font-size: 15px; color: var(--ft-navy); }
.ft .ft-prev__card > .ft-prev__cardhd small { color: #94a3b8; font-size: 13px; }
.ft .ft-prev__card > .ft-prev__cardbd { padding: 16px 18px; }
.ft .ft-prev__card .ft-table { margin: 0; }
.ft .ft-prev__card .ft-table thead th { background: #f8fafc; }
/* tabelle "clean" dentro le card del preventivatore */
.ft .ft-prev__card .ft-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #94a3b8; padding: 10px 14px; }
.ft .ft-prev__card .ft-table td { padding: 12px 14px; }
.ft .ft-prev__emptybox { padding: 34px 18px; text-align: center; color: #94a3b8; }
.ft .ft-prev__emptybox strong { display: block; color: #475569; margin-bottom: 4px; font-size: 15px; }
/* Calcolatore: risultato */
.ft .ft-prev__result { margin-top: 18px; }
.ft .ft-prev__pricecard { border-top: 3px solid var(--ft-orange); }

/* --- Preventivatore: slider sconto + breakdown dettagliato --- */
.ft .ft-prev__break td { padding: 9px 12px; vertical-align: middle; }
.ft .ft-prev__break small { color: #94a3b8; font-weight: 400; margin-left: 6px; }
.ft .ft-prev__break .ft-prev__bx { text-align: right; color: #64748b; white-space: nowrap; width: 90px; }
.ft .ft-prev__break .ft-prev__bp { text-align: right; font-weight: 600; color: var(--ft-navy); white-space: nowrap; width: 120px; }
.ft .ft-prev__break .ft-prev__win td { background: #f0fdf4; color: #166534; border-top: 1px dashed #bbf7d0; border-bottom: 1px dashed #bbf7d0; }
.ft .ft-prev__break .ft-prev__win .ft-prev__bp { color: #166534; }
.ft .ft-prev__break .ft-prev__sub td { border-top: 2px solid var(--ft-border, #e2e8f0); }
.ft .ft-prev__slider { margin: 18px 0 6px; }
.ft .ft-prev__slider label { display: block; font-size: 13px; color: #334155; margin-bottom: 8px; }
.ft .ft-prev__slider label b { color: var(--ft-orange); font-size: 15px; }
.ft .ft-prev__slider input[type=range] { width: 100%; max-width: 460px; accent-color: var(--ft-orange); height: 22px; cursor: pointer; }
.ft .ft-prev__sliderends { display: flex; justify-content: space-between; max-width: 460px; font-size: 11px; color: #94a3b8; margin-top: -2px; }
.ft .ft-prev__iva { font-size: 13px; font-weight: 600; color: #94a3b8; }

/* --- Preventivatore: SIMULATORE (form a mano, prezzi live) --- */
.ft .ft-simlayout { display: grid; grid-template-columns: minmax(320px, 430px) 1fr; gap: 20px; align-items: start; }
.ft .ft-simform { margin: 0; }
@media (min-width: 901px) { .ft .ft-simform { position: sticky; top: 16px; } }
@media (max-width: 900px) { .ft .ft-simlayout { grid-template-columns: 1fr; } }
.ft .ft-simfield { margin-bottom: 15px; }
.ft .ft-simfield > .ft-label { display: block; margin-bottom: 6px; }
.ft .ft-simfield .ft-label small { color: #94a3b8; font-weight: 400; }
.ft .ft-simrow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 460px) { .ft .ft-simrow2 { grid-template-columns: 1fr; } }
.ft .ft-simhint { font-size: 12px; color: #94a3b8; margin: -6px 0 14px; }
.ft .ft-simresult { min-width: 0; }
.ft .ft-simchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ft .ft-simchip { position: relative; display: inline-flex; align-items: center; padding: 6px 12px; border: 1.5px solid var(--ft-border, #e2e8f0); border-radius: 999px; font-size: 13px; cursor: pointer; user-select: none; background: #fff; transition: background .12s, border-color .12s, color .12s; }
.ft .ft-simchip input { position: absolute; opacity: 0; pointer-events: none; }
.ft .ft-simchip:hover { border-color: #cbd5e1; }
.ft .ft-simchip:has(input:checked) { background: var(--ft-navy); border-color: var(--ft-navy); color: #fff; }
.ft .ft-simchip:focus-within { outline: 2px solid var(--ft-orange); outline-offset: 1px; }