/* ==========================================================================
   Travelin Design System — page compositions
   --------------------------------------------------------------------------
   Everything here belongs to one page or one flow. Shared primitives live in
   travelin.css; if a rule below starts appearing on a second page, move it.
   ========================================================================== */

/* ==========================================================================
   1. Home — hero and search
   ========================================================================== */

.tv-hero {
    position: relative;
    isolation: isolate;
    display: flex; align-items: center;
    min-height: min(78vh, 720px);
    padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 4rem);
    background-color: var(--tv-brand-900);
    background-size: cover;
    background-position: center;
    color: #fff;
    overflow: hidden;
}
/* Two layers: a directional wash for headline contrast, and a floor fade so
   the search panel never sits on a busy patch of sky. */
.tv-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(105deg, rgba(5, 43, 74, .88) 0%, rgba(5, 43, 74, .58) 42%, rgba(5, 43, 74, .22) 100%),
        linear-gradient(180deg, rgba(5, 43, 74, .40) 0%, rgba(5, 43, 74, 0) 30%, rgba(5, 43, 74, .55) 100%);
}
/* Very slow drift keeps a still photo from reading as a screenshot. */
.tv-hero__bg {
    position: absolute; inset: -3%; z-index: -2;
    background-size: cover; background-position: center;
    animation: tv-hero-drift 34s ease-in-out infinite alternate;
}
@keyframes tv-hero-drift {
    from { transform: scale(1.02) translate3d(0, 0, 0); }
    to   { transform: scale(1.09) translate3d(-1.4%, -1%, 0); }
}

/* Minimal variant: no eyebrow, no rotating strapline, no trust chips — the
   headline sets the tone and the search panel is the only thing to do. The
   copy is centred above the panel so the eye lands on the search box. */
.tv-hero--minimal { min-height: min(68vh, 620px); }
.tv-hero--minimal .tv-hero__copy {
    /* 22ch broke a three-word headline over four lines. Give the block a real
       measure and let the browser balance the headline inside it. */
    max-width: 46ch; margin-inline: auto; text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
.tv-hero--minimal .tv-hero__title { text-wrap: balance; }
.tv-hero--minimal .tv-hero__lede { margin-inline: auto; max-width: 42ch; text-wrap: pretty; }
.tv-hero--minimal .tv-search { max-width: 1080px; margin-inline: auto; }
@media (max-width: 767.98px) {
    .tv-hero--minimal { min-height: 0; }
    .tv-hero--minimal .tv-hero__copy { max-width: none; text-align: start; }
    .tv-hero--minimal .tv-hero__lede { margin-inline: 0; }
}

.tv-hero__inner { position: relative; z-index: 1; width: 100%; }
.tv-hero__copy { max-width: 40ch; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }

@media (max-width: 767.98px) {
    /* A viewport-height hero pushes the search panel — the only thing anyone
       came here to use — entirely below the fold on a phone.

       The budget here is the viewport MINUS the bottom navigation, not the
       viewport: at 390x844 the nav starts at y=780, and the Search button was
       landing at 750–804, so it read as "above the fold" while being visibly
       sliced in half. These three reductions buy back ~47px, which puts the
       whole booking engine — tabs, trip type, both airports, dates, travellers
       and the CTA — on the first screen with room to spare. */
    .tv-hero { min-height: 0; padding-block: var(--tv-5) var(--tv-5); }
    .tv-hero__copy { margin-bottom: var(--tv-4); }
    .tv-hero__trust { display: none; }
    /* Two lines of promise is enough before the booking form. */
    .tv-hero__lede {
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
.tv-hero__eyebrow {
    display: inline-flex; align-items: center; gap: var(--tv-2);
    padding: 7px 14px 7px 8px;
    border-radius: var(--tv-r-full);
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .20);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    font-size: var(--tv-text-xs); font-weight: 600; letter-spacing: .02em;
    color: #fff; margin-bottom: var(--tv-4);
}
.tv-hero__eyebrow-dot {
    width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--tv-gold-500); color: var(--tv-ink-900);
}
.tv-hero__eyebrow-dot svg { width: 12px; height: 12px; }

body.nav-fixed .tv-hero__title {
    font-size: var(--tv-display);
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1.06;
    margin: 0 0 var(--tv-4);
    text-shadow: 0 2px 28px rgba(5, 43, 74, .45);
}
body.nav-fixed .tv-hero__title em {
    font-style: normal;
    background: linear-gradient(96deg, var(--tv-gold-400), #FFD98A);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.tv-hero__lede {
    font-size: clamp(1rem, 1vw + .82rem, 1.1875rem);
    color: rgba(255, 255, 255, .88);
    margin: 0;
    text-shadow: 0 1px 14px rgba(5, 43, 74, .4);
}

/* The CMS's rotating phrases. `.typewrite` is driven by custom.js. */
.tv-hero__rotate {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
    margin-top: var(--tv-4);
    font-family: var(--tv-font-display);
    font-size: clamp(1.0625rem, 1.2vw + .85rem, 1.375rem);
    font-weight: 600;
    color: rgba(255, 255, 255, .90);
}
.tv-hero__rotate .typewrite { color: var(--tv-gold-400); border-bottom: 0; }
.tv-hero__rotate .typewrite:hover { color: var(--tv-gold-400); }
.tv-hero__rotate .wrap { border-inline-end: 2px solid var(--tv-gold-400); padding-inline-end: 2px; }

.tv-hero__trust {
    display: flex; flex-wrap: wrap; gap: var(--tv-3) var(--tv-6);
    margin-top: var(--tv-5);
    font-size: var(--tv-text-sm); color: rgba(255, 255, 255, .84);
}
.tv-hero__trust-item { display: inline-flex; align-items: center; gap: 7px; }
.tv-hero__trust-item svg { width: 16px; height: 16px; color: var(--tv-gold-400); flex: 0 0 auto; }

/* ---- Search panel -------------------------------------------------------- */

.tv-search {
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-radius: var(--tv-r-2xl);
    box-shadow: var(--tv-shadow-xl);
    overflow: hidden;
}
.tv-search__tabs {
    display: flex; gap: 2px;
    /* Bootstrap's `.nav` sets flex-wrap:wrap and nothing here overrode it, so
       the strip wrapped as soon as the labels grew: in Arabic "الجولات" fell to
       a second row and broke the tab bar. The track scrolls instead. */
    flex-wrap: nowrap;
    padding: var(--tv-2) var(--tv-2) 0;
    border-bottom: 1px solid var(--tv-line-soft);
    overflow-x: auto; scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.tv-search__tabs .nav-item { flex: 0 0 auto; }
.tv-search__tabs::-webkit-scrollbar { display: none; }
/* The vendor renders these as Bootstrap nav-tabs; neutralise its chrome. */
.tv-search__tabs.nav-tabs { border-bottom: 1px solid var(--tv-line-soft); }
.tv-search__tabs .nav-item { margin: 0; }
.tv-search__tabs .nav-link {
    display: inline-flex; align-items: center; gap: 7px;
    /* Fluid so all three tabs fit unaided from 320px up. At a fixed 18px the
       strip needed 338px and clipped "Tours" on the narrowest supported
       screen — reachable by scrolling, but it read as broken. */
    padding: 13px clamp(8px, 3.4vw, 18px);
    border: 0 !important;
    background: transparent !important;
    border-radius: var(--tv-r-md) var(--tv-r-md) 0 0 !important;
    font-family: var(--tv-font-body);
    font-size: var(--tv-text-base); font-weight: 600;
    color: var(--tv-ink-500);
    white-space: nowrap;
    position: relative;
    transition: color var(--tv-fast) var(--tv-ease), background-color var(--tv-fast) var(--tv-ease);
}
.tv-search__tabs .nav-link i { font-size: 14px; }
.tv-search__tabs .nav-link:hover { color: var(--tv-ink-800); background: var(--tv-canvas) !important; }
.tv-search__tabs .nav-link.active {
    color: var(--tv-brand-700) !important;
    background: transparent !important;
}
.tv-search__tabs .nav-link.active::after {
    content: ""; position: absolute; inset-inline: 14px; bottom: -1px;
    height: 3px; border-radius: 3px 3px 0 0;
    background: var(--tv-brand-600);
}

.tv-search__panel { padding: var(--tv-5); }

/* Twelve-column field grid, mobile first: every cell is full width until the
   tablet breakpoint. Declaring the spans unconditionally left a 4-of-12 field
   at a third of a 390px screen, which is how the phone hero ended up with
   three unusable inputs side by side. */
.tv-search__grid {
    display: grid;
    gap: var(--tv-3);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
}
.tv-search__cell { grid-column: 1 / -1; min-width: 0; }

@media (min-width: 768px) {
    .tv-search__cell--2 { grid-column: span 2; }
    .tv-search__cell--3 { grid-column: span 3; }
    .tv-search__cell--4 { grid-column: span 4; }
    .tv-search__cell--6 { grid-column: span 6; }
    .tv-search__cell--submit { grid-column: span 3; }
}

/* A field inside the panel: label sits inside the control for a compact,
   Booking-style block that still keeps a real <label> for screen readers. */
.tv-sfield {
    position: relative;
    display: flex; flex-direction: column; justify-content: center;
    gap: 2px;
    padding: 9px 14px 9px 42px;
    min-height: 58px;
    background: var(--tv-canvas);
    border: 1.5px solid transparent;
    border-radius: var(--tv-r-md);
    transition: border-color var(--tv-fast) var(--tv-ease), background-color var(--tv-fast) var(--tv-ease), box-shadow var(--tv-fast) var(--tv-ease);
}
html[dir="rtl"] .tv-sfield { padding: 9px 42px 9px 14px; }
.tv-sfield:hover { background: var(--tv-canvas-2); }
.tv-sfield:focus-within {
    background: var(--tv-surface);
    border-color: var(--tv-brand-500);
    box-shadow: var(--tv-ring);
}
.tv-sfield__icon {
    position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: var(--tv-ink-400); pointer-events: none;
}
.tv-sfield:focus-within .tv-sfield__icon { color: var(--tv-brand-500); }
.tv-sfield__label {
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--tv-ink-400); margin: 0; line-height: 1.2;
}
/* The real control is transparent and borderless — the wrapper is the field. */
.tv-sfield input.form-control,
.tv-sfield select.form-control,
.tv-sfield .form-control {
    border: 0 !important; background: transparent !important; box-shadow: none !important;
    padding: 0 !important; min-height: 0 !important; height: auto !important;
    font-size: var(--tv-text-md); font-weight: 600; color: var(--tv-ink-900);
    border-radius: 0;
}
.tv-sfield select.form-control { background-position: right 0 center; padding-inline-end: 20px !important; }
html[dir="rtl"] .tv-sfield select.form-control { background-position: left 0 center; padding-inline-end: 0 !important; padding-inline-start: 20px !important; }
.tv-sfield input.form-control::placeholder { font-weight: 500; color: var(--tv-ink-300); }
.tv-sfield--invalid { border-color: var(--tv-red-500); }

/* Swap origin/destination */
.tv-swap {
    position: absolute; z-index: 3;
    inset-inline-end: -22px; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: var(--tv-surface); color: var(--tv-brand-600);
    border: 1.5px solid var(--tv-line); border-radius: 50%;
    box-shadow: var(--tv-shadow-sm);
    cursor: pointer;
    transition: transform var(--tv-base) var(--tv-ease), border-color var(--tv-fast) var(--tv-ease), color var(--tv-fast) var(--tv-ease);
}
.tv-swap:hover { border-color: var(--tv-brand-400); transform: translateY(-50%) rotate(180deg); }
.tv-swap svg { width: 16px; height: 16px; }
@media (max-width: 767.98px) {
    /* Between two stacked fields, not beside them. */
    .tv-swap { inset-inline-end: var(--tv-4); top: auto; bottom: -24px; transform: none; }
    .tv-swap:hover { transform: rotate(180deg); }
}

.tv-search__actions { display: flex; align-items: center; gap: var(--tv-3); flex-wrap: wrap; }
.tv-search__trip { margin-bottom: var(--tv-4); }

/* `.mt-3` stays on the field wrappers because the page's validation JS appends
   each error message to `$input.closest('.mt-3')`. Its margin is not wanted
   inside the grid, so it is neutralised here rather than removed from the
   markup, where removing it would silently kill every validation message. */
.tv-search .tv-sfield.mt-3 { margin-top: 0 !important; }
.tv-search .error-msg {
    font-size: var(--tv-text-sm); font-weight: 500; color: var(--tv-red-600);
    margin-top: 6px !important;
}
.tv-search .newflighttitle {
    font-size: var(--tv-text-base); font-weight: 700; color: var(--tv-ink-500);
    text-transform: uppercase; letter-spacing: .05em; margin: 0;
}

/* jQuery UI autocomplete — the vendor loads the stock theme, which is 2010. */
.ui-autocomplete.ui-menu {
    z-index: 1200 !important;
    padding: var(--tv-2);
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-r-lg);
    box-shadow: var(--tv-shadow-lg);
    background: var(--tv-surface);
    max-height: 320px; overflow-y: auto;
    font-family: var(--tv-font-body);
}
.ui-autocomplete .ui-menu-item-wrapper {
    padding: 10px 12px;
    border-radius: var(--tv-r-sm);
    font-size: var(--tv-text-base); color: var(--tv-ink-700);
    border: 0 !important; background: transparent;
}
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
    background: var(--tv-brand-50) !important;
    color: var(--tv-brand-800) !important;
    margin: 0; border: 0 !important; font-weight: 600;
}

/* jQuery UI datepicker */
.ui-datepicker {
    padding: var(--tv-3);
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-r-lg);
    box-shadow: var(--tv-shadow-lg);
    background: var(--tv-surface);
    font-family: var(--tv-font-body);
    z-index: 1200 !important;
    width: 19em;
}
.ui-datepicker .ui-datepicker-header {
    background: transparent; border: 0; padding: 0 0 var(--tv-2);
    font-family: var(--tv-font-display); font-weight: 700; color: var(--tv-ink-900);
}
.ui-datepicker .ui-datepicker-title { font-size: var(--tv-text-base); }
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 0; width: 32px; height: 32px;
    border-radius: var(--tv-r-sm); border: 0; background: var(--tv-canvas);
    cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover { background: var(--tv-brand-50); }
