/* Migration: legacy Search presentation excludes body.search-page. Other pages keep existing rules. Search uses search.css and ui-primitives.css; retain legacy declarations until remaining consumers migrate. */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700&display=swap');
@import url('./ui-primitives.css?v=20261002-1');

:root {
    /* Canonical shared tokens. New components use only the --ui-* namespace. */
    --ui-font-family: "Heebo", Arial, "Segoe UI", sans-serif;
    --ui-font-body: 16px;
    --ui-font-support: 14px;
    --ui-font-label: 14px;
    --ui-font-card: 20px;
    --ui-font-section: 22px;
    --ui-font-page: 32px;
    --ui-font-hero: 36px;
    --ui-weight-body: 400;
    --ui-weight-support: 500;
    --ui-weight-label: 600;
    --ui-weight-heading: 700;
    --ui-line-body: 1.6;
    --ui-line-support: 1.5;
    --ui-line-control: 1.5;
    --ui-line-heading: 1.25;
    --ui-color-primary: #1769d2;
    --ui-color-primary-hover: #1257b0;
    --ui-color-primary-pressed: #104a96;
    --ui-color-tint: #eff6ff;
    --ui-color-page: #f7f9fc;
    --ui-color-surface: #fff;
    --ui-color-surface-muted: #f1f5f9;
    --ui-color-text: #172b4d;
    --ui-color-muted: #526277;
    --ui-color-border: #e2e8f0;
    --ui-color-input-border: #94a3b8;
    --ui-color-disabled: #526277;
    --ui-color-disabled-bg: #e2e8f0;
    --ui-color-success: #166534;
    --ui-color-success-bg: #f0fdf4;
    --ui-color-success-border: #bbf7d0;
    --ui-color-warning: #92400e;
    --ui-color-warning-bg: #fffbeb;
    --ui-color-warning-border: #fde68a;
    --ui-color-error: #b91c1c;
    --ui-color-error-hover: #991b1b;
    --ui-color-error-bg: #fef2f2;
    --ui-color-error-border: #fecaca;
    --ui-color-info: #1257b0;
    --ui-color-info-bg: #eff6ff;
    --ui-color-info-border: #bfdbfe;
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-6: 24px;
    --ui-space-8: 32px;
    --ui-space-12: 48px;
    --ui-space-16: 64px;
    --ui-width-shell: 1180px;
    --ui-width-standard: 1050px;
    --ui-width-form: 760px;
    --ui-width-auth: 440px;
    --ui-gutter-desktop: 24px;
    --ui-gutter-mobile: 16px;
    --ui-gutter: var(--ui-gutter-desktop);
    --ui-radius-small: 6px;
    --ui-radius-control: 10px;
    --ui-radius-menu: 12px;
    --ui-radius-card: 16px;
    --ui-control-height: 48px;
    --ui-touch-min: 44px;
    --ui-icon-size: 20px;
    --ui-icon-stroke: 1.8;
    --ui-focus-outline: 2px solid var(--ui-color-primary);
    --ui-focus-offset: 3px;
    --ui-focus-ring: 0 0 0 3px rgba(23,105,210,.16);
    --ui-shadow-card: 0 4px 16px rgba(23,43,77,.05);
    --ui-shadow-menu: 0 8px 24px rgba(23,43,77,.1);

    /* Compatibility aliases preserve values used by the previous shared phase. */
    --font-ui: var(--ui-font-family);
    --color-primary: var(--ui-color-primary);
    --color-primary-hover: var(--ui-color-primary-hover);
    --color-primary-pressed: var(--ui-color-primary-pressed);
    --color-sky: var(--ui-color-tint);
    --color-page: var(--ui-color-page);
    --color-surface: var(--ui-color-surface);
    --color-text: var(--ui-color-text);
    --color-muted: var(--ui-color-muted);
    --color-border: var(--ui-color-border);
    --color-input-border: var(--ui-color-input-border);
    --color-positive: var(--ui-color-success);
    --color-positive-bg: var(--ui-color-success-bg);
    --color-warning: var(--ui-color-warning);
    --color-warning-bg: var(--ui-color-warning-bg);
    --color-error: var(--ui-color-error);
    --color-error-bg: var(--ui-color-error-bg);
    --space-1: var(--ui-space-1);
    --space-2: var(--ui-space-2);
    --space-3: var(--ui-space-3);
    --space-4: var(--ui-space-4);
    --space-6: var(--ui-space-6);
    --space-8: var(--ui-space-8);
    --space-12: var(--ui-space-12);
    --space-16: var(--ui-space-16);
    --radius-small: var(--ui-radius-small);
    --radius-input: var(--ui-radius-control);
    --radius-menu: var(--ui-radius-menu);
    --radius-panel: var(--ui-radius-card);
    --height-control: var(--ui-control-height);
    --shadow-menu: var(--ui-shadow-menu);

    /* Legacy visual tokens: retain until result cards and personal pages migrate.
       In particular, do not alias the old 16px/20px radii to new controls/cards. */
    --sky-50: #f4faff;
    --sky-100: #e6f4ff;
    --sky-400: #4eb7f5;
    --sky-500: #249ee9;
    --blue-600: #1478d1;
    --blue-700: #0b5fab;
    --navy-900: #12304a;
    --slate-600: #61758a;
    --line: #dce9f3;
    --radius-control: 16px;
    --radius-card: 20px;
    --shadow-soft: 0 12px 32px rgba(51, 111, 154, .08);
    --shadow-hover: 0 14px 30px rgba(36, 158, 233, .18);
}

