/* ======================================================================
 * FLIGHT SELECTION — "Choose your flight"
 * ======================================================================
 * A copy of lastminute.com's transportDetail screen. Every value here was
 * read off the live page with getComputedStyle on 2026-08-04, not matched
 * by eye against a screenshot. Where a number looks arbitrary it is because
 * it is theirs, not ours.
 *
 * Scoped under .travellin-flightsel so none of it can reach the rest of the
 * site. The plugin's other screens use --stay-* variables; this screen has
 * its own set because it is a copy of a different design system and the two
 * palettes must not drift into each other.
 * ====================================================================== */

.travellin-flightsel {
    /*
     * OUR BLUE, NOT THE REFERENCE'S PINK.
     *
     * lastminute.com's brand colour is #f2007d. Copying their layout is the
     * point; copying their brand is not — a customer arriving from
     * package-details has just seen #0052cc on the price, the reserve button
     * and every link, and a screen that switches to magenta reads as a
     * different company's page.
     *
     * Measured off the live site on 2026-08-04: --stay-primary is #0052cc
     * and its hover is #0747a6, and those are the two values painting the
     * button the customer pressed to get here.
     *
     * Named --fs-brand rather than --fs-brand. A token called "pink" holding
     * a blue is exactly the kind of drift that survives three releases and
     * then sends someone looking for a bug that is only a name.
     */
    --fs-brand: #0052cc;
    --fs-brand-hover: #0747a6;
    --fs-ink: #1e0023;
    --fs-muted: #74747c;
    --fs-route: #726e73;
    --fs-page: #f7f7f7;
    --fs-line: #e4e4e7;
    --fs-card: #fff;

    font-family: Ubuntu, Arial, Helvetica, sans-serif;
    color: var(--fs-ink);
    background: var(--fs-page);
    padding: 0 0 40px;
}

.travellin-flightsel *,
.travellin-flightsel *::before,
.travellin-flightsel *::after { box-sizing: border-box; }

/* ---- stepper --------------------------------------------------------- */

/*
 * The back arrow sits in its own box with a divider between it and the
 * steps, rather than floating inside the same padding. Measured: the
 * divider is a full-height border, not a short rule.
 */
.travellin-flightsel .fs-steps {
    display: flex;
    align-items: stretch;
    max-width: 1200px;
    margin: 16px auto 12px;
    background: var(--fs-card);
    border-radius: 8px;
    overflow: hidden;
}
.travellin-flightsel .fs-steps-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    flex: 0 0 60px;
    color: var(--fs-ink);
    border-right: 1px solid var(--fs-line);
    text-decoration: none;
}
.travellin-flightsel .fs-steps-back:hover { background: var(--fs-page); }

.travellin-flightsel .fs-steps-list {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 20px 24px;
    font-size: 14px;
}
.travellin-flightsel .fs-steps-list li { display: flex; align-items: center; gap: 12px; }

/*
 * The chevron is drawn with a border on a pseudo-element rather than an SVG
 * or a character. A glyph would change shape with the font and an inline SVG
 * would need a fill colour per state; a rotated border inherits currentColor
 * and stays identical in every step.
 */
.travellin-flightsel .fs-steps-list li + li::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid #9a9aa2;
    border-bottom: 1.5px solid #9a9aa2;
    transform: rotate(-45deg);
    margin-right: 4px;
}
.travellin-flightsel .fs-steps-list a { color: var(--fs-brand); text-decoration: none; }
.travellin-flightsel .fs-steps-list a:hover { text-decoration: underline; }
.travellin-flightsel .fs-steps-list .is-current { font-weight: 700; }

/* ---- two columns ----------------------------------------------------- */

/*
 * 260 + 916 with a 24px gutter is 1200 exactly, which is the measured
 * content width. minmax(0, 916px) rather than 916px so the results column
 * can shrink before the layout overflows — a fixed track would push the
 * page into horizontal scroll on a 1280px screen with a scrollbar.
 */
.travellin-flightsel .fs-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 916px);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

/* ---- filters --------------------------------------------------------- */

.travellin-flightsel .fs-filters { display: flex; flex-direction: column; gap: 8px; }

.travellin-flightsel .fs-filter-head {
    font-size: 16px;
    font-weight: 700;
    margin: 12px 0 4px;
}
.travellin-flightsel .fs-filter-sub {
    font-size: 14px;
    color: var(--fs-route);
    margin: -2px 0 6px;
}
.travellin-flightsel .fs-filter-card {
    background: var(--fs-card);
    border-radius: 8px;
    padding: 16px;
}
.travellin-flightsel .fs-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
}
.travellin-flightsel .fs-filter-name { display: block; font-size: 14px; }