.ui-datepicker .ui-datepicker-prev { inset-inline-start: 0; }
.ui-datepicker .ui-datepicker-next { inset-inline-end: 0; }
.ui-datepicker th { font-size: 11px; font-weight: 700; color: var(--tv-ink-400); text-transform: uppercase; letter-spacing: .04em; padding: 6px 0; }
.ui-datepicker td { padding: 1px; }
.ui-datepicker td .ui-state-default {
    display: block; text-align: center;
    padding: 8px 0; border: 0; background: transparent;
    border-radius: var(--tv-r-sm);
    font-size: var(--tv-text-sm); font-weight: 600; color: var(--tv-ink-700);
    transition: background-color var(--tv-fast) var(--tv-ease), color var(--tv-fast) var(--tv-ease);
}
.ui-datepicker td .ui-state-default:hover { background: var(--tv-brand-50); color: var(--tv-brand-700); }
.ui-datepicker td .ui-state-active,
.ui-datepicker td .ui-state-highlight {
    background: var(--tv-brand-600) !important; color: #fff !important;
}
.ui-datepicker td.ui-state-disabled .ui-state-default { color: var(--tv-ink-200); }

/* ---- Category strip ------------------------------------------------------ */

.tv-cats { display: flex; gap: var(--tv-3); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--tv-2); }
.tv-cats::-webkit-scrollbar { display: none; }
.tv-cat {
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: var(--tv-2);
    width: 92px; padding: var(--tv-3) var(--tv-2);
    border-radius: var(--tv-r-lg);
    color: var(--tv-ink-700); text-align: center;
    border: 1px solid transparent;
    transition: background-color var(--tv-fast) var(--tv-ease), border-color var(--tv-fast) var(--tv-ease), transform var(--tv-fast) var(--tv-ease);
}
.tv-cat:hover { background: var(--tv-canvas); border-color: var(--tv-line); color: var(--tv-brand-700); transform: translateY(-2px); }
.tv-cat__icon {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: var(--tv-r-lg);
    background: var(--tv-brand-50); color: var(--tv-brand-600);
}
.tv-cat__icon svg { width: 24px; height: 24px; }
.tv-cat:nth-child(2n) .tv-cat__icon { background: var(--tv-gold-50); color: var(--tv-gold-600); }
.tv-cat:nth-child(3n) .tv-cat__icon { background: var(--tv-teal-50); color: var(--tv-teal-600); }
.tv-cat:nth-child(5n) .tv-cat__icon { background: var(--tv-coral-50); color: var(--tv-coral-600); }
.tv-cat__label { font-size: var(--tv-text-sm); font-weight: 600; line-height: 1.25; }

/* ---- Destination cards --------------------------------------------------- */

.tv-dest {
    position: relative; display: block;
    border-radius: var(--tv-r-lg);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--tv-canvas-2);
    isolation: isolate;
}
.tv-dest img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--tv-slow) var(--tv-ease);
}
.tv-dest::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(5,43,74,0) 38%, rgba(5,43,74,.34) 62%, rgba(5,43,74,.86) 100%);
}
.tv-dest:hover img { transform: scale(1.07); }
.tv-dest__body {
    position: absolute; inset-inline: 0; bottom: 0; z-index: 1;
    padding: var(--tv-4) var(--tv-3);
    color: #fff;
}
.tv-dest__name { font-family: var(--tv-font-display); font-weight: 700; font-size: var(--tv-text-md); color: #fff; margin: 0; letter-spacing: -0.01em; }
.tv-dest__count { font-size: var(--tv-text-xs); color: rgba(255, 255, 255, .80); }
.tv-dest--wide { aspect-ratio: 1 / 1; }

/* ---- Promo tiles (widget 5 / 6) ------------------------------------------ */

.tv-promo {
    position: relative; isolation: isolate;
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 280px; padding: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--tv-r-2xl);
    background-color: var(--tv-brand-800);
    background-size: cover; background-position: center;
    color: #fff; overflow: hidden;
}
.tv-promo::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(160deg, rgba(5,43,74,.24) 0%, rgba(5,43,74,.58) 58%, rgba(5,43,74,.88) 100%);
    transition: opacity var(--tv-base) var(--tv-ease);
}
.tv-promo:hover::before { opacity: .86; }
.tv-promo__kicker {
    display: inline-flex; align-self: flex-start; align-items: center; gap: 6px;
    padding: 5px 12px; margin-bottom: var(--tv-3);
    border-radius: var(--tv-r-full);
    background: var(--tv-gold-500); color: var(--tv-ink-900);
    font-size: var(--tv-text-xs); font-weight: 800; letter-spacing: .02em;
}
body.nav-fixed .tv-promo__title { color: #fff; font-size: var(--tv-h3); margin: 0 0 var(--tv-2); }
.tv-promo__text { color: rgba(255, 255, 255, .84); margin: 0 0 var(--tv-5); max-width: 42ch; }

/* ---- Offer cards --------------------------------------------------------- */

.tv-offer { position: relative; }
.tv-offer__flag {
    position: absolute; z-index: 3; top: var(--tv-3); inset-inline-start: var(--tv-3);
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px;
    background: var(--tv-coral-500); color: #fff;
    font-size: var(--tv-text-xs); font-weight: 800;
    border-radius: var(--tv-r-full);
    box-shadow: 0 4px 12px rgba(255, 107, 74, .38);
}
.tv-offer__flag svg { width: 13px; height: 13px; }

/* ---- Testimonials -------------------------------------------------------- */

.tv-quote {
    display: flex; flex-direction: column; gap: var(--tv-4);
    height: 100%;
    padding: clamp(1.5rem, 3vw, 2rem);
    background: var(--tv-surface);
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-r-xl);
    box-shadow: var(--tv-shadow-sm);
}
.tv-quote__mark { width: 32px; height: 32px; color: var(--tv-brand-100); flex: 0 0 auto; }
.tv-quote__text { font-size: var(--tv-text-lg); line-height: 1.62; color: var(--tv-ink-800); margin: 0; flex: 1 1 auto; }
.tv-quote__foot { display: flex; align-items: center; gap: var(--tv-3); margin-top: auto; }
.tv-quote__avatar {
    width: 44px; height: 44px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--tv-brand-600); color: #fff;
    font-family: var(--tv-font-display); font-weight: 700; font-size: var(--tv-text-md);
    object-fit: cover;
}
.tv-quote__name { font-family: var(--tv-font-display); font-weight: 700; color: var(--tv-ink-900); font-size: var(--tv-text-md); }
.tv-quote__role { font-size: var(--tv-text-sm); color: var(--tv-ink-400); }

/* ---- Stats --------------------------------------------------------------- */

.tv-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: rgba(255, 255, 255, .12);
    border-radius: var(--tv-r-xl);
    overflow: hidden;
}
.tv-stat { padding: clamp(1.25rem, 3vw, 2rem) var(--tv-4); text-align: center; background: var(--tv-brand-900); }
.tv-stat__icon { color: var(--tv-gold-400); margin-bottom: var(--tv-2); font-size: 22px; }
.tv-stat__icon svg { width: 24px; height: 24px; }
.tv-stat__num { font-family: var(--tv-font-display); font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 800; color: #fff; letter-spacing: -0.02em; line-height: 1.1; }
.tv-stat__label { font-size: var(--tv-text-sm); color: rgba(255, 255, 255, .66); margin-top: 4px; }
@media (max-width: 575.98px) { .tv-stats { grid-template-columns: repeat(2, 1fr); } }

/* ---- Newsletter ---------------------------------------------------------- */

.tv-news {
    position: relative; isolation: isolate; overflow: hidden;
    padding: clamp(2rem, 5vw, 3.5rem);
    border-radius: var(--tv-r-2xl);
    background: linear-gradient(120deg, var(--tv-brand-800) 0%, var(--tv-brand-600) 58%, var(--tv-brand-500) 100%);
    color: #fff;
}
.tv-news::before {
    content: ""; position: absolute; z-index: -1;
    inset-inline-end: -80px; top: -90px;
    width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, rgba(245,165,36,.30) 0%, rgba(245,165,36,0) 70%);
}
body.nav-fixed .tv-news__title { color: #fff; font-size: var(--tv-h3); margin: 0 0 var(--tv-2); }
.tv-news__text { color: rgba(255, 255, 255, .82); margin: 0 0 var(--tv-5); max-width: 52ch; }
.tv-news__form { display: flex; gap: var(--tv-2); flex-wrap: wrap; max-width: 520px; }
.tv-news__form .form-control,
.tv-news__form .tv-input {
    flex: 1 1 240px; min-width: 0;
    background: rgba(255, 255, 255, .96);
    border-color: transparent;
}
.tv-news__note { font-size: var(--tv-text-sm); color: rgba(255, 255, 255, .62); margin-top: var(--tv-3); }

/* ---- Video band and closing tagline -------------------------------------- */

body.nav-fixed .homevideobox { position: relative; isolation: isolate; }
body.nav-fixed .homevideobox::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(5,43,74,.30) 0%, rgba(5,43,74,.14) 40%, rgba(5,43,74,.86) 100%);
}
body.nav-fixed .homevideocontent {
    position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
    padding-block: clamp(1.5rem, 4vw, 3.5rem);
    color: #fff;
}
body.nav-fixed .homevideocontent h3 { color: #fff; font-size: var(--tv-h2); margin-bottom: var(--tv-2); }
body.nav-fixed .homevideocontent p { color: rgba(255, 255, 255, .84); max-width: 60ch; margin: 0; }

body.nav-fixed .taglinewrap {
    background: var(--tv-brand-900);
    color: rgba(255, 255, 255, .80);
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
    text-align: center;
}
body.nav-fixed .taglinewrap h4 {
    color: var(--tv-gold-400); font-size: var(--tv-text-sm); font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; margin-bottom: var(--tv-3);
}
body.nav-fixed .taglinewrap h2 { color: #fff; font-size: var(--tv-h2); margin-bottom: var(--tv-3); }
body.nav-fixed .taglinewrap p { max-width: 62ch; margin: 0 auto var(--tv-6); }
body.nav-fixed .taglinewrap > .container > a {
    display: inline-flex; align-items: center; gap: var(--tv-2);
    padding: 14px 28px; min-height: 50px;
    background: var(--tv-gold-500); color: var(--tv-ink-900);
    border-radius: var(--tv-r-full);
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(245, 165, 36, .28);
    transition: transform var(--tv-fast) var(--tv-ease), background-color var(--tv-fast) var(--tv-ease);
}
body.nav-fixed .taglinewrap > .container > a:hover { background: var(--tv-gold-400); color: var(--tv-ink-900); transform: translateY(-2px); }

/* ---- Link farms (flights/hotels to top cities) --------------------------- */

body.nav-fixed .searchfilter h4 { font-size: var(--tv-h4); margin-bottom: var(--tv-4); }
body.nav-fixed .txtfilter { list-style: none; padding: 0; margin: 0; }
body.nav-fixed .txtfilter li { margin-bottom: 2px; }
body.nav-fixed .txtfilter a {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: var(--tv-r-sm);
    font-size: var(--tv-text-base); color: var(--tv-ink-600); font-weight: 500;
    transition: background-color var(--tv-fast) var(--tv-ease), color var(--tv-fast) var(--tv-ease);
}
body.nav-fixed .txtfilter a:hover { background: var(--tv-brand-50); color: var(--tv-brand-700); }
body.nav-fixed .txtfilter a i { color: var(--tv-ink-300); font-size: 12px; }
body.nav-fixed .txtfilter a:hover i { color: var(--tv-brand-500); }

/* ---- Airline logos ------------------------------------------------------- */

body.nav-fixed .topaircompany { list-style: none; padding: 0; }
body.nav-fixed .arilinebox {
    display: grid; place-items: center;
    height: 88px; padding: var(--tv-4);
    background: var(--tv-surface);
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-r-lg);
    transition: box-shadow var(--tv-base) var(--tv-ease), transform var(--tv-base) var(--tv-ease);
}
body.nav-fixed .arilinebox:hover { box-shadow: var(--tv-shadow-md); transform: translateY(-2px); }
body.nav-fixed .arilinebox img {
    max-height: 42px; width: auto; object-fit: contain;
    filter: grayscale(1); opacity: .62;
    transition: filter var(--tv-base) var(--tv-ease), opacity var(--tv-base) var(--tv-ease);
}
body.nav-fixed .arilinebox:hover img { filter: none; opacity: 1; }

/* ---- Services / team / counters inherited from the vendor ---------------- */

body.nav-fixed .service-thumb { padding: clamp(1.5rem, 3vw, 2rem); height: 100%; }
body.nav-fixed .service-thumb .thumb-icon {
    width: 56px; height: 56px; margin-bottom: var(--tv-4);
    display: grid; place-items: center;
    border-radius: var(--tv-r-lg);
    background: var(--tv-brand-50); color: var(--tv-brand-600);
    font-size: 24px;
}
body.nav-fixed .service-thumb h4 { font-size: var(--tv-text-xl); margin-bottom: var(--tv-2); }
body.nav-fixed .service-thumb p { color: var(--tv-ink-500); margin: 0; }

body.nav-fixed .team-thumb { padding: var(--tv-5); text-align: center; height: 100%; }
body.nav-fixed .team-thumb .thumb-image img {
    width: 108px; height: 108px; border-radius: 50%; object-fit: cover;
    border: 3px solid var(--tv-surface); box-shadow: var(--tv-shadow-md);
}
body.nav-fixed .team-thumb h4 { font-size: var(--tv-text-lg); margin: var(--tv-4) 0 2px; }
body.nav-fixed .team-thumb h5 { font-size: var(--tv-text-sm); color: var(--tv-brand-600); font-weight: 600; }
body.nav-fixed .team-thumb .contct { font-size: var(--tv-text-sm); color: var(--tv-ink-500); }
body.nav-fixed .team-thumb .social { display: flex; justify-content: center; gap: var(--tv-2); margin-top: var(--tv-3); }
body.nav-fixed .team-thumb .social a {
    width: 34px; height: 34px; display: grid; place-items: center;
    border-radius: 50%; background: var(--tv-canvas); color: var(--tv-ink-600);
    transition: background-color var(--tv-fast) var(--tv-ease), color var(--tv-fast) var(--tv-ease);
}
body.nav-fixed .team-thumb .social a:hover { background: var(--tv-brand-600); color: #fff; }

body.nav-fixed .circleList { list-style: none; padding: 0; }
body.nav-fixed .circleList .cricle {
    width: 62px; height: 62px; margin-bottom: var(--tv-3);
    display: grid; place-items: center;
    border-radius: var(--tv-r-lg);
    background: var(--tv-surface); color: var(--tv-brand-600);
    box-shadow: var(--tv-shadow-sm); font-size: 24px;
}
body.nav-fixed .circleList .title { font-family: var(--tv-font-display); font-weight: 700; font-size: var(--tv-text-lg); color: var(--tv-ink-900); margin-bottom: 4px; }
body.nav-fixed .circleList p { color: var(--tv-ink-500); margin: 0; }

/* ==========================================================================
   2. Catalogue — listing pages (hotels, tours, flights, blog, services)
   ========================================================================== */

.tv-listing { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (max-width: 991.98px) { .tv-listing { grid-template-columns: minmax(0, 1fr); } }

/* Sticky filter rail on desktop; a sheet on mobile (see .tv-filters--sheet). */
.tv-filters { position: sticky; top: calc(var(--tv-header-h) + var(--tv-4)); }
body.nav-fixed .filtersidebar { position: sticky; top: calc(var(--tv-header-h) + var(--tv-4)); }
body.nav-fixed .filterbox {
    padding: var(--tv-5);
    background: var(--tv-surface);
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-r-lg);
    box-shadow: var(--tv-shadow-xs);
    margin-bottom: var(--tv-4);
}
/* h2, not h5: these sit directly under the page h1, and jumping h1 -> h5
   breaks the document outline a screen reader announces. The size is set
   here, so the level is free to be correct. */
body.nav-fixed .filterbox h5,
body.nav-fixed .filterbox h2 {
    font-size: var(--tv-text-md); font-weight: 700; color: var(--tv-ink-900);
    margin-bottom: var(--tv-3); padding-bottom: var(--tv-3);
    border-bottom: 1px solid var(--tv-line-soft);
}

/* Scroll long checkbox groups instead of running the sidebar to 3000px. */
body.nav-fixed .filterbox .form-check:nth-child(n + 9) { display: none; }
body.nav-fixed .filterbox.is-expanded .form-check { display: block; }
.tv-filter-more {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: var(--tv-2); padding: 4px 0;
    background: none; border: 0; cursor: pointer;
    font-size: var(--tv-text-sm); font-weight: 600; color: var(--tv-brand-600);
    min-height: 44px;
}
.tv-filter-more:hover { color: var(--tv-brand-700); }
.tv-filter-more svg { width: 14px; height: 14px; transition: transform var(--tv-base) var(--tv-ease); }
.tv-filter-more.is-open svg { transform: rotate(180deg); }

/* Results header: count + sort + mobile filter trigger */
.tv-results-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--tv-3); flex-wrap: wrap;
    padding: var(--tv-4) var(--tv-5);
    background: var(--tv-canvas);
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-r-lg);
    margin-bottom: var(--tv-5);
}
.tv-results-bar__count { font-family: var(--tv-font-display); font-weight: 700; color: var(--tv-ink-900); font-size: var(--tv-text-md); }
.tv-results-bar__count span { color: var(--tv-brand-600); }
/* The tools row carries a sort select and a filter button. In Arabic at
   320px their combined intrinsic width is 327px against a 294px track, which
   pushed the whole document sideways. Let them wrap and let the select give
   way first — it is the wider of the two and reads fine at any width. */
