/* Kabultrip.com — mobile-first, no frameworks. "Friendly pill" look: slate text, sky-blue accent, Outfit. */
:root {
    --navy: #1f2a37;
    --navy-2: #0284c7;
    --navy-dark: #111827;
    --accent: #0284c7;
    --accent-dark: #0369a1;
    --tint: #e0f2fe;
    /* The Search button's colours, used by every main action button. */
    --brand-grad: linear-gradient(90deg, #4f46e5, #06b6d4);
    --brand-grad-dark: linear-gradient(90deg, #4338ca, #0891b2);
    --bg: #f5f9fc;
    --surface: #fff;
    --text: #18223a;
    --muted: #5d6880;
    --line: #dfe5ef;
    --ok: #12805c;
    --ok-bg: #e5f6ef;
    --warn: #9a5b00;
    --warn-bg: #fff4e0;
    --bad: #b3261e;
    --bad-bg: #fdeceb;
    --radius: 12px;
    --shadow: 0 1px 2px rgba(16, 32, 72, .06), 0 4px 16px rgba(16, 32, 72, .06);
    --font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.5 var(--font); color: var(--text); background: var(--bg); overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a { color: var(--navy-2); }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: clamp(1.5rem, 4vw, 2.4rem); }
h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: 8px; left: 8px; z-index: 100; background: #fff; padding: 8px 12px; border-radius: 8px; }
.muted { color: var(--muted); font-size: .92rem; }
.center { text-align: center; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.wrap--narrow { max-width: 820px; }
.wrap--xs { max-width: 480px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.2; transition: background .15s, border-color .15s; }
.btn--accent { background: var(--brand-grad); border-color: transparent; color: #fff; }
.btn--accent:hover { background: var(--brand-grad-dark); }
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-2); }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--navy); }
.btn--ghost:hover { border-color: var(--navy); }
.btn--danger { background: var(--bad); color: #fff; }
.btn--sm { padding: 7px 14px; font-size: .9rem; }
.btn--lg { padding: 15px 24px; font-size: 1.05rem; }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-busy=true] { opacity: .6; cursor: progress; }

