/* ==========================================================================
   YATRIWALA DESIGN SYSTEM
   --------------------------------------------------------------------------
   One travel product, not fifteen templates.

   This file is not a stylesheet of new visual ideas. It is the system the site
   already half-had, measured off the homepage and then made consistent. Three
   pages were sampled (home, /location/kerala, /hotel) and the drift was this:

     type sizes    18 distinct across three pages (10, 11, 12, 13, 14, 15, 16,
                   17, 18, 19, 20, 23, 24, 28, 30, 32, 36, 54) with a different
                   display size on every page - 54 / 30 / 36
     spacing       19 distinct values (2, 4, 5, 6, 8, 9, 10, 11, 12, 14, 15, 16,
                   18, 20, 22, 24, 26, 48, 64) - a list, not a scale
     radii         8 distinct (2, 8, 10, 12, 18, 28, 50%, 999px)
     brand navy    THREE - #0B2D54 on the homepage, #0F2B46 as "ink", and
                   #063B8F dominant on the inner pages but absent from the home
                   page entirely. That third blue is most of why inner pages
                   feel like a different website.
     containers    1200 mostly, but also 1160, 1217, 1265

   Nothing above is a rendering bug. Every page is individually fine. The
   inconsistency BETWEEN them is what reads as assembled-by-machine, so the fix
   has to be a shared layer rather than another per-page correction.

   Loaded after every legacy sheet, so these tokens win. Legacy variable names
   are re-pointed at the end of this file, which is what lets existing .yw-*
   components inherit the system without being rewritten one at a time.
   ========================================================================== */

:root {
    /* ---- Colour -----------------------------------------------------------
       One navy. #0B2D54 is the homepage's, and the homepage is the reference.
       #0F2B46 and #063B8F are folded into it and into the link blue below. */
    --yh-navy: #0b2d54;
    --yh-navy-soft: rgba(11, 45, 84, 0.72);
    --yh-link: #10457f;
    --yh-accent: #f58220;
    --yh-accent-ink: #9a3412;
    --yh-muted: #64748b;
    --yh-tint: #eaf2fb;
    --yh-line: rgba(11, 45, 84, 0.12);
    --yh-line-soft: rgba(11, 45, 84, 0.08);
    --yh-surface: #ffffff;
    --yh-canvas: #ffffff;
    --yh-success: #17915f;
    --yh-danger: #d64545;
    --yh-whatsapp: #25d366;

    /* ---- Type -------------------------------------------------------------
       Seven steps, not eighteen. Fluid where a page needs a display size, so
       the hero does not need its own hand-set number per template. */
    --yh-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --yh-display: clamp(30px, 4.2vw, 54px);
    --yh-h1: clamp(26px, 2.6vw, 34px);
    --yh-h2: clamp(20px, 2vw, 24px);
    --yh-h3: 17px;
    --yh-body: 14px;
    --yh-small: 12.5px;
    --yh-micro: 11px;

    --yh-lh-tight: 1.18;
    --yh-lh-heading: 1.28;
    --yh-lh-body: 1.6;

    --yh-w-regular: 400;
    --yh-w-medium: 600;
    --yh-w-bold: 700;
    --yh-w-heavy: 800;

    /* ---- Spacing ----------------------------------------------------------
       A real scale. Eight steps that compose, replacing nineteen ad-hoc values. */
    --yh-1: 4px;
    --yh-2: 8px;
    --yh-3: 12px;
    --yh-4: 16px;
    --yh-5: 24px;
    --yh-6: 32px;
    --yh-7: 48px;
    --yh-8: 64px;

    /* ---- Shape ------------------------------------------------------------
       Four radii with jobs: controls, cards, large surfaces, pills. */
    --yh-r-control: 8px;
    --yh-r-card: 12px;
    --yh-r-surface: 18px;
    --yh-r-pill: 999px;

    /*
     * One field height. yatriwala-home.css defines --yh-input-height: 42px and the
     * enquiry form uses it; .yh-field in this file used min-height: 46px. Two
     * numbers for the same control in the same system, and the 42px one was on
     * /plan-my-trip - the primary conversion form while payment is off, and the
     * one people fill in on a phone. 46px also clears the 44px touch target.
     */
    --yh-input-height: 46px;

    /* One elevation ramp. The site had five shadows doing overlapping jobs. */
    --yh-shadow-1: 0 1px 2px rgba(11, 45, 84, 0.06);
    --yh-shadow-2: 0 4px 12px rgba(11, 45, 84, 0.1);
    --yh-shadow-3: 0 14px 32px rgba(11, 45, 84, 0.14);

    /* ---- Layout -----------------------------------------------------------
       One content width and one gutter ramp, so a section cannot quietly be
       1160 or 1217 wide because it was built on a different day. */
    --yh-container: 1200px;
    --yh-gutter: 16px;
    --yh-section-y: var(--yh-7);
}

@media (min-width: 768px) {
    :root {
        --yh-gutter: 24px;
        --yh-section-y: var(--yh-8);
    }
}

@media (min-width: 1280px) {
    :root {
        --yh-gutter: 32px;
    }
}

/* ==========================================================================
   PRIMITIVES
   ========================================================================== */

.yh-container,
.yh-page .yh-container {
    width: 100%;
    max-width: calc(var(--yh-container) + (var(--yh-gutter) * 2));
    margin-inline: auto;
    padding-inline: var(--yh-gutter);
}

/* Vertical rhythm as a class rather than per-section padding decisions. */
.yh-section-y {
    padding-block: var(--yh-section-y);
}

/* A page's tonal bands. Used to give a long page pace without inventing a new
   background colour each time - see the homepage's how-it-works zone. */
.yh-band {
    background: var(--yh-tint);
}

.yh-band--plain {
    background: transparent;
}

/* ---- Type utilities ------------------------------------------------------
   Named for their ROLE, so a template asks for "the section heading" rather
   than picking a pixel value. That is what stopped 18 sizes from existing. */
.yh-display {
    font-size: var(--yh-display);
    line-height: var(--yh-lh-tight);
    font-weight: var(--yh-w-heavy);
    color: var(--yh-navy);
    letter-spacing: -0.01em;
}

.yh-h1 {
    font-size: var(--yh-h1);
    line-height: var(--yh-lh-heading);
    font-weight: var(--yh-w-heavy);
    color: var(--yh-navy);
}

.yh-h2 {
    font-size: var(--yh-h2);
    line-height: var(--yh-lh-heading);
    font-weight: var(--yh-w-heavy);
    color: var(--yh-navy);
}

.yh-h3 {
    font-size: var(--yh-h3);
    line-height: var(--yh-lh-heading);
    font-weight: var(--yh-w-bold);
    color: var(--yh-navy);
}

.yh-body {
    font-size: var(--yh-body);
    line-height: var(--yh-lh-body);
    color: var(--yh-muted);
}

/* Prose gets a measure. Body text running the full width of a 1200px container
   is one of the things that makes a page feel like a database dump. */
.yh-prose {
    max-width: 68ch;
    font-size: var(--yh-body);
    line-height: var(--yh-lh-body);
    color: var(--yh-muted);
}

.yh-meta {
    font-size: var(--yh-small);
    line-height: 1.45;
    color: var(--yh-muted);
}

.yh-label {
    font-size: var(--yh-micro);
    font-weight: var(--yh-w-heavy);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--yh-muted);
}

/* ---- Section header ------------------------------------------------------
   ONE way to head a section. The package page had an eyebrow AND a heading
   saying the same thing nine times; this exists so that cannot recur. */
.yh-sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--yh-4);
    margin-bottom: var(--yh-5);
}

.yh-sec-head__text > h2,
.yh-sec-head__text > .yh-h2 {
    margin: 0;
    font-size: var(--yh-h2);
    line-height: var(--yh-lh-heading);
    font-weight: var(--yh-w-heavy);
    color: var(--yh-navy);
}

.yh-sec-head__text > p {
    margin: var(--yh-1) 0 0;
    max-width: 62ch;
    font-size: var(--yh-small);
    line-height: 1.5;
    color: var(--yh-muted);
}

.yh-sec-head__link {
    flex: 0 0 auto;
    font-size: var(--yh-small);
    font-weight: var(--yh-w-bold);
    color: var(--yh-link);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .yh-sec-head {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--yh-2);
        margin-bottom: var(--yh-4);
    }
}

/* ==========================================================================
   GRID
   One responsive product grid, not a different column rule per module.
   ========================================================================== */
.yh-grid {
    display: grid;
    gap: var(--yh-4);
    grid-template-columns: repeat(var(--yh-cols, 4), minmax(0, 1fr));
}

.yh-grid--3 { --yh-cols: 3; }
.yh-grid--2 { --yh-cols: 2; }

@media (max-width: 1023px) {
    .yh-grid { --yh-cols: 3; }
    .yh-grid--3 { --yh-cols: 2; }
}

@media (max-width: 767px) {
    /* Two up on a phone keeps browsing scannable; one-up turns a catalogue
       into an endless scroll and hides how much choice there is. */
    .yh-grid,
    .yh-grid--3 { --yh-cols: 2; gap: var(--yh-3); }
    .yh-grid--2 { --yh-cols: 1; }
}

/* A horizontally scrolling rail for phones, used where a grid would bury
   content below the fold. Full-bleed so the cut-off card signals "swipe". */
.yh-rail {
    display: flex;
    gap: var(--yh-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--yh-1);
}

.yh-rail::-webkit-scrollbar { display: none; }

.yh-rail > * {
    flex: 0 0 min(72%, 280px);
    scroll-snap-align: start;
}

/* ==========================================================================
   CONTROLS
   ========================================================================== */
.yh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--yh-2);
    min-height: 44px;               /* touch target floor, everywhere */
    padding: 0 var(--yh-4);
    border: 1px solid transparent;
    border-radius: var(--yh-r-control);
    font-family: var(--yh-font);
    font-size: var(--yh-body);
    font-weight: var(--yh-w-bold);
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.yh-btn--primary {
    background: var(--yh-accent);
    color: #fff;
}