.tv-results-bar__tools { display: flex; align-items: center; gap: var(--tv-2); flex-wrap: wrap; min-width: 0; }
.tv-results-bar__tools .tv-sortform { flex: 1 1 auto; min-width: 0; }
.tv-results-bar__tools .tv-sortform__select { width: 100%; min-width: 0; }
.tv-results-bar__tools .tv-filter-trigger { flex: 0 0 auto; }

.tv-filter-trigger {
    display: none;
    align-items: center; gap: 7px;
}
@media (max-width: 991.98px) {
    .tv-filter-trigger { display: inline-flex; }
    /* The vendor sidebar becomes a slide-up sheet. */
    body.nav-fixed .filtersidebar {
        position: fixed; inset: auto 0 0 0; z-index: 1060;
        max-height: 84vh; overflow-y: auto;
        padding: var(--tv-4) var(--tv-4) calc(var(--tv-6) + var(--tv-safe-b));
        background: var(--tv-surface);
        border-radius: var(--tv-r-2xl) var(--tv-r-2xl) 0 0;
        box-shadow: var(--tv-shadow-xl);
        transform: translateY(100%);
        transition: transform var(--tv-slow) var(--tv-ease-out);
        visibility: hidden;
    }
    body.nav-fixed .filtersidebar.is-open { transform: translateY(0); visibility: visible; }
    body.nav-fixed .filterbox { border: 0; box-shadow: none; padding: 0 0 var(--tv-4); border-bottom: 1px solid var(--tv-line-soft); border-radius: 0; }
    body.nav-fixed .filterbox:last-child { border-bottom: 0; }
}

.tv-filter-actions { display: grid; gap: var(--tv-2); margin-top: var(--tv-4); }

/* Search bar that sits inside a page header. The vendor's version put the
   button on top of the input on any screen under ~700px. */
.tv-inline-search {
    display: flex; gap: var(--tv-2); flex-wrap: wrap;
    max-width: 560px; margin-top: var(--tv-5);
}
.tv-inline-search__field { position: relative; flex: 1 1 240px; min-width: 0; }
.tv-inline-search__field svg {
    position: absolute; inset-inline-start: 15px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: var(--tv-ink-400); pointer-events: none;
}
body.nav-fixed .tv-inline-search__field .form-control {
    padding-inline-start: 44px;
    border-color: transparent;
    box-shadow: var(--tv-shadow-md);
}
.tv-inline-search .tv-btn { flex: 0 0 auto; min-height: 50px; }
@media (max-width: 479.98px) {
    .tv-inline-search__field { flex-basis: 100%; }
    .tv-inline-search .tv-btn { width: 100%; }
}

/* Removable active-filter chips. Each is a GET link to the same page minus one
   parameter — no JS, and it survives a shared or bookmarked URL. */
.tv-chips { display: flex; flex-wrap: wrap; gap: var(--tv-2); margin-bottom: var(--tv-5); }
.tv-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 10px 7px 14px;
    background: var(--tv-brand-50); color: var(--tv-brand-700);
    border: 1px solid var(--tv-brand-100); border-radius: var(--tv-r-full);
    font-size: var(--tv-text-sm); font-weight: 600;
    transition: background-color var(--tv-fast) var(--tv-ease), color var(--tv-fast) var(--tv-ease);
}
.tv-chip svg { width: 14px; height: 14px; opacity: .6; }
.tv-chip:hover { background: var(--tv-brand-100); color: var(--tv-brand-800); }
.tv-chip:hover svg { opacity: 1; }

/* ---- Price range control ------------------------------------------------- */
/* Structure is fixed by custom.js: `.price-input input` ×2, `.slider .progress`
   and `.range-input input` ×2. Only the paint changes here. */
body.nav-fixed .price-input { display: flex; align-items: flex-end; gap: var(--tv-2); }
body.nav-fixed .price-input .field { flex: 1 1 0; min-width: 0; }
body.nav-fixed .price-input .field span {
    display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--tv-ink-400); margin-bottom: 4px;
}
body.nav-fixed .price-input input {
    width: 100%; min-height: 42px; padding: 9px 12px;
    border: 1.5px solid var(--tv-line); border-radius: var(--tv-r-md);
    font-size: var(--tv-text-base); font-weight: 600; color: var(--tv-ink-900);
    background: var(--tv-surface);
}
body.nav-fixed .price-input input:focus { border-color: var(--tv-brand-500); box-shadow: var(--tv-ring); outline: none; }
body.nav-fixed .price-input .separator { padding-bottom: 11px; color: var(--tv-ink-300); }

body.nav-fixed .filterbox .slider {
    position: relative; height: 4px; margin: var(--tv-5) 0 var(--tv-3);
    background: var(--tv-line); border-radius: 2px;
}
/* `.progress` is also a Bootstrap component; inside the slider it is our fill. */
body.nav-fixed .filterbox .slider .progress {
    position: absolute; height: 100%; left: 0; right: 0;
    background: var(--tv-brand-500); border-radius: 2px;
    box-shadow: none;
}
body.nav-fixed .range-input { position: relative; height: 0; }
/* The input was 4px tall, and since the track is `pointer-events: none` the
   only draggable thing was an 18px thumb inside it — a 4px-tall grab area in
   practice. The input is now 44px tall and transparent, keeping the thumb
   centred on the same 4px visual track it was before, so the grab region is
   44px vertically without the slider looking any different. */
body.nav-fixed .range-input input {
    position: absolute; top: -42px; width: 100%; height: 44px;
    -webkit-appearance: none; appearance: none;
    background: none; pointer-events: none;
}
body.nav-fixed .range-input input::-webkit-slider-runnable-track,
body.nav-fixed .range-input input::-moz-range-track { background: none; border: 0; height: 44px; }
body.nav-fixed .range-input input::-webkit-slider-thumb {
    -webkit-appearance: none; pointer-events: auto;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--tv-surface); border: 3px solid var(--tv-brand-600);
    box-shadow: var(--tv-shadow-sm); cursor: pointer;
}
body.nav-fixed .range-input input::-moz-range-thumb {
    pointer-events: auto;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--tv-surface); border: 3px solid var(--tv-brand-600);
    box-shadow: var(--tv-shadow-sm); cursor: pointer;
}

/* Horizontal result card — a listing row reads better than a grid tile
   when there are five facts to compare. */
.tv-row-card {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 200px;
    background: var(--tv-surface);
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-r-xl);
    overflow: hidden;
    transition: box-shadow var(--tv-base) var(--tv-ease), border-color var(--tv-base) var(--tv-ease), transform var(--tv-base) var(--tv-ease);
}
.tv-row-card:hover { box-shadow: var(--tv-shadow-lg); border-color: transparent; transform: translateY(-2px); }
.tv-row-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tv-canvas-2); }
.tv-row-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tv-slow) var(--tv-ease); }
.tv-row-card:hover .tv-row-card__media img { transform: scale(1.05); }
.tv-row-card__body { padding: var(--tv-5); display: flex; flex-direction: column; gap: var(--tv-2); min-width: 0; }
.tv-row-card__aside {
    display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
    gap: var(--tv-3);
    padding: var(--tv-5);
    border-inline-start: 1px solid var(--tv-line-soft);
    background: var(--tv-canvas);
    text-align: end;
}
@media (max-width: 767.98px) {
    .tv-row-card { grid-template-columns: minmax(0, 1fr); }
    .tv-row-card__media { aspect-ratio: 16 / 10; }
    .tv-row-card__aside {
        flex-direction: row; align-items: center; text-align: start;
        border-inline-start: 0; border-top: 1px solid var(--tv-line-soft);
        padding: var(--tv-4) var(--tv-5);
    }
}

/* Pagination */
body.nav-fixed .pagination { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: var(--tv-8); }
body.nav-fixed .page-link,
body.nav-fixed .pagination a, body.nav-fixed .pagination span {
    min-width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--tv-line); border-radius: var(--tv-r-md);
    font-size: var(--tv-text-base); font-weight: 600; color: var(--tv-ink-600);
    background: var(--tv-surface);
    transition: background-color var(--tv-fast) var(--tv-ease), border-color var(--tv-fast) var(--tv-ease), color var(--tv-fast) var(--tv-ease);
}
body.nav-fixed .page-item.active .page-link,
body.nav-fixed .pagination .active span {
    background: var(--tv-brand-600); border-color: var(--tv-brand-600); color: #fff;
}
body.nav-fixed .page-link:hover { background: var(--tv-brand-50); border-color: var(--tv-brand-100); color: var(--tv-brand-700); }
body.nav-fixed .page-item.disabled .page-link { opacity: .45; }

/* ---- Flight results ------------------------------------------------------ */

body.nav-fixed .flightinthero {
    position: relative; isolation: isolate;
    padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2rem, 4vw, 3rem);
    background-size: cover; background-position: center;
}
body.nav-fixed .flightinthero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(115deg, rgba(5, 43, 74, .86) 0%, rgba(5, 43, 74, .60) 50%, rgba(5, 43, 74, .34) 100%);
}
body.nav-fixed .flightinthero h1 { text-align: start; font-size: var(--tv-h1); margin-bottom: var(--tv-5); }

/* The search panel that rides on the flights hero. */
body.nav-fixed .duffeltopsearch {
    background: var(--tv-surface);
    border-radius: var(--tv-r-2xl);
    box-shadow: var(--tv-shadow-xl);
    padding: var(--tv-5);
}
body.nav-fixed .duffeltopsearch .tripetype { margin-bottom: var(--tv-2); }

.tv-sortbar {
    position: sticky; top: calc(var(--tv-header-h) + var(--tv-2)); z-index: 20;
    padding: var(--tv-4);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-r-lg);
    box-shadow: var(--tv-shadow-sm);
    margin-bottom: var(--tv-5);
}
.tv-sortbar__grid {
    display: grid; gap: var(--tv-3);
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
}
@media (max-width: 767.98px) {
    .tv-sortbar { position: static; }
    .tv-sortbar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tv-sortbar__grid > :nth-child(3), .tv-sortbar__grid > :nth-child(4) { grid-column: 1 / -1; }
}

.tv-stack-cards { display: grid; gap: var(--tv-4); }

/* One offer. Three tracks so the airline, the itinerary and the fare each get
   a fixed place — the vendor's 2/7/3 Bootstrap split put the price under the
   route on every phone and the times ran together as prose. */
.tv-flight {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) 190px;
    align-items: center;
    gap: var(--tv-4);
    padding: var(--tv-5);
    background: var(--tv-surface);
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-r-xl);
    transition: box-shadow var(--tv-base) var(--tv-ease), border-color var(--tv-base) var(--tv-ease);
}
.tv-flight:hover { box-shadow: var(--tv-shadow-md); border-color: var(--tv-brand-100); }

.tv-flight__airline { display: flex; flex-direction: column; align-items: center; gap: var(--tv-2); text-align: center; }
.tv-flight__airline img { width: 40px; height: 40px; object-fit: contain; }
.tv-flight__airline-name { font-size: var(--tv-text-sm); font-weight: 600; color: var(--tv-ink-600); line-height: 1.25; }

