/* =============================================================================
   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-8  { grid-column: span 8; }
.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; }