/* Header */
.topbar { background: #fff; color: var(--navy); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid #e8eef4; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); text-decoration: none; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.logo__img { display: block; height: 50px; width: auto; }
.logo b { color: var(--accent); font-weight: 700; }
.logo small { font-size: .8rem; opacity: .7; }
/* Header tools: language, currency, manage booking and the menu button. */
.topbar__tools { display: flex; align-items: center; gap: 8px; }
.pill { list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; background: #f0f6fa; color: var(--navy); font-weight: 600; font-size: .95rem; text-decoration: none; cursor: pointer; user-select: none; border: 1px solid transparent; transition: background .15s, border-color .15s; white-space: nowrap; }
.pill::-webkit-details-marker { display: none; }
.pill:hover, .pill-menu[open] > .pill { background: var(--tint); border-color: #b6d9ee; }
.pill .flag { flex: none; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.pill--wide svg { color: var(--accent); }
.pill-menu { position: relative; }
.pill-menu__panel { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 60; min-width: 220px; padding: 12px; background: #fff; border-radius: 16px; box-shadow: 0 18px 48px rgba(17, 24, 39, .18); border: 1px solid #e8eef4; display: grid; gap: 2px; }
.pill-menu__panel h4 { margin: 2px 8px 8px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pill-menu__panel a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; color: var(--navy); text-decoration: none; font-weight: 500; }
.pill-menu__panel a b { min-width: 2em; color: var(--accent); font-size: .85rem; }
.pill-menu__panel a small { margin-inline-start: auto; color: var(--muted); }
.pill-menu__panel a:hover { background: var(--bg); }
.pill-menu__panel a.is-on { background: var(--tint); color: var(--accent); font-weight: 700; }
/* The ring is drawn in the Search button colours. */
.burger { width: 48px; height: 48px; border-radius: 50%; border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--brand-grad) border-box; display: grid; place-content: center; gap: 6px; cursor: pointer; transition: background .15s; }
.burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--navy); }
.burger:hover { background: linear-gradient(var(--tint), var(--tint)) padding-box, var(--brand-grad) border-box; }
@media (max-width: 760px) {
    .pill--wide span { display: none; }
    .pill--wide { padding: 0 13px; }
}
@media (max-width: 480px) {
    .topbar__tools { gap: 6px; }
    .pill { height: 40px; padding: 0 11px; font-size: .88rem; }
    .pill .flag + span { display: none; }
    .burger { width: 42px; height: 42px; }
    .logo { font-size: 1.15rem; }
    .logo__img { height: 36px; }
}
@media (max-width: 380px) { .logo small { display: none; } }
@media (max-width: 350px) { .topbar__tools { gap: 4px; } .pill { height: 36px; padding: 0 9px; } .burger { width: 38px; height: 38px; } .logo { font-size: 1.02rem; gap: 6px; } .logo__img { height: 30px; } }
/* Side menu */
.drawer { margin: 0; margin-inline-start: auto; height: 100vh; max-height: none; width: min(380px, 100vw); border: 0; padding: 0; display: none; flex-direction: column; background: #fff; box-shadow: -18px 0 48px rgba(17, 24, 39, .2); }
.drawer[open] { display: flex; animation: drawer-in .22s ease-out; }
.drawer::backdrop { background: rgba(17, 24, 39, .45); }
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } }
[dir=rtl] .drawer[open] { animation-name: drawer-in-rtl; }
@keyframes drawer-in-rtl { from { transform: translateX(-40px); opacity: 0; } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.drawer__home { display: block; line-height: 0; border-radius: 10px; }
.drawer__home img { width: 40px; height: 40px; border-radius: 10px; }
.drawer__nav { display: flex; flex-direction: column; padding: 10px 14px; overflow-y: auto; flex: 1; }
.drawer__nav a { padding: 13px 10px; border-radius: 12px; color: var(--navy); text-decoration: none; font-weight: 600; font-size: 1.05rem; }
.drawer__nav a:hover { background: var(--bg); }
.drawer__nav small { padding: 16px 10px 4px; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--muted); }
.drawer__foot { padding: 16px 22px 24px; display: grid; gap: 10px; border-top: 1px solid var(--line); }
.nav__admin { color: var(--accent) !important; }

/* Alerts & badges */
.alert { padding: 12px 16px; border-radius: 10px; margin: 16px 0; border: 1px solid; }
.alert ul { margin: 6px 0 0; padding-left: 20px; }
.alert--ok { background: var(--ok-bg); color: var(--ok); border-color: #b8e6d3; }
.alert--warn { background: var(--warn-bg); color: var(--warn); border-color: #f3d39b; }
.alert--bad { background: var(--bad-bg); color: var(--bad); border-color: #f4c3bf; }
.validation-summary-valid { display: none; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--warn { background: var(--warn-bg); color: var(--warn); }
.badge--bad { background: var(--bad-bg); color: var(--bad); }
.err { color: var(--bad); font-size: .85rem; }

/* Cards & forms */
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 16px; border: 0; }
fieldset.card { min-width: 0; }
fieldset.card legend { float: left; width: 100%; font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; padding: 0; }
fieldset.card legend + * { clear: both; }
.form .field, .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; min-width: 0; }
.field label { font-size: .85rem; font-weight: 600; color: var(--muted); }
.field input, .field select, .field textarea, .form input:not([type=checkbox]):not([type=radio]), .form select, .form textarea {
    width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; min-height: 44px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--navy-2); outline-offset: -1px; border-color: var(--navy-2); }
.form__grid { display: grid; gap: 0 16px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .form__grid { grid-template-columns: 1fr 1fr; } .field--wide { grid-column: 1 / -1; } }
@media (min-width: 900px) { .form__grid--3 { grid-template-columns: repeat(3, 1fr); } }
.dsel { display: grid; grid-template-columns: 1fr 1.25fr 1.2fr; gap: 6px; }
.field .dsel select { padding: 11px 8px; font-size: 1rem; min-height: 48px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.check input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* hidden without pushing the page wider in right-to-left */
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
@media (max-width: 640px) {
    .table--stack thead { display: none; }
    .table--stack tr { display: block; border-bottom: 1px solid var(--line); padding: 8px 0; }
    .table--stack td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 0; }
    .table--stack td { text-align: right; overflow-wrap: anywhere; }
    .table--stack td.actions { justify-content: flex-end; flex-wrap: wrap; }
    .table--stack td::before { text-align: left; flex: none; content: attr(data-label); font-weight: 600; color: var(--muted); font-size: .85rem; }
}

/* Hero & search */
.hero { padding: 8px 12px 0; background: #fff; }
/* The owner's photo of Band-e-Amir, slightly darkened so the white title reads on it (WebP where the browser takes it). */
.hero__box { background: #2f6fb3 url(/img/hero-sky.jpg) center / cover no-repeat; background-image: linear-gradient(rgba(8, 28, 60, .38), rgba(8, 28, 60, .12)), image-set(url(/img/hero-sky.webp) type("image/webp"), url(/img/hero-sky.jpg) type("image/jpeg")); border-radius: 28px; padding: 64px 0 72px; }
.hero h1 { position: relative; z-index: 0; color: var(--navy); margin: 0 auto 30px; text-align: center; font-size: clamp(2.1rem, 6vw, 3.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
@media (min-width: 768px) { .hero { padding: 8px 24px 0; } .hero__box { border-radius: 32px; padding: 140px 0 150px; } }

.search { background: #fff; color: var(--text); border-radius: 14px; padding: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, .18); }
.search__trip { display: flex; gap: 8px; margin-bottom: 12px; }
.chip { cursor: pointer; position: relative; }
.chip input { position: absolute; opacity: 0; }
.chip span { display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: .9rem; font-weight: 600; color: var(--muted); }
.chip input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--accent); }
.search__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; }
.search .field { margin: 0; position: relative; }
.search .field--place { grid-column: 1 / -1; }
.search .field--pax { grid-column: 1 / -1; }
.search__go { grid-column: 1 / -1; padding: 14px; font-size: 1.05rem; }
/* Phones: From and To are stacked, so the swap button sits at the right, centred in the gap, with vertical arrows.
   Each tap turns it half a turn (--spin is set by site.js). */
.search__swap { position: absolute; right: 14px; top: -12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(16, 32, 72, .08); transform: rotate(calc(90deg + var(--spin, 0deg))); transition: transform .35s ease; }
[dir=rtl] .search__swap { right: auto; left: 14px; }
.pax__btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search .field input, .pax__btn { width: 100%; min-height: 48px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; text-align: left; font-weight: 600; }
.search .field input:disabled { background: #f2f4f8; color: #9aa3b5; }
.pax__btn { cursor: pointer; }
.pax__panel { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; box-shadow: var(--shadow); min-width: 280px; }
.pax__head { display: none; }
@media (max-width: 767px) {
    .pax__panel { position: fixed; inset: 0; z-index: 90; min-width: 0; border: 0; border-radius: 0; padding: 0 20px 20px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
    .pax__panel[hidden] { display: none; }
    .pax__panel [data-pax-done].btn { margin-top: auto; min-height: 52px; }
    .pax__head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: #fff; padding: 16px 0; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 1.1rem; }
    .pax__row { padding: 16px 0; }
    .pax__panel .stepper button { width: 42px; height: 42px; }
}
.pax__row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pax__row small { display: block; color: var(--muted); font-size: .8rem; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--navy); background: #fff; color: var(--navy); font-size: 1.1rem; cursor: pointer; }
.stepper button:disabled { opacity: .3; cursor: default; }
.stepper input { width: 36px !important; min-height: 0 !important; text-align: center !important; border: 0 !important; padding: 0 !important; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button { display: none; }
.pax__cabin { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; font-size: .85rem; font-weight: 600; color: var(--muted); }
.pax__cabin select { padding: 10px; border: 1px solid var(--line); border-radius: 8px; }

.ac.has-chip [data-ac-input] { display: none; }
.ac__chip { display: flex; align-items: center; min-height: 48px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: text; min-width: 0; }
.ac__pill { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; background: var(--tint); color: var(--navy); border-radius: 999px; padding: 4px 4px 4px 12px; font-weight: 600; font-size: .95rem; }
.ac__chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ac__chip-x { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; color: var(--navy); cursor: pointer; padding: 0; }
.ac__chip-x:hover { background: var(--brand-grad); color: #fff; }
.ac__sub { display: none; }
.ac__list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; list-style: none; margin: 0; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); max-height: 320px; overflow: auto; }
.ac__list li { padding: 9px 10px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.ac__list li { font-size: .88rem; }
.ac__list li small { display: block; color: var(--muted); font-size: .74rem; }
.ac__list li b.code { color: var(--navy); margin-inline-start: auto; align-self: center; background: #eef3fc; border-radius: 6px; padding: 2px 7px; font-size: .76rem; }
.ac__list li { align-items: center; justify-content: flex-start; }
.ac__list { min-width: min(360px, calc(100vw - 32px)); }
.ac__ico { flex: none; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: #eef3fc; color: var(--navy); }
.ac__city .ac__ico { background: var(--accent); color: #fff; }
.ac__list li[aria-selected=true], .ac__list li:hover { background: #eef3fc; }
.ac__list li.ac__head { display: block; padding: 6px 10px; margin: 2px 0; border-radius: 8px; background: #f3f6fb; color: var(--muted); font-size: .8rem; font-weight: 700; cursor: default; }
.ac__back { display: none; }
@media (max-width: 699px) {
    /* From / To open full screen on phones while the customer types. */
    .ac.ac--full { position: fixed; inset: 0; z-index: 1000; margin: 0; padding: 12px 16px; background: #fff; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; gap: 10px 8px; align-items: center; border-radius: 0; }
    .ac--full .ac__back { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--tint); color: var(--navy); cursor: pointer; padding: 0; }
    .ac--full > label { font-size: 1.1rem; color: var(--text); }
    .ac--full [data-ac-input] { grid-column: 1 / -1; display: block !important; padding-inline-start: 14px !important; font-size: 1.05rem; }
    .ac--full .ac__chip, .ac--full .search__swap { display: none !important; }
    .ac--full .ac__list { grid-column: 1 / -1; align-self: stretch; position: static; min-width: 0; max-height: none; overflow: auto; border: 0; box-shadow: none; padding: 0; }
    .ac--full .ac__list li { padding: 12px 6px; border-bottom: 1px solid var(--line); border-radius: 0; }
    html.ac-open, html.ac-open body { overflow: hidden; }
}

@media (min-width: 768px) {
    .search__row { grid-template-columns: 1fr 1fr 1fr 1fr; }
    .search .field--place { grid-column: span 2; }
    .search__swap { left: -23px; right: auto; top: 31px; transform: rotate(var(--spin, 0deg)); }
    [dir=rtl] .search__swap { left: auto; right: -23px; }
    .search .field--to input, .search .field--to .ac__chip { padding-inline-start: 24px; }
    .search .field--pax { grid-column: span 2; }
    .search__go { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
    .search__row { grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1.2fr auto; align-items: end; }
    .search .field--place, .search .field--pax, .search__go { grid-column: auto; }
    .search__go { min-height: 48px; padding: 0 22px; }
}

/* Homepage and agency search: trip types as radio pills, then one white box with a cell per field: a small
   label, the value big (city, day, number of travellers) and a small line under it. */
.search--rich { max-width: 1120px; margin: 0 auto; background: transparent; box-shadow: none; padding: 0; }
.search--rich .search__trip { justify-content: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.search--rich .chip span { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 8px 18px 8px 12px; background: #fff; border: 1px solid #e3e8f0; color: var(--navy); font-size: .95rem; box-shadow: 0 2px 8px rgba(16, 32, 72, .06); }
.search--rich .chip span::before { content: ""; flex: none; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid #9aa3b5; background: #fff; }
.search--rich .chip input:checked + span { background: #fff; color: var(--navy); border-color: #e3e8f0; }
.search--rich .chip input:checked + span::before { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 42%, #fff 47%); }
.search--rich .search__row { background: #fff; border-radius: 14px; padding: 12px; gap: 10px; box-shadow: 0 12px 34px rgba(2, 132, 199, .16); }
.search--rich .field label { display: flex; align-items: center; gap: 6px; color: #4b5563; font-weight: 500; font-size: .92rem; white-space: nowrap; }
.search--rich .field__chev { color: var(--accent); }
.search--rich .field .ac__chip { min-height: 66px; padding: 6px 12px; border-radius: 10px; cursor: pointer; }
.search--rich .ac__pill { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; padding: 8px 14px; padding-inline-end: 48px; border-radius: 14px; background: var(--tint); }
.search--rich .ac__chip-text { max-width: 100%; font-size: 1.35rem; font-weight: 800; line-height: 1.15; color: var(--text); }
.search--rich .ac__sub { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; color: var(--muted); }
.search--rich .ac__chip-x { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; background: #fff; }
.search--rich .ac__chip-x svg { width: 16px; height: 16px; }
.search--rich .field input[type=text], .search--rich .field .date__btn, .search--rich .field .pax__btn { min-height: 66px; border-radius: 10px; }
.search--rich .field input[type=text] { font-size: 1.1rem; }
.search--rich .field .date__btn, .search--rich .field .pax__btn { display: grid; grid-template-columns: auto 1fr; align-items: baseline; justify-content: start; column-gap: 6px; padding: 6px 12px; text-align: start; }
.search--rich .date__btn:disabled { background: #fff; }
.search--rich .date__btn.is-empty:not(:has(.date__hint)) { align-content: center; font-size: 1.1rem; color: #a3acbd; }
@media (max-width: 480px) {
    .search--rich .search__trip { gap: 6px; flex-wrap: nowrap; }
    .search--rich .chip span { gap: 6px; min-height: 38px; padding: 7px 11px 7px 9px; font-size: .86rem; }
    .search--rich .chip span::before { width: 14px; height: 14px; }
}
.date__d, .pax__n { font-size: 1.7rem; font-weight: 800; line-height: 1.1; color: var(--text); }
.date__m, .pax__btn span { font-size: .98rem; font-weight: 600; color: var(--text); }
.date__w, .pax__cab { grid-column: 1 / -1; font-size: .8rem; font-weight: 500; color: var(--muted); }
.date__hint { grid-column: 1 / -1; white-space: normal; font-size: .82rem; font-weight: 500; line-height: 1.35; color: var(--muted); }
.search--rich .search__swap { border: 3px solid #fff; background: var(--brand-grad); color: #fff; width: 40px; height: 40px; box-shadow: 0 3px 10px rgba(79, 70, 229, .3); }
.search--rich .search__go { border-radius: 12px; min-height: 56px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
/* Same colours as "Kabul" in the homepage title. */
.search--rich .search__go { background: var(--brand-grad); border: 0; }
.search--rich .search__go:hover { background: var(--brand-grad-dark); }
@media (min-width: 768px) and (max-width: 1099px) { .search--rich .search__swap { top: 40px; } }
@media (min-width: 1100px) {
    .search--rich .search__row { grid-template-columns: 1.45fr 1.45fr 1fr 1fr 1.15fr auto; gap: 0; padding: 0; align-items: stretch; }
    .search--rich .field { gap: 8px; min-height: 120px; padding: 16px 22px 14px; border-inline-end: 1px solid #e5e7eb; }
    .search--rich .field:first-child { border-radius: 14px 0 0 14px; }
    [dir=rtl] .search--rich .field:first-child { border-radius: 0 14px 14px 0; }
    .search--rich .field--pax { border-inline-end: 0; }
    .search--rich .field:focus-within { background: #f5f9fd; }
    .search--rich .field .ac__chip, .search--rich .field input[type=text], .search--rich .field .date__btn, .search--rich .field .pax__btn { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
    .search--rich .field input[type=text] { font-size: 1.35rem; font-weight: 800; }
    .search--rich .field .date__btn.is-empty:not(:has(.date__hint)) { font-size: 1.35rem; font-weight: 800; }
    .search--rich .field input[type=text]::placeholder { color: #a3acbd; }
    .search--rich .field input:focus, .search--rich .pax__btn:focus-visible { outline: 0; }
    .search--rich .field--to { padding-inline-start: 32px; }
    .search--rich .search__swap { left: -20px; top: 50%; transform: translateY(-50%) rotate(var(--spin, 0deg)); }
    [dir=rtl] .search--rich .search__swap { left: auto; right: -20px; }
    .search--rich .search__go { align-self: center; margin: 0 16px; min-height: 60px; padding: 0 26px; }
    /* Desktop: the chosen city is plain text, without a box or clear button; clicking it opens the search. */
    .search--rich .ac__pill { padding: 0; border-radius: 0; background: transparent; }
    .search--rich .ac__chip-x { display: none; }
    /* The airport list opens over the field, a little below its top edge; the label and typing box move down with it and stay on top. */
    .search--rich .ac__list { top: 22px; inset-inline-start: 10px; padding-top: 108px; border-radius: 14px; background: #fff linear-gradient(#e5e7eb, #e5e7eb) no-repeat 0 100px / 100% 1px; }
    .search--rich .ac__list:empty { padding-bottom: 0; }
    .search--rich .ac:has(.ac__list:not([hidden])) > label, .search--rich .ac:has(.ac__list:not([hidden])) > input[type=text] { position: relative; z-index: 31; transform: translateY(22px); }
    .search--rich .pax__panel { top: 0; }
    /* Typing an airport: a thin blue border, a search icon at the end of the line, a thin line under it (top of the list). */
    .search--rich .field.ac > input[type=text]:focus { min-height: 46px; padding: 0 14px; padding-inline-end: 40px; border: 1px solid var(--accent); border-radius: 10px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2937' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat calc(100% - 12px) 50% / 18px; box-shadow: none; outline: 0; font-size: 1rem; font-weight: 600; text-align: start; }
    /* The typing line spans the whole popup (the list is at least 360px wide), so the icon sits at its end. */
    .search--rich .field.ac > input[type=text]:focus { width: max(100% + 10px, 336px); }
    /* To has extra room for the swap button: the label and typing box move back so both sides of the popup match. */
    .search--rich .field--to.ac > input[type=text]:focus { width: max(100% + 20px, 336px); margin-inline-start: -10px; }
    .search--rich .field--to.ac:has(.ac__list:not([hidden])) > label { margin-inline-start: -10px; }
    .search--rich .field.ac > input[type=text]:focus::placeholder { font-size: .95rem; font-weight: 500; color: #9aa3b5; }
    [dir=rtl] .search--rich .field.ac > input[type=text]:focus { background-position: 12px 50%; }
}

/* Sections */
/* Every homepage section, the help band included, uses the same vertical spacing. */
.section, .helpband { padding: 48px 0; }
@media (min-width: 768px) { .section, .helpband { padding: 72px 0; } }
.section__title { text-align: center; margin-bottom: 28px; }
.section__head { text-align: center; max-width: 680px; margin: 0 auto 30px; }
.section__head p { color: var(--muted); font-size: 1.05rem; }
.section h2 { font-size: clamp(1.45rem, 3.2vw, 2.1rem); letter-spacing: -.01em; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--tint); color: var(--accent); font-weight: 600; font-size: .85rem; margin-bottom: 12px; }
.eyebrow--wa { background: #dcfce7; color: #15803d; }
.eyebrow--title { font-size: clamp(1.15rem, 2.4vw, 1.5rem); padding: 10px 22px; gap: 10px; }
.eyebrow--title svg { width: 22px; height: 22px; }
.soft-btn { display: inline-block; padding: 10px 20px; border-radius: 999px; background: var(--tint); color: var(--accent); font-weight: 600; text-decoration: none; transition: background .15s; }
.soft-btn:hover { background: #cfe8f8; }

/* Why book */
.why { background: #fff; }
.why__grid { display: grid; gap: 34px; grid-template-columns: 1fr; text-align: center; }
@media (min-width: 860px) { .why__grid { grid-template-columns: repeat(3, 1fr); } }
.why__col p { color: var(--muted); max-width: 320px; margin: 0 auto 18px; }
.why__col h3 { font-size: 1.3rem; }
.why__icons { display: flex; justify-content: center; align-items: center; margin-bottom: 18px; }
.tile { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; margin: 0 -5px; box-shadow: 0 6px 18px rgba(16, 32, 72, .12); border: 3px solid #fff; }
.tile:nth-child(2) { width: 76px; height: 76px; z-index: 1; transform: translateY(-6px); }
.tile:nth-child(1) { transform: rotate(-8deg); }
.tile:nth-child(3) { transform: rotate(8deg); }
.tile--green { background: #bbf7d0; color: #166534; }
.tile--sky { background: var(--accent); color: #fff; }
.tile--amber { background: #fde68a; color: #92400e; }
.tile--white { background: #fff; }
.tile--white img { object-fit: contain; }
.tile--indigo { background: #e0e7ff; color: #3730a3; }
.tile--wa { background: #22c55e; color: #fff; }
.tile--wa svg { width: 34px; height: 34px; }

/* WhatsApp deals */
/* WhatsApp deals stay light green and popular routes light sky, so the two sections read apart. */
.deals { background: linear-gradient(180deg, #f0fdf4, #e3f8eb); }
.routes { background: #e6f3fc; }
.deals__grid, .routes__grid { display: grid; gap: 16px; }
@media (max-width: 639px) {
    /* Phones: two cards stacked in view; more cards scroll sideways so a long list doesn't make the page long. */
    .deals__grid, .routes__grid { grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: 90%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 2px 2px 12px; scrollbar-width: thin; }
    .deals__grid > *, .routes__grid > * { scroll-snap-align: start; min-width: 0; }
}
@media (min-width: 640px) { .deals__grid, .routes__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .deals__grid { grid-template-columns: repeat(3, 1fr); } .routes__grid { grid-template-columns: repeat(4, 1fr); } }
.deal { display: flex; flex-direction: column; gap: 16px; background: #fff; border-radius: 20px; padding: 20px; color: var(--text); text-decoration: none; border: 1px solid #e3efe7; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.deal:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(21, 128, 61, .14); }
.deal__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.deal__trip { background: var(--tint); color: var(--accent); font-weight: 600; font-size: .82rem; padding: 4px 10px; border-radius: 999px; }
.deal__airline { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--muted); }
.deal__route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.deal__route b { display: block; font-size: 1.6rem; line-height: 1; }
.deal__route small { color: var(--muted); }
.deal__route > div:last-child { text-align: end; }
.deal__line { position: relative; text-align: center; font-size: .8rem; color: var(--muted); }
.deal__line::before { content: ""; position: absolute; inset-inline: 0; top: 50%; border-top: 2px dashed #b7d8c4; }
.deal__line span { position: relative; background: #fff; padding: 0 8px; }
.deal__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.deal__facts li { background: var(--bg); border-radius: 999px; padding: 4px 10px; font-size: .85rem; }
.deal__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid #edf2ee; padding-top: 14px; }
.deal__price { font-size: 1.35rem; font-weight: 700; }
.deal__price small { font-size: .8rem; font-weight: 400; color: var(--muted); }
.deal__price--ask { font-size: 1rem; color: var(--muted); font-weight: 600; }
.deal__cta { display: inline-flex; align-items: center; gap: 6px; background: #22c55e; color: #fff; font-weight: 600; font-size: .9rem; padding: 9px 14px; border-radius: 999px; white-space: nowrap; }

/* Popular routes */
.route { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-height: 190px; padding: 22px; border-radius: 22px; color: #fff; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.route::after { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 255, 255, .12); inset-inline-end: -60px; top: -60px; }
.route:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16, 32, 72, .2); }
.route--0 { background: linear-gradient(135deg, #0284c7, #38bdf8); }
.route--1 { background: linear-gradient(135deg, #1e3a8a, #3b82f6); }
.route--2 { background: linear-gradient(135deg, #9a3412, #f97316); }
.route--3 { background: linear-gradient(135deg, #6b21a8, #c084fc); }
.route--4 { background: linear-gradient(135deg, #047857, #34d399); }
.route--5 { background: linear-gradient(135deg, #be123c, #fb7185); }
.route--6 { background: linear-gradient(135deg, #0f766e, #2dd4bf); }
.route--7 { background: linear-gradient(135deg, #92400e, #f59e0b); }
.route__codes { display: flex; align-items: center; gap: 10px; font-size: 1.9rem; }
.route__plane { flex: 1; display: flex; align-items: center; gap: 6px; opacity: .9; }
.route__plane::before, .route__plane::after { content: ""; flex: 1; border-top: 2px dotted rgba(255, 255, 255, .6); }
[dir="rtl"] .route__plane svg { transform: scaleX(-1); }
.route__cities { opacity: .92; }
.route__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.route__foot small { opacity: .85; }
.route__foot b { font-size: 1.3rem; }
.route__go { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .2); display: grid; place-items: center; font-size: 1.1rem; transition: background .15s; }
.route:hover .route__go { background: #fff; color: var(--text); }

/* Airlines: one scrolling row of columns, each a big and a small white tile (alternating), the track repeated so the loop is seamless */
.airlines { background: #ece9fb; overflow: hidden; }
.marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__row { display: flex; width: max-content; animation: marquee 90s linear infinite; }
.marquee:hover .marquee__row { animation-play-state: paused; }
.marquee__track { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0 20px 0 0; }
[dir="rtl"] .marquee__track { padding: 0 0 0 20px; }
[dir="rtl"] .marquee__row { animation-name: marquee-rtl; }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes marquee-rtl { to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__row { animation: none; } .marquee { overflow-x: auto; } }
.al-col { display: flex; flex-direction: column; gap: 20px; width: 160px; flex: none; }
.al-card { height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #fff; border-radius: 24px; padding: 14px; }
.al-col > .al-card:first-child, .al-col--flip > .al-card:last-child { height: 220px; }
.al-col--flip > .al-card:first-child { height: 160px; }
.al-card img { width: 72px; height: 72px; object-fit: contain; }
.al-card span { font-size: .8rem; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 599px) { .al-col { width: 130px; gap: 14px; } .marquee__track { gap: 14px; } .al-card { height: 130px; } .al-col > .al-card:first-child, .al-col--flip > .al-card:last-child { height: 180px; } .al-col--flip > .al-card:first-child { height: 130px; } }

/* Real people */
.people { background: #fff; }
.people__grid { display: grid; gap: 34px; align-items: center; }
@media (min-width: 900px) { .people__grid { grid-template-columns: 1fr 1fr; gap: 60px; } }
.people__media { position: relative; padding-bottom: 30px; }
.people__photo { display: block; width: 100%; aspect-ratio: 15 / 16; max-height: 560px; object-fit: cover; border-radius: 28px; }
/* The phone over the picture: a WhatsApp chat sized to the picture (cqw), so it scales down on phones. */
.people__media { container-type: inline-size; }
.wa-phone { position: absolute; top: 16%; inset-inline-start: 47%; width: 40%; aspect-ratio: 9 / 17; padding: 2.2cqw; background: #111827; border-radius: 6.5cqw; box-shadow: 0 24px 50px rgba(8, 47, 73, .35); font-size: 1.95cqw; line-height: 1.35; }
.wa-phone__screen { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 4.6cqw; background: #efeae2; }
.wa-phone__head { display: flex; align-items: center; gap: 1.6cqw; padding: 3.4cqw 2.4cqw 2cqw; background: #075e54; color: #fff; }
.wa-phone__head img { width: 6.4cqw; height: 6.4cqw; border-radius: 50%; background: #fff; }
.wa-phone__head span { display: grid; min-width: 0; }
.wa-phone__head b { font-size: 1.15em; }
.wa-phone__head small { opacity: .8; font-size: .9em; }
.wa-phone__chat { flex: 1; display: flex; flex-direction: column; gap: 1.4cqw; padding: 2.4cqw 2cqw; }
.wa-msg { max-width: 84%; margin: 0; padding: 1.2cqw 1.8cqw .8cqw; border-radius: 2cqw; border-start-start-radius: 0; background: #fff; color: #111b21; box-shadow: 0 1px 0 rgba(0, 0, 0, .08); }
.wa-msg--me { align-self: flex-end; background: #d9fdd3; border-start-start-radius: 2cqw; border-start-end-radius: 0; }
.wa-msg time { display: block; text-align: end; color: #667781; font-size: .8em; }
.wa-msg time i { color: #53bdeb; font-style: normal; }
.wa-phone__type { display: flex; align-items: center; gap: 1.4cqw; padding: 1.6cqw 2cqw 2.6cqw; }
.wa-phone__type span { flex: 1; padding: 1.4cqw 2.4cqw; border-radius: 99px; background: #fff; color: #8696a0; }
.wa-phone__type i { width: 6cqw; height: 6cqw; border-radius: 50%; background: #00a884; }
.wa-card { z-index: 1; position: absolute; inset-inline-start: 18px; bottom: 0; width: 200px; background: #fff; border-radius: 20px; padding: 16px; box-shadow: 0 16px 40px rgba(16, 32, 72, .2); display: grid; gap: 4px; }
.wa-card__icon { width: 42px; height: 42px; border-radius: 12px; background: #22c55e; color: #fff; display: grid; place-items: center; }
.wa-card__status { color: #16a34a; font-size: .8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; }
.wa-card__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px #dcfce7; }
.wa-card b { font-size: 1.15rem; }
.wa-card a { margin-top: 8px; text-align: center; background: #22c55e; color: #fff; border-radius: 999px; padding: 8px; font-weight: 600; text-decoration: none; }
@media (max-width: 640px) {
    .wa-phone { top: 5%; }
    .wa-card { width: 160px; padding: 12px; }
}
.people__text p { color: var(--muted); font-size: 1.08rem; }
.people__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* About Kabultrip on the Dari homepage */
.intro-fa { background: #fff; position: relative; overflow: hidden; }
.intro-fa::before { content: ""; position: absolute; width: 520px; height: 520px; inset-inline-start: -180px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(56, 189, 248, .14), transparent 70%); pointer-events: none; }
.intro-fa .wrap { position: relative; }
.intro-fa__head { margin: 0 0 32px; text-align: start; }
.intro-fa__badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--tint); color: var(--accent-dark); font-weight: 600; font-size: .85rem; margin-bottom: 14px; direction: ltr; }
.intro-fa__head h2 { margin-bottom: 14px; }
.intro-fa__head h2 span { display: block; margin-top: 6px; font-size: .7em; background: linear-gradient(90deg, #0284c7, #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro-fa__head p { color: var(--muted); font-size: 1.05rem; line-height: 1.95; margin: 0 0 12px; }
.intro-fa__head .intro-fa__lead { color: var(--text); font-weight: 600; margin: 0; }
.intro-fa__grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
.intro-fa__card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 24px; box-shadow: 0 10px 30px rgba(16, 32, 72, .06); transition: transform .2s ease, box-shadow .2s ease; }
.intro-fa__card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16, 32, 72, .11); }
.intro-fa__card h3 { font-size: 1.12rem; color: var(--navy); margin: 0 0 8px; line-height: 1.6; }
.intro-fa__card p { color: var(--muted); line-height: 1.9; margin: 0; font-size: .97rem; }
.intro-fa__card .why__icons { margin: 4px 0 18px; }
.intro-fa__card:nth-child(-n+3) h3 { text-align: center; }
.intro-fa__card--lang { display: flex; flex-direction: column; justify-content: center; background: linear-gradient(160deg, #fffbeb, #fff 60%); }
.intro-fa__card--price { background: linear-gradient(135deg, #0369a1 0%, #0284c7 55%, #38bdf8 100%); border: 0; color: #fff; }
.intro-fa__card--price h3 { color: #fff; font-size: 1.3rem; }
.intro-fa__card--price p { color: rgba(255, 255, 255, .9); }
.intro-fa__langs { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.intro-fa__langs li { padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid #fde68a; color: #92400e; font-weight: 600; font-size: .9rem; }
.intro-fa__logos { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.intro-fa__logos li { width: 52px; height: 52px; border-radius: 16px; background: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(3, 40, 80, .2); }
.intro-fa__logos img { width: 36px; height: 36px; object-fit: contain; }
@media (min-width: 768px) {
    .intro-fa__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .intro-fa__card--price { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
    .intro-fa__grid { grid-template-columns: repeat(6, 1fr); }
    .intro-fa__card { grid-column: span 2; }
    .intro-fa__card--price { grid-column: span 4; padding: 28px 32px; }
}

/* Steps */
.how { background: linear-gradient(180deg, #f5f9fc 0%, #eef6fd 100%); }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 18px; grid-template-columns: 1fr; position: relative; }
@media (min-width: 768px) {
    .steps { grid-template-columns: repeat(3, 1fr); gap: 28px; }
    /* dashed path joining the three icons */
    .steps::before { content: ""; position: absolute; top: 62px; left: 16%; right: 16%; border-top: 2px dashed #bcd7ee; }
}
.step { counter-increment: s; position: relative; background: rgba(255, 255, 255, .85); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .9); border-radius: 22px; padding: 30px 24px 26px; text-align: center; box-shadow: 0 10px 30px rgba(16, 32, 72, .07); transition: transform .2s ease, box-shadow .2s ease; }
.step:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16, 32, 72, .12); }
.step::after { content: "0" counter(s); position: absolute; top: 14px; inset-inline-end: 18px; font-size: 2.4rem; font-weight: 800; line-height: 1; color: rgba(16, 32, 72, .06); }
.step__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 20px; color: #fff; background: var(--g); box-shadow: 0 10px 22px var(--sh); transform: rotate(-6deg); }
.step__icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(6deg); }
.step--search { --g: linear-gradient(135deg, #38bdf8, #0284c7); --sh: rgba(2, 132, 199, .35); }
.step--compare { --g: linear-gradient(135deg, #a78bfa, #7c3aed); --sh: rgba(124, 58, 237, .32); }
.step--book { --g: linear-gradient(135deg, #34d399, #059669); --sh: rgba(5, 150, 105, .32); }
.step b { display: block; font-size: 1.2rem; color: var(--navy); margin-bottom: 6px; }
.step > span:not(.step__icon) { display: block; color: var(--muted); line-height: 1.55; }
@media (max-width: 767px) {
    .step { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; align-items: center; text-align: start; padding: 18px; border-radius: 18px; }
    .step__icon { grid-row: span 2; width: 56px; height: 56px; margin: 0; border-radius: 17px; }
    .step__icon svg { width: 26px; height: 26px; }
    .step b { margin: 0; font-size: 1.08rem; }
    .step > span:not(.step__icon) { font-size: .93rem; }
    .step::after { top: 10px; font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) { .step, .step:hover { transition: none; transform: none; } }

/* FAQ */
.faq { background: #fff; }
.faq__grid { display: grid; gap: 30px; }
@media (min-width: 900px) { .faq__grid { grid-template-columns: 1fr 1.6fr; gap: 60px; align-items: start; } }
.faq__intro p { color: var(--muted); font-size: 1.05rem; }
.faq__list { display: grid; gap: 12px; }
.faq__item { background: var(--bg); border-radius: 18px; border: 1px solid transparent; transition: background .2s, border-color .2s, box-shadow .2s; }
.faq__item[open] { background: #fff; border-color: #cfe7f6; box-shadow: 0 10px 30px rgba(2, 132, 199, .1); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font-weight: 600; font-size: 1.05rem; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary i { flex: none; position: relative; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(16, 32, 72, .1); transition: transform .25s, background .2s; }
.faq__item summary i::before, .faq__item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: var(--accent); }
.faq__item summary i::after { transform: rotate(90deg); }
.faq__item[open] summary i { transform: rotate(45deg); background: var(--accent); }
.faq__item[open] summary i::before, .faq__item[open] summary i::after { background: #fff; }
.faq__item p { color: var(--muted); margin: 0; padding: 0 20px 20px; }

/* Need more help */
.helpband { background: linear-gradient(135deg, #075985, #0284c7 60%, #38bdf8); color: #fff; text-align: center; }
.helpband h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
.helpband p { opacity: .9; max-width: 560px; margin: 0 auto 28px; font-size: 1.05rem; }
.helpband__cards { display: grid; gap: 16px; max-width: 820px; margin: 0 auto; }
@media (min-width: 700px) { .helpband__cards { grid-template-columns: 1fr 1fr; } }
.helpcard { display: flex; align-items: center; gap: 16px; text-align: start; background: #fff; color: var(--text); border-radius: 20px; padding: 22px; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.helpcard:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .2); }
.helpcard__icon { flex: none; width: 64px; height: 64px; border-radius: 18px; background: var(--tint); display: grid; place-items: center; }
.helpcard b { display: block; font-size: 1.15rem; }
.helpcard small { color: var(--muted); font-size: .95rem; }

.page-head { background: linear-gradient(160deg, #e0f2fe 0%, #f0f9ff 60%, #fff 100%); color: var(--navy); padding: 48px 0 28px; }
.page-head h1 { margin: 0 0 6px; }
.page-head p { color: var(--muted); margin: 0; font-size: 1.05rem; }
.prose { font-size: 1.05rem; }
.prose h2 { margin-top: 1.5em; font-size: 1.3rem; }
.prose p { color: #3a4458; }
.page__contact { margin-top: 2em; }
.contact { display: grid; gap: 16px; }
@media (min-width: 900px) { .contact { grid-template-columns: 2fr 1fr; align-items: start; } }

/* About us */
.about-hero { position: relative; overflow: hidden; background: linear-gradient(160deg, #e0f2fe 0%, #f0f9ff 55%, #fff 100%); padding: 72px 0 40px; }
.about-hero__trail { position: absolute; inset: 0; width: 100%; height: 100%; color: #7dd3fc; opacity: .7; }
.about-hero__inner { position: relative; max-width: 820px; text-align: center; }
.about-hero h1 { font-size: clamp(2rem, 5.4vw, 3.4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; color: var(--navy); }
.about-hero p { font-size: 1.15rem; color: #374151; max-width: 640px; margin: 0 auto 26px; }
.about-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.about-stats { position: relative; list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (min-width: 860px) { .about-stats { grid-template-columns: repeat(4, 1fr); } }
.about-stats li { background: rgba(255, 255, 255, .85); backdrop-filter: blur(6px); border: 1px solid #dbeafe; border-radius: 20px; padding: 20px; box-shadow: var(--shadow); }
.about-stats b { display: block; font-size: 2rem; font-weight: 800; color: var(--accent); line-height: 1.1; }
.about-stats span { color: var(--muted); font-size: .95rem; }
.about-story { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .about-story { grid-template-columns: 1.1fr 1fr; gap: 64px; } }
.about-story p { color: #3a4458; font-size: 1.08rem; }
.about-map { display: flex; flex-wrap: wrap; gap: 12px; padding: 28px; border-radius: 28px; background: radial-gradient(circle at 20% 20%, #bae6fd, transparent 55%), radial-gradient(circle at 80% 80%, #e0e7ff, transparent 55%), #f0f9ff; }
.about-city { display: inline-flex; align-items: baseline; gap: 8px; padding: 12px 18px; border-radius: 999px; background: #fff; color: var(--navy); font-weight: 700; text-decoration: none; box-shadow: 0 4px 14px rgba(2, 132, 199, .12); transition: transform .15s, box-shadow .15s; }
.about-city small { color: var(--accent); font-weight: 600; }
.about-city:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(2, 132, 199, .2); }
.about-values-wrap { background: #fff; }
.about-values { display: grid; gap: 16px; }
@media (min-width: 640px) { .about-values { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .about-values { grid-template-columns: repeat(4, 1fr); } }
.about-value { background: var(--bg); border-radius: 22px; padding: 26px; transition: transform .15s, box-shadow .15s, background .15s; }
.about-value:hover { background: #fff; transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16, 32, 72, .1); }
.about-value__icon { width: 54px; height: 54px; border-radius: 16px; background: var(--accent); color: #fff; display: grid; place-items: center; margin-bottom: 16px; }
.about-value p { color: var(--muted); margin: 0; }
.about-cta { display: grid; gap: 22px; align-items: center; padding: 40px 32px; border-radius: 28px; color: #fff; background: linear-gradient(135deg, #075985, #0284c7 55%, #38bdf8); }
@media (min-width: 860px) { .about-cta { grid-template-columns: 1fr auto; padding: 48px 56px; } }
.about-cta h2 { color: #fff; }
.about-cta p { opacity: .9; margin: 0; font-size: 1.05rem; }
.about-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.about-cta__primary { background: #fff; color: var(--accent-dark); }
.about-cta__primary:hover { background: #e0f2fe; }

/* Footer */
.footer { background: var(--navy-dark); color: #c8d3ea; padding: 96px 0 40px; margin-top: 40px; font-size: 1.05rem; }
.footer__grid { display: grid; gap: 44px 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.footer a { overflow-wrap: anywhere; }
.footer__brand { grid-column: 1 / -1; }
@media (min-width: 700px) { .footer__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 2.2fr repeat(4, 1fr); } .footer__brand { grid-column: auto; } }
.footer__brand p { max-width: 380px; color: #a7b3cc; }
.footer h4 { color: #fff; font-size: 1.1rem; margin-bottom: 18px; }
.footer a { display: block; color: #c8d3ea; text-decoration: none; padding: 7px 0; }
.footer a:hover { color: #fff; }
.footer .logo { display: inline-flex; margin-bottom: 18px; font-size: 1.35rem; }
.footer .footer__wa { display: inline-flex; align-items: center; gap: 8px; background: #22c55e; color: #fff; border-radius: 999px; padding: 11px 20px; font-weight: 600; margin-top: 4px; }
.footer .footer__wa:hover { background: #16a34a; }
.footer .footer__accept { margin: 32px 0 14px; font-size: .95rem; color: #a7b3cc; font-weight: 600; }
.footer__note { color: #8d9ab5; font-size: .95rem; margin-top: 8px; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 72px; padding-top: 28px; font-size: .95rem; color: #8d9ab5; }
.footer__site { color: #c7d2e6; text-decoration: none; }
.footer__site:hover { color: #fff; }
.pay { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pay li { height: 48px; min-width: 78px; padding: 0 12px; background: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pay li svg { display: block; direction: ltr; } /* the logo texts are drawn from the left edge, also in Dari and Pashto */
.pay__bank { color: var(--navy); font-weight: 700; font-size: .85rem; }
.cookies { position: fixed; z-index: 80; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(720px, calc(100vw - 24px)); display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border-radius: 20px; box-shadow: 0 18px 50px rgba(17, 24, 39, .25); border: 1px solid var(--line); animation: cookies-in .35s ease; }
.cookies p { margin: 0; font-size: .9rem; color: #3a4458; }
.cookies p b { display: block; color: var(--navy); font-size: 1rem; }
.cookies__icon { font-size: 1.8rem; flex: none; }
.cookies .btn { flex: none; }
.cookies__actions { display: flex; gap: 8px; flex: none; }
@media (max-width: 599px) { .cookies { flex-wrap: wrap; bottom: 10px; } .cookies__actions { width: 100%; } .cookies .btn { flex: 1; } .cookies__icon { display: none; } }
@keyframes cookies-in { from { transform: translate(-50%, 30px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cookies { animation: none; } }
@media print { .cookies { display: none; } }
.mbar { display: none; }
@media (max-width: 767px) {
    .rbar { display: none; }
    .mbar { position: fixed; z-index: 40; bottom: 18px; left: 72px; right: 72px; display: flex; gap: 6px; }
    .mbar[hidden] { display: none; }
    .mbar__btn { flex: 1 1 0; min-width: 0; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: 999px; background: var(--brand-grad); color: #fff; font: inherit; font-weight: 600; font-size: clamp(.74rem, 3.3vw, .86rem); line-height: 1.1; white-space: nowrap; padding: 0 4px; box-shadow: 0 8px 22px rgba(79, 70, 229, .32), inset 0 1px 0 rgba(255, 255, 255, .3); cursor: pointer; transition: transform .15s, box-shadow .2s; }
    .mbar__btn:active { transform: scale(.96); }
    .mbar__btn:focus-visible { outline: 2px solid #06b6d4; outline-offset: 2px; }
    .mbar__btn svg { flex: none; width: 18px; height: 18px; }
    .offer__more { margin-inline-start: auto; }
}
@media print { .mbar { display: none !important; } }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; height: 80vh; height: 80dvh; z-index: 85; background: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(15,23,42,.18); display: flex; flex-direction: column; animation: sheet-in .25s ease-out; }
.sheet:not(.sheet--side)::before { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #cbd5e1; }
.sheet-shade { position: fixed; inset: 0; z-index: 84; background: rgba(15,23,42,.45); animation: shade-in .25s ease-out; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 1.1rem; }
.sheet__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 16px; }
.sheet__body .filters { display: block; box-shadow: none; padding: 0; position: static; max-height: none; }
.sheet__body .search { box-shadow: none; padding: 12px 0; background: #fff; }
.sheet__done { margin: 0 16px 16px; width: auto; min-height: 50px; }
html.has-sheet, html.has-sheet body { overflow: hidden; }
@keyframes sheet-in { from { transform: translateY(100%); } }
.sheet--side { top: 0; bottom: 0; left: auto; right: 0; width: min(92vw, 480px); height: auto; border-radius: 20px 0 0 20px; animation-name: side-in; }
[dir=rtl] .sheet--side { right: auto; left: 0; border-radius: 0 20px 20px 0; animation-name: side-in-rtl; }
.sheet--side .offer__detailbody { padding: 0; }
/* Hint that the side panel swipes away: three chevrons, light to darker blue, pointing right (left on RTL pages), in the middle of
   the panel for a few seconds after it opens. */
.sheet__swipe { position: absolute; top: 50%; left: 50%; width: 84px; height: 44px; margin: -22px 0 0 -42px; padding: 8px 12px; border-radius: 22px; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 18px rgba(15, 23, 42, .15); pointer-events: none; z-index: 2; animation: swipe-nudge 1.6s ease-in-out 3, swipe-out .4s ease-in 4.8s forwards; }
.sheet__swipe svg { display: block; width: 100%; height: 100%; fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.sheet__swipe path:nth-child(1) { stroke: #b6d0ef; }
.sheet__swipe path:nth-child(2) { stroke: #7ea9e3; }
.sheet__swipe path:nth-child(3) { stroke: #3f7fd9; }
@keyframes swipe-nudge { 50% { translate: 6px 0; } }
[dir=rtl] .sheet__swipe svg { transform: scaleX(-1); }
[dir=rtl] .sheet__swipe { animation-name: swipe-nudge-rtl, swipe-out; }
@keyframes swipe-nudge-rtl { 50% { translate: -6px 0; } }
@keyframes swipe-out { to { opacity: 0; visibility: hidden; } }
@keyframes side-in { from { transform: translateX(100%); } }
@keyframes side-in-rtl { from { transform: translateX(-100%); } }
@keyframes shade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sheet, .sheet-shade { animation: none; } .sheet__swipe { animation: swipe-out .4s ease-in 4.8s forwards; } }
/* WhatsApp: a glossy green button with a soft pulse and an "online" dot; on desktop it opens into a pill with a label. */
.wa-float { position: fixed; left: 18px; bottom: 18px; z-index: 40; width: 48px; height: 48px; border-radius: 50%; background: #22c55e; color: #fff; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(34, 197, 94, .4); transition: transform .15s, background .15s; }
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: wa-pulse 2.4s ease-out infinite; pointer-events: none; }
.wa-float:hover { background: #16a34a; transform: translateY(-2px); }
@keyframes wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); } 70%, 100% { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0); } }
@media (prefers-reduced-motion: reduce) { .wa-float::before { animation: none; } }
[dir=rtl] .wa-float { left: auto; right: 18px; }
@media print { .wa-float { display: none; } }

/* Results */
.results-head { background: linear-gradient(120deg, #075985 0%, #0369a1 45%, #0284c7 100%); color: #fff; padding: 18px 0; }
.results-head h1 { color: #fff; font-size: 1.35rem; margin: 0; }
.results-head p { margin: 2px 0 0; opacity: .85; font-size: .95rem; }
.results-head__summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
.results-head__summary > * { grid-column: 1; }
.results-head__edit { grid-column: 2 !important; grid-row: 1 / span 2; justify-self: end; white-space: nowrap; color: #fff !important; border-color: rgba(255, 255, 255, .5) !important; }
.results-head__form { margin-top: 14px; }
.results-head__form .search--rich, .rbar .search--rich { max-width: none; }
.results-head__form[data-collapsed] { display: none; }
@media (min-width: 992px) { .results-head__form[data-collapsed] { display: block; } .results-head__edit { display: none; } }
.results { display: grid; gap: 20px; padding-top: 20px; grid-template-columns: minmax(0, 1fr); }
.results__filter-btn { background: #fff; }
.filters[data-collapsed] { display: none; }
.filters { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px 16px; align-self: start; }
.filters fieldset { border: 0; border-bottom: 1px solid var(--line); padding: 12px 0; margin: 0; }
.filters legend { font-weight: 700; padding: 0; margin-bottom: 6px; }
.filters label { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; font-size: .95rem; }
.filters label span { margin-left: auto; color: var(--muted); font-size: .85rem; }
.filters__bag { font-weight: 600; }
.filters input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; margin: 0; border: 1.5px solid #cbd5e1; border-radius: 5px; background: #fff; cursor: pointer; transition: background .15s, border-color .15s; }
.filters input[type=checkbox]::after { content: ""; width: 5px; height: 9px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .15s; }
.filters input[type=checkbox]:checked { background: var(--brand-grad); border-color: transparent; }
.filters input[type=checkbox]:checked::after { transform: rotate(45deg) scale(1); }
.filters input[type=checkbox]:focus-visible { outline: 2px solid #06b6d4; outline-offset: 2px; }
.filters input[type=range] { --v: 100%; appearance: none; -webkit-appearance: none; width: 100%; height: 6px; margin: 10px 0; border-radius: 6px; background: linear-gradient(90deg, #4f46e5, #06b6d4) 0 / var(--v) 100% no-repeat, #e2e8f0; cursor: pointer; }
.filters input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid #06b6d4; box-shadow: 0 2px 8px rgba(79, 70, 229, .3); }
.filters input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid #06b6d4; box-shadow: 0 2px 8px rgba(79, 70, 229, .3); }
.filters input[type=range]:disabled { cursor: default; opacity: .6; }
.filters input[type=range]:focus-visible { outline: 2px solid #06b6d4; outline-offset: 4px; }
.filters form > .btn { margin: 12px 0 8px; }
@media (min-width: 992px) {
    .results { grid-template-columns: 270px minmax(0, 1fr); }
    .results__filter-btn { display: none; }
    .filters, .filters[data-collapsed] { display: block; position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: scroll; }
    /* A styled scrollbar stays visible (macOS hides the default one until you scroll). */
    .filters::-webkit-scrollbar { width: 8px; }
    .filters::-webkit-scrollbar-track { background: var(--bg); border-radius: 8px; margin: 12px 0; }
    .filters::-webkit-scrollbar-thumb { background: #b6c6d6; border-radius: 8px; }
    .filters::-webkit-scrollbar-thumb:hover { background: var(--accent); }
    @supports not selector(::-webkit-scrollbar) { .filters { scrollbar-width: thin; scrollbar-color: #b6c6d6 var(--bg); } }
}
.sortbar { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.sortbar button { border: 0; background: none; padding: 12px 4px; font-weight: 600; cursor: pointer; color: var(--muted); border-bottom: 3px solid transparent; }
.sortbar button.active { color: var(--navy); border-bottom-color: var(--accent); }
.results__count { color: var(--muted); font-size: .9rem; margin: 10px 2px; }
.empty { background: #fff; border-radius: var(--radius); padding: 40px 20px; text-align: center; box-shadow: var(--shadow); }

.offer { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 10px; overflow: hidden; border: 1px solid transparent; position: relative; }
.offer__label { position: absolute; top: 0; left: 0; z-index: 1; background: #f59e0b; color: #1f2a37; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 3px 10px; border-radius: 0 0 10px 0; }
.offer:has(.offer__label) .offer__legs { padding-top: 22px; }
.offer:hover { border-color: #c9d6ee; }
.offer__body { display: grid; grid-template-columns: 1fr; }
@media (min-width: 720px) { .offer__body { grid-template-columns: minmax(0, 1fr) 200px; } }
.offer__legs { padding: 10px 14px; display: grid; gap: 10px; }
.leg { display: grid; gap: 4px; }
@media (min-width: 560px) { .leg { grid-template-columns: 150px 1fr; align-items: center; } }
.leg__airline { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); }
.leg__times { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.leg__pt { text-align: center; }
.leg__pt time { display: block; font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
.leg__pt time sup { color: var(--bad); font-size: .65rem; margin-left: 2px; }
.leg__pt span { color: var(--muted); font-size: .85rem; font-weight: 600; }
.leg__mid { display: flex; flex-direction: column; align-items: center; font-size: .8rem; color: var(--muted); }
.leg__track { width: 100%; height: 2px; background: #b7c3db; position: relative; display: flex; justify-content: space-evenly; margin: 4px 0; }
.leg__track i { width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); margin-top: -3px; }
.leg__track::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left-color: #b7c3db; }
.leg__stops { color: var(--accent-dark); font-weight: 600; }
.leg__stops.direct { color: var(--ok); }
.leg__via::before { content: " · "; }
[dir=rtl] .leg__via::before { content: "، "; }
/* Phones: the stop count on one line and where and how long each stop is on the next. */
@media (max-width: 559px) { .leg__stops { text-align: center; line-height: 1.3; } .leg__via { display: block; font-weight: 500; } .leg__via::before { content: none; } }
.offer__side { border-top: 1px dashed var(--line); padding: 8px 14px; display: grid; gap: 4px 12px; align-content: center; grid-template-columns: 1fr auto; align-items: center; }
.offer__side .btn { grid-row: 1 / span 2; grid-column: 2; padding: 9px 18px; }
@media (min-width: 720px) {
    .offer__side { border-top: 0; border-inline-start: 1px dashed var(--line); grid-template-columns: 1fr; text-align: center; padding: 10px 14px; gap: 6px; }
    .offer__side .btn { grid-row: auto; grid-column: auto; width: 100%; }
}
.offer__price b { display: block; font-size: 1.4rem; line-height: 1.2; color: var(--navy); }
.offer__price small { color: var(--muted); font-size: .78rem; }
.offer__fare { color: var(--muted); font-size: .78rem; }
.offer__details { border-top: 1px solid var(--line); }
.offer__details > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 6px 14px; color: var(--navy-2); font-weight: 600; font-size: .9rem; list-style: none; }
.offer__details > summary::-webkit-details-marker { display: none; }

.offer__more::after { content: " ▾"; }
.offer__details[open] .offer__more::after { content: " ▴"; }
.tool-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; color: var(--navy-2); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.tool-btn:hover { background: var(--tint); border-color: transparent; }
.bag-btn { position: relative; width: 34px; height: 30px; padding: 0; justify-content: center; color: var(--muted); }
.bag-btn--ok { color: var(--navy); }
.bag-btn__ok { position: absolute; top: -5px; inset-inline-end: -5px; width: 17px; height: 17px; border-radius: 50%; background: #16a34a; display: grid; place-items: center; border: 2px solid #fff; }
.bag-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.bag-list li { display: flex; align-items: center; gap: 12px; }
.bag-list li span:last-child { display: grid; color: var(--muted); font-size: .88rem; }
.bag-list b { color: var(--text); font-size: 1rem; }
.bag-list__leg { font-weight: 700; margin-top: 4px; }
.bag-list__icon { width: 40px; height: 40px; border-radius: 12px; background: var(--bg); display: grid; place-items: center; font-size: 1.2rem; flex: none; }
.bag-list__icon.is-ok { background: #dcfce7; }
.confirm { width: min(420px, calc(100vw - 32px)); text-align: center; }
.confirm .modal__body { padding: 26px 22px 22px; }
.confirm h2 { font-size: 1.2rem; margin: 12px 0 16px; }
.confirm__icon { width: 56px; height: 56px; border-radius: 16px; background: #22c55e; color: #fff; display: inline-grid; place-items: center; }
.confirm__icon svg { width: 30px; height: 30px; }
.confirm__icon--bad { background: #fee2e2; color: var(--bad); }
.checking p { color: var(--muted); margin: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.checking__spin { display: inline-block; width: 52px; height: 52px; border-radius: 50%; border: 5px solid var(--tint); border-top-color: var(--accent); animation: spin 0.9s linear infinite; }
.confirm__deal { background: var(--bg); border-radius: 14px; padding: 14px; text-align: start; }
.confirm__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.btn--wa { background: #22c55e; color: #fff; }
.btn--wa:hover { background: #16a34a; }
.confirm .deal__line span { background: var(--bg); }
#popup { width: min(440px, calc(100vw - 32px)); }
.offer__detailbody { padding: 0 16px 16px; }
.offer__cols { display: grid; gap: 16px; }
@media (min-width: 720px) { .offer__cols { grid-template-columns: 1fr 1fr; } }
.offer__cols h4 { margin-top: 12px; }

.al-logo { border-radius: 6px; object-fit: contain; flex: none; background: #fff; }
.al-logo--badge { display: inline-grid; place-items: center; color: #fff; font-weight: 700; font-size: .72rem; background: hsl(var(--h) 55% 38%); }

.itin { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-top: 12px; }
.itin__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-bottom: 10px; }
.itin__head span { color: var(--muted); font-size: .9rem; }
.seg__line { border-left: 2px solid #b7c3db; margin-left: 24px; padding-left: 16px; display: grid; gap: 10px; }
.seg__point { display: grid; grid-template-columns: 56px 1fr; gap: 8px; position: relative; }
.seg__point::before { content: ""; position: absolute; left: -23px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--navy); }
.seg__point time { font-weight: 700; }
.seg__point small { display: block; color: var(--muted); font-size: .85rem; }
.seg__info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: .88rem; padding: 4px 0 4px 64px; }
.seg__info small { width: 100%; }
.seg__layover { margin: 10px 0; padding: 8px 12px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); font-size: .88rem; font-weight: 600; }
.bags { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.bag { display: inline-flex; align-items: center; gap: 6px; }
.bag b { color: var(--text); }
.rules__text { white-space: pre-line; font-size: .9rem; color: var(--text); margin: 0; padding: 12px 14px; border-radius: 8px; background: var(--bg); }
.price { margin: 0; }
.price div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: .92rem; }
.price dt { color: var(--muted); }
.price dd { margin: 0; font-weight: 600; }
.price__total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px !important; font-size: 1.1rem !important; }
.price__total dt { color: var(--text); font-weight: 700; }
.price__total dd { color: var(--navy); font-weight: 800; }

/* Booking */
.booking { padding-top: 20px; }
.booking__grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .booking__grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .summary { position: sticky; top: 76px; } }
.progress { list-style: none; display: flex; padding: 0; margin: 0 0 20px; counter-reset: p; }
.progress li { flex: 1; text-align: center; font-size: .8rem; color: var(--muted); position: relative; counter-increment: p; padding-top: 34px; }
.progress li::before { content: counter(p); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%; background: #dfe5ef; color: var(--muted); display: grid; place-items: center; font-weight: 700; z-index: 1; }
.progress li::after { content: ""; position: absolute; top: 13px; inset-inline-start: -50%; width: 100%; height: 2px; background: #dfe5ef; }
.progress li:first-child::after { display: none; }
.progress li.done::before { background: var(--ok); color: #fff; content: "✓"; }
.progress li.current { color: var(--navy); font-weight: 700; }
.progress li.current::before { background: var(--navy); color: #fff; }
.progress li.done::after, .progress li.current::after { background: var(--ok); }
.summary h3 { margin-bottom: 12px; }
.summary__leg { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.summary__leg small { color: var(--muted); }
.summary__route { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.summary__route span { display: block; color: var(--muted); font-size: .85rem; }
.summary__route sup { color: var(--bad); font-size: .65rem; }
.collapsible > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.collapsible > summary h2 { margin: 0; font-size: 1.15rem; }
.collapsible > summary span { color: var(--navy-2); font-size: .9rem; }
.pax legend small { color: var(--muted); font-weight: 500; font-size: .85rem; margin-left: 6px; }
/* Review page: every detail once more before payment. */
.review__title { margin: 0 0 4px; }
.review__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.review__head h3 { margin: 0; }
.link-btn { border: 0; background: none; padding: 4px 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.review__pax + .review__pax { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.review__pax small { color: var(--muted); font-weight: 500; font-size: .85rem; margin-left: 6px; }
.review__facts { display: grid; gap: 10px 20px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); margin: 10px 0 0; }
.review__facts dt { color: var(--muted); font-size: .8rem; }
.review__facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.review__actions { display: grid; gap: 12px; }
@media (min-width: 640px) { .review__actions { grid-template-columns: auto 1fr; } .review__total { grid-column: 1 / -1; } }
.review__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.1rem; }
.review__total b { font-size: 1.5rem; color: var(--navy); }
.pax__num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; font-size: .85rem; margin-right: 6px; }
.secure { display: flex; align-items: center; gap: 6px; justify-content: center; margin: 10px 0 0; }
.confirm { text-align: center; padding: 32px 20px; }
.confirm--ok svg { color: var(--ok); }
.confirm__ref { display: inline-block; margin: 8px 0 16px; padding: 10px 18px; border: 2px dashed var(--navy); border-radius: 10px; font-size: 1.05rem; }
.confirm__ref b { font-size: 1.4rem; letter-spacing: .08em; color: var(--navy); margin-left: 6px; }
.confirm__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin: 0 0 16px; }
.confirm__facts dt { color: var(--muted); font-size: .8rem; }
.confirm__facts dd { margin: 0; font-weight: 700; }
.details-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; }
.details-head h1 { margin: 0; letter-spacing: .06em; }
.details-head p { margin: 0; color: var(--muted); }
.details-head__side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.details-head__side b { font-size: 1.3rem; color: var(--navy); }
.manage-actions h2 { margin: 0 0 12px; font-size: 1.15rem; }
.manage-actions__row { display: flex; flex-wrap: wrap; gap: 10px; }
.manage-actions__row .btn { flex: 1 1 220px; }
.manage-history h2 { margin: 0 0 12px; font-size: 1.15rem; }
.manage-history ol { list-style: none; margin: 0 0 8px; padding: 0; }
.manage-history li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
.manage-history li p { margin: 0 0 2px; }
.manage-history li > div { flex: 1; min-width: 0; }
.manage-history__status { flex: none; }
.manage-history__tag { flex: none; font-size: .78rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--tint); color: var(--navy); }
.manage-history__tag.is-cancel { background: #fee2e2; color: var(--bad); }
/* Our answer to a request (note and price difference) and the customer's Confirm / Decline. */
.manage-history li { flex-wrap: wrap; }
.manage-history li > .offer { flex: 1 1 100%; padding: 14px 16px; border-radius: 12px; background: #f3f6fb; border: 1px solid var(--line); }
.offer__flights { display: grid; gap: 8px; margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: #fff; }
.offer__flights small { display: block; color: var(--muted); font-size: .78rem; }
.offer__from { display: block; margin-bottom: 6px; color: var(--navy); }
.offer-note { white-space: pre-line; margin: 0 0 8px; }
.offer__diff { margin: 0 0 8px; }
.offer__form { margin-top: 10px; }
.offer__form .field { margin-bottom: 8px; }
.offer__form textarea { background: #fff; }
.offer-alert { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.btn--bad { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn--ghost.btn--bad { background: transparent; color: var(--bad); border-color: #fecaca; }
.confirm__btns { display: flex; gap: 10px; margin-top: 16px; }
.confirm__btns .btn { flex: 1; }
.confirm .form .field { text-align: start; }
.trips { display: grid; gap: 12px; }
.trip { display: flex; gap: 14px; align-items: center; text-decoration: none; color: inherit; margin: 0; }
.trip__main { flex: 1; min-width: 0; }
.trip__main span, .trip__main small { display: block; color: var(--muted); font-size: .9rem; }
.trip__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

@media print {
    .topbar, .footer, .no-print, .progress { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; border: 1px solid #ccc; }
}

/* Search loader: route with a plane, messages that take turns, and a percentage */
.results > .searching, .results > .empty, .results > .alert { grid-column: 1 / -1; }
.searching { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px 20px 28px; }
.loader { max-width: 560px; margin: 0 auto; text-align: center; }
.loader__route { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.loader__pt b { display: block; font-size: 1.7rem; font-weight: 800; color: var(--navy); letter-spacing: .02em; line-height: 1.1; }
.loader__pt small { display: block; color: var(--muted); font-size: .85rem; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loader__sky { position: relative; height: 44px; }
.loader__line { position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed #b5d8ec; }
.loader__plane { position: absolute; top: 50%; left: 0; color: var(--accent); transform: translate(-50%, -50%); animation: loader-fly 2.8s ease-in-out infinite; }
@keyframes loader-fly {
    0% { left: 0; opacity: 0; transform: translate(-50%, -50%); }
    12% { opacity: 1; }
    50% { transform: translate(-50%, -62%); }
    88% { opacity: 1; }
    100% { left: 100%; opacity: 0; transform: translate(-50%, -50%); }
}
/* Dari and Pashto: the plane flies from the right (where the departure city is) and faces left. */
[dir=rtl] .loader__plane { animation-name: loader-fly-rtl; }
@keyframes loader-fly-rtl {
    0% { left: 100%; opacity: 0; transform: translate(-50%, -50%) scaleX(-1); }
    12% { opacity: 1; }
    50% { transform: translate(-50%, -62%) scaleX(-1); }
    88% { opacity: 1; }
    100% { left: 0; opacity: 0; transform: translate(-50%, -50%) scaleX(-1); }
}
.loader__msgs { list-style: none; margin: 26px 0 24px; padding: 0; position: relative; height: 58px; overflow: hidden; }
.loader__msgs li { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transform: translateY(100%); transition: transform .5s ease, opacity .5s ease; }
.loader__msgs li.is-on { opacity: 1; transform: none; }
.loader__msgs li.is-out { opacity: 0; transform: translateY(-100%); }
.loader__msgs b { font-size: 1.2rem; color: var(--navy); }
.loader__msgs span { color: var(--muted); font-size: .95rem; }
.loader__progress { display: flex; align-items: center; gap: 12px; }
.loader__bar { flex: 1; height: 8px; background: var(--tint); border-radius: 999px; overflow: hidden; }
.loader__bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #38bdf8); border-radius: 999px; transition: width .3s ease; }
.loader__progress b, .preview__note b { min-width: 3em; text-align: right; color: var(--accent); font-variant-numeric: tabular-nums; }
.loader-screen { position: fixed; inset: 0; z-index: 90; background: rgba(255, 255, 255, .97); display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.loader-screen .loader { width: 100%; }
@media (prefers-reduced-motion: reduce) { .loader__plane, [dir=rtl] .loader__plane { animation: none; left: 50%; } .loader__msgs li { transition: none; } }

/* Saved flights shown while today's prices load */
.preview__note { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 16px; margin-bottom: 14px; font-weight: 600; font-size: .95rem; }
.preview__note .loader__bar { min-width: 60px; }
.offer__loading { display: block; font-size: 1.2rem; font-weight: 700; color: var(--muted); animation: loading-pulse 1.4s ease-in-out infinite; }
@keyframes loading-pulse { 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .offer__loading { animation: none; } }

/* Search timed out */
.timeout { position: fixed; inset: 0; z-index: 95; background: rgba(17, 24, 39, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.timeout__box { background: #fff; border-radius: 20px; padding: 28px 24px 22px; max-width: 380px; width: 100%; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.timeout__icon { display: inline-flex; width: 56px; height: 56px; border-radius: 50%; background: var(--tint); color: var(--accent); align-items: center; justify-content: center; margin-bottom: 12px; }
.timeout__box h2 { font-size: 1.25rem; }
.timeout__box p { color: var(--muted); }
.btn.is-busy { opacity: .75; cursor: progress; }

/* Round trip: choose outbound, then return */

/* Calendar */
.date__native { position: absolute !important; opacity: 0; pointer-events: none; width: 1px !important; height: 1px; min-height: 0 !important; padding: 0 !important; border: 0 !important; }
.date__btn { width: 100%; min-height: 48px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--navy); text-align: left; font-weight: 600; cursor: pointer; white-space: nowrap; }
.date__btn.is-empty { color: var(--muted); font-weight: 500; }
.date__btn:disabled { background: #f2f4f8; color: #9aa3b5; cursor: default; }
.hero .date__btn { border: 1px solid var(--line); }
@media (min-width: 1100px) { .hero .date__btn { border: 0; min-height: 30px; padding: 0; font-weight: 500; font-size: 1rem; background: transparent; } .hero .date__btn:focus-visible { outline: 0; } }
.search { position: relative; }
.cal { position: fixed; inset: 0; z-index: 200; background: #fff; display: flex; flex-direction: column; color: var(--navy); }
.cal__head { display: flex; gap: 8px; align-items: stretch; padding: 12px; border-bottom: 1px solid var(--line); }
.cal__tab { flex: 1; text-align: left; border: 2px solid var(--line); background: #fff; border-radius: 14px; padding: 8px 14px; cursor: pointer; min-height: 56px; }
.cal__tab small { display: block; font-size: .78rem; color: var(--muted); font-weight: 600; }
.cal__tab b { font-size: 1.05rem; }
.cal__tab.is-on { border-color: var(--accent); background: var(--tint); }
.cal__body { position: relative; flex: 1; overflow: auto; padding: 8px 16px; }
.cal__months { display: grid; gap: 24px; grid-template-columns: 1fr; }
.cal__month h3 { text-align: center; font-size: 1.15rem; margin: 12px 0; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px 0; }
.cal__dow { text-align: center; font-size: .8rem; font-weight: 600; color: var(--muted); padding: 6px 0; }
.cal__day { height: 48px; border: 0; background: transparent; font-size: 1.05rem; font-weight: 500; cursor: pointer; border-radius: 999px; color: var(--navy); }
.cal__day:hover:not([disabled]) { background: var(--tint); }
.cal__day[disabled] { color: #c3c9d2; cursor: default; }
.cal__day.is-today { box-shadow: inset 0 0 0 1px var(--line); }
.cal__day.is-range { background: var(--tint); border-radius: 0; }
.cal__day.is-start, .cal__day.is-end { background: var(--brand-grad) !important; color: #fff; font-weight: 700; }
.cal__nav { position: absolute; top: 14px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; z-index: 1; color: var(--navy); }
.cal__nav[disabled] { opacity: .3; cursor: default; }
.cal__nav--prev { left: 12px; }
.cal__nav--next { right: 12px; }
.cal__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); color: var(--muted); }
.cal__foot .btn { min-width: 120px; min-height: 48px; }
@media (max-width: 767px) { .cal-open { overflow: hidden; } }
@media (min-width: 768px) {
    .cal { position: absolute; inset: auto; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: min(600px, calc(100vw - 32px)); border-radius: 20px; box-shadow: 0 20px 50px rgba(17, 24, 39, .2); max-height: calc(100vh - 92px); }
    .cal__day { height: 34px; font-size: .9rem; }
    .cal__dow { font-size: .72rem; padding: 4px 0; }
    .cal__months { grid-template-columns: 1fr 1fr; gap: 28px; }
    .cal__month h3 { font-size: 1rem; margin: 8px 0; }
    .cal__body { padding: 4px 18px 10px; }
    .cal__head { padding: 12px 12px 10px; }
    .cal__tab { min-height: 46px; padding: 6px 12px; border-radius: 12px; }
    .cal__tab b { font-size: .95rem; }
    .cal__nav { top: 8px; width: 34px; height: 34px; font-size: 1.3rem; }
    .cal__foot { padding: 10px 14px; font-size: .9rem; }
    .cal__foot .btn { min-height: 40px; min-width: 100px; }
}

/* Multi-city: flights 2 and 3 reuse the search row's grid, so every box lines up with flight 1. */
.mleg__num { display: block; font-size: .85rem; font-weight: 700; color: var(--navy); margin: 0 0 6px 4px; }
.mleg__num--first { display: none; }
.search--multi .mleg__num--first { display: block; }
.results-head .mleg__num { color: #fff; }
.search__multi { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.mleg__remove { justify-self: end; align-self: end; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy); display: grid; place-items: center; cursor: pointer; }
.mleg__add { align-self: flex-start; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px dashed var(--accent); background: #fff; color: var(--accent); font-weight: 600; cursor: pointer; }
@media (min-width: 1100px) {
    .search--multi .search__row { grid-template-columns: 1.4fr 1.4fr 1.2fr 1.2fr 190px; }
    .search--multi .search__go { width: 100%; }
    .search--rich.search--multi .search__row { grid-template-columns: 1.45fr 1.45fr 1.2fr 1.2fr auto; }
    .search--rich.search--multi .search__go { width: auto; }
    .mleg__remove { grid-column: -2; justify-self: center; align-self: center; }
}
@media (min-width: 1100px) { .search--rich .mleg__row .field--date { border-inline-end: 0; } }

/* Results: date strip and the slim sticky search bar */
.page-results .topbar { position: static; }
.dates { display: flex; align-items: stretch; background: #fff; color: var(--navy); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.results .dates { margin-bottom: 12px; }
.dates__nav { border-radius: 0; }
.dates__nav { flex: none; width: 44px; border: 0; background: #fff; color: var(--navy); cursor: pointer; display: grid; place-items: center; }
.dates__nav:hover { background: #f2f7fb; }
.dates__list { flex: 1; display: flex; list-style: none; margin: 0; padding: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.dates__list::-webkit-scrollbar { display: none; }
/* As many days as fit: narrow fixed-width days rather than a few wide ones. */
/* Always seven days across; the rest of the three months is a swipe or an arrow away */
.dates__list li { flex: 0 0 calc(100% / 7); min-width: 0; scroll-snap-align: start; border-left: 1px solid var(--line); }
.dates__day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 100%; min-height: 64px; padding: 8px 2px; text-decoration: none; color: var(--navy); border-bottom: 3px solid transparent; text-align: center; }
.dates__day i { font-style: normal; font-size: .78rem; color: var(--muted); }
.dates__day b { font-weight: 500; font-size: .92rem; white-space: nowrap; }
.dates__day small { color: var(--muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 599px) {
    .dates__nav { width: 28px; }
    .dates__day { padding: 6px 1px; }
    .dates__day i { font-size: .7rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dates__day b { font-size: .78rem; white-space: normal; line-height: 1.2; }
    .dates__day small { font-size: .7rem; }
    /* "See price" doesn't fit a seventh of a phone: a small magnifier says the same */
    .dates__see { font-size: 0 !important; width: 13px; height: 13px; margin-top: 2px; background: currentColor; -webkit-mask: var(--mag) center / contain no-repeat; mask: var(--mag) center / contain no-repeat; --mag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E"); }
}
a.dates__day:hover { background: #f2f7fb; }
.dates__day.is-on { border-bottom-color: var(--accent); }
.dates__day.is-on b { font-weight: 700; }
.dates__day.is-on small { color: var(--navy); font-weight: 600; }
.dates__day.is-off { color: #b5bcc8; }
.rbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: linear-gradient(120deg, #075985 0%, #0369a1 45%, #0284c7 100%); color: #fff; padding: 8px 0 10px; box-shadow: 0 6px 20px rgba(17, 24, 39, .25); transform: translateY(-110%); transition: transform .2s ease; visibility: hidden; }
.rbar.is-visible { transform: none; visibility: visible; }
.rbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rbar__sum { min-width: 0; display: flex; flex-direction: column; }
.rbar__sum b { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbar__sum span { font-size: .82rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbar__edit { flex: none; background: #fff; color: var(--navy); }
.rbar .dates { margin-top: 8px; border-radius: 12px; box-shadow: none; }
.rbar .dates__day { min-height: 46px; padding: 4px; }
.rbar .dates__day b { font-size: .82rem; }
.rbar .dates__day i { display: none; }
.rbar .dates__day small { font-size: .78rem; }
.rbar .dates__nav { width: 36px; }
@media (max-width: 599px) { .rbar__edit span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .rbar__edit { width: 44px; height: 44px; padding: 0; } }
@media (min-width: 992px) { .page-results .filters, .page-results .filters[data-collapsed] { top: 136px; max-height: calc(100vh - 152px); } }
.results__none { grid-column: 1 / -1; }

/* Search form opened inside the sticky bar */
.rbar__icon-close, .rbar__label-close { display: none; }
.rbar.is-open .rbar__icon-close, .rbar.is-open .rbar__label-close { display: inline; }
.rbar.is-open .rbar__icon-edit, .rbar.is-open .rbar__label-open { display: none; }
.rbar.is-open .dates { display: none; }
.rbar__panel { padding: 4px 0 12px; }
.rbar .mleg__num { color: #fff; }
@media (max-width: 991px) { .rbar__panel { max-height: calc(100vh - 70px); overflow-y: auto; overscroll-behavior: contain; } }
.btn.is-disabled { opacity: .55; pointer-events: none; }
.offer__price .offer__loading { font-size: 1.2rem; }
/* Back to top: a round button in the Search colours whose ring fills as the page is scrolled. */
.to-top { --p: 0; position: fixed; right: 20px; bottom: 22px; z-index: 40; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: var(--brand-grad); box-shadow: 0 10px 28px rgba(79, 70, 229, .35); opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity .25s, transform .25s, box-shadow .2s; }
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top__ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.to-top__ring circle { fill: none; stroke-width: 2.5; }
.to-top__track { stroke: rgba(255, 255, 255, .25); }
.to-top__bar { stroke: #fff; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p)); transition: stroke-dashoffset .1s linear; }
.to-top__arrow { position: relative; transition: transform .2s; }
.to-top:hover { background: var(--brand-grad-dark); box-shadow: 0 14px 34px rgba(79, 70, 229, .45); }
.to-top:hover .to-top__arrow { transform: translateY(-3px); }
.to-top:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
[dir=rtl] .to-top { right: auto; left: 20px; }
/* Phones: WhatsApp, Filters, Change search and back to top sit in one row, same size and bottom line. */
@media (max-width: 767px) { .to-top { right: 18px; bottom: 18px; width: 48px; height: 48px; } [dir=rtl] .to-top { right: auto; left: 18px; } }
/* Right-to-left languages (Dari, Pashto): flight lines and calendar arrows point the reading way. */
[dir=rtl] .leg__track::after { right: auto; left: -2px; border-left-color: transparent; border-right-color: #b7c3db; }
[dir=rtl] .cal__nav { transform: scaleX(-1); }
[dir=rtl] .cal__nav--prev { left: auto; right: 12px; }
[dir=rtl] .cal__nav--next { right: auto; left: 12px; }
[dir=rtl] .loc__col a { justify-content: flex-start; }
/* Fare rules: a button on each flight opens the rule in a popup. */
.modal { border: 0; padding: 0; border-radius: 20px; width: min(560px, calc(100vw - 32px)); max-height: min(80vh, 720px); box-shadow: 0 24px 64px rgba(17, 24, 39, .3); color: var(--text); }
.modal::backdrop { background: rgba(17, 24, 39, .55); backdrop-filter: blur(2px); }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; }
.modal__head h2 { margin: 0; font-size: 1.2rem; }
/* Every close (×) button: one look. The × is drawn with two bars so it sits exactly in the centre. */
.modal__x, .pax__x, .sheet__x, .cal__close { position: relative; flex: none; align-self: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy); font-size: 0; cursor: pointer; box-shadow: 0 2px 8px rgba(15, 23, 42, .08); transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .25s; }
.modal__x::before, .modal__x::after, .pax__x::before, .pax__x::after, .sheet__x::before, .sheet__x::after, .cal__close::before, .cal__close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.modal__x::after, .pax__x::after, .sheet__x::after, .cal__close::after { transform: rotate(-45deg); }
/* Hover effect on computers only: on phones a tap would flash it for a moment. */
@media (hover: hover) { .modal__x:hover, .pax__x:hover, .sheet__x:hover, .cal__close:hover { background: var(--brand-grad); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(79, 70, 229, .3); transform: rotate(90deg); } }
.modal__x:focus-visible, .pax__x:focus-visible, .sheet__x:focus-visible, .cal__close:focus-visible { outline: 2px solid #06b6d4; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .modal__x, .pax__x, .sheet__x, .cal__close { transition: none; } .modal__x:hover, .pax__x:hover, .sheet__x:hover, .cal__close:hover { transform: none; } }
.modal__body { padding: 18px 20px 22px; overflow: auto; }
.modal__body .rules__text { background: none; padding: 0; font-size: .95rem; line-height: 1.6; }
/* Airline strip on the results page */
.alstrip { display: flex; align-items: stretch; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 14px; overflow: hidden; }
.alstrip__list { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 10px 4px; flex: 1; }
.alstrip__list::-webkit-scrollbar { display: none; }
.alstrip__item { flex: none; scroll-snap-align: start; display: flex; align-items: center; gap: 10px; min-width: 150px; max-width: 220px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; font: inherit; text-align: start; color: var(--text); transition: border-color .15s, background .15s, box-shadow .15s; }
.alstrip__item:hover { border-color: #b6d9ee; }
.alstrip__item.is-on { border-color: var(--accent); background: var(--tint); box-shadow: inset 0 0 0 1px var(--accent); }
.alstrip__item > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.alstrip__item b { font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alstrip__item small { font-size: .85rem; color: var(--accent); font-weight: 700; }
.alstrip__all-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: .95rem; flex: none; }
.alstrip__item .al-logo { flex: none; object-fit: contain; }
.alstrip__nav { flex: none; width: 40px; border: 0; background: #fff; color: var(--navy); cursor: pointer; display: grid; place-items: center; }
.alstrip__nav:hover { background: var(--bg); }
[dir=rtl] .alstrip__nav svg { transform: scaleX(-1); }
@media (max-width: 640px) { .alstrip__nav { display: none; } .alstrip__list { padding: 10px; } .alstrip__item { min-width: 132px; } }

/* Fare brands: two prices on the result (cheapest, cheapest with a bag), and the fare popup with a card per brand. */
.fare-picks { display: grid; gap: 6px; grid-column: 1 / -1; }
.fare-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 0 0 0 12px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; font: inherit; color: var(--text); cursor: pointer; text-align: start; overflow: hidden; }
.fare-pick span { padding: 6px 0; display: grid; }
.fare-pick b { font-size: 1.15rem; line-height: 1.2; color: var(--navy); }
.fare-pick small { color: var(--muted); font-size: .75rem; }
.fare-pick i { font-style: normal; align-self: stretch; display: grid; place-items: center; padding: 0 14px; background: var(--accent); color: #fff; font-weight: 600; font-size: .85rem; }
.fare-pick:hover { border-color: var(--accent); }
.fare-pick--bag { border-color: #bfe3f6; background: var(--tint); }
.is-bag-only .fare-pick--nobag { display: none; }
.fare-picks__note { color: var(--muted); font-size: .72rem; text-align: center; }
/* The dialog itself scrolls (no flex sizing: Safari collapses a flex body to nothing), so the head and foot stay put. */
.modal--fares { width: min(1080px, calc(100vw - 32px)); max-height: min(92vh, 920px); overflow-y: auto; background: var(--bg); }
.modal--fares .modal__head { z-index: 2; }
.modal--fares .modal__body { background: var(--bg); padding: 16px 20px 0; overflow: visible; }
.fares__wait { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 0; color: var(--muted); }
.fares__wait .checking__spin { width: 22px; height: 22px; margin: 0; border-width: 3px; }
.fares__leg + .fares__leg { margin-top: 10px; }
.fares__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; font-size: .92rem; font-weight: 500; color: var(--muted); }
.fares__title b { color: var(--navy); font-size: 1.05rem; }
.fares__tag { background: var(--navy); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.fares__cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 16px; margin: 0 -4px; }
.fare-card { scroll-snap-align: start; position: relative; display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.fare-card:hover { border-color: #9cc9e6; }
.fare-card.is-chosen { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(2, 132, 199, .16); }
.fare-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fare-card__top { padding: 14px 16px 12px; border-bottom: 1px solid var(--line); display: grid; }
.fare-card.is-chosen .fare-card__top { background: var(--tint); }
.fare-card__price { font-size: 1.35rem; line-height: 1.2; color: var(--navy); }
.fare-card__top small { color: var(--muted); font-size: .75rem; }
.fare-card__name { margin-top: 6px; font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-dark); }
.fare-card__radio { position: absolute; top: 14px; inset-inline-end: 14px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #b8c4d6; background: #fff; }
.fare-card.is-chosen .fare-card__radio { border: 6px solid var(--accent); }
.fare-card__body { padding: 10px 16px 6px; flex: 1; }
.fare-card h4 { margin: 6px 0 8px; font-size: .85rem; color: var(--navy); }
.fare-card ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 7px; font-size: .86rem; line-height: 1.35; }
.fare-card li { display: flex; gap: 8px; align-items: flex-start; }
.fare-card li b { font-weight: 600; }
.fare-card__fee { color: var(--warn); font-weight: 600; }
.fi { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 13px no-repeat; }
.fi--fee { background: #f59e0b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' d='M15.5 8.5c-.6-1-1.9-1.5-3.5-1.5-2 0-3.5 1-3.5 2.5 0 3.5 7 2 7 5.2 0 1.5-1.5 2.8-3.5 2.8-1.7 0-3.1-.6-3.7-1.7M12 5v14'/%3E%3C/svg%3E") center / 13px no-repeat; }
.fi--no { background: #cbd5e1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E") center / 12px no-repeat; }
.fare-card__foot { padding: 4px 16px 16px; }
/* Brands per flight: the cards beside a small price summary (each flight and the total). */
.fares__foot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px -20px 0; padding: 12px 20px; background: #fff; border-top: 1px solid var(--line); }
.fares__foot { flex-wrap: wrap; }
.fares__total { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 10px; }
.fares__total small { grid-column: 1 / -1; color: var(--muted); font-size: .78rem; }
.fares__total b { font-size: 1.35rem; color: var(--navy); }
.fares__more { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 0; border-radius: 8px; background: none; color: var(--accent); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.fares__more:hover { background: rgba(37, 99, 235, .08); }
.fares__more i { width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-135deg) translate(-1px, -1px); transition: transform .2s; }
.fares__more[aria-expanded="true"] i { transform: rotate(45deg) translate(-1px, -1px); }
.fares__detail { flex-basis: 100%; display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.fares__detail-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: .85rem; color: var(--muted); }
.fares__detail-row b { color: var(--navy); white-space: nowrap; }
.fares__detail-row small { font-size: .8rem; }
.fares__foot .btn { padding: 12px 28px; }
@media (max-width: 640px) {
    .modal--fares { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
    .modal--fares .modal__head { padding: 12px 16px; }
    .modal--fares .modal__body { padding: 12px 16px 0; }
    .fares__cards { grid-auto-columns: 80%; gap: 10px; }
    .fares__foot { margin: 4px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
}

/* Flight cards on phones: airline on top, the legs, then the bag and the price on one line. The whole card
   is a button that opens the flight details panel, which also holds the prices and Continue. */
.offer__mhead, .offer__mfoot { display: none; }
@media (max-width: 699px) {
    .offer { border-radius: 16px; border: 1px solid #d7e2ee; box-shadow: 0 2px 10px rgba(16, 32, 72, .05); cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .offer:active { background: #fbfdff; }
    .offer__side, .offer__details { display: none; }
    .offer:has(.offer__label) .offer__legs { padding-top: 10px; }
    .offer:has(.offer__label) .offer__mhead { padding-top: 26px; }
    .offer__mhead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 14px 16px 0; }
    .offer__mhead > b { font-size: 1.02rem; color: var(--navy); }
    .offer__mhead div { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
    .offer__mhead div b { font-size: 1.02rem; color: var(--navy); }
    .offer__mhead div small { color: var(--muted); font-size: .8rem; }
    .offer__mlay { flex-basis: 100%; margin: 4px 0 0; color: var(--muted); font-size: .82rem; }
    .offer__mlay::before { content: "⇋ "; color: var(--bad); font-weight: 700; }
    .offer__legs { padding: 10px 16px 12px; gap: 14px; }
    .leg, .leg--solo { grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; }
    .leg--solo { grid-template-columns: minmax(0, 1fr); }
    .leg--solo .leg__airline { display: none; }
    .leg__airline span { display: none; }
    .leg__times { gap: 10px; }
    .leg__pt time { font-size: 1.25rem; }
    .leg__pt span { font-size: .85rem; }
    .leg__mid { font-size: .74rem; }
    .leg__dur { color: var(--navy); font-weight: 700; font-size: .82rem; }
    .leg__stops { text-align: center; line-height: 1.3; }
    .leg__via { display: block; font-weight: 500; }
    .leg__via::before { content: none; }
    .offer__mfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 16px; padding: 10px 0 12px; border-top: 1px dashed var(--line); }
    .offer__mbag { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #f1f5f9; color: var(--muted); }
    .offer__mbag.is-ok { color: var(--navy); }
    .offer__mbag i { position: absolute; top: -2px; right: -2px; width: 15px; height: 15px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; border: 2px solid #fff; }
    .offer__mprice { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
    .offer__mprice b { font-size: 1.45rem; font-weight: 800; color: var(--accent-dark); }
    .offer__mprice small { color: var(--muted); font-size: .74rem; }
    .offer__mprice-bag, .is-bag-only .offer__mprice-any { display: none; }
    .is-bag-only .offer__mprice-bag { display: block; }
}
@media (max-width: 559px) {
    .leg__times { gap: 8px; }
    .leg__pt time { font-size: 1.12rem; }
}
/* The details panel on phones: itinerary, then the price box, then Continue at the bottom. */
.sheet .offer__side { display: grid; margin-top: 14px; padding: 14px 0 0; border-top: 1px dashed var(--line); border-inline-start: 0; text-align: start; }
.sheet .offer__side > .btn { display: none; }
.sheet__go { flex: none; margin: 0 16px 16px; width: auto; min-height: 52px; font-size: 1.05rem; }
.sheet__go.is-disabled { opacity: .5; pointer-events: none; }

/* Desktop: hover snapshot of a leg's flights, and the airport name over an airport code */
.tip { position: fixed; z-index: 95; pointer-events: none; background: #fff; color: var(--text); border-radius: 12px; box-shadow: 0 10px 34px rgba(15, 23, 42, .2); padding: 14px 16px; max-width: 380px; font-size: .88rem; animation: shade-in .12s ease-out; }
.tip--name { padding: 10px 16px; border-radius: 10px; color: var(--navy); font-size: .95rem; font-weight: 600; white-space: nowrap; border: 1px solid var(--line); }
.tip::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -7px; transform: translateX(-50%); border: 7px solid transparent; border-bottom: 0; border-top-color: #fff; }
.tip.is-below::after { bottom: auto; top: -7px; border-top: 0; border-bottom: 7px solid #fff; }
.peek { list-style: none; margin: 0; padding: 0; position: relative; }
.peek li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; position: relative; }
.peek__pt { padding: 3px 0; }
.peek__pt time { font-weight: 700; font-variant-numeric: tabular-nums; }
.peek__pt time sup { color: var(--bad); font-size: .65rem; margin-left: 1px; }
.peek__pt b { font-weight: 700; color: var(--navy); }
.peek__fly { padding: 6px 0; }
.peek__fly img, .peek__fly .al-logo { grid-column: 1; justify-self: center; }
.peek__fly span { display: flex; flex-direction: column; color: var(--muted); border-inline-start: 2px solid var(--line); padding-inline-start: 12px; margin-inline-start: -14px; }
.peek__fly small { font-size: .8rem; }
.peek__lay { display: block !important; margin: 4px 0 4px 60px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: .8rem; }
[dir=rtl] .peek__lay { margin: 4px 60px 4px 0; }
.leg__mid[data-peek] { cursor: default; }
[data-tip] { cursor: help; }
@media (hover: none) { [data-tip] { cursor: inherit; } }
/* In the panel only the luggage choice shows: the cheapest fare is what Continue books, and a flight
   without fare brands already shows its total in the price breakdown. */
.sheet .offer__side:not(:has(.fare-pick--bag)), .sheet .fare-pick--nobag { display: none; }
.fare-picks__ask { display: none; }
.sheet .fare-picks__ask { display: block; margin: 0 0 4px; font-weight: 700; font-size: 1.08rem; color: var(--navy); }
.sheet .fare-pick--bag { padding-inline-start: 18px; border-radius: 14px; border-width: 2px; border-color: #9fd3f0; }
.sheet .fare-pick--bag span { padding: 16px 0; gap: 2px; }
.sheet .fare-pick--bag b { font-size: 1.6rem; }
.sheet .fare-pick--bag small { font-size: .92rem; }
.sheet .fare-pick--bag i { padding: 0 22px; font-size: 1rem; }
.sheet .fare-picks__note { text-align: start; }

/* B2B: welcome page before sign-in */
.b2b-hero { background: linear-gradient(120deg, #075985 0%, #0369a1 45%, #0284c7 100%); color: #fff; padding: 56px 0 64px; }
.b2b-hero__grid { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .b2b-hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 420px); gap: 56px; } }
.b2b-tag { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-weight: 600; font-size: .9rem; }
.b2b-hero h1 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.08; letter-spacing: -.02em; margin: 16px 0 12px; }
.b2b-hero__sub { font-size: 1.1rem; color: #dbeefa; max-width: 560px; margin: 0 0 22px; }
.b2b-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.b2b-points li { display: flex; align-items: center; gap: 10px; font-weight: 500; color: #fff; }
.b2b-points svg { color: #7dd3fc; flex: none; }
.b2b-login { color: var(--text, #111827); padding: 28px; border-radius: 20px; box-shadow: 0 24px 60px rgba(2, 44, 80, .35); }
.b2b-login h2 { margin: 0 0 16px; color: var(--navy); }
.b2b-features { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.b2b-feature { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 26px; }
.b2b-feature h3 { margin: 14px 0 6px; color: var(--navy); }
.b2b-feature p { margin: 0; color: #4b5563; }
.b2b-feature__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: #fff; }
.b2b-feature__icon--wallet { background: linear-gradient(135deg, #10b981, #059669); }
.b2b-feature__icon--ticket { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.b2b-feature__icon--manage { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--blue, #0284c7); text-decoration: underline; cursor: pointer; }
#join-dialog { width: min(640px, calc(100vw - 32px)); }
#join-dialog .alert ul { margin: 0; padding-inline-start: 18px; }
.b2b-join { text-align: center; background: var(--tint); }
.b2b-join h2 { color: var(--navy); margin: 0 0 8px; }
.b2b-join p { color: #4b5563; margin: 0 auto 20px; max-width: 520px; }

/* B2B: agency home after sign-in */
.b2b-home .hero__box { padding-top: 28px; }
.b2b-home__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; max-width: 1080px; margin: 0 auto 20px; }
.b2b-home__head small { color: #4b5563; font-weight: 500; }
.b2b-home .b2b-home__head h1 { text-align: start; font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 2px 0 0; }
.b2b-home__balance { background: #fff; border-radius: 16px; padding: 10px 18px; box-shadow: 0 6px 18px rgba(2, 132, 199, .12); text-align: end; }
.b2b-home__balance b { display: block; font-size: 1.4rem; color: var(--navy); }
.b2b-home__balance b.is-low { color: #b91c1c; }
.b2b-dash-wrap { padding-top: 28px; }
.b2b-dash { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .b2b-dash { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }
.b2b-dash__main, .b2b-dash__side { display: grid; gap: 22px; }
.b2b-stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.b2b-stat { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.b2b-stat small { display: block; color: #6b7280; font-weight: 500; }
.b2b-stat b { font-size: 1.45rem; color: var(--navy); }
.b2b-card h2 { font-size: 1.15rem; margin: 0 0 12px; color: var(--navy); }
.b2b-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.b2b-table th { text-align: start; font-size: .8rem; color: #6b7280; font-weight: 600; padding: 0 8px 8px; border-bottom: 1px solid var(--line); }
.b2b-table td { padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.b2b-table tr:last-child td { border-bottom: 0; }
@media (max-width: 699px) {
  .b2b-table thead { display: none; }
  .b2b-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .b2b-table td { border: 0; padding: 0; }
  .b2b-table td::before { content: attr(data-label); display: block; font-size: .75rem; color: #6b7280; }
}
.b2b-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.b2b-status--ok { background: #dcfce7; color: #166534; }
.b2b-status--warn { background: #fef3c7; color: #92400e; }
.b2b-status--bad { background: #fee2e2; color: #991b1b; }
.b2b-statement { list-style: none; margin: 0 0 12px; padding: 0; }
.b2b-statement li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.b2b-statement li span { display: grid; }
.b2b-statement .is-in { color: #15803d; }
.b2b-statement .is-out { color: #b91c1c; }

/* B2B portal header, menu and footer */
.b2b-top { position: sticky; top: 0; z-index: 50; }
.b2b-top__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.b2b-top { background: linear-gradient(90deg, #0b4f8a, #0369a1); color: #fff; }
.b2b-top__tag { margin-inline-start: 8px; padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, .18); font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: #fff; }
.b2b-top__tools { display: flex; align-items: center; gap: 6px; }
.b2b-menu { position: relative; }
.b2b-menu > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: .95rem; color: #fff; white-space: nowrap; }
.b2b-menu > summary::-webkit-details-marker { display: none; }
.b2b-menu > summary:hover, .b2b-menu[open] > summary { background: rgba(255, 255, 255, .14); }
.b2b-menu .pill-menu__panel { color: var(--navy); }
.b2b-caret { width: 0; height: 0; border-inline: 4.5px solid transparent; border-top: 5px solid currentColor; opacity: .85; }
.b2b-user__avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #0b4f8a; font-weight: 800; flex: none; }
.b2b-user__who { display: grid; line-height: 1.15; text-align: start; }
.b2b-user__who b { font-size: .92rem; }
.b2b-user__who small { font-size: .78rem; font-weight: 500; color: #cfe6f7; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.b2b-user__balance { padding: 4px 10px; border-radius: 999px; background: #fff; color: #047857; font-weight: 700; font-size: .88rem; }
.b2b-user__balance.is-low { color: #b91c1c; }
.b2b-user__out { width: 100%; text-align: start; padding: 10px; border: 0; border-radius: 10px; background: none; font: inherit; font-weight: 500; color: #b91c1c; cursor: pointer; }
.b2b-user__out:hover { background: var(--bg); }
.b2b-top__signin { color: #fff; font-weight: 600; padding: 10px 12px; text-decoration: none; }
.b2b-nav { background: #fff; color: var(--navy); border-bottom: 1px solid var(--line); box-shadow: 0 2px 8px rgba(15, 23, 42, .05); }
.b2b-nav__row { display: flex; align-items: center; gap: 4px; min-height: 48px; overflow-x: auto; }
.b2b-nav__row > a, .b2b-nav__drop > summary { display: flex; align-items: center; gap: 8px; padding: 13px 14px; color: var(--navy); font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; cursor: pointer; list-style: none; }
.b2b-nav__drop > summary::-webkit-details-marker { display: none; }
.b2b-nav__row > a:hover, .b2b-nav__drop > summary:hover { color: #0369a1; }
.b2b-nav__row .is-on { border-bottom-color: #0369a1; color: #0369a1; }
.b2b-nav__drop { position: static; }
.b2b-nav__drop .pill-menu__panel { position: absolute; top: auto; inset-inline-end: auto; margin-top: 4px; }
.b2b-nav { position: relative; }
@media (max-width: 720px) {
    .b2b-user__who, .b2b-menu .b2b-caret { display: none; }
    .b2b-top__tools { gap: 2px; }
    .b2b-menu > summary { padding: 6px 7px; font-size: .88rem; }
}
@media (max-width: 420px) { .b2b-user__balance { font-size: .8rem; padding: 3px 8px; } .b2b-top__tag { display: none; } }
.b2b-foot { background: #0b3a64; color: #cfe1f2; padding: 44px 0 0; margin-top: 48px; }
.b2b-foot__grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.b2b-foot h4 { color: #fff; margin: 0 0 12px; font-size: .95rem; }
.b2b-foot a { display: block; color: #cfe1f2; text-decoration: none; padding: 4px 0; }
.b2b-foot a:hover { color: #fff; }
.b2b-foot .logo { display: inline-flex; padding: 0; }
.b2b-foot p { margin: 12px 0 0; max-width: 300px; font-size: .92rem; }
.b2b-foot__bottom { margin-top: 32px; padding: 18px 16px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .85rem; color: #9fbbd6; }
.b2b-page { padding-top: 28px; }
.b2b-page__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.b2b-page__head h1, .b2b-card__title { margin: 0; color: var(--navy); font-size: clamp(1.5rem, 3.5vw, 2rem); }
.b2b-card__title { margin-bottom: 8px; }
.b2b-search { display: flex; gap: 8px; flex: 1 1 320px; max-width: 460px; }
.b2b-search input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; font: inherit; }
.b2b-actions { white-space: nowrap; text-align: end; }
.b2b-actions .btn { margin: 2px 0; }
@media (max-width: 720px) { .b2b-actions { grid-column: 1 / -1; text-align: start; white-space: normal; } }
.b2b-card__more { float: inline-end; font-size: .88rem; font-weight: 600; }
.b2b-balance-line { display: flex; justify-content: space-between; font-weight: 600; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.b2b-balance-line .is-in { color: #15803d; } .b2b-balance-line .is-out { color: #b91c1c; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Terms, refund, privacy and cookies pages */
.policy-hero { background: linear-gradient(160deg, #e0f2fe 0%, #f0f9ff 60%, #fff 100%); padding: 56px 0 40px; }
.policy-hero__inner { max-width: 860px; text-align: center; }
.policy-hero__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--accent); color: #fff; box-shadow: 0 12px 30px rgba(2, 132, 199, .3); }
.policy-hero h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -.02em; color: var(--navy); margin: 18px 0 12px; }
.policy-hero__lead { font-size: 1.1rem; color: #374151; margin: 0 auto 22px; max-width: 720px; }
.policy-points { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.policy-points li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid #dbeafe; color: var(--navy); font-weight: 600; font-size: .92rem; }
.policy-points svg { color: var(--accent); flex: none; }
.policy-wrap { padding-top: 36px; }
.policy { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .policy { grid-template-columns: 250px minmax(0, 1fr); align-items: start; } }
.policy__toc { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px 18px 12px; }
@media (min-width: 980px) { .policy__toc { position: sticky; top: 24px; } }
.policy__toc b { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
.policy__toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.policy__toc li { counter-increment: toc; }
.policy__toc a { display: flex; gap: 10px; padding: 7px 8px; border-radius: 10px; color: var(--navy); text-decoration: none; font-weight: 500; font-size: .95rem; }
.policy__toc a::before { content: counter(toc); color: var(--accent); font-weight: 700; min-width: 1.2em; }
.policy__toc a:hover { background: var(--tint); }
.policy__body { display: grid; gap: 16px; font-size: 1.03rem; }
.policy__body > p { margin: 0; color: #3a4458; }
.policy__part { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 24px 26px; scroll-margin-top: 20px; counter-increment: part; }
.policy__body { counter-reset: part; }
.policy__part h2 { display: flex; align-items: center; gap: 12px; font-size: 1.25rem; color: var(--navy); margin: 0 0 10px; }
.policy__part h2::before { content: counter(part); display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--tint); color: var(--accent); font-size: .95rem; flex: none; }
.policy__part p { color: #3a4458; margin: 0 0 10px; }
.policy__part p:last-child, .policy__part ul:last-child { margin-bottom: 0; }
.policy__part ul { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 8px; }
.policy__part li { position: relative; padding-inline-start: 26px; color: #3a4458; }
.policy__part li::before { content: ""; position: absolute; inset-inline-start: 6px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.policy__contact { display: grid; gap: 18px; align-items: center; padding: 28px; border-radius: 24px; color: #fff; background: linear-gradient(135deg, #075985, #0284c7 60%, #38bdf8); margin-top: 8px; }
.policy__contact h2 { color: #fff; margin: 0 0 6px; font-size: 1.35rem; }
.policy__contact p { margin: 0; opacity: .9; }
.policy__contact-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.policy__contact-links a:not(.btn) { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; text-decoration: none; font-weight: 600; }
.policy__contact-links .btn { background: #fff; color: var(--accent-dark, #075985); }

/* About us: offices, who we serve, services */
.about-serve { display: grid; gap: 18px; }
@media (min-width: 860px) { .about-serve { grid-template-columns: 1fr 1fr; } }
.about-serve__card { position: relative; border-radius: 26px; padding: 30px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; }
.about-serve__card--b2b { background: #0b3a64; color: #e2ecf6; border-color: transparent; }
.about-serve__tag { padding: 4px 12px; border-radius: 999px; background: var(--tint); color: var(--accent); font-weight: 800; font-size: .82rem; letter-spacing: .06em; }
.about-serve__card--b2b .about-serve__tag { background: rgba(255, 255, 255, .14); color: #7dd3fc; }
.about-serve__card h3 { font-size: 1.45rem; margin: 14px 0 6px; color: var(--navy); }
.about-serve__card--b2b h3 { color: #fff; }
.about-serve__card p { margin: 0 0 14px; color: var(--muted); }
.about-serve__card--b2b p { color: #b8cde2; }
.about-serve__card ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; flex: 1; }
.about-serve__card li { position: relative; padding-inline-start: 28px; }
.about-serve__card li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 800; background: var(--tint); color: var(--accent); }
.about-serve__card--b2b li::before { background: rgba(125, 211, 252, .2); color: #7dd3fc; }
.about-serve__card li b { color: var(--navy); }
.about-serve__card--b2b li b { color: #fff; }
.about-serve__btn { background: #fff; color: #0b3a64; }
.about-services-wrap { background: #fff; }
.about-services { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.about-service { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: 20px; background: var(--bg); }
.about-service__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; color: var(--accent); box-shadow: 0 4px 12px rgba(2, 132, 199, .12); }
.about-service h3 { margin: 2px 0 4px; font-size: 1.08rem; color: var(--navy); }
.about-service p { margin: 0; color: var(--muted); font-size: .95rem; }

/* Our offices: one card per office with its address, WhatsApp and a map link; a swipeable row on phones, over a
   light world-map globe (Natural Earth land, wwwroot/img/globe.svg). */
.offices-wrap { position: relative; overflow: hidden; background: linear-gradient(180deg, #e3f1fc 0%, #edf6fd 100%); }
.offices-wrap::before { content: ""; position: absolute; left: 50%; top: 24px; width: min(1250px, 200vw); aspect-ratio: 1000 / 600; translate: -50% 0; background: url("../img/globe.svg") center top / contain no-repeat; pointer-events: none; }
.offices-wrap > .wrap { position: relative; }
.offices__trust { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.offices__trust li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid #dbeafe; color: var(--navy); font-weight: 600; font-size: .92rem; box-shadow: 0 4px 14px rgba(2, 132, 199, .07); }
.offices__trust svg { color: #16a34a; flex: none; }
.offices { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.office { position: relative; display: flex; flex-direction: column; background: rgba(255, 255, 255, .9); border: 1px solid #e3ecf6; border-radius: 24px; padding: 22px 20px 18px; box-shadow: 0 10px 30px rgba(15, 39, 74, .06); transition: transform .2s, box-shadow .2s, border-color .2s; }
.office:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 39, 74, .12); border-color: #bae6fd; }
.office__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.office__pin { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: linear-gradient(135deg, #e0e7ff, #cffafe); color: #4f46e5; }
.office__tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff; }
.office h3 { margin: 0; font-size: 1.35rem; color: var(--navy); letter-spacing: -.01em; }
.office__country { display: block; margin-top: 3px; font-weight: 600; font-size: .92rem; color: #4f46e5; }
.office address { font-style: normal; color: var(--muted); font-size: .93rem; line-height: 1.55; margin: 12px 0 18px; }
.office address span { display: block; }
.office__actions { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px dashed #dbe5f0; }
.office__wa { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 10px; border-radius: 999px; background: #dcfce7; color: #15803d; font-weight: 600; font-size: .78rem; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.office__wa:hover { background: #22c55e; color: #fff; }
.office__wa svg { flex: none; }
.office__map { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #eef2ff; color: #4f46e5; transition: background .2s, color .2s; }
.office__map:hover { background: #4f46e5; color: #fff; }
[dir=rtl] .office__map svg { transform: scaleX(-1); }
.office--hq { background: linear-gradient(150deg, #312e81, #4f46e5 55%, #0891b2); border-color: transparent; box-shadow: 0 20px 44px rgba(79, 70, 229, .32); }
.office--hq h3 { color: #fff; }
.office--hq .office__country { color: #a5f3fc; }
.office--hq address { color: #e0e7ff; }
.office--hq .office__pin { background: rgba(255, 255, 255, .16); color: #fff; }
.office--hq .office__actions { border-top-color: rgba(255, 255, 255, .25); }
.office--hq .office__wa { background: #fff; color: #15803d; }
.office--hq .office__map { background: rgba(255, 255, 255, .16); color: #fff; }
@media (max-width: 699px) {
    /* Phones: the whole globe, smaller, sits behind the heading and badges, above the office cards. */
    .offices-wrap::before { top: 36px; width: 125vw; }
    .offices { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 18px; margin: 0 -4px; scrollbar-width: none; }
    .offices::-webkit-scrollbar { display: none; }
    .office { scroll-snap-align: start; }
}

/* Addresses are written in Latin letters: keep each line's own order in Dari and Pashto. */
.office address span { unicode-bidi: plaintext; }
[dir=rtl] .office address span { text-align: right; }

/* Membership and licence logos (IATA, TÜRSAB...) in the footers. */
.badges { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 0; }
.badges__item { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 150px; }
.badges__logo { display: grid; place-items: center; height: 64px; min-width: 96px; padding: 8px 14px; background: #fff; border-radius: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.badges__logo img { display: block; max-height: 48px; max-width: 130px; object-fit: contain; }
.badges__item small { font-size: .78rem; color: #a7b3cc; text-align: center; line-height: 1.35; }
.b2b-foot .footer__accept { margin: 22px 0 12px; font-size: .95rem; font-weight: 600; color: #cfe3f5; }
.btn--agent { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
/* Same colours as the Search button: Agent login, Done (passengers and calendar), Select (accent buttons get it from .btn--accent). */
.btn--agent, .pax__panel [data-pax-done].btn, .cal__foot .btn, .fare-pick i { background: var(--brand-grad); border: 0; color: #fff; }
.btn--agent:hover, .pax__panel [data-pax-done].btn:hover, .cal__foot .btn:hover, .fare-pick:hover i { background: var(--brand-grad-dark); color: #fff; }
/* Footer: payment cards on the left, membership logos on the right, on one line. */
.footer__trust { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 40px; margin-top: 48px; }
.footer__trust .footer__accept { margin-top: 0; }
.footer__trust-badges { text-align: end; }
.footer__trust .badges { justify-content: flex-end; }
.footer__trust .badges__logo { height: 48px; padding: 6px 12px; }
.footer__trust .badges__logo img { max-height: 36px; }
@media (max-width: 699px) { .footer__trust-badges { text-align: start; } .footer__trust .badges { justify-content: flex-start; } }

/* Homepage headline: the cities in the brand gradient with a soft underline. */
.hero__plane { display: inline-block; width: 1.15em; height: 1.15em; margin-inline-start: -.1em; vertical-align: -.18em; fill: url(#hero-plane-fill); }
.hero__city { position: relative; white-space: nowrap; background: linear-gradient(90deg, #4f46e5, #06b6d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__city::after { content: ""; position: absolute; inset-inline: 2%; bottom: .02em; height: .14em; border-radius: 99px; background: linear-gradient(90deg, rgba(79, 70, 229, .28), rgba(6, 182, 212, .28)); z-index: -1; }
/* On the photo: a white title with a soft shadow, the city names in light violet to turquoise. */
.hero h1 { color: #fff; text-shadow: 0 2px 18px rgba(4, 18, 40, .55); }
.hero__city { background-image: linear-gradient(90deg, #c7d2fe, #67e8f9); text-shadow: none; filter: drop-shadow(0 2px 10px rgba(4, 18, 40, .5)); }
.hero__city::after { background: linear-gradient(90deg, rgba(199, 210, 254, .45), rgba(103, 232, 249, .45)); }
/* The ring around a flight's bag icon: green, blue or yellow by where the fare comes from (no names shown),
   drawn inside the icon's own edge so its size stays the same. */
.bag-btn.src-1 { border-color: #22c55e; } .offer__mbag.src-1 { box-shadow: inset 0 0 0 1px #22c55e; }
.bag-btn.src-2 { border-color: #3b82f6; } .offer__mbag.src-2 { box-shadow: inset 0 0 0 1px #3b82f6; }
.bag-btn.src-3 { border-color: #eab308; } .offer__mbag.src-3 { box-shadow: inset 0 0 0 1px #eab308; }