.tv-flight__body { min-width: 0; display: grid; gap: var(--tv-3); }
.tv-flight__leg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 1.4fr) minmax(0, 1fr); align-items: center; gap: var(--tv-3); }
.tv-flight__point { display: grid; gap: 1px; min-width: 0; }
.tv-flight__point--end { text-align: end; }
.tv-flight__time { font-family: var(--tv-font-display); font-size: var(--tv-text-xl); font-weight: 800; color: var(--tv-ink-900); letter-spacing: -0.02em; line-height: 1.1; }
.tv-flight__city { font-size: var(--tv-text-base); font-weight: 600; color: var(--tv-ink-600); }
.tv-flight__date { font-size: var(--tv-text-xs); color: var(--tv-ink-400); }

.tv-flight__path { display: grid; justify-items: center; gap: 3px; }
.tv-flight__dur { font-size: var(--tv-text-xs); font-weight: 600; color: var(--tv-ink-500); }
.tv-flight__line {
    position: relative; width: 100%; height: 16px;
    display: grid; place-items: center;
    color: var(--tv-brand-500);
}
.tv-flight__line::before {
    content: ""; position: absolute; inset-inline: 0; top: 50%;
    height: 2px; background: repeating-linear-gradient(90deg, var(--tv-line) 0 6px, transparent 6px 11px);
}
.tv-flight__line svg { position: relative; width: 16px; height: 16px; background: var(--tv-surface); padding: 0 2px; }
html[dir="rtl"] .tv-flight__line svg { transform: scaleX(-1); }
.tv-flight__stops { font-size: var(--tv-text-xs); color: var(--tv-ink-400); font-weight: 500; }
.tv-flight__stops.is-direct { color: var(--tv-teal-text); font-weight: 700; }

.tv-flight__tags { display: flex; gap: var(--tv-2); flex-wrap: wrap; }

.tv-flight__aside {
    display: grid; gap: var(--tv-3); justify-items: end; text-align: end;
    padding-inline-start: var(--tv-4);
    border-inline-start: 1px solid var(--tv-line-soft);
}
.tv-flight__aside .tv-price { flex-direction: column; align-items: flex-end; gap: 0; }
.tv-flight__aside .tv-btn { width: 100%; }

@media (max-width: 991.98px) {
    .tv-flight { grid-template-columns: minmax(0, 1fr); gap: var(--tv-4); }
    .tv-flight__airline { flex-direction: row; justify-content: flex-start; text-align: start; }
    .tv-flight__aside {
        justify-items: stretch; text-align: start;
        grid-template-columns: 1fr auto; align-items: center;
        padding-inline-start: 0; padding-top: var(--tv-4);
        border-inline-start: 0; border-top: 1px solid var(--tv-line-soft);
    }
    .tv-flight__aside .tv-price { flex-direction: row; align-items: baseline; gap: 6px; }
    .tv-flight__aside .tv-btn { width: auto; }
}
@media (max-width: 479.98px) {
    .tv-flight__leg { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--tv-2); }
    .tv-flight__time { font-size: var(--tv-text-lg); }
    .tv-flight__date { display: none; }
}

/* ==========================================================================
   3. Detail pages
   ========================================================================== */

.tv-detail { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (max-width: 991.98px) { .tv-detail { grid-template-columns: minmax(0, 1fr); } }

.tv-gallery { display: grid; gap: var(--tv-2); grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; border-radius: var(--tv-r-xl); overflow: hidden; }
.tv-gallery > * { position: relative; overflow: hidden; background: var(--tv-canvas-2); }
.tv-gallery > *:first-child { grid-row: span 2; }
.tv-gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform var(--tv-slow) var(--tv-ease); }
.tv-gallery a:hover img { transform: scale(1.04); }
@media (max-width: 767.98px) {
    .tv-gallery { grid-template-columns: 1fr; grid-template-rows: none; }
    .tv-gallery > *:not(:first-child) { display: none; }
    .tv-gallery > *:first-child { grid-row: auto; }
}

/* ---- Hotel / tour detail: retuning the vendor's own blocks --------------- */

body.nav-fixed .hotelmaininfo { margin-bottom: var(--tv-6); }
.tv-detail-badges { display: flex; flex-wrap: wrap; gap: var(--tv-2); margin-bottom: var(--tv-3); }
.tv-detail-actions { display: flex; align-items: center; gap: var(--tv-2); margin-top: var(--tv-4); }
/* Inside a row of buttons the save control is a pill, not a floating circle. */
.tv-save--inline {
    width: auto; height: 38px; padding: 0 14px; gap: 7px;
    border-radius: var(--tv-r-full);
    background: var(--tv-canvas-2); box-shadow: none;
    color: var(--tv-ink-700);
}
.tv-save--inline:hover { background: var(--tv-line); transform: none; color: var(--tv-coral-500); }

body.nav-fixed .hoteldtlts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tv-2) 0; }
body.nav-fixed .ins34 {
    display: inline-flex; align-items: center; gap: 7px;
    border-inline-end: 1px solid var(--tv-line);
    padding-inline-end: var(--tv-4); margin-inline-end: var(--tv-4);
    font-size: var(--tv-text-base); color: var(--tv-ink-600);
}
body.nav-fixed .ins34 svg, body.nav-fixed .ins34 i { color: var(--tv-ink-400); margin: 0; width: 16px; height: 16px; }
body.nav-fixed .tprating { font-size: var(--tv-text-base); color: var(--tv-ink-500); gap: 6px; flex-wrap: wrap; }
body.nav-fixed .badge.badge-warning {
    background: var(--tv-brand-600); color: #fff;
    padding: 5px 10px; border-radius: var(--tv-r-sm) var(--tv-r-sm) var(--tv-r-sm) 2px;
    font-weight: 700; font-size: var(--tv-text-sm);
}
body.nav-fixed .hotelmaininfo .prices {
    font-family: var(--tv-font-display);
    font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800;
    color: var(--tv-ink-900); letter-spacing: -0.03em;
    text-align: end; margin-top: var(--tv-3);
}
body.nav-fixed .hotelmaininfo .prices span {
    font-family: var(--tv-font-body);
    font-size: var(--tv-text-base); color: var(--tv-ink-400); font-weight: 500;
}
@media (max-width: 767.98px) {
    body.nav-fixed .hotelmaininfo .prices { text-align: start; }
    body.nav-fixed .ins34 { border-inline-end: 0; padding-inline-end: var(--tv-3); margin-inline-end: var(--tv-3); }
    /* The price column stacks under the info column and inherited the row's
       gutter on top of its own margin — about 90px of nothing between the
       Share button and the rate. */
    body.nav-fixed .hotelmaininfo .row > .col-md-4 { margin-top: 0; }
    body.nav-fixed .hotelmaininfo .prices { margin-top: var(--tv-4); padding-top: var(--tv-4); border-top: 1px solid var(--tv-line-soft); }
}

/* The vendor's booking panel was a solid amber block with white inputs punched
   into it — it read as a warning banner rather than the primary conversion
   surface. White card, brand CTA, amber kept as the accent it is. */
body.nav-fixed .bookingsidebar {
    position: sticky; top: calc(var(--tv-header-h) + var(--tv-4));
    background: var(--tv-surface);
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-r-xl);
    box-shadow: var(--tv-shadow-lg);
    padding: var(--tv-5);
    margin-bottom: var(--tv-6);
}
body.nav-fixed .bookingsidebar h4,
body.nav-fixed .bookingsidebar h3 {
    font-size: var(--tv-text-xl); color: var(--tv-ink-900);
    padding-bottom: var(--tv-4); margin-bottom: var(--tv-4);
    border-bottom: 1px solid var(--tv-line-soft);
}
body.nav-fixed .bookingsidebar p { font-size: var(--tv-text-sm); color: var(--tv-ink-400); }
body.nav-fixed .bookingsidebar .form-label,
body.nav-fixed .bookingsidebar label {
    font-size: var(--tv-text-sm); font-weight: 600; color: var(--tv-ink-700);
}
body.nav-fixed .bookingsidebar hr { border-color: var(--tv-line); opacity: 1; margin: var(--tv-5) 0; }
body.nav-fixed .bookingsidebar .btn-primary { width: 100%; }

/* Quantity stepper */
body.nav-fixed .number { display: flex; align-items: center; gap: var(--tv-2); }
body.nav-fixed .number .minus, body.nav-fixed .number .plus {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--tv-canvas-2); color: var(--tv-ink-800);
    border: 0; border-radius: var(--tv-r-md);
    font-size: var(--tv-text-lg); font-weight: 700; line-height: 1;
    transition: background-color var(--tv-fast) var(--tv-ease);
}
body.nav-fixed .number .minus:hover, body.nav-fixed .number .plus:hover { background: var(--tv-brand-50); color: var(--tv-brand-700); }
body.nav-fixed .number input {
    width: 60px; height: 40px; text-align: center;
    border: 1.5px solid var(--tv-line); border-radius: var(--tv-r-md);
    font-weight: 700; color: var(--tv-ink-900);
}

/* Facility pills */
body.nav-fixed .fieldlabels {
    display: flex; align-items: center; gap: var(--tv-2);
    padding: var(--tv-3) var(--tv-4);
    background: var(--tv-surface);
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-r-md);
    font-size: var(--tv-text-base); color: var(--tv-ink-700);
    height: 100%;
}
body.nav-fixed .fieldlabels i { color: var(--tv-brand-500); width: 18px; text-align: center; }

/* Each .detcontent is its own card, so a 64px top margin on its heading was
   stacking on the card's own padding and opening ~170px gaps between blocks
   that held two list items each. */
body.nav-fixed .detcontent {
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    margin-bottom: var(--tv-4);
    background: var(--tv-surface);
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-r-xl);
}
/* h2, not h3: these are the page's top-level sections and sat directly under
   the h1, so the outline jumped a level. Size is set here, so the level is
   free to be correct. */
body.nav-fixed .detcontent > h3,
body.nav-fixed .detcontent > h2 { font-size: var(--tv-text-xl); margin: 0 0 var(--tv-4); }
body.nav-fixed .detcontent.facilitiesbg { background: none; border: 0; padding: 0; }

/* Three related fact groups side by side rather than three stacked bands. */
.tv-known { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tv-5); }
.tv-known__group { min-width: 0; }
.tv-known__title {
    font-size: var(--tv-text-sm); font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--tv-ink-400);
    margin: 0 0 var(--tv-3); padding-bottom: var(--tv-2);
    border-bottom: 1px solid var(--tv-line-soft);
}
.tv-known .tv-amenity { font-size: var(--tv-text-base); }
@media (max-width: 767.98px) {
    .tv-known { grid-template-columns: minmax(0, 1fr); gap: var(--tv-5); }
}

/* Sticky booking panel */
.tv-bookbox {
    position: sticky; top: calc(var(--tv-header-h) + var(--tv-4));
    padding: var(--tv-5);
    background: var(--tv-surface);
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-r-xl);
    box-shadow: var(--tv-shadow-md);
}
.tv-bookbox__price { display: flex; align-items: baseline; gap: var(--tv-2); padding-bottom: var(--tv-4); margin-bottom: var(--tv-4); border-bottom: 1px solid var(--tv-line-soft); }
.tv-bookbox__price .tv-price__amount { font-size: clamp(1.5rem, 2vw, 1.875rem); }

/* On a phone the booking CTA docks above the bottom nav instead of hiding
   at the end of a 4000px page. */
.tv-dockbar {
    display: none;
    position: fixed; inset-inline: 0; z-index: 1035;
    bottom: calc(var(--tv-bottomnav-h) + var(--tv-safe-b));
    align-items: center; justify-content: space-between; gap: var(--tv-3);
    padding: var(--tv-3) var(--tv-4);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--tv-line);
    box-shadow: 0 -4px 20px rgba(10, 22, 38, .09);
}
body.tv-embedded .tv-dockbar { bottom: var(--tv-safe-b); }
@media (max-width: 991.98px) { .tv-dockbar { display: flex; } }

.tv-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--tv-3); }
.tv-fact {
    display: flex; align-items: center; gap: var(--tv-3);
    padding: var(--tv-3) var(--tv-4);
    background: var(--tv-canvas); border-radius: var(--tv-r-md);
}
.tv-fact__icon { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--tv-r-sm); background: var(--tv-surface); color: var(--tv-brand-600); box-shadow: var(--tv-shadow-xs); }
.tv-fact__icon svg { width: 17px; height: 17px; }
.tv-fact__label { font-size: var(--tv-text-xs); color: var(--tv-ink-400); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.tv-fact__value { font-family: var(--tv-font-display); font-weight: 700; color: var(--tv-ink-900); font-size: var(--tv-text-base); }

.tv-amenities { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--tv-3); list-style: none; padding: 0; }
.tv-amenity { display: flex; align-items: center; gap: var(--tv-2); font-size: var(--tv-text-base); color: var(--tv-ink-700); }
.tv-amenity svg { width: 17px; height: 17px; color: var(--tv-teal-500); flex: 0 0 auto; }

/* ==========================================================================
   4. Booking flow
   ========================================================================== */

.tv-steps { display: flex; align-items: flex-start; gap: 0; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.tv-step { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; text-align: center; min-width: 0; }
/* The connector is drawn on the step, not between them, so it survives wrap. */
.tv-step::before,
.tv-step::after {
    content: ""; position: absolute; top: 17px; height: 2px;
    background: var(--tv-line); z-index: 0;
}
.tv-step::before { inset-inline-start: 0; width: 50%; }
.tv-step::after { inset-inline-end: 0; width: 50%; }
.tv-step:first-child::before, .tv-step:last-child::after { display: none; }
.tv-step.is-done::before, .tv-step.is-done::after,
.tv-step.is-current::before { background: var(--tv-brand-500); }

.tv-step__dot {
    position: relative; z-index: 1;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--tv-surface);
    border: 2px solid var(--tv-line);
    font-family: var(--tv-font-display); font-weight: 700; font-size: var(--tv-text-sm);
    color: var(--tv-ink-400);
    transition: background-color var(--tv-base) var(--tv-ease), border-color var(--tv-base) var(--tv-ease), color var(--tv-base) var(--tv-ease);
}
.tv-step__dot svg { width: 17px; height: 17px; }
.tv-step.is-current .tv-step__dot {
    background: var(--tv-brand-600); border-color: var(--tv-brand-600); color: #fff;
    box-shadow: 0 0 0 5px var(--tv-brand-50);
}
.tv-step.is-done .tv-step__dot { background: var(--tv-teal-500); border-color: var(--tv-teal-500); color: #fff; }
.tv-step__label { font-size: var(--tv-text-sm); font-weight: 600; color: var(--tv-ink-400); line-height: 1.25; padding-inline: 4px; }
.tv-step.is-current .tv-step__label { color: var(--tv-brand-700); }
.tv-step.is-done .tv-step__label { color: var(--tv-ink-700); }
@media (max-width: 575.98px) { .tv-step__label { font-size: 11px; } .tv-step__dot { width: 32px; height: 32px; } .tv-step::before, .tv-step::after { top: 15px; } }

.tv-form-card {
    background: var(--tv-surface);
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-r-xl);
    box-shadow: var(--tv-shadow-sm);
    overflow: hidden;
}
.tv-form-card__head {
    display: flex; align-items: center; gap: var(--tv-3);
    padding: var(--tv-5);
    border-bottom: 1px solid var(--tv-line-soft);
    background: var(--tv-canvas);
}
.tv-form-card__head svg { width: 20px; height: 20px; color: var(--tv-brand-600); flex: 0 0 auto; }
.tv-form-card__title { margin: 0; font-size: var(--tv-text-lg); }
.tv-form-card__body { padding: var(--tv-5); }
.tv-form-card + .tv-form-card { margin-top: var(--tv-4); }

