/* ==========================================================================
   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%;
    }
}

/* ==========================================================================
   SERVICE PAGES (/esim, /flight, /bus)  specs/tasks/05-service-pages.md,
   family E, 23 Sep 2026
   --------------------------------------------------------------------------
   One template (Layout::parts.yh-service-landing) serves all three pages, so
   there is one scope here: .yh-service-page, with .yh-service-page--esim /
   --flight / --bus for the few per-page layout differences.

   The pages reuse the hotels and visa pieces (yh-svc-hero, yh-search,
   yh-field, yh-steps in the #how-it-works band, yh-request on yh-plan,
   yh-faq). Several of those are page-scoped under .yh-hotel-landing /
   .yh-visa-landing, so the band, the head sizes, the FAQ's bottom padding and
   the select arrow are restated here or the page would not match. New:

     yh-svc-hero__eyebrow  the "coming soon" chip above the H1
     yh-service-hero__form the hero grid: four fields and the button
     yh-svc-f--<name>      one hero field, so the phone layout can be per field
     yh-svc-grid           the destination tiles, 3 across at >= 900px, 2 below
     yh-svc-tile           __media __body, one real destination
     yh-svc-mark           the plain mark a tile with no real photo keeps
     yh-svc-other          the tile that ends the row, linking to the request

   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`. Append-only, no !important.
   ========================================================================== */

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

body.frontend-page .yh-service-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-service-page .yh-section {
    padding-top: var(--yh-7);
}

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

/* One how-it-works band, the homepage's. */
.yh-service-page #how-it-works {
    margin-top: var(--yh-7);
    padding-block: var(--yh-7);
}

/* ---- Hero ------------------------------------------------------------------ */
.yh-svc-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--yh-3);
    padding: 6px 14px;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--yh-shadow-1);
    color: var(--yh-accent-ink);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-heavy);
    letter-spacing: .01em;
}

/* Four fields and the button, the /hotel hero's proportions. */
.yh-service-hero__form.yh-search__form {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .8fr) auto;
}

/* The 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-service-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;
}

/* The message box grows down from its label instead of sitting centred in the field. */
.yh-service-page .yh-field--area {
    justify-content: flex-start;
    padding-top: 12px;
}

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

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

body.frontend-page a.yh-svc-tile,
body.frontend-page a.yh-svc-tile:hover {
    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);
    color: var(--yh-ink);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

@media (hover: hover) {
    body.frontend-page a.yh-svc-tile:hover {
        transform: translateY(-3px);
        box-shadow: var(--yh-shadow-3);
    }
}

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

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

.yh-svc-mark {
    display: grid;
    place-items: center;
    opacity: .5;
}

.yh-svc-tile__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--yh-4);
}

.yh-svc-tile__body strong {
    color: var(--yh-ink);
    font-size: 16px;
    line-height: 1.3;
    font-weight: var(--yh-w-heavy);
}

.yh-svc-tile__body small {
    color: var(--yh-muted);
    font-size: 13px;
    line-height: 1.4;
}

/* "Somewhere else?": a tint tile the same height as the others, ending the row. */
body.frontend-page a.yh-svc-other,
body.frontend-page a.yh-svc-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-svc-other__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    color: var(--yh-link);
    font-size: 22px;
}

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

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

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

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

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

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

/* ---- Tablet ---------------------------------------------------------------- */
/* The hotels' 1024px rule has the same specificity and comes earlier, so this restates it:
   the place fields take the row, the rest pair up, the button takes the row. */
@media (max-width: 1024px) {
    .yh-service-hero__form.yh-search__form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .yh-service-hero__form .yh-svc-f--origin,
    .yh-service-hero__form .yh-svc-f--destination,
    .yh-service-hero__form .yh-search__submit {
        grid-column: 1 / -1;
    }
}

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

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

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

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

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

    /* eSIM: Country full width, the two dates 2-up, then how many, then the button. */
    .yh-service-page--esim .yh-service-hero__form .yh-svc-f--travellers {
        grid-column: 1 / -1;
    }

    /* At half width the user icon covered the number; the label already names the field. */
    .yh-service-hero__form .yh-svc-f--travellers .yh-field__icon {
        display: none;
    }

    /* Request panel at 390. The hotels rule already gives .yh-request__cell--city (From, To)
       the whole row. What is left must pair up, or a field sits alone with a hole beside it:
         esim    Country / Travel date + Return date / eSIMs needed + Data use
         flight  From / To / Departure + Return / Passengers (alone, so full width)
         bus     From / To / Travel date + Passengers
       "Data use optional" wrapped at half width and made the field taller than the one beside
       it; the select already reads "Not sure", so the tag goes at this width only. */
    .yh-service-page--flight .yh-svc-c--travellers {
        grid-column: 1 / -1;
    }

    .yh-service-page .yh-svc-c--data_use .yh-field__opt {
        display: none;
    }

    .yh-service-page .yh-svc-grid {
        gap: var(--yh-3);
    }

    .yh-service-page .yh-svc-tile__body {
        padding: var(--yh-3);
    }

    .yh-service-page .yh-svc-tile__body strong {
        font-size: 14px;
    }

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

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

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

/* ==========================================================================
   CONTACT + PLAN MY TRIP (/contact, /plan-my-trip)  specs/tasks/06-contact-pages.md,
   family C, 23 Sep 2026
   --------------------------------------------------------------------------
   Two pages, one job each, and no block on both.

   /plan-my-trip is the fourth configuration of the shared service template, so
   it inherits the whole SERVICE PAGES block above. Only three things are its
   own: a three-field hero panel (Destination, Travel date, Travellers), the
   seven-field brief, and the package line a tour card's ?package= produces.

   /contact has no search panel, no tiles and no steps band, so it is its own
   small page on the yh- primitives. It reuses the warm yh-svc-hero band, the
   yh-plan shell and the yh-request__* form pieces, and adds:

     yh-contact-reach   the channel row, auto-fit, so however many channels the
                        settings hold, the row fills itself. Three at 1440, two
                        at 768, one full-width card at 390: never 4-in-3, and
                        never a rail with WhatsApp and Email off screen.
     yh-contact-card    one channel: icon, label, the value from settings
     yh-contact-visit   the travel desk card and the keyless directions link
     yh-contact-aside   the admin paragraph, the one plan-my-trip line, socials

   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`. Append-only, no !important.
   ========================================================================== */

/* ---- /plan-my-trip --------------------------------------------------------- */
/* Destination | Travel date | Travellers | [Plan my trip]. The SERVICE PAGES rule
   above sets five columns for the four-field pages; this restates it for three. */
.yh-service-page--plan .yh-service-hero__form.yh-search__form {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, .7fr) auto;
}

/* The brief: What are you planning | Destination / Travel date | Return date /
   Travellers | Budget / What do you need (the row on its own). */
.yh-service-page--plan .yh-svc-c--subject {
    grid-column: 1 / -1;
}

/* The package a tour card sent, shown read-only above the fields so nobody has to
   retype it, and posted as its own field so the stored message names it. */
.yh-request__pkg {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--yh-2) var(--yh-3);
    margin: 0 0 var(--yh-5);
    padding: var(--yh-3) var(--yh-4);
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-card);
    background: var(--yh-accent-soft);
}

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

.yh-request__pkg-name {
    min-width: 0;
    color: var(--yh-navy);
    font-size: 15px;
    font-weight: var(--yh-w-heavy);
    line-height: 1.35;
}

body.frontend-page a.yh-request__pkg-clear {
    margin-left: auto;
    color: var(--yh-link);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-bold);
    text-decoration: underline;
}

/* The one cross-link to /contact: quiet, centred, and low on the page, where the
   brief has already been offered. */
.yh-plan-cross {
    margin: 0;
    padding: 0 var(--yh-4) var(--yh-6);
    background: var(--yh-canvas);
    color: var(--yh-muted);
    font-size: var(--yh-body);
    text-align: center;
}

body.frontend-page .yh-plan-cross a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-left: 4px;
    color: var(--yh-link);
    font-weight: var(--yh-w-bold);
    text-decoration: underline;
}

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

.yh-contact-page .yh-section {
    padding-top: var(--yh-7);
}

body.frontend-page .yh-contact-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;
}

/* The message box grows down from its label instead of sitting centred. */
.yh-contact-page .yh-field--area {
    justify-content: flex-start;
    padding-top: 12px;
}

/* ---- The channel row ------------------------------------------------------- */
.yh-contact-reach {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--yh-4);
    margin-top: var(--yh-5);
}

body.frontend-page a.yh-contact-card,
body.frontend-page a.yh-contact-card:hover {
    display: flex;
    align-items: center;
    gap: var(--yh-3);
    min-width: 0;
    min-height: 76px;
    padding: var(--yh-4);
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-card);
    background: #fff;
    box-shadow: var(--yh-shadow-1);
    color: var(--yh-ink);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

@media (hover: hover) {
    body.frontend-page a.yh-contact-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--yh-shadow-3);
    }
}

.yh-contact-card__icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--yh-tint);
    color: var(--yh-link);
    font-size: 18px;
}

.yh-contact-card__icon--call {
    background: var(--yh-accent-soft);
    color: var(--yh-accent-ink);
}

.yh-contact-card__icon--whatsapp {
    background: rgba(37, 211, 102, .14);
    color: #128c4a;
}

.yh-contact-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.yh-contact-card__body small {
    color: var(--yh-muted);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-medium);
}

.yh-contact-card__body strong {
    overflow-wrap: anywhere;
    color: var(--yh-navy);
    font-size: 16px;
    line-height: 1.3;
    font-weight: var(--yh-w-heavy);
}

/* ---- Visit the travel desk -------------------------------------------------- */
.yh-contact-visit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--yh-5);
    padding: var(--yh-6);
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-surface);
    background: var(--yh-tint);
}

.yh-contact-visit__list {
    display: grid;
    gap: var(--yh-4);
    min-width: 0;
    margin: 0;
}

.yh-contact-visit__row {
    min-width: 0;
}

.yh-contact-visit__row dt {
    display: flex;
    align-items: center;
    gap: var(--yh-2);
    margin: 0 0 4px;
    color: var(--yh-muted);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-medium);
}

.yh-contact-visit__row dd {
    max-width: 52ch;
    margin: 0;
    color: var(--yh-navy);
    font-size: 16px;
    line-height: 1.5;
    font-weight: var(--yh-w-bold);
}

body.frontend-page a.yh-contact-visit__map {
    flex: 0 0 auto;
    gap: var(--yh-2);
    background: #fff;
    color: var(--yh-navy);
}

/* ---- The message panel's aside ---------------------------------------------- */
.yh-contact-aside__copy {
    color: var(--yh-navy-soft);
    font-size: var(--yh-body);
    line-height: 1.6;
}

.yh-contact-aside__copy p {
    margin: 0 0 var(--yh-2);
}

.yh-contact-aside__copy p:last-child {
    margin-bottom: 0;
}

.yh-contact-aside__plan {
    margin: 0;
    color: var(--yh-navy);
    font-size: var(--yh-body);
    line-height: 1.6;
    font-weight: var(--yh-w-medium);
}

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

.yh-contact-aside__social {
    padding-top: var(--yh-4);
    border-top: 1px solid var(--yh-line);
}

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

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

body.frontend-page .yh-contact-aside__social a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--yh-link);
    font-size: var(--yh-body);
    font-weight: var(--yh-w-bold);
}

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

    .yh-service-page--plan .yh-service-hero__form .yh-svc-f--destination,
    .yh-service-page--plan .yh-service-hero__form .yh-search__submit {
        grid-column: 1 / -1;
    }
}

/* ---- Phone (390) ------------------------------------------------------------- */
@media (max-width: 640px) {
    /* The brief at 390: What are you planning / Destination / Travel date + Return
       date / Travellers + Budget / What do you need. The service select and the
       destination take the whole row; the rest pair up, so no field is ever left
       alone with a hole beside it. */
    .yh-service-page--plan .yh-svc-c--service {
        grid-column: 1 / -1;
    }

    /* "Budget optional" wrapped at half width and made that field taller than the
       one beside it; the label alone is clear at this width. */
    .yh-service-page--plan .yh-svc-c--budget .yh-field__opt {
        display: none;
    }

    .yh-request__pkg {
        margin-bottom: var(--yh-4);
        padding: var(--yh-3);
    }

    body.frontend-page a.yh-request__pkg-clear {
        margin-left: 0;
    }

    .yh-contact-page .yh-section {
        padding-top: 40px;
    }

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

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

    /* One card per row, starting at the gutter. Nothing off screen to the right. */
    .yh-contact-reach {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--yh-3);
        margin-top: var(--yh-4);
    }

    .yh-contact-visit {
        flex-direction: column;
        align-items: stretch;
        gap: var(--yh-4);
        padding: 20px 16px;
    }

    body.frontend-page a.yh-contact-visit__map {
        width: 100%;
    }

    .yh-contact-visit__row dd {
        font-size: 15px;
    }
}

/* ---- /contact follow-up (23 Sep 2026) ------------------------------------
   The message block inherits the plan card's 58/42 split, but on /contact the aside
   holds one cross-link (the admin paragraph and socials are usually unset), so the
   right of the page read as an empty column. One column, held to a readable width,
   with the cross-link as a strip underneath. */
@media (min-width: 1024px) {
    .yh-contact-msg {
        grid-template-columns: minmax(0, 1fr);
        max-width: 820px;
    }

    .yh-contact-msg .yh-contact-aside {
        padding: var(--yh-4) var(--yh-6);
    }
}

/* ==========================================================================
   PACKAGE PAGE (/tour/{slug})  specs/tasks/07-package-page.md, family D
   --------------------------------------------------------------------------
   The page where the trip is chosen and the token proposition has to land. It
   was the last commercially important page still on legacy .yw-app-* / .yw-td-*
   markup, sitting on a mint/blue radial gradient with nine identical cards, two
   fixed bars at the bottom of a phone, the same inclusions written out three
   times, and a booking card whose head was a navy block and whose last line was
   inside an invisible scroller.

   The blade is rebuilt on yh- components; these are their rules. Three legacy
   class names survive in the markup and are deliberately NOT styled here:

     yw-tour-app-detail     the root. yatriwala-theme.js groups the section tabs
                            by it, and the one-bar rule below scopes to it.
     yw-app-section-tabs    the tab JS hook (theme.js + the inline observer).
     yw-book-sheet-head     the phone sheet's dismiss handler selects it.

   Everything else the page draws is yh-pkg-*, so the legacy sheets simply stop
   matching instead of being fought override by override.

   Two !importants, each naming the legacy rule it defeats. Legacy
   `body.frontend-page a { color: var(--yw-forest) }` (yatriwala.css ~2630)
   outranks single-class yh- link rules, so every link colour here is restated
   under body.frontend-page.
   ========================================================================== */

/* ---- Page shell ----------------------------------------------------------- */
.yh-pkg-page {
    background: var(--yh-canvas);
}

/* yatriwala-production.css:1481 sets `.bc_detail_tour { background: #fff !important }`
   inside @media (min-width: 768px); only !important undoes it, and the page has to be
   on the warm canvas at every width or the sections float on a different white. */
@media (min-width: 768px) {
    body.frontend-page .bc_detail_tour.yh-pkg-page {
        background: var(--yh-canvas) !important;
    }
}

.yh-pkg-layout {
    background: transparent;
}

@media (min-width: 768px) {
    .yh-pkg-layout {
        width: min(calc(100% - (var(--yh-gutter) * 2)), var(--yh-container));
        margin-inline: auto;
        padding: var(--yh-6) 0 var(--yh-8);
        gap: var(--yh-6);
        grid-template-columns: minmax(0, 1fr) 352px;
    }
}

/* The root still carries yw-tour-app-detail - body:has() keys off it and so does
   yatriwala-theme.js - so `.bc_detail_tour .yw-tour-app-detail` (yatriwala-production.css
   1493 and 1566) still reaches it with a mint fill and 124px of bottom padding below
   768px. Matched specificity here, no !important.

   Spacing is margin, not flex `gap`, because yatriwala-production.css:2461 sets
   `.yw-tour-app-detail { display: block !important }` and an !important display cannot be
   won back without another one. Margins behave identically in both modes, so the rhythm
   holds either way instead of depending on which sheet wins. */
.bc_detail_tour .yh-pkg,
.yh-pkg {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-bottom: 0;
    background: transparent;
    border: 0;
    color: var(--yh-navy);
    font-family: var(--yh-font);
}

.yh-pkg > * + * {
    margin-top: var(--yh-5);
}

/* yatriwala.css:9732 and 10378 reserve 164px under the page for the old two-bar stack. */
body.frontend-page .bc_detail_tour.yh-pkg-page {
    padding-bottom: 0;
}

@media (max-width: 767px) {
    .bc_detail_tour .yh-pkg,
    .yh-pkg {
        padding: var(--yh-3) var(--yh-gutter) var(--yh-5);
    }

    .yh-pkg > * + * {
        margin-top: var(--yh-4);
    }
}

/* ---- Breadcrumb ----------------------------------------------------------- */
.yh-pkg-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--yh-muted);
    font-size: var(--yh-small);
    line-height: 1.4;
}

body.frontend-page .yh-pkg-crumb a {
    color: var(--yh-link);
    text-decoration: none;
}

body.frontend-page .yh-pkg-crumb a:hover,
body.frontend-page .yh-pkg-crumb a:focus-visible {
    text-decoration: underline;
}

.yh-pkg-crumb i {
    font-size: 10px;
    opacity: .55;
}