.yh-btn--primary:hover { background: #dd6f14; color: #fff; }

.yh-btn--secondary {
    background: var(--yh-navy);
    color: #fff;
}

.yh-btn--secondary:hover { background: #0a2647; color: #fff; }

.yh-btn--ghost {
    background: transparent;
    border-color: var(--yh-line);
    color: var(--yh-navy);
}

.yh-btn--ghost:hover { border-color: var(--yh-navy); color: var(--yh-navy); }

.yh-btn--sm { min-height: 38px; font-size: var(--yh-small); padding: 0 var(--yh-3); }
.yh-btn--block { width: 100%; }

/* Focus is visible and identical on every interactive thing. Previously each
   component inherited whatever the browser or a legacy sheet decided. */
.yh-btn:focus-visible,
.yh-chip:focus-visible,
.yh-field input:focus-visible,
.yh-field select:focus-visible,
.yh-field textarea:focus-visible,
a:focus-visible {
    outline: 2px solid var(--yh-link);
    outline-offset: 2px;
}

/* ---- Chips (filters, tags) ---------------------------------------------- */
.yh-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--yh-1);
    min-height: 38px;
    padding: 0 var(--yh-3);
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-pill);
    background: #fff;
    color: var(--yh-navy);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-medium);
    white-space: nowrap;
    cursor: pointer;
}

.yh-chip[aria-pressed="true"],
.yh-chip.is-active {
    border-color: var(--yh-navy);
    background: var(--yh-navy);
    color: #fff;
}

/* ---- Badge -------------------------------------------------------------- */
.yh-badge,
.yh-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px var(--yh-2);
    border-radius: var(--yh-r-pill);
    background: var(--yh-tint);
    color: var(--yh-navy);
    font-size: var(--yh-micro);
    font-weight: var(--yh-w-heavy);
    line-height: 1.3;
}

.yh-pill--accent { background: rgba(245, 130, 32, 0.12); color: var(--yh-accent-ink); }
.yh-pill--success { background: rgba(23, 145, 95, 0.12); color: var(--yh-success); }

/* ---- Fields ------------------------------------------------------------- */
.yh-field { display: block; margin-bottom: var(--yh-4); }

.yh-field > label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--yh-small);
    font-weight: var(--yh-w-bold);
    color: var(--yh-navy);
}

.yh-field input,
.yh-field select,
.yh-field textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px var(--yh-3);
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-control);
    background: #fff;
    font-family: var(--yh-font);
    font-size: var(--yh-body);
    color: var(--yh-navy);
}

.yh-field input::placeholder,
.yh-field textarea::placeholder { color: #94a3b8; }

.yh-field__hint { margin-top: 5px; font-size: var(--yh-micro); color: var(--yh-muted); }
.yh-field__error { margin-top: 5px; font-size: var(--yh-micro); color: var(--yh-danger); font-weight: var(--yh-w-medium); }

/* ---- Breadcrumb --------------------------------------------------------- */
.yh-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-block: var(--yh-3);
    font-size: var(--yh-small);
    color: var(--yh-muted);
}

.yh-crumbs a { color: var(--yh-muted); }
.yh-crumbs a:hover { color: var(--yh-link); }
.yh-crumbs [aria-current] { color: var(--yh-navy); font-weight: var(--yh-w-bold); }

/* ---- Empty and loading states ------------------------------------------
   Every module previously invented its own, or had none - a search with no
   results simply showed nothing, which reads as broken rather than empty. */
.yh-empty {
    display: grid;
    place-items: center;
    gap: var(--yh-3);
    padding: var(--yh-7) var(--yh-4);
    border: 1px dashed var(--yh-line);
    border-radius: var(--yh-r-surface);
    background: #fff;
    text-align: center;
}

.yh-empty__icon { font-size: 28px; color: var(--yh-line); }
.yh-empty h3 { margin: 0; font-size: var(--yh-h3); font-weight: var(--yh-w-heavy); color: var(--yh-navy); }
.yh-empty p { margin: 0; max-width: 46ch; font-size: var(--yh-small); color: var(--yh-muted); }

.yh-skeleton {
    border-radius: var(--yh-r-card);
    background: linear-gradient(90deg, #eef2f7 25%, #f6f9fc 37%, #eef2f7 63%);
    background-size: 400% 100%;
    animation: yh-shimmer 1.3s ease-in-out infinite;
}

@keyframes yh-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .yh-skeleton { animation: none; }
    .yh-btn { transition: none; }
}

/* ---- Price -------------------------------------------------------------- */
.yh-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.yh-price__from { font-size: var(--yh-micro); color: var(--yh-muted); font-weight: var(--yh-w-medium); }
.yh-price__amount { font-size: var(--yh-h3); font-weight: var(--yh-w-heavy); color: var(--yh-navy); }
.yh-price__unit { font-size: var(--yh-micro); color: var(--yh-muted); }
.yh-price__was { font-size: var(--yh-small); color: var(--yh-muted); text-decoration: line-through; }

/* ==========================================================================
   ACCESSIBILITY BASELINE
   ========================================================================== */
.yh-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.yh-skip {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: var(--yh-2) var(--yh-4);
    background: var(--yh-navy);
    color: #fff;
    border-radius: 0 0 var(--yh-r-control) 0;
}

.yh-skip:focus { left: 0; top: 0; color: #fff; }

/* ==========================================================================
   LEGACY BRIDGE
   --------------------------------------------------------------------------
   The .yw-* components across ~24k lines of legacy CSS read these variables.
   Re-pointing them here means those components adopt the system's colours
   without being rewritten one by one - and, critically, it collapses the three
   navies into one everywhere at once, which is the single change that makes
   inner pages stop looking like a different website.
   ========================================================================== */
:root {
    --yw-navy: var(--yh-navy);
    --yw-primary: var(--yh-link);
    --yw-accent: var(--yh-accent);
    --yw-muted: var(--yh-muted);
    --yw-ink: var(--yh-navy);
    --yw-soft: var(--yh-tint);
    --yw-line: var(--yh-line);
    --yw-border: var(--yh-line);
    --yw-mist: var(--yh-tint);
    /* Forest is the legacy name for the brand blue (yatriwala.css: forest = primary), not
       a green. Pointing it at --yh-success turned 140 rules green: every inner-page link,
       card titles, the text on orange buttons, tabs and prices. */
    --yw-forest: var(--yh-link);
    /* Same story for the old green-teal family: yatriwala-production.css redefines
       --yw-teal (#0e8275) and --yw-teal-dark, yatriwala.css has --yw-green (#006b61). They
       still painted active chips, service labels, step icons and the phone tab bar. */
    --yw-teal: var(--yh-link);
    --yw-teal-dark: var(--yh-navy);
    --yw-green: var(--yh-link);
    --yw-coral: var(--yh-accent);

    /*
     * A SECOND legacy family, --yw-v1-*, delegates to these. Most of it was
     * already covered because it points at --yw-primary / --yw-accent, but
     * --yw-v1-blue-dark -> --yw-primary-dark was not, and that is why #05245f
     * was still being painted on /login and the package page after the rest of
     * the palette had been unified. Measured, not assumed: the computed colour
     * on "Compare trips" was rgb(5, 36, 95).
     */
    --yw-primary-dark: var(--yh-navy);

    /*
     * --yh-ink is defined as #0F2B46 in yatriwala-home.css and was still painting
     * 65 times as body text ON THE HOMEPAGE - the reference page - while the rest
     * of the site used #0B2D54. Four points apart: not two colours, just one
     * colour that failed to agree with itself. Pointed at the same navy.
     */
    --yh-ink: var(--yh-navy);
}

/* ==========================================================================
   DESTINATION PAGE
   Photography leads, product follows, everything else is secondary.
   ========================================================================== */
.yh-dest-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 420px;
    background-size: cover;
    background-position: center;
    color: #fff;
}

/* Without a photograph the hero would be a dark empty band; the navy ground
   keeps the type legible and the page looking intentional rather than broken. */
.yh-dest-hero--flat {
    min-height: 0;
    background: var(--yh-navy);
}

.yh-dest-hero__inner {
    padding-block: var(--yh-7) var(--yh-6);
}

.yh-dest-hero__title {
    margin: var(--yh-2) 0 0;
    font-size: var(--yh-display);
    line-height: var(--yh-lh-tight);
    font-weight: var(--yh-w-heavy);
    color: #fff;
    letter-spacing: -0.01em;
}

.yh-crumbs--ondark,
.yh-crumbs--ondark a { color: rgba(255, 255, 255, .82); }
.yh-crumbs--ondark a:hover { color: #fff; }
.yh-crumbs--ondark [aria-current] { color: #fff; }

/* Facts, not decoration: each one is computed from published rows. */
.yh-dest-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--yh-5);
    margin: var(--yh-4) 0 0;
    padding: 0;
    list-style: none;
}

.yh-dest-hero__facts li { display: flex; flex-direction: column; gap: 2px; }
.yh-dest-hero__facts strong { font-size: var(--yh-h3); font-weight: var(--yh-w-heavy); color: #fff; }
.yh-dest-hero__facts span { font-size: var(--yh-micro); color: rgba(255, 255, 255, .78); }

.yh-dest-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--yh-3);
    margin-top: var(--yh-5);
}

.yh-btn--ondark {
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}

.yh-btn--ondark:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; }

.yh-dest-intro p { margin: 0 0 var(--yh-3); }

/* ---- Secondary service tabs -------------------------------------------- */
.yh-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--yh-2);
    margin: 0 0 var(--yh-5);
    padding: 0;
    list-style: none;
    border: 0;
}

.yh-tabs__content { padding-top: var(--yh-2); }
.yh-tabs__more { margin: var(--yh-5) 0 0; text-align: center; }

/* ---- Closing CTA -------------------------------------------------------- */
.yh-dest-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--yh-5);
}

.yh-dest-cta h2 { margin: 0 0 var(--yh-2); }
.yh-dest-cta p { margin: 0; }
.yh-dest-cta .yh-btn { flex: 0 0 auto; }

