/* =========================================================
   results.css — Step 1 (search form) + Step 2 (flight cards,
   fares, filters, sticky toolbar, times slider, responsive)
   aeroplan.bg booking engine
   ========================================================= */

/* ===== STEP 1: Search Widget ===== */

/* Search panel — shown on step 1 and when editing from results */
#search-panel { margin-bottom: 16px; }
#search-panel.collapsed { display: none; }

/* Compact edit mode — search panel opened from step 2 results */
@keyframes editPanelSlideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
#search-panel.edit-mode {
    animation: editPanelSlideDown 0.18s ease;
    /* Overlay — floats over the results, no push */
    position: absolute;
    left: 0;
    right: 0;
    z-index: 200;
    margin-bottom: 0;
}
/* Mobile: no overlay — form is full-width anyway, just push results down */
@media (max-width: 768px) {
    #search-panel.edit-mode {
        position: static;
        z-index: auto;
    }
    #edit-search-backdrop { display: none !important; }
}

.search-widget {
    background: linear-gradient(135deg, var(--aeroplan-blue) 0%, var(--aeroplan-sky-blue) 100%);
    border-radius: 16px;
    padding: 24px 24px 28px;
    margin: 0 auto;
    position: relative;
}
#search-panel.edit-mode #edit-search-close-btn { display: block !important; }

/* Trip type radios — white text on gradient */
.trip-type-row {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
}
.trip-type-row label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    font-weight: 550;
    cursor: pointer;
    color: rgba(255,255,255,0.92);
}
.trip-type-row input[type="radio"] {
    accent-color: var(--aeroplan-teal);
    width: 15px;
    height: 15px;
}

/* ── Inline horizontal bar ── */
.search-bar {
    display: flex;
    align-items: stretch;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    min-height: 54px;
    margin-top: 38px; /* space for labels floating above + breathing room below radio row */
}