/* One line at 390 - it wrapped to two and pushed the H1 down the first screen. */
@media (max-width: 767px) {
    .yh-pkg-crumb {
        flex-wrap: nowrap;
        margin-inline: calc(var(--yh-gutter) * -1);
        padding-inline: var(--yh-gutter);
        overflow-x: auto;
        scrollbar-width: none;
        white-space: nowrap;
    }

    .yh-pkg-crumb::-webkit-scrollbar {
        display: none;
    }

    .yh-pkg-crumb a {
        flex: 0 0 auto;
    }
}

.yh-pkg-crumb span[aria-current] {
    min-width: 0;
    overflow: hidden;
    color: var(--yh-navy);
    font-weight: var(--yh-w-bold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Head ----------------------------------------------------------------- */
.yh-pkg-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--yh-3);
}

.yh-pkg-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--yh-r-pill);
    background: var(--yh-accent-soft);
    color: var(--yh-accent-ink);
    font-size: var(--yh-micro);
    font-weight: var(--yh-w-heavy);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.yh-pkg-badge--fixed {
    background: rgba(23, 145, 95, .1);
    color: #0f6b46;
}

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

@media (max-width: 767px) {
    /* Contract: titles <= 24px on a phone. --yh-h1 clamps to 26px at 390. */
    body.frontend-page .yh-pkg-head h1.yh-pkg-title {
        font-size: 23px;
    }
}

.yh-pkg-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--yh-2) var(--yh-4);
    min-width: 0;
    color: var(--yh-muted);
    font-size: var(--yh-body);
    line-height: 1.45;
}

.yh-pkg-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.yh-pkg-meta i {
    color: var(--yh-accent);
    font-size: 13px;
}

.yh-pkg-meta__route {
    color: var(--yh-navy);
    font-weight: var(--yh-w-medium);
    overflow-wrap: anywhere;
}

.yh-pkg-meta__rating {
    color: var(--yh-navy);
    font-weight: var(--yh-w-bold);
}

.yh-pkg-meta__rating em {
    color: var(--yh-muted);
    font-style: normal;
    font-weight: var(--yh-w-regular);
}

/* Departs / returns / spots left / join by - the fixed-departure facts, unchanged. */
.yh-pkg-depart {
    display: flex;
    flex-wrap: wrap;
    gap: var(--yh-2) var(--yh-4);
    width: 100%;
    padding: var(--yh-3) var(--yh-4);
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-card);
    background: var(--yh-sand);
    color: var(--yh-navy);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-medium);
}

.yh-pkg-depart span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.yh-pkg-depart i {
    color: var(--yh-muted);
}

.yh-pkg-depart .is-urgent {
    color: var(--yh-danger);
    font-weight: var(--yh-w-heavy);
}

.yh-pkg-depart .is-urgent i {
    color: var(--yh-danger);
}

/* ---- Gallery -------------------------------------------------------------- */
/* The height is set on the GRID, not on the main photo. With the aspect ratio on the
   main image the side column sized itself from the thumbs' intrinsic height - 622px
   against a 337px photo - and left a 230px hole under the gallery. 2.4:1 is the same
   proportion: two thirds of the width at 16:10. */
.yh-pkg-gallery {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--yh-2);
    aspect-ratio: 2.4 / 1;
    border-radius: var(--yh-r-surface);
    overflow: hidden;
}

/* A package with one photo gets the whole width rather than an empty third. */
.yh-pkg-gallery:not(:has(.yh-pkg-gallery__thumb)) {
    grid-template-columns: minmax(0, 1fr);
    aspect-ratio: 16 / 10;
}

.yh-pkg-gallery:not(:has(.yh-pkg-gallery__thumb)) .yh-pkg-gallery__side {
    display: none;
}

.yh-pkg-gallery__main {
    position: relative;
    display: block;
    height: 100%;
    min-height: 0;
    background: var(--yh-sand);
    overflow: hidden;
}

.yh-pkg-gallery__main img,
.yh-pkg-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* auto-rows, not three fixed ones: two thumbs share the height instead of leaving a
   blank third row. */
.yh-pkg-gallery__side {
    display: grid;
    grid-auto-rows: minmax(0, 1fr);
    gap: var(--yh-2);
    height: 100%;
    min-height: 0;
}

.yh-pkg-gallery__thumb {
    position: relative;
    display: block;
    min-height: 0;
    background: var(--yh-sand);
    overflow: hidden;
}

.yh-pkg-gallery__more {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: rgba(11, 45, 84, .58);
    color: #fff;
    font-size: 19px;
    font-weight: var(--yh-w-heavy);
}

.yh-pkg-gallery__more small {
    font-size: var(--yh-micro);
    font-weight: var(--yh-w-medium);
    opacity: .9;
}

.yh-pkg-gallery__sale {
    position: absolute;
    left: var(--yh-3);
    top: var(--yh-3);
    padding: 6px 12px;
    border-radius: var(--yh-r-pill);
    background: var(--yh-accent);
    color: #fff;
    font-size: var(--yh-small);
    font-weight: var(--yh-w-heavy);
}

.yh-pkg-gallery__share {
    position: absolute;
    right: var(--yh-3);
    top: var(--yh-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--yh-line-warm);
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--yh-navy);
    font-size: 15px;
    box-shadow: var(--yh-shadow-1);
}

.yh-pkg-gallery__share:hover,
.yh-pkg-gallery__share:focus-visible {
    background: #fff;
    color: var(--yh-accent-ink);
}

@media (max-width: 767px) {
    .yh-pkg-gallery {
        grid-template-columns: minmax(0, 1fr);
        aspect-ratio: auto;
        border-radius: var(--yh-r-card);
    }

    .yh-pkg-gallery__main {
        aspect-ratio: 4 / 3;
        height: auto;
    }

    /* Column flow so two thumbs fill the row instead of leaving a third of it empty. */
    .yh-pkg-gallery__side {
        grid-auto-rows: auto;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        height: auto;
    }

    .yh-pkg-gallery__thumb {
        aspect-ratio: 4 / 3;
        border-radius: var(--yh-r-control);
    }
}

/* ---- Snapshot: the facts, and the whole money story, once -----------------
   Three blocks used to print the price for 2 within 400px of each other: a
   snapshot tile, a payment-plan card and (on packages with no review) a token
   tile. They are one block now: facts on the left, money on the right. The
   money half is the only place on the page body that carries the price and the
   token - the booking card beside it is the other, and that is the pair the
   contract allows. */
.yh-pkg-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--yh-4);
    padding: var(--yh-4);
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-surface);
    background: var(--yh-surface);
    box-shadow: var(--yh-shadow-1);
}

@media (min-width: 560px) {
    .yh-pkg-facts {
        grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
        align-items: start;
        gap: var(--yh-5);
        padding: var(--yh-5);
    }
}

.yh-pkg-facts__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: var(--yh-3);
    min-width: 0;
}

.yh-pkg-fact {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: var(--yh-3);
    border-radius: var(--yh-r-card);
    background: var(--yh-sand);
}

.yh-pkg-fact i {
    color: var(--yh-accent);
    font-size: 14px;
}

.yh-pkg-fact strong {
    color: var(--yh-navy);
    font-size: 15px;
    font-weight: var(--yh-w-heavy);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.yh-pkg-fact span {
    color: var(--yh-muted);
    font-size: var(--yh-small);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.yh-pkg-money {
    min-width: 0;
    padding: var(--yh-4);
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-card);
    background: linear-gradient(180deg, var(--yh-accent-soft) 0%, var(--yh-surface) 62%);
}

.yh-pkg-money__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--yh-3);
}

.yh-pkg-money__head span {
    color: var(--yh-accent-ink);
    font-size: var(--yh-micro);
    font-weight: var(--yh-w-heavy);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.yh-pkg-money__head strong {
    color: var(--yh-navy);
    font-size: var(--yh-h3);
    font-weight: var(--yh-w-heavy);
    line-height: 1.3;
}

.yh-pkg-money__rows {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-control);
    background: var(--yh-surface);
    overflow: hidden;
}

.yh-pkg-money__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--yh-2);
    min-width: 0;
    padding: 10px var(--yh-3);
    border-bottom: 1px solid var(--yh-line-warm);
}

.yh-pkg-money__row:last-child {
    border-bottom: 0;
}

.yh-pkg-money__row span {
    min-width: 0;
    color: var(--yh-muted);
    font-size: var(--yh-small);
    overflow-wrap: anywhere;
}

.yh-pkg-money__row strong {
    color: var(--yh-navy);
    font-size: 16px;
    font-weight: var(--yh-w-heavy);
    white-space: nowrap;
}

.yh-pkg-money__row.is-token {
    background: var(--yh-accent-soft);
}

.yh-pkg-money__row.is-token span {
    color: var(--yh-accent-ink);
    font-weight: var(--yh-w-bold);
}

.yh-pkg-money__row.is-token strong {
    color: var(--yh-accent-ink);
}

.yh-pkg-money__note {
    display: flex;
    gap: var(--yh-2);
    margin: var(--yh-3) 0 0;
    color: var(--yh-navy-soft);
    font-size: var(--yh-small);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.yh-pkg-money__note i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--yh-accent);
}

/* ---- The one-glance includes strip ---------------------------------------- */
.yh-pkg-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--yh-2);
}

.yh-pkg-strip span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-pill);
    background: var(--yh-surface);
    color: var(--yh-navy);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-medium);
    white-space: nowrap;
}

.yh-pkg-strip .is-active i {
    color: var(--yh-success);
}

/* Not "greyed out": struck through and named, because the strip is labelled
   "Package includes" and every package in the catalogue excludes airfare. */
.yh-pkg-strip .is-excluded {
    background: var(--yh-sand);
    color: var(--yh-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(100, 116, 139, .6);
}

.yh-pkg-strip .is-excluded i {
    color: var(--yh-muted);
    text-decoration: none;
}

@media (max-width: 767px) {
    .yh-pkg-strip {
        gap: 6px;
        margin-inline: calc(var(--yh-gutter) * -1);
        padding-inline: var(--yh-gutter);
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .yh-pkg-strip::-webkit-scrollbar {
        display: none;
    }
}

/* ---- Quick actions -------------------------------------------------------- */
.yh-pkg-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--yh-3);
}

body.frontend-page a.yh-pkg-actions__item,
.yh-pkg-actions__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--yh-2);
    min-height: 48px;
    padding: 0 var(--yh-4);
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-control);
    background: var(--yh-surface);
    color: var(--yh-navy);
    font-size: var(--yh-body);
    font-weight: var(--yh-w-bold);
    text-align: center;
    text-decoration: none;
}

body.frontend-page a.yh-pkg-actions__item:hover,
body.frontend-page a.yh-pkg-actions__item:focus-visible,
.yh-pkg-actions__item:hover,
.yh-pkg-actions__item:focus-visible {
    border-color: var(--yh-accent);
    color: var(--yh-accent-ink);
    text-decoration: none;
}

.yh-pkg-actions__item i {
    color: var(--yh-accent);
}

/* ---- Section tabs --------------------------------------------------------- */
.yh-pkg-tabs {
    position: sticky;
    top: 78px;
    z-index: 6;
    display: flex;
    gap: var(--yh-2);
    margin-inline: calc(var(--yh-gutter) * -1);
    padding: var(--yh-2) var(--yh-gutter);
    background: var(--yh-canvas);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.yh-pkg-tabs::-webkit-scrollbar {
    display: none;
}

body.frontend-page .yh-pkg-tabs a,
.yh-pkg-tabs a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 var(--yh-4);
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-pill);
    background: var(--yh-surface);
    color: var(--yh-link);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-bold);
    white-space: nowrap;
    text-decoration: none;
}

body.frontend-page .yh-pkg-tabs a.is-active,
.yh-pkg-tabs a.is-active {
    border-color: var(--yh-navy);
    background: var(--yh-navy);
    color: #fff;
}

@media (min-width: 768px) {
    .yh-pkg-tabs {
        top: 96px;
        margin-inline: 0;
        padding-inline: 0;
    }
}

/* ---- Section card --------------------------------------------------------- */
.yh-pkg-section {
    padding: var(--yh-5);
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-surface);
    background: var(--yh-surface);
    box-shadow: var(--yh-shadow-1);
    scroll-margin-top: 130px;
}

@media (max-width: 767px) {
    .yh-pkg-section {
        padding: var(--yh-4);
        border-radius: var(--yh-r-card);
        scroll-margin-top: 118px;
    }
}

.yh-pkg-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--yh-2) var(--yh-4);
    margin-bottom: var(--yh-4);
}

body.frontend-page .yh-pkg-section__head strong,
.yh-pkg-section__head strong {
    color: var(--yh-navy);
    font-size: var(--yh-h2);
    font-weight: var(--yh-w-heavy);
    line-height: var(--yh-lh-heading);
    letter-spacing: -0.015em;
}

.yh-pkg-section__head > span {
    color: var(--yh-muted);
    font-size: var(--yh-small);
}

body.frontend-page a.yh-pkg-section__action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 var(--yh-3);
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-control);
    color: var(--yh-link);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-bold);
    text-decoration: none;
}

body.frontend-page a.yh-pkg-section__action:hover,
body.frontend-page a.yh-pkg-section__action:focus-visible {
    border-color: var(--yh-accent);
    color: var(--yh-accent-ink);
}

.yh-pkg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--yh-2);
    min-height: 48px;
    padding: 0 var(--yh-5);
    border: 0;
    border-radius: var(--yh-r-control);
    background: var(--yh-accent);
    color: #fff;
    font-size: var(--yh-body);
    font-weight: var(--yh-w-bold);
}

.yh-pkg-btn:hover,
.yh-pkg-btn:focus-visible {
    background: #e2740f;
    color: #fff;
}

.yh-pkg-empty p {
    margin: 0 0 var(--yh-4);
    color: var(--yh-navy-soft);
    font-size: var(--yh-body);
    line-height: var(--yh-lh-body);
}

/* ---- Overview + highlights ------------------------------------------------
   Highlights are admin-authored only. A package with none has no second column
   and the prose takes the full width, rather than the column being filled with
   the inclusion sentences it used to fall back to. */
.yh-pkg-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--yh-5);
}

@media (min-width: 1024px) {
    .yh-pkg-overview {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        gap: var(--yh-6);
    }

    .yh-pkg-overview.is-single {
        grid-template-columns: minmax(0, 1fr);
    }
}

.yh-pkg-overview__col {
    min-width: 0;
}

.yh-pkg-rich {
    max-width: 64ch;
    color: var(--yh-navy-soft);
    font-size: 15px;
    line-height: var(--yh-lh-body);
}

.yh-pkg-rich p {
    margin: 0 0 var(--yh-3);
}

.yh-pkg-rich p:last-child {
    margin-bottom: 0;
}

.yh-pkg-rich ul,
.yh-pkg-rich ol {
    margin: 0 0 var(--yh-3);
    padding-left: 20px;
}

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

.yh-pkg-highlight {
    display: flex;
    align-items: flex-start;
    gap: var(--yh-3);
    min-width: 0;
    padding: var(--yh-3);
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-card);
    background: var(--yh-sand);
}

.yh-pkg-highlight i {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--yh-accent);
    font-size: 15px;
}

.yh-pkg-highlight span {
    min-width: 0;
    color: var(--yh-navy);
    font-size: var(--yh-body);
    font-weight: var(--yh-w-medium);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* ---- Day by day ----------------------------------------------------------- */
.yh-pkg-days {
    display: flex;
    flex-direction: column;
    gap: var(--yh-2);
}

.yh-pkg-day {
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-card);
    background: var(--yh-surface);
    overflow: hidden;
}

.yh-pkg-day > summary {
    display: flex;
    align-items: center;
    gap: var(--yh-3);
    min-height: 56px;
    padding: var(--yh-3) var(--yh-4);
    background: var(--yh-sand);
    cursor: pointer;
    list-style: none;
}

.yh-pkg-day > summary::-webkit-details-marker {
    display: none;
}

.yh-pkg-day__node {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--yh-navy);
    color: #fff;
    font-size: var(--yh-small);
    font-weight: var(--yh-w-heavy);
}

.yh-pkg-day__heading {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}

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

.yh-pkg-day__heading strong {
    color: var(--yh-navy);
    font-size: 15px;
    font-weight: var(--yh-w-bold);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.yh-pkg-day > summary > i {
    flex: 0 0 auto;
    color: var(--yh-muted);
    transition: transform .18s ease;
}

.yh-pkg-day[open] > summary > i {
    transform: rotate(180deg);
}

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

.yh-pkg-day__body > img {
    display: block;
    width: 100%;
    max-height: 260px;
    margin-bottom: var(--yh-3);
    border-radius: var(--yh-r-card);
    object-fit: cover;
}

.yh-pkg-day__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--yh-2);
    margin-bottom: var(--yh-3);
}

.yh-pkg-day__meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--yh-r-pill);
    background: var(--yh-accent-soft);
    color: var(--yh-accent-ink);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-medium);
}

.yh-pkg-day__desc,
.yh-pkg-day__body > p {
    margin: 0 0 var(--yh-3);
    color: var(--yh-navy-soft);
    font-size: var(--yh-body);
    line-height: var(--yh-lh-body);
}

.yh-pkg-day__desc ul,
.yh-pkg-day__list {
    margin: 0 0 var(--yh-3);
    padding-left: 18px;
    color: var(--yh-navy-soft);
    font-size: var(--yh-body);
    line-height: var(--yh-lh-body);
}

.yh-pkg-day__optional {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--yh-2);
    padding-top: var(--yh-3);
    border-top: 1px dashed var(--yh-line-warm);
}