@media (max-width: 767px) {
    .yh-dest-hero { min-height: 320px; }
    .yh-dest-hero__inner { padding-block: var(--yh-6) var(--yh-5); }
    .yh-dest-hero__facts { gap: var(--yh-4); }
    .yh-dest-hero__actions .yh-btn { flex: 1 1 auto; }
    .yh-dest-cta { flex-direction: column; align-items: flex-start; }
    .yh-dest-cta .yh-btn { width: 100%; }
}

/* .bc_detail_location carries text-align:center from the legacy sheet, which the
   hero inherited - a destination name centred over a left-aligned breadcrumb.
   Scoped reset rather than touching the legacy rule other pages still rely on. */
.yh-dest,
.yh-dest .yh-container,
.yh-dest-hero,
.yh-dest-hero .yh-container {
    text-align: left;
}

/* ==========================================================================
   LISTING PAGES: PROMO RAIL IS SUBORDINATE TO RESULTS
   --------------------------------------------------------------------------
   The offers rail is contextual (it filters to the service being browsed) and
   is a legitimate marketing surface, so it stays. But at 380px it pushed the
   first search result to y=518 - on a 850px screen that leaves ~330px of
   results visible. Someone who has just searched is looking for results, not
   for deals they did not ask about.

   Compact on results pages, full size on the homepage where browsing offers IS
   the task. Same content, subordinate weight.
   ========================================================================== */
.bc_search_tour ~ * .yw-global-offers,
body:has(.bc_search_tour) .yw-global-offers,
body:has(.bc-list-item) .yw-global-offers {
    padding-block: var(--yh-4);
}

body:has(.bc_search_tour) .yw-global-offers__rail > *,
body:has(.bc-list-item) .yw-global-offers__rail > * {
    max-height: 168px;
}

body:has(.bc_search_tour) .yw-global-offers__rail img,
body:has(.bc-list-item) .yw-global-offers__rail img {
    max-height: 168px;
    object-fit: cover;
}

/* ==========================================================================
   FILTER LIST
   --------------------------------------------------------------------------
   For filters with many options of uneven name length. Chips are right for
   Budget (four short, similar-width options); they are wrong for thirteen
   destinations, where they wrap one-two-three per line and put every count at
   a different x-position.

   A row per option, name left, count right, identical heights: the eye runs
   down one column of names and one column of numbers.
   ========================================================================== */
.yh-filter-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.yh-filter-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--yh-3);
    min-height: 40px;                 /* touch target, and a steady rhythm */
    padding: var(--yh-2) var(--yh-3);
    border-radius: var(--yh-r-control);
    color: var(--yh-navy);
    font-size: var(--yh-body);
    font-weight: var(--yh-w-medium);
    line-height: 1.3;
    text-decoration: none;
}

.yh-filter-list__item:hover {
    background: var(--yh-tint);
    color: var(--yh-navy);
}

/* Active is a state, not a promotion: the orange pill was heavier than every
   other option and read as the primary action on the page. */
.yh-filter-list__item.is-active {
    background: var(--yh-navy);
    color: #fff;
    font-weight: var(--yh-w-bold);
}

.yh-filter-list__count {
    flex: 0 0 auto;
    min-width: 26px;
    padding: 1px 6px;
    border-radius: var(--yh-r-pill);
    background: rgba(11, 45, 84, .08);
    color: var(--yh-muted);
    font-size: var(--yh-micro);
    font-weight: var(--yh-w-bold);
    text-align: center;
    font-variant-numeric: tabular-nums;   /* counts line up as a column */
}

.yh-filter-list__item.is-active .yh-filter-list__count {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

/* ---- "Show N more" ------------------------------------------------------ */
.yh-filter-more > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: var(--yh-2) var(--yh-3);
    color: var(--yh-link);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-bold);
    cursor: pointer;
    list-style: none;
}

.yh-filter-more > summary::-webkit-details-marker { display: none; }

.yh-filter-more > summary::after {
    content: '\25BE';
    font-size: 10px;
}

.yh-filter-more[open] > summary::after { content: '\25B4'; }
.yh-filter-more[open] > summary { color: var(--yh-navy); }

/* ---- Clear all filters ---------------------------------------------------
   Sits at the end of the active-filter row. Styled as a link rather than a
   button: it is an escape hatch, not a primary action, and a second solid
   button beside the applied-filter chips would compete with "View package". */
.yw-active-filter-clear {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin-left: var(--yh-2);
    padding: 0 var(--yh-2);
    color: var(--yh-link);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-bold);
    text-decoration: underline;
    white-space: nowrap;
}

.yw-active-filter-clear:hover { color: var(--yh-navy); }

/* ---- Auth: status + alternate action -----------------------------------
   The forgot-password page was the raw Bootstrap scaffold; these are the two
   pieces it needed that login/register did not already define. */
.yw-auth-status {
    margin-bottom: var(--yh-4);
    padding: var(--yh-3) var(--yh-4);
    border-radius: var(--yh-r-control);
    background: rgba(23, 145, 95, .1);
    color: var(--yh-success);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-medium);
    line-height: 1.5;
}

.yw-auth-form { margin-top: var(--yh-5); }

.yw-auth-alt {
    margin: var(--yh-4) 0 0;
    text-align: center;
    font-size: var(--yh-small);
    color: var(--yh-muted);
}

.yw-auth-alt a { color: var(--yh-link); font-weight: var(--yh-w-bold); }

/* ==========================================================================
   ACCOUNT AREA
   --------------------------------------------------------------------------
   The last page family with zero design-system adoption. Of ~15 account views
   only five were ever customised for Yatriwala; the rest render the stock
   Booking Core Base theme, which is why this section reads as a generic
   dashboard bolted onto a travel site.

   Styled through the classes those templates ALREADY emit rather than by
   rewriting them - the same legacy-bridge approach that let 24k lines of .yw-*
   adopt the system. That matters more than usual here: these pages sit behind
   auth, so they cannot be rendered for verification, and restructuring markup
   that cannot be seen is how you ship a broken page confidently.

   The measurable inconsistency this fixes: the account area is the only part of
   the site inside .container-fluid, so it ran edge-to-edge at 1440 while every
   other page held a 1200px measure.
   ========================================================================== */
.bc_user_profile > .container-fluid {
    width: 100%;
    max-width: calc(var(--yh-container) + (var(--yh-gutter) * 2));
    margin-inline: auto;
    padding-inline: var(--yh-gutter);
}

/* Page title. These are the <h1 class="title-bar"> promoted from <h2>. */
.bc_user_profile .title-bar {
    margin: 0 0 var(--yh-5);
    font-size: var(--yh-h1);
    line-height: var(--yh-lh-heading);
    font-weight: var(--yh-w-heavy);
    color: var(--yh-navy);
}

/* Surfaces: one card treatment, matching the rest of the site. */
.bc_user_profile .dashboard-item,
.bc_user_profile .booking-history-manager,
.bc_user_profile .user-profile-plan,
.bc_user_profile .card {
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-card);
    background: var(--yh-surface);
    box-shadow: var(--yh-shadow-1);
}

.bc_user_profile .card-header {
    border-bottom: 1px solid var(--yh-line);
    background: transparent;
    font-size: var(--yh-h3);
    font-weight: var(--yh-w-bold);
    color: var(--yh-navy);
}

/* Controls: the account area was the only place still showing Bootstrap's
   default button colours rather than the brand's. */
.bc_user_profile .btn-primary {
    border-color: transparent;
    background: var(--yh-accent);
    color: #fff;
    border-radius: var(--yh-r-control);
    font-weight: var(--yh-w-bold);
    min-height: 44px;
}

.bc_user_profile .btn-primary:hover { background: #dd6f14; }

.bc_user_profile .form-control {
    min-height: 46px;
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-control);
    font-family: var(--yh-font);
    font-size: var(--yh-body);
    color: var(--yh-navy);
}

.bc_user_profile .form-control:focus {
    border-color: var(--yh-link);
    box-shadow: none;
    outline: 2px solid var(--yh-link);
    outline-offset: 1px;
}

.bc_user_profile label { font-size: var(--yh-small); font-weight: var(--yh-w-bold); color: var(--yh-navy); }
.bc_user_profile .text-muted { color: var(--yh-muted) !important; font-size: var(--yh-small); }

@media (max-width: 767px) {
    .bc_user_profile .title-bar { margin-bottom: var(--yh-4); }
}

/* ---- Destination: what a trip covers -----------------------------------
   Two columns of derived facts. Not a card grid - these are lists, and giving
   them card chrome would add two more boxes to a page that already alternates
   surfaces deliberately. */
.yh-dest-covers {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--yh-6);
}

.yh-dest-covers h3 { margin: 0 0 var(--yh-3); }

.yh-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--yh-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.yh-check-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--yh-2) var(--yh-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.yh-check-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--yh-2);
    font-size: var(--yh-small);
    line-height: 1.45;
    color: var(--yh-navy);
}