/* Each segment */
.search-seg {
    flex: 1;
    min-width: 0;
    padding: 7px 16px;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    position: relative;
    cursor: pointer;
    transition: background 0.15s;
    overflow: visible;
}
.search-seg:hover { background: #f8fafc; }
.seg-from { flex: 1.2; border-radius: 10px 0 0 10px; border-right: none; padding-right: 30px; cursor: text; }
.seg-to   { flex: 1.2; padding-left: 30px; cursor: text; }
.seg-dep  { flex: 1.1; }
.seg-ret  { flex: 1.1; }
.seg-pax  { flex: 1.4; border-right: none; }

/* Labels float above the white bar on the dark gradient background */
.seg-label {
    position: absolute;
    top: -22px;
    left: 16px;
    font-size: 0.74rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}
.seg-to .seg-label { left: 30px; }
.seg-value {
    font-size: 0.88rem;
    font-weight: 500;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Inputs inside bar — strip all native chrome */
.search-seg input[type="text"],
.search-seg input[type="date"] {
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    background: transparent;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    color: #111827;
    width: 100%;
    min-width: 0;
}
.search-seg input[type="text"]::placeholder { color: #9ca3af; font-weight: 400; }
.search-seg input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; }

/* Swap button — absolute inside seg-from, centered on the boundary with seg-to */
.seg-swap {
    position: absolute;
    right: -16px;       /* half of button width → center sits on seg boundary */
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #d1d5db;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--aeroplan-blue);
    font-size: 0.68rem;
    z-index: 10;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
    transition: background 0.15s, border-color 0.15s;
}
.seg-swap:hover {
    background: #f0f7ff;
    border-color: var(--aeroplan-sky-blue);
    color: var(--aeroplan-sky-blue);
}

/* Search button — rightmost, right edge rounded */
.search-bar .search-btn {
    flex-shrink: 0;
    padding: 0 22px;
    background: var(--aeroplan-blue);
    color: white;
    border: none;
    border-radius: 0 10px 10px 0;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    width: auto;
    margin: 0;
    transition: background 0.15s, color 0.15s;
}
.search-bar .search-btn:hover,
.search-bar .search-btn:active { background: white; color: var(--aeroplan-blue); }
.search-bar .search-btn i { font-size: 1.45rem; }

/* IATA autocomplete */
.iata-wrap { position: relative; width: 100%; flex: 1; display: flex; align-items: center; }
.iata-wrap input { width: 100%; box-sizing: border-box; height: 100%; }
.iata-suggestions {
    display: none;
    /* position: fixed (viewport-relative), not absolute — escapes any ancestor's
       overflow:hidden (e.g. .flights-hero's rounded-corner clipping). Positioned
       dynamically via JS (positionIataSuggestions() in api.js), same pattern as
       #cal-popup. Without this, the list could get clipped mid-row in a short
       viewport, leaving only the top entries (e.g. the city header) clickable. */
    position: fixed;
    min-width: 320px;
    width: max-content;
    max-width: 420px;
    background: white;
    border: 1.5px solid var(--aeroplan-sky-blue);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,41,85,0.12);
    z-index: 400;
    overflow: hidden;
    max-height: 40vh;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox — stays scrollable, just hides the bar */
    -ms-overflow-style: none;
}
.iata-suggestions::-webkit-scrollbar { display: none; } /* Chrome/Safari/Android */
.iata-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    font-size: 0.84rem;
    color: #1f2937;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.1s;
}
.iata-item:last-child { border-bottom: none; }
.iata-item:hover { background: #f0f6ff; }
/* shared icon */
.iata-icon { color: var(--aeroplan-sky-blue); width: 14px; flex-shrink: 0; }
/* min-width:0 overrides the flex default (min-width:auto), which otherwise
   refuses to shrink below the nowrap text's natural width — on a narrow
   phone with a long city/airport name this pushed the row wider than
   #am-results/.iata-suggestions, and their overflow-x:hidden silently
   clipped the right edge (code badge, part of the name) instead of the
   text truncating with an ellipsis. */
.iata-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.iata-item-name { font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iata-item-sub  { font-size: 0.73rem; color: #6b7280; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iata-item-code {
    font-weight: 700;
    font-size: 0.78rem;
    color: white;
    background: var(--aeroplan-blue);
    border-radius: 4px;
    padding: 1px 6px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

/* City aggregate header row */
.iata-city-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    background: var(--aeroplan-blue);
    color: white;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    transition: background 0.1s;
}
.iata-city-header:hover { background: #003d7a; }
.iata-city-icon { color: var(--aeroplan-light-blue); width: 14px; flex-shrink: 0; }
.iata-city-name { font-size: 0.88rem; font-weight: 600; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iata-city-sub  { font-size: 0.71rem; color: var(--aeroplan-light-blue); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Bilingual IATA display — BG name primary, EN name as secondary subtitle */
.iata-city-en,
.iata-item-en {
    display: block;
    font-size: 0.72rem;
    color: #9ca3af;
    font-style: italic;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.iata-city-header .iata-item-code {
    background: rgba(255,255,255,0.18);
    color: white;
    border: 1px solid rgba(255,255,255,0.35);
}

/* Airport row indented under city */
.iata-airport-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 32px;
    cursor: pointer;
    font-size: 0.83rem;
    color: #374151;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.1s;
    background: white;
}
.iata-airport-item:hover { background: #f0f6ff; }
.iata-airport-item .iata-icon { color: #9ca3af; width: 13px; }
.iata-airport-item .iata-item-name { font-size: 0.83rem; color: #374151; }
.iata-airport-item .iata-item-code { background: #e5e7eb; color: #374151; }

/* Pax + cabin dropdown */
.pax-drop {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 300px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.16);
    padding: 20px;
    z-index: 400;
    border: 1.5px solid #e5e7eb;
}
.pax-drop.open { display: block; }
.pax-cabin-row { margin-top: 16px; }
.pax-drop-done {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 10px;
    background: var(--aeroplan-blue);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.2s;
}
.pax-drop-done:hover { background: var(--aeroplan-sky-blue); }

/* Pax stepper */
.pax-stepper {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pax-stepper button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #d1d5db;
    background: white;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--aeroplan-blue);
    transition: all 0.2s;
}
.pax-stepper button:hover { background: #f0f7ff; border-color: var(--aeroplan-sky-blue); }
.pax-stepper button:disabled { opacity: 0.3; cursor: not-allowed; }
.pax-stepper .pax-count {
    font-size: 1rem;
    font-weight: 600;
    min-width: 28px;
    text-align: center;
    color: var(--aeroplan-blue);
}

/* Pax row inside dropdown */
.pax-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

/* Form group — pax dropdown + steps 3/4 */
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group.full-width { grid-column: 1 / -1; }
.form-group label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
}
.form-group input,
.form-group select {
    padding: 10px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.88rem;
    color: #1f2937;
    transition: border-color 0.2s;
    background: white;
}
.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--aeroplan-sky-blue);
    box-shadow: 0 0 0 3px rgba(31,116,220,0.1);
}

/* Error message under bar */
#searchError {
    border-radius: 8px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    font-size: 0.85rem;
    padding: 10px 14px;
    margin-top: 12px;
}

/* ── Mobile: stack vertically, labels float above each card on the gradient ── */
@media (max-width: 768px) {
    .search-widget { padding: 14px 12px 16px; }

    /* Trip-type labels match field value weight on mobile */
    .trip-type-row label { font-weight: 700; font-size: 0.84rem; color: white; }
    .trip-type-row { margin-bottom: 10px; }

    /* Bar becomes a transparent column spacer — each card has its own white bg */
    .search-bar {
        flex-direction: column;
        min-height: unset;
        margin-top: 0;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        gap: 0;
    }

    /* Each segment: own white card — all labels live INSIDE the card at top
       for full consistency across all 5 fields */
    .search-seg {
        flex: unset;
        padding: 20px 12px 8px; /* top room for the label pinned inside */
        background: white;
        border-right: none;
        border-bottom: none;
        border-radius: 0 !important;
        margin-top: 6px;
        overflow: visible;
    }

    /* All labels: pinned inside their card at the top — same style for every field */
    .seg-label {
        position: absolute;
        top: 5px;
        left: 12px;
        color: var(--aeroplan-blue);
        font-size: 0.63rem;
        font-weight: 700;
        opacity: 0.72;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        pointer-events: none;
    }
    /* seg-to desktop offset not needed on mobile */
    .seg-to .seg-label { left: 16px; }

    /* From+To pair: connected, no gap between them */
    .seg-from {
        border-radius: 10px 10px 0 0 !important;
        border-bottom: 1px solid #e5e7eb !important;
        padding-bottom: 14px; /* room for swap button */
        position: relative;
        margin-top: 6px;
    }
    .seg-to {
        border-radius: 0 0 10px 10px !important;
        margin-top: 0; /* connected — no gap */
    }

    /* Dep+Ret pair: connected, no gap between them */
    .seg-dep {
        border-radius: 10px 10px 0 0 !important;
        border-bottom: 1px solid #e5e7eb !important;
        margin-top: 6px;
    }
    .seg-ret {
        border-radius: 0 0 10px 10px !important;
        margin-top: 0; /* connected — no gap */
    }

    /* Pax: standalone rounded card */
    .seg-pax {
        border-radius: 10px !important;
        border-bottom: none;
        margin-top: 6px;
    }

    /* Swap button — repositioned between From and To rows on mobile */
    .seg-swap {
        display: flex !important;
        position: absolute;
        right: 16px;
        bottom: -18px;
        top: auto;
        transform: none;
        width: 36px;
        height: 36px;
        z-index: 10;
        border-width: 2px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12);
        background: white;
    }

    .search-bar .search-btn {
        border-radius: 10px;
        margin-top: 8px;
        padding: 13px;
        justify-content: center;
        width: 100%;
    }
    .pax-drop {
        left: 0;
        right: 0;
        min-width: 0;
        padding: 14px;
    }
    .pax-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .pax-row .form-group {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    /* left/top/width now set dynamically via JS (positionIataSuggestions in api.js)
       since .iata-suggestions is position:fixed — no static override needed here. */
}

/* ===== STEP 2: Search Summary Bar ===== */
.search-summary {
    background: linear-gradient(135deg, var(--aeroplan-blue) 0%, var(--aeroplan-sky-blue) 100%);
    color: white;
    border-radius: 12px;
    padding: 16px 24px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.search-summary .route {
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}
.search-summary .route .arrow { color: var(--aeroplan-teal); font-size: 1.2rem; }
.search-summary .meta { font-size: 0.85rem; opacity: 0.9; }
.search-summary .edit-btn {
    background: white;
    border: none;
    color: var(--aeroplan-blue);
    padding: 8px 18px;
    border-radius: 20px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transition: background 0.15s, box-shadow 0.15s, transform 0.12s;
}
.search-summary .edit-btn:hover {
    background: #e8f3ff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
}
.search-summary .edit-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
}

/* ===== Results header (kept for spacing above cards) ===== */
.results-header { display: none; }
/* ===== Flight Card ===== */
.flight-card {
    background: white;
    border-radius: 12px;
    border: 2px solid var(--aeroplan-blue);
    box-shadow: 0 2px 8px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.07);
    margin-bottom: 0;
    overflow: hidden;
    position: relative;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}
/* Spacing between cards */
.flight-card + .flight-card { margin-top: 20px; }
.flight-card:hover { box-shadow: 0 8px 24px rgba(0,41,85,0.14), 0 2px 6px rgba(0,0,0,0.08); transform: translateY(-2px); }

/* ===== Details divider — pill on hairline (same style as mobile) ===== */
.fc-details-divider {
    display: grid;
    grid-template-columns: 48px 1fr 180px 1fr;
    column-gap: 14px;
    align-items: center;
    position: relative;
    min-height: 24px;
    background: white;
    cursor: pointer;
    user-select: none;
    transition: none;
    margin-top: 6px;
}
/* Hairline bleeds to card edges (compensates for flight-compact padding: 24px) */
.fc-details-divider::before {
    content: '';
    position: absolute;
    left: -24px;
    right: -24px;
    top: 50%;
    height: 2px;
    background: var(--aeroplan-blue, #002955);
    opacity: 0.18;
    pointer-events: none;
}
/* fc-div-line elements are display:none — only fc-div-label participates in grid */
.fc-div-line { display: none; }
.fc-div-label {
    grid-column: 3;           /* aligned with middle (airline/duration) column */
    justify-self: center;
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--aeroplan-blue);
    border: 1px solid rgba(0,41,85,0.18);
    border-radius: 6px;
    padding: 3px 14px;
    background: white;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.fc-details-divider:hover .fc-div-label {
    border-color: var(--aeroplan-blue);
    background: #f0f6ff;
}
.fc-details-divider.active .fc-div-label {
    background: var(--aeroplan-blue);
    border-color: var(--aeroplan-blue);
    color: #ffffff;
}
.fc-div-chevron {
    display: inline-flex;
    align-items: center;
    font-size: 0.60rem;
    transition: transform 0.25s;
}
.fc-details-divider.active .fc-div-chevron { transform: rotate(180deg); }
.flight-compact { padding: 10px 24px 8px; border-radius: 10px; overflow: hidden; }

/* ===== Route row ===== */
.route-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.endpoint { text-align: center; min-width: 130px; }
.endpoint .time {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--aeroplan-blue);
    line-height: 1.2;
}
.endpoint .city {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    margin-top: 4px;
}
.endpoint .iata {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--aeroplan-sky-blue);
}
.endpoint .date {
    font-size: 0.82rem;
    color: #6b7280;
    margin-top: 2px;
}

/* ===== Per-leg rows — boarding pass + destination-first style ===== */
.legs-list { margin-bottom: 6px; }
.leg-row {
    display: grid;
    grid-template-columns: 140px 1fr 160px 1fr;
    align-items: center;
    column-gap: 14px;
    padding: 6px 0;
}
.leg-row + .leg-row { border-top: 1px dashed #d1d5db; }
.leg-arrow {
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--aeroplan-blue);
    display: flex;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.75;
}
.leg-arrow.ret { color: var(--aeroplan-sky-blue); }

/* ── Left logo column ── */
.leg-logo-col-multi .leg-logo-img { width: 30px; height: 30px; }
.leg-logo-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 3px;
}
.leg-logo-wrap {
    position: relative;
    display: inline-flex;
    cursor: default;
}
.leg-logo-wrap::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 50%;
    left: calc(100% + 10px);
    transform: translateY(-50%);
    background: #002955;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,41,85,0.28);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 30;
}
.leg-logo-wrap::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(100% + 4px);
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: #002955;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 30;
}
.leg-logo-wrap:hover::after,
.leg-logo-wrap:hover::before { opacity: 1; }
.leg-logo-img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    border-radius: 4px;
    display: block;
}
.leg-logo-extra {
    font-size: 0.62rem;
    font-weight: 700;
    color: #9ca3af;
}
.leg-logo-name {
    display: none; /* shown only on mobile via mobile.css */
    font-size: 0.64rem;
    font-weight: 600;
    color: #64748b;
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
    max-width: 56px;
}
.ldh-airline-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.88);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.leg-center-stops {
    font-size: 0.65rem;
    font-weight: 700;
    color: #92400e;
    background: #fef3c7;
    border-radius: 20px;
    padding: 2px 9px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 10px;
}

/* ── Date header — same grid columns as .leg-row for pixel-perfect alignment ── */
.leg-date-header {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 128px 1fr 160px 1fr;
    column-gap: 14px;
    align-items: center;
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--aeroplan-blue) 0%, var(--aeroplan-teal) 100%);
    border-radius: 8px;
    padding: 4px 12px;
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}
/* Date aligns above dep block (col 2) */
.leg-date-header > span:first-child {
    grid-column: 2 / 3;
    justify-self: center;
    text-align: center;
}
.ldh-airline-name { grid-column: 1; grid-row: 1; text-align: center; justify-self: stretch; }
.ldh-dir-arrow {
    grid-column: 3;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    color: rgba(255,255,255,0.90);
    font-size: 1rem;
}
/* Duration aligns to arr column */
.leg-dur-header {
    grid-column: 4;
    text-align: center;
    justify-self: center;
}
.leg-hdr-stops {
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-shadow: 0 0 6px rgba(0,41,85,0.5), 0 1px 2px rgba(0,41,85,0.35);
}
.leg-dur-header {
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255,255,255,0.95);
    white-space: nowrap;
    text-align: right;
}
.leg-dur-label {
    font-weight: 600;
    color: rgba(255,255,255,0.80);
    font-size: 0.72rem;
    margin-right: 4px;
}

