/* ==========================================================================
   AlterEgo — style.css
   Restyle "Treni" page su mockup fornito. Vedi note in index.html per i punti
   in cui il markup è stato riorganizzato o esteso rispetto al sorgente originale.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   Estratti per sampling diretto dai pixel del mockup, non a occhio.
   -------------------------------------------------------------------------- */
:root {
    /* Colori di brand */
    --ae-color-primary: #005089; /* topbar, bottone Cerca, stato attivo forte */
    --ae-color-primary-hover: #003e6b;
    --ae-color-accent: #0069b0; /* voce sidebar attiva, link, focus */
    --ae-color-accent-soft: #d5e6ff; /* sfondi hover leggeri */
    --ae-color-success: #4ade80; /* badge AE Status */
    /* Superfici e sfondi */
    --ae-color-bg: #f7f8fc; /* sfondo pagina */
    --ae-color-surface: #ffffff; /* card */
    --ae-color-surface-tint: #f0f3fe; /* box agenzia, righe hover leggere */
    /* Testo */
    --ae-color-text: #111c2d;
    --ae-color-text-muted: #6b7280;
    --ae-color-text-faint: #9aa3b2;
    --ae-color-text-inverse: #ffffff;
    /* Bordi / linee */
    --ae-color-border: #dde2ea;
    --ae-color-border-strong: #c0c7d2;
    /* Tipografia */
    --ae-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ae-fs-xs: 12px;
    --ae-fs-sm: 13px;
    --ae-fs-md: 14px;
    --ae-fs-lg: 16px;
    --ae-fs-xl: 20px;
    /* Spaziatura (scala 4px) */
    --ae-space-1: 4px;
    --ae-space-2: 8px;
    --ae-space-3: 12px;
    --ae-space-4: 16px;
    --ae-space-5: 20px;
    --ae-space-6: 24px;
    --ae-space-8: 32px;
    /* Raggio */
    --ae-radius-sm: 6px;
    --ae-radius-md: 10px;
    --ae-radius-lg: 16px;
    --ae-radius-pill: 999px;
    /* Ombre */
    --ae-shadow-card: 0 1px 3px rgba(17, 28, 45, 0.06), 0 1px 2px rgba(17, 28, 45, 0.04);
    --ae-shadow-popover: 0 8px 24px rgba(17, 28, 45, 0.14);
    /* Dimensioni layout */
    --ae-topbar-h: 80px;
    --ae-subnav-h: 44px;
    --ae-sidebar-w: 260px;
}

/* --------------------------------------------------------------------------
   2. RESET DI BASE
   Non è un reset globale aggressivo: il resto della piattaforma (popup, dialog
   jQuery UI ecc.) continua a usare i fogli di stile legacy. Qui normalizziamo
   solo dentro al nuovo shell (.ae-shell) per evitare di rompere altre pagine.
   -------------------------------------------------------------------------- */
.ae-shell,
.ae-shell * {
    box-sizing: border-box;
}

.ae-shell {
    font-family: var(--ae-font);
    color: var(--ae-color-text);
    background: var(--ae-color-bg);
    font-size: var(--ae-fs-md);
    line-height: 1.4;
    min-height: 100vh;
}

:where(.ae-shell) a {
    color: inherit;
    text-decoration: none;
}

.ae-shell button,
.ae-shell input,
.ae-shell select {
    font-family: inherit;
    font-size: var(--ae-fs-md);
}

/* --------------------------------------------------------------------------
   3. TOPBAR
   -------------------------------------------------------------------------- */
.ae-topbar {
    position: relative;
    min-height: var(--ae-topbar-h);
    background: var(--ae-color-primary);
    color: var(--ae-color-text-inverse);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ae-space-3) var(--ae-space-6);
}

.ae-topbar__divider {
    position: absolute;
    left: var(--ae-space-6);
    right: var(--ae-space-6);
    bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.ae-topbar__left {
    display: flex;
    align-items: center;
    gap: var(--ae-space-4);
}

.ae-topbar__logo img {
    height: 45px;
    display: block;
    /* Il logo originale è pensato per sfondo chiaro: su sfondo blu può perdere
     contrasto. Se il team grafico ha una variante "reverse" (bianca), va
     sostituita qui. Filtro di fallback per garantire leggibilità intanto: */
    filter: brightness(0) invert(1);
}

.ae-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ae-space-2);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--ae-color-success);
    border-radius: var(--ae-radius-pill);
    padding: 4px 12px;
    font-size: var(--ae-fs-xs);
    color: var(--ae-color-success);
    font-weight: 600;
}

.ae-status-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ae-color-success);
    display: inline-block;
}

.ae-topbar__right {
    display: flex;
    align-items: center;
    gap: var(--ae-space-5);
}

.ae-identity {
    display: flex;
    gap: var(--ae-space-5);
    font-size: var(--ae-fs-xs);
}

.ae-identity__group {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.ae-identity__label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
}

.ae-identity__value {
    color: var(--ae-color-text-inverse);
    font-weight: 600;
}

.ae-topbar__icons {
    display: flex;
    gap: var(--ae-space-2);
}

.ae-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
}

    .ae-icon-btn:hover {
        background: rgba(255, 255, 255, 0.22);
    }

    .ae-icon-btn img {
        width: 16px;
        height: 16px;
        filter: brightness(0) invert(1);
        opacity: 0.9;
    }