.yh-check-list i {
    margin-top: 3px;
    color: var(--yh-success);
    font-size: 11px;
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .yh-dest-covers { grid-template-columns: minmax(0, 1fr); gap: var(--yh-5); }
    .yh-check-list { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   HOLIDAY LOOK (2026-09-13)
   --------------------------------------------------------------------------
   The owner, after the app redesign: the website "needs to be made more
   better like we have made app better". The app's approved redesign
   (specs/app-redesign.md) is the reference. It is carried over here, at the
   level of the system, which reaches every page at once:

     - Plus Jakarta Sans replaces Poppins, with Instrument Serif italic for an
       accent word (.yh-serif). Both are OFL, subset to Latin plus the rupee
       sign and self-hosted beside this sheet, so no page fetches a font from a
       third party and every page that loads this sheet gets them.
     - A warm white canvas behind white cards and panels, where the site was
       white on white.
     - Rounder cards and controls (14px / 10px): a holiday product rather than
       a dashboard. Borders still do the separating.

   Brand navy and orange are unchanged. Four legacy rules name a font directly
   (app.css body, yatriwala.css body.frontend-page, yatriwala-production.css
   body.yw-figma, yatriwala-home.css .yh-page); the selector below matches each
   at equal specificity, and this sheet loads last.
   ========================================================================== */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/yatriwala/plus-jakarta-sans-400.woff') format('woff');
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/yatriwala/plus-jakarta-sans-500.woff') format('woff');
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/yatriwala/plus-jakarta-sans-600.woff') format('woff');
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/yatriwala/plus-jakarta-sans-700.woff') format('woff');
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/yatriwala/plus-jakarta-sans-800.woff') format('woff');
}

@font-face {
    font-family: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/yatriwala/instrument-serif-italic.woff') format('woff');
}

:root {
    --yh-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --yh-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --yh-canvas: #fffcf8;
    --yh-sand: #f7f1e9;
    --yh-accent-soft: #fff0e1;
    --yh-line-warm: #ece6dc;

    --yh-r-control: 10px;
    --yh-r-card: 14px;
    --yh-r-surface: 22px;

    /* yatriwala-home.css's own names for the same three jobs. */
    --yh-radius: 14px;
    --yh-radius-sm: 10px;
    --yh-radius-btn: 10px;
}

body,
body.frontend-page,
body.yw-figma,
.yh-page {
    font-family: var(--yh-font);
}

/* Form controls do not inherit the page font on their own. Icon fonts are set
   by class (.fa, .icofont...), which outranks these element selectors. */
button,
input,
select,
textarea,
optgroup {
    font-family: inherit;
}

.yh-page,
body.frontend-page {
    background: var(--yh-canvas);
}

/* Jakarta at 800 wants tighter tracking than Poppins did. */
.yh-page h1,
.yh-page h2,
.yh-display,
.yh-h1,
.yh-h2 {
    letter-spacing: -0.025em;
}

/* One or two words on a page, never a whole line. */
.yh-serif {
    font-family: var(--yh-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.14em;
    line-height: 1;
    letter-spacing: 0;
    color: var(--yh-accent);
}

/* The band behind homepage search: warm, where it was pale blue. */
.yh-hero {
    background: linear-gradient(180deg, var(--yh-accent-soft) 0%, var(--yh-canvas) 100%);
}

.yh-card {
    border-color: var(--yh-line-warm);
}

/* More photograph: the picture is what sells a holiday. */
.yh-card__media {
    aspect-ratio: 3 / 2;
}

@media (hover: hover) {
    .yh-card:hover {
        border-color: #e2d6c4;
        box-shadow: 0 14px 30px -12px rgba(11, 45, 84, .22);
    }
}

/* ---- What are you planning? (homepage trip types) ------------------------
   Tinted tiles rather than photographs: they are ways in, and should read as
   choices at a glance, not compete with the package photography below. */
.yh-trip-types {
    padding-top: var(--yh-6);
}

.yh-trip-types__grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--yh-3);
}

.yh-trip-type {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 124px;
    padding: var(--yh-4);
    border-radius: var(--yh-r-card);
    background: var(--yh-accent-soft);
    color: var(--yh-navy);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

.yh-trip-type--sky {
    background: var(--yh-tint);
}

.yh-trip-type i {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: auto;
    border-radius: 12px;
    background: #fff;
    color: var(--yh-accent);
    font-size: 18px;
}

.yh-trip-type strong {
    margin-top: var(--yh-3);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}

.yh-trip-type small {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--yh-muted);
}

.yh-trip-type:hover,
.yh-trip-type:focus-visible {
    color: var(--yh-navy);
    text-decoration: none;
}

@media (hover: hover) {
    .yh-trip-type:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px -14px rgba(11, 45, 84, .35);
    }
}

@media (max-width: 1100px) {
    .yh-trip-types__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* A swipeable row on phones, bleeding to the screen edge so the cut-off tile
   says "more this way". */
@media (max-width: 640px) {
    .yh-trip-types {
        padding-top: var(--yh-5);
    }

    .yh-trip-types__grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin-inline: calc(var(--yh-gutter) * -1);
        padding-inline: var(--yh-gutter);
    }

    .yh-trip-types__grid::-webkit-scrollbar {
        display: none;
    }

    .yh-trip-type {
        flex: 0 0 132px;
        min-height: 112px;
        scroll-snap-align: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yh-trip-type {
        transition: none;
    }
}

/* ---- Package page (18 Sep 2026) -------------------------------------------
   The payment-plan block restates the booking card's three figures. From 768px
   the card sits beside the page, so there the block only repeats it; phones keep
   it, because on a phone the card is a sheet behind the Book button. */
@media (min-width: 768px) {
    .yw-package-detail-commerce .yw-app-payment-plan {
        display: none;
    }
}

.yw-app-snapshot span {
    overflow-wrap: anywhere;
}

.yw-app-related-card__foot strong small {
    font-size: 11px;
    font-weight: 600;
    color: var(--yh-muted);
}

/* ---- Inner pages, lighter (18 Sep 2026) ----------------------------------
   Homepage components on inner pages lose to the legacy `body.frontend-page a`
   link colour (specificity 0,1,2), so card titles and the text on orange buttons
   took the link colour there and nowhere else. */
body.frontend-page .yh-card__title a {
    color: var(--yh-ink);
}

body.frontend-page .yh-card__title a:hover {
    color: var(--yh-blue);
}

body.frontend-page a.yh-btn--primary,
body.frontend-page a.yh-btn--primary:hover,
body.frontend-page a.yh-btn--primary:focus {
    color: #fff;
}

/* The listing pages sat on blue radial gradients; the homepage is warm and plain. */
body.frontend-page .yw-service-search-page,
body.frontend-page .bc_search_tour.yw-package-search-page {
    background: var(--yh-canvas);
}

/* ---- Sitewide QA fixes (19 Sep 2026, specs/tasks/01 S1 attempt 1) ---------- */

/* "Plan custom trip" sits on a blue-to-orange gradient; the legacy
   `body.frontend-page a` colour (yatriwala.css:2629) beat its own white. */
body.frontend-page .yw-package-workflow-row--holiday > a,
body.frontend-page .yw-package-workflow-row--umrah > a {
    color: #fff;
}

/* Hotel, visa and flight search pages opened on a dark green band (yatriwala.css ~4722).
   Light, like the homepage's search band, until those pages are rebuilt (families HT, V). */
body.frontend-page .bc_search_hotel .bc_banner,
body.frontend-page .bc_search_flight .bc_banner,
body.frontend-page .bc_search_visa .bc_banner {
    min-height: 0;
    padding-top: var(--yh-6);
    padding-bottom: calc(var(--yh-6) + 48px);
    border-radius: 0;
    background: linear-gradient(180deg, var(--yh-accent-soft) 0%, var(--yh-canvas) 100%);
}

/* yatriwala.css sets these headings `color: #fff !important`, so only !important undoes it. */
body.frontend-page .bc_search_hotel .bc_banner h1,
body.frontend-page .bc_search_flight .bc_banner h1,
body.frontend-page .bc_search_visa .bc_banner h1 {
    color: var(--yh-navy) !important;
    font-size: var(--yh-h1);
    font-weight: var(--yh-w-heavy);
}

body.frontend-page .bc_search_hotel .bc_banner p,
body.frontend-page .bc_search_flight .bc_banner p,
body.frontend-page .bc_search_visa .bc_banner p {
    color: var(--yh-navy-soft);
}

/* ==========================================================================
   LISTING (/tour)  specs/tasks/02, family L, 19 Sep 2026
   --------------------------------------------------------------------------
   The holiday listing rebuilt on the homepage's components: a heading that
   says what is listed, one row of trip-type chips, a white filter sidebar
   (a bottom sheet below 1024px) beside a fixed-track card grid, a pager and
   one plan line. Written once for hotel and visa to reuse.

     yh-listing  __top __head __title __count __body __results __bar
                 __filters __sort __grid __more __plan __empty
     yh-chiprow, yh-chip__count, yh-chip--remove, yh-select
     yh-filters  __head __close __scroll __sections __section __label
                 __chips __clear __foot
     yh-scrim, yh-pager (__btn __gap __status)
     yh-card--link (the package card on inner pages, <x-tour-card>)

   Templates: themes/BC/Holidays/Views/frontend/search.blade.php and its
   partials, resources/views/components/tour-card.blade.php,
   resources/views/livewire/yh-pager.blade.php.
   Legacy `body.frontend-page a` (yatriwala.css ~2630, 0,1,2) paints every link
   brand blue, so the link-based controls below restate their colours under
   `body.frontend-page`.
   ========================================================================== */

/* ---- Page, head and chip row ---------------------------------------------- */
.yh-listing {
    padding-bottom: var(--yh-4);        /* + the footer's own top margin: <= 96px */
    background: var(--yh-canvas);
}

/* The homepage's fade (.yh-hero): warm at the top, canvas by the chips. */
.yh-listing__top {
    background: linear-gradient(180deg, var(--yh-accent-soft) 0%, var(--yh-canvas) 100%);
}

.yh-listing__top > .yh-container {
    padding-top: var(--yh-5);
    padding-bottom: var(--yh-5);
}

.yh-listing__head {
    margin: 0 0 var(--yh-4);
}

.yh-listing .yh-listing__title {
    margin: 0;
    font-size: var(--yh-h1);
    line-height: var(--yh-lh-heading);
    font-weight: var(--yh-w-heavy);
    color: var(--yh-navy);
    letter-spacing: -0.025em;
}

.yh-listing__count {
    margin: var(--yh-1) 0 0;
    font-size: var(--yh-small);
    font-weight: var(--yh-w-medium);
    line-height: 1.4;
    color: var(--yh-muted);
}

/* One line at every width: it scrolls sideways, it never wraps. */
.yh-chiprow {
    display: flex;
    gap: var(--yh-2);
    overflow-x: auto;
    scroll-padding-inline: var(--yh-gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.yh-chiprow::-webkit-scrollbar {
    display: none;
}

.yh-chiprow .yh-chip {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 14px;
    gap: 6px;
    font-size: 13px;
}

body.frontend-page a.yh-chip,
body.frontend-page a.yh-chip:hover {
    color: var(--yh-navy);
    text-decoration: none;
}

body.frontend-page a.yh-chip:hover {
    border-color: var(--yh-navy);
}

body.frontend-page a.yh-chip.is-active,
body.frontend-page a.yh-chip.is-active:hover {
    color: #fff;
}

.yh-chip__count {
    color: var(--yh-muted);
    font-size: var(--yh-micro);
    font-weight: var(--yh-w-medium);
    font-variant-numeric: tabular-nums;
}

.yh-chip.is-active .yh-chip__count {
    color: rgba(255, 255, 255, .72);
}

/* An applied filter: the chip is the remove button. */
.yh-chip--remove {
    gap: 6px;
    min-height: 40px;
}

.yh-chip--remove i {
    font-size: 11px;
    color: var(--yh-muted);
}

.yh-chip--remove:hover i {
    color: var(--yh-navy);
}

/* ---- Body: sidebar beside results (from 1024px) --------------------------- */
@media (min-width: 1024px) {
    .yh-listing__body {
        display: grid;
        grid-template-columns: 248px minmax(0, 1fr);
        gap: var(--yh-6);
        align-items: start;
    }
}

@media (min-width: 1200px) {
    .yh-listing__body {
        grid-template-columns: 272px minmax(0, 1fr);
    }
}

/* ---- Filters: one white surface ------------------------------------------- */
.yh-filters {
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-card);
    background: #fff;
}

.yh-filters__head,
.yh-filters__foot {
    display: none;
}

.yh-filters__section {
    padding: var(--yh-4) 0;
    border-top: 1px solid var(--yh-line-warm);
}

.yh-filters__scroll > .yh-filters__section:first-child,
.yh-filters__scroll > .yh-filters__sections:first-child > .yh-filters__section:first-child {
    padding-top: 0;
    border-top: 0;
}

.yh-filters__sections > .yh-filters__section:last-child {
    padding-bottom: 0;
}

.yh-filters .yh-filters__label {
    margin: 0 0 var(--yh-3);
}

.yh-filters__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--yh-2);
}