.yh-pkg-day__optional strong {
    color: var(--yh-navy);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-heavy);
}

.yh-pkg-day__optional span {
    padding: 5px 10px;
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-pill);
    color: var(--yh-muted);
    font-size: var(--yh-small);
}

/* ---- Hotels --------------------------------------------------------------- */
.yh-pkg-hotels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--yh-3);
}

.yh-pkg-hotel {
    display: flex;
    gap: var(--yh-3);
    min-width: 0;
    padding: var(--yh-3);
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-card);
    background: var(--yh-surface);
}

.yh-pkg-hotel__media {
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
    border-radius: var(--yh-r-control);
    background: var(--yh-sand);
    overflow: hidden;
}

.yh-pkg-hotel__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yh-pkg-hotel__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--yh-accent);
    font-size: 22px;
}

.yh-pkg-hotel__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.yh-pkg-hotel__stars {
    color: var(--yh-accent);
    font-size: 11px;
    letter-spacing: 1px;
}

.yh-pkg-hotel__body > strong {
    color: var(--yh-navy);
    font-size: 15px;
    font-weight: var(--yh-w-bold);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.yh-pkg-hotel__meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    color: var(--yh-muted);
    font-size: var(--yh-small);
}

.yh-pkg-hotel__meta span {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    overflow-wrap: anywhere;
}

.yh-pkg-hotel__meta i {
    margin-top: 3px;
    flex: 0 0 auto;
}

/* ---- Travel support ------------------------------------------------------- */
.yh-pkg-support {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--yh-3);
}

.yh-pkg-support__row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: start;
    gap: 2px var(--yh-2);
    padding: var(--yh-3);
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-card);
    background: var(--yh-sand);
}

.yh-pkg-support__row i {
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--yh-surface);
    color: var(--yh-accent);
    font-size: 13px;
}

.yh-pkg-support__row strong {
    min-width: 0;
    color: var(--yh-navy);
    font-size: var(--yh-body);
    font-weight: var(--yh-w-bold);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.yh-pkg-support__row span {
    min-width: 0;
    color: var(--yh-muted);
    font-size: var(--yh-small);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* ---- Included / not included ---------------------------------------------- */
.yh-pkg-inex {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--yh-3);
}

.yh-pkg-inex__card {
    min-width: 0;
    padding: var(--yh-4);
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-card);
    background: var(--yh-surface);
}

.yh-pkg-inex__head {
    display: flex;
    align-items: center;
    gap: var(--yh-2);
    margin-bottom: var(--yh-3);
    padding-bottom: var(--yh-2);
    border-bottom: 1px solid var(--yh-line-warm);
    color: var(--yh-navy);
    font-size: var(--yh-h3);
    font-weight: var(--yh-w-heavy);
}

.yh-pkg-inex__card--in .yh-pkg-inex__head i {
    color: var(--yh-success);
}

.yh-pkg-inex__card--ex .yh-pkg-inex__head i {
    color: var(--yh-danger);
}

.yh-pkg-inex__card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.yh-pkg-inex__card li {
    display: flex;
    align-items: flex-start;
    gap: var(--yh-2);
    padding: 7px 0;
    color: var(--yh-navy-soft);
    font-size: var(--yh-body);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.yh-pkg-inex__card li i {
    flex: 0 0 auto;
    margin-top: 4px;
    font-size: 11px;
}

.yh-pkg-inex__card--in li i {
    color: var(--yh-success);
}

.yh-pkg-inex__card--ex li i {
    color: var(--yh-danger);
}

/* ---- Before you book ------------------------------------------------------ */
.yh-pkg-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--yh-2);
}

.yh-pkg-accordion details {
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-card);
    background: var(--yh-surface);
    overflow: hidden;
}

.yh-pkg-accordion summary {
    display: flex;
    align-items: center;
    gap: var(--yh-3);
    min-height: 52px;
    padding: var(--yh-3) var(--yh-4);
    cursor: pointer;
    color: var(--yh-navy);
    font-size: var(--yh-body);
    font-weight: var(--yh-w-bold);
    list-style: none;
}

.yh-pkg-accordion summary::-webkit-details-marker {
    display: none;
}

.yh-pkg-accordion summary > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.yh-pkg-accordion__icon {
    flex: 0 0 auto;
    color: var(--yh-accent);
}

.yh-pkg-accordion__chevron {
    flex: 0 0 auto;
    color: var(--yh-muted);
    transition: transform .18s ease;
}

.yh-pkg-accordion details[open] .yh-pkg-accordion__chevron {
    transform: rotate(180deg);
}

.yh-pkg-accordion details > p {
    margin: 0;
    padding: 0 var(--yh-4) var(--yh-4);
    color: var(--yh-navy-soft);
    font-size: var(--yh-body);
    line-height: var(--yh-lh-body);
}

.yh-pkg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--yh-2);
    padding: 0 var(--yh-4) var(--yh-4);
}

.yh-pkg-chips span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: var(--yh-r-pill);
    background: var(--yh-sand);
    color: var(--yh-navy);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-medium);
}

.yh-pkg-chips i {
    color: var(--yh-accent);
}

/* ---- Umrah essentials (carried over unchanged, W7: not extended) ----------- */
.yh-pkg-umrah__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--yh-3);
}

.yh-pkg-umrah__grid button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: var(--yh-3);
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-card);
    background: var(--yh-sand);
    text-align: left;
}

.yh-pkg-umrah__grid i {
    color: var(--yh-accent);
}

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

.yh-pkg-umrah__grid strong {
    color: var(--yh-navy);
    font-size: var(--yh-body);
    font-weight: var(--yh-w-bold);
}

.yh-pkg-umrah__grid small {
    color: var(--yh-muted);
    font-size: var(--yh-small);
}

.yh-pkg-umrah__strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--yh-2);
    margin-top: var(--yh-3);
}

.yh-pkg-umrah__strip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--yh-muted);
    font-size: var(--yh-small);
}

.yh-pkg-umrah__strip i {
    color: var(--yh-success);
}

/* ==========================================================================
   THE BOOKING CARD  (T2)
   --------------------------------------------------------------------------
   Everything from .form-book down is the Vue booking flow and is untouched:
   dates, travellers, group_pricing, .yw-room-choice, .yw-group-breakdown, the
   breakdown list and the submit. These rules are the surface around it.
   ========================================================================== */
.yh-pkg-layout > .yw-package-detail-booking .bc_single_book {
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-surface);
    background: var(--yh-surface);
    box-shadow: var(--yh-shadow-2);
    overflow: hidden;
}

/* A heading, not a navy band. */
.yh-pkg-layout .yh-pkg-book__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--yh-3);
    padding: var(--yh-4);
    border-bottom: 1px solid var(--yh-line-warm);
    background: linear-gradient(180deg, var(--yh-accent-soft) 0%, var(--yh-surface) 100%);
    color: var(--yh-navy);
}

.yh-pkg-layout .yh-pkg-book__head > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.yh-pkg-layout .yh-pkg-book__head strong {
    color: var(--yh-navy);
    font-size: var(--yh-h3);
    font-weight: var(--yh-w-heavy);
    line-height: 1.3;
}

.yh-pkg-layout .yh-pkg-book__head span {
    color: var(--yh-muted);
    font-size: var(--yh-small);
    line-height: 1.4;
}

.yh-pkg-layout .yh-pkg-book__head button {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(11, 45, 84, .06);
    color: var(--yh-navy);
}

/* Beside the page there is nothing to dismiss; the close belongs to the phone sheet. */
@media (min-width: 768px) {
    .yh-pkg-layout .yh-pkg-book__head button {
        display: none;
    }
}

.yh-pkg-book__price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--yh-4) var(--yh-4) var(--yh-3);
}

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

.yh-pkg-book__amount {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--yh-2);
    min-width: 0;
}

.yh-pkg-book__amount strong {
    color: var(--yh-navy);
    font-size: 27px;
    font-weight: var(--yh-w-heavy);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.yh-pkg-book__amount del {
    color: var(--yh-muted);
    font-size: var(--yh-body);
    text-decoration: line-through;
}

.yh-pkg-book__off {
    padding: 3px 9px;
    border-radius: var(--yh-r-pill);
    background: var(--yh-accent);
    color: #fff;
    font-size: var(--yh-micro);
    font-style: normal;
    font-weight: var(--yh-w-heavy);
}

.yh-pkg-book__rows {
    display: flex;
    flex-direction: column;
    margin: 0 var(--yh-4) var(--yh-4);
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-control);
    overflow: hidden;
}

.yh-pkg-book__rows > div {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--yh-2);
    padding: 10px var(--yh-3);
    border-bottom: 1px solid var(--yh-line-warm);
}

.yh-pkg-book__rows > div:last-child {
    border-bottom: 0;
}

.yh-pkg-book__rows i {
    color: var(--yh-accent);
    font-size: 13px;
}

.yh-pkg-book__rows span {
    min-width: 0;
    color: var(--yh-muted);
    font-size: var(--yh-small);
    overflow-wrap: anywhere;
}

.yh-pkg-book__rows strong {
    color: var(--yh-navy);
    font-size: 15px;
    font-weight: var(--yh-w-heavy);
    white-space: nowrap;
}

/* The refund promise sits under the token amount, where hesitation happens. */
.yh-pkg-book__refund {
    display: flex;
    gap: var(--yh-2);
    margin: 0 var(--yh-4) var(--yh-4);
    padding: var(--yh-3);
    border: 1px solid rgba(23, 145, 95, .22);
    border-radius: var(--yh-r-control);
    background: rgba(23, 145, 95, .07);
    color: #0f6b46;
    font-size: var(--yh-small);
    line-height: 1.5;
}

.yh-pkg-book__refund i {
    flex: 0 0 auto;
    margin-top: 2px;
}

.yh-pkg-book__refund strong {
    display: block;
    font-weight: var(--yh-w-heavy);
}

.yh-pkg-book__helper {
    display: flex;
    gap: var(--yh-2);
    margin: 0 var(--yh-4) var(--yh-4);
    color: var(--yh-muted);
    font-size: var(--yh-small);
    line-height: 1.5;
}

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

.yh-pkg-book__quote .yw-book-quote__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--yh-2);
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: var(--yh-r-control);
    background: var(--yh-accent);
    color: #fff;
    font-size: 15px;
    font-weight: var(--yh-w-heavy);
}

.yh-pkg-book__quote .yw-book-quote__cta:hover,
.yh-pkg-book__quote .yw-book-quote__cta:focus-visible {
    background: #e2740f;
    color: #fff;
}

.yh-pkg-book__quote > p {
    margin: var(--yh-3) 0 0;
    color: var(--yh-navy-soft);
    font-size: var(--yh-small);
    line-height: 1.55;
}

.yh-pkg-book__quote ul {
    margin: var(--yh-3) 0 0;
    padding: 0;
    list-style: none;
}

.yh-pkg-book__quote li {
    display: flex;
    align-items: flex-start;
    gap: var(--yh-2);
    padding: 5px 0;
    color: var(--yh-muted);
    font-size: var(--yh-small);
    line-height: 1.45;
}

.yh-pkg-book__quote li i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--yh-success);
}

/* ==========================================================================
   ONE FIXED BAR AT 390  (T3)
   --------------------------------------------------------------------------
   Measured before: two fixed bars stacked at the bottom of the package page -
   the booking bar (374x70, z 1040) and the site tab bar (390x67, z 95) - over
   160px of body padding. Three floating things on a 390px screen, on the one
   page where a single action matters.

   The booking bar stays: it carries the token figure and the primary action,
   and this is a product screen, like the app's. The site tab bar is hidden HERE
   ONLY, keyed off the package page's own root element, exactly the :has()
   pattern yatriwala-home.css already used for the body padding. The header is
   still one scroll away and the floating WhatsApp button is unchanged.

   `.yw-tour-app-detail` alone is not enough: detail-offline.blade.php and
   yatriwala-service-offline.blade.php carry it too, and those degraded pages
   should keep the site nav. `.yh-pkg` is on the real package page only, so the
   selector asks for both. Still (0,3,1) against the legacy (0,1,0), and this
   sheet loads last, so no !important is needed.
   ========================================================================== */
body:has(.yw-tour-app-detail.yh-pkg) .yw-global-mobile-tabbar {
    display: none;
}

@media (max-width: 991px) {
    /* 70 bar + 26 so the last footer link is tappable, not merely visible. It was
       160px: 67 tab bar + 70 bar + 23, and the tab bar is gone. */
    body:has(.yw-tour-app-detail.yh-pkg) {
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }
}

.yh-pkg-bar {
    position: fixed;
    right: 8px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 8px;
    z-index: 1040;                       /* above the tab bar's 95 and the page */
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(96px, auto) auto;
    align-items: center;
    gap: var(--yh-2);
    padding: 10px 12px;
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-card);
    background: var(--yh-surface);
    box-shadow: 0 -6px 26px rgba(11, 45, 84, .14);
}

.yh-pkg-bar--quote {
    grid-template-columns: minmax(0, 1fr) auto;
}

.yh-pkg-bar__price {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.yh-pkg-bar__price span {
    color: var(--yh-muted);
    font-size: 10px;
    font-weight: var(--yh-w-heavy);
    letter-spacing: .09em;
    text-transform: uppercase;
}

.yh-pkg-bar__price strong {
    color: var(--yh-navy);
    font-size: 18px;
    font-weight: var(--yh-w-heavy);
    line-height: 1.2;
    white-space: nowrap;
}

.yh-pkg-bar__alt,
.yh-pkg-bar__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-control);
    background: var(--yh-surface);
    color: var(--yh-navy);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-heavy);
    white-space: nowrap;
}

body.frontend-page a.yh-pkg-bar__cta,
.yh-pkg-bar__cta {
    border-color: var(--yh-accent);
    background: var(--yh-accent);
    color: #fff;
    text-decoration: none;
}

/* The bar is one line: price + action. The reassurance sentence it used to carry
   is in the snapshot's money block, 60px up the page. */
.yh-pkg-bar__note {
    display: none;
}

/* The sidebar is the conversion surface from 768px, so no bottom bar exists there. */
@media (min-width: 768px) {
    .yh-pkg-bar {
        display: none;
    }
}

/* ---- Package page follow-up (23 Sep 2026) --------------------------------
   From 1024px the booking card on the right already states the price for 2, the token and
   the balance, so the money block beside the facts repeated all three. It stays below that
   width, where there is no side card. The facts then take the full row. */
@media (min-width: 1024px) {
    .yh-pkg-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .yh-pkg-facts > .yh-pkg-money {
        display: none;
    }
}

/* ==========================================================================
   PACKAGE PAGE, group B: the tail  specs/tasks/07-package-page.md, T7 and T8
   --------------------------------------------------------------------------
   The last two blocks of the page: "Similar trips", now the listing's own card,
   and the closing band, which used to end the page on an empty white square.
   ========================================================================== */

/* ---- Similar trips, group B / T7 ------------------------------------------
   The cards in this rail ARE the /tour cards: <x-tour-card> through the
   listing's own loop-grid partial. Nothing here restyles them - every card rule
   is in "LISTING (/tour)" above and is shared with the destination pages - this
   is only the rail they sit in.

   Two tracks, not the listing's three. The rail lives in the page's left column
   (766px at 1440), where two tracks give a 374px card - between the two sizes
   this card already has live: 389px on a destination page and 287px on /tour,
   whose grid shares the row with the filter rail. Three tracks would draw it at
   243px and four at 180px, below anything /tour shows on a desktop, which is
   the opposite of "the same card as /tour". At 390 it is two across, as /tour
   is. */
.yh-pkg-similar__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--yh-3);
}

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

/* Two legacy rules on THIS page reach inside the shared card; neither exists on /tour,
   and both are !important, so they can only be answered with !important. The values
   restated are the card's own, copied from yatriwala-home.css (.yh-card__title 1537,
   2608 and 2884; .yh-price small 1596 and 2941), and they are scoped to this rail so no
   other card anywhere is touched.

   1. yatriwala.css:10524, inside @media (max-width: 767px):
      `.yw-service-detail-page h3 { margin: 0 0 12px; font-size: 20px !important;
      font-weight: 950 }`. The card title is an <h3>, so at 390 it drew 20px/950 with a
      12px bottom margin where the listing draws 13px/700/0.
   2. yatriwala-tour-detail.css:938:
      `.yw-tour-app-detail small { font-size: 12.5px !important }`. The price's "FROM"
      label is a <small>, so it drew 12.5px where the listing draws 11px, and 10.5px
      from 641px. */
.yh-pkg-similar .yh-card__title,
.yh-pkg-similar .yh-card__title a {
    font-size: 15.5px !important;
    font-weight: 700 !important;
    line-height: 1.32 !important;
}

.yh-pkg-similar .yh-card__title {
    margin: 0 !important;
}

@media (max-width: 640px) {
    .yh-pkg-similar .yh-card__title,
    .yh-pkg-similar .yh-card__title a {
        font-size: 13px !important;
        line-height: 1.28 !important;
    }
}

@media (min-width: 641px) {
    .yh-pkg-similar .yh-card__title,
    .yh-pkg-similar .yh-card__title a {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    .yh-pkg-similar .yh-card__title {
        margin: 0 0 4px !important;
    }
}

.yh-pkg-similar .yh-price small {
    font-size: 11px !important;
}

@media (min-width: 641px) {
    .yh-pkg-similar .yh-price small {
        font-size: 10.5px !important;
    }
}

/* One card per row under ~420px would be the listing's behaviour if it had one;
   it does not - /tour stays two across at 390 - so this rail does too. */

/* The no-related-packages state: one link out and the enquiry trigger. */
.yh-pkg-empty__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--yh-3);
}