/*
 * The line the reference prints above an airport name — "0 ft from the
 * hotel". Above, not below, because it qualifies the name that follows.
 */
.travellin-flightsel .fs-filter-note {
    display: block;
    font-size: 12px;
    color: var(--fs-muted);
    margin-bottom: 1px;
}

/*
 * Each group is a heading plus one or more cards. The reference separates
 * groups by more space than it separates a subtitle from its own card, so
 * the eye groups them correctly before reading a word.
 */
.travellin-flightsel .fs-filter-block + .fs-filter-block { margin-top: 12px; }
.travellin-flightsel .fs-filter-card + .fs-filter-sub { margin-top: 12px; }
/*
 * display:block, or the price joins the label.
 *
 * Both are spans inside one parent, so without this they rendered as
 * "Show direct routes onlyfrom CHF 60" — measured on the live page. The
 * reference puts the price on its own line under the name.
 */
.travellin-flightsel .fs-filter-from {
    display: block;
    font-size: 12px;
    color: var(--fs-muted);
    margin-top: 2px;
}

/*
 * A real checkbox, restyled — not a div pretending to be one. Keyboard
 * focus, the space key, form semantics and screen-reader state all come
 * free, and every one of them would have had to be rebuilt by hand.
 */
.travellin-flightsel .fs-check {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin: 0;
    border: 1.5px solid #b4b4bb;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    position: relative;
}
.travellin-flightsel .fs-check:checked {
    background: var(--fs-brand);
    border-color: var(--fs-brand);
}
.travellin-flightsel .fs-check:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.travellin-flightsel .fs-check:focus-visible {
    outline: 2px solid var(--fs-brand);
    outline-offset: 2px;
}

.travellin-flightsel .fs-toggle {
    appearance: none;
    -webkit-appearance: none;
    width: 40px;
    height: 22px;
    flex: 0 0 40px;
    margin: 0;
    border-radius: 999px;
    background: #d4d4d8;
    position: relative;
    cursor: pointer;
    transition: background .15s;
}
.travellin-flightsel .fs-toggle::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s;
}
.travellin-flightsel .fs-toggle:checked { background: var(--fs-brand); }
.travellin-flightsel .fs-toggle:checked::after { transform: translateX(18px); }
.travellin-flightsel .fs-toggle:focus-visible {
    outline: 2px solid var(--fs-brand);
    outline-offset: 2px;
}

.travellin-flightsel .fs-filters-skeleton { display: flex; flex-direction: column; gap: 10px; }
.travellin-flightsel .fs-filters-skeleton span {
    display: block;
    height: 88px;
    border-radius: 8px;
    background: #ececef;
}

/* ---- the stay carried over ------------------------------------------- */

.travellin-flightsel .fs-stay {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--fs-card);
    border-radius: 8px;
    padding: 16px 24px;
    margin: 0 0 20px;
}
.travellin-flightsel .fs-stay[hidden] { display: none; }
.travellin-flightsel .fs-stay-name { font-size: 16px; font-weight: 700; }
.travellin-flightsel .fs-stay-room { font-size: 14px; color: var(--fs-route); margin-top: 2px; }
.travellin-flightsel .fs-stay-price { font-size: 24px; font-weight: 700; white-space: nowrap; }

/*
 * "pp" rides on the price baseline at a smaller size. Measured on the
 * original: it is not a separate line and not vertically centred.
 */
.travellin-flightsel .fs-stay-price small {
    font-size: 14px;
    font-weight: 400;
    color: var(--fs-muted);
    margin-left: 4px;
}

/* ---- heading and count ----------------------------------------------- */

.travellin-flightsel .fs-h1 {
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    color: var(--fs-ink);
    margin: 0 0 8px;
}
.travellin-flightsel .fs-count {
    font-size: 14px;
    color: var(--fs-muted);
    margin: 0 0 16px;
}

/* ---- Best / Cheapest / Fastest --------------------------------------- */

/*
 * Three equal columns on a white card, divided by hairlines, with a 2px pink
 * underline on the active one. The underline is a border on the button, so
 * it cannot drift out of alignment with the label the way an absolutely
 * positioned bar does when the card is resized.
 */