.ae-icon-btn--cart {
    font-size: 14px;
    line-height: 1;
}

.ae-icon-btn img#imgFlag {
    filter: none;
    opacity: 1;
    width: 20px;
    height: 20px;
    border-radius: 3px;
}

.ae-btn-logout {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--ae-radius-sm);
    padding: 8px 16px;
    font-size: var(--ae-fs-sm);
    font-weight: 600;
    color: var(--ae-color-text-inverse);
    cursor: pointer;
}

    .ae-btn-logout:hover {
        background: rgba(255, 255, 255, 0.24);
    }

/* --------------------------------------------------------------------------
   4. CARD TABS (ex #menucontainer .menuBar) - linguette dentro il riquadro
      di Ricerca Soluzioni. Sostituiscono il vecchio subnav sotto il topbar:
      la tab attiva sta "davanti" (stessa quota del pannello, bordo unito,
      ombra verso il basso), le altre stanno "dietro" (piu' in basso, colore
      smorzato, in parte coperte dal bordo superiore del pannello sottostante).
   -------------------------------------------------------------------------- */
.ae-search-panel {
    position: relative;
}

.ae-card-tabs {
    display: flex;
    align-items: flex-end;
    gap: 0;
    padding-left: var(--ae-space-6);
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
}

.ae-card-tabs__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: var(--ae-space-3) var(--ae-space-5);
    font-size: var(--ae-fs-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    color: var(--ae-color-text-muted);
    background: var(--ae-color-surface-tint);
    border: 1px solid var(--ae-color-border);
    border-bottom: none;
    border-radius: var(--ae-radius-md) var(--ae-radius-md) 0 0;
    transform: translateY(7px);
    z-index: 1;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}

    .ae-card-tabs__item:not(:first-child) {
        margin-left: -6px; /* leggera sovrapposizione, come linguette affiancate */
    }

    .ae-card-tabs__item:hover {
        color: var(--ae-color-primary);
        transform: translateY(3px);
    }

    .ae-card-tabs__item.is-active {
        background: var(--ae-color-surface);
        color: var(--ae-color-primary);
        transform: translateY(0);
        z-index: 3;
        box-shadow: 0 -8px 16px rgba(17, 28, 45, 0.07);
    }

/* ===== INIZIO MODIFICA 2026-09-07 ===== */
#menucontainer.ae-card-tabs .ae-card-tabs__item {
    padding: var(--ae-space-3) var(--ae-space-5);
}
/* ===== FINE MODIFICA 2026-09-07 ===== */

.ae-search-panel .ae-search-card {
    position: relative;
    z-index: 2;
    border-top-left-radius: var(--ae-radius-sm);
}

/* ===== INIZIO MODIFICA 2026-09-07 ===== */

.ae-shell .boxtrainSearch {
    background: var(--ae-color-surface);
}
/* ===== FINE MODIFICA 2026-09-07 ===== */


.ae-search-panel .ae-card + .ae-card {
    margin-top: 0;
}

.ae-search-panel + .ae-row {
    margin-top: var(--ae-space-5);
}

/* --------------------------------------------------------------------------
   4bis. SUBNAV legacy (ex #menucontainer .menuBar) - non piu' usato in
   questa pagina, lasciato per compatibilita' con eventuali altre viste
   (voli/trasporti) che potrebbero ancora richiamare questa classe.
   -------------------------------------------------------------------------- */
.ae-subnav {
    height: var(--ae-subnav-h);
    background: var(--ae-color-primary);
    display: flex;
    align-items: center;
    gap: var(--ae-space-6);
    padding: 0 var(--ae-space-6);
}

.ae-subnav__item {
    font-size: var(--ae-fs-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ae-color-accent-soft);
    padding: var(--ae-space-2) 0;
    border-bottom: 2px solid transparent;
}

    .ae-subnav__item:hover {
        color: var(--ae-color-text-inverse);
    }

    .ae-subnav__item.is-active {
        color: var(--ae-color-text-inverse);
        border-bottom-color: var(--ae-color-text-inverse);
    }

/* --------------------------------------------------------------------------
   5. BODY LAYOUT (sidebar + main)
   -------------------------------------------------------------------------- */
.ae-body {
    display: flex;
    align-items: flex-start;
}

.ae-sidebar {
    width: var(--ae-sidebar-w);
    flex: 0 0 var(--ae-sidebar-w);
    padding: var(--ae-space-6) var(--ae-space-4);
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--ae-topbar-h));
}

.ae-sidebar__agency {
    background: var(--ae-color-surface);
    border: 1px solid var(--ae-color-border);
    border-radius: var(--ae-radius-md);
    padding: var(--ae-space-4);
    display: flex;
    align-items: center;
    gap: var(--ae-space-3);
    margin-bottom: var(--ae-space-5);
}