/* `body.frontend-page a { color: var(--yw-forest) }` (yatriwala.css ~2630) is
   0,2,1 and beats the plain .yh-pkg-btn, which was only ever used on <button>
   until this link. Restated at matching specificity, no !important. */
body.frontend-page a.yh-pkg-btn {
    color: #fff;
    text-decoration: none;
}

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

.yh-pkg-btn--ghost {
    border: 1px solid var(--yh-line-warm);
    background: var(--yh-surface);
    color: var(--yh-navy);
}

.yh-pkg-btn--ghost:hover,
.yh-pkg-btn--ghost:focus-visible {
    border-color: var(--yh-accent);
    background: var(--yh-surface);
    color: var(--yh-accent-ink);
}

/* ---- Closing band, group B / T8 -------------------------------------------
   One mark, one line, one action, on the same warm gradient as the booking
   card's head. The mark was a 180KB crop of the wordmark drawn in a small box,
   which rendered as an empty white square (finding 9); it is now the page's own
   icon language on the brand tint, the answer yh-svc-mark gives on the service
   pages. No claim is made here that the copy did not already make. */
.yh-pkg-help {
    display: flex;
    align-items: center;
    gap: var(--yh-4);
    padding: var(--yh-5);
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-surface);
    background: linear-gradient(180deg, #fff0e1, var(--yh-surface));
    box-shadow: var(--yh-shadow-1);
}

.yh-pkg-help__mark {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--yh-tint);
    color: var(--yh-link);
    font-size: 22px;
}

.yh-pkg-help__text {
    flex: 1 1 auto;
    min-width: 0;
}

body.frontend-page .yh-pkg-help__text strong,
.yh-pkg-help__text strong {
    display: block;
    color: var(--yh-navy);
    font-size: var(--yh-h3);
    font-weight: var(--yh-w-heavy);
    line-height: var(--yh-lh-heading);
}

.yh-pkg-help__text p {
    margin: 4px 0 0;
    color: var(--yh-navy-soft);
    font-size: var(--yh-body);
    line-height: var(--yh-lh-body);
}

.yh-pkg-help .yh-pkg-btn {
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .yh-pkg-help {
        flex-wrap: wrap;
        gap: var(--yh-3) var(--yh-4);
        padding: var(--yh-4);
        border-radius: var(--yh-r-card);
    }

    .yh-pkg-help__mark {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .yh-pkg-help .yh-pkg-btn {
        width: 100%;
    }
}

/* The band is the last content on the page, and the footer already brings 64px of its own
   top margin - exactly the gap /tour and /contact leave under their last block. The page
   layout's extra 64px of bottom padding (the .yh-pkg-layout rule in group A above) doubled
   that to a 128px empty strip under the band. Same specificity, later in the file. */
@media (min-width: 768px) {
    .yh-pkg-layout {
        padding-bottom: 0;
    }
}

/* ==========================================================================
   DOC PAGES (/page/{slug}, /photo-credits)  specs/tasks/08-static-pages.md, family P
   24 Sep 2026

   The seven content pages: About, FAQ, the four policy pages and Photo Credits.
   Their shell was built on 17 Aug, before HT / V / E / C / D shipped, so it kept a
   cold --yh-tint band, a hand-set 44px H1 and an 860px measure (107-119 characters
   a line at 1440, measured). This block replaces it, whole: the STATIC / LEGAL CONTENT PAGES
   and PHOTO CREDITS blocks were DELETED from yatriwala-home.css in the same change,
   so there is one copy of every .yh-doc__* rule and it is this one.

     yh-doc            the page
     yh-doc__hero      the warm head band, same gradient as /hotel, /visa, /contact
     yh-doc__updated   "Last updated <date>", printed only from core_pages.updated_at
     yh-doc__toc       the plain anchor list, only on pages with 4 or more <h2>
     yh-doc__article   one column, one measure, the WYSIWYG prose
     yh-doc__cross     the one end strip that replaced the repeated sticky aside
     yh-credits__*     the /photo-credits list, inside the same article measure
   ========================================================================== */
.yh-doc {
    /* One measure for the whole page, declared here so the head band and the article
       below it read the same number and their left edges line up exactly. px, not ch:
       ch resolves against each element's own font-size, and the band, the contents
       list and the article do not share one. Measured on /page/terms-and-conditions
       at 1440: 540px at 17px gives 59-72 characters a full line, median 67. The old
       860px column gave 107-119, median 115. */
    --yh-doc-measure: 540px;
    background: var(--yh-canvas);
}

/* ---- Head band ------------------------------------------------------------
   The yh-svc-hero gradient, so these pages arrive looking like the six families
   shipped since August rather than like a different site. */
.yh-doc__hero {
    background: linear-gradient(180deg, var(--yh-accent-soft) 0%, var(--yh-canvas) 100%);
}

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

/* body.frontend-page because the legacy sheets reach these pages; the token, not a
   hand-set clamp, so the H1 is the same size as every other family's. */
body.frontend-page .yh-doc__hero h1,
body.frontend-page .yh-doc__title {
    width: 100%;
    max-width: var(--yh-doc-measure);
    margin: 0 auto;
    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-doc__hero p,
.yh-doc__lead {
    width: 100%;
    max-width: var(--yh-doc-measure);
    margin: var(--yh-2) auto 0;
    color: var(--yh-navy-soft);
    font-size: 15px;
    line-height: 1.5;
}

/* Two classes, not one, so it wins on specificity alone over the .yh-doc__hero p
   rule above - it is a sibling paragraph in the same band. */
.yh-doc__hero .yh-doc__updated {
    margin: var(--yh-3) auto 0;
    color: var(--yh-muted);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-medium);
    letter-spacing: .01em;
}

/* ---- Layout ---------------------------------------------------------------
   One column. The 300px aside column is gone: it held one small sticky card and
   was empty for the rest of a 700px scroll on all six pages.
   Everything in the page - band, contents, article, end strip - is one centred
   column of --yh-doc-measure, so nothing is left hanging beside empty space. */
.yh-doc__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--yh-6);
    padding-bottom: var(--yh-4);   /* + the footer's own 64px top margin = ~80px */
}

/* ---- Contents -------------------------------------------------------------
   Plain anchors to ids the purifier keeps. No JavaScript, no scroll-spy, no
   sticky: a policy page needs a way in, not a widget. */
.yh-doc__toc {
    width: 100%;
    max-width: var(--yh-doc-measure);
    margin: 0 auto var(--yh-6);
    padding: var(--yh-4) var(--yh-5);
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-card);
    background: var(--yh-sand);
}

.yh-doc__toc-label {
    display: block;
    margin: 0 0 var(--yh-2);
    color: var(--yh-muted);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-heavy);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.yh-doc__toc-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 36px at 1440 keeps a five-item list compact; the phone block below takes it to the
   44px touch target. */
body.frontend-page .yh-doc__toc-list a {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: var(--yh-1) 0;
    color: var(--yh-link);
    font-size: 15px;
    font-weight: var(--yh-w-medium);
    line-height: 1.35;
    text-decoration: none;
}

body.frontend-page .yh-doc__toc-list a:hover,
body.frontend-page .yh-doc__toc-list a:focus-visible {
    text-decoration: underline;
}

/* ---- Article --------------------------------------------------------------
   The body is a WYSIWYG blob the owner edits in Admin, so every rule here is a
   descendant rule rather than a class on the markup. 17px, not --yh-body (14px):
   that token is the UI size for cards and controls, and this is long-form reading. */
.yh-doc__article {
    width: 100%;
    min-width: 0;
    max-width: var(--yh-doc-measure);
    margin-inline: auto;
    color: var(--yh-ink);
    font-size: 17px;
    line-height: 1.7;
}

.yh-doc__article > * {
    margin-top: var(--yh-4);
    margin-bottom: 0;
}

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

/* Every h2 gets four times more space above it than below, so the sections read as
   sections. scroll-margin-top keeps an anchored heading clear of the sticky header. */
.yh-doc__article h2 {
    margin-top: var(--yh-7);
    color: var(--yh-navy);
    font-size: var(--yh-h2);
    line-height: var(--yh-lh-heading);
    font-weight: var(--yh-w-heavy);
    letter-spacing: -0.01em;
    scroll-margin-top: 100px;
}

.yh-doc__article h2 + * {
    margin-top: var(--yh-3);
}

.yh-doc__article h3 {
    margin-top: var(--yh-5);
    color: var(--yh-navy);
    font-size: var(--yh-h3);
    line-height: var(--yh-lh-heading);
    font-weight: var(--yh-w-bold);
    scroll-margin-top: 100px;
}

.yh-doc__article h3 + * {
    margin-top: var(--yh-2);
}

.yh-doc__article ul,
.yh-doc__article ol {
    padding-left: var(--yh-5);
}

.yh-doc__article li + li {
    margin-top: var(--yh-2);
}

.yh-doc__article li::marker {
    color: var(--yh-muted);
}

/* body.frontend-page a { color: var(--yw-forest) } (legacy, yatriwala.css) outranks a
   single-class rule on every inner page, so the article link colour is scoped too. */
body.frontend-page .yh-doc__article a {
    color: var(--yh-link);
    font-weight: var(--yh-w-medium);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.yh-doc__article strong,
.yh-doc__article b {
    color: var(--yh-navy);
    font-weight: var(--yh-w-bold);
}

.yh-doc__article img {
    max-width: 100%;
    height: auto;
    border-radius: var(--yh-r-card);
}

.yh-doc__article blockquote {
    margin-inline: 0;
    padding: var(--yh-3) var(--yh-5);
    border-left: 3px solid var(--yh-accent);
    border-radius: 0 var(--yh-r-card) var(--yh-r-card) 0;
    background: var(--yh-sand);
    color: var(--yh-navy);
}

/* config/purifier.php does not allow thead/tbody, so a table pasted into the editor
   arrives as bare rows: every cell rule keys on th/td. width:max-content + max-width
   lets a wide table scroll inside its own box instead of pushing the page sideways. */
.yh-doc__article table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 15px;
}

.yh-doc__article th,
.yh-doc__article td {
    min-width: 140px;   /* without a floor the cells just squeeze instead of scrolling */
    padding: 10px var(--yh-3);
    border: 1px solid var(--yh-line);
    text-align: left;
    vertical-align: top;
}

.yh-doc__article th {
    background: var(--yh-sand);
    color: var(--yh-navy);
    font-weight: var(--yh-w-bold);
}

.yh-doc__article hr {
    height: 1px;
    margin: var(--yh-6) 0;
    border: 0;
    background: var(--yh-line);
}

/* ---- End strip ------------------------------------------------------------
   One offer, once, after the reading - the replacement for the sticky "Need help
   with a trip?" card that sat beside the reader's line on all six pages. Quiet on
   purpose: the header, the footer, the WhatsApp button and the phone tab bar all
   make the same offer already. */
.yh-doc__cross {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--yh-3) var(--yh-4);
    width: 100%;
    max-width: var(--yh-doc-measure);
    margin: var(--yh-7) auto 0;
    padding-top: var(--yh-5);
    border-top: 1px solid var(--yh-line);
}

.yh-doc__cross p {
    margin: 0;
    color: var(--yh-navy-soft);
    font-size: 15px;
    line-height: 1.45;
}

body.frontend-page .yh-doc__cross-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--yh-2);
    min-height: 44px;
    padding: 0 var(--yh-5);
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-pill);
    background: var(--yh-surface);
    color: var(--yh-link);
    font-size: 15px;
    font-weight: var(--yh-w-bold);
    text-decoration: none;
}

body.frontend-page .yh-doc__cross-link:hover,
body.frontend-page .yh-doc__cross-link:focus-visible {
    border-color: var(--yh-link);
}

/* ---- /photo-credits -------------------------------------------------------
   The same shell as the six CMS pages, with the licence list inside the article
   measure: destination left, photographer and source right, one row per photo so a
   single photo can be checked. The credit and the provider link are Pexels/Unsplash
   licence conditions, not decoration. */
.yh-doc__article .yh-credits__list {
    margin: var(--yh-5) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--yh-line);
}

.yh-doc__article .yh-credits__list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px var(--yh-4);
    margin-top: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--yh-line);
}

.yh-credits__place {
    color: var(--yh-navy);
    font-size: 15px;
    font-weight: var(--yh-w-bold);
}

.yh-credits__by,
.yh-credits__source,
.yh-credits__empty {
    color: var(--yh-muted);
    font-size: 14px;
    line-height: 1.5;
}

/* ---- Phones ---------------------------------------------------------------
   Full gutter width, H1 at 24px (the --yh-h1 token floors at 26px), the end strip's
   action full width and 44px tall, and a credit row on two lines instead of one. */
@media (max-width: 767px) {
    .yh-doc__hero > .yh-container {
        padding-top: var(--yh-5);
        padding-bottom: var(--yh-4);
    }

    body.frontend-page .yh-doc__hero h1,
    body.frontend-page .yh-doc__title {
        max-width: none;
        font-size: 24px;
    }

    .yh-doc__hero p,
    .yh-doc__lead {
        font-size: 14px;
    }

    .yh-doc__layout {
        padding-top: var(--yh-5);
    }

    /* 16px is the floor for long-form body text on a phone. */
    .yh-doc__article {
        font-size: 16px;
    }

    .yh-doc__toc {
        margin-bottom: var(--yh-5);
        padding: var(--yh-3) var(--yh-4);
    }

    body.frontend-page .yh-doc__toc-list a {
        min-height: 44px;
    }

    .yh-doc__article h2 {
        margin-top: var(--yh-6);
    }

    .yh-doc__cross {
        margin-top: var(--yh-6);
    }

    body.frontend-page .yh-doc__cross-link {
        width: 100%;
    }

    .yh-doc__article .yh-credits__list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}

/* ==========================================================================
   ACCOUNT PAGES  specs/tasks/09-account-pages.md, family A, 24 Sep 2026
   --------------------------------------------------------------------------
   /login, /register, /forgot-password, /reset-password/{token}, /email/verify
   and /b2b-partner.

   Two audiences, never merged. The four auth screens are the traveller's own
   account and share ONE shell:

     yh-auth          the page: warm canvas, one centred column
     yh-auth__logo    the brand mark above the card
     yh-auth__card    the card itself (460px; --wide = 560 for the name row)
     yh-auth__head    h1 + one line of context, no avatar square
     yh-auth__form    the fields, on the system's yh-field
     yh-auth__row     remember-me on the left, "Forgot password?" on the right
     yh-auth__note    the honest fallback while mail cannot send
     yh-auth__alt     the real way out, under the card

   /b2b-partner is a travel agent applying for net rates. It shares the
   yh-svc-hero / yh-container / yh-section / yh-steps shell that /hotel,
   /visa, /esim, /flight, /bus and /plan-my-trip already ship, and adds only
   the two pieces those do not have: a 4-up benefit grid and the register card.

   What this block replaces on those pages: .yw-auth-page / .yw-auth-card /
   .yw-auth-brand / .yw-auth-form / .yw-auth-helper / .yw-auth-switch and
   .yw-partner-* / .yw-container / .yw-section. Those rules are NOT deleted
   from yatriwala.css, yatriwala-production.css or yatriwala-home.css - other
   pages still share .yw-btn, .yw-section and .yw-container - the templates
   simply stop using them (family L's tail deletes them).

   Legacy `body.frontend-page a { color: var(--yw-forest) }` (yatriwala.css
   ~2630) paints every link on these pages brand blue, and legacy heading
   rules size h1/h2, so both are restated here under `body.frontend-page`.
   ========================================================================== */

/* ---- The auth page --------------------------------------------------------
   One column, centred, on the warm canvas. No hero band: an auth screen is a
   single card (the design contract, 24 Sep). */
.yh-auth {
    background: var(--yh-canvas);
    padding: var(--yh-7) var(--yh-gutter) var(--yh-8);
}

.yh-auth__inner {
    max-width: 460px;
    margin: 0 auto;
}

/* --wide is the register screen only: it is the one card with a two-column
   row (First / Last name), and 460 would put those fields below 200px. */
.yh-auth__inner--wide {
    max-width: 560px;
}

/* ---- Brand mark -----------------------------------------------------------
   Small on purpose. The header already carries the full logo above this, so
   the job here is to anchor the card, not to say the name twice loudly. */
.yh-auth__logo {
    display: block;
    width: 148px;
    margin: 0 auto var(--yh-5);
}

.yh-auth__logo img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---- The card ------------------------------------------------------------- */
.yh-auth__card {
    padding: var(--yh-6);
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-card);
    background: var(--yh-surface);
    box-shadow: var(--yh-shadow-1);
}

/* ---- Head -----------------------------------------------------------------
   An <h1> that says what the page does. The screens this replaces had an <h4>
   in a .card-header bar (reset, verify) or an <h1> inside an avatar row. */
.yh-auth__head {
    margin-bottom: var(--yh-5);
}

body.frontend-page .yh-auth__head h1 {
    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.02em;
}

.yh-auth__lead {
    margin: var(--yh-2) 0 0;
    color: var(--yh-navy-soft);
    font-size: var(--yh-body);
    line-height: var(--yh-lh-body);
}

/* ---- Form ----------------------------------------------------------------- */
.yh-auth__form {
    margin: 0;
}

/* One field: the yh-field label IS the box (yatriwala-home.css ~1134 gives it
   the border, the 62px height and the 10/44/10/16 padding; the input inside is
   transparent). The 44px right gutter reserves room for an icon these fields
   do not have, and the 46px input min-height from yatriwala-system.css ~414
   would stack 62 + 46 and make every auth field 85px tall - the same two
   corrections .yh-request already makes on /plan-my-trip, so an auth field and
   a request field are the same object. */