.travellin-flightsel .fs-sorts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--fs-card);
    border-radius: 8px;
    overflow: hidden;
    margin: 0 0 16px;
}
.travellin-flightsel .fs-sort {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-right: 1px solid var(--fs-line);
    padding: 14px 8px;
    font: inherit;
    font-size: 14px;
    color: var(--fs-ink);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.travellin-flightsel .fs-sort:last-child { border-right: 0; }
.travellin-flightsel .fs-sort:hover { background: #fafafa; }
.travellin-flightsel .fs-sort.is-active {
    color: var(--fs-brand);
    border-bottom-color: var(--fs-brand);
}
.travellin-flightsel .fs-sort-label { font-weight: 700; }
.travellin-flightsel .fs-sort-delta { font-size: 14px; color: inherit; }
.travellin-flightsel .fs-sort:focus-visible { outline: 2px solid var(--fs-brand); outline-offset: -2px; }

/* ---- a flight card ---------------------------------------------------- */

.travellin-flightsel .fs-results { display: flex; flex-direction: column; gap: 16px; }

/*
 * The card is a two-column grid: legs on the left, the price panel on the
 * right at a fixed 210px. The panel is separated by a border, and the whole
 * card is one click target only where it is meant to be — the Continue
 * button — so a stray click on a leg does not commit a purchase.
 */
.travellin-flightsel .fs-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    background: var(--fs-card);
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
}

.travellin-flightsel .fs-legs { padding: 4px 0; }

.travellin-flightsel .fs-leg {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 88px 96px auto;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
}
.travellin-flightsel .fs-leg + .fs-leg { border-top: 1px solid var(--fs-line); }

.travellin-flightsel .fs-logo {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: contain;
    background: #f4f4f5;
}

.travellin-flightsel .fs-time {
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
}

/*
 * "+1" for an arrival on the next day. Superscript-sized and set beside the
 * time rather than inside it, because a customer scanning a column of
 * departure times must not have to re-read one that is 4 characters longer.
 */
.travellin-flightsel .fs-nextday {
    font-size: 12px;
    font-weight: 700;
    vertical-align: super;
    margin-left: 4px;
}
.travellin-flightsel .fs-route {
    font-size: 14px;
    color: var(--fs-route);
    margin-top: 2px;
}
.travellin-flightsel .fs-stops,
.travellin-flightsel .fs-dur { font-size: 14px; font-weight: 700; }

.travellin-flightsel .fs-bags { display: flex; align-items: center; gap: 10px; }
.travellin-flightsel .fs-bag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 14px;
    color: var(--fs-ink);
}
.travellin-flightsel .fs-bag svg { width: 16px; height: 16px; }

/*
 * A bag the fare does not include is struck through rather than hidden or
 * greyed. Hiding it would leave the customer to notice an absence; grey
 * alone reads as "less important", not "not included".
 */
