:root { --primary: var(--tp, #04107C); }

/* ── Modify Search Bar ── */
.msb-bar {
    background: #fff; border: 1.5px solid #e8eaf0; border-radius: 5px;
    padding: 14px 20px; margin-bottom: 6px;
    display: flex; align-items: center; gap: 0; flex-wrap: wrap;
    box-shadow: 0 2px 12px rgba(4,16,124,.07);
}
.msb-info { display: flex; align-items: center; gap: 10px; padding-right: 20px; flex-shrink: 0; }
.msb-info-icon {
    width: 38px; height: 38px; border-radius: 5px;
    background: #eef1fb; display: flex; align-items: center; justify-content: center;
    color: #64748b; font-size: 16px; flex-shrink: 0;
}
.msb-count { font-size: 13px; font-weight: 800; color: #16a34a; line-height: 1.2; }
.msb-count-sub { font-size: 11px; color: #94a3b8; margin-top: 1px; }
.msb-divider { width: 1.5px; background: #e2e8f0; align-self: stretch; margin: 0 18px; flex-shrink: 0; }
.msb-route { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.msb-iata { font-size: 18px; font-weight: 900; color: #0f172a; line-height: 1; }
.msb-city { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.msb-arrow-icon { color: #64748b; font-size: 14px; align-self: center; margin-bottom: 12px; }
.msb-pipe { color: #e2e8f0; font-size: 22px; font-weight: 300; margin: 0 18px; flex-shrink: 0; }
.msb-field { flex-shrink: 0; }
.msb-field-label { font-size: 11px; color: #94a3b8; font-weight: 600; }
.msb-field-val { font-size: 14px; font-weight: 800; color: #0f172a; margin-top: 2px; }
.msb-spacer { flex: 1; }
.msb-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--primary); color: #fff; border: none;
    border-radius: 5px; padding: 10px 20px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: background .2s; white-space: nowrap; flex-shrink: 0;
}
.msb-btn:hover { background: #020d5a; }
.msb-btn.open { background: #475569; }
.msb-panel { border-radius: 5px; overflow: visible; margin-bottom: 18px; display: none; }
.msb-panel.open { display: block; }

/* ── Modify Search card (new) ── */
.msb-panel-card {
    display: none;
    animation: msbCardIn .22s ease;
}
.msb-panel-card.open { display: block; }
@keyframes msbCardIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.msb-panel-card-inner {
    display: flex;
    justify-content: center;
    padding: 20px 15px 24px;
    position: relative; z-index: 1;
    width: 100%;
}
.msb-panel-card-inner .fs-card { padding-top: 20px; max-width: 1080px !important; width: 100% !important; }
/* Session timer */
.msb-timer {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
    background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 5px;
    padding: 7px 14px; margin-left: 12px; white-space: nowrap;
}
.msb-timer-digits {
    font-size: 16px; font-weight: 900; color: #0f172a;
    font-variant-numeric: tabular-nums; letter-spacing: .5px;
    display: inline; white-space: nowrap;
}
.msb-timer-digits.warn { color: #dc2626; }
.msb-timer-label { font-size: 13px; color: #94a3b8; font-weight: 700; display: inline; margin-left: 4px; }
.msb-timer-icon { color: #94a3b8; font-size: 13px; }

/* Mobile filter button — amber accent so it visually steps down from the
   navy Modify Search button while staying noticeably tappable. */
.mob-filter-btn {
    display: none; align-items: center; gap: 8px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #fff; border: none;
    border-radius: 5px; padding: 10px 18px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(245, 158, 11, .25);
    transition: filter .15s, transform .1s;
}
.mob-filter-btn:hover { filter: brightness(1.06); }
.mob-filter-btn:active { transform: translateY(1px); }

/* Sidebar drawer overlay */
.sf-overlay {
    display: none; position: fixed;
    top: 72px; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.45); z-index: 1040;
}
.sf-overlay.open { display: block; }

@media (max-width: 900px) {
    /* MSB bar — two-row layout on mobile:
         Row 1: [37 Flights] [DAC → CXB] [Session 19:49]
         Row 2: [Modify Search] [Filter]
       Achieved with flex-wrap + CSS `order` so Session beats the buttons. */
    .msb-bar {
        gap: 8px 6px; padding: 10px 14px;
        align-items: center;
        flex-wrap: wrap;
    }
    .msb-divider, .msb-pipe, .msb-field, .msb-spacer { display: none; }
    .msb-route .msb-city { display: none; }
    .msb-arrow-icon { margin-bottom: 0; align-self: center; }
    .msb-route { align-items: center; }
    .msb-route .msb-iata { line-height: 1.2; }
    .msb-info, .msb-route { align-self: center; }

    /* Re-order without touching HTML:
         Row 1: msb-info (1), msb-route (2)
         Row 2: msb-btn (4), mob-filter-btn (5), msb-timer (6)
       !important guards against body.td-public-layout overrides. */
    .msb-info        { order: 1 !important; }
    .msb-route       { order: 2 !important; }
    .msb-btn         { order: 4 !important; }
    .mob-filter-btn  { order: 5 !important; }
    /* Session timer sits right next to Filter (no margin-left:auto) so it
       stays on row 2 even on a 360px viewport. Compact tile, no label text. */
    .msb-timer {
        order: 6 !important;
        margin-left: 0 !important;
        display: inline-flex !important;
        padding: 6px 10px !important;
        gap: 4px !important;
    }
    /* Hide the "Session" word — clock icon + digits are enough on mobile. */
    .msb-timer-label { display: none !important; }
    .msb-timer-digits { font-size: 13px !important; }
    .msb-timer-icon   { font-size: 12px !important; }

    /* Force a flex line-break between the info row (order ≤2) and the action
       row (order ≥4). msb-bar::after is a pseudo-child of the flex container;
       width:100% + order:3 makes it the first item in the second visual row. */
    .msb-bar::after {
        content: "" !important;
        flex-basis: 100% !important;
        height: 0 !important;
        order: 3 !important;
    }
    .msb-btn:first-of-type { margin-left: 0; }

    /* Compact buttons so the action row never overflows. */
    .msb-btn { padding: 7px 12px !important; font-size: 12px !important; }
    .mob-filter-btn { padding: 7px 12px !important; font-size: 12px !important; }

    /* Two-col layout — sidebar hidden by default. res-main gets a tiny
       horizontal padding so card edges line up with the msb-bar's inner
       padded edge (10–12px) instead of jutting out by a couple of pixels. */
    .res-layout { flex-direction: column; gap: 0; }
    .res-main { width: 100%; padding: 0 4px; }
    /* Each flight card sits flush within the padded res-main — same left/right
       inset as the sticky header above, so the two stacks read as identical. */
    .fl2-card { margin-left: 0; margin-right: 0; }
    /* Skeleton sidebar — never show on mobile. The real sidebar slides in
       on Filter tap (drawer); the skeleton was a desktop-only loading state
       and was rendering as a fat block above the cards on phones. */
    #resSidebarSkel { display: none !important; }

    /* Sidebar slide-in drawer — narrower so it doesn't dominate the
       viewport on a phone, plus a hint of right-side breathing room. */
    .res-sidebar {
        position: fixed !important;
        top: 72px !important; bottom: 0; left: 0;
        z-index: 1060;
        width: 75%;
        max-width: 260px;
        max-height: calc(100vh - 72px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        background: #fff;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 4px 0 24px rgba(0,0,0,.18);
        padding-bottom: 20px;
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
    }
    .res-sidebar::-webkit-scrollbar { display: none; }
    .res-sidebar.open { transform: translateX(0) !important; }
    .sf-overlay { top: 72px; z-index: 1055; }
    .sf-card { border-radius: 0; border: none; }
    .mob-sf-close { display: flex !important; }

    /* Filter button — inline in the sticky header next to Modify Search.
       Matches the Modify Search button height on mobile (same padding + font). */
    .mob-filter-btn {
        display: inline-flex;
        padding: 8px 14px;
        font-size: 12px;
        border-radius: 5px;
    }

    /* Sort bar — compact on mobile: "CHEAPEST (1h 5m)" on one line, price below.
       Using CSS Grid with named areas so the order is reliable across browsers. */
    .sort-bar { flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
    .sort-tab {
        min-width: 0; flex: 1; padding: 5px 10px;
        display: grid !important;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "label sub"
            "val   val";
        column-gap: 5px; row-gap: 0;
        align-items: baseline;
    }
    .sort-tab-label { grid-area: label; font-size: 9px; margin: 0; }
    .sort-tab-sub   { grid-area: sub;   font-size: 9px; margin: 0; color: #94a3b8; }
    .sort-tab-sub::before { content: "("; }
    .sort-tab-sub::after  { content: ")"; }
    .sort-tab-val   { grid-area: val;   font-size: 13px; margin: 0; }
    .sort-spacer { display: none; }
    .day-nav { width: 100%; margin-left: 0; }
    .day-btn { flex: 1; justify-content: center; }

    /* Airline bar — owner directive 2026-08-24 ('mobile eta niye aso /
       compact design korba'). Kept visible on mobile but rendered in a
       COMPACT horizontal-scroll pill strip so it doesn't dominate the
       vertical space. Big desktop version is untouched (definition in
       the main sheet at line 339). */
    .airline-bar {
        display: flex !important;
        overflow-x: auto; overflow-y: hidden;
        scrollbar-width: none;
        gap: 0;
        padding: 6px 8px;
        margin: 0 0 8px;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 5px;
        white-space: nowrap;
    }
    .airline-bar .ab-item {
        flex-direction: row;
        gap: 6px;
        padding: 4px 8px;
        border-radius: 5px;
        border: 1px solid transparent;
        flex-shrink: 0;
        min-width: 0;
    }
    .airline-bar .ab-logo,
    .airline-bar .ab-logo-fallback {
        width: 22px; height: 22px; padding: 2px;
        margin: 0;
    }
    .airline-bar .ab-code-label {
        font-size: 10px; font-weight: 700; color: #64748b;
        max-width: 60px; overflow: hidden; text-overflow: ellipsis;
        margin: 0;
    }
    .airline-bar .ab-price {
        font-size: 11px; font-weight: 800; color: #0f172a;
        margin-left: 2px;
    }
    .airline-bar .ab-sep {
        width: 1px; margin: 4px 2px; background: #e2e8f0;
        align-self: stretch;
    }
    .airline-bar::-webkit-scrollbar { display: none; }

    /* Flight card — wrap rows using order */
    .fl2-top { flex-wrap: wrap; padding: 12px 14px; gap: 10px; }
    .fl2-airline { width: 100%; order: 1; flex-direction: row; align-items: center; gap: 10px; }
    .fl2-airline-name, .fl2-flight-num { text-align: left; }
    .fl2-route { width: 100%; order: 2; }
    .fl2-footer { gap: 6px 8px; padding: 8px 14px; }
    /* Keep Refundable + Flight Details + View Prices on one row.
       Force a flex line-break after the info badges so the action
       trio doesn't get pushed onto separate lines on narrow mobiles. */
    .fl2-footer .fl2-info-badge,
    .fl2-footer .fl2-seats-warn { order: 1; }
    .fl2-footer::before {
        content: ''; flex-basis: 100%; height: 0; order: 2;
    }
    /* Owner 2026-09-21: refund tick + copy stay on the first row, next
       to the seats-left chip; only View Prices / Flight Details wrap. */
    .fl2-footer .fl2-refund        { order: 1; }
    .fl2-footer .fl2-copy-btn      { order: 1; }
    .fl2-footer .fl2-src-tag       { order: 1; }
    /* View Prices sits immediately left of Flight Details (owner 2026-09-21). */
    .fl2-footer .fl2-viewprices-btn{ order: 5; margin-left: auto; }
    /* Owner 2026-09-28: 'mobile e 7kg sorao, ar eta 2nd line e jabe'. The
       cabin allowance made the first row overflow, which pushed the copy
       button onto its own line and the actions onto a third. Without it the
       badges fit one row and View Prices / Flight Details take the second,
       which is where the owner wants them. */
    .fl2-footer .fl2-bag-cabin { display: none; }
    .fl2-footer .fl2-details-btn   { order: 6; margin-left: auto; }
    .fl2-footer .fl2-viewprices-btn ~ .fl2-details-btn { margin-left: 8px; }
    .fl2-footer .fl2-refund        { font-size: 10px; padding: 2px 6px; }
    .fl2-footer .fl2-details-btn   { font-size: 11px; }
    .fl2-footer .fl2-viewprices-btn{ font-size: 11px; padding: 4px 10px; }

    /* Bottom row: price left + book right */
    .fl2-bottom-row {
        width: 100%; order: 3;
        display: flex; align-items: center; gap: 10px;
        background: #f8fafc;
        border-top: 1.5px solid #e8eaf0;
        padding: 9px 14px;
        margin: 0 -14px; width: calc(100% + 28px);
    }
    .fl2-price-col { flex-shrink: 0; text-align: left; min-width: 0; max-width: 50%; overflow: hidden; }
    .fl2-price     { font-size: 10px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; }
    .fl2-orig-price { font-size: 12px; }
    .fl2-pax-label  { font-size: 9px; margin-top: 1px; }
    .fl2-breakdown  { font-size: 10px; margin-top: 3px; }
    .fl2-book-btn   { flex: 1; justify-content: center; padding: 9px 12px; font-size: 12px; white-space: nowrap; border-radius: 5px; }
}

/* Markup badge */
.markup-strip {
    background: linear-gradient(135deg, #0ea5e9, #06b6d4);
    color: #fff; border-radius: 5px; padding: 10px 18px;
    font-size: 13px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
}

/* ── Two-column layout ── */
.res-layout { display: flex; gap: 14px; align-items: flex-start; }
.res-sidebar {
    width: 248px; flex-shrink: 0;
    position: sticky; top: 70px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    scrollbar-width: none;
}
.res-sidebar::-webkit-scrollbar { display: none; }
.res-main { flex: 1; min-width: 0; }

/* ── Sidebar card ── */
.sf-card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 5px; overflow: hidden; }
.sf-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px; background: #f8fafc; border-bottom: 1px solid #e2e8f0;
}
.sf-title { font-size: 13px; font-weight: 800; color: #0f172a; display: flex; align-items: center; gap: 7px; }
.sf-title i { color: var(--primary); }
.sf-reset { font-size: 12px; color: #f97316; font-weight: 700; cursor: pointer; border: none; background: none; padding: 0; }
.sf-section { padding: 13px 16px; border-bottom: 1px solid #f1f5f9; }
.sf-section:last-child { border-bottom: none; }
.sf-section-title { font-size: 10px; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 10px; }

.stop-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.stop-chip {
    border: 1.5px solid #e2e8f0; border-radius: 5px; padding: 5px 11px;
    font-size: 12px; font-weight: 700; color: #64748b; cursor: pointer;
    transition: all .15s; background: #fff; white-space: nowrap; user-select: none;
}
.stop-chip.active { border-color: var(--primary); background: var(--primary); color: #fff; }

.al-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; }
.al-item input[type=checkbox] { accent-color: var(--primary); width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; }
.al-code {
    width: 28px; height: 28px; border-radius: 5px;
    background: #eef1fb; display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; color: var(--primary); flex-shrink: 0;
}
.al-name { font-size: 11px; font-weight: 600; color: #334155; flex: 1; line-height: 1.3; }
.al-price { font-size: 11px; font-weight: 800; color: #0f172a; white-space: nowrap; }

.ref-item {
    display: flex; align-items: center; gap: 8px; padding: 5px 0;
    cursor: pointer; font-size: 12px; font-weight: 600; color: #334155;
}
.ref-item input { accent-color: var(--primary); width: 14px; height: 14px; cursor: pointer; }

/* Dep/Arr toggle */
.da-toggle { display: flex; border-radius: 5px; overflow: hidden; border: 1.5px solid #e2e8f0; margin-bottom: 12px; }
.da-tab {
    flex: 1; padding: 7px 0; text-align: center; font-size: 12px; font-weight: 700;
    color: #64748b; cursor: pointer; background: #fff; border: none; transition: all .15s;
}
.da-tab.active { background: var(--primary); color: #fff; }

/* Time grid */
.time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 4px; }
.time-chip {
    border: 1.5px solid #e2e8f0; border-radius: 5px; padding: 6px 4px;
    font-size: 11px; font-weight: 700; color: #64748b; cursor: pointer;
    text-align: center; transition: all .15s; background: #fff; line-height: 1.3; user-select: none;
}
.time-chip.active { border-color: var(--primary); background: #eef1fb; color: var(--primary); }
.sf-sub-title { font-size: 11px; font-weight: 700; color: #334155; margin: 10px 0 7px; }

/* ── Airline price bar ── */
.airline-bar {
    background: #fff; border: 1.5px solid #e2e8f0; border-radius: 5px;
    padding: 10px 14px; margin-bottom: 10px;
    display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none;
    cursor: grab; touch-action: pan-x; -webkit-overflow-scrolling: touch;
}
.airline-bar::-webkit-scrollbar { display: none; }
.ab-item {
    display: flex; flex-direction: column; align-items: center;
    padding: 7px 14px; border-radius: 5px; cursor: pointer;
    transition: background .15s; flex-shrink: 0; min-width: 88px;
    border: 1.5px solid transparent; user-select: none;
}
.ab-item:hover { background: #f8fafc; }
.ab-item.active { background: #f0f3ff; border-color: var(--primary); }
.ab-logo {
    width: 42px; height: 42px; border-radius: 5px;
    object-fit: contain; background: #f1f5f9;
    padding: 4px; margin-bottom: 4px;
}
.ab-logo-fallback {
    width: 42px; height: 42px; border-radius: 5px; background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 900; margin-bottom: 4px; letter-spacing: .5px;
}
.ab-code-label { font-size: 9px; font-weight: 700; color: #64748b; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70px; }
.ab-price { font-size: 12px; font-weight: 800; color: #0f172a; }
.ab-sep { width: 1px; background: #e8eaf0; align-self: stretch; margin: 4px 6px; flex-shrink: 0; }

/* ── Sort bar ── */
.sort-bar { display: flex; align-items: stretch; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.sort-tab {
    display: flex; flex-direction: column; text-align: left;
    border: 1.5px solid #e2e8f0; border-radius: 5px;
    padding: 10px 18px; cursor: pointer; background: #fff;
    transition: all .15s; min-width: 145px;
}
.sort-tab.active { border-color: var(--primary); background: #f0f3ff; }
.sort-tab-label { font-size: 10px; color: #94a3b8; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; }
.sort-tab.active .sort-tab-label { color: var(--primary); }
.sort-tab-val { font-size: 15px; font-weight: 900; color: #0f172a; margin-top: 3px; line-height: 1; }
.sort-tab-sub { font-size: 11px; color: #64748b; margin-top: 2px; }
.sort-spacer { flex: 1; }
.day-nav { display: flex; gap: 6px; align-self: center; margin-left: auto; }
.day-btn {
    display: flex; align-items: center; gap: 6px;
    border: 1.5px solid #e2e8f0; border-radius: 5px;
    padding: 8px 14px; background: #fff; cursor: pointer;
    font-size: 12px; font-weight: 700; color: #334155;
    transition: all .15s; white-space: nowrap;
}
.day-btn:hover { border-color: var(--primary); color: var(--primary); background: #f0f3ff; }

.res-count2 {
    font-size: 13px; font-weight: 600; color: #64748b;
    margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.res-count2 strong { color: var(--primary); }

/* ── Flight card v2 ── */
.fl2-card {
    background: #fff; border: 1.5px solid #e2e8f0; border-radius: 5px;
    margin-bottom: 10px; overflow: hidden; transition: box-shadow .2s, border-color .2s;
}
.fl2-card:hover { box-shadow: 0 6px 28px rgba(4,16,124,.10); border-color: #c7d0f5; }

.fl2-top { padding: 16px 20px; display: flex; align-items: center; gap: 16px; }

.fl2-airline { display: flex; flex-direction: column; align-items: center; width: 76px; flex-shrink: 0; gap: 3px; }
.fl2-logo-img { width: 52px; height: 52px; border-radius: 5px; object-fit: contain; background: #f1f5f9; padding: 5px; }
.fl2-badge-code {
    background: var(--primary); color: #fff;
    font-size: 13px; font-weight: 900;
    width: 44px; height: 44px; border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
}
.fl2-airline-name { font-size: 10px; color: #94a3b8; text-align: center; line-height: 1.3; }
.fl2-flight-num { font-size: 11px; font-weight: 700; color: #64748b; }

/* Layover duration: the outbound and the return side by side in one
   section (owner 2026-09-28: 'upor niche na pashapashi rakho'). */
.sf-laydur { display: flex; gap: 10px; align-items: flex-start; }
.sf-laydur-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sf-laydur-head {
    font-size: 9px; font-weight: 800; letter-spacing: .3px;
    text-transform: uppercase; color: #94a3b8; line-height: 1.3;
}
.sf-laydur .ref-item { font-size: 11px; gap: 5px; }

/* Split-PNR cross-carrier airline column: the two carriers stacked, each
   mark with its flight number underneath (owner 2026-09-28: 'flight number
   logo er niche dao, pashe na diye' then, seeing them side by side,
   'vertical design koro'). Stacked reads down the card the same way the
   outbound and return rows beside it do. */
.fl2-airline-split {
    width: 76px; gap: 3px;
    flex-direction: column; align-items: center; justify-content: center;
}
.fl2-airline-split .fl2-airline-row {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: #f8fafc; padding: 4px 6px; border-radius: 6px;
    border: 1px solid #e2e8f0;
}
.fl2-airline-split .fl2-split-logo {
    width: 30px; height: 30px; border-radius: 4px;
    object-fit: contain; background: #f1f5f9; padding: 3px;
}
.fl2-airline-split .fl2-airline-code {
    font-size: 10px; font-weight: 800; color: #334155; line-height: 1;
    white-space: nowrap;
}
.fl2-airline-split .fl2-airline-plus {
    color: #cbd5e1; font-size: 10px; line-height: 1;
}
.fl2-airline-split .fl2-tags { margin-top: 1px; }
.fl2-airline-split .fl2-split-badge {
    margin-top: 3px; font-size: 9px; font-weight: 800;
    background: #fef3c7; color: #92400e;
    padding: 3px 6px; border-radius: 5px; text-align: center;
    border: 1px solid #fde68a;
}
/* Owner 2026-09-28: 'mobile e ob+ib design nosto hoye jasse' and 'mobile
   logo er jaiga komao'. The phone block near the top of this file turns
   .fl2-airline into a full-width row, but .fl2-airline-split sits further
   down the file at the same specificity, so its width won — two carriers,
   a plus and the tags were all being squeezed into 92px. These rules come
   after it, so the split column gets the full row and a smaller mark. */
@media (max-width: 900px) {
    /* Owner 2026-09-28: 'eta kono design?'. Stacked is right in the narrow
       desktop column, but the phone gives the airline block a full-width
       bar of its own — two boxes stacked at its left edge left the rest of
       the bar empty. Across the bar, each mark beside its number, is what
       the single-carrier card does on this breakpoint too. */
    .fl2-airline.fl2-airline-split {
        width: 100%; flex-direction: row; align-items: center;
        justify-content: flex-start; gap: 6px;
    }
    .fl2-airline-split .fl2-airline-row {
        flex-direction: row; gap: 6px; padding: 3px 8px;
    }
    .fl2-airline-split .fl2-split-logo { width: 24px; height: 24px; padding: 2px; }
    .fl2-airline-split .fl2-airline-plus { margin: 0 1px; }
    .fl2-logo-img { width: 38px; height: 38px; padding: 4px; }
}

.fl2-tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; margin-top: 2px; }
.fl2-tag { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; }
.fl2-tag.ndc { background: #fef9c3; color: #a16207; }

.fl2-route { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.fl2-point { text-align: center; flex-shrink: 0; }
.fl2-iata { font-size: 20px; font-weight: 900; color: #0f172a; line-height: 1; }
.fl2-city { font-size: 10px; color: #94a3b8; margin-top: 2px; white-space: nowrap; }
.fl2-time { font-size: 16px; font-weight: 800; color: #0f172a; margin-top: 5px; }
.fl2-date { font-size: 11px; color: #64748b; }
.fl2-path { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.fl2-dur { font-size: 11px; font-weight: 700; color: #64748b; }
.fl2-line {
    width: 100%; height: 2px; background: linear-gradient(90deg, var(--primary), #f97316);
    border-radius: 5px; position: relative;
}
.fl2-line::before, .fl2-line::after {
    content: ''; position: absolute; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%;
}
.fl2-line::before { left: 0; background: var(--primary); }
.fl2-line::after  { right: 0; background: #f97316; }
.fl2-stops-txt { font-size: 11px; font-weight: 700; }
.fl2-stops-txt.direct { color: #16a34a; }
.fl2-stops-txt.stopped { color: #f97316; }
/* Mobile: drop the inline transit breakdown ("· DOH 2h 10m, BOS 2h 31m");
   the agent can tap Flight Details for the full segment view. */
@media (max-width: 767px) {
    .fl2-transit-extra { display: none; }
}

.fl2-price-col { text-align: right; flex-shrink: 0; min-width: 158px; }
.fl2-price { font-size: 22px; font-weight: 900; color: var(--primary); line-height: 1; }
.fl2-orig-price {
    font-size: 16px;
    font-weight: 700;
    color: #475569;
    text-decoration: line-through;
    text-decoration-color: #64748b;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: none;
    margin-bottom: 3px;
    line-height: 1.15;
}
.fl2-pax-label { font-size: 11px; color: #94a3b8; margin-top: 1px; }
.fl2-breakdown {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--primary); font-weight: 700; cursor: pointer; margin-top: 5px;
}
.fl2-breakdown:hover { text-decoration: underline; }

.fl2-book-btn {
    display: flex; align-items: center; gap: 7px;
    background: var(--primary); color: #fff; border: none; border-radius: 5px;
    padding: 11px 20px; font-size: 13px; font-weight: 800;
    cursor: pointer; transition: all .2s; white-space: nowrap; flex-shrink: 0;
}
.fl2-book-btn:hover { background: #020d5a; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(4,16,124,.3); }

/* Instant-Issue CTA variant — LCC carriers (IndiGo etc.) where
   hold_possible=false. Amber gradient + lightning bolt so the agent
   immediately sees this booking ticketed straight away (no hold). */
.fl2-book-btn--instant {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 4px 14px rgba(217,119,6,.3);
}
.fl2-book-btn--instant:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    box-shadow: 0 6px 18px rgba(217,119,6,.4);
}

/* Partial-payment tag under Book Flight -- shown only when BDFare's
   OfferPrice confirms partial on the fare (flights.partial-check).
   Button + tag stack in a column; the tag is small, two lines. */
.fl2-book-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
}
.fl2-partial-tag {
    margin-top: 4px;
    text-align: center;
    line-height: 1.25;
    font-size: 10px;
    color: #15803d;
}
.fl2-partial-tag .fl2-partial-lbl {
    display: block;
    font-weight: 600;
    color: #64748b;
}
.fl2-partial-tag .fl2-partial-amt {
    display: block;
    font-weight: 800;
    color: #15803d;
}
@media (max-width: 900px) {
    .fl2-book-stack { flex: 1; }
}


.fl2-copy-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 22px; flex-shrink: 0;
    background: transparent; border: 1px solid #e2e8f0; border-radius: 5px;
    color: #94a3b8; font-size: 11px; cursor: pointer;
    transition: all .2s;
}
.fl2-copy-btn:hover { border-color: #a5b4fc; color: var(--tp, #04107C); background: #f0f4ff; }
.fl2-copy-btn.copied { border-color: #6ee7b7; color: #059669; background: #f0fdf4; }
/* Owner directive 2026-08-24 ('copy to clipboard ta mobile thakbe').
   Keep the footer copy button visible on mobile too. The small
   inline variant (fl2-copy-mob) next to Direct/Stops text stays
   permanently hidden so only ONE copy control shows per card. */
.fl2-copy-mob { display: none !important; }

.fl2-footer {
    background: #f8fafc; border-top: 1px solid #e2e8f0;
    padding: 8px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.fl2-info-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600; color: #475569;
}
.fl2-info-badge i { color: var(--primary); font-size: 12px; }
/* Owner directive 2026-09-14 ('refundable hole only thik icon / non
   refundable hole only cross icon'): pill is icon-only, so recentre
   the box + size it to fit a single icon. Tooltip carries the full
   label. */
.fl2-refund { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border-radius: 5px; font-size: 12px; line-height: 1; }
.fl2-refund i { font-size: 13px; line-height: 1; }
.fl2-refund.yes { background: #f0fdf4; color: #16a34a; }
.fl2-refund.no  { background: #fef2f2; color: #dc2626; }
.fl2-seats-warn { font-size: 11px; font-weight: 700; color: #dc2626; }

/* Instant-Issue badge — LCC carriers (IndiGo etc.) where supplier
   reports hold_possible=false. Bold lightning bolt + amber pill so it
   reads as an action-required indicator, not just info. */
.fl2-instant-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 800;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    padding: 3px 9px; border-radius: 5px;
    letter-spacing: .3px; text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(217, 119, 6, .25);
    cursor: help;
}
.fl2-instant-badge i { color: #fff; font-size: 11px; }
.fl2-details-btn {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 700; color: #64748b;
    cursor: pointer; border: none; background: none;
    margin-left: auto; padding: 0; transition: color .15s;
}
.fl2-details-btn:hover { color: var(--primary); }

/* TPF view-prices panel reuses the existing .usp-panel / .usp-table CSS —
   the .tpf-vp-panel class is just a hook for the JS toggle. No extra
   styling needed; the panel renders identically to BDFare's upsell. */

/* Multi-leg route (roundtrip / multicity combined offer)
   Owner report 2026-09-15 ('search result e align gula thik nei
   horizontal bar sob same alighe thakbe'): the outbound row's
   arrival city ('Guangzhou (Huadu)') is much wider than the
   inbound row's arrival ('Dhaka'), so with plain flex the left
   and right point columns slid around and the timeline bar
   between them ended at a different x on each row. Lock every
   .fl2-point to a fixed 92 px width and align the left one flush
   left, the right one flush right; the middle .fl2-path takes
   the remaining space and every row's timeline bar starts and
   ends at exactly the same x. */
.fl2-route.fl2-multi-leg { flex-direction: column; align-items: stretch; gap: 0; }
.fl2-leg-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.fl2-leg-row .fl2-point {
    width: 92px; flex-shrink: 0;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.fl2-leg-row .fl2-point:first-child { text-align: left; }
.fl2-leg-row .fl2-point:last-child  { text-align: right; }
.fl2-leg-row .fl2-point .fl2-city { overflow: hidden; text-overflow: ellipsis; }
.fl2-leg-row .fl2-iata  { font-size: 16px; }
.fl2-leg-row .fl2-time  { font-size: 13px; }
.fl2-leg-row .fl2-date  { font-size: 10px; }
.fl2-leg-divider {
    display: flex; align-items: center; gap: 8px;
    margin: 6px 0; color: var(--tp, #04107C); font-size: 10px; font-weight: 800;
    letter-spacing: .4px; text-transform: uppercase;
}
.fl2-leg-divider::before, .fl2-leg-divider::after {
    content: ''; flex: 1; height: 1px; background: #e2e8f0;
}

/* Desktop: bottom-row sits inline in the flex row */
.fl2-bottom-row { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.mob-sf-close { display: none; }

/* No visible (after filter) */
.no-filter-msg {
    text-align: center; padding: 36px 20px;
    background: #fff; border: 1.5px solid #e2e8f0; border-radius: 5px;
}
.no-filter-msg i { font-size: 38px; color: #e2e8f0; margin-bottom: 10px; display: block; }
.no-filter-msg p { font-size: 14px; color: #94a3b8; margin: 0; }

/* No results (empty API) */
.nf-wrap { display: flex; justify-content: center; padding: 32px 16px 48px; }
.nf-card { background: #fff; border-radius: 5px; box-shadow: 0 8px 40px rgba(4,16,124,.10); border: 1.5px solid #e8eaf6; max-width: 520px; width: 100%; overflow: hidden; }
.nf-top {
    background: linear-gradient(135deg, var(--primary) 0%, #1a2fa8 60%, #f97316 140%);
    padding: 36px 32px 28px; text-align: center; position: relative; overflow: hidden;
}
.nf-plane-ring {
    width: 88px; height: 88px; border-radius: 50%;
    background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.22);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px; position: relative; z-index: 1;
}
.nf-plane-ring i { font-size: 38px; color: #fff; transform: rotate(-40deg); }
.nf-top-title { font-size: 22px; font-weight: 900; color: #fff; margin: 0 0 6px; position: relative; z-index: 1; }
.nf-top-sub { font-size: 13px; color: rgba(255,255,255,.75); margin: 0; position: relative; z-index: 1; }
.nf-route-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
    border-radius: 5px; padding: 5px 16px; margin-top: 14px; position: relative; z-index: 1;
}
.nf-route-pill span { font-size: 15px; font-weight: 800; color: #fff; letter-spacing: .5px; }
.nf-route-pill i { color: rgba(255,255,255,.8); font-size: 13px; }
.nf-route-date { font-size: 11px; color: rgba(255,255,255,.65); font-weight: 600; padding-left: 4px; border-left: 1px solid rgba(255,255,255,.3); margin-left: 4px; }
.nf-body { padding: 22px 28px 28px; }
.nf-btn {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, var(--primary), #f97316);
    color: #fff; border: none; border-radius: 5px; padding: 13px 20px;
    font-size: 15px; font-weight: 800; cursor: pointer; transition: all .2s;
    box-shadow: 0 4px 18px rgba(4,16,124,.25);
}
.nf-btn:hover { opacity: .92; transform: translateY(-1px); }

@media (max-width: 900px) {
    .res-layout { flex-direction: column; }
    .res-sidebar { width: 100%; position: static; max-height: none; }
    .fl2-top { flex-wrap: wrap; gap: 12px; }
    .fl2-price-col { text-align: left; min-width: auto; }
    .fl2-book-btn { width: 100%; justify-content: center; }
}

/* ── Two-one-way journey headers ── */
.fl2-journey-header {
    display: flex; align-items: center; gap: 8px;
    background: var(--primary); color: #fff;
    border-radius: 5px; padding: 9px 16px; margin-bottom: 10px; margin-top: 6px;
    font-size: 13px; font-weight: 800;
}
.fl2-jh-route { background: rgba(255,255,255,.15); border-radius: 5px; padding: 2px 8px; font-size: 12px; font-weight: 800; }
.fl2-jh-date  { color: rgba(255,255,255,.75); font-size: 12px; font-weight: 600; margin-left: 4px; }
@media (max-width: 575px) {
    .fl2-journey-header { flex-wrap: wrap; gap: 5px; }
    .fl2-journey-header button[onclick="backToOutbound()"] { margin-left: 0; width: 100%; justify-content: center; padding: 6px 0; }
}

/* ── Flight Details Panel ── */
.fdp { border-top: 2px solid #e8eaf0; background: #f8f9fc; }
.fdp-tabs {
    display: flex; border-bottom: 1px solid #e2e8f0; background: #fff;
    overflow-x: auto; scrollbar-width: none;
}
.fdp-tabs::-webkit-scrollbar { display: none; }
.fdp-tab {
    flex-shrink: 0; padding: 11px 20px; font-size: 12px; font-weight: 700;
    color: #64748b; border: none; background: none; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color .15s, border-color .15s; white-space: nowrap; display: flex; align-items: center; gap: 5px;
}
.fdp-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.fdp-tab:hover:not(.active) { color: var(--primary); }
.fdp-body { padding: 18px 20px; }
.fdp-pane { animation: fdpFade .15s ease; }
@keyframes fdpFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* Segment timeline */
.fdp-seg {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 14px 0;
    /* The dashed separator between segments duplicated the new .fdp-layover
       horizontal-rule divider directly below it, producing two stacked
       horizontal lines. The divider already breaks segments visually. */
}
/* Owner report 2026-09-15 ('ekhane o same vabe align same thakte
   hobe' + 'flight deatils e airport name thakte hobe' + 'evabe
   na diye line break dao'): fixed 120 px wide point column so
   each segment's IATA / city / airport / time / date stack sits
   at the same x. Every line except the airport nameelly stays
   one-line-nowrap-ellipsis (city, time, date are short by
   nature); the airport name is allowed to WRAP onto two or three
   lines so no ellipsis clips it. */
.fdp-seg-point { width: 120px; flex-shrink: 0; overflow: hidden; align-self: flex-start; }
.fdp-seg-point:first-child { text-align: left; }
.fdp-seg-point:last-child  { text-align: right; }
.fdp-seg-iata,
.fdp-seg-city,
.fdp-seg-time,
.fdp-seg-date {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fdp-seg-airport {
    font-size: 10px; color: #64748b; font-weight: 600;
    margin-top: 3px; margin-bottom: 3px;
    line-height: 1.35;
    white-space: normal;      /* allow wrap */
    word-break: break-word;
    overflow: visible;
    text-overflow: clip;
}
.fdp-seg-iata { font-size: 20px; font-weight: 900; color: #0f172a; line-height: 1; }
.fdp-seg-city { font-size: 10px; color: #94a3b8; margin-top: 2px; }
.fdp-seg-time { font-size: 15px; font-weight: 800; color: #0f172a; margin-top: 5px; line-height: 1; }
.fdp-seg-date { font-size: 11px; color: #64748b; margin-top: 2px; }
.fdp-seg-mid { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.fdp-seg-airline { display: flex; align-items: center; gap: 8px; }
.fdp-seg-logo { width: 30px; height: 30px; border-radius: 5px; object-fit: contain; background: #f1f5f9; padding: 3px; flex-shrink: 0; }
.fdp-seg-logo-fb { width: 30px; height: 30px; border-radius: 5px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fdp-seg-airline-info { display: flex; flex-direction: column; gap: 1px; }
.fdp-seg-airline-name { font-size: 12px; font-weight: 800; color: #0f172a; white-space: nowrap; }
.fdp-seg-fn { font-size: 11px; font-weight: 700; color: var(--primary); }
.fdp-seg-line {
    width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--primary), #f97316);
    border-radius: 5px; position: relative;
}
.fdp-seg-line::before, .fdp-seg-line::after {
    content: ''; position: absolute; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%;
}
.fdp-seg-line::before { left: 0; background: var(--primary); }
.fdp-seg-line::after  { right: 0; background: #f97316; }
.fdp-seg-info { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.fdp-seg-dur { font-size: 11px; font-weight: 700; color: #64748b; display: flex; align-items: center; gap: 3px; }
.fdp-seg-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 5px;
    background: #eef1fb; color: var(--primary);
}
.fdp-seg-bag { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
/* Owner 2026-09-28: 'class baggage niche ek line e koro'. Duration, class,
   cabin and baggage used to live inside the 120px middle column, which on a
   phone left each of them a line of its own. They take one line across the
   foot of the segment instead, while the mark and the airline name keep the
   middle column above the bar ('logo and airlines name ager jaigai nao'). */
.fdp-seg-meta {
    flex-basis: 100%; display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center; gap: 6px;
}
/* The duration sits directly under the rule it measures. */
.fdp-seg-mid > .fdp-seg-dur { margin-top: 2px; justify-content: center; white-space: nowrap; }
.fdp-seg-meta .fdp-seg-badge,
.fdp-seg-meta .fdp-bag-item { white-space: nowrap; flex: none; }
.fdp-bag-item {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; color: #475569;
    background: #f1f5f9; border-radius: 5px; padding: 2px 8px;
}
.fdp-bag-item i { color: var(--primary); font-size: 11px; }
/* Owner 2026-09-28 (screenshot): cabin class and baggage each took a line of
   their own on a phone, so one segment ran four rows deep. They belong on the
   same line as the duration — the icons already say which bag is which, so
   the 'Cabin:' / 'Check-in:' words drop away when the room runs out. */
@media (max-width: 767px) {
    .fdp-seg-mid { gap: 4px; }
    .fdp-seg-logo, .fdp-seg-logo-fb { width: 24px; height: 24px; }
    .fdp-seg-airline { gap: 6px; }
    .fdp-seg-airline-name { font-size: 11px; }
    /* Owner 2026-09-28: 'mobile e to airport er name likhar dorkar nai'.
       The terminal name was taking two lines under each city and leaving
       the middle column too narrow for anything. The IATA code and the
       city above it already name the airport. */
    .fdp-seg-airport { display: none; }
    /* nowrap was the wrong lever here: it stopped the chips wrapping onto
       a second line by squeezing each one until its own text broke, so
       '0h 55m' and '20 Kg' came out stacked inside their boxes. The chips
       keep their text on one line; if they don't all fit, they wrap. */
    .fdp-seg { gap: 8px; row-gap: 8px; }
    .fdp-seg-point { width: auto; flex: 1 1 0; min-width: 0; }
    /* Owner 2026-09-28: 'design sob data nosto hosse'. The point column is
       narrower here than the 120px it was built for, and the city was still
       set to clip to one line — 'Chattogram (Chittagong)' came out as
       'Chattogram (Chitt...'. Nothing in this panel should be truncated on
       a phone; the city wraps instead. */
    .fdp-seg-city { white-space: normal; overflow: visible; text-overflow: clip; }
    /* Owner 2026-09-28: 'thik koro nosto hoye gese'. The airline name is set
       to one line and never to break, so 'Biman Bangladesh Airlines' ran
       straight out of the middle column and printed over the arrival city
       next to it. On a phone it wraps and stays inside its column. */
    .fdp-seg-mid { flex: 1 1 38%; min-width: 0; }
    .fdp-seg-airline { flex-wrap: wrap; justify-content: center; min-width: 0; }
    .fdp-seg-airline-info { min-width: 0; align-items: center; text-align: center; }
    .fdp-seg-airline-name {
        white-space: normal; overflow-wrap: anywhere;
        line-height: 1.2; text-align: center;
    }
    .fdp-seg-meta { gap: 5px; }
    .fdp-seg-badge, .fdp-bag-item { font-size: 9px; padding: 2px 6px; }
    .fdp-bag-lbl { display: none; }
}
/* HR-divider with the "LAYOVER AT AUH — 1H 50M" text centered on the rule.
   Heavier weight + amber accent so the layover stands out against the
   surrounding navy segment headers. */
.fdp-layover {
    display: flex; align-items: center; gap: 10px;
    margin: 10px 0; color: #d97706; font-size: 12px; font-weight: 900;
    letter-spacing: .5px; text-transform: uppercase;
}
.fdp-layover::before, .fdp-layover::after {
    content: ''; flex: 1; height: 1px; background: #e2e8f0;
}
.fdp-layover span {
    background: transparent; border: none; padding: 0;
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap;
}
.fdp-layover i { color: #d97706; }
.fdp-leg-divider {
    display: flex; align-items: center; gap: 10px;
    margin: 10px 0; color: var(--tp, #04107C); font-size: 11px; font-weight: 800;
    letter-spacing: .4px; text-transform: uppercase;
}
.fdp-leg-divider::before, .fdp-leg-divider::after {
    content: ''; flex: 1; height: 2px;
    background: linear-gradient(90deg, #e2e8f0, var(--tp, #04107C), #e2e8f0);
    border-radius: 5px;
}
.fdp-leg-divider span {
    display: inline-flex; align-items: center; gap: 6px;
    background: #eef1fb; border: 1.5px solid #c7d0f5;
    border-radius: 5px; padding: 4px 14px; white-space: nowrap;
    color: var(--tp, #04107C);
}
/* Fare Summary */
.fdp-fare-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.fdp-fare-table th, .fdp-fare-table td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; color: #334155; text-align: left; white-space: nowrap; }
.fdp-fare-table th:not(:first-child), .fdp-fare-table td:not(:first-child) { text-align: right; }
.fdp-fare-head th { background: #f1f5f9; font-size: 11px; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: .4px; }
.fdp-fare-table tr.fdp-total td { font-weight: 900; font-size: 14px; color: var(--primary); border-top: 2px solid #e2e8f0; border-bottom: none; padding-top: 10px; }

/* Fare Summary — desktop/mobile toggle */
.fdp-fare-mobile { display: none; }
@media (max-width: 768px) {
    .fdp-fare-desktop { display: none; }
    .fdp-fare-mobile  { display: block; }
    #msbHero { padding: 16px 8px 25px !important; border-radius: 5px !important; min-height: auto !important; height: auto !important; }
    .msb-panel-card .fs-hero-bg { border-radius: 5px !important; }
    .msb-panel-card-inner { padding: 0 4px 4px; }
    .msb-panel-card-inner .fs-card { border-radius: 5px; }
    .msb-panel-card-inner .fs-trip { flex-wrap: nowrap; }
}

/* Fare card (mobile) */
.fdp-fare-card {
    border: 1.5px solid #e2e8f0; border-radius: 5px;
    overflow: hidden; margin-bottom: 10px;
}
.fdp-fare-card-head {
    background: var(--primary); color: #fff;
    font-size: 12px; font-weight: 800;
    padding: 8px 14px;
}
.fdp-fare-card-head i { opacity: .75; margin-right: 5px; }
.fdp-fare-card-body { padding: 2px 0; }
.fdp-fare-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 14px; border-bottom: 1px solid #f1f5f9;
    font-size: 12px;
}
.fdp-fare-row span:first-child { color: #64748b; }
.fdp-fare-row span:last-child  { font-weight: 700; color: #1e293b; }
.fdp-fare-card-foot {
    display: flex; justify-content: space-between; align-items: center;
    background: #eef1fb; padding: 9px 14px;
    font-size: 12px; font-weight: 800; color: var(--primary);
}
.fdp-fare-total-card {
    display: flex; justify-content: space-between; align-items: center;
    background: linear-gradient(135deg, var(--primary), #1a3bc4);
    border-radius: 5px; padding: 12px 16px;
    font-size: 13px; font-weight: 800; color: #fff;
    margin-top: 4px;
}
.fdp-fare-total-card small { font-size: 10px; font-weight: 500; opacity: .7; display: block; margin-top: 2px; }
.fdp-fare-total-card span:last-child { font-size: 16px; font-weight: 900; }
/* Policy */
.fdp-policy-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 5px; margin-bottom: 12px;
}
.fdp-policy-badge.refund   { background: #f0fdf4; color: #16a34a; }
.fdp-policy-badge.norefund { background: #fef2f2; color: #dc2626; }
.fdp-policy-note { font-size: 12px; color: #64748b; line-height: 1.8; }
.fdp-policy-note p { margin: 0 0 6px; }
.fdp-policy-note i { color: var(--primary); margin-right: 4px; }
.fdp-policy-header { margin-bottom: 14px; }
.fdp-charge-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: #fff; border: 1.5px solid #e2e8f0; border-radius: 5px; padding: 14px 18px; margin-bottom: 10px;
}
.fdp-charge-item { flex: 1; min-width: 120px; }
.fdp-charge-label { font-size: 11px; color: #94a3b8; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.fdp-charge-val { font-size: 16px; font-weight: 900; color: var(--primary); }
.fdp-charge-plus { font-size: 20px; font-weight: 900; color: #cbd5e1; flex-shrink: 0; }
.fdp-mini-loader { font-size: 13px; font-weight: 700; color: #64748b; }
.fdp-mini-loader .fa-spin { color: var(--primary); }
.fdp-mini-val { font-size: 13px; font-weight: 700; color: #0f172a; line-height: 1.6; }
.fdp-mini-disclaimer { font-size: 11px; color: #94a3b8; margin-top: 6px; }
.fdp-mini-disclaimer .fa { margin-right: 3px; }

/* ── Upsell fare comparison panel ── */
.usp-panel { border-top: 2px solid #eef1fb; background: #fff; }
.usp-panel-inner {
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.usp-panel-inner::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.usp-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 480px; }

/* Label (left sticky) column */
.usp-label-col {
    position: sticky; left: 0; z-index: 2;
    text-align: left !important; white-space: nowrap;
    background: #fff;
    min-width: 148px; max-width: 160px;
    padding: 11px 16px;
    border-right: 1.5px solid #eef1fb;
    font-size: 12px; color: #64748b; font-weight: 600;
}
.usp-label-col .fa { margin-right: 7px; color: #b0bac9; width: 13px; text-align: center; }

/* Header row */
.usp-table thead th {
    background: var(--primary);
    color: #fff; font-weight: 800; font-size: 13px;
    padding: 13px 16px; text-align: center;
    border-left: 1px solid rgba(255,255,255,.12);
}
.usp-table thead th.usp-label-col {
    background: var(--primary); color: rgba(255,255,255,.7);
    border-right: 1.5px solid rgba(255,255,255,.15);
    font-weight: 700; font-size: 12px;
}

/* Body rows */
.usp-table tbody tr { transition: background .12s; }
.usp-table tbody tr:hover { background: #f8faff; }
.usp-table tbody tr:hover .usp-label-col { background: #f8faff; }
.usp-table tbody td {
    padding: 10px 16px; text-align: center;
    font-size: 13px; color: #0f172a;
    border-bottom: 1px solid #f1f5f9;
    border-left: 1px solid #f1f5f9;
}

/* Gross fare row */
.usp-fare-row { background: #f8faff !important; }
.usp-fare-row .usp-label-col { background: #f8faff; }
.usp-fare-row td { border-bottom: none; }

/* Footer row */
.usp-table tfoot td {
    padding: 12px 16px; text-align: center;
    border-left: 1px solid #eef1fb;
    background: #fff;
}
.usp-table tfoot .usp-label-col { background: #fff; }

.usp-yes { color: #16a34a; font-size: 15px; }
.usp-no { color: #dc2626; font-size: 15px; }
.usp-penalty { color: #dc2626; font-size: 12px; font-weight: 700; line-height: 1.4; }
.usp-gross { font-size: 11px; color: #94a3b8; text-decoration: line-through; margin-bottom: 2px; }
.usp-price { font-size: 16px; font-weight: 900; color: var(--primary); }
.usp-book-btn {
    background: #f97316; color: #fff; border: none;
    border-radius: 5px; padding: 9px 22px;
    font-size: 13px; font-weight: 800; cursor: pointer;
    white-space: nowrap; transition: background .15s, transform .1s;
    display: inline-block;
}
.usp-book-btn:hover { background: #ea6c00; transform: translateY(-1px); }
.usp-refund-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; color: #16a34a;
    background: #f0fdf4; border-radius: 5px; padding: 3px 8px;
    margin-bottom: 8px;
}
.fl2-viewprices-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: 1.5px solid #f97316; color: #f97316;
    border-radius: 5px; padding: 5px 12px; font-size: 12px;
    font-weight: 700; cursor: pointer; transition: background .15s;
}
.fl2-viewprices-btn:hover { background: #fff7ed; }
.fl2-viewprices-btn.open { background: #f97316; color: #fff; }

/* Top row — pagination + day-nav inline */
.topbar-row {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.topbar-row .pg-bar { margin: 0; }
@media (max-width: 768px) {
    .topbar-row { flex-direction: column; align-items: stretch; gap: 8px; }
}

/* ── Pagination ── */
.pg-bar {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 10px;
    padding: 14px 4px; margin: 6px 0 10px;
    position: relative;
}
.pg-info {
    font-size: 12px; color: #64748b; font-weight: 600;
    position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
}
.pg-pages { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
@media (max-width: 768px) {
    .pg-info { position: static; transform: none; }
    /* Phones: only the bottom pagination shows — the top one is redundant
       on a single-column view and just eats vertical space above the cards. */
    #pg-bar-all { display: none !important; }
}
.pg-btn {
    min-width: 36px; height: 36px; padding: 0 10px;
    border: 1.5px solid #e2e8f0; border-radius: 5px;
    background: #fff; color: #0f172a;
    font-size: 13px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s, color .15s;
}
.pg-btn:hover:not(:disabled) { background: #eef1fb; border-color: var(--primary); color: var(--primary); }
.pg-btn.pg-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pg-btn:disabled { opacity: .35; cursor: default; }
.pg-btn.pg-nav { font-size: 12px; }
.pg-ellipsis { font-size: 14px; color: #94a3b8; padding: 0 4px; line-height: 36px; }

/* ── Roundtrip selection ── */
.fl2-card.fl2-leg-selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 2.5px rgba(4,16,124,.18), 0 4px 18px rgba(4,16,124,.10);
}
.fl2-card.fl2-leg-selected .fl2-select-btn {
    background: #16a34a; border-color: #16a34a;
}
.fl2-card.fl2-leg-selected .fl2-select-btn:hover { background: #15803d; }

/* Sticky selection review bar */
#rt-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050;
    background: #fff; border-top: 2px solid #e2e8f0;
    box-shadow: 0 -4px 24px rgba(4,16,124,.12);
    display: none;
}
#rt-bar.visible { display: block; }
.rt-bar-inner {
    max-width: 1100px; margin: 0 auto;
    padding: 12px 20px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.rt-leg-slot {
    flex: 1; min-width: 200px;
    border: 1.5px dashed #cbd5e1; border-radius: 5px;
    padding: 10px 14px; background: #f8fafc;
    transition: border-color .2s, background .2s;
}
.rt-leg-slot.filled { border-style: solid; border-color: var(--primary); background: #eef1fb; }
.rt-leg-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: #94a3b8; margin-bottom: 4px; }
.rt-leg-slot.filled .rt-leg-label { color: var(--primary); }
.rt-leg-placeholder { font-size: 13px; color: #94a3b8; }
.rt-leg-info { display: none; }
.rt-leg-slot.filled .rt-leg-placeholder { display: none; }
.rt-leg-slot.filled .rt-leg-info { display: block; }
.rt-leg-route { font-size: 15px; font-weight: 900; color: #0f172a; }
.rt-leg-route span { color: #94a3b8; font-size: 12px; font-weight: 500; margin: 0 4px; }
.rt-leg-sub { font-size: 11px; color: #64748b; margin-top: 2px; }
.rt-leg-price { font-size: 13px; font-weight: 800; color: var(--primary); }
.rt-leg-change { font-size: 10px; color: #f97316; cursor: pointer; font-weight: 700; margin-left: 6px; }
.rt-leg-change:hover { text-decoration: underline; }
.rt-bar-plus { font-size: 20px; font-weight: 900; color: #cbd5e1; flex-shrink: 0; }
.rt-bar-total { flex-shrink: 0; text-align: right; }
.rt-total-label { font-size: 11px; color: #94a3b8; }
.rt-total-price { font-size: 20px; font-weight: 900; color: var(--primary); line-height: 1; }
.rt-book-btn {
    flex-shrink: 0;
    background: var(--primary); color: #fff; border: none;
    border-radius: 5px; padding: 13px 28px;
    font-size: 14px; font-weight: 800; cursor: pointer;
    opacity: .4; pointer-events: none; transition: opacity .2s;
}
.rt-book-btn.ready { opacity: 1; pointer-events: all; }
.rt-book-btn.ready:hover { background: #020d5a; }

/* Lift Book Both bar above the mobile bottom nav (62px) — only when the
   nav is actually rendered. .mob-nav is only output for authenticated
   users (wrapped in @auth), so guests would otherwise see a 62px empty
   gap below the Book Both button. */
@media (max-width: 991px) {
    body.has-mob-nav #rt-bar { bottom: 62px !important; }
}


/* ── MSB Hero — public layout (full-width, dark, like visa hero) ── */
/* Desktop: fix navbar to top (mobile already fixed via layout.css) */
@media (min-width: 992px) {
    body.td-public-layout .header {
        position: fixed !important;
        top: 0; left: 0; right: 0;
        z-index: 2000;
        box-shadow: 0 2px 10px rgba(0,0,0,.12);
    }
    body.td-public-layout {
        padding-top: var(--msb-sticky-top, 68px);
    }
}
body.td-public-layout .msb-section {
    background: #fff;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 4px 14px rgba(4,16,124,.06);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 0;
    position: sticky;
    top: var(--msb-sticky-top, 68px);
    z-index: 999;
    overflow-x: clip;
    overflow-y: visible;
}
body.td-public-layout .msb-section::before { display: none; }
body.td-public-layout .msb-inner {
    position: relative; z-index: 1;
    max-width: 1320px; margin: 0 auto; padding: 0 15px;
}
body.td-public-layout .msb-bar {
    background: transparent; border: none; border-radius: 0;
    box-shadow: none; margin-bottom: 0; padding: 14px 0;
}
body.td-public-layout .msb-info-icon { background: #eef1fb; color: var(--tp, #04107C); }
body.td-public-layout .msb-count { color: #059669; }
body.td-public-layout .msb-count-sub { color: #94a3b8; }
body.td-public-layout .msb-iata { color: var(--tp, #04107C); }
body.td-public-layout .msb-city { color: #94a3b8; }
body.td-public-layout .msb-arrow-icon { color: #94a3b8; }
body.td-public-layout .msb-field-label { color: #94a3b8; }
body.td-public-layout .msb-field-val { color: #0f172a; }
body.td-public-layout .msb-pipe { color: #e2e8f0; }
body.td-public-layout .msb-divider { background: #e2e8f0; }
body.td-public-layout .msb-btn {
    background: #f59e0b; color: #1a1a1a;
    border: none; border-radius: 5px;
    padding: 9px 20px; font-size: 13px; font-weight: 700;
    transition: background .2s;
}
body.td-public-layout .msb-btn:hover { background: #d97706; color: #fff; }
body.td-public-layout .msb-btn.open { background: #d97706; color: #fff; }
body.td-public-layout .msb-timer {
    background: transparent; border: none;
    padding: 7px 14px; margin-left: 12px;
}
body.td-public-layout .msb-timer-icon { color: #94a3b8; }
body.td-public-layout .msb-timer-digits { color: #dc2626; font-weight: 800; }
body.td-public-layout .msb-timer-label { color: #94a3b8; }

body.td-public-layout .msb-inner { padding-bottom: 0; }

/* ── Page body — public layout ── */
body.td-public-layout .page-body {
    width: 100%; max-width: 1320px;
    margin-right: auto; margin-left: auto;
    padding: 20px 15px 60px;
}
body.td-public-layout .page-body > .row { margin-left: -15px; margin-right: -15px; }
/* Sidebar top offset accounts for sticky navbar + sticky msb-section */
@media (min-width: 901px) {
    body.td-public-layout .res-sidebar {
        top: var(--sidebar-sticky-top, 150px);
        max-height: calc(100vh - var(--sidebar-sticky-top, 150px) - 10px);
    }
}
/* Agent fare-source tag (owner directive 2026-09-21): one letter, B / T / F. */
.fl2-src-tag {
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; border-radius:5px;
    background:var(--src-bg, #eef1fb); color:var(--src-fg, #04107C);
    border:1px solid color-mix(in srgb, var(--src-fg, #04107C) 28%, transparent);
    font-size:11px; font-weight:900; line-height:1; letter-spacing:0;
    font-family:inherit; vertical-align:middle; cursor:default;
    box-shadow:inset 0 -1px 0 color-mix(in srgb, var(--src-fg, #04107C) 18%, transparent);
}

/* BDFare connecting flights (owner directive 2026-09-21): per-segment rows
   on desktop like the Trip Lover cards, compact single line on mobile. */
.fl2-seg-mobile { display:none; }
@media (max-width: 767.98px) {
    .fl2-seg-desktop { display:none !important; }
    .fl2-seg-mobile  { display:flex; }
}

/* Owner directive 2026-09-21 ('view price flight details er left side e
   thakbe'): View Prices is pushed right and sits just before Flight
   Details on every card (BDFare + Trip Lover / TripFindy). */
.fl2-footer .fl2-viewprices-btn { margin-left: auto; }
.fl2-footer .fl2-viewprices-btn ~ .fl2-details-btn { margin-left: 10px; }

/* Seats-left chip: desktop '⚠ 12 Seats left', mobile '[seat] 12 Seats'. */
.fl2-seats-warn .fl2-sw-seat { display:none; vertical-align:-1px; margin-right:2px; }
.fl2-seats-warn .fl2-sw-mob  { display:none; }
@media (max-width: 767.98px) {
    .fl2-seats-warn .fl2-sw-warn,
    .fl2-seats-warn .fl2-sw-desk { display:none; }
    .fl2-seats-warn .fl2-sw-seat { display:inline-block; }
    .fl2-seats-warn .fl2-sw-mob  { display:inline; }
}


/* Owner directive 2026-09-22 ('bdfare on thakle skeleton body change hoye
   jay / triplover er same skeleton'): moved from results.blade.php so the
   search loading overlay (#flight-flo) renders the very same skeleton. */
/* ── Flight-card skeleton (waiting state) ──
   Compact stack — tight cards + tight gaps so the loading state
   doesn't feel airy. Sidebar skeleton uses the same rhythm. */
#nf-waiting {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: calc(100vh - 220px);
}
.fs-skel-card {
    background: #fff;
    border: 1px solid #eef1fb;
    border-radius: 8px;
    padding: 14px 16px;
    min-height: 70px;
    box-shadow: 0 1px 6px rgba(4, 16, 124, .05);
}
.fs-skel-row { display: flex; align-items: center; gap: 14px; }
.fs-skel-logo {
    width: 38px; height: 38px; border-radius: 50%;
    flex-shrink: 0;
}
.fs-skel-mid { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.fs-skel-line { height: 10px; border-radius: 5px; }
.fs-skel-line.lg { width: 75%; height: 12px; }
.fs-skel-line.sm { width: 45%; }
.fs-skel-price {
    width: 88px; height: 32px; border-radius: 5px;
    flex-shrink: 0;
}
.fs-skel-logo, .fs-skel-line, .fs-skel-price {
    background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
    background-size: 200% 100%;
    animation: fsSkPulse 1.4s ease-in-out infinite;
}
@keyframes fsSkPulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* Sidebar skeleton — match the main card rhythm */
.res-sidebar-skel .sf-section {
    padding-top: 10px !important;
    margin-top: 10px !important;
}
.res-sidebar-skel .sf-section .fs-skel-line { margin-top: 6px !important; }
.res-sidebar-skel .sf-section .fs-skel-line:first-child { margin-bottom: 8px !important; }
@media (max-width: 576px) {
    .fs-skel-card { padding: 12px 14px; min-height: 64px; }
    .fs-skel-logo { width: 34px; height: 34px; }
    .fs-skel-price { width: 76px; height: 30px; }
    .fs-skel-row { gap: 10px; }
    #nf-waiting { gap: 6px; }
}