.ae-sidebar__agency-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--ae-radius-sm);
    background: var(--ae-color-surface-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.ae-sidebar__agency-name {
    font-weight: 700;
    font-size: var(--ae-fs-sm);
    color: var(--ae-color-primary);
}

.ae-sidebar__agency-user {
    font-size: var(--ae-fs-xs);
    color: var(--ae-color-text-muted);
}

.ae-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ae-nav__item {
    display: flex;
    align-items: center;
    gap: var(--ae-space-3);
    padding: var(--ae-space-3) var(--ae-space-3);
    border-radius: var(--ae-radius-sm);
    font-size: var(--ae-fs-sm);
    font-weight: 600;
    color: var(--ae-color-text-muted);
}

    .ae-nav__item img {
        width: 18px;
        height: 18px;
        opacity: 0.7;
    }

        /* Variante per icone piu' larghe che alte (es. trasporti.svg: aereo + "+" + treno):
   manteniamo un'altezza leggibile e lasciamo che la larghezza si adatti da sola,
   invece di schiacciarla nel riquadro quadrato 18x18 standard. */
        .ae-nav__item img.ae-icon--wide {
            width: auto;
            height: 16px;
        }

    .ae-nav__item:hover {
        background: var(--ae-color-surface-tint);
        color: var(--ae-color-primary);
    }

    .ae-nav__item.is-active {
        background: var(--ae-color-accent);
        color: var(--ae-color-text-inverse);
        border-radius: 0 var(--ae-radius-sm) var(--ae-radius-sm) 0;
        border-left: 4px solid #005089;
        padding-left: calc(var(--ae-space-3) - 4px);
    }

        .ae-nav__item.is-active img {
            opacity: 1;
            filter: brightness(0) invert(1);
        }

.ae-sidebar__footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: var(--ae-space-5);
}

    .ae-sidebar__footer .ae-nav__item {
        color: var(--ae-color-text-faint);
        font-weight: 500;
    }

/* --------------------------------------------------------------------------
   6. MAIN / CARD
   -------------------------------------------------------------------------- */
.ae-main {
    flex: 1 1 auto;
    padding: var(--ae-space-6);
    min-width: 0;
}

.ae-card {
    background: var(--ae-color-surface);
    border: 1px solid var(--ae-color-border);
    border-radius: var(--ae-radius-lg);
    box-shadow: var(--ae-shadow-card);
    padding: var(--ae-space-6);
    /* Molte card (risultati voli/hotel, filtri, ecc.) avvolgono markup legacy
       pieno di float non "clearati" (es. .BoxFilterChains, .ui-slider-container,
       .section_booking_results_solutions). Quando la card e' un grid-item diretto
       di .ae-row il contenimento dei float e' automatico; appena viene innestata
       un livello piu' in profondita' (es. dentro .ae-main-col) quel contenimento
       si perde e i float "sfuggono", sovrapponendosi al contenuto successivo.
       display:flow-root rende ogni .ae-card un contenitore di float autonomo,
       indipendentemente da dove/come e' innestata. */
    display: flow-root;
}

    .ae-card + .ae-card,
    .ae-row + .ae-card,
    .ae-card + .ae-row {
        margin-top: var(--ae-space-5);
    }

.ae-card__header {
    display: flex;
    align-items: flex-start;
    gap: var(--ae-space-3);
    margin-bottom: var(--ae-space-5);
}

/* Variante per header con un'azione a destra (es. "Torna al riepilogo" nel
   form di ricerca completo): icona+titolo restano raggruppati a sinistra,
   il bottone va all'estrema destra. */
.ae-card__header--with-action {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.ae-card__header-main {
    display: flex;
    align-items: flex-start;
    gap: var(--ae-space-3);
}

.ae-card__header-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--ae-radius-sm);
    background: var(--ae-color-surface-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* Icona SVG generica dentro contenitori tipo .ae-card__header-icon: dimensione
   uniforme indipendente dal viewBox nativo del singolo file. */
.ae-icon {
    width: 18px;
    height: 18px;
    display: block;
}

.ae-icon--lg {
    width: 28px;
    height: 28px;
}

/* ===== INIZIO MODIFICA 2026-09-07 ===== */

.ae-card__header-icon .ae-icon {
    width: 28px;
    height: 28px;
}

/* Variante larga (es. trasporti.svg: aereo + "+" + treno) per non schiacciarla
   nel riquadro quadrato, stesso criterio gia' usato in .ae-nav__item img.ae-icon--wide */
.ae-card__header-icon .ae-icon--wide {
    width: 32px;
    height: 28px;
}
/* ===== FINE MODIFICA 2026-09-07 ===== */

.ae-btn-primary .ae-icon,
.ae-btn-dark .ae-icon {
    filter: brightness(0) invert(1);
}

.ae-card__title {
    font-size: var(--ae-fs-xl);
    font-weight: 700;
    color: var(--ae-color-text);
    margin: 0;
}

.ae-card__subtitle {
    font-size: var(--ae-fs-sm);
    color: var(--ae-color-text-muted);
    margin: 2px 0 0;
}

.ae-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--ae-space-5);
    align-items: start;
}

/* --------------------------------------------------------------------------
   7. FORM DI RICERCA TRENI
   -------------------------------------------------------------------------- */
.ae-form-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--ae-space-4);
    align-items: end;
    margin-bottom: var(--ae-space-4);
}

.ae-field {
    display: flex;
    flex-direction: column;
    gap: var(--ae-space-1);
}

    .ae-field label {
        font-size: var(--ae-fs-xs);
        font-weight: 600;
        color: var(--ae-color-text-muted);
        line-height: 16px;
        height: 16px;
    }