.travellin-flightsel .fs-bag.is-none { color: #a1a1aa; text-decoration: line-through; }

/* ---- price panel ------------------------------------------------------ */

.travellin-flightsel .fs-panel {
    border-left: 1px solid var(--fs-line);
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}
.travellin-flightsel .fs-co2 {
    font-size: 12px;
    background: #eef7ee;
    color: #256029;
    border-radius: 999px;
    padding: 4px 10px;
    white-space: nowrap;
}
.travellin-flightsel .fs-co2.is-high { background: #fdeeee; color: #8c2020; }
.travellin-flightsel .fs-delta {
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
}
.travellin-flightsel .fs-delta small {
    font-size: 14px;
    font-weight: 400;
    color: var(--fs-muted);
    margin-left: 3px;
}

/*
 * The return leg already inside the package.
 *
 * Marked with a border rather than a fill: it sits above real fares and a
 * filled card at the top of a price-sorted list reads as a promotion. The
 * border says "this one is yours" without competing with the Continue
 * buttons underneath it.
 *
 * No fixed height and no absolute positioning — the row is the same card as
 * every other and must reflow with them at every breakpoint.
 */
.travellin-flightsel .fs-card.is-included {
    border-color: var(--fs-brand);
    box-shadow: inset 0 0 0 1px var(--fs-brand);
}
.travellin-flightsel .fs-included-badge {
    font-size: 12px;
    font-weight: 600;
    background: #eef2f7;
    color: var(--fs-brand);
    border-radius: 999px;
    padding: 4px 10px;
    white-space: nowrap;
}
.travellin-flightsel .fs-card.is-included .fs-delta {
    font-size: 16px;
    color: var(--fs-muted);
}

/*
 * 174 x 48 with a pink fill, exactly as measured. `color` is set alongside
 * `background` because a control that paints its own background while
 * inheriting its text colour is one theme change from white on white — that
 * shipped once on this project already.
 */
.travellin-flightsel .fs-continue {
    width: 174px;
    height: 48px;
    border: 0;
    border-radius: 8px;
    background: var(--fs-brand);
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}
.travellin-flightsel .fs-continue:hover { background: var(--fs-brand-hover); }
.travellin-flightsel .fs-continue:focus-visible { outline: 2px solid var(--fs-ink); outline-offset: 2px; }
.travellin-flightsel .fs-continue[disabled] { background: #d4d4d8; color: #6b7280; cursor: not-allowed; }

.travellin-flightsel .fs-empty {
    background: var(--fs-card);
    border-radius: 8px;
    padding: 24px;
    font-size: 14px;
    color: var(--fs-route);
    margin: 0;
}
.travellin-flightsel .fs-empty[hidden] { display: none; }

.travellin-flightsel .fs-more {
    width: 100%;
    margin-top: 16px;
    padding: 14px;
    background: var(--fs-card);
    border: 1px solid var(--fs-line);
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--fs-ink);
    cursor: pointer;
}
.travellin-flightsel .fs-more:hover { background: #fafafa; }
.travellin-flightsel .fs-more[hidden] { display: none; }

.travellin-flightsel .fs-skeleton {
    height: 176px;
    border-radius: 8px;
    background: var(--fs-card);
}

/* ---- tablet ----------------------------------------------------------- */

/*
 * The filter column goes above the results rather than beside them. Below
 * about 1100px, 260px of filters leaves the card too narrow for the five
 * columns of a leg row, and the times start wrapping mid-value.
 */
@media (max-width: 1100px) {
    .travellin-flightsel .fs-layout {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 16px;
    }
    .travellin-flightsel .fs-steps { margin-left: 16px; margin-right: 16px; }
}

@media (max-width: 860px) {
    .travellin-flightsel .fs-leg {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: 12px;
        row-gap: 6px;
    }
    .travellin-flightsel .fs-logo { width: 40px; height: 40px; }

    /*
     * Stops and duration move under the route on their own row. They stay
     * side by side there instead of stacking, so the row keeps the shape a
     * reader already learned on the wide layout.
     */
    .travellin-flightsel .fs-stops { grid-column: 2; grid-row: 2; }
    .travellin-flightsel .fs-dur { grid-column: 3; grid-row: 2; text-align: right; }
    .travellin-flightsel .fs-bags { grid-column: 2 / -1; grid-row: 3; }
    .travellin-flightsel .fs-time { font-size: 18px; }
}

/* ---- mobile ----------------------------------------------------------- */

@media (max-width: 640px) {
    /*
     * The price panel becomes a footer strip. Keeping it as a column would
     * leave roughly 120px for a departure time, an airline and a route.
     */
    .travellin-flightsel .fs-card { grid-template-columns: minmax(0, 1fr); }
    .travellin-flightsel .fs-panel {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-left: 0;
        border-top: 1px solid var(--fs-line);
    }
    .travellin-flightsel .fs-continue { width: auto; flex: 1 1 auto; max-width: 200px; }
    .travellin-flightsel .fs-sorts { grid-template-columns: repeat(3, 1fr); }
    .travellin-flightsel .fs-sort { font-size: 13px; padding: 12px 4px; }
    .travellin-flightsel .fs-stay { flex-wrap: wrap; }
    .travellin-flightsel .fs-h1 { font-size: 20px; line-height: 26px; }
}

/* ======================================================================
 * FLIGHT DETAILS MODAL
 * ======================================================================
 * Measured on the reference on 2026-08-04: panel 552px of content, white,
 * rounded top corners, a sticky header with the close button on the LEFT
 * and the title centred, and a sticky footer carrying the price and the
 * primary action.
 *
 * The header keeps the close button on the left because that is where the
 * reference puts it. On a touch screen the top-right corner is the hardest
 * part of a tall panel to reach one-handed, which is presumably why.
 * ====================================================================== */

.travellin-flightsel .fs-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(30, 0, 35, .55);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/*
 * flex-end, not center: the reference anchors the panel to the bottom of
 * the viewport and lets it grow upward. A centred panel that outgrows the
 * screen clips at BOTH ends, and the footer with the price is the half a
 * customer needs.
 */
@media (min-width: 641px) {
    .travellin-flightsel .fs-modal { align-items: center; }
}

.travellin-flightsel .fs-modal-panel {
    background: var(--fs-card);
    width: 100%;
    max-width: 620px;
    max-height: 92vh;
    border-radius: 12px 12px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
@media (min-width: 641px) {
    .travellin-flightsel .fs-modal-panel { border-radius: 12px; }
}

.travellin-flightsel .fs-modal-head {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 56px;
    border-bottom: 1px solid var(--fs-line);
}
.travellin-flightsel .fs-modal-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--fs-ink);
}
.travellin-flightsel .fs-modal-x {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--fs-ink);
    cursor: pointer;
}
.travellin-flightsel .fs-modal-x:hover { background: var(--fs-page); }
.travellin-flightsel .fs-modal-x:focus-visible { outline: 2px solid var(--fs-brand); outline-offset: 2px; }

/*
 * The body scrolls, the header and footer do not. min-height:0 is what
 * makes that work inside a flex column — without it the body takes its
 * content height, the panel outgrows max-height, and the footer with the
 * price is pushed off the bottom of the screen.
 */
.travellin-flightsel .fs-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px 24px;
}