.yh-auth .yh-field {
    min-height: 62px;
    margin-bottom: 0;
    padding-right: var(--yh-4);
}

.yh-auth .yh-field input {
    min-height: 22px;
}

/* The cell owns the spacing, because the validation message has to sit BELOW
   the field's border, not inside the box. */
.yh-auth__cell {
    min-width: 0;
    margin-bottom: var(--yh-4);
}

/* The name row on /register. One column below 480 so nothing drops under
   200px wide on a phone. */
.yh-auth__names {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--yh-3);
}

/* Remember me on the left, "Forgot password?" on the right. */
.yh-auth__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--yh-3);
    margin: 0 0 var(--yh-4);
    font-size: var(--yh-small);
}

/* Checkbox lines: remember-me and the terms consent. 44px tall so the whole
   line is the tap target on a phone, not the 16px box. */
.yh-auth__check,
.yh-partner-form__terms {
    display: flex;
    align-items: flex-start;
    gap: var(--yh-2);
    min-height: 44px;
    margin: 0;
    padding: var(--yh-2) 0;
    color: var(--yh-navy-soft);
    font-size: var(--yh-small);
    line-height: 1.5;
    font-weight: var(--yh-w-regular);
    cursor: pointer;
}

.yh-auth__check input[type="checkbox"],
.yh-partner-form__terms input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--yh-accent);
}

body.frontend-page .yh-auth__check a,
body.frontend-page .yh-partner-form__terms a {
    color: var(--yh-link);
    font-weight: var(--yh-w-medium);
    text-decoration: underline;
}

.yh-auth__submit {
    margin-top: var(--yh-2);
}

/* ---- Two legacy !important rules, answered in kind -------------------------
   These are the only !important declarations in this block, and each one names
   the rule it defeats (project-facts.md). Both live in yatriwala.css and both
   are keyed on the bc-form-login / bc-form-register class names, which CANNOT be
   renamed away: public_html/js/home.js:555 and :624 bind the login and register
   AJAX handlers to them, and dropping the class would silently disable every
   validation message on the two busiest forms on the site.

   yatriwala.css:7998-8010 gives the FORM itself a 1px border, a 24px radius, a
   white background and a shadow - a second card drawn inside .yh-auth__card, which
   is exactly what /login looked like before this block. */
body.frontend-page .yh-auth .yh-auth__form {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible;
}

/* yatriwala.css:8025-8035 gives every input inside those forms its own 1px
   border, an 8px radius and a #fbfcff fill. Inside a yh-field the FIELD is the
   box, so that drew a box inside a box - and on a 16px checkbox an 8px radius is
   a circle, which is why "Remember me" and the terms consent looked like radio
   buttons. The same rule also sets font-weight: 700 on every input (no
   !important, so the plain rule below is enough for that one). */
body.frontend-page .yh-auth .yh-field input {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

body.frontend-page .yh-auth .yh-field input {
    color: var(--yh-navy);
    font-weight: var(--yh-w-regular);
}

body.frontend-page .yh-auth .yh-auth__check input[type="checkbox"] {
    border-radius: 3px !important;
}

/* ---- Validation -----------------------------------------------------------
   The server's messages arrive by AJAX into these spans (public_html/js/home.js
   :582 for login, :654 for register), which is why the .error / .error-<field>
   / .invalid-feedback hooks are kept byte for byte. jQuery .show() writes an
   inline `display:inline` on them, and an inline style outranks a stylesheet -
   !important is the only way to get the field spacing back. :not(:empty) keeps
   Bootstrap's display:none while the span still has no message in it. */
.yh-auth .yh-auth__cell > .invalid-feedback.error:not(:empty) {
    display: block !important;
    width: 100%;
    margin-top: 5px;
    color: var(--yh-danger);
    font-size: var(--yh-micro);
    font-weight: var(--yh-w-medium);
    line-height: 1.45;
}

.yh-auth .yh-auth__form > .message-error:not(:empty) {
    display: block !important;
    width: 100%;
    margin: 0 0 var(--yh-4);
    color: var(--yh-danger);
    font-size: var(--yh-micro);
    font-weight: var(--yh-w-medium);
    line-height: 1.45;
}

/* home.js fills .message-error with a Bootstrap .alert; flatten it so it does
   not bring its own 1rem padding and border into the card. */
.yh-auth .message-error .alert {
    margin: 0;
    padding: var(--yh-3) var(--yh-4);
    border: 0;
    border-radius: var(--yh-r-control);
    background: rgba(214, 69, 69, .1);
    color: var(--yh-danger);
    font-size: var(--yh-small);
}

/* Server-rendered @error state (the reset screen posts normally, it is not
   AJAX) and the AJAX screens' aria-invalid. The field is the box, so the field
   carries the colour. */
.yh-auth .yh-field.is-invalid {
    border-color: var(--yh-danger);
}

.yh-auth__err {
    display: block;
    margin-top: 5px;
    color: var(--yh-danger);
    font-size: var(--yh-micro);
    font-weight: var(--yh-w-medium);
    line-height: 1.45;
}

/* ---- Flash status --------------------------------------------------------- */
.yh-auth__status {
    margin: 0 0 var(--yh-5);
    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;
}

/* ---- The honest note ------------------------------------------------------
   Shown on the password and verify screens only while mail cannot be
   delivered (MAIL_MAILER=log, SMTP host unset). It replaces the promise of an
   email with the travel desk's real phone and WhatsApp, read from settings.
   When SMTP is configured the template stops rendering it - no CSS change and
   no copy change is needed to switch back. */
.yh-auth__note {
    margin: var(--yh-5) 0 0;
    padding: var(--yh-4);
    border: 1px solid var(--yh-line-warm, var(--yh-line));
    border-radius: var(--yh-r-control);
    background: var(--yh-accent-soft);
}

.yh-auth__note p {
    margin: 0;
    color: var(--yh-navy);
    font-size: var(--yh-small);
    line-height: 1.55;
}

.yh-auth__note-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--yh-2);
    margin-top: var(--yh-3);
}

body.frontend-page .yh-auth__note-actions .yh-btn {
    flex: 1 1 auto;
}

/* ---- The way out ----------------------------------------------------------
   Every one of these screens had a dead control here: href="" with a
   data-toggle="modal" pointing at a modal partial no page has included since
   the footer was replaced on 17 Aug. These are plain links to real URLs. */
.yh-auth__alt {
    margin: var(--yh-5) 0 0;
    text-align: center;
    color: var(--yh-muted);
    font-size: var(--yh-small);
    line-height: 1.6;
}

.yh-auth__alt + .yh-auth__alt {
    margin-top: var(--yh-2);
}

/* :not(.yh-btn) matters: legacy `body.frontend-page a { color: var(--yw-forest) }`
   (yatriwala.css ~2630) has to be restated for plain links here, but the same
   selector would also repaint an <a class="yh-btn yh-btn--primary"> blue on
   orange - which is exactly what happened to "WhatsApp the travel desk" the
   first time this block was previewed. The two button variants are restated
   under the same weight so neither sheet can win by accident. */
body.frontend-page .yh-auth a:not(.yh-btn) {
    color: var(--yh-link);
}

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

body.frontend-page .yh-auth a.yh-btn--ghost,
body.frontend-page .yh-auth a.yh-btn--ghost:hover {
    background: var(--yh-surface);
    border-color: var(--yh-line);
    color: var(--yh-navy);
}

body.frontend-page .yh-auth__alt a {
    font-weight: var(--yh-w-bold);
}

/* The partner line: a link across the audience boundary, deliberately the
   quietest thing on the page. */
.yh-auth__alt--partner {
    color: var(--yh-muted);
    font-size: var(--yh-micro);
}

/* ---- Social sign-in -------------------------------------------------------
   Rendered only inside the same @if(setting_item(...)) gates the old partials
   used, so nothing is enabled or disabled here. All three switches are off
   today (checked against the live HTML), so this block does not paint on the
   live site; it is kept so turning a switch on does not produce unstyled
   Bootstrap buttons. */
.yh-auth__social {
    margin-top: var(--yh-5);
    padding-top: var(--yh-5);
    border-top: 1px solid var(--yh-line);
}

.yh-auth__social-label {
    margin: 0 0 var(--yh-3);
    text-align: center;
    color: var(--yh-muted);
    font-size: var(--yh-small);
}

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

body.frontend-page .yh-auth__social-row > a {
    flex: 1 1 120px;
    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);
    border-radius: var(--yh-r-control);
    background: var(--yh-surface);
    color: var(--yh-navy);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-medium);
}

/* ==========================================================================
   /b2b-partner
   --------------------------------------------------------------------------
   The same warm head band as the six service families, then four benefits,
   three steps and the register card. The page ends on the form: the four-badge
   trust strip ("Local DMC Support", "Fast Response", "Verified Suppliers",
   "Secure Payments") was deleted, not restyled - two of the four were claims
   with nothing behind them, and "Secure Payments" is a payment claim on a site
   with no configured gateway.
   ========================================================================== */
.yh-partner {
    background: var(--yh-canvas);
    padding-bottom: var(--yh-4);      /* + the footer's own top margin: <= 96px */
}

body.frontend-page .yh-partner .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-partner .yh-section {
    padding-top: var(--yh-7);
}

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

/* Same legacy link-colour problem as on the auth screens: without this,
   body.frontend-page a repaints the hero buttons' label. */
body.frontend-page .yh-partner a.yh-btn--primary,
body.frontend-page .yh-partner a.yh-btn--primary:hover {
    color: #fff;
}

body.frontend-page .yh-partner a.yh-btn--ghost,
body.frontend-page .yh-partner a.yh-btn--ghost:hover {
    background: var(--yh-surface);
    border-color: var(--yh-line);
    color: var(--yh-navy);
}

/* ---- Benefits -------------------------------------------------------------
   Four, so the row is even at 1440 and there is no orphan. Every one of them
   is a thing modules/Partner actually does: net rates (net_price + the rate
   screens), the white-label PDF (QuotationController + Views/pdf/quotation),
   the dashboard, and commission tracking (PartnerCommission). A fifth card
   would have had to be marketing. */
.yh-partner-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--yh-4);
}

.yh-partner-benefit {
    min-width: 0;
    padding: var(--yh-5);
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-card);
    background: var(--yh-surface);
    box-shadow: var(--yh-shadow-1);
}

.yh-partner-benefit__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: var(--yh-3);
    border-radius: var(--yh-r-control);
    background: var(--yh-tint);
    color: var(--yh-link);
    font-size: 15px;
}

.yh-partner-benefit strong {
    display: block;
    margin-bottom: var(--yh-1);
    color: var(--yh-navy);
    font-size: var(--yh-h3);
    line-height: var(--yh-lh-heading);
    font-weight: var(--yh-w-bold);
}

.yh-partner-benefit small {
    display: block;
    color: var(--yh-muted);
    font-size: var(--yh-small);
    line-height: 1.55;
}

/* ---- Register card --------------------------------------------------------
   The heading lives inside the card: it is one object, not a title floating
   over a slab of inputs. */
.yh-partner-form {
    margin: 0;
    padding: var(--yh-6);
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-card);
    background: var(--yh-surface);
    box-shadow: var(--yh-shadow-1);
}

.yh-partner-form__head {
    margin-bottom: var(--yh-5);
}

body.frontend-page .yh-partner-form__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-partner-form__head p {
    margin: var(--yh-2) 0 0;
    color: var(--yh-navy-soft);
    font-size: var(--yh-body);
    line-height: var(--yh-lh-body);
}

/* Row gap 0: the cells carry the 16px themselves, because each one may have a
   hint or an error line under its field. */
.yh-partner-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--yh-4);
}

.yh-partner-form__cell {
    min-width: 0;
    margin-bottom: var(--yh-4);
}

/* Same two corrections as .yh-auth above, for the same reason: the yh-field
   label is the box, and without these an agent's field is 85px tall while the
   identical field on /plan-my-trip is 62px. */
.yh-partner-form .yh-field {
    min-height: 62px;
    margin-bottom: 0;
    padding-right: var(--yh-4);
}

.yh-partner-form .yh-field input {
    min-height: 22px;
}

.yh-partner-form__hint {
    display: block;
    margin-top: 5px;
    color: var(--yh-muted);
    font-size: var(--yh-micro);
    line-height: 1.45;
}

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

.yh-partner-form__message {
    margin: var(--yh-4) 0 0;
    padding: var(--yh-3) var(--yh-4);
    border-radius: var(--yh-r-control);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-medium);
    line-height: 1.5;
}

.yh-partner-form__message[data-type="error"] {
    background: rgba(214, 69, 69, .1);
    color: var(--yh-danger);
}

.yh-partner-form__message[data-type="success"] {
    background: rgba(23, 145, 95, .1);
    color: var(--yh-success);
}

.yh-partner-form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--yh-3) var(--yh-4);
    margin-top: var(--yh-5);
}

.yh-partner-form__wait {
    display: inline-flex;
    align-items: center;
    gap: var(--yh-2);
    color: var(--yh-muted);
    font-size: var(--yh-small);
}

/* ==========================================================================
   ACCOUNT AND PARTNER PAGES: phone
   ========================================================================== */
@media (max-width: 767px) {
    .yh-auth {
        padding: var(--yh-5) var(--yh-gutter) var(--yh-7);
    }

    /* The card is the page on a phone: full width inside the gutter, and the
       border-radius is all that is left of the card metaphor. */
    .yh-auth__card {
        padding: var(--yh-5) var(--yh-4);
    }

    .yh-auth__logo {
        width: 128px;
        margin-bottom: var(--yh-4);
    }

    /* First / Last name stack: side by side they are 155px wide at 390. */
    .yh-auth__names {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    /* Remember me and "Forgot password?" on two lines rather than a 12px
       squeeze, both still 44px tall. */
    .yh-auth__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    body.frontend-page .yh-auth__row > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* "Create an account", "Log in" and "Back to sign in" are this family's
       whole point - the controls that were dead - so on a phone they get a
       44px tap height, and the two lines are pushed apart so the padded boxes
       cannot touch. */
    body.frontend-page .yh-auth__alt a {
        display: inline-block;
        padding: var(--yh-3) 0;
    }

    .yh-auth__alt + .yh-auth__alt {
        margin-top: var(--yh-4);
    }

    .yh-auth__note-actions {
        flex-direction: column;
    }

    body.frontend-page .yh-auth__note-actions .yh-btn {
        width: 100%;
    }

    .yh-partner .yh-section {
        padding-top: var(--yh-6);
    }

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

    .yh-partner-benefit {
        padding: var(--yh-4);
    }

    body.frontend-page .yh-partner__actions .yh-btn {
        width: 100%;
    }

    .yh-partner-form {
        padding: var(--yh-5) var(--yh-4);
    }

    .yh-partner-form__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    body.frontend-page .yh-partner-form__foot .yh-btn,
    .yh-partner-form__foot button.submit {
        width: 100%;
        justify-content: center;
    }

    /* No extra bottom clearance for the phone tab bar: <body> already carries
       padding-bottom: 84px on every page (measured at 390 on /login, where the
       bar is absent, and on /forgot-password, where it is present), so the fixed
       bar overlays that empty strip and never the footer. Worth knowing:
       app.blade.php:147 means to hide the bar on the password screens but tests
       `password/*`, and Fortify's URLs are `forgot-password` and
       `reset-password/{token}`, so it renders there. Reported, not changed -
       the tab bar is out of this family's scope. */
}

/* Between 480 and 767 the register card still has room for two name fields. */
@media (min-width: 480px) and (max-width: 767px) {
    .yh-auth__names {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--yh-3);
    }
}