/* ── Departure block (left) ── */
.leg-dep-block { min-width: 0; align-self: start; justify-self: stretch; text-align: center; }
.leg-city-name {
    font-size: 1.05rem;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.leg-main-time {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-top: 8px;
    letter-spacing: -0.3px;
    line-height: 1;
}
.leg-iata-code {
    font-size: 0.68rem;
    font-weight: 500;
    color: #9ca3af;
    margin-top: 3px;
    letter-spacing: 0.05em;
}
.leg-airport-name {
    font-size: 0.73rem;
    font-weight: 400;
    color: #9ca3af;
    margin-top: 2px;
    white-space: nowrap;
    /* overflow: hidden; */
    max-width: 150px;
    text-align: center;
}
.leg-arr-block .leg-airport-name,
.leg-arr-block .leg-airport-code {
    margin-left: 0;
}
.leg-airport-code {
    display: none; /* shown only on mobile */
    font-size: 0.68rem;
    font-weight: 600;
    color: #4b5563;
    margin-top: 2px;
    letter-spacing: 0.05em;
}

/* ── Arrival block (right) ── */
.leg-arr-block {
    text-align: center;
    min-width: 0;
    align-self: start;
    justify-self: stretch;
}
.leg-arr-date {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #d97706;
    white-space: nowrap;
    margin-top: 2px;
}

/* ── Center: logo stamps + route line ── */
.leg-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: start;
    padding-top: 10px;
    gap: 4px;
}
.leg-center-direct {
    padding-top: 28px;
}
.leg-airline-name {
    font-size: 0.68rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
}
.leg-stamps {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
}
.leg-stamps-split {
    width: 100%;
    justify-content: space-around;
}
.airline-logo-stamp {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 4px;
    display: block;
}
.leg-line-wrap {
    width: 100%;
    height: 2px;
    background: #d1d5db;
    position: relative;
}
.leg-line-wrap::before, .leg-line-wrap::after {
    content: '';
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--aeroplan-light-blue);
}
.leg-line-wrap::before { left: -3px; }
.leg-line-wrap::after  { right: -3px; }
/* Label on the line — white bg breaks the line visually */
.leg-line-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 0 5px;
    font-size: 0.65rem;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.leg-line-label.direct {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid rgba(21,128,61,0.22);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 0 8px rgba(21,128,61,0.12);
}

/* ===== Flight path (line between endpoints) ===== */
.flight-path {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-width: 140px;
}
.flight-path .duration { display: none; }
.flight-path .line {
    width: 100%;
    height: 2px;
    background: #d1d5db;
    position: relative;
}
.flight-path .line::before,
.flight-path .line::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--aeroplan-light-blue);
}
.flight-path .line::before { left: 0; }
.flight-path .line::after { right: 0; }
.flight-path .line .plane-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--aeroplan-sky-blue);
    background: white;
    padding: 0 4px;
    font-size: 0.9rem;
}
.flight-path .stops-dots {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-evenly;
    transform: translateY(-50%);
    z-index: 1;
}
.stop-dot-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.stop-dot {
    width: 10px;
    height: 10px;
    background: var(--aeroplan-green);
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 0 1px var(--aeroplan-green);
    z-index: 2;
}
.stop-dot-label {
    position: absolute;
    top: -18px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--aeroplan-blue);
    white-space: nowrap;
    line-height: 1.4;
}
.flight-path.has-stops .plane-icon { display: none; }
.carrier-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 5px 0 2px;
    border-top: 1px solid #f3f4f6;
    margin-top: 4px;
}
.carrier-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 2px 10px 2px 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #374151;
}
.carrier-badge .iata-code {
    background: var(--aeroplan-blue);
    color: white;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.68rem;
    letter-spacing: 0.5px;
}
/* Multi-airline display helpers */
.carrier-dir-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--aeroplan-blue);
    margin-right: 3px;
    flex-shrink: 0;
}
.carrier-dir-sep {
    color: #d1d5db;
    padding: 0 4px;
    font-size: 0.9rem;
    line-height: 1;
}
.carrier-extra {
    font-size: 0.68rem;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 2px 8px;
}
.flight-path .stops-label {
    font-size: 0.73rem;
    margin-top: 8px;
}
.stops-label.direct { color: var(--aeroplan-green); font-weight: 600; }
.stops-label.has-stops { color: var(--aeroplan-green); font-weight: 600; }

/* Responsive "Включен/Вкл." label — desktop shows full word, mobile shows abbrev. */
.incl-label::before { content: 'Включен'; }

/* ===== Fare columns ===== */
/* ===== Fare preview (collapsed) ===== */
.fare-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
    border: 1px solid rgba(0,41,85,0.25);
    border-radius: 10px;
    padding: 10px 20px;
    margin-top: 6px;
    margin-bottom: 2px;
    margin-left: 8px;
    margin-right: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.fare-preview:hover {
    box-shadow: 0 4px 12px rgba(0,41,85,0.12);
}
/* Детайли за полетите — secondary, outlined */
.fp-details-btn {
    background: transparent;
    border: 1.5px solid #d1d5db;
    color: #6b7280;
    border-radius: 20px;
    padding: 7px 14px;
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    width: 100%;
}
.fp-details-btn:hover {
    border-color: var(--aeroplan-blue);
    color: var(--aeroplan-blue);
    background: #f0f7ff;
}
.fp-details-btn .chevron {
    font-size: 0.55rem;
    transition: transform 0.3s;
}
.fp-details-btn.active {
    border-color: var(--aeroplan-blue);
    color: var(--aeroplan-blue);
    background: #eef5ff;
}
.fp-details-btn.active .chevron { transform: rotate(180deg); }

/* Layout: цена вляво, бутон вдясно */
.fare-preview .fp-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    flex: 1;
    min-width: 0;
}
.fare-preview .fp-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    flex-shrink: 0;
    min-width: 160px;
    padding-left: 20px;
    border-left: 1px solid rgba(0,41,85,0.18);
}
.fare-preview .fp-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.fare-preview .fp-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--aeroplan-blue, #002955);
}
.fare-preview .fp-price {
    font-size: 1.9rem;
    font-weight: 900;
    color: var(--aeroplan-blue);
    letter-spacing: -0.01em;
}
.fare-preview .fp-price .currency {
    font-size: 0.8rem;
    font-weight: 600;
}
.fare-preview .fp-price .fp-price-bgn {
    font-size: 1.2rem;
    font-weight: 400;
    color: #6b7280;
}
.fare-preview .fp-pax {
    font-size: 0.70rem;
    font-weight: 500;
    color: #6b7280;
}

.fp-bag-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-top: 5px;
    width: 100%;
}
.fp-bag-row .fp-bag-tag {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--aeroplan-blue, #002955);
    display: flex;
    align-items: center;
    gap: 5px;
}
.fp-bag-row .fp-bag-tag i {
    font-size: 0.9rem;
    flex-shrink: 0;
}
.fp-bag-row .fp-bag-tag {
    padding: 2px 7px;
    border-radius: 12px;
    font-size: 0.9rem;
}
.fp-bag-row .fp-bag-yes {
    background: #dcfce7;
    color: #15803d;
}
.fp-bag-row .fp-bag-carry {
    background: #dcfce7;
    color: #15803d;
}
.fp-bag-row .fp-bag-no {
    background: #f3f4f6;
    color: #6b7280;
}
.fp-fee-note {
    font-size: 0.67rem;
    color: #6b7280;
    line-height: 1.35;
    padding: 2px 20px 10px;
}