.yh-filters__chips .yh-chip {
    min-height: 40px;
}

/* Row text lines up with the section label; the hover tint keeps its inset. */
.yh-filters .yh-filter-list,
.yh-filters .yh-filter-more {
    margin-inline: calc(var(--yh-3) * -1);
}

.yh-filters .yh-filter-more .yh-filter-list {
    margin-inline: 0;
}

body.frontend-page .yh-filters a.yh-filter-list__item {
    color: var(--yh-navy);
    text-decoration: none;
}

body.frontend-page .yh-filters a.yh-filter-list__item.is-active {
    color: #fff;
}

.yh-filters__clear {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin-top: var(--yh-1);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-bold);
    text-decoration: underline;
}

body.frontend-page a.yh-filters__clear {
    color: var(--yh-link);
}

@media (min-width: 1024px) {
    /* Static, not sticky: it is taller than the screen. */
    .yh-filters {
        padding: 20px;
    }

    .yh-scrim {
        display: none;
    }
}

/* ---- Filters below 1024px: the same <aside> as a bottom sheet ------------- */
@media (max-width: 1023px) {
    .yh-filters {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 131;               /* above the header (120) and the tab bar (95) */
        display: flex;
        flex-direction: column;
        max-height: 85vh;
        max-height: 85dvh;
        border: 0;
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -12px 32px rgba(11, 45, 84, .18);
        transform: translateY(100%);
        visibility: hidden;
        transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s;
    }

    body.yw-filters-open .yh-filters {
        transform: none;
        visibility: visible;
        transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s;
    }

    body.yw-filters-open {
        overflow: hidden;
    }

    .yh-filters__head {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: space-between;
        padding: var(--yh-3) var(--yh-3) var(--yh-3) 20px;
        border-bottom: 1px solid var(--yh-line-warm);
    }

    .yh-filters__head strong {
        font-size: var(--yh-h3);
        font-weight: var(--yh-w-heavy);
        color: var(--yh-navy);
    }

    .yh-filters__close {
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid var(--yh-line-warm);
        border-radius: var(--yh-r-pill);
        background: #fff;
        color: var(--yh-navy);
        font-size: 16px;
        cursor: pointer;
    }

    .yh-filters__scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: var(--yh-4) 20px;
    }

    /* The foot's Reset does what "Clear all" does; one of them is enough. */
    .yh-filters__clear {
        display: none;
    }

    .yh-filters__foot {
        display: grid;
        flex: 0 0 auto;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: var(--yh-3);
        padding: var(--yh-3) 20px calc(var(--yh-3) + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--yh-line-warm);
        background: #fff;
    }

    .yh-filters__foot .yh-btn {
        width: 100%;
        min-height: 44px;
    }

    .yh-filters__foot .is-disabled {
        opacity: .45;
        cursor: default;
    }

    body.frontend-page .yh-filters__foot a.yh-btn--ghost {
        color: var(--yh-navy);
    }

    .yh-scrim {
        position: fixed;
        inset: 0;
        z-index: 130;
        background: rgba(11, 45, 84, .42);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility 0s linear .2s;
    }

    body.yw-filters-open .yh-scrim {
        opacity: 1;
        visibility: visible;
        transition: opacity .2s ease, visibility 0s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yh-filters,
    body.yw-filters-open .yh-filters,
    .yh-scrim,
    body.yw-filters-open .yh-scrim,
    .yh-listing__grid {
        transition: none;
    }
}

/* ---- Results bar: [Filters · N] [Sort], then the sort alone from 1024px ---- */
.yh-listing__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--yh-3);
    margin: 0 0 var(--yh-3);
}

.yh-listing__filters {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--yh-2);
    min-height: 44px;
    padding: 0 var(--yh-3);
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-control);
    background: #fff;
    color: var(--yh-navy);
    font-size: var(--yh-body);
    font-weight: var(--yh-w-bold);
    line-height: 1;
    cursor: pointer;
}

.yh-listing__filters-n {
    margin-left: -2px;
    color: var(--yh-accent-ink);
    font-weight: var(--yh-w-heavy);
}

.yh-listing__sort {
    display: flex;
    align-items: center;
    gap: var(--yh-2);
    min-width: 0;
    margin: 0;
}

.yh-listing__sort-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ---- yh-select: a native select in the system's control style ------------ */
.yh-select {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

.yh-select select {
    display: block;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0 38px 0 var(--yh-3);
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-control);
    background: #fff;
    color: var(--yh-navy);
    font-family: var(--yh-font);
    font-size: var(--yh-body);
    font-weight: var(--yh-w-bold);
    line-height: 1.2;
    text-overflow: ellipsis;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.yh-select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--yh-navy);
    border-bottom: 2px solid var(--yh-navy);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.yh-select select:hover {
    border-color: var(--yh-navy);
}

.yh-select select:focus-visible {
    outline: 2px solid var(--yh-link);
    outline-offset: 2px;
}

@media (min-width: 1024px) {
    .yh-listing__bar {
        display: flex;
        justify-content: flex-end;
        margin-bottom: var(--yh-4);
    }

    .yh-listing__bar--filters-only,
    .yh-listing__filters {
        display: none;
    }

    .yh-listing__sort-label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        font-size: var(--yh-small);
        font-weight: var(--yh-w-medium);
        color: var(--yh-muted);
    }

    .yh-listing__sort .yh-select {
        flex: 0 0 auto;
        width: 216px;
    }
}

/* ---- Grid: fixed tracks, so one result keeps its card size ---------------- */
.yh-listing__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--yh-3);
    transition: opacity .15s ease;
}

@media (min-width: 768px) {
    .yh-listing__grid {
        gap: 18px;
    }
}

@media (min-width: 1200px) {
    .yh-listing__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* While a filter, sort or page loads: the grid dims, nothing else moves. */
.yh-listing__grid.is-loading {
    opacity: .5;
    pointer-events: none;
}

/* ---- Pager and plan line --------------------------------------------------- */
.yh-listing__more {
    display: grid;
    justify-items: center;
    gap: var(--yh-3);
    margin-top: var(--yh-6);
}

.yh-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.yh-pager__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 var(--yh-3);
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-control);
    background: #fff;
    color: var(--yh-navy);
    font-size: var(--yh-body);
    font-weight: var(--yh-w-bold);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

body.frontend-page a.yh-pager__btn,
body.frontend-page a.yh-pager__btn:hover {
    color: var(--yh-navy);
}

a.yh-pager__btn:hover {
    border-color: var(--yh-navy);
}

.yh-pager__btn.is-current {
    border-color: var(--yh-navy);
    background: var(--yh-navy);
    color: #fff;
}

.yh-pager__btn.is-disabled {
    opacity: .4;
}

.yh-pager__gap {
    align-self: center;
    padding: 0 var(--yh-1);
    color: var(--yh-muted);
}

.yh-pager__status {
    margin: 0;
    font-size: var(--yh-small);
    color: var(--yh-muted);
}

.yh-listing__plan {
    margin: var(--yh-6) 0 0;
    font-size: var(--yh-body);
    color: var(--yh-muted);
    text-align: center;
}

body.frontend-page .yh-listing__plan a.yh-link-arrow {
    margin-left: var(--yh-1);
    color: var(--yh-link);
}

/* ---- Empty state ----------------------------------------------------------- */
.yh-listing__empty {
    padding: var(--yh-7) var(--yh-5);
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-card);
}

.yh-listing__empty .yh-empty__icon {
    color: var(--yh-accent);
}

.yh-listing__empty h2 {
    margin: 0;
    font-size: var(--yh-h3);
    line-height: var(--yh-lh-heading);
    font-weight: var(--yh-w-heavy);
    color: var(--yh-navy);
}

.yh-listing__empty p {
    font-size: var(--yh-body);
    line-height: 1.55;
}

body.frontend-page .yh-listing__empty p a {
    color: var(--yh-link);
    font-weight: var(--yh-w-bold);
    text-decoration: underline;
}

.yh-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--yh-3);
    margin-top: var(--yh-2);
}