.ae-field-label-check {
    display: flex;
    align-items: center;
    gap: var(--ae-space-2);
    font-size: var(--ae-fs-xs);
    font-weight: 600;
    color: var(--ae-color-text-muted);
    line-height: 16px;
    height: 16px;
    cursor: pointer;
}

    .ae-field-label-check input[type="checkbox"] {
        width: 14px;
        height: 14px;
        accent-color: var(--ae-color-primary);
        cursor: pointer;
        margin: 0;
        flex: none;
    }

.ae-field input[type="text"],
.ae-field select {
    height: 40px;
    border: 1px solid var(--ae-color-border-strong);
    border-radius: var(--ae-radius-sm);
    padding: 0 var(--ae-space-3);
    color: var(--ae-color-text);
    background: var(--ae-color-surface);
    width: 100%;
}

    .ae-field input[type="text"]:focus,
    .ae-field select:focus {
        outline: none;
        border-color: var(--ae-color-accent);
        box-shadow: 0 0 0 3px var(--ae-color-accent-soft);
    }

.ae-swap-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--ae-color-border-strong);
    background: var(--ae-color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    align-self: end;
    margin-bottom: 2px;
}

    .ae-swap-btn img {
        width: 16px;
        height: 16px;
    }

.ae-datetime-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ae-space-4);
    margin-bottom: var(--ae-space-4);
}

.ae-options-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ae-space-5);
    padding: var(--ae-space-3) 0;
    border-top: 1px solid var(--ae-color-border);
    margin-bottom: var(--ae-space-4);
}

.ae-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--ae-space-2);
    font-size: var(--ae-fs-sm);
    font-weight: 600;
    color: var(--ae-color-text);
    cursor: pointer;
}

    .ae-checkbox input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: var(--ae-color-primary);
        cursor: pointer;
    }

.ae-divider {
    width: 1px;
    align-self: stretch;
    background: var(--ae-color-border);
}

.ae-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ae-space-3);
}

.ae-actions-row__group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ae-space-3);
}

/* --------------------------------------------------------------------------
   8. BOTTONI
   -------------------------------------------------------------------------- */
.ae-btn {
    height: 40px;
    padding: 0 var(--ae-space-4);
    border-radius: var(--ae-radius-sm);
    font-size: var(--ae-fs-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ae-space-2);
    border: 1px solid transparent;
}

.ae-btn-sm {
    height: 32px;
    padding: 0 var(--ae-space-3);
    font-size: var(--ae-fs-xs);
}

.ae-btn-outline {
    background: var(--ae-color-surface);
    border-color: var(--ae-color-primary);
    color: var(--ae-color-primary);
    text-transform: uppercase;
    font-weight: 400;
}

    .ae-btn-outline:hover {
        background: var(--ae-color-surface-tint);
    }

.ae-btn-ghost {
    background: #e0e3e5;
    border-color: #e0e3e5;
    color: #414751;
}

    .ae-btn-ghost:hover {
        background: var(--ae-color-surface-tint);
    }

.ae-btn-primary {
    background: var(--ae-color-primary);
    color: var(--ae-color-text-inverse);
    text-transform: uppercase;
    font-weight: 700;
}

    .ae-btn-primary:hover {
        background: var(--ae-color-primary-hover);
    }

.ae-btn-dark {
    background: #3a3d3f;
    color: var(--ae-color-text-inverse);
}

    .ae-btn-dark:hover {
        background: #2b2d2f;
    }

/* --------------------------------------------------------------------------
   9. RIQUOTAZIONE + CARRELLO
   -------------------------------------------------------------------------- */
.ae-requote-label {
    display: block;
    font-size: var(--ae-fs-sm);
    color: var(--ae-color-text-muted);
    margin-bottom: var(--ae-space-3);
}

.ae-inline-field-row {
    display: flex;
    align-items: center;
    gap: var(--ae-space-3);
    width: 100%;
}

    .ae-inline-field-row label {
        font-size: var(--ae-fs-sm);
        color: var(--ae-color-text-muted);
        flex: none;
    }

    .ae-inline-field-row input[type="text"] {
        flex: 1 1 auto;
        min-width: 0;
        height: 36px;
        border: 1px solid var(--ae-color-border-strong);
        border-radius: var(--ae-radius-sm);
        padding: 0 var(--ae-space-3);
    }

    .ae-inline-field-row select {
        flex: 0 0 20%;
        height: 36px;
        border: 1px solid var(--ae-color-border-strong);
        border-radius: var(--ae-radius-sm);
        padding: 0 var(--ae-space-3);
    }

    .ae-inline-field-row .ae-btn {
        flex: none;
    }

/* Il carrello mantiene l'altezza naturale del proprio contenuto (non piu'
   stirato per pareggiare l'altezza della colonna a fianco, vedi .ae-row
   piu' sopra) e resta "agganciato" durante lo scroll quando la colonna
   accanto (risultati / dettagli) e' piu' lunga della viewport. */
.ae-cart-card {
    position: sticky;
    top: var(--ae-space-5);
    /* Ancorata alla colonna destra di .ae-row: senza questo, su pagine con piu'
       di 2 card in colonna sinistra (es. Hotel/HIndex: risultati + riquotazione)
       l'auto-placement della grid la fa scivolare in colonna sinistra alla riga
       successiva invece di restare affiancata come sidebar. */
    grid-column: 2;
}