/* Unified regular and optional cheaper-alternative alert flow. */
:where(body:not(.search-page)) .unified-alert-form {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-inline: 0;
    padding: 20px !important;
    gap: 16px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-panel) !important;
    background: var(--color-surface) !important;
    box-shadow: 0 10px 28px rgba(23,43,77,.07) !important;
    color: var(--color-text) !important;
    font-family: var(--font-ui);
}
:where(body:not(.search-page)) .unified-alert-form .alert-form-title { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; color: var(--color-text); font-size: 1.04rem; font-weight: 700; }
:where(body:not(.search-page)) .unified-alert-form .alert-form-title svg { width: 21px; height: 21px; color: #273444; }
:where(body:not(.search-page)) .unified-alert-form .alert-form-title small { margin-inline-start: auto; color: var(--color-muted); font-size: .82rem; font-weight: 500; }
:where(body:not(.search-page)) .unified-alert-form .alert-form-section { display: grid; width: 100%; min-width: 0; box-sizing: border-box; gap: 14px; margin-inline: 0; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-menu); background: #fff; }
:where(body:not(.search-page)) .unified-alert-form .alert-alternative-section { background: #fbfdff; }
:where(body:not(.search-page)) .unified-alert-form .alert-section-heading { display: flex; align-items: center; gap: 11px; }
:where(body:not(.search-page)) .unified-alert-form .alert-section-number { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: var(--color-primary); background: var(--color-sky); font-weight: 700; }
:where(body:not(.search-page)) .unified-alert-form .alert-section-heading div { display: grid; gap: 2px; }
:where(body:not(.search-page)) .unified-alert-form .alert-section-heading strong { color: var(--color-text); font-size: .96rem; }
:where(body:not(.search-page)) .unified-alert-form .alert-section-heading small { color: var(--color-muted); font-size: .78rem; font-weight: 400; }
:where(body:not(.search-page)) .unified-alert-form input[type="number"], :where(body:not(.search-page)) .unified-alert-form select { min-height: 44px; border: 1px solid var(--color-input-border) !important; border-radius: var(--radius-input) !important; color: var(--color-text); background: #fff; font: 500 .9rem var(--font-ui); }
:where(body:not(.search-page)) .unified-alert-form input:focus, :where(body:not(.search-page)) .unified-alert-form select:focus { outline: 0; border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(23,105,210,.12); }
:where(body:not(.search-page)) .unified-alert-form input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--color-primary); }
:where(body:not(.search-page)) .alternative-master-toggle, :where(body:not(.search-page)) .alternative-option { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; color: var(--color-text); }
:where(body:not(.search-page)) .alternative-master-toggle { padding: 12px 14px; border: 1px solid #cbdff5; border-radius: var(--radius-input); background: var(--color-sky); font-weight: 600; }
:where(body:not(.search-page)) .alternative-settings { display: grid; width: 100%; min-width: 0; box-sizing: border-box; gap: 14px; margin: 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--color-border); }
:where(body:not(.search-page)) .alternative-settings[hidden] { display: none; }
:where(body:not(.search-page)) .alternative-option span { display: grid; gap: 2px; }
:where(body:not(.search-page)) .alternative-option strong { font-size: .9rem; font-weight: 600; }
:where(body:not(.search-page)) .alternative-option small, :where(body:not(.search-page)) .alternative-thresholds small { color: var(--color-muted); font-size: .76rem; font-weight: 400; }
:where(body:not(.search-page)) .alternative-option-with-limit { display: grid; width: 100%; min-width: 0; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; gap: 10px 16px; }
:where(body:not(.search-page)) .alternative-option-with-limit > *, :where(body:not(.search-page)) .alternative-thresholds > * { min-width: 0; }
:where(body:not(.search-page)) .alternative-limit-label, :where(body:not(.search-page)) .alternative-thresholds label { display: grid; min-width: 0; gap: 6px; color: var(--color-muted); font-size: .8rem; font-weight: 600; }
:where(body:not(.search-page)) .alternative-limit-label select, :where(body:not(.search-page)) .alternative-thresholds input { width: 100%; height: 44px; min-width: 0; box-sizing: border-box; }
:where(body:not(.search-page)) .alternative-field-error { grid-column: 2; min-height: 0; color: var(--color-error); font-size: .78rem; }
:where(body:not(.search-page)) .alternative-field-error:empty { display: none; }
:where(body:not(.search-page)) .alternative-thresholds { display: grid; width: 100%; min-width: 0; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; gap: 16px; padding-top: 2px; }
:where(body:not(.search-page)) .alternative-thresholds label { grid-template-rows: minmax(1.5em,auto) 44px; align-content: start; }
:where(body:not(.search-page)) .alternative-thresholds label > span { align-self: end; }
:where(body:not(.search-page)) .alternative-threshold-equivalent, :where(body:not(.search-page)) .alternative-threshold-error { grid-column: 1 / -1; }
:where(body:not(.search-page)) .alternative-threshold-equivalent { line-height: 1.5; }
:where(body:not(.search-page)) .alert-form-actions { display: flex; width: 100%; box-sizing: border-box; justify-content: flex-start; margin-inline: 0; }
:where(body:not(.search-page)) .unified-alert-form .btn-alert { min-height: 46px; padding-inline: 24px; border-radius: var(--radius-input); background: var(--color-primary); font-family: var(--font-ui); font-weight: 600; box-shadow: none; }
:where(body:not(.search-page)) .unified-alert-form .btn-alert:hover { background: var(--color-primary-hover); }
@media (max-width: 700px) {
    :where(body:not(.search-page)) .unified-alert-form { padding: 14px !important; }
    :where(body:not(.search-page)) .unified-alert-form .alert-form-title small { width: 100%; margin-inline-start: 30px; }
    :where(body:not(.search-page)) .unified-alert-form .alert-form-section { padding: 13px; }
    :where(body:not(.search-page)) .alternative-option-with-limit, :where(body:not(.search-page)) .alternative-thresholds { grid-template-columns: 1fr; }
    :where(body:not(.search-page)) .alternative-thresholds label { grid-template-rows: auto 44px; }
    :where(body:not(.search-page)) .alternative-field-error { grid-column: 1; }
    :where(body:not(.search-page)) .alert-form-actions, :where(body:not(.search-page)) .unified-alert-form .btn-alert { width: 100%; }
}
body:where(:not(.search-page)).flight-theme {
    min-height: 100vh;
    color: var(--navy-900);
    background: radial-gradient(circle at 12% 4%, rgba(105,196,249,.18), transparent 26rem), linear-gradient(180deg,#eef8ff 0,#f9fcff 390px,#f5f8fc 100%);
}
:where(body:not(.search-page)) .home-hero {
    position: relative;
    box-sizing: border-box;
    min-height: 360px;
    padding: 74px 20px 112px;
    overflow: hidden;
    background:
        linear-gradient(180deg,rgba(6,36,62,.32) 0%,rgba(11,58,91,.30) 55%,rgba(10,48,77,.52) 100%),
        url("../images/hero-clouds-v1.png") center 53% / cover no-repeat;
}
:where(body:not(.search-page)) .home-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 110px;
    background: linear-gradient(180deg,transparent,rgba(7,35,57,.18));
    pointer-events: none;
}
.site-header-shell {
    position: sticky;
    top: 0;
    z-index: 10000;
    width: 100%;
    margin: 0;
    border-bottom: 1px solid rgba(204,226,242,.92);
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 24px rgba(42,93,129,.07);
    backdrop-filter: blur(16px);
}
.site-header-shell .site-header {
    box-sizing: border-box; width: min(1220px,calc(100% - 32px)); min-height: 72px; margin: 0 auto; padding: 10px 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
    display: flex; align-items: center; gap: 0;
}
.site-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--navy-900); text-decoration: none; white-space: nowrap; }
.site-brand-mark {
    width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; color: #fff;
    background: linear-gradient(145deg,var(--sky-400),var(--blue-700)); box-shadow: 0 8px 18px rgba(36,158,233,.24); font-size: 1.15rem;
}
.site-brand-copy { display: grid; line-height: 1.05; }
.site-brand-copy strong { font-size: 1rem; letter-spacing: -.02em; }
.site-brand-copy small { margin-top: 4px; color: #7790a5; font-size: .68rem; font-weight: 700; }
.site-header .navbar-menu { flex: 0 0 auto; justify-content: flex-start; gap: 4px; margin-inline-start: 20px; margin-inline-end: auto; }
.site-header .navbar-menu a {
    margin: 0; padding: 10px 12px; border-radius: 13px; color: #49647b; font-size: .86rem;
    transition: color .2s,background .2s,transform .2s;
}
.site-header .navbar-menu a:hover { color: var(--blue-700); background: var(--sky-100); transform: translateY(-1px); }
.site-header .navbar-menu a.active { border: 0; padding-bottom: 10px; color: var(--blue-700); background: var(--sky-100); }
.site-header .navbar-left { position: relative; display: flex; flex-direction: row; align-items: center; margin: 0; gap: 10px; direction: rtl; }
.site-header .currency-select { height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 14px; color: var(--navy-900); background: #fff; }
.account-menu { position: relative; }
.account-menu > summary { list-style: none; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-trigger,.account-login {
    min-height: 42px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 9px; padding: 5px 10px;
    border: 1px solid transparent; border-radius: 14px; color: var(--slate-600); background: transparent;
    font-size: .82rem; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .2s,border-color .2s,color .2s;
}
.account-trigger:hover,.account-login:hover,.account-menu[open] .account-trigger { color: var(--blue-700); border-color: var(--line); background: var(--sky-50); }
.account-avatar { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: var(--blue-700); background: var(--sky-100); }
.account-greeting strong { color: var(--navy-900); }
.account-chevron { width: 7px; height: 7px; margin-inline-start: 2px; border-inline-end: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.account-menu[open] .account-chevron { transform: rotate(225deg) translate(-1px,-1px); }
.account-dropdown {
    position: absolute; top: calc(100% + 9px); left: 0; z-index: 10020; width: 210px; padding: 8px;
    border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: 0 18px 42px rgba(30,76,111,.16);
}
.account-dropdown a { display: block; padding: 10px 12px; border-radius: 11px; color: #49647b; font-size: .86rem; font-weight: 700; text-decoration: none; text-align: right; }
.account-dropdown a:hover { color: var(--blue-700); background: var(--sky-100); }
.account-dropdown-separator { display: block; height: 1px; margin: 6px 5px; background: var(--line); }
.account-dropdown .account-logout { color: #b42318; }
.menu-toggle {
    display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 14px; background: #fff;
    cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.menu-toggle span { width: 19px; height: 2px; border-radius: 2px; background: var(--navy-900); transition: transform .2s,opacity .2s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
:where(body:not(.search-page)) .home-intro { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; text-align: center; }
:where(body:not(.search-page)) .home-intro .eyebrow { display: inline-flex; padding: 7px 12px; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; color: #fff; background: rgba(255,255,255,.12); font-size: .78rem; font-weight: 800; backdrop-filter: blur(8px); }
:where(body:not(.search-page)) .home-intro h1 { margin: 14px 0 8px; color: #fff; font-size: clamp(2rem,3.7vw,3.15rem); line-height: 1.12; white-space: nowrap; letter-spacing: -.045em; text-shadow: 0 3px 18px rgba(2,22,39,.30); }
:where(body:not(.search-page)) .home-intro p { margin: 0; color: rgba(255,255,255,.92); font-size: 1.05rem; line-height: 1.7; text-shadow: 0 2px 10px rgba(2,22,39,.28); }
:where(body:not(.search-page)) .home-content { position: relative; z-index: 3; max-width: 1180px; margin: -102px auto 40px; }
body:where(:not(.search-page)).flight-theme #searchForm { padding: 22px; border: 1px solid rgba(211,229,242,.95); border-radius: 24px; background: rgba(255,255,255,.96); box-shadow: var(--shadow-soft); }
body:where(:not(.search-page)).flight-theme .top-pills-bar .trip-pill { order: 1; }
body:where(:not(.search-page)).flight-theme .top-pills-bar .pax-pill { order: 2; }
body:where(:not(.search-page)).flight-theme .top-pills-bar .baggage-pill { order: 3; }
:where(body:not(.search-page)) .service-benefits {
    width: min(860px,calc(100% - 36px)); margin: 24px auto 30px; display: flex; align-items: center; justify-content: center;
    color: var(--navy-900);
}
:where(body:not(.search-page)) .service-benefit { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: .98rem; font-weight: 750; white-space: nowrap; }
:where(body:not(.search-page)) .service-benefit-icon { width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #c9e5f7; border-radius: 15px; color: var(--blue-700); background: linear-gradient(145deg,#fff,var(--sky-100)); box-shadow: 0 8px 20px rgba(51,111,154,.08); }
:where(body:not(.search-page)) .service-benefit-icon svg { width: 25px; height: 25px; }
:where(body:not(.search-page)) .service-benefit-divider { width: 1px; height: 38px; margin: 0 26px; flex: 0 0 auto; background: linear-gradient(180deg,transparent,#bad9ed,transparent); }
:where(body:not(.search-page)) .load-more-flights { margin: 24px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
:where(body:not(.search-page)) .visible-flights-status { color: var(--slate-600); font-size: .82rem; }
:where(body:not(.search-page)) .btn-load-more-flights { min-width: 220px; padding: 12px 24px; border: 1px solid #b8dff7; border-radius: var(--radius-control); color: var(--blue-700); background: #fff; font-size: .94rem; font-weight: 800; cursor: pointer; box-shadow: 0 8px 20px rgba(51,111,154,.07); transition: transform .2s,box-shadow .2s,background .2s; }
:where(body:not(.search-page)) .btn-load-more-flights:hover { background: var(--sky-50); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
body:where(:not(.search-page)).flight-theme .search-field-cell { border-color: var(--line); border-radius: var(--radius-control); box-shadow: none; transition: border-color .2s,box-shadow .2s,transform .2s; }
body:where(:not(.search-page)).flight-theme .search-field-cell:focus-within { border-color: var(--sky-400); box-shadow: 0 0 0 4px rgba(78,183,245,.12); transform: translateY(-1px); }
body:where(:not(.search-page)).flight-theme .pill-select-btn,body:where(:not(.search-page)).flight-theme .skyscan-pill-btn { border-color: var(--line); border-radius: 14px; box-shadow: none; }
body:where(:not(.search-page)).flight-theme .btn-search-main,body:where(:not(.search-page)).flight-theme .btn-book,body:where(:not(.search-page)).flight-theme .btn-alert,body:where(:not(.search-page)).flight-theme .btn-submit,body:where(:not(.search-page)).flight-theme .btn-apply-count {
    border-radius: var(--radius-control); background: linear-gradient(135deg,var(--sky-500),var(--blue-600)); box-shadow: 0 8px 18px rgba(36,158,233,.16);
    transition: transform .2s,box-shadow .2s,filter .2s;
}
body:where(:not(.search-page)).flight-theme .btn-search-main:hover,body:where(:not(.search-page)).flight-theme .btn-book:hover,body:where(:not(.search-page)).flight-theme .btn-alert:hover,body:where(:not(.search-page)).flight-theme .btn-submit:hover,body:where(:not(.search-page)).flight-theme .btn-apply-count:hover {
    filter: saturate(1.06); transform: translateY(-2px); box-shadow: var(--shadow-hover);
}
body:where(:not(.search-page)).flight-theme .flight-card,body:where(:not(.search-page)).flight-theme .price-intelligence-panel,body:where(:not(.search-page)).flight-theme .no-results-card {
    border-color: var(--line); border-radius: var(--radius-card); box-shadow: 0 8px 24px rgba(51,111,154,.06); transition: border-color .2s,box-shadow .2s,transform .2s;
}
body:where(:not(.search-page)).flight-theme .flight-card:hover { border-color: #b8dff7; box-shadow: 0 15px 32px rgba(51,111,154,.11); transform: translateY(-2px); }
:where(body:not(.search-page)) .flight-info { min-width: 0; }
:where(body:not(.search-page)) .flight-actions-panel { width: 310px; flex: 0 0 310px; margin-inline-start: 26px; text-align: left; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
:where(body:not(.search-page)) .flight-actions-panel .flight-price { margin-bottom: 5px; text-align: left; transition: none; }
:where(body:not(.search-page)) .flight-actions-panel .btn-book-primary {
    position: relative; width: 100%; min-height: 40px; box-sizing: border-box; margin: 0; padding: 8px 48px 8px 18px;
    display: flex; align-items: center; justify-content: center; color: #fff; text-align: center;
    transition: box-shadow .2s,filter .2s;
}
:where(body:not(.search-page)) .btn-book-primary .takeoff-icon { position: absolute; left: 18px; width: 23px; height: 23px; transform: scaleX(-1); }
:where(body:not(.search-page)) .flight-secondary-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(64px,72px) minmax(0,1fr); margin-top: 6px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
:where(body:not(.search-page)) .flight-secondary-actions .save-flight-form { min-width: 0; margin: 0; display: flex; }
:where(body:not(.search-page)) .flight-secondary-actions .save-flight-form .btn-save-flight { min-height: 100%; }
:where(body:not(.search-page)) .flight-secondary-action {
    width: 100%; min-width: 0; min-height: 36px; margin: 0; padding: 6px 4px; border: 0; border-inline-start: 1px solid var(--line);
    border-radius: 0; color: #49647b; background: #fff; font-family: var(--font-ui); font-size: calc(.78rem - 2px); font-weight: 700;
    text-align: center; cursor: pointer; white-space: nowrap; transition: color .2s,background .2s;
}
:where(body:not(.search-page)) .flight-secondary-actions > :first-child { border-inline-start: 0; }
:where(body:not(.search-page)) .flight-secondary-action:hover { color: var(--blue-700); background: var(--sky-50); }
:where(body:not(.search-page)) .flight-secondary-action.btn-compare,:where(body:not(.search-page)) .flight-secondary-action.btn-save-flight { display: block; margin: 0; background: #fff; color: #49647b; }
:where(body:not(.search-page)) .flight-secondary-action.btn-compare:hover,:where(body:not(.search-page)) .flight-secondary-action.btn-save-flight:hover { background: var(--sky-50); color: var(--blue-700); }
:where(body:not(.search-page)) .flight-secondary-action.btn-compare.selected { background: var(--sky-100); color: var(--blue-700); }
:where(body:not(.search-page)) .flight-secondary-action:disabled { cursor: wait; opacity: .72; }
:where(body:not(.search-page)) .flight-secondary-action.is-saved:disabled { cursor: default; opacity: 1; color: #166534; background: #f0fdf4; }
:where(body:not(.search-page)) .flight-save-toast { position: fixed; left: 50%; bottom: 28px; z-index: 11000; max-width: min(430px,calc(100% - 32px)); padding: 12px 20px; border-radius: 15px; color: #fff; background: #166534; box-shadow: 0 16px 38px rgba(15,23,42,.22); font-size: .88rem; font-weight: 800; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%,18px); transition: opacity .22s,transform .22s; }
:where(body:not(.search-page)) .flight-save-toast.error { background: #b42318; }
:where(body:not(.search-page)) .flight-save-toast.show { opacity: 1; transform: translate(-50%,0); }
body.flight-theme .dropdown-menu-popover,body.flight-theme .skyscan-popover { border-color: var(--line); border-radius: 18px; box-shadow: 0 18px 45px rgba(30,76,111,.15); }
@media (max-width: 900px) {
    .site-header-shell { top: 0; width: 100%; margin: 0; }
    .site-header-shell .site-header { width: calc(100% - 24px); min-height: 64px; padding: 9px 0; flex-wrap: wrap; flex-direction: row; text-align: initial; }
    .site-brand { margin-inline-end: auto; }
    .site-brand-mark { width: 40px; height: 40px; border-radius: 13px; }
    .site-brand-copy small { display: none; }
    .menu-toggle { display: inline-flex; }
    .site-header .navbar-menu,.site-header .navbar-left { display: none; width: 100%; }
    .site-header.menu-open .navbar-menu { display: grid; grid-template-columns: 1fr; gap: 4px; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); }
    .site-header.menu-open .navbar-menu a { width: 100%; padding: 12px 13px; text-align: right; }
    .site-header.menu-open .navbar-left { display: flex; flex-direction: row; align-items: stretch; padding-top: 10px; border-top: 1px solid var(--line); }
    .site-header .navbar-left { justify-content: space-between; }
    .account-menu { position: static; }
    .account-dropdown { right: 0; left: auto; width: min(280px,calc(100vw - 44px)); }
    :where(body:not(.search-page)) .home-hero { min-height: 330px; margin-top: 0; padding: 60px 16px 100px; background-position: 44% 55%; }
    :where(body:not(.search-page)) .home-content { margin-top: -82px; }
    body:where(:not(.search-page)).flight-theme #searchForm { padding: 15px; border-radius: 20px; }
    :where(body:not(.search-page)) .service-benefits { width: 100%; margin: 20px auto 26px; gap: 8px; }
    :where(body:not(.search-page)) .service-benefit { gap: 7px; font-size: .78rem; white-space: normal; text-align: center; }
    :where(body:not(.search-page)) .service-benefit-icon { width: 37px; height: 37px; border-radius: 13px; }
    :where(body:not(.search-page)) .service-benefit-icon svg { width: 21px; height: 21px; }
    :where(body:not(.search-page)) .service-benefit-divider { height: 32px; margin: 0 5px; }
    :where(body:not(.search-page)) .flight-actions-panel { width: 100%; flex-basis: auto; margin: 8px 0 0; align-self: stretch; }
    :where(body:not(.search-page)) .flight-actions-panel .flight-price { text-align: right; }
    :where(body:not(.search-page)) .flight-secondary-action { min-height: 45px; font-size: calc(.8rem - 2px); }
}
@media (max-width: 520px) {
    .site-brand-copy strong { font-size: .9rem; }
    .site-header.menu-open .navbar-left { flex-direction: column; }
    .account-trigger,.account-login,.site-header .currency-select { width: 100%; justify-content: center; }
    .site-header.menu-open .header-last-search-link { width: 100%; justify-content: center; }
    :where(body:not(.search-page)) .home-hero { min-height: 300px; padding-top: 48px; }
    :where(body:not(.search-page)) .home-intro h1 { font-size: clamp(1.35rem,6.2vw,1.75rem); }
    :where(body:not(.search-page)) .home-intro p { font-size: .9rem; }
    :where(body:not(.search-page)) .service-benefits { align-items: stretch; }
    :where(body:not(.search-page)) .service-benefit { flex-direction: column; justify-content: flex-start; font-size: .72rem; line-height: 1.35; }
    :where(body:not(.search-page)) .service-benefit-divider { align-self: center; }
    :where(body:not(.search-page)) .flight-secondary-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
    :where(body:not(.search-page)) .flight-secondary-actions .btn-alert-toggle { grid-column: 1 / -1; border-inline-start: 0; }
    :where(body:not(.search-page)) .flight-secondary-actions .btn-compare { grid-column: 2; grid-row: 2; border-top: 1px solid var(--line); }
    :where(body:not(.search-page)) .flight-secondary-actions .save-flight-form { grid-column: 1; grid-row: 2; border-top: 1px solid var(--line); }
    :where(body:not(.search-page)) .flight-secondary-actions .save-flight-form .btn-save-flight { border-inline-start: 0; }
    :where(body:not(.search-page)) .flight-secondary-action { padding-inline: 8px; font-size: .75rem; }
}
/* Phase 1: isolated foundation, header, hero and search.
   Legacy result/filter styles above intentionally remain unchanged. */
.site-header-shell, .site-header-shell *, :where(body:not(.search-page)) .home-hero, :where(body:not(.search-page)) .home-hero *, :where(body:not(.search-page)) #searchForm, :where(body:not(.search-page)) #searchForm * { box-sizing: border-box; }
.site-header-shell, .site-header-shell button, .site-header-shell select, :where(body:not(.search-page)) .home-hero, :where(body:not(.search-page)) #searchForm, :where(body:not(.search-page)) #searchForm button, :where(body:not(.search-page)) #searchForm input, :where(body:not(.search-page)) #searchForm select {
    font-family: var(--font-ui);
}
/* Flatpickr mounts its existing calendar outside the search form. */
.flatpickr-calendar, .flatpickr-calendar input, .flatpickr-calendar select, .flatpickr-calendar button { font-family: var(--font-ui); }
.site-header-shell { background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: none; backdrop-filter: none; }
.site-header-shell .site-header { width: min(var(--ui-width-shell),calc(100% - 2 * var(--ui-gutter))); min-height: 72px; padding-block: 12px; gap: 16px; }
.site-header .site-brand { gap: 10px; color: var(--color-text); min-width: 0; }
.site-header .site-brand-mark { width: 36px; height: 36px; border-radius: var(--radius-input); background: var(--color-primary); box-shadow: none; }
.site-brand-copy strong { font-size: 16px; font-weight: 700; letter-spacing: normal; }
.site-brand-copy small { font-size: 12px; color: var(--color-muted); font-weight: 400; line-height: 1.4; }
.site-header .navbar-menu { display: flex; flex-wrap: nowrap; margin-inline-start: 8px; gap: 4px; }
.site-header .navbar-menu a { min-height: 44px; display: inline-flex; align-items: center; padding: 10px 12px; border-radius: var(--radius-input); font-size: 14px; font-weight: 600; color: var(--color-muted); white-space: nowrap; }
.site-header .navbar-menu a:hover, .site-header .navbar-menu a.active { color: var(--color-primary); background: var(--color-sky); transform: none; }
.site-header .navbar-left { gap: 8px; min-width: 0; }
.site-header .currency-select { height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-input); color: var(--color-text); font-size: 14px; font-weight: 600; }
.account-trigger, .account-login { min-height: 44px; border-radius: var(--radius-input); color: var(--color-muted); font-size: 14px; font-weight: 500; }
.account-greeting { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.account-greeting strong { color: var(--color-text); font-weight: 600; }
.account-avatar { background: var(--color-sky); color: var(--color-primary); border-radius: var(--radius-input); }
.account-dropdown { border-color: var(--color-border); border-radius: var(--radius-menu); box-shadow: var(--shadow-menu); }
.account-dropdown a { min-height: 44px; font-size: 14px; font-weight: 500; }
.site-header-shell [data-last-search-link][hidden], .recommendation[data-last-search-link][hidden] { display: none !important; }
.site-header-shell--compact .site-header { min-height: 64px; }
.site-header-shell--compact .site-brand-copy small { display: none; }
.header-notification-link { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-input); color: var(--color-text); text-decoration: none; }
.header-notification-link:hover { color: var(--color-primary); background: var(--color-sky); }
.header-notification-count { position: absolute; inset-block-start: -3px; inset-inline-end: -3px; min-width: 18px; height: 18px; padding-inline: 3px; border-radius: 9px; color: #fff; background: var(--color-error); font: 600 11px/18px var(--font-ui); text-align: center; }
.header-last-search-link { display: inline-flex; min-height: 44px; align-items: center; padding-inline: 10px; border-radius: var(--radius-input); color: var(--color-muted); font: 500 14px var(--font-ui); text-decoration: none; white-space: nowrap; }
.header-last-search-link:hover { color: var(--color-primary); background: var(--color-sky); }
.site-header .menu-toggle { border-radius: var(--radius-input); border-color: var(--color-border); }
.site-header-shell :is(a,button,select,summary):focus-visible,:where(body:not(.search-page)) #searchForm :is(button,input,select,a):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
:where(body:not(.search-page)) .home-hero {
    min-height: 0; padding: 32px 24px 24px;
    background: linear-gradient(rgba(239,246,255,.87),rgba(239,246,255,.87)), url('../images/hero-clouds-v1.png') center 53% / cover no-repeat;
    border-bottom: 1px solid var(--color-border);
}
:where(body:not(.search-page)) .home-hero::after { display: none; }
:where(body:not(.search-page)) .home-intro { max-width: 1180px; }
:where(body:not(.search-page)) .home-intro h1 { margin: 0 0 8px; font-size: 36px; line-height: 1.2; font-weight: 700; white-space: normal; letter-spacing: normal; color: var(--color-text); text-shadow: none; }
:where(body:not(.search-page)) .home-intro p { max-width: 680px; margin-inline: auto; font-size: 16px; line-height: 1.6; font-weight: 400; color: var(--color-muted); text-shadow: none; }
/* No overlap; keep the existing results container width and padding. */
:where(body:not(.search-page)) .container.home-content { margin-top: 16px; }
body:where(:not(.search-page)).flight-theme #searchForm { padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); box-shadow: none; color: var(--color-text); }
:where(body:not(.search-page)) #searchForm .top-pills-bar { gap: 8px; margin-bottom: 24px; flex-wrap: wrap; justify-content: flex-start; z-index: 101; }
:where(body:not(.search-page)) #searchForm .pill-wrapper { flex: 0 1 auto; min-width: 0; }
body:where(:not(.search-page)).flight-theme #searchForm .pill-select-btn { min-height: 44px; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-input); background: var(--color-surface); color: var(--color-text); font-size: 14px; line-height: 1.5; font-weight: 600; box-shadow: none; }
:where(body:not(.search-page)) #searchForm .pill-select-btn:hover, :where(body:not(.search-page)) #searchForm .pill-select-btn[aria-expanded="true"] { background: var(--color-sky); border-color: var(--color-primary); }
:where(body:not(.search-page)) #searchForm .main-search-flex { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(100px,.7fr); gap: 12px; align-items: start; }
:where(body:not(.search-page)) #searchForm :is(.location-group-wrapper,.date-group-wrapper,.btn-group-wrapper) { min-width: 0; width: auto; gap: 12px; }
body:where(:not(.search-page)).flight-theme #searchForm .search-field-cell { min-height: 72px; padding: 10px 12px; border: 1px solid var(--color-input-border); border-radius: var(--radius-input); background: var(--color-surface); box-shadow: none; transform: none; }
body:where(:not(.search-page)).flight-theme #searchForm .search-field-cell:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(23,105,210,.12); transform: none; }
:where(body:not(.search-page)) #searchForm .search-field-cell label { font-size: 13px; line-height: 1.5; font-weight: 500; color: var(--color-muted); margin-bottom: 2px; }
:where(body:not(.search-page)) #searchForm .search-field-cell input { height: 28px; padding: 0; font-size: 16px; line-height: 1.5; font-weight: 600; color: var(--color-text); min-width: 0; text-align: start; }
:where(body:not(.search-page)) #searchForm input::placeholder { color: var(--color-muted); opacity: 1; font-weight: 400; }
:where(body:not(.search-page)) #searchForm .cell-location::after { display: none; }
:where(body:not(.search-page)) #searchForm .origin-cell { padding-inline-end: 60px; }
:where(body:not(.search-page)) #searchForm .btn-swap-boundary { inset: auto; inset-inline-end: 8px; top: 14px; width: 44px; height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-input); color: var(--color-primary); background: var(--color-sky); box-shadow: none; transform: none; font-size: 22px; }
:where(body:not(.search-page)) #searchForm .btn-swap-boundary:hover { background: #e0edff; transform: none; }
:where(body:not(.search-page)) #searchForm .sub-checkbox-label { padding: 0; gap: 8px; font-size: 13px; line-height: 1.5; font-weight: 400; color: var(--color-muted); align-items: flex-start; min-height: 24px; }
:where(body:not(.search-page)) #searchForm input[type="checkbox"], :where(body:not(.search-page)) #searchForm input[type="radio"] { width: 18px; height: 18px; flex: 0 0 18px; margin: 2px 0; accent-color: var(--color-primary); }
body:where(:not(.search-page)).flight-theme #searchForm .btn-search-main { height: 72px; min-height: var(--height-control); margin: 0; padding: 12px 16px; border: 0; border-radius: var(--radius-input); background: var(--color-primary); box-shadow: none; color: #fff; font-size: 16px; font-weight: 600; transform: none; filter: none; }
body:where(:not(.search-page)).flight-theme #searchForm .btn-search-main:hover { background: var(--color-primary-hover); box-shadow: none; transform: none; filter: none; }
body:where(:not(.search-page)).flight-theme #searchForm .btn-search-main:active { background: var(--color-primary-pressed); }
:where(body:not(.search-page)) #searchForm button:disabled { cursor: not-allowed; background: #e2e8f0; color: var(--color-muted); }
body:where(:not(.search-page)).flight-theme #searchForm .dropdown-menu-popover { max-width: calc(100vw - 64px); min-width: 220px; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-menu); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-menu); }
:where(body:not(.search-page)) #searchForm .pPopover-label { font-size: 14px !important; font-weight: 400; color: var(--color-text); line-height: 1.5; }
:where(body:not(.search-page)) #searchForm .pPopover-input { min-height: 44px; border: 1px solid var(--color-input-border); border-radius: var(--radius-small); background: var(--color-surface); color: var(--color-text); font-size: 16px; font-weight: 400; }
:where(body:not(.search-page)) #searchForm .autocomplete-results { border: 1px solid var(--color-border); border-radius: var(--radius-menu); box-shadow: var(--shadow-menu); margin-top: 6px; }
:where(body:not(.search-page)) #searchForm .autocomplete-item { min-height: 44px; padding: 12px; font-size: 14px; color: var(--color-text); }
:where(body:not(.search-page)) #searchForm .autocomplete-item:hover { background: var(--color-sky); color: var(--color-primary); }
@media (max-width:1099px) {
    :where(body:not(.search-page)) #searchForm .main-search-flex { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
    :where(body:not(.search-page)) #searchForm .btn-group-wrapper { grid-column: 1 / -1; }
    body:where(:not(.search-page)).flight-theme #searchForm .btn-search-main { height: 48px; }
}
@media (max-width:900px) {
    .site-header-shell .site-header { width: min(var(--ui-width-shell),calc(100% - 2 * var(--ui-gutter))); min-height: 64px; padding-block: 10px; gap: 8px; }
    .site-header .site-brand-mark { width: 32px; height: 32px; }
    .site-header .navbar-menu { display: none; }
    .site-header.menu-open .navbar-menu { display: grid; margin: 0; padding-top: 8px; }
    .site-header.menu-open .navbar-left { padding-top: 8px; }
    .site-header .account-dropdown { inset-inline: 0 auto; max-width: calc(100vw - 32px); }
}
@media (max-width:767px) {
    :where(body:not(.search-page)) .home-hero { padding: 24px 16px 20px; background-position: center 53%; }
    :where(body:not(.search-page)) .home-intro h1 { font-size: 28px; }
    :where(body:not(.search-page)) .home-intro p { font-size: 16px; }
    :where(body:not(.search-page)) .container.home-content { margin-top: 12px; }
    body:where(:not(.search-page)).flight-theme #searchForm { padding: 16px; border-radius: var(--radius-panel); }
    :where(body:not(.search-page)) #searchForm .top-pills-bar { margin-bottom: 16px; }
    :where(body:not(.search-page)) #searchForm .pill-select-btn { width: 100%; justify-content: center; }
    :where(body:not(.search-page)) #searchForm .origin-group, :where(body:not(.search-page)) #searchForm .destination-group { grid-column: 1 / -1; }
    :where(body:not(.search-page)) #searchForm .dropdown-menu-popover { right: 0; left: auto; }
    :where(body:not(.search-page)) #searchForm .pax-pill .dropdown-menu-popover { right: auto; left: 0; }
    :where(body:not(.search-page)) #searchForm .btn-swap-boundary { transform: rotate(90deg); }
    :where(body:not(.search-page)) #searchForm .btn-swap-boundary:hover { transform: rotate(90deg); }
}
@media (max-width:359px) {
    :where(body:not(.search-page)) #searchForm .main-search-flex { grid-template-columns: minmax(0,1fr); }
    :where(body:not(.search-page)) #searchForm .pill-wrapper { flex: 1 1 100%; }
    :where(body:not(.search-page)) #searchForm .pax-pill .dropdown-menu-popover { right: 0; left: auto; }
}
@media (prefers-reduced-motion:reduce) {
    .site-header-shell *, :where(body:not(.search-page)) #searchForm * { transition: none !important; animation: none !important; }
}
/* Keep this token override after :root: imported rules precede the host sheet. */
@media (max-width:767px) {
    :root { --ui-gutter: var(--ui-gutter-mobile); }
}