/* Four benefit cards do not fit on a tablet; two even rows do. */
@media (min-width: 768px) and (max-width: 1023px) {
    .yh-partner-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- Package page on phones (25 Sep 2026, specs/tasks/10-mobile T8) --------
   The app leads with the photo, then names the trip, then the price. On the phone the page
   opened with a breadcrumb, a badge and a heading, so the picture — the thing that sells a
   holiday — started 291px down. Source order is unchanged (desktop keeps its two columns);
   this reorders the blocks at phone width only. */
@media (max-width: 640px) {
    /* `!important` answers the legacy `.yw-tour-app-detail { display: block !important }`
       (yatriwala-tour-detail.css): without flex, `order` below does nothing. */
    .yw-tour-app-detail {
        display: flex !important;
        flex-direction: column;
    }

    .yw-tour-app-detail > .yh-pkg-crumb {
        order: 1;
    }

    .yw-tour-app-detail > .yh-pkg-gallery {
        order: 2;
        margin-top: 4px;
    }

    .yw-tour-app-detail > .yh-pkg-head {
        order: 3;
    }

    .yw-tour-app-detail > .yh-pkg-facts {
        order: 4;
    }

    .yw-tour-app-detail > .yh-pkg-strip {
        order: 5;
    }

    .yw-tour-app-detail > .yh-pkg-actions {
        order: 6;
    }

    .yw-tour-app-detail > .yh-pkg-tabs {
        order: 7;
    }

    .yw-tour-app-detail > * {
        order: 8;
    }
}

/* ---- Inner pages on phones (25 Sep 2026, specs/tasks/10-mobile T3) --------
   The homepage got this rhythm with the phone pass; the inner pages are ,
   so they kept desktop padding and heading sizes on a 390px screen. */
@media (max-width: 640px) {
    body.frontend-page .yh-section {
        padding-block: 28px;
    }

    body.frontend-page .yh-head {
        margin-bottom: 14px;
    }

    body.frontend-page h2,
    body.frontend-page .yh-h2 {
        font-size: 21px;
    }
}

/* ---- Phone tap targets and narrow forms (25 Sep 2026, specs/tasks/10-mobile T11 + T13) ---- */
@media (max-width: 640px) {
    /* "View all packages →" and friends were a 32px line of text. Scoped to beat
       `.yh-page .yh-head .yh-link-arrow { min-height: 32px }` in yatriwala-home.css. */
    .yh-link-arrow,
    .yh-page .yh-head .yh-link-arrow,
    body.frontend-page .yh-head .yh-link-arrow {
        min-height: 40px;
        align-items: center;
    }

    /* Every control a thumb has to hit clears 44px; the field boxes already do. */
    .yh-request__form input:not([type="checkbox"]):not([type="radio"]),
    .yh-request__form select,
    .yh-service-form input:not([type="checkbox"]):not([type="radio"]),
    .yh-service-form select {
        min-height: 44px;
    }
}

/* Under ~400px a two-up field row leaves 141px a field, which is not enough for a date or a
   number with its icon, so the request forms go to one column there. */
@media (max-width: 400px) {
    .yh-request__grid,
    .yh-service-form__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .yh-request__cell,
    .yh-service-form__cell {
        grid-column: 1 / -1;
    }
}

/* ===========================================================================
   B2B APPLICATION STATUS  -  /partner/application
   specs/tasks/11-agent-applications.md T3, family AP1, 25 Sep 2026.

   The page an agent applicant lands on instead of the bare 403 the partner
   dashboard used to answer with. It is the yh-auth card from /login and
   /verify, so it needs almost nothing of its own: only the missing pill
   colour, the pill's place above the heading, and the small list of what the
   applicant sent us.
   ========================================================================= */

/* The third state. .yh-pill already has --accent (waiting) and --success
   (approved); a refusal had no colour, and reusing --accent for "not
   approved" would make the two states look the same at a glance. */
.yh-pill--danger { background: rgba(214, 69, 69, 0.1); color: var(--yh-danger); }

/* The pill sits above the h1 inside yh-auth__head, which has no room for it. */
.yh-auth__head .yh-pill {
    margin-bottom: var(--yh-2);
}

/* What you sent us: label / value pairs, not a table - there are three or four
   of them and a table would be furniture around nothing. Rendered from a dl,
   so the label stays a label when the stylesheet does not load. */
.yh-auth__facts {
    margin: var(--yh-5) 0 0;
    padding-top: var(--yh-4);
    border-top: 1px solid var(--yh-line);
}

.yh-auth__facts-title {
    margin: 0 0 var(--yh-2);
    color: var(--yh-navy);
    font-size: var(--yh-micro);
    font-weight: var(--yh-w-heavy);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.yh-auth__facts dl {
    display: grid;
    grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
    gap: 6px var(--yh-3);
    margin: 0;
}

.yh-auth__facts dt {
    margin: 0;
    color: var(--yh-muted);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-regular);
    line-height: 1.5;
}

.yh-auth__facts dd {
    margin: 0;
    color: var(--yh-navy);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-medium);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.yh-auth__facts-foot {
    margin: var(--yh-3) 0 0;
    color: var(--yh-muted);
    font-size: var(--yh-micro);
    line-height: 1.55;
}

/* On a phone the 8.5rem label column leaves too little for a business name,
   so the pairs stack: label, then value under it. */
@media (max-width: 480px) {
    .yh-auth__facts dl {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .yh-auth__facts dd {
        margin-bottom: var(--yh-2);
    }
}

/* ===========================================================================
   AGENT DASHBOARD  -  /partner/dashboard
   specs/tasks/12-agent-dashboard.md T2, family AP2, 26 Sep 2026.

   The first page built on the account layout in the system's language: as of
   T0 that layout loads this stylesheet, so an agent moving from the public
   site into their dashboard does not change worlds.

   One block, because the page is one thing:
     yh-agent            the page
     yh-agent__head      who they trade as + the one action that earns money
     yh-agent__stats     four numbers that can change, each a link (2x2 on a phone)
     yh-agent__attention what is waiting on somebody - absent when nothing is
     yh-agent__block     a titled section (bookings, quotations)
     yh-agent__row       one booking or quotation: what, whose step, how much

   Rows rather than a table on purpose: three of the five columns the old table
   carried were the same width as each other and none of them was the answer to
   "did that go through?". A row can put the state and the money where the eye
   already is, and it collapses on a phone without a horizontal scrollbar.

   Legacy note: the account layout's body is `user-page yatriwala-design
   yw-account-body`, NOT `frontend-page`, so the `body.frontend-page a` rule in
   yatriwala.css does not reach this page. The rules below therefore need no
   !important - the only legacy pressure here is .panel/.btn from user.css,
   which this page simply does not use.
   ========================================================================= */
/* Density. The first build capped this at 960px, which on a 1440 screen left a
   third of the content column empty while the tables it holds were squeezed -
   the owner's note, "screen size should be friendly, no much empty". The cap is
   now wide enough to use a desktop and still short enough that a line of body
   text does not run past comfortable reading length. */
.yh-agent {
    max-width: 1280px;
    margin: 0 auto;
}

/* Sections sat 24px apart with 16px inside every card, so a page of three
   sections spent more height on gaps than on content. 16px between, 12px
   inside on anything that is a list. */
.yh-agent > div[style*="--yh-5"] { margin-bottom: var(--yh-4) !important; }

.yh-agent__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--yh-3);
    margin-bottom: var(--yh-5);
}

.yh-agent__eyebrow {
    margin: 0 0 4px;
    color: var(--yh-muted);
    font-size: var(--yh-micro);
    font-weight: var(--yh-w-heavy);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.yh-agent__title {
    margin: 0;
    color: var(--yh-navy);
    font-size: var(--yh-h2, 28px);
    font-weight: var(--yh-w-heavy);
    line-height: 1.2;
}

/* ---- The four numbers ---------------------------------------------------- */
.yh-agent__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--yh-3);
    margin-bottom: var(--yh-5);
}

.yh-agent__stat {
    display: block;
    padding: var(--yh-4);
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-card, 16px);
    background: #fff;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}

.yh-agent__stat:hover {
    border-color: var(--yh-link);
    transform: translateY(-1px);
    text-decoration: none;
}

/* Something is waiting on us: the one card that should catch the eye. */
.yh-agent__stat.is-waiting {
    border-color: var(--yh-accent);
    background: var(--yh-accent-soft);
}

.yh-agent__stat-n {
    display: block;
    color: var(--yh-navy);
    font-size: 26px;
    font-weight: var(--yh-w-heavy);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.yh-agent__stat-l {
    display: block;
    margin-top: 4px;
    color: var(--yh-muted);
    font-size: var(--yh-small);
    line-height: 1.4;
}

/* ---- Needs attention ----------------------------------------------------- */
.yh-agent__attention {
    margin-bottom: var(--yh-5);
    padding: var(--yh-4);
    border: 1px solid var(--yh-line-warm, var(--yh-line));
    border-radius: var(--yh-r-card, 16px);
    background: var(--yh-accent-soft);
}

.yh-agent__attention ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.yh-agent__attention li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--yh-2);
    padding: 6px 0;
    color: var(--yh-navy);
    font-size: var(--yh-small);
    line-height: 1.5;
}

.yh-agent__attention li + li {
    border-top: 1px solid rgba(0, 0, 0, .06);
}

/* ---- Sections and rows --------------------------------------------------- */
.yh-agent__section-title {
    margin: 0;
    color: var(--yh-navy);
    font-size: var(--yh-micro);
    font-weight: var(--yh-w-heavy);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.yh-agent__block {
    margin-bottom: var(--yh-5);
    padding: var(--yh-4);
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-card, 16px);
    background: #fff;
}

.yh-agent__block-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--yh-2);
    margin-bottom: var(--yh-3);
}

.yh-agent__rows {
    display: block;
}

.yh-agent__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--yh-3);
    padding: var(--yh-3) 0;
}

.yh-agent__row + .yh-agent__row {
    border-top: 1px solid var(--yh-line);
}

.yh-agent__row-title {
    display: block;
    color: var(--yh-navy);
    font-size: var(--yh-body, 15px);
    font-weight: var(--yh-w-medium);
    line-height: 1.4;
}

.yh-agent__row-sub {
    margin: 2px 0 0;
    color: var(--yh-muted);
    font-size: var(--yh-small);
    line-height: 1.45;
}

.yh-agent__row-meta,
.yh-agent__row-money {
    display: flex;
    flex-direction: column;
    gap: 3px;
    /* A flex column stretches its children by default, which made every status pill fill the
       whole column and read as a progress bar on a phone. The pill is a label; it is as wide as
       its word. */
    align-items: flex-start;
}

.yh-agent__row-money {
    align-items: flex-end;
    text-align: right;
}

.yh-agent__row-amount {
    color: var(--yh-navy);
    font-size: var(--yh-body, 15px);
    font-weight: var(--yh-w-heavy);
    white-space: nowrap;
}

.yh-agent__row-ref {
    color: var(--yh-muted);
    font-size: var(--yh-micro);
    line-height: 1.4;
}

.yh-agent__empty {
    margin: 0;
    color: var(--yh-muted);
    font-size: var(--yh-small);
    line-height: 1.6;
}

.yh-agent__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--yh-4);
    padding-top: var(--yh-2);
    font-size: var(--yh-small);
}

/* ---- Phone ---------------------------------------------------------------
   2x2 numbers rather than four cards a thumb has to scroll past, and each row
   becomes a card: title and client on one line, then state and money on the
   next, so nothing is squeezed and nothing scrolls sideways. */
@media (max-width: 640px) {
    .yh-agent__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--yh-2);
    }

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

    .yh-agent__stat-n {
        font-size: 22px;
    }

    .yh-agent__row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    .yh-agent__row-main {
        grid-column: 1 / -1;
    }

    .yh-agent__row-money {
        align-items: flex-end;
    }

    .yh-agent__head {
        align-items: flex-start;
    }

    .yh-agent__head .yh-btn {
        width: 100%;
    }
}

/* A newly approved agent has nothing to count, so the top of their dashboard is the three
   steps instead of four zeros. Numbered, because they happen in order. */
.yh-agent__start {
    margin-bottom: var(--yh-5);
    padding: var(--yh-4) var(--yh-5);
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-card, 16px);
    background: #fff;
}

.yh-agent__start ol {
    margin: var(--yh-3) 0 0;
    padding-left: 1.25em;
}

.yh-agent__start li {
    margin-bottom: var(--yh-3);
    color: var(--yh-muted);
    font-size: var(--yh-small);
    line-height: 1.6;
}

.yh-agent__start li:last-child {
    margin-bottom: 0;
}

.yh-agent__start li strong {
    color: var(--yh-navy);
    font-weight: var(--yh-w-medium);
}

/* ===========================================================================
   DASHBOARD COMPONENT KIT  (yh-k-*)
   specs/tasks/13-dashboard-kit.md T1, 26 Sep 2026.

   Built from the component library the owner supplied, which came back on this
   stylesheet's own tokens - its palette row is our hex, its type is our Plus
   Jakarta Sans with Instrument Serif as the display accent. So every value
   below is a token: the kit introduces no new colour, radius or type size.

   Used by the agent dashboard first (AP2), then the admin and customer
   dashboards (D1, D2). Namespaced yh-k- so it can be dropped onto the account
   layout, the admin theme or a public page without colliding with either the
   yh- page components or the 24k lines of legacy .yw-*.
   ========================================================================= */

/* ---- 01/02 Stat card ------------------------------------------------------ */
.yh-k-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--yh-3);
}

.yh-k-stat {
    display: block;
    padding: var(--yh-4);
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-card);
    background: var(--yh-surface);
    box-shadow: var(--yh-shadow-1);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.yh-k-stat:hover {
    border-color: var(--yh-link);
    box-shadow: var(--yh-shadow-2);
    transform: translateY(-1px);
    text-decoration: none;
}

/* The round tinted chip that carries the icon. */
.yh-k-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--yh-3);
    border-radius: var(--yh-r-pill);
    background: var(--yh-tint);
    color: var(--yh-link);
    font-size: 17px;
}

.yh-k-stat__label {
    display: block;
    color: var(--yh-muted);
    font-size: var(--yh-small);
    line-height: 1.4;
}

.yh-k-stat__value {
    display: block;
    margin-top: 2px;
    color: var(--yh-navy);
    font-size: 30px;
    font-weight: var(--yh-w-heavy);
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.yh-k-stat__foot {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 6px;
    color: var(--yh-muted);
    font-size: var(--yh-micro);
    line-height: 1.4;
}

/* Trend. Only ever rendered when there is a real comparison behind it. */
.yh-k-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: var(--yh-w-bold);
}

.yh-k-trend--up { color: var(--yh-success); }
.yh-k-trend--down { color: var(--yh-danger); }

/* 02: the one card that is waiting on somebody. */
.yh-k-stat--attention {
    border-color: var(--yh-accent);
    background: var(--yh-accent-soft);
}

.yh-k-stat--attention .yh-k-stat__icon {
    background: var(--yh-accent);
    color: #fff;
}

.yh-k-stat--attention .yh-k-stat__foot {
    color: var(--yh-accent-ink);
    font-weight: var(--yh-w-medium);
}

/* ---- 03 Status pills ------------------------------------------------------ */
.yh-k-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--yh-r-pill);
    background: var(--yh-tint);
    color: var(--yh-navy);
    font-size: var(--yh-micro);
    font-weight: var(--yh-w-bold);
    line-height: 1.3;
    white-space: nowrap;
}

.yh-k-pill--ok { background: rgba(23, 145, 95, .12); color: var(--yh-success); }
.yh-k-pill--wait-us { background: var(--yh-accent-soft); color: var(--yh-accent-ink); }
.yh-k-pill--wait-you { background: var(--yh-tint); color: var(--yh-link); }
.yh-k-pill--no { background: rgba(214, 69, 69, .1); color: var(--yh-danger); }
.yh-k-pill--draft { background: rgba(100, 116, 139, .12); color: var(--yh-muted); }

/* ---- 04 Buttons ----------------------------------------------------------- */
.yh-k-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--yh-2);
    min-height: 44px;
    padding: 0 var(--yh-4);
    border: 1px solid transparent;
    border-radius: var(--yh-r-control);
    font-size: var(--yh-body);
    font-weight: var(--yh-w-bold);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s ease, border-color .15s ease;
}

.yh-k-btn:hover { text-decoration: none; filter: brightness(.96); }

.yh-k-btn--primary { background: var(--yh-accent); color: #fff; }
.yh-k-btn--solid { background: var(--yh-link); color: #fff; }
.yh-k-btn--quiet {
    border-color: var(--yh-line);
    background: var(--yh-surface);
    color: var(--yh-navy);
}
.yh-k-btn--block { width: 100%; }

/* ---- 05 Form field -------------------------------------------------------- */
.yh-k-field { display: block; margin-bottom: var(--yh-3); }

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

.yh-k-field__box {
    display: flex;
    align-items: center;
    gap: var(--yh-2);
    min-height: var(--yh-input-height);
    padding: 0 var(--yh-3);
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-control);
    background: var(--yh-surface);
}

.yh-k-field__box:focus-within { border-color: var(--yh-link); }

.yh-k-field__box > i { color: var(--yh-muted); font-size: 15px; }

.yh-k-field__box input,
.yh-k-field__box select {
    flex: 1 1 auto;
    min-width: 0;
    height: calc(var(--yh-input-height) - 2px);
    border: 0;
    background: transparent;
    color: var(--yh-navy);
    font-family: inherit;
    font-size: var(--yh-body);
    outline: none;
}

/* ---- 06 Attention list item ---------------------------------------------- */
.yh-k-attn {
    border: 1px solid var(--yh-line-warm, var(--yh-line));
    border-radius: var(--yh-r-card);
    background: var(--yh-accent-soft);
    overflow: hidden;
}

.yh-k-attn__item {
    display: flex;
    align-items: flex-start;
    gap: var(--yh-3);
    padding: var(--yh-3) var(--yh-4);
    color: var(--yh-navy);
    text-decoration: none;
}

.yh-k-attn__item + .yh-k-attn__item { border-top: 1px solid rgba(11, 45, 84, .08); }

.yh-k-attn__item:hover { text-decoration: none; background: rgba(255, 255, 255, .45); }

.yh-k-attn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: var(--yh-r-control);
    background: var(--yh-surface);
    color: var(--yh-accent-ink);
}

.yh-k-attn__body { display: block; flex: 1 1 auto; min-width: 0; }

.yh-k-attn__title {
    /* Rendered as a <span> inside an <a> (an anchor may not contain block-level <p>), so the
       display has to be set here or the title and the action run together on one line. */
    display: block;
    margin: 0;
    color: var(--yh-navy);
    font-size: var(--yh-body);
    font-weight: var(--yh-w-medium);
    line-height: 1.4;
}

.yh-k-attn__sub {
    display: block;
    margin: 2px 0 0;
    color: var(--yh-accent-ink);
    font-size: var(--yh-small);
    line-height: 1.5;
}

.yh-k-attn__go {
    flex: 0 0 auto;
    align-self: center;
    color: var(--yh-accent-ink);
}

/* ---- 07/08 Data row ------------------------------------------------------- */
.yh-k-rows {
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-card);
    background: var(--yh-surface);
    overflow: hidden;
}