.travellin-flightsel .fs-modal-h {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--fs-ink);
}
.travellin-flightsel .fs-modal-h + .fs-modal-sub { margin-top: -8px; }
.travellin-flightsel .fs-modal-sub {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--fs-route);
}

.travellin-flightsel .fs-fare {
    border: 1px solid var(--fs-line);
    border-radius: 8px;
    padding: 16px;
    margin: 0 0 24px;
}
.travellin-flightsel .fs-fare ul { list-style: none; margin: 0; padding: 0; }
.travellin-flightsel .fs-fare-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    padding: 6px 0;
    color: var(--fs-ink);
}
.travellin-flightsel .fs-fare-row svg { flex: 0 0 18px; margin-top: 1px; }

/*
 * Colour carries the meaning here, so it is on the icon only and the text
 * stays near-black. Tinting the sentence too would make "Non-refundable
 * flights" read as an error rather than as a fact about the fare.
 */
.travellin-flightsel .fs-fare-row.is-yes svg { color: #1d9e75; }
.travellin-flightsel .fs-fare-row.is-fee svg { color: #74747c; }
.travellin-flightsel .fs-fare-row.is-no svg { color: #a1a1aa; }

.travellin-flightsel .fs-itin-leg {
    border: 1px solid var(--fs-line);
    border-radius: 8px;
    padding: 16px;
    margin: 0 0 12px;
}
.travellin-flightsel .fs-itin-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--fs-line);
}
.travellin-flightsel .fs-itin-head b { display: block; font-size: 16px; }
.travellin-flightsel .fs-itin-head span { font-size: 14px; color: var(--fs-route); }
.travellin-flightsel .fs-itin-carrier { white-space: nowrap; }

.travellin-flightsel .fs-tl { padding-top: 14px; }

/*
 * Three columns: when, the rail, where. A fixed 62px first column keeps
 * every dot on one vertical line however wide the times print — "07:15"
 * and "7:15" would otherwise stagger the rail down the panel.
 */
.travellin-flightsel .fs-tl-point {
    display: grid;
    grid-template-columns: 62px 18px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
}
.travellin-flightsel .fs-tl-when b { display: block; font-size: 15px; }
.travellin-flightsel .fs-tl-when span { font-size: 12px; color: var(--fs-route); }
.travellin-flightsel .fs-tl-dot {
    width: 9px;
    height: 9px;
    margin: 5px auto 0;
    border-radius: 50%;
    background: var(--fs-ink);
}
.travellin-flightsel .fs-tl-where { font-size: 15px; }

.travellin-flightsel .fs-tl-carrier {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 8px 90px;
    padding: 10px 12px;
    border: 1px solid var(--fs-line);
    border-radius: 8px;
}
.travellin-flightsel .fs-tl-carrier img { width: 24px; height: 24px; object-fit: contain; }
.travellin-flightsel .fs-tl-carrier b { display: block; font-size: 14px; }
.travellin-flightsel .fs-tl-carrier span { font-size: 13px; color: var(--fs-route); }

.travellin-flightsel .fs-modal-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    border-top: 1px solid var(--fs-line);
    background: var(--fs-card);
}
.travellin-flightsel .fs-modal-price { font-size: 24px; font-weight: 700; white-space: nowrap; }
.travellin-flightsel .fs-modal-price small {
    font-size: 14px;
    font-weight: 400;
    color: var(--fs-muted);
    margin-left: 4px;
}