/* Raggruppa le card della colonna sinistra (risultati, riquotazione, ecc.) in
   un unico grid-item: cosi' l'altezza della riga di .ae-row corrisponde
   all'intera colonna sinistra e #cart (sticky) puo' restare agganciato a
   destra per tutta la lunghezza dello scroll, invece di "staccarsi" e
   scendere in basso non appena finisce la prima card a sinistra. */
.ae-main-col {
    min-width: 0;
    /* Come grid-item .ae-main-col contiene gia' i propri elementi float per le
       regole della grid, MA i suoi figli diretti (es. #searchResult) non sono
       piu' essi stessi grid-item come lo erano prima di questo wrapper, quindi
       perdono il contenimento automatico dei float annidati al loro interno
       (filtri hotel/voli, header risultati, ecc.): l'altezza dei contenitori
       intermedi collassa e il contenuto successivo si sovrappone a quello
       precedente. display:flow-root ripristina lo stesso contenimento. */
    display: flow-root;
}

    .ae-cart-card .ae-card__header {
        justify-content: space-between;
        align-items: center;
    }

.ae-cart-badge {
    background: var(--ae-color-surface-tint);
    color: var(--ae-color-primary);
    font-size: var(--ae-fs-xs);
    font-weight: 700;
    padding: 2px 10px;
    border-radius: var(--ae-radius-pill);
    margin-left: auto;
}

.ae-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--ae-space-3);
    padding: var(--ae-space-6) var(--ae-space-4);
    color: var(--ae-color-text-muted);
}

.ae-cart-empty__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ae-color-surface-tint);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ae-cart-empty__title {
    font-weight: 700;
    color: var(--ae-color-text);
    font-size: var(--ae-fs-md);
}

.ae-cart-empty__subtitle {
    font-size: var(--ae-fs-xs);
    max-width: 220px;
}

/* --------------------------------------------------------------------------
   9bis. VISTA RISULTATI RICERCA (search_treni.html)
   -------------------------------------------------------------------------- */

/* Barra riassuntiva compatta al posto del form di ricerca completo */
.ae-search-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ae-space-4);
    padding: var(--ae-space-4) var(--ae-space-6);
    flex-wrap: wrap;
}

.ae-search-summary__info {
    display: flex;
    align-items: center;
    gap: var(--ae-space-4);
}

.ae-search-summary__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--ae-radius-sm);
    background: var(--ae-color-surface-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.ae-search-summary__route {
    font-size: var(--ae-fs-lg);
    font-weight: 700;
    color: var(--ae-color-text);
}

.ae-search-summary__all {
    font-size: var(--ae-fs-sm);
    font-weight: 400;
    color: var(--ae-color-text-muted);
}

.ae-search-summary__arrow {
    color: var(--ae-color-accent);
    margin: 0 var(--ae-space-1);
}

.ae-search-summary__meta {
    font-size: var(--ae-fs-sm);
    color: var(--ae-color-text-muted);
    margin-top: 2px;
}

.ae-search-summary__sep {
    margin: 0 var(--ae-space-2);
    color: var(--ae-color-border-strong);
}

/* Card risultati: intestazione con titolo + legenda operatori */
.ae-results-card__header {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.ae-legend {
    display: flex;
    gap: var(--ae-space-4);
}

.ae-legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--ae-space-2);
    font-size: var(--ae-fs-xs);
    color: var(--ae-color-text-muted);
    font-weight: 600;
}

.ae-legend__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}

.ae-legend__dot--trenitalia {
    background: #2e9e4f;
}

.ae-legend__dot--ntv {
    background: #c0293c;
}

/* Elenco soluzioni */
.ae-results-list {
    display: flex;
    flex-direction: column;
    gap: var(--ae-space-4);
}

.ae-result-card {
    display: grid;
    grid-template-columns: 48px 2fr 1.3fr 1.2fr auto;
    align-items: center;
    gap: var(--ae-space-4);
    padding: var(--ae-space-4) var(--ae-space-5);
    border: 1px solid var(--ae-color-border);
    border-radius: var(--ae-radius-md);
    transition: box-shadow .15s ease, border-color .15s ease;
}

/* Logo operatore: placeholder statico in attesa del binding col backend
   (ogni soluzione avra' il logo del proprio carrier). */
.ae-result-card__logo {
    grid-column: 1;
    grid-row: 1;
    width: 48px;
    height: 48px;
    border-radius: var(--ae-radius-sm);
    border: 1px solid var(--ae-color-border);
    background: var(--ae-color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: none;
}

    .ae-result-card__logo img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.ae-result-card:hover {
    border-color: var(--ae-color-border-strong);
    box-shadow: var(--ae-shadow-card);
}

.ae-result-card__time {
    display: flex;
    align-items: center;
    gap: var(--ae-space-3);
    grid-column: 2;
    grid-row: 1;
}

.ae-result-card__time-block {
    display: flex;
    flex-direction: column;
}

.ae-result-card__time-value {
    font-size: var(--ae-fs-lg);
    font-weight: 700;
    color: var(--ae-color-text);
}

    .ae-result-card__time-value small {
        font-size: var(--ae-fs-xs);
        font-weight: 700;
        color: var(--ae-color-accent);
        vertical-align: super;
    }

.ae-result-card__time-station {
    font-size: var(--ae-fs-xs);
    color: var(--ae-color-text-muted);
}

.ae-result-card__time-block--arrival {
    text-align: right;
}

.ae-result-card__duration {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 70px;
}

.ae-result-card__duration-value {
    font-size: var(--ae-fs-xs);
    font-weight: 600;
    color: var(--ae-color-text-muted);
}

.ae-result-card__duration-line {
    width: 100%;
    height: 1px;
    background: var(--ae-color-border-strong);
    margin: var(--ae-space-1) 0;
    position: relative;
}

    .ae-result-card__duration-line::after {
        content: "";
        position: absolute;
        right: 0;
        top: -3px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--ae-color-accent);
    }