.yh-k-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--yh-3);
    padding: var(--yh-3) var(--yh-4);
}

.yh-k-row + .yh-k-row { border-top: 1px solid var(--yh-line-soft, var(--yh-line)); }

.yh-k-row__thumb {
    width: 64px;
    height: 48px;
    border-radius: var(--yh-r-control);
    background: var(--yh-tint);
    object-fit: cover;
}

/* A package with no photo gets the tint above and this mark - never a stock
   photograph of somewhere the customer is not going. */
.yh-k-row__thumb--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--yh-link);
    font-size: 16px;
}

.yh-k-row__title {
    display: block;
    color: var(--yh-navy);
    font-size: var(--yh-body);
    font-weight: var(--yh-w-medium);
    line-height: 1.35;
}

.yh-k-row__sub {
    margin: 2px 0 0;
    color: var(--yh-muted);
    font-size: var(--yh-small);
    line-height: 1.45;
}

.yh-k-row__state { justify-self: end; }

.yh-k-row__amount {
    justify-self: end;
    text-align: right;
}

.yh-k-row__amount b {
    display: block;
    color: var(--yh-navy);
    font-size: var(--yh-body);
    font-weight: var(--yh-w-heavy);
    white-space: nowrap;
}

.yh-k-row__amount span {
    display: block;
    color: var(--yh-muted);
    font-size: var(--yh-micro);
}

/* ---- 09 Section card ------------------------------------------------------ */
.yh-k-card {
    padding: var(--yh-4);
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-card);
    background: var(--yh-surface);
}

.yh-k-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--yh-2);
    margin-bottom: var(--yh-3);
}

.yh-k-card__title {
    margin: 0;
    color: var(--yh-navy);
    font-size: var(--yh-h3);
    font-weight: var(--yh-w-heavy);
    line-height: 1.3;
}

.yh-k-card__sub {
    margin: 2px 0 0;
    color: var(--yh-muted);
    font-size: var(--yh-small);
    line-height: 1.5;
}

.yh-k-eyebrow {
    margin: 0 0 4px;
    color: var(--yh-muted);
    font-size: var(--yh-micro);
    font-weight: var(--yh-w-heavy);
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ---- 10 Empty state ------------------------------------------------------- */
.yh-k-empty {
    padding: var(--yh-6) var(--yh-4);
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-card);
    background: var(--yh-surface);
    text-align: center;
}

.yh-k-empty svg { margin-bottom: var(--yh-3); }

.yh-k-empty h3 {
    margin: 0 0 6px;
    color: var(--yh-navy);
    font-size: var(--yh-h3);
    font-weight: var(--yh-w-heavy);
}

.yh-k-empty p {
    max-width: 44ch;
    margin: 0 auto var(--yh-4);
    color: var(--yh-muted);
    font-size: var(--yh-small);
    line-height: 1.6;
}

/* ---- 11 First-run steps --------------------------------------------------- */
.yh-k-steps { counter-reset: yhk; list-style: none; margin: 0; padding: 0; }

.yh-k-steps li {
    position: relative;
    padding-left: 44px;
    margin-bottom: var(--yh-4);
    color: var(--yh-muted);
    font-size: var(--yh-small);
    line-height: 1.6;
}

.yh-k-steps li:last-child { margin-bottom: 0; }

.yh-k-steps li::before {
    counter-increment: yhk;
    content: counter(yhk);
    position: absolute;
    left: 0;
    top: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--yh-r-pill);
    background: rgba(23, 145, 95, .12);
    color: var(--yh-success);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-heavy);
}

.yh-k-steps b {
    display: block;
    color: var(--yh-navy);
    font-weight: var(--yh-w-medium);
}

/* The serif accent from the design, used once per page at most. */
.yh-k-accent-note {
    color: var(--yh-accent-ink);
    font-family: var(--yh-serif);
    font-style: italic;
    font-size: 19px;
    line-height: 1.35;
}

/* ---- 12 Filter bar -------------------------------------------------------- */
.yh-k-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--yh-2);
    padding: var(--yh-3);
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-card);
    background: var(--yh-surface);
}

.yh-k-filters .yh-k-field { flex: 1 1 260px; margin: 0; }
.yh-k-filters .yh-k-field--auto { flex: 0 1 auto; }

/* ---- 13 Pagination -------------------------------------------------------- */
.yh-k-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.yh-k-pager a,
.yh-k-pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-control);
    background: var(--yh-surface);
    color: var(--yh-navy);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-medium);
    text-decoration: none;
}

.yh-k-pager .is-current,
.yh-k-pager .active span,
.yh-k-pager .active a {
    border-color: var(--yh-link);
    background: var(--yh-link);
    color: #fff;
}

.yh-k-pager .disabled span { opacity: .45; }

/* ---- Phone ----------------------------------------------------------------
   Stat cards 2x2, and a data row becomes the card from panel 08: thumbnail and
   title on one line, meta under it, state and amount on the last line. */
@media (max-width: 640px) {
    .yh-k-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--yh-2);
    }

    .yh-k-stat { padding: var(--yh-3); }
    .yh-k-stat__icon { width: 34px; height: 34px; margin-bottom: var(--yh-2); font-size: 15px; }
    .yh-k-stat__value { font-size: 24px; }

    .yh-k-row {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        grid-template-areas:
            "thumb main main"
            "state state amount";
        gap: var(--yh-2) var(--yh-3);
        padding: var(--yh-3);
        align-items: center;
    }

    .yh-k-row__thumb { grid-area: thumb; width: 56px; height: 56px; }
    .yh-k-row__main { grid-area: main; }
    .yh-k-row__state { grid-area: state; justify-self: start; }
    .yh-k-row__amount { grid-area: amount; justify-self: end; text-align: right; }

    .yh-k-filters .yh-k-field { flex: 1 1 100%; }
}

/* ===========================================================================
   ACCOUNT SHELL, ON THE KIT  -  sidebar, topbar, phone tab bar
   specs/tasks/13-dashboard-kit.md T3, 26 Sep 2026.

   The supplied design has a LIGHT sidebar: white panel, navy labels, the active
   item a tinted pill, muted icons. What ships today (yatriwala.css 15623) is a
   dark navy-to-orange gradient card with white text at .86 opacity. Sitting a
   white kit dashboard next to a dark gradient rail is the "two worlds" problem
   the whole design pass exists to end, so the rail is converted here.

   NO BLADE IS TOUCHED. The account sidebar is rendered by
   themes/Base/User/Views/frontend/layouts/sidebar.blade.php and filled by every
   module's getUserMenu(), so a markup change would reach code this family has
   no business in. Everything below re-skins the markup that is already there.

   Each block names the legacy rule it defeats, per project-facts.md. All of it
   is scoped to .yw-account-body, the class this layout puts on <body>, so no
   public page can be reached by any of it.
   ========================================================================= */

/* The panel itself. Defeats yatriwala.css:15623 (the gradient, the white text
   and the 26px shadow). */
.yw-account-body .yw-account-sidebar {
    padding: var(--yh-4);
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-card);
    color: var(--yh-navy);
    background: var(--yh-surface);
    box-shadow: var(--yh-shadow-1);
}

/* Brand mark: the logo is a dark wordmark on transparent, which needed the
   white plate at 15641 to be legible on the gradient. On white it does not. */
.yw-account-body .yw-account-sidebar-brand { color: var(--yh-navy); }

.yw-account-body .yw-account-sidebar-brand img {
    padding: 0;
    border-radius: 0;
    background: transparent;
}

/* Who is signed in. Defeats 15676-15690 (white h5, .78-white p and role name). */
.yw-account-body .user-profile-avatar h5 {
    color: var(--yh-navy);
    font-size: var(--yh-h3);
    font-weight: var(--yh-w-heavy);
}

.yw-account-body .user-profile-avatar p,
.yw-account-body .sidebar-user .role-name {
    color: var(--yh-muted);
}

.yw-account-body .sidebar-user .role-name {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: var(--yh-r-pill);
    background: var(--yh-tint);
    color: var(--yh-link);
    font-size: var(--yh-micro);
    font-weight: var(--yh-w-bold);
}

.yw-account-body .sidebar-user .avatar,
.yw-account-body .sidebar-user .avatar-text {
    width: 56px;
    height: 56px;
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-card);
    box-shadow: none;
}

.yw-account-body .sidebar-user .avatar-text {
    color: var(--yh-link);
    background: var(--yh-tint);
    font-size: 22px;
    font-weight: var(--yh-w-heavy);
}

/* The two reassurance chips. Defeats 15696 (white on .12 white). */
.yw-account-body .yw-account-sidebar-status span {
    min-height: 34px;
    border: 1px solid var(--yh-line);
    background: var(--yh-tint);
    color: var(--yh-navy);
    font-size: var(--yh-micro);
    font-weight: var(--yh-w-medium);
}

/* The menu. Defeats 15719-15752: white .86 labels, a white active pill and an
   orange active icon plate. The design puts the active item in the cool tint
   with the brand blue, which reads as selected without shouting. */
/* SPECIFICITY, measured not guessed. The label colour is NOT set by yatriwala.css
   alone: user.css:207 `.bc_wrap .bc_user_profile .sidebar-menu ul li a { color:#fff }`
   scores (0,3,3) and beat the first draft of this block at (0,3,2) - every
   inactive item rendered white on the new white panel and disappeared. Every
   selector below therefore carries .bc_wrap .bc_user_profile as well. */
.yw-account-body .bc_wrap .bc_user_profile .sidebar-menu ul li > a,
.yw-account-body .bc_wrap .bc_user_profile .sidebar-menu .main-menu > li > a {
    min-height: 44px;
    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);
}

.yw-account-body .bc_wrap .bc_user_profile .sidebar-menu ul li > a:hover {
    background: var(--yh-sand, #f7f1e9);
    color: var(--yh-navy);
}

.yw-account-body .bc_wrap .bc_user_profile .sidebar-menu ul li.active > a {
    background: var(--yh-tint);
    color: var(--yh-link);
    font-weight: var(--yh-w-bold);
}

/* user.css:220 and :201 paint the icons #fff and the active one #5191FA. */
.yw-account-body .bc_wrap .bc_user_profile .sidebar-menu ul li a i,
.yw-account-body .bc_wrap .bc_user_profile .sidebar-menu .main-menu .icon {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: var(--yh-muted);
    font-size: 15px;
}

.yw-account-body .bc_wrap .bc_user_profile .sidebar-menu .main-menu .icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
}

.yw-account-body .bc_wrap .bc_user_profile .sidebar-menu ul li.active > a i,
.yw-account-body .bc_wrap .bc_user_profile .sidebar-menu ul li.active .icon,
.yw-account-body .bc_wrap .bc_user_profile .sidebar-menu ul li:hover > a i {
    background: transparent;
    color: var(--yh-link);
}

.yw-account-body .bc_wrap .bc_user_profile .sidebar-menu ul li .children a {
    color: var(--yh-muted);
    font-size: var(--yh-small);
}

.yw-account-body .bc_wrap .bc_user_profile .sidebar-menu ul li .children a:hover {
    color: var(--yh-link);
}

/* The dark rail is painted in three more places, all in user.css, and two of
   them with !important - which is why they are answered in kind here:
     :37  the whole col-md-3 is #1a2b47
     :44  a ::after 200% wide in #1A2B47, which is the strip that bled past the
          panel edge in the first capture
     :71  .user-profile-avatar  background #1a2b47 !important
     :122 .user-profile-plan    background #1a2b47 !important  */
.yw-account-body .bc_wrap .bc_user_profile > .container-fluid > .row-eq-height > .col-md-3 {
    background: transparent;
    color: var(--yh-navy);
    min-height: 0;
}

.yw-account-body .bc_wrap .bc_user_profile > .container-fluid > .row-eq-height > .col-md-3:before,
.yw-account-body .bc_wrap .bc_user_profile > .container-fluid > .row-eq-height > .col-md-3:after {
    display: none;
}

.yw-account-body .bc_wrap .bc_user_profile .user-profile-avatar,
.yw-account-body .bc_wrap .bc_user_profile .user-profile-plan {
    background: transparent !important;
    border-bottom: 0;
}

.yw-account-body .bc_wrap .bc_user_profile .user-profile-avatar .info-new h5 {
    color: var(--yh-navy);
}

.yw-account-body .bc_wrap .bc_user_profile .user-profile-avatar .info-new p {
    color: var(--yh-muted);
}

/* user.css:168 and :92 fill the initial tile #656c77, a grey that belongs to
   neither palette. The tile is the signed-in person, so it takes the brand. */
.yw-account-body .bc_wrap .bc_user_profile .sidebar-user .logo .avatar-text,
.yw-account-body .bc_wrap .bc_user_profile .user-profile-avatar .avatar-new .avatar-text {
    border-radius: var(--yh-r-card);
    background: var(--yh-tint);
    color: var(--yh-link);
    font-weight: var(--yh-w-heavy);
}

/* The page behind the panels: user.css:2 paints it #f5f7f9, a cool grey that
   fights the warm canvas the rest of the site uses. */
.yw-account-body .bc_wrap .bc_user_profile {
    padding: 0 var(--yh-5);
    background: var(--yh-canvas);
    color: var(--yh-navy);
}

/* Log out and "Back to Yatriwala". Defeats 15757 (white .82) and the inline
   #ff6b2f on the back link, which is the pre-system orange. */
.yw-account-body .sidebar-user .logout a,
.yw-account-body .yw-account-sidebar .logout a {
    min-height: 44px;
    color: var(--yh-muted);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-medium);
}

.yw-account-body .yw-account-sidebar .logout a[style],
.yw-account-body .yw-account-sidebar .logout a:hover {
    /* The back link carries style="color: #ff6b2f" inline, and an inline style
       outranks a stylesheet - this is the one place here that needs the weight. */
    color: var(--yh-accent-ink) !important;
}

.yw-account-body .user-profile-plan a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--yh-link);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-medium);
}

/* ---- Topbar -------------------------------------------------------------- */
.yw-account-body .yw-account-topbar {
    border-bottom: 1px solid var(--yh-line);
    background: var(--yh-surface);
}

.yw-account-body .yw-account-topnav a {
    color: var(--yh-navy);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-medium);
}

.yw-account-body .yw-account-topnav a:hover { color: var(--yh-link); }

.yw-account-body .yw-account-user small { color: var(--yh-muted); }

/* ---- Phone tab bar -------------------------------------------------------
   The design shows five labelled tabs on a white bar. The markup already
   exists; this gives it the kit's type, colour and touch targets. */
.yw-account-body .yw-account-bottom-nav {
    border-top: 1px solid var(--yh-line);
    background: var(--yh-surface);
    box-shadow: 0 -2px 10px rgba(11, 45, 84, .06);
}

.yw-account-body .yw-account-bottom-nav a {
    min-height: 52px;
    color: var(--yh-muted);
    font-size: var(--yh-micro);
    font-weight: var(--yh-w-medium);
}

.yw-account-body .yw-account-bottom-nav a i { font-size: 17px; }

.yw-account-body .yw-account-bottom-nav a.active,
.yw-account-body .yw-account-bottom-nav a:hover {
    color: var(--yh-link);
}

/* The content column, so a kit page is not squeezed against the rail. */
.yw-account-body .user-form-settings {
    padding: var(--yh-4) 0;
}

/* ===========================================================================
   DASHBOARD KIT, PART 2  -  the nine-screen design, 26 Sep 2026
   specs/dashboard-screens.md

   The owner supplied nine finished screens. These are the pieces they share
   that part 1 did not have: the welcome header, a stat card that carries its
   own "view all" link, the three-up attention cards, a data row with the
   design's full column set, and the four-step first run.
   ========================================================================= */

/* ---- Page header ---------------------------------------------------------- */
.yh-k-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--yh-3);
    margin-bottom: var(--yh-4);
}

/* The heading block takes the room that is left; without this the action
   button was pushed onto its own line by a long business name, which is
   exactly the case a B2B page has to survive. */
.yh-k-head > div:first-child {
    flex: 1 1 320px;
    min-width: 0;
}

.yh-k-head > .yh-k-btn { flex: 0 0 auto; }

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

/* "Welcome Tamheed!" above the page's own question - the owner's design greets by name and
   then asks. Smaller than the h1 on purpose: the greeting is not the point of the page. */
.yh-k-head__welcome {
    margin: 0 0 2px;
    color: var(--yh-navy);
    font-size: var(--yh-h3);
    font-weight: var(--yh-w-medium);
    line-height: 1.3;
}

.yh-k-head__lede {
    margin: 6px 0 0;
    max-width: 62ch;
    color: var(--yh-muted);
    font-size: var(--yh-small);
    line-height: var(--yh-lh-body);
}

/* ---- Stat card, with its own link ----------------------------------------- */
.yh-k-stat__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--yh-2);
}

.yh-k-stat__go { color: var(--yh-muted); font-size: 15px; }

.yh-k-stat__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: var(--yh-3);
    padding-top: var(--yh-2);
    border-top: 1px solid var(--yh-line-soft, var(--yh-line));
    width: 100%;
    color: var(--yh-link);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-medium);
}

.yh-k-stat--attention .yh-k-stat__link { color: var(--yh-accent-ink); }
.yh-k-stat--attention .yh-k-stat__value { color: var(--yh-accent-ink); }

/* The design tints each stat differently: bookings cool, waiting warm,
   quotations cool, money green. One class each, all from tokens. */
.yh-k-stat--money .yh-k-stat__icon { background: rgba(23, 145, 95, .12); color: var(--yh-success); }
.yh-k-stat--money .yh-k-stat__value { color: var(--yh-success); }