body.frontend-page .yh-empty__actions a.yh-btn--ghost {
    color: var(--yh-navy);
}

/* ---- Package card on inner pages (<x-tour-card>, T6/T7) --------------------
   The homepage's card, with the rules the listing needs: one tap target, a
   foot pinned to the bottom, the price always stacked, and every line in the
   same place across a row. The homepage's own cards do not carry
   .yh-card--link and are untouched. */
.yh-card--link {
    position: relative;
}

/* The title link covers the card: photo, title and button open the package. */
.yh-card--link .yh-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.yh-card--link .yh-card__foot .yh-btn {
    position: relative;
    z-index: 2;
}

/* Photos untinted: the homepage's bottom scrim stays off the listing. */
.yh-card--link .yh-card__media::after {
    content: none;
}

.yh-card__noimg {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: var(--yh-tint);
    color: var(--yh-link);
    font-size: 30px;
}

.yh-card--link .yh-card__meta {
    display: block;
    min-height: 1.45em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.yh-card__departure {
    display: block;
    color: var(--yh-accent-ink);
    font-size: 12px;
    font-weight: var(--yh-w-bold);
    line-height: 1.45;
}

/* "FROM" / amount + struck original / "for 2 travellers", always three lines:
   the system's .yh-price wraps them inline, so they broke differently per card. */
body.frontend-page .yh-card--link .yh-price {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

body.frontend-page .yh-card--link .yh-price small,
body.frontend-page .yh-card--link .yh-price em {
    display: block;
    margin: 0;
    white-space: nowrap;
}

body.frontend-page .yh-card--link .yh-price__row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

body.frontend-page .yh-card--link .yh-price strong {
    margin: 0;
}

/* A struck original must not make its row taller than a plain one. */
body.frontend-page .yh-card--link .yh-price del {
    line-height: 1;
}

/* The token line, or an empty slot of its height so rows still line up. */
.yh-card--link .yh-card__token {
    min-height: 30px;
}

.yh-card__token--none {
    visibility: hidden;
}

@media (min-width: 641px) {
    /* Button on the price's last line, so a row's buttons share a line. */
    .yh-card--link .yh-card__foot {
        align-items: flex-end;
    }

    .yh-card--link .yh-card__foot .yh-btn {
        flex: 0 0 auto;
        padding: 0 14px;
    }
}

@media (min-width: 1200px) {
    /* Three across a 1200px column: a struck original and the button share ~250px. */
    body.frontend-page .yh-card--link .yh-price strong {
        font-size: 19px;
    }

    body.frontend-page .yh-card--link .yh-price del {
        font-size: 12px;
    }

    .yh-card--link .yh-card__foot .yh-btn {
        padding: 0 12px;
    }
}

@media (max-width: 640px) {
    /* Two lines reserved for every title, so the rows below them line up. */
    .yh-card--link .yh-card__title {
        min-height: calc(2em * 1.28);
    }

    .yh-card--link .yh-card__token {
        min-height: 26px;
    }
}

/* ---- Phones ---------------------------------------------------------------- */
@media (max-width: 767px) {
    .yh-listing__top > .yh-container {
        padding-top: var(--yh-4);
        padding-bottom: var(--yh-3);
    }

    .yh-listing__head {
        margin-bottom: var(--yh-3);
    }

    /* Edge to edge, the first chip on the page gutter. */
    .yh-chiprow {
        margin-inline: calc(var(--yh-gutter) * -1);
        padding-inline: var(--yh-gutter);
    }

    .yh-listing__empty {
        padding: var(--yh-6) var(--yh-4);
    }
}

/* ---- /tour QA follow-up (19 Sep 2026, specs/tasks/02 T4) ---- */
.yh-filters .yh-filter-more > summary {
    min-height: 40px;
}

/* ==========================================================================
   HOTELS (/hotel)  specs/tasks/03-hotels.md, family HT, 19 Sep 2026
   --------------------------------------------------------------------------
   /hotel as a landing page built from the homepage's sections: a warm hero
   with a search panel, the hotels grid (only while a hotel is published),
   destination and stay-type tiles, the steps band, the request panel and FAQ.
   Two pieces are new and written to be reused by /visa:

     yh-svc-hero  __title __lead __search __form __where __guests __alert
                  a service page's warm band, H1 and search panel
     yh-request   __form __set __legend __grid __cell __err __alert __submit
                  __aside __next __reach __tel __wa __done
                  a request form on the yh-plan shell, and its confirmation

   Page-scoped tweaks to shared components live under .yh-hotel-landing.
   Templates: themes/BC/Hotel/Views/frontend/search.blade.php and
   layouts/search/{landing,list-item,request-form,loop-grid,pager}.blade.php.
   Legacy `body.frontend-page a` (yatriwala.css ~2630) paints links brand
   blue, and legacy heading rules size h1/h2, so both are restated here under
   `body.frontend-page`.
   ========================================================================== */

/* ---- Page ------------------------------------------------------------------ */
.yh-hotel-landing {
    background: var(--yh-canvas);
    padding-bottom: var(--yh-4);            /* + the footer's own top margin: <= 96px */
}

body.frontend-page .yh-hotel-landing .yh-head h2 {
    margin: 0;
    color: var(--yh-navy);
    font-size: var(--yh-h2);
    line-height: var(--yh-lh-heading);
    font-weight: var(--yh-w-heavy);
    letter-spacing: -0.02em;
}

.yh-hotel-landing .yh-section {
    padding-top: var(--yh-7);
}

/* ---- yh-svc-hero: warm band, H1, search panel ------------------------------ */
.yh-svc-hero {
    background: linear-gradient(180deg, var(--yh-accent-soft) 0%, var(--yh-canvas) 100%);
}

.yh-svc-hero > .yh-container {
    padding-top: var(--yh-6);
    padding-bottom: var(--yh-2);
}

body.frontend-page .yh-svc-hero__title {
    max-width: 20ch;
    margin: 0;
    color: var(--yh-navy);
    font-size: var(--yh-h1);
    line-height: var(--yh-lh-tight);
    font-weight: var(--yh-w-heavy);
    letter-spacing: -0.025em;
}

.yh-svc-hero__lead {
    max-width: 52ch;
    margin: var(--yh-2) 0 0;
    color: var(--yh-navy-soft);
    font-size: 15px;
    line-height: 1.5;
}

.yh-svc-hero__search.yh-search {
    margin-top: var(--yh-5);
}

/* Where · Check-in · Check-out · Guests · [button] */
.yh-svc-hero__form.yh-search__form {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr) auto;
}

.yh-svc-hero__alert {
    display: flex;
    align-items: center;
    gap: var(--yh-2);
    margin: var(--yh-4) 0 0;
    color: var(--yh-danger);
    font-size: var(--yh-body);
    font-weight: var(--yh-w-bold);
}

body.frontend-page .yh-svc-hero__alert a {
    color: var(--yh-danger);
    text-decoration: underline;
}

/* Dates carry the browser's own calendar icon, so no yh-field__icon and no room kept for one. */
.yh-field--date {
    padding-right: var(--yh-3);
}

.yh-field input[type="date"] {
    min-height: 22px;
    color: var(--yh-ink);
}

.yh-field input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: .6;
    cursor: pointer;
}

/* Legacy form rules (yatriwala.css) give inputs and selects inside the page borders and a
   fixed height; inside a yh-field the field is the box. */
body.frontend-page .yh-field input,
body.frontend-page .yh-field select,
body.frontend-page .yh-field textarea {
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    color: var(--yh-ink);
}

/* yatriwala-system.css (~line 414) gives .yh-field inputs min-height: 46px, which made text
   fields 89px tall beside 65px date fields inside the 62px yh-field box. */
.yh-svc-hero .yh-field input,
.yh-svc-hero .yh-field select,
.yh-request .yh-field input,
.yh-request .yh-field select {
    min-height: 22px;
}

body.frontend-page .yh-field select {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

body.frontend-page .yh-field textarea {
    width: 100%;
    min-height: 64px;
    resize: vertical;
    outline: 0;
}

/* ---- Hotels grid (section 2) ------------------------------------------------ */
.yh-hotel-results__head {
    align-items: flex-end;
}

.yh-hotel-results__head .yh-listing__sort .yh-select {
    width: 216px;
}

.yh-hotel-results__chips {
    margin: 0 0 var(--yh-4);
}

.yh-hotel-results__grid.yh-listing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
    .yh-hotel-results__grid.yh-listing__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .yh-hotel-results__grid.yh-listing__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Every line in the same place across a row: the name always takes its two lines. */
.yh-hotel-results__grid .yh-hotel__name {
    min-height: calc(2 * 1.3em);
}

body.frontend-page .yh-hotel-results__grid .yh-hotel__name a {
    color: var(--yh-ink);
}

.yh-hotel__class {
    color: var(--yh-muted);
    font-size: 12px;
    font-weight: var(--yh-w-medium);
}

.yh-hotel__price small {
    color: var(--yh-muted);
    font-size: 11px;
    font-weight: 600;
}

.yh-hotel-results__grid .yh-hotel__cta {
    align-self: stretch;
    min-height: 40px;
}

.yh-hotel-results__none {
    margin: 0;
    padding: var(--yh-5);
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-card);
    color: var(--yh-muted);
    font-size: var(--yh-body);
}

body.frontend-page .yh-hotel-results__none a {
    color: var(--yh-link);
    font-weight: var(--yh-w-bold);
    text-decoration: underline;
}

/* ---- Where do you want to stay? (yh-india tiles) ---------------------------- */
body.frontend-page .yh-hotel-landing a.yh-dest,
body.frontend-page .yh-hotel-landing a.yh-dest:hover {
    color: var(--yh-ink);
    text-decoration: none;
}

/* ---- What kind of stay? (yh-trip-type tiles, five of them) ------------------ */
.yh-hotel-types .yh-trip-types__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

body.frontend-page .yh-hotel-landing a.yh-trip-type,
body.frontend-page .yh-hotel-landing a.yh-trip-type:hover {
    color: var(--yh-navy);
    text-decoration: none;
}