.ae-result-card__duration-label {
    font-size: var(--ae-fs-xs);
    color: var(--ae-color-text-faint);
}

.ae-result-card__change {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: var(--ae-fs-xs);
    color: var(--ae-color-text-muted);
    background: var(--ae-color-surface-tint);
    border-radius: var(--ae-radius-sm);
    padding: var(--ae-space-2) var(--ae-space-3);
}

.ae-result-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ae-space-2);
    grid-column: 3;
    grid-row: 1;
}

.ae-result-card__trainno {
    font-size: var(--ae-fs-xs);
    color: var(--ae-color-text-faint);
}

.ae-result-card__price {
    display: flex;
    flex-direction: column;
    gap: var(--ae-space-1);
    text-align: right;
    grid-column: 4;
    grid-row: 1;
}

.ae-result-card__price-item {
    display: flex;
    justify-content: space-between;
    gap: var(--ae-space-3);
    font-size: var(--ae-fs-sm);
}

.ae-result-card__price-label {
    color: var(--ae-color-text-muted);
}

.ae-result-card__price-value {
    font-weight: 700;
    color: var(--ae-color-text);
}

.ae-result-card__price-value--unavailable {
    font-weight: 400;
    font-size: var(--ae-fs-xs);
    color: var(--ae-color-text-faint);
    font-style: italic;
}

.ae-result-card__action {
    display: flex;
    justify-content: flex-end;
    grid-column: 5;
    grid-row: 1;
}

/* Badge categoria treno (Frecciarossa/ICN/IC...): stesso colore della
   legenda Trenitalia; pronto per una variante --ntv quando servirà. */
.ae-badge {
    display: inline-block;
    font-size: var(--ae-fs-xs);
    font-weight: 700;
    padding: 2px var(--ae-space-2);
    border-radius: var(--ae-radius-sm);
    margin-right: var(--ae-space-1);
}

.ae-badge--trenitalia {
    background: #e5f6ea;
    color: #1f7a38;
}

.ae-badge--ntv {
    background: #fbe6e9;
    color: #a01f30;
}

/* --------------------------------------------------------------------------
   10. BANNER PROMO
   -------------------------------------------------------------------------- */
.ae-banner {
    margin-top: var(--ae-space-5);
    border-radius: var(--ae-radius-lg);
    overflow: hidden;
    position: relative;
    min-height: 180px;
    display: flex;
    align-items: flex-end;
    /* Sostituisci "business-offer.jpg" con il nome file reale nella cartella assets/ */
    background: url("assets/business-offer.jpg") center center / cover no-repeat;
}

    .ae-banner::before {
        content: "";
        position: absolute;
        inset: 0;
        /* overlay scuro per leggibilità del testo sopra la foto */
        background: linear-gradient(90deg, rgba(12, 44, 70, 0.85) 0%, rgba(12, 44, 70, 0.55) 45%, rgba(12, 44, 70, 0.1) 100%);
    }

.ae-banner__content {
    position: relative;
    z-index: 1;
    color: var(--ae-color-text-inverse);
    padding: var(--ae-space-6);
}

.ae-banner__title {
    font-size: var(--ae-fs-lg);
    font-weight: 700;
    margin: 0 0 4px;
}

.ae-banner__subtitle {
    font-size: var(--ae-fs-sm);
    opacity: 0.85;
    margin: 0;
    max-width: 420px;
}

/* --------------------------------------------------------------------------
   11. FOOTER
   -------------------------------------------------------------------------- */
.ae-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ae-space-4) var(--ae-space-6);
    border-top: 1px solid var(--ae-color-border);
    font-size: var(--ae-fs-xs);
    color: var(--ae-color-text-muted);
}

.ae-footer__links {
    display: flex;
    gap: var(--ae-space-4);
}

    .ae-footer__links a {
        text-decoration: underline;
    }

.ae-footer__version {
    display: flex;
    align-items: center;
    gap: var(--ae-space-2);
}

.ae-footer__flag {
    display: inline-flex;
    width: 30px;
    height: 10px;
    border-radius: 2px;
    overflow: hidden;
}

    .ae-footer__flag span {
        flex: 1;
    }

        .ae-footer__flag span:nth-child(1) {
            background: #2e9e5b;
        }

        .ae-footer__flag span:nth-child(2) {
            background: #ffffff;
            border: 1px solid var(--ae-color-border);
        }

        .ae-footer__flag span:nth-child(3) {
            background: #d3453a;
        }