.tv-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tv-4); }
.tv-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tv-form-grid > .tv-span-2 { grid-column: 1 / -1; }
@media (max-width: 767.98px) { .tv-form-grid, .tv-form-grid--3 { grid-template-columns: minmax(0, 1fr); } }

/* Order summary */
.tv-summary {
    position: sticky; top: calc(var(--tv-header-h) + var(--tv-4));
    background: var(--tv-surface);
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-r-xl);
    box-shadow: var(--tv-shadow-md);
    overflow: hidden;
}
.tv-summary__head { padding: var(--tv-5); border-bottom: 1px solid var(--tv-line-soft); }
.tv-summary__body { padding: var(--tv-5); }
.tv-summary__line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tv-3); padding: 7px 0; font-size: var(--tv-text-base); }
.tv-summary__line dt { color: var(--tv-ink-500); font-weight: 500; margin: 0; }
.tv-summary__line dd { color: var(--tv-ink-900); font-weight: 600; margin: 0; text-align: end; }
.tv-summary__total {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--tv-3);
    padding-top: var(--tv-4); margin-top: var(--tv-3);
    border-top: 1px solid var(--tv-line);
}
.tv-summary__total dt { font-family: var(--tv-font-display); font-weight: 700; font-size: var(--tv-text-lg); color: var(--tv-ink-900); margin: 0; }
.tv-summary__total dd { font-family: var(--tv-font-display); font-weight: 800; font-size: var(--tv-h4); color: var(--tv-brand-600); margin: 0; }

/* Payment method chooser */
.tv-pay-options { display: grid; gap: var(--tv-3); }
.tv-pay {
    position: relative;
    display: flex; align-items: center; gap: var(--tv-4);
    padding: var(--tv-4) var(--tv-5);
    background: var(--tv-surface);
    border: 1.5px solid var(--tv-line);
    border-radius: var(--tv-r-lg);
    cursor: pointer;
    transition: border-color var(--tv-fast) var(--tv-ease), background-color var(--tv-fast) var(--tv-ease), box-shadow var(--tv-fast) var(--tv-ease);
}
.tv-pay:hover { border-color: var(--tv-brand-400); background: var(--tv-brand-50); }
.tv-pay.is-selected, .tv-pay:has(input:checked) {
    border-color: var(--tv-brand-600); background: var(--tv-brand-50);
    box-shadow: 0 0 0 3px rgba(18, 104, 179, .12);
}
.tv-pay input { position: absolute; opacity: 0; pointer-events: none; }
.tv-pay__logo {
    width: 46px; height: 46px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: var(--tv-r-md);
    background: var(--tv-canvas); color: var(--tv-brand-600);
    font-size: 20px;
}
.tv-pay__logo svg { width: 22px; height: 22px; }
.tv-pay__name { font-family: var(--tv-font-display); font-weight: 700; color: var(--tv-ink-900); }
.tv-pay__desc { font-size: var(--tv-text-sm); color: var(--tv-ink-500); }
.tv-pay__check {
    margin-inline-start: auto; flex: 0 0 auto;
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--tv-ink-200);
    display: grid; place-items: center;
    transition: border-color var(--tv-fast) var(--tv-ease), background-color var(--tv-fast) var(--tv-ease);
}
.tv-pay__check svg { width: 12px; height: 12px; color: #fff; opacity: 0; transition: opacity var(--tv-fast) var(--tv-ease); }
.tv-pay.is-selected .tv-pay__check, .tv-pay:has(input:checked) .tv-pay__check { border-color: var(--tv-brand-600); background: var(--tv-brand-600); }
.tv-pay.is-selected .tv-pay__check svg, .tv-pay:has(input:checked) .tv-pay__check svg { opacity: 1; }

/* Confirmation */
.tv-confirm { text-align: center; max-width: 620px; margin-inline: auto; }
.tv-confirm__badge {
    width: 88px; height: 88px; margin: 0 auto var(--tv-5);
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--tv-teal-50); color: var(--tv-teal-500);
    animation: tv-confirm-in var(--tv-slow) var(--tv-ease-out);
}
.tv-confirm__badge svg { width: 40px; height: 40px; stroke-width: 2.4; }
@keyframes tv-confirm-in {
    0% { transform: scale(.5); opacity: 0; }
    60% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}
.tv-confirm__ref {
    display: inline-flex; align-items: center; gap: var(--tv-2);
    padding: 10px 18px; margin: var(--tv-2) 0 var(--tv-5);
    background: var(--tv-canvas); border: 1px dashed var(--tv-line);
    border-radius: var(--tv-r-md);
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: var(--tv-text-md); font-weight: 600; color: var(--tv-ink-900);
    letter-spacing: .04em;
}
.tv-confirm__actions { display: flex; gap: var(--tv-3); justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   5. Dashboard and account
   ========================================================================== */

.tv-dash { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (max-width: 991.98px) { .tv-dash { grid-template-columns: minmax(0, 1fr); } }

.tv-profile-card {
    padding: var(--tv-5); text-align: center;
    background: var(--tv-surface);
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-r-xl);
    box-shadow: var(--tv-shadow-sm);
    overflow: hidden;
}
.tv-profile-card__cover {
    height: 78px; margin: calc(var(--tv-5) * -1) calc(var(--tv-5) * -1) 0;
    background: linear-gradient(120deg, var(--tv-brand-700), var(--tv-brand-500));
}
.tv-profile-card__avatar {
    width: 86px; height: 86px; margin: -43px auto var(--tv-3);
    position: relative;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--tv-brand-600); color: #fff;
    font-family: var(--tv-font-display); font-size: 30px; font-weight: 700;
    border: 4px solid var(--tv-surface);
    box-shadow: var(--tv-shadow-md);
    overflow: hidden;
}
.tv-profile-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.tv-profile-card__name { font-size: var(--tv-text-xl); margin: 0 0 2px; }
.tv-profile-card__mail { font-size: var(--tv-text-sm); color: var(--tv-ink-500); word-break: break-word; }

.tv-sidenav { list-style: none; padding: 0; margin: var(--tv-4) 0 0; display: grid; gap: 2px; }
.tv-sidenav a {
    display: flex; align-items: center; gap: var(--tv-3);
    padding: 11px 14px;
    border-radius: var(--tv-r-md);
    font-size: var(--tv-text-base); font-weight: 600; color: var(--tv-ink-600);
    transition: background-color var(--tv-fast) var(--tv-ease), color var(--tv-fast) var(--tv-ease);
}
.tv-sidenav a svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--tv-ink-400); }
.tv-sidenav a:hover { background: var(--tv-canvas); color: var(--tv-ink-900); }
.tv-sidenav a:hover svg { color: var(--tv-brand-500); }
.tv-sidenav a.is-active { background: var(--tv-brand-50); color: var(--tv-brand-700); }
.tv-sidenav a.is-active svg { color: var(--tv-brand-600); }
.tv-sidenav__count { margin-inline-start: auto; font-size: var(--tv-text-xs); font-weight: 700; color: var(--tv-ink-400); }

/* Stat tiles */
.tv-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tv-4); }
@media (max-width: 991.98px) { .tv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tv-tile {
    padding: var(--tv-5);
    background: var(--tv-surface);
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-r-lg);
    box-shadow: var(--tv-shadow-xs);
    transition: box-shadow var(--tv-base) var(--tv-ease), transform var(--tv-base) var(--tv-ease);
}
.tv-tile:hover { box-shadow: var(--tv-shadow-md); transform: translateY(-2px); }
.tv-tile__icon {
    width: 42px; height: 42px; margin-bottom: var(--tv-3);
    display: grid; place-items: center;
    border-radius: var(--tv-r-md);
    background: var(--tv-brand-50); color: var(--tv-brand-600);
}
.tv-tile__icon svg { width: 20px; height: 20px; }
.tv-tile--gold .tv-tile__icon { background: var(--tv-gold-50); color: var(--tv-gold-600); }
.tv-tile--teal .tv-tile__icon { background: var(--tv-teal-50); color: var(--tv-teal-600); }
.tv-tile--coral .tv-tile__icon { background: var(--tv-coral-50); color: var(--tv-coral-600); }
.tv-tile__num { font-family: var(--tv-font-display); font-size: var(--tv-h3); font-weight: 800; color: var(--tv-ink-900); line-height: 1.1; letter-spacing: -0.02em; }
.tv-tile__label { font-size: var(--tv-text-sm); color: var(--tv-ink-500); margin-top: 2px; }

/* Trip card */
.tv-trip {
    display: grid; grid-template-columns: 116px minmax(0, 1fr) auto;
    gap: var(--tv-4);
    align-items: center;
    padding: var(--tv-4);
    background: var(--tv-surface);
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-r-lg);
    transition: box-shadow var(--tv-base) var(--tv-ease), border-color var(--tv-base) var(--tv-ease);
}
.tv-trip:hover { box-shadow: var(--tv-shadow-md); border-color: transparent; }
.tv-trip__media { aspect-ratio: 1; border-radius: var(--tv-r-md); overflow: hidden; background: var(--tv-canvas-2); }
.tv-trip__media img { width: 100%; height: 100%; object-fit: cover; }
.tv-trip__body { min-width: 0; }
.tv-trip__title { font-size: var(--tv-text-lg); margin: 0 0 4px; }
.tv-trip__aside { display: flex; flex-direction: column; align-items: flex-end; gap: var(--tv-2); text-align: end; }
@media (max-width: 767.98px) {
    .tv-trip { grid-template-columns: 78px minmax(0, 1fr); }
    .tv-trip__aside { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; text-align: start; border-top: 1px solid var(--tv-line-soft); padding-top: var(--tv-3); }
}

/* Tables that must survive a 390px screen. */
.tv-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--tv-line); border-radius: var(--tv-r-lg); background: var(--tv-surface); }
body.nav-fixed .tv-table-wrap > table { margin: 0; min-width: 640px; }
body.nav-fixed .table { font-size: var(--tv-text-base); }
body.nav-fixed .table > thead th {
    background: var(--tv-canvas);
    font-size: var(--tv-text-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--tv-ink-500); border-bottom: 1px solid var(--tv-line);
    padding: var(--tv-3) var(--tv-4); white-space: nowrap;
}
body.nav-fixed .table > tbody td { padding: var(--tv-4); border-bottom: 1px solid var(--tv-line-soft); vertical-align: middle; color: var(--tv-ink-700); }
body.nav-fixed .table > tbody tr:last-child td { border-bottom: 0; }
body.nav-fixed .table > tbody tr:hover { background: var(--tv-canvas); }

/* ==========================================================================
   6. Auth
   ========================================================================== */

.tv-auth { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - var(--tv-header-h)); }
@media (max-width: 991.98px) { .tv-auth { grid-template-columns: 1fr; min-height: 0; } }

.tv-auth__aside {
    position: relative; isolation: isolate;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: clamp(2rem, 5vw, 4rem);
    background-color: var(--tv-brand-900);
    background-size: cover; background-position: center;
    color: #fff;
}
.tv-auth__aside::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(160deg, rgba(5,43,74,.62) 0%, rgba(5,43,74,.88) 100%);
}
body.nav-fixed .tv-auth__quote { font-family: var(--tv-font-display); font-size: var(--tv-h3); color: #fff; line-height: 1.24; margin: 0 0 var(--tv-3); font-weight: 700; letter-spacing: -0.02em; }
.tv-auth__quote-sub { color: rgba(255, 255, 255, .78); margin: 0; max-width: 44ch; }
.tv-auth__back {
    position: absolute; top: clamp(1.5rem, 3vw, 2.5rem); inset-inline-start: clamp(2rem, 5vw, 4rem);
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px 8px 12px;
    border-radius: var(--tv-r-full);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: #fff; font-size: var(--tv-text-sm); font-weight: 600;
    transition: background-color var(--tv-fast) var(--tv-ease);
}
body.nav-fixed .tv-auth__back:hover { background: rgba(255, 255, 255, .24); color: #fff; }
html[dir="rtl"] .tv-auth__back svg { transform: scaleX(-1); }
@media (max-width: 991.98px) { .tv-auth__aside { display: none; } }

.tv-auth__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--tv-3); flex-wrap: wrap; margin-top: var(--tv-2);
}
.tv-auth__row .form-check { margin: 0; }
body.nav-fixed .forgot-password-link {
    font-size: var(--tv-text-sm); font-weight: 600;
    display: inline-flex; align-items: center; min-height: 44px;
}
.tv-auth__foot a { display: inline-flex; align-items: center; min-height: 44px; }

.tv-auth__panel { display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 5vw, 4rem) var(--tv-gutter); background: var(--tv-surface); }
.tv-auth__form { width: 100%; max-width: 420px; }
.tv-auth__title { font-size: var(--tv-h2); margin-bottom: var(--tv-2); }
.tv-auth__sub { color: var(--tv-ink-500); margin-bottom: var(--tv-6); }
.tv-auth__foot { margin-top: var(--tv-6); padding-top: var(--tv-5); border-top: 1px solid var(--tv-line-soft); text-align: center; font-size: var(--tv-text-base); color: var(--tv-ink-500); }