/* ---- Attention, as three cards -------------------------------------------- */
.yh-k-attn-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--yh-3);
}

.yh-k-attn-card {
    display: block;
    padding: var(--yh-4);
    border: 1px solid var(--yh-line-warm, var(--yh-line));
    border-radius: var(--yh-r-card);
    background: var(--yh-accent-soft);
    text-decoration: none;
}

.yh-k-attn-card:hover { text-decoration: none; border-color: var(--yh-accent); }

.yh-k-attn-card__head {
    display: flex;
    align-items: flex-start;
    gap: var(--yh-3);
}

.yh-k-attn-card__title {
    display: block;
    color: var(--yh-navy);
    font-size: var(--yh-body);
    font-weight: var(--yh-w-bold);
    line-height: 1.35;
}

.yh-k-attn-card__sub,
.yh-k-attn-card__detail {
    display: block;
    margin-top: 3px;
    color: var(--yh-muted);
    font-size: var(--yh-small);
    line-height: 1.5;
}

.yh-k-attn-card__detail { color: var(--yh-accent-ink); font-weight: var(--yh-w-medium); }

.yh-k-attn-card .yh-k-pill { margin-top: var(--yh-3); }

/* A section title with a count, as the design writes it: "Needs attention (3)" */
.yh-k-section {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--yh-2);
    margin-bottom: var(--yh-2);
}

.yh-k-section__title {
    display: flex;
    align-items: center;
    gap: var(--yh-2);
    margin: 0;
    color: var(--yh-navy);
    font-size: var(--yh-h3);
    font-weight: var(--yh-w-heavy);
}

.yh-k-section__sub {
    margin: 2px 0 0;
    color: var(--yh-muted);
    font-size: var(--yh-small);
}

/* ---- Data row, full column set -------------------------------------------
   The design's table: package (photo, name, two meta lines), client (+ ref),
   travel date, status, amount, next step. A table element cannot reflow on a
   phone without a horizontal scrollbar, so this is a grid that becomes the
   card from panel 08 under 900px. */
.yh-k-trow {
    display: grid;
    grid-template-columns: 64px minmax(0, 2.1fr) minmax(0, 1.1fr) minmax(0, .9fr) auto minmax(0, 1.2fr);
    align-items: center;
    gap: var(--yh-3);
    padding: var(--yh-2) var(--yh-4);
}

.yh-k-trow + .yh-k-trow { border-top: 1px solid var(--yh-line-soft, var(--yh-line)); }

.yh-k-trow__head {
    display: grid;
    grid-template-columns: 64px minmax(0, 2.1fr) minmax(0, 1.1fr) minmax(0, .9fr) auto minmax(0, 1.2fr);
    gap: var(--yh-3);
    padding: var(--yh-2) var(--yh-4);
    border-bottom: 1px solid var(--yh-line);
    background: var(--yh-tint);
    color: var(--yh-muted);
    font-size: var(--yh-micro);
    font-weight: var(--yh-w-bold);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.yh-k-trow__amount {
    text-align: right;
    color: var(--yh-navy);
    font-weight: var(--yh-w-heavy);
    white-space: nowrap;
}

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

.yh-k-trow__next b {
    display: block;
    color: var(--yh-navy);
    font-weight: var(--yh-w-medium);
}

/* ---- First run: four steps ------------------------------------------------ */
.yh-k-steps4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--yh-3);
    counter-reset: yhk4;
    list-style: none;
    margin: 0 0 var(--yh-4);
    padding: 0;
}

.yh-k-steps4 li {
    padding: var(--yh-4);
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-card);
    background: var(--yh-canvas);
    color: var(--yh-muted);
    font-size: var(--yh-small);
    line-height: 1.55;
}

.yh-k-steps4 li::before {
    counter-increment: yhk4;
    content: counter(yhk4);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-bottom: var(--yh-3);
    border-radius: var(--yh-r-pill);
    background: rgba(23, 145, 95, .12);
    color: var(--yh-success);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-heavy);
}

.yh-k-steps4 b {
    display: block;
    margin-bottom: 4px;
    color: var(--yh-navy);
    font-size: var(--yh-body);
    font-weight: var(--yh-w-bold);
}

/* ---- Phone ---------------------------------------------------------------- */
@media (max-width: 900px) {
    .yh-k-trow__head { display: none; }

    .yh-k-trow {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        grid-template-areas:
            "thumb main main"
            "client client date"
            "state state amount"
            "next next next";
        gap: var(--yh-2) var(--yh-3);
        padding: var(--yh-3);
        align-items: start;
    }

    .yh-k-trow__thumb { grid-area: thumb; }
    .yh-k-trow__main { grid-area: main; }
    .yh-k-trow__client { grid-area: client; }
    .yh-k-trow__date { grid-area: date; text-align: right; }
    .yh-k-trow__state { grid-area: state; }
    .yh-k-trow__amount { grid-area: amount; }
    .yh-k-trow__next { grid-area: next; padding-top: var(--yh-2); border-top: 1px dashed var(--yh-line); }
}

@media (max-width: 640px) {
    .yh-k-head__title { font-size: var(--yh-h2); }
    .yh-k-attn-cards { grid-template-columns: minmax(0, 1fr); }
    .yh-k-steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--yh-2); }
    .yh-k-steps4 li { padding: var(--yh-3); }
}

/* ===========================================================================
   QUOTATION BUILDER  -  screen 3 of the owner's design
   specs/dashboard-screens.md, families AP3 + AP4, 26 Sep 2026.

   Two columns: the numbered steps on the left, the live preview of what the
   client receives on the right, sticky so it stays beside the step being
   filled in. One column under 1100px.
   ========================================================================= */
.yh-k-build {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: var(--yh-4);
}

.yh-k-build__main {
    display: grid;
    gap: var(--yh-3);
    min-width: 0;
}

.yh-k-build__side { position: sticky; top: var(--yh-4); }

/* The step number beside a section title. */
.yh-k-step-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: var(--yh-2);
    border-radius: var(--yh-r-pill);
    background: var(--yh-tint);
    color: var(--yh-link);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-heavy);
}

.yh-k-grid2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--yh-3);
}

.yh-k-hint {
    margin: 4px 0 0;
    color: var(--yh-muted);
    font-size: var(--yh-micro);
    line-height: 1.5;
}

.yh-k-note {
    display: flex;
    align-items: flex-start;
    gap: var(--yh-2);
    margin: 0 0 var(--yh-3);
    padding: var(--yh-3);
    border-radius: var(--yh-r-control);
    background: var(--yh-tint);
    color: var(--yh-navy);
    font-size: var(--yh-small);
    line-height: 1.55;
}

.yh-k-note i { color: var(--yh-link); margin-top: 2px; }

.yh-k-textarea {
    display: block;
    width: 100%;
    min-height: 88px;
    padding: var(--yh-3);
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-control);
    background: var(--yh-surface);
    color: var(--yh-navy);
    font-family: inherit;
    font-size: var(--yh-body);
    line-height: 1.5;
    resize: vertical;
}

.yh-k-textarea:focus { border-color: var(--yh-link); outline: none; }

.yh-k-unit {
    color: var(--yh-muted);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-bold);
}

.yh-k-field__box--readonly { background: var(--yh-tint); }

.yh-k-field__box--readonly span {
    color: var(--yh-navy);
    font-size: var(--yh-body);
    font-weight: var(--yh-w-heavy);
}

/* The four price figures: tighter than the dashboard's, since they sit inside
   a card rather than carrying a page. */
.yh-k-stats--tight { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--yh-2); }
.yh-k-stats--tight .yh-k-stat { padding: var(--yh-3); box-shadow: none; }
.yh-k-stats--tight .yh-k-stat__value { font-size: 20px; }

/* ---- Markup modes --------------------------------------------------------- */
.yh-k-modes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--yh-2);
    margin-top: var(--yh-2);
}

.yh-k-mode {
    display: flex;
    align-items: flex-start;
    gap: var(--yh-2);
    margin: 0;
    padding: var(--yh-3);
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-control);
    background: var(--yh-surface);
    color: var(--yh-muted);
    font-size: var(--yh-micro);
    font-weight: var(--yh-w-regular);
    line-height: 1.45;
    cursor: pointer;
}

.yh-k-mode b {
    display: block;
    color: var(--yh-navy);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-bold);
}

/* The radio itself is the state, but it is a 13px dot in the corner of a card
   that has to read as selected at a glance - so the card carries the state and
   the input is kept for the keyboard and the form, not hidden from it. */
.yh-k-mode input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.yh-k-mode.is-on {
    border-color: var(--yh-accent);
    background: var(--yh-accent-soft);
}

.yh-k-mode.is-on .yh-k-mode__icon { background: var(--yh-accent); color: #fff; }

.yh-k-mode:focus-within { border-color: var(--yh-link); }

.yh-k-mode__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: var(--yh-r-control);
    background: var(--yh-tint);
    color: var(--yh-link);
}

/* ---- Preview -------------------------------------------------------------- */
.yh-k-preview__title {
    margin: 0;
    color: var(--yh-navy);
    font-size: var(--yh-h3);
    font-weight: var(--yh-w-heavy);
    line-height: 1.3;
}

.yh-k-preview__meta {
    margin: 2px 0 0;
    color: var(--yh-muted);
    font-size: var(--yh-small);
}

.yh-k-pdf {
    margin-top: var(--yh-4);
    padding: var(--yh-3);
    border: 1px dashed var(--yh-line);
    border-radius: var(--yh-r-control);
    background: var(--yh-canvas);
    text-align: center;
}

.yh-k-pdf__logo { max-height: 34px; margin-bottom: var(--yh-2); }

.yh-k-pdf__line {
    margin: 0 0 4px;
    color: var(--yh-muted);
    font-size: var(--yh-micro);
    line-height: 1.5;
}

.yh-k-pdf__line strong { color: var(--yh-navy); }

.yh-k-pdf__foot {
    margin: var(--yh-2) 0 0;
    padding-top: var(--yh-2);
    border-top: 1px solid var(--yh-line);
    color: var(--yh-muted);
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

@media (max-width: 1100px) {
    .yh-k-build { grid-template-columns: minmax(0, 1fr); }
    .yh-k-build__side { position: static; }
}

/* ===========================================================================
   TRACK MY TRIP  -  screen 9 of the owner's design
   specs/dashboard-screens.md, family U1, 26 Sep 2026.

   Two pieces the kit did not have: the booked -> completed progress line, and
   the two-up card pair the page is built from.
   ========================================================================= */
.yh-k-two {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--yh-4);
    align-items: start;
}

/* ---- The trip timeline ----------------------------------------------------
   A row of steps joined by a line. Done steps are green and connected; the
   rest are grey. Built with a pseudo-element connector rather than an image so
   it survives any number of steps - self-drive trips have four, everyone else
   has five. */
.yh-k-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    margin: var(--yh-4) 0 0;
    padding: 0;
    list-style: none;
}

.yh-k-track__step {
    position: relative;
    padding-top: 42px;
    text-align: center;
}

/* The connector belongs to the step it arrives AT, not the one it leaves:
   drawn from the previous step's middle to this one. That is what lets a line
   be green only as far as progress has actually reached - drawing it forwards
   painted the segment into "Travelling" green while the trip had not started,
   and CSS cannot look ahead to the next sibling's state. */
.yh-k-track__step::before {
    content: "";
    position: absolute;
    top: 15px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--yh-line);
}

.yh-k-track__step:first-child::before { display: none; }

.yh-k-track__step.is-done::before { background: var(--yh-success); }

.yh-k-track__dot {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--yh-line);
    border-radius: var(--yh-r-pill);
    background: var(--yh-surface);
    color: var(--yh-muted);
    font-size: 13px;
}

.yh-k-track__step.is-done .yh-k-track__dot {
    border-color: var(--yh-success);
    background: var(--yh-success);
    color: #fff;
}

.yh-k-track__label {
    display: block;
    color: var(--yh-navy);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-medium);
    line-height: 1.35;
}

.yh-k-track__step:not(.is-done) .yh-k-track__label { color: var(--yh-muted); }

.yh-k-track__date {
    display: block;
    margin-top: 2px;
    color: var(--yh-muted);
    font-size: var(--yh-micro);
}

/* The stacked variant, for a narrow column (the application timeline in the
   review screen's sidebar). It is a class rather than inline styles on the
   template because the connector is a ::before, which an inline style cannot
   reach - the first attempt left horizontal lines running across a vertical
   list. */
.yh-k-track--stack {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: var(--yh-1);
}

.yh-k-track--stack .yh-k-track__step {
    padding: 0 0 0 44px;
    min-height: 40px;
    text-align: left;
}

.yh-k-track--stack .yh-k-track__step::before {
    top: -12px;
    left: 15px;
    width: 2px;
    height: 24px;
}

.yh-k-track--stack .yh-k-track__dot { left: 0; transform: none; }

.yh-k-track--stack .yh-k-track__date { display: inline; margin-left: var(--yh-2); }

/* On a phone five steps across is 70px each, which is narrower than the words.
   The line turns vertical: dot on the left, label beside it. */
@media (max-width: 640px) {
    .yh-k-track {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        gap: var(--yh-1);
    }

    .yh-k-track__step {
        padding: 0 0 0 44px;
        min-height: 40px;
        text-align: left;
    }

    .yh-k-track__step::before {
        top: -12px;
        left: 15px;
        width: 2px;
        height: 24px;
    }

    .yh-k-track__dot { left: 0; transform: none; }

    .yh-k-track__date { display: inline; margin-left: var(--yh-2); }
}

/* ===========================================================================
   LEADS BOARD  -  screen 4 of the owner's design
   specs/dashboard-screens.md, family AP5, 26 Sep 2026.

   Four columns, each a state, each holding cards. On a phone the columns
   stack, because four 90px columns are unusable and a horizontal scroll to
   find "lost" is worse than scrolling down.
   ========================================================================= */
.yh-k-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--yh-3);
    align-items: start;
}

.yh-k-board__col {
    padding: var(--yh-3);
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-card);
    background: var(--yh-sand, #f7f1e9);
    min-width: 0;
}

/* One tint per state, so a glance across the board reads as progress. */
.yh-k-board__col--new { background: var(--yh-tint); }
.yh-k-board__col--hot { background: var(--yh-accent-soft); border-color: var(--yh-accent); }
.yh-k-board__col--converted { background: rgba(23, 145, 95, .08); }
.yh-k-board__col--lost { background: rgba(100, 116, 139, .08); }

.yh-k-board__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--yh-2);
    margin-bottom: var(--yh-3);
}

.yh-k-board__title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--yh-navy);
    font-size: var(--yh-small);
    font-weight: var(--yh-w-heavy);
    letter-spacing: .02em;
    text-transform: uppercase;
}

.yh-k-board__col--hot .yh-k-board__title { color: var(--yh-accent-ink); }
.yh-k-board__col--converted .yh-k-board__title { color: var(--yh-success); }
.yh-k-board__col--lost .yh-k-board__title { color: var(--yh-muted); }

.yh-k-board__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: var(--yh-r-pill);
    background: var(--yh-surface);
    color: var(--yh-navy);
    font-size: var(--yh-micro);
    font-weight: var(--yh-w-heavy);
}

/* ---- One lead ------------------------------------------------------------- */
.yh-k-lead {
    padding: var(--yh-3);
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-control);
    background: var(--yh-surface);
    box-shadow: var(--yh-shadow-1);
}

.yh-k-lead + .yh-k-lead { margin-top: var(--yh-2); }

.yh-k-lead__name {
    margin: 0;
    color: var(--yh-navy);
    font-size: var(--yh-body);
    font-weight: var(--yh-w-bold);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.yh-k-lead__meta {
    margin: 2px 0 var(--yh-2);
    color: var(--yh-muted);
    font-size: var(--yh-micro);
}

.yh-k-lead__line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0 0 4px;
    color: var(--yh-navy);
    font-size: var(--yh-small);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.yh-k-lead__line i { color: var(--yh-muted); font-size: 12px; }

.yh-k-lead__note {
    margin: var(--yh-2) 0;
    padding: var(--yh-2);
    border-radius: var(--yh-r-control);
    background: var(--yh-tint);
    color: var(--yh-navy);
    font-size: var(--yh-micro);
    line-height: 1.5;
    white-space: pre-line;
}

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

/* The state buttons. Small, quiet, and each one a real form post - there is no
   drag and drop here on purpose (Livewire does not run on this server). */
.yh-k-lead__moves {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: var(--yh-2);
    padding-top: var(--yh-2);
    border-top: 1px solid var(--yh-line-soft, var(--yh-line));
}

.yh-k-lead__moves form { margin: 0; }

.yh-k-lead__moves button {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-r-pill);
    background: transparent;
    color: var(--yh-muted);
    font-family: inherit;
    font-size: var(--yh-micro);
    font-weight: var(--yh-w-medium);
    cursor: pointer;
}

.yh-k-lead__moves button:hover {
    border-color: var(--yh-link);
    color: var(--yh-link);
}

@media (max-width: 900px) {
    .yh-k-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .yh-k-board { grid-template-columns: minmax(0, 1fr); }
}

/* Where the money comes from: one bar, two shares. A pie chart of two values is a worse way of
   saying the same thing, and this reads at a glance on a tablet. */
.yh-k-split {
    display: block;
    height: 10px;
    border-radius: var(--yh-r-pill);
    background: var(--yh-tint);
    overflow: hidden;
}

.yh-k-split__agent {
    display: block;
    height: 100%;
    border-radius: var(--yh-r-pill);
    background: var(--yh-accent);
}