.yh-hotel-types .yh-trip-type.is-active {
    box-shadow: inset 0 0 0 2px var(--yh-accent);
}

/* ---- How hotel booking works: the homepage band (#how-it-works), 3 steps ---- */
.yh-hotel-landing #how-it-works {
    margin-top: var(--yh-7);
    padding-block: var(--yh-7);
}

/* ---- yh-request: the request form on the yh-plan shell --------------------- */
.yh-request {
    align-items: stretch;
}

.yh-request__form {
    min-width: 0;
    padding: var(--yh-6);
}

.yh-request__set {
    min-width: 0;
    margin: 0 0 var(--yh-5);
    padding: 0;
    border: 0;
}

body.frontend-page .yh-request__legend {
    width: auto;
    margin: 0 0 var(--yh-3);
    padding: 0;
    border: 0;
    color: var(--yh-navy);
    font-size: var(--yh-h3);
    line-height: var(--yh-lh-heading);
    font-weight: var(--yh-w-heavy);
}

.yh-request__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--yh-3);
}

.yh-request__cell {
    min-width: 0;
}

.yh-request__cell--wide {
    grid-column: 1 / -1;
}

.yh-request .yh-field {
    min-height: 62px;
    padding-right: var(--yh-4);
}

.yh-request .yh-field.is-invalid {
    border-color: var(--yh-danger);
}

.yh-request__err {
    display: block;
    margin-top: var(--yh-1);
    color: var(--yh-danger);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-medium);
}

.yh-request__alert {
    display: flex;
    align-items: flex-start;
    gap: var(--yh-2);
    margin: 0 0 var(--yh-4);
    padding: var(--yh-3) var(--yh-4);
    border: 1px solid rgba(214, 69, 69, .35);
    border-radius: var(--yh-r-control);
    background: #fdf2f2;
    color: var(--yh-danger);
    font-size: var(--yh-body);
    font-weight: var(--yh-w-bold);
}

.yh-request__alert i {
    margin-top: 3px;
}

.yh-request__captcha:empty {
    display: none;
}

.yh-request__captcha {
    margin: 0 0 var(--yh-4);
}

.yh-request__submit.yh-btn {
    min-width: 220px;
    min-height: 48px;
}

.yh-request__aside {
    display: flex;
    flex-direction: column;
    gap: var(--yh-4);
    min-width: 0;
    padding: var(--yh-6);
    background: var(--yh-tint);
}

body.frontend-page .yh-request__aside h3 {
    margin: 0;
    color: var(--yh-navy);
    font-size: var(--yh-h3);
    font-weight: var(--yh-w-heavy);
}

.yh-request__next {
    display: grid;
    gap: var(--yh-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.yh-request__next li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: var(--yh-2);
    color: var(--yh-navy-soft);
    font-size: var(--yh-body);
    line-height: 1.5;
}

.yh-request__next i {
    margin-top: 4px;
    color: var(--yh-success);
}

.yh-request__reach {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--yh-3);
    padding-top: var(--yh-4);
    border-top: 1px solid var(--yh-line);
}

.yh-request__reach p {
    margin: 0;
    color: var(--yh-muted);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-medium);
}

body.frontend-page a.yh-request__tel {
    display: inline-flex;
    align-items: center;
    gap: var(--yh-2);
    min-height: 44px;
    color: var(--yh-navy);
    font-size: 16px;
    font-weight: var(--yh-w-heavy);
    text-decoration: none;
}

.yh-request__wa i {
    color: var(--yh-whatsapp);
}

body.frontend-page a.yh-request__wa {
    color: var(--yh-navy);
    background: #fff;
}

/* The confirmation, in the hero where the search panel was. */
.yh-request__done {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--yh-4);
    margin-top: var(--yh-5);
    padding: var(--yh-5) var(--yh-6);
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-surface);
    background: #fff;
    box-shadow: var(--yh-shadow-2);
}

.yh-request__done-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(23, 145, 95, .12);
    color: var(--yh-success);
    font-size: 20px;
}

body.frontend-page .yh-request__done h2 {
    margin: 0;
    color: var(--yh-navy);
    font-size: var(--yh-h3);
    font-weight: var(--yh-w-heavy);
}

.yh-request__done p {
    margin: 2px 0 0;
    color: var(--yh-muted);
    font-size: var(--yh-body);
}

body.frontend-page .yh-request__done a.yh-btn--outline {
    color: var(--yh-navy);
}

/* ---- FAQ ------------------------------------------------------------------ */
body.frontend-page .yh-hotel-landing .yh-faq__item p a {
    color: var(--yh-link);
    font-weight: var(--yh-w-bold);
    text-decoration: underline;
}

/* ---- Tablet --------------------------------------------------------------- */
@media (max-width: 1024px) {
    .yh-svc-hero__form.yh-search__form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .yh-svc-hero__where,
    .yh-svc-hero__form .yh-search__submit {
        grid-column: 1 / -1;
    }

    .yh-hotel-types .yh-trip-types__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---- Phone (390) ------------------------------------------------------------ */
@media (max-width: 640px) {
    .yh-hotel-landing .yh-section {
        padding-top: 40px;
    }

    .yh-hotel-landing .yh-head {
        flex-direction: column;
        align-items: stretch;
        gap: var(--yh-3);
        margin-bottom: var(--yh-4);
    }

    body.frontend-page .yh-hotel-landing .yh-head h2 {
        font-size: 22px;
    }

    .yh-svc-hero > .yh-container {
        padding-top: var(--yh-5);
    }

    body.frontend-page .yh-svc-hero__title {
        font-size: 24px;
    }

    .yh-svc-hero__lead {
        font-size: 14px;
    }

    .yh-svc-hero__search.yh-search {
        margin-top: var(--yh-4);
    }

    /* Where full width, the dates 2-up, then guests, then the button. */
    .yh-svc-hero__form.yh-search__form {
        gap: 10px;
        padding: 12px;
    }

    .yh-svc-hero__guests {
        grid-column: 1 / -1;
    }

    .yh-svc-hero__form .yh-field {
        min-height: 56px;
    }

    .yh-svc-hero__form .yh-search__submit {
        min-height: 52px;
    }

    .yh-hotel-results__head .yh-listing__sort .yh-select {
        width: 100%;
    }

    .yh-hotel-results__grid .yh-hotel__body {
        padding: 10px;
    }

    /* Stay types: a 2-column grid; an odd last tile takes the row. */
    .yh-hotel-types .yh-trip-types__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-inline: 0;
        padding-inline: 0;
        overflow: visible;
    }

    .yh-hotel-types .yh-trip-type {
        min-height: 104px;
    }

    .yh-hotel-types .yh-trip-type:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .yh-hotel-landing #how-it-works {
        margin-top: 40px;
        padding-block: 40px;
    }

    .yh-hotel-landing .yh-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .yh-request__form,
    .yh-request__aside {
        padding: 20px 16px;
    }

    .yh-request__cell--city,
    .yh-request__cell--type {
        grid-column: 1 / -1;
    }

    .yh-request .yh-field {
        padding-left: 12px;
        padding-right: 12px;
    }

    .yh-request__submit.yh-btn {
        width: 100%;
        min-width: 0;
    }

    .yh-request__reach,
    body.frontend-page a.yh-request__wa {
        width: 100%;
    }

    .yh-request__done {
        grid-template-columns: auto minmax(0, 1fr);
        padding: var(--yh-4);
    }

    .yh-request__done .yh-btn {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* ---- Hotels QA follow-ups (20 Sep 2026, specs/tasks/03 QA attempt 1) ---- */

/* The FAQ's own bottom padding stacked on the page's, ~145px above the footer; /tour has 80. */
.yh-hotel-landing .yh-faq {
    padding-bottom: 0;
}

/* The stay-type dropdown had no arrow and read as a text box. body.frontend-page because
   `body.frontend-page .yh-field select` (0,2,2) otherwise wins and clears the background. */
body.frontend-page .yh-hotel-landing .yh-field select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 28px;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230b2d54' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 4px center / 12px 8px;
    cursor: pointer;
}

/* On phones "Nightly budget optional" wrapped and made the field taller than Guests beside it.
   The placeholder already reads "e.g.", so the tag goes at that width only. */
@media (max-width: 640px) {
    .yh-hotel-landing .yh-request__cell:has(input[name="budget"]) .yh-field__opt {
        display: none;
    }
}

/* ==========================================================================
   VISA (/visa, /visa/{slug})  specs/tasks/04-visa.md, family V, 20 Sep 2026
   --------------------------------------------------------------------------
   Both pages are Livewire full-page views whose script 404s on live, so they
   render plain markup and cannot @push styles: everything is here.
   /visa reuses the hotels pieces (yh-svc-hero, yh-search, yh-steps in the
   #how-it-works band, yh-request on yh-plan, yh-faq). New here:

     yh-visa-grid   the visa cards, 3 across at >= 900px, 2 below; fixed tracks
     yh-visa-card   __media __body __country __title __facts __price __cta
     yh-visa-other  the "Another country?" tile that ends the row
     yh-visa-mark   the passport mark in a card or head with no photo
     yh-visa-head   the visa page head: crumbs, photo, H1, country, price box
     yh-visa-price  __amount __facts __cta, the light price box
     yh-visa-docs   "Documents you will need" (admin content)

   Page-scoped copies of the hotels tweaks sit under .yh-visa-landing and
   .yh-visa-page. Legacy `body.frontend-page a` (yatriwala.css ~2630) paints
   links brand blue and legacy heading rules size h1/h2, so both are restated
   under `body.frontend-page`.
   Templates: themes/BC/Visa/Views/frontend/{index,detail}.blade.php and
   layouts/search/{landing,loop-grid,request-form,faq,passport-mark}.blade.php.
   ========================================================================== */

/* ---- Pages ------------------------------------------------------------------ */
.yh-visa-landing,
.yh-visa-page {
    background: var(--yh-canvas);
    padding-bottom: var(--yh-4);            /* + the footer's own top margin: <= 96px */
}