.tv-pw-toggle {
    position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; z-index: 2;
    display: grid; place-items: center;
    background: none; border: 0; border-radius: var(--tv-r-sm);
    color: var(--tv-ink-400); cursor: pointer;
}
.tv-pw-toggle:hover { color: var(--tv-ink-700); background: var(--tv-canvas); }
.tv-pw-toggle svg { width: 18px; height: 18px; }

/* ==========================================================================
   7. Content pages (blog, services, CMS, contact)
   ========================================================================== */

.tv-prose { max-width: 72ch; font-size: var(--tv-text-md); line-height: 1.72; color: var(--tv-ink-700); }
.tv-prose > * + * { margin-top: var(--tv-4); }
.tv-prose h2 { font-size: var(--tv-h3); margin-top: var(--tv-8); }
.tv-prose h3 { font-size: var(--tv-h4); margin-top: var(--tv-6); }
.tv-prose img { border-radius: var(--tv-r-lg); box-shadow: var(--tv-shadow-sm); }
.tv-prose ul, .tv-prose ol { padding-inline-start: var(--tv-6); }
.tv-prose li + li { margin-top: 6px; }
.tv-prose blockquote {
    padding: var(--tv-4) var(--tv-5);
    border-inline-start: 3px solid var(--tv-gold-500);
    background: var(--tv-canvas);
    border-radius: 0 var(--tv-r-md) var(--tv-r-md) 0;
    font-size: var(--tv-text-lg); color: var(--tv-ink-800);
}
.tv-prose a { text-decoration: underline; text-underline-offset: 3px; }

body.nav-fixed .subposts .postimg { aspect-ratio: 16 / 10; overflow: hidden; }
body.nav-fixed .subposts .postimg img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tv-slow) var(--tv-ease); }
body.nav-fixed .subposts:hover .postimg img { transform: scale(1.05); }
body.nav-fixed .subposts .postinfo { padding: var(--tv-5); }
body.nav-fixed .subposts .postinfo h3 { font-size: var(--tv-text-lg); margin: 0; }
body.nav-fixed .subposts .date {
    padding: 0 var(--tv-5) var(--tv-5);
    font-size: var(--tv-text-sm); color: var(--tv-ink-400); font-weight: 600;
}

/* Contact */
.tv-contact-card {
    display: flex; align-items: flex-start; gap: var(--tv-4);
    padding: var(--tv-5);
    background: var(--tv-surface);
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-r-lg);
    box-shadow: var(--tv-shadow-xs);
}
.tv-contact-card__icon { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--tv-r-md); background: var(--tv-brand-50); color: var(--tv-brand-600); }
.tv-contact-card__icon svg { width: 20px; height: 20px; }
.tv-contact-card__label { display: block; font-size: var(--tv-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tv-ink-400); margin-bottom: 2px; }
.tv-contact-card__value { display: block; font-family: var(--tv-font-display); font-weight: 700; color: var(--tv-ink-900); word-break: break-word; }

/* ==========================================================================
   8. Reviews
   ========================================================================== */

.tv-review { display: flex; gap: var(--tv-4); padding: var(--tv-5) 0; border-bottom: 1px solid var(--tv-line-soft); }
.tv-review:last-child { border-bottom: 0; }
.tv-review__avatar {
    width: 44px; height: 44px; flex: 0 0 auto;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--tv-brand-50); color: var(--tv-brand-700);
    font-family: var(--tv-font-display); font-weight: 700;
    object-fit: cover; overflow: hidden;
}
.tv-review__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tv-3); flex-wrap: wrap; }
.tv-review__name { font-family: var(--tv-font-display); font-weight: 700; color: var(--tv-ink-900); }
.tv-review__date { font-size: var(--tv-text-sm); color: var(--tv-ink-400); }
.tv-review__body { color: var(--tv-ink-700); margin: var(--tv-2) 0 0; }
.tv-review__reply {
    margin-top: var(--tv-3); padding: var(--tv-3) var(--tv-4);
    background: var(--tv-canvas); border-radius: var(--tv-r-md);
    border-inline-start: 2px solid var(--tv-brand-200, var(--tv-brand-100));
    font-size: var(--tv-text-base);
}

/* Score summary block */
.tv-score {
    display: flex; align-items: center; gap: var(--tv-5);
    padding: var(--tv-5);
    background: var(--tv-canvas); border-radius: var(--tv-r-lg);
}
.tv-score__big { font-family: var(--tv-font-display); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; color: var(--tv-brand-600); line-height: 1; letter-spacing: -0.03em; }
.tv-score__out { font-size: var(--tv-text-sm); color: var(--tv-ink-400); }

/* ==========================================================================
   9. Retiring the vendor's second palette
   --------------------------------------------------------------------------
   `style.css` carries 55 rules built on `#667eea → #764ba2 / #428141` — a
   purple-and-green gradient from a different theme that never matched the
   logo. It paints the dashboard hero, the profile header, every "primary"
   button on the account pages and most accent text, so the signed-in half of
   the site looked like a different product from the signed-out half.

   Rather than edit 11k lines we do not maintain, the same selectors are
   restated here in the brand palette, grouped by the role each one plays.
   ========================================================================== */

/* -- Hero and panel gradients --------------------------------------------- */
body.nav-fixed .bookings-hero,
body.nav-fixed .booking-hero,
body.nav-fixed .payment-hero,
body.nav-fixed .success-hero,
body.nav-fixed .profile-header,
body.nav-fixed .profile-container,
body.nav-fixed .user-profile-header,
body.nav-fixed .password-change-header,
body.nav-fixed .filters-header,
body.nav-fixed .form-card-header,
body.nav-fixed .summary-header,
body.nav-fixed .help-header {
    background: linear-gradient(120deg, var(--tv-brand-800) 0%, var(--tv-brand-600) 62%, var(--tv-brand-500) 100%);
    color: #fff;
}
body.nav-fixed .tours-hero::before {
    background: linear-gradient(115deg, rgba(5, 43, 74, .86) 0%, rgba(5, 43, 74, .58) 52%, rgba(5, 43, 74, .30) 100%);
}
body.nav-fixed .password-change-card::before,
body.nav-fixed .profile-card::before,
body.nav-fixed .user-profile-card::before,
body.nav-fixed .password-section-title::before,
body.nav-fixed .profile-body .section-title::before,
body.nav-fixed .user-section-title::before {
    background: linear-gradient(180deg, var(--tv-brand-600), var(--tv-brand-400));
}

/* A hero band needs its own headings light; the base heading colour is dark. */
body.nav-fixed .bookings-hero h1,
body.nav-fixed .bookings-hero h2,
body.nav-fixed .bookings-hero .hero-title,
body.nav-fixed .booking-hero h1,
body.nav-fixed .profile-header h1,
body.nav-fixed .profile-header h2,
body.nav-fixed .user-profile-header h1,
body.nav-fixed .user-profile-name,
body.nav-fixed .password-change-header h1,
body.nav-fixed .password-change-header h2,
body.nav-fixed .password-change-header h3 { color: #fff; }
body.nav-fixed .bookings-hero { padding-block: clamp(2.5rem, 6vw, 4rem); }
body.nav-fixed .bookings-hero .hero-content { text-align: start; }

/* -- Solid accent fills ---------------------------------------------------- */
body.nav-fixed .filter-button,
body.nav-fixed .hotel-details-btn,
body.nav-fixed .tour-details-btn,
body.nav-fixed .no-tours-button,
body.nav-fixed .submit-button,
body.nav-fixed .password-btn-primary,
body.nav-fixed .user-btn-primary,
body.nav-fixed .page-item.active .page-link,
body.nav-fixed .destinationList .hotel-type-badge,
body.nav-fixed .tour-card .tour-days-badge,
body.nav-fixed .title-radio:checked + .title-option,
body.nav-fixed .view-option.active,
body.nav-fixed .profile-avatar,
body.nav-fixed .user-profile-avatar {
    background: var(--tv-brand-600);
    border-color: var(--tv-brand-600);
    color: #fff;
}
body.nav-fixed .filter-button:hover,
body.nav-fixed .hotel-details-btn:hover,
body.nav-fixed .tour-details-btn:hover,
body.nav-fixed .no-tours-button:hover,
body.nav-fixed .submit-button:hover,
body.nav-fixed .password-btn-primary:hover,
body.nav-fixed .user-btn-primary:hover { background: var(--tv-brand-700); color: #fff; }
body.nav-fixed .view-option:hover,
body.nav-fixed .title-option:hover,
body.nav-fixed .photo-upload-section:hover,
body.nav-fixed .user-photo-upload-section:hover {
    background: var(--tv-brand-50); border-color: var(--tv-brand-100); color: var(--tv-brand-700);
}

/* -- Accent text and iconography ------------------------------------------- */
body.nav-fixed .price-amount,
body.nav-fixed .item-price,
body.nav-fixed .total-amount,
body.nav-fixed .passenger-group h6,
body.nav-fixed .password-section-title i,
body.nav-fixed .profile-body .section-title i,
body.nav-fixed .user-section-title i,
body.nav-fixed .password-requirements li i,
body.nav-fixed .tour-meta-item i,
body.nav-fixed .tour-dates i,
body.nav-fixed .tour-duration i,
body.nav-fixed .destinationList .hotel-meta-item i,
body.nav-fixed .destinationList .hotel-card-title a:hover,
body.nav-fixed .tour-card-title a:hover { color: var(--tv-brand-600); }
body.nav-fixed .password-requirements { background: var(--tv-brand-50); border-color: var(--tv-brand-100); }

/* -- Focus states ----------------------------------------------------------- */
body.nav-fixed .filter-select:focus,
body.nav-fixed .form-input:focus,
body.nav-fixed .form-select:focus,
body.nav-fixed .user-form-control:focus,
body.nav-fixed .password-form-control:focus {
    border-color: var(--tv-brand-500);
    box-shadow: var(--tv-ring);
    outline: none;
}

/* -- Dashboard summary tiles ------------------------------------------------ */
/* Three tiles in three unrelated colours (navy / amber / teal gradient) read as
   three unrelated things. One white surface each, the count as the loudest
   element, and a tinted icon chip carrying the only colour. */
body.nav-fixed .dashboard-card-2 {
    position: relative;
    background: var(--tv-surface) !important;
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-r-lg);
    box-shadow: var(--tv-shadow-xs);
    color: var(--tv-ink-900);
    padding: var(--tv-5);
    transition: box-shadow var(--tv-base) var(--tv-ease), transform var(--tv-base) var(--tv-ease);
}
body.nav-fixed .dashboard-card-2:hover { box-shadow: var(--tv-shadow-md); transform: translateY(-2px); }
body.nav-fixed .dashboard-card-2 .wt-card-wrap-2 {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon count" "icon label";
    align-items: center; column-gap: var(--tv-4); row-gap: 2px;
}
body.nav-fixed .dashboard-card-2 .wt-card-icon-2 {
    grid-area: icon;
    /* The vendor absolutely positions this chip, which pulls it out of the grid
       and collapses the column reserved for it — the label then ran straight
       across the icon. */
    position: static;
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: var(--tv-r-md);
    background: var(--tv-brand-50); color: var(--tv-brand-600);
    font-size: 20px;
}
body.nav-fixed .dashboard-card-2 .wt-card-right {
    grid-area: count;
    text-align: start;
    font-family: var(--tv-font-display);
    font-size: var(--tv-h3); font-weight: 800; line-height: 1.05;
    color: var(--tv-ink-900); letter-spacing: -0.03em;
}
body.nav-fixed .dashboard-card-2 .wt-card-bottom-2 { grid-area: label; }
body.nav-fixed .dashboard-card-2 .wt-card-bottom-2 h4 {
    font-family: var(--tv-font-body);
    font-size: var(--tv-text-sm); font-weight: 500;
    color: var(--tv-ink-500); margin: 0;
}
/* The vendor distinguishes the three by a gradient class; keep the distinction,
   move it to the icon chip. */
body.nav-fixed .block-gradient-3 .wt-card-icon-2 { background: var(--tv-gold-50); color: var(--tv-gold-600); }
body.nav-fixed .block-gradient-2 .wt-card-icon-2 { background: var(--tv-teal-50); color: var(--tv-teal-600); }

/* ---- Checkout layout ------------------------------------------------------ */
.tv-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (max-width: 991.98px) { .tv-checkout { grid-template-columns: minmax(0, 1fr); } }

.tv-checkout__submit {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--tv-4); flex-wrap: wrap;
    padding-top: var(--tv-5); margin-top: var(--tv-5);
    border-top: 1px solid var(--tv-line-soft);
}
.tv-checkout__submit .tv-price { flex-direction: column; align-items: flex-start; gap: 0; }
@media (max-width: 575.98px) {
    .tv-checkout__submit { flex-direction: column; align-items: stretch; }
    .tv-checkout__submit .tv-btn { width: 100%; }
}

.tv-summary__note {
    display: flex; align-items: flex-start; gap: var(--tv-2);
    margin: var(--tv-5) 0 0; padding-top: var(--tv-4);
    border-top: 1px solid var(--tv-line-soft);
    font-size: var(--tv-text-sm); color: var(--tv-ink-400);
}
.tv-summary__note svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--tv-teal-500); margin-top: 1px; }

/* A panel header painted with the brand gradient needs light headings; the base
   heading colour is dark ink and would otherwise disappear into it. */
body.nav-fixed .form-card-header h1, body.nav-fixed .form-card-header h2,
body.nav-fixed .form-card-header h3, body.nav-fixed .form-card-header h4,
body.nav-fixed .form-card-header p,
body.nav-fixed .summary-header h1, body.nav-fixed .summary-header h2,
body.nav-fixed .summary-header h3, body.nav-fixed .summary-header h4,
body.nav-fixed .help-header h3, body.nav-fixed .help-header h4,
body.nav-fixed .filters-header h3, body.nav-fixed .filters-header h4,
body.nav-fixed .booking-hero h1, body.nav-fixed .booking-hero h2,
body.nav-fixed .booking-hero p,
body.nav-fixed .payment-hero h1, body.nav-fixed .payment-hero h2,
body.nav-fixed .payment-hero p,
body.nav-fixed .success-hero h1, body.nav-fixed .success-hero h2,
body.nav-fixed .success-hero p { color: #fff; }
body.nav-fixed .payment-hero, body.nav-fixed .success-hero { padding-block: clamp(2.5rem, 6vw, 4rem); }
body.nav-fixed .payment-hero .hero-content, body.nav-fixed .success-hero .hero-content { text-align: center; }

/* ---- Contact -------------------------------------------------------------- */
.tv-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 991.98px) { .tv-contact-grid { grid-template-columns: minmax(0, 1fr); } }
body.nav-fixed a.tv-contact-card { color: inherit; }
body.nav-fixed a.tv-contact-card:hover { border-color: var(--tv-brand-100); box-shadow: var(--tv-shadow-sm); color: inherit; }
body.nav-fixed a.tv-contact-card:hover .tv-contact-card__value { color: var(--tv-brand-600); }