/* Partial baggage — per-direction directional indicators */
.fp-bag-partial {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--aeroplan-blue, #002955);
}
.fp-bag-dir-yes { color: var(--aeroplan-green, #18b239); font-weight: 700; }
.fp-bag-dir-no  { color: #ef4444; font-weight: 700; }
.fp-bag-dir-sep { color: #d1d5db; font-size: 0.8rem; }
.fp-bag-partial-lbl {
    font-size: 0.68rem;
    font-weight: 400;
    color: #6b7280;
}

/* Main bag line: checked | carry-on on one row */
.fp-bag-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

/* Vertical separator between checked and carry-on */
.fp-bag-sep {
    color: #d1d5db;
    font-size: 0.85rem;
    line-height: 1;
    user-select: none;
}

/* "No bag" icon — suitcase with diagonal strikethrough */
.fp-bag-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.fp-bag-icon-wrap i {
    opacity: 0.4;
}
.fp-bag-icon-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -15%;
    width: 130%;
    height: 2.5px;
    background: var(--aeroplan-blue, #002955);
    transform: translateY(-50%) rotate(-45deg);
    border-radius: 2px;
}

/* Upgrade block — separator + secondary price + bag tag */
.fp-upgrade-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 4px 10px;
    background: #f0f7ff;
    border: 1px solid #c8d8ec;
    border-radius: 20px;
    font-size: 0.72rem;
    color: #002955;
    white-space: nowrap;
}
.fp-upgrade-chip i {
    font-size: 0.68rem;
    opacity: 0.7;
}
.fp-upg-chip-label {
    font-weight: 400;
    opacity: 0.8;
}
.fp-upg-chip-price {
    font-weight: 700;
}
.fp-upg-chip-pax {
    opacity: 0.65;
    font-size: 0.65rem;
}

/* Primary CTA — Избери тарифа */
.fare-preview .fp-btn {
    background: linear-gradient(135deg, var(--aeroplan-blue) 0%, var(--aeroplan-teal) 100%);
    color: white;
    border: none;
    border-radius: 24px;
    padding: 15px 36px;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    transition: all 0.2s;
}
.fare-preview .fp-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,41,85,0.25);
}
.fare-preview .fp-btn .chevron-sm {
    font-size: 0.6rem;
    transition: transform 0.3s;
}
.fare-preview.expanded .fp-btn .chevron-sm { transform: rotate(180deg); }
.fare-preview.expanded { margin-bottom: 8px; }

/* ===== Fare columns ===== */
/* Wrapper: flex row — [← btn] [scroll area] [→ btn] */
.fares-scroll-wrap {
    display: none;
    margin: 0 0 12px; /* nav buttons sit outside via overflow:visible + negative position */
    position: relative;
    overflow: visible;
}
.fares-scroll-wrap.open {
    display: flex;
    animation: slideDown 0.25s ease;
}

/* Horizontal scroll area */
.fares-row {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 6px 6px 12px 6px;
}
.fares-row::-webkit-scrollbar { display: none; }

/* Each fare column: exactly 1/3 of the scroll area; snap to start */
.fare-col {
    /* Fallback gradient tokens for tiers without explicit class */
    --hdr-from: #002046;
    --hdr-to: #1f74dc;
    flex: 1 1 0;                         /* grow to fill: 1 card=100%, 2=50%, 3=33% */
    min-width: calc((100% - 28px) / 3); /* 4+ cards: scroll at 1/3 width each */
    scroll-snap-align: start;
    border-radius: 10px;
    /* One accent per card, always visible — not just on hover. --tier-color
       is the fare-family accent set inline by renderFareCol(); falls back
       to the legacy --hdr-from tier-index token when a family isn't
       recognized (see FARE_FAMILY_COLORS in render-flights.js). */
    border: 1.5px solid var(--tier-color, var(--hdr-from));
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.fare-col:hover {
    box-shadow: 0 20px 48px color-mix(in srgb, var(--tier-color, var(--hdr-from)) 20%, transparent),
                0 6px 16px rgba(0,0,0,0.06);
    transform: translateY(-5px);
}

/* Navigation arrow buttons — absolute overlay at scroll-wrap edges */
.fares-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid rgba(226,232,240,0.9);
    background: rgba(255,255,255,0.96);
    box-shadow: 0 2px 10px rgba(0,41,85,0.16);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--aeroplan-blue);
    font-size: 0.7rem;
    transition: box-shadow 0.15s, background 0.15s;
}
.fares-nav-prev { left:  4px; }
.fares-nav-next { right: 4px; }
.fares-nav:hover {
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,41,85,0.22);
}
.fares-nav.hidden {
    visibility: hidden;
    pointer-events: none;
}

/* Colored header band — full-width, saturated, white text */
.fare-header {
    padding: 10px 14px 9px;
    background: linear-gradient(135deg, var(--hdr-from) 0%, var(--hdr-to) 100%);
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.fare-header-left {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Best value badge — compact pill inside header, no extra row */
.fare-best-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.22);
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 20px;
    padding: 3px 8px;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: white;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}
/* Per-tier gradient tokens: --hdr-from (dark end) → --hdr-to (light end)
   Shared by header + button via linear-gradient(135deg, var(--hdr-from), var(--hdr-to)) */
