/* ==========================================================================
   FLIGHT FLOW (2026-10-30): the Choose page (/flights/live results), its
   fare sheet and filter sheet. Prefix .fx-. Macros: templates/partials/_fb.html.
   JS: static/js/flight_flow.js. Brand tokens from elite.css only.
   Phone first (390), good at 1280. Mockups: scratchpad flow/project/Choose,
   Filters, Fare .dc.html.
   ========================================================================== */
:root { --fx-ink: #0f1a2c; --fx-muted: #4f5a6b; --fx-line: #e5e5e7; --fx-soft: #f5f7fa;
        --fx-blue: #2563eb; --fx-blue-deep: #1d4ed8; --fx-blue-soft: #e8effd; --fx-navy: #0f2557;
        --fx-ok: #1f7a4d; --fx-ok-soft: #e4f3ea; --fx-warn: #8a5a00; --fx-warn-soft: #fff3df;
        --fx-danger: #c4281c; --fx-r: 14px; --fx-tap: 44px; }

/* --- Text sizes the owner allowed above the 14px cap (font-size.css):
       prices and times only. The id-weight prefix matches font-size.css so
       these win; everything else on the page stays at the site size. --- */
html:not(#et):not(#et) body .fx-price { font-size: 22px !important; }
html:not(#et):not(#et) body .fx-time { font-size: 22px !important; }
html:not(#et):not(#et) body .fx-total { font-size: 20px !important; }
html:not(#et):not(#et) body .fx-time sup { font-size: 11px !important; }
html:not(#et):not(#et) body .fx-total small, html:not(#et):not(#et) body .fx-price small { font-size: 12px !important; }

/* --- The search form (kept from the old page, .fl- names used by search.css) --- */
.fl-trip { display: flex; gap: 6px; margin: 0 0 10px; }
.fl-trip label { padding: 6px 14px; border: 1px solid var(--fx-line); border-radius: 999px; cursor: pointer; }
.fl-trip input { position: absolute; opacity: 0; pointer-events: none; }
.fl-trip input:checked + span { color: var(--fx-blue); font-weight: 700; }
.fl-trip .fl-direct { margin-left: auto; }
.fl-leg { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.fl-leg[hidden], .fl-leg-add[hidden] { display: none; }
.fl-leg-x { height: 44px; border: 1px solid var(--fx-line); background: #fff; border-radius: 10px; padding: 0 12px; font: inherit; color: var(--fx-muted); cursor: pointer; }
.fl-leg-add { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fl-search { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: end; margin: 0 0 18px; }
.fl-search .f-field input, .fl-search .f-field select { width: 100%; min-width: 0; }
.fl-search .f-field { margin: 0; position: relative; }
.fl-row2 { display: grid; grid-template-columns: repeat(3, minmax(0, .6fr)) minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 10px; align-items: end; grid-column: 1 / -1; }
@media (max-width: 860px) {
    .fl-leg { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fl-leg .fl-leg-x { grid-column: 2; justify-self: end; }
    .fl-search { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fl-row2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fl-row2 button { grid-column: 1 / -1; }
}
/* Narrow phones and Safari Page Zoom (268-360): the three counts share one
   row, cabin and passport take a row each. */
@media (max-width: 400px) {
    .fl-row2 > .f-field:nth-child(n+4), .sx-box .fl-row2 > .f-field:nth-child(n+4) { grid-column: 1 / -1; }
    .fl-trip label { padding: 6px 10px; }
}
/* Field labels wrap as words, never letter by letter, and the "for the visa
   check" hint folds under the word on a narrow screen. */
.fl-search .eb-label, .fl-row2 .eb-label { flex-wrap: wrap; overflow-wrap: normal; row-gap: 0; }
.fl-search .eb-label .to-opt, .fl-row2 .eb-label .to-opt { white-space: normal; }
.fl-suggest { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid var(--fx-line); border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 26, 44, .12); margin: 4px 0 0; padding: 4px; list-style: none; }
.fl-suggest li { padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.fl-suggest li:hover, .fl-suggest li[aria-selected="true"] { background: var(--fx-soft); }
.fl-suggest small { color: var(--fx-muted); }
.fl-promise { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 14px 0 16px; padding: 0; list-style: none; }
.fl-promise li { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--fx-soft); }
.fl-promise .et-i { color: var(--fx-blue); flex: none; }

/* --- Page frame --- */
body.fx-results { background: var(--fx-soft); }
.pg-wrap.fx-page { padding-top: 0; position: relative; }
/* Fits at 268px (Safari Page Zoom 150% on a 402 phone): nothing wider than
   its box; long airport names, emails and codes break where they must. */
.fx-page, .fx-sheet { overflow-wrap: anywhere; }
.fx-page img, .fx-sheet img { max-width: 100%; height: auto; }
.fx-num { font-variant-numeric: tabular-nums; }
.fx-m { color: var(--fx-muted); }
.fx-ok { color: var(--fx-ok); }
.fx-warn { color: var(--fx-warn); }
.fx-stop { color: var(--fx-danger); }
.fx-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fx-row--between { justify-content: space-between; }
.fx-row--tight { gap: 5px; }
.fx-row--wrap { flex-wrap: wrap; gap: 6px 10px; }
.fx-i { flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fx-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--fx-blue); cursor: pointer; min-height: var(--fx-tap); display: inline-flex; align-items: center; }
.fx-link:hover { color: var(--fx-blue-deep); }
.fx-ibtn { width: var(--fx-tap); height: var(--fx-tap); flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: 50%; color: var(--fx-ink); cursor: pointer; position: relative; }
.fx-ibtn:hover { background: var(--fx-soft); }
.fx-ibtn:focus-visible, .fx-chip:focus-visible, .fx-card__a:focus-visible, .fx-btn:focus-visible, .fx-tier:focus-visible, .fx-date:focus-visible { outline: 2px solid var(--fx-blue); outline-offset: 2px; }
.fx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--fx-tap); padding: 0 18px; border-radius: 12px; border: 1.5px solid transparent; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
.fx-btn--primary { background: var(--fx-blue); color: #fff; }
.fx-btn--primary:hover { background: var(--fx-blue-deep); color: #fff; }
.fx-btn--outline { background: #fff; color: var(--fx-blue); border-color: var(--fx-blue); }
.fx-btn--outline:hover { background: var(--fx-blue-soft); }
.fx-btn--lg { min-height: 48px; padding: 0 22px; }
.fx-btn--grow { flex: 1; }
.fx-tag { display: inline-block; font-weight: 700; padding: 1px 7px; border-radius: 6px; line-height: 1.5; white-space: nowrap; }
.fx-tag--best { background: var(--fx-blue-soft); color: var(--fx-blue-deep); }
.fx-tag--ok { background: var(--fx-ok-soft); color: var(--fx-ok); }
.fx-tag--warn { background: var(--fx-warn-soft); color: var(--fx-warn); }
.fx-tag--stop { background: #fbeceb; color: var(--fx-danger); }
.fx-tag--grey { background: #f0f2f5; color: var(--fx-muted); }
.fx-tag--self { white-space: normal; align-self: flex-start; }

/* --- B1-B3 compact header, sticky under the site bar --- */
.fx-head { position: sticky; top: var(--nav-h, 48px); z-index: 40; display: flex; align-items: center; gap: 4px; background: #fff; border-bottom: 1px solid var(--fx-line);
           margin: 0 calc(-1 * var(--pad)); padding: 6px 8px; }
.fx-head__route { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; background: none; border: 0; padding: 4px 6px; min-height: var(--fx-tap); font: inherit; color: var(--fx-ink); cursor: pointer; border-radius: 10px; }
.fx-head__route:hover { background: var(--fx-soft); }
.fx-head__route b { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; }
.fx-head__route .fx-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fx-head .fx-ibtn[data-watch-go] { color: var(--fx-ink); }

/* --- Stepper --- */
.fx-steps { display: flex; gap: 6px; margin: 0 calc(-1 * var(--pad)); padding: 8px var(--pad); background: #fff; border-bottom: 1px solid var(--fx-line); list-style: none; }
.fx-steps li { flex: 1; display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--fx-muted); }
.fx-steps b { width: 22px; height: 22px; border-radius: 50%; background: var(--fx-line); color: var(--fx-muted); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.fx-steps .is-on { color: var(--fx-ink); }
.fx-steps .is-on b { background: var(--fx-blue); color: #fff; }
.fx-notices { margin-top: 10px; }
.fx-notices .et-note { margin: 0 0 8px; }

/* --- B4 date strip (scroll-snap) --- */
.fx-dates { display: flex; gap: 6px; align-items: stretch; margin: 10px 0 0; }
.fx-dates__strip { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px; margin: -2px; flex: 1; min-width: 0; }
.fx-dates__strip::-webkit-scrollbar { display: none; }
.fx-date { flex: none; min-width: 62px; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--fx-tap); padding: 6px 8px; background: #fff; border: 1px solid var(--fx-line); border-radius: var(--fx-r); color: var(--fx-ink); text-decoration: none; white-space: nowrap; }
.fx-date span { color: var(--fx-muted); }
.fx-date b { font-weight: 800; }
.fx-date.is-cheap { border-color: var(--fx-ok); }
.fx-date.is-cheap span, .fx-date.is-cheap b { color: var(--fx-ok); }
.fx-date.is-on { background: var(--fx-blue); border-color: var(--fx-blue); color: #fff; }
.fx-date.is-on span, .fx-date.is-on b { color: #fff; }
.fx-dates__cal { background: #fff; border: 1px solid var(--fx-line); border-radius: var(--fx-r); width: 44px; height: auto; align-self: stretch; }
.fx-dates__note { margin: 6px 0 0; }

/* --- B5 honest line --- */
.fx-honest { margin: 8px 0 0; background: var(--fx-ok-soft); color: var(--fx-ok); border-radius: 10px; padding: 8px 10px; font-weight: 600; }

/* --- Chips rows (cabin, sort, quick), scroll-snap on phone --- */
.fx-chiprow { display: flex; gap: 6px; align-items: center; margin: 8px 0 0; }
.fx-chiprow[data-snap] { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px; margin: 8px -2px 0; }
.fx-chiprow[data-snap]::-webkit-scrollbar { display: none; }
.fx-chiprow[data-snap] > * { scroll-snap-align: start; }
.fx-chiprow--wrap { flex-wrap: wrap; }
.fx-chiprow--static { margin-top: 0; }
.fx-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 0 12px; border: 1px solid var(--fx-line); background: #fff; border-radius: 999px; font: inherit; font-weight: 600; color: var(--fx-ink); white-space: nowrap; cursor: pointer; text-decoration: none; }
.fx-chip:hover { border-color: #cfd6e2; }
.fx-chip.is-on, .fx-chip[aria-pressed="true"] { background: var(--fx-blue); border-color: var(--fx-blue); color: #fff; }
.fx-chip.fx-chip--ok[aria-pressed="true"] { background: var(--fx-ok); border-color: var(--fx-ok); }
.fx-chip__sub { font-weight: 500; opacity: .85; }
.fx-chip--filters { border-color: var(--fx-blue); color: var(--fx-blue); }
.fx-chip--filters[aria-pressed="true"] { color: #fff; }
.fx-chip--block { flex-direction: column; gap: 0; border-radius: 10px; min-height: 48px; padding: 6px 4px; justify-content: center; width: 100%; }
.fx-chip--block small { font-weight: 500; opacity: .8; }
.fx-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--fx-blue); color: #fff; font-weight: 700; }
.fx-badge[hidden] { display: none; }
.fx-chip--filters[aria-pressed="true"] .fx-badge { background: #fff; color: var(--fx-blue); }
.fx-count { margin: 10px 0 0; }

/* --- The result card (B10-B17, B22, B23) --- */
.fx-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.fx-card { background: #fff; border: 1px solid var(--fx-line); border-radius: var(--fx-r); transition: box-shadow .2s, border-color .2s; }
.fx-card[hidden] { display: none; }
.fx-card:hover { box-shadow: 0 6px 20px rgba(15, 26, 44, .08); border-color: #cfd6e2; }
.fx-card__a { display: flex; flex-direction: column; gap: 8px; padding: 12px; color: var(--fx-ink); text-decoration: none; border-radius: var(--fx-r); cursor: pointer; }
.fx-card__a:hover { color: var(--fx-ink); }
.fx-card__tags { align-items: flex-start; flex-wrap: wrap; gap: 4px 6px; }
.fx-card__tags > span:first-child { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.fx-leg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: flex-start; }
.fx-leg--multi { grid-template-columns: 22px auto minmax(0, 1fr) auto; }
.fx-leg + .fx-leg { border-top: 1px dashed var(--fx-line); padding-top: 8px; }
.fx-leg__no { width: 22px; height: 22px; border-radius: 50%; background: var(--fx-soft); color: var(--fx-muted); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
.fx-leg__end { text-align: left; white-space: nowrap; }
.fx-leg__end--arr { text-align: right; }
.fx-time { font-weight: 800; line-height: 1; }
.fx-time sup { color: var(--fx-danger); font-weight: 700; margin-left: 1px; }
.fx-leg__mid { text-align: center; min-width: 0; padding-top: 3px; }
.fx-bar { height: 2px; background: var(--fx-line); position: relative; margin: 4px 0; }
.fx-bar i { position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--fx-blue); transform: translateX(-50%); }
.fx-bar i.is-self { background: var(--fx-warn); }
.fx-leg__stops { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-card__air { flex-wrap: wrap; }
.fx-card__airname { font-weight: 600; }
.fx-logo { position: relative; width: 20px; height: 20px; border-radius: 4px; background: var(--fx-navy); color: #fff; flex: none; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.fx-logo b { font-weight: 800; transform: scale(.72); letter-spacing: -.02em; }
.fx-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.fx-card__meta .fx-i { color: var(--fx-ink); }
.fx-student { background: #fff8e6; border-radius: 8px; padding: 6px 10px; display: flex; justify-content: space-between; gap: 8px; }
.fx-student span { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.fx-card__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; border-top: 1px solid var(--fx-line); padding-top: 8px; }
.fx-card__foot > div:first-child { flex: 1; min-width: 0; }
.fx-card__price { text-align: right; white-space: nowrap; flex: none; max-width: 60%; }
.fx-price { font-weight: 800; color: var(--fx-blue); line-height: 1; }
.fx-empty { margin: 14px 0 0; text-align: center; }
.fx-empty[hidden] { display: none; }

/* --- B18 watch card --- */
.fx-watch { background: #fff; border: 1px solid var(--fx-line); border-radius: var(--fx-r); padding: 12px; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.fx-watch__target { display: flex; flex-direction: column; gap: 4px; }
.fx-range { width: 100%; accent-color: var(--fx-blue); min-height: var(--fx-tap); margin: 0; }
.fx-watch__to { display: grid; grid-template-columns: 1fr; gap: 8px; }
.fx-watch__field { display: flex; align-items: center; gap: 6px; min-height: var(--fx-tap); border: 1px solid var(--fx-line); border-radius: 10px; padding: 0 10px; background: #fff; color: var(--fx-muted); }
.fx-watch__field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: var(--fx-ink); min-height: 42px; padding: 0; }
.fx-watch__field:focus-within { border-color: var(--fx-blue); box-shadow: 0 0 0 3px var(--fx-blue-soft); }
@media (min-width: 600px) { .fx-watch__to { grid-template-columns: 1fr 1fr auto; } }

/* --- B19 other cabins --- */
.fx-cabin { margin: 14px 0 0; }
.fx-cabin[hidden] { display: none; }
.fx-cabin__head { align-items: baseline; flex-wrap: wrap; }

/* --- B20 / C14 trust tiles --- */
.fx-trust3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; font-weight: 600; margin: 12px 0 0; }
.fx-trust3 div { background: #fff; border: 1px solid var(--fx-line); border-radius: 12px; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; line-height: 1.25; }
.fx-trust3 .fx-i { color: var(--fx-ok); }
.fx-trust3--page { margin-top: 14px; }

/* --- B21 back to top --- */
.fx-top { position: fixed; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 45; width: var(--fx-tap); height: var(--fx-tap); border-radius: 50%; background: #fff; border: 1px solid var(--fx-line); box-shadow: 0 4px 12px rgba(0, 0, 0, .15); display: flex; align-items: center; justify-content: center; color: var(--fx-ink); cursor: pointer; }
.fx-top[hidden] { display: none; }
body.has-tabbar .fx-top { bottom: calc(var(--tab-h, 62px) + 16px + env(safe-area-inset-bottom)); }

/* --- Skeleton shimmer while a new search or sheet loads --- */
.fx-skel { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #eceff3 25%, #f7f8fa 50%, #eceff3 75%); background-size: 200% 100%; animation: fx-shimmer 1.2s linear infinite; }
.fx-skel-card { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.fx-skel-box { display: flex; flex-direction: column; gap: 8px; }
@keyframes fx-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* --- Sheets: <dialog>, bottom sheet on a phone, centred on a desktop --- */
.fx-sheet { border: 0; padding: 0; margin: auto 0 0; width: 100%; max-width: 100%; max-height: 85vh; max-height: 85svh; background: var(--fx-soft); color: var(--fx-ink); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(15, 26, 44, .18); overflow: hidden; }
.fx-sheet::backdrop { background: rgba(15, 26, 44, .45); }
.fx-sheet[open] { display: flex; flex-direction: column; animation: fx-up .22s ease-out; }
.fx-sheet__in { display: flex; flex-direction: column; min-height: 0; max-height: 85vh; max-height: 85svh; width: 100%; margin: 0; container-type: inline-size; }
.fx-sheet__head { flex: none; background: #fff; border-bottom: 1px solid var(--fx-line); padding: 8px 16px 10px; display: flex; flex-direction: column; gap: 6px; border-radius: 20px 20px 0 0; }
.fx-sheet__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--fx-line); margin: 0 auto; }
.fx-sheet__title { margin: 0; font-weight: 800; }
.fx-sheet__body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.fx-sheet__body--form { background: var(--fx-soft); }
.fx-sheet__body--form .sx-box { margin: 0; padding: 14px; }
.fx-sheet__bar { flex: none; background: #fff; border-top: 1px solid var(--fx-line); padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.fx-sheet__bar > div { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1 1 auto; }
.fx-sheet__bar .fx-btn { white-space: normal; text-align: center; }
/* The fare sheet's chips wrap inside the sheet instead of running off its edge. */
.fx-sheet .fx-chiprow--static { flex-wrap: wrap; }
@media (max-width: 359px) { .fx-sheet__bar .fx-btn { flex: 1 1 100%; } }
@container (max-width: 449px) { .fx-sheet__bar .fx-btn { flex: 1 1 100%; } .fx-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fx-sheet__bar--filters { gap: 10px; }
.fx-sheet--filters .fx-sheet__in { background: #fff; }
.fx-sheet--filters .fx-sheet__body { gap: 0; padding-top: 0; }
.fx-total { font-weight: 800; color: var(--fx-blue); }
@keyframes fx-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (min-width: 861px) {
    .fx-sheet { margin: auto; max-width: 600px; max-height: 88vh; max-height: 88svh; border-radius: 20px; }
    .fx-sheet__in { max-height: 88vh; max-height: 88svh; }
    .fx-sheet--search { max-width: 920px; }
    .fx-sheet__bar { border-radius: 0 0 20px 20px; padding-bottom: 12px; }
    .fx-sheet__head { border-radius: 20px 20px 0 0; }
    .fx-sheet__grip { display: none; }
}

/* --- Fare sheet: timeline (C3-C6), transfer boxes (C4, C5, C15), care (C16) --- */
.fx-tl { display: flex; flex-direction: column; }
.fx-tl + .fx-tl { margin-top: 8px; border-top: 1px dashed var(--fx-line); padding-top: 8px; }
.fx-tl__slice { font-weight: 700; margin: 0 0 6px; }
.fx-seg { display: grid; grid-template-columns: minmax(44px, max-content) 14px minmax(0, 1fr); gap: 0 8px; align-items: start; }
.fx-seg__t { font-weight: 800; }
.fx-seg__date { display: block; color: var(--fx-danger); font-weight: 700; white-space: nowrap; }
.fx-seg__date--first { color: var(--fx-muted); font-weight: 500; }
.fx-seg__dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--fx-blue); background: #fff; margin: 4px auto 0; box-sizing: border-box; }
.fx-seg__dot.is-end { background: var(--fx-blue); }
.fx-seg--fly { min-height: 40px; }
.fx-seg__line { width: 2px; background: #cfd6e2; margin: 0 auto; height: 100%; min-height: 100%; }
.fx-seg__line.is-self { background: #e9c46a; }
.fx-seg__more { display: none; }
.fx-tl.is-open .fx-seg__more { display: inline; }
.fx-seg--wait { min-height: 60px; }
.fx-box { background: var(--fx-soft); border: 1px solid var(--fx-line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; margin: 6px 0; min-width: 0; }
.fx-box--warn { border-color: #e9c46a; background: #fff8e6; }
.fx-tr { display: flex; align-items: center; gap: 6px; }
.fx-box .fx-tr, .fx-visa .fx-tr { align-items: flex-start; }
.fx-visa { background: #fff; border: 1px solid var(--fx-line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.fx-tl__foot { margin-top: 2px; }
.fx-care { background: var(--fx-ok-soft); border-radius: 12px; padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start; }
.fx-care .fx-i { color: var(--fx-ok); margin-top: 2px; }
.fx-care b { color: var(--fx-ok); }

/* --- Fare tiers (C8-C12) --- */
.fx-tiers { display: flex; flex-direction: column; gap: 10px; }
.fx-tier { background: #fff; border: 1px solid var(--fx-line); border-radius: var(--fx-r); padding: 12px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.fx-tier.is-selected { border-color: var(--fx-blue); box-shadow: 0 0 0 2px var(--fx-blue-soft); }
.fx-tier__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.fx-tier__head > div { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.fx-tier__price { margin-top: 2px; }
.fx-tier__price small { color: var(--fx-muted); font-weight: 500; }
.fx-tier__rows { display: flex; flex-direction: column; gap: 5px; }
.fx-tier__rows .fx-i { color: var(--fx-ink); }
.fx-tier:not(.is-open) .fx-tier__rows .fx-tr:nth-child(n+4) { display: none; }
.fx-tier__foot { display: flex; justify-content: space-between; align-items: center; }
.fx-tier__foot .fx-link { min-height: 36px; }

/* --- C13 price insight --- */
.fx-insight { background: #fff; border: 1px solid var(--fx-line); border-radius: var(--fx-r); padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.fx-spark { width: 100%; height: 60px; display: block; }
.fx-spark line { stroke: var(--fx-line); stroke-width: 1; }
.fx-spark polyline { fill: none; stroke: var(--fx-blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fx-spark circle { fill: var(--fx-muted); }
.fx-spark circle.is-low { fill: var(--fx-ok); }
.fx-spark circle.is-high { fill: var(--fx-warn); }

/* --- Notifications sheet (B3) --- */
.fx-notif-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 20px 10px; }
.fx-notif-empty .fx-i { color: var(--fx-blue); }

/* --- Filter sheet (B8) --- */
.fx-fsec { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--fx-line); }
.fx-fsec--last { border-bottom: 0; }
.fx-fsec h3 { margin: 0; font-weight: 700; }
.fx-lr { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: var(--fx-tap); }
.fx-lr .fx-m { display: block; font-weight: 400; }
.fx-blocks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.fx-sw { appearance: none; -webkit-appearance: none; width: 40px; height: 24px; border-radius: 999px; background: var(--fx-line); position: relative; flex: none; cursor: pointer; margin: 0; transition: background .15s; }
.fx-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.fx-sw:checked { background: var(--fx-blue); }
.fx-sw:checked::after { transform: translateX(16px); }
.fx-sw:disabled { opacity: .5; cursor: default; }
.fx-ck { width: 20px; height: 20px; accent-color: var(--fx-blue); flex: none; margin: 0; }

/* --- Desktop: two columns of cards, roomier header --- */
@media (min-width: 861px) {
    .fx-head { margin: 0 0 0; border: 1px solid var(--fx-line); border-radius: 0 0 var(--fx-r) var(--fx-r); padding: 8px 12px; }
    .fx-steps { margin: 0; padding: 10px 14px; background: transparent; border: 0; max-width: 420px; }
    .fx-list { gap: 12px; }
    /* One wide card per row: the flight on the left, the price on the right. */
    .fx-card__a { display: grid; grid-template-columns: minmax(0, 1fr) 210px; grid-template-rows: repeat(6, auto); gap: 8px 16px; padding: 14px 16px; }
    .fx-card__a > * { grid-column: 1; min-width: 0; }
    .fx-card__foot { grid-column: 2; grid-row: 1 / 7; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right; border-top: 0; border-left: 1px solid var(--fx-line); padding: 0 0 0 16px; gap: 4px; }
    .fx-card__foot > div:first-child { flex: none; order: 2; }
    .fx-card__price { white-space: normal; max-width: 100%; }
    .fx-card__price .fx-m span { display: block; }
    .fx-chiprow[data-snap] { flex-wrap: wrap; overflow: visible; }
    .fx-date { min-width: 76px; }
    .fx-watch { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-skel { animation: none; }
    .fx-sheet[open] { animation: none; }
    .fx-card, .fx-sw, .fx-sw::after { transition: none; }
}