/* ---- Trust figures ------------------------------------------------------- */
/* The CMS counters, read as a single quiet row under the reviews rather than
   as a full-width band of their own. */
.tv-trustbar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--tv-4);
    list-style: none; padding: clamp(1.5rem, 3vw, 2.25rem) 0 0; margin: clamp(2rem, 4vw, 3.5rem) 0 0;
    border-top: 1px solid var(--tv-line);
    text-align: center;
}
.tv-trustbar__item { display: grid; gap: 2px; }
.tv-trustbar__num {
    font-family: var(--tv-font-display);
    font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800;
    color: var(--tv-ink-900); letter-spacing: -0.03em; line-height: 1.1;
}
.tv-trustbar__label { font-size: var(--tv-text-sm); color: var(--tv-ink-500); }
@media (max-width: 575.98px) {
    .tv-trustbar { grid-template-columns: repeat(2, 1fr); gap: var(--tv-5) var(--tv-4); }
}

/* ---- Hotel facilities ----------------------------------------------------- */
/* The vendor lays these out as Bootstrap `col-lg-3`, which means one per row
   below 992px — fourteen short labels became fourteen full-width rows, about
   1,050px of phone for "Bar", "Gym", "Free Wi-Fi". An auto-fit grid on the
   list overrides the columns without touching fourteen lines of markup. */
body.nav-fixed .facilitieslist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--tv-2);
    margin: 0; padding: 0; list-style: none;
}
body.nav-fixed .facilitieslist > li {
    width: auto; max-width: none; flex: none;   /* neutralise the col-* rules */
    margin: 0; padding: 0; text-align: start;
}
body.nav-fixed .facilitieslist .text-fst {
    display: flex; align-items: center; gap: var(--tv-2);
    height: 100%; padding: 11px 14px;
    background: var(--tv-surface);
    border: 1px solid var(--tv-line);
    border-bottom: 1px solid var(--tv-line);
    border-radius: var(--tv-r-md);
    box-shadow: none;
    font-size: var(--tv-text-sm); color: var(--tv-ink-700);
    text-align: start;
}
body.nav-fixed .facilitieslist i {
    display: inline-flex; flex: 0 0 auto;
    width: 18px; justify-content: center;
    font-size: 14px; color: var(--tv-brand-500);
}

/* A sticky panel in a column that has already stacked just leaves a hole above
   itself; below the breakpoint it should simply flow. */
@media (max-width: 991.98px) {
    /* Deliberately NOT .filtersidebar: below this breakpoint that is the
       slide-up filter sheet and must stay `fixed`, or it drops back into the
       flow and adds its whole height to every listing page. */
    body.nav-fixed .bookingsidebar,
    .tv-bookbox, .tv-summary, .tv-sortbar { position: static; top: auto; }
}

/* The services CMS stores a Font Awesome <i> tag in extra_field_1. */
.tv-service-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; margin-bottom: var(--tv-1);
    border-radius: var(--tv-r-md);
    background: var(--tv-brand-50); color: var(--tv-brand-600);
    font-size: 17px;
}


/* ==========================================================================
   Target size: the search field
   --------------------------------------------------------------------------
   `.tv-sfield` paints a 66px-tall field, but the control inside it is
   borderless and only ~20px high, so the other 46px did nothing when tapped.
   The label already points at the control with `for`, so stretching the
   label over the whole field turns the entire box into a hit area — while
   the input itself stays above it, so tapping the text still places a caret
   where the finger landed.
   ========================================================================== */
.tv-sfield { position: relative; }
.tv-sfield .tv-sfield__label::after {
    content: ""; position: absolute; inset: 0; z-index: 0; cursor: text;
}
.tv-sfield input.form-control,
.tv-sfield select.form-control,
.tv-sfield textarea.form-control { position: relative; z-index: 1; }
.tv-sfield select.form-control { cursor: pointer; }

/* ==========================================================================
   Airport / city picker
   --------------------------------------------------------------------------
   A sheet, not a dropdown: on a phone an airport list under a soft keyboard
   has no room for the three lines (city / airport / IATA) a traveller needs
   to tell JED from RUH. On desktop the same sheet is centred and capped.
   ========================================================================== */
.tv-ap__panel { display: flex; flex-direction: column; max-height: 88vh; }

.tv-ap__searchrow {
    position: relative;
    padding: 0 var(--tv-5) var(--tv-3);
    flex: 0 0 auto;
}
.tv-ap__searchicon {
    position: absolute; inset-inline-start: calc(var(--tv-5) + 14px); top: 50%;
    transform: translateY(-60%);
    width: 18px; height: 18px; color: var(--tv-ink-400); pointer-events: none;
}
.tv-ap__searchicon svg { width: 18px; height: 18px; }
.tv-ap__input {
    width: 100%; min-height: 52px;
    padding-block: 12px;
    padding-inline: 46px 14px;
    border: 1.5px solid var(--tv-line); border-radius: var(--tv-r-md);
    background: var(--tv-canvas);
    font-size: var(--tv-text-md); font-weight: 600; color: var(--tv-ink-900);
    -webkit-appearance: none; appearance: none;
}
.tv-ap__input::placeholder { font-weight: 500; color: var(--tv-ink-300); }
.tv-ap__input:focus {
    outline: none; background: var(--tv-surface);
    border-color: var(--tv-brand-500); box-shadow: var(--tv-ring);
}
/* The type-to-clear affordance Safari adds sits under our padding in RTL. */
.tv-ap__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.tv-ap__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.tv-ap__status {
    margin: 0 0 var(--tv-2);
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--tv-ink-400);
}

.tv-ap__list { list-style: none; margin: 0; padding: 0; }
.tv-ap__row {
    display: flex; align-items: center; gap: var(--tv-3);
    min-height: 60px; padding: var(--tv-2) var(--tv-1);
    border-bottom: 1px solid var(--tv-line-soft);
    cursor: pointer;
    transition: background-color var(--tv-fast) var(--tv-ease);
}
.tv-ap__row:last-child { border-bottom: 0; }
.tv-ap__row:hover { background: var(--tv-canvas); }
.tv-ap__row:focus-visible { outline: none; background: var(--tv-brand-50); box-shadow: var(--tv-ring); border-radius: var(--tv-r-sm); }

.tv-ap__rowicon {
    flex: 0 0 auto; width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%; background: var(--tv-canvas-2); color: var(--tv-ink-500);
}
.tv-ap__rowicon svg { width: 18px; height: 18px; }

.tv-ap__rowtext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tv-ap__city {
    font-size: var(--tv-text-md); font-weight: 700; color: var(--tv-ink-900);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tv-ap__name {
    font-size: var(--tv-text-sm); color: var(--tv-ink-500);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The IATA code is Latin inside an Arabic list — isolate it so the bidi
   algorithm cannot reorder it against the row's direction. */
.tv-ap__code {
    flex: 0 0 auto;
    unicode-bidi: isolate; direction: ltr;
    font-family: var(--tv-font-display);
    font-size: var(--tv-text-sm); font-weight: 800; letter-spacing: .04em;
    color: var(--tv-brand-700);
    background: var(--tv-brand-50); border-radius: var(--tv-r-sm);
    padding: 5px 9px;
}

/* The visible field is now a button in disguise; it must not look disabled. */
.tv-ap__proxy { cursor: pointer; }
.tv-ap__proxy:read-only { background: transparent; }

@media (min-width: 992px) {
    .tv-ap .tv-sheet__panel {
        max-width: 480px; margin: auto;
        border-radius: var(--tv-r-2xl);
    }
}

/* ==========================================================================
   Travellers + cabin
   --------------------------------------------------------------------------
   One summary row in the form; the steppers and cabin list live in a sheet.
   ========================================================================== */

/* A field that behaves as a button but must read as the fields beside it. */
.tv-sfield--button {
    width: 100%; text-align: start; cursor: pointer;
    border: 0; font: inherit; color: inherit;
    display: block; position: relative;
}
.tv-sfield__value {
    display: block;
    font-size: var(--tv-text-md); font-weight: 600; color: var(--tv-ink-900);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Stepper row */
.tv-qty {
    display: flex; align-items: center; justify-content: space-between; gap: var(--tv-4);
    padding: var(--tv-4) 0;
    border-bottom: 1px solid var(--tv-line-soft);
}
.tv-qty__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tv-qty__label { font-size: var(--tv-text-md); font-weight: 700; color: var(--tv-ink-900); }
.tv-qty__hint { font-size: var(--tv-text-sm); color: var(--tv-ink-500); }

.tv-qty__control { display: flex; align-items: center; gap: var(--tv-2); flex: 0 0 auto; }
.tv-qty__btn {
    width: 44px; height: 44px; flex: 0 0 auto;
    display: grid; place-items: center;
    border: 1.5px solid var(--tv-line); border-radius: 50%;
    background: var(--tv-surface); color: var(--tv-brand-700);
    font-size: 20px; font-weight: 600; line-height: 1; cursor: pointer;
    transition: border-color var(--tv-fast) var(--tv-ease), background-color var(--tv-fast) var(--tv-ease);
}
.tv-qty__btn:hover:not(:disabled) { border-color: var(--tv-brand-400); background: var(--tv-brand-50); }
.tv-qty__btn:focus-visible { outline: none; box-shadow: var(--tv-ring); }
.tv-qty__btn:disabled { opacity: .38; cursor: not-allowed; }
.tv-qty__input {
    width: 40px; text-align: center;
    border: 0; background: none; padding: 0;
    font-family: var(--tv-font-display);
    font-size: var(--tv-text-lg); font-weight: 800; color: var(--tv-ink-900);
    /* Read-only on purpose: the buttons are the control, and a soft numeric
       keyboard over a bottom sheet is a worse way to pick "2". */
    -moz-appearance: textfield;
}
.tv-qty__input::-webkit-outer-spin-button,
.tv-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Cabin list */
.tv-cabins { border: 0; margin: var(--tv-4) 0 0; padding: 0; }
.tv-cabins legend { padding: 0; margin-bottom: var(--tv-2); }
.tv-cabin {
    display: flex; align-items: center; gap: var(--tv-3);
    min-height: 52px; padding: var(--tv-2) var(--tv-3);
    border-radius: var(--tv-r-md); cursor: pointer;
    transition: background-color var(--tv-fast) var(--tv-ease);
}
.tv-cabin:hover { background: var(--tv-canvas); }
.tv-cabin input { position: absolute; opacity: 0; pointer-events: none; }
.tv-cabin__name { flex: 1 1 auto; font-size: var(--tv-text-md); font-weight: 600; color: var(--tv-ink-700); }
.tv-cabin__tick { flex: 0 0 auto; width: 22px; height: 22px; color: var(--tv-brand-600); opacity: 0; }
.tv-cabin__tick svg { width: 22px; height: 22px; }
.tv-cabin input:checked ~ .tv-cabin__name { color: var(--tv-brand-700); font-weight: 700; }
.tv-cabin input:checked ~ .tv-cabin__tick { opacity: 1; }
.tv-cabin input:focus-visible ~ .tv-cabin__name { text-decoration: underline; }
.tv-cabin:has(input:checked) { background: var(--tv-brand-50); }

/* Sheet footer — a sticky Done, clear of the home indicator. */
.tv-sheet__foot {
    flex: 0 0 auto;
    padding: var(--tv-3) var(--tv-5) calc(var(--tv-4) + var(--tv-safe-b));
    border-top: 1px solid var(--tv-line-soft);
    background: var(--tv-surface);
}

/* ==========================================================================
   Sticky search CTA
   --------------------------------------------------------------------------
   Sits directly above the bottom navigation, clear of the home indicator.
   Hidden by default and shown only by travelin.js, so a browser without
   IntersectionObserver simply never sees it and uses the real button.
   ========================================================================== */
.tv-stickycta {
    position: fixed; inset-inline: 0; z-index: 1040;
    bottom: calc(var(--tv-bottomnav-h) + var(--tv-safe-b));
    padding: var(--tv-3) var(--tv-4);
    background: var(--tv-surface);
    border-top: 1px solid var(--tv-line);
    box-shadow: 0 -6px 20px rgba(10, 22, 38, .08);
    transform: translateY(120%);
    transition: transform var(--tv-base) var(--tv-ease-out);
    visibility: hidden;
    display: none;
}
.tv-stickycta.is-visible { transform: translateY(0); visibility: visible; }

@media (max-width: 991.98px) {
    .tv-stickycta { display: block; }
}
/* Inside the SuperApp the host draws the tab bar, so there is none to clear. */
body.tv-embedded .tv-stickycta { bottom: var(--tv-safe-b); }

@media (prefers-reduced-motion: reduce) {
    .tv-stickycta { transition: none; }
}


/* ==========================================================================
   Scroll affordance for the horizontal strips
   --------------------------------------------------------------------------
   The tab strip and the trip-type control both scroll rather than clip, but a
   clipped-looking edge reads as breakage. `.is-scrollable` is set by
   travelin.js only when the content genuinely overflows, so a strip that fits
   is never faded. Translated labels differ in width, so this cannot be decided
   at author time — Arabic needs 333px where English needs 299px.
   ========================================================================== */
.tv-search__tabs.is-scrollable,
.tv-seg.is-scrollable {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
}
html[dir="rtl"] .tv-search__tabs.is-scrollable,
html[dir="rtl"] .tv-seg.is-scrollable {
    -webkit-mask-image: linear-gradient(to left, #000 0, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to left, #000 0, #000 calc(100% - 28px), transparent 100%);
}
/* Once scrolled to the end there is nothing more to hint at. */
.tv-search__tabs.is-scrollable.is-scrolled-end,
.tv-seg.is-scrollable.is-scrolled-end {
    -webkit-mask-image: none; mask-image: none;
}

/* ==========================================================================
   Inline search panel (hotel results page)
   ========================================================================== */
.tv-search--inline {
    margin: calc(var(--tv-6) * -1) 0 var(--tv-6);
    position: relative; z-index: 2;
    padding: var(--tv-5);
    background: var(--tv-surface);
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-r-xl);
    box-shadow: var(--tv-shadow-md);
}
.tv-search__note {
    display: flex; align-items: flex-start; gap: 7px;
    margin: var(--tv-3) 0 0;
    font-size: var(--tv-text-sm); color: var(--tv-ink-500);
}
.tv-search__note svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; color: var(--tv-ink-400); }

@media (max-width: 767.98px) {
    /* The page header sits directly above; do not pull the panel over it. */
    .tv-search--inline { margin-top: var(--tv-5); padding: var(--tv-4); }
}

/* Sort control */
.tv-sortform { position: relative; display: inline-flex; }
.tv-sortform__icon {
    position: absolute; inset-inline-start: 11px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--tv-ink-400); pointer-events: none;
}
.tv-sortform__icon svg { width: 16px; height: 16px; }
.tv-sortform__select {
    min-height: 44px;
    padding-block: 9px;
    padding-inline: 34px 30px;
    border: 1px solid var(--tv-line); border-radius: var(--tv-r-md);
    background: var(--tv-surface);
    font-size: var(--tv-text-sm); font-weight: 600; color: var(--tv-ink-700);
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B80' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-size: 16px;
    background-position: right 9px center;
}
html[dir="rtl"] .tv-sortform__select { background-position: left 9px center; }
.tv-sortform__select:focus-visible { outline: none; box-shadow: var(--tv-ring); border-color: var(--tv-brand-500); }

/* Total beside the nightly rate */
.tv-price__total {
    display: block;
    margin-top: 2px;
    font-family: var(--tv-font-display);
    font-size: var(--tv-text-sm); font-weight: 700; color: var(--tv-ink-700);
}
.tv-price__totalnote {
    display: block;
    font-family: var(--tv-font-body);
    font-size: var(--tv-text-xs); font-weight: 500; color: var(--tv-ink-400);
}

/* ==========================================================================
   Listing density on phones
   --------------------------------------------------------------------------
   A grid tile is 533px tall at 390px wide — 1.6 results per screen, so
   comparing five hotels means five screenfuls of scrolling. Brief §26 asks for
   fast comparison, and every OTA answers it the same way: on a phone the tile
   becomes a row, with the photograph as a thumbnail beside the facts.

   Scoped to `.tv-grid--3`, which is the results grid on /hotels and /tours.
   The home page rails keep the tall tile, where the image is the point.
   ========================================================================== */
@media (max-width: 767.98px) {
    .tv-grid--3 .tv-card {
        display: grid;
        grid-template-columns: 132px minmax(0, 1fr);
        grid-template-areas:
            "media body"
            "media footer";
        align-items: stretch;
    }
    .tv-grid--3 .tv-card__frame {
        grid-area: media;
        height: 100%;
        border-radius: 0;
    }
    .tv-grid--3 .tv-card__media { height: 100%; aspect-ratio: auto; }
    .tv-grid--3 .tv-card__media img { height: 100%; object-fit: cover; }

    .tv-grid--3 .tv-card__body {
        grid-area: body;
        padding: var(--tv-3) var(--tv-3) var(--tv-1);
        gap: 3px;
    }
    /* Price above the action, both full width: side by side the total wrapped
       to four lines ("Total for 3 / nights, 2 / rooms") beside the button. */
    .tv-grid--3 .tv-card__footer {
        grid-area: footer;
        padding: 0 var(--tv-3) var(--tv-3);
        border-top: 0;
        display: flex; flex-direction: column; align-items: stretch; gap: var(--tv-2);
    }
    .tv-grid--3 .tv-card__footer .tv-btn { width: 100%; }
    .tv-grid--3 .tv-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
    .tv-grid--3 .tv-price__total { flex: 1 0 100%; margin-top: 0; }
    .tv-grid--3 .tv-price__totalnote { display: inline; }
    .tv-grid--3 .tv-card__title { font-size: var(--tv-text-md); }

    /* The badges and the save control sit on a 132px column now. The badge can
       shrink; the save button cannot — 44px is the floor, and shrinking it to
       34px to buy room on the thumbnail was the wrong trade. It is stacked
       under the badge instead, which the 200px-tall thumbnail has room for. */
    .tv-grid--3 .tv-card__overlay--top {
        padding: 6px; gap: 4px;
        flex-direction: column; align-items: flex-start;
    }
    .tv-grid--3 .tv-card__overlay--top .tv-badge { font-size: 10px; padding: 3px 7px; }
    .tv-grid--3 .tv-save { width: 44px; height: 44px; align-self: flex-end; margin-top: auto; }

    /* A row this size cannot carry the secondary meta line as well. */
    .tv-grid--3 .tv-card__body .tv-meta { display: none; }

    /* Score chip + five stars + review count needs 156px in a 138px column.
       The score and the count carry the meaning; the stars repeat it. */
    .tv-grid--3 .tv-rating { flex-wrap: wrap; min-width: 0; }
    .tv-grid--3 .tv-rating__count { min-width: 0; }
}
@media (max-width: 359.98px) {
    .tv-grid--3 .tv-rating__stars { display: none; }
}

/* ==========================================================================
   Sticky detail CTA
   ========================================================================== */
.tv-detailcta {
    position: fixed; inset-inline: 0; z-index: 1040;
    bottom: calc(var(--tv-bottomnav-h) + var(--tv-safe-b));
    display: none;
    align-items: center; justify-content: space-between; gap: var(--tv-4);
    padding: var(--tv-3) var(--tv-4);
    background: var(--tv-surface);
    border-top: 1px solid var(--tv-line);
    box-shadow: 0 -6px 20px rgba(10, 22, 38, .08);
    transform: translateY(120%);
    transition: transform var(--tv-base) var(--tv-ease-out);
    visibility: hidden;
}
.tv-detailcta.is-visible { transform: translateY(0); visibility: visible; }
.tv-detailcta__price { display: flex; flex-direction: column; min-width: 0; }
.tv-detailcta__amount {
    font-family: var(--tv-font-display);
    font-size: var(--tv-text-lg); font-weight: 800; color: var(--tv-ink-900);
    white-space: nowrap;
}
.tv-detailcta__note { font-size: var(--tv-text-xs); color: var(--tv-ink-500); }
.tv-detailcta .tv-btn { flex: 0 0 auto; }

@media (max-width: 991.98px) { .tv-detailcta { display: flex; } }
body.tv-embedded .tv-detailcta { bottom: var(--tv-safe-b); }
@media (prefers-reduced-motion: reduce) { .tv-detailcta { transition: none; } }

/* Price breakdown on a booking form */
.tv-breakdown {
    margin: var(--tv-4) 0;
    padding: var(--tv-3) 0 0;
    border-top: 1px solid var(--tv-line-soft);
}
.tv-breakdown__row {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--tv-3);
    padding: 5px 0;
    font-size: var(--tv-text-sm); color: var(--tv-ink-500);
}
.tv-breakdown__row--total {
    margin-top: var(--tv-2); padding-top: var(--tv-3);
    border-top: 1px solid var(--tv-line-soft);
    font-size: var(--tv-text-md); color: var(--tv-ink-900); font-weight: 600;
}
.tv-breakdown__row--total strong {
    font-family: var(--tv-font-display);
    font-size: var(--tv-text-lg); font-weight: 800; color: var(--tv-ink-900);
}