.fare-tier0 { --hdr-from: #2878a0; --hdr-to: #4aaec8; } /* steel-blue   */
.fare-tier1 { --hdr-from: #1a7a2e; --hdr-to: #2aaa48; } /* muted green  */
.fare-tier2 { --hdr-from: #1650a0; --hdr-to: #3478d0; } /* muted sky    */
.fare-tier3 { --hdr-from: #582890; --hdr-to: #8048b8; } /* muted purple */
.fare-tier4 { --hdr-from: #189880; --hdr-to: #38b8a0; } /* muted teal   */
.fare-tier5 { --hdr-from: #002046; --hdr-to: #1f74dc; } /* aeroplan-blue */
/* Tiers 6–8: cycle */
.fare-tier6 { --hdr-from: #2878a0; --hdr-to: #4aaec8; }
.fare-tier7 { --hdr-from: #1a7a2e; --hdr-to: #2aaa48; }
.fare-tier8 { --hdr-from: #1650a0; --hdr-to: #3478d0; }

/* Card body */
.fare-body {
    padding: 16px 16px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 280px;
}
.fcc-compact .fare-body {
    min-height: 0;
}

/* Fare name — white text inside colored header */
.fare-col .fare-name {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: white;
    margin: 0;
}
/* price_class_name — shown below cabin class, dimmed */
.fare-col .fare-subname {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    margin-top: 3px;
}

/* Mixed-cabin offers are excluded at mapper level (.every() check).
   If they appear in production, add a badge here (Variant B). */

/* Price block — fallback (single fare, no basePrice) */
.fare-col .fare-price {
    font-size: 1.35rem;
    font-weight: 700;
    color: #002955;
    line-height: 1;
    letter-spacing: -0.5px;
}
.fare-col .fare-price .currency {
    font-size: 0.95rem;
    font-weight: 700;
    color: #002955;
}

/* Price block — Variant B delta display */
.fare-col .fare-price-delta {
    line-height: 1.1;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 2px;
}
.fare-col .fare-price-delta .fdelta-num {
    font-size: 1.55rem;
    font-weight: 800;
    color: #002955;
    letter-spacing: -0.5px;
}
.fare-col .fare-price-delta .fdelta-cur {
    font-size: 0.95rem;
    font-weight: 700;
    color: #002955;
    align-self: flex-end;
    padding-bottom: 2px;
}
.fare-col .fare-price-delta .fdelta-bgn {
    font-size: 0.72rem;
    font-weight: 500;
    color: #6b7280;
    align-self: flex-end;
    padding-bottom: 2px;
}
/* Base fare (+0): mute the number to signal "no extra cost" */
.fare-col .fare-price-delta.fare-delta-zero .fdelta-num {
    color: #64748b;
    font-weight: 700;
}
.fare-col .fare-price-delta.fare-delta-zero .fdelta-cur {
    color: #6b7280;
}
/* Pax count — directly under delta, tied to it semantically */
.fare-col .fare-pax {
    font-size: 0.7rem;
    color: #374151;
    margin-top: 4px;
    margin-bottom: 8px;
}
/* Total — separated by a divider line */
.fare-col .fare-price-total {
    font-size: 0.72rem;
    font-weight: 600;
    color: #374151;
    padding-top: 6px;
    border-top: 1px solid #e2e8f0;
    margin-bottom: 4px;
}

/* Base-fare pill — replaces "Общо" line on cheapest fare */
.fare-base-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    padding: 2px 10px;
    margin-top: 2px;
}
.fare-base-pill i {
    font-size: 0.6rem;
}

/* Section divider */
.fare-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 10px 0;
}

/* Baggage */
.fare-col .fare-baggage { }
.fare-col .fare-baggage .bag-line {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.75rem;
    color: #1e293b;
    padding: 3px 0;
}
.fare-col .fare-baggage .bag-line i {
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.fare-col .fare-baggage .bag-line.included i { color: var(--aeroplan-green); }
.fare-col .fare-baggage .bag-line.not-included {
    color: #94a3b8;
}
.fare-col .fare-baggage .bag-line.not-included i { color: #cbd5e1; }

/* Rules */
.fare-col .fare-rules {
    flex-grow: 1;
}
.fare-col .fare-rules .rule-line {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.75rem;
    color: #1e293b;
    padding: 3px 0;
}
.fare-col .fare-rules .rule-line i {
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    font-size: 0.7rem;
}
.fare-col .fare-rules .rule-line.yes i { color: var(--aeroplan-green); }
.fare-col .fare-rules .rule-line.no  i { color: #f87171; }
.fare-col .fare-rules .rule-line.no  span { color: #94a3b8; }

/* Breakdown toggle */
.fare-breakdown-toggle {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.68rem;
    color: #94a3b8;
    cursor: pointer;
    margin-top: 10px;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s;
}
.fare-breakdown-toggle:hover { color: var(--aeroplan-sky-blue); }
.fare-breakdown-toggle .chevron-sm {
    font-size: 0.52rem;
    transition: transform 0.25s;
}
.fare-breakdown-toggle.active .chevron-sm { transform: rotate(180deg); }

/* Inline breakdown */
.fare-inline-breakdown {
    display: none;
    margin-top: 6px;
    padding: 8px 10px;
    background: #f8fafc;
    border-radius: 6px;
    font-size: 0.68rem;
    color: #64748b;
    line-height: 1.7;
}
.fare-inline-breakdown.open { display: block; }
.fare-inline-breakdown .pax-line {
    display: flex;
    justify-content: space-between;
    gap: 4px;
}
.fare-inline-breakdown .pax-line .pax-calc { color: #94a3b8; }
.fare-inline-breakdown .pax-line .pax-total { font-weight: 600; color: #1e293b; white-space: nowrap; }

/* "Общо:" line — tooltip anchor; flex so icon sits inline */
.fare-price-total {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Info button — inline after total amount, NO position:relative so
   tooltip anchors to .fare-price-total instead */
.fare-fee-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #94a3b8;
    font-size: 0.75rem;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 50%;
    transition: color 0.15s;
}
.fare-fee-info:hover,
.fare-fee-info:focus { color: #475569; outline: none; }

/* Tooltip — spans full width of .fare-price-total, opens below */
.fare-fee-tip {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    background: rgba(15, 23, 42, 0.94);
    color: #f1f5f9;
    font-size: 0.68rem;
    font-weight: 400;
    line-height: 1.5;
    padding: 8px 10px;
    border-radius: 7px;
    white-space: normal;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.28);
}
.fare-fee-info:hover .fare-fee-tip,
.fare-fee-info:focus .fare-fee-tip { display: block; }

/* Spacer before CTA: fills remaining height, guarantees ≥ 14px gap before button */
.fare-spacer {
    flex: 1 1 auto;
    min-height: 14px;
}

/* CTA button — one accent color per card, everywhere */
.fare-select-btn {
    margin-top: 0;
    width: 100%;
    padding: 8px 8px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: filter 0.15s, transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    background: color-mix(in srgb, var(--tier-color, var(--hdr-from)) 88%, black);
    color: white;
}
.fare-select-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.18); }

/* ===== Step-2 fare card redesign (fc-step2) =================================
   Scoped to .fc-step2 so renderFareCondCompact (steps 3/4) is unaffected.

   Design rule: --tier-color (fare-family accent, set inline by
   renderFareCol — falls back to the legacy --hdr-from tier-index token)
   is the ONLY color used for anything "active" — border, badge, button,
   included-item pills, chevron. Everything else (background, name, price,
   cabin pill) is neutral navy/white/gray. One accent per card, not five
   different tints of it — that's what was reading as visual noise. */

/* Reserve the same vertical space whether or not a card has the badge,
   so fare-names still line up across a row of cards. */
.fare-col.fc-step2:not(:has(.fare-best-badge)) .fare-header {
    padding-top: 27px;
}

/* Flat accent line (was a 2-color gradient) — one color, not a blend */
.fare-col.fc-step2 .fare-accent {
    height: 4px;
    background: var(--tier-color, var(--hdr-from));
    flex-shrink: 0;
}

/* Header: plain white, no tint — the accent line + border already carry
   the card's identity, the header itself doesn't need to repeat it */
.fare-col.fc-step2 .fare-header {
    background: #fff;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0 14px 10px;
    border-bottom: 1px solid #eef1f4;
}
/* Top row: fare name centered */
.fare-col.fc-step2 .fh-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
}

/* Fare name: fixed navy — content text, not an accent-colored element */
.fare-col.fc-step2 .fare-name {
    color: #002955;
    text-transform: none;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-align: center;
}

/* Cabin class pill — neutral gray, not tier-tinted (secondary info) */
.fare-cabin-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    border: none;
    border-radius: 999px;
    padding: 2px 9px;
    margin-top: 1px;
    line-height: 1.4;
}

/* Best-value badge: compact pill (was a full-width colored banner) */
.fare-col.fc-step2 .fare-best-badge {
    display: inline-flex;
    align-self: center;
    align-items: center;
    gap: 5px;
    width: auto;
    margin: 10px auto 0;
    padding: 3px 10px;
    background: var(--tier-color, var(--hdr-from));
    color: white;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    border: none;
    border-radius: 20px;
    box-shadow: none;
}


/* Delta pill — upgrade cost, same accent as everything else on the card */
.fare-delta-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--tier-color, var(--hdr-from));
    background: color-mix(in srgb, var(--tier-color, var(--hdr-from)) 8%, white);
    border: none;
    border-radius: 999px;
    padding: 2px 9px;
    margin-top: 2px;
}
.fare-delta-pill i { font-size: 0.52rem; }
.fdelta-label { font-weight: 500; opacity: 0.75; font-size: 0.55rem; }

/* CTA button: rounded, flat, fc-step2 scoped */
.fare-col.fc-step2 .fare-select-btn {
    border-radius: 8px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.8rem;
}

/* ── Included-items pills ─────────────────────────────────────
   Only included baggage/carry-on/personal-item cells are ever generated
   (renderFareCol omits excluded ones entirely — nothing to show, so
   nothing to gray out), tinted with the card's own fare-family color
   (--tier-bg/--tier-text, set by renderFareCol) instead of a universal
   green box. Shared by desktop, tablet, and (via clone) the mobile sheet. */
.fc-bag-grid,
.fc-bag-grid--2col {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.fc-bag-cell {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 6px;
    padding: 6px 11px 6px 10px;
    border-radius: 20px;
}
.fc-bag-cell > i { font-size: 0.78rem; }

.fc-bag-incl {
    background: var(--tier-bg, color-mix(in srgb, var(--hdr-from) 12%, white));
    border: none;
}
.fc-bag-incl > i,
.fc-bag-incl .fc-bag-name,
.fc-bag-incl .fc-bag-weight {
    color: var(--tier-text, var(--hdr-from));
}

.fc-bag-name {
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.25;
}

.fc-bag-weight {
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.25;
    word-break: break-word;
}

/* ===== Fare card 2026 — tier dots, best banner, chips, per-person price ===== */

/* Tier dots in fare header */
.fare-tier-dots {
    display: flex;
    gap: 4px;
    margin-top: 7px;
}
.td-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    border: 1.5px solid rgba(255,255,255,0.55);
}
.td-dot.td-on {
    background: white;
    border-color: white;
}


/* Inline price breakdown (shown under price when paxCount > 1) */
.fare-price-breakdown {
    margin-top: 6px;
    margin-bottom: 4px;
    padding: 7px 10px;
    background: #f8fafc;
    border-radius: 6px;
    font-size: 0.67rem;
    color: #64748b;
    line-height: 1.7;
}
.fare-price-breakdown .pax-line {
    display: flex;
    justify-content: space-between;
    gap: 4px;
}
.fare-price-breakdown .pax-calc { color: #94a3b8; }
.fare-price-breakdown .pax-total { font-weight: 600; color: #1e293b; white-space: nowrap; }

/* Fare info sections (baggage / conditions) */
.fare-section {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid #f1f5f9;
}
.fare-sec-lbl {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--aeroplan-blue);
    margin-bottom: 4px;
}

/* Individual fare info row */
.fare-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    padding: 2px 0;
    line-height: 1.4;
}
.fi-icon {
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    font-size: 0.85rem;
}
.fi-icon.fa-suitcase-rolling { font-size: 1.25rem; }
.fi-label {
    font-weight: 600;
}
.fi-dir {
    color: var(--aeroplan-gray);
    font-size: 0.75rem;
}

/* Row states */
.fare-item-yes { color: var(--aeroplan-blue); }
.fare-item-yes .fi-icon { color: #16a34a; }
.fare-item-fee { color: var(--aeroplan-blue); }
.fare-item-fee .fi-icon { color: #d97706; }
.fare-item-no  { color: var(--aeroplan-gray); }
.fare-item-no  .fi-icon { color: var(--aeroplan-gray); }

/* No-bag icon: diagonal strikethrough */
.fi-icon-no {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 13px;
    flex-shrink: 0;
}
.fi-icon-no .fi-icon { opacity: 0.4; color: #94a3b8; }
.fi-icon-no::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 140%;
    height: 2px;
    background: #94a3b8;
    transform: translate(-50%, -50%) rotate(-45deg);
    border-radius: 1px;
}

/* .actions-row removed — Детайли button moved into .fare-preview */

/* ===== Details panel ===== */
.flight-details {
    display: none;
    background: #fafbfc;
    margin-left: -24px;
    margin-right: -24px;
    padding: 16px 24px 0;
    border-bottom: 1px solid #e5e7eb;
    animation: slideDown 0.3s ease;
}
.flight-details.open { display: block; }

/* ===== Hide-details bar — bottom of expanded flight-details ===== */
.fd-hide-bar {
    display: grid;
    grid-template-columns: 48px 1fr 180px 1fr;
    column-gap: 14px;
    align-items: center;
    position: relative;
    margin-top: 16px;
    min-height: 24px;
    background: white;
    cursor: pointer;
    user-select: none;
}
.fd-hide-bar::before {
    content: '';
    position: absolute;
    left: -24px;
    right: -24px;
    top: 50%;
    height: 2px;
    background: var(--aeroplan-blue, #002955);
    opacity: 0.18;
    pointer-events: none;
}
.fd-hide-bar .fc-div-label {
    grid-column: 3;
    justify-self: center;
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--aeroplan-blue);
    border: 1px solid rgba(0,41,85,0.18);
    border-radius: 6px;
    padding: 3px 14px;
    background: white;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s;
}
.fd-hide-bar:hover .fc-div-label {
    border-color: var(--aeroplan-blue);
    background: #f0f6ff;
}

/* Mobile: show mobile details button, hide divider */
.fp-details-mobile { display: none; }

/* ===== Direction headers inside flight-details (step 2) — compact variant of step 3/4 ===== */
.flight-details .seg-section-hdr {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 14px;
}
.flight-details .seg-section-hdr.return {
    background: var(--aeroplan-blue);
}
.flight-details .seg-hdr-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.flight-details .seg-hdr-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex-shrink: 0;
}
.flight-details .seg-hdr-label {
    background: rgba(255,255,255,0.18);
    border-radius: 3px;
    padding: 2px 7px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    align-self: flex-start;
    white-space: nowrap;
}
.flight-details .seg-hdr-route {
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: none;
}
.flight-details .seg-hdr-date {
    font-size: 0.78rem;
    font-weight: 700;
    text-align: right;
    opacity: 1;
    flex: none;
}
.flight-details .seg-hdr-dur {
    font-size: 0.72rem;
    font-weight: 500;
    text-align: right;
}
.flight-details .seg-hdr-dur-lbl {
    font-size: 0.72rem;
    font-weight: 500;
}
.flight-details .seg-hdr-stops {
    background: none;
    border-radius: 0;
    padding: 0;
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    text-align: right;
    opacity: 0.82;
}

/* ===== Flight segment — horizontal layout ===== */

/* Direction section — branded full-width card per outbound / return */
.seg-section {
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 14px;
}
.seg-section:last-child { margin-bottom: 0; }
.seg-section-hdr {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 18px;
    background: var(--aeroplan-blue);
    color: white;
}
.seg-section-hdr.return { background: var(--aeroplan-sky-blue); }
.seg-hdr-top {
    display: flex;
    align-items: center;
    gap: 10px;
}
.seg-hdr-bot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 26px;
    opacity: 0.92;
}
.seg-hdr-arrow {
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0.85;
    flex-shrink: 0;
}
.seg-hdr-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(255,255,255,0.2);
    border-radius: 5px;
    padding: 3px 10px;
    white-space: nowrap;
    flex-shrink: 0;
}
.seg-hdr-route {
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.seg-hdr-date {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    flex: 1;
    opacity: 0.9;
}
.seg-hdr-dur {
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
.seg-hdr-stops {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
    padding: 2px 8px;
    white-space: nowrap;
    flex-shrink: 0;
}
.seg-section-body {
    background: #f8fafc;
    padding: 16px 20px 10px;
}

/* Single segment row */
.seg-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    padding: 4px 0 14px;
}
.seg-endpoint { }
.seg-endpoint.right { text-align: right; }

.seg-time {
    font-size: 1.7rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
    letter-spacing: -1px;
}
.seg-endpoint.right .seg-time { justify-content: flex-end; }
.seg-date {
    display: block;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--aeroplan-blue);
    letter-spacing: 0.01em;
    margin-bottom: 3px;
}
.seg-endpoint.right .seg-date { text-align: right; }
.seg-date.diff-day {
    color: #d97706;
    font-weight: 700;
}
.seg-location {
    font-size: 0.95rem;
    font-weight: 700;
    color: #374151;
    margin-top: 5px;
    line-height: 1.3;
}
.seg-airport {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--aeroplan-blue);
    margin-top: 2px;
    line-height: 1.3;
}

/* Center: duration bubble + line + airline below */
.seg-middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 120px;
}
.seg-dur-bubble {
    font-size: 0.82rem;
    font-weight: 700;
    color: #374151;
    background: white;
    border: 1.5px solid #e5e7eb;
    border-radius: 20px;
    padding: 3px 12px;
    white-space: nowrap;
}
.seg-line {
    display: flex;
    align-items: center;
    width: 100%;
}
.seg-bar { flex: 1; height: 1.5px; background: #cbd5e1; }
.seg-plane-icon {
    font-size: 0.75rem;
    color: #94a3b8;
    padding: 0 4px;
}
.seg-airline {
    font-size: 0.88rem;
    color: var(--aeroplan-blue);
    text-align: center;
    white-space: nowrap;
}
.seg-airline strong { color: var(--aeroplan-blue); font-weight: 600; }
.seg-operated-by {
    font-size: 0.80rem;
    color: var(--aeroplan-gray);
    text-align: center;
    font-style: italic;
    margin-top: 2px;
}

/* Technical stop pill */
.seg-tech-stop {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -8px 0 12px 0;
}
.stop-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.70rem;
    color: #0c4a6e;
    background: #f0f9ff;
    border: 1px solid #7dd3fc;
    border-radius: 5px;
    padding: 3px 10px;
    white-space: nowrap;
    overflow: hidden;
}
.stop-pill i { color: #0284c7; flex-shrink: 0; font-size: 0.68rem; }
.stop-pill-place { color: #0c4a6e; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.stop-pill-sep { color: #bae6fd; flex-shrink: 0; }
.stop-pill-times { font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* Layover between segments of the same flight */
.seg-layover {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 2px 0 14px;
}
.layover-bar {
    flex: 1;
    height: 2px;
    background: repeating-linear-gradient(
        90deg, #fde68a 0px, #fde68a 6px, transparent 6px, transparent 12px
    );
}
.layover-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.73rem;
    color: #78350f;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 6px 14px;
    white-space: nowrap;
}
.layover-pill i { color: #d97706; }
.layover-dur { font-weight: 700; }

/* Offer validity — prominent notice band */
.offer-validity-band {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 16px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #92400e;
}
.offer-validity-band i { color: #d97706; font-size: 0.9rem; flex-shrink: 0; }
.offer-validity-band.valid  { background: #f0fdf4; border-color: #86efac; color: #14532d; }
.offer-validity-band.valid i { color: var(--aeroplan-green); }
.offer-validity-band.expired { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.offer-validity-band.expired i { color: #dc2626; }
.offer-validity-band.soon { background: #fff7ed; border-color: #fdba74; color: #9a3412; }
.offer-validity-band.soon i { color: #ea580c; }

.fare-conditions {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}
.fare-conditions h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--aeroplan-blue);
    margin-bottom: 10px;
}
.condition-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}
.condition-item {
    font-size: 0.85rem;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.condition-item i { margin-top: 2px; font-size: 0.85rem; }
.condition-item i.fa-check { color: var(--aeroplan-green); }
.condition-item i.fa-xmark { color: #ef4444; }
.condition-item .cond-label { color: var(--aeroplan-blue); }
.condition-item .cond-value { font-weight: 600; color: var(--aeroplan-blue); }

.fare-cond-note {
    font-size: 0.72rem;
    color: #6b7280;
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
    line-height: 1.4;
}

.total-journey { display: none; } /* replaced by details-footer */
.offer-expiry  { display: none; } /* replaced by details-footer */

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* ===== Card Flip — desktop ≥1024px ===== */

/* Perspective container */
@media (min-width: 1024px) {
    .flight-card {
        perspective: 1400px;
        /* Move visual styling to faces for clean 3D flip */
        overflow: visible;
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }
    .flight-card:hover {
        box-shadow: none;
        transform: none;
    }
    /* Flipped card: lift above siblings so back face layers correctly */
    .flight-card.fc-flipped {
        z-index: 10;
    }
    .fc-flipper {
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1),
                    height 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    }
    .flight-card.fc-flipped .fc-flipper {
        transform: rotateY(180deg);
    }

    /* Both faces */
    .fc-face {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .fc-front {
        border-radius: 12px;
        overflow: hidden;
        background: #fff;
        border: 2px solid var(--aeroplan-blue);
        box-shadow: 0 2px 8px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.07);
        transition: box-shadow 0.2s, transform 0.15s;
    }
    .flight-card:not(.fc-flipped) .fc-front:hover {
        box-shadow: 0 8px 24px rgba(0,41,85,0.14), 0 2px 6px rgba(0,0,0,0.08);
    }
    .fc-back {
        position: absolute;
        top: 0; left: 0; right: 0;
        transform: rotateY(180deg);
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 12px;
        border: 2px solid var(--aeroplan-blue);
        box-shadow: 0 4px 20px rgba(0, 41, 85, 0.16);
        overflow: hidden;
    }

    /* Back-face header */
    .fc-back-header {
        display: flex;
        align-items: center;
        position: relative;
        padding: 7px 20px;
        background: linear-gradient(135deg, var(--aeroplan-blue) 0%, var(--aeroplan-sky-blue) 100%);
        color: #fff;
        flex-shrink: 0;
    }
    .fc-back-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 16px;
        border-radius: 8px;
        border: 1.5px solid rgba(255,255,255,0.35);
        background: rgba(255,255,255,0.12);
        color: #fff;
        font-size: 0.82rem;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s, border-color 0.15s;
        flex-shrink: 0;
    }
    .fc-back-btn:hover {
        background: rgba(255,255,255,0.25);
        border-color: rgba(255,255,255,0.6);
    }
    .fc-back-route {
        position: absolute;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 0.95rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        pointer-events: none;   /* clicks pass through to button underneath */
    }

    /* Back-face body — fare cards area */
    .fc-back-body {
        padding: 12px 12px 8px;
        flex: 1;
        background: linear-gradient(180deg, #deeaf8 0%, #f0f5fb 30%, #ffffff 70%);
    }
    .fc-back-body .fare-spacer {
        min-height: 4px;
    }
    .fc-back-body .fares-scroll-wrap {
        display: flex;   /* always open on back face */
    }
    .fc-back-body .fares-row {
        /* Up to 3 cards visible; if more → scroll + nav arrows */
        flex: 1;
        display: flex;
        align-items: stretch;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding: 3px 3px 6px 5px;
    }
    /* Center only when 1-2 fare cards */
    .fc-back-body .fares-row:has(.fare-col:first-child:nth-last-child(1)),
    .fc-back-body .fares-row:has(.fare-col:first-child:nth-last-child(2)) {
        justify-content: center;
    }
    .fc-back-body .fares-row::-webkit-scrollbar { display: none; }
    .fc-back-body .fare-col {
        flex: 0 0 calc((100% - 20px) / 3);
        min-width: 220px;
        min-height: 340px;
        scroll-snap-align: start;
    }
    /* When only 2 fares — wider gap between centered cards */
    .fc-back-body .fares-row:has(.fare-col:first-child:nth-last-child(2)) {
        gap: 24px;
    }
    /* Nav arrows — visible on back face */
    .fc-back-body .fares-nav {
        width: 36px;
        height: 36px;
        background: var(--aeroplan-blue);
        border: none;
        color: #fff;
        box-shadow: 0 3px 10px rgba(0, 41, 85, 0.30);
    }
    .fc-back-body .fares-nav:hover {
        background: var(--aeroplan-sky-blue);
        box-shadow: 0 4px 16px rgba(0, 41, 85, 0.35);
    }
    .fc-back-body .fp-fee-note {
        margin-top: 6px;
        text-align: right;
        padding-right: 6px;
        font-size: 0.65rem;
        opacity: 0.7;
    }
}

/* Below 1024px: flip structure is transparent — no 3D, no back face */
@media (max-width: 1023px) {
    .fc-back {
        display: none !important;
    }
}


/* ===== Responsive ===== */
@media (max-width: 768px) {
    body { padding: 10px; }
    .flight-compact { padding: 16px; }
    .leg-airport-name { display: none; }
    .leg-airport-code { display: block; }
    .route-row { flex-direction: column; gap: 8px; }
    .endpoint { min-width: auto; }
    /* Force definite width so calc(100% - 44px) on fare-col resolves correctly
       (browsers may not resolve % flex-basis when parent uses flex:1 1 0%) */
    .fares-row { width: 100%; }
    .fare-col { flex: 0 0 calc(100% - 44px); }            /* 44px peek of next card */
    .fares-nav { display: none; }                         /* touch-swipe replaces arrows */
    .fares-scroll-wrap { margin-left: 0; margin-right: 0; } /* no nav buttons on mobile */
    /* Fade gradient — hints that more cards are to the right */
    .fares-scroll-wrap.open::after {
        content: '';
        position: absolute;
        right: 0; top: 0; bottom: 4px;
        width: 48px;
        background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 100%);
        pointer-events: none;
        transition: opacity 0.25s;
    }
    .fares-scroll-wrap.open.at-end::after { opacity: 0; }

    /* ── Fare card visual tweaks (mobile) ──
       Note: at ≤768px the only visible fare cards live inside the
       #fare-sheet bottom sheet, where the more specific .fare-sheet-fares
       rules (mobile.css) take over header layout/colors entirely — these
       just cover body padding and button sizing. */
    .fare-col.fc-step2 .fare-body { padding: 12px 12px 10px; }
    .fare-col.fc-step2 .fare-select-btn { min-height: 44px; font-size: 0.85rem; }

    /* fare-preview mobile layout handled in mobile.css */
    .search-summary { flex-direction: column; text-align: center; }
    .segment-flight-info { flex-direction: column; gap: 6px; }
    .stop-dot-label { font-size: 0.55rem; top: -14px; }
    .pax-form-grid { grid-template-columns: 1fr; }
    .review-pax-table { font-size: 0.72rem; }
    .review-pax-table th, .review-pax-table td { padding: 6px 8px; }
    .confirmation-body { padding: 20px 16px; }
    .pnr-box .pnr-code { font-size: 1.6rem; letter-spacing: 4px; }
    .nav-buttons { flex-direction: column; }
    .nav-btn { justify-content: center; }
}

/* ── Sticky Toolbar ───────────────────────────────────────── */
#toolbar-sentinel { height: 1px; }

#sticky-toolbar {
    position: sticky;
    top: 56px; /* offset for 56px booking header */
    z-index: 150;
    /* Stay in normal flow — no negative margins (those break mobile layout) */
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}
/* Pseudo-element spans full viewport width without affecting layout */
#sticky-toolbar::before {
    content: '';
    position: absolute;
    inset: 0;
    left: -100vw;
    right: -100vw;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 3px 18px rgba(0,0,0,0.09);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.2s;
    pointer-events: none;
}
#sticky-toolbar.is-stuck::before { opacity: 1; }
#sticky-toolbar.is-stuck { border-bottom-color: transparent; }

/* ── Filter Bar: single horizontal row ───────────────────── */
.filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 7px;
    padding: 9px 0;
}

/* Left pills group — grows, clips, but NO overflow-x (avoids dropdown clipping) */
.filter-pills-left {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 7px;
    flex: 1;
    min-width: 0;
}

/* Right: count + sort — never shrinks */
.filter-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding-left: 12px;
    border-left: 1px solid #e5e7eb;
    margin-left: auto;
}
.flt-count-badge {
    font-size: 0.78rem;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}

/* Filter groups */
.filter-group { position: relative; flex-shrink: 0; }

.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    background: #ffffff;
    border: 1.5px solid #d1d5db;
    border-radius: 50px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.filter-pill:hover { border-color: var(--aeroplan-blue); color: var(--aeroplan-blue); }
.filter-pill.flt-active {
    background: var(--aeroplan-blue);
    border-color: var(--aeroplan-blue);
    color: #ffffff;
}
.filter-pill.flt-active .flt-chev { transform: rotate(180deg); }
.flt-chev { font-size: 0.62rem; transition: transform 0.2s; }

.filter-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 13px;
    background: #fef2f2;
    border: 1.5px solid #fca5a5;
    border-radius: 50px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: #dc2626;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s;
}
.filter-clear-btn:hover { background: #fee2e2; }

/* ── Results count pill ── */
.flt-count-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #002955 0%, #1f74dc 100%);
    color: #fff;
    border-radius: 20px;
    padding: 6px 14px;
    white-space: nowrap;
    flex-shrink: 0;
}
.flt-count-icon {
    font-size: 0.70rem;
    opacity: 0.80;
}
.flt-count-wrap #results-count {
    font-size: 0.80rem;
    font-weight: 700;
}

/* ── Sort control ── */
.sort-wrap {
    display: flex;
    align-items: stretch;
    border: 1.5px solid #d1dae6;
    border-radius: 10px;
    flex-shrink: 0;
    /* NO overflow:hidden — would clip the dropdown panel */
}
.sort-prefix {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 9px 12px;
    background: linear-gradient(135deg, #002955 0%, #1f74dc 100%);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.01em;
    border-radius: 8px 0 0 8px;
}
/* Custom sort dropdown trigger */
.sort-select-outer {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 11px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    min-width: 110px;
    border-radius: 0 8px 8px 0;
}
.sort-current-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #002955;
    white-space: nowrap;
    flex: 1;
}
.sort-drop-chev {
    font-size: 0.65rem;
    color: #6b7280;
    transition: transform 0.18s ease;
    flex-shrink: 0;
}
.sort-select-outer.sort-drop-open .sort-drop-chev {
    transform: rotate(180deg);
}
.sort-select-outer.sort-drop-open {
    z-index: 600;
}

/* Dropdown panel */
.sort-drop {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.13);
    padding: 6px;
    z-index: 500;
    overflow: hidden;
}
.sort-select-outer.sort-drop-open .sort-drop {
    display: block;
}
.sort-opt {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 9px 13px;
    border: none;
    background: none;
    text-align: left;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
    white-space: nowrap;
}
.sort-opt:hover {
    background: #f1f5f9;
    color: #002955;
}
.sort-opt.sort-opt-active {
    background: linear-gradient(135deg, #002955 0%, #1f74dc 100%);
    color: #fff;
}
.sort-opt.sort-opt-active:hover {
    background: linear-gradient(135deg, #002955 0%, #1476e8 100%);
}

/* ── Mobile sort button ── */
.sort-btn-mobile {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1.5px solid #d1dae6;
    border-radius: 20px;
    background: #fff;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    color: #002955;
    cursor: pointer;
    white-space: nowrap;
}
.sort-btn-chev {
    font-size: 0.65rem;
    color: #6b7280;
    margin-left: 2px;
}

/* Dropdown panels — fixed position on mobile to avoid overflow clipping */
.filter-drop {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.14);
    padding: 12px 14px;
    z-index: 400;
}
.filter-drop.flt-open { display: block; }

.filter-drop-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 10px;
}
.flt-option {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 4px;
    font-size: 0.82rem;
    color: #1e293b;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.1s;
}
.flt-option:hover { background: #f8fafc; }
.flt-option input[type="checkbox"],
.flt-option input[type="radio"] {
    accent-color: var(--aeroplan-blue);
    width: 15px; height: 15px;
    cursor: pointer; flex-shrink: 0;
}
.flt-option .flt-badge {
    margin-left: auto;
    font-size: 0.7rem; font-weight: 600;
    color: #9ca3af; background: #f1f5f9;
    border-radius: 10px; padding: 1px 7px;
    flex-shrink: 0;
}
.flt-airline-code {
    font-size: 0.75rem;
    color: #9ca3af;
    font-weight: 400;
}

/* ===== Times dropdown — wider panel ===== */
.filter-drop.times-drop { min-width: 340px; }

.tdr-section-title {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--aeroplan-blue);
    margin: 0 0 10px;
    padding-bottom: 5px;
    border-bottom: 1.5px solid #e2e8f0;
}
.tdr-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 8px -14px 12px;
}
.tdr-row { margin-bottom: 2px; }
.tdr-row-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}
.tdr-label {
    font-size: 0.76rem;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 5px;
}
.tdr-label i { color: var(--aeroplan-blue); font-size: 0.7rem; }
.tdr-vals {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--aeroplan-blue);
    white-space: nowrap;
}
/* Dual-range slider track */
.tdr-range {
    position: relative;
    height: 24px;
    margin-bottom: 10px;
}
.tdr-bg {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    left: 0; right: 0;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    pointer-events: none;
}
.tdr-fill {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    height: 4px;
    background: var(--aeroplan-blue);
    border-radius: 2px;
    pointer-events: none;
}
.tdr-thumb {
    position: absolute;
    width: 100%;
    top: 50%; transform: translateY(-50%);
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: transparent;
    pointer-events: none;
    margin: 0; padding: 0;
    outline: none;
}
.tdr-thumb::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 17px; height: 17px;
    border-radius: 50%;
    background: var(--aeroplan-blue);
    pointer-events: all;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 5px rgba(0,41,85,0.35);
}
.tdr-thumb::-moz-range-thumb {
    width: 17px; height: 17px;
    border-radius: 50%;
    background: var(--aeroplan-blue);
    pointer-events: all;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 5px rgba(0,41,85,0.35);
    outline: none;
}
@media (max-width: 640px) {
    .filter-drop.times-drop {
        min-width: 0;
        width: min(340px, calc(100vw - 28px));
        left: auto; right: 0;
    }
}

