/* ==========================================================================
   Umraat — B2C travel portal theme
   Mobile-first, RTL-safe (logical properties), Almosafer/Wego-inspired.
   ========================================================================== */
:root {
    /* Umraat template palette (index_v3): navy + gold + interactive purple */
    --u-navy: #0D1B2A;
    --u-navy-2: #1B263B;
    --u-gold: #D4AF37;
    --u-gold-dark: #B8931F;        /* deeper gold for hover/contrast on light surfaces */
    --u-gold-soft: rgba(212, 175, 55, .14); /* soft gold tint for hover/fill backgrounds */
    --u-primary: #7C3AED;          /* interactive purple (actions/links/CTAs) */
    --u-primary-dark: #6D28D9;     /* purple hover */
    --u-primary-light: #f3edfe;    /* light purple tint */
    --u-accent: #D4AF37;           /* gold accent */
    --u-teal: #0D9488;             /* price/success teal used in cards */
    --u-ink: #0F172A;              /* slate ink text */
    --u-muted: #64748B;
    --u-line: #E2E8F0;
    --u-bg: #F8FAFC;
    --u-bg-alt: #F1F5F9;
    --u-surface: #FFFFFF;
    --u-radius-sm: 10px;
    --u-radius: 16px;
    --u-radius-lg: 24px;
    --u-shadow: 0 2px 8px rgba(13, 27, 42, .04);
    --u-shadow-md: 0 12px 32px rgba(13, 27, 42, .08);
    --u-shadow-lg: 0 20px 48px rgba(13, 27, 42, .14);
    --u-transition: all .3s cubic-bezier(.4, 0, .2, 1);
    --u-font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, "Tajawal", sans-serif;
}

html { font-size: 15px; position: relative; min-height: 100%; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
    font-family: var(--u-font);
    color: var(--u-ink);
    background: var(--u-bg);
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Push the footer to the bottom of the viewport when page content is short. */
body > main[role="main"] { flex: 1 0 auto; }
body > .site-footer { flex-shrink: 0; }

[dir="rtl"] body { font-family: "Tajawal", "Plus Jakarta Sans", var(--u-font); }

a { text-decoration: none; }
.rtl-flip { display: inline-block; }
[dir="rtl"] .rtl-flip { transform: scaleX(-1); }

/* ---------- Top bar ---------- */
.top-bar {
    background: linear-gradient(90deg, var(--u-navy), var(--u-navy-2));
    color: #fff;
    padding: 10px 0;
    font-size: .88rem;
    border-bottom: 1px solid rgba(212, 175, 55, .2);
}
.top-bar-content { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.top-bar-announce { display: flex; align-items: center; gap: 10px; }
.top-bar-announce i { color: var(--u-gold); }
.top-bar-link { color: var(--u-gold); font-weight: 700; margin-inline-start: 8px; }
.top-bar-link:hover { color: #fff; }
@media (max-width: 767.98px) {
    .top-bar { font-size: .78rem; }
    .top-bar-content > .top-bar-announce:last-child { display: none; }
}

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--u-line);
    box-shadow: var(--u-shadow);
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--u-navy);
}
.brand-icon { color: var(--u-gold); }
.brand-dot { color: var(--u-gold); }
.brand-logo { width: 40px; height: 40px; object-fit: contain; display: inline-block; }
.footer-brand .brand-logo { width: 36px; height: 36px; }
.site-header .navbar { padding-block: .7rem; min-height: 80px; }
.main-nav { gap: .35rem; }
.main-nav .nav-item { display: flex; }
.main-nav .nav-link {
    font-weight: 700;
    color: var(--u-ink);
    padding-inline: 1.1rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--u-radius-sm);
    transition: var(--u-transition);
}
.main-nav .nav-link:hover,
.main-nav .nav-link.active {
    color: var(--u-primary);
    background-color: rgba(124, 58, 237, .06);
}
.utility-nav { gap: .5rem; }
.utility-nav .nav-link { color: var(--u-ink); font-weight: 700; }
.utility-nav .dropdown-item.active { background: var(--u-primary); }
.account-link { cursor: pointer; }

/* Pill toggles (currency / language) */
.pill-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px !important;
    border: 1px solid var(--u-line);
    border-radius: 50px;
    font-size: .85rem;
    font-weight: 700;
    background-color: var(--u-surface);
}
.pill-select::after { margin-inline-start: 2px; }

/* Login / Register buttons */
.btn-login { font-weight: 700; color: var(--u-navy) !important; padding: 10px 18px; }
.btn-login:hover { color: var(--u-primary) !important; }
.btn-register {
    background-color: var(--u-navy);
    color: #fff !important;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: var(--u-radius-sm);
    border: none;
    transition: var(--u-transition);
}
.btn-register:hover {
    background-color: var(--u-primary);
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(124, 58, 237, .3);
}

/* ---------- Hero + search ---------- */
.hero {
    position: relative;
    /* Intentionally no z-index here: keeping the hero out of its own stacking
       context lets the datepicker popup (z-index:1080) render above the trust
       strip and following sections. Adding a z-index would cage the popup and
       force the hero background to paint over content below. */
    padding-block: 5rem 8rem;
    background: linear-gradient(135deg, rgba(13, 27, 42, .85), rgba(27, 38, 59, .75)),
                url('https://cnn-arabic-images.cnn.io/cloudinary/image/upload/w_1920,c_scale,q_auto/cnnarabic/2023/04/22/images/238263.jpg?auto=format&fit=crop&q=80&w=2000') center/cover no-repeat;
    color: #fff;
    overflow: visible;
}
.hero-overlay {
    position: absolute; inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(circle at 85% 10%, rgba(212, 175, 55, .16), transparent 45%);
}
.hero-content { position: relative; z-index: 25; }
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(212, 175, 55, .2);
    border: 1px solid var(--u-gold);
    color: var(--u-gold);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: .9rem;
    font-weight: 700;
    margin-bottom: 20px;
}
.hero-title { font-weight: 900; font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 1rem; text-align: center; line-height: 1.2; }
.hero-subtitle { opacity: .92; max-width: min(100%, 1200px); margin: 0 auto 2.5rem; text-align: center; text-wrap: balance; font-size: 1.1rem; }

/* Floating pill tab bar (Wego-style) */
.search-shell { position: relative; }
.search-tabs {
    justify-content: center;
    gap: .35rem;
    border: 0;
    margin: 0 auto -1.5rem;
    flex-wrap: nowrap;
    width: fit-content;
    max-width: 100%;
    background: rgba(13, 27, 42, .35);
    backdrop-filter: blur(8px);
    padding: .4rem;
    border-radius: 999px;
    position: relative;
    z-index: 26;
    box-shadow: 0 10px 28px rgba(13, 27, 42, .3);
}
.search-tab {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .9);
    font-weight: 700;
    font-size: 1rem;
    padding: .65rem 1.6rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease, transform .12s ease;
}
.search-tab:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.search-tab.active {
    background: #fff;
    color: var(--u-primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
    transform: translateY(-1px);
}
.search-tab i { font-size: 1.15rem; }

/* "Coming soon" disabled search tab (Umrah Packages) */
.search-tab-disabled {
    cursor: not-allowed;
    opacity: .72;
    position: relative;
    overflow: visible;
}
.search-tab-disabled:hover { background: transparent; color: rgba(255, 255, 255, .9); }
.tab-soon-badge {
    position: absolute;
    top: -.55rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    padding: .02rem .32rem;
    border-radius: 999px;
    font-size: .5rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--u-gold);
    color: var(--u-navy);
    line-height: 1.4;
    box-shadow: 0 2px 6px rgba(13, 27, 42, .25);
}

/* Umrah "coming soon" pane (replaces the disabled search form) */
.umrah-coming-soon .umrah-soon-inner {
    text-align: center;
    padding: 2.25rem 1.25rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}
.umrah-soon-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--u-primary-light);
    color: var(--u-primary);
    font-size: 1.6rem;
    margin-bottom: .25rem;
}
.umrah-soon-pill {
    display: inline-flex;
    align-items: center;
    padding: .22rem .7rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--u-gold);
    color: var(--u-navy);
}
.umrah-soon-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--u-ink);
    margin: .25rem 0 0;
}
.umrah-soon-text {
    max-width: 520px;
    color: var(--u-muted);
    margin: 0;
}

/* "Coming soon" disabled nav link (Umrah Packages) */
.nav-link-disabled {
    cursor: not-allowed;
    opacity: .7;
    display: inline-flex;
    align-items: center;
    position: relative;
    overflow: visible;
}
.nav-soon-badge {
    position: absolute;
    top: -.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    padding: .01rem .3rem;
    border-radius: 999px;
    font-size: .46rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--u-gold);
    color: var(--u-navy);
    line-height: 1.5;
    box-shadow: 0 2px 6px rgba(13, 27, 42, .25);
}

.search-widget {
    background: #fff;
    color: var(--u-ink);
    border-radius: 1.1rem;
    box-shadow: var(--u-shadow-lg);
    padding: 2rem 1.25rem 1.25rem;
    position: relative;
    z-index: 25;
}
.search-pane { display: none; }
.search-pane.active { display: block; }

/* Boxed field (small caption label + bold value, Wego-style) */
.form-label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--u-muted);
    margin-bottom: .15rem;
    text-transform: none;
}
.search-widget .form-control,
.search-widget .form-select,
.search-widget .occupancy .dropdown-toggle {
    border: 1px solid var(--u-line);
    border-radius: .6rem;
    padding: .6rem .75rem;
    font-weight: 600;
    background-color: #fff;
    min-height: 46px;
}
.search-widget .form-control::placeholder { font-weight: 500; color: #9aa2ac; }
.input-icon { position: relative; }
.input-icon > i {
    position: absolute;
    inset-inline-start: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--u-primary);
}
.input-icon > .form-control { padding-inline-start: 2.2rem; }
.input-icon > .form-select { padding-inline-start: 2.2rem; }

/* Hotel destination autocomplete */
.hotel-ac { position: relative; }
.hotel-ac-menu {
    position: absolute; inset-inline: 0; top: calc(100% + .25rem); z-index: 1080;
    background: #fff; border: 1px solid var(--u-line); border-radius: var(--u-radius);
    box-shadow: var(--u-shadow-lg, 0 10px 30px rgba(0,0,0,.14)); overflow: hidden auto;
    max-height: 320px; padding: .25rem;
}
.hotel-ac-item {
    display: flex; align-items: center; gap: .6rem; width: 100%;
    border: none; background: transparent; text-align: start; cursor: pointer;
    padding: .5rem .6rem; border-radius: .5rem; color: var(--u-ink); font-size: .9rem;
}
.hotel-ac-item > i { color: var(--u-primary); font-size: 1rem; flex: 0 0 auto; }
.hotel-ac-item.is-active, .hotel-ac-item:hover { background: var(--u-primary-light); }
.hotel-ac-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.hotel-ac-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hotel-ac-sub { color: var(--u-muted); font-size: .75rem; }
.hotel-ac-group {
    display: block; padding: .4rem .6rem .2rem; margin: 0;
    font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--u-muted);
}
.hotel-ac-chips {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem;
    padding: .2rem .5rem .5rem;
}
.hotel-ac-item.hotel-ac-chip {
    display: flex; align-items: center; justify-content: center; gap: .3rem;
    min-height: 2.25rem; padding: .35rem .5rem; margin: 0;
    border: 1px solid var(--u-primary-light); border-radius: 999px;
    background: var(--u-bg); text-align: center;
}
.hotel-ac-chip .hotel-ac-sub { display: none; }
.hotel-ac-chip .hotel-ac-text { min-width: 0; }
.hotel-ac-chip .hotel-ac-label {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .8rem; font-weight: 600;
}
.hotel-ac-chip i { font-size: .8rem; color: var(--u-primary); }
@media (max-width: 360px) { .hotel-ac-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hotel-ac-group-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.hotel-ac-clear {
    border: 0; background: none; padding: 0; cursor: pointer;
    font-size: .72rem; font-weight: 600; text-transform: none; letter-spacing: 0;
    color: var(--u-primary);
}
.hotel-ac-clear:hover, .hotel-ac-clear:focus-visible { color: var(--u-primary-dark); text-decoration: underline; }
.hotel-ac-loading {
    display: flex; align-items: center; gap: .6rem;
    padding: .6rem .6rem; color: var(--u-muted); font-size: .85rem;
}
.hotel-ac-spinner {
    width: 1.05rem; height: 1.05rem; flex: 0 0 auto; border-radius: 50%;
    border: 2px solid var(--u-primary-light);
    border-top-color: var(--u-primary);
    animation: hotel-ac-spin .6s linear infinite;
}
@keyframes hotel-ac-spin { to { transform: rotate(360deg); } }
.hotel-ac-empty {
    padding: .6rem; color: var(--u-muted); font-size: .85rem; text-align: center;
}
.form-control:focus, .form-select:focus {
    border-color: var(--u-primary);
    box-shadow: 0 0 0 .2rem rgba(124, 58, 237, .15);
}

/* Custom date picker field */
.date-field { position: relative; }
.date-field > i {
    position: absolute;
    inset-inline-start: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--u-primary);
    pointer-events: none;
}
.date-field .date-display {
    padding-inline-start: 2.2rem;
    cursor: pointer;
    background-color: #fff;
}
.date-field .date-display:read-only { background-color: #fff; }

.datepicker-popup {
    position: absolute;
    z-index: 1080;
    top: calc(100% + .35rem);
    inset-inline-start: 0;
    width: 560px;
    max-width: 92vw;
    background: #fff;
    color: var(--u-ink);
    border: 1px solid var(--u-line);
    border-radius: .9rem;
    box-shadow: var(--u-shadow-lg);
    padding: .85rem;
}
.dp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.dp-header--dual .dp-titles { display: flex; flex: 1; justify-content: space-around; gap: .5rem; }
.dp-title { font-weight: 700; font-size: .95rem; }
.dp-nav {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--u-line); background: #fff; color: var(--u-primary);
    display: inline-flex; align-items: center; justify-content: center;
}
.dp-nav:hover { background: var(--u-primary-light); }
.dp-nav:disabled { opacity: .35; cursor: not-allowed; }
.dp-months { display: flex; gap: 1.25rem; }
.dp-months .dp-grid { flex: 1 1 0; min-width: 0; }
/* Use minmax(0, 1fr) (not plain 1fr): a bare 1fr track has an implicit auto
   minimum, letting day cells push the grid wider than its flex container, which
   made the two months overlap. minmax(0, 1fr) lets the columns shrink to fit. */
.dp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.dp-dow { text-align: center; font-size: .68rem; font-weight: 700; color: var(--u-muted); padding-block: .25rem; min-width: 0; white-space: nowrap; }
.dp-day {
    aspect-ratio: 1;
    border: 0; background: transparent; border-radius: .5rem;
    font-size: .85rem; font-weight: 600; color: var(--u-ink);
}
.dp-day:hover:not(:disabled) { background: var(--u-primary-light); }
.dp-day.is-empty { visibility: hidden; }
.dp-day:disabled { color: #c4c9cf; cursor: not-allowed; }
.dp-day.is-today { box-shadow: inset 0 0 0 1px var(--u-primary); }
.dp-day.is-selected,
.dp-day.is-selected:hover:not(:disabled) { background: var(--u-primary); color: #fff; }
.dp-day.is-in-range { background: var(--u-primary-light); border-radius: 0; }
.dp-day.is-range-start { border-start-end-radius: 0; border-end-end-radius: 0; }
.dp-day.is-range-end { border-start-start-radius: 0; border-end-start-radius: 0; }
.dp-day.is-preview,
.dp-day.is-preview:hover:not(:disabled) { background: var(--u-primary); color: #fff; }
.datepicker-popup--range { width: 560px; }
/* Single-month pickers (e.g. Transport travel date) don't need the wide
   dual-month width, which would otherwise stretch each day cell huge. */
[data-single-month="true"] .datepicker-popup { width: 300px; }
.date-range-field .date-display { cursor: pointer; }

/* RTL (Arabic) uses full weekday words (e.g. الأربعاء) that are much wider than the
   English short labels, so give the popup extra width to fit them without clipping. */
[dir="rtl"] .datepicker-popup--range,
[dir="rtl"] .datepicker-popup { width: 720px; }
[dir="rtl"][data-single-month="true"] .datepicker-popup,
[dir="rtl"] [data-single-month="true"] .datepicker-popup { width: 360px; }

/* Collapse the dual-month calendar to a single month on narrow screens. */
@media (max-width: 600px) {
    .datepicker-popup,
    .datepicker-popup--range { width: 300px; }
    .dp-months { flex-direction: column; gap: 1rem; }
    .dp-header--dual .dp-titles { justify-content: center; }
    .dp-header--dual .dp-titles .dp-title:last-child { display: none; }
    .dp-months .dp-grid:last-child { display: none; }
}

/* The custom date popup renders natively LTR or RTL: the flow direction is set
   inline in JS (popup.style.direction) so it is deterministic and immune to stale
   or cached stylesheets. In RTL the 7-column grid mirrors correctly (Sun on the
   right ... Sat on the left) and the day numbers stay aligned to their weekday
   headers. Do NOT force `direction: ltr` on the inner grid here — that reverses
   the intended RTL layout and misaligns the days. */

/* Purple pill CTA */
.btn-search {
    font-weight: 800;
    padding-block: .7rem;
    border-radius: var(--u-radius-sm);
    font-size: 1rem;
    box-shadow: 0 6px 16px rgba(124, 58, 237, .3);
}

/* Umrah pane (Wego-style) */
.umrah-heading {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--u-ink);
    margin-bottom: .9rem;
}
.locked-field {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--u-line);
    border-radius: .6rem;
    padding: .6rem .75rem;
    min-height: 46px;
    background-color: var(--u-bg-alt);
    font-weight: 700;
    color: var(--u-ink);
}
.locked-field .locked-value { flex: 1; }
.locked-field i { color: var(--u-muted); font-size: .85rem; }
.umrah-cta {
    width: auto;
    min-width: 220px;
    float: inline-end;
    padding-inline: 1.75rem;
    margin-top: .4rem;
}

/* Multi-city flight segments (Wego-style) */
.segment-row { margin-bottom: .5rem; }
.segment-swap-col, .segment-remove-col { display: flex; align-items: flex-end; padding-bottom: .1rem; }
.segment-swap, .segment-remove {
    width: 40px; height: 46px;
    border-radius: .6rem;
    border: 1px solid var(--u-line);
    background: #fff;
    color: var(--u-primary);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.segment-remove { border-radius: 50%; width: 40px; height: 40px; color: var(--u-muted); }
.segment-swap:hover { background: var(--u-primary-light); }
.segment-remove:hover:not(:disabled) { background: #fde8e8; color: #c0392b; border-color: #f0c4c4; }
.segment-remove:disabled { opacity: .4; cursor: not-allowed; }
.btn-add-flight {
    font-weight: 700;
    color: var(--u-primary);
    background: #fff;
    border: 1px solid var(--u-primary);
    border-radius: .7rem;
    padding: .55rem 1.1rem;
}
.btn-add-flight:hover:not(:disabled) { background: var(--u-primary-light); }
.btn-add-flight:disabled { opacity: .5; cursor: not-allowed; }

/* occupancy stepper */
.occupancy .dropdown-toggle { display: flex; align-items: center; }
.occupancy-menu { min-width: 260px; border-radius: .8rem; border-color: var(--u-line); box-shadow: var(--u-shadow-lg); }
.occ-row { display: flex; align-items: center; justify-content: space-between; padding-block: .5rem; }
.occ-row span { display: flex; flex-direction: column; font-weight: 600; }
.occ-row span small { font-weight: 400; color: var(--u-muted); font-size: .72rem; }
.stepper { display: inline-flex; align-items: center; gap: .5rem; }
.stepper button {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--u-line); background: #fff; color: var(--u-primary);
    font-weight: 700; line-height: 1;
}
.stepper input { width: 32px; text-align: center; border: 0; background: transparent; }

/* Child ages selector (shown when children > 0) */
.occ-child-ages { margin-top: .5rem; padding-top: .75rem; border-top: 1px solid var(--u-line); }
.occ-child-ages-title { font-weight: 600; font-size: .9rem; margin-bottom: .5rem; }
.occ-child-ages-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.occ-child-age { width: 72px; padding: .35rem .5rem; border: 1px solid var(--u-line); border-radius: .5rem; background: #fff; }
.occ-child-ages-hint { margin: .6rem 0 0; font-size: .72rem; color: var(--u-muted); line-height: 1.35; }

/* Per-room occupancy (BedBank FE parity) */
.occupancy-menu { max-height: min(70vh, 460px); overflow-y: auto; }
.occ-rooms-head {
    display: flex; align-items: center; justify-content: space-between;
    font-weight: 700; padding-block: .25rem .5rem;
    border-bottom: 1px solid var(--u-line); margin-bottom: .5rem;
}
.occ-rooms-count { width: 32px; text-align: center; border: 0; background: transparent; }
.occ-room {
    border: 1px solid var(--u-line); border-radius: .7rem;
    padding: .35rem .75rem .6rem; margin-bottom: .6rem; background: var(--u-bg-alt);
}
.occ-room-head { font-weight: 700; padding-block: .4rem; color: var(--u-ink); }
.occ-room .occ-child-ages { border-top: 1px dashed var(--u-line); }
.occ-done { margin-top: .25rem; }

/* Trip-type chips (Wego-style pills) */
.trip-types { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 0; }
.trip-radio {
    font-weight: 600; font-size: .85rem;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    background: var(--u-bg-alt);
    border: 1px solid var(--u-line);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.trip-radio input { accent-color: var(--u-primary); margin: 0; }
.trip-radio:has(input:checked) {
    background: var(--u-primary-light);
    border-color: var(--u-primary);
    color: var(--u-primary);
}

/* ---------- Trust strip ---------- */
.trust-strip {
    background: var(--u-bg-alt);
    border-bottom: 1px solid var(--u-line);
    padding-block: 1rem;
    margin-top: -2.5rem;
    position: relative;
    z-index: 21;
}
.trust-item {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    font-weight: 600; font-size: .85rem;
}
.trust-item i { color: var(--u-primary); font-size: 1.15rem; }

/* ---------- Sections ---------- */
.section { padding-block: 2.5rem; }
.section-alt { background: var(--u-bg-alt); }
.section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.25rem;
}
.section-title { font-weight: 800; font-size: 1.35rem; margin: 0; }
.section-sub { color: var(--u-muted); margin: .2rem 0 0; font-size: .9rem; }
.section-link { color: var(--u-primary); font-weight: 700; white-space: nowrap; }

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius);
    overflow: hidden;
    box-shadow: var(--u-shadow);
    transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--u-shadow-lg); }
.card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.badge-cancel {
    position: absolute; inset-block-start: .6rem; inset-inline-start: .6rem;
    background: rgba(13,122,95,.92); color: #fff; font-size: .72rem; font-weight: 600;
    padding: .2rem .5rem; border-radius: 999px;
}
.badge-tier {
    position: absolute; inset-block-start: .6rem; inset-inline-end: .6rem;
    background: var(--u-gold); color: var(--u-navy); font-size: .72rem; font-weight: 700;
    padding: .2rem .55rem; border-radius: 999px;
}
.card-body { padding: .85rem; }
.card-stars { color: var(--u-gold); font-size: .8rem; letter-spacing: 1px; }
.card-title { font-size: 1rem; font-weight: 700; margin: .2rem 0 .35rem; line-height: 1.3; }
.card-meta { color: var(--u-muted); font-size: .82rem; margin-bottom: .6rem; }
.card-footer-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: .5rem; margin-top: .5rem;
}
.review { display: flex; flex-direction: column; }
.review-score {
    display: inline-block; background: var(--u-primary); color: #fff; font-weight: 700;
    padding: .1rem .45rem; border-radius: .4rem; font-size: .85rem; width: fit-content;
}
.review small { color: var(--u-muted); font-size: .72rem; }
.price { display: flex; flex-direction: column; text-align: end; }
[dir="rtl"] .price { text-align: start; }
.price small { color: var(--u-muted); font-size: .72rem; }
.price strong { color: var(--u-primary); font-size: 1.1rem; }

/* flight cards */
.flight-card { padding: 1rem; text-align: center; }
.flight-route {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    font-weight: 800; font-size: 1.15rem; color: var(--u-ink);
}
.flight-route i { color: var(--u-primary); }
.flight-cities { color: var(--u-ink); font-weight: 600; font-size: .9rem; margin-top: .35rem; }
.flight-meta { color: var(--u-muted); font-size: .8rem; margin-bottom: .6rem; }
.flight-card .price { align-items: center; text-align: center; }

/* package cards */
.pkg-highlights { list-style: none; padding: 0; margin: 0 0 .6rem; }
.pkg-highlights li { font-size: .84rem; color: var(--u-ink); padding-block: .12rem; }
.pkg-highlights i { color: var(--u-primary); }
.pkg-includes { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: .6rem; }
.pkg-includes span { font-size: .78rem; color: var(--u-muted); display: inline-flex; align-items: center; gap: .25rem; }

