/* ==========================================================================
   Yatrika 2.0 — shared styles for the Blazor WASM PWA and the MAUI Hybrid app
   - Colourful tokens with light + dark themes   ([data-theme])
   - rem type scale + user text size            ([data-text])
   - Motion with a user/OS opt-out               ([data-motion], prefers-reduced-motion)
   - Logical properties throughout for RTL       ([dir=rtl] for Arabic)
   ========================================================================== */

/* ---------- Tokens ---------- */

:root {
    --violet: #7C3AED;
    --violet-700: #6D28D9;
    --pink: #DB2777;
    --orange: #F97316;
    --blue: #2563EB;
    --green: #059669;
    --teal: #0D9488;
    --amber: #D97706;

    /* Brand accent: switched by [data-accent] (Settings → Theme). Defaults to violet. */
    --brand-1: #7C3AED; --brand-2: #C026D3; --brand-3: #DB2777; --accent-light: #C4B5FD;
    --grad-brand: linear-gradient(120deg, var(--brand-1) 0%, var(--brand-2) 50%, var(--brand-3) 100%);
    --brand-shadow: color-mix(in srgb, var(--brand-1) 32%, transparent);
    --brand-shadow-2: color-mix(in srgb, var(--brand-3) 35%, transparent);
    --grad-sunset: linear-gradient(120deg, #F97316 0%, #DB2777 100%);
    --grad-ocean: linear-gradient(120deg, #2563EB 0%, #7C3AED 100%);

    --bg: #F6F5FB;
    --bg-2: #EEEBF8;
    --surface: #FFFFFF;
    --surface-2: #FAF9FE;
    --ink: #17142B;
    --ink-2: #3B3757;
    --muted: #57536F;          /* 7:1 on white */
    --line: #E7E4F2;
    --line-2: #D4D0E6;
    --accent: var(--brand-1);  /* links, selection — every accent passes 4.5:1 on white */
    --accent-soft: color-mix(in srgb, var(--brand-1) 10%, #FFFFFF);
    --success: #047857;
    --success-soft: #E7F8F0;
    --warning: #B45309;
    --warning-soft: #FFF6E5;
    --danger: #BE123C;
    --danger-soft: #FFEEF2;
    --hero-ink: #FFFFFF;

    --radius: 18px;
    --radius-sm: 12px;
    --radius-xs: 8px;
    --shadow-sm: 0 1px 2px rgba(23, 20, 43, .06);
    --shadow: 0 2px 6px rgba(23, 20, 43, .05), 0 10px 24px rgba(76, 29, 149, .07);
    --shadow-lg: 0 24px 60px rgba(76, 29, 149, .22);
    --ring: 0 0 0 3px color-mix(in srgb, var(--brand-1) 30%, transparent);

    --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
    --font-hi: "Plus Jakarta Sans", "Noto Sans Devanagari", "Nirmala UI", "Mangal", system-ui, sans-serif;
    --font-ar: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;

    --topbar-h: 68px;
    --bottomnav-h: 66px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
    --ease: cubic-bezier(.2, .8, .2, 1);
    --spring: cubic-bezier(.34, 1.56, .64, 1);
    color-scheme: light;
}

[data-theme="dark"] {
    --bg: #0D0B1A;
    --bg-2: #141127;
    --surface: #17142B;
    --surface-2: #1E1A36;
    --ink: #F3F0FF;
    --ink-2: #D6D1F0;
    --muted: #ABA6C8;          /* 7.4:1 on surface */
    --line: #2B2649;
    --line-2: #3A345E;
    --accent: var(--accent-light);
    --accent-soft: color-mix(in srgb, var(--brand-1) 24%, #17142B);
    --success: #34D399;
    --success-soft: #0F2A22;
    --warning: #FBBF24;
    --warning-soft: #2E2410;
    --danger: #FB7185;
    --danger-soft: #3A1420;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 12px 28px rgba(0, 0, 0, .35);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
    --ring: 0 0 0 3px color-mix(in srgb, var(--accent-light) 40%, transparent);
    color-scheme: dark;
}


/* Accent palettes (white text passes 4.5:1 on every gradient stop) */
[data-accent="ocean"]   { --brand-1: #1D4ED8; --brand-2: #2563EB; --brand-3: #0E7490; --accent-light: #93C5FD; }
[data-accent="sunset"]  { --brand-1: #C2410C; --brand-2: #E11D48; --brand-3: #BE185D; --accent-light: #FDBA74; }
[data-accent="emerald"] { --brand-1: #047857; --brand-2: #0F766E; --brand-3: #0E7490; --accent-light: #6EE7B7; }
[data-accent="rose"]    { --brand-1: #BE123C; --brand-2: #DB2777; --brand-3: #A21CAF; --accent-light: #FDA4AF; }

/* ---------- Bootstrap bridge ----------
   Bootstrap 5.3 is loaded first (bootstrap.min.css, or bootstrap.rtl.min.css for Arabic).
   Its variables point at our tokens so its components follow the theme and accent. */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
    --bs-body-font-family: var(--font);
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--ink);
    --bs-secondary-color: var(--muted);
    --bs-tertiary-bg: var(--surface-2);
    --bs-border-color: var(--line);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-lg: var(--radius);
    --bs-link-color: var(--accent);
    --bs-link-hover-color: var(--brand-3);
    --bs-primary: var(--brand-1);
    --bs-emphasis-color: var(--ink);
    --bs-focus-ring-color: color-mix(in srgb, var(--brand-1) 30%, transparent);
}
h1, h2, h3, h4, h5, h6 { font-weight: 700; color: inherit; }
h1 { font-size: 1.75rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
legend { float: none; width: auto; font-size: inherit; }
.form-check-input { width: 1.15em; height: 1.15em; border-color: var(--line-2); background-color: var(--surface); }
.form-check-input:checked { background-color: var(--brand-1); border-color: var(--brand-1); }
.form-check-input:focus { box-shadow: var(--ring); border-color: var(--brand-1); }
.form-control, .form-select { background-color: var(--surface); color: var(--ink); border-color: var(--line-2); }
.form-control:focus, .form-select:focus { background-color: var(--surface); color: var(--ink); border-color: var(--brand-1); box-shadow: var(--ring); }
.dropdown-menu {
    --bs-dropdown-bg: var(--surface); --bs-dropdown-color: var(--ink); --bs-dropdown-border-color: var(--line);
    --bs-dropdown-link-color: var(--ink); --bs-dropdown-link-hover-bg: var(--bg-2); --bs-dropdown-link-hover-color: var(--ink);
    --bs-dropdown-link-active-bg: var(--accent-soft); --bs-dropdown-link-active-color: var(--accent);
    --bs-dropdown-border-radius: var(--radius); --bs-dropdown-padding-x: 8px; --bs-dropdown-padding-y: 8px;
    --bs-dropdown-item-border-radius: var(--radius-sm); --bs-dropdown-item-padding-y: 10px; --bs-dropdown-divider-bg: var(--line);
    box-shadow: var(--shadow-lg);
}
.nav-pills { --bs-nav-pills-link-active-bg: transparent; --bs-nav-pills-border-radius: 999px; --bs-nav-link-color: var(--muted); --bs-nav-link-hover-color: var(--ink); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--line); --bs-table-striped-bg: var(--surface-2); --bs-table-striped-color: var(--ink); }

/* Text size preference */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
html[data-text="large"] { font-size: 112.5%; }
html[data-text="extralarge"] { font-size: 125%; }

/* Reduced motion: user setting or OS */
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Base ---------- */

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    transition: background-color .3s var(--ease), color .3s var(--ease);
}
:lang(hi) body, body:lang(hi) { font-family: var(--font-hi); line-height: 1.7; }
:lang(ar) body, body:lang(ar) { font-family: var(--font-ar); line-height: 1.75; }
[lang="hi"] { font-family: var(--font-hi); }
[lang="ar"] { font-family: var(--font-ar); }

h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -.015em; }
:lang(hi) h1, :lang(hi) h2, :lang(hi) h3, :lang(ar) h1, :lang(ar) h2, :lang(ar) h3 { letter-spacing: 0; line-height: 1.4; }
h1:focus { outline: none; }
p { margin: 0; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pink); }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; }
.icon { flex-shrink: 0; }
[dir="rtl"] .icon--chevron-left, [dir="rtl"] .icon--chevron-right, [dir="rtl"] .icon--arrow, [dir="rtl"] .icon--plane, [dir="rtl"] .icon--logout { transform: scaleX(-1); }
[dir="rtl"] .rot-180.icon--chevron-down { transform: rotate(180deg); }
::selection { background: var(--brand-shadow); }

:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; border-radius: 8px; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--surface); font-weight: 700; }
.skip-link:focus { top: 12px; color: var(--surface); }

.container { width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 16px; }
.page-pad { padding-top: 24px; padding-bottom: 40px; }

.muted { color: var(--muted); }
.small { font-size: .8125rem; }
.center { text-align: center; }
.mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; }
.txt-success { color: var(--success); display: inline-flex; align-items: center; gap: 4px; }
.txt-warning { color: var(--warning); }
.rot-180 { transform: rotate(180deg); }
.icon { transition: transform .25s var(--ease); }

/* ---------- Motion primitives ---------- */

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.92) translateY(10px); } 100% { opacity: 1; transform: none; } }
@keyframes sheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(24px, -18px) scale(1.08); } }
@keyframes mesh { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes fly { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes fly-fallback { from { transform: translateX(-10vw); } to { transform: translateX(110vw); } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 var(--brand-shadow-2); } 100% { box-shadow: 0 0 0 10px rgba(219, 39, 119, 0); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@keyframes confetti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), 140px) rotate(540deg); opacity: 0; } }
@keyframes taxi { 0% { inset-inline-start: 0; } 100% { inset-inline-start: calc(100% - 10px); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.app__main > * { animation: rise .5s var(--ease) backwards; }   /* backwards: nothing stays applied afterwards, so fixed sheets inside aren't trapped */
.reveal { animation: rise .35s var(--ease) both; }
.stagger > * { animation: rise .45s var(--ease) both; }
.stagger > *:nth-child(2) { animation-delay: .04s; }
.stagger > *:nth-child(3) { animation-delay: .08s; }
.stagger > *:nth-child(4) { animation-delay: .12s; }
.stagger > *:nth-child(5) { animation-delay: .16s; }
.stagger > *:nth-child(6) { animation-delay: .2s; }
.stagger > *:nth-child(n+7) { animation-delay: .24s; }

/* ---------- Boot ---------- */

.boot { min-height: 100vh; display: grid; place-items: center; background: var(--bg); }
.boot__mark { width: 52px; height: 52px; border-radius: 16px; background: var(--grad-brand); animation: bob 1.2s var(--ease) infinite; box-shadow: var(--shadow-lg); }

/* ---------- App shell ---------- */

.app { min-height: 100vh; display: flex; flex-direction: column; }
.app__main { flex: 1 0 auto; padding-bottom: calc(var(--bottomnav-h) + var(--safe-bottom)); }

.topbar {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
    border-bottom: 1px solid var(--line);
    padding-top: var(--safe-top);
}
.topbar__inner { height: var(--topbar-h); display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; }
.brand:hover { color: var(--ink); }
.brand__mark { transition: transform .4s var(--spring); }
.brand:hover .brand__mark { transform: rotate(-12deg) scale(1.08); }
.brand__name { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

.topnav { display: none; gap: 4px; }
.topnav__link {
    --c: var(--violet);
    position: relative; display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 14px; border-radius: 999px;
    color: var(--ink-2); text-decoration: none; font-weight: 700; font-size: .9rem;
    transition: background-color .2s, color .2s;
}
.topnav__link--flights { --c: var(--blue); }
.topnav__link--hotels { --c: var(--pink); }
.topnav__link--trains { --c: var(--green); }
.topnav__link--buses { --c: var(--orange); }
.topnav__link--holidays { --c: var(--violet); }
.topnav__link .icon { color: var(--c); }
.topnav__link:hover { background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--ink); }
.topnav__link.active { background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--ink); }
.topnav__link.active::after { content: ""; position: absolute; inset-inline: 16px; bottom: 4px; height: 3px; border-radius: 3px; background: var(--c); animation: fade .3s; }

.topbar__actions { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; }
.topbar__icon-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    min-width: 44px; height: 44px; padding: 0 10px; border-radius: 999px; border: 0;
    background: transparent; color: var(--ink-2); cursor: pointer; font-weight: 700; font-size: .75rem;
    transition: background-color .2s, transform .2s var(--spring);
}
.topbar__icon-btn:hover { background: var(--bg-2); color: var(--ink); }
.topbar__icon-btn:active { transform: scale(.92); }
.topbar__lang-code { display: none; }
.theme-toggle__icon { display: inline-flex; transition: transform .5s var(--spring); }
.theme-toggle:hover .theme-toggle__icon { transform: rotate(-30deg) scale(1.1); }
.bell.has-unread .icon { animation: wiggle .8s var(--ease) 2; transform-origin: 50% 10%; }
.dot-badge {
    position: absolute; top: 4px; inset-inline-end: 4px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: var(--pink); color: #FFFFFF; font-size: .6875rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--surface);
    animation: pulse-ring 1.8s ease-out 3;
}
.topbar__login span { display: none; }
.topbar__login { width: 44px; padding: 0; }

.avatar {
    width: var(--size, 36px); height: var(--size, 36px); flex: 0 0 var(--size, 36px);
    display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
    background: linear-gradient(135deg, hsl(var(--hue) 75% 58%), hsl(calc(var(--hue) + 50) 80% 52%));
    color: #FFFFFF; font-weight: 700; font-size: calc(var(--size, 36px) * .38); letter-spacing: .02em;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, hsl(var(--hue) 75% 58%) 35%, transparent);
}
.avatar-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 4px; border-radius: 999px; border: 0; background: transparent; cursor: pointer; color: var(--ink); font-weight: 700; }
.avatar-btn:hover { background: var(--bg-2); }
.avatar-btn__name { display: none; }

@media (min-width: 640px) {
    .topbar__login span { display: inline; }
    .topbar__login { width: auto; padding: 0 16px; }
    .topbar__lang-code { display: inline; }
}
@media (min-width: 1000px) {
    .topnav { display: flex; }
    .avatar-btn__name { display: inline; }
}

/* Dropdown menus */
.menu { position: relative; }
.menu-backdrop { position: fixed; inset: 0; z-index: 48; }
.menu__panel {
    position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 49; min-width: 240px;
    padding: 8px; border-radius: var(--radius); border: 1px solid var(--line);
    background: var(--surface); box-shadow: var(--shadow-lg);
    animation: pop .22s var(--spring) both; transform-origin: top right;
}
[dir="rtl"] .menu__panel { transform-origin: top left; }
.menu__item {
    width: 100%; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 12px;
    border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); text-decoration: none;
    font-weight: 600; text-align: start; cursor: pointer; transition: background-color .15s;
}
.menu__item:hover { background: var(--bg-2); color: var(--ink); }
.menu__item.is-active { background: var(--accent-soft); color: var(--accent); }
.menu__item .icon { color: var(--muted); }
.menu__item-text { flex: 1; display: flex; flex-direction: column; }
.menu__item-text small { color: var(--muted); font-weight: 500; font-size: .75rem; }
.menu__item--danger, .menu__item--danger .icon { color: var(--danger); }
.menu__user { display: flex; align-items: center; gap: 12px; padding: 10px 12px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.menu__user > span { display: flex; flex-direction: column; min-width: 0; }
.menu__user small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.notif-panel { width: min(380px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 4px; }
.notif-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 8px; }
.notif-panel__empty { padding: 20px 8px; text-align: center; }
.notif-item {
    display: flex; gap: 12px; align-items: flex-start; padding: 10px 8px; border: 0; border-radius: var(--radius-sm);
    background: transparent; text-align: start; cursor: pointer; width: 100%; color: var(--ink);
}
.notif-item:hover { background: var(--bg-2); }
.notif-item.is-unread { background: var(--accent-soft); }
.notif-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-item__text strong { font-size: .9rem; }
.notif-item__text small { color: var(--muted); font-size: .8125rem; }
.notif-item__text time { color: var(--muted); font-size: .75rem; }
.notif-icon { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; background: var(--grad-brand); }
.notif-icon--booking { background: linear-gradient(135deg, #10B981, #059669); }
.notif-icon--offer { background: var(--grad-sunset); }
.notif-icon--pricealert { background: var(--grad-ocean); }
.notif-icon--trip { background: linear-gradient(135deg, #0EA5E9, #2563EB); }

/* Footer & bottom nav */
.footer { background: #0F0C24; color: #C9C4E6; padding: 40px 0 calc(40px + var(--bottomnav-h) + var(--safe-bottom)); margin-top: 32px; position: relative; overflow: hidden; }
.footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--grad-brand); }
.footer__inner { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; font-size: .9rem; }
.footer__brand { max-width: 320px; display: flex; flex-direction: column; gap: 6px; }
.footer strong { color: #FFFFFF; font-size: 1.2rem; }
.footer__meta { margin-top: 8px; color: #9C96C0; font-size: .75rem; }
.footer__cols { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 24px; }
.footer__cols div { display: flex; flex-direction: column; gap: 8px; }
.footer__cols h2 { color: #FFFFFF; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.footer__cols a { color: #C9C4E6; text-decoration: none; }
.footer__cols a:hover { color: #FFFFFF; }
@media (max-width: 640px) { .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.bottomnav {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 45;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line); padding-bottom: var(--safe-bottom);
}
.bottomnav__item {
    min-height: var(--bottomnav-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: .6875rem; font-weight: 700; color: var(--muted); text-decoration: none;
}
.bottomnav__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 30px; border-radius: 999px; transition: background-color .25s, transform .3s var(--spring); }
.bottomnav__icon .dot-badge { top: -4px; inset-inline-end: 6px; }
.bottomnav__item.active { color: var(--accent); }
.bottomnav__item.active .bottomnav__icon { background: var(--accent-soft); transform: translateY(-2px); }

.app--native .footer { display: none; }

@media (min-width: 1000px) {
    .bottomnav { display: none; }
    .app__main { padding-bottom: 0; }
    .footer { padding-bottom: 40px; }
}

/* ---------- Buttons, chips, pills ---------- */

/* Buttons build on Bootstrap's .btn and drive it through its --bs-btn-* variables,
   so hover/active/disabled/focus states all come from one place. */
.btn {
    --bs-btn-padding-x: 20px; --bs-btn-padding-y: 0; --bs-btn-font-weight: 600; --bs-btn-font-size: .95rem;
    --bs-btn-border-radius: 999px; --bs-btn-border-width: 1px; --bs-btn-focus-box-shadow: var(--ring);
    --bs-btn-disabled-opacity: .55;
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; line-height: 1.2; white-space: nowrap;
    transition: transform .2s var(--spring), box-shadow .2s, background-color .2s, border-color .2s, color .2s;
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn-gradient, .btn-primary {
    --bs-btn-color: #FFFFFF; --bs-btn-bg: var(--brand-1); --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: var(--brand-2); --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: var(--brand-2); --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #FFFFFF; --bs-btn-disabled-bg: var(--brand-1); --bs-btn-disabled-border-color: transparent;
    background-image: var(--grad-brand); background-size: 160% 100%;
    box-shadow: 0 8px 22px var(--brand-shadow);
}
.btn-gradient:hover:not(:disabled), .btn-primary:hover:not(:disabled) { background-position: 100% 0; transform: translateY(-1px); box-shadow: 0 12px 28px var(--brand-shadow-2); }
.btn-gradient::after, .btn-primary::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-120%);
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .35) 50%, transparent 80%);
    transition: transform .7s var(--ease); pointer-events: none;
}
.btn-gradient:hover::after, .btn-primary:hover::after { transform: translateX(120%); }
.btn-outline {
    --bs-btn-color: var(--ink); --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--line-2);
    --bs-btn-hover-color: var(--accent); --bs-btn-hover-bg: var(--surface); --bs-btn-hover-border-color: var(--accent);
    --bs-btn-active-color: var(--accent); --bs-btn-active-bg: var(--accent-soft); --bs-btn-active-border-color: var(--accent);
    --bs-btn-disabled-color: var(--muted); --bs-btn-disabled-bg: var(--surface); --bs-btn-disabled-border-color: var(--line-2);
}
.btn-soft {
    --bs-btn-color: var(--accent); --bs-btn-bg: var(--accent-soft); --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--accent); --bs-btn-hover-bg: color-mix(in srgb, var(--brand-1) 18%, var(--surface)); --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--accent); --bs-btn-active-bg: color-mix(in srgb, var(--brand-1) 24%, var(--surface)); --bs-btn-active-border-color: transparent;
}
.btn-glass {
    --bs-btn-color: #FFFFFF; --bs-btn-bg: rgba(255, 255, 255, .18); --bs-btn-border-color: rgba(255, 255, 255, .35);
    --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: rgba(255, 255, 255, .28); --bs-btn-hover-border-color: rgba(255, 255, 255, .5);
    --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: rgba(255, 255, 255, .32);
    backdrop-filter: blur(8px);
}
.btn-light {
    --bs-btn-color: #17142B; --bs-btn-bg: #FFFFFF; --bs-btn-border-color: #FFFFFF;
    --bs-btn-hover-color: var(--brand-1); --bs-btn-hover-bg: #FFFFFF; --bs-btn-hover-border-color: #FFFFFF;
    --bs-btn-active-color: var(--brand-1); --bs-btn-active-bg: #F4F2FF;
}
.btn-danger {
    --bs-btn-color: #FFFFFF; --bs-btn-bg: #BE123C; --bs-btn-border-color: #BE123C;
    --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: #9F1239; --bs-btn-hover-border-color: #9F1239;
}
.btn-danger-text { color: var(--danger) !important; }
.btn-sm { --bs-btn-padding-x: 16px; --bs-btn-font-size: .875rem; min-height: 40px; }
.btn-lg { --bs-btn-font-size: 1.05rem; min-height: 54px; }
.btn-block { width: 100%; }

.icon-btn {
    width: 44px; height: 44px; flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
    cursor: pointer; text-decoration: none; font-size: 1.25rem; line-height: 1; transition: transform .2s var(--spring), border-color .2s;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn:active { transform: scale(.9); }
.icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.icon-btn--ghost { border-color: transparent; background: transparent; color: var(--muted); }
.icon-btn--danger:hover { color: var(--danger); border-color: transparent; background: var(--danger-soft); }

.link-btn {
    display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; min-height: 32px;
    border: 0; background: none; color: var(--accent); font-weight: 700; font-size: .875rem; cursor: pointer;
}
.link-btn:disabled { color: var(--muted); cursor: default; }

.chip {
    --c: var(--ink);
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px;
    border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface);
    color: var(--ink); font-weight: 700; font-size: .875rem; cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--spring);
}
.chip:hover { color: var(--ink); border-color: var(--accent); transform: translateY(-1px); }
.chip:disabled { cursor: default; transform: none; }
.chip.is-active { background: var(--grad-brand); border-color: transparent; color: #FFFFFF; box-shadow: 0 6px 16px var(--brand-shadow); }
.chip--blue.is-active { background: var(--grad-ocean); }
.chip--orange.is-active { background: var(--grad-sunset); }
.chip--sm { min-height: 34px; padding: 0 12px; font-size: .8125rem; }
.chip--ghost { background: transparent; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip-row--filters { margin-bottom: 18px; }
.chip-group { border: 0; padding: 0; margin: 4px 0 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-group legend { font-weight: 700; font-size: .875rem; margin-bottom: 8px; }

.pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); font-size: .75rem; font-weight: 700; }
.pill--green { background: var(--success-soft); color: var(--success); }
.pill--violet { background: var(--accent-soft); color: var(--accent); }
.pill--sm { padding: 2px 8px; font-size: .6875rem; }

.pill-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 18px; max-width: 100%; overflow-x: auto; }
.pill-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-weight: 700; cursor: pointer; white-space: nowrap; transition: background-color .25s, color .25s; }
.pill-tab span { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; }
.pill-tab.is-active { background: var(--grad-brand); color: #FFFFFF; }
.pill-tab.is-active span { background: rgba(255, 255, 255, .25); color: #FFFFFF; }

.code-chip {
    display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 8px;
    border: 1.5px dashed var(--pink); color: var(--pink); background: color-mix(in srgb, var(--pink) 8%, transparent);
    font-family: ui-monospace, Consolas, monospace; font-size: .75rem; font-weight: 700; letter-spacing: .06em;
}
[data-theme="dark"] .code-chip { color: #F9A8D4; border-color: #F9A8D4; }
.code-chip--lg { padding: 6px 12px; font-size: .875rem; }
.code-chip--btn { cursor: pointer; min-height: 42px; transition: transform .2s var(--spring); }
.code-chip--btn:hover { transform: scale(1.05); }

.photo-badge {
    position: absolute; top: 12px; inset-inline-start: 12px; padding: 4px 10px; border-radius: 999px;
    background: rgba(255, 255, 255, .92); color: #17142B; font-size: .75rem; font-weight: 700; backdrop-filter: blur(6px);
}

/* ---------- Hero ---------- */

.hero {
    --h1: #0B1A3D; --h2: #1E40AF; --h3: #0EA5E9; --h4: #14B8A6;
    position: relative; overflow: hidden; isolation: isolate;
    padding: 28px 0 32px;
    color: var(--hero-ink);
}
.hero--hotels { --h1: #831843; --h2: #DB2777; --h3: #F97316; --h4: #FB7185; }
.hero--trains { --h1: #064E3B; --h2: #059669; --h3: #0EA5E9; --h4: #22C55E; }
.hero--buses { --h1: #7C2D12; --h2: #EA580C; --h3: #DB2777; --h4: #F59E0B; }
.hero--compact { padding: 40px 0 44px; }
.hero--holidays { --h1: #4C1D95; --h2: #7C3AED; --h3: #0D9488; --h4: #22D3EE; }
.hero--offers { --h1: #7C2D12; --h2: #DB2777; --h3: #F97316; --h4: #FACC15; }
.hero--help { --h1: #1E3A8A; --h2: #2563EB; --h3: #7C3AED; --h4: #22D3EE; }

.hero__mesh {
    position: absolute; inset: 0; z-index: -2;
    background:
        radial-gradient(60% 80% at 15% 20%, var(--h3) 0%, transparent 60%),
        radial-gradient(50% 70% at 85% 10%, var(--h4) 0%, transparent 60%),
        radial-gradient(70% 90% at 60% 100%, var(--h2) 0%, transparent 65%),
        linear-gradient(135deg, var(--h1), var(--h2));
    background-size: 160% 160%;
    animation: mesh 18s ease-in-out infinite;
}
.hero__mesh::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(180deg, #000, transparent 85%); }
.hero__blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(40px); opacity: .55; animation: float 12s ease-in-out infinite; }
.hero__blob--1 { width: 280px; height: 280px; background: var(--h4); top: -60px; inset-inline-end: 8%; }
.hero__blob--2 { width: 220px; height: 220px; background: var(--h3); bottom: 40px; inset-inline-start: -40px; animation-delay: -6s; }
.hero__route { position: absolute; z-index: -1; inset-inline: 0; top: 20px; width: 100%; height: 160px; opacity: .8; }
[dir="rtl"] .hero__route { transform: scaleX(-1); }
.hero__plane {
    position: absolute; z-index: -1; top: 0; left: 0; color: #FFFFFF; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .25));
    offset-path: path("M10 160 C 160 40, 420 40, 590 130"); offset-rotate: auto 45deg;
    animation: fly 9s var(--ease) infinite;
}
@supports not (offset-path: path("M0 0")) { .hero__plane { top: 60px; animation: fly-fallback 12s linear infinite; } }
.hero__inner { position: relative; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); font-weight: 700; font-size: .8125rem; margin-bottom: 14px; backdrop-filter: blur(8px); }
.hero__title { color: #FFFFFF; font-size: clamp(1.75rem, 4.5vw, 3rem); font-weight: 700; margin-bottom: 22px; max-width: 760px; text-shadow: 0 2px 20px rgba(0, 0, 0, .15); }
.hero__sub { color: rgba(255, 255, 255, .9); max-width: 620px; font-size: 1.05rem; }

.search-card {
    position: relative; background: var(--surface); border-radius: 26px; box-shadow: var(--shadow-lg);
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    animation: pop .5s var(--spring) .1s both;
}
.search-card__body { padding: 16px; }

.product-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 10px 10px 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.product-tabs::-webkit-scrollbar { display: none; }
.product-tab {
    --c: var(--blue);
    position: relative; flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 76px;
    padding: 10px 12px 14px; color: var(--muted); text-decoration: none; font-weight: 700; font-size: .8125rem;
    transition: color .2s;
}
.product-tab--hotels { --c: var(--pink); }
.product-tab--trains { --c: var(--green); }
.product-tab--buses { --c: var(--orange); }
.product-tab--holidays { --c: var(--violet); }
.product-tab__icon { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); transition: transform .3s var(--spring), background-color .2s, color .2s; }
.product-tab:hover { color: var(--ink); }
.product-tab:hover .product-tab__icon { transform: translateY(-3px) rotate(-6deg); }
.product-tab.is-active { color: var(--ink); }
.product-tab.is-active .product-tab__icon { background: var(--c); color: #FFFFFF; box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 45%, transparent); }
.product-tab.is-active::after { content: ""; position: absolute; inset-inline: 18%; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--c); animation: fade .3s; }

.search-form__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.fare-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.segmented { display: inline-flex; padding: 4px; background: var(--bg-2); border-radius: 999px; gap: 2px; }
.segmented--full { display: flex; width: 100%; }
.segmented--full .segmented__item { flex: 1; }
.segmented__item { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; font-weight: 700; font-size: .875rem; color: var(--muted); cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s; }
.segmented__item.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

.search-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.search-grid > .pair, .search-grid > .field--place, .search-grid > .btn-search { grid-column: 1 / -1; }
.search-grid--hotels > .field--pax { grid-column: 1 / -1; }
.search-grid--buses > .field { grid-column: 1 / -1; }
.btn-search { min-height: 56px; font-size: 1.05rem; }

.pair { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.swap-btn {
    position: absolute; inset-inline-end: 16px; top: 50%; transform: translateY(-50%) rotate(90deg); z-index: 2;
    width: 42px; height: 42px; border-radius: 999px; border: 0; background: var(--grad-brand); color: #FFFFFF;
    display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 16px var(--brand-shadow);
    transition: transform .45s var(--spring);
}
.swap-btn.is-spun { transform: translateY(-50%) rotate(270deg); }

.field {
    position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px;
    min-height: 76px; padding: 10px 16px; border: 1.5px solid var(--line); border-radius: var(--radius);
    background: var(--surface-2); text-align: start; transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field:hover { border-color: var(--line-2); }
.field:focus-within, .field.is-open { border-color: var(--violet); box-shadow: var(--ring); background: var(--surface); }
.field--muted { opacity: .85; }
.field--place, .field--pax { padding: 0; }
.field__button { display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 100%; height: 100%; min-height: 76px; padding: 10px 16px; border: 0; background: transparent; text-align: start; cursor: pointer; border-radius: var(--radius); }
.field__label { font-size: .6875rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
:lang(hi) .field__label, :lang(ar) .field__label { text-transform: none; letter-spacing: 0; font-size: .8125rem; }
.field__value { font-size: 1.25rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.field__value--placeholder { color: var(--muted); font-weight: 600; }
.field__sub { font-size: .8125rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field__input { border: 0; padding: 0; background: transparent; font-size: 1.1rem; font-weight: 700; min-height: 30px; outline: none; width: 100%; color: var(--ink); }
.field__link { border: 0; background: none; padding: 0; text-align: start; color: var(--accent); font-weight: 700; font-size: 1rem; cursor: pointer; min-height: 30px; }
.quick-dates { display: flex; gap: 6px; margin-top: 6px; }

.form-error { display: flex; align-items: flex-start; gap: 6px; color: var(--danger); margin-top: 10px; font-weight: 600; padding: 0; list-style: none; animation: rise .25s var(--ease); }
.form-error li + li { margin-top: 4px; }
ul.form-error { display: block; }

@media (min-width: 900px) {
    .hero { padding-top: 44px; }
    .search-card__body { padding: 22px 26px 26px; }
    .product-tabs { padding: 10px 18px 0; gap: 4px; }
    .product-tab { flex: 0 0 auto; flex-direction: row; gap: 10px; font-size: .95rem; min-width: 0; padding: 14px 16px 16px; }
    .product-tab__icon { width: 38px; height: 38px; border-radius: 12px; }
    .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .swap-btn { inset-inline-start: 50%; inset-inline-end: auto; transform: translate(-50%, -50%); }
    [dir="rtl"] .swap-btn { transform: translate(50%, -50%); }
    .swap-btn.is-spun { transform: translate(-50%, -50%) rotate(180deg); }
    [dir="rtl"] .swap-btn.is-spun { transform: translate(50%, -50%) rotate(180deg); }
    .search-grid--flights { grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)); }
    .search-grid--flights > .pair { grid-column: auto; }
    .search-grid--hotels { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
    .search-grid--hotels > .field--place, .search-grid--hotels > .field--pax { grid-column: auto; }
    .search-grid--buses { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
    .search-grid--buses > .pair, .search-grid--buses > .field { grid-column: auto; }
    .search-grid--trains { grid-template-columns: minmax(0, 2.2fr) repeat(2, minmax(0, 1fr)); }
    .search-grid--trains > .pair { grid-column: auto; }
    .btn-search { grid-column: 1 / -1; justify-self: center; min-width: 280px; margin-top: 8px; margin-bottom: -50px; box-shadow: 0 14px 30px var(--brand-shadow); }
    .search-card { margin-bottom: 30px; }
}

/* ---------- Popovers & modals ---------- */

.pop-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(13, 11, 26, .45); animation: fade .2s; }
.pop {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 51; max-height: 82vh; overflow: auto;
    background: var(--surface); border-radius: 24px 24px 0 0; box-shadow: var(--shadow-lg);
    padding: 18px 16px calc(18px + var(--safe-bottom)); animation: sheet .3s var(--ease);
}
.pop::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--line-2); margin: -6px auto 12px; }
.pop__heading { font-size: .6875rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin: 14px 4px 6px; }
.pop--pax { display: flex; flex-direction: column; gap: 4px; }

@media (min-width: 900px) {
    .pop-backdrop { background: transparent; }
    .pop { position: absolute; inset-inline: 0 auto; bottom: auto; top: calc(100% + 8px); width: 400px; max-height: 460px; border-radius: var(--radius); border: 1px solid var(--line); animation: pop .22s var(--spring); }
    .pop::before { display: none; }
    .field--pax .pop { inset-inline: auto 0; }
}

.search-input { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 16px; border: 1.5px solid var(--line-2); border-radius: var(--radius-sm); color: var(--muted); background: var(--surface); }
.search-input:focus-within { border-color: var(--violet); box-shadow: var(--ring); }
.search-input input { flex: 1; border: 0; outline: none; background: transparent; font-size: 1rem; color: var(--ink); min-width: 0; }
.search-input--hero { max-width: 560px; min-height: 56px; border-radius: 999px; border: 0; box-shadow: var(--shadow-lg); }

.place-list { list-style: none; margin: 0; padding: 0; }
.place-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 8px; min-height: 56px; border: 0; background: transparent; border-radius: var(--radius-sm); text-align: start; cursor: pointer; color: var(--muted); transition: background-color .15s; }
.place-item:hover, .place-item.is-active { background: var(--bg-2); }
.place-item__icon { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.place-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.place-item__text strong { color: var(--ink); font-size: .95rem; }
.place-item__text small { font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-list__empty { padding: 16px 8px; color: var(--muted); }

.stepper { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.stepper__label { display: flex; flex-direction: column; font-weight: 700; }
.stepper__label small { color: var(--muted); font-weight: 500; font-size: .8125rem; }
.stepper__controls { display: flex; align-items: center; gap: 12px; }
.stepper__controls output { min-width: 22px; text-align: center; font-weight: 700; font-size: 1.1rem; }

.sheet-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(13, 11, 26, .55); animation: fade .25s; }
.sheet-backdrop--blur { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sheet {
    position: fixed; z-index: 61; inset-inline: 0; bottom: 0; max-height: 92vh; overflow: auto;
    background: var(--surface); border-radius: 26px 26px 0 0; padding: 22px 20px calc(22px + var(--safe-bottom));
    display: flex; flex-direction: column; gap: 14px; animation: sheet .35s var(--ease); box-shadow: var(--shadow-lg);
}
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet__head h2 { font-size: 1.25rem; }
@media (min-width: 700px) {
    .sheet { inset-inline-start: 50%; top: 50%; bottom: auto; inset-inline-end: auto; translate: -50% -50%; width: 480px; border-radius: 26px; animation: pop .3s var(--spring); }
    [dir="rtl"] .sheet { translate: 50% -50%; }
}

.app-toast {
    position: fixed; z-index: 70; left: 50%; translate: -50% 0;
    bottom: calc(var(--bottomnav-h) + 16px + var(--safe-bottom));
    display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px);
    padding: 12px 20px; border-radius: 999px; background: var(--ink); color: var(--surface); font-weight: 700; box-shadow: var(--shadow-lg);
    animation: pop .3s var(--spring);
}
.app-toast .icon { color: #34D399; }
.app-toast--error { background: var(--danger); color: #FFFFFF; }
.app-toast--error .icon { color: #FFFFFF; }
@media (min-width: 1000px) { .app-toast { bottom: 28px; } }

/* ---------- Auth popup ---------- */

.auth { padding: 0; gap: 0; overflow: hidden auto; }
@media (min-width: 700px) { .auth { width: 860px; max-width: calc(100vw - 32px); display: grid; grid-template-columns: 300px minmax(0, 1fr); } }
.auth__art { display: none; position: relative; overflow: hidden; padding: 32px; background: var(--grad-brand); color: #FFFFFF; font-weight: 700; font-size: 1.15rem; line-height: 1.5; }
@media (min-width: 700px) { .auth__art { display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; } }
.auth__blob { position: absolute; border-radius: 50%; filter: blur(30px); opacity: .7; animation: float 10s ease-in-out infinite; }
.auth__blob--1 { width: 180px; height: 180px; background: #F97316; top: -40px; inset-inline-end: -40px; }
.auth__blob--2 { width: 160px; height: 160px; background: #22D3EE; bottom: 80px; inset-inline-start: -60px; animation-delay: -5s; }
.auth__plane { position: relative; animation: bob 3s ease-in-out infinite; }
[dir="rtl"] .auth__plane { transform: scaleX(-1); }
.auth__art p { position: relative; }
.auth__body { position: relative; padding: 24px 20px calc(24px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 700px) { .auth__body { padding: 32px; } }
.auth__close { position: absolute; top: 14px; inset-inline-end: 14px; border-color: transparent; background: var(--bg-2); }
.auth__tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; max-width: 320px; padding: 4px; border-radius: 999px; background: var(--bg-2); }
.auth__tab { position: relative; z-index: 1; min-height: 40px; border: 0; background: transparent; font-weight: 700; color: var(--muted); cursor: pointer; border-radius: 999px; transition: color .25s; }
.auth__tab.is-active { color: #FFFFFF; }
.auth__tab-ink { position: absolute; z-index: 0; top: 4px; bottom: 4px; inset-inline-start: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--grad-brand); transition: transform .35s var(--spring); box-shadow: 0 6px 16px var(--brand-shadow); }
.auth__tab-ink.is-second { transform: translateX(100%); }
[dir="rtl"] .auth__tab-ink.is-second { transform: translateX(-100%); }
.auth__title { font-size: 1.6rem; font-weight: 700; }
.auth__reason { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: .875rem; }
.auth__form { display: flex; flex-direction: column; gap: 14px; animation: rise .3s var(--ease); }
.auth__row { display: flex; justify-content: space-between; gap: 12px; margin-top: -6px; }
.auth__row--end { justify-content: flex-end; }
.auth__switch { color: var(--muted); font-size: .9rem; text-align: center; }
.otp-input { letter-spacing: .6em; font-size: 1.4rem !important; font-weight: 700 !important; text-align: center; font-family: ui-monospace, Consolas, monospace; }
.demo-hint { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--warning); font-size: .8125rem; font-weight: 700; }

.input-suffix { position: relative; display: flex; align-items: center; }
.input-suffix input { padding-inline-end: 48px !important; }
.input-suffix__btn { position: absolute; inset-inline-end: 4px; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.input-suffix__btn:hover { color: var(--accent); background: var(--bg-2); }
.strength { display: flex; align-items: center; gap: 10px; }
.strength__bar { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.strength__bar i { height: 5px; border-radius: 4px; background: var(--line); transition: background-color .3s; }
.strength small { font-weight: 700; min-width: 50px; }
.strength--0 i:nth-child(-n+1), .strength--1 i:nth-child(-n+1) { background: #F43F5E; }
.strength--0 small, .strength--1 small { color: var(--danger); }
.strength--2 i:nth-child(-n+2) { background: #F59E0B; }
.strength--2 small { color: var(--warning); }
.strength--3 i:nth-child(-n+3) { background: #10B981; }
.strength--3 small, .strength--4 small { color: var(--success); }
.strength--4 i { background: linear-gradient(90deg, #10B981, #059669); }

.signin-prompt { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 36px 20px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 18px; }
.signin-prompt::before { content: ""; position: absolute; inset: 0 0 auto; height: 110px; background: var(--grad-brand); opacity: .12; }
.signin-prompt__art { position: relative; width: 72px; height: 72px; border-radius: 22px; background: var(--grad-brand); color: #FFFFFF; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px var(--brand-shadow); animation: bob 3s ease-in-out infinite; }
.signin-prompt h2 { position: relative; font-size: 1.35rem; margin-top: 6px; }
.signin-prompt p { color: var(--muted); max-width: 440px; }
.signin-prompt__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }

/* ---------- Home sections ---------- */

.section { padding-top: 34px; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.section__head h2 { font-size: 1.35rem; font-weight: 700; }
.section__head a { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; text-decoration: none; font-size: .9rem; }
.section__title-center { text-align: center; font-size: 1.5rem; font-weight: 700; margin-bottom: 20px; }

.h-scroll { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; margin: 0 -16px; padding-inline: 16px; scrollbar-width: thin; }
.h-scroll > * { scroll-snap-align: start; animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }

.member-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 22px; background: var(--grad-sunset); color: #FFFFFF; box-shadow: 0 14px 30px rgba(249, 115, 22, .25); position: relative; z-index: 1; }
.member-banner > div { flex: 1 1 240px; }
.member-banner h2 { font-size: 1.15rem; }
.member-banner p { opacity: .95; font-size: .9rem; }
.member-banner__icon { width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, .2); display: flex; align-items: center; justify-content: center; animation: wiggle 2.4s ease-in-out infinite; }

.offer-card {
    --c1: #7C3AED; --c2: #DB2777;
    position: relative; overflow: hidden; flex: 0 0 280px; display: flex; flex-direction: column; gap: 8px; padding: 18px;
    background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line);
    transition: transform .3s var(--spring), box-shadow .3s;
}
.offer-card::before { content: ""; position: absolute; inset-inline-end: -40px; top: -40px; width: 130px; height: 130px; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c2)); opacity: .16; transition: transform .5s var(--ease); }
.offer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.offer-card:hover::before { transform: scale(1.4); }
.offer-card--1 { --c1: #F97316; --c2: #DB2777; }
.offer-card--2 { --c1: #2563EB; --c2: #7C3AED; }
.offer-card--3 { --c1: #059669; --c2: #0EA5E9; }
.offer-card__tag { position: relative; display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 700; color: var(--c1); }
[data-theme="dark"] .offer-card__tag { filter: brightness(1.5); }
.offer-card h3 { position: relative; font-size: 1.1rem; }
.offer-card p { position: relative; color: var(--muted); font-size: .875rem; flex: 1; }
.offer-card .code-chip { align-self: flex-start; }

.route-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.route-card {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 70px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none;
    transition: transform .25s var(--spring), box-shadow .25s, border-color .25s;
    animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms);
}
.route-card:hover { color: var(--ink); border-color: transparent; box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.route-card > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.route-card small { color: var(--muted); }
.route-card__icon { width: 44px; height: 44px; border-radius: 14px; background: var(--grad-ocean); color: #FFFFFF; display: flex; align-items: center; justify-content: center; transition: transform .35s var(--spring); }
.route-card:hover .route-card__icon { transform: rotate(-12deg) scale(1.08); }
.route-card__go { color: var(--muted); transition: transform .25s var(--ease); }
.route-card:hover .route-card__go { transform: translateX(4px); color: var(--accent); }
[dir="rtl"] .route-card:hover .route-card__go { transform: scaleX(-1) translateX(4px); }

.photo { position: relative; display: flex; align-items: center; justify-content: center; color: #3B3757; font-size: .8125rem; font-weight: 600; min-height: 120px; overflow: hidden; }
.photo--tone { background: linear-gradient(135deg, var(--tone, #DDD6FE), color-mix(in srgb, var(--tone, #DDD6FE) 55%, #C4B5FD)); }
[data-theme="dark"] .photo--tone { filter: saturate(.85) brightness(.85); }
.photo__wish { position: absolute; top: 10px; inset-inline-end: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--pink); display: flex; align-items: center; justify-content: center; }

.package-card {
    flex: 0 0 270px; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius);
    overflow: hidden; border: 1px solid var(--line); color: var(--ink); text-decoration: none;
    transition: transform .3s var(--spring), box-shadow .3s;
}
.package-card:hover { color: var(--ink); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.package-card .photo { height: 160px; transition: transform .6s var(--ease); }
.package-card:hover .photo { transform: scale(1.04); }
.package-card__body { padding: 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.package-card__body h2, .package-card__body h3 { font-size: 1.1rem; }
.package-card__body > small { color: var(--muted); }
.package-card__foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.price { font-size: .875rem; color: var(--muted); }
.price strong { color: var(--ink); font-size: 1.1rem; }
.package-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.package-card--grid { flex: none; }
.inclusions { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; font-size: .8125rem; color: var(--ink-2); }
.inclusions li { display: flex; align-items: center; gap: 6px; }
.inclusions .icon { color: var(--success); }

.feature-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.feature { --c: var(--violet); position: relative; overflow: hidden; background: var(--surface); border-radius: var(--radius); padding: 22px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; transition: transform .3s var(--spring), box-shadow .3s; }
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.feature--pink { --c: var(--pink); }
.feature--blue { --c: var(--blue); }
.feature--orange { --c: var(--orange); }
.feature__icon { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; background: var(--c); box-shadow: 0 10px 22px color-mix(in srgb, var(--c) 40%, transparent); transition: transform .4s var(--spring); }
.feature:hover .feature__icon { transform: rotate(-10deg) scale(1.08); }
.feature h3 { font-size: 1.05rem; margin-top: 6px; }
.feature p { color: var(--muted); font-size: .9rem; }

.app-banner { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; padding: 28px; border-radius: 26px; background: #17142B; color: #D6D1F0; }
.app-banner::before { content: ""; position: absolute; width: 420px; height: 420px; inset-inline-end: -120px; top: -200px; border-radius: 50%; background: var(--grad-brand); opacity: .55; filter: blur(30px); animation: float 14s ease-in-out infinite; }
.app-banner > * { position: relative; }
.app-banner h2 { color: #FFFFFF; font-size: 1.5rem; margin-bottom: 6px; }
.app-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Results ---------- */

.summary-bar { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: calc(var(--topbar-h) + var(--safe-top)); z-index: 30; }
.summary-bar__inner { display: flex; align-items: center; gap: 12px; min-height: 72px; padding-top: 10px; padding-bottom: 10px; }
.summary-bar__text { flex: 1; min-width: 0; }
.summary-bar__text h1 { font-size: 1.1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.summary-bar__text p { font-size: .8125rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.summary-bar__modify { padding-bottom: 18px; }

.notice--violet { background: var(--accent-soft); color: var(--accent); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 16px; display: flex; gap: 8px; align-items: center; font-weight: 600; }

.fare-calendar { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 18px; padding-bottom: 4px; }
.fare-day {
    flex: 1 0 108px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px;
    background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none;
    transition: transform .2s var(--spring), border-color .2s;
}
.fare-day small { color: var(--muted); font-size: .75rem; }
.fare-day:hover { color: var(--ink); border-color: var(--violet); transform: translateY(-2px); }
.fare-day.is-lowest strong { color: var(--success); }
.fare-day.is-active { border-color: transparent; background: var(--grad-brand); color: #FFFFFF; box-shadow: 0 8px 20px var(--brand-shadow); }
.fare-day.is-active small, .fare-day.is-active strong { color: #FFFFFF; }

.results-layout { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
.results-layout__filters {
    position: fixed; inset: 0; z-index: 55; background: var(--surface); overflow: auto; padding: 18px 16px calc(84px + var(--safe-bottom));
    transform: translateY(100%); transition: transform .3s var(--ease), visibility .3s; visibility: hidden;
}
.results-layout__filters.is-open { transform: none; visibility: visible; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 1.15rem; }
.drawer-apply { position: fixed; inset-inline: 16px; bottom: calc(16px + var(--safe-bottom)); width: auto; }
.results-layout__list { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.results-layout__list > .stagger { display: flex; flex-direction: column; gap: 12px; }

@media (min-width: 900px) {
    .results-layout { grid-template-columns: 290px minmax(0, 1fr); align-items: start; }
    .results-layout__filters {
        position: sticky; top: calc(var(--topbar-h) + 90px); inset: auto; transform: none; visibility: visible; z-index: auto;
        padding: 20px; border-radius: var(--radius); border: 1px solid var(--line); max-height: calc(100vh - var(--topbar-h) - 110px);
    }
    .drawer-head, .drawer-apply, .filters-toggle { display: none !important; }
}

.filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.filters__head h2 { font-size: 1.1rem; }
.filter-group { border: 0; border-top: 1px solid var(--line); margin: 14px 0 0; padding: 14px 0 0; }
.filter-group legend { font-weight: 700; font-size: .875rem; padding: 0; float: inline-start; width: 100%; margin-bottom: 8px; }
.filter-group legend + * { clear: both; }
.check { display: flex; align-items: center; gap: 10px; min-height: 42px; cursor: pointer; }
.check--top { align-items: flex-start; }
.check--top input { margin-top: 3px; }
.check input { width: 19px; height: 19px; accent-color: var(--violet); margin: 0; flex: 0 0 auto; }
.check span { flex: 1; }
.check small { color: var(--muted); }
.check--inline { margin-inline-start: auto; min-height: 40px; }
.time-bands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.time-band { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; min-height: 64px; border: 1.5px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; color: var(--ink-2); transition: all .2s; }
.time-band small { font-size: .75rem; }
.time-band.is-active { border-color: var(--violet); background: var(--accent-soft); color: var(--accent); }
input[type=range] { width: 100%; accent-color: var(--violet); }
.range-labels { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--muted); }
.range-labels strong { color: var(--ink); }

.results-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sort-tabs { flex: 1; display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; padding: 4px; gap: 4px; }
.sort-tab { flex: 1 0 auto; display: flex; flex-direction: column; align-items: flex-start; padding: 8px 14px; min-height: 52px; border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; text-align: start; font-weight: 700; color: var(--ink-2); transition: background-color .25s, color .25s; }
.sort-tab small { font-weight: 600; font-size: .75rem; color: var(--muted); }
.sort-tab.is-active { background: var(--grad-brand); color: #FFFFFF; }
.sort-tab.is-active small { color: rgba(255, 255, 255, .9); }
.sort-select { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; font-size: .875rem; color: var(--muted); }
.sort-select select { min-height: 42px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 700; }
.results-count { font-size: .8125rem; color: var(--muted); font-weight: 600; }

.search-loader { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); font-weight: 700; position: relative; overflow: hidden; }
.search-loader::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--grad-brand); animation: shimmer 1.2s linear infinite; background-size: 200% 100%; }
.search-loader__plane { display: inline-flex; animation: bob 1s ease-in-out infinite; }

.result-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: box-shadow .25s, border-color .25s, transform .25s var(--ease); }
.result-card:hover { box-shadow: var(--shadow); }
.result-card.is-selected { border-color: var(--violet); box-shadow: var(--ring); }

.skeleton { min-height: 124px; background: linear-gradient(90deg, var(--bg-2) 25%, var(--surface-2) 37%, var(--bg-2) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; border-radius: var(--radius); border: 0; }
.skeleton--tall { min-height: 220px; }

/* Flight card */
.flight-card__main { display: grid; gap: 12px; padding: 16px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "airline price" "timeline timeline" "cta cta"; align-items: center; }
.airline { grid-area: airline; display: flex; align-items: center; gap: 10px; min-width: 0; }
.airline > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.airline strong { font-size: .9rem; }
.airline small { color: var(--muted); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.airline__logo { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: var(--logo, var(--ink-2)); color: #FFFFFF; font-weight: 700; font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px color-mix(in srgb, var(--logo, #000) 35%, transparent); }
.timeline { grid-area: timeline; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.timeline--compact { gap: 10px; }
.timeline__point { display: flex; flex-direction: column; }
.timeline__point strong { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.timeline__point sup { font-size: .6875rem; color: var(--warning); margin-inline-start: 2px; }
.timeline__point small { color: var(--muted); font-size: .75rem; }
.timeline__point--end { text-align: end; }
.timeline__track { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .75rem; color: var(--muted); }
.timeline__line { width: 100%; height: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 10px); position: relative; }
.timeline__line.has-stop::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--warning); transform: translate(-50%, -50%); box-shadow: 0 0 0 3px var(--surface); }
.timeline__plane { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-1); translate: 0 -50%; opacity: 0; }
.result-card:hover .timeline__plane { opacity: 1; animation: taxi 1.4s var(--ease) forwards; }
.flight-card__price { grid-area: price; display: flex; flex-direction: column; align-items: flex-end; text-align: end; }
.flight-card__price strong { font-size: 1.3rem; font-weight: 700; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="dark"] .flight-card__price strong { background: linear-gradient(120deg, #C4B5FD, #F9A8D4); -webkit-background-clip: text; background-clip: text; }
.flight-card__price small { color: var(--muted); font-size: .75rem; }
.seats-left { color: var(--danger) !important; font-weight: 700; }
.flight-card__cta { grid-area: cta; }
.flight-card__cta .btn { width: 100%; }
.flight-card__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px 12px; border-top: 1px dashed var(--line); }
.flight-card__footer .link-btn { margin-inline-start: auto; }

@media (min-width: 700px) {
    .flight-card__main { grid-template-columns: minmax(160px, 1fr) minmax(230px, 2fr) auto auto; grid-template-areas: "airline timeline price cta"; padding: 18px 20px; gap: 22px; }
    .flight-card__cta .btn { width: auto; min-width: 104px; }
}

.flight-details { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.segment { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.segment__head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.segment__head small { color: var(--muted); }
.segment__times { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; font-weight: 700; }
.segment__times small { color: var(--muted); font-weight: 500; }
.layover { display: flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--warning); padding: 0 4px; font-weight: 600; }

.fare-families { display: grid; gap: 12px; padding: 0 16px 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.panel .fare-families { padding: 0; }
.fare-family { --c: var(--blue); position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: transform .25s var(--spring), border-color .25s, box-shadow .25s; }
.fare-family::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; border-radius: var(--radius) var(--radius) 0 0; background: var(--c); }
.fare-family--1 { --c: var(--violet); }
.fare-family--2 { --c: var(--pink); }
.fare-family:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.fare-family.is-active { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.fare-family__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fare-family__head strong { color: var(--c); }
[data-theme="dark"] .fare-family__head strong { filter: brightness(1.6); }
.fare-family__price { font-weight: 700; font-size: 1.15rem; }
.fare-family ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .8125rem; color: var(--ink-2); flex: 1; }
.fare-family li { display: flex; gap: 6px; align-items: flex-start; }
.fare-family li .icon { margin-top: 2px; color: var(--c); }

.roundtrip-columns { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.roundtrip-columns > div { display: flex; flex-direction: column; gap: 10px; }
.roundtrip-columns .flight-card__main { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "airline price" "timeline timeline" "cta cta"; }
.roundtrip-columns .flight-card__cta .btn { width: 100%; }
.leg-title { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; }
.leg-title small { color: var(--muted); font-weight: 600; font-size: .8125rem; }
.leg-dot { width: 10px; height: 10px; border-radius: 50%; }
.leg-dot--out { background: var(--blue); }
.leg-dot--in { background: var(--pink); }
@media (min-width: 1100px) { .roundtrip-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sticky-cta { position: fixed; inset-inline: 0; bottom: calc(var(--bottomnav-h) + var(--safe-bottom)); z-index: 44; background: #17142B; color: #FFFFFF; animation: sheet .35s var(--ease); box-shadow: 0 -10px 30px rgba(0, 0, 0, .2); }
.sticky-cta::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--grad-brand); }
.sticky-cta__inner { display: flex; align-items: center; gap: 16px; min-height: 72px; }
.sticky-cta__legs { flex: 1; display: flex; flex-direction: column; font-size: .8125rem; color: #D6D1F0; min-width: 0; }
.sticky-cta__price { display: flex; flex-direction: column; align-items: flex-end; }
.sticky-cta__price strong { font-size: 1.3rem; }
.sticky-cta__price small { color: #D6D1F0; font-size: .75rem; }
@media (min-width: 1000px) { .sticky-cta { bottom: 0; } }

/* Hotel card */
.hotel-card { display: grid; grid-template-columns: minmax(0, 1fr); color: var(--ink); text-decoration: none; overflow: hidden; }
.hotel-card:hover { color: var(--ink); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.hotel-card__photo { min-height: 180px; }
.hotel-card:hover .hotel-card__photo { filter: saturate(1.15); }
.hotel-card__body { padding: 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hotel-card__body h2 { font-size: 1.15rem; }
.hotel-card__body p { display: flex; align-items: center; gap: 4px; font-size: .8125rem; }
.hotel-card__perks { display: flex; flex-wrap: wrap; gap: 12px; }
.hotel-card__price { padding: 0 16px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.hotel-card__price strong { font-size: 1.5rem; font-weight: 700; }
.hotel-card__price small { color: var(--muted); font-size: .75rem; margin-bottom: 8px; }
@media (min-width: 700px) {
    .hotel-card { grid-template-columns: 250px minmax(0, 1fr) 200px; }
    .hotel-card__photo { min-height: 100%; }
    .hotel-card__price { padding: 16px; align-items: flex-end; justify-content: center; text-align: end; border-inline-start: 1px solid var(--line); }
}
.stars { color: #F59E0B; letter-spacing: 2px; font-size: .8125rem; }
.rating { display: inline-flex; align-items: center; gap: 8px; }
.rating__score { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 28px; padding: 0 8px; border-radius: 10px; background: linear-gradient(135deg, #10B981, #059669); color: #FFFFFF; font-weight: 700; font-size: .8125rem; }
.rating small { color: var(--muted); font-size: .75rem; }
.rating--lg { margin-inline-start: auto; }
.rating--lg .rating__score { min-width: 52px; height: 36px; font-size: 1rem; }
.amenity-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 4px 0 0; }
.amenity-list li { font-size: .75rem; padding: 3px 10px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); font-weight: 600; }

.gallery { display: grid; gap: 10px; grid-template-columns: 2fr 1fr; grid-template-rows: 140px 140px; margin: 18px 0 22px; border-radius: 22px; overflow: hidden; }
.gallery__main { grid-row: span 2; }
@media (min-width: 700px) { .gallery { grid-template-rows: 190px 190px; } }
.amenity-grid { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.amenity-grid li { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.amenity-grid .icon { color: var(--success); }
.room-group { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 14px; }
.room-group__head { display: flex; gap: 12px; align-items: center; padding: 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.room-group__photo { width: 76px; min-height: 58px; height: 58px; border-radius: var(--radius-sm); flex: 0 0 76px; }
.room-group__head h3 { font-size: 1rem; }
.room-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 14px; transition: background-color .2s; }
.room-option:hover { background: var(--surface-2); }
.room-option + .room-option { border-top: 1px solid var(--line); }
.room-option__info { display: flex; flex-direction: column; gap: 2px; }
.room-option__info small { font-size: .8125rem; }
.room-option__price { display: flex; flex-direction: column; align-items: flex-end; }
.room-option__price strong { font-size: 1.15rem; }
.room-option__price small { color: var(--muted); font-size: .75rem; }
.room-option .btn { grid-column: 1 / -1; }
@media (min-width: 700px) { .room-option { grid-template-columns: minmax(0, 1fr) auto auto; } .room-option .btn { grid-column: auto; } }
.price-panel { background: linear-gradient(160deg, var(--accent-soft), var(--surface) 60%); }
.big-price { font-size: 2rem; font-weight: 700; margin: 6px 0; }
.big-price small { font-size: .875rem; color: var(--muted); font-weight: 500; }

/* Bus card & seats */
.bus-card__main { display: grid; gap: 12px; padding: 16px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.bus-card__op { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; }
.bus-card__op small { color: var(--muted); font-size: .8125rem; }
.bus-card__main .timeline { grid-column: 1 / -1; }
.bus-card__main > .btn { grid-column: 1 / -1; }
.amenity-icons { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
@media (min-width: 800px) {
    .bus-card__main { grid-template-columns: minmax(190px, 1.4fr) minmax(220px, 2fr) auto auto auto; gap: 22px; }
    .bus-card__op, .bus-card__main .timeline, .bus-card__main > .btn { grid-column: auto; }
}
.seat-panel { border-top: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.seat-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .8125rem; color: var(--muted); }
.seat-legend span { display: inline-flex; align-items: center; gap: 6px; }
.seat-legend i.seat { width: 18px; height: 18px; min-height: 18px; min-width: 18px; padding: 0; }
.decks { display: flex; flex-wrap: wrap; gap: 20px; }
.deck { border: 1.5px solid var(--line-2); border-radius: var(--radius); padding: 14px; min-width: 210px; background: var(--surface-2); }
.deck__title { font-size: .8125rem; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.deck__grid { display: grid; gap: 8px; }
.seat {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 4px;
    border-radius: 10px; border: 1.5px solid var(--success); background: var(--surface); color: var(--success);
    font-size: .6875rem; font-weight: 700; cursor: pointer; transition: transform .2s var(--spring), background-color .2s;
}
.seat:hover:not(:disabled) { transform: scale(1.08); }
.seat--sleeper { min-height: 78px; }
.seat--ladies { border-color: #DB2777; color: #DB2777; }
[data-theme="dark"] .seat--ladies { border-color: #F9A8D4; color: #F9A8D4; }
.seat--booked { border-color: var(--line-2); background: var(--bg-2); color: var(--muted); cursor: not-allowed; }
.seat--selected { background: linear-gradient(135deg, #10B981, #059669); border-color: transparent; color: #FFFFFF; animation: pop .25s var(--spring); }
.seat-gap { min-height: 44px; }
.seat-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.seat-footer > div { flex: 1 1 220px; display: flex; flex-direction: column; }
.seat-footer__price { font-size: 1.35rem; font-weight: 700; }

/* Train card */
.train-card { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.train-card__head > div { display: flex; flex-direction: column; }
.class-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px; }
.class-tile { flex: 0 0 140px; display: flex; flex-direction: column; gap: 2px; padding: 12px; text-align: start; cursor: pointer; border-radius: var(--radius-sm); border: 1.5px solid var(--line-2); background: var(--surface); transition: transform .2s var(--spring), box-shadow .2s; }
.class-tile:hover:not(:disabled) { transform: translateY(-3px); box-shadow: var(--shadow); }
.class-tile:disabled { cursor: not-allowed; opacity: .7; }
.class-tile__top { display: flex; justify-content: space-between; gap: 6px; font-size: .875rem; }
.class-tile__status { font-weight: 700; font-size: .875rem; }
.class-tile small { font-size: .75rem; color: var(--muted); }
.class-tile--available { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.class-tile--available .class-tile__status { color: var(--success); }
.class-tile--rac, .class-tile--waitlist { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.class-tile--rac .class-tile__status, .class-tile--waitlist .class-tile__status { color: var(--warning); }
.class-tile--notavailable { background: var(--bg-2); }
.class-tile--notavailable .class-tile__status { color: var(--muted); }

/* ---------- Checkout ---------- */

.steps { list-style: none; margin: 0 0 18px; padding: 0; display: flex; gap: 8px; overflow-x: auto; }
.steps__item { display: flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.steps__item + .steps__item::before { content: ""; width: 28px; height: 3px; border-radius: 3px; background: var(--line-2); }
.steps__item.is-done + .steps__item::before { background: var(--grad-brand); }
.steps__dot { width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--line); color: var(--ink-2); font-size: .75rem; font-weight: 700; }
.steps__item.is-current { color: var(--ink); }
.steps__item.is-current .steps__dot { background: var(--grad-brand); color: #FFFFFF; animation: pulse-ring 1.8s ease-out infinite; }
.steps__item.is-done .steps__dot { background: linear-gradient(135deg, #10B981, #059669); color: #FFFFFF; }

.page-title { font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 700; margin-bottom: 14px; }
.page-title-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.page-title-row .page-title { margin-bottom: 0; flex: 1; }
.page-title-row > div { flex: 1; min-width: 0; }
.page-title-row .muted { display: flex; align-items: center; gap: 4px; font-size: .9rem; }

.checkout-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); margin-top: 14px; }
.checkout-layout__main, .checkout-layout__side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (min-width: 900px) {
    .checkout-layout { grid-template-columns: minmax(0, 1fr) 350px; align-items: start; }
    .checkout-layout__side { position: sticky; top: calc(var(--topbar-h) + 18px); }
}

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); }
.panel > h2 { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; margin-bottom: 10px; }
.panel__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 12px; margin-bottom: 14px; }
.panel__head h2 { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; }
.panel__head p { color: var(--muted); font-size: .9rem; }
.panel__sub { font-size: .95rem; margin: 18px 0 10px; }
.panel--form { margin-bottom: 18px; }
.notice { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); background: var(--accent-soft); border-color: transparent; }
p.notice { padding: 10px 12px; border-radius: var(--radius-sm); margin-top: 12px; }
.notice .icon { color: var(--accent); margin-top: 2px; }

.inline-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 14px; border-radius: var(--radius); background: linear-gradient(120deg, var(--accent-soft), color-mix(in srgb, var(--pink) 10%, var(--surface))); margin-bottom: 14px; font-weight: 600; color: var(--ink-2); }
.inline-banner > span { flex: 1 1 220px; }
.inline-banner .icon { color: var(--pink); }

.itinerary-row { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.itinerary-row > div { display: flex; flex-direction: column; gap: 2px; }
.itinerary-row small { color: var(--muted); font-size: .8125rem; }

.item-summary { display: flex; gap: 14px; align-items: flex-start; }
.item-summary h2 { font-size: 1.1rem; }
.item-summary p { color: var(--muted); font-size: .9rem; }
.item-summary__icon { --c: var(--violet); width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px; background: var(--c); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 35%, transparent); }
.item-summary__icon--flight { --c: var(--blue); }
.item-summary__icon--hotel { --c: var(--pink); }
.item-summary__icon--train { --c: var(--green); }
.item-summary__icon--bus { --c: var(--orange); }
.bullet-list { margin: 8px 0 0; padding-inline-start: 18px; color: var(--ink-2); font-size: .9rem; display: grid; gap: 4px; }

.fare-summary h2 { font-size: 1.1rem; margin-bottom: 10px; }
.fare-summary dl { margin: 0 0 16px; display: grid; gap: 10px; }
.fare-summary dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; }
.fare-summary dt { color: var(--ink-2); }
.fare-summary dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.fare-summary .is-discount dd, .fare-summary .is-discount dt { color: var(--success); }
.fare-summary__total { border-top: 1.5px dashed var(--line-2); padding-top: 12px; margin-top: 4px; font-size: 1.05rem !important; }
.fare-summary__total dt { color: var(--ink) !important; font-weight: 700; }
.fare-summary__total dd { font-weight: 700 !important; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="dark"] .fare-summary__total dd { background: linear-gradient(120deg, #C4B5FD, #F9A8D4); -webkit-background-clip: text; background-clip: text; }
.fare-summary .btn + p { margin-top: 10px; }

.saved-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.traveller { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 0 0 12px; background: var(--surface-2); animation: rise .3s var(--ease); }
.traveller legend { display: flex; align-items: center; gap: 8px; padding: 0 6px; font-weight: 700; }
.form-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid > .input-field { grid-column: 1 / -1; }
.form-grid > .input-field--sm { grid-column: auto; }
.form-grid--stack { grid-template-columns: minmax(0, 1fr); }
.form-grid--2 > .input-field { grid-column: 1 / -1; }
@media (min-width: 700px) {
    .form-grid { grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) 100px; }
    .form-grid > .input-field { grid-column: auto; }
    .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid--2 > .input-field { grid-column: auto; }
    .form-grid--2 > .input-field--wide { grid-column: 1 / -1; }
    .form-grid--stack { grid-template-columns: minmax(0, 1fr) !important; }
}
.input-field { display: flex; flex-direction: column; gap: 6px; font-size: .8125rem; font-weight: 700; color: var(--ink-2); }
.input-field input, .input-field select, .input-prefix {
    min-height: 48px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: var(--radius-sm);
    background: var(--surface); font-size: 1rem; font-weight: 500; color: var(--ink); width: 100%;
    transition: border-color .2s, box-shadow .2s;
}
.input-field input:focus, .input-field select:focus { outline: none; border-color: var(--violet); box-shadow: var(--ring); }
.input-field input:disabled { opacity: .7; }
.input-prefix { display: flex; align-items: center; gap: 8px; padding: 0 0 0 14px; }
.input-prefix:focus-within { border-color: var(--violet); box-shadow: var(--ring); }
.input-prefix span { color: var(--muted); font-weight: 700; }
.input-prefix input { border: 0; min-height: 44px; padding-inline-start: 0; box-shadow: none !important; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.gst { margin-top: 14px; }
.gst summary { cursor: pointer; color: var(--accent); font-weight: 700; min-height: 32px; }
.gst .input-field { margin-top: 8px; max-width: 320px; }

.coupon-input { display: flex; gap: 8px; }
.coupon-input input { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border: 1.5px dashed var(--line-2); border-radius: var(--radius-sm); font-size: 1rem; background: var(--surface); color: var(--ink); }
.coupon-list { display: grid; gap: 8px; margin-top: 12px; }
.coupon { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 56px; border: 1.5px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); text-align: start; cursor: pointer; font-size: .875rem; color: var(--ink-2); transition: border-color .2s, background-color .2s; }
.coupon > span:nth-child(2) { flex: 1; }
.coupon.is-active { border-color: var(--success); background: var(--success-soft); }
.coupon.is-active .radio-dot { border: 6px solid var(--success); }
.coupon-success { display: flex; align-items: center; gap: 6px; color: var(--success); font-weight: 700; margin-top: 10px; animation: pop .35s var(--spring); }

.pay-methods { display: grid; gap: 10px; margin-bottom: 16px; }
.pay-method { --c: var(--violet); display: flex; align-items: center; gap: 14px; padding: 14px; min-height: 68px; border: 1.5px solid var(--line-2); border-radius: var(--radius); background: var(--surface); text-align: start; cursor: pointer; transition: border-color .2s, background-color .2s, transform .2s var(--spring); }
.pay-method:hover { transform: translateY(-1px); }
.pay-method--green { --c: var(--green); }
.pay-method--blue { --c: var(--blue); }
.pay-method--orange { --c: var(--orange); }
.pay-method--pink { --c: var(--pink); }
.pay-method > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.pay-method small { color: var(--muted); font-size: .8125rem; }
.pay-method__icon { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); transition: background-color .2s, color .2s; }
.radio-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); flex: 0 0 22px; transition: border-width .2s var(--spring), border-color .2s; }
.pay-method.is-active { border-color: var(--c); background: color-mix(in srgb, var(--c) 6%, var(--surface)); }
.pay-method.is-active .pay-method__icon { background: var(--c); color: #FFFFFF; }
.pay-method.is-active .radio-dot { border: 7px solid var(--c); }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #FFFFFF; animation: spin .8s linear infinite; }
.btn-outline .spinner { border-color: var(--line-2); border-top-color: var(--accent); }

/* ---------- Bookings ---------- */

.confirm-banner { position: relative; overflow: hidden; display: flex; gap: 16px; align-items: center; padding: 24px; border-radius: 22px; background: linear-gradient(120deg, #059669, #10B981 50%, #22D3EE); color: #FFFFFF; margin-bottom: 18px; box-shadow: 0 16px 36px rgba(5, 150, 105, .3); animation: pop .5s var(--spring); }
.confirm-banner h1 { font-size: 1.5rem; }
.confirm-banner p { opacity: .95; }
.confirm-banner__icon { width: 58px; height: 58px; flex: 0 0 58px; border-radius: 50%; background: rgba(255, 255, 255, .25); display: flex; align-items: center; justify-content: center; animation: pop .6s var(--spring) .2s both; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { --dx: calc((var(--i) - 7) * 18px); position: absolute; top: -10px; left: calc(10% + var(--i) * 6%); width: 8px; height: 12px; border-radius: 2px; background: hsl(calc(var(--i) * 40) 90% 65%); animation: confetti 1.6s var(--ease) calc(var(--i) * 40ms) both; }
.ticket { margin-bottom: 18px; position: relative; }
.ticket::before, .ticket::after { content: ""; position: absolute; top: 96px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); }
.ticket::before { inset-inline-start: -12px; }
.ticket::after { inset-inline-end: -12px; }
.ticket__head { display: flex; gap: 14px; align-items: flex-start; }
.ticket__head > div { flex: 1; min-width: 0; }
.ticket__head h2 { font-size: 1.15rem; }
.ticket__head p { color: var(--muted); font-size: .9rem; }
.ticket__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0 0; padding: 16px 0 0; border-top: 2px dashed var(--line-2); }
.ticket__facts dt { font-size: .6875rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
:lang(hi) .ticket__facts dt, :lang(ar) .ticket__facts dt { text-transform: none; letter-spacing: 0; font-size: .8125rem; }
.ticket__facts dd { margin: 2px 0 0; font-weight: 700; }
@media (min-width: 700px) { .ticket__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.status { padding: 5px 12px; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.status--confirmed { background: var(--success-soft); color: var(--success); }
.status--cancelled { background: var(--danger-soft); color: var(--danger); }
.status--pending { background: var(--warning-soft); color: var(--warning); }
.traveller-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.traveller-list li { display: flex; align-items: center; gap: 8px; }
.actions-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }
.confirm-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); font-weight: 700; animation: rise .25s var(--ease); }

.trip-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.trip-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 76px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: transform .25s var(--spring), box-shadow .25s; }
.trip-card:hover { color: var(--ink); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.trip-card__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.trip-card__text small { color: var(--muted); font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip-card__price { font-weight: 700; }

.offer-list { display: flex; flex-direction: column; gap: 12px; }
.offer-row { --c1: #7C3AED; --c2: #DB2777; position: relative; overflow: hidden; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: transform .25s var(--spring), box-shadow .25s; }
.offer-row:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.offer-row::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px; background: linear-gradient(180deg, var(--c1), var(--c2)); }
.offer-row--1 { --c1: #F97316; --c2: #DB2777; }
.offer-row--2 { --c1: #2563EB; --c2: #7C3AED; }
.offer-row--3 { --c1: #059669; --c2: #0EA5E9; }
.offer-row > div { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; }
.offer-row h2 { font-size: 1.1rem; }
.offer-row__icon { width: 50px; height: 50px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; background: linear-gradient(135deg, var(--c1), var(--c2)); }

.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 44px 18px; background: var(--surface); border: 1px dashed var(--line-2); border-radius: 22px; animation: rise .4s var(--ease); }
.empty-state__icon { width: 72px; height: 72px; border-radius: 24px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; animation: bob 3s ease-in-out infinite; }
.empty-state h2 { font-size: 1.15rem; }
.empty-state p { color: var(--muted); max-width: 440px; }

/* ---------- Account ---------- */

.profile-hero { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 26px; border-radius: 26px; background: var(--grad-brand); color: #FFFFFF; box-shadow: var(--shadow-lg); margin-bottom: 18px; isolation: isolate; }
.profile-hero::before { content: ""; position: absolute; z-index: -1; width: 300px; height: 300px; inset-inline-end: -80px; top: -120px; border-radius: 50%; background: #F97316; opacity: .55; filter: blur(40px); animation: float 12s ease-in-out infinite; }
.profile-hero .avatar { box-shadow: 0 0 0 4px rgba(255, 255, 255, .35); }
.profile-hero__text { flex: 1 1 220px; min-width: 0; }
.profile-hero__hello { font-weight: 700; opacity: .9; }
.profile-hero h1 { font-size: 1.6rem; }
.profile-hero__contact, .profile-hero__since { font-size: .875rem; opacity: .9; overflow-wrap: anywhere; }
.profile-hero__since { opacity: .8; margin-top: 2px; }
[dir="rtl"] .profile-hero__contact { text-align: end; }

.stat-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 18px; }
@media (min-width: 700px) { .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { --c: var(--violet); display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; position: relative; overflow: hidden; transition: transform .25s var(--spring), box-shadow .25s; }
.stat::after { content: ""; position: absolute; inset-inline-end: -20px; bottom: -20px; width: 70px; height: 70px; border-radius: 50%; background: var(--c); opacity: .14; transition: transform .4s var(--ease); }
.stat:hover { color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow); }
.stat:hover::after { transform: scale(1.6); }
.stat strong { font-size: 1.8rem; font-weight: 700; color: var(--c); }
[data-theme="dark"] .stat strong { filter: brightness(1.5); }
.stat span { font-size: .8125rem; color: var(--muted); font-weight: 700; }
.stat--blue { --c: var(--blue); }
.stat--pink { --c: var(--pink); }
.stat--green { --c: var(--green); }
.stat--orange { --c: var(--orange); }

.tile-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-bottom: 18px; }
.tile-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; }
.tile { --c: var(--violet); display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 700; transition: transform .25s var(--spring), box-shadow .25s, border-color .25s; }
.tile-grid--compact .tile { flex-direction: column; text-align: center; gap: 8px; font-size: .875rem; }
.tile-grid--compact .tile > .icon { color: var(--c); }
.tile:hover { color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.tile--blue { --c: var(--blue); }
.tile--green { --c: var(--green); }
.tile--pink { --c: var(--pink); }
.tile--orange { --c: var(--orange); }
.tile--teal { --c: var(--teal); }
.tile__icon { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; background: var(--c); box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 35%, transparent); transition: transform .35s var(--spring); }
.tile:hover .tile__icon { transform: rotate(-8deg) scale(1.06); }
.tile__text { flex: 1; display: flex; flex-direction: column; }
.tile__text small { color: var(--muted); font-weight: 500; font-size: .8125rem; }
.tile__go { color: var(--muted); transition: transform .25s var(--ease); }
.tile:hover .tile__go { transform: translateX(4px); color: var(--c); }
[dir="rtl"] .tile:hover .tile__go { transform: scaleX(-1) translateX(4px); }

.profile-inline { display: flex; align-items: center; gap: 14px; }
.profile-inline h2 { font-size: 1.15rem; }

.traveller-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.traveller-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); animation: rise .35s var(--ease) both; }
.traveller-card__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.traveller-card__text small { color: var(--muted); }

.settings-section { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.settings-section > h2 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; margin-bottom: 8px; }
.section-icon { --c: var(--violet); width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; background: var(--c); }
.section-icon--blue { --c: var(--blue); }
.section-icon--pink { --c: var(--pink); }
.section-icon--orange { --c: var(--orange); }
.settings-label { font-size: .8125rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 12px 0 6px; }
:lang(hi) .settings-label, :lang(ar) .settings-label { text-transform: none; letter-spacing: 0; font-size: .9rem; }
.choice-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.choice-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; min-height: 92px; border: 1.5px solid var(--line-2); border-radius: var(--radius); background: var(--surface); text-align: start; cursor: pointer; transition: border-color .2s, transform .2s var(--spring), box-shadow .2s; }
.choice:hover { transform: translateY(-2px); }
.choice small { color: var(--muted); font-size: .75rem; }
.choice.is-active { border-color: var(--violet); box-shadow: var(--ring); }
.choice.is-active::after { content: "✓"; position: absolute; top: 10px; inset-inline-end: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--grad-brand); color: #FFFFFF; font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; animation: pop .3s var(--spring); }
.choice__big { font-size: 1.5rem; font-weight: 700; line-height: 1.1; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.theme-preview { width: 100%; height: 56px; border-radius: 10px; display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 1fr 1fr; gap: 4px; padding: 6px; margin-bottom: 4px; border: 1px solid var(--line); }
.theme-preview i { border-radius: 4px; }
.theme-preview i:first-child { grid-row: span 2; }
.theme-preview--light { background: #F6F5FB; }
.theme-preview--light i { background: #FFFFFF; }
.theme-preview--light i:nth-child(2) { background: linear-gradient(120deg, #7C3AED, #DB2777); }
.theme-preview--dark { background: #0D0B1A; }
.theme-preview--dark i { background: #1E1A36; }
.theme-preview--dark i:nth-child(2) { background: linear-gradient(120deg, #7C3AED, #DB2777); }
.theme-preview--system { background: linear-gradient(135deg, #F6F5FB 50%, #0D0B1A 50%); }
.theme-preview--system i { background: var(--brand-shadow); }

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.switch-row:last-child { border-bottom: 0; }
.switch-row__text { display: flex; flex-direction: column; }
.switch-row__text small { color: var(--muted); font-size: .8125rem; }
.switch { appearance: none; -webkit-appearance: none; position: relative; width: 52px; height: 30px; flex: 0 0 52px; border-radius: 999px; background: var(--line-2); cursor: pointer; transition: background-color .25s; margin: 0; }
.switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .3s var(--spring); }
.switch:checked { background: var(--grad-brand); }
.switch:checked::after { transform: translateX(22px); }
[dir="rtl"] .switch:checked::after { transform: translateX(-22px); }

.notif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.notif-row { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); animation: rise .35s var(--ease) both; }
.notif-row.is-unread { border-color: color-mix(in srgb, var(--violet) 40%, transparent); background: linear-gradient(120deg, var(--accent-soft), var(--surface) 70%); }
.notif-row.is-unread .notif-item__text strong::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); margin-inline-start: 8px; vertical-align: middle; }
.notif-row__main { flex: 1; display: flex; gap: 12px; align-items: flex-start; padding: 8px; border: 0; background: transparent; text-align: start; cursor: pointer; color: var(--ink); border-radius: var(--radius-sm); }

.faq { display: flex; flex-direction: column; gap: 8px; }
.faq__item { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); overflow: hidden; }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; min-height: 52px; cursor: pointer; font-weight: 700; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item[open] summary .icon { transform: rotate(180deg); }
.faq__item[open] summary { color: var(--accent); }
.faq__item p { padding: 0 16px 16px; color: var(--ink-2); animation: rise .25s var(--ease); }
.contact-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 18px; }
.contact-card { --c: var(--blue); display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: transform .25s var(--spring), box-shadow .25s; }
.contact-card .icon { color: var(--c); }
.contact-card small { color: var(--muted); }
.contact-card:hover { color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow); }
.contact-card--green { --c: var(--green); }
.contact-card--pink { --c: var(--pink); }


/* ==========================================================================
   v2.1 — header dropdowns, theme switcher, mobile tab bar with centre button,
   redesigned flight card
   ========================================================================== */

/* ---------- Header dropdowns (Bootstrap .dropdown-menu, opened by Blazor) ---------- */
.hdr-dropdown { position: relative; }
.hdr-menu {
    min-width: 260px; margin-top: 10px !important; padding: 8px;
    border: 1px solid var(--line); border-radius: 20px; background: var(--surface);
    transform-origin: top right; animation: menu-in .22s var(--spring) both;
}
[dir="rtl"] .hdr-menu { transform-origin: top left; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
.hdr-menu .dropdown-header { padding: 8px 10px 6px; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
:lang(hi) .hdr-menu .dropdown-header, :lang(ar) .hdr-menu .dropdown-header { text-transform: none; letter-spacing: 0; font-size: .8125rem; }
.hdr-menu .dropdown-item { display: flex; align-items: center; gap: 12px; min-height: 46px; font-weight: 600; border-radius: 12px; transition: background-color .15s, transform .15s var(--ease); }
.hdr-menu .dropdown-item:hover { transform: translateX(2px); }
[dir="rtl"] .hdr-menu .dropdown-item:hover { transform: translateX(-2px); }
.hdr-menu .dropdown-item .icon { color: var(--muted); }
.hdr-menu .dropdown-item.active .icon, .hdr-menu .dropdown-item:active .icon { color: var(--accent); }
.hdr-item__icon { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-2); flex: 0 0 34px; }
.hdr-item__text { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.hdr-item__text small { color: var(--muted); font-weight: 500; font-size: .75rem; }
.hdr-item--danger, .hdr-item--danger .icon { color: var(--danger) !important; }
.hdr-item--danger .hdr-item__icon { background: var(--danger-soft); }
.lang-glyph { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #FFFFFF; background: var(--grad-brand); }
.topbar__icon-btn.is-open { background: var(--accent-soft); color: var(--accent); }

.avatar-btn { padding: 3px; height: auto; border-radius: 50%; transition: transform .25s var(--spring), box-shadow .25s; }
.avatar-btn:hover { background: transparent; transform: scale(1.06); }
.avatar-btn.is-open { box-shadow: 0 0 0 3px var(--accent-soft); }
.user-menu { min-width: 290px; }
.user-menu__head { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 16px 14px; margin: -8px -8px 8px; border-radius: 20px 20px 0 0; background: var(--grad-brand); color: #FFFFFF; }
.user-menu__head::after { content: ""; position: absolute; width: 140px; height: 140px; inset-inline-end: -40px; top: -60px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.user-menu__head .avatar { box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); }
.user-menu__id { position: relative; display: flex; flex-direction: column; min-width: 0; }
.user-menu__id small { opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-panel { width: min(390px, calc(100vw - 24px)); }

/* Theme switcher */
.theme-toggle { position: relative; }
.theme-toggle__dot { position: absolute; bottom: 7px; inset-inline-end: 8px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--surface); }
.theme-menu { width: 300px; }
.theme-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 2px 6px 8px; }
.theme-mode { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--surface); cursor: pointer; transition: border-color .2s, transform .2s var(--spring); }
.theme-mode:hover { transform: translateY(-2px); }
.theme-mode.is-active { border-color: var(--brand-1); box-shadow: var(--ring); }
.theme-mode .theme-preview { height: 46px; margin: 0; }
.theme-mode__label { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: .75rem; font-weight: 700; color: var(--ink-2); }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 8px 10px; }
.swatches--lg { gap: 12px; padding: 0; margin-bottom: 8px; }
.swatch { width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line-2); transition: transform .25s var(--spring), box-shadow .2s; }
.swatch:hover { transform: scale(1.12); }
.swatch.is-active { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink); transform: scale(1.05); }
.swatch--violet { background: linear-gradient(135deg, #7C3AED, #C026D3, #DB2777); }
.swatch--ocean { background: linear-gradient(135deg, #1D4ED8, #2563EB, #0E7490); }
.swatch--sunset { background: linear-gradient(135deg, #C2410C, #E11D48, #BE185D); }
.swatch--emerald { background: linear-gradient(135deg, #047857, #0F766E, #0E7490); }
.swatch--rose { background: linear-gradient(135deg, #BE123C, #DB2777, #A21CAF); }
.swatch-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 10px; min-width: 96px; border: 1.5px solid var(--line-2); border-radius: 16px; background: var(--surface); cursor: pointer; transition: border-color .2s, transform .2s var(--spring); }
.swatch-card:hover { transform: translateY(-2px); }
.swatch-card.is-active { border-color: var(--brand-1); box-shadow: var(--ring); }
.swatch-card small { font-weight: 700; color: var(--ink-2); font-size: .75rem; text-align: center; }

/* ---------- Mobile / tablet tab bar with animated centre button ---------- */
.bottomnav { display: none !important; }
.tabbar { --tab-h: var(--bottomnav-h); --notch: 40px; position: fixed; inset-inline: 0; bottom: 0; z-index: 46; pointer-events: none; }
.tabbar > * { pointer-events: auto; }
.tabbar__bar {
    position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: calc(var(--tab-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
    border-top: 1px solid var(--line); box-shadow: 0 -8px 30px rgba(23, 20, 43, .08);
    -webkit-mask: radial-gradient(circle var(--notch) at 50% 0, transparent calc(var(--notch) - 1px), #000 var(--notch));
    mask: radial-gradient(circle var(--notch) at 50% 0, transparent calc(var(--notch) - 1px), #000 var(--notch));
}
.tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--tab-h); font-size: .6875rem; font-weight: 700; color: var(--muted); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.tab:hover { color: var(--ink); }
.tab__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 30px; border-radius: 999px; transition: background-color .3s, transform .35s var(--spring), color .3s; }
.tab__icon .avatar { --size: 26px; box-shadow: none; }
.tab.active { color: var(--accent); }
.tab.active .tab__icon { background: var(--accent-soft); transform: translateY(-3px); }
.tab.active::after { content: ""; position: absolute; bottom: calc(6px + var(--safe-bottom) * 0); width: 5px; height: 5px; border-radius: 50%; background: var(--grad-brand); animation: pop .3s var(--spring); }
.tab--spacer { pointer-events: none; }
.dot-badge--sm { min-width: 10px; width: 10px; height: 10px; padding: 0; top: 0; inset-inline-end: 12px; }

.fab {
    position: absolute; left: 50%; top: -28px; translate: -50% 0; z-index: 2;
    width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer; color: #FFFFFF;
    background: var(--grad-brand); background-size: 180% 180%;
    box-shadow: 0 12px 28px var(--brand-shadow), 0 0 0 5px var(--surface);
    display: flex; align-items: center; justify-content: center;
    animation: mesh 6s ease-in-out infinite;
    transition: transform .35s var(--spring), box-shadow .3s;
}
.fab:active { transform: scale(.92); }
.fab__icon { display: inline-flex; transition: transform .45s var(--spring); }
.fab__ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--brand-1) 45%, transparent); animation: fab-pulse 2.4s ease-out infinite; pointer-events: none; }
@keyframes fab-pulse { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.tabbar.is-open .fab { box-shadow: 0 16px 36px var(--brand-shadow-2), 0 0 0 5px var(--surface); }
.tabbar.is-open .fab__icon { transform: rotate(135deg); }
.tabbar.is-open .fab__ring { animation: none; opacity: 0; }

.fab-scrim { position: fixed; inset: 0; z-index: 0; background: rgba(13, 11, 26, .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.tabbar.is-open .fab-scrim { opacity: 1; visibility: visible; }
.fab-fan { position: absolute; left: 50%; bottom: calc(var(--tab-h) + var(--safe-bottom) + 6px); width: 0; height: 0; z-index: 1; }
.fab-item {
    position: absolute; left: -32px; top: -32px; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-decoration: none; color: #FFFFFF; font-weight: 700; font-size: .75rem;
    opacity: 0; transform: translate(0, 40px) scale(.3); pointer-events: none;
    transition: transform .45s var(--spring), opacity .25s;
    transition-delay: calc((4 - var(--i)) * 25ms);
}
.tabbar.is-open .fab-item { opacity: 1; transform: translate(var(--x), var(--y)) scale(1); pointer-events: auto; transition-delay: calc(var(--i) * 45ms); }
.fab-item__icon { --c: var(--blue); width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: var(--c); box-shadow: 0 10px 22px color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 0 2px rgba(255, 255, 255, .25); transition: transform .25s var(--spring); }
.fab-item:hover .fab-item__icon, .fab-item:focus-visible .fab-item__icon { transform: scale(1.1) rotate(-6deg); }
.fab-item__label { text-shadow: 0 1px 6px rgba(0, 0, 0, .45); white-space: nowrap; }
.fab-item--hotels .fab-item__icon { --c: var(--pink); }
.fab-item--trains .fab-item__icon { --c: var(--green); }
.fab-item--buses .fab-item__icon { --c: var(--orange); }
.fab-item--holidays .fab-item__icon { --c: var(--violet); }
@media (min-width: 640px) and (max-width: 999.98px) { .tabbar { --notch: 44px; } .fab { width: 70px; height: 70px; top: -32px; } .tab { font-size: .75rem; } }
@media (min-width: 1000px) { .tabbar { display: none; } }

/* ---------- Flight card (results) ---------- */
.fcard {
    position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
    box-shadow: var(--shadow-sm); transition: box-shadow .25s, border-color .25s, transform .25s var(--ease);
}
.fcard::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px; background: var(--grad-brand); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease); }
.fcard:hover { box-shadow: var(--shadow-lg); border-color: transparent; }
.fcard:hover::before, .fcard.is-open::before, .fcard.is-selected::before { transform: scaleY(1); }
.fcard.is-selected { border-color: var(--brand-1); box-shadow: var(--ring); }

.fcard__main {
    display: grid; gap: 14px 16px; padding: 18px 18px 14px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "airline airline price" "dep dur arr" "cta cta cta";
    align-items: center;
}
.fcard__airline { grid-area: airline; display: flex; align-items: center; gap: 12px; min-width: 0; }
.fcard__airline .airline__logo { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 12px; font-size: .8125rem; }
.fcard__airline-text { display: flex; flex-direction: column; min-width: 0; }
.fcard__airline-text strong { font-size: 1rem; font-weight: 700; }
.fcard__airline-text small { color: var(--muted); font-size: .8125rem; }
.fcard__point { grid-area: dep; display: flex; flex-direction: column; min-width: 0; }
.fcard__point--end { grid-area: arr; text-align: end; align-items: flex-end; }
.fcard__time { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.fcard__time sup { font-size: .7rem; color: var(--warning); margin-inline-start: 2px; }
.fcard__date { font-weight: 700; font-size: .875rem; color: var(--accent); }
.fcard__place { color: var(--muted); font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fcard__dur { grid-area: dur; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 96px; }
.fcard__dur strong { font-size: .875rem; font-weight: 700; }
.fcard__dur small { font-size: .8125rem; font-weight: 600; }
.fcard__line { position: relative; width: 100%; min-width: 96px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--brand-1), var(--brand-3)); }
[dir="rtl"] .fcard__line { background: linear-gradient(270deg, var(--brand-1), var(--brand-3)); }
.fcard__stop { position: absolute; top: 50%; left: var(--p); width: 11px; height: 11px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--brand-2); translate: -50% -50%; }
[dir="rtl"] .fcard__stop { left: auto; right: var(--p); translate: 50% -50%; }
.fcard__plane { position: absolute; top: 50%; left: 0; translate: -50% -50%; display: inline-flex; color: var(--brand-1); background: var(--surface); border-radius: 50%; padding: 2px; transform: rotate(45deg); opacity: 0; }
.fcard__plane .icon { transform: none; }
.fcard:hover .fcard__plane { animation: fcard-fly 1.6s var(--ease) forwards; }
@keyframes fcard-fly { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 100% { left: 100%; opacity: 1; } }
[dir="rtl"] .fcard__plane { transform: rotate(-45deg) scaleX(-1); }
[dir="rtl"] .fcard:hover .fcard__plane { animation-name: fcard-fly-rtl; }
@keyframes fcard-fly-rtl { 0% { left: 100%; opacity: 0; } 15% { opacity: 1; } 100% { left: 0; opacity: 1; } }
.fcard__price { grid-area: price; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.fcard__price strong { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--ink); }
.fcard__fares-btn { padding: 2px 12px; min-height: 28px; border-radius: 999px; border: 1.5px solid var(--accent); background: transparent; color: var(--accent); font-size: .75rem; font-weight: 700; cursor: pointer; transition: background-color .2s, color .2s; white-space: nowrap; }
.fcard__fares-btn:hover, .fcard__fares-btn.is-active { background: var(--accent); color: var(--surface); }
.fcard__cta { grid-area: cta; }
.fcard__cta .btn { width: 100%; text-transform: uppercase; letter-spacing: .04em; }
:lang(hi) .fcard__cta .btn, :lang(ar) .fcard__cta .btn { text-transform: none; letter-spacing: 0; }

.fcard__strip {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 14px 14px; padding: 9px 14px;
    border-radius: 12px; background: color-mix(in srgb, var(--brand-1) 6%, var(--surface-2)); font-size: .8125rem; font-weight: 700; color: var(--ink-2);
}
.fcard__fact { display: inline-flex; align-items: center; gap: 6px; }
.fcard__fact .icon { color: var(--muted); }
.fcard__fact.is-low { color: var(--danger); }
.fcard__fact.is-low .icon { color: var(--danger); }
.fcard__fact--ok { color: var(--success); }
.fcard__fact--ok .icon { color: var(--success); }
.fcard__toggle { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 12px; border: 1.5px solid transparent; border-radius: 10px; background: transparent; color: var(--orange); font-weight: 700; font-size: .875rem; cursor: pointer; transition: border-color .2s, background-color .2s; }
[data-theme="dark"] .fcard__toggle { color: #FDBA74; }
.fcard__toggle:hover { background: color-mix(in srgb, var(--orange) 8%, transparent); }
.fcard__toggle.is-open { border-color: color-mix(in srgb, var(--orange) 40%, transparent); background: var(--surface); }
.fcard__toggle .icon { transition: transform .3s var(--spring); }
.fcard__toggle.is-open .icon { transform: rotate(180deg); }

.fcard__panel { padding: 4px 18px 18px; }
.fcard__panel .fare-families { padding: 0; }
.fcard__tabs { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; margin-bottom: 18px; padding: 2px 2px 12px; scrollbar-width: none; }
.fcard__tabs::-webkit-scrollbar { display: none; }
.fcard__tab { position: relative; min-height: 44px; padding: 0 20px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, transform .2s var(--spring); }
.fcard__tab:hover { border-color: var(--brand-1); transform: translateY(-1px); }
.fcard__tab.is-active { background: var(--grad-brand); border-color: transparent; color: #FFFFFF; box-shadow: 0 8px 18px var(--brand-shadow); }
.fcard__tab.is-active::after { content: ""; position: absolute; left: 50%; bottom: -8px; translate: -50% 0; border: 8px solid transparent; border-bottom: 0; border-top-color: var(--brand-2); }
.fcard__tabpane { border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: var(--surface); animation: rise .3s var(--ease); }
.fcard__table { margin-bottom: 10px; font-size: .875rem; }
.fcard__table th { font-weight: 700; color: var(--ink-2); }
.fcard__table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom-width: 1.5px; }
:lang(hi) .fcard__table thead th, :lang(ar) .fcard__table thead th { text-transform: none; letter-spacing: 0; font-size: .8125rem; }
.fcard__total td { font-weight: 700; font-size: 1rem; border-top: 1.5px dashed var(--line-2); }

.fseg + .fseg { margin-top: 6px; }
.fseg__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1.15rem; margin-bottom: 14px; }
.fseg__title small { font-size: .85em; font-weight: 700; color: var(--muted); }
.fseg__arrow { color: var(--brand-1); }
.fseg__airline { margin-bottom: 14px; }
.fseg__airline .airline__logo { width: 44px; height: 44px; flex-basis: 44px; }
.fseg__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; }
.fseg__point { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fseg__point--end { text-align: end; align-items: flex-end; }
.fseg__point .fcard__time { font-size: 1.35rem; }
.fseg__city { font-weight: 700; color: var(--accent); font-size: .9rem; }
.fseg__city small { font-weight: 600; }
.fseg__airport { color: var(--ink-2); font-size: .875rem; }
.fseg__dur { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 90px; font-size: .875rem; }
.fseg__bar { width: 100%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--brand-1), var(--brand-3)); }
.fseg__layover { position: relative; display: flex; justify-content: center; margin: 22px 0; }
.fseg__layover::before { content: ""; position: absolute; top: 50%; inset-inline: 10%; border-top: 1.5px dashed var(--line-2); }
.fseg__layover span { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 12px; background: var(--warning-soft); border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent); color: var(--warning); font-weight: 700; font-size: .875rem; }

@media (min-width: 768px) {
    .fcard__main { grid-template-columns: minmax(150px, 1.15fr) minmax(0, 1fr) minmax(110px, auto) minmax(0, 1fr) auto auto; grid-template-areas: "airline dep dur arr price cta"; gap: 18px; padding: 20px 22px 14px; }
    .fcard__cta .btn { width: auto; min-width: 128px; }
    .fcard__strip { margin: 0 22px 16px; }
    .fcard__panel { padding: 4px 22px 22px; }
}
@media (max-width: 575.98px) {
    .fcard__time { font-size: 1.35rem; }
    .fcard__place { font-size: .75rem; }
    .fseg__row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
    .fseg__dur { min-width: 64px; }
    .fseg__airport { font-size: .75rem; }
}
.roundtrip-columns .fcard__main { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "airline airline price" "dep dur arr" "cta cta cta"; }
.roundtrip-columns .fcard__cta .btn { width: 100%; }


/* ==========================================================================
   v2.2 — services, "Do more" strip, offers carousel, service pages,
   grid-icon centre button with services sheet
   ========================================================================== */

.section__title { font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 700; letter-spacing: -.02em; margin-bottom: 16px; }
.section__head--wrap { flex-wrap: wrap; align-items: center; row-gap: 12px; }
.section__intro { text-align: center; margin-bottom: 28px; }
.section__intro h2 { font-size: clamp(1.5rem, 3.6vw, 2.4rem); font-weight: 700; letter-spacing: -.025em; }
.section__intro p { color: var(--muted); font-size: 1.05rem; margin-top: 6px; }
.section--services { padding-top: 48px; }

/* Trust chips under the search card */
.trust-row { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 22px 0 0; padding: 0; color: rgba(255, 255, 255, .95); font-weight: 700; font-size: .875rem; }
.trust-row li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); backdrop-filter: blur(8px); }
@media (min-width: 900px) { .trust-row { margin-top: 34px; } }

/* Glossy service tiles */
.svc-grid { display: grid; gap: 30px 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .svc-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 44px 18px; } }
.svc-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 10px; }
@media (min-width: 640px) { .svc-grid--compact { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.svc-grid--sheet { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 6px; }
@media (min-width: 640px) { .svc-grid--sheet { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.svc { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.svc:hover { color: var(--ink); }
.svc__icon {
    position: relative; isolation: isolate; width: 92px; height: 92px; border-radius: 26px; margin-bottom: 10px;
    display: flex; align-items: center; justify-content: center; color: #FFFFFF;
    background: linear-gradient(160deg, var(--from), var(--to));
    box-shadow: 0 14px 26px -8px color-mix(in srgb, var(--to) 60%, transparent), inset 0 -4px 10px rgba(0, 0, 0, .12);
    transition: transform .35s var(--spring), box-shadow .35s;
}
.svc__icon::before { content: ""; position: absolute; z-index: -1; inset: 6px 10px auto; height: 38%; border-radius: 18px 18px 40% 40%; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .08)); }
.svc__icon::after { content: ""; position: absolute; z-index: -2; inset: 18px 12px -14px; border-radius: 30px; background: var(--to); filter: blur(18px); opacity: .35; transition: opacity .35s; }
.svc__icon .icon { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18)); }
.svc:hover .svc__icon, .svc:focus-visible .svc__icon { transform: translateY(-6px) scale(1.04) rotate(-3deg); box-shadow: 0 22px 34px -10px color-mix(in srgb, var(--to) 70%, transparent), inset 0 -4px 10px rgba(0, 0, 0, .12); }
.svc:hover .svc__icon::after { opacity: .6; }
.svc:active .svc__icon { transform: scale(.94); }
.svc__title { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.svc__sub { color: var(--muted); font-size: .8125rem; line-height: 1.35; }
.svc--compact { gap: 2px; }
.svc--compact .svc__icon { width: 62px; height: 62px; border-radius: 19px; margin-bottom: 6px; }
.svc--compact .svc__icon::before { inset: 4px 7px auto; border-radius: 14px 14px 40% 40%; }
.svc--compact .svc__title { font-size: .75rem; font-weight: 700; }
.svc__icon--xl { width: 96px; height: 96px; border-radius: 28px; flex: 0 0 96px; margin: 0; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
.svc__icon--xl::after { display: none; }
@media (max-width: 639.98px) {
    .svc__icon { width: 72px; height: 72px; border-radius: 22px; }
    .svc__icon .icon { width: 28px; height: 28px; }
    .svc__title { font-size: .875rem; }
    .svc__sub { font-size: .6875rem; }
}

.svc__badge { position: absolute; top: -8px; inset-inline-end: -10px; z-index: 2; padding: 1px 8px; border-radius: 999px; font-size: .6875rem; font-weight: 700; color: #FFFFFF; background: #F97316; border: 2px solid var(--surface); box-shadow: 0 4px 10px rgba(0, 0, 0, .15); animation: pop .5s var(--spring) .3s both; }
.svc__badge--free { background: #059669; }
.svc__badge--new { background: #DB2777; }

/* "Do more" strip */
.domore { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); overflow-x: auto; padding: 18px 8px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); scrollbar-width: none; }
.domore::-webkit-scrollbar { display: none; }
.domore__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 10px; color: var(--ink); text-decoration: none; text-align: center; border-radius: 18px; transition: background-color .2s; animation: rise .45s var(--ease) both; animation-delay: calc(var(--i) * 50ms); }
.domore__item + .domore__item::before { content: ""; position: absolute; inset-inline-start: 0; top: 18%; bottom: 18%; width: 1px; background: var(--line); }
.domore__item:hover { color: var(--ink); background: var(--surface-2); }
.domore__icon { position: relative; width: 58px; height: 58px; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: var(--to); background: color-mix(in srgb, var(--from) 14%, var(--surface)); transition: transform .35s var(--spring), background-color .2s, color .2s; }
.domore__item:hover .domore__icon { transform: translateY(-4px) rotate(-6deg); background: linear-gradient(160deg, var(--from), var(--to)); color: #FFFFFF; }
[data-theme="dark"] .domore__icon { color: var(--from); }
.domore__title { font-weight: 700; font-size: .9375rem; line-height: 1.3; }

/* Offers carousel */
.offer-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-inline-start: auto; }
.offer-filter { min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 700; font-size: .875rem; cursor: pointer; transition: all .2s var(--ease); }
.offer-filter:hover { border-color: var(--brand-1); }
.offer-filter.is-active { background: var(--brand-1); border-color: var(--brand-1); color: #FFFFFF; box-shadow: 0 6px 16px var(--brand-shadow); }
.offer-viewall { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: 6px; color: var(--orange); font-weight: 700; text-decoration: none; }
[data-theme="dark"] .offer-viewall { color: #FDBA74; }
.offer-viewall:hover { color: var(--pink); }
.offer-rail { position: relative; margin-top: 18px; }
.offer-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 14px; scrollbar-width: none; }
.offer-track::-webkit-scrollbar { display: none; }
.offer-rail__nav { position: absolute; top: calc(50% - 7px); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--surface); color: var(--accent); box-shadow: var(--shadow-lg); display: none; align-items: center; justify-content: center; cursor: pointer; transition: transform .2s var(--spring); translate: 0 -50%; }
.offer-rail__nav:hover { transform: scale(1.1); }
.offer-rail__nav--prev { inset-inline-start: -14px; }
.offer-rail__nav--next { inset-inline-end: -14px; }
@media (min-width: 900px) { .offer-rail__nav { display: flex; } }

.obanner {
    position: relative; overflow: hidden; isolation: isolate; flex: 0 0 min(86%, 400px); min-height: 220px; scroll-snap-align: start;
    display: flex; padding: 26px; border-radius: 24px; text-decoration: none;
    background: linear-gradient(135deg, var(--from), var(--to));
    box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--to) 80%, transparent);
    animation: rise .5s var(--ease) both; animation-delay: calc(var(--i) * 60ms);
    transition: transform .35s var(--spring), box-shadow .35s;
}
.obanner:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -16px color-mix(in srgb, var(--to) 90%, transparent); }
.obanner--dark { color: #FFFFFF; }
.obanner--dark:hover { color: #FFFFFF; }
.obanner--light { color: #17142B; }
.obanner--light:hover { color: #17142B; }
.obanner__glow { position: absolute; z-index: -1; width: 260px; height: 260px; inset-inline-end: -80px; top: -90px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .45), transparent 70%); }
.obanner--dark::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px); background-size: 16px 16px; mask-image: linear-gradient(90deg, transparent 40%, #000); }
.obanner__art { position: absolute; z-index: -1; inset-inline-end: 0; bottom: 6px; opacity: .95; }
[dir="rtl"] .obanner__art svg { transform: scaleX(-1); }
.obanner__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 64%; }
.obanner__tag { padding: 3px 10px; border-radius: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .02em; background: rgba(255, 255, 255, .22); }
.obanner--light .obanner__tag { background: #17142B; color: #FFFFFF; }
.obanner__headline { font-size: 1.6rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.obanner__sub { font-size: .9375rem; opacity: .92; }
.obanner__code { margin-top: auto; padding: 6px 14px; border-radius: 999px; background: #FDE047; color: #17142B; font-size: .875rem; font-weight: 700; box-shadow: 0 6px 14px rgba(0, 0, 0, .15); }
.obanner__code b { font-weight: 700; letter-spacing: .06em; }
.obanner__tc { margin-top: auto; font-size: .6875rem; opacity: .75; }
.art-float { animation: float 6s ease-in-out infinite; transform-origin: center; }
.art-fly { animation: art-fly 4s ease-in-out infinite; }
.art-drive { animation: art-drive 3s ease-in-out infinite; }
.art-orbit { animation: spin 10s linear infinite; transform-origin: 92px 64px; }
@keyframes art-fly { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(8px, -10px) rotate(-3deg); } }
@keyframes art-drive { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-8px); } }

/* Service detail page */
.svc-hero { position: relative; overflow: hidden; isolation: isolate; padding: 30px 0 34px; color: #FFFFFF; background: linear-gradient(135deg, var(--from), var(--to)); }
.svc-hero::after { content: ""; position: absolute; z-index: -1; width: 380px; height: 380px; inset-inline-end: -100px; top: -160px; border-radius: 50%; background: rgba(255, 255, 255, .16); animation: float 12s ease-in-out infinite; }
.svc-hero__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.svc-hero__back { flex-basis: 100%; max-width: max-content; }
.svc-hero h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.svc-hero p { opacity: .92; font-size: 1.05rem; }
.hero--services { padding: 56px 0 60px; }
.lead-text { font-size: 1.1rem; color: var(--ink-2); }
.benefits { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.benefits li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.benefits .icon { color: var(--brand-1); }
.tool { margin-bottom: 18px; }
.tool__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 12px; }
.tool__form .btn { min-height: 48px; }
.tool__form--grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .tool__form--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tool__form--grid .btn { grid-column: 1 / -1; justify-self: start; } }
.tool__result { margin-top: 18px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); }
.tool__result-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.tracker { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.tracker__line { position: relative; height: 4px; border-radius: 4px; background: var(--line-2); }
.tracker__line span { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 4px; background: var(--grad-brand); transition: width 1s var(--ease); }
.tracker__line i { position: absolute; top: 50%; translate: -50% -50%; display: inline-flex; padding: 4px; border-radius: 50%; background: var(--surface); color: var(--brand-1); box-shadow: var(--shadow); transform: rotate(45deg); }

/* ---------- Centre button: app-grid icon that morphs into ✕ ---------- */
.fab-grid { position: relative; width: 26px; height: 26px; display: block; }
.fab-grid i {
    position: absolute; width: 11px; height: 11px; border-radius: 3.5px; background: #FFFFFF;
    transition: transform .45s var(--spring), opacity .25s, border-radius .3s, width .35s var(--ease), height .35s var(--ease), top .35s var(--ease), left .35s var(--ease);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.fab-grid i:nth-child(1) { top: 0; left: 0; }
.fab-grid i:nth-child(2) { top: 0; left: 15px; animation: tile-breathe 2.8s ease-in-out infinite .2s; }
.fab-grid i:nth-child(3) { top: 15px; left: 0; animation: tile-breathe 2.8s ease-in-out infinite .4s; }
.fab-grid i:nth-child(4) { top: 15px; left: 15px; animation: tile-breathe 2.8s ease-in-out infinite .6s; }
@keyframes tile-breathe { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(.72); } 90% { transform: scale(1.08); } }
.tabbar.is-open .fab-grid i { animation: none; }
.tabbar.is-open .fab-grid i:nth-child(1), .tabbar.is-open .fab-grid i:nth-child(4) { top: 11px; left: -1px; width: 28px; height: 4px; border-radius: 4px; }
.tabbar.is-open .fab-grid i:nth-child(1) { transform: rotate(45deg); }
.tabbar.is-open .fab-grid i:nth-child(4) { transform: rotate(-45deg); }
.tabbar.is-open .fab-grid i:nth-child(2), .tabbar.is-open .fab-grid i:nth-child(3) { opacity: 0; transform: scale(0) rotate(90deg); }
.tabbar.is-open .fab__icon { transform: none; }
.tab--spacer { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 9px; }
.tab--spacer .tab__label { font-size: .6875rem; font-weight: 700; color: var(--accent); }
.fab-fan { display: none; }

/* Services sheet */
.svc-sheet {
    position: absolute; inset-inline: 8px; bottom: calc(var(--tab-h) + var(--safe-bottom) + 14px); z-index: 1;
    max-height: min(70vh, 560px); overflow-y: auto; padding: 10px 14px 18px; border-radius: 28px;
    background: var(--surface); box-shadow: var(--shadow-lg); border: 1px solid var(--line);
    transform: translateY(24px) scale(.96); opacity: 0; visibility: hidden; transform-origin: 50% 100%;
    transition: transform .4s var(--spring), opacity .25s, visibility .4s;
}
.tabbar.is-open .svc-sheet { transform: none; opacity: 1; visibility: visible; }
.svc-sheet__grip { display: block; width: 44px; height: 5px; margin: 0 auto 10px; border-radius: 5px; background: var(--line-2); }
.svc-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.svc-sheet__head h2 { font-size: 1.1rem; }
.svc-sheet .svc { animation: none; opacity: 0; transform: translateY(16px) scale(.8); transition: transform .45s var(--spring), opacity .3s; transition-delay: calc(var(--i) * 28ms); }
.tabbar.is-open .svc-sheet .svc { opacity: 1; transform: none; }
@media (min-width: 640px) { .svc-sheet { inset-inline: 50%; width: 600px; margin-inline-start: -300px; } [dir="rtl"] .svc-sheet { margin-inline-start: -300px; } }

/* Home polish */
.route-card { border-radius: 18px; }
.package-card { border-radius: 22px; }
.feature { border-radius: 22px; }
.member-banner { border-radius: 26px; padding: 22px 24px; }
.app-banner { border-radius: 30px; }

/* ---------- Print: ticket only ---------- */
@media print {
    .topbar, .bottomnav, .footer, .actions-row, .app-toast, .confetti { display: none !important; }
    body { background: #FFFFFF; color: #000000; }
    .panel { border-color: #9CA3AF; box-shadow: none; }
    .app__main > * { animation: none; }
}

/* ==========================================================================
   v2.3 — full-width pages, centred steps, unclipped dropdowns, new hero colour,
   one-line headline, three whole offer cards per page
   ========================================================================== */

/* Steps: centred above the page */
.steps { width: max-content; max-width: 100%; margin: 0 auto 22px; justify-content: safe center; scrollbar-width: none; }
.steps::-webkit-scrollbar { display: none; }

/* Home hero: decorations clipped in their own layer, so dropdowns aren't cut off */
.hero--home { overflow: visible; z-index: 3; }
.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; isolation: isolate; pointer-events: none; }
.hero--home .search-card { z-index: 4; }

/* New default hero colour: deep ocean night → blue → teal (was violet/magenta) */
.hero--flights { --h1: #0B1A3D; --h2: #1E40AF; --h3: #0EA5E9; --h4: #14B8A6; }

/* Smaller headline on one line (wraps only on narrow phones) */
.hero__title { font-size: clamp(1.4rem, 3.2vw, 2.25rem); max-width: none; margin-bottom: 18px; letter-spacing: -.02em; }
@media (min-width: 700px) { .hero--home .hero__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }

/* Location dropdown: no inner scrollbar */
.pop--place { scrollbar-width: none; }
.pop--place::-webkit-scrollbar { display: none; }
.pop--place .place-item { min-height: 50px; padding-block: 7px; }
@media (min-width: 900px) {
    .pop--place { max-height: none; overflow: visible; z-index: 60; }
}

/* Offer slider: exactly three whole cards per page on desktop, two on tablet */
.offer-track { gap: 18px; padding-inline: 0; scroll-padding-inline: 0; }
.obanner { flex-basis: min(86%, 400px); min-width: 0; }
@media (min-width: 700px) { .obanner { flex-basis: calc((100% - 18px) / 2); } }
@media (min-width: 1100px) { .obanner { flex-basis: calc((100% - 36px) / 3); } }
.obanner__body { max-width: 66%; }
.obanner__headline { font-size: clamp(1.25rem, 1.9vw, 1.6rem); }
.obanner__art svg { max-width: 150px; height: auto; }
.offer-rail__nav--prev { inset-inline-start: -16px; }
.offer-rail__nav--next { inset-inline-end: -16px; }

/* ==========================================================================
   v2.4 — location gate, device/login activity, wallet + rewards, transactions,
   payment details entry with validation
   ========================================================================== */

.pay-method--teal { --c: var(--teal); }
.pay-method--violet { --c: var(--violet); }
.pay-method:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.stat--violet { --c: var(--violet); }
.stat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 700px) { .stat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat-grid--3 .stat strong { font-size: clamp(1.05rem, 3.4vw, 1.6rem); }
.spinner--dark { border-color: var(--line-2); border-top-color: var(--accent); }
.icon-btn--xs { width: 28px; height: 28px; min-width: 28px; }

/* Location banner under the header */
.loc-banner { background: linear-gradient(90deg, #B45309, #DC2626); color: #FFFFFF; animation: rise .35s var(--ease); }
.loc-banner__inner { display: flex; align-items: center; gap: 12px; padding-block: 10px; }
.loc-banner__icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .2); animation: pulse-ring 1.8s ease-out infinite; }
.loc-banner__text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .8125rem; line-height: 1.35; }
.loc-banner__text strong { font-size: .9375rem; }
.loc-banner .btn-light { white-space: nowrap; }
.loc-banner__close { color: #FFFFFF; }
@media (max-width: 599px) { .loc-banner__text span { display: none; } }

/* Location requirement inside the login/register popup */
.loc-required { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: start; padding: 14px; margin-bottom: 14px; border-radius: var(--radius); background: color-mix(in srgb, var(--warning) 12%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--warning) 45%, transparent); animation: rise .3s var(--ease); }
.loc-required.is-error { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border-color: var(--danger); animation: shake .45s var(--ease); }
.loc-required__icon { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--warning); color: #FFFFFF; }
.loc-required.is-error .loc-required__icon { background: var(--danger); }
.loc-required__text strong { display: block; color: var(--ink); }
.loc-required__text p { margin: 2px 0 0; font-size: .8125rem; color: var(--ink-2); }
.loc-required__steps { margin: 8px 0 0; padding-inline-start: 18px; font-size: .8125rem; color: var(--ink-2); }
.loc-required > .btn { grid-column: 1 / -1; justify-self: start; }
.loc-ok { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
.auth__privacy { display: flex; gap: 6px; align-items: flex-start; margin: 14px 0 0; font-size: .75rem; color: var(--muted); }
.auth__privacy .icon { flex: 0 0 auto; margin-top: 2px; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* Field-level validation */
.field-error { display: inline-flex; align-items: center; gap: 4px; color: var(--danger); font-size: .75rem; font-weight: 700; animation: rise .2s var(--ease); }
.input-field.has-error input, .input-field.has-error select, .input-field.has-error .input-prefix { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
.input-adorn { position: relative; display: block; }
.input-adorn input { width: 100%; padding-inline-end: 96px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.brand-badge { position: absolute; inset-inline-end: 8px; top: 50%; translate: 0 -50%; padding: 3px 8px; border-radius: 6px; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; color: #FFFFFF; background: #475569; animation: pop .25s var(--spring); }
.brand-badge--visa { background: #1A1F71; }
.brand-badge--mastercard { background: linear-gradient(90deg, #EB001B, #F79E1B); }
.brand-badge--rupay { background: linear-gradient(90deg, #097A44, #F47920); }
.brand-badge--amex { background: #2E77BB; }
.brand-badge--diners { background: #0079BE; }
.brand-badge--maestro { background: linear-gradient(90deg, #0099DF, #EB001B); }

.pay-details { margin-bottom: 8px; }
.upi-handles { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.upi-handles .chip { font-family: ui-monospace, Consolas, monospace; font-size: .75rem; }

/* Card entry with live 3D card */
.card-entry { display: grid; gap: 18px; align-items: center; }
@media (min-width: 760px) { .card-entry { grid-template-columns: 300px minmax(0, 1fr); } }
.form-grid--card { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid--card > .input-field--wide { grid-column: 1 / -1; }
.card3d { width: 100%; max-width: 320px; aspect-ratio: 1.586; perspective: 1000px; margin-inline: auto; }
.card3d__inner { position: relative; width: 100%; height: 100%; transition: transform .7s var(--spring); transform-style: preserve-3d; }
.card3d.is-flipped .card3d__inner { transform: rotateY(180deg); }
.card3d__face { position: absolute; inset: 0; border-radius: 18px; padding: 18px 20px; color: #FFFFFF; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
    background: linear-gradient(135deg, var(--c1, #312E81), var(--c2, #7C3AED)); box-shadow: 0 20px 40px -18px color-mix(in srgb, var(--c2, #7C3AED) 80%, transparent); display: flex; flex-direction: column; justify-content: space-between; transition: background .5s; }
.card3d__back { transform: rotateY(180deg); padding: 22px 0; justify-content: flex-start; gap: 18px; }
.card3d--visa { --c1: #1A1F71; --c2: #2563EB; }
.card3d--mastercard { --c1: #1F2937; --c2: #EA580C; }
.card3d--rupay { --c1: #065F46; --c2: #F97316; }
.card3d--amex { --c1: #0F4C81; --c2: #38BDF8; }
.card3d--diners { --c1: #0F172A; --c2: #0EA5E9; }
.card3d--maestro { --c1: #1E3A8A; --c2: #DC2626; }
.card3d__shine { position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .22) 50%, transparent 60%); animation: card-shine 5s ease-in-out infinite; pointer-events: none; }
@keyframes card-shine { 0%, 60% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
.card3d__top { display: flex; justify-content: space-between; align-items: center; }
.card3d__chip { width: 40px; height: 30px; border-radius: 6px; background: linear-gradient(135deg, #FDE68A, #D97706); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.card3d__brand { font-weight: 700; font-style: italic; letter-spacing: .04em; font-size: 1.05rem; }
.card3d__number { font-family: ui-monospace, Consolas, monospace; font-size: clamp(1rem, 4.4vw, 1.25rem); letter-spacing: .12em; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); white-space: nowrap; }
.card3d__bottom { display: flex; justify-content: space-between; gap: 10px; }
.card3d__bottom span { display: flex; flex-direction: column; min-width: 0; }
.card3d__bottom small { font-size: .5625rem; opacity: .75; letter-spacing: .1em; }
.card3d__bottom b { font-size: .8125rem; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card3d__strip { height: 42px; background: #0B0B12; }
.card3d__sign { margin: 0 20px; display: flex; align-items: center; gap: 10px; }
.card3d__sign span { flex: 1; height: 34px; border-radius: 4px; background: repeating-linear-gradient(45deg, #F8FAFC, #F8FAFC 6px, #E2E8F0 6px, #E2E8F0 12px); }
.card3d__sign b { padding: 6px 10px; border-radius: 4px; background: #FFFFFF; color: #0B0B12; font-family: ui-monospace, Consolas, monospace; letter-spacing: .2em; }
.card3d__brand--back { align-self: flex-end; margin: auto 20px 0; }
@media (prefers-reduced-motion: reduce) { .card3d__inner { transition: none; } .card3d__shine { animation: none; } }
[data-motion="reduce"] .card3d__inner { transition: none; }
[data-motion="reduce"] .card3d__shine { animation: none; }

/* Net banking / wallet tiles */
.bank-grid { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; }
@media (min-width: 700px) { .bank-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bank-tile { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 52px; border-radius: var(--radius-sm); border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 700; font-size: .8125rem; text-align: start; cursor: pointer; transition: border-color .2s, background-color .2s, transform .2s var(--spring); }
.bank-tile:hover { transform: translateY(-2px); }
.bank-tile.is-active { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 7%, var(--surface)); }
.bank-tile__logo { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: .6875rem; font-weight: 700; color: #FFFFFF; background: var(--grad-brand); }

/* Pay from own wallet */
.wallet-pay { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--radius); background: color-mix(in srgb, var(--teal) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--teal) 30%, transparent); }
.wallet-pay > div { display: flex; justify-content: space-between; gap: 10px; }
.wallet-pay__after { padding-top: 6px; border-top: 1px dashed var(--line-2); }
.wallet-pay.is-short { background: color-mix(in srgb, var(--danger) 7%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.wallet-pay + .form-error { flex-wrap: wrap; align-items: center; }

/* Reward points at checkout */
.rewards-use { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, color-mix(in srgb, #F59E0B 14%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, #F59E0B 40%, transparent); }
.rewards-use__icon { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; background: linear-gradient(135deg, #F59E0B, #EA580C); }
.rewards-use__text { flex: 1; display: flex; flex-direction: column; }
.rewards-use__text small { color: var(--muted); }
.earn-note { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; font-size: .8125rem; font-weight: 700; color: #B45309; background: #FEF3C7; }
[data-theme="dark"] .earn-note { color: #FCD34D; background: rgba(245, 158, 11, .14); }

/* Wallet page */
.wallet-cards { display: grid; gap: 14px; margin-bottom: 18px; }
@media (min-width: 700px) { .wallet-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wcard { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px; border-radius: 24px; color: #FFFFFF; animation: rise .45s var(--ease) both; }
.wcard--cash { background: linear-gradient(135deg, #0B1A3D, #1E40AF 55%, #0EA5E9); }
.wcard--rewards { background: linear-gradient(135deg, #7C2D12, #EA580C 55%, #F59E0B); animation-delay: 80ms; }
.wcard__glow { position: absolute; z-index: -1; width: 240px; height: 240px; inset-inline-end: -70px; top: -90px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .35), transparent 70%); animation: float 10s ease-in-out infinite; }
.wcard__label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; opacity: .9; }
.wcard__value { font-size: clamp(2rem, 6vw, 2.6rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.wcard__value small { font-size: 1rem; opacity: .8; }
.wcard > small { opacity: .85; }
.wcard .btn { margin-top: 8px; }
.add-money .panel__head { display: flex; justify-content: space-between; align-items: center; }
.input-prefix--amount input { font-size: 1.4rem; font-weight: 700; }
.amount-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.how-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.how-list li { display: flex; align-items: center; gap: 12px; }
.how-list__n { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8125rem; color: #FFFFFF; background: var(--grad-brand); }

/* Transactions */
.txn-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.search-input--sm { min-height: 42px; flex: 1 1 240px; max-width: 360px; border-radius: 999px; }
.txn-month { font-size: .8125rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin: 18px 4px 8px; }
:lang(hi) .txn-month, :lang(ar) .txn-month { text-transform: none; letter-spacing: 0; }
.txn-list { display: flex; flex-direction: column; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.panel .txn-list { border: 0; border-radius: 0; background: transparent; }
.txn { --c: var(--violet); display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--ink); text-decoration: none; transition: background-color .15s; animation: rise .35s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.txn + .txn { border-top: 1px solid var(--line); }
.txn:hover { background: var(--surface-2); color: var(--ink); }
.txn--green { --c: var(--green); }
.txn--blue { --c: var(--blue); }
.txn--orange { --c: #EA580C; }
.txn__icon { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.txn__icon--lg { width: 64px; height: 64px; border-radius: 20px; }
.txn__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.txn__text strong { font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.txn__text small { color: var(--muted); font-size: .75rem; }
.txn__amount { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: end; }
.txn__amount b { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.txn.is-credit .txn__amount b { color: var(--success); }
.txn-status { padding: 1px 8px; border-radius: 999px; font-size: .6875rem; font-weight: 700; }
.txn-status--pending { color: #B45309; background: #FEF3C7; }
.txn-status--failed { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.txn-status--success { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
.txn-status--lg { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; font-size: .8125rem; }
.txn-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding-block: 26px; }
.txn-hero__title { margin: 4px 0 0; font-weight: 700; color: var(--ink-2); }
.txn-hero__amount { font-size: clamp(2rem, 7vw, 2.8rem); font-weight: 700; letter-spacing: -.02em; }
.txn-hero__amount.is-credit { color: var(--success); }
.detail-list { margin: 0; display: grid; }
.detail-list > div { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.detail-list > div:last-child { border-bottom: 0; }
.detail-list dt { color: var(--muted); font-weight: 600; font-size: .875rem; }
.detail-list dd { margin: 0; font-weight: 700; text-align: end; display: inline-flex; align-items: center; gap: 4px; word-break: break-word; }
.detail-list--compact > div { padding: 8px 0; }
.inline-banner--soft { margin-bottom: 12px; }

/* Login activity */
.sec-grid { display: grid; gap: 14px; margin-bottom: 18px; }
@media (min-width: 900px) { .sec-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
.sec-card .panel__head { display: flex; justify-content: space-between; align-items: center; }
.sec-card .panel__head h2 { display: inline-flex; align-items: center; gap: 8px; }
.sec-card__big { font-size: 1.6rem; font-weight: 700; margin: 4px 0; font-variant-numeric: tabular-nums; }
.login-list { list-style: none; padding: 0; margin: 0; }
.login-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); animation: rise .35s var(--ease) both; animation-delay: calc(var(--i) * 40ms); }
.login-row:last-child { border-bottom: 0; }
.login-row__icon { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); }
.login-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.login-row__text small { color: var(--muted); font-size: .75rem; display: inline-flex; align-items: center; gap: 4px; }

/* ==========================================================================
   v2.5 — compact type & fields, payment accordion
   ========================================================================== */

/* Base size 15px (Settings → Text size still scales it) */
html { font-size: 93.75%; }
html[data-text="large"] { font-size: 106.25%; }
html[data-text="extralarge"] { font-size: 118.75%; }
body { line-height: 1.5; }

/* Lighter weights: 800 → 700 for headings/values, 700 → 600 for labels */
h1, h2, h3, h4, h5, h6 { font-weight: 700; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.05rem; } h3 { font-size: .95rem; }
b, strong { font-weight: 600; }
.page-title { font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 700; }
.panel__head h2 { font-size: 1rem; font-weight: 700; }
.section__title, .section__intro h2, .section__head h2 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 700; }
.hero__title { font-weight: 700; font-size: clamp(1.3rem, 2.8vw, 2rem); }
.hero__eyebrow, .trust-row { font-weight: 600; }
.brand { font-weight: 700; font-size: 1.2rem; }
.topnav__link { font-weight: 600; }
.product-tab { font-weight: 600; }
.btn { --bs-btn-font-weight: 600; --bs-btn-font-size: .9rem; min-height: 42px; }
.btn-sm { --bs-btn-font-size: .8125rem; min-height: 34px; --bs-btn-padding-x: 14px; }
.btn-lg { --bs-btn-font-size: .975rem; min-height: 48px; }
.btn-search { min-height: 48px; font-size: .975rem; }
.chip, .pill, .pill-tab, .segmented__item, .offer-filter { font-weight: 600; }
.segmented__item { min-height: 34px; font-size: .8125rem; }
.offer-filter { min-height: 34px; }

/* Search fields: 76px → 62px */
.field { min-height: 62px; padding: 8px 14px; }
.field__button { min-height: 62px; padding: 8px 14px; }
.field__label { font-weight: 700; font-size: .625rem; }
.field__value { font-size: 1.05rem; font-weight: 700; }
.field__sub { font-size: .75rem; }
.field__input { font-size: 1rem; font-weight: 700; min-height: 26px; }
.field__link { font-size: .95rem; font-weight: 700; }

/* Form inputs: 48px → 40px */
.input-field { gap: 4px; font-size: .75rem; font-weight: 600; }
.input-field input, .input-field select, .input-prefix { min-height: 40px; padding: 0 12px; font-size: .925rem; border-width: 1px; }
.input-prefix { padding: 0 0 0 12px; }
.input-prefix input { min-height: 38px; }
.input-prefix--amount input { font-size: 1.15rem; font-weight: 700; }
.search-input { min-height: 42px; }
.place-item { min-height: 46px; padding-block: 6px; }
.place-item__icon { width: 32px; height: 32px; border-radius: 10px; }
.stepper__controls output { font-weight: 700; font-size: 1rem; }

/* Other heavy numbers */
.stat strong { font-weight: 700; font-size: 1.5rem; }
.fare-summary__total dd, .fare-summary__total dt { font-weight: 700; }
.obanner__headline { font-weight: 700; }
.wcard__value { font-weight: 700; font-size: clamp(1.7rem, 5vw, 2.1rem); }
.txn-hero__amount { font-weight: 700; font-size: clamp(1.7rem, 6vw, 2.3rem); }
.txn__amount b { font-weight: 700; }
.sec-card__big { font-weight: 700; font-size: 1.3rem; }

/* ---------- Payment accordion ---------- */
.pay-acc { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; background: var(--surface); margin-bottom: 14px; }
.pay-acc__item { border-top: 1px solid var(--line); transition: background-color .25s; }
.pay-acc__item:first-child { border-top: 0; }
.pay-acc__item.is-open { background: color-mix(in srgb, var(--c) 4%, var(--surface)); box-shadow: inset 3px 0 0 var(--c); }
[dir="rtl"] .pay-acc__item.is-open { box-shadow: inset -3px 0 0 var(--c); }
.pay-acc__head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 56px; border: 0; background: transparent; color: var(--ink); text-align: start; cursor: pointer; }
.pay-acc__head:hover:not(:disabled) { background: var(--surface-2); }
.pay-acc__head:disabled { opacity: .55; cursor: not-allowed; }
.pay-acc__head:focus-visible { outline: none; box-shadow: inset var(--ring); }
.pay-acc__head .radio-dot { width: 18px; height: 18px; flex-basis: 18px; }
.pay-acc__item.is-open .radio-dot { border: 6px solid var(--c); }
.pay-acc__head .pay-method__icon { width: 34px; height: 34px; border-radius: 10px; }
.pay-acc__item.is-open .pay-method__icon { background: var(--c); color: #FFFFFF; }
.pay-acc__title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.pay-acc__title strong { font-size: .925rem; font-weight: 600; }
.pay-acc__title small { color: var(--muted); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-acc__chev { color: var(--muted); transition: transform .3s var(--spring); }
.pay-acc__item.is-open .pay-acc__chev { transform: rotate(180deg); color: var(--c); }
.pay-acc__body { padding: 4px 14px 16px; padding-inline-start: 44px; animation: acc-open .32s var(--ease); transform-origin: top; }
@media (max-width: 599px) { .pay-acc__body { padding-inline-start: 14px; } }
@keyframes acc-open { from { opacity: 0; transform: translateY(-6px) scaleY(.96); } to { opacity: 1; transform: none; } }
.pay-acc .pay-details { margin: 0; }
.pay-acc .card-entry { gap: 14px; }
@media (min-width: 760px) { .pay-acc .card-entry { grid-template-columns: 240px minmax(0, 1fr); } }
.pay-acc .card3d { max-width: 260px; }
.pay-acc .card3d__face { padding: 14px 16px; border-radius: 14px; }
.pay-acc .card3d__number { font-size: clamp(.9rem, 3.6vw, 1.05rem); }
.pay-acc .card3d__chip { width: 34px; height: 25px; }
.pay-acc .bank-tile { min-height: 44px; padding: 8px 10px; font-weight: 600; font-size: .78rem; }
.pay-acc .bank-tile__logo { width: 28px; height: 28px; flex-basis: 28px; border-radius: 8px; }
.pay-acc .wallet-pay { padding: 12px 14px; font-size: .875rem; }
.pay-acc .form-grid--card { gap: 10px; }

/* ==========================================================================
   v2.6 — title radios, aligned page titles, GST company, lighter numbers
   ========================================================================== */

/* Back button + page title on one centred line */
.page-title-row { align-items: center; gap: 10px; margin-bottom: 12px; }
.page-title-row .icon-btn { width: 38px; height: 38px; flex-basis: 38px; }
.page-title-row .page-title { line-height: 1.2; margin: 0; }

/* Title as radio pills (Mr / Ms / Mrs, Mstr / Miss) */
.input-field--title { grid-column: 1 / -1; }
.title-radios { display: inline-flex; flex-wrap: wrap; gap: 6px; min-height: 40px; align-items: center; }
.title-radio { position: relative; display: inline-flex; cursor: pointer; }
.title-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.title-radio span { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font-size: .875rem; font-weight: 500; transition: border-color .2s, background-color .2s, color .2s; }
.title-radio span::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--surface); transition: border-width .2s var(--spring), border-color .2s; }
.title-radio:hover span { border-color: var(--accent); }
.title-radio input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.title-radio input:checked + span::before { border: 4.5px solid var(--accent); }
.title-radio input:focus-visible + span { box-shadow: var(--ring); }
@media (min-width: 700px) {
    .form-grid { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) 100px; align-items: start; }
    .input-field--title { grid-column: auto; }
}

/* GST: GSTIN + company name side by side */
.gst__grid { margin-top: 10px; }
.gst .gst__grid .input-field { margin-top: 0; max-width: none; }
.gst summary { font-weight: 600; }

/* Numbers, times and dates: lighter */
.fcard__time { font-weight: 600; font-size: 1.4rem; }
.fcard__date { font-weight: 500; font-size: .8125rem; }
.fcard__price strong { font-weight: 600; font-size: 1.4rem; }
.fcard__dur strong { font-weight: 500; font-size: .8125rem; }
.fcard__dur small { font-weight: 500; }
.fcard__airline-text strong { font-weight: 600; }
.fcard__cta .btn { letter-spacing: .02em; }
.timeline__point strong, .segment__times, .fare-family__price, .hotel-card__price strong, .big-price,
.seat-footer__price, .trip-card__price, .flight-card__price strong, .price strong { font-weight: 600; }
.fare-summary dd { font-weight: 500; }
.fare-summary__total dd { font-weight: 600 !important; }
.stat strong, .wcard__value, .txn-hero__amount, .sec-card__big, .obanner__code b { font-weight: 600; }
.txn__amount b { font-weight: 600; }
.field__value { font-weight: 600; }
.code-chip, .mono { font-weight: 500; }
time, .date, .route-card small, .txn__text small, .login-row__text small { font-weight: 400; }
.fcard__time, .fcard__price strong, .timeline__point strong, .stat strong, .txn__amount b { font-variant-numeric: tabular-nums; }
@media (min-width: 700px) {
    .form-grid.form-grid--2, .form-grid.form-grid--card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   v2.7 — smooth scroll, no-scroll filters, offers slider in login popup,
   fixed-height auth popup, zoom + 360° hover animations
   ========================================================================== */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html[data-motion="reduce"] { scroll-behavior: auto; }

/* Flight filters: no inner scrollbar — the panel grows with its content */
@media (min-width: 900px) {
    .results-layout__filters { position: static; max-height: none; overflow: visible; }
}
.results-layout__filters { scrollbar-width: none; }
.results-layout__filters::-webkit-scrollbar { display: none; }

/* ---------- Login / register popup: fixed height, everything fits ---------- */
.auth { overflow: hidden; }
@media (min-width: 700px) {
    .auth { width: 880px; height: min(620px, calc(100dvh - 32px)); grid-template-columns: 340px minmax(0, 1fr); }
}
.auth__body { gap: 10px; overflow-y: auto; scrollbar-width: none; justify-content: center; padding: 22px 20px calc(18px + var(--safe-bottom)); }
.auth__body::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .auth__body { padding: 22px 34px; } }
.auth__title { font-size: 1.3rem; text-align: center; margin-top: -2px; }
.auth__reason { padding: 8px 10px; font-size: .8125rem; }
.auth__form { gap: 9px; }
.auth__form .btn-lg { min-height: 44px; margin-top: 2px; }
.auth__row { margin-top: -4px; }
.auth__switch { margin: 0; font-size: .8125rem; }
.auth__privacy { margin: 0; font-size: .6875rem; line-height: 1.4; }
.auth .check { font-size: .8125rem; }
.auth .pw-meter, .auth .password-strength { margin-top: 2px; }
.auth .segmented { margin-bottom: 0; }
.auth .loc-required { padding: 10px 12px; gap: 6px 10px; margin-bottom: 0; }
.auth .loc-required__icon { width: 32px; height: 32px; border-radius: 10px; }
.auth .loc-required__text p, .auth .loc-required__steps { font-size: .75rem; }
.auth .loc-ok { margin: 0 auto; }
@media (max-height: 700px) and (min-width: 700px) {
    .auth__privacy { display: none; }
    .auth__avatar { width: 50px; height: 50px; }
}

/* User icon in place of the tabs */
.auth__avatar { position: relative; width: 60px; height: 60px; flex: 0 0 auto; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #FFFFFF; background: var(--grad-brand); box-shadow: 0 10px 24px var(--brand-shadow); animation: pop .45s var(--spring); }
.auth__avatar.is-register { background: linear-gradient(135deg, #059669, #0EA5E9); box-shadow: 0 10px 24px rgba(14, 165, 233, .35); }
.auth__avatar-ring { position: absolute; inset: -5px; border-radius: 50%; background: conic-gradient(from 0deg, var(--brand-1), transparent 35%, var(--brand-2) 60%, transparent 85%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); animation: spin 4s linear infinite; }
.auth__avatar .icon { position: relative; }

/* Offers slider (left side of the popup, tablet and up) */
.auth-promo { display: none; position: relative; overflow: hidden; isolation: isolate; height: 100%; }
@media (min-width: 700px) { .auth-promo { display: block; } }
.auth-promo__track { display: flex; height: 100%; transform: translateX(calc(var(--n) * -100%)); transition: transform .7s var(--spring); }
[dir="rtl"] .auth-promo__track { transform: translateX(calc(var(--n) * 100%)); }
.auth-promo__slide { position: relative; overflow: hidden; isolation: isolate; flex: 0 0 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 8px; padding: 30px 28px 64px; color: #FFFFFF; text-decoration: none; background: linear-gradient(160deg, var(--from), var(--to)); }
.auth-promo__slide:hover { color: #FFFFFF; }
.auth-promo__slide.is-light { color: #17142B; }
.auth-promo__slide.is-light:hover { color: #17142B; }
.auth-promo__glow { position: absolute; z-index: -1; width: 320px; height: 320px; top: -110px; inset-inline-end: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .4), transparent 70%); animation: float 10s ease-in-out infinite; }
.auth-promo__slide::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px); background-size: 16px 16px; mask-image: linear-gradient(180deg, #000, transparent 70%); }
.auth-promo__art { position: absolute; z-index: -1; top: 34px; inset-inline-start: 50%; translate: -50% 0; transform: scale(1.35); transform-origin: top center; opacity: .95; }
[dir="rtl"] .auth-promo__art { translate: 50% 0; }
.auth-promo__tag { padding: 3px 10px; border-radius: 6px; font-size: .6875rem; font-weight: 700; background: rgba(255, 255, 255, .22); }
.auth-promo__slide.is-light .auth-promo__tag { background: #17142B; color: #FFFFFF; }
.auth-promo__headline { font-size: 1.45rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.auth-promo__sub { font-size: .875rem; opacity: .9; }
.auth-promo__tc { font-size: .6875rem; opacity: .75; }
.auth-promo__slide .obanner__code { margin-top: 4px; }
.auth-promo__dots { position: absolute; bottom: 24px; inset-inline-start: 28px; display: flex; gap: 6px; }
.auth-promo__dot { position: relative; overflow: hidden; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .45); cursor: pointer; transition: width .35s var(--spring), background-color .2s; }
.auth-promo__dot.is-active { width: 30px; background: rgba(255, 255, 255, .45); }
.auth-promo__dot i { position: absolute; inset: 0; background: #FFFFFF; transform-origin: left; animation: dot-fill linear forwards; }
[dir="rtl"] .auth-promo__dot i { transform-origin: right; }
@keyframes dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Hover: zoom in/out + 360° spin ---------- */
@keyframes spin-zoom {
    0% { transform: scale(1) rotate(0); }
    45% { transform: scale(1.18) rotate(200deg); }
    75% { transform: scale(.94) rotate(330deg); }
    100% { transform: scale(1.08) rotate(360deg); }
}
@keyframes spin-zoom-lift {
    0% { transform: translateY(0) scale(1) rotate(0); }
    45% { transform: translateY(-8px) scale(1.16) rotate(200deg); }
    75% { transform: translateY(-6px) scale(.96) rotate(330deg); }
    100% { transform: translateY(-6px) scale(1.06) rotate(360deg); }
}
@keyframes zoom-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 70% { transform: scale(.96); } 100% { transform: scale(1.04); } }

.svc:hover .svc__icon, .svc:focus-visible .svc__icon { animation: spin-zoom-lift .75s var(--ease) forwards; transform: translateY(-6px) scale(1.06); }
.domore__item:hover .domore__icon, .domore__item:focus-visible .domore__icon,
.product-tab:hover .product-tab__icon, .tile:hover .tile__icon, .route-card:hover .route-card__icon,
.feature:hover .feature__icon, .topnav__link:hover .icon, .pay-acc__head:hover .pay-method__icon,
.footer__brand:hover .brand__mark, .brand:hover .brand__mark {
    animation: spin-zoom .7s var(--ease) forwards;
}
.btn-gradient:hover:not(:disabled), .offer-viewall:hover, .link-btn:hover { animation: zoom-pulse .45s var(--ease) forwards; }
.footer a { display: inline-block; align-self: flex-start; transform-origin: 0 50%; transition: transform .25s var(--spring), color .2s; }
[dir="rtl"] .footer a { transform-origin: 100% 50%; }
.footer a:hover { transform: scale(1.06); }
.obanner:hover .obanner__art svg, .auth-promo__slide:hover .auth-promo__art svg { animation: zoom-pulse .6s var(--ease) forwards; }
.icon-btn:hover .icon { animation: spin-zoom .6s var(--ease); }

html[data-motion="reduce"] .svc__icon, html[data-motion="reduce"] .domore__icon, html[data-motion="reduce"] .product-tab__icon,
html[data-motion="reduce"] .tile__icon, html[data-motion="reduce"] .route-card__icon, html[data-motion="reduce"] .feature__icon,
html[data-motion="reduce"] .btn, html[data-motion="reduce"] .icon, html[data-motion="reduce"] .auth-promo__track { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
    .svc__icon, .domore__icon, .product-tab__icon, .tile__icon, .route-card__icon, .feature__icon, .btn, .icon { animation: none !important; }
}
/* v2.7 fit tweaks */
.auth__body { justify-content: safe center; padding-block: 18px; }
.auth__avatar { width: 52px; height: 52px; }
.auth__avatar .icon { width: 24px; height: 24px; }
.auth__pair { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .auth__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.auth__form { gap: 8px; }
.auth .input-field { gap: 3px; }
@media (min-width: 700px) {
    .auth .loc-required { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
    .auth .loc-required > .btn { grid-column: auto; }
    .auth .loc-required__steps { grid-column: 2; }
}
.auth .check { margin: 0; min-height: 0; }
.auth__form .btn-lg { margin-top: 4px; }
@media (min-width: 700px) { .auth { height: min(640px, calc(100dvh - 32px)); } }

/* ==========================================================================
   v2.8 — calmer hovers (no spin), compact travellers popover, title row,
   inline checkout errors, infant date of birth
   ========================================================================== */

/* Hover: no rotation — a smooth lift + zoom instead */
.svc:hover .svc__icon, .svc:focus-visible .svc__icon,
.domore__item:hover .domore__icon, .domore__item:focus-visible .domore__icon,
.product-tab:hover .product-tab__icon, .tile:hover .tile__icon, .route-card:hover .route-card__icon,
.feature:hover .feature__icon, .topnav__link:hover .icon, .pay-acc__head:hover .pay-method__icon,
.footer__brand:hover .brand__mark, .brand:hover .brand__mark, .icon-btn:hover .icon,
.btn-gradient:hover:not(:disabled), .offer-viewall:hover, .link-btn:hover,
.obanner:hover .obanner__art svg, .auth-promo__slide:hover .auth-promo__art svg { animation: none; }
.svc__icon, .domore__icon, .product-tab__icon, .tile__icon, .route-card__icon, .feature__icon, .topnav__link .icon, .pay-method__icon, .brand__mark {
    transition: transform .35s cubic-bezier(.34, 1.4, .64, 1), box-shadow .35s ease, background-color .2s, color .2s; will-change: transform;
}
.svc:hover .svc__icon, .svc:focus-visible .svc__icon { transform: translateY(-6px) scale(1.07); }
.domore__item:hover .domore__icon, .domore__item:focus-visible .domore__icon { transform: translateY(-4px) scale(1.08); }
.product-tab:hover .product-tab__icon, .tile:hover .tile__icon, .route-card:hover .route-card__icon,
.feature:hover .feature__icon, .pay-acc__head:hover .pay-method__icon, .brand:hover .brand__mark { transform: scale(1.1); }
.topnav__link:hover .icon { transform: scale(1.15); }
.btn-gradient { transition: transform .25s cubic-bezier(.34, 1.4, .64, 1), box-shadow .25s, filter .2s; }
.btn-gradient:hover:not(:disabled) { transform: translateY(-1px) scale(1.02); filter: brightness(1.05); }
.obanner__art svg, .auth-promo__art svg { transition: transform .5s cubic-bezier(.34, 1.4, .64, 1); }
.obanner:hover .obanner__art svg, .auth-promo__slide:hover .auth-promo__art svg { transform: scale(1.06); }
.offer-viewall, .link-btn { transition: transform .2s ease, color .2s; }
.offer-viewall:hover { transform: translateX(2px); }

/* Travellers & class popover: readable titles, smaller rows */
.pop { color: var(--ink); }
.pop--pax { gap: 0; }
@media (min-width: 900px) { .pop--pax { width: 340px; padding: 14px 16px 16px; } }
.stepper { padding: 8px 0; gap: 10px; }
.stepper__label { gap: 0; line-height: 1.25; }
.stepper__label > span { font-weight: 700; font-size: .9375rem; color: var(--ink); }
.stepper__label small { font-size: .75rem; }
.stepper__controls { gap: 10px; }
.stepper__controls .icon-btn { width: 32px; height: 32px; flex-basis: 32px; font-size: 1.05rem; font-weight: 600; }
.stepper__controls output { min-width: 18px; font-weight: 700; font-size: .975rem; color: var(--ink); }
.pop--pax .pop__heading { margin: 12px 0 6px; }
.pop--pax .chip { min-height: 32px; padding: 0 12px; font-size: .8125rem; font-weight: 600; }
.pop--pax .chip-row, .pop--pax .cabin-chips { gap: 6px; }
.pop--pax > .btn { min-height: 40px; margin-top: 12px; }

/* Checkout traveller card: title on its own row, then names (+ age / DOB) */
.traveller { padding: 12px 14px 14px; }
.traveller .form-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.traveller .input-field--title { grid-column: 1 / -1; }
@media (min-width: 700px) {
    .traveller .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 170px; }
    .traveller .form-grid > .input-field { grid-column: auto; }
    .traveller .form-grid > .input-field--title { grid-column: 1 / -1; }
}
.title-radios { min-height: 0; }
.title-radio span { min-height: 32px; font-size: .8125rem; }
.input-field--dob input[type="date"] { font-variant-numeric: tabular-nums; }
.input-field--dob input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }
[data-theme="dark"] .input-field--dob input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
.input-field .field-error { margin-top: 1px; }

/* ==========================================================================
   v2.9 — wider offers panel in auth popup, field errors there, slimmer user menu
   ========================================================================== */
@media (min-width: 700px) {
    .auth { width: 940px; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
}
@media (min-width: 700px) and (max-width: 899px) {
    .auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.auth-promo__slide { padding: 34px 36px 70px; }
.auth-promo__art { top: 40px; transform: scale(1.7); }
.auth-promo__headline { font-size: clamp(1.4rem, 2.4vw, 1.9rem); max-width: 22ch; }
.auth-promo__sub { font-size: .95rem; max-width: 36ch; }
.auth-promo__dots { inset-inline-start: 36px; bottom: 28px; }
@media (min-width: 700px) { .auth__body { padding: 20px 30px; } }
.auth .check.has-error span { color: var(--danger); }
.auth .check + .field-error { margin-top: -6px; }
.auth .field-error { font-size: .6875rem; }

/* User menu: essentials only, compact rows */
.user-menu { min-width: 260px; }
.user-menu__head { padding: 14px 14px; }
.user-menu .hdr-item { min-height: 40px; padding-block: 6px; gap: 10px; font-size: .875rem; }
.user-menu .hdr-item__icon { width: 30px; height: 30px; flex-basis: 30px; border-radius: 9px; }
.hdr-item__meta { margin-inline-start: auto; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); font-variant-numeric: tabular-nums; }
.user-menu__more { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 4px 6px 0; padding: 8px 10px; border-radius: 10px; font-size: .8125rem; font-weight: 600; color: var(--accent); text-decoration: none; background: var(--accent-soft); }
.user-menu__more:hover { color: var(--accent); filter: brightness(.97); }

/* ==========================================================================
   v3.0 — auth 40/60, review-details popup, booking summary on payment page
   ========================================================================== */
@media (min-width: 700px) {
    .auth { width: 940px; grid-template-columns: 40% 60%; }
}
@media (min-width: 700px) and (max-width: 899px) { .auth { grid-template-columns: 40% 60%; } }
.auth-promo__slide { padding: 30px 28px 66px; }
.auth-promo__art { transform: scale(1.45); }
.auth-promo__headline { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.auth-promo__dots { inset-inline-start: 28px; }
@media (min-width: 700px) { .auth__body { padding: 20px 44px; } }

/* GSTIN toggle: no heavy focus box */
.gst summary { display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; padding: 2px 4px; outline: none; }
.gst summary:focus-visible { box-shadow: var(--ring); }

/* Review your details */
.review-sheet { gap: 12px; }
@media (min-width: 700px) { .review-sheet { width: 540px; max-height: calc(100dvh - 40px); } }
.review-sheet .sheet__head { align-items: flex-start; }
.review-sheet .sheet__head h2 { font-size: 1.15rem; }
.review-trip { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); }
.review-trip > div { display: flex; flex-direction: column; min-width: 0; }
.review-trip small { color: var(--muted); font-size: .8125rem; }
.item-summary__icon--sm { width: 38px; height: 38px; flex-basis: 38px; border-radius: 12px; }
.review-heading { display: flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 4px 0 0; }
:lang(hi) .review-heading, :lang(ar) .review-heading { text-transform: none; letter-spacing: 0; }
.review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.review-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); animation: rise .3s var(--ease) both; animation-delay: calc(var(--i) * 50ms); }
.review-list__n { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; color: #FFFFFF; background: var(--grad-brand); }
.review-list__name { display: flex; flex-direction: column; min-width: 0; }
.review-list__name strong { font-size: .95rem; }
.review-list__name small { color: var(--muted); font-size: .75rem; }
.review-contact { margin: 0; display: grid; gap: 6px; }
.review-contact > div { display: flex; align-items: center; gap: 10px; }
.review-contact dt { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); background: var(--accent-soft); }
.review-contact dd { margin: 0; font-size: .9rem; }
.review-total { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 0; border-top: 1px dashed var(--line-2); font-weight: 600; }
.review-total strong { font-size: 1.15rem; color: var(--accent); }
.review-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }

/* Booking summary under the fare summary (payment page) */
.checkout-layout__side:has(.booking-summary) { position: static; }
.booking-summary { display: flex; flex-direction: column; gap: 10px; }
.booking-summary__head { display: flex; justify-content: space-between; align-items: center; }
.booking-summary__head h2 { font-size: 1rem; }
.booking-summary__trip { display: flex; gap: 12px; align-items: flex-start; }
.booking-summary__trip > div { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.booking-summary__trip strong { font-size: .95rem; }
.booking-summary__trip small { color: var(--muted); font-size: .8125rem; }
.booking-summary__date { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2) !important; }
.booking-summary__highlights { margin: 0; padding: 10px 12px; list-style: none; border-radius: var(--radius-sm); background: var(--surface-2); font-size: .8125rem; color: var(--ink-2); display: grid; gap: 4px; }
.booking-summary__sub { font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
:lang(hi) .booking-summary__sub, :lang(ar) .booking-summary__sub { text-transform: none; letter-spacing: 0; }
.booking-summary__people { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.booking-summary__people li { display: flex; align-items: center; gap: 8px; font-size: .875rem; }
.booking-summary__people li .icon { color: var(--muted); }
.booking-summary__people li span { flex: 1; min-width: 0; }
.booking-summary__people li small { color: var(--muted); font-size: .75rem; }
.booking-summary__contact { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .875rem; overflow-wrap: anywhere; }
.booking-summary__contact .icon { color: var(--muted); flex: 0 0 auto; }
.booking-summary__coupon { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0; padding: 4px 10px; align-self: flex-start; border-radius: 999px; font-size: .75rem; font-weight: 600; color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }

/* ==========================================================================
   v3.1 — smaller centre button, hidden scrollbars on phone/tablet,
   From/To (and travellers) sheets on mobile shown over everything
   ========================================================================== */

/* Smaller centre button */
.tabbar { --notch: 33px; }
.fab { width: 52px; height: 52px; top: -22px; box-shadow: 0 8px 20px var(--brand-shadow), 0 0 0 4px var(--surface); }
.tabbar.is-open .fab { box-shadow: 0 10px 24px var(--brand-shadow-2), 0 0 0 4px var(--surface); }
.fab__ring { inset: -4px; border-width: 1.5px; }
.fab-grid { width: 20px; height: 20px; }
.fab-grid i { width: 8.5px; height: 8.5px; border-radius: 3px; }
.fab-grid i:nth-child(2) { left: 11.5px; }
.fab-grid i:nth-child(3) { top: 11.5px; }
.fab-grid i:nth-child(4) { top: 11.5px; left: 11.5px; }
@media (min-width: 640px) and (max-width: 999.98px) {
    .tabbar { --notch: 35px; }
    .fab { width: 56px; height: 56px; top: -24px; }
}
.tab { font-size: .6875rem; font-weight: 600; }
.tab__icon { width: 48px; height: 28px; }

/* Phone / tablet: no visible scrollbars (scrolling still works) */
@media (max-width: 999.98px) {
    html, body, * { scrollbar-width: none; }
    html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { display: none; width: 0; height: 0; }
}

/* The search card's entrance animation kept a transform "in effect", which made the browser
   trap position:fixed children (the From/To sheet and its backdrop) inside the card.
   Run it once without filling so nothing stays applied afterwards. */
.search-card { animation: pop .5s var(--spring) .1s backwards; }

@media (max-width: 899.98px) {
    /* While a picker is open, lift the hero above the header and tab bar */
    .hero--home:has(.pop), .hero:has(.pop) { z-index: 70; }
    body:has(.pop-backdrop) { overflow: hidden; }
    .pop-backdrop { z-index: 71; background: rgba(13, 11, 26, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
    .pop { z-index: 72; max-height: 86dvh; padding-bottom: calc(18px + var(--safe-bottom)); }
    .pop--place { display: flex; flex-direction: column; height: auto; min-height: 60dvh; max-height: 86dvh; overflow: hidden; }
    .pop--place .place-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; margin-inline: -6px; padding-inline: 6px; }
    .pop--place .search-input { flex: 0 0 auto; }
}
.tabbar.is-open .fab-grid i:nth-child(1), .tabbar.is-open .fab-grid i:nth-child(4) { top: 8.5px; left: -1px; width: 22px; height: 3px; }
.tab--spacer { padding-bottom: 8px; }
.tab--spacer .tab__label { font-weight: 600; }

/* ==========================================================================
   v3.2 — From/To can't match, review popup Edit button
   ========================================================================== */
.place-item.is-blocked { cursor: not-allowed; opacity: .55; }
.place-item.is-blocked:hover { background: transparent; }
.place-item__tag { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; font-size: .6875rem; font-weight: 600; color: var(--muted); background: var(--bg-2); white-space: nowrap; }
.field--place.has-error { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent); }
.field-error--place { position: absolute; inset-inline-start: 14px; bottom: 5px; pointer-events: none; }
.field--place.has-error .field__sub { visibility: hidden; }
.review-sheet .sheet__head { align-items: center; }
.review-edit { flex: 0 0 auto; }
.review-sheet > .btn-block { margin-top: 2px; }

/* ==========================================================================
   v3.3 — new footer: help strip, company + address + contacts, animated
   ========================================================================== */
.sfooter {
    --f-bg: #0A1430; --f-ink: #E6ECFF; --f-muted: #9FB0D8; --f-line: rgba(255, 255, 255, .1);
    position: relative; overflow: hidden; isolation: isolate; margin-top: 40px;
    padding: 0 0 calc(18px + var(--bottomnav-h) + var(--safe-bottom));
    background: radial-gradient(120% 80% at 0% 0%, #0F2557 0%, transparent 60%), radial-gradient(100% 70% at 100% 100%, #0B3A4A 0%, transparent 60%), var(--f-bg);
    color: var(--f-muted); font-size: .875rem;
}
@media (min-width: 1000px) { .sfooter { padding-bottom: 22px; } }
/* Animated gradient line on top */
.sfooter::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #2563EB, #0EA5E9, #14B8A6, #F59E0B, #2563EB); background-size: 300% 100%; animation: f-line 8s linear infinite; }
@keyframes f-line { to { background-position: 300% 0; } }
.sfooter__glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .35; animation: float 14s ease-in-out infinite; }
.sfooter__glow--1 { width: 340px; height: 340px; background: #2563EB; top: -120px; inset-inline-start: -80px; }
.sfooter__glow--2 { width: 300px; height: 300px; background: #14B8A6; bottom: -120px; inset-inline-end: -60px; animation-delay: -7s; }
.sfooter__route { position: absolute; z-index: -1; inset-inline: 0; top: 70px; width: 100%; height: 120px; color: rgba(255, 255, 255, .12); }
[dir="rtl"] .sfooter__route { transform: scaleX(-1); }
.sfooter__plane { position: absolute; z-index: -1; top: 0; left: 0; color: rgba(255, 255, 255, .55); offset-path: path("M0 170 C 300 80, 900 80, 1400 160"); offset-rotate: auto 45deg; animation: f-fly 16s linear infinite; }
@keyframes f-fly { from { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } to { offset-distance: 100%; opacity: 0; } }
@supports not (offset-path: path("M0 0")) { .sfooter__plane { display: none; } }

/* Help strip */
.sfooter__help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: 28px 0 30px; padding: 16px 18px; border-radius: 20px; background: rgba(255, 255, 255, .06); border: 1px solid var(--f-line); backdrop-filter: blur(8px); }
.sfooter__help-text { display: flex; align-items: center; gap: 12px; }
.sfooter__help-text strong { display: block; color: #FFFFFF; font-size: 1rem; font-weight: 600; }
.sfooter__help-text small { color: var(--f-muted); }
.sfooter__help-icon { position: relative; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; background: linear-gradient(135deg, #2563EB, #0EA5E9); }
.sfooter__help-icon::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(14, 165, 233, .55); animation: f-ring 2.2s ease-out infinite; }
@keyframes f-ring { to { box-shadow: 0 0 0 12px rgba(14, 165, 233, 0); } }
.sfooter__help-icon .icon { animation: f-ringing 3s ease-in-out infinite; }
@keyframes f-ringing { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(-14deg); } 78% { transform: rotate(12deg); } 82% { transform: rotate(-8deg); } 86% { transform: rotate(6deg); } }
.sfooter__help-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sfooter__pill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; color: var(--f-ink); text-decoration: none; font-weight: 500; font-size: .8125rem; background: rgba(255, 255, 255, .08); border: 1px solid var(--f-line); transition: transform .25s cubic-bezier(.34, 1.4, .64, 1), background-color .2s, border-color .2s; }
.sfooter__pill:hover { color: #FFFFFF; transform: translateY(-2px); background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); }
.sfooter__pill--wa:hover { background: #128C7E; border-color: #25D366; }

/* Grid */
.sfooter__grid { display: grid; gap: 28px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sfooter__brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 900px) { .sfooter__grid { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); } .sfooter__brand { grid-column: auto; padding-inline-end: 24px; } }
.sfooter__logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; align-self: flex-start; }
.sfooter__mark { display: inline-flex; filter: drop-shadow(0 6px 14px rgba(14, 165, 233, .35)); animation: f-bob 4s ease-in-out infinite; }
@keyframes f-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.sfooter__name { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; background: linear-gradient(90deg, #FFFFFF, #7DD3FC, #5EEAD4, #FFFFFF); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: f-shine 6s linear infinite; }
@keyframes f-shine { to { background-position: 250% 0; } }
.sfooter__tagline { margin: 0; color: var(--f-muted); }
.sfooter__address { display: flex; gap: 10px; margin: 0; font-style: normal; line-height: 1.5; }
.sfooter__address strong { display: block; color: var(--f-ink); font-weight: 600; }
.sfooter__ico { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #7DD3FC; background: rgba(125, 211, 252, .1); transition: transform .3s cubic-bezier(.34, 1.4, .64, 1), background-color .2s; }
.sfooter__contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sfooter__contacts li { display: flex; align-items: center; gap: 10px; }
.sfooter__contacts li:hover .sfooter__ico, .sfooter__address:hover .sfooter__ico { transform: scale(1.12); background: rgba(125, 211, 252, .2); }
.sfooter__contacts a { color: var(--f-ink); text-decoration: none; }
.sfooter__contacts a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.sfooter__social { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.sfooter__chip { padding: 4px 12px; border-radius: 999px; font-size: .75rem; font-weight: 500; color: var(--f-ink); text-decoration: none; border: 1px solid var(--f-line); transition: transform .25s cubic-bezier(.34, 1.4, .64, 1), background-color .2s, color .2s; }
.sfooter__chip:hover { color: #0A1430; background: #7DD3FC; transform: translateY(-2px); }

.sfooter__col { display: flex; flex-direction: column; gap: 9px; }
.sfooter__col h2 { margin: 0 0 4px; color: #FFFFFF; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
:lang(hi) .sfooter__col h2, :lang(ar) .sfooter__col h2 { text-transform: none; letter-spacing: 0; font-size: .875rem; }
.sfooter__col a { position: relative; display: inline-flex; align-items: center; align-self: flex-start; gap: 2px; color: var(--f-muted); text-decoration: none; transition: color .2s, transform .25s ease; }
.sfooter__col a span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s ease; padding-bottom: 1px; }
[dir="rtl"] .sfooter__col a span { background-position: 100% 100%; }
.sfooter__arrow { width: 0; opacity: 0; margin-inline-end: 0; transition: width .25s ease, opacity .2s, margin .25s; }
[dir="rtl"] .sfooter__arrow { transform: scaleX(-1); }
.sfooter__col a:hover { color: #FFFFFF; }
.sfooter__col a:hover span { background-size: 100% 1px; }
.sfooter__col a:hover .sfooter__arrow { width: 13px; opacity: 1; margin-inline-end: 3px; }

/* Payment marks */
.sfooter__pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--f-line); }
.sfooter__pay-label { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: 6px; color: #5EEAD4; font-weight: 600; font-size: .8125rem; }
.sfooter__paymark { padding: 4px 10px; border-radius: 8px; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; color: var(--f-ink); background: rgba(255, 255, 255, .07); border: 1px solid var(--f-line); transition: transform .25s ease, background-color .2s; }
.sfooter__paymark:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .14); }

/* Legal bar */
.sfooter__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--f-line); font-size: .75rem; color: #7F8FB8; }
.sfooter__meta { opacity: .8; }

/* Reveal as the footer scrolls into view (falls back to a simple fade-in) */
.sfooter__reveal { animation: rise .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
@supports (animation-timeline: view()) {
    .sfooter__reveal { animation: f-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    @keyframes f-reveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
}

/* Reduced motion */
html[data-motion="reduce"] .sfooter *, html[data-motion="reduce"] .sfooter::before { animation: none !important; }
html[data-motion="reduce"] .sfooter__plane { display: none; }
@media (prefers-reduced-motion: reduce) { .sfooter *, .sfooter::before { animation: none !important; } .sfooter__plane { display: none; } }

/* ==========================================================================
   v3.4 — service icons: clean soft-tint style (no glossy highlight / blur glow)
   ========================================================================== */
.svc__icon:not(.svc__icon--xl) {
    color: var(--to);
    background: linear-gradient(145deg, color-mix(in srgb, var(--from) 14%, var(--surface)), color-mix(in srgb, var(--to) 24%, var(--surface)));
    border: 1px solid color-mix(in srgb, var(--to) 18%, transparent);
    box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--to) 55%, transparent);
    transition: transform .35s cubic-bezier(.34, 1.4, .64, 1), box-shadow .35s ease, background .35s ease, color .25s ease;
}
.svc__icon:not(.svc__icon--xl)::before, .svc__icon:not(.svc__icon--xl)::after { display: none; }
.svc__icon:not(.svc__icon--xl) .icon { filter: none; }
[data-theme="dark"] .svc__icon:not(.svc__icon--xl) { color: color-mix(in srgb, var(--from) 70%, #FFFFFF); background: linear-gradient(145deg, color-mix(in srgb, var(--from) 22%, var(--surface)), color-mix(in srgb, var(--to) 30%, var(--surface))); }

/* Hover / tap: fill with the brand gradient, white icon */
.svc:hover .svc__icon:not(.svc__icon--xl), .svc:focus-visible .svc__icon:not(.svc__icon--xl) {
    color: #FFFFFF; border-color: transparent;
    background: linear-gradient(145deg, var(--from), var(--to));
    box-shadow: 0 14px 24px -10px color-mix(in srgb, var(--to) 75%, transparent);
}

/* Home grid a touch smaller and calmer */
.svc:not(.svc--compact) .svc__icon:not(.svc__icon--xl) { width: 76px; height: 76px; border-radius: 22px; }
.svc__title { font-weight: 600; }

/* Services sheet (phone/tablet centre button): no header, tighter grid */
.svc--compact .svc__icon:not(.svc__icon--xl) { width: 56px; height: 56px; border-radius: 17px; }
.svc--compact .svc__title { font-weight: 600; color: var(--ink-2); }
.svc-sheet__grip { margin-bottom: 14px; }
.svc-grid--sheet { gap: 16px 6px; }
.svc__badge { font-weight: 600; padding: 0 7px; font-size: .625rem; top: -7px; inset-inline-end: -8px; }