/* ── Mobile (≤640px): two-row layout ─────────────────────── */
@media (max-width: 640px) {
    body { padding: 12px; }

    .filter-bar {
        flex-wrap: wrap;
        padding: 8px 0 6px;
        gap: 6px;
    }

    /* Row 1: pills (wrap freely, no scroll — avoids dropdown clipping) */
    .filter-pills-left {
        flex-wrap: wrap;
        flex: none;
        width: 100%;
        gap: 6px;
        padding-bottom: 6px;
        border-bottom: 1px solid #f0f0f0;
    }

    /* Row 2: count + sort */
    .filter-right {
        width: 100%;
        border-left: none;
        padding-left: 0;
        margin-left: 0;
        justify-content: space-between;
    }

    .filter-pill  { font-size: 0.74rem; padding: 6px 11px; }
    .filter-clear-btn { font-size: 0.74rem; padding: 6px 10px; }

    /* Mobile: hide desktop sort wrap, show mobile sort button */
    .sort-wrap        { display: none; }
    .sort-btn-mobile  { display: flex; }

    /* Dropdowns: open right on last items to avoid edge clip */
    .filter-drop { min-width: 185px; }
    .filter-group:nth-last-child(-n+2) .filter-drop {
        left: auto; right: 0;
    }
}

/* ===== Desktop Filter Sidebar ===== */