/* ==========================================================================
   Detail gallery
   --------------------------------------------------------------------------
   The gallery leads the page, so it should meet the header rather than float
   52px below it in the page wrapper's default padding.
   ========================================================================== */
.tv-detail-gallery { margin-bottom: var(--tv-5); }

@media (max-width: 991.98px) {
    .tv-detail-gallery { margin-top: calc(var(--tv-8) * -1); }
    .tv-detail-gallery .gallery-container { margin-bottom: var(--tv-3) !important; }
    /* Thumbnails are a secondary control; they do not need the same air. */
    .tv-detail-gallery .galleryview { margin-bottom: var(--tv-2) !important; }
    .tv-detail-gallery .gallery-thumbnails { margin-top: var(--tv-2) !important; }
}

/* Guest score, distinct from the property's star class */
.tprating { display: flex; align-items: center; gap: var(--tv-2); margin-top: var(--tv-2); }
.tv-detail-score {
    display: inline-grid; place-items: center;
    min-width: 44px; padding: 6px 10px;
    border-radius: var(--tv-r-sm) var(--tv-r-sm) var(--tv-r-sm) 2px;
    background: var(--tv-brand-600); color: #fff;
    font-family: var(--tv-font-display); font-weight: 800; font-size: var(--tv-text-md);
}
html[dir="rtl"] .tv-detail-score { border-radius: var(--tv-r-sm) var(--tv-r-sm) 2px var(--tv-r-sm); }
.tv-detail-scoretext { display: flex; flex-direction: column; line-height: 1.25; }
.tv-detail-scoretext strong { font-size: var(--tv-text-sm); color: var(--tv-ink-900); }
.tv-detail-scoretext span { font-size: var(--tv-text-sm); color: var(--tv-ink-500); }

/* Guest checkout block */
.tv-guestblock {
    margin: var(--tv-4) 0;
    padding: var(--tv-4);
    background: var(--tv-canvas);
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-r-md);
}
.tv-guestblock__head {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: var(--tv-2); margin-bottom: var(--tv-3);
}
.tv-guestblock__title { font-weight: 700; color: var(--tv-ink-900); }
.tv-guestblock__signin { font-size: var(--tv-text-sm); color: var(--tv-ink-500); }
.tv-guestblock__signin a { color: var(--tv-brand-700); font-weight: 600; }
.tv-field__hint { margin: 5px 0 0; font-size: var(--tv-text-sm); color: var(--tv-ink-500); }

/* Booking reference on a confirmation screen */
.tv-refcard {
    max-width: 460px; margin: var(--tv-5) auto 0;
    padding: var(--tv-4);
    background: var(--tv-brand-50);
    border: 1px solid var(--tv-brand-100);
    border-radius: var(--tv-r-lg);
    text-align: center;
}
.tv-refcard__label {
    display: block;
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--tv-brand-700); margin-bottom: var(--tv-2);
}
.tv-refcard__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--tv-2); }
.tv-refcard__code {
    font-family: var(--tv-font-display);
    font-size: var(--tv-text-xl); font-weight: 800; letter-spacing: .06em;
    color: var(--tv-ink-900);
    /* Latin reference inside Arabic prose: isolate so bidi cannot reorder it. */
    direction: ltr; unicode-bidi: isolate;
}
.tv-refcard__hint { margin: var(--tv-3) 0 0; font-size: var(--tv-text-sm); color: var(--tv-ink-600); }

/* ==========================================================================
   Trips (brief §34)
   ========================================================================== */
.tv-seg--tabs { margin-bottom: var(--tv-6); }
.tv-seg--tabs .tv-seg__item { gap: 7px; text-decoration: none; }
.tv-seg__count {
    display: inline-grid; place-items: center;
    min-width: 20px; padding: 0 5px; height: 20px;
    border-radius: var(--tv-r-full);
    background: var(--tv-canvas-2); color: var(--tv-ink-500);
    font-size: 11px; font-weight: 700;
}
.tv-seg__item.is-active .tv-seg__count { background: var(--tv-brand-100); color: var(--tv-brand-700); }

.tv-trips { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tv-3); }
.tv-trip {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: var(--tv-4);
    align-items: center;
    padding: var(--tv-3);
    background: var(--tv-surface);
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-r-lg);
    transition: box-shadow var(--tv-fast) var(--tv-ease), border-color var(--tv-fast) var(--tv-ease);
}
.tv-trip:hover { box-shadow: var(--tv-shadow-md); border-color: transparent; }

.tv-trip__media {
    position: relative; overflow: hidden;
    aspect-ratio: 4 / 3; border-radius: var(--tv-r-md);
    background: var(--tv-canvas-2);
}
.tv-trip__media img { width: 100%; height: 100%; object-fit: cover; }
.tv-trip__icon { position: absolute; inset: 0; display: grid; place-items: center; color: var(--tv-brand-500); }
.tv-trip__icon svg { width: 26px; height: 26px; }

.tv-trip__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tv-trip__type {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--tv-ink-400);
}
.tv-trip__type svg { width: 13px; height: 13px; }
.tv-trip__title {
    font-family: var(--tv-font-display); font-weight: 700;
    font-size: var(--tv-text-md); color: var(--tv-ink-900);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tv-trip__when, .tv-trip__ref {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--tv-text-sm); color: var(--tv-ink-500);
}
.tv-trip__when svg { width: 14px; height: 14px; flex: 0 0 auto; }
/* A Latin reference inside Arabic prose must not be reordered by bidi. */
.tv-trip__ref code {
    direction: ltr; unicode-bidi: isolate;
    font-family: var(--tv-font-display); font-weight: 700; letter-spacing: .03em;
    color: var(--tv-ink-700);
}

.tv-trip__aside {
    display: flex; flex-direction: column; align-items: flex-end; gap: var(--tv-2);
    text-align: end; flex: 0 0 auto;
}
.tv-trip__amount { font-family: var(--tv-font-display); font-weight: 800; color: var(--tv-ink-900); }

@media (max-width: 575.98px) {
    /* Three columns cannot hold a title, a date, a reference and a price on a
       360px screen; the status column moves under the body. */
    .tv-trip {
        grid-template-columns: 76px minmax(0, 1fr);
        grid-template-areas: "media body" "aside aside";
        gap: var(--tv-3);
    }
    .tv-trip__media { grid-area: media; }
    .tv-trip__body { grid-area: body; }
    .tv-trip__aside {
        grid-area: aside;
        flex-direction: row; align-items: center; justify-content: space-between;
        width: 100%; padding-top: var(--tv-2);
        border-top: 1px solid var(--tv-line-soft);
    }
}

/* Find a guest booking */
.tv-findbooking {
    max-width: 460px; margin: var(--tv-8) auto 0;
    padding: var(--tv-5);
    background: var(--tv-canvas);
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-r-lg);
}
.tv-findbooking__title { font-size: var(--tv-text-lg); margin: 0 0 var(--tv-1); }
.tv-findbooking__text { margin: 0 0 var(--tv-4); font-size: var(--tv-text-sm); color: var(--tv-ink-500); }
.tv-findbooking__form { display: grid; gap: var(--tv-3); }