/* --------------------------------------------------------------------------
   12. DROPDOWN/POPOVER (lingua, selezione agenzia)
   Toggle gestito dal JS esistente (changeLanguageBox, ecc.): qui rendiamo solo
   presentabile il pannello quando viene mostrato.
   -------------------------------------------------------------------------- */
.panel_language_choice,
#agencyselection {
    display: none;
    position: absolute;
    top: var(--ae-topbar-h);
    right: var(--ae-space-6);
    background: var(--ae-color-surface);
    border: 1px solid var(--ae-color-border);
    border-radius: var(--ae-radius-md);
    box-shadow: var(--ae-shadow-popover);
    padding: var(--ae-space-2);
    z-index: 50;
    min-width: 160px;
}

    .panel_language_choice ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .panel_language_choice li a,
    #agencyselection a {
        display: flex;
        align-items: center;
        gap: var(--ae-space-2);
        padding: var(--ae-space-2) var(--ae-space-3);
        border-radius: var(--ae-radius-sm);
        font-size: var(--ae-fs-sm);
        color: var(--ae-color-text);
    }

        .panel_language_choice li a:hover,
        #agencyselection a:hover {
            background: var(--ae-color-surface-tint);
        }

    .panel_language_choice img {
        width: 18px;
        height: 12px;
    }

/* --------------------------------------------------------------------------
   13. DETTAGLI SOLUZIONE (detail_treni.html)
   -------------------------------------------------------------------------- */

.ae-detail-price {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--ae-space-2);
    padding-bottom: var(--ae-space-4);
    margin-bottom: var(--ae-space-5);
    border-bottom: 1px solid var(--ae-color-border);
    font-size: var(--ae-fs-sm);
    color: var(--ae-color-text-muted);
}

    .ae-detail-price strong {
        font-size: var(--ae-fs-xl);
        color: var(--ae-color-primary);
    }

.ae-detail-section {
    margin-bottom: var(--ae-space-6);
}

.ae-detail-section__title {
    font-size: var(--ae-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ae-color-text-muted);
    margin-bottom: var(--ae-space-3);
}

.ae-detail-section__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ae-space-3);
}

    .ae-detail-section__title-row .ae-detail-section__title {
        margin-bottom: 0;
    }

.ae-detail-section__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--ae-space-2);
    font-size: var(--ae-fs-xs);
    font-weight: 600;
    color: var(--ae-color-primary);
    cursor: pointer;
}

.ae-detail-section__toggle-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ae-color-border-strong);
    border-radius: var(--ae-radius-sm);
    color: var(--ae-color-text-muted);
    font-weight: 700;
    line-height: 1;
    flex: none;
}

/* Tratta: logo + orari + durata, stesso linguaggio visivo delle card
   risultato (results list), riproposto qui su una singola riga standalone. */
.ae-leg {
    display: flex;
    align-items: center;
    gap: var(--ae-space-4);
    padding: var(--ae-space-4);
    border: 1px solid var(--ae-color-border);
    border-radius: var(--ae-radius-md);
}

/* Stessa dimensione del logo operatore usato nelle card risultato di
   search_treni.html (.ae-result-card__logo): 48x48, object-fit: contain. */
.ae-leg__logo {
    width: 48px;
    height: 48px;
    border-radius: var(--ae-radius-sm);
    border: 1px solid var(--ae-color-border);
    background: var(--ae-color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: none;
}

    .ae-leg__logo img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.ae-leg__time-block {
    display: flex;
    flex-direction: column;
}

.ae-leg__time-block--arrival {
    text-align: right;
    margin-left: auto;
}

.ae-leg__time {
    font-size: var(--ae-fs-lg);
    font-weight: 700;
    color: var(--ae-color-text);
}

.ae-leg__station {
    font-size: var(--ae-fs-xs);
    color: var(--ae-color-text-muted);
}

.ae-leg__duration {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ae-space-1);
    flex: 1;
    min-width: 120px;
}

.ae-leg__duration-value {
    font-size: var(--ae-fs-xs);
    font-weight: 600;
    color: var(--ae-color-text-muted);
}

.ae-leg__duration-line {
    width: 100%;
    height: 1px;
    background: var(--ae-color-border-strong);
}

/* Form passeggeri/servizio/tariffa/preferenze: griglia + controlli inline */
/* Griglia indipendente per i campi della sezione Tariffe e servizi:
   NON eredita da .ae-form-grid (quella e' pensata per la coppia
   Partenza/Arrivo + bottone di scambio nel form di ricerca). */
.ae-detail-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--ae-space-4);
    align-items: start;
    margin-bottom: var(--ae-space-5);
}

.ae-field-hint {
    font-size: var(--ae-fs-xs);
}

/* Passeggeri/Servizio/Tariffe: layout a righe orizzontali, come nel
   sorgente originale (etichetta a sinistra, controlli inline, a capo tra
   una riga e l'altra) invece della griglia a 3 colonne. */
.ae-tariffe-form {
    margin-bottom: var(--ae-space-4);
}

.ae-tariffe-row {
    display: flex;
    align-items: center;
    gap: var(--ae-space-2);
    flex-wrap: wrap;
    font-size: var(--ae-fs-sm);
    color: var(--ae-color-text-muted);
    margin-bottom: var(--ae-space-3);
}

.ae-tariffe-row__label {
    min-width: 100px;
    font-weight: 600;
    color: var(--ae-color-text);
}