/* Results layout: sidebar + results column */
@media (min-width: 1024px) {
    /* Hide the horizontal filter pills — sidebar replaces them */
    .filter-pills-left { display: none !important; }

    #results-layout {
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }
    #filter-sidebar {
        width: 220px;
        flex-shrink: 0;
        align-self: stretch;
    }
    /* Inner wrapper is the actual sticky + scrollable panel */
    .fsb-inner {
        position: sticky;
        top: 80px;
        max-height: min(calc(100vh - 90px), 100%);
        overflow-y: auto;
        background: #fff;
        border: 1.5px solid #e2e8f0;
        border-radius: 14px;
        /* hide scrollbar but keep scroll */
        scrollbar-width: none;
    }
    .fsb-inner::-webkit-scrollbar { display: none; }
    #results-col { flex: 1; min-width: 0; padding-bottom: 60px; }
}

@media (max-width: 1023px) {
    #filter-sidebar { display: none; }
    #results-layout, #results-col { display: block; }
}


/* ===== Desktop: sort + count above results-col (non-sticky) ===== */
@media (min-width: 1024px) {
    /* Remove sticky — sort lives at top of results-col naturally */
    #sticky-toolbar {
        position: static !important;
        background: transparent !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }
    #sticky-toolbar::before { display: none; }
    #toolbar-sentinel       { display: none; }

    /* Count + sort move to the LEFT (above sidebar), not above results-col */
    .filter-bar {
        padding: 4px 0 8px 0;
    }

    /* Remove auto-push — keep count+sort left-aligned */
    .filter-right {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
    }
}