body.frontend-page .yh-visa-landing .yh-head h2,
body.frontend-page .yh-visa-page .yh-head h2 {
    margin: 0;
    color: var(--yh-navy);
    font-size: var(--yh-h2);
    line-height: var(--yh-lh-heading);
    font-weight: var(--yh-w-heavy);
    letter-spacing: -0.02em;
}

.yh-visa-landing .yh-section,
.yh-visa-page .yh-section {
    padding-top: var(--yh-7);
}

/* The FAQ's own bottom padding would stack on the page's (as on /hotel). */
.yh-visa-landing .yh-faq,
.yh-visa-page .yh-faq {
    padding-bottom: 0;
}

.yh-visa-landing #how-it-works {
    margin-top: var(--yh-7);
    padding-block: var(--yh-7);
}

/* Country · Travel date · Applicants · [button] */
.yh-visa-hero__form.yh-search__form {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .9fr) auto;
}

/* The visa dropdowns carry an arrow. body.frontend-page because
   `body.frontend-page .yh-field select` (0,2,2) otherwise wins and clears the background. */
body.frontend-page .yh-visa-landing .yh-field select,
body.frontend-page .yh-visa-page .yh-field select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 28px;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230b2d54' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 4px center / 12px 8px;
    cursor: pointer;
}

/* ---- Visa cards -------------------------------------------------------------- */
.yh-visa-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--yh-4);
}

@media (min-width: 900px) {
    .yh-visa-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--yh-5);
    }
}

.yh-visa-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-card);
    background: #fff;
    overflow: hidden;
    box-shadow: var(--yh-shadow-1);
    transition: transform .2s ease, box-shadow .2s ease;
}

@media (hover: hover) {
    .yh-visa-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--yh-shadow-3);
    }
}

.yh-visa-card__media {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--yh-accent-soft);
    color: var(--yh-accent-ink);
}

.yh-visa-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yh-visa-mark {
    display: grid;
    place-items: center;
    opacity: .55;
}

.yh-visa-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 6px;
    padding: var(--yh-4);
}

.yh-visa-card__country {
    color: var(--yh-muted);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-bold);
    letter-spacing: .02em;
}

body.frontend-page .yh-visa-card__title {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    font-weight: var(--yh-w-heavy);
}

body.frontend-page .yh-visa-card__title a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-height: calc(2 * 1.3em);
    overflow: hidden;
    color: var(--yh-ink);
    text-decoration: none;
}

.yh-visa-card__facts {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--yh-navy-soft);
    font-size: 13px;
}

.yh-visa-card__price {
    margin: auto 0 0;
    padding-top: var(--yh-2);
    color: var(--yh-ink);
    font-size: 13px;
    line-height: 1.35;
}

.yh-visa-card__price strong {
    font-size: 18px;
    font-weight: var(--yh-w-heavy);
    white-space: nowrap;
}

.yh-visa-card__price span {
    color: var(--yh-muted);
    font-weight: var(--yh-w-medium);
    white-space: nowrap;
}

.yh-visa-card__cta.yh-btn {
    align-self: stretch;
    min-height: 44px;
    margin-top: var(--yh-2);
}

body.frontend-page a.yh-visa-card__cta {
    color: var(--yh-navy);
}

/* "Another country?": a tint tile the same height as the cards, ending the row. */
body.frontend-page a.yh-visa-other,
body.frontend-page a.yh-visa-other:hover {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--yh-2);
    min-width: 0;
    padding: var(--yh-6) var(--yh-5);
    border: 1px dashed rgba(11, 45, 84, .22);
    border-radius: var(--yh-r-card);
    background: var(--yh-tint);
    color: var(--yh-navy);
    text-decoration: none;
}

.yh-visa-other__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    color: var(--yh-link);
    font-size: 22px;
}

.yh-visa-other strong {
    font-size: 18px;
    font-weight: var(--yh-w-heavy);
    line-height: 1.3;
}

.yh-visa-other small {
    color: var(--yh-navy-soft);
    font-size: var(--yh-body);
    line-height: 1.5;
}

.yh-visa-other__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    color: var(--yh-link);
    font-weight: var(--yh-w-heavy);
}

/* ---- Visa page head ------------------------------------------------------------ */
.yh-visa-head {
    background: linear-gradient(180deg, var(--yh-accent-soft) 0%, var(--yh-canvas) 100%);
}

.yh-visa-head > .yh-container {
    padding-top: var(--yh-5);
}

body.frontend-page .yh-visa-page .yh-crumbs a {
    color: var(--yh-muted);
    text-decoration: none;
}

.yh-visa-head__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--yh-6);
    align-items: start;
    margin-top: var(--yh-4);
}

.yh-visa-head__media {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--yh-r-surface);
    background: var(--yh-accent-soft);
    color: var(--yh-accent-ink);
}

.yh-visa-head__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yh-visa-head__media .yh-visa-mark svg {
    width: 72px;
    height: 90px;
}

body.frontend-page .yh-visa-head__title {
    margin: 0;
    color: var(--yh-navy);
    font-size: var(--yh-h1);
    line-height: var(--yh-lh-tight);
    font-weight: var(--yh-w-heavy);
    letter-spacing: -0.025em;
}

.yh-visa-head__country {
    display: flex;
    align-items: center;
    gap: var(--yh-2);
    margin: var(--yh-2) 0 0;
    color: var(--yh-navy-soft);
    font-size: 15px;
    font-weight: var(--yh-w-medium);
}

.yh-visa-price {
    display: flex;
    flex-direction: column;
    gap: var(--yh-3);
    margin-top: var(--yh-5);
    padding: var(--yh-5);
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-surface);
    background: #fff;
    box-shadow: var(--yh-shadow-1);
}

.yh-visa-price__amount {
    margin: 0;
    color: var(--yh-ink);
    font-size: 14px;
}

.yh-visa-price__amount strong {
    font-size: 26px;
    font-weight: var(--yh-w-heavy);
    white-space: nowrap;
}

.yh-visa-price__amount span {
    color: var(--yh-muted);
    font-weight: var(--yh-w-medium);
}

.yh-visa-price__facts {
    display: grid;
    gap: var(--yh-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.yh-visa-price__facts li {
    display: flex;
    gap: var(--yh-2);
    color: var(--yh-navy-soft);
    font-size: var(--yh-body);
}

.yh-visa-price__facts i {
    margin-top: 3px;
    color: var(--yh-success);
}

.yh-visa-price__cta.yh-btn {
    min-height: 48px;
}

/* The confirmation inside the price box: the button takes its own row. */
.yh-visa-price .yh-request__done {
    grid-template-columns: auto minmax(0, 1fr);
    margin-top: 0;
    padding: var(--yh-4);
    box-shadow: none;
}

.yh-visa-price .yh-request__done .yh-btn {
    grid-column: 1 / -1;
}

.yh-visa-head .yh-svc-hero__alert {
    margin-top: var(--yh-3);
}

/* ---- Documents you will need (admin content) ---------------------------------- */
.yh-visa-docs__body {
    max-width: 72ch;
    color: var(--yh-navy-soft);
    font-size: 15px;
    line-height: var(--yh-lh-body);
}

.yh-visa-docs__body > :first-child {
    margin-top: 0;
}

.yh-visa-docs__body > :last-child {
    margin-bottom: 0;
}

/* ---- Tablet and phone ------------------------------------------------------------ */
/* The tile fills whatever the cards leave on the last row, so the row never has a hole. */
@media (min-width: 900px) {
    .yh-visa-grid > .yh-visa-other:nth-child(3n + 1) {
        grid-column: 1 / -1;
    }

    .yh-visa-grid > .yh-visa-other:nth-child(3n + 2) {
        grid-column: span 2;
    }
}

@media (max-width: 899px) {
    .yh-visa-grid > .yh-visa-other:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* Two columns from tablet down, as the /hotel hero: the 4-column rule above has the same
   specificity as the hotels' 1024px rule and comes later, so it is restated here. */
@media (max-width: 1024px) {
    .yh-visa-hero__form.yh-search__form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 899px) {
    .yh-visa-head__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--yh-4);
    }
}

@media (max-width: 640px) {
    .yh-visa-landing .yh-section,
    .yh-visa-page .yh-section {
        padding-top: 40px;
    }

    .yh-visa-landing .yh-head,
    .yh-visa-page .yh-head {
        flex-direction: column;
        align-items: stretch;
        gap: var(--yh-3);
        margin-bottom: var(--yh-4);
    }

    body.frontend-page .yh-visa-landing .yh-head h2,
    body.frontend-page .yh-visa-page .yh-head h2 {
        font-size: 22px;
    }

    .yh-visa-landing #how-it-works {
        margin-top: 40px;
        padding-block: 40px;
    }

    .yh-visa-landing .yh-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    /* Country full width, then Travel date and Applicants side by side, then the button. */
    .yh-visa-hero__form .yh-svc-hero__guests {
        grid-column: auto;
    }

    /* At half width the user icon covered "3 applicants"; the label already names the field. */
    .yh-visa-hero__form .yh-svc-hero__guests .yh-field__icon {
        display: none;
    }

    .yh-visa-grid {
        gap: var(--yh-3);
    }

    .yh-visa-card__body {
        padding: var(--yh-3);
    }

    body.frontend-page .yh-visa-card__title {
        font-size: 14px;
    }

    .yh-visa-card__price strong {
        font-size: 16px;
    }

    body.frontend-page a.yh-visa-other,
    body.frontend-page a.yh-visa-other:hover {
        padding: var(--yh-4) var(--yh-3);
    }

    .yh-visa-other strong {
        font-size: 16px;
    }

    .yh-visa-other small {
        font-size: 13px;
    }

    .yh-visa-head > .yh-container {
        padding-top: var(--yh-4);
    }

    .yh-visa-head__media {
        border-radius: var(--yh-r-card);
    }

    body.frontend-page .yh-visa-head__title {
        font-size: 24px;
    }

    .yh-visa-price {
        margin-top: var(--yh-4);
        padding: var(--yh-4);
    }

    .yh-visa-price__cta.yh-btn {
        width: 100%;
    }
}