.ae-tariffe-row select {
    height: 40px;
    border: 1px solid var(--ae-color-border-strong);
    border-radius: var(--ae-radius-sm);
    padding: 0 var(--ae-space-3);
    min-width: 220px;
    background: var(--ae-color-surface);
    color: var(--ae-color-text);
}

/* Campi adulti/ragazzi: 20% di larghezza, come nel sorgente originale,
   non lo stiramento a piena larghezza della regola generica .ae-field input. */
.ae-tariffe-row input.ae-input-20 {
    width: 20%;
    min-width: 50px;
    height: 40px;
    border: 1px solid var(--ae-color-border-strong);
    border-radius: var(--ae-radius-sm);
    padding: 0 var(--ae-space-2);
    text-align: center;
}

/* N° carta / N° PIT: 40% di larghezza, come nel sorgente originale. */
.ae-tariffe-row input.ae-input-40 {
    width: 40%;
    min-width: 160px;
    height: 40px;
    border: 1px solid var(--ae-color-border-strong);
    border-radius: var(--ae-radius-sm);
    padding: 0 var(--ae-space-3);
}

/* Variante per righe con contenuto piu' alto (es. Preferenze, che impila
   select + bottone + campi sotto): l'etichetta resta allineata in alto
   invece che centrata verticalmente sull'intero blocco. */
.ae-tariffe-row--start {
    align-items: flex-start;
}

/* Preferenze: Tipo posto (select) sopra, poi il bottone Seat-map, poi
   sotto i campi che si autopopolano dalla mappa posti (non compilabili
   a mano). Impilati verticalmente invece che tutti sulla stessa riga. */
.ae-preferenze-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ae-space-3);
}

    .ae-preferenze-block select {
        height: 40px;
        border: 1px solid var(--ae-color-border-strong);
        border-radius: var(--ae-radius-sm);
        padding: 0 var(--ae-space-3);
        min-width: 220px;
        background: var(--ae-color-surface);
        color: var(--ae-color-text);
    }

.ae-preferenze-seat {
    margin-top: calc(var(--ae-space-1) * -1);
}

.ae-inline-controls {
    display: flex;
    align-items: center;
    gap: var(--ae-space-2);
    flex-wrap: wrap;
    font-size: var(--ae-fs-sm);
    color: var(--ae-color-text-muted);
}

.ae-field input[type="text"].ae-input-xs {
    width: 44px;
    text-align: center;
}

.ae-availability {
    display: inline-flex;
    align-items: center;
    gap: var(--ae-space-2);
    font-size: var(--ae-fs-xs);
    font-weight: 600;
    color: var(--ae-color-text);
}

.ae-availability__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2e9e4f;
}

/* Griglia prezzi a tratta: tabella classica ma ripulita, con la tariffa
   attualmente selezionata messa in evidenza. */
.ae-fare-grid {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--ae-space-5);
    font-size: var(--ae-fs-sm);
}

    .ae-fare-grid th,
    .ae-fare-grid td {
        border: 1px solid var(--ae-color-border);
        padding: var(--ae-space-3);
        text-align: center;
    }

    .ae-fare-grid thead th {
        background: var(--ae-color-surface-tint);
        color: var(--ae-color-text-muted);
        font-size: var(--ae-fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        font-weight: 700;
    }

    .ae-fare-grid tbody th {
        background: var(--ae-color-surface-tint);
        text-align: left;
        font-size: var(--ae-fs-xs);
        color: var(--ae-color-text-muted);
        white-space: nowrap;
    }

    .ae-fare-grid tbody td {
        cursor: pointer;
        transition: background .15s ease;
    }

        .ae-fare-grid tbody td:hover {
            background: var(--ae-color-accent-soft);
        }

.ae-fare-grid__price {
    font-weight: 700;
    color: var(--ae-color-text);
}

.ae-fare-grid__seats {
    font-size: var(--ae-fs-xs);
    color: var(--ae-color-text-faint);
}

.ae-fare-grid td.is-selected {
    background: var(--ae-color-accent-soft);
    border: 2px solid var(--ae-color-primary);
}

/* Fermate intermedie: tabella semplice */
.ae-stops-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ae-fs-sm);
}

    .ae-stops-table th,
    .ae-stops-table td {
        border: 1px solid var(--ae-color-border);
        padding: var(--ae-space-2) var(--ae-space-3);
        text-align: left;
    }

    .ae-stops-table thead th {
        background: var(--ae-color-surface-tint);
        color: var(--ae-color-text-muted);
        font-size: var(--ae-fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

.ae-detail-footer {
    display: flex;
    justify-content: center;
    padding-top: var(--ae-space-5);
    border-top: 1px solid var(--ae-color-border);
}

.ae-btn-lg {
    height: 48px;
    padding: 0 var(--ae-space-6);
    font-size: var(--ae-fs-md);
}

/* La chevron-up.svg ruotata di -90gradi per usarla come freccia "indietro"
   nel bottone "Torna ai risultati", senza dover creare un altro file SVG. */
.ae-icon--back {
    transform: rotate(-90deg);
}

/* ===== INIZIO MODIFICA 2026-09-07 ===== */
.ui-datepicker .ui-state-active,
.ui-datepicker .ui-state-active:hover {
    color: #fff;
}
/* ===== FINE MODIFICA 2026-09-07 ===== */