/* ===== Date Flex Bar ===== */

#date-flex-bar {
    margin-bottom: 10px;
}
.dfb-hint {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--aeroplan-blue, #002955);
    margin: 0 0 5px 0;
    text-align: center;
    letter-spacing: 0.02em;
}

.dfb-strip {
    display: flex;
    align-items: stretch;
    gap: 4px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 6px 8px;
}

.dfb-cells {
    display: flex;
    flex: 1;
    gap: 4px;
}

.dfb-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    background: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
    min-width: 0;
    line-height: 1.2;
}
.dfb-cell:hover:not(.dfb-active):not(.dfb-past) {
    background: #f0f4ff;
    border-color: #c7d7f5;
}
.dfb-cell.dfb-active {
    background: #eff6ff;
    border-color: var(--aeroplan-blue, #002955);
}
.dfb-cell.dfb-past {
    opacity: 0.38;
    cursor: default;
}

.dfb-dayname {
    font-size: 0.65rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.dfb-date {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
}
.dfb-cell.dfb-active .dfb-dayname { color: var(--aeroplan-blue, #002955); }
.dfb-cell.dfb-active .dfb-date    { color: var(--aeroplan-blue, #002955); }
.dfb-date.dfb-rt {
    font-size: 0.72rem;
}

.dfb-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #64748b;
    border-radius: 6px;
    font-size: 0.75rem;
    transition: background 0.15s, color 0.15s;
}
.dfb-arrow:hover {
    background: #f1f5f9;
    color: var(--aeroplan-blue, #002955);
}

/* Hide date flex bar on small phones */
@media (max-width: 479px) {
    #date-flex-bar { display: none; }
}

/* ── Sticky top block (header + price slider) ── */
.fsb-sticky-top {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
    border-radius: 14px 14px 0 0;
    border-bottom: 1.5px solid #e2e8f0;
}

/* ── Sidebar header ── */
.fsb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #f0f4f8;
}
.fsb-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--aeroplan-blue);
    letter-spacing: 0.01em;
}
.fsb-clear-btn {
    font-size: 0.74rem;
    font-weight: 600;
    color: #e63946;
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 5px;
    transition: background 0.15s;
}
.fsb-clear-btn:hover { background: #fff0f0; }

/* ── Price range section ── */
.fsb-price-section {
    padding: 12px 16px 14px;
}
.fsb-price-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.fsb-sec-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.fsb-price-vals {
    font-size: 0.77rem;
    color: #6b7280;
    font-weight: 500;
}
/* Price slider reuses tdr-* classes; wrap needs full width */
.fsb-price-section .tdr-range {
    margin: 0;
    width: 100%;
}

/* ── Expandable sections ── */
.fsb-section {
    border-bottom: 1px solid #f0f4f8;
}
.fsb-section:last-child { border-bottom: none; }

.fsb-sec-hd {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s;
    font-size: 0.78rem;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.fsb-sec-hd:hover { background: #f8fafc; }
.fsb-sec-hd > i {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: #fff;
    flex-shrink: 0;
    background: var(--aeroplan-blue);
}
/* Per-category gradient pills */
#fsb-sec-airlines .fsb-sec-hd > i { background: linear-gradient(135deg, #002955 0%, #1f74dc 100%); }
#fsb-sec-baggage  .fsb-sec-hd > i { background: linear-gradient(135deg, #18b239 0%, #3ad5bb 100%); }
#fsb-sec-stops    .fsb-sec-hd > i { background: linear-gradient(135deg, #3ad5bb 0%, #48abd6 100%); }
#fsb-sec-times    .fsb-sec-hd > i { background: linear-gradient(135deg, #8142c5 0%, #1f74dc 100%); }

/* Active indicator — colored left border on active sections */
.fsb-section.fsb-has-active > .fsb-sec-hd {
    border-left: 3px solid var(--aeroplan-green);
    padding-left: 13px;
}

.fsb-toggle {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #eef2f7;
    border: 1.5px solid #d1dae6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    color: var(--aeroplan-blue);
    margin-left: auto;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    font-style: normal;
}
.fsb-toggle::before { content: '+'; }
.fsb-section.fsb-open .fsb-toggle::before { content: '−'; }
.fsb-section.fsb-open .fsb-toggle {
    background: var(--aeroplan-blue);
    border-color: var(--aeroplan-blue);
    color: #fff;
}

.fsb-sec-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.22s ease;
    padding: 0 16px;
}
.fsb-section.fsb-open .fsb-sec-body {
    max-height: 600px;
    padding-bottom: 12px;
}

/* Options inside body — reuse .flt-option, .flt-badge styles */
.fsb-sec-body .flt-option {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 0;
    font-size: 0.80rem;
    cursor: pointer;
    color: #374151;
}
.fsb-sec-body .flt-option:hover { color: var(--aeroplan-blue); }
.fsb-sec-body .flt-badge {
    margin-left: auto;
    font-size: 0.70rem;
    background: #f1f5f9;
    color: #6b7280;
    border-radius: 9px;
    padding: 1px 6px;
}
/* Active checkbox/radio glow */
.fsb-sec-body input[type="checkbox"],
.fsb-sec-body input[type="radio"] {
    accent-color: var(--aeroplan-blue);
    flex-shrink: 0;
}
/* Times sliders in sidebar — tighten spacing */
.fsb-sec-body .tdr-row { margin-bottom: 10px; }
.fsb-sec-body .tdr-row:last-child { margin-bottom: 0; }
.fsb-sec-body .tdr-section-title {
    font-size: 0.73rem;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 8px 0 6px;
}
.fsb-sec-body .filter-drop-title { display: none; } /* Hide redundant sub-titles */

/* GDPR notice under passenger forms */
#step3-gdpr-notice { margin: 0.5rem 0 1.25rem; }
.gdpr-notice-text {
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.5;
    margin: 0;
    padding: 0.6rem 0.9rem;
    background: #f8fafc;
    border-left: 3px solid #48abd6;
    border-radius: 0 6px 6px 0;
}
.gdpr-notice-text .fa-shield-halved {
    color: #48abd6;
    margin-right: 0.35rem;
}