/* static template package cards (home "Premium Umrah Programs") */
.packages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.pkg-card {
    background: #fff; border: 1px solid var(--u-line); border-radius: var(--u-radius);
    overflow: hidden; box-shadow: var(--u-shadow);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    display: flex; flex-direction: column;
}
.pkg-card:hover { transform: translateY(-4px); box-shadow: var(--u-shadow-lg); border-color: rgba(124, 58, 237, .4); }
.pkg-header-img { position: relative; height: 200px; overflow: hidden; }
.pkg-header-img img { width: 100%; height: 100%; object-fit: cover; }
.pkg-badge {
    position: absolute; inset-block-start: 14px; inset-inline-start: 14px;
    padding: .35rem .85rem; border-radius: 999px;
    font-size: .8rem; font-weight: 800; color: #fff; z-index: 2;
}
.pkg-badge.badge-green { background: var(--u-teal); }
.pkg-body { padding: 1.4rem; display: flex; flex-direction: column; flex-grow: 1; }
.pkg-title { font-size: 1.2rem; font-weight: 800; color: var(--u-navy); margin: 0 0 1rem; }
.pkg-list { list-style: none; padding: 0; margin: 0 0 1.4rem; display: flex; flex-direction: column; gap: .7rem; }
.pkg-list li { font-size: .9rem; color: var(--u-ink); display: flex; align-items: center; gap: .6rem; }
.pkg-list li i { color: var(--u-teal); font-size: .85rem; }
.pkg-tags { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: auto; margin-bottom: 1.4rem; }
.pkg-tag-item { font-size: .82rem; color: var(--u-muted); font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }
.pkg-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--u-line);
}
.pkg-price-from { font-size: .78rem; color: var(--u-muted); display: block; }
.pkg-price-num { font-size: 1.35rem; font-weight: 900; color: var(--u-teal); }
.pkg-select-btn {
    background: transparent; border: 1.5px solid var(--u-teal); color: var(--u-teal);
    padding: .6rem 1.15rem; border-radius: .6rem; font-weight: 700; font-size: .88rem;
    cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease;
}
.pkg-select-btn:hover { background: var(--u-teal); color: #fff; }
@media (max-width: 991.98px) { .packages-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .packages-grid { grid-template-columns: 1fr; } }

/* static template hotel cards (home "Hotels in Makkah & Madinah") */
.hh-card {
    background: #fff; border: 1px solid var(--u-line); border-radius: var(--u-radius);
    overflow: hidden; box-shadow: var(--u-shadow);
    transition: transform .15s ease, box-shadow .15s ease;
    display: flex; flex-direction: column;
}
.hh-card:hover { transform: translateY(-6px); box-shadow: var(--u-shadow-lg); }
.hh-img { position: relative; height: 220px; }
.hh-img img { width: 100%; height: 100%; object-fit: cover; }
.hh-tag {
    position: absolute; inset-block-start: 14px; inset-inline-end: 14px;
    background: rgba(13, 27, 42, .85); color: var(--u-gold);
    border: 1px solid var(--u-gold); padding: .25rem .75rem;
    border-radius: 999px; font-size: .8rem; font-weight: 700;
    display: inline-flex; align-items: center; gap: .35rem;
}
.hh-info { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.hh-title { font-size: 1.2rem; font-weight: 800; color: var(--u-navy); margin: 0 0 .4rem; }
.hh-loc { color: var(--u-muted); font-size: .9rem; margin: 0 0 1.1rem; display: flex; align-items: center; gap: .4rem; }
.hh-footer {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding-top: 1rem; margin-top: auto; border-top: 1px solid var(--u-line);
}
.hh-from { font-size: .8rem; color: var(--u-muted); display: block; }
.hh-price { font-size: 1.3rem; font-weight: 900; color: var(--u-navy); }
.hh-price small { font-size: .8rem; font-weight: 600; color: var(--u-muted); }
.hh-book {
    background: var(--u-primary); color: #fff; border: none; padding: .6rem 1.2rem;
    border-radius: .6rem; font-weight: 700; font-size: .88rem; white-space: nowrap;
    text-decoration: none; transition: background .15s ease;
}
.hh-book:hover { background: var(--u-primary-dark); color: #fff; }
/* Dynamic (endpoint-driven) hotel tiles carry no price; a short trust hint fills the
   left of the footer so it stays balanced against the Book now button. */
.hh-hint {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .82rem; font-weight: 600; color: var(--u-muted); line-height: 1.3;
}
.hh-hint i { color: var(--u-teal); font-size: .95rem; }

/* static template flight cards (home "Flights to the Holy Cities") */
.hf-card {
    background: #fff; border: 1px solid var(--u-line); border-radius: var(--u-radius);
    padding: 1.25rem 1.5rem; margin-bottom: 1rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
    flex-wrap: wrap; transition: box-shadow .15s ease, border-color .15s ease;
}
.hf-card:hover { box-shadow: var(--u-shadow-lg); border-color: var(--u-primary); }

/* Curated home tiles are clickable (full-replay navigation). */
.packages-grid .hh-card[role="button"], .home-flights-grid .hf-card[role="button"] { cursor: pointer; }
.hh-card[role="button"]:focus-visible, .hf-card[role="button"]:focus-visible {
    outline: 2px solid var(--u-primary); outline-offset: 2px;
}
.hf-airline { display: flex; align-items: center; gap: 1rem; }
.hf-airline-icon {
    width: 50px; height: 50px; background: var(--u-bg-alt); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: var(--u-navy);
}
.hf-airline-name { font-size: 1.1rem; font-weight: 800; color: var(--u-navy); margin: 0; }
.hf-airline-meta { font-size: .85rem; color: var(--u-muted); }
.hf-route { display: flex; align-items: center; gap: 1.25rem; text-align: center; }
.hf-time { font-size: 1.1rem; font-weight: 800; color: var(--u-navy); }
.hf-city { font-size: .85rem; color: var(--u-muted); }
.hf-line { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.hf-dur { font-size: .75rem; color: var(--u-teal); font-weight: 700; }
.hf-line-bar { width: 100px; height: 2px; background: var(--u-line); position: relative; }
.hf-line-bar i {
    position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
    transform: translate(-50%, -50%); color: var(--u-primary); font-size: .8rem;
}
.hf-stops { font-size: .7rem; color: var(--u-muted); }
.hf-buy { display: flex; align-items: center; gap: 1.25rem; }
.hf-from { font-size: .8rem; color: var(--u-muted); }
.hf-price { font-size: 1.3rem; font-weight: 900; color: var(--u-teal); }
.hf-book {
    background: var(--u-primary); color: #fff; border: none; padding: .6rem 1.2rem;
    border-radius: .6rem; font-weight: 700; font-size: .88rem; white-space: nowrap;
    text-decoration: none; transition: background .15s ease;
}
.hf-book:hover { background: var(--u-primary-dark); color: #fff; }
@media (max-width: 767.98px) {
    .hf-card { justify-content: center; text-align: center; }
    .hf-route { order: 2; }
    .hf-buy { order: 3; width: 100%; justify-content: space-between; }
}

/* Trending flight deals (endpoint-driven "fd" cards; matches the compact deal-grid design) */
.fd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.fd-card {
    background: #fff; border: 1px solid var(--u-line); border-radius: var(--u-radius);
    padding: 1.5rem 1.25rem; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.fd-card:hover { box-shadow: var(--u-shadow-lg); border-color: var(--u-primary); transform: translateY(-2px); }
.fd-route {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    font-size: 1.35rem; font-weight: 900; color: var(--u-navy); letter-spacing: .02em;
}
.fd-plane { color: var(--u-primary); font-size: 1.05rem; }
.fd-cities { font-size: 1rem; font-weight: 700; color: var(--u-ink); }
.fd-meta { font-size: .82rem; color: var(--u-muted); }
.fd-book {
    margin-top: auto; width: 100%; background: var(--u-primary); color: #fff; border: none;
    padding: .65rem 1rem; border-radius: .6rem; font-weight: 700; font-size: .9rem;
    white-space: nowrap; text-decoration: none; transition: background .15s ease;
}
.fd-book:hover { background: var(--u-primary-dark); color: #fff; }
.fd-grid .fd-card[role="button"] { cursor: pointer; }
.fd-card[role="button"]:focus-visible { outline: 2px solid var(--u-primary); outline-offset: 2px; }
@media (max-width: 991.98px) { .fd-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .fd-grid { grid-template-columns: 1fr; } }

.btn-primary {
    --bs-btn-bg: var(--u-primary);
    --bs-btn-border-color: var(--u-primary);
    --bs-btn-hover-bg: var(--u-primary-dark);
    --bs-btn-hover-border-color: var(--u-primary-dark);
    --bs-btn-active-bg: var(--u-primary-dark);
    --bs-btn-active-border-color: var(--u-primary-dark);
    --bs-btn-focus-shadow-rgb: 124, 58, 237;
    --bs-btn-disabled-bg: var(--u-primary);
    --bs-btn-disabled-border-color: var(--u-primary);
    background: var(--u-primary); border-color: var(--u-primary);
}
.btn-primary:hover { background: var(--u-primary-dark); border-color: var(--u-primary-dark); }
.btn-primary:active,
.btn-primary:focus,
.btn-primary:active:focus,
.btn-primary:focus-visible,
.btn-primary:first-child:active,
.btn-check:checked + .btn-primary {
    background: var(--u-primary-dark); border-color: var(--u-primary-dark);
}
.btn-outline-primary {
    --bs-btn-color: var(--u-primary);
    --bs-btn-border-color: var(--u-primary);
    --bs-btn-hover-bg: var(--u-primary);
    --bs-btn-hover-border-color: var(--u-primary);
    --bs-btn-active-bg: var(--u-primary);
    --bs-btn-active-border-color: var(--u-primary);
    color: var(--u-primary); border-color: var(--u-primary);
}
.btn-outline-primary:hover { background: var(--u-primary); border-color: var(--u-primary); }

/* ---------- App banner ---------- */
.app-banner { padding-block: 2.5rem; }
.app-banner-inner {
    background: linear-gradient(120deg, var(--u-primary), var(--u-primary-dark));
    color: #fff; border-radius: var(--u-radius); padding: 1.75rem;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.app-banner-inner h3 { font-weight: 800; margin: 0; }
.app-banner-inner p { margin: .25rem 0 0; opacity: .9; }
.app-badges { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.store-badge {
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
    padding: .5rem .8rem; border-radius: .5rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: .4rem;
}
.soon { font-size: .78rem; opacity: .85; }

/* ---------- Footer ---------- */
.site-footer {
    position: relative;
    /* Override Bootstrap link colors so no footer link falls back to blue */
    --bs-link-color: #b3beb9;
    --bs-link-hover-color: #ffffff;
    --bs-link-color-rgb: 179, 190, 185;
    --bs-link-hover-color-rgb: 255, 255, 255;
    background: linear-gradient(180deg, var(--u-navy) 0%, var(--u-navy-2) 100%);
    color: #cbd6d2;
    padding-block: 3.25rem 1.25rem;
    margin-top: 3rem;
    border-top: 3px solid var(--u-gold);
}
.site-footer a { color: #b3beb9; text-decoration: none; }
.site-footer a:hover { color: #fff; }
/* Force footer link colors over Bootstrap link/visited variables */
.site-footer a:link,
.site-footer a:visited { color: #b3beb9 !important; }
.site-footer a:hover,
.site-footer a:focus { color: #fff !important; }
.site-footer .footer-social a:link,
.site-footer .footer-social a:visited { color: #cbd6d2 !important; }
.site-footer .footer-social a:hover,
.site-footer .footer-social a:focus { color: #fff !important; }
.site-footer::before {
    content: "";
    position: absolute;
    inset-block-start: 0; inset-inline: 0;
    height: 3px;
    background: var(--u-gold);
}
.footer-brand { color: #fff; font-size: 1.35rem; }
.footer-tagline { color: #93a39d; font-size: .88rem; margin-top: .6rem; line-height: 1.6; }
.footer-heading {
    color: var(--u-gold); font-weight: 800; font-size: 1.1rem; margin-bottom: 1rem;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .55rem; }
.footer-links a {
    color: #b3beb9; font-size: .88rem;
    display: inline-flex; align-items: center; gap: .35rem;
    transition: color .15s ease, transform .15s ease;
}
.footer-links a i { font-size: .7rem; color: var(--u-accent); opacity: .85; }
.footer-links a:hover { color: #fff; transform: translateX(3px); }
[dir="rtl"] .footer-links a:hover { transform: translateX(-3px); }

/* disabled footer link (e.g. Umrah packages coming soon) */
.footer-link-disabled {
    color: #7f8e88; font-size: .88rem;
    display: inline-flex; align-items: flex-start; gap: .35rem;
    cursor: default; line-height: 1.35;
}
.footer-link-disabled i { font-size: .7rem; color: var(--u-accent); opacity: .55; margin-top: .32rem; }
.footer-soon-badge {
    margin-inline-start: .45rem; padding: .12rem .5rem;
    border-radius: 999px; font-size: .58rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    line-height: 1.4;
    background: linear-gradient(180deg, rgba(212, 175, 55, .22), rgba(212, 175, 55, .12));
    color: var(--u-gold);
    border: 1px solid rgba(212, 175, 55, .35);
    white-space: nowrap;
    align-self: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

/* social icons */
.footer-social { display: flex; gap: .5rem; margin-top: 1.1rem; flex-wrap: wrap; }
.footer-social a,
.footer-social .footer-social-icon {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .08); color: #cbd6d2; font-size: 1rem;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.footer-social a:hover,
.footer-social .footer-social-icon:hover { background: var(--u-primary); color: #fff; transform: translateY(-2px); }

/* payment methods */
.footer-payments {
    display: flex; gap: .6rem;
    align-items: center; flex-wrap: wrap;
}
.footer-payments-img {
    max-width: 100%; height: auto; display: block;
    background: #fff; border-radius: .6rem; padding: .55rem .7rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.footer-payments-col .footer-contact { margin-top: 1.1rem; }
.footer-payments-col .footer-social { margin-top: .8rem; }
.footer-pay-card {
    background: #fff; border-radius: .55rem; padding: .5rem .65rem;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    line-height: 0;
    flex: 0 0 auto;
    width: 72px; height: 48px;
}
.footer-pay-card img,
.footer-pay-card svg { display: block; width: 100%; height: 100%; object-fit: contain; }

/* newsletter */
.footer-newsletter .input-group { margin-bottom: 1rem; }
.footer-newsletter .input-group-text {
    background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .12); color: #93a39d;
}
.footer-newsletter .form-control {
    background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: #eef2f0;
}
.footer-newsletter .form-control::placeholder { color: #7f8e88; }
.footer-newsletter .form-control:focus {
    background: rgba(255, 255, 255, .09); color: #fff;
    border-color: var(--u-accent); box-shadow: none;
}
.btn-accent {
    background: var(--u-accent); border-color: var(--u-accent); color: var(--u-ink);
    font-weight: 700;
}
.btn-accent:hover { background: #b8931f; border-color: #b8931f; color: #1c2430; }

.footer-contact { display: flex; flex-direction: column; gap: .45rem; }
.footer-contact a {
    color: #eef2f0; font-size: .95rem; font-weight: 700;
    display: inline-flex; align-items: center; gap: .5rem;
}
.footer-contact a i { color: var(--u-gold); }
.footer-contact a:hover { color: #fff; }

.footer-divider { height: 1px; background: rgba(255, 255, 255, .1); margin-block: 1.75rem 1rem; }

.payment-icons { display: flex; gap: .5rem; flex-wrap: wrap; }
.pay-badge {
    background: rgba(255, 255, 255, .1); color: #eef2f0; border-radius: .4rem;
    padding: .3rem .55rem; font-size: .78rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: .3rem;
}
.footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .75rem;
    font-size: .82rem; color: #93a39d;
}
.footer-bottom-links a { color: #b3beb9; }
.footer-bottom-links a:hover { color: #fff; }
.footer-bottom-links .dot { margin-inline: .4rem; }

@media (max-width: 767.98px) {
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-social { justify-content: flex-start; }
}

/* ---------- Legal pages (Terms / Privacy) ---------- */
.legal-page { padding-block: 2.5rem 3.5rem; background: var(--u-bg); }
.legal-header {
    background: linear-gradient(180deg, var(--u-navy) 0%, var(--u-navy-2) 100%);
    color: #fff; border-radius: 1rem; padding: 2.25rem 2rem;
    border-top: 3px solid var(--u-gold); margin-bottom: 2rem;
}
.legal-eyebrow {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--u-gold); font-weight: 700; font-size: .82rem;
    text-transform: uppercase; letter-spacing: .04em;
}
.legal-title { color: #fff; font-weight: 800; margin: .6rem 0 .35rem; font-size: 2rem; }
.legal-updated { color: #93a39d; font-size: .85rem; margin: 0; }
.legal-body {
    background: #fff; border: 1px solid var(--u-border, #e5e9ef);
    border-radius: 1rem; padding: 2rem;
}
.legal-intro { font-size: 1.02rem; color: var(--u-ink); line-height: 1.7; margin-bottom: 1.5rem; }
.legal-section { margin-bottom: 1.6rem; }
.legal-section:last-child { margin-bottom: 0; }
.legal-section h2 { font-size: 1.12rem; font-weight: 700; color: var(--u-navy); margin-bottom: .5rem; }
.legal-section p { color: var(--u-muted, #64748B); line-height: 1.7; margin: 0; }
.legal-contact { margin-top: .75rem; }
.legal-contact a {
    display: inline-flex; align-items: center; gap: .5rem;
    color: var(--u-primary); font-weight: 700; text-decoration: none;
}
.legal-contact a i { color: var(--u-gold); }
.legal-contact a:hover { color: var(--u-primary-dark); }

@media (max-width: 575.98px) {
    .legal-header { padding: 1.75rem 1.35rem; }
    .legal-title { font-size: 1.6rem; }
    .legal-body { padding: 1.35rem; }
}

.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
    outline: none;
}

@media (max-width: 991.98px) {
    .section-head { flex-direction: column; align-items: flex-start; }
    .app-banner-inner { text-align: center; justify-content: center; }
}

/* ---------- Header register button ---------- */
.nav-register { font-weight: 700; }

/* ---------- Auth pages (Login / Register) ---------- */
.auth-section {
    background: linear-gradient(135deg, var(--u-primary-light), #fff 60%);
    padding-block: 3rem;
    min-height: 70vh;
    display: flex;
    align-items: center;
}
.auth-card {
    background: #fff;
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius);
    box-shadow: var(--u-shadow-lg);
    padding: 2rem;
    max-width: 440px;
    width: 100%;
}
.auth-card-wide { max-width: 620px; }
.auth-head { text-align: center; margin-bottom: 1.5rem; }
.auth-brand { justify-content: center; font-size: 1.4rem; margin-bottom: 1rem; }
.auth-title { font-weight: 800; font-size: 1.5rem; margin: 0; }
.auth-sub { color: var(--u-muted); font-size: .9rem; margin-top: .35rem; }

.activate-status { font-size: 3.25rem; line-height: 1; margin: .5rem 0 1rem; }
.activate-status--ok { color: var(--u-primary); }
.activate-status--error { color: #d9534f; }
.activate-status i { display: inline-block; }
.auth-link { color: var(--u-primary); text-decoration: none; }
.auth-link:hover { text-decoration: underline; }

.auth-section .input-icon > .form-control { padding-inline-start: 2.1rem; }

/* Phone: custom searchable dial-code picker + national number */
.phone-group { position: relative; flex-wrap: nowrap; }
.phone-code { position: relative; }
.phone-group .phone-code { flex: 0 0 auto; }
.phone-group .form-control {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.phone-code-trigger {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    min-width: 5.5rem;
    min-height: calc(1.5em + .75rem + 2px);
    padding: .5rem .7rem;
    background: #fff;
    border: 1px solid var(--u-line, #e6e8ec);
    border-radius: .5rem;
    color: var(--u-ink, #111);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
/* Attached style: when paired with a phone input inside .phone-group */
.phone-group .phone-code-trigger {
    width: auto;
    height: 100%;
    min-height: 0;
    border-inline-end: 0;
    border-radius: 0;
    border-start-start-radius: .5rem;
    border-end-start-radius: .5rem;
}
.phone-code-trigger:focus-visible { outline: 2px solid var(--u-primary); outline-offset: -1px; }
.phone-code-trigger .bi-chevron-down { font-size: .75rem; color: var(--u-muted, #6b7780); margin-inline-start: auto; }
.phone-code-label.is-placeholder,
.phone-code-label:empty { color: var(--u-muted, #6b7780); font-weight: 500; }

.phone-code-pop {
    position: absolute;
    z-index: 1050;
    inset-block-start: calc(100% + 4px);
    inset-inline-start: 0;
    width: 20rem;
    max-width: min(20rem, calc(100vw - 3rem));
    background: #fff;
    border: 1px solid var(--u-line, #e6e8ec);
    border-radius: .6rem;
    box-shadow: 0 12px 32px rgba(17, 17, 17, .14);
    overflow: hidden;
}

.phone-code-search {
    position: relative;
    padding: .55rem;
    border-block-end: 1px solid var(--u-line, #eef1f2);
}
.phone-code-search .bi-search {
    position: absolute;
    inset-inline-start: 1rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    color: var(--u-muted, #6b7780);
    font-size: .85rem;
}
.phone-code-search-input {
    width: 100%;
    padding-block: .45rem;
    padding-inline: 2rem .6rem;
    border: 1px solid var(--u-line, #e6e8ec);
    border-radius: .45rem;
    font-size: .9rem;
}
.phone-code-search-input:focus { outline: none; border-color: var(--u-primary); }

.phone-code-list {
    list-style: none;
    margin: 0;
    padding: .25rem;
    max-height: 15rem;
    overflow-y: auto;
}
.phone-code-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem .6rem;
    border-radius: .4rem;
    cursor: pointer;
    font-size: .9rem;
}
.phone-code-option:hover { background: var(--u-primary-light, #e8fbfa); }
.phone-code-option.is-selected { background: var(--u-primary-light, #e8fbfa); font-weight: 600; }
.phone-code-option .opt-name { color: var(--u-ink, #111); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-code-option .opt-code { color: var(--u-primary, #16b6ae); font-weight: 600; flex: 0 0 auto; }

/* BookNow searchable combo (Code + Country pickers, BedBank FE parity) */
.bn-combo { position: relative; }
.bn-combo-trigger {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    min-height: 2.6rem;
    padding: .5rem .7rem;
    background: #fff;
    border: 1px solid var(--u-line, #e6e8ec);
    border-radius: .5rem;
    color: var(--u-ink, #111);
    font: inherit;
    text-align: start;
    cursor: pointer;
}
.bn-combo-trigger:focus-visible { outline: 2px solid var(--u-primary); outline-offset: -1px; }
.bn-combo-trigger .bn-combo-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-combo-trigger .bn-combo-label.is-placeholder,
.bn-combo-trigger .bn-combo-label:empty { color: var(--u-muted, #6b7780); }
.bn-combo-trigger .bi-chevron-down { font-size: .75rem; color: var(--u-muted, #6b7780); flex: 0 0 auto; }

.bn-combo-pop {
    position: absolute;
    z-index: 1050;
    inset-block-start: calc(100% + 4px);
    inset-inline-start: 0;
    width: 20rem;
    max-width: min(20rem, calc(100vw - 3rem));
    background: #fff;
    border: 1px solid var(--u-line, #e6e8ec);
    border-radius: .6rem;
    box-shadow: 0 12px 32px rgba(17, 17, 17, .14);
    overflow: hidden;
}
.bn-combo-search {
    position: relative;
    padding: .55rem;
    border-block-end: 1px solid var(--u-line, #eef1f2);
}
.bn-combo-search .bi-search {
    position: absolute;
    inset-inline-start: 1rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    color: var(--u-muted, #6b7780);
    font-size: .85rem;
}
.bn-combo-search-input {
    width: 100%;
    padding-block: .45rem;
    padding-inline: 2rem .6rem;
    border: 1px solid var(--u-line, #e6e8ec);
    border-radius: .45rem;
    font-size: .9rem;
}
.bn-combo-search-input:focus { outline: none; border-color: var(--u-primary); }
.bn-combo-list {
    list-style: none;
    margin: 0;
    padding: .25rem;
    max-height: 15rem;
    overflow-y: auto;
}
.bn-combo-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem .6rem;
    border-radius: .4rem;
    cursor: pointer;
    font-size: .9rem;
}
.bn-combo-option:hover { background: var(--u-primary-light, #e8fbfa); }
.bn-combo-option.is-selected { background: var(--u-primary-light, #e8fbfa); font-weight: 600; }
.bn-combo-option .opt-name { color: var(--u-ink, #111); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-combo-option .opt-code { color: var(--u-primary, #16b6ae); font-weight: 600; flex: 0 0 auto; }
.pw-toggle {
    position: absolute;
    inset-inline-end: .6rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--u-muted);
    padding: 0;
    line-height: 1;
}
.password-field { padding-inline-end: 2.2rem; }

.auth-divider {
    display: flex; align-items: center; text-align: center;
    color: var(--u-muted); font-size: .82rem; margin-block: 1.1rem;
}
.auth-divider::before, .auth-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--u-line);
}
.auth-divider span { padding-inline: .75rem; }

.social-btn {
    font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
.social-btn i { color: #ea4335; }

@media (max-width: 575.98px) {
    .auth-card { padding: 1.5rem; }
}

/* ==========================================================================
   Umrah results page (Wego-style)
   ========================================================================== */
.umrah-searchbar {
    background: var(--u-primary-light);
    border-block-end: 1px solid var(--u-line);
    padding-block: .85rem;
    position: sticky; top: 0; z-index: 20;
}
.umrah-searchbar-form {
    display: flex; flex-wrap: wrap; align-items: end; gap: .6rem;
    background: #fff; border: 1px solid var(--u-line); border-radius: var(--u-radius);
    padding: .6rem .75rem; box-shadow: var(--u-shadow);
}
.usb-field { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 140px; min-width: 120px; }
.usb-field label { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--u-muted); font-weight: 700; }
.usb-field input[type="text"],
.usb-field input[type="date"] {
    border: 1px solid var(--u-line); border-radius: .5rem; padding: .4rem .55rem;
    font-size: .85rem; color: var(--u-ink); background: #fff;
}
.usb-static { font-size: .9rem; font-weight: 700; padding-block: .35rem; }
.usb-locked-value {
    font-size: .9rem; font-weight: 700; padding-block: .35rem;
    display: inline-flex; align-items: center; gap: .35rem; color: var(--u-ink);
}
.usb-locked-value i { color: var(--u-muted); font-size: .78rem; }
.usb-submit { flex: 0 0 auto; align-self: stretch; padding-inline: 1rem; }

.umrah-results { padding-block: 1.75rem; }

/* Recommended strip */
.reco-head { margin-bottom: .85rem; }
.reco-title { font-weight: 800; font-size: 1.15rem; margin: 0; }
.reco-sub { color: var(--u-muted); font-size: .82rem; margin: .15rem 0 0; }
.reco-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; margin-bottom: 1.5rem;
}
.reco-card {
    border: 1px solid var(--u-line); border-radius: var(--u-radius); overflow: hidden;
    background: #fff; box-shadow: var(--u-shadow); display: flex; flex-direction: column;
}
.reco-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.reco-media img { width: 100%; height: 100%; object-fit: cover; }
.reco-tier {
    position: absolute; inset-block-start: .5rem; inset-inline-start: .5rem;
    background: rgba(0,0,0,.55); color: #fff; font-size: .68rem; font-weight: 700;
    padding: .12rem .45rem; border-radius: .35rem;
}
.reco-price {
    position: absolute; inset-block-end: .5rem; inset-inline-end: .5rem;
    color: #fff; font-weight: 800; font-size: 1rem; text-shadow: 0 1px 4px rgba(0,0,0,.6);
    display: flex; flex-direction: column; align-items: end; line-height: 1.1;
}
.reco-price small { font-size: .6rem; font-weight: 600; }
.reco-body { padding: .6rem; display: flex; flex-direction: column; gap: .5rem; }
.reco-meta { font-size: .78rem; color: var(--u-muted); }

/* Filters sidebar */
.filters-card {
    border: 1px solid var(--u-line); border-radius: var(--u-radius); background: #fff;
    padding: 1rem; box-shadow: var(--u-shadow); position: sticky; top: 6.5rem;
}
.filters-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .35rem; }
.filters-head span { font-weight: 800; color: var(--u-primary); }
.filters-reset { background: none; border: none; color: var(--u-muted); font-size: .78rem; text-decoration: underline; padding: 0; }
.filter-count { font-size: .8rem; color: var(--u-muted); margin-bottom: 1rem; }
.filter-group { margin-bottom: 1rem; }
.filter-label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--u-muted); font-weight: 700; margin-bottom: .35rem; }
.filter-chips { display: flex; gap: .4rem; }
.filter-chip {
    flex: 1; border: 1px solid var(--u-line); background: #fff; color: var(--u-ink);
    border-radius: .5rem; padding: .35rem; font-size: .8rem; font-weight: 600;
}
.filter-chip.active { background: var(--u-primary); color: #fff; border-color: var(--u-primary); }
.budget-values { display: flex; justify-content: space-between; font-size: .78rem; color: var(--u-muted); margin-top: .25rem; }

/* Grouped package cards */
.pkg-group { margin-bottom: 1.75rem; }
.pkg-group-title { font-weight: 800; font-size: 1.02rem; display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.pkg-group-tier { color: var(--u-primary); }
.pkg-group-stars { color: var(--u-primary); font-size: .9rem; }

.itinerary-card { border: 1px solid var(--u-line); border-radius: var(--u-radius); padding: .85rem; box-shadow: var(--u-shadow); }
.itin-head { display: flex; justify-content: space-between; align-items: start; margin-bottom: .6rem; }
.itin-tier { display: flex; flex-direction: column; gap: .3rem; }
.itin-days { font-size: .74rem; color: var(--u-muted); display: inline-flex; align-items: center; gap: .3rem; }
.itin-price { text-align: end; display: flex; flex-direction: column; }
[dir="rtl"] .itin-price { text-align: start; }
.itin-price small { color: var(--u-muted); font-size: .68rem; }
.itin-price strong { color: var(--u-primary); font-size: 1.1rem; }

.itin-steps { list-style: none; padding: 0; margin: 0 0 .75rem; }
.itin-steps li { display: flex; gap: .55rem; padding-block: .3rem; position: relative; }
.itin-steps li:not(:last-child) .itin-icon::after {
    content: ""; position: absolute; inset-inline-start: .68rem; inset-block-start: 1.5rem;
    width: 1px; height: calc(100% - .6rem); background: var(--u-line);
}
.itin-icon {
    flex: 0 0 auto; width: 1.4rem; height: 1.4rem; border-radius: 50%;
    background: var(--u-primary-light); color: var(--u-primary);
    display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; position: relative;
}
.itin-text { display: flex; flex-direction: column; line-height: 1.25; }
.itin-line { font-size: .84rem; font-weight: 600; color: var(--u-ink); }
.itin-sub { font-size: .74rem; color: var(--u-muted); }
.itin-select { width: 100%; }

.no-results { text-align: center; color: var(--u-muted); padding: 2.5rem 1rem; }
.no-results i { font-size: 2rem; display: block; margin-bottom: .5rem; }

/* Branded empty state (zero results) */
.empty-state {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: .65rem; padding: 3.5rem 1.5rem; margin: 2rem auto; max-width: 640px;
    background: var(--u-primary-light); border: 1px solid var(--u-line);
    border-radius: var(--u-radius);
}
.empty-state .empty-state-icon {
    width: 4.5rem; height: 4.5rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--u-primary); box-shadow: var(--u-shadow);
}
.empty-state .empty-state-icon i { font-size: 2.1rem; }
.empty-state-title { font-size: 1.15rem; font-weight: 800; color: var(--u-ink); margin: 0; }
.empty-state-text { color: var(--u-muted); margin: 0; max-width: 32rem; }
.empty-state-tips {
    list-style: none; padding: 0; margin: .5rem 0 0; text-align: start;
    display: flex; flex-direction: column; gap: .4rem; color: var(--u-ink);
}
.empty-state-tips li { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.empty-state-tips i { color: var(--u-primary); }
.empty-state-cta { margin-top: .75rem; }

/* Trust strip */
.umrah-trust {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
    margin-top: 1.5rem; padding: 1.5rem; background: var(--u-bg-alt);
    border-radius: var(--u-radius);
}
.trust-item { display: flex; gap: .75rem; align-items: center; justify-content: center; }
.trust-item i { font-size: 1.6rem; color: var(--u-primary); }
.trust-item strong { display: block; font-size: .95rem; }
.trust-item span { font-size: .8rem; color: var(--u-muted); }

@media (max-width: 991.98px) {
    .reco-strip { grid-template-columns: repeat(2, 1fr); }
    .filters-card { position: static; margin-bottom: 1rem; }
}
@media (max-width: 575.98px) {
    .reco-strip { grid-template-columns: 1fr; }
    .umrah-trust { grid-template-columns: 1fr; }
    .usb-submit { flex: 1 1 100%; }
}

/* ==========================================================================
   Hotel results page (Wego-style SERP)
   ========================================================================== */
/* Sticky offsets for the SERP header. Only the compact filter bar stays pinned
   under the sticky navbar (~5rem) while scrolling; the larger search-summary bar
   scrolls away with the page (Wego/Almosafer-style SERP) to avoid a tall stack. */
.layout-wide { --serp-nav-h: 5rem; }
.hotel-searchbar {
    background: #fff; border-block-end: 1px solid var(--u-line);
    padding-block: .85rem; position: relative; z-index: 1029;
}
/* Match the results/filter bar width so the search widget lines up with the list below. */
.hotel-searchbar > .container { max-width: 1560px; padding-inline: 1.25rem; }
/* Wide layout pages (e.g. Hotels SERP): extend the top-bar and navbar to match the
   1560px content width so the header aligns with the search/results below. */
.layout-wide .top-bar-content,
.layout-wide .site-header .navbar > .container { max-width: 1560px; padding-inline: 1.25rem; }
.hotel-searchbar-form {
    display: flex; flex-wrap: wrap; align-items: end; gap: .6rem;
    border: 1px solid var(--u-line); border-radius: var(--u-radius);
    padding: .6rem .75rem; box-shadow: var(--u-shadow);
}
.hsb-field { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 150px; min-width: 130px; }
.hsb-field.hsb-grow { flex: 2 1 240px; }
.hsb-field.hsb-dates { flex: 1.6 1 220px; }
.hsb-field label { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--u-muted); font-weight: 700; }
.hsb-static { font-size: .9rem; font-weight: 700; padding-block: .4rem; }
.hsb-submit {
    flex: 0 0 auto; align-self: end;
    display: inline-flex; align-items: center; justify-content: center;
    height: 2.6rem; width: 2.9rem; padding: 0; border-radius: .55rem;
}
.hsb-submit i { font-size: .95rem; }

/* Interactive search widgets embedded in the sticky results search bar */
.hotel-searchbar-form .hotel-ac,
.hotel-searchbar-form .date-field,
.hotel-searchbar-form .occupancy { width: 100%; }
.hotel-searchbar-form .hotel-ac .form-control,
.hotel-searchbar-form .date-field .date-display,
.hotel-searchbar-form .occupancy .dropdown-toggle {
    font-size: .88rem; padding-block: .5rem;
}
.hotel-searchbar-form .occupancy .dropdown-toggle { width: 100%; }

.hotel-filterbar {
    background: #fff; border-block-end: 1px solid var(--u-line);
    padding-block: .55rem; position: sticky; top: 4.8rem; z-index: 25;
}
.hfb-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.hfb-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    border: 1px solid var(--u-line); background: #fff; border-radius: 2rem;
    padding: .4rem .8rem; font-size: .82rem; font-weight: 600; color: var(--u-ink);
}
.hfb-select {
    display: inline-flex; align-items: center; gap: .35rem;
    border: 1px solid var(--u-line); border-radius: 2rem; padding: .3rem .7rem; background: #fff;
}
.hfb-select i { color: var(--u-muted); font-size: .8rem; }
.hfb-select select { border: none; background: transparent; font-size: .82rem; font-weight: 600; color: var(--u-ink); outline: none; }
.hfb-search {
    display: inline-flex; align-items: center; gap: .35rem;
    border: 1px solid var(--u-line); border-radius: 2rem; padding: .3rem .7rem; background: #fff;
}
.hfb-search i { color: var(--u-muted); font-size: .8rem; }
.hfb-search input { border: none; background: transparent; font-size: .82rem; outline: none; min-width: 120px; }

.hotel-serp { padding-block: 1.25rem; background: var(--u-bg-alt); }
.serp-container { max-width: 1560px; margin-inline: auto; padding-inline: 1.25rem; }
.serp-layout { display: block; }

/* ---- Top horizontal filter bar ---- */
.serp-filterbar {
    position: sticky; top: var(--serp-nav-h, 5rem); z-index: 1028;
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--u-line); border-radius: var(--u-radius);
    box-shadow: var(--u-shadow); padding: .6rem .75rem; margin-bottom: 1rem;
}
.fb-search { display: flex; gap: .5rem; flex: 1 1 340px; min-width: 240px; }
.fb-input-icon { position: relative; display: flex; align-items: center; flex: 1 1 auto; }
.fb-input-icon i { position: absolute; inset-inline-start: .6rem; color: var(--u-muted); font-size: .82rem; pointer-events: none; }
.fb-input {
    width: 100%; border: 1px solid var(--u-line); border-radius: .55rem;
    padding: .5rem .7rem .5rem 1.9rem; font-size: .86rem;
}
[dir="rtl"] .fb-input { padding: .5rem 1.9rem .5rem .7rem; }
.fb-input:focus { outline: none; border-color: var(--u-primary); box-shadow: 0 0 0 3px var(--u-primary-light); }

.fb-filters { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.fb-drop { position: relative; }
.fb-drop > summary { list-style: none; }
.fb-drop > summary::-webkit-details-marker { display: none; }
.fb-chip {
    display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; user-select: none;
    border: 1px solid var(--u-line); background: #fff; color: var(--u-ink);
    border-radius: 999px; padding: .45rem .8rem; font-size: .83rem; font-weight: 600;
    transition: all .12s ease; white-space: nowrap;
}
.fb-chip:hover { border-color: var(--u-primary); }
.fb-chip i:first-child { color: var(--u-primary); font-size: .82rem; }
.fb-caret { color: var(--u-muted) !important; font-size: .68rem !important; transition: transform .15s ease; }
.fb-drop[open] > summary .fb-chip { border-color: var(--u-primary); background: var(--u-primary-light); }
.fb-drop[open] > summary .fb-caret { transform: rotate(180deg); }
.fb-drop.has-value > summary .fb-chip { border-color: var(--u-primary); background: var(--u-primary); color: #fff; }
.fb-drop.has-value > summary .fb-chip i { color: #fff !important; }
/* Per-chip count badge so the user can see exactly which filter has selections and how many. */
.fb-count {
    display: none; align-items: center; justify-content: center;
    min-width: 1.05rem; height: 1.05rem; padding: 0 .3rem; margin-inline-start: .1rem;
    border-radius: 999px; background: #fff; color: var(--u-primary);
    font-size: .68rem; font-weight: 800; line-height: 1;
}
.fb-drop.has-value > summary .fb-count { display: inline-flex; }
.fb-drop.has-value > summary .fb-caret { color: #fff !important; }
.fb-pop {
    position: absolute; inset-block-start: calc(100% + .4rem); inset-inline-start: 0; z-index: 40;
    background: #fff; border: 1px solid var(--u-line); border-radius: .7rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: .85rem; min-width: 220px;
}
.fb-pop-wide { min-width: 320px; max-width: 380px; max-height: 340px; overflow-y: auto; }
[dir="rtl"] .fb-pop { inset-inline-start: auto; inset-inline-end: 0; }
.fb-applied { margin-inline-start: .25rem; }
.fb-clear {
    display: inline-flex; align-items: center; gap: .35rem;
    border: none; background: transparent; color: var(--u-primary); cursor: pointer;
    font-size: .82rem; font-weight: 700; padding: .3rem .4rem;
}
.fb-clear:hover { text-decoration: underline; }
.fb-map-toggle {
    margin-inline-start: auto;
    display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
    border: 1px solid var(--u-primary); background: #fff; color: var(--u-primary-dark);
    border-radius: .55rem; padding: .5rem .85rem; font-size: .84rem; font-weight: 700;
    transition: all .12s ease; white-space: nowrap;
}
.fb-map-toggle:hover { background: var(--u-primary-light); }
.fb-map-toggle.is-active { background: var(--u-primary); border-color: var(--u-primary); color: #fff; }

/* ---- Split-screen body: results left, sticky map right ---- */
.serp-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.serp-body.show-map { grid-template-columns: minmax(0, 1fr) 40%; }
.serp-map[hidden] { display: none; }
@media (max-width: 991.98px) {
    .serp-body, .serp-body.show-map { grid-template-columns: 1fr; }
    .serp-body.show-map .serp-map { display: none; }
    .fb-map-toggle { display: none; }
}

.serp-count { font-size: .9rem; color: var(--u-muted); margin-bottom: .75rem; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem; }
.serp-count strong { color: var(--u-ink); }
.serp-applied {
    font-size: .74rem; font-weight: 700; color: var(--u-primary-dark);
    background: var(--u-primary-light); border: 1px solid var(--u-primary);
    border-radius: 999px; padding: .12rem .55rem;
}
.serp-applied[hidden] { display: none; }
.serp-sort { margin-inline-start: auto; display: inline-flex; align-items: center; gap: .4rem; color: var(--u-muted); }
.serp-sort select { border: 1px solid var(--u-line); border-radius: .45rem; padding: .3rem .5rem; font-size: .82rem; background: #fff; }

/* Filter popover inner controls (reused inside .fb-pop) */
.sf-input {
    width: 100%; border: 1px solid var(--u-line); border-radius: .5rem;
    padding: .5rem .7rem; font-size: .86rem;
}
.sf-input:focus { outline: none; border-color: var(--u-primary); box-shadow: 0 0 0 3px var(--u-primary-light); }
.sf-price-row { display: flex; align-items: center; gap: .5rem; }
.sf-price-row .sf-input { text-align: center; }
.sf-dash { color: var(--u-muted); }
/* Dual-thumb price range slider (draggable, no typing) */
.sf-price { min-width: 240px; padding-block: .2rem; }
.sf-price-vals { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-block-end: .7rem; }
.sf-price-val { font-size: .85rem; font-weight: 700; color: var(--u-ink); }
.sf-range { position: relative; height: 1.5rem; }
.sf-range-track {
    position: absolute; inset-inline: 0; inset-block-start: 50%; transform: translateY(-50%);
    height: 4px; border-radius: 999px; background: var(--u-line);
}
.sf-range-fill {
    position: absolute; inset-block-start: 50%; transform: translateY(-50%);
    height: 4px; border-radius: 999px; background: var(--u-primary);
}
.sf-range-input {
    position: absolute; inset-inline: 0; inset-block-start: 0; width: 100%; height: 1.5rem;
    margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.sf-range-input::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; pointer-events: auto;
    width: 18px; height: 18px; border-radius: 50%; background: #fff;
    border: 3px solid var(--u-primary); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.sf-range-input::-moz-range-thumb {
    pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff;
    border: 3px solid var(--u-primary); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.sf-range-input:focus { outline: none; }
.sf-range-input::-webkit-slider-runnable-track { background: transparent; }
.sf-range-input::-moz-range-track { background: transparent; }
.sf-stars, .sf-review { display: flex; flex-wrap: wrap; gap: .4rem; }
.sf-star-chip, .sf-review-chip {
    border: 1px solid var(--u-line); background: #fff; color: var(--u-ink);
    border-radius: 999px; padding: .28rem .6rem; font-size: .78rem; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; gap: .25rem; transition: all .12s ease;
}
.sf-star-chip i { color: #f5a623; font-size: .72rem; }
.sf-star-chip:hover, .sf-review-chip:hover { border-color: var(--u-primary); }
.sf-star-chip.is-active, .sf-review-chip.is-active { background: var(--u-primary); border-color: var(--u-primary); color: #fff; }
.sf-star-chip.is-active i { color: #fff; }
.sf-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.sf-chip {
    border: 1px solid var(--u-line); background: #fff; color: var(--u-ink);
    border-radius: 999px; padding: .3rem .65rem; font-size: .76rem; font-weight: 600; cursor: pointer;
    transition: all .12s ease;
}
.sf-chip:hover { border-color: var(--u-primary); }
.sf-chip.is-active { background: var(--u-primary); border-color: var(--u-primary); color: #fff; }
.serp-status { display: inline-flex; align-items: center; gap: .5rem; }
.serp-spinner {
    width: 1rem; height: 1rem; border-radius: 50%;
    border: 2px solid var(--u-primary-light); border-top-color: var(--u-primary);
    animation: serp-spin .7s linear infinite; display: inline-block;
}
@keyframes serp-spin { to { transform: rotate(360deg); } }
.serp-progress-pct { font-weight: 700; color: var(--u-primary); font-size: .85rem; }

/* Streaming search progress bar (BedBank-style) */
.serp-progress {
    height: 4px; width: 100%; background: var(--u-primary-light);
    border-radius: 2px; overflow: hidden; margin-bottom: 1rem;
}
.serp-progress[hidden] { display: none; }
.serp-progress-bar {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--u-primary), var(--u-primary-dark));
    border-radius: 2px; transition: width .4s ease;
}

/* Per-card "Loading price…" placeholder while the rate resolves */
.price-loading {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .82rem; font-weight: 600; color: var(--u-muted);
}
.price-loading-dot {
    width: .55rem; height: .55rem; border-radius: 50%;
    background: var(--u-primary); animation: price-pulse 1s ease-in-out infinite;
}
@keyframes price-pulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }

/* DB placeholder cards shown while priced results stream in */
.hotel-row.is-placeholder { opacity: .82; }
.hotel-row.is-placeholder .hotel-cta { pointer-events: none; opacity: .55; }

/* A DB hotel that never received a live price: keep it visible, drop the shimmer,
   and send the user to the detail page for the current rate. */
.hotel-row.is-settled { opacity: 1; }
.price-unavailable { font-size: .8rem; font-weight: 600; color: var(--u-muted); }

/* Skeleton loaders */
.serp-skeletons .hotel-row.skeleton { grid-template-columns: 220px 1fr 210px; pointer-events: none; }
.sk-box, .sk-line { background: linear-gradient(90deg, #eef2f4 25%, #f6f8f9 37%, #eef2f4 63%); background-size: 400% 100%; animation: sk-shimmer 1.3s ease infinite; border-radius: .35rem; }
.sk-box { min-height: 190px; }
.serp-skeletons .hotel-info { display: block; padding: .85rem 1rem; }
.serp-skeletons .hotel-side { padding: .85rem 1rem; }
.sk-line { height: .8rem; margin-bottom: .55rem; }
.sk-lg { width: 70%; height: 1.1rem; }
.sk-md { width: 50%; }
.sk-sm { width: 35%; }
@keyframes sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.serp-error { text-align: center; padding: 2.5rem 1rem; color: var(--u-muted); }
.serp-error i { font-size: 1.8rem; color: #dc2626; display: block; margin-bottom: .5rem; }

.hotel-row {
    display: grid; grid-template-columns: 240px 1fr; gap: 0;
    background: #fff; border: 1px solid var(--u-line); border-radius: var(--u-radius);
    overflow: hidden; box-shadow: var(--u-shadow); margin-bottom: .85rem;
    min-height: 210px;
}
/* Fixed image height pinned to the top of the card so every card shows an
   identically sized photo regardless of how many amenity/filter chips the
   info column renders (taller cards used to stretch the image via height:100%). */
.hotel-media { position: relative; height: 210px; align-self: start; overflow: hidden; }
.hotel-media img { width: 100%; height: 100%; object-fit: cover; }

/* Single hero image inside the card media */
.hotel-slide { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s ease; position: relative; z-index: 1; }
/* Keep a shimmering skeleton over the image until it actually loads, so a
   half-downloaded or broken image never flashes a torn/partial picture on the card. */
.hotel-slide.is-loading { opacity: 0; }
.hotel-media::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(100deg, var(--u-bg-alt) 30%, #eef4f4 50%, var(--u-bg-alt) 70%);
    background-size: 200% 100%; animation: hotel-img-shimmer 1.2s ease-in-out infinite;
}
/* Once the image is no longer loading, drop the shimmer backdrop. */
.hotel-media:not(:has(.hotel-slide.is-loading))::before { display: none; }
@keyframes hotel-img-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .hotel-media::before { animation-duration: 3s; } }
/* Top-left "Special Offer" ribbon on the card image (BedBank FE parity) */
.hotel-ribbon {
    position: absolute; inset-block-start: 0; inset-inline-start: 0;
    z-index: 3; overflow: hidden; width: 116px; height: 116px; pointer-events: none;
}
.hotel-ribbon span {
    position: absolute; display: block; width: 165px; padding: .3rem 0;
    top: 26px; left: -40px; right: auto;
    transform: rotate(-45deg);
    background: linear-gradient(180deg, var(--u-gold) 0%, var(--u-gold-dark) 100%);
    color: var(--u-navy); font-size: .66rem; font-weight: 800; letter-spacing: .03em;
    text-transform: uppercase; text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
/* RTL: the container mirrors to the top-right corner, so the diagonal must tilt the other
   way and anchor to the right using explicit physical props (avoids double-mirroring). */
[dir="rtl"] .hotel-ribbon span { transform: rotate(45deg); left: auto; right: -40px; }
.hotel-info { display: grid; grid-template-columns: 1fr 190px; }
.hotel-info-main { padding: .7rem .85rem; border-inline-end: 1px solid var(--u-line); }
.hotel-name { font-size: .95rem; font-weight: 800; margin: 0 0 .2rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.hotel-stars { color: var(--u-gold); font-size: .82rem; }
.hotel-loc { font-size: .8rem; color: var(--u-muted); display: flex; align-items: center; gap: .3rem; margin-bottom: .4rem; }
.hotel-distance { font-size: .76rem; color: var(--u-muted); display: flex; align-items: center; gap: .35rem; margin-bottom: .4rem; }
.hotel-distance i { color: var(--u-primary); font-size: .82rem; }
.hotel-veryclose { font-size: .72rem; font-weight: 700; color: var(--u-primary-dark); background: var(--u-primary-light); border-radius: 999px; padding: .1rem .5rem; margin-inline-start: .35rem; display: inline-flex; align-items: center; gap: .25rem; }
.hotel-veryclose i { color: var(--u-primary-dark); font-size: .78rem; }
.hotel-urgency { font-size: .78rem; font-weight: 700; color: #e11d48; display: flex; align-items: center; gap: .3rem; margin-bottom: .35rem; }
.hotel-loved { font-size: .78rem; color: var(--u-primary); display: flex; align-items: center; gap: .3rem; margin-bottom: .5rem; }
.hotel-amenities { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; max-height: 3.6rem; overflow: hidden; }
.hotel-amenity { font-size: .72rem; font-weight: 600; color: var(--u-primary-dark); background: var(--u-primary-light); border: 1px solid var(--u-primary-light); border-radius: 999px; padding: .18rem .55rem; display: inline-flex; align-items: center; gap: .3rem; line-height: 1.2; }
.hotel-amenity i { font-size: .8rem; color: var(--u-primary); }
.hotel-amenity-more { background: #fff; color: var(--u-muted); border-color: var(--u-line); }
.hotel-amenity-more i { color: var(--u-muted); }

/* 5.0-style rating badge at the top of the card title */
.hotel-rate-badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; font-weight: 800; color: var(--u-ink); background: var(--u-primary-light); border: 1px solid var(--u-primary); border-radius: .4rem; padding: .1rem .4rem; }
.hotel-rate-badge i { color: #f5a623; font-size: .72rem; }

/* "LOADING" badge over the image, mirroring the BedBank loading card */
.hotel-loading-badge { position: absolute; inset-block-start: .5rem; inset-inline-start: .5rem; display: inline-flex; align-items: center; gap: .3rem; background: #f5a623; color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: .2rem .5rem; border-radius: .35rem; box-shadow: var(--u-shadow); }
.hotel-loading-badge i { font-size: .72rem; }

/* Room / guest summary line shown while the price loads */
.hotel-booking-info { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: .35rem 0 .1rem; }
.hb-item { font-size: .78rem; font-weight: 600; color: var(--u-ink); display: inline-flex; align-items: center; gap: .3rem; }
.hb-item i { font-size: .82rem; color: var(--u-primary); }
.hotel-proscons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem .75rem; }
.pc-pro, .pc-con { font-size: .78rem; display: flex; align-items: center; gap: .3rem; }
.pc-pro { color: #15803d; }
.pc-con { color: #dc2626; }

.hotel-side { padding: .7rem .85rem; display: flex; flex-direction: column; align-items: end; text-align: end; gap: .3rem; }
[dir="rtl"] .hotel-side { text-align: start; align-items: start; }
.hotel-review { display: flex; align-items: center; gap: .5rem; }
.hr-text { display: flex; flex-direction: column; text-align: end; }
[dir="rtl"] .hr-text { text-align: start; }
.hr-text strong { font-size: .82rem; }
.hr-text small { font-size: .7rem; color: var(--u-muted); }
.hr-score {
    background: var(--u-gold); color: var(--u-navy, #0D1B2A); font-weight: 800; font-size: .9rem;
    border-radius: .4rem; padding: .2rem .4rem; min-width: 2.1rem; text-align: center;
}
.hotel-cancel { font-size: .74rem; color: #15803d; display: flex; align-items: center; gap: .25rem; }
.hotel-price { display: flex; flex-direction: column; align-items: end; margin-top: auto; }
[dir="rtl"] .hotel-price { align-items: start; }
.price-from { font-size: .72rem; color: var(--u-muted); font-weight: 600; }
.price-was { font-size: .78rem; color: var(--u-muted); text-decoration: line-through; }
.price-now { font-size: 1.2rem; font-weight: 800; color: var(--u-primary-dark); line-height: 1.15; }
.hotel-price small { font-size: .68rem; color: var(--u-muted); }
.hotel-cta { margin-top: .4rem; align-self: stretch; }

/* Map panel */
.serp-map { position: sticky; top: calc(var(--serp-nav-h, 5rem) + 3.5rem); height: calc(100vh - (var(--serp-nav-h, 5rem) + 4.5rem)); }
.map-canvas {
    position: relative; width: 100%; height: 100%; min-height: 480px;
    border-radius: var(--u-radius); overflow: hidden; border: 1px solid var(--u-line);
    background: var(--u-bg-alt); z-index: 1;
}
/* Map loading overlay: shown while search results stream in, hidden once results settle. */
.map-loader {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .75rem; border-radius: var(--u-radius);
    background: color-mix(in srgb, var(--u-bg-alt) 82%, transparent);
    backdrop-filter: blur(1.5px);
}
.map-loader[hidden] { display: none; }
.map-loader-spinner {
    width: 2.4rem; height: 2.4rem; border-radius: 50%;
    border: 3px solid var(--u-primary-light);
    border-top-color: var(--u-primary);
    animation: map-loader-spin .8s linear infinite;
}
.map-loader-text { font-size: .85rem; font-weight: 600; color: var(--u-primary-dark); }
@keyframes map-loader-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .map-loader-spinner { animation-duration: 2s; } }
.map-search-here {
    background: #fff; border: 1px solid var(--u-line); border-radius: 2rem;
    padding: .4rem .9rem; font-size: .8rem; font-weight: 600; color: var(--u-ink);
    box-shadow: var(--u-shadow); display: inline-flex; align-items: center; gap: .35rem;
    margin-block-start: 3.2rem; margin-inline-start: .5rem; cursor: pointer;
}
/* In-map location search box (find hotels near a typed address/place) */
.map-search {
    margin-block-start: .5rem; margin-inline-end: .5rem;
    width: min(19rem, 62vw); position: relative;
}
.map-search-box {
    display: flex; align-items: center; gap: .45rem;
    background: #fff; border: 1px solid var(--u-line); border-radius: 2rem;
    padding: .35rem .85rem; box-shadow: var(--u-shadow);
}
.map-search-box:focus-within { border-color: var(--u-primary); box-shadow: 0 0 0 2px var(--u-primary-light); }
.map-search-icon { color: var(--u-primary); font-size: .95rem; flex: 0 0 auto; }
.map-search-input {
    border: 0; outline: 0; background: transparent; width: 100%;
    font-size: .82rem; color: var(--u-ink); min-width: 0;
}
.map-search-input::placeholder { color: #6b7280; }
.map-search-menu {
    position: absolute; inset-block-start: calc(100% + .35rem); inset-inline: 0;
    background: #fff; border: 1px solid var(--u-line); border-radius: .75rem;
    box-shadow: var(--u-shadow); overflow: hidden; z-index: 1000; max-height: 15rem; overflow-y: auto;
}
.map-search-menu[hidden] { display: none; }
.map-search-item {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    padding: .5rem .75rem; border: 0; background: transparent; cursor: pointer;
    font-size: .8rem; color: var(--u-ink); text-align: start; line-height: 1.25;
}
.map-search-item i { color: var(--u-primary); flex: 0 0 auto; }
.map-search-item.is-active, .map-search-item:hover { background: var(--u-primary-light); }
.map-search-msg { padding: .55rem .75rem; font-size: .78rem; color: #6b7280; }
/* Custom Leaflet price marker */
.leaflet-price-pin {
    display: inline-block; transform: translate(-50%, -100%);
    background: #fff; border: 1px solid var(--u-primary); color: var(--u-primary);
    font-size: .78rem; font-weight: 800; padding: .18rem .5rem; border-radius: .4rem;
    box-shadow: var(--u-shadow); white-space: nowrap; cursor: pointer; transition: all .12s ease;
    position: relative;
}
.leaflet-price-pin::after {
    content: ""; position: absolute; inset-block-start: 100%; inset-inline-start: 50%;
    transform: translateX(-50%); border: 5px solid transparent; border-block-start-color: var(--u-primary);
}
.leaflet-price-pin.is-top { border-color: var(--u-primary-dark); color: var(--u-primary-dark); font-weight: 900; }
.leaflet-price-pin.is-active { background: var(--u-primary-dark); color: #fff; border-color: var(--u-primary-dark); z-index: 500; transform: translate(-50%, -100%) scale(1.08); }
/* Lightweight loading marker for placeholder hotels (before a price resolves) */
.leaflet-loading-pin {
    display: inline-flex; align-items: center; justify-content: center;
    transform: translate(-50%, -100%);
    width: 1.5rem; height: 1.5rem; border-radius: 50% 50% 50% 0;
    background: var(--u-primary-light); border: 1px solid var(--u-primary);
    color: var(--u-primary-dark); font-size: .8rem; box-shadow: var(--u-shadow);
    rotate: -45deg;
}
.leaflet-loading-pin i { rotate: 45deg; }
.hotel-row.is-highlight { outline: 2px solid var(--u-primary); outline-offset: -1px; }

/* Brand-themed marker cluster bubble (Leaflet.markercluster). Overrides the plugin default
   blue circles so dense result sets collapse into readable teal count bubbles. */
.hotel-cluster { background: transparent; }
.hotel-cluster-bubble {
    display: inline-flex; align-items: center; justify-content: center;
    transform: translate(-50%, -50%);
    border-radius: 50%; font-weight: 800; color: #fff;
    background: radial-gradient(circle at 30% 30%, var(--u-primary) 0%, var(--u-primary-dark) 100%);
    box-shadow: 0 0 0 4px rgba(22, 182, 174, .25), var(--u-shadow);
    border: 2px solid #fff;
}
.hotel-cluster-bubble.hcb-sm { width: 34px; height: 34px; font-size: .78rem; }
.hotel-cluster-bubble.hcb-md { width: 42px; height: 42px; font-size: .84rem; }
.hotel-cluster-bubble.hcb-lg { width: 52px; height: 52px; font-size: .9rem; }

/* Map marker popup card (mirrors BedBank FE hover card) */
.hotel-map-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: .6rem; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.hotel-map-popup .leaflet-popup-content { margin: 0; width: 220px !important; }
.hotel-map-popup .leaflet-popup-tip { background: #fff; }
.hotel-map-card { display: flex; flex-direction: column; font-family: inherit; }
.hmp-img { width: 100%; height: 108px; background-size: cover; background-position: center; background-color: var(--u-bg-alt); }
.hmp-body { padding: .55rem .65rem .65rem; }
.hmp-name { font-size: .86rem; font-weight: 800; color: var(--u-ink); line-height: 1.25; margin-bottom: .2rem; }
.hmp-loc { font-size: .74rem; color: var(--u-muted); display: flex; align-items: center; gap: .25rem; margin-bottom: .35rem; }
.hmp-meta { display: flex; align-items: center; gap: .55rem; margin-bottom: .35rem; flex-wrap: wrap; }
.hmp-stars { font-size: .76rem; font-weight: 700; color: var(--u-ink); display: inline-flex; align-items: center; gap: .2rem; }
.hmp-stars i { color: #f5a623; font-size: .72rem; }
.hmp-review { font-size: .72rem; font-weight: 700; color: var(--u-navy, #0D1B2A); background: var(--u-gold-soft); border: 1px solid var(--u-gold); border-radius: .3rem; padding: .05rem .35rem; }
.hmp-price { font-size: .9rem; color: var(--u-ink); }
.hmp-price span { font-size: .7rem; color: var(--u-muted); }
.hmp-price strong { color: var(--u-primary-dark); font-size: 1rem; }
.hmp-price-loading { font-size: .78rem; color: var(--u-muted); font-weight: 600; }

@media (max-width: 1199.98px) {
    .hotel-info { grid-template-columns: 1fr 180px; }
}
@media (max-width: 575.98px) {
    .hotel-row { grid-template-columns: 1fr; }
    .hotel-media { height: 180px; }
    .hotel-info { grid-template-columns: 1fr; }
    .hotel-info-main { border-inline-end: none; border-block-end: 1px solid var(--u-line); }
    .hotel-side { align-items: stretch; text-align: start; }
    .hotel-proscons { grid-template-columns: 1fr; }
    .hotel-searchbar-form { flex-direction: column; align-items: stretch; }
    .hsb-submit { width: 100%; }
}

/* ==========================================================================
   Hotel detail page ("View deal")
   ========================================================================== */
.hd-page { padding-block: 1.25rem 3rem; }
.hd-crumbs { margin-block-end: 1rem; }
.hd-crumbs a { color: var(--u-primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.hd-crumbs a:hover { color: var(--u-primary-dark); }

.hd-header {
    display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
    justify-content: space-between; margin-block-end: 1rem;
}
.hd-header-main { flex: 1 1 320px; min-width: 0; }
.hd-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.hd-name { font-size: 1.45rem; font-weight: 800; margin: 0; color: var(--u-ink); }
.hd-stars { color: var(--u-gold); display: inline-flex; gap: .1rem; font-size: .9rem; }
.hd-badge {
    display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700;
    padding: .15rem .5rem; border-radius: 999px; line-height: 1.4;
}
.hd-badge-deal { background: var(--u-gold); color: var(--u-navy); }
.hd-badge-cat { background: var(--u-gold-soft); color: var(--u-navy, #0D1B2A); border: 1px solid var(--u-gold); }
.hd-loc { color: var(--u-muted); margin-block-start: .3rem; display: flex; align-items: flex-start; gap: .35rem; font-size: .9rem; line-height: 1.35; }
.hd-loc i { color: var(--u-gold-dark); flex: 0 0 auto; margin-block-start: .1rem; }
.hd-promo { color: var(--u-navy, #0D1B2A); margin-block-start: .3rem; display: flex; align-items: center; gap: .35rem; font-weight: 600; }
.hd-promo i { color: var(--u-gold-dark); }

.hd-header-price {
    flex: 0 0 auto; display: flex; align-items: center; gap: .9rem;
    background: var(--u-primary-light); border: 1px solid var(--u-line);
    border-radius: var(--u-radius); padding: .55rem .8rem;
}
.hd-price-info { display: flex; flex-direction: column; align-items: flex-end; text-align: end; line-height: 1.15; }
.hd-price-label { color: var(--u-muted); font-size: .75rem; }
.hd-price-amount { color: var(--u-ink); font-size: 1.35rem; font-weight: 800; }
.hd-price-unit { color: var(--u-muted); font-size: .75rem; }
.hd-see-rooms { white-space: nowrap; }

/* Gallery */
.hd-gallery { margin-block-end: 1.25rem; }
.hd-gallery-main { position: relative; border-radius: var(--u-radius); overflow: hidden; background: var(--u-bg-alt); box-shadow: var(--u-shadow); }
.hd-gallery-main img { width: 100%; height: clamp(200px, 30vw, 340px); object-fit: cover; display: block; }
/* The no-image placeholder SVG is a small icon, not a photo: render it centered
   at a sensible size instead of cropping/upscaling it to fill the whole panel. */
.hd-gallery-main img[src$="no-image.svg"],
.hd-thumb img[src$="no-image.svg"] { object-fit: contain; padding: 1.25rem; }
.hd-gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%; border: none;
    background: rgba(255,255,255,.9); color: var(--u-ink); cursor: pointer;
    display: flex; align-items: center; justify-content: center; box-shadow: var(--u-shadow);
}
.hd-gallery-nav:hover { background: #fff; color: var(--u-primary); }
.hd-gallery-prev { inset-inline-start: .75rem; }
.hd-gallery-next { inset-inline-end: .75rem; }
.hd-gallery-thumbs { display: flex; gap: .5rem; margin-block-start: .5rem; overflow-x: auto; padding-block-end: .25rem; }
.hd-thumb {
    flex: 0 0 auto; width: 92px; height: 64px; border-radius: .5rem; overflow: hidden;
    border: 2px solid transparent; background: none; padding: 0; cursor: pointer;
}
.hd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hd-thumb.is-active { border-color: var(--u-primary); }
.hd-gallery-main img { cursor: zoom-in; }
.hd-gallery-zoom {
    position: absolute; inset-block-end: .75rem; inset-inline-end: .75rem;
    display: inline-flex; align-items: center; gap: .4rem; border: none;
    background: rgba(17,17,17,.7); color: #fff; font-size: .82rem; font-weight: 600;
    padding: .35rem .7rem; border-radius: 999px; cursor: pointer; backdrop-filter: blur(2px);
}
.hd-gallery-zoom:hover { background: rgba(17,17,17,.85); }
.hd-thumb-more { position: relative; }
.hd-thumb-more::after { content: ""; position: absolute; inset: 0; background: rgba(17,17,17,.55); }
.hd-thumb-more-count {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: .95rem; z-index: 1;
}

/* Full-screen lightbox */
.hd-lightbox {
    position: fixed; inset: 0; z-index: 1080; background: rgba(0,0,0,.92);
    display: flex; align-items: center; justify-content: center;
}
.hd-lightbox[hidden] { display: none; }
.hd-lightbox-stage { margin: 0; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.hd-lightbox-stage img { max-width: 92vw; max-height: 82vh; object-fit: contain; border-radius: .4rem; }
.hd-lightbox-counter { color: rgba(255,255,255,.85); font-size: .85rem; }
.hd-lightbox-close {
    position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem;
    width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,.14); color: #fff; font-size: 1.1rem;
}
.hd-lightbox-close:hover { background: rgba(255,255,255,.28); }
.hd-lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,.14); color: #fff; font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
}
.hd-lightbox-nav:hover { background: rgba(255,255,255,.28); }
.hd-lightbox-prev { inset-inline-start: 1rem; }
.hd-lightbox-next { inset-inline-end: 1rem; }
.hd-lightbox-data { display: none; }

/* Body layout */
.hd-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
.hd-main-col { display: flex; flex-direction: column; }
.hd-card { background: #fff; border: 1px solid var(--u-line); border-radius: var(--u-radius); box-shadow: var(--u-shadow); padding: 1.1rem 1.25rem; margin-block-end: 1.25rem; }

/* Rooms first, then tab bar + panels (prioritize room selection) */
.hd-rooms-card { order: 1; scroll-margin-top: 5.25rem; }
.hd-tabbar { order: 2; }
.hd-tabpanel { order: 3; }
.hd-tabbar {
    display: flex; flex-wrap: wrap; gap: .35rem; margin-block-end: 1rem;
    border-block-end: 2px solid var(--u-line); padding-block-end: 0;
}
.hd-tab {
    display: inline-flex; align-items: center; gap: .4rem; border: none; background: none;
    cursor: pointer; font: inherit; font-weight: 700; color: var(--u-muted);
    padding: .6rem .9rem; border-block-end: 2px solid transparent; margin-block-end: -2px;
}
.hd-tab i { font-size: .95rem; }
.hd-tab:hover { color: var(--u-primary-dark); }
.hd-tab.is-active { color: var(--u-primary-dark); border-block-end-color: var(--u-primary); }
.hd-tabpanel { display: none; }
.hd-tabpanel.is-active { display: block; }
.hd-section-title { font-size: 1.2rem; font-weight: 800; margin: 0 0 .75rem; color: var(--u-ink); }
.hd-subtitle { font-size: 1rem; font-weight: 700; margin: 1rem 0 .5rem; color: var(--u-ink); }
.hd-desc { color: var(--u-muted); line-height: 1.65; }
.hd-muted { color: var(--u-muted); }

/* Amenities */
.hd-amenities { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .4rem .75rem; }
.hd-amenities li { display: flex; align-items: center; gap: .45rem; color: var(--u-ink); font-size: .92rem; }
.hd-amenities li i { color: var(--u-primary); }
.hd-amenities-optional li i { color: var(--u-muted); }

/* Amenity category groups reuse the accordion shell with denser body padding */
.hd-amenity-groups .hd-acc-head { padding-block: .65rem; }
.hd-amenity-groups .hd-acc-body { padding: .75rem 1rem; }
.hd-amenity-groups .hd-acc-count {
    background: var(--u-primary-light); color: var(--u-primary-dark);
    border-radius: 999px; padding: .05rem .5rem; min-width: 1.5rem; text-align: center;
}

/* Rooms — collapsible accordion (BedBank-inspired) */
.hd-acc-list { display: flex; flex-direction: column; gap: .75rem; }
.hd-acc { border: 1px solid var(--u-line); border-radius: var(--u-radius); overflow: hidden; background: #fff; }
.hd-acc-head {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .85rem 1rem; background: var(--u-bg-alt); border: none; cursor: pointer;
    text-align: start; font: inherit; color: var(--u-ink);
}
.hd-acc-head:hover { background: var(--u-primary-light); }
.hd-acc.is-open .hd-acc-head { background: var(--u-primary-light); }
.hd-acc-title { display: flex; align-items: center; gap: .5rem; font-weight: 700; min-width: 0; }
.hd-acc-title > span:not(.hd-badge) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-acc-title i { color: var(--u-primary); flex: 0 0 auto; }
.hd-acc-meta { display: flex; align-items: center; gap: .75rem; flex: 0 0 auto; }
.hd-acc-count { color: var(--u-muted); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.hd-acc-from { display: flex; align-items: baseline; gap: .3rem; white-space: nowrap; }
.hd-acc-from-label { color: var(--u-muted); font-size: .75rem; }
.hd-acc-from-amount { color: var(--u-primary-dark); font-weight: 800; font-size: 1rem; }
.hd-acc-chevron { color: var(--u-muted); transition: transform .2s ease; flex: 0 0 auto; }
.hd-acc.is-open .hd-acc-chevron { transform: rotate(180deg); }
.hd-acc-body { display: none; }
.hd-acc.is-open .hd-acc-body { display: block; }

/* Multi-room occupancy sections: per-room collapsibles + shared footer */
.hd-occ-sections { display: flex; flex-direction: column; gap: .75rem; }
.hd-occ-section.is-selected { border-color: var(--u-primary); }
.hd-occ-section-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 700; color: var(--u-primary-dark); background: var(--u-primary-light); padding: .15rem .55rem; border-radius: 999px; }
.hd-occ-status { color: var(--u-muted); font-size: .8rem; font-weight: 600; white-space: nowrap; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
.hd-occ-status.is-filled { color: var(--u-primary-dark); }
.hd-occ-foot { margin-block-start: .25rem; }
.hd-occ-foot .hd-multiroom-foot { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.25rem; }
.hd-occ-foot .hd-multiroom-progress { color: var(--u-muted); font-size: .85rem; font-weight: 600; }
.hd-occ-foot .hd-multiroom-total { margin-inline-start: auto; display: inline-flex; flex-direction: column; align-items: flex-end; }
.hd-occ-foot .hd-multiroom-total-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--u-muted); }
.hd-occ-foot .hd-multiroom-total-amount { font-size: 1.35rem; font-weight: 800; color: var(--u-primary-dark); line-height: 1.1; }

.hd-room {
    display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
    align-items: flex-start; padding: .9rem 1rem; border-block-start: 1px solid var(--u-line);
    position: relative;
}
.hd-room[hidden] { display: none; }
.hd-acc-body > .hd-room:first-child { border-block-start: none; }
.hd-room.is-selected { background: var(--u-primary-light); }
/* Reserve a slim top strip only when a vendor ribbon is present so it never overlaps
   the room tags or the price column. */
.hd-room:has(.hd-vendor-ribbon) { padding-block-start: 1.75rem; }
.hd-room-info { flex: 1 1 260px; min-width: 0; }
.hd-vendor-ribbon {
    position: absolute; inset-block-start: 0; inset-inline-end: 0;
    display: flex; pointer-events: none; z-index: 0;
}
.hd-vendor-ribbon span {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    padding: .18rem .6rem; line-height: 1;
    color: var(--u-navy); background: rgba(212, 175, 55, .18);
    border: 1px solid var(--u-gold); border-block-start: none; border-inline-end: none;
    border-start-start-radius: 0; border-start-end-radius: 0;
    border-end-start-radius: 10px; border-end-end-radius: 0;
}
.hd-room-name { font-weight: 700; color: var(--u-ink); margin-block-end: .35rem; display: flex; align-items: center; gap: .4rem; }
.hd-room-name i { color: var(--u-primary); }
.hd-room-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.hd-tag {
    display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem;
    padding: .15rem .5rem; border-radius: 999px; background: var(--u-bg-alt);
    color: var(--u-muted); border: 1px solid var(--u-line);
}
.hd-tag i { font-size: .8rem; }
.hd-tag-meal { color: var(--u-primary-dark); }
.hd-tag-ok { color: #1a7f4b; border-color: #bfe8cf; background: #eefaf1; }
.hd-tag-warn { color: #a15c00; border-color: #f0dcb8; background: #fdf6e9; }
.hd-room-cancel { color: var(--u-muted); font-size: .82rem; margin-block-start: .4rem; }
.hd-room-scarce { color: #a15c00; font-size: .82rem; margin-block-start: .4rem; display: flex; align-items: center; gap: .3rem; }
.hd-room-cta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; text-align: end; gap: .2rem; }
.hd-room-price { font-size: 1.25rem; font-weight: 800; color: var(--u-ink); }
.hd-room-total { font-size: .78rem; color: var(--u-muted); }
.hd-select-room { margin-block-start: .35rem; }

/* Room filters (name search + meal buttons) */
.hd-room-filters {
    display: flex; flex-wrap: wrap; gap: 1.25rem;
    align-items: flex-start; justify-content: space-between;
    padding: 0 0 1rem;
    border-block-end: 1px solid var(--u-line);
    margin-block-end: 1rem;
}
.hd-filter-name { flex: 1 1 300px; min-width: 240px; }
.hd-filter-meals { flex: 1 1 300px; }
.hd-filter-label { display: block; font-size: .85rem; font-weight: 600; color: var(--u-muted); margin-block-end: .4rem; }
.hd-filter-input { position: relative; }
.hd-filter-input i {
    position: absolute; inset-inline-start: .7rem; inset-block-start: 50%;
    transform: translateY(-50%); color: var(--u-muted); font-size: .9rem;
}
.hd-filter-input .form-control { padding-inline-start: 2rem; }
.hd-meal-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.hd-meal-btn {
    font-size: .82rem; font-weight: 600;
    color: var(--u-primary); background: #fff;
    border: 1px solid var(--u-primary); border-radius: 2rem;
    padding: .3rem .85rem; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.hd-meal-btn:hover { background: var(--u-primary-light); }
.hd-meal-btn.is-active { background: var(--u-primary); color: #fff; }

/* Cancellation policy button */
.hd-cancel-policy {
    margin-block-start: .3rem;
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .8rem; font-weight: 600;
    color: var(--u-primary);
    background: #fff;
    border: 1px solid var(--u-primary);
    border-radius: .5rem;
    padding: .3rem .6rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.hd-cancel-policy:hover { background: var(--u-primary-light); }
.hd-cancel-policy i { font-size: .9rem; }

/* Cancellation policy as a clean chip-style button (BedBank FE parity) */
.bn-policy-link {
    display: inline-flex; align-items: center; gap: .35rem;
    border: 1px solid var(--u-primary); background: var(--u-primary-light);
    padding: .32rem .7rem; border-radius: 999px;
    font: inherit; font-size: .82rem; color: var(--u-primary-dark); font-weight: 600;
    text-decoration: none; cursor: pointer; line-height: 1;
    transition: background .15s ease, color .15s ease;
}
.bn-policy-link i { font-size: .95rem; }
.bn-policy-link:hover { background: var(--u-primary); color: #fff; text-decoration: none; }

/* Cancellation policy modal */
.hd-cp-overlay {
    position: fixed; inset: 0; z-index: 1080;
    display: flex; align-items: center; justify-content: center;
    background: rgba(17, 17, 17, .55);
    padding: 1rem;
}
.hd-cp-overlay[hidden] { display: none; }
body.hd-cp-open { overflow: hidden; }
.hd-cp-dialog {
    background: #fff;
    border-radius: .9rem;
    width: 100%; max-width: 560px;
    max-height: 85vh; overflow-y: auto;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .25);
}
.hd-cp-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; border-block-end: 1px solid var(--u-line);
}
.hd-cp-title { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--u-ink); }
.hd-cp-close {
    border: none; background: #f1f3f5; color: var(--u-ink);
    width: 2rem; height: 2rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.hd-cp-close:hover { background: #e2e6ea; }
.hd-cp-body { padding: 1.25rem; }
.hd-cp-rule {
    border: 1px solid var(--u-line); border-radius: .6rem;
    padding: .85rem 1rem; margin-block-end: .85rem;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.hd-cp-rule:last-child { margin-block-end: 0; }
.hd-cp-rule-row { display: flex; gap: .6rem; margin-block-end: .5rem; }
.hd-cp-rule-row:last-child { margin-block-end: 0; }
.hd-cp-rule-row i { flex: 0 0 auto; color: var(--u-primary); margin-block-start: .15rem; }
.hd-cp-rule-row i.text-danger { color: #dc3545; }
.hd-cp-rule-label { font-weight: 700; color: var(--u-ink); }
.hd-cp-rule-value { color: var(--u-muted); }
.hd-cp-rule-fee { color: var(--u-ink); }

/* Grouped-by-name room cards: name/occupancy on one side, all rates nested */
.hd-grouped { display: flex; flex-direction: column; }
.hd-room-card {
    display: flex; flex-wrap: wrap; border-block-start: 1px solid var(--u-line);
}
.hd-room-card[hidden] { display: none; }
.hd-acc-body > .hd-grouped > .hd-room-card:first-child { border-block-start: none; }
.hd-room-card-head {
    flex: 1 1 220px; min-width: 200px; padding: 1rem;
    border-inline-end: 1px solid var(--u-line);
}
.hd-room-card-name {
    font-weight: 700; color: var(--u-ink); display: flex; align-items: center;
    gap: .4rem; margin-block-end: .5rem;
}
.hd-room-card-name i { color: var(--u-primary); }
.hd-room-card-occ { display: flex; flex-wrap: wrap; gap: .35rem; }
.hd-occ-badge {
    display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem;
    padding: .2rem .6rem; border-radius: 999px; color: #fff; background: var(--u-primary);
}
.hd-occ-badge-child { background: var(--u-primary-dark); }
.hd-room-card-rates { flex: 3 1 320px; min-width: 260px; display: flex; flex-direction: column; }
.hd-room-card-rates > .hd-room:first-child { border-block-start: none; }
.hd-list > .hd-room:first-child { border-block-start: none; }
@media (max-width: 640px) {
    .hd-room-card-head { border-inline-end: none; border-block-end: 1px solid var(--u-line); }
}

/* Rooms header + grouped/list view toggle */
.hd-rooms-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .75rem; margin-block-end: .9rem;
}
.hd-rooms-head .hd-section-title { margin: 0; }
.hd-view-toggle {
    display: inline-flex; border: 1px solid var(--u-line); border-radius: 999px;
    overflow: hidden; background: var(--u-bg-alt);
}
.hd-view-btn {
    display: inline-flex; align-items: center; gap: .35rem; border: 0; cursor: pointer;
    background: transparent; color: var(--u-muted); font-size: .82rem; font-weight: 600;
    padding: .4rem .85rem; line-height: 1;
}
.hd-view-btn i { font-size: .9rem; }
.hd-view-btn.is-active { background: var(--u-primary); color: #fff; }
.hd-room { cursor: pointer; transition: background .15s ease; }
.hd-room:hover { background: var(--u-primary-light); }
.hd-room.is-selected {
    background: var(--u-primary-light);
    box-shadow: inset 3px 0 0 var(--u-primary);
}
[dir="rtl"] .hd-room.is-selected { box-shadow: inset -3px 0 0 var(--u-primary); }

/* List view: flatten the group headers, show every rate as a flat list */
.hd-rooms-card.is-list-view .hd-acc-head { pointer-events: none; }
.hd-rooms-card.is-list-view .hd-acc-chevron { display: none; }

/* Selection summary / confirm bar */
.hd-room-selbar {
    position: sticky; inset-block-end: 0; margin-block-start: 1rem;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: .75rem; padding: .95rem 1.1rem; border-radius: .7rem;
    background: linear-gradient(0deg, var(--u-primary-light), #fff 85%);
    border: 2px solid var(--u-primary);
    box-shadow: 0 8px 24px rgba(14,143,137,.18), 0 -2px 10px rgba(0,0,0,.05);
}

/* Multi-room selection panel (occupancy with more than one room) */
.hd-multiroom {
    position: sticky; inset-block-end: 0; margin-block-start: 1rem; z-index: 20;
    border: 2px solid var(--u-primary); border-radius: .8rem; padding: 1rem 1.1rem;
    background: linear-gradient(0deg, var(--u-primary-light), #fff 85%);
    box-shadow: 0 8px 24px rgba(14,143,137,.18), 0 -2px 10px rgba(0,0,0,.05);
}
.hd-multiroom-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-block-end: .75rem; }
.hd-multiroom-title { font-weight: 800; color: var(--u-ink); display: inline-flex; align-items: center; gap: .4rem; }
.hd-multiroom-title i { color: var(--u-primary); }
.hd-multiroom-progress { font-size: .85rem; font-weight: 700; color: var(--u-primary-dark); }
.hd-multiroom-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; }
.hd-slot {
    border: 1px dashed var(--u-primary); border-radius: .6rem; padding: .6rem .7rem;
    background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.hd-slot.is-filled { border-style: solid; }
.hd-slot.is-target { box-shadow: 0 0 0 2px var(--u-primary-light); }
.hd-slot-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-block-end: .35rem; }
.hd-slot-title { font-weight: 700; color: var(--u-ink); }
.hd-slot-occ { font-size: .75rem; color: var(--u-muted); }
.hd-slot-empty { font-size: .82rem; color: var(--u-muted); font-style: italic; }
.hd-slot-picked { display: flex; align-items: center; gap: .4rem; }
.hd-slot-name { font-weight: 600; color: var(--u-ink); font-size: .85rem; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-slot-price { font-weight: 800; color: var(--u-primary-dark); font-size: .85rem; white-space: nowrap; }
.hd-slot-clear { border: none; background: transparent; color: var(--u-muted); cursor: pointer; padding: .1rem; line-height: 1; }
.hd-slot-clear:hover { color: #b42318; }
.hd-multiroom-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-block-start: .85rem; }
.hd-multiroom-total { display: flex; flex-direction: column; }
.hd-multiroom-total-label { font-size: .75rem; color: var(--u-muted); }
.hd-multiroom-total-amount { font-weight: 800; font-size: 1.15rem; color: var(--u-ink); }
.hd-multiroom-confirm { min-width: 200px; }
.hd-multiroom-msg { margin-block-start: .6rem; font-size: .85rem; padding: .5rem .7rem; border-radius: .5rem; }
.hd-multiroom-msg.is-warn { background: #fef3f2; color: #b42318; }
.hd-multiroom-msg.is-info { background: var(--u-primary-light); color: var(--u-primary-dark); }
.hd-room-selbar-info { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; min-width: 0; flex: 1 1 260px; }
.hd-room-selbar-label {
    font-size: .72rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .04em;
    background: var(--u-primary); padding: .25rem .55rem; border-radius: .35rem; flex-shrink: 0;
}
.hd-room-selbar-main { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.hd-room-selbar-name { font-weight: 700; color: var(--u-ink); }
.hd-room-selbar-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .75rem; font-size: .8rem; color: var(--u-muted); }
.hd-room-selbar-meta > span { display: inline-flex; align-items: center; gap: .3rem; }
.hd-room-selbar-meta i { color: var(--u-primary); }
.hd-room-selbar-refund.is-refundable span { color: #1a7f4b; }
.hd-room-selbar-refund.is-refundable i { color: #1a7f4b; }
.hd-room-selbar-refund.is-nonrefundable i { color: #a15c00; }
.hd-room-selbar-policy { display: inline-flex; align-items: center; gap: .3rem; border: 0; background: transparent; padding: 0; font-size: .8rem; font-weight: 600; color: var(--u-primary-dark); cursor: pointer; text-decoration: underline; }
.hd-room-selbar-policy i { color: var(--u-primary); }
.hd-room-selbar-actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.hd-room-selbar-pricebox { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
[dir="rtl"] .hd-room-selbar-pricebox { align-items: flex-start; }
.hd-room-selbar-price { font-weight: 800; font-size: 1.15rem; color: var(--u-primary-dark); }
.hd-room-selbar-pricenote { font-size: .72rem; color: var(--u-muted); }
.hd-room-selbar-msg { flex: 1 1 100%; font-size: .84rem; }
.hd-room-selbar-msg.is-warn { color: #a15c00; }
.hd-room-selbar-msg.is-info { color: var(--u-primary-dark); }
.hd-room-confirm { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.hd-confirm-spin .spin { display: inline-block; animation: hd-spin 1s linear infinite; }
@keyframes hd-spin { to { transform: rotate(360deg); } }

/* Policies */
.hd-policies { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.hd-policies li { display: flex; flex-direction: column; gap: .15rem; color: var(--u-muted); font-size: .9rem; }
.hd-policies strong { color: var(--u-ink); }

/* Sidebar */
.hd-side-col { position: sticky; top: 5.25rem; display: flex; flex-direction: column; gap: 1.25rem; }

/* Booking card */
.hd-booking { margin-block-end: 0; padding: 0; overflow: hidden; }
.hd-booking-head {
    background: linear-gradient(135deg, var(--u-primary) 0%, var(--u-primary-dark) 100%);
    color: #fff; padding: .9rem 1.1rem; display: flex; flex-direction: column; gap: .25rem;
}
.hd-booking-title { font-size: .95rem; font-weight: 700; opacity: .95; }
.hd-booking-price { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.hd-booking-from { font-size: .78rem; opacity: .9; }
.hd-booking-price strong { font-size: 1.5rem; font-weight: 800; }
.hd-booking-unit { font-size: .78rem; opacity: .9; }
.hd-booking-facts { list-style: none; padding: 1rem 1.1rem; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.hd-booking-facts li { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem; color: var(--u-muted); font-size: .88rem; }
.hd-booking-facts li i { color: var(--u-primary); flex: 0 0 auto; }
.hd-booking-facts strong { color: var(--u-ink); font-weight: 700; }
.hd-booking-guests {
    background: var(--u-primary-light); border-radius: .5rem; padding: .5rem .65rem !important;
    color: var(--u-primary-dark) !important; font-weight: 700; align-items: center !important;
}
.hd-booking-guests i { color: var(--u-primary-dark) !important; }
.hd-booking-cta { display: block; width: calc(100% - 2.2rem); margin: 0 1.1rem 1.1rem; text-align: center; }

/* In-page "edit your stay" (change dates + guests, re-search this hotel) */
.hd-stay-edit-bar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem;
    padding: 1rem 1.1rem; margin-block-end: 1rem;
    background: var(--u-primary-light); border: 1px solid var(--u-line); border-radius: .7rem;
}
.hd-stay-edit-bar .hd-stay-field { display: flex; flex-direction: column; gap: .3rem; }
.hd-stay-edit-bar .hd-stay-field > label { font-size: .74rem; font-weight: 700; color: var(--u-primary-dark); text-transform: uppercase; letter-spacing: .02em; }
.hd-stay-edit-bar .hd-stay-field-dates { flex: 1 1 260px; min-width: 220px; }
.hd-stay-edit-bar .hd-stay-field-guests { flex: 1 1 200px; min-width: 180px; }
.hd-stay-edit-bar .occupancy,
.hd-stay-edit-bar .date-range-field { width: 100%; }
.hd-stay-edit-bar .hd-stay-edit-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    flex: 0 0 auto; white-space: nowrap; height: calc(2.25rem + 2px);
}
@media (max-width: 575.98px) {
    .hd-stay-edit-bar { flex-direction: column; align-items: stretch; }
    .hd-stay-edit-bar .hd-stay-edit-submit { width: 100%; }
}

/* Location map card */
.hd-map-card { margin-block-end: 0; }
.hd-map-address { color: var(--u-muted); font-size: .85rem; display: flex; align-items: flex-start; gap: .35rem; margin-block-end: .65rem; }
.hd-map-address i { color: var(--u-primary); flex: 0 0 auto; margin-block-start: .1rem; }
.hd-map-embed { border-radius: .5rem; overflow: hidden; border: 1px solid var(--u-line); margin-block-end: .65rem; }
.hd-map-embed iframe { width: 100%; height: 180px; border: 0; display: block; }
.hd-map-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--u-primary); font-weight: 600; text-decoration: none; }
.hd-map-link:hover { color: var(--u-primary-dark); }

/* Empty / unavailable */
.hd-empty { padding-block: 4rem 5rem; display: flex; justify-content: center; }
.hd-empty-card { text-align: center; max-width: 460px; width: 100%; background: #fff; border: 1px solid var(--u-line); border-radius: 1rem; box-shadow: 0 10px 40px rgba(17,17,17,.06); padding: 2.5rem 2rem; }
.hd-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: var(--u-primary-light); margin-block-end: 1.25rem; }
.hd-empty-icon i { font-size: 2.4rem; line-height: 1; color: var(--u-primary); }
.hd-empty-card h1 { font-size: 1.35rem; font-weight: 800; color: var(--u-ink); margin: 0 0 .6rem; }
.hd-empty-card p { color: var(--u-muted); font-size: .95rem; line-height: 1.55; margin: 0 auto 1.6rem; max-width: 34ch; }
.hd-empty-hotel { display: inline-flex; align-items: center; gap: .4rem; font-size: 1rem !important; font-weight: 700; color: var(--u-ink) !important; margin: 0 auto .7rem !important; }
.hd-empty-hotel i { color: var(--u-primary); }
.hd-empty-btn { display: inline-flex; align-items: center; gap: .45rem; padding-inline: 1.6rem; }

/* When the "no longer available" card offers a re-search form, widen it and stack the fields. */
.hd-empty-card:has(.hd-empty-edit) { max-width: 560px; }
.hd-empty-edit { text-align: start; margin: 0 0 1.1rem; padding-block-start: 1.4rem; border-block-start: 1px solid var(--u-line); flex-direction: column; align-items: stretch; }
.hd-empty-edit .hd-stay-field-dates,
.hd-empty-edit .hd-stay-field-guests { flex: 1 1 100%; min-width: 0; }
.hd-empty-edit .hd-stay-edit-submit { width: 100%; }
.hd-empty-card .hd-empty-btn { margin-block-start: .2rem; }

@media (max-width: 900px) {
    .hd-body { grid-template-columns: 1fr; }
    .hd-side-col { position: static; }
    .hd-header-price { width: 100%; justify-content: space-between; }
}

/* ---- BookNow page ---- */
.bn-page { padding-block: 1.25rem 2.5rem; }
.bn-title { font-size: 1.6rem; font-weight: 800; color: var(--u-ink); margin-block: .5rem 1rem; }
.bn-grid { display: grid; grid-template-columns: 1fr 360px; gap: 1.25rem; align-items: start; }
.bn-card { background: #fff; border: 1px solid var(--u-line); border-radius: .7rem; padding: 1.1rem 1.25rem; }
.bn-side { position: sticky; top: 5.25rem; }
.bn-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.bn-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.bn-field-wide { grid-column: 1 / -1; }
.bn-field label { font-size: .82rem; font-weight: 600; color: var(--u-ink); }
.bn-err { color: #c0392b; font-size: .78rem; }
.bn-validation { color: #c0392b; font-size: .84rem; }
.bn-validation:empty { display: none; }
.bn-alert { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; border-radius: .5rem; font-size: .86rem; margin-block-end: .85rem; }
.bn-alert-warn { color: #a15c00; background: #fdf6e9; border: 1px solid #f0dcb8; }
.bn-alert-error { color: #c0392b; background: #fdeceb; border: 1px solid #f3c6c2; }

.bn-summary-hotel { display: flex; gap: .7rem; align-items: center; margin-block-end: .85rem; }
.bn-summary-hotel img { width: 64px; height: 64px; border-radius: .5rem; object-fit: cover; flex: 0 0 auto; }
.bn-summary-name { font-weight: 800; color: var(--u-ink); }
.bn-summary-loc { font-size: .8rem; color: var(--u-muted); margin-block-start: .2rem; }
.bn-summary-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; border-block: 1px solid var(--u-line); padding-block: .8rem; }
.bn-summary-facts li { display: flex; align-items: center; gap: .5rem; font-size: .86rem; color: var(--u-ink); }
.bn-summary-facts i { color: var(--u-primary); width: 1.1rem; text-align: center; }
.bn-summary-total { display: flex; align-items: baseline; justify-content: space-between; margin-block: .85rem; }
.bn-summary-total strong { font-size: 1.4rem; font-weight: 800; color: var(--u-primary-dark); }
.bn-submit { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.bn-secure { display: flex; align-items: center; gap: .35rem; font-size: .76rem; color: var(--u-muted); margin-block-start: .55rem; }

/* Embedded MyFatoorah card payment (BedBank FE parity) */
.bn-payment { margin-block-start: 1rem; padding-block-start: 1rem; border-block-start: 1px solid var(--u-line); }
.bn-payment-title { display: flex; align-items: center; gap: .45rem; font-size: 1rem; font-weight: 700; margin-block-end: .75rem; }
.bn-payment-title i { color: var(--u-primary); }
.bn-card-element { min-height: 90px; }
.bn-payment-loading { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--u-muted); margin-block: .6rem; }
.bn-alert-error[hidden] { display: none; }

.bn-confirm-card { max-width: 520px; margin: 3rem auto; text-align: center; background: #fff; border: 1px solid var(--u-line); border-radius: .8rem; padding: 2rem 1.5rem; }
.bn-confirm-icon { font-size: 3rem; color: #1a7f4b; }
.bn-confirm-card h1 { font-size: 1.5rem; font-weight: 800; margin-block: .6rem .4rem; }
.bn-confirm-sub { color: var(--u-muted); margin-block-end: 1rem; }
.bn-confirm-ref { display: inline-flex; flex-direction: column; gap: .2rem; padding: .6rem 1rem; background: var(--u-primary-light); border-radius: .5rem; margin-block-end: 1.2rem; }
.bn-confirm-ref span { font-size: .78rem; color: var(--u-muted); text-transform: uppercase; letter-spacing: .03em; }
.bn-confirm-ref strong { font-size: 1.1rem; color: var(--u-ink); }

/* ConfirmBooking page */
.cb-card { max-width: 640px; margin: 2.5rem auto; background: #fff; border: 1px solid var(--u-line); border-radius: .9rem; overflow: hidden; }
.cb-hero { text-align: center; padding: 2rem 1.5rem 1.5rem; background: var(--u-primary-light); }
.cb-hero-icon { font-size: 3rem; color: var(--u-primary); }
.cb-hero-title { font-size: 1.5rem; font-weight: 800; margin-block: .6rem .35rem; }
.cb-hero-sub { color: var(--u-muted); margin-block-end: 1rem; }
.cb-ref { display: inline-flex; flex-direction: column; gap: .2rem; padding: .6rem 1.1rem; background: #fff; border: 1px solid var(--u-line); border-radius: .5rem; }
.cb-ref-label { font-size: .74rem; color: var(--u-muted); text-transform: uppercase; letter-spacing: .03em; }
.cb-ref-value { font-size: 1.15rem; color: var(--u-ink); }
.cb-summary { padding: 1.25rem 1.5rem; }
.cb-summary-hotel { display: flex; gap: .85rem; align-items: center; margin-block-end: 1rem; }
.cb-summary-hotel img { width: 84px; height: 64px; object-fit: cover; border-radius: .5rem; }
.cb-summary-name { font-weight: 700; }
.cb-summary-loc { font-size: .82rem; color: var(--u-muted); display: flex; align-items: center; gap: .3rem; }
.cb-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.cb-facts li { display: flex; align-items: center; gap: .5rem; font-size: .86rem; color: var(--u-ink); }
.cb-facts i { color: var(--u-primary); width: 1.1rem; text-align: center; }
.cb-total { display: flex; align-items: baseline; justify-content: space-between; margin-block-start: 1rem; padding-block-start: .85rem; border-block-start: 1px solid var(--u-line); }
.cb-total strong { font-size: 1.4rem; font-weight: 800; color: var(--u-primary-dark); }
.cb-actions { padding: 0 1.5rem 1.75rem; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.cb-actions .btn { min-width: 200px; }

@media (max-width: 900px) {
    .bn-grid { grid-template-columns: 1fr; }
    .bn-side { position: static; }
    .bn-fields { grid-template-columns: 1fr; }
    .bn-field-phone .bn-subfield-code { flex: 0 0 7rem; }
}

/* ---- BookNow: Rooms Selected + traveller entry ---- */
.bn-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }

.bn-important { border: 1px solid #f0dcb8; background: #fdf8ec; border-radius: .55rem; margin-block-end: 1rem; overflow: hidden; }
.bn-important-head { display: flex; align-items: center; gap: .5rem; padding: .6rem .85rem; font-weight: 700; color: #a15c00; border-block-end: 1px solid #f0dcb8; }
.bn-important-head i { color: #d69412; }
.bn-important-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.2rem; height: 1.2rem; padding-inline: .35rem; background: #e8a917; color: #fff; border-radius: .35rem; font-size: .74rem; }
.bn-important-list { list-style: none; margin: 0; padding: .6rem .85rem; display: flex; flex-direction: column; gap: .35rem; }
.bn-important-list li { font-size: .84rem; color: var(--u-ink); }

.bn-room-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem 1.25rem; padding-block: .5rem; }
.bn-room-fact { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.bn-room-fact-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; flex: 0 0 auto; border-radius: 50%; background: var(--u-primary-light); color: var(--u-primary-dark); font-size: 1.05rem; }
.bn-room-fact-label { font-size: .82rem; font-weight: 700; color: var(--u-ink); }
.bn-room-fact-value { font-size: .84rem; color: var(--u-muted); }
.bn-room-fact--full { grid-column: 1 / -1; }
.bn-room-fact--full > div { flex: 1 1 auto; min-width: 0; }
.bn-room-fact-sub { color: var(--u-muted); }
.bn-room-fact-price { margin-inline-start: auto; font-weight: 800; color: var(--u-primary-dark); white-space: nowrap; }

/* Multi-room: one card per selected room with its own occupancy/meal/refund/policy */
.bn-room-cards { display: flex; flex-direction: column; gap: .75rem; padding-block: .5rem; }
.bn-room-card { border: 1px solid var(--u-line); border-radius: .7rem; padding: .85rem 1rem; background: var(--u-bg); }
.bn-room-card-head { display: flex; align-items: center; gap: .75rem; }
.bn-room-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; flex: 0 0 auto; border-radius: 50%; background: var(--u-primary-light); color: var(--u-primary-dark); font-size: 1.05rem; }
.bn-room-card-titles { flex: 1 1 auto; min-width: 0; }
.bn-room-card-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--u-muted); font-weight: 700; }
.bn-room-card-name { font-size: .95rem; font-weight: 700; color: var(--u-ink); }
.bn-room-card-price { margin-inline-start: auto; font-weight: 800; color: var(--u-primary-dark); white-space: nowrap; }
.bn-room-card-facts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-block-start: .6rem; padding-block-start: .6rem; border-block-start: 1px dashed var(--u-line); }
.bn-room-card-fact { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--u-muted); }
.bn-room-card-fact i { color: var(--u-primary-dark); }
.bn-room-card-policy { margin-inline-start: auto; }

/* Room card tuned for the narrow payment order-summary column */
.pay-room-cards { padding-block: 0; margin-block-start: .35rem; }
.pay-room-cards .bn-room-card { padding: .9rem; }
.pay-room-cards .bn-room-card-head { align-items: flex-start; flex-wrap: nowrap; gap: .6rem; }
.pay-room-cards .bn-room-card-titles { flex: 1 1 auto; }
.pay-room-cards .bn-room-card-name { font-size: .92rem; line-height: 1.3; }
.pay-room-cards .bn-room-card-price { flex: 0 0 auto; font-size: .95rem; align-self: flex-start; margin-block-start: .1rem; }
.pay-room-cards .bn-room-card-facts { gap: .45rem .75rem; margin-block-start: .7rem; padding-block-start: .7rem; }
.pay-room-cards .bn-room-card-fact { font-size: .8rem; }
.pay-room-cards .bn-room-card-policy { margin-inline-start: 0; flex-basis: 100%; }

.bn-room-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1.25rem; margin-block-start: .85rem; padding: .85rem 1rem 0; border-block-start: 1px solid var(--u-line); }
.bn-room-foot-left { display: flex; align-items: center; gap: .6rem .9rem; flex-wrap: wrap; }
.bn-room-refund { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; font-weight: 700; }
.bn-room-refund.is-refundable { color: #1a7f4b; }
.bn-room-refund.is-nonrefundable { color: #c0392b; }
.bn-room-foot-right { display: inline-flex; flex-direction: column; align-items: flex-end; gap: .1rem; margin-inline-start: auto; }
.bn-room-subtotal-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--u-muted); }
.bn-room-subtotal { font-size: 1.45rem; font-weight: 800; color: var(--u-primary-dark); line-height: 1.1; }

/* Phone: dial code + number side by side */
.bn-field-phone { display: flex; flex-direction: row; gap: .6rem; align-items: start; }
.bn-field-phone .bn-subfield { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.bn-field-phone .bn-subfield-code { flex: 0 0 8.5rem; }
.bn-field-phone .bn-subfield-number { flex: 1 1 auto; }
.bn-subfield label { font-size: .82rem; font-weight: 600; color: var(--u-ink); }

.bn-traveller-tabs { display: inline-flex; gap: .25rem; border: 1px solid var(--u-line); border-radius: .55rem; padding: .2rem; margin-block: .5rem 1rem; }
.bn-tab { border: 0; background: transparent; padding: .4rem .95rem; border-radius: .4rem; font-size: .85rem; font-weight: 600; color: var(--u-ink); cursor: pointer; }
.bn-tab.is-active { background: var(--u-primary); color: #fff; }
.bn-tab-pane { display: none; }
.bn-tab-pane.is-active { display: block; }
/* "Write full name" toggle (BedBank FE single-traveller parity) */
.bn-fullname-toggle { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none; font-size: .85rem; font-weight: 600; color: var(--u-ink); margin-block-end: .85rem; }
.bn-fullname-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.bn-fullname-slider { position: relative; inline-size: 38px; block-size: 21px; background: var(--u-line); border-radius: 21px; transition: background-color .2s; flex-shrink: 0; }
.bn-fullname-slider::after { content: ''; position: absolute; inline-size: 15px; block-size: 15px; border-radius: 50%; background: #fff; inset-block-start: 3px; inset-inline-start: 3px; transition: transform .2s; }
.bn-fullname-toggle input:checked + .bn-fullname-slider { background: var(--u-primary); }
.bn-fullname-toggle input:checked + .bn-fullname-slider::after { transform: translateX(17px); }
[dir="rtl"] .bn-fullname-toggle input:checked + .bn-fullname-slider::after { transform: translateX(-17px); }
.bn-fullname-toggle input:focus-visible + .bn-fullname-slider { outline: 2px solid var(--u-primary); outline-offset: 2px; }
.bn-traveller-hint { font-size: .82rem; color: var(--u-muted); margin-block-end: .85rem; }
.bn-traveller-block { border: 1px solid var(--u-line); border-radius: .55rem; padding: .85rem 1rem; margin-block-end: .85rem; }
.bn-traveller-title { display: flex; align-items: center; gap: .4rem; font-size: .92rem; font-weight: 700; color: var(--u-ink); margin-block-end: .7rem; }
.bn-traveller-title i { color: var(--u-primary); }

/* All-travellers: lead guest + companion blocks (BedBank FE parity) */
.bn-lead-block .bn-traveller-title { font-size: 1rem; padding-block-end: .55rem; border-block-end: 1px solid var(--u-line); }
.bn-field-hint { display: block; font-size: .72rem; color: var(--u-muted, #6b7280); margin-block-start: .3rem; line-height: 1.35; }
.bn-companion-toggle-wrap { margin-block: .35rem .85rem; }
.bn-companion-toggle-wrap .bn-fullname-toggle { margin-block-end: 0; }
.bn-companion-section[hidden] { display: none; }
.bn-companion-block { background: var(--u-primary-light, #e8fbfa); border-color: var(--u-line); }
.bn-companion-block .bn-traveller-title { padding-block-end: .55rem; border-block-end: 1px solid var(--u-line); }

@media (max-width: 620px) {
    .bn-room-facts { grid-template-columns: 1fr; }
}

/* My Bookings dashboard */
.mb-page { padding-block: 2rem 3.5rem; }
.mb-page > .container { max-width: 1280px; }
.mb-head { max-width: none; margin-inline: 0; margin-block-end: 1.5rem; }
.mb-title { font-size: 1.7rem; font-weight: 800; display: flex; align-items: center; gap: .6rem; letter-spacing: -.01em; }
.mb-title i { color: var(--u-primary); }
.mb-sub { color: var(--u-muted); margin-block-start: .35rem; font-size: .98rem; }

/* Two-column account shell: left nav + main content (reference parity) */
.mb-greeting { max-width: 1240px; margin: 0 auto 1.1rem; font-weight: 700; font-size: 1.05rem; color: var(--u-ink); }
.mb-shell { max-width: none; margin-inline: auto; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 2rem; align-items: start; }
.mb-aside { position: sticky; inset-block-start: 6.25rem; background: #fff; border: 1px solid var(--u-line); border-radius: 1rem; padding: 1rem; box-shadow: 0 .4rem 1.1rem rgba(15,23,42,.05); }
/* Sidebar identity header */
.mb-aside-head { display: flex; align-items: center; gap: .7rem; padding-block-end: .9rem; margin-block-end: .9rem; border-block-end: 1px solid var(--u-line); }
.mb-aside-avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--u-primary-light); color: var(--u-primary-dark); font-weight: 800; font-size: 1rem; letter-spacing: .02em; }
.mb-aside-id { min-width: 0; display: flex; flex-direction: column; }
.mb-aside-name { font-weight: 700; color: var(--u-ink); font-size: .98rem; line-height: 1.2; }
.mb-aside-email { font-size: .78rem; color: var(--u-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sidebar bookings count badge on the nav link */
.mb-nav { display: flex; flex-direction: column; gap: .25rem; }
.mb-nav-link { display: flex; align-items: center; gap: .7rem; padding: .75rem .95rem; border-radius: .7rem; color: var(--u-muted); font-weight: 600; font-size: .96rem; text-decoration: none; transition: background .16s ease, color .16s ease; }
.mb-nav-link > i { font-size: 1.1rem; }
.mb-nav-link > span:first-of-type { flex: 1 1 auto; }
.mb-nav-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .45rem; border-radius: 999px; background: var(--u-bg-alt); color: var(--u-muted); font-size: .78rem; font-weight: 700; }
.mb-nav-link.is-active .mb-nav-badge { background: #fff; color: var(--u-primary-dark); }
.mb-nav-link:hover { background: var(--u-bg-alt); color: var(--u-ink); }
.mb-nav-link.is-active { background: var(--u-primary-light); color: var(--u-primary-dark); }
.mb-nav-link--danger:hover { background: #fbe7e7; color: #a12525; }
/* Inside the shell the main-column blocks are full width (override the standalone centering) */
.mb-main { min-width: 0; background: #fff; border: 1px solid var(--u-line); border-radius: 1rem; padding: 1.5rem 1.6rem; box-shadow: 0 .4rem 1.1rem rgba(15,23,42,.05); }
.mb-main .mb-head,
.mb-main .mb-tabs,
.mb-main .mb-statusbar,
.mb-main .mb-search,
.mb-main .mb-grid,
.mb-main .mb-section-title { max-width: none; margin-inline: 0; }
.mb-main .mb-tabs { width: fit-content; margin-inline: auto; }
.mb-main .mb-statusbar { justify-content: center; margin-block: 0 1.5rem; }

/* Client-side search box */
.mb-search { position: relative; max-width: none; margin: 0 0 1.5rem; }
.mb-search-icon { position: absolute; inset-block-start: 50%; inset-inline-start: .95rem; transform: translateY(-50%); color: var(--u-muted); pointer-events: none; }
.mb-search-input { width: 100%; padding: .85rem 1rem .85rem 2.6rem; border: 1px solid var(--u-line); border-radius: .75rem; font-size: .96rem; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: border-color .16s ease, box-shadow .16s ease; }
.mb-search-input:focus { outline: none; border-color: var(--u-primary); box-shadow: 0 0 0 3px var(--u-primary-light); }
[dir="rtl"] .mb-search-input { padding: .85rem 2.6rem .85rem 1rem; }
.mb-empty { max-width: 520px; margin: 2.5rem auto; text-align: center; color: var(--u-muted); background: #fff; border: 1px solid var(--u-line); border-radius: .9rem; padding: 2.25rem 1.5rem; }
.mb-empty i { font-size: 2.75rem; color: var(--u-primary); }
.mb-empty p { margin-block: .9rem 1.1rem; }
.mb-list { max-width: none; margin-inline: 0; display: grid; gap: 1rem; }
.mb-grid { max-width: none; margin-inline: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.mb-tile { display: flex; flex-direction: column; text-align: start; padding: 0; background: #fff; border: 1px solid var(--u-line); border-radius: .9rem; overflow: hidden; cursor: pointer; text-decoration: none; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.mb-tile:hover { box-shadow: 0 .6rem 1.4rem rgba(124,58,237,.14); border-color: var(--u-primary); transform: translateY(-2px); }
.mb-tile:focus-visible { outline: 2px solid var(--u-primary); outline-offset: 2px; }
.mb-tile-media { position: relative; height: 130px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--u-primary-light), #eef1fb); overflow: hidden; }
.mb-tile-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-tile-media-fallback { display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: var(--u-primary); }
.mb-tile-media--flight { background: linear-gradient(135deg, var(--u-primary-dark), var(--u-primary)); }
.mb-tile-media--flight .mb-tile-media-fallback { color: #fff; opacity: .85; }
/* Status badge sits in the top corner of the media area */
.mb-tile-media > .mb-status { position: absolute; inset-block-start: .7rem; inset-inline-end: .7rem; z-index: 2; box-shadow: 0 .2rem .5rem rgba(15,23,42,.14); }
/* Tile body + metadata */
.mb-tile-body { display: flex; flex-direction: column; gap: .35rem; padding: .85rem .95rem .95rem; flex: 1 1 auto; }
.mb-tile-name { font-size: .96rem; font-weight: 700; color: var(--u-ink); line-height: 1.25; }
.mb-tile-loc, .mb-tile-dates { display: flex; align-items: center; gap: .4rem; font-size: .86rem; color: var(--u-muted); }
.mb-tile-loc > i, .mb-tile-dates > i { color: var(--u-primary); font-size: .95rem; }
.mb-tile-nights { color: var(--u-muted); }
.mb-tile-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-block-start: auto; padding-block-start: .85rem; border-block-start: 1px solid var(--u-line); }
.mb-tile-paid { display: flex; flex-direction: column; gap: .1rem; }
.mb-tile-paid-label { font-size: .74rem; color: var(--u-muted); }
.mb-tile-paid-value { font-size: 1.1rem; font-weight: 800; color: var(--u-primary); }
.mb-tile-cta { display: inline-flex; align-items: center; gap: .15rem; font-size: .86rem; font-weight: 700; color: var(--u-primary); white-space: nowrap; }
.mb-tile-cta i { font-size: 1.1rem; }
.mb-tile:hover .mb-tile-cta { text-decoration: underline; }
/* Airline logo presentation on the flight booking tile: a larger, elevated white
   card that lifts the carrier crest cleanly off the purple gradient. */
.mb-tile-airline { display: inline-flex; align-items: center; justify-content: center; }
.mb-tile-airline .b2e-airline-logo-wrap.b2e-airline-logo {
    width: 68px; height: 68px; padding: 12px; border-radius: 18px;
    background: #fff !important; border: 1px solid rgba(255,255,255,.65);
    box-shadow: 0 .55rem 1.4rem rgba(13,27,42,.28), inset 0 0 0 1px rgba(15,23,42,.04) !important;
}
.mb-tile-airline .b2e-airline-logo-img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.mb-tile-airline .b2e-airline-logo-fallback { font-size: .95rem; border-radius: 8px; }
.mb-tile-media--flight:hover .b2e-airline-logo-wrap.b2e-airline-logo { transform: translateY(-1px); }
.mb-tile-airline .b2e-airline-logo-wrap.b2e-airline-logo { transition: transform .18s ease, box-shadow .18s ease; }
.mb-section-title { max-width: 1080px; margin: 1.75rem auto 1rem; display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; font-weight: 700; color: var(--u-ink); }
.mb-section-title > i { color: var(--u-primary); }
.mb-tabs { max-width: 1080px; margin: 0 auto 1.25rem; width: fit-content; display: flex; gap: .3rem; padding: .3rem; background: #fff; border: 1px solid var(--u-line); border-radius: .85rem; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.mb-tab { display: inline-flex; align-items: center; gap: .5rem; border: 0; background: transparent; color: var(--u-muted); font-weight: 600; font-size: .95rem; padding: .55rem 1.1rem; border-radius: .6rem; cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.mb-tab > i { font-size: 1rem; }
.mb-tab:hover { color: var(--u-ink); background: var(--u-bg-alt); }
.mb-tab.is-active { background: var(--u-primary); color: #fff; box-shadow: 0 .25rem .7rem rgba(124,58,237,.28); }
.mb-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: var(--u-bg-alt); color: var(--u-ink); font-size: .78rem; font-weight: 700; }
.mb-tab.is-active .mb-tab-count { background: rgba(255,255,255,.22); color: #fff; }
.mb-tabs-wrap { text-align: center; }
.mb-pane { display: none; }
.mb-pane.is-active { display: block; }
.mb-empty--inline { margin-block: 1.5rem; }

/* Secondary status filter row (Active & Upcoming / Completed / Cancelled) */
.mb-statusbar { max-width: 1080px; margin: -0.5rem auto 1.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.mb-sfilter { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--u-line); background: #fff; color: var(--u-muted); font-weight: 600; font-size: .9rem; padding: .45rem .95rem; border-radius: 999px; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.mb-sfilter > i { font-size: .95rem; }
.mb-sfilter:hover { color: var(--u-ink); border-color: var(--u-primary); }
.mb-sfilter.is-active { background: var(--u-primary); color: #fff; border-color: var(--u-primary); }
.mb-sfilter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .4rem; border-radius: 999px; background: var(--u-bg-alt); color: var(--u-ink); font-size: .74rem; font-weight: 700; }
.mb-sfilter.is-active .mb-sfilter-count { background: rgba(255,255,255,.25); color: #fff; }
.fbd-back { display: inline-flex; align-items: center; gap: .4rem; margin-block-end: 1rem; color: var(--u-primary-dark); text-decoration: none; font-weight: 600; }
.fbd-back:hover { text-decoration: underline; }
.fbd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-block-end: 1.25rem; }
.fbd-ref { display: inline-flex; gap: .35rem; margin-inline-end: 1rem; font-size: .9rem; color: var(--u-muted); }
.fbd-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--u-navy), var(--u-navy-2)); color: #fff; border-radius: 1rem; padding: 1.5rem 1.6rem; margin-block-end: 1.25rem; }
.fbd-hero::after { content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -10%; width: 260px; height: 260px; background: radial-gradient(circle, rgba(212,175,55,.22), transparent 70%); pointer-events: none; }
.fbd-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; position: relative; z-index: 1; }
.fbd-hero-route { display: flex; align-items: center; gap: .9rem; font-size: 1.7rem; font-weight: 800; }
.fbd-hero-route i { color: var(--u-gold); font-size: 1.3rem; }
.fbd-hero-city { display: block; font-size: .82rem; font-weight: 500; color: rgba(255,255,255,.72); }
.fbd-hero-meta { display: flex; flex-wrap: wrap; gap: .55rem; margin-block-start: .9rem; position: relative; z-index: 1; }
.fbd-hero-chip { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: .3rem .8rem; font-size: .82rem; font-weight: 500; }
.fbd-hero-chip i { color: var(--u-gold); }
.fbd-hero-ref { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; text-align: end; }
.fbd-hero-ref .fbd-ref { color: rgba(255,255,255,.72); margin-inline-end: 0; }
.fbd-hero-ref .fbd-ref strong { color: var(--u-gold); }
.fbd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
.fbd-card { background: #fff; border: 1px solid var(--u-line); border-radius: .9rem; padding: 1.1rem 1.2rem; margin-block-end: 1.25rem; }
.fbd-card-title { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; font-weight: 700; color: var(--u-ink); margin-block: 0 .9rem; }
.fbd-card-title > i { color: var(--u-primary); width: 1.1rem; text-align: center; flex: 0 0 auto; }
.fbd-card-subtitle { display: flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 700; color: var(--u-ink); margin-block: 0 .85rem; }
.fbd-card-subtitle > i { color: var(--u-primary); font-size: 1rem; width: 1.1rem; text-align: center; flex: 0 0 auto; }
.fbd-muted { color: var(--u-muted); font-size: .9rem; }
.fbd-segment { border: 1px solid var(--u-line); border-radius: .7rem; padding: 1rem 1.1rem; margin-block-end: .75rem; }
.fbd-segment:last-child { margin-block-end: 0; }
.fbd-seg-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-block-end: .75rem; }
.fbd-seg-dir { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--u-primary-dark); background: var(--u-primary-light); padding: .18rem .55rem; border-radius: 999px; }
.fbd-seg-carrier { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--u-ink); }
.fbd-seg-carrier > i { color: var(--u-primary); }
.fbd-seg-op { font-size: .74rem; font-weight: 500; color: var(--u-muted); }
.fbd-seg-cabin { margin-inline-start: auto; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--u-primary-dark); background: var(--u-primary-light); padding: .15rem .5rem; border-radius: 999px; }
.fbd-seg-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 1rem; }
.fbd-seg-point { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.fbd-seg-point--arr { text-align: end; }
.fbd-seg-time { font-weight: 800; font-size: 1.15rem; color: var(--u-ink); }
.fbd-seg-airport { font-weight: 700; font-size: .95rem; color: var(--u-primary-dark); }
.fbd-seg-day { font-size: .78rem; color: var(--u-muted); }
.fbd-seg-term { font-size: .74rem; color: var(--u-muted); }
.fbd-seg-mid { display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 6.5rem; }
.fbd-seg-dur { font-size: .78rem; font-weight: 600; color: var(--u-ink); }
.fbd-seg-stops { font-size: .74rem; color: var(--u-muted); text-align: center; }
.fbd-seg-path { display: flex; align-items: center; color: var(--u-primary); }
.fbd-seg-path::before, .fbd-seg-path::after { content: ""; height: 2px; width: 1.6rem; background: currentColor; opacity: .35; }
.fbd-seg-path > i { font-size: 1rem; }
.fbd-seg-meta { display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin-block-start: .8rem; padding-block-start: .7rem; border-block-start: 1px dashed var(--u-line); font-size: .8rem; color: var(--u-muted); }
.fbd-seg-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.fbd-seg-meta i { color: var(--u-primary); }
.fbd-seg-tag { color: var(--u-primary-dark); font-weight: 600; }
.fbd-seg-amenities { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: .6rem; }
.fbd-seg-amenity { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; color: var(--u-teal); background: rgba(13,148,136,.08); padding: .12rem .5rem; border-radius: 999px; }
.fbd-seg-amenity > i { color: var(--u-teal); }
.fbd-pax-list { display: flex; flex-direction: column; gap: .7rem; }
.fbd-pax { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .75rem .85rem; border: 1px solid var(--u-line); border-radius: .6rem; }
.fbd-pax-id { display: flex; align-items: flex-start; gap: .7rem; min-width: 0; }
.fbd-pax-avatar { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; color: #fff; background: var(--u-primary); }
.fbd-pax-headline { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.fbd-pax-name { font-weight: 700; color: var(--u-ink); }
.fbd-pax-sub { font-size: .8rem; color: var(--u-muted); }
.fbd-pax-contact { display: flex; flex-wrap: wrap; gap: .3rem .75rem; font-size: .78rem; color: var(--u-muted); margin-block-start: .1rem; }
.fbd-pax-contact span { display: inline-flex; align-items: center; gap: .3rem; }
.fbd-pax-contact i { color: var(--u-primary); }
.fbd-pax-doc { display: flex; flex-direction: column; gap: .1rem; text-align: end; font-size: .78rem; color: var(--u-muted); }
.fbd-pax-doc-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--u-muted); }
.fbd-pax-doc-value { font-weight: 700; color: var(--u-ink); }
.fbd-fare-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .9rem; padding: .3rem 0; color: var(--u-ink); }
.fbd-fare-row > span:first-child { display: inline-flex; align-items: center; gap: .35rem; color: var(--u-muted); }
.fbd-fare-row > span:first-child > i { color: var(--u-primary); }
.fbd-fare-total { border-block-start: 1px solid var(--u-line); margin-block-start: .4rem; padding-block-start: .6rem; font-weight: 700; font-size: 1.05rem; }
.fbd-fare-total > span:first-child { color: var(--u-ink); }
.fbd-fare-total > span:last-child { color: var(--u-primary-dark); }
.fbd-fare-booked { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-start: .6rem; padding-block-start: .6rem; border-block-start: 1px dashed var(--u-line); font-size: .8rem; color: var(--u-muted); }
@media (max-width: 860px) {
    .fbd-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .fbd-seg-route { grid-template-columns: 1fr 1fr; gap: .5rem 1rem; }
    .fbd-seg-mid { grid-column: 1 / -1; order: 3; flex-direction: row; gap: .5rem; min-width: 0; }
    .fbd-seg-mid .fbd-seg-path::before, .fbd-seg-mid .fbd-seg-path::after { width: 2.5rem; }
    .fbd-pax-doc { text-align: start; }
}
/* Booking-management surfaces (wallet, policy, Amadeus viewer, loaders) */
.fbd-wallet .fbd-fare-row { font-size: .95rem; }
.fbd-policy { border: 1px solid var(--u-line); border-radius: .7rem; overflow: hidden; }
.fbd-policy-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem .75rem; flex-wrap: wrap; background: var(--u-primary-light); border: 0; padding: .7rem .9rem; cursor: pointer; text-align: start; }
.fbd-policy-title { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .35rem .5rem; font-weight: 600; color: var(--u-ink); min-width: 0; }
.fbd-policy-title > i { color: var(--u-primary); }
.fbd-policy-fare { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--u-primary-dark); background: rgba(255,255,255,.7); padding: .1rem .45rem; border-radius: 999px; font-weight: 600; }
.fbd-policy-action { font-size: .82rem; font-weight: 700; color: var(--u-primary-dark); white-space: nowrap; margin-inline-start: auto; }
.fbd-policy-body { padding: .85rem .9rem; font-size: .85rem; color: var(--u-ink); white-space: pre-wrap; line-height: 1.5; }
.fbd-amadeus-json { max-height: 60vh; overflow: auto; background: #0f1720; color: #d6e2ef; border-radius: .6rem; padding: 1rem; font-size: .78rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.fbd-loader-overlay { position: fixed; inset: 0; z-index: 2000; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: rgba(255, 255, 255, .82); backdrop-filter: blur(2px); }
.fbd-loader-spinner { width: 3rem; height: 3rem; border: .35rem solid var(--u-primary-light); border-block-start-color: var(--u-primary); border-radius: 50%; animation: fbd-spin .8s linear infinite; }
.fbd-loader-text { font-weight: 600; color: var(--u-ink); }
@keyframes fbd-spin { to { transform: rotate(360deg); } }
.mb-tile-media-fallback--umrah { color: var(--u-gold); opacity: .95; background: linear-gradient(135deg, rgba(212,175,55,.14), rgba(124,58,237,.10)); }

.mb-modal .modal-content { border: none; border-radius: 1rem; overflow: hidden; }
.mb-modal-hero { position: relative; height: 150px; display: flex; align-items: flex-end; background: linear-gradient(135deg, var(--u-primary-dark), var(--u-primary)); }
.mb-modal-hero > i { position: absolute; inset-block-start: 50%; inset-inline-start: 1.4rem; transform: translateY(-60%); font-size: 3rem; color: #fff; opacity: .22; }
.mb-modal-close { position: absolute; inset-block-start: .85rem; inset-inline-end: .85rem; background-color: rgba(255,255,255,.85); border-radius: 999px; padding: .5rem; }
.mb-modal-hero-cap { position: relative; z-index: 1; padding: 1rem 1.35rem; color: #fff; display: flex; flex-direction: column; gap: .25rem; }
.mb-modal-name { font-size: 1.3rem; font-weight: 800; margin: 0; color: #fff; }
.mb-modal-loc { font-size: .84rem; opacity: .92; display: flex; align-items: center; gap: .3rem; }
.mb-modal-body { padding: 1.25rem 1.35rem; }
.mb-modal-ref { display: flex; align-items: baseline; gap: .5rem; margin-block-end: 1rem; padding-block-end: .8rem; border-block-end: 1px dashed var(--u-line); }
.mb-modal-foot { justify-content: space-between; align-items: center; }
.mb-card { background: #fff; border: 1px solid var(--u-line); border-radius: .9rem; padding: 1.15rem 1.35rem; }
.mb-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.mb-card-hotel { display: flex; flex-direction: column; gap: .2rem; }
.mb-card-name { font-weight: 700; font-size: 1.05rem; color: var(--u-ink); }
.mb-card-loc { font-size: .82rem; color: var(--u-muted); display: flex; align-items: center; gap: .3rem; }
.mb-status { font-size: .74rem; font-weight: 700; padding: .3rem .65rem; border-radius: 999px; white-space: nowrap; }
.mb-status-confirmed { color: #1a7f4b; background: #e7f6ee; }
.mb-status-pending { color: #8a6d00; background: #fdf4d6; }
.mb-status-cancelled { color: #a12525; background: #fbe7e7; }
.mb-status-failed { color: #b3261e; background: #fdecec; }
.mb-card-ref { display: flex; align-items: baseline; gap: .5rem; margin-block: .85rem; padding-block: .55rem; border-block: 1px dashed var(--u-line); }
.mb-ref-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--u-muted); }
.mb-ref-value { font-size: 1rem; color: var(--u-ink); }
.mb-facts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .85rem; }
.mb-facts li { display: flex; align-items: center; gap: .5rem; font-size: .86rem; color: var(--u-ink); }
.mb-facts i { color: var(--u-primary); width: 1.1rem; text-align: center; }
.mb-guests { margin-block-start: .85rem; font-size: .84rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.mb-guests-label { color: var(--u-muted); display: inline-flex; align-items: center; gap: .35rem; }
.mb-guests-names { color: var(--u-ink); font-weight: 600; }
.mb-card-foot { display: flex; align-items: baseline; justify-content: flex-end; gap: 1.5rem; margin-block-start: 1rem; padding-block-start: .85rem; border-block-start: 1px solid var(--u-line); }
.mb-amount-native { display: flex; flex-direction: column; text-align: end; font-size: .8rem; color: var(--u-muted); }
.mb-amount-paid { display: flex; flex-direction: column; text-align: end; }
.mb-amount-paid span { font-size: .78rem; color: var(--u-muted); }
.mb-amount-paid strong { font-size: 1.35rem; font-weight: 800; color: var(--u-primary-dark); }

@media (max-width: 860px) {
    /* Collapse the account sidebar into a horizontal, scrollable bar above the content */
    .mb-shell { grid-template-columns: 1fr; gap: 1rem; }
    .mb-aside { position: static; padding: .75rem; }
    .mb-aside-stat { display: none; }
    .mb-nav { flex-direction: row; overflow-x: auto; gap: .35rem; -webkit-overflow-scrolling: touch; }
    .mb-nav-link { white-space: nowrap; flex: 0 0 auto; }
}

@media (max-width: 620px) {
    .mb-facts { grid-template-columns: 1fr; }
    .mb-card-foot { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .mb-amount-native, .mb-amount-paid { text-align: start; }
    .mb-grid { grid-template-columns: 1fr; }
}

@media (min-width: 621px) and (max-width: 1100px) {
    .mb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Booking details page ---- */
.bd-page { padding-block: 1.6rem 3rem; background: var(--u-bg, #fff); }
.bd-back { display: inline-flex; align-items: center; gap: .25rem; font-weight: 600; color: var(--u-primary-dark); text-decoration: none; margin-block-end: 1rem; }
.bd-back:hover { text-decoration: underline; }
.bd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem; align-items: start; }
.bd-main { background: #fff; border: 1px solid var(--u-line); border-radius: 1rem; overflow: hidden; }
.bd-main--bare { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.bd-hero { position: relative; height: 360px; background: linear-gradient(135deg, var(--u-primary-light), #d7f4f2); display: flex; align-items: center; justify-content: center; }
.bd-hero-img { width: 100%; height: 100%; object-fit: cover; }
.bd-hero-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 4rem; color: var(--u-primary-dark); opacity: .5; }
.bd-hero .bd-status { position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; }
.bd-body { padding: 1.4rem 1.5rem 1.6rem; }
.bd-name { font-size: 1.5rem; font-weight: 800; color: var(--u-ink); margin: 0 0 .25rem; }
.bd-loc { color: var(--u-muted); display: flex; align-items: center; gap: .35rem; margin-block-end: 1rem; }
.bd-ref { display: flex; align-items: center; gap: .5rem; padding: .6rem .85rem; background: var(--u-primary-light); border-radius: .6rem; margin-block-end: 1.3rem; }
.bd-ref-label { font-size: .78rem; color: var(--u-muted); }
.bd-ref-value { color: var(--u-primary-dark); letter-spacing: .3px; }
.bd-section-title { font-size: 1.05rem; font-weight: 700; color: var(--u-ink); margin: 1.4rem 0 .7rem; }
.bd-facts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .6rem; }
.bd-facts li { display: flex; align-items: center; gap: .65rem; padding: .65rem .8rem; background: #fff; border: 1px solid var(--u-line); border-radius: .75rem; transition: border-color .15s ease, box-shadow .15s ease; }
.bd-facts li:hover { border-color: var(--u-primary); box-shadow: 0 4px 14px rgba(124,58,237,.08); }
.bd-fact-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; inline-size: 2.1rem; block-size: 2.1rem; border-radius: .6rem; background: var(--u-primary-light); color: var(--u-primary); font-size: 1rem; }
.bd-fact-body { display: flex; flex-direction: column; gap: .1rem; min-inline-size: 0; }
.bd-fact-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--u-muted); }
.bd-fact-value { font-size: .9rem; font-weight: 600; color: var(--u-ink); line-height: 1.3; }
.bd-room-cards { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-block-end: 1rem; }
.bd-room-card { border: 1px solid var(--u-line); border-radius: .85rem; padding: .85rem .95rem; background: #fff; display: flex; flex-direction: column; gap: .6rem; }
.bd-room-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.bd-room-index { display: inline-flex; align-items: center; padding: .15rem .6rem; border-radius: 2rem; font-size: .72rem; font-weight: 600; background: var(--u-primary-light); color: var(--u-primary-dark); }
.bd-room-name { font-weight: 700; font-size: .98rem; color: var(--u-ink); }
.bd-room-card-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.bd-room-card-facts li { display: flex; align-items: center; gap: .5rem; color: var(--u-ink); font-size: .87rem; }
.bd-room-card-facts i { color: var(--u-primary); }
.bd-room-policy { margin-block-start: .2rem; padding-block-start: .6rem; border-block-start: 1px dashed var(--u-line); }
.bd-room-policy-title { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; color: #a9841c; }
.bd-room-policy-list { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .4rem; }
.bd-room-policy-list li { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding: .5rem .6rem; background: #fffdf6; border: 1px solid #f0e4c4; border-radius: .55rem; }
.bd-room-policy-text { font-size: .8rem; color: var(--u-muted); line-height: 1.4; }
.bd-room-policy-amount { align-self: flex-start; padding: .15rem .5rem; border-radius: 2rem; background: rgba(13,148,136,.12); color: var(--u-teal); font-weight: 700; font-size: .78rem; white-space: nowrap; }
.bd-guests { display: flex; flex-wrap: wrap; gap: .5rem; }
.bd-guest { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; background: #f4fbfb; border: 1px solid var(--u-line); border-radius: 2rem; font-size: .85rem; }
.bd-guest i { color: var(--u-primary); }
.bd-guest-cards { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.bd-guest-card { display: flex; align-items: center; gap: .65rem; padding: .65rem .8rem; background: #fff; border: 1px solid var(--u-line); border-radius: .75rem; }
.bd-guest-card.is-lead { border-color: var(--u-primary); background: #f4fbfb; }
.bd-guest-avatar { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.25rem; block-size: 2.25rem; flex: 0 0 auto; border-radius: 50%; background: var(--u-primary-light, #e8fbfa); color: var(--u-primary); font-size: 1.1rem; }
.bd-guest-info { display: flex; flex-direction: column; gap: .3rem; min-inline-size: 0; }
.bd-guest-name { font-weight: 600; font-size: .92rem; color: var(--u-ink); }
.bd-guest-meta { display: flex; flex-wrap: wrap; gap: .3rem; }
.bd-guest-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .5rem; border-radius: 2rem; font-size: .72rem; font-weight: 500; background: #f1f5f5; color: var(--u-muted, #555); border: 1px solid var(--u-line); }
.bd-guest-badge--lead { background: var(--u-primary); color: #fff; border-color: var(--u-primary); }
.bd-guest-badge--nat i { font-size: .7rem; }
.bd-policies { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.bd-policy-item { display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; font-size: .88rem; color: var(--u-ink); background: #fffaf0; border: 1px solid #f2e2bd; border-inline-start: 3px solid var(--u-gold); border-radius: .65rem; }
.bd-policy-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; inline-size: 1.7rem; block-size: 1.7rem; border-radius: 50%; background: rgba(212,175,55,.16); color: #a9841c; font-size: .95rem; }
.bd-policy-text { flex: 1 1 auto; min-inline-size: 0; line-height: 1.5; }
.bd-policy-amount { flex: 0 0 auto; padding: .2rem .6rem; border-radius: 2rem; background: rgba(13,148,136,.12); color: var(--u-teal); font-weight: 700; font-size: .82rem; white-space: nowrap; }
.bd-policy-empty { display: flex; align-items: center; gap: .55rem; padding: .7rem .85rem; color: var(--u-teal); font-size: .88rem; background: #eafaf7; border: 1px solid #c3ece4; border-radius: .65rem; }
.bd-policy-empty i { font-size: 1.05rem; }

/* Transport (airport transfer) booking details */
.bd-transport { padding-block-start: 0; }
.bd-transport-hero { display: flex; align-items: center; gap: 1rem; margin-block-end: 1rem; }
.bd-transport-ico { flex: 0 0 auto; width: 3.25rem; height: 3.25rem; border-radius: .9rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--u-primary); background: var(--u-primary-light, #f3edfe); }
.bd-transport-hero-text { display: grid; gap: .2rem; }
.bd-transport-tag { display: inline-flex; align-items: center; align-self: start; padding: .12rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--u-primary-dark, #6D28D9); background: var(--u-primary-light, #f3edfe); }
.bd-transport-intro { color: var(--u-muted, #64748B); font-size: .92rem; margin-block-end: .25rem; }
.bd-transport-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.bd-transport-facts li { display: flex; align-items: center; gap: .8rem; padding: .75rem .9rem; background: #fff; border: 1px solid var(--u-line); border-radius: .75rem; }
.bd-tf-ico { flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: .6rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--u-primary); background: var(--u-primary-light, #f3edfe); }
.bd-tf-body { display: grid; gap: .1rem; }
.bd-tf-label { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--u-muted, #64748B); }
.bd-tf-value { font-size: .95rem; font-weight: 700; color: var(--u-ink); }
.bd-transport-band { margin-block-end: 1.5rem; }
.bd-transport-band .fbd-hero-lead { display: flex; align-items: center; gap: 1rem; }
.bd-transport-band .bd-transport-ico { background: rgba(255,255,255,.14); color: #fff; }
.bd-transport-band .fbd-hero-route { font-size: 1.45rem; }
.bd-transport .fbd-card { border: none; padding: 0; margin-block-end: 1.75rem; }
.bd-transport .fbd-card:last-child { margin-block-end: 0; }
.bd-vehicle-card { background: #fff; border: 1px solid var(--u-line); border-radius: 1rem; overflow: hidden; margin-block-end: 1.25rem; }
.bd-vehicle-img { display: block; width: 100%; height: auto; object-fit: cover; aspect-ratio: 16 / 10; background: var(--u-primary-light, #f3edfe); }
.bd-leg { border: 1px solid var(--u-line); border-radius: .8rem; padding: 1rem 1.1rem; margin-block-end: .75rem; }
.bd-leg:last-child { margin-block-end: 0; }
.bd-leg-head { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin-block-end: .75rem; }
.bd-leg-body { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.bd-leg-when { display: grid; gap: .1rem; }
.bd-leg-time { font-weight: 800; font-size: 1.25rem; color: var(--u-ink); line-height: 1.1; }
.bd-leg-date { font-size: .82rem; color: var(--u-muted); }
.bd-leg-vehicle { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: .6rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--u-primary); background: var(--u-primary-light, #f3edfe); }
.bd-leg-name { font-weight: 700; font-size: .95rem; color: var(--u-primary-dark); }
.bd-side { position: sticky; inset-block-start: 5.25rem; }
.bd-summary { background: #fff; border: 1px solid var(--u-line); border-radius: 1rem; padding: 1.2rem 1.25rem; display: grid; gap: .8rem; }
.bd-summary-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .9rem; color: var(--u-muted); }
.bd-summary-total strong { font-size: 1.4rem; font-weight: 800; color: var(--u-primary-dark); }
.bd-cancel-btn { width: 100%; margin-block-start: .4rem; }
.bd-cancelled-note { display: flex; align-items: center; gap: .4rem; color: #b02a37; font-weight: 600; font-size: .9rem; }
.bd-status-confirmed { color: #0f7a3d; background: #e7f6ec; }
.bd-status-cancelled { color: #b02a37; background: #fbeaec; }
.bd-status-pending { color: #8a6d00; background: #fbf4dd; }
.bd-status-failed { color: #b3261e; background: #fdecec; }
.bd-status { padding: .18rem .6rem; border-radius: 2rem; font-size: .74rem; font-weight: 700; }
.bd-quote-loading { display: flex; align-items: center; gap: .5rem; color: var(--u-muted); }
.bd-cancel-policy { padding: .95rem 1rem; background: linear-gradient(180deg,#fffaf0 0%,#fff 100%); border: 1px solid #f2e2bd; border-inline-start: 3px solid var(--u-gold); border-radius: .8rem; margin-block-end: 1.1rem; }
.bd-cancel-policy-head { display: flex; align-items: center; gap: .6rem; margin-block-end: .6rem; }
.bd-cancel-policy-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: rgba(212,175,55,.18); color: #a9841c; font-size: 1rem; }
.bd-cancel-policy-title { font-size: .92rem; font-weight: 700; color: var(--u-ink); }
.bd-cancel-policy-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.bd-cancel-policy-list li { display: flex; align-items: flex-start; gap: .65rem; padding: .7rem .8rem; background: #fff; border: 1px solid var(--u-line); border-radius: .65rem; }
.bd-cancel-policy-mark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; inline-size: 1.9rem; block-size: 1.9rem; border-radius: 50%; background: rgba(212,175,55,.16); color: #a9841c; font-size: .9rem; }
.bd-cancel-policy-body { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; min-inline-size: 0; }
.bd-cancel-policy-text { font-size: .85rem; color: var(--u-ink); line-height: 1.4; }
.bd-cancel-policy-amount { padding: .2rem .6rem; border-radius: 2rem; background: rgba(13,148,136,.12); color: var(--u-teal); font-weight: 700; font-size: .82rem; white-space: nowrap; }
.bd-cancel-policy-empty { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--u-teal); font-size: .88rem; font-weight: 600; }
.bd-cancel-policy-empty i { font-size: 1.05rem; }
.bd-reason-label { display: block; font-weight: 600; margin-block: .6rem .35rem; }

.bd-stars { display: flex; gap: .15rem; color: var(--u-primary); font-size: .95rem; margin-block-end: .4rem; }
.bd-thumbs-wrap { display: flex; align-items: center; gap: .4rem; padding: .6rem 1.5rem 0; }
.bd-thumbs { display: flex; gap: .5rem; overflow-x: auto; scroll-behavior: smooth; flex: 1 1 auto; padding-block-end: .25rem; scrollbar-width: thin; }
.bd-thumbs::-webkit-scrollbar { height: 6px; }
.bd-thumbs::-webkit-scrollbar-thumb { background: var(--u-line); border-radius: 3px; }
.bd-thumb { border: 2px solid transparent; border-radius: .55rem; padding: 0; overflow: hidden; cursor: pointer; background: none; line-height: 0; transition: border-color .15s ease; flex: 0 0 auto; }
.bd-thumb:hover { border-color: var(--u-primary); }
.bd-thumb img { width: 120px; height: 84px; object-fit: cover; display: block; }
.bd-thumb-nav { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--u-line); background: #fff; color: var(--u-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s ease; }
.bd-thumb-nav:hover { background: var(--u-primary); color: #fff; border-color: var(--u-primary); }
.bd-map { border-radius: .75rem; overflow: hidden; border: 1px solid var(--u-line); margin-block-start: .5rem; }
.bd-map iframe { width: 100%; height: 320px; border: 0; display: block; }
.bd-voucher-btn { width: 100%; margin-block-start: .5rem; display: flex; align-items: center; justify-content: center; gap: .4rem; }
.bd-confirm-spinner { margin-inline-end: .35rem; }

.bd-summary-divider { height: 1px; background: var(--u-line); margin: 1rem 0; }
.bd-summary-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.bd-summary-facts li { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; font-size: .85rem; }
.bd-sf-label { color: var(--u-muted); display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; flex: 0 0 auto; }
.bd-sf-label i { color: var(--u-primary); width: 1.1rem; text-align: center; flex: 0 0 auto; }
.bd-sf-value { color: var(--u-ink); font-weight: 600; text-align: end; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.bd-help-card { margin-block-start: 1rem; background: var(--u-primary-light); border: 1px solid var(--u-line); border-radius: 1rem; padding: 1rem 1.1rem; }
.bd-help-title { display: flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--u-primary-dark); margin-block-end: .35rem; }
.bd-help-text { font-size: .82rem; color: var(--u-muted); margin-block-end: .5rem; }
.bd-help-link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--u-primary-dark); text-decoration: none; }
.bd-help-link:hover { text-decoration: underline; }

@media (max-width: 860px) {
    .bd-grid { grid-template-columns: 1fr; }
    .bd-side { position: static; }
}

/* ==========================================================================
   Flights — search, results (SERP), passenger and confirmation
   Brand teal + black + white, RTL-safe via logical properties. Mirrors the
   Almosafer/Wego compact OTA style used across the portal.
   ========================================================================== */

/* Directional icons flip in RTL. */
[dir="rtl"] .rtl-flip { transform: scaleX(-1); }

/* --- Search widget --- */
.flight-search-card { padding: 1.25rem; }
.trip-pills { display: inline-flex; gap: .25rem; background: var(--u-bg-alt); border: 1px solid var(--u-line); border-radius: 999px; padding: .25rem; }
.trip-pill { border: 0; background: transparent; color: var(--u-ink); font-weight: 600; font-size: .85rem; padding: .4rem .9rem; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; }
.trip-pill:hover { color: var(--u-primary-dark); }
.trip-pill.active { background: var(--u-primary); color: #fff; }

.input-icon { position: relative; display: flex; align-items: center; }
.input-icon > i { position: absolute; inset-inline-start: .7rem; color: var(--u-primary); pointer-events: none; }
.input-icon > .form-control { padding-inline-start: 2.1rem; }
.input-icon > .form-select { padding-inline-start: 2.1rem; }

.airport-ac { position: relative; }
.airport-menu { position: absolute; inset-inline: 0; inset-block-start: calc(100% + 4px); z-index: 30; background: #fff; border: 1px solid var(--u-line); border-radius: var(--u-radius); box-shadow: var(--u-shadow-lg); max-height: 16rem; overflow-y: auto; }
.airport-option { display: block; inline-size: 100%; text-align: start; border: 0; background: transparent; padding: .55rem .8rem; font-size: .88rem; color: var(--u-ink); cursor: pointer; }
.airport-option:hover, .airport-option.active { background: var(--u-primary-light); color: var(--u-primary-dark); }

/* WEGO-style two-line airport option: pin + City, Country on top; plane + name + IATA code pill below. */
.airport-option-head { display: flex; align-items: center; gap: .5rem; }
.airport-option-pin { color: var(--u-primary); display: inline-flex; flex: 0 0 auto; }
.airport-option-loc { min-width: 0; }
.airport-option-city { font-weight: 700; color: var(--u-ink); }
.airport-option:hover .airport-option-city, .airport-option.active .airport-option-city { color: var(--u-primary-dark); }
.airport-option-country { color: var(--u-muted); font-weight: 500; }
.airport-option-sub { display: flex; align-items: center; gap: .5rem; margin-block-start: .2rem; padding-inline-start: 1.6rem; }
.airport-option-plane { color: var(--u-muted); display: inline-flex; flex: 0 0 auto; }
.airport-option-name { color: var(--u-muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.airport-option-code { margin-inline-start: auto; font-size: .72rem; font-weight: 700; color: var(--u-primary); background: var(--u-primary-light); border-radius: 999px; padding: .1rem .5rem; }

.swap-btn { border-radius: 999px; inline-size: 2.4rem; block-size: 2.4rem; line-height: 1; font-size: 1.1rem; }

.pax-dropdown .pax-toggle { cursor: pointer; }
.pax-menu { min-inline-size: 18rem; }
.stepper { display: inline-flex; align-items: center; gap: .4rem; }
.stepper-btn { inline-size: 2rem; block-size: 2rem; border-radius: 999px; border: 1px solid var(--u-line); background: #fff; color: var(--u-primary); font-size: 1rem; line-height: 1; cursor: pointer; }
.stepper-btn:hover { background: var(--u-primary-light); }
.stepper-value { inline-size: 2.5rem; text-align: center; border: 0; background: transparent; font-weight: 700; color: var(--u-ink); }
/* Hide native number-input spinner arrows on stepper controls (custom +/- buttons are used instead) */
.stepper-value,
.stepper input { -moz-appearance: textfield; appearance: textfield; }
.stepper-value::-webkit-outer-spin-button,
.stepper-value::-webkit-inner-spin-button,
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.btn-search { font-weight: 700; }

/* Full-screen search loader overlay (shown while a flight search request is in flight). */
.search-loader-overlay { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center; background: rgba(13, 27, 42, .55); backdrop-filter: blur(2px); }
.search-loader-overlay.d-none { display: none; }
.search-loader-box { background: #fff; border-radius: var(--u-radius); box-shadow: var(--u-shadow-lg); padding: 2rem 2.5rem; }

/* Flatpickr: keep the range/alt input consistent with the themed form controls. */
.flatpickr-input.is-invalid, input.form-control.is-invalid { border-color: var(--u-danger, #dc3545); }

/* Branded flatpickr calendar (purple accents on a light surface) so the picker
   matches the site theme instead of the browser's native dark datetime widget. */
.flatpickr-calendar { border-radius: var(--u-radius); box-shadow: var(--u-shadow-lg); border: 1px solid var(--u-line); }
.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday { background: var(--u-primary); color: #fff; fill: #fff; }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { color: #fff; }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: #fff; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--u-gold); }
.flatpickr-day:hover,
.flatpickr-day:focus { background: var(--u-primary-light); border-color: var(--u-primary-light); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange { background: var(--u-primary); border-color: var(--u-primary); color: #fff; }
.flatpickr-day.today { border-color: var(--u-gold); }
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus { background: var(--u-primary-light); }

/* RTL fix: Flatpickr's multi-month layout (showMonths: 2) positions its day
   rows with absolute left offsets that are not mirrored for RTL, so in Arabic
   the two months and their day cells overlap. Keep the calendar internals
   laid out LTR (numbers are Western regardless) while the page stays RTL. */
[dir="rtl"] .flatpickr-calendar,
[dir="rtl"] .flatpickr-calendar .flatpickr-months,
[dir="rtl"] .flatpickr-calendar .flatpickr-innerContainer,
[dir="rtl"] .flatpickr-calendar .flatpickr-rContainer,
[dir="rtl"] .flatpickr-calendar .flatpickr-days,
[dir="rtl"] .flatpickr-calendar .dayContainer,
[dir="rtl"] .flatpickr-calendar .flatpickr-weekdaycontainer,
[dir="rtl"] .flatpickr-calendar .flatpickr-weekdays {
    direction: ltr;
}
[dir="rtl"] .flatpickr-calendar .flatpickr-day { text-align: center; }

/* Google Places Autocomplete dropdown (.pac-container): re-theme the default
   Google widget to match the branded search fields (rounded surface, purple
   highlight) and hide the "powered by Google" logo strip. */
.pac-container {
    margin-block-start: .35rem;
    min-width: 360px;
    border: 1px solid var(--u-line);
    border-radius: .9rem;
    box-shadow: var(--u-shadow-lg);
    background: #fff;
    font-family: inherit;
    overflow: hidden;
    padding-block: .35rem;
}
.pac-container:after { display: none !important; height: 0 !important; } /* hide "powered by Google" */
.pac-item {
    position: relative;
    border-block-start: 0;
    padding: .55rem .9rem .55rem 2.4rem;   /* room for the absolute icon */
    font-size: .82rem;                      /* secondary/address text */
    color: var(--u-muted);
    cursor: pointer;
    line-height: 1.35;
    white-space: normal;      /* allow the address to wrap instead of clipping */
    overflow: visible;
    text-overflow: clip;
}
.pac-item:hover,
.pac-item-selected,
.pac-item-selected:hover { background: var(--u-primary-light); }
.pac-item-query {
    display: block;           /* push the address onto its own line as subtext */
    font-size: .95rem;
    color: var(--u-ink);
    font-weight: 600;
    margin-block-end: .1rem;
}
.pac-matched { font-weight: 700; color: var(--u-ink); }
.pac-icon { display: none; } /* drop Google's default marker sprite */
.pac-item::before {
    content: "\F3E8"; /* Bootstrap Icons geo-alt */
    font-family: "bootstrap-icons";
    color: var(--u-primary);
    position: absolute;
    inset-inline-start: .9rem;
    inset-block-start: .6rem;
    font-size: 1rem;
    line-height: 1;
}

.leg-row { border-block-end: 1px dashed var(--u-line); padding-block-end: .5rem; }

/* --- Results (SERP) --- */
.results-group-title { inline-size: 100%; font-size: 1rem; font-weight: 700; color: var(--u-ink); margin-block: .5rem 0; }
.price-mix-bar { font-weight: 600; }

.flight-offer-card { padding: 1rem; border: 1px solid var(--u-line); border-radius: var(--u-radius); box-shadow: var(--u-shadow); transition: border-color .15s, box-shadow .15s; display: flex; flex-direction: column; gap: .6rem; }
.flight-offer-card:hover { border-color: var(--u-primary); box-shadow: var(--u-shadow-lg); }
.flight-offer-card.is-selected { border-color: var(--u-primary); box-shadow: 0 0 0 2px var(--u-primary-light); }

.offer-airline { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.airline-name { font-weight: 700; color: var(--u-ink); }
.badge-upsell { background: var(--u-accent); color: var(--u-ink); font-size: .68rem; font-weight: 700; border-radius: 999px; padding: .2rem .5rem; }

.offer-route { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.offer-route.return-route { padding-block-start: .5rem; border-block-start: 1px dashed var(--u-line); }
.route-point { text-align: center; }
.route-point strong { display: block; font-size: 1.1rem; color: var(--u-ink); }
.route-point span { font-size: .78rem; color: var(--u-muted); }
.route-line { flex: 1; text-align: center; color: var(--u-muted); font-size: .72rem; display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.route-line i { color: var(--u-primary); }

.offer-meta { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .78rem; color: var(--u-muted); }
.offer-meta i { color: var(--u-primary); }
.refund-tag { font-weight: 600; }
.refund-refundable { color: #167c3f; }
.refund-nonrefundable { color: #b02a37; }

.offer-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-block-start: auto; padding-block-start: .5rem; border-block-start: 1px solid var(--u-line); }
.offer-price { line-height: 1.1; }
.offer-price small { display: block; font-size: .68rem; color: var(--u-muted); }
.offer-price strong { font-size: 1.15rem; color: var(--u-primary-dark); }
.show-upsell { align-self: flex-start; }

.upsell-tier { padding: .75rem; }
.upsell-amenities { margin: .35rem 0 0; padding-inline-start: 1.1rem; font-size: .8rem; color: var(--u-muted); }

/* --- Passenger --- */
.traveller-card, .contact-card, .fare-summary { padding: 1.1rem; border: 1px solid var(--u-line); border-radius: var(--u-radius); box-shadow: var(--u-shadow); }
.traveller-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-block-end: .6rem; }
.traveller-title { font-size: 1rem; font-weight: 700; color: var(--u-ink); display: flex; align-items: center; gap: .4rem; margin: 0; }
.traveller-title i { color: var(--u-primary); }
.badge-pax { background: var(--u-primary-light); color: var(--u-primary-dark); font-size: .68rem; font-weight: 700; border-radius: 999px; padding: .2rem .55rem; }
.scan-passport-btn { cursor: pointer; }

.sticky-summary { position: sticky; inset-block-start: 1rem; }
.fare-summary-title { font-size: 1rem; font-weight: 700; color: var(--u-ink); margin-block-end: .6rem; }
.fare-leg { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; padding-block: .2rem; }
.fare-leg-route { font-weight: 600; color: var(--u-ink); }
.fare-leg-airline { color: var(--u-muted); }
.fare-total { font-size: 1.05rem; }
.fare-total strong { color: var(--u-primary-dark); }
.price-change-banner { font-weight: 600; }

/* --- Confirmation --- */
.confirm-card { max-inline-size: 34rem; margin-inline: auto; padding: 2rem 1.5rem; border: 1px solid var(--u-line); border-radius: var(--u-radius); box-shadow: var(--u-shadow); }
.confirm-icon { font-size: 3rem; color: var(--u-primary); }
.confirm-title { font-size: 1.4rem; font-weight: 800; color: var(--u-ink); margin-block: .5rem .25rem; }
.confirm-sub { color: var(--u-muted); }
.confirm-refs { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-block: 1.25rem; }
.confirm-ref-item { background: var(--u-primary-light); border: 1px solid rgba(124, 58, 237, .18); border-radius: var(--u-radius); padding: .6rem 1rem; }
.confirm-ref-label { display: block; font-size: .72rem; color: var(--u-muted); text-transform: uppercase; letter-spacing: .04em; }
.confirm-ref-value { font-size: 1.1rem; font-weight: 800; color: var(--u-primary-dark); letter-spacing: .04em; }
.confirm-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

@media (max-width: 767px) {
    .offer-route { flex-wrap: nowrap; }
    .sticky-summary { position: static; }
    .flight-search-card { padding: 1rem; }
}



/* =====================================================================
   FLIGHT SERP (ported from B2E, re-skinned to B2C purple brand)
   The ported rules use --b2e-* custom properties; they are mapped here
   to the B2C purple palette so no off-brand colors are introduced.
   ===================================================================== */
:root {
    --b2e-primary: #7C3AED;      /* B2C brand purple */
    --b2e-primary-2: #6D28D9;    /* darker purple */
    --b2e-primary-3: #5B21B6;    /* deepest purple */
    --b2e-bg: #f6f3fe;           /* subtle purple tint */
    --b2e-card: #ffffff;
    --b2e-text: #111111;         /* ink */
    --b2e-muted: #5f6b7a;
    --b2e-border: #e6dcfb;       /* purple-tinted border */
    --b2e-focus: #7C3AED;
}
.b2e-status {
    display: inline-block;
    padding: 0.34rem 0.8rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

.b2e-status.pending {
    background: #fef3c7;
    color: #7a5107;
}

.b2e-status.underrequest {
    background: #dbeafe;
    color: #173b8f;
}

.b2e-status.completed {
    background: #dcfce7;
    color: #166534;
}

.b2e-status.cancelled {
    background: #fee2e2;
    color: #991b1b;
}

.b2e-status.ticketed {
    background: #dbeafe;
    color: #1d4ed8;
}

.b2e-status.booked {
    background: #fef3c7;
    color: #7a5107;
}

.b2e-completed-card {
    border-inline-start: 4px solid var(--b2e-primary-2);
}

.b2e-completed-card.is-cancelled {
    border-inline-start-color: #dc3545;
}

.b2e-airline-badge {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #edf4fd;
    color: var(--b2e-primary-2);
    font-size: 1.25rem;
}

/* Real airline logo: an <img> with a text carrier-code fallback layered behind it.
   airline-logo.js reveals the fallback (adds .is-fallback) ONLY when the image fails.
   The tile is a clean white card so brand logos (which carry their own colours) sit
   nicely without clashing with the app's blue badge background. */
.b2e-airline-logo-wrap {
    position: relative;
    overflow: hidden;
    /* Self-sufficient size so the tile can never balloon even if a base badge
       class is missing or overridden. Variants below override these. */
    width: 44px;
    height: 44px;
    padding: 5px;
    background: #fff !important;
    border: 1px solid #e6edf6;
    box-shadow: none !important;
    /* Never let a flex/grid parent stretch the tile into a giant square. */
    flex: 0 0 auto;
    align-self: center;
    box-sizing: border-box;
}

.b2e-airline-logo-wrap .b2e-airline-logo-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    margin: auto;
    object-fit: contain;
    border-radius: 6px;
}

.b2e-airline-logo-wrap .b2e-airline-logo-fallback {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: #edf4fd;
    color: var(--b2e-primary-2);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1;
}

/* When the image loads (default), the fallback stays completely hidden. */
.b2e-airline-logo-wrap.is-fallback .b2e-airline-logo-img {
    display: none;
}

.b2e-airline-logo-wrap.is-fallback .b2e-airline-logo-fallback {
    display: flex;
}

/* Small logo used inside filter rows and segment lists. The kiwi.com logos carry
   their own background, so for the tiny variant we drop the tile padding/border and
   let the logo fill a clean rounded square. */
.b2e-airline-logo-xs {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 6px;
    padding: 0;
    border: none;
    font-size: 0;
    vertical-align: middle;
}

.b2e-airline-logo-xs .b2e-airline-logo-img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
}

.b2e-airline-logo-xs .b2e-airline-logo-fallback {
    font-size: 0.5rem;
}

.b2e-filter-check .b2e-airline-logo-xs {
    margin-inline-end: 8px;
}


.b2e-roundtrip-note {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.65rem 0.9rem;
    border-radius: 12px;
    background: #edf4fd;
    border: 1px solid #d4e4f7;
    color: var(--b2e-text);
}

.b2e-roundtrip-note .small {
    color: var(--b2e-primary-2);
}

.b2e-rt-note-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: var(--b2e-primary-2);
    color: #fff;
    font-size: 1rem;
    transform: rotate(45deg);
}

.b2e-kv {
    color: var(--b2e-muted);
    font-size: 0.88rem;
    font-weight: 600;
}


.b2e-summary-banner {
    background: linear-gradient(135deg, var(--b2e-primary), var(--b2e-primary-2));
    border-radius: 16px;
    padding: 1.25rem 1.4rem;
    box-shadow: 0 14px 30px rgba(15, 63, 111, 0.2);
}

/* Trim the default 2.5rem section top padding so the summary banner sits
   closer to the navbar (screenshot showed an oversized gap under the nav). */
.flight-results-section { padding-block: 1rem 2.5rem; }

.b2e-offer-card {
    background: var(--b2e-card);
    border: 1px solid var(--b2e-border);
    border-radius: 16px;
    padding: 1.05rem 1.25rem;
    margin-bottom: 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.b2e-offer-card:hover {
    border-color: #b6c7df;
    box-shadow: 0 12px 28px rgba(16, 45, 80, 0.1);
    transform: translateY(-1px);
}

/* Premium airline logo tile (initials rendered as a rounded pill logo). */
.b2e-airline-logo {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #eef4fd, #dfeafb);
    color: var(--b2e-primary);
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    border: 1px solid #d7e4f6;
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* "Direct" / stops pill shown beneath the flight times. */
.b2e-direct-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #1f9d55;
    line-height: 1.2;
}

.b2e-direct-pill.has-stops { color: #b45309; }

.b2e-direct-pill svg { width: 13px; height: 13px; }

/* Trailing price / additional-price cluster on each offer row. */
.b2e-offer-pricecol {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
}

/* Combined round trips: the departure step has no separate price (the single
   trip total is shown on the return cards), so keep the cell tidy and centered. */
.b2e-offer-pricecol--departure {
    justify-content: center;
}

.b2e-offer-pricecol--departure .b2e-price-hint {
    text-align: end;
}

.b2e-offer-pricecol .b2e-price-label {
    font-size: 0.7rem;
    color: var(--b2e-muted);
    font-weight: 600;
}

.b2e-offer-pricecol .b2e-price-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--b2e-primary);
}

.b2e-offer-pricecol .b2e-price-hint {
    font-size: 0.66rem;
    line-height: 1.15;
    color: var(--b2e-muted);
    max-width: 12rem;
    margin-top: 0.1rem;
}

.b2e-offer-pricecol .b2e-price-add {
    font-size: 1rem;
    font-weight: 800;
    color: #1f9d55;
}

.b2e-view-details-link {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--b2e-primary-2);
    text-decoration: none;
    white-space: nowrap;
}

.b2e-view-details-link:hover { text-decoration: underline; }

/* Rounded pill select button matching the reference. */
.b2e-select-btn {
    border-radius: 999px;
    font-weight: 700;
    padding-inline: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    white-space: nowrap;
    min-width: 104px;
}

/* Selected-departure summary card (round-trip step 2 header). */
.b2e-selected-departure {
    border: 1px solid #cbe6d5;
    background: linear-gradient(180deg, #f3fbf6, #ffffff);
    border-radius: 16px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 8px 22px rgba(22, 101, 52, 0.08);
}

.b2e-selected-departure-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.b2e-selected-departure-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: #166534;
    font-size: 0.95rem;
}

.b2e-selected-check {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1f9d55;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    flex: 0 0 auto;
}

.b2e-selected-departure-body {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.b2e-selected-departure-times {
    font-weight: 700;
    color: var(--b2e-text);
    font-size: 1rem;
}

.b2e-selected-departure-route {
    font-size: 0.78rem;
    color: var(--b2e-muted);
    font-weight: 600;
}

.b2e-selected-departure-price {
    margin-inline-start: auto;
    text-align: end;
}

.b2e-selected-departure-price .amt {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--b2e-primary);
}

.b2e-selected-departure-price .tag {
    font-size: 0.7rem;
    color: var(--b2e-muted);
    font-weight: 600;
}

/* Sort tabs strip (Cheapest / Best value / Shortest / Sort by other). */
.b2e-sort-tabs {
    display: flex;
    align-items: stretch;
    gap: 0.35rem;
    background: #f1f5fb;
    border: 1px solid var(--b2e-border);
    border-radius: 12px;
    padding: 0.3rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.b2e-sort-tab {
    flex: 1 1 0;
    min-width: 120px;
    border: none;
    background: transparent;
    border-radius: 9px;
    padding: 0.45rem 0.7rem;
    text-align: center;
    cursor: pointer;
    color: #55617a;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.b2e-sort-tab .b2e-sort-tab-title {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
}

.b2e-sort-tab .b2e-sort-tab-sub {
    display: block;
    font-size: 0.72rem;
    color: var(--b2e-muted);
    font-weight: 600;
}

.b2e-sort-tab.active {
    background: #fff;
    color: var(--b2e-primary-2);
    box-shadow: 0 4px 12px rgba(16, 45, 80, 0.1);
}

.b2e-sort-tab.active .b2e-sort-tab-sub { color: var(--b2e-primary-2); }

/* ------------------------------------------------------------------ */
/* Offer-card balanced layout (airline | itinerary | info | price)      */
/* ------------------------------------------------------------------ */
.b2e-offer-grid {
    display: grid;
    grid-template-columns: minmax(150px, 1.2fr) minmax(300px, 2.4fr) minmax(150px, 1.2fr) minmax(150px, 1.1fr);
    align-items: center;
    gap: 1.25rem;
}

.b2e-offer-airline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Baggage / seat info gets its own column instead of stacking on the price. */
.b2e-offer-info {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
}

.b2e-offer-info .b2e-offer-chips {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0;
}

.b2e-offer-pricecol .b2e-select-btn {
    margin-top: 0.35rem;
}

@media (max-width: 991.98px) {
    .b2e-offer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.85rem 1rem;
    }
    .b2e-offer-airline { grid-column: 1 / -1; }
    .b2e-offer-itinerary { grid-column: 1 / -1; }
    .b2e-offer-pricecol { align-items: flex-end; }
}

@media (max-width: 575.98px) {
    .b2e-offer-grid { grid-template-columns: 1fr; }
    .b2e-offer-info,
    .b2e-offer-pricecol { align-items: flex-start; text-align: start; }
}

/* ------------------------------------------------------------------ */
/* Branded fares (upsell) modal                                         */
/* ------------------------------------------------------------------ */
/* DEPARTURE stays blue and RETURN uses the single shared accent (#d98324)
   everywhere - including inside the upgrade modal - so the two directions are
   consistently color-coded across the whole flow. */
#upsellModal .b2e-leg-tag.return,
#upsellModal .b2e-leg-panel-tag.return {
    background: #fdf0dd;
    color: #d98324;
}

.b2e-upsell-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
}

.b2e-fare-summary {
    border: 1px solid var(--b2e-border);
    border-radius: 14px;
    background: #f7faff;
    padding: 1rem;
    position: sticky;
    top: 0;
}

.b2e-fare-summary-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 0.75rem;
}

.b2e-fare-summary-leg {
    padding: 0.6rem 0;
    border-top: 1px dashed var(--b2e-border);
}

.b2e-fare-summary-leg:first-of-type { border-top: none; }

.b2e-fare-summary-tag {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--b2e-primary-2);
    margin-bottom: 0.25rem;
}

.b2e-fare-summary-tag.return {
    color: #d98324;
}

.b2e-fare-summary-route {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--b2e-text);
}

.b2e-fare-summary-times {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--b2e-primary-2);
    margin-top: 0.1rem;
}

.b2e-fare-summary-meta {
    font-size: 0.74rem;
    color: var(--b2e-muted);
}

.b2e-upsell-main {
    min-width: 0;
    position: relative;
}

.b2e-upsell-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 220px;
    color: var(--b2e-muted);
}

.b2e-tier-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.85rem;
    overflow-x: auto;
    overflow-y: hidden;
    /* Extra top padding so the negatively-offset "Recommended" ribbon and the
       corner "selected" check are never clipped by the horizontal scroller. */
    padding-top: 0.9rem;
    padding-bottom: 0.6rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.b2e-tier-grid::-webkit-scrollbar {
    height: 8px;
}

.b2e-tier-grid::-webkit-scrollbar-thumb {
    background: #c7d2e0;
    border-radius: 999px;
}

.b2e-tier-grid::-webkit-scrollbar-track {
    background: transparent;
}

.b2e-tier-card {
    border: 1px solid var(--b2e-border);
    border-radius: 14px;
    background: #fff;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    flex: 0 0 240px;
    width: 240px;
    scroll-snap-align: start;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.b2e-tier-card:hover {
    border-color: #b6c7df;
    box-shadow: 0 10px 24px rgba(16, 45, 80, 0.1);
    transform: translateY(-1px);
}

.b2e-tier-card.selected {
    border-color: var(--b2e-primary-2);
    background: #f2f8fd;
    box-shadow: 0 0 0 3px rgba(31, 109, 178, 0.28), 0 12px 26px rgba(16, 45, 80, 0.12);
    transform: translateY(-1px);
}

/* Corner ribbon check so the chosen fare is unmistakable. */
.b2e-tier-card.selected::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: 34px;
    height: 34px;
    background: var(--b2e-primary-2);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    border-start-end-radius: 14px;
}

.b2e-tier-card.selected::after {
    content: "";
    position: absolute;
    inset-block-start: 5px;
    inset-inline-end: 5px;
    width: 12px;
    height: 8px;
    border-inline-start: 2px solid #fff;
    border-block-end: 2px solid #fff;
    transform: rotate(-45deg);
}

.b2e-tier-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.b2e-tier-name {
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--b2e-text);
}

.b2e-tier-delta {
    font-size: 0.85rem;
    font-weight: 800;
    color: #1f9d55;
    white-space: nowrap;
}

.b2e-tier-delta.zero { color: var(--b2e-muted); }

.b2e-tier-group-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #374151;
    margin: 0.6rem 0 0.3rem;
}

.b2e-tier-feats {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
}

.b2e-tier-feats li {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: #4b5563;
    padding: 0.15rem 0;
    line-height: 1.3;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.b2e-feat-icon {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 0.1rem;
}

.b2e-feat-icon.ok { color: #1f9d55; }
.b2e-feat-icon.no { color: #cbd5e1; }

/* Upgrade "extra": a feature this tier adds over the cheapest (recommended)
   fare — highlighted so the value of paying more is obvious at a glance. */
.b2e-tier-feats li.b2e-feat-extra {
    background: var(--u-primary-light, #f3edfe);
    border-radius: 7px;
    padding-inline: 0.4rem;
    margin-inline: -0.15rem;
    font-weight: 700;
    color: var(--u-primary-dark, #6D28D9);
}

.b2e-tier-feats li.b2e-feat-extra .b2e-feat-icon.ok {
    color: var(--u-primary, #7C3AED);
}

.b2e-tier-feats li.b2e-feat-extra .b2e-feat-plus {
    margin-inline-start: auto;
    flex: 0 0 auto;
    font-weight: 800;
    color: var(--u-primary, #7C3AED);
}

.b2e-tier-card .b2e-pick-tier {
    margin-top: auto;
    border-radius: 999px;
    font-weight: 700;
}

.b2e-tier-card .b2e-pick-tier.is-selected {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.b2e-pick-check {
    width: 15px;
    height: 15px;
}

@media (max-width: 767.98px) {
    .b2e-upsell-layout { grid-template-columns: 1fr; }
    .b2e-fare-summary { position: static; }
    .b2e-tier-card { flex-basis: 220px; width: 220px; }
}

.b2e-offer-card.selected {
    border-color: var(--b2e-primary-2);
    box-shadow: 0 0 0 2px rgba(31, 109, 178, 0.35);
    position: relative;
}

.b2e-offer-card.selected::after {
    content: "\2713";
    position: absolute;
    top: -10px;
    inset-inline-end: -10px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1f9d55;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 4px 10px rgba(22, 101, 52, 0.3);
}

.b2e-offer-card.selected .b2e-select-btn {
    background: var(--b2e-primary-2);
    color: #fff;
    border-color: var(--b2e-primary-2);
}

.b2e-offer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.b2e-offer-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid var(--b2e-border);
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
    line-height: 1.2;
}

.b2e-offer-chip.warn {
    color: #b45309;
    background: #fff7ed;
    border-color: #fed7aa;
}

/* ------------------------------------------------------------------ */
/* Flight results: filter sidebar + main column                        */
/* ------------------------------------------------------------------ */
.b2e-results-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.25rem;
    align-items: start;
}

.b2e-filter-aside {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    overflow-x: hidden;
    /* Subtle, thin scrollbar so the sticky filter rail doesn't show the bulky
       default OS scrollbar. Track stays invisible; thumb only appears on hover. */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.b2e-filter-aside:hover {
    scrollbar-color: rgba(148, 163, 184, .55) transparent;
}

.b2e-filter-aside::-webkit-scrollbar {
    width: 6px;
}

.b2e-filter-aside::-webkit-scrollbar-track {
    background: transparent;
}

.b2e-filter-aside::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 999px;
}

.b2e-filter-aside:hover::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, .55);
}

.b2e-filter-aside::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 116, 139, .8);
}

.b2e-filter-card {
    border: 1px solid var(--b2e-border);
    border-radius: 14px;
    background: #fff;
    padding: 1rem 1.1rem;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .05);
}

.b2e-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.b2e-filter-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.b2e-filter-reset {
    color: var(--b2e-primary-2);
    text-decoration: none;
}

.b2e-filter-group {
    padding: 0.85rem 0;
    border-top: 1px solid var(--b2e-border);
}

.b2e-filter-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 0.5rem;
}

/* ===================================================================
   Custom dropdown (enhances select[data-custom-select]) — replaces the
   browser-default control with a branded, RTL-safe listbox.
   =================================================================== */
.cs-native {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cs-control {
    position: relative;
    width: 100%;
}

.cs-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--u-ink);
    background: #fff;
    border: 1px solid var(--b2e-border);
    border-radius: 10px;
    cursor: pointer;
    text-align: start;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cs-trigger:hover {
    border-color: var(--u-primary);
}

.cs-control.open .cs-trigger,
.cs-trigger:focus-visible {
    outline: none;
    border-color: var(--u-primary);
    box-shadow: 0 0 0 3px var(--u-primary-light);
}

.cs-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-chevron {
    flex: 0 0 auto;
    font-size: 0.7rem;
    color: var(--u-muted);
    transition: transform 0.18s ease;
}

.cs-control.open .cs-chevron {
    transform: rotate(180deg);
    color: var(--u-primary);
}

.cs-menu {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 6px);
    z-index: 30;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: #fff;
    border: 1px solid var(--b2e-border);
    border-radius: 12px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.16);
    max-height: 280px;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.cs-control.open .cs-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.cs-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--u-ink);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.cs-option:hover,
.cs-option:focus {
    background: var(--b2e-bg);
}

.cs-option.active {
    background: var(--u-primary-light);
    color: var(--u-primary-dark);
    font-weight: 700;
}

.cs-option.active::after {
    content: "\2713";
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--u-primary);
}

.cs-control.cs-disabled {
    opacity: 0.6;
    pointer-events: none;
}

.b2e-filter-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #4b5563;
    padding: 0.2rem 0;
    cursor: pointer;
    margin: 0;
}

.b2e-filter-check .form-check-input {
    margin: 0;
    flex-shrink: 0;
}

.b2e-results-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

/* Two-step round-trip selection (departure -> return). */
.b2e-stepper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.b2e-stepper-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: #f1f5fb;
    color: #6b7280;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.b2e-stepper-item:not(:last-child)::after {
    content: "";
    width: 22px;
    height: 2px;
    background: #d7e0ee;
    margin-inline-start: 0.5rem;
}

.b2e-stepper-num {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d7e0ee;
    color: #55617a;
    font-size: 0.78rem;
    font-weight: 700;
}

.b2e-stepper-item.active {
    background: #edf4fd;
    color: var(--b2e-primary-2);
    border-color: #cfe1f6;
}

.b2e-stepper-item.active .b2e-stepper-num {
    background: var(--b2e-primary-2);
    color: #fff;
}

.b2e-stepper-item.done {
    color: #1f9d55;
    background: #eef8f0;
}

.b2e-stepper-item.done .b2e-stepper-num {
    background: #1f9d55;
    color: #fff;
}

.b2e-chosen-outbound {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.85rem;
    border-radius: 12px;
    background: #f6f9fe;
    border: 1px solid var(--b2e-border);
}

.b2e-change-departure {
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.b2e-chosen-summary {
    font-size: 0.85rem;
    color: #374151;
    font-weight: 600;
}


.b2e-results-heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

.b2e-results-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--b2e-primary-2);
    background: #edf4fd;
    border: 1px solid #d7e6f7;
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    white-space: nowrap;
}

.b2e-no-results {
    text-align: center;
    padding: 2.5rem 1rem;
    border: 1px dashed var(--b2e-border);
    border-radius: 14px;
    color: #6b7280;
    background: #fff;
}

.b2e-no-results-icon {
    display: block;
    font-size: 2.25rem;
    color: var(--b2e-primary-2, #7C3AED);
    opacity: .55;
    margin-bottom: 0.75rem;
}

@media (max-width: 991.98px) {
    .b2e-results-layout {
        grid-template-columns: 1fr;
    }
    .b2e-filter-aside {
        position: static;
    }
}

.b2e-airline-badge {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #edf4fd;
    color: var(--b2e-primary-2);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.b2e-price { color: var(--b2e-primary); font-weight: 700; }

.b2e-selection-bar {
    background: #ffffff;
    border: 1px solid var(--b2e-border);
    border-radius: 999px;
    padding: 0.75rem 0.85rem 0.75rem 1.35rem;
    position: sticky;
    bottom: 1.25rem;
    z-index: 20;
    box-shadow: 0 14px 34px rgba(16, 45, 80, 0.18);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
    animation: b2eBarRise 0.35s ease both;
    margin-bottom: 1.25rem;
}

@keyframes b2eBarRise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

.b2e-selection-bar:not(.ready) {
    animation: b2eBarRise 0.35s ease both, b2eBarPulse 2.4s ease-in-out 0.5s infinite;
}

@keyframes b2eBarPulse {
    0%, 100% { box-shadow: 0 14px 34px rgba(16, 45, 80, 0.18); }
    50% { box-shadow: 0 14px 34px rgba(16, 45, 80, 0.18), 0 0 0 6px rgba(31, 109, 178, 0.10); }
}

.b2e-selection-bar.ready {
    background: #eef8f0;
    border-color: #86c79a;
    box-shadow: 0 16px 38px rgba(22, 101, 52, 0.22);
}

.b2e-selection-bar #continueBtn {
    border-radius: 999px;
}

.b2e-sel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #cdd8e8;
    border: 2px solid #cdd8e8;
    flex: 0 0 auto;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.b2e-sel-dot:not(.done) {
    animation: b2eDotBlink 1.6s ease-in-out infinite;
}

@keyframes b2eDotBlink {
    0%, 100% { background: #cdd8e8; border-color: #cdd8e8; }
    50% { background: var(--b2e-primary-2); border-color: var(--b2e-primary-2); }
}

.b2e-sel-dot.done {
    background: #1f9d55;
    border-color: #1f9d55;
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .b2e-selection-bar,
    .b2e-selection-bar:not(.ready),
    .b2e-sel-dot:not(.done) {
        animation: none;
    }
}

/* Bundled offer legs (outbound + return shown on one card). */
.b2e-leg-detail {
    display: grid;
    grid-template-columns: 84px 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
}

.b2e-leg-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    background: #e3f0ff;
    color: #0b5ed7;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.b2e-leg-tag.return {
    background: #fdf0dd;
    color: #d98324;
}

/* ---- Two-step round-trip: color-coded departure vs return cards ---------- */
/* Step 1 departure cards carry a blue inline-start accent (matches the blue
   DEPARTURE tag); step 2 return cards carry an amber accent (matches RETURN),
   so the two directions are instantly distinguishable. */
.b2e-offer-card--departure {
    border-inline-start: 4px solid #0b5ed7;
}

.b2e-offer-card--departure:hover {
    border-color: #9dc0f2;
}

.b2e-offer-card--return {
    border-inline-start: 4px solid #d98324;
}

.b2e-offer-card--return:hover {
    border-color: #eabb84;
}

.b2e-offer-card--return.selected {
    border-color: #d98324;
    box-shadow: 0 0 0 2px rgba(217, 131, 36, 0.4);
}

.b2e-offer-card--return.selected .b2e-select-btn {
    background: #d98324;
    border-color: #d98324;
    color: #fff;
}

.b2e-offer-card--return.selected::after {
    background: #d98324;
    box-shadow: 0 4px 10px rgba(217, 131, 36, 0.35);
}

/* Step-2 header: back-to-departure control plus the chosen-departure recap. */
.b2e-return-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.85rem;
    border-radius: 12px;
    background: #f5f8fd;
    border: 1px solid var(--b2e-border);
}

.b2e-change-departure {
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.b2e-return-recap {
    font-size: 0.85rem;
    font-weight: 600;
}

.b2e-return-recap .b2e-leg-tag {
    margin-inline-end: 0.4rem;
}

/* Rich "Selected departure flight" summary shown at the top of step 2. Mirrors
   the Wego pattern: green-check header, a Change control, and a compact echo of
   the chosen outbound leg with its round-trip total. */
.b2e-depart-summary {
    border: 1px solid var(--b2e-border);
    border-radius: 14px;
    background: #f2f8f4;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.b2e-depart-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.7rem;
}

.b2e-depart-summary-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    color: #0f5132;
}

.b2e-depart-check {
    width: 18px;
    height: 18px;
    color: #1a7f45;
    flex: 0 0 auto;
}

.b2e-depart-summary .b2e-change-departure {
    color: var(--b2e-primary, #0b5ed7);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid var(--b2e-primary, #0b5ed7);
    border-radius: 999px;
    padding: 0.25rem 0.9rem;
    line-height: 1.2;
    background: #fff;
    transition: background-color .15s ease, color .15s ease;
}

.b2e-depart-summary .b2e-change-departure:hover {
    background: var(--b2e-primary, #0b5ed7);
    color: #fff;
}

.b2e-depart-summary-body {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(180px, 2fr) auto auto;
    align-items: center;
    gap: 1rem;
}

/* Step-2 heading above the return list. */
.b2e-return-heading {
    margin: 0.25rem 0 0.85rem;
}

.b2e-return-heading-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

.b2e-return-heading-sub {
    font-size: 0.85rem;
    color: var(--b2e-muted, #6c757d);
    margin: 0.15rem 0 0;
}

/* Once a departure is chosen the long list collapses to just the selected card
   so the return panel is immediately reachable. */
.b2e-offer-card.b2e-leg-collapsed {
    display: none;
}

/* Combined single-query round trips: only the return itineraries bundled with the
   chosen departure are valid one-PNR offers, so hide every other return card. */
.b2e-offer-card.b2e-return-hidden {
    display: none !important;
}

/* Step header above each leg's list (Departure / Return). A small pill tag sits
   above a clear title, with an optional "Change" link pinned to the end. */
.b2e-leg-panel-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    margin: 1.25rem 0 0.85rem;
}

.b2e-leg-panel-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--b2e-primary-2, #0b5ed7);
    background: #eaf1fb;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    line-height: 1;
    flex: 0 0 auto;
    order: 1;
}

/* Force the title onto its own row (below the tag pill) so the route can sit
   inline right after the heading text. */
.b2e-leg-panel-head::after {
    content: "";
    flex-basis: 100%;
    height: 0;
    order: 2;
}

.b2e-leg-panel-tag.return {
    color: #d98324;
    background: #fdf0dd;
}

.b2e-leg-panel-title {
    flex: 0 1 auto;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    color: var(--b2e-ink, #1f2d3d);
    order: 3;
}

.b2e-leg-panel-head .b2e-return-heading-sub {
    flex: 1 1 100%;
    order: 6;
}

/* Route (e.g. "MED -> RUH") shown inline right after the panel title so the user
   sees exactly which direction they're choosing a flight for. */
.b2e-leg-panel-route {
    flex: 0 1 auto;
    order: 4;
    align-self: baseline;
    font-size: 1rem;
    font-weight: 700;
    color: var(--b2e-primary-2, #0b5ed7);
}

.b2e-leg-panel-route span {
    margin-inline: 0.15rem;
}

.b2e-change-leg {
    margin-inline-start: auto;
    padding: 0;
    font-weight: 600;
    text-decoration: none;
    order: 5;
}

/* Per-leg upsell tabs inside the "Upgrade your fare" modal. Segmented control
   with a title on top and the chosen fare price/checkmark underneath. */
.b2e-upsell-tabs {
    display: flex;
    gap: 0.4rem;
    background: #f1f5fb;
    border: 1px solid var(--b2e-border, #e2e8f0);
    border-radius: 12px;
    padding: 0.3rem;
    margin-bottom: 1rem;
}

.b2e-upsell-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    border: none;
    background: transparent;
    border-radius: 9px;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    color: #55617a;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.b2e-upsell-tab .b2e-upsell-tab-title {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
}

.b2e-upsell-tab .b2e-upsell-tab-route {
    font-size: 0.72rem;
    font-weight: 600;
    color: #55617a;
    line-height: 1.1;
}

.b2e-upsell-tab.active .b2e-upsell-tab-route {
    color: var(--b2e-primary-2, #0b5ed7);
}

.b2e-upsell-tab .b2e-upsell-tab-state {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--b2e-muted, #6c757d);
    min-height: 1rem;
}

.b2e-upsell-tab.active {
    background: #fff;
    color: var(--b2e-primary-2, #0b5ed7);
    box-shadow: 0 4px 12px rgba(16, 45, 80, 0.1);
}

.b2e-upsell-tab.active .b2e-upsell-tab-state {
    color: var(--b2e-primary-2, #0b5ed7);
}

/* RETURN tab carries the shared #d98324 accent so the modal header matches the
   departure/return color-coding used across the rest of the flow. */
#upsellTabReturn .b2e-upsell-tab-route,
#upsellTabReturn.active .b2e-upsell-tab-route,
#upsellTabReturn.active .b2e-upsell-tab-state,
#upsellTabReturn.active {
    color: #d98324;
}

/* Combined round-trip live "Trip total" shown in the upsell modal footer. It
   sits at the start of the action row (left in LTR) with the Keep/Continue
   buttons pushed to the opposite end, so the price has room to breathe. */
#upsellModal .modal-footer {
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.b2e-upsell-triptotal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
    margin-inline-end: auto;
    line-height: 1.2;
}

.b2e-upsell-triptotal-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--b2e-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.b2e-upsell-triptotal-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--b2e-primary-2, #0b5ed7);
}

/* Small helper under the total explaining it's the airline's combined whole-trip
   price, so the per-leg "+" upgrade badges are never mistaken for additive costs. */
.b2e-upsell-triptotal-note {
    font-size: 0.68rem;
    color: var(--b2e-muted, #6c757d);
    max-width: 42ch;
}

/* Collapsible cancellation & change policy section. The airline supplies the
   penalty rules as free text (from the priced offer's detailed-fare-rules), so
   we show a toggle that reveals the full policy text. Shared by the upsell
   modal, the Passenger review card and the Dashboard booking details. Placed
   first in the footer so it spans the full width above the total/actions row. */
.b2e-upsell-cancellation {
    flex: 1 1 100%;
    order: -1;
    width: 100%;
    margin-bottom: 0.75rem;
}

.b2e-policy {
    border: 1px solid var(--b2e-border, #e0e3e8);
    border-radius: 0.5rem;
    background: var(--b2e-surface-soft, #f8f9fb);
    overflow: hidden;
}

.b2e-policy-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 0;
    background: transparent;
    text-align: start;
    cursor: pointer;
    font: inherit;
}

.b2e-policy-toggle-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--b2e-text, #2b2f36);
}

.b2e-policy-icon {
    color: var(--b2e-primary, #0d6efd);
    font-size: 0.95rem;
}

.b2e-policy-fare {
    font-weight: 500;
    font-size: 0.76rem;
    color: var(--b2e-muted, #6c757d);
}

/* Refundable / Non-refundable badge (derived from priced fareRules REFUND rule) */
.b2e-refund-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.35;
}

.b2e-refund-status.is-refundable {
    color: #0f5132;
    background: #d1e7dd;
    border: 1px solid #a3cfbb;
}

.b2e-refund-status.is-nonrefundable {
    color: #842029;
    background: #f8d7da;
    border: 1px solid #f1aeb5;
}

.b2e-refund-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    font-size: 0.78rem;
    background: rgba(255, 255, 255, 0.6);
}

.b2e-refund-text {
    display: flex;
    flex-direction: column;
}

.b2e-refund-penalty {
    font-weight: 500;
    font-size: 0.72rem;
    opacity: 0.85;
}

.b2e-policy-toggle-action {
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--b2e-primary, #0d6efd);
    white-space: nowrap;
}

.b2e-policy-body {
    margin: 0;
    padding: 0.75rem 0.85rem;
    border-top: 1px solid var(--b2e-border, #e0e3e8);
    max-height: 16rem;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--b2e-text, #2b2f36);
    background: #fff;
}

/* Prettified airline fare-penalty policy (rendered by policy-format.js). */
.b2e-policy-pretty {
    padding: 0.75rem 0.85rem;
    border-top: 1px solid var(--b2e-border, #e0e3e8);
    background: #fff;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--b2e-text, #2b2f36);
}

/* When rendered inside an existing .b2e-policy-body wrapper (which already draws
   the top border and scroll area), avoid doubling the border/padding. */
.b2e-policy-body {
    padding: 0;
}

.b2e-policy-body > .b2e-policy-pretty {
    border-top: 0;
    max-height: 20rem;
    overflow-y: auto;
}

.b2e-policy-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.b2e-policy-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid transparent;
    line-height: 1.1;
}

.b2e-policy-chip-value {
    font-weight: 700;
}

.b2e-policy-chip--change {
    background: #e7f1ff;
    color: #0a58ca;
    border-color: #cfe2ff;
}

.b2e-policy-chip--cancel {
    background: #fff3cd;
    color: #98730b;
    border-color: #ffe69c;
}

.b2e-policy-chip--warn {
    background: #fdece7;
    color: #b5432b;
    border-color: #f8d3c8;
}

.b2e-policy-chip--danger {
    background: #fbe0e0;
    color: #b02a37;
    border-color: #f5c2c7;
}

.b2e-policy-heading {
    margin: 0.65rem 0 0.35rem;
    font-weight: 700;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--b2e-muted, #6c757d);
}

.b2e-policy-heading:first-child {
    margin-top: 0;
}

.b2e-policy-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.b2e-policy-row {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.4rem;
    background: var(--b2e-surface-soft, #f8f9fb);
}

.b2e-policy-row-icon {
    flex: 0 0 auto;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--b2e-muted, #6c757d);
}

.b2e-policy-row-text {
    flex: 1 1 auto;
}

.b2e-policy-row--change {
    background: #f2f7ff;
}

.b2e-policy-row--change .b2e-policy-row-icon {
    color: #0a58ca;
}

.b2e-policy-row--cancel {
    background: #fffaf0;
}

.b2e-policy-row--cancel .b2e-policy-row-icon {
    color: #98730b;
}

.b2e-policy-row--warn {
    background: #fdf1ee;
}

.b2e-policy-row--warn .b2e-policy-row-icon {
    color: #b5432b;
}

.b2e-policy-row--danger {
    background: #fdeaec;
}

.b2e-policy-row--danger .b2e-policy-row-icon {
    color: #b02a37;
}

.b2e-policy-amount {
    color: #0a58ca;
    font-weight: 700;
    white-space: nowrap;
}

.b2e-policy-flag-danger {
    color: #b02a37;
    font-weight: 700;
}

.b2e-policy-original {
    margin-top: 0.75rem;
    border-top: 1px dashed var(--b2e-border, #e0e3e8);
    padding-top: 0.5rem;
}

.b2e-policy-original-toggle {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--b2e-primary, #0d6efd);
    cursor: pointer;
}

.b2e-policy-original-text {
    margin: 0.5rem 0 0;
    max-height: 14rem;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--b2e-muted, #6c757d);
}


/* Return price column: "Additional price +X" with a view-details link, so the
   customer sees the round-trip delta rather than repeating the full total. */
.b2e-offer-pricecol--return {
    text-align: end;
}

.b2e-view-details {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 0.2rem;
    color: var(--b2e-primary, #0b5ed7);
}

.b2e-view-details:hover {
    text-decoration: underline;
}

.b2e-addon-value {
    color: #1a7f45;
    font-weight: 700;
}

/* Genuine branded-fare upsell tier gets a small "Offer" badge + accent. */
.b2e-tier-card--upsell {
    border-color: #1a7f45;
    box-shadow: 0 0 0 1px rgba(26, 127, 69, 0.25);
}

.b2e-tier-badge {
    display: inline-block;
    margin-inline-start: 0.4rem;
    padding: 0.05rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    background: #1a7f45;
    border-radius: 999px;
    vertical-align: middle;
}

/* Best-value (cheapest) fare tier: a gold "Recommended" ribbon + prominent
   purple frame so the smartest pick stands out in the upsell modal. */
.b2e-tier-card--recommended {
    border-color: var(--u-primary, #7C3AED);
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.28);
    position: relative;
}

.b2e-tier-recommended {
    position: absolute;
    inset-block-start: -0.7rem;
    inset-inline-start: 0.75rem;
    padding: 0.1rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--u-navy, #0D1B2A);
    background: var(--u-gold, #D4AF37);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(13, 27, 42, 0.18);
    z-index: 2;
}

/* Booking-class (RBD) chip — the raw fare-class letter(s) like V/H/Q. Shown
   only inside the upsell modal for users who care about the exact class. */
.b2e-tier-class {
    display: inline-block;
    margin-inline-start: 0.4rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--u-primary-dark, #6D28D9);
    background: var(--u-primary-light, #f3edfe);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 6px;
    vertical-align: middle;
}

/* Upsell offer flag shown on result cards and in the fare-options filter. */
.b2e-upsell-flag {
    display: inline-block;
    margin-top: 0.2rem;
    padding: 0.05rem 0.5rem;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #7a4a00;
    background: linear-gradient(90deg, #ffe08a, #ffcf4d);
    border: 1px solid #f0b429;
    border-radius: 999px;
    vertical-align: middle;
}

.b2e-offer-card.has-upsell {
    box-shadow: inset 0 0 0 1px rgba(240, 180, 41, 0.55);
}

.b2e-filter-check--upsell .b2e-upsell-flag {
    margin-top: 0;
    margin-inline-end: 0.3rem;
}

@media (max-width: 640px) {
    .b2e-depart-summary-body {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

/* Combined round-trip card: stack the outbound and return legs, each with a
   distinct colored accent so the two directions are easy to tell apart. */
.b2e-offer-itinerary--stacked {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.b2e-leg-wrap {
    border-inline-start: 3px solid transparent;
    padding-inline-start: 0.6rem;
}

.b2e-leg-wrap--outbound {
    border-inline-start-color: #0b5ed7;
    background: linear-gradient(90deg, rgba(11, 94, 215, 0.06), transparent 60%);
    border-radius: 8px;
}

.b2e-leg-wrap--return {
    border-inline-start-color: #d98324;
    background: linear-gradient(90deg, rgba(217, 131, 36, 0.06), transparent 60%);
    border-radius: 8px;
}

.b2e-leg-endpoint {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.b2e-leg-endpoint.text-end {
    align-items: flex-end;
}

.b2e-leg-time {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--b2e-text);
}

.b2e-leg-code {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--b2e-primary-2);
}

.b2e-leg-date {
    font-size: 0.8rem;
    color: var(--b2e-muted);
}

.b2e-leg-mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    min-width: 96px;
}

.b2e-leg-dur {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--b2e-muted);
}

.b2e-leg-arrow {
    color: #b6c7df;
    font-size: 0.9rem;
    line-height: 1;
}

.b2e-leg-stops {
    font-size: 0.7rem;
    color: #1f9d55;
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .b2e-leg-detail {
        grid-template-columns: 1fr auto 1fr;
    }
    .b2e-leg-tag {
        grid-column: 1 / -1;
        justify-self: start;
        margin-bottom: 0.15rem;
    }
}

.b2e-itinerary-strip .b2e-flight-line,
.b2e-flight-line {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--b2e-border);
}

.b2e-itinerary-strip .b2e-flight-line:last-child { border-bottom: none; }

.b2e-dir-badge {
    background: #edf4fd;
    color: var(--b2e-primary-2);
    font-weight: 600;
}

.b2e-confirm-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #dcfce7;
    color: #166534;
    font-size: 2rem;
    font-weight: 700;
}

.b2e-section-card {
    background: #fff;
    border: 1px solid var(--u-border, #e2e8f0);
    border-radius: 20px;
    box-shadow: 0 14px 36px rgba(16, 45, 80, 0.08);
    padding: 1.4rem 1.5rem;
}

.b2e-confirm-spinner {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #edf4fd;
}

.b2e-confirm-spinner .spinner-border {
    width: 2rem;
    height: 2rem;
    color: var(--b2e-primary-2);
}

/* Teal button alias used by the SERP selection bar / upsell modal. */
.btn-b2e {
    background: linear-gradient(135deg, var(--b2e-primary-2), var(--b2e-primary));
    border: none;
    color: #ffffff;
    font-weight: 700;
    border-radius: 10px;
}
.btn-b2e:hover,
.btn-b2e:focus-visible {
    color: #ffffff;
    filter: brightness(1.05);
}
.btn-b2e:disabled,
.btn-b2e.disabled {
    background: #b9a5e8;
    color: #ffffff;
    opacity: 1;
    filter: none;
    cursor: not-allowed;
}

/* --- Full-page search loading overlay --- */
.search-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(2px);
}
.search-loading-overlay[hidden] {
    display: none;
}
.search-loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 2.5rem;
    text-align: center;
}
.search-loading-box .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
    color: var(--u-primary) !important;
}
.search-loading-text {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--u-ink);
}
/* Inline button spinner while submitting */
.btn-search.is-loading {
    pointer-events: none;
    opacity: 0.85;
}
.btn-search .btn-search-spinner {
    display: none;
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
    margin-inline-end: 0.4rem;
    vertical-align: -0.15em;
}
.btn-search.is-loading .btn-search-spinner {
    display: inline-block;
}
.btn-search.is-loading .bi {
    display: none;
}


/* ================================================================== */
/* Passenger / traveller booking page (parity with B2E_FE)            */
/* ================================================================== */

/* Grouped traveller sections + collapsible accordion */
.b2e-pax-block {
    padding: 1rem 1rem 1.15rem;
    border: 1px solid var(--b2e-border);
    border-radius: 16px;
    background: #fff;
}

.b2e-pax-block + .b2e-pax-block {
    margin-top: 1.1rem;
}

.b2e-pax-block-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.b2e-pax-block-index {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    color: #fff;
    background: var(--b2e-primary-2, #7C3AED);
}

.b2e-pax-block.is-collapsible {
    padding: 0;
    overflow: hidden;
}

.b2e-pax-block.is-collapsible .b2e-pax-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    padding: 0.85rem 1rem;
    border: 0;
    background: #fff;
    text-align: inherit;
    cursor: pointer;
}

.b2e-pax-block.is-collapsible .b2e-pax-toggle::after {
    content: none;
}

.b2e-pax-block.is-collapsible.is-open .b2e-pax-toggle {
    border-bottom: 1px solid var(--b2e-border);
}

.b2e-pax-toggle-titles {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    text-align: start;
    line-height: 1.2;
}

.b2e-pax-block-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-inline-start: auto;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #b02a37;
    background: #f8d7da;
}

.b2e-pax-block-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: #b02a37;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

.b2e-pax-toggle-chevron {
    margin-inline-start: 0.5rem;
    color: var(--b2e-muted, #6c757d);
    transition: transform 0.2s ease;
}

.b2e-pax-block.is-open .b2e-pax-toggle-chevron {
    transform: rotate(180deg);
}

.b2e-pax-block.has-error .b2e-pax-toggle {
    background: #fff5f5;
}

.b2e-pax-block.has-error {
    border-color: #f1aeb5;
}

.b2e-pax-block-body {
    padding: 1rem 1rem 1.15rem;
}

.b2e-pax-form .b2e-form-section {
    padding: 1.25rem 1.25rem 1.35rem;
    border: 1px solid var(--b2e-border);
    border-radius: 14px;
    background: #fbfcfe;
}

.b2e-pax-form .b2e-form-section + .b2e-form-section {
    margin-top: 1.1rem;
}

.b2e-form-section-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--b2e-border);
}

.b2e-ocr-upload {
    margin-inline-start: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    font-weight: 600;
}

.b2e-form-section-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--b2e-primary-light, #f3edfe);
    color: var(--b2e-primary-2);
}

.b2e-form-section-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--b2e-ink, #1f2937);
}

.b2e-form-section-hint {
    font-size: 0.8rem;
    margin: 0;
    color: #6b7280;
}

.b2e-pax-form .form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 0.3rem;
}

.b2e-pax-form .form-control,
.b2e-pax-form .form-select {
    border-radius: 10px;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.b2e-pax-form .form-control:focus,
.b2e-pax-form .form-select:focus {
    border-color: var(--b2e-primary-2);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}

.b2e-pax-form .form-control.is-valid,
.b2e-pax-form .form-select.is-valid,
.b2e-pax-form .was-validated .form-control:valid,
.b2e-pax-form .was-validated .form-select:valid {
    border-color: #16a34a;
}

@media (max-width: 575.98px) {
    .b2e-pax-form .b2e-form-section {
        padding: 1rem;
    }
}

/* Friendly form error banner (booking/pricing failures) */
.b2e-form-alert {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    margin-bottom: 1.35rem;
    border: 1px solid #f5c2c7;
    border-inline-start: 4px solid #dc3545;
    border-radius: 12px;
    background: linear-gradient(0deg, #fff, #fdf3f4);
    box-shadow: 0 4px 14px rgba(220, 53, 69, .08);
}

.b2e-form-alert-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fde4e6;
    color: #dc3545;
}

.b2e-form-alert-body { min-width: 0; }

.b2e-form-alert-title {
    font-weight: 700;
    color: #b02a37;
    margin-bottom: 0.15rem;
}

.b2e-form-alert-list {
    margin: 0.15rem 0 0;
    padding-inline-start: 1.1rem;
    color: #842029;
    font-size: 0.9rem;
}

.b2e-form-alert-list:empty { display: none; }

.b2e-form-alert-hint {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: #9a6a6f;
}

.b2e-form-alert-warning {
    border: 1px solid #ffe0a6;
    border-inline-start: 4px solid #f59e0b;
    background: linear-gradient(0deg, #fff, #fff9ee);
    box-shadow: 0 4px 14px rgba(245, 158, 11, .08);
}

.b2e-form-alert-warning .b2e-form-alert-icon {
    background: #fef3c7;
    color: #b45309;
}

.b2e-form-alert-warning .b2e-form-alert-title { color: #b45309; }

.b2e-form-alert-critical {
    border: 1px solid #f1aeb5;
    border-inline-start: 6px solid #dc3545;
    background: linear-gradient(0deg, #fff, #fce8ea);
    box-shadow: 0 8px 24px rgba(220, 53, 69, .18);
    animation: b2e-alert-pop .45s ease;
}

.b2e-form-alert-critical .b2e-form-alert-icon {
    background: #dc3545;
    color: #fff;
}

@keyframes b2e-alert-pop {
    0% { transform: scale(.98); opacity: 0; }
    60% { transform: scale(1.01); }
    100% { transform: scale(1); opacity: 1; }
}

/* Trip summary + fare breakdown sidebar */
.b2e-trip-aside {
    position: sticky;
    top: 1rem;
}

.b2e-trip-aside-card,
.b2e-fare-card {
    border: 1px solid var(--b2e-border);
    border-radius: 16px;
    background: #fff;
    padding: 1rem 1.1rem;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .05);
}

.b2e-trip-aside-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-bottom: 0.7rem;
    margin-bottom: 0.7rem;
    border-bottom: 1px solid var(--b2e-border);
}

.b2e-trip-leg {
    margin-bottom: 0.7rem;
    border: 1px solid var(--b2e-border);
    border-inline-start: 3px solid var(--b2e-primary-2, #7C3AED);
    border-radius: 12px;
    padding: 0.8rem 0.9rem;
    background: #fff;
}
.b2e-trip-leg:last-of-type { margin-bottom: 0; }

/* Return leg uses the warm accent to visually differentiate from departure. */
.b2e-trip-leg:has(.b2e-trip-leg-tag.return) {
    border-inline-start-color: #d98324;
}

.b2e-trip-leg-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--b2e-primary-2);
    background: var(--b2e-primary-light, #f3edfe);
    border-radius: 999px;
    padding: 0.12rem 0.6rem;
    margin-bottom: 0.4rem;
}

.b2e-trip-leg-tag.return {
    color: #d98324;
    background: #fdf0dd;
}

.b2e-trip-leg-body {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.b2e-trip-point { display: flex; flex-direction: column; min-width: 54px; flex: 1; }
.b2e-trip-point.text-end { align-items: flex-end; }

.b2e-trip-time { font-size: 1.05rem; font-weight: 700; line-height: 1.1; }
.b2e-trip-code { font-size: 0.8rem; color: #6b7280; font-weight: 600; }
.b2e-trip-city { font-size: 0.78rem; color: var(--u-ink, #0f172a); font-weight: 600; line-height: 1.15; }
.b2e-trip-air {
    font-size: 0.72rem;
    color: var(--b2e-muted);
    line-height: 1.2;
    max-width: 160px;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.b2e-trip-point.text-end .b2e-trip-city,
.b2e-trip-point.text-end .b2e-trip-air { text-align: end; }
.b2e-trip-city:empty,
.b2e-trip-air:empty { display: none; }

.b2e-trip-mid {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    max-width: 260px;
    margin-inline: auto;
}

.b2e-trip-dur { font-size: 0.72rem; color: #6b7280; }

.b2e-trip-line {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--b2e-border) 20%, var(--b2e-border) 80%, transparent);
    position: relative;
}

.b2e-trip-line::after {
    content: "\2708";
    position: absolute;
    top: 50%;
    inset-inline-end: -2px;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: var(--b2e-primary-2);
    background: #fff;
    padding-inline: 2px;
}

[dir="rtl"] .b2e-trip-line::after { transform: translateY(-50%) scaleX(-1); }

.b2e-trip-stops { font-size: 0.72rem; color: #16a34a; font-weight: 600; }

.b2e-trip-date { font-size: 0.75rem; color: #6b7280; margin-top: 0.3rem; }

.b2e-trip-facts {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0.6rem 0 0;
    border-top: 1px dashed var(--b2e-border);
    font-size: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.b2e-trip-facts li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0;
    color: #4b5563;
}

/* Compact chip variant: icon + value only (label moves to tooltip/SR text)
   so per-leg facts wrap inline and the card takes far less vertical space. */
.b2e-trip-facts li.b2e-fact-chip {
    padding: 0.2rem 0.55rem;
    gap: 0.35rem;
    background: var(--b2e-bg-alt, #f1f5f9);
    border: 1px solid var(--b2e-border);
    border-radius: 999px;
    color: #374151;
    line-height: 1.15;
    white-space: nowrap;
}

.b2e-fact-chip-val { font-weight: 700; color: var(--u-ink, #0f172a); }

.b2e-trip-fact-ico { width: 1.1rem; text-align: center; }

/* Per-leg baggage label so each segment's allowance is clearly attributed to
   its fare (e.g. Departure · Saver Eco vs Return · Basic Eco). */
.b2e-trip-facts-leg-label {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--b2e-border);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--u-primary-dark, #6D28D9);
}

/* When a leg label precedes the facts list, the label already carries the
   divider, so drop the list's own top border/padding to avoid a double rule. */
.b2e-trip-facts-leg-label + .b2e-trip-facts {
    margin-top: 0.4rem;
    padding-top: 0;
    border-top: none;
}

/* Fare facts rendered INSIDE each segment card. The fare label sits above the
   chips so every leg clearly shows its own selected fare + allowances. */
.b2e-trip-leg-facts { margin-top: 0.1rem; }

.b2e-trip-leg-fare {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--b2e-border);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--u-primary-dark, #6D28D9);
}

.b2e-trip-leg-fare + .b2e-trip-facts {
    margin-top: 0.4rem;
    padding-top: 0;
    border-top: none;
}

/* Per-leg "selected fare includes" checklist rendered inside each segment card. */
.b2e-trip-includes {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--b2e-border);
}

.b2e-trip-includes-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #374151;
    margin-bottom: 0.35rem;
}

.b2e-trip-includes-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.9rem;
    row-gap: 0.05rem;
}

.b2e-trip-includes-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: #4b5563;
    padding: 0.1rem 0;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.b2e-trip-seats {
    margin-top: 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #b45309;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
}

.b2e-upgraded-fare {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--b2e-border);
}

.b2e-upgraded-fare-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 0.4rem;
}

.b2e-upgraded-fare-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.9rem;
    row-gap: 0.05rem;
}

.b2e-upgraded-fare-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: #4b5563;
    padding: 0.1rem 0;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.b2e-upgraded-fare-list li.b2e-upgraded-fare-leg {
    display: block;
    grid-column: 1 / -1;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--b2e-primary-2, #7C3AED);
    padding-top: 0.4rem;
}

.b2e-upgraded-fare-list li.b2e-upgraded-fare-leg:first-child {
    padding-top: 0;
}

.b2e-feat-icon {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin-top: 0.1rem;
}
.b2e-feat-icon.ok { color: #16a34a; }
.b2e-feat-icon.no { color: #dc3545; }

.b2e-fare-card { margin-top: 0.75rem; }

.b2e-fare-title {
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.b2e-fare-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.9rem;
    padding: 0.22rem 0;
}

.b2e-fare-divider {
    height: 1px;
    background: var(--b2e-border);
    margin: 0.55rem 0;
}

.b2e-fare-total {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--b2e-primary-2);
}

.b2e-fare-note {
    margin: 0.6rem 0 0;
    font-size: 0.75rem;
    color: #6b7280;
}

@media (max-width: 991.98px) {
    .b2e-trip-aside { position: static; }
}

/* ============================================================
   Dedicated Payment page (MyFatoorah embedded card widget)
   ============================================================ */
.pay-page {
    padding-block: 2rem 3.5rem;
    background: var(--u-bg);
    min-height: 60vh;
}
.pay-page .container { max-width: 960px; }
.pay-page .hd-crumbs { margin-block-end: 1rem; }
.pay-title {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 800;
    color: var(--u-ink);
    margin-block-end: 1.5rem;
    letter-spacing: -0.01em;
}
.pay-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 1.5rem;
}
.pay-card {
    background: #fff;
    border: 1px solid var(--u-border, #e6eaf0);
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(13, 27, 42, .06);
    padding: 1.5rem;
}
.pay-section-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--u-ink);
    margin: 0 0 1.15rem;
    padding-block-end: .9rem;
    border-block-end: 1px solid var(--u-border, #eef1f5);
}
.pay-section-title i { color: var(--u-primary); font-size: 1.15rem; }

/* Embedded widget container: keep the iframe tidy, centered and not overly wide */
.pay-card-element {
    min-height: 220px;
    max-width: 480px;
    margin-inline: auto;
    padding-inline: .25rem;
    box-sizing: border-box;
    overflow: visible;
    border-radius: .7rem;
}
.pay-card-element iframe {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    border: 0;
    border-radius: .7rem;
}

/* HyperPay (OPPWA COPYandPAY) embedded widget — themed to the navy/gold/purple palette. */
.pay-hyperpay { width: 100%; }
/* The 3-column form needs more room than the single-column MyFatoorah widget. */
.pay-main .pay-card-element.pay-hyperpay { max-width: 680px; }
.pay-hyperpay .wpwl-form {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    max-width: 100%;
}
.pay-hyperpay .wpwl-group {
    margin-block-end: 1rem;
    min-width: 0;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}
.pay-hyperpay .wpwl-label {
    display: block;
    color: var(--u-ink);
    font-weight: 600;
    font-size: .85rem;
    margin-block-end: .35rem;
    line-height: 1.3;
    white-space: nowrap;
}
.pay-hyperpay .wpwl-wrapper {
    width: 100% !important;
    display: block;
    box-sizing: border-box;
}
.pay-hyperpay .wpwl-control {
    box-sizing: border-box;
    width: 100% !important;
    height: 46px;
    line-height: 24px;
    padding: 10px 12px;
    border: 1px solid #d9e0ea;
    border-radius: .6rem;
    font-size: .95rem;
    color: var(--u-ink);
    background-color: #fff;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pay-hyperpay .wpwl-control::placeholder { color: var(--u-muted); opacity: 1; }
.pay-hyperpay .wpwl-control:focus,
.pay-hyperpay .wpwl-control-cardHolder:focus {
    border-color: var(--u-primary);
    box-shadow: 0 0 0 3px var(--u-primary-light);
    outline: none;
}
/* OPPWA renders Card Number / Expiry / CVV as iframes with an inline fixed width —
   force them to fill their grid column. */
.pay-hyperpay .wpwl-control-iframe,
.pay-hyperpay .wpwl-control iframe,
.pay-hyperpay iframe.wpwl-control {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    box-sizing: border-box;
}
/* CVV group: keep the input and the "?" hint icon on one line, input flexes to fill. */
.pay-hyperpay .wpwl-group-cvv .wpwl-wrapper {
    display: flex;
    align-items: center;
    gap: .4rem;
    position: relative;
}
.pay-hyperpay .wpwl-group-cvv .wpwl-control-cvv { flex: 1 1 auto; }
/* OPPWA absolutely-positions the "?" hint icon over the field — make it a normal
   flex item so it sits beside the input instead of overlapping it (LTR + RTL). */
.pay-hyperpay .wpwl-group-cvv .wpwl-icon,
.pay-hyperpay .wpwl-sup-wrapper {
    flex: 0 0 auto;
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    margin: 0 !important;
}
/* RTL: place the hint icon after the input (visually on the left) without overlap. */
[dir="rtl"] .pay-hyperpay .wpwl-group-cvv .wpwl-wrapper { flex-direction: row-reverse; }
/* Brand row: hide the brand-type <select> dropdown but keep the card brand image icon. */
.pay-hyperpay .wpwl-group-brand .wpwl-label-brand,
.pay-hyperpay .wpwl-group-brand .wpwl-wrapper-brand,
.pay-hyperpay .wpwl-group-brand .wpwl-control-brand { display: none !important; }
.pay-hyperpay .wpwl-brand-card { filter: none; display: inline-block; }
/* CVV hint icon sits flush with the input height */
.pay-hyperpay .wpwl-hint,
.pay-hyperpay .wpwl-sup-wrapper { line-height: 1.4; }
.pay-hyperpay .wpwl-icon-cvv { height: 46px; }
/* Pay button */
.pay-hyperpay .wpwl-button,
.pay-hyperpay .wpwl-button-pay {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    background: var(--u-primary);
    border: 1px solid var(--u-primary);
    border-radius: .65rem;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    padding: 0 1.75rem;
    transition: background-color .15s ease, border-color .15s ease;
}
.pay-hyperpay .wpwl-button-pay:hover,
.pay-hyperpay .wpwl-button-pay:focus {
    background: var(--u-primary-dark);
    border-color: var(--u-primary-dark);
}
.pay-hyperpay .wpwl-hint { color: var(--u-muted); font-size: .8rem; }

/* ── 2-column, 3-row layout (tablet/desktop) ───────────────────────────────────
   Row 1: Brand select (left) + VISA/Mada logo (right), full-width flex row
   Row 2: Card Number · Expiry
   Row 3: Card holder · CVV
   Then: full-width Pay button. Hidden OPPWA groups are collapsed. */
@media (min-width: 576px) {
    .pay-hyperpay .wpwl-form {
        display: grid;
        grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
        column-gap: 1.25rem;
        row-gap: 0;
        align-items: start;
        justify-items: stretch;
    }
    .pay-hyperpay .wpwl-group { margin-block-end: .85rem; }

    /* Brand row: dropdown hidden, keep only the card-brand logo on the right. */
    .pay-hyperpay .wpwl-group-brand {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: .25rem 1rem;
    }
    .pay-hyperpay .wpwl-brand-card {
        margin: 0;
        margin-inline-start: auto;
        align-self: center;
    }

    .pay-hyperpay .wpwl-group-cardNumber { grid-column: 1 / 2; }
    .pay-hyperpay .wpwl-group-expiry { grid-column: 2 / 3; }
    .pay-hyperpay .wpwl-group-cardHolder { grid-column: 1 / 2; }
    .pay-hyperpay .wpwl-group-cvv { grid-column: 2 / 3; }

    /* Collapse OPPWA's hidden/optional rows so they add no vertical space. */
    .pay-hyperpay .wpwl-group[style*="display: none"],
    .pay-hyperpay .wpwl-group-mobilePhoneCountryCode,
    .pay-hyperpay .wpwl-group-mobilePhoneNumber,
    .pay-hyperpay .wpwl-group-birthDate,
    .pay-hyperpay .wpwl-group-clickToPayConfirmation,
    .pay-hyperpay .wpwl-group-visaInstallmentConfirmation {
        margin: 0;
    }

    .pay-hyperpay .wpwl-group-submit {
        grid-column: 1 / -1;
        margin-block: .35rem 0;
    }
}

[dir="rtl"] .pay-hyperpay .wpwl-label,
[dir="rtl"] .pay-hyperpay .wpwl-control { text-align: right; }

.pay-loading {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-block-start: 1rem;
    font-size: .9rem;
    color: var(--u-primary-dark);
    font-weight: 600;
}
.pay-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin: 1.15rem 0 0;
    padding-block-start: 1rem;
    border-block-start: 1px dashed var(--u-border, #e6eaf0);
    font-size: .82rem;
    color: var(--u-muted);
}
.pay-secure i { color: #1a7f4b; font-size: 1rem; }

/* Order summary aside */
.pay-summary { position: sticky; top: 5.25rem; }
.pay-summary-product {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem;
    border-radius: .7rem;
    background: var(--u-primary-light, #f3edfe);
    margin-block-end: 1.15rem;
}
.pay-summary-product-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: .6rem;
    background: var(--u-primary);
    color: #fff;
    flex-shrink: 0;
    font-size: 1.05rem;
}
.pay-summary-product-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.pay-summary-product-type { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--u-primary-dark); }
.pay-summary-product-name { font-weight: 600; color: var(--u-ink); line-height: 1.35; }
.pay-summary-product-city { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--u-muted); margin-block-start: .1rem; }
.pay-summary-product-city i { color: var(--u-primary); }

/* Hotel booking detail rows */
.pay-summary-details {
    list-style: none; margin: 0 0 1.15rem; padding: 0 0 1.15rem;
    border-block-end: 1px dashed var(--u-border, #e6eaf0);
    display: flex; flex-direction: column; gap: .8rem;
}
.pay-summary-details > li { display: flex; align-items: flex-start; gap: .6rem; }
.pay-summary-details > li > i { color: var(--u-primary); font-size: 1rem; margin-block-start: .1rem; flex-shrink: 0; }
.pay-summary-details > li > div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.pay-detail-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--u-muted); }
.pay-detail-value { font-size: .86rem; font-weight: 600; color: var(--u-ink); line-height: 1.4; }
.pay-detail-value.is-refundable { color: #1a7f4b; }
.pay-detail-value.is-nonrefundable { color: #a15c00; }
.pay-detail-chip {
    display: inline-block; margin-inline-start: .4rem; padding: .1rem .45rem;
    border-radius: .4rem; background: var(--u-primary-light, #f3edfe);
    color: var(--u-primary-dark); font-size: .72rem; font-weight: 700; white-space: nowrap;
}

.pay-summary-lines { list-style: none; margin: 1rem 0 0; padding: 1rem 0 0; border-block-start: 1px solid var(--u-line); display: flex; flex-direction: column; gap: .6rem; }
.pay-summary-lines li { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; font-size: .88rem; }
.pay-summary-lines li > span { color: var(--u-muted); }
.pay-summary-lines li > strong { color: var(--u-ink); font-weight: 600; text-align: end; }

.pay-summary-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-block-start: 1rem;
    padding-block-start: 1rem;
    border-block-start: 2px solid var(--u-border, #eef1f5);
}
.pay-summary-total > span { color: var(--u-muted); font-weight: 600; }
.pay-summary-total > strong {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--u-primary-dark);
    white-space: nowrap;
}
.pay-summary-taxnote { margin: .35rem 0 0; font-size: .74rem; color: var(--u-muted); }

.pay-summary-trust {
    list-style: none; margin: 1.15rem 0 0; padding: 1rem 0 0;
    border-block-start: 1px dashed var(--u-border, #e6eaf0);
    display: flex; flex-direction: column; gap: .5rem;
}
.pay-summary-trust li { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--u-muted); }
.pay-summary-trust i { color: #1a7f4b; font-size: .95rem; }

/* Error banner */
.pay-alert {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1.1rem;
    border-radius: .7rem;
    margin-block-end: 1.25rem;
    font-size: .9rem;
    font-weight: 600;
}
.pay-alert-error {
    background: #fdecec;
    color: #b3261e;
    border: 1px solid #f5c2c0;
}
.pay-alert i { font-size: 1.1rem; }

@media (max-width: 991.98px) {
    .pay-grid { grid-template-columns: 1fr; }
    .pay-summary { position: static; order: -1; }
}
@media (max-width: 575.98px) {
    .pay-card { padding: 1.15rem; }
}

/* Balance the two columns: let the payment card fill the row height and vertically
   center the embedded widget so it doesn't sit short next to the taller summary. */
.pay-main {
    display: flex;
    flex-direction: column;
}
.pay-main .pay-card-element {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}
/* HyperPay widget is a full form: top-align + stretch so fields use the full width. */
.pay-main .pay-card-element.pay-hyperpay {
    justify-content: flex-start;
    align-items: stretch;
    min-height: 0;
}
@media (min-width: 992px) {
    .pay-grid { min-height: 460px; }
}

/* Payment failed page */
.pf-card { max-width: 560px; margin-inline: auto; }
.pf-hero-icon { color: #dc2626; font-size: 2.75rem; }
.pf-reason {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin-block-start: 1rem;
    padding: .75rem 1rem;
    border-radius: .7rem;
    background: #fdecec;
    border: 1px solid #f5c2c0;
    text-align: start;
}
.pf-reason-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #b3261e;
}
.pf-reason-text { font-size: .9rem; color: #7f1d1d; }
.pf-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    padding: 1.25rem 1.5rem 1.5rem;
}
.pf-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
}

/* --- Flight passenger Add-Ons (chargeable baggage) --- */
.b2e-addons-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}

.b2e-addons-ico {
    font-size: 1.1rem;
}

.b2e-addons-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--b2e-primary, #1a4b8c);
}

.b2e-addons-card {
    border: 1px solid var(--b2e-border, #e3e8ef);
    border-radius: .75rem;
    padding: 0;
    background: #fff;
    overflow: hidden;
}

.b2e-addons-cardhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1.1rem 0;
    border-bottom: 1px solid var(--b2e-border, #e3e8ef);
}

.b2e-addons-cardtab {
    font-weight: 700;
    font-size: .95rem;
    color: var(--b2e-primary, #1a4b8c);
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--b2e-primary, #1a4b8c);
    margin-bottom: -1px;
}

.b2e-addons-skip {
    border: 0;
    background: transparent;
    color: #e0a100;
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    padding: 0 0 .6rem;
}

.b2e-addons-skip:hover {
    text-decoration: underline;
}

.b2e-addons-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.b2e-addons-tab {
    border: 1px solid var(--b2e-border, #e3e8ef);
    background: #f5f8fc;
    border-radius: 2rem;
    padding: .35rem .9rem;
    font-size: .85rem;
    font-weight: 600;
    color: #43506b;
    cursor: pointer;
    transition: all .15s ease;
}

.b2e-addons-tab.is-active {
    background: var(--b2e-primary, #1a4b8c);
    border-color: var(--b2e-primary, #1a4b8c);
    color: #fff;
}

/* A leg with a chosen bag gets a subtle "done" tick so the customer can see at a
   glance which legs still need a selection. */
.b2e-addons-tab.is-done:not(.is-active) {
    border-color: var(--u-teal, #0D9488);
    color: var(--u-teal, #0D9488);
    background: rgba(13, 148, 136, .08);
}
.b2e-addons-tab.is-done::before {
    content: "\2713\00a0";
    font-weight: 800;
}

/* Nudge that appears once the first leg is chosen but another leg still needs a
   bag selection; clicking it jumps straight to that leg's tab. */
.b2e-addons-prompt {
    margin-top: .75rem;
}
.b2e-addons-prompt-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    border: 1px dashed var(--u-primary, #7C3AED);
    background: var(--u-primary-light, #f3edfe);
    color: var(--u-primary, #7C3AED);
    border-radius: .6rem;
    padding: .55rem .75rem;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}
.b2e-addons-prompt-btn:hover {
    background: #eadffd;
}

.b2e-addons-body {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    padding: 1rem;
}

.b2e-addons-left {
    flex: 0 0 250px;
    max-width: 100%;
    padding-inline-end: 1.1rem;
    border-inline-end: 1px solid var(--b2e-border, #e3e8ef);
}

.b2e-addons-summary {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.b2e-addons-paxchip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    align-self: flex-start;
    border: 1px solid #cfe0f5;
    background: #f5f9ff;
    border-radius: 2rem;
    padding: .3rem .8rem;
    font-size: .8rem;
    font-weight: 600;
    color: #1a4b8c;
}

.b2e-addons-paxchip-amt {
    color: #43506b;
}

.b2e-addons-sumcard {
    background: #eef3fb;
    border-radius: .65rem;
    padding: .75rem .85rem;
}

.b2e-addons-sumcard-label {
    font-weight: 600;
    color: #43506b;
}

.b2e-addons-sumcard-value {
    font-weight: 700;
    color: #1a1a1a;
}

.b2e-addons-sumcard-top,
.b2e-addons-sumcard-bot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
}

.b2e-addons-sumcard-bot {
    margin-top: .25rem;
}

.b2e-addons-panels {
    flex: 1 1 320px;
    min-width: 260px;
    padding-inline-start: 1.1rem;
}

.b2e-bag-allowance {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    padding-bottom: .65rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid var(--b2e-border, #e3e8ef);
    font-size: .85rem;
    font-weight: 600;
}

.b2e-bag-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .25rem;
    border-bottom: 1px solid #f0f3f8;
}

.b2e-bag-row.is-selected {
    background: #f2f8f2;
    border-radius: .5rem;
    padding-inline: .5rem;
}

.b2e-bag-ico {
    font-size: 1.4rem;
}

.b2e-bag-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.b2e-bag-name {
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: #43506b;
}

.b2e-bag-wholetrip {
    display: inline-block;
    margin-inline-start: .4rem;
    padding: .05rem .4rem;
    border-radius: 1rem;
    background: #eef3fb;
    color: #1a4b8c;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .02em;
    vertical-align: middle;
}

.b2e-bag-price {
    font-weight: 700;
    color: #1a1a1a;
    font-size: .95rem;
}

.b2e-bag-btn {
    min-width: 84px;
}

.b2e-addons-loading {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 1rem 1rem;
}

.b2e-bag-none {
    padding: .75rem 0;
}

@media (max-width: 575.98px) {
    .b2e-addons-left {
        flex: 1 1 100%;
        padding-inline-end: 0;
        border-inline-end: 0;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid var(--b2e-border, #e3e8ef);
    }

    .b2e-addons-panels {
        padding-inline-start: 0;
    }
}

/* ---- Searchable nationality combobox (flight passenger form) ---- */
.nat-combo {
    position: relative;
}

.nat-combo-control {
    position: relative;
    display: flex;
    align-items: center;
}

.nat-combo-icon {
    position: absolute;
    inset-inline-start: 0.75rem;
    color: var(--u-muted, #64748B);
    pointer-events: none;
}

.nat-combo-input {
    padding-inline-start: 2.25rem;
    padding-inline-end: 2rem;
}
/* Profile combos (Nationality / Country of Residence) have no leading icon element,
   so remove the icon gutter that would otherwise leave an empty gap before the text. */
[data-country-combo] .nat-combo-input {
    padding-inline-start: 0.75rem;
}

.nat-combo-caret {
    position: absolute;
    inset-inline-end: 0.75rem;
    color: var(--u-muted, #64748B);
    pointer-events: none;
}

.nat-combo-list {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 4px);
    z-index: 1050;
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    background: #fff;
    border: 1px solid var(--u-border, #e3e8ef);
    border-radius: 0.5rem;
    box-shadow: 0 12px 30px rgba(13, 27, 42, 0.14);
}

.nat-combo-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.4rem;
    cursor: pointer;
}

.nat-combo-option:hover,
.nat-combo-option.is-selected {
    background: var(--u-primary-light, #f3edfe);
}

.nat-opt-name {
    color: var(--u-ink, #0F172A);
    font-size: 0.9rem;
}

.nat-opt-code {
    color: var(--u-primary-dark, #6D28D9);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
}

.nat-combo-empty {
    padding: 0.5rem 0.6rem;
    color: var(--u-muted, #64748B);
    font-size: 0.85rem;
}


/* Fare-hold countdown — prominent full-width banner at the top of the passenger form. */
.b2e-fare-timer-banner {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.6rem 1rem;
    border-radius: 12px;
    border: 1px solid #f6c453;
    background: linear-gradient(90deg, #fff7e6 0%, #fef3d6 100%);
    color: #9a6a00;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 10px rgba(214, 158, 46, 0.14);
}

.b2e-fare-timer-banner .b2e-fare-timer-ico {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.b2e-fare-timer-banner .b2e-fare-timer-text {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 0.95rem;
}

.b2e-fare-timer-banner .b2e-fare-timer-hint {
    flex: 1 1 auto;
    text-align: end;
    font-weight: 500;
    font-size: 0.82rem;
    opacity: 0.85;
}

/* Final minute: switch to an alarming red and pulse to grab attention. */
.b2e-fare-timer-banner.is-urgent {
    border-color: #e53e3e;
    background: linear-gradient(90deg, #fdecec 0%, #fbdada 100%);
    color: #c53030;
    animation: b2eFareTimerPulse 1.1s ease-in-out infinite;
}

@keyframes b2eFareTimerPulse {
    0% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.4); }
    70% { box-shadow: 0 0 0 8px rgba(229, 62, 62, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0); }
}

.b2e-fare-timer-banner.is-expired {
    border-color: #cfcfcf;
    background: #f1f1f1;
    color: #8a8a8a;
    box-shadow: none;
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .b2e-fare-timer-banner.is-urgent { animation: none; }
}

.b2e-expired-ico {
    color: var(--b2e-primary-2, #7C3AED);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Airport Transfers (Transport) page
   ========================================================================== */
.tr-page { background: var(--u-bg); min-height: 60vh; padding-bottom: 3rem; }

.tr-hero {
    background: linear-gradient(135deg, var(--u-navy) 0%, var(--u-navy-2) 100%);
    color: #fff;
    padding: 2.75rem 0 4.5rem;
    position: relative;
    overflow: hidden;
}
.tr-hero::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--u-gold), transparent);
}
.tr-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--u-gold-soft);
    color: var(--u-gold);
    border: 1px solid rgba(212, 175, 55, .35);
    padding: .3rem .85rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: .85rem;
}
.tr-title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; margin: 0; color: #fff; }
.tr-subtitle { color: rgba(255, 255, 255, .72); margin: .5rem 0 0; max-width: 40rem; }

.tr-container { position: relative; }
.tr-search {
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius);
    box-shadow: var(--u-shadow-md);
    padding: 1.35rem 1.5rem;
    margin-top: -2.75rem;
    margin-bottom: 2rem;
}
.tr-search .form-label { font-weight: 600; color: var(--u-ink); font-size: .85rem; }
.tr-search .btn-search { height: calc(2.5rem + 2px); font-weight: 700; }

.tr-results-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    color: var(--u-muted);
    font-weight: 600;
}
.tr-results-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 .5rem;
    border-radius: 999px;
    background: var(--u-primary-light);
    color: var(--u-primary);
    font-weight: 800;
}

.tr-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius);
    overflow: hidden;
    box-shadow: var(--u-shadow);
    transition: var(--u-transition);
}
.tr-card:hover { transform: translateY(-4px); box-shadow: var(--u-shadow-lg); border-color: rgba(124, 58, 237, .3); }

.tr-card-media { position: relative; aspect-ratio: 16 / 9; background: var(--u-bg-alt); }
.tr-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-card-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.75rem;
    color: var(--u-primary);
    background: linear-gradient(135deg, var(--u-primary-light), var(--u-bg-alt));
}
.tr-trip-badge {
    position: absolute;
    inset-block-start: .7rem;
    inset-inline-start: .7rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    background: rgba(13, 27, 42, .82);
    color: #fff;
    backdrop-filter: blur(4px);
}
.tr-trip-badge.is-round { background: rgba(124, 58, 237, .92); }

.tr-card-body { display: flex; flex-direction: column; flex-grow: 1; padding: 1.1rem 1.15rem 1.25rem; }
.tr-card-title { font-size: 1.05rem; font-weight: 700; color: var(--u-ink); margin: 0 0 .35rem; }
.tr-card-airport { display: flex; align-items: center; gap: .4rem; color: var(--u-primary-dark); font-size: .82rem; font-weight: 600; margin: 0 0 .5rem; }
.tr-card-airport i { color: var(--u-primary); }
.tr-card-desc { color: var(--u-muted); font-size: .875rem; margin: 0 0 1rem; flex-grow: 1; }

.tr-price-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem;
    padding-top: .85rem;
    border-top: 1px solid var(--u-line);
}
.tr-price-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--u-muted); }
.tr-price { font-size: 1.35rem; font-weight: 800; color: var(--u-primary-dark); line-height: 1.1; }
.tr-fee { display: block; font-size: .72rem; color: var(--u-muted); margin-top: .15rem; }
.tr-book { flex-shrink: 0; font-weight: 700; white-space: nowrap; }

.tr-empty {
    text-align: center;
    padding: 3.5rem 1rem;
    color: var(--u-muted);
}
.tr-empty-icon {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--u-primary-light);
    color: var(--u-primary);
    font-size: 1.85rem;
}
.tr-empty h3 { font-size: 1.15rem; font-weight: 700; color: var(--u-ink); margin: 0; }

/* ==========================================================================
   Transport Book Now page (dedicated booking page)
   Two-column: guest/contact/flight/extras on the main column, sticky summary +
   payment on the aside. RTL-safe via logical properties.
   ========================================================================== */
.tb-page {
    background: var(--u-bg);
    padding-block: 1.5rem 3rem;
    min-height: 60vh;
}
.tb-crumbs {
    margin-block-end: 1rem;
}
.tb-crumbs a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--u-primary);
    font-weight: 600;
    text-decoration: none;
    font-size: .92rem;
}
.tb-crumbs a:hover { color: var(--u-primary-dark); }

.tb-alert {
    display: flex;
    align-items: center;
    gap: .6rem;
    border-radius: 12px;
    padding: .8rem 1rem;
    margin-block-end: 1rem;
    font-size: .92rem;
}
.tb-alert-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.tb-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}
@media (min-width: 992px) {
    .tb-grid { grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); }
    .tb-aside { position: sticky; top: 1.5rem; }
}

.tb-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--u-ink);
    margin-block-end: 1rem;
}
.tb-card {
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 16px;
    padding: 1.35rem;
    margin-block-end: 1.1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.tb-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--u-ink);
    margin-block-end: 1rem;
}

.tb-title-group {
    display: flex;
    gap: .6rem;
    margin-block-end: 1rem;
    flex-wrap: wrap;
}
.tb-pill {
    position: relative;
    cursor: pointer;
}
.tb-pill input {
    position: absolute;
    opacity: 0;
    inset: 0;
    cursor: pointer;
}
.tb-pill span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    padding: .5rem 1.1rem;
    border: 1px solid #d5dae3;
    border-radius: 999px;
    font-weight: 600;
    color: var(--u-ink);
    transition: all .15s ease;
}
.tb-pill input:checked + span {
    border-color: var(--u-primary);
    background: var(--u-primary-light);
    color: var(--u-primary-dark);
}

.tb-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: .85rem;
    margin-block-end: .85rem;
}
@media (min-width: 576px) {
    .tb-row { grid-template-columns: 1fr 1fr; }
}
.tb-field { display: flex; flex-direction: column; gap: .35rem; }
.tb-field-sm { max-width: 10rem; }
.tb-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--u-muted, #64748B);
}
.tb-input {
    width: 100%;
    border: 1px solid #d5dae3;
    border-radius: 10px;
    padding: .7rem .85rem;
    font-size: .95rem;
    color: var(--u-ink);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tb-input:focus {
    outline: none;
    border-color: var(--u-primary);
    box-shadow: 0 0 0 3px var(--u-primary-light);
}
.tb-card > .tb-field { margin-block-end: .85rem; }

.tb-phone {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .5rem;
    align-items: end;
}
.tb-dial {
    display: flex;
    align-items: center;
    gap: .15rem;
    border: 1px solid #d5dae3;
    border-radius: 10px;
    padding: .7rem .6rem;
    background: #f8fafc;
    color: var(--u-ink);
}
.tb-dial-input {
    width: 3rem;
    border: none;
    background: transparent;
    font-size: .95rem;
    color: var(--u-ink);
}
.tb-dial-input:focus { outline: none; }

.tb-hint {
    font-size: .82rem;
    color: var(--u-muted, #64748B);
    margin-block: .35rem 0;
}
.tb-hint-top { margin-block: -.5rem 1rem; }

.tb-extra {
    display: flex;
    align-items: center;
    gap: .9rem;
    border: 1px solid #e6e9ef;
    border-radius: 12px;
    padding: .9rem 1rem;
    margin-block-end: .75rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.tb-extra:hover { border-color: var(--u-primary); }
.tb-extra-icon {
    width: 2.4rem;
    height: 2.4rem;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--u-primary-light);
    color: var(--u-primary);
    font-size: 1.15rem;
}
.tb-extra-body { display: flex; flex-direction: column; gap: .1rem; flex: 1 1 auto; }
.tb-extra-name { font-weight: 700; color: var(--u-ink); }
.tb-extra-desc { font-size: .84rem; color: var(--u-muted, #64748B); }
.tb-extra-price { font-weight: 700; color: var(--u-teal, #0D9488); white-space: nowrap; }
.tb-extra-check {
    inline-size: 1.2rem;
    block-size: 1.2rem;
    accent-color: var(--u-primary);
    flex: none;
}

/* ---- Aside: booking summary + payment ---- */
.tb-summary,
.tb-payment {
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.tb-summary { margin-block-end: 1.1rem; }
.tb-summary-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--u-ink);
    margin-block-end: .85rem;
}
.tb-summary-kicker {
    font-size: .82rem;
    color: var(--u-muted, #64748B);
    margin: 0;
}
.tb-summary-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--u-ink);
    margin: .1rem 0 .35rem;
}
.tb-summary-desc {
    font-size: .85rem;
    color: var(--u-muted, #64748B);
    margin-block-end: .75rem;
}
.tb-summary-media {
    border-radius: 12px;
    overflow: hidden;
    background: var(--u-primary-light);
    margin-block-end: .85rem;
}
.tb-summary-media img { width: 100%; height: auto; display: block; }
.tb-summary-fallback {
    height: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--u-primary);
    font-size: 2.5rem;
}
.tb-summary-badges { display: flex; gap: .5rem; flex-wrap: wrap; margin-block-end: .85rem; }
.tb-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: #f1f5f9;
    font-size: .82rem;
    font-weight: 600;
    color: var(--u-ink);
}
.tb-badge-trip { background: var(--u-primary-light); color: var(--u-primary-dark); }
.tb-summary-perks { list-style: none; padding: 0; margin: 0 0 .85rem; }
.tb-summary-perks li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .86rem;
    color: var(--u-ink);
    padding-block: .2rem;
}
.tb-summary-perks i { color: var(--u-teal, #0D9488); }
.tb-summary-line {
    display: flex;
    gap: .65rem;
    padding-block: .6rem;
    border-top: 1px solid #eef1f5;
}
.tb-summary-line i { color: var(--u-primary); font-size: 1.05rem; margin-block-start: .1rem; }
.tb-summary-label {
    display: block;
    font-size: .78rem;
    color: var(--u-muted, #64748B);
}
.tb-summary-value { display: block; font-weight: 600; color: var(--u-ink); font-size: .9rem; }

.tb-pay-line {
    display: flex;
    justify-content: space-between;
    font-size: .92rem;
    color: var(--u-ink);
    padding-block: .35rem;
}
.tb-pay-extra { color: var(--u-muted, #64748B); }
.tb-pay-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-start: .6rem;
    padding-block-start: .75rem;
    border-top: 1px solid #eef1f5;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--u-ink);
}
.tb-continue {
    width: 100%;
    margin-block-start: 1rem;
    border: none;
    border-radius: 999px;
    padding: .85rem 1.25rem;
    background: var(--u-primary);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    cursor: pointer;
    transition: background .15s ease;
}
.tb-continue:hover { background: var(--u-primary-dark); }
.tb-continue:disabled { opacity: .6; cursor: not-allowed; }

/* ===== Email-first sign-in modal ===== */
.auth-modal-content {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(13, 27, 42, .28);
}
.auth-modal-header {
    border: none;
    padding: 1rem 1.25rem .25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.auth-back-btn {
    border: none;
    background: transparent;
    color: var(--u-muted);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    cursor: pointer;
    padding: .25rem .35rem;
}
.auth-back-btn:hover { color: var(--u-primary); }
.auth-modal-body {
    padding: .5rem 2rem 2.25rem;
}
.auth-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--u-ink);
    margin-bottom: .35rem;
}
.auth-subtitle {
    color: var(--u-muted);
    font-size: .95rem;
    margin-bottom: 1.25rem;
}
.auth-field { margin-bottom: .5rem; }
.auth-input {
    height: 52px;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    padding-inline: 1rem;
    font-size: 1rem;
}
.auth-input:focus {
    border-color: var(--u-primary);
    box-shadow: 0 0 0 3px var(--u-primary-light);
}
.auth-submit {
    width: 100%;
    height: 52px;
    border-radius: 12px;
    background: var(--u-primary);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: none;
}
.auth-submit:hover { background: var(--u-primary-dark); color: #fff; }
.auth-submit:disabled { opacity: .65; }
.auth-error {
    color: #dc2626;
    font-size: .875rem;
    margin-top: .5rem;
}
/* The OTP-step error sits above the centered resend text, so center it to match. */
#authCodeError {
    text-align: center;
}
.auth-otp-inputs {
    display: flex;
    gap: .6rem;
    justify-content: center;
    margin: .5rem 0 1rem;
}
.auth-otp-box {
    width: 48px;
    height: 56px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    color: var(--u-ink);
}
.auth-otp-box:focus {
    outline: none;
    border-color: var(--u-primary);
    box-shadow: 0 0 0 3px var(--u-primary-light);
}
.auth-resend {
    text-align: center;
    font-size: .9rem;
    color: var(--u-muted);
    margin-bottom: .25rem;
}
.auth-resend-btn {
    border: none;
    background: transparent;
    color: var(--u-primary);
    font-weight: 700;
    cursor: pointer;
}
.auth-resend-btn:hover { color: var(--u-primary-dark); text-decoration: underline; }

@media (max-width: 480px) {
    .auth-modal-body { padding-inline: 1.25rem; }
    .auth-otp-box { width: 40px; height: 50px; font-size: 1.25rem; }
    .auth-otp-inputs { gap: .4rem; }
}

/* ===== Account area (dashboard + profile) ===== */
.account-page {
    padding: 2rem 0 3.5rem;
    background: var(--u-bg);
    min-height: 60vh;
}
/* Keep the account content in a comfortable, centered reading column instead of
   stretching across the full-width Bootstrap container (which left the right side empty). */
.account-page > .container {
    max-width: 1200px;
}
/* The profile form sits in the right column of the shared account shell; cap its
   width so the fields stay comfortable to read next to the sidebar. */
.account-page .mb-main .profile-card { max-width: 820px; }
.account-breadcrumb {
    font-size: .875rem;
    color: var(--u-muted);
    margin-bottom: 1.25rem;
}
.account-breadcrumb a { color: var(--u-primary); text-decoration: none; }
.account-breadcrumb a:hover { text-decoration: underline; }
.account-breadcrumb-sep { margin-inline: .4rem; color: #cbd5e1; }
.account-header { margin-bottom: 1.75rem; }
.account-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--u-ink);
    display: flex;
    align-items: center;
    gap: .6rem;
}
.account-title i { color: var(--u-primary); }
.account-subtitle { color: var(--u-muted); margin-top: .35rem; }

.account-tiles { margin-top: .5rem; }
.account-tile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 1.5rem;
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(13, 27, 42, .05);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    height: 100%;
}
.account-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(13, 27, 42, .1);
    border-color: var(--u-primary-light);
}
.account-tile-icon {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--u-primary-light);
    color: var(--u-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.account-tile-body { display: flex; flex-direction: column; gap: .2rem; }
.account-tile-title { font-weight: 700; color: var(--u-ink); font-size: 1.1rem; }
.account-tile-desc { color: var(--u-muted); font-size: .9rem; }
.account-tile-arrow { margin-inline-start: auto; color: #cbd5e1; font-size: 1.1rem; }
[dir="rtl"] .account-tile-arrow { transform: scaleX(-1); }

/* Profile form */
.profile-card {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 6px 18px rgba(13, 27, 42, .05);
    width: 100%;
}
.profile-card .form-label { font-weight: 600; color: var(--u-ink); }
.profile-card .req { color: #dc2626; margin-inline-start: .15rem; }
.profile-actions {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
}
.profile-save {
    background: var(--u-primary);
    border-color: var(--u-primary);
    font-weight: 700;
    padding: .6rem 1.75rem;
    border-radius: 12px;
}
.profile-save:hover { background: var(--u-primary-dark); border-color: var(--u-primary-dark); }

/* ===== Umrah packages listing ===== */
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }
.upk-hero { background: linear-gradient(135deg, var(--u-navy), var(--u-navy-2)); color: #fff; padding: 2.5rem 0 3.5rem; border-bottom: 3px solid var(--u-gold); }
.upk-hero-badge { display: inline-flex; gap: .4rem; align-items: center; background: var(--u-gold-soft); color: var(--u-gold); border: 1px solid var(--u-gold); border-radius: 999px; padding: .25rem .8rem; font-size: .8rem; font-weight: 600; }
.upk-hero-title { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; margin: .75rem 0 .35rem; }
.upk-hero-sub { color: rgba(255,255,255,.75); margin: 0; max-width: 40rem; }
.upk-list { padding-bottom: 3rem; }
.upk-toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; background: linear-gradient(135deg, #fff, #FBF8EF); border-radius: 18px; border: 1px solid #EFE6C8; box-shadow: 0 6px 20px rgba(15,23,42,.06); padding: .85rem 1rem .85rem 1.15rem; position: relative; }
.upk-toolbar::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; border-start-start-radius: 18px; border-end-start-radius: 18px; background: linear-gradient(180deg, var(--u-gold), var(--u-gold-dark)); }
.upk-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; }
.upk-filter-label { display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--u-muted); white-space: nowrap; }
.upk-filter-label i { color: var(--u-gold-dark); font-size: .9rem; }
.upk-tabs { display: flex; gap: .4rem; overflow-x: auto; }
.upk-card[hidden], .upk-empty[hidden] { display: none; }
.upk-dates { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .85rem; color: var(--u-ink); }
.upk-dates i { color: var(--u-primary); }
.upk-dur { color: var(--u-muted); }
.upk-inc { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; font-size: .85rem; color: var(--u-ink); }
.upk-inc li { position: relative; padding-inline-start: 1.1rem; line-height: 1.4; }
.upk-inc li::before { content: ""; position: absolute; inset-inline-start: 0; top: .45em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--u-gold-dark); }
.upk-avail { font-size: .82rem; color: var(--u-muted); }
.upk-avail strong { color: var(--u-ink); }
/* Multi-hotel block on the package card */
.upk-hotels-item { flex-direction: column; align-items: stretch !important; }
.upk-hotels-head { display: inline-flex; align-items: center; gap: .45rem; font-weight: 400; font-size: .85rem; color: var(--u-ink); }
.upk-hotels-head i { color: var(--u-gold-dark); }
.upk-hotels { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; }
.upk-hotels li::before { content: none; }
.upk-hotel {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .6rem;
    background: #FAFBFC;
    border: 1px solid #EDF0F4;
    border-radius: 10px;
    transition: background .15s ease, border-color .15s ease;
}
.upk-hotel:hover { background: #fff; border-color: #DEE3EA; }
.upk-hotel-ic {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 1.8rem; height: 1.8rem; border-radius: 8px;
    background: var(--u-gold-soft); color: var(--u-gold-dark); font-size: .8rem;
}
.upk-hotel-info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1 1 auto; }
.upk-hotel-top { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; }
.upk-hotel-name { font-weight: 400; color: var(--u-ink); font-size: .85rem; line-height: 1.2; }
.upk-hotel-stars { display: inline-flex; gap: .06rem; color: var(--u-gold); font-size: .64rem; white-space: nowrap; }
.upk-hotel-city {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .74rem; color: var(--u-muted); font-weight: 500;
}
.upk-hotel-city i { color: var(--u-gold-dark); font-size: .7rem; }
.upk-quote { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; margin-top: 3rem; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 24px; background: linear-gradient(135deg, var(--u-navy), var(--u-navy-2)); color: #fff; }
.upk-quote-badge { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .9rem; border-radius: 999px; border: 1px solid rgba(212,175,55,.45); background: rgba(212,175,55,.12); color: var(--u-gold); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.upk-quote-title { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 800; line-height: 1.2; margin: 1rem 0 .75rem; color: #fff; }
.upk-quote-text { color: rgba(255,255,255,.78); max-width: 34rem; margin: 0 0 1.25rem; line-height: 1.6; }
.upk-quote-trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; font-size: .88rem; color: rgba(255,255,255,.88); }
.upk-quote-trust i { color: var(--u-gold); margin-inline-end: .35rem; }
.upk-quote-card { background: #fff; color: var(--u-ink); border-radius: 18px; padding: 1.5rem; box-shadow: 0 20px 40px rgba(0,0,0,.25); }
.upk-quote-card-title { font-size: 1.2rem; font-weight: 800; margin: 0 0 .25rem; color: var(--u-navy); }
.upk-quote-card-title i { color: var(--u-primary); margin-inline-end: .35rem; }
.upk-quote-card-sub { font-size: .85rem; color: var(--u-muted); margin: 0 0 1rem; }
.upk-quote-label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--u-ink); margin: .9rem 0 .4rem; }
.upk-quote-card .form-control, .upk-quote-card .form-select { min-height: 46px; border-radius: 10px; }
.upk-quote-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 48px; margin-top: 1.1rem; border: 0; border-radius: 10px; background: var(--u-primary); color: #fff; font-weight: 700; }
.upk-quote-btn:hover { background: var(--u-primary-dark); }
.upk-quote-btn:disabled { opacity: .85; cursor: wait; }
.upk-quote-btn [hidden] { display: none !important; }
.upk-quote-card .date-field { position: relative; }

/* Umrah traveller page */
.uti-notice { display: flex; gap: .5rem; align-items: center; background: #fff8e1; border: 1px solid #f6e3a1; border-radius: 12px; padding: .65rem .9rem; font-size: .875rem; margin-block-end: 1rem; }
.uti-notice i { color: var(--u-gold); }
.uti-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 1.25rem; margin-block-end: 1rem; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.uti-card-title { font-size: 1.05rem; font-weight: 700; color: var(--u-ink); display: flex; align-items: center; gap: .5rem; margin-block-end: .35rem; }
.uti-card-title i { color: var(--u-primary); }
.uti-card-sub { color: #64748B; font-size: .85rem; margin-block-end: 1rem; }
.uti-dial { flex: 0 0 auto; }
.uti-dial .phone-code-option[hidden] { display: none; }
.uti-pax { border: 1px solid #e2e8f0; border-radius: 12px; margin-block: .75rem; overflow: hidden; }
.uti-pax.has-error { border-color: #dc3545; }
.uti-pax-head { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; cursor: pointer; min-block-size: 44px; }
.uti-pax-num { inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--u-primary-light); color: var(--u-primary); display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex-shrink: 0; }
.uti-pax-titles { display: flex; flex-direction: column; flex: 1; }
.uti-pax-titles small { color: #64748B; }
.uti-pax-remove { border: 0; background: none; color: #dc3545; padding: .25rem .5rem; }
.uti-pax-head[aria-expanded="true"] .uti-pax-chev { transform: rotate(180deg); }
.uti-pax-body { padding: 0 1rem 1rem; }
.uti-upload-title { font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: .4rem; }
.uti-badge { background: var(--u-primary-light); color: var(--u-primary); font-size: .65rem; font-weight: 700; text-transform: uppercase; padding: .15rem .45rem; border-radius: 999px; }
.uti-upload-sub { font-size: .8rem; color: #64748B; margin-block: .25rem .6rem; }
.uti-drop { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 1.25rem; border: 2px dashed #c4b5fd; border-radius: 12px; background: var(--u-primary-light); cursor: pointer; text-align: center; inline-size: 100%; }
.uti-drop i { font-size: 1.4rem; color: var(--u-primary); }
.uti-drop small { color: #64748B; }
.uti-add { border: 1px solid var(--u-navy); color: var(--u-navy); background: #fff; border-radius: 999px; padding: .45rem 1rem; font-weight: 600; font-size: .875rem; }
.uti-add:hover { background: var(--u-navy); color: #fff; }
.uti-summary { position: sticky; inset-block-start: 90px; }
.uti-sum-pkg { font-size: .85rem; color: #64748B; margin-block-end: .75rem; }
.uti-sum-row, .uti-sum-total { display: flex; justify-content: space-between; font-size: .9rem; padding-block: .35rem; }
.uti-sum-total { border-block-start: 1px solid #e2e8f0; margin-block-start: .5rem; padding-block-start: .75rem; font-size: 1rem; }
.uti-sum-total strong { color: var(--u-ink); font-size: 1.2rem; }
.uti-submit { inline-size: 100%; margin-block-start: 1rem; border: 0; border-radius: 12px; background: var(--u-primary); color: #fff; font-weight: 700; padding: .8rem; display: flex; align-items: center; justify-content: center; gap: .5rem; }
.uti-submit:hover { background: var(--u-primary-dark); }
.uti-submit:disabled { opacity: .85; cursor: wait; }
.upk-quote-note { font-size: .75rem; color: var(--u-muted); text-align: center; margin: .75rem 0 0; }
.upk-quote-msg { margin-top: .9rem; padding: .6rem .8rem; border-radius: 10px; font-size: .85rem; }
.upk-quote-msg.is-ok { background: #ecfdf5; color: #047857; }
.upk-quote-msg.is-err { background: #fef2f2; color: #b91c1c; }
.upk-quote-msg[hidden] { display: none; }
@media (max-width: 991.98px) { .upk-quote { grid-template-columns: 1fr; } }

/* ===== Umrah package details ===== */
.upd-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .85rem; color: var(--u-muted); margin-bottom: 1.25rem; }
.upd-crumbs a { color: var(--u-ink); text-decoration: none; font-weight: 600; }
.upd-crumbs a:hover { color: var(--u-primary); }
.upd-crumbs i { font-size: .65rem; }
.upd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.5rem; align-items: start; }
.upd-main { display: grid; gap: 1.25rem; min-width: 0; }
.upd-side { position: sticky; top: 90px; display: grid; gap: 1rem; }
.upd-card { background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; padding: 1.25rem; box-shadow: 0 4px 14px rgba(15,23,42,.05); }
.upd-hero { position: relative; aspect-ratio: 21 / 8; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, var(--u-navy), var(--u-navy-2)); box-shadow: 0 12px 30px rgba(13, 27, 42, .18); }
.upd-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 22% 20%, rgba(212, 175, 55, .16), transparent 48%); pointer-events: none; z-index: 0; }
.upd-hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.5px); background-size: 22px 22px; opacity: .5; pointer-events: none; z-index: 0; }
.upd-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.upd-hero .upk-ribbon { z-index: 2; }
.upd-hero .upk-media-fallback { z-index: 1; flex-direction: column; gap: .75rem; font-size: 2.75rem; }
.upd-hero .upk-media-fallback i { display: grid; place-items: center; width: 5.25rem; height: 5.25rem; border-radius: 50%; background: rgba(212, 175, 55, .12); border: 1px solid rgba(212, 175, 55, .35); box-shadow: 0 0 0 10px rgba(212, 175, 55, .05); }
.upd-depart { display: inline-flex; gap: .4rem; align-items: center; font-size: .78rem; font-weight: 700; color: #b91c1c; background: #fef2f2; border-radius: 999px; padding: .25rem .7rem; }
.upd-title { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; line-height: 1.25; margin: .75rem 0; color: var(--u-ink); }
.upd-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.upd-chip { display: inline-flex; gap: .4rem; align-items: center; font-size: .85rem; font-weight: 600; padding: .35rem .75rem; border-radius: 10px; background: var(--u-primary-light); color: var(--u-primary); }
.upd-desc { color: var(--u-ink); line-height: 1.7; margin: 0 0 1rem; white-space: pre-line; }
.upd-h { font-size: 1.05rem; font-weight: 800; color: var(--u-navy); margin: 0 0 .9rem; display: flex; gap: .5rem; align-items: center; }
.upd-h i { color: var(--u-gold); }
/* Inclusions — clean checklist with gold icon chips */
.upd-inc { background: linear-gradient(180deg, #fffdf5 0%, #fffbeb 100%); border: 1px solid #f3e2a8; border-radius: 16px; padding: 1.15rem 1.25rem; }
.upd-inc ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem .9rem; }
.upd-inc li { display: flex; gap: .6rem; align-items: center; font-size: .9rem; color: var(--u-ink); }
.upd-inc-ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #f0dd9c; color: var(--u-gold-dark, #b8962e); font-size: .82rem; box-shadow: 0 1px 2px rgba(184, 150, 46, .12); }
.upd-inc-txt { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; line-height: 1.35; font-weight: 600; }
.upd-inc-city { font-size: .78rem; color: var(--u-muted); font-weight: 500; display: inline-flex; align-items: center; gap: .25rem; }
.upd-inc-city i { color: var(--u-muted); }
.upd-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; margin: 0; }
.upd-facts dt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--u-muted); }
.upd-facts dd { margin: .15rem 0 0; font-weight: 600; color: var(--u-ink); }

/* Accommodation — richer hotel cards */
.upd-hotels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.upd-hotel { position: relative; border: 1px solid #E7ECF3; border-radius: 16px; padding: 1.1rem 1.15rem; display: grid; gap: .7rem; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); overflow: hidden; }
.upd-hotel::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: linear-gradient(180deg, var(--u-gold) 0%, var(--u-gold-dark, #b8962e) 100%); }
.upd-hotel-head { display: flex; gap: .7rem; align-items: flex-start; }
.upd-hotel-avatar { flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: #fffbeb; border: 1px solid #f0dd9c; color: var(--u-gold-dark, #b8962e); font-size: 1rem; }
.upd-hotel-id { display: grid; gap: .25rem; min-width: 0; }
.upd-hotel-id strong { font-size: .98rem; font-weight: 800; color: var(--u-navy); line-height: 1.3; }
.upd-hotel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; }
.upd-hotel-city { font-size: .8rem; color: var(--u-muted); display: inline-flex; align-items: center; gap: .3rem; }
.upd-hotel-city i { color: var(--u-gold-dark); }
.upd-stars { color: var(--u-gold); font-size: .82rem; letter-spacing: .5px; white-space: nowrap; display: inline-flex; gap: 1px; }
.upd-stars .fa-regular { color: #d9c9a0; }
.upd-stars-sm { font-size: .72rem; }
.upd-hotel-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.upd-tag { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; padding: .28rem .6rem; border-radius: 999px; }
.upd-tag-meal { background: var(--u-gold-soft); color: var(--u-gold-dark); }
.upd-tag-meal i { font-size: .72rem; }
.upd-sub { font-size: .9rem; font-weight: 700; margin: .5rem 0 .35rem; color: var(--u-ink); }
.upd-policy { font-size: .85rem; line-height: 1.7; color: var(--u-muted); margin: 0 0 .75rem; }
.upd-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .7rem 0; font-size: .88rem; }
.upd-line { border-top: 1px dashed #E2E8F0; color: var(--u-muted); }
.upd-total { border-top: 1px solid #E2E8F0; font-weight: 700; }
.upd-total strong { color: var(--u-teal); font-size: 1.3rem; }
.upd-stepper { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid #E2E8F0; border-radius: 999px; padding: .2rem; }
.upd-stepper button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--u-bg-alt); color: var(--u-ink); }
.upd-stepper button:disabled { opacity: .4; }
.upd-stepper output { min-width: 1.5rem; text-align: center; font-weight: 700; }
.upd-summary .upk-quote-btn { text-decoration: none; }
.upd-trust { list-style: none; margin: 0; display: grid; gap: .6rem; font-size: .85rem; }
.upd-trust i { color: var(--u-teal); margin-inline-end: .4rem; }

/* Spacing / alignment polish */
.upd-main { gap: 1rem; }
.upd-card { padding: 1.25rem 1.5rem; }
.upd-title { margin: .6rem 0 .75rem; }
.upd-chips { margin-bottom: .9rem; }
.upd-desc { font-size: .95rem; margin-bottom: 1.1rem; }
.upd-inc .upd-h { margin-bottom: .85rem; }
.upd-inc li { line-height: 1.4; }
.upd-facts { gap: 1rem; }
.upd-hotel-stay { display: flex; flex-wrap: wrap; gap: .45rem .5rem; padding-top: .55rem; border-top: 1px dashed #E7ECF3; }
.upd-stay-item { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--u-muted); background: var(--u-bg-alt, #F1F5F9); border-radius: 8px; padding: .28rem .55rem; }
.upd-stay-item i { color: var(--u-gold-dark); font-size: .78rem; }
.upd-stay-item b { color: var(--u-ink); font-weight: 700; }
.upd-stay-t { font-weight: 500; }
.upd-stay-nights { background: var(--u-gold-soft); }
.upd-stay-nights i, .upd-stay-nights b { color: var(--u-gold-dark); }
.upd-sub { margin: .25rem 0 .4rem; }
.upd-policy:last-child { margin-bottom: 0; }
.upd-summary .upd-h { margin-bottom: .25rem; }
.upd-line { align-items: flex-start; }
.upd-line > span:first-child { min-width: 0; line-height: 1.45; }
.upd-line > span:last-child { white-space: nowrap; flex-shrink: 0; color: var(--u-ink); font-weight: 600; }
.upd-total strong { white-space: nowrap; }
.upd-summary .upk-quote-btn { margin-top: .5rem; }
.upd-trust { padding: 1rem 1.25rem; }
.upd-trust li { display: flex; align-items: center; }

/* Details visual polish */
.upd-summary { position: relative; overflow: hidden; }
.upd-summary::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 4px; background: var(--u-primary); }
.upd-chip { border: 1px solid rgba(124, 58, 237, .18); }
.upd-inc { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.upd-hotel { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.upd-hotel:hover { border-color: #f0dd9c; box-shadow: 0 8px 20px rgba(15, 23, 42, .09); transform: translateY(-2px); }
.upd-summary .upk-quote-btn { transition: transform .12s ease, box-shadow .12s ease; }
.upd-summary .upk-quote-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(124, 58, 237, .28); }
@media (max-width: 991.98px) {
    .upd-layout { grid-template-columns: 1fr; }
    .upd-side { position: static; }
}
@media (max-width: 575.98px) {
    .upd-card { padding: 1rem; }
    .upd-inc ul, .upd-hotels { grid-template-columns: 1fr; }
}
@media (max-width: 991.98px) {
    .upd-layout { grid-template-columns: 1fr; }
    .upd-side { position: static; }
}
@media (max-width: 575.98px) {
    .upd-inc ul, .upd-hotels { grid-template-columns: 1fr; }
    .upd-hero { aspect-ratio: 16 / 10; }
}
.upk-tab { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .45rem .9rem; border-radius: 999px; color: var(--u-ink); text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap; border: 1px solid transparent; }
.upk-tab:hover { background: var(--u-primary-light); color: var(--u-primary); }
.upk-tab.is-active { background: var(--u-primary); color: #fff; }
.upk-tab-count { background: rgba(15,23,42,.08); border-radius: 999px; padding: 0 .5rem; font-size: .75rem; }
.upk-tab.is-active .upk-tab-count { background: rgba(255,255,255,.25); }
/* Filter dropdown fields (kind + country) */
.upk-field { display: inline-flex; flex-direction: column; gap: .3rem; }
.upk-field-label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--u-muted); white-space: nowrap; }
.upk-field-label i { color: var(--u-gold-dark); }
.upk-field .cs-control, .upk-country-select { min-width: 10rem; }
.upk-country-select { min-height: 40px; border-radius: 999px; border: 1px solid #EFE6C8; background: #fff; font-weight: 600; font-size: .85rem; }
.upk-field .cs-trigger { border-radius: 999px; border-color: #EFE6C8; min-height: 40px; }
.upk-count { color: var(--u-muted); font-size: .9rem; padding-inline: .5rem; margin-inline-start: auto; }
.upk-count strong { color: var(--u-ink); }
.upk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.75rem; align-items: stretch; }
@media (max-width: 991.98px) { .upk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.upk-card { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid #E2E8F0; box-shadow: 0 4px 14px rgba(15,23,42,.06); transition: transform .2s, box-shadow .2s; }
.upk-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15,23,42,.12); }
.upk-media { position: relative; display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--u-navy), var(--u-navy-2)); overflow: hidden; }
.upk-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.upk-card:hover .upk-media img { transform: scale(1.05); }
.upk-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,27,42,.35) 0%, transparent 40%); pointer-events: none; }
.upk-media-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--u-gold); font-size: 3.25rem; opacity: .9; }
.upk-ribbon, .upk-nights { z-index: 1; }
.upk-ribbon, .upk-nights { position: absolute; top: .75rem; display: inline-flex; gap: .35rem; align-items: center; font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .25rem .65rem; }
.upk-ribbon { inset-inline-start: .75rem; background: var(--u-navy); color: #fff; }
.upk-ribbon.is-visa { background: var(--u-gold); color: var(--u-navy); }
.upk-nights { inset-inline-end: .75rem; background: rgba(255,255,255,.92); color: var(--u-ink); }
.upk-body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.15rem 1.15rem; gap: .8rem; }
.upk-title { font-size: 1.05rem; font-weight: 700; margin: 0; line-height: 1.4; min-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.upk-title a { color: var(--u-ink); text-decoration: none; }
.upk-title a:hover { color: var(--u-primary); }
.upk-meta { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; font-size: .85rem; color: var(--u-muted); }
.upk-meta li { display: flex; gap: .5rem; align-items: baseline; }
.upk-meta i { color: var(--u-gold-dark); width: 1rem; text-align: center; flex-shrink: 0; }
.upk-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: .75rem; padding-top: .75rem; border-top: 1px dashed #E2E8F0; }
.upk-price { display: flex; flex-direction: column; line-height: 1.2; }
.upk-price small { color: var(--u-muted); font-size: .72rem; }
.upk-price strong { color: var(--u-teal); font-size: 1.3rem; font-weight: 800; }
.upk-price strong span { color: var(--u-teal); font-size: .8rem; font-weight: 700; }
.upk-cta { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .5rem 1rem; border-radius: 10px; background: var(--u-primary); color: #fff; font-weight: 600; font-size: .88rem; text-decoration: none; white-space: nowrap; }
.upk-cta:hover { background: var(--u-primary-dark); color: #fff; }
.upk-empty { text-align: center; padding: 3rem 1rem; color: var(--u-muted); background: #fff; border-radius: var(--u-radius); margin-top: 1.5rem; }
.upk-empty i { font-size: 2rem; color: var(--u-gold); margin-bottom: .75rem; }
@media (max-width: 575.98px) {
    .upk-toolbar { flex-direction: column; align-items: stretch; }
    .upk-filterbar { flex-direction: column; align-items: stretch; }
    .upk-field { width: 100%; }
    .upk-field .cs-control, .upk-country-select { flex: 1 1 auto; min-width: 0; }
    .upk-count { margin-inline-start: 0; text-align: center; padding-bottom: 0; }
    .upk-grid { grid-template-columns: 1fr; }
}