/* ==========================================================================
   Yatriwala Holidays — homepage / shell design system.

   WHY A NEW NAMESPACE: the legacy stylesheets (yatriwala-figma.css ~7.4k lines,
   yatriwala.css ~16k lines, yatriwala-production.css) all target `.yw-*` and have
   accumulated years of conflicting, breakpoint-scattered overrides for the same
   selectors. Rebuilding on top of them meant every change was a specificity fight
   and cards visibly broke when reused in new containers. Everything here uses the
   `yh-` prefix instead, so none of that legacy CSS can match this markup. This file
   is the single source of truth for the homepage, header and footer.
   ========================================================================== */

:root {
    --yh-navy: #0b2d54;
    --yh-navy-deep: #072544;
    --yh-blue: #1560bd;
    --yh-blue-dark: #10457f;
    --yh-orange: #f58220;
    --yh-orange-dark: #e0710f;
    --yh-ink: #0f2b46;
    --yh-muted: #64748b;
    --yh-line: #e3e9f2;
    --yh-tint: #eaf2fb;
    --yh-tint-soft: #f5f9fd;
    --yh-white: #fff;

    /* NOTE: these five are superseded further down this file by the design-refinement
       block ("Tighter than the original 16/12"). CSS custom properties resolve at
       computed-value time, so that later :root wins for every usage above and below it -
       editing the values here changes nothing. Change them there. Kept as a defensive
       default in case that block is ever removed. */
    --yh-radius: 16px;
    --yh-radius-sm: 12px;
    --yh-radius-pill: 999px;
    --yh-shadow: 0 4px 18px rgba(11, 45, 84, .08);
    --yh-shadow-lg: 0 14px 40px rgba(11, 45, 84, .14);

    --yh-space-sm: 16px;
    --yh-space-md: 24px;
    --yh-space-lg: 40px;
    --yh-space-section: 64px;

    --yh-container: 1200px;
}

/* ---------- base ---------- */
.yh-page,
.yh-page * {
    box-sizing: border-box;
}

.yh-page {
    margin: 0;
    color: var(--yh-ink);
    background: var(--yh-white);
    font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.yh-container {
    width: 100%;
    max-width: var(--yh-container);
    margin: 0 auto;
    padding: 0 20px;
}

.yh-section {
    padding: var(--yh-space-section) 0 0;
}

.yh-section:last-of-type {
    padding-bottom: var(--yh-space-section);
}

.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;
    top: 0;
    z-index: 999;
    padding: 10px 16px;
    background: var(--yh-navy);
    color: #fff;
}

.yh-skip:focus {
    left: 8px;
    top: 8px;
}

.yh-page :focus-visible {
    outline: 3px solid var(--yh-orange);
    outline-offset: 2px;
}

/* ---------- typography scale ---------- */
.yh-page h1 {
    margin: 0;
    font-size: clamp(38px, 4.2vw, 56px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.02em;
}

.yh-page h2 {
    margin: 0;
    font-size: clamp(26px, 2.5vw, 34px);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--yh-navy);
}

.yh-page h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
}

.yh-page p {
    margin: 0;
}

/* ---------- buttons ---------- */
.yh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--yh-radius-pill);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

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

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

.yh-btn--outline {
    color: var(--yh-navy);
    background: transparent;
    /* 28% navy, not --yh-line (12%): that edge disappeared on the white plan and agents
       cards, leaving a label floating beside the orange button (19 Sep 2026). */
    box-shadow: inset 0 0 0 1.5px rgba(11, 45, 84, .28);
}

.yh-btn--outline:hover {
    color: var(--yh-navy);
    background: var(--yh-tint);
}

.yh-btn--white {
    color: var(--yh-ink);
    background: #fff;
}

.yh-btn--white:hover {
    color: var(--yh-ink);
    background: #f1f5f9;
}

.yh-btn--sm {
    min-height: 38px;
    padding: 0 18px;
    font-size: 13px;
}

@media (hover: hover) {
    .yh-btn--primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(245, 130, 32, .32);
    }
}

.yh-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--yh-blue);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.yh-link-arrow:hover {
    color: var(--yh-blue-dark);
}

/* ---------- section heads ---------- */
.yh-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: var(--yh-space-md);
}

.yh-head p {
    margin-top: 6px;
    color: var(--yh-muted);
    font-size: 15px;
}

/* ==========================================================================
   TOP UTILITY BAR
   ========================================================================== */
.yh-topbar {
    background: var(--yh-navy);
    color: rgba(255, 255, 255, .9);
    font-size: 13px;
}

.yh-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 46px;
}

.yh-topbar__contact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 26px;
    min-width: 0;
}

.yh-topbar__contact a,
.yh-topbar__contact span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .9);
    text-decoration: none;
    white-space: nowrap;
}

.yh-topbar__contact a:hover {
    color: #fff;
}

.yh-topbar__contact i {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    font-size: 11px;
}

.yh-topbar__wa {
    background: #25d366 !important;
    color: #fff;
}

.yh-topbar__social {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.yh-topbar__social span {
    color: rgba(255, 255, 255, .72);
    font-size: 12.5px;
}

.yh-topbar__social a {
    color: #fff;
    font-size: 17px;
    line-height: 1;
    text-decoration: none;
    opacity: .92;
}

.yh-topbar__social a:hover {
    opacity: 1;
}

@media (max-width: 1100px) {
    .yh-topbar__contact a:nth-child(n+3),
    .yh-topbar__contact span {
        display: none;
    }
}

@media (max-width: 700px) {
    .yh-topbar__social span {
        display: none;
    }

    .yh-topbar__inner {
        min-height: 40px;
    }
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.yh-header {
    position: sticky;
    top: 0;
    z-index: 120;
    background: #fff;
    box-shadow: 0 1px 0 var(--yh-line);
}

.yh-header__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 92px;
}

.yh-logo {
    display: inline-flex;
    flex-direction: column;
    flex: 0 0 auto;
    line-height: 1;
    text-decoration: none;
}

/* align-self: start is load-bearing. .yh-logo is a flex column, so the img would otherwise
   stretch to the tagline's width — object-fit then letterboxed the artwork inside that wider
   box, painting it well below its set height and making the logo look small and off-centre. */
/* The file is trimmed to the artwork (yatriwala-logo-trim.png, 330x155), so the set height
   is the wordmark's height. The old 198x136 file was 55% transparent margin, which is why
   68px of image drew a 25px logo (19 Sep 2026). */
.yh-logo img {
    display: block;
    align-self: flex-start;
    width: auto;
    height: 48px;
    max-width: 250px;
    object-fit: contain;
}

.yh-logo small {
    margin-top: 5px;
    color: var(--yh-muted);
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}

/* Logo artwork is dark-on-transparent, so it is knocked to white on the navy footer. */
.yh-logo--footer img {
    height: 44px;
    max-width: 240px;
    filter: brightness(0) invert(1);
}

/* ---------- primary nav ---------- */
.yh-nav {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.yh-nav__item {
    position: relative;
}

.yh-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    border: 0;
    background: transparent;
    color: var(--yh-ink);
    font-size: 15px;
    font-family: inherit;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.yh-nav__link:hover {
    color: var(--yh-orange);
}

.yh-nav__link.is-active {
    color: var(--yh-orange);
}

.yh-nav__link.is-active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 2.5px;
    border-radius: 3px;
    background: var(--yh-orange);
}

.yh-nav__link i {
    font-size: 12px;
    opacity: .8;
}

.yh-nav__badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 9px;
    border-radius: var(--yh-radius-pill);
    background: #d9ecff;
    color: var(--yh-blue-dark);
    /* 9.5px was below a comfortable floor even for a badge — 10.5px keeps the pill compact
       while staying legible next to the nav item. */
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* ---------- mega menu ---------- */
.yh-mega {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    z-index: 130;
    width: min(1040px, calc(100vw - 40px));
    padding: 26px;
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-radius);
    background: #fff;
    box-shadow: var(--yh-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.yh-nav__item--mega:hover .yh-mega,
.yh-nav__item--mega.is-open .yh-mega {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.yh-mega__inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr);
    gap: 26px;
}

.yh-mega__col h3,
.yh-mega__col .yh-mega__title {
    margin: 0 0 14px;
    color: var(--yh-blue-dark);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.yh-mega__col ul {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.yh-mega__col a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--yh-ink);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
}

.yh-mega__col a:hover {
    color: var(--yh-orange);
}

.yh-mega__col li i {
    width: 18px;
    color: var(--yh-blue);
    font-size: 14px;
    text-align: center;
}

.yh-mega__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    color: var(--yh-orange) !important;
    font-size: 12.5px;
    font-weight: 700;
}

.yh-mega__help {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    align-self: start;
    padding: 16px;
    border-radius: var(--yh-radius-sm);
    background: var(--yh-tint);
}

.yh-mega__help > i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #fff;
    color: var(--yh-blue);
    font-size: 15px;
}

.yh-mega__help strong {
    display: block;
    color: var(--yh-navy);
    font-size: 13.5px;
    font-weight: 800;
}

.yh-mega__help small {
    display: block;
    margin: 2px 0 4px;
    color: var(--yh-muted);
    font-size: 12px;
}

.yh-mega__help a {
    color: var(--yh-blue);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

/* ---------- header right actions ---------- */
.yh-header__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.yh-icon-btn {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--yh-line);
    border-radius: 50%;
    background: #fff;
    color: var(--yh-navy);
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
}

.yh-icon-btn:hover {
    border-color: var(--yh-blue);
    color: var(--yh-blue);
}

.yh-icon-btn--mobile {
    display: none;
}

.yh-currency {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-radius-sm);
    color: var(--yh-navy);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .yh-currency {
        display: none;
    }
}

.yh-account {
    position: relative;
}

.yh-account__toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-radius-sm);
    background: #fff;
    color: var(--yh-navy);
    font-size: 14px;
    font-family: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.yh-account__toggle:hover {
    border-color: var(--yh-blue);
}

.yh-account__menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 130;
    display: grid;
    gap: 4px;
    width: 250px;
    padding: 12px;
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-radius-sm);
    background: #fff;
    box-shadow: var(--yh-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.yh-account.is-open .yh-account__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.yh-account__menu a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px;
    border-radius: var(--yh-radius-sm);
    color: var(--yh-ink);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.yh-account__menu a:hover {
    background: var(--yh-tint-soft);
}

.yh-account__menu i {
    width: 18px;
    color: var(--yh-muted);
    text-align: center;
}

.yh-account__b2b {
    color: var(--yh-orange) !important;
    font-weight: 700 !important;
}

.yh-account__b2b i {
    color: var(--yh-orange) !important;
}

/* This is an <a> inside .yh-account__menu, so the generic menu-row rule above was
   overriding its button styling — the CTA rendered as a flat 9px ink-coloured row
   rather than an orange pill. Restore the button treatment explicitly. */
.yh-account__menu a.yh-account__join {
    margin-top: 6px;
    justify-content: center;
    border-radius: var(--yh-radius-pill);
    background: var(--yh-orange);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.yh-account__menu a.yh-account__join:hover {
    background: var(--yh-orange-dark);
    color: #fff;
}

.yh-burger {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--yh-radius);
    background: transparent;
    color: var(--yh-navy);
    font-size: 21px;
    cursor: pointer;
}

.yh-nav__account {
    display: none;
}

/* ---------- tablet / mobile nav ---------- */
@media (max-width: 1200px) {
    .yh-nav__link {
        padding: 12px 10px;
        font-size: 14px;
    }

    .yh-logo small {
        display: none;
    }
}

@media (max-width: 1024px) {
    .yh-burger {
        display: inline-grid;
        place-items: center;
        order: -1;
    }

    .yh-icon-btn--mobile {
        display: grid;
    }

    .yh-header__inner {
        min-height: 76px;
        gap: 12px;
    }

    .yh-logo {
        margin-right: auto;
    }

    .yh-nav {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 200;
        width: min(340px, 88vw);
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        padding: 18px;
        background: #fff;
        box-shadow: 12px 0 40px rgba(11, 45, 84, .18);
        transform: translateX(-100%);
        transition: transform .25s ease;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .yh-nav.is-open {
        transform: translateX(0);
    }

    .yh-nav__close {
        align-self: flex-start;
        width: 42px;
        height: 42px;
        margin-bottom: 10px;
        border: 0;
        border-radius: var(--yh-radius);
        background: var(--yh-tint-soft);
        color: var(--yh-navy);
        font-size: 19px;
        cursor: pointer;
    }

    .yh-nav__link,
    .yh-nav__link--toggle {
        justify-content: space-between;
        width: 100%;
        padding: 14px 8px;
        border-bottom: 1px solid var(--yh-line);
        font-size: 15.5px;
    }

    .yh-nav__link.is-active::after {
        display: none;
    }

    .yh-nav__badge {
        position: static;
        transform: none;
        margin-left: 8px;
    }

    .yh-nav__item--mega {
        width: 100%;
    }

    /* Mega menu becomes an inline accordion panel inside the drawer rather than a
       hover flyout, which has no meaning on touch. */
    .yh-mega {
        position: static;
        transform: none;
        width: 100%;
        padding: 4px 0 10px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        display: none;
    }

    .yh-nav__item--mega:hover .yh-mega {
        display: none;
    }

    .yh-nav__item--mega.is-open .yh-mega {
        display: block;
        transform: none;
    }

    .yh-mega__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .yh-nav__account {
        display: block;
        margin-top: 18px;
        padding-top: 16px;
        border-top: 1px solid var(--yh-line);
    }

    .yh-nav__account h3 {
        margin: 0 0 12px;
        color: var(--yh-blue-dark);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .yh-nav__account a {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 11px 8px;
        color: var(--yh-ink);
        font-size: 14.5px;
        font-weight: 500;
        text-decoration: none;
    }

    .yh-nav__account i {
        width: 18px;
        color: var(--yh-muted);
        text-align: center;
    }

    .yh-nav__b2b {
        color: var(--yh-orange) !important;
        font-weight: 700 !important;
    }

    .yh-nav__b2b i {
        color: var(--yh-orange) !important;
    }

    .yh-nav-scrim {
        position: fixed;
        inset: 0;
        z-index: 190;
        background: rgba(11, 45, 84, .5);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
    }

    .yh-nav-scrim.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    .yh-account__toggle span {
        display: none;
    }

    .yh-account__toggle {
        padding: 0 12px;
    }
}

@media (min-width: 1025px) {
    .yh-nav__close {
        display: none;
    }

    .yh-nav-scrim {
        display: none;
    }
}

@media (max-width: 560px) {
    .yh-logo img {
        height: 34px;
        max-width: 170px;
    }

    .yh-logo--footer img {
        height: 38px;
    }

    .yh-icon-btn {
        width: 40px;
        height: 40px;
    }

    .yh-header__actions {
        gap: 6px;
    }
}

/* ==========================================================================
   HERO
   ========================================================================== */
/* The hero banner was removed (2026-08-20); this section now only frames the search panel.
   The old 62% gradient split was proportioned for a tall banner and cut awkwardly across the
   much shorter block, so it is a flat tint that simply ends where the panel does. */
.yh-hero {
    position: relative;
    padding-top: 24px;
    padding-bottom: 28px;
    background: var(--yh-tint);
}

.yh-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    padding-top: 52px;
}

.yh-hero__copy h1 {
    color: var(--yh-navy);
}

.yh-hero__accent {
    display: block;
    color: var(--yh-orange);
}

.yh-hero__lede {
    max-width: 460px;
    margin-top: 16px !important;
    color: #33506e;
    font-size: 16px;
}

.yh-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
    margin-top: 26px;
}

.yh-hero__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 190px;
    color: var(--yh-navy);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
}

.yh-hero__trust-item i {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(21, 96, 189, .1);
    color: var(--yh-blue);
    font-size: 12px;
}

.yh-hero__media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--yh-radius);
    overflow: hidden;
    box-shadow: var(--yh-shadow-lg);
}

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

@media (max-width: 900px) {
    .yh-hero {
        background: var(--yh-tint);
    }

    .yh-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
        padding-top: 34px;
    }

    .yh-hero__media {
        aspect-ratio: 16 / 10;
        order: -1;
    }

    .yh-hero__lede {
        max-width: none;
    }
}

/* ==========================================================================
   SEARCH PANEL (overlaps hero)
   ========================================================================== */
.yh-search {
    position: relative;
    z-index: 5;
    margin-top: 34px;
    border-radius: var(--yh-radius);
    background: #fff;
    box-shadow: var(--yh-shadow-lg);
    overflow: hidden;
}

.yh-search__tabs {
    display: flex;
    gap: 4px;
    padding: 6px 8px 0;
    border-bottom: 1px solid var(--yh-line);
    overflow-x: auto;
    scrollbar-width: none;
}

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

.yh-search__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border: 0;
    background: transparent;
    color: var(--yh-muted);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}

.yh-search__tab i {
    font-size: 14px;
}

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

.yh-search__tab.is-active {
    color: var(--yh-blue);
}

.yh-search__tab.is-active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--yh-blue);
}

.yh-search__form {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 14px;
    padding: 18px;
    align-items: stretch;
}

.yh-field {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 62px;
    padding: 10px 44px 10px 16px;
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-radius-sm);
    background: #fff;
}

.yh-field:focus-within {
    border-color: var(--yh-blue);
    box-shadow: 0 0 0 var(--yh-ring-width) var(--yh-ring);
}

.yh-field > span {
    color: var(--yh-ink);
    font-size: 13px;
    font-weight: 600;
}

.yh-field input,
.yh-field select {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--yh-muted);
    font-size: 13.5px;
    font-family: inherit;
}

.yh-field input::placeholder {
    color: #9aa8b8;
}

.yh-field__icon {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: var(--yh-muted);
    font-size: 15px;
    pointer-events: none;
}

.yh-search__submit {
    min-height: 62px;
    padding: 0 34px;
    border: 0;
    border-radius: var(--yh-radius-sm);
    background: var(--yh-orange);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .18s ease;
}

.yh-search__submit:hover {
    background: var(--yh-orange-dark);
}

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

    .yh-search__submit {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .yh-search {
        margin-top: 24px;
    }

    .yh-search__form {
        grid-template-columns: minmax(0, 1fr);
        padding: 14px;
        gap: 10px;
    }
}

/* ==========================================================================
   BENEFIT STRIP
   ========================================================================== */
.yh-benefits {
    padding: 26px 0;
}

/* Four benefits ("Easy Booking" went, 19 Sep 2026): four across with dividers, 2 x 2 on
   phones and tablets rather than a five-row list. */
.yh-benefits__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.yh-benefit {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 0 14px;
    border-right: 1px solid var(--yh-line);
}

.yh-benefit:last-child {
    border-right: 0;
}

.yh-benefit > i {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--yh-tint);
    color: var(--yh-blue);
    font-size: 14px;
}

.yh-benefit strong {
    display: block;
    color: var(--yh-ink);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
}

.yh-benefit small {
    display: block;
    margin-top: 1px;
    color: var(--yh-muted);
    font-size: 12px;
    line-height: 1.3;
}

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

    .yh-benefit {
        border-right: 0;
        padding: 0;
    }
}

@media (max-width: 640px) {
    .yh-benefits {
        padding: 20px 0;
    }

    .yh-benefit {
        align-items: flex-start;
        gap: 9px;
    }

    .yh-benefit > i {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .yh-benefit strong {
        font-size: 13px;
    }
}

/* ==========================================================================
   OFFER CARDS
   ========================================================================== */
.yh-offers__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.yh-offer {
    position: relative;
    display: flex;
    flex-direction: column;
    /* flex-start + margin-bottom:auto on the eyebrow keeps the label pinned top and the
       rest bottom, without the two layers being able to overlap. */
    justify-content: flex-start;
    gap: 2px;
    min-height: 210px;
    padding: 18px;
    border-radius: var(--yh-radius);
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background: var(--yh-navy);
    isolation: isolate;
}

/* Layering must use positive z-index. `isolation: isolate` on the card makes it a
   stacking context, and a child at a negative z-index then paints BEHIND the card's
   own opaque background — which hid every offer photo and rendered the whole row as
   flat navy rectangles. Image 0, scrim 1, content 2. */
.yh-offer__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.yh-offer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(7, 37, 68, .32) 0%, rgba(7, 37, 68, .82) 100%);
}

.yh-offer > *:not(.yh-offer__bg) {
    position: relative;
    z-index: 2;
}

@media (hover: hover) {
    .yh-offer:hover .yh-offer__bg {
        transform: scale(1.06);
    }
}

/* In normal flow, NOT absolutely positioned. It used to sit at top:16px while the card's
   content was bottom-aligned, so a title wrapping to three lines grew upward and printed
   straight over the label. */
.yh-offer__eyebrow {
    position: relative;
    z-index: 2;
    margin-bottom: auto;   /* holds the label at the top, pushes the rest to the bottom */
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
}

.yh-offer__value {
    /* Guaranteed clearance below the eyebrow, and a hard 3-line cap so admin-entered copy
       cannot grow the block until it collides with the label again. Longest current title
       cleared the eyebrow by only 2px before this. */
    margin-top: 10px;
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    /* 1.12 was too tight for the 3-line cap: at 24px the box came out 81px while
       three lines need 83, so the descenders on the last line ("Dubai holidays
       with visa-ready support") were sliced. 1.25 fits three full lines. */
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.yh-offer__value small {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 600;
    opacity: .9;
}

.yh-offer__note {
    margin: 6px 0 12px;
    color: rgba(255, 255, 255, .9);
    font-size: 12px;
    line-height: 1.4;
    /* Two-line cap for the same reason as the title above. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.yh-offer .yh-btn {
    align-self: flex-start;
}

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

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

/* ==========================================================================
   PACKAGE CARDS
   ========================================================================== */
.yh-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.yh-cards--3 {
    /* auto-fit, not repeat(3): "International Escapes" currently has only two
       published packages, and a hard 3-column track left a 194px hole on the
       right of the row — two cards then dead space, which reads as a broken
       section rather than a short catalogue. auto-fit collapses the empty track
       so N cards always fill the row, and it keeps working as packages are
       added. max 1fr stops two cards stretching absurdly wide. */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

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

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

.yh-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--yh-tint);
}

.yh-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

@media (hover: hover) {
    .yh-card:hover .yh-card__media img {
        transform: scale(1.05);
    }
}

.yh-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: var(--yh-radius-pill);
    background: var(--yh-orange);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .01em;
}

.yh-badge--blue {
    background: var(--yh-blue);
}

.yh-badge--green {
    background: #17915f;
}

.yh-badge--violet {
    background: #7c3aed;
}

.yh-card__body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
    padding: 14px;
}

.yh-card__title {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.32;
    font-weight: 700;
}

.yh-card__title a {
    color: var(--yh-ink);
    text-decoration: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

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

.yh-card__meta {
    color: var(--yh-muted);
    font-size: 12.5px;
    font-weight: 600;
}

.yh-card__incl {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 9px;
    margin-top: 2px;
    border-top: 1px solid var(--yh-line);
}

.yh-card__incl span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--yh-muted);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.yh-card__incl i {
    color: var(--yh-blue);
    font-size: 11px;
}

.yh-card__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
}

.yh-price small {
    display: block;
    color: var(--yh-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.yh-price strong {
    display: block;
    margin-top: 3px;
    color: var(--yh-ink);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.yh-price em {
    color: var(--yh-muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}

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

@media (max-width: 560px) {
    .yh-cards,
    .yh-cards--3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   SEARCH RESULTS GRID  (/tour)
   Targets the legacy container that still wraps the results — the row is forced to
   display:grid by an older stylesheet, so Bootstrap's col-* widths no longer apply and
   cards rendered at uneven widths (285 / 241 / 265px) and heights. This makes the track
   uniform and lets each card fill its cell, so every card in a row matches.
   ========================================================================== */
/* .yw-service-list-shell wraps BOTH the holiday and hotel search results, so one rule keeps
   them consistent. Cards must also be stretched to fill their cell — the columns were 285px
   while the cards inside sat at 186-213px. */
.yw-package-list-shell .ajax-search-result .list-item > .row,
.yw-service-list-shell .ajax-search-result .list-item > .row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-left: 0;
    margin-right: 0;
}

.yw-package-list-shell .ajax-search-result .list-item > .row > [class*="col-"],
.yw-service-list-shell .ajax-search-result .list-item > .row > [class*="col-"] {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Full-width children must span every column. The grid above assumed each child is a
   product card, so the "no packages found" panel — a single .col-lg-12 — was crammed
   into one 345px track and its copy wrapped to one character per line. */
.yw-package-list-shell .ajax-search-result .list-item > .row > .col-lg-12,
.yw-package-list-shell .ajax-search-result .list-item > .row > .col-12,
.yw-package-list-shell .ajax-search-result .list-item > .row > .col-md-12,
.yw-service-list-shell .ajax-search-result .list-item > .row > .col-lg-12,
.yw-service-list-shell .ajax-search-result .list-item > .row > .col-12,
.yw-service-list-shell .ajax-search-result .list-item > .row > .col-md-12 {
    grid-column: 1 / -1 !important;
    display: block !important;
}

.yw-package-list-shell .ajax-search-result .yh-card,
.yw-package-list-shell .ajax-search-result .yh-hotel,
.yw-service-list-shell .ajax-search-result .yh-card,
.yw-service-list-shell .ajax-search-result .yh-hotel {
    width: 100% !important;
}

@media (max-width: 1024px) {
    .yw-package-list-shell .ajax-search-result .list-item > .row,
.yw-service-list-shell .ajax-search-result .list-item > .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    /* Two-up product grid on phones. A single full-width card showed only ~2 results per
       screen; shoppers expect to scan a grid like any commerce app. */
    .yw-package-list-shell .ajax-search-result .list-item > .row,
    .yw-service-list-shell .ajax-search-result .list-item > .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

/* ==========================================================================
   eSIM CARD
   A contained tint card on the canvas, no longer a saturated blue band (19 Sep
   2026): copy on the left, the orange button on the right, centred. The travel
   agents card at the foot of the page shares this geometry on white.
   ========================================================================== */
.yh-esim,
.yh-agents {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px 40px;
    padding: 32px 40px;
    border-radius: var(--yh-r-surface);
}

.yh-esim {
    background: var(--yh-tint);
}

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

.yh-esim__eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--yh-link);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* The card step: smaller than a section heading, as the eSIM and agents cards are
   secondary offers rather than sections of the catalogue. */
.yh-esim h2,
.yh-agents h2 {
    font-size: clamp(22px, 1.9vw, 26px);
    color: var(--yh-navy);
}

/* On the tint, secondary text is navy-soft (5.4:1): --yh-muted is 4.2:1 there. */
.yh-esim p {
    margin-top: 6px;
    color: var(--yh-navy-soft);
    font-size: 15px;
}

.yh-esim__checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

/* baseline, not center: a tick that wraps on a phone keeps its icon on the first line. */
.yh-esim__checks li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--yh-navy);
    font-size: 13.5px;
    font-weight: 600;
}

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

/* Five or more ticks: two even columns instead of a ragged wrap. */
@media (min-width: 641px) {
    .yh-esim__checks:has(> li:nth-child(5)) {
        display: grid;
        grid-template-columns: repeat(2, max-content);
        gap: 8px 32px;
    }
}

@media (max-width: 860px) {
    .yh-esim,
    .yh-agents {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
        padding: 28px;
    }
}

@media (max-width: 640px) {
    .yh-esim,
    .yh-agents {
        padding: 24px 20px;
    }

    .yh-esim__checks {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 12px;
    }

    .yh-esim__checks li {
        font-size: 13px;
        line-height: 1.35;
    }

    .yh-esim > .yh-btn,
    .yh-agents > .yh-btn {
        width: 100%;
    }
}

/* ==========================================================================
   PAIRED ROWS (International + Hotels, Destinations + Why)
   ========================================================================== */
.yh-duo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}

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

/* One column left (no hotels published, or no international packages): it takes the whole
   row instead of leaving the other half empty (specs/tasks/03-hotels.md T5). */
.yh-duo > .yh-duo__col:only-child {
    grid-column: 1 / -1;
}

@media (max-width: 1024px) {
    .yh-duo {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
}

/* ---------- hotel card (distinct from package card) ---------- */
.yh-hotels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

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

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

.yh-hotel__media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--yh-tint);
}

.yh-hotel__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

@media (hover: hover) {
    .yh-hotel:hover .yh-hotel__media img {
        transform: scale(1.05);
    }
}

.yh-hotel__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    padding: 12px;
}

.yh-hotel__name {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
}

.yh-hotel__name a {
    color: var(--yh-ink);
    text-decoration: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.yh-hotel__place {
    color: var(--yh-muted);
    font-size: 12px;
    font-weight: 600;
}

.yh-hotel__stars {
    display: inline-flex;
    gap: 1px;
    color: #f5a623;
    font-size: 11px;
}

.yh-hotel__price {
    margin-top: auto;
    padding-top: 8px;
    color: var(--yh-ink);
    font-size: 13.5px;
    font-weight: 800;
    white-space: nowrap;
}

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

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

/* Hotel card used standalone in the /hotel search grid (not inside .yh-hotels). Needs its
   own media sizing and a CTA, which the compact homepage variant does not carry. */
.yh-hotel__media {
    position: relative;
}

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

.yh-hotel__media-fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: var(--yh-tint);
    color: var(--yh-blue);
    font-size: 26px;
}

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

.yh-hotel__cta {
    margin-top: 10px;
    align-self: flex-start;
}

/* Placeholder for hotel rooms that have no photo — replaces an <img src=""> that browsers
   rendered as a broken-image icon on the hotel detail page. */
.yh-room-noimage {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 120px;
    border-radius: var(--yh-radius-sm);
    background: var(--yh-tint);
    color: var(--yh-blue);
    font-size: 26px;
}

/* ---------- destination tiles ---------- */
.yh-dest {
    display: block;
    min-width: 0;
    text-decoration: none;
    text-align: center;
}

.yh-dest__img {
    /* This is a <span>, so without an explicit display it stays inline - and aspect-ratio does
       nothing on an inline box. The child img's height:100% then resolves to auto, so every tile
       inherited its source photo's natural proportions and the captions below them landed at
       different heights. Block display is what makes the ratio (and the crop) actually apply. */
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--yh-radius-sm);
    overflow: hidden;
    background: var(--yh-tint);
}

.yh-dest__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

@media (hover: hover) {
    .yh-dest:hover .yh-dest__img img {
        transform: scale(1.07);
    }
}

/* Scoped to the tile: the destination page's root is also .yh-dest, and these rules shrank and
   blocked every <strong> on it, prices included (QA, 19 Sep 2026). */
a.yh-dest > strong {
    display: block;
    margin-top: 7px;
    color: var(--yh-ink);
    font-size: 12.5px;
    font-weight: 700;
}

a.yh-dest > small {
    display: block;
    color: var(--yh-muted);
    font-size: 11px;
}

/* ---------------------------------------------------------------- explore india
   Reuses the .yh-dest card so the tiles match the rest of the page. Only the grid
   and the type scale change: this row runs the full container width and carries a
   price.

   One row, never a ragged one (19 Sep 2026): nine live tiles made 6 + 3 at desktop
   and 2-2-2-2-1 on phones. Now >= 1025px shows one row of six and 641-1024px one
   row of four, the rest one tap away through the section's "View all" link; phones
   get a rail with every tile, like the other sections. grid-auto-flow: column keeps
   whatever is visible in that single row, so a shorter catalogue fills the row
   instead of leaving empty slots. Every rule is scoped to .yh-india: the destination
   page uses .yh-dest as a wrapper class. */
.yh-india {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 18px;
}

.yh-india > .yh-dest:nth-child(n + 7) {
    display: none;
}

.yh-india .yh-dest__img {
    aspect-ratio: 4 / 3;
}

.yh-india .yh-dest strong {
    margin-top: 10px;
    font-size: 14px;
}

.yh-india .yh-dest small {
    font-size: 11.5px;
}

.yh-india .yh-dest b {
    display: block;
    margin-top: 3px;
    color: var(--yh-ink);
    font-size: 12.5px;
    font-weight: 700;
}

@media (max-width: 1024px) {
    .yh-india > .yh-dest:nth-child(n + 5) {
        display: none;
    }
}

@media (max-width: 640px) {
    .yh-india {
        grid-auto-columns: 46%;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-inline: calc(50% - 50vw);
        padding-inline: var(--yh-gutter);
        scroll-padding-inline: var(--yh-gutter);
        padding-bottom: 4px;
    }

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

    .yh-india > .yh-dest,
    .yh-india > .yh-dest:nth-child(n + 5) {
        display: block;
        scroll-snap-align: start;
    }
}

/* ==========================================================================
   PLAN MY TRIP CARD
   A light split card (19 Sep 2026), replacing a photo band under a dark navy
   overlay: white with a warm hairline, the copy and both actions on the left, the
   admin photo on the right at full height with nothing laid over it. Phones: the
   photo becomes a 160px strip on top, then the copy, then both buttons full width.
   With no photo set, the media cell is the plain tint.
   ========================================================================== */
.yh-plan {
    display: grid;
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    overflow: hidden;
    border: 1px solid var(--yh-line-warm);
    border-radius: var(--yh-r-surface);
    background: var(--yh-surface);
    box-shadow: var(--yh-shadow-1);
}

.yh-plan__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 40px;
}

.yh-plan p {
    max-width: 46ch;
    margin-top: 10px;
    color: var(--yh-muted);
    font-size: 15px;
    text-wrap: pretty;
}

.yh-plan__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.yh-plan__media {
    position: relative;
    min-height: 220px;
    background: var(--yh-tint);
}

.yh-plan__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

    .yh-plan__media {
        order: -1;
        min-height: 0;
        height: 160px;
    }

    .yh-plan__body {
        padding: 24px 20px;
    }

    .yh-plan__actions {
        flex-direction: column;
        margin-top: 20px;
    }

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

/* Touch targets: the compact --sm button variant is fine on desktop pointers but
   falls under the 44px minimum on touch screens, so it grows back on small widths. */
@media (max-width: 767px) {
    .yh-btn,
    .yh-btn--sm {
        min-height: 44px;
    }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.yh-faq__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
    align-content: start;
}

.yh-faq__item {
    height: fit-content;
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-radius-sm);
    background: #fff;
    overflow: hidden;
}

.yh-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 16px;
    color: var(--yh-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
    list-style: none;
}

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

.yh-faq__item summary i {
    flex: 0 0 auto;
    color: var(--yh-muted);
    font-size: 13px;
    transition: transform .2s ease;
}

.yh-faq__item[open] summary i {
    transform: rotate(45deg);
}

.yh-faq__item p {
    padding: 0 16px 15px;
    color: var(--yh-muted);
    font-size: 14px;
    line-height: 1.6;
}

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

/* ==========================================================================
   STATIC / LEGAL CONTENT PAGES  (/page/{slug})
   ========================================================================== */
.yh-doc__hero {
    padding: 44px 0 40px;
    background: var(--yh-tint);
}

.yh-doc__eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--yh-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.yh-doc__hero h1 {
    max-width: 780px;
    color: var(--yh-navy);
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.12;
    font-weight: 800;
}

.yh-doc__hero p {
    max-width: 680px;
    margin-top: 12px;
    color: #33506e;
    font-size: 16px;
}

.yh-doc__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
    align-items: start;
    padding-top: 44px;
    padding-bottom: var(--yh-space-section);
}

/* Prose styling for admin-authored content: the body is a WYSIWYG blob, so these
   descendant rules are scoped to .yh-doc__article rather than set on the elements. */
.yh-doc__article {
    min-width: 0;
    color: var(--yh-ink);
    font-size: 16px;
    line-height: 1.72;
}

.yh-doc__article > * + * {
    margin-top: 18px;
}

.yh-doc__article h2 {
    margin-top: 34px;
    color: var(--yh-navy);
    font-size: 24px;
    line-height: 1.25;
    font-weight: 800;
}

.yh-doc__article h3 {
    margin-top: 26px;
    color: var(--yh-navy);
    font-size: 18px;
    font-weight: 700;
}

.yh-doc__article ul,
.yh-doc__article ol {
    padding-left: 22px;
}

.yh-doc__article li + li {
    margin-top: 8px;
}

.yh-doc__article a {
    color: var(--yh-blue);
    text-decoration: underline;
}

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

.yh-doc__article table {
    width: 100%;
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
}

.yh-doc__article th,
.yh-doc__article td {
    padding: 10px 12px;
    border: 1px solid var(--yh-line);
    text-align: left;
}

.yh-doc__aside {
    position: sticky;
    top: 110px;
    display: grid;
    gap: 10px;
    padding: 22px;
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-radius);
    background: var(--yh-tint-soft);
}

.yh-doc__aside strong {
    color: var(--yh-navy);
    font-size: 16px;
    font-weight: 800;
}

.yh-doc__aside p {
    color: var(--yh-muted);
    font-size: 14px;
    line-height: 1.55;
}

.yh-doc__aside-link {
    color: var(--yh-blue);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.yh-doc__aside-link:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .yh-doc__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
        padding-top: 32px;
    }

    .yh-doc__aside {
        position: static;
    }

    .yh-doc__hero {
        padding: 32px 0 30px;
    }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.yh-footer {
    margin-top: var(--yh-space-section);
    padding: 46px 0 0;
    background: var(--yh-navy-deep);
    color: rgba(255, 255, 255, .78);
    font-size: 13.5px;
}

.yh-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
    gap: 34px;
}

.yh-footer .yh-logo__mark {
    color: #fff;
}

.yh-footer__tag {
    margin-top: 12px !important;
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
}

.yh-footer__social {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.yh-footer__social a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    transition: background-color .18s ease;
}

.yh-footer__social a:hover {
    background: var(--yh-orange);
}

.yh-footer h3 {
    margin-bottom: 14px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
}

.yh-footer__links {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.yh-footer__links a {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
}

.yh-footer__links a:hover {
    color: #fff;
}

.yh-footer__links i {
    margin-top: 4px;
    color: var(--yh-orange);
    font-size: 12px;
}

.yh-footer__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 40px;
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 12.5px;
}

.yh-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.yh-footer__legal a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
}

.yh-footer__legal a:hover {
    color: #fff;
}

@media (max-width: 1024px) {
    .yh-footer__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 30px;
    }
}

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

    .yh-footer__bar {
        justify-content: center;
        text-align: center;
    }
}

/* ---------- floating whatsapp ---------- */
.yh-wa {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 150;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 26px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .42);
}

.yh-wa:hover {
    color: #fff;
    transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
    .yh-page *,
    .yh-page *::before,
    .yh-page *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ==========================================================================
   MOBILE COMMERCE LAYOUT
   Phones should read like a shopping app: compact product tiles two-up, sections
   that slide horizontally, and a footer that collapses instead of running for
   screens. Desktop is untouched.
   ========================================================================== */
@media (max-width: 640px) {

    /* ---- compact product tile ---- */
    .yh-card,
    .yh-hotel {
        border-radius: var(--yh-radius);
    }

    .yh-card__media,
    .yh-hotel__media {
        aspect-ratio: 1 / 1;      /* square thumbs pack more per screen */
    }

    .yh-card__body,
    .yh-hotel__body {
        gap: 4px;
        padding: 9px;
    }

    .yh-card__title,
    .yh-hotel__name {
        font-size: 13px;
        line-height: 1.28;
    }

    .yh-card__meta,
    .yh-hotel__place {
        font-size: 11.5px;
    }

    /* Inclusion chips are detail, not decision-making info at this size. */
    .yh-card__incl {
        display: none;
    }

    .yh-card__foot {
        flex-direction: column;
        align-items: stretch;
        gap: 7px;
        padding-top: 8px;
    }

    .yh-price strong {
        font-size: 15px;
    }

    .yh-price em {
        font-size: 10.5px;
    }

    /* Full-width tap target, like an "Add to cart" button. */
    .yh-card__foot .yh-btn,
    .yh-hotel__cta {
        width: 100%;
        min-height: 40px;
        padding: 0 10px;
        font-size: 12.5px;
        align-self: stretch;
    }

    .yh-hotel__stars {
        font-size: 10px;
    }

    /* ---- horizontal sliding sections ---- */
    .yh-cards,
    .yh-cards--3,
    .yh-hotels {
        grid-auto-flow: column;
        grid-auto-columns: 46%;          /* peek the next tile so it reads as scrollable */
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 10px;
        /* Bleed to the screen edges, padded by the page gutter. scroll-padding must match
           the padding: with mandatory snap and none, the first card snapped flush against
           the screen edge instead of lining up with the heading (19 Sep 2026). */
        margin-inline: calc(50% - 50vw);
        padding-inline: var(--yh-gutter);
        scroll-padding-inline: var(--yh-gutter);
        padding-bottom: 4px;
    }

    .yh-cards::-webkit-scrollbar,
    .yh-cards--3::-webkit-scrollbar,
    .yh-hotels::-webkit-scrollbar {
        display: none;
    }

    .yh-cards > *,
    .yh-cards--3 > *,
    .yh-hotels > * {
        scroll-snap-align: start;
    }

    /* Offers stay a rail too rather than stacking into a tall column. */
    .yh-offers__grid {
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin-inline: calc(50% - 50vw);
        padding-inline: var(--yh-gutter);
        scroll-padding-inline: var(--yh-gutter);
    }

    .yh-offers__grid::-webkit-scrollbar { display: none; }
    .yh-offers__grid > * { scroll-snap-align: start; }

    /* Destination tiles: smaller type. */
    a.yh-dest > strong { font-size: 11.5px; }
    a.yh-dest > small  { font-size: 10.5px; }

    /* ---- collapsible footer sections ---- */
    .yh-footer__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .yh-footer__col {
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .yh-footer__col > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 0;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        list-style: none;
    }

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

    .yh-footer__col > summary::after {
        content: "+";
        font-size: 18px;
        font-weight: 400;
        line-height: 1;
        opacity: .8;
    }

    .yh-footer__col[open] > summary::after { content: "\2013"; }

    .yh-footer__col .yh-footer__links {
        padding-bottom: 14px;
    }

    /* Collapses a closed column on phones.
       This used to be the whole mechanism: the columns shipped closed, and an author
       `display` rule was relied on to re-open them from 641px up. Chrome now hides closed
       <details> content through ::details-content with content-visibility, which no `display`
       rule can override, so that left every footer column empty on desktop. The columns now
       ship open and script collapses them here instead; this rule styles that collapsed state. */
    .yh-footer__col:not([open]) .yh-footer__links {
        display: none;
    }

    .yh-footer__bar {
        margin-top: 20px;
    }
}

/* Desktop: the footer <details> must always be open and never look interactive. */
@media (min-width: 641px) {
    .yh-footer__col > summary {
        list-style: none;
        pointer-events: none;
        cursor: default;
    }

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

    /* Browsers hide non-summary children of a closed <details>; force them visible. */
    .yh-footer__col > *:not(summary) {
        display: block !important;
    }
}

/* ==========================================================================
   MOBILE: GET PRODUCTS ABOVE THE FOLD ON LIST PAGES

   Measured on a 390x844 phone, the first package sat 1559px down — nearly two full
   screens of scrolling before a single product. The space was promotional, not
   functional: a 296px offers rail and a 176px decorative banner on a page the user
   already reached by choosing to shop. Homepage keeps both; list pages prioritise
   results, as any commerce app does.
   ========================================================================== */
@media (max-width: 640px) {
    .bc_search_tour .bc_banner,
    .yw-package-search-page .bc_banner,
    .yw-service-list-shell .bc_banner {
        display: none;
    }

    /* The offers rail is a SIBLING of the page wrapper, not a child — a descendant selector
       silently matches nothing. It is injected by Layout::app on every inner page and never
       appears on the homepage, so hiding it here costs no homepage merchandising while
       reclaiming ~296px above the results on phones. */
    .yw-global-offers {
        display: none;
    }

    /* Tighten what remains so the search form does not eat a third of the screen. */
    .bc_search_tour .bc_form_search,
    .yw-package-search-page .bc_form_search {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

/* ==========================================================================
   MEGA-MENU POSITIONING

   The panel was centred on the "Holidays" nav item (left: 50% + translateX(-50%)
   inside .yh-nav__item--mega). That item sits left of the viewport centre, so a
   ~1100px panel ran off the LEFT edge and clipped the whole India Holidays column.

   Anchoring it to the header container instead makes its width and position
   independent of which nav item opened it, so it can never overflow the screen.
   Desktop only — inside the mobile drawer the panel is static and unaffected.
   ========================================================================== */
@media (min-width: 1025px) {
    .yh-header__inner {
        position: relative;
    }

    /* static so the nearest positioned ancestor becomes .yh-header__inner */
    .yh-nav__item--mega {
        position: static;
    }

    .yh-mega {
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        transform: translateY(-6px);
    }

    .yh-nav__item--mega:hover .yh-mega,
    .yh-nav__item--mega.is-open .yh-mega {
        transform: translateY(0);
    }
}

/* ==========================================================================
   PACKAGE CARD — PREMIUM POLISH

   The main flaw was rhythm, not decoration: titles wrapped to one or two lines, so
   the inclusion strip, price and CTA sat at different heights on every card in a
   row. Reserving a fixed two-line title block makes every subsequent row align
   across the whole grid, which is what reads as "designed" rather than assembled.
   ========================================================================== */
@media (min-width: 641px) {

    .yh-card {
        border-color: rgba(11, 45, 84, .08);
        box-shadow: var(--yh-shadow-lg);
        transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
    }

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

    /* Subtle scrim so the image meets the white body instead of cutting hard. */
    .yh-card__media::after {
        content: "";
        position: absolute;
        inset: auto 0 0 0;
        height: 42%;
        background: linear-gradient(180deg, transparent, rgba(9, 30, 56, .22));
        pointer-events: none;
    }

    .yh-card__body {
        gap: 0;
        padding: 16px 16px 14px;
    }

    /* Two-line reservation: this is what aligns every row across the grid.
       Whole-pixel line-height (16 x 1.375 = 22px) and an exact 44px reservation —
       an em-based value computed to a fraction and rounded inconsistently, leaving
       rows 1px out of step between cards. */
    .yh-card__title {
        /* Must be >= 2 x computed line-height or two-line titles overflow the reservation
           and sit 2px lower than single-line ones. Measured 22.95px per line here, so 46px
           covers both cases exactly. */
        min-height: 46px;
        margin-bottom: 4px;
        font-size: 16px;
        line-height: 1.4;
        letter-spacing: -.01em;
    }

    /* The clamp was being overridden (computed display resolved to flow-root), so a
       three-line title would have pushed every row below it out of alignment. */
    .yh-card__title a {
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .yh-card__meta {
        display: block;
        margin-bottom: 12px;
        color: var(--yh-muted);
        font-size: 12.5px;
        letter-spacing: .01em;
    }

    .yh-card__incl {
        gap: 4px 12px;
        padding-top: 11px;
        margin-top: 0;
        border-top: 1px solid var(--yh-line);
        min-height: 40px;
        align-items: center;
    }

    .yh-card__incl span {
        font-size: 11.5px;
        color: #5b6b7f;
    }

    .yh-card__incl i {
        opacity: .85;
    }

    /* margin-top MUST stay auto so the price row pins to the bottom of the card. Setting a
       fixed margin here overrode the base rule and unpinned it, so cards carrying the optional
       fixed-departure line pushed their price row 31px out of line with their neighbours. */
    .yh-card__foot {
        align-items: center;
        margin-top: auto;
        padding-top: 14px;
        border-top: 1px solid var(--yh-line);
    }

    /* Price block: label, then figure + struck original on one baseline, then unit. */
    .yh-price small {
        margin-bottom: 2px;
        font-size: 10.5px;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    .yh-price__row {
        display: flex;
        align-items: baseline;
        gap: 7px;
    }

    .yh-price strong {
        margin-top: 0;
        font-size: 20px;
        letter-spacing: -.02em;
    }

    .yh-price del {
        color: var(--yh-muted);
        font-size: 12.5px;
        text-decoration-thickness: 1px;
        opacity: .85;
    }

    .yh-price em {
        display: block;
        margin-top: 2px;
        font-size: 11px;
    }

    .yh-card__foot .yh-btn {
        flex: 0 0 auto;
        min-height: 40px;
        padding: 0 16px;
        font-size: 12.5px;
        box-shadow: 0 6px 14px rgba(245, 130, 32, .26);
    }

    /* Discount badge: solid, consistent weight, sits clear of the image edge. */
    .yh-badge {
        top: 12px;
        left: 12px;
        padding: 5px 11px;
        border-radius: var(--yh-radius-sm);
        font-size: 11px;
        letter-spacing: .02em;
        box-shadow: 0 4px 12px rgba(9, 30, 56, .22);
        backdrop-filter: saturate(1.2);
    }
}

/* ==========================================================================
   HOTEL CARD — matching polish

   These currently align only because every hotel name happens to fit one line; a
   longer name would wrap and push the stars, price and CTA out of step exactly as
   happened on the package cards. Reserving two lines makes that structural rather
   than incidental. Also reserves the star row, which is optional per hotel.
   ========================================================================== */
@media (min-width: 641px) {

    .yh-hotel {
        border-color: rgba(11, 45, 84, .08);
        box-shadow: var(--yh-shadow-lg);
        transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
    }

    @media (hover: hover) {
        .yh-hotel:hover {
            transform: translateY(-4px);
            box-shadow: var(--yh-shadow-lg);
        }
    }

    .yh-hotel__media::after {
        content: "";
        position: absolute;
        inset: auto 0 0 0;
        height: 42%;
        background: linear-gradient(180deg, transparent, rgba(9, 30, 56, .22));
        pointer-events: none;
    }

    .yh-hotel__body {
        gap: 0;
        padding: 14px;
    }

    .yh-hotel__name {
        min-height: 40px;          /* two lines at 20px */
        margin-bottom: 3px;
        font-size: 14.5px;
        line-height: 1.38;
    }

    .yh-hotel__name a {
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .yh-hotel__place {
        display: block;
        margin-bottom: 6px;
        font-size: 12px;
    }

    /* Reserved so hotels without a star rating do not shift the rows beneath them. */
    .yh-hotel__stars {
        min-height: 16px;
        font-size: 11px;
        letter-spacing: .5px;
    }

    .yh-hotel__price {
        margin-top: auto;          /* pins the price block to the card bottom */
        padding-top: 12px;
        border-top: 1px solid var(--yh-line);
        font-size: 15px;
        letter-spacing: -.01em;
    }

    .yh-hotel__price span {
        font-size: 11px;
        font-weight: 600;
    }

    .yh-hotel__cta {
        margin-top: 10px;
        min-height: 40px;
        font-size: 12.5px;
        box-shadow: 0 6px 14px rgba(245, 130, 32, .26);
    }
}

/* ==========================================================================
   HEADER / FOOTER LINK COLOUR ON INNER PAGES

   The homepage is a standalone template that loads ONLY this stylesheet, so the
   chrome looked correct there. Every other page renders through Layout::app, which
   also loads the three legacy stylesheets — their generic `a { color: #063b8f }`
   beat these rules, painting brand-blue links onto the navy topbar and footer.
   Result: contact details, footer links, social icons and legal links were all but
   invisible on every inner page.

   Scoped to the yh- chrome and marked !important purely to outrank that legacy
   generic selector, not to win against anything in this file.
   ========================================================================== */
.yh-topbar,
.yh-topbar__contact,
.yh-topbar__contact a,
.yh-topbar__contact span,
.yh-topbar__social span {
    color: rgba(255, 255, 255, .9) !important;
}

.yh-topbar__social a,
.yh-topbar__social a i {
    color: #fff !important;
}

.yh-topbar__contact a:hover {
    color: #fff !important;
}

.yh-footer,
.yh-footer__tag,
.yh-footer__bar span {
    color: rgba(255, 255, 255, .78) !important;
}

.yh-footer h3,
.yh-footer__col > summary {
    color: #fff !important;
}

.yh-footer__links a,
.yh-footer__legal a {
    color: rgba(255, 255, 255, .78) !important;
}

.yh-footer__links a:hover,
.yh-footer__legal a:hover {
    color: #fff !important;
}

/* Orange accent on the leading icons is intentional and must survive the override. */
.yh-footer__links i {
    color: var(--yh-orange) !important;
}

.yh-footer__social a,
.yh-footer__social a i {
    color: #fff !important;
}

/* Header nav on inner pages: keep the ink/orange scheme rather than legacy blue. */
.yh-header .yh-nav__link {
    color: var(--yh-ink) !important;
}

/* The round search / WhatsApp buttons are <a> elements, so the same legacy `a` colour
   rule turned them brand-blue on inner pages while the homepage showed navy. */
.yh-header a.yh-icon-btn,
.yh-header a.yh-icon-btn i {
    color: var(--yh-navy) !important;
}

.yh-header a.yh-icon-btn:hover,
.yh-header a.yh-icon-btn:hover i {
    color: var(--yh-blue) !important;
}

/* WhatsApp glyph keeps its brand green. */
.yh-header a.yh-icon-btn i.fa-whatsapp {
    color: #25d366 !important;
}

.yh-header .yh-currency,
.yh-header .yh-account__toggle {
    color: var(--yh-navy) !important;
}

.yh-header .yh-account__menu a {
    color: var(--yh-ink) !important;
}

.yh-header .yh-account__menu a.yh-account__b2b,
.yh-header .yh-account__menu a.yh-account__b2b i {
    color: var(--yh-orange) !important;
}

.yh-header .yh-account__menu a.yh-account__join {
    color: #fff !important;
}

.yh-header .yh-nav__link:hover,
.yh-header .yh-nav__link.is-active {
    color: var(--yh-orange) !important;
}

.yh-header .yh-mega__col a {
    color: var(--yh-ink) !important;
}

.yh-header .yh-mega__col a:hover,
.yh-header .yh-mega__cta {
    color: var(--yh-orange) !important;
}

.yh-header .yh-mega__col h3,
.yh-header .yh-mega__col .yh-mega__title {
    color: var(--yh-blue-dark) !important;
}

/* ==========================================================================
   GLOBAL OFFERS RAIL (inner pages)

   Rendered as a grid with auto-sized columns, so cards carrying less copy collapsed
   to ~91px while wordier ones took 420px — titles and buttons were clipped mid-word
   ("K a...", "Explo", "Find h"). Uniform auto-columns make every card the same size
   and let the rail scroll horizontally as intended.
   ========================================================================== */
.yw-global-offers__rail {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(300px, 1fr) !important;
    grid-template-columns: none !important;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.yw-global-offers__rail::-webkit-scrollbar {
    display: none;
}

.yw-global-offers__rail > * {
    scroll-snap-align: start;
    min-width: 0;
}

@media (max-width: 900px) {
    .yw-global-offers__rail {
        grid-auto-columns: minmax(260px, 1fr) !important;
    }
}

/* ==========================================================================
   EMPTY-STATE PACKAGE CARDS ("no packages found")

   These legacy cards are grids whose internal tracks do not match their content:
   the token block holds a label + value pair but was laid out on four ~44px
   columns, so "Booking flow" and "Token first, balance later" rendered one
   character per line. Rebuilt as simple stacked blocks.
   ========================================================================== */
.yw-empty-package-card__token {
    display: block !important;
    padding: 10px 12px;
    border-radius: var(--yh-radius);
    background: var(--yh-tint);
}

.yw-empty-package-card__token span {
    display: block !important;
    margin-bottom: 2px;
    color: var(--yh-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: normal;
}

.yw-empty-package-card__token strong {
    display: block !important;
    color: var(--yh-navy);
    font-size: 13px;
    line-height: 1.35;
    white-space: normal;
}

.yw-empty-package-card,
.yw-empty-package-card__body {
    display: block !important;
    min-width: 0;
}

.yw-empty-package-card__body {
    padding: 14px;
}

/* Rail of empty-state cards: uniform, scrollable, never squeezed. */
.yw-empty-package-rail__track {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(260px, 1fr) !important;
    grid-template-columns: none !important;
    gap: 14px;
    overflow-x: auto;
    scrollbar-width: none;
}

.yw-empty-package-rail__track::-webkit-scrollbar {
    display: none;
}

.yw-empty-package-rail__track > * {
    min-width: 0;
}

/* ==========================================================================
   INNER PAGES — SHARED SHELL TOKENS

   Measured drift from the homepage before this block: container content box
   1150px vs 1160px, section headings 24px vs 34px, heading navy #0c1f3d vs
   #0b2d54, panel radius 10px vs 16px, list-page H1 weight 950 vs 800. Each is
   small; together they made inner pages read as a different product.

   Scope is deliberately limited to the page *shell* — container rhythm, heading
   scale, surface treatment. Functional markup (booking forms, filters, Livewire
   components, checkout) is untouched.

   NOTE: inner pages load ~24k lines of legacy .yw-* CSS the homepage never sees,
   so a few rules need !important to land. Verify every change ON AN INNER PAGE.
   ========================================================================== */

.yw-inner-shell,
.bc_search_tour,
.yw-package-search-page,
.yw-service-list-shell,
.yw-service-detail-page {
    --yh-inner-gutter: 20px;
}

/* ---- container rhythm: match the homepage's 1160px content box ----
   .yh-container is max-width 1200 with 20px padding and border-box, so the
   content box is 1160. Bootstrap's .container here was 1180/15 => 1150. */
.yw-inner-shell > .container,
.bc_search_tour .container,
.yw-package-search-page > .container,
.yw-service-list-shell > .container,
.yw-service-detail-page > .container {
    max-width: 1200px;
    padding-left: var(--yh-inner-gutter);
    padding-right: var(--yh-inner-gutter);
}

/* ---- heading scale + colour ---- */
.bc_search_tour h1,
.yw-package-search-page h1,
.yw-service-list-shell h1,
.yw-inner-shell h1 {
    font-weight: 800;           /* legacy shipped 950 — too heavy next to the homepage */
    letter-spacing: -.02em;
}

.bc_search_tour h2,
.yw-package-search-page h2,
.yw-service-list-shell h2,
.yw-service-detail-page h2,
.yw-inner-shell h2 {
    color: var(--yh-navy);      /* legacy #0c1f3d reads colder than the system navy */
    font-weight: 800;
    letter-spacing: -.01em;
}

/* Section titles on inner pages sit one step below the homepage's 34px: these
   pages already carry a page-level H1, so a full 34px H2 would fight it. */
.yw-package-list-shell .ajax-search-result h2,
.yw-service-list-shell .ajax-search-result h2,
.yw-inner-shell .yh-head h2 {
    font-size: clamp(22px, 2.2vw, 28px);
    line-height: 1.2;
}

/* ---- surfaces adopt the system radius + shadow ---- */
.yw-package-filter-panel,
.yw-mobile-list-tools,
.yw-package-category-nav,
.yw-empty-package-card,
.yw-inner-shell .panel {
    border-radius: var(--yh-radius) !important;
}

.yw-package-filter-panel,
.yw-empty-package-card,
.yw-inner-shell .panel {
    border: 1px solid var(--yh-line);
    box-shadow: var(--yh-shadow);
}

/* ---- page ground: use the system's soft tint rather than an ad-hoc blue.
   Kept tinted (not homepage white) on purpose: these are dense card lists and
   white cards need a ground to read against. ---- */
.bc_search_tour,
.yw-package-search-page,
.yw-service-list-shell,
.yw-inner-shell {
    background: var(--yh-tint-soft);
}

/* ---- primary actions get the system's pill shape ---- */
.bc_search_tour .btn-primary,
.yw-package-search-page .btn-primary,
.yw-service-list-shell .btn-primary,
.yw-inner-shell .btn-primary {
    border-radius: var(--yh-radius-pill);
    font-weight: 700;
}

/* ---- specificity corrections (measured, not guessed) ----
   The generic rules above lose to legacy selectors that carry more weight:
     max-width  <- body.frontend-page .container      (0,2,1) in yatriwala.css
     h1 weight  <- .bc_search_tour .bc_banner h1      (0,2,1) in yatriwala.css
     h2 colour  <- .yw-package-se... !important       in yatriwala.css
   Matching or exceeding each, no more. The container fix matters most: the
   yh- header/footer use a 1160px content box, so leaving page bodies at 1140
   left header and content visibly misaligned by 10px a side on every page. */

/* One global rule instead of enumerating page wrappers. yatriwala.css already
   sets `body.frontend-page .container { max-width: 1180px }` site-wide; this is
   the identical selector with the design-system value, so scope is unchanged and
   every page — not just the ones I happened to list — aligns with the yh- header
   and footer. Same specificity, wins on source order (this file loads later). */
body.frontend-page .container {
    max-width: 1200px;
    padding-left: 20px;
    padding-right: 20px;
}

.bc_search_tour .bc_banner h1,
.yw-package-search-page .bc_banner h1 {
    font-weight: 800;
}

/* (An explicit h2 colour override lived here. It is redundant now that --yw-ink
   is remapped — those legacy rules already read that token.) */

/* ---- page headings, site-wide ----
   Legacy page H1s render at weight 950 in #0c1f3d. Next to the homepage's 800
   they read as a different typeface, and 950 on a 52px display size is heavy
   enough to look unrefined. Scoped away from yh- chrome (header/footer set their
   own) and from admin. */
body.frontend-page h1:not(.yh-sr-only),
body.frontend-page h2 {
    letter-spacing: -.02em;
}

body.frontend-page h1:not(.yh-sr-only) {
    font-weight: 800;   /* weight is safe to force globally; colour is NOT — see below */
}

/* COLOUR IS REMAPPED AT THE TOKEN, NOT FORCED ON h1.
   An earlier attempt set `color: var(--yh-navy)` on every h1 and excluded heroes
   by class name. That is unmaintainable and it failed in practice: /esim renders
   its h1 on .yw-app-hero-card, a solid #063b8f panel, and the forced navy dropped
   contrast to 1.3:1 — effectively invisible.

   Remapping the legacy ink token instead is inherently safe: headings that opt
   into white (`color: #fff`) never read this variable, so they cannot be broken
   by it, while everything using the legacy ink shifts to the system navy at once.

   Do NOT do the same to --yw-navy: despite the name it resolves to #063b8f, the
   brand blue, and is used as a SURFACE colour (that same esim hero). */
:root {
    --yw-ink: #0b2d54;
}

/* The offers section zeroes its container gutter (one of 12 competing rules for
   `.yw-global-offers .container` across yatriwala.css and -production.css), which
   pushed it 20px wider than every other section. Restore the shared gutter. */
body.frontend-page .yw-global-offers > .container {
    /* Two traps here, both found by measuring rather than reading:
       1. Legacy declares the LOGICAL `padding-inline`. Logical and physical
          padding are separate cascade entries, so `padding-left` lost no matter
          how specific it was.
       2. yatriwala-production.css marks it `!important`, so specificity alone
          was never going to win.
       This also corrects the homepage, where the offers rail was likewise 20px
       wider than every neighbouring section. */
    padding-inline: 20px !important;
}

/* ---- search results toolbar ----
   Measured against the design system before this block:
     .topbar-search      radius 28px (system 16), bg rgba(255,255,255,.94),
                         justify-content: normal so the title and the sort
                         control sat jammed together instead of apart
     sort dropdown       radius 0 with a generic #ccc border — the single most
                         off-system control on the page
   The control is a working Livewire dropdown (Recommended / price asc / price
   desc / rating, all verified against the backend); only its skin changes. */

/* Specificity note: the winning legacy rule is
   `.yw-package-list-shell .bc-list-item .topbar-search` = (0,3,0). Adding
   .bc-list-item makes this (0,3,1), which beats it without needing !important. */
body.frontend-page .bc-list-item .topbar-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--yh-white);
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-radius);
    box-shadow: var(--yh-shadow);
    padding: 16px 20px;
}

body.frontend-page .bc-list-item .topbar-search .control.bc-form-order {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

/* Sort trigger adopts the system's control shape. */
body.frontend-page #yw-package-sort .dropdown-toggle,
body.frontend-page .bc-form-order .dropdown-toggle {
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-radius-pill);
    background: var(--yh-white);
    color: var(--yh-ink);
    font-weight: 600;
    font-size: 14px;
    padding: 8px 16px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

body.frontend-page #yw-package-sort .dropdown-toggle:hover,
body.frontend-page #yw-package-sort .dropdown-toggle:focus-visible,
body.frontend-page .bc-form-order .dropdown-toggle:hover,
body.frontend-page .bc-form-order .dropdown-toggle:focus-visible {
    border-color: var(--yh-blue);
    box-shadow: 0 0 0 var(--yh-ring-width) var(--yh-ring);
}

body.frontend-page .bc-form-order .item-title {
    color: var(--yh-muted);
    font-size: 14px;
    white-space: nowrap;
}

/* Dropdown panel matches the card surface rather than Bootstrap's default. */
body.frontend-page .bc-form-order .dropdown-menu {
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-radius-sm);
    box-shadow: var(--yh-shadow-lg);
    padding: 6px;
}

body.frontend-page .bc-form-order .dropdown-menu .dropdown-item {
    border-radius: var(--yh-radius-sm);
    font-size: 14px;
    padding: 8px 12px;
}

body.frontend-page .bc-form-order .dropdown-menu .dropdown-item:hover,
body.frontend-page .bc-form-order .dropdown-menu .dropdown-item:focus {
    background: var(--yh-tint-soft);
    color: var(--yh-navy);
}

/* ---- mobile: get results above the fold ----
   Measured on a 375x812 phone: the first result card started at y=1120, so a
   visitor saw NO packages without scrolling — the opposite of the product-grid
   feel the rest of the mobile layout aims for.

   Cause was duplication, not density. `.yw-mobile-list-tools` (Filters | Sort |
   Expert) sits directly above `.topbar-search`, which carried its own Filters
   button plus a "Sort by:" label — 114px of controls repeating the 62px bar
   above it. The sort trigger itself stays (the tools bar's Sort link anchors to
   #yw-package-sort, and that anchor must keep working); only the redundant
   chrome goes. */
@media (max-width: 767px) {
    body.frontend-page .bc-list-item .topbar-search {
        padding: 14px 16px;
        gap: 10px;
    }

    /* Duplicate of the Filters button in .yw-mobile-list-tools directly above. */
    body.frontend-page .bc-list-item .topbar-search .yw-filter-toggle {
        display: none;
    }

    /* The pill already reads as a sort control; the label is redundant here. */
    body.frontend-page .bc-list-item .topbar-search .bc-form-order .item-title {
        display: none;
    }

    body.frontend-page .bc-list-item .topbar-search .control.bc-form-order {
        width: 100%;
        justify-content: flex-start;
    }

    body.frontend-page .bc-list-item .topbar-search .bc-form-order .dropdown-toggle {
        width: 100%;
        text-align: left;
    }
}

/* ---- enquiry / contact forms (/contact and /plan-my-trip share this block) ----
   Measured drift before this: inputs at 8px radius with an rgba(6,31,103,.16)
   border, and a primary CTA in #ff6b2f at weight 900 with an 8px radius. That
   orange is NOT the brand orange — the system is #f58220 (--yh-orange), so the
   site was shipping two different oranges on the same page.

   Scoped to the .yw-contact-form class rather than a page wrapper: that class is
   shared by /contact, /plan-my-trip AND /b2b-partner (whose registration form
   reuses it), so one rule covers every enquiry form. It never appears in the
   booking or checkout markup, so those stay untouched. */

body.frontend-page .yw-contact-form .form-control {
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-radius-sm);
    font-size: 15px;
    color: var(--yh-ink);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

body.frontend-page .yw-contact-form .form-control::placeholder {
    color: var(--yh-muted);
}

/* Visible focus is a keyboard-accessibility requirement, not decoration. */
body.frontend-page .yw-contact-form .form-control:focus {
    border-color: var(--yh-blue);
    box-shadow: 0 0 0 var(--yh-ring-width) var(--yh-ring);
    outline: none;
}

body.frontend-page .yw-contact-form .btn-primary,
body.frontend-page .yw-contact-form button.submit {
    min-height: 46px;
    padding: 0 28px;
    border: 0;
    border-radius: var(--yh-radius-pill);
    background: var(--yh-orange);
    color: #fff;
    font-size: 15px;
    font-weight: 700;      /* 900 read as shouty next to the homepage's 700 */
    transition: background .15s ease;
}

body.frontend-page .yw-contact-form .btn-primary:hover,
body.frontend-page .yw-contact-form button.submit:hover {
    background: var(--yh-orange-dark);
    color: #fff;
}

body.frontend-page .yw-contact-form .btn-primary:focus-visible,
body.frontend-page .yw-contact-form button.submit:focus-visible {
    outline: 3px solid rgba(21, 96, 189, .45);
    outline-offset: 2px;
}

/* ---- primary CTA colour, site-wide ----
   The homepage's .yh-btn--primary is --yh-orange (#f58220), but every legacy
   .btn-primary is painted `var(--yw-coral) !important` (#ff6b2f) by
   yatriwala.css. The site was therefore shipping two different oranges, with
   the difference visible the moment a visitor left the homepage.

   Standardising on the homepage value, since that is the approved design.

   Deliberately NOT done by remapping --yw-coral: that token is an alias of
   --yw-accent consumed by ~83 rules, several of which use it as a TEXT colour,
   where #f58220 on white would drop below the contrast #ff6b2f already only
   just clears. Restricting the change to button surfaces avoids that entirely.
   `!important` is required only because the legacy declaration uses it. */
body.frontend-page .btn-primary,
body.frontend-page .btn.btn-primary {
    background: var(--yh-orange) !important;
    border-color: var(--yh-orange) !important;
    color: #fff !important;
}

body.frontend-page .btn-primary:hover,
body.frontend-page .btn.btn-primary:hover,
body.frontend-page .btn-primary:focus,
body.frontend-page .btn.btn-primary:focus {
    background: var(--yh-orange-dark) !important;
    border-color: var(--yh-orange-dark) !important;
    color: #fff !important;
}

/* ---- shared service-checklist tiles (eSIM and the other service pages) ----
   These rendered at 20px radius on a translucent rgba(255,255,255,.92), against
   the system's 16px solid-white card. Four tiles sitting a few pixels off the
   surrounding card language is exactly the kind of drift that reads as
   "unfinished" without being nameable. */
body.frontend-page .yw-service-checklist__grid > * {
    border-radius: var(--yh-radius);
    background: var(--yh-white);
    border: 1px solid var(--yh-line);
    box-shadow: var(--yh-shadow);
}

/* ==========================================================================
   LAYOUT DEFECTS FOUND BY VISUAL AUDIT (2026-08-24)

   Found by measuring rendered geometry — element overlap, scrollHeight vs
   clientHeight, and children escaping their parent — after a screenshot showed
   text being cut off that behavioural testing (HTTP status, DOM presence,
   query counts) could never have caught. A page can be "working" and still be
   unreadable.
   ========================================================================== */

/* ---- 1. search form covered the banner subtitle ----
   `.bc_form_search` is pulled up with margin-top:-50px to overlap the banner,
   but the banner only reserved 30px of bottom padding. The last line of
   "Choose Srinagar, Gulmarg, Pahalgam, Sonmarg, houseboat stays, cab plans,
   snow season..." was measured as 38px underneath the form.
   The banner must reserve at least the overlap plus a readable gap. */
/* !important and the doubled class are both required: yatriwala-production.css
   declares `body .bc_search_tour.yw-package-search-page .bc_banner
   { padding: 30px 0 !important }`, which no amount of plain specificity beats. */
body.frontend-page .bc_search_tour.yw-package-search-page .bc_banner,
body.frontend-page .bc_search_tour .bc_banner,
body.frontend-page .bc_search_hotel .bc_banner,
body.frontend-page .bc_search_visa .bc_banner,
body.frontend-page .bc_search_flight .bc_banner,
body.frontend-page [class*="bc_search_"] .bc_banner {
    /* 78px still left the last line 14px under the form (the banner has a fixed
       height, so padding repositions content rather than growing the box), which
       is why this is set from the measured shortfall rather than theory.
       Applies to EVERY search page: the same overlap was found on /hotel after
       fixing /tour, because each module has its own .bc_search_* wrapper. */
    padding-bottom: 132px !important;
}

@media (max-width: 767px) {
    /* The form does not overlap on mobile, so the extra reserve is dead space. */
    body.frontend-page .bc_search_tour.yw-package-search-page .bc_banner,
    body.frontend-page .bc_search_tour .bc_banner,
    body.frontend-page [class*="bc_search_"] .bc_banner {
        padding-bottom: 30px !important;
    }
}

/* ---- 2. offer card titles truncated mid-word ----
   Clamped to 2 lines at ~28px, so "Dubai holidays with visa-ready support" and
   "Document guidance and visa application support" rendered as
   "Dubai holidays with…". Measured 122px of content in a 59px box.
   Slightly smaller type plus a third line fits the real copy without
   changing the card's height language. */
/* There are TWELVE competing `.yw-global-offer strong` font-size rules across
   yatriwala.css and -production.css, the last of them
   `clamp(22px, 2.2vw, 31px) !important`. That is why the plain rule lost. */
body.frontend-page .yw-global-offer strong {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: clamp(18px, 1.5vw, 21px) !important;
    line-height: 1.3 !important;
}

@media (max-width: 767px) {
    body.frontend-page .yw-global-offer strong {
        font-size: 17px !important;
    }
}

/* ---- 3. workflow strip descriptions truncated ----
   "Filter by destination, duration, budget and inclusions" needed 49px in a
   32px box. Three lines covers every string currently in the strip. */
body.frontend-page .yw-package-workflow-row span,
body.frontend-page [class*="workflow-row"] span {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* ---- 4. "Find the right package" lost its last word to an ellipsis ----
   nowrap + ellipsis in a box 4px too narrow. These headings are short enough
   to wrap cleanly, and wrapping is better than hiding a word. */
body.frontend-page .yw-package-workflow-row strong,
body.frontend-page [class*="workflow-row"] strong {
    white-space: normal;
    text-overflow: clip;
    line-height: 1.3;
}

/* ---- 5. offers heading clipped its own descenders ----
   `.yw-global-offers__head strong` sets line-height 1.12 with overflow:hidden,
   so at 23px the box is 26px while the text needs 28px — the tails of the "p"
   and "y" in "Swipe current Yatriwala deals" were sliced off. A heading should
   never crop its own glyphs; 1.25 gives descenders room. */
body.frontend-page .yw-global-offers__head strong {
    line-height: 1.3 !important;
    overflow: visible !important;
}

/* ---- 6. collapsed itinerary days still rendered their contents ----
   REAL BUG, tour detail page (the main conversion page).

   `.yw-app-day__body { display: grid }` in yatriwala.css defeats the browser's
   native <details> collapsing: a closed <details> hides its non-summary children
   through the UA stylesheet, but an explicit `display` on a child overrides that.
   Every collapsed day therefore painted its full body — measured 242px of content
   escaping a 65px container and overlapping the section beneath, which is why 12
   itinerary lines showed up as covered by the next card.

   Restoring the collapse only when the day is closed keeps the grid layout for
   open days, so the accordion behaves as designed in both states. */
details.yw-app-day:not([open]) > .yw-app-day__body {
    display: none !important;
}

/* Same defect across the whole detail page, not just the itinerary: 8 of its
   <details> leaked content when closed (FAQ answers, chip grids), because each
   body carries an explicit `display` that overrides native collapsing.

   Scoped to .yw-tour-app-detail on purpose. A blanket
   `details:not([open]) > *` rule would also hit `.yh-footer__col`, which is a
   <details> deliberately collapsed on mobile and FORCED OPEN by CSS from 641px
   up — so the footer links would vanish on desktop. */
.yw-tour-app-detail details:not([open]) > *:not(summary) {
    display: none !important;
}

/* ==========================================================================
   MOBILE TAP TARGETS

   Measured at 375px: the section "View all …" links render 22px tall and the
   footer legal links 19px. WCAG 2.5.8 asks for 24px minimum, and a 19px link
   sitting beside three others is genuinely hard to hit with a thumb — the
   footer legal row is the worst case, four small links in a row.

   Padding is added rather than font-size, so the visual design is unchanged and
   only the hit area grows. Applied at mobile widths only: on desktop these are
   mouse targets and the extra spacing would loosen the section headers.
   ========================================================================== */
@media (max-width: 767px) {
    .yh-link-arrow,
    .yh-topbar__contact a {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
    }

    .yh-footer__legal a {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        /* Horizontal breathing room too: four links wrapping in a row need a gap
           between hit areas or the wrong one gets tapped. */
        padding-inline: 2px;
    }

    .yh-footer__legal {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 14px;
    }
}

/* ---- "Package includes" strip: mark what is NOT included ----
   The strip is labelled "Package includes", and non-included services were only greyed. Every
   package in the catalogue excludes airfare, so a muted "Flight" chip sitting beside genuine
   inclusions was read as an inclusion. A line through the label and a dimmed icon make the
   distinction explicit rather than tonal. */
.yw-td-includes span.is-excluded {
    opacity: .55;
}

.yw-td-includes span.is-excluded {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: currentColor;
}

.yw-td-includes span.is-excluded i {
    text-decoration: none;
}

/* ------------------------------------------------------------------
   Optional-field marker in the hero search.
   The travel month is genuinely optional, and saying so inline stops
   people treating the search as a form they must complete in full.
   ------------------------------------------------------------------ */
.yh-field > span .yh-field__opt {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: lowercase;
    color: var(--yh-muted, #6b7f7a);
    margin-left: 4px;
}

/* ------------------------------------------------------------------
   Rating on a package card (homepage + search results share this).
   Rendered ONLY when a real score and a real review count both exist —
   the templates guard it; there is no "empty rating" state to style.
   ------------------------------------------------------------------ */
.yh-card__rating {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    white-space: nowrap;
}

.yh-card__rating > i {
    color: #f5a623;
    font-size: 11px;
}

.yh-card__rating strong {
    color: var(--yh-ink, #10201d);
    font-weight: 700;
}

/* ==========================================================================
   SHADCN DESIGN LANGUAGE PORT

   shadcn/ui is React + Tailwind and cannot run here — this is Blade, Bootstrap
   and jQuery with no build step. What is portable is the *system*: its radii,
   its reliance on borders instead of shadows, its input anatomy and its focus
   rings. Those are what make it read as considered rather than decorated.

   The brand is untouched. Navy and orange stay exactly as they are; only the
   structural qualities change.

   Four deliberate departures from the previous system:
     1. Radius 16px -> 10px. Sixteen reads friendly-consumer; ten reads precise.
     2. Buttons stop being pills. This is the single biggest shift toward
        "professional, not bulky".
     3. Cards separate with a border, not a 40px shadow. The shadow was most of
        the visual weight.
     4. Inputs get a real boundary and a real focus ring. They previously set
        `border: 0; outline: 0`, which removed the focus indicator outright —
        an accessibility fault as much as a visual one.
   ========================================================================== */

:root {
    /* Tighter than the original 16/12. shadcn's default is 0.5rem; 10px sits
       just above it so existing 12px paddings still look intentional. */
    --yh-radius: 10px;
    --yh-radius-sm: 8px;
    --yh-radius-btn: 8px;
    /* --yh-radius-pill is deliberately NOT changed: badges and chips should
       stay fully rounded. Only buttons stop being pills. */

    /* Borders do the separating now, so shadows drop to a hairline lift. */
    --yh-shadow: 0 1px 2px rgba(11, 45, 84, .06);
    --yh-shadow-lg: 0 4px 12px -2px rgba(11, 45, 84, .10);

    /* shadcn's focus ring: a visible halo in the brand colour, always shown on
       keyboard focus and never on mouse click. */
    --yh-ring: rgba(21, 96, 189, .40);
    --yh-ring-width: 3px;

    /* A dedicated input border, one step darker than --yh-line so fields read
       as fields rather than as faint dividers. */
    --yh-input-border: #d5deeb;
    --yh-input-height: 42px;
}

/* ---------- buttons ---------- */

.yh-btn {
    border-radius: var(--yh-radius-btn);
    font-weight: 600;              /* was 700 — 700 shouts */
    min-height: 42px;              /* was 46px */
    padding: 0 18px;               /* was 24px */
    font-size: 14.5px;
    letter-spacing: -.005em;
}

.yh-btn--sm {
    min-height: 34px;
    padding: 0 12px;
    font-size: 13px;
}

/* shadcn buttons lift on hover by colour, not by moving. A transform on a
   button under the cursor is the kind of motion that reads as a toy. */
.yh-btn:hover { transform: none; }

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

.yh-card {
    border-radius: var(--yh-radius);
    box-shadow: var(--yh-shadow);
}

.yh-card:hover {
    transform: none;
    box-shadow: var(--yh-shadow-lg);
    border-color: #cdd9e8;
}

/* ---------- inputs ---------- */

/* The field wrapper carries the boundary; the inner input stays borderless so
   the icon and label keep their existing layout. */
.yh-field {
    border-radius: var(--yh-radius-sm);
}

.yh-field:focus-within {
    border-color: var(--yh-blue);
    box-shadow: 0 0 0 var(--yh-ring-width) var(--yh-ring);
}

/* Real form controls elsewhere on the site (contact, partner registration,
   checkout) get the full shadcn input treatment. */
.yh-page .form-control,
.yw-contact-form .form-control,
.yw-partner-register-form .form-control {
    min-height: var(--yh-input-height);
    border: 1px solid var(--yh-input-border);
    border-radius: var(--yh-radius-sm);
    padding: 8px 12px;
    font-size: 14px;
    background: #fff;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.yh-page .form-control:focus,
.yw-contact-form .form-control:focus,
.yw-partner-register-form .form-control:focus {
    border-color: var(--yh-blue);
    box-shadow: 0 0 0 var(--yh-ring-width) var(--yh-ring);
    outline: none;
}

.yh-page .form-control::placeholder,
.yw-contact-form .form-control::placeholder,
.yw-partner-register-form .form-control::placeholder {
    color: #9aa8bd;
}

/* Labels: shadcn sets them small, medium weight, and close to their field. */
.yw-contact-form label,
.yw-partner-register-form label {
    font-size: 13px;
    font-weight: 500;
    color: var(--yh-ink);
    margin-bottom: 6px;
}

/* ---------- focus, everywhere ---------- */

/* The previous stylesheet had five focus-visible rules in 3,863 lines and set
   `outline: 0` on inputs. Keyboard users had almost nothing to follow. */
.yh-page a:focus-visible,
.yh-page button:focus-visible,
.yh-page input:focus-visible,
.yh-page select:focus-visible,
.yh-page textarea:focus-visible,
.yh-page [tabindex]:focus-visible,
.yw-partner-page a:focus-visible,
.yw-partner-page button:focus-visible,
.yw-partner-page input:focus-visible,
.yw-partner-page select:focus-visible {
    outline: 2px solid var(--yh-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .yh-btn, .yh-card, .yh-field, .form-control { transition: none; }
}

/* ------------------------------------------------------------- how booking works
   A four-step sequence, so it is marked up as an ordered list and the numbers come from
   the counter rather than being typed into the content. */
.yh-steps {
    counter-reset: yh-step;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
    gap: 18px;
}

.yh-steps li {
    counter-increment: yh-step;
    position: relative;
    background: #fff;
    border: 1px solid var(--yh-line);
    border-radius: var(--yh-radius);
    padding: 20px 18px 18px;
    box-shadow: var(--yh-shadow);
}

.yh-steps li::before {
    content: counter(yh-step);
    position: absolute;
    top: -13px;
    left: 18px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--yh-orange);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.yh-steps li strong {
    display: block;
    color: var(--yh-ink);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 5px;
}

.yh-steps li span {
    display: block;
    color: var(--yh-muted);
    font-size: 13.5px;
    line-height: 1.55;
}

/* ------------------------------------------------------------------ agent card
   Addressed to a different audience than the rest of the page, so it is deliberately
   quiet: a white card with the eSIM card's geometry (see there), an outline button,
   no band and no imagery (19 Sep 2026; it was a navy card on a tint band). */
.yh-agents {
    border: 1px solid var(--yh-line-warm);
    background: var(--yh-surface);
}

.yh-agents h2 {
    margin: 0 0 4px;
}

.yh-agents p {
    max-width: 60ch;
    margin: 0;
    color: var(--yh-muted);
    font-size: 14.5px;
    text-wrap: pretty;
}

/* Star classification label - the icons alone read as a guest rating. */
.yh-hotel__stars em {
    font-style: normal;
    margin-left: 6px;
    color: var(--yh-muted);
    font-size: 11.5px;
}

/* ---------------------------------------------- floating WhatsApp button on phones
   The float is fixed at bottom:18px, which on a phone lands directly on top of the
   mobile tab bar (and, on a package page, close to the sticky action bar too) - three
   pieces of chrome fighting for the same corner. WhatsApp is already reachable on
   mobile from the top contact bar and the contact strip, so the float steps aside
   below the tab bar's breakpoint rather than overlapping it. */
@media (max-width: 767px) {
    .yh-wa {
        display: none;
    }
}

/* ==========================================================================
   MOBILE TOUCH + TYPE BASELINE
   Measured across all 16 screen types at 375px. These are design-system level
   defects, so they are fixed once here rather than per page.

   Touch: eight interactive elements were under 44px in BOTH axes. Wide-but-short
   links (a 137x32 phone number) are excluded deliberately - they are easy to hit.
   Square 32px pagination on a 50-package list is not.

   Type: 11.5px card meta ("7D . Kashmir") and 10.5px "/ person" are product
   information a buyer has to read, not chrome. Badges stay at 11px - they are
   labels, and enlarging them would crowd the cards they sit on.
   ========================================================================== */
@media (max-width: 767px) {
    /* Pagination was 32x32 - the smallest target on the site, on the control that
       moves between pages of results. */
    .page-link {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Header icon actions (WhatsApp, Search) were 40x40. */
    .yh-icon-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* 42x42 - two pixels short, and both are dismiss controls where a missed tap
       traps the user in an overlay. */
    .yh-nav__close {
        min-width: 44px;
        min-height: 44px;
    }

    /* Duration and destination on every product card. */
    .yh-card__meta {
        font-size: 13px;
    }

    /* The "/ person" qualifier - without it a price is ambiguous, so it has to be
       legible rather than decorative. */
    .yh-price em {
        font-size: 12px;
    }
}

/* ==========================================================================
   LISTING: PRODUCT ABOVE THE FOLD (mobile)
   Measured at 375px: four stacked rows of near-identical pills stood between the
   header and the first package - destination chips, Filters/Sort/Expert, a trust
   strip and quick filters - and a 141px results card spent that height announcing
   "HOLIDAY PACKAGES / 50 packages found" above a pill-shaped sort dropdown.
   First card sat at 580px.

   Someone who opened a package list wants packages. Two changes:
   1. the results header becomes one compact line (count + sort side by side);
   2. the trust strip moves BELOW the results - it is a reason to buy, which is
      worth reading after the goods, not instead of them.
   ========================================================================== */
@media (max-width: 767px) {
    /* Block container, so ordering needs a flex context first. */
    .bc-list-item {
        display: flex;
        flex-direction: column;
    }

    .bc-list-item > .topbar-search      { order: 1; }
    .bc-list-item > .yw-smart-picks     { order: 2; }
    .bc-list-item > .ajax-search-result { order: 3; }

    /* Reasons to book, read once there is something to book. */
    .bc-list-item > .yw-package-promise-strip {
        order: 4;
        margin-top: 18px;
    }

    /* One line: "50 packages found" on the left, sort on the right. */
    .topbar-search {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: nowrap;
        padding: 10px 12px;
    }

    /* "HOLIDAY PACKAGES" above a list of holiday packages, on the page whose own
       heading already says so. */
    .yw-package-results-title > span {
        display: none;
    }

    .yw-package-results-title h2 {
        margin: 0;
        font-size: 15px;
        white-space: nowrap;
    }

    .topbar-search .control.bc-form-order {
        margin: 0;
        flex: 0 0 auto;
    }

    /* The sort control carried 10px top and bottom margins inside an already-padded
       header, making a 42px dropdown occupy 62px. With the count above it that was
       122px of header to show one number and one dropdown. */
    .topbar-search .control.bc-form-order .item.orderby {
        margin: 0;
        min-height: 40px;
        /* Was a fixed 285px, which could not sit beside a 161px count inside a 319px
           header, so the two wrapped onto separate rows. Sized to its content they fit
           on one line. */
        width: auto;
        min-width: 0;
    }

    .topbar-search .control.bc-form-order .item.orderby .dropdown {
        margin-left: 6px;
        min-width: 0;
    }

    .topbar-search {
        padding: 10px 12px;
        margin-bottom: 12px;
        row-gap: 6px;
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   SERVICE TAB "COMING SOON" BADGE (mobile)
   At 375px the tab strip holds six tabs, so each is about 57px wide. The badge
   renders 64px, and being absolutely positioned at right:7px its left edge landed
   at -7px while the scrolling strip starts at 17px - so the strip clipped it and
   the Flights tab read "ing soon" hanging off the card edge.

   The label is shortened visually rather than hidden: "Soon" is ~32px and sits
   inside the tab. The element keeps its full "Coming soon" text for assistive
   tech - font-size:0 hides it from sighted users only.
   ========================================================================== */
@media (max-width: 767px) {
    .yw-search-service-tabs a small {
        max-width: none;
        overflow: visible;
        font-size: 0;
    }

    .yw-search-service-tabs a small::after {
        content: "Soon";
        font-size: 8px;
        font-weight: 900;
        line-height: 1;
        letter-spacing: .2px;
    }
}

/* ==========================================================================
   SERVICE SEARCH PAGES: hero copy + submit button (mobile)
   /hotel, /visa, /flight, /esim share .yw-package-search-hero.
   ========================================================================== */
@media (max-width: 767px) {
    /* Clamped to 2 lines while the sentence needs 3, so the hotel hero read
       "...in one mobile-friend..." - a truncated sentence in the largest copy on
       the page. One more line costs 19px and finishes the thought. */
    /* Scoped through the body class on purpose: the existing clamp lives on
       ".bc_search_hotel .yw-package-search-hero p" (two classes), so a single-class
       selector loses on specificity no matter where it sits in the cascade. */
    .yatriwala-design .yw-package-search-hero p {
        -webkit-line-clamp: 3;
    }

    /* The submit was 84px wide inside a 342px form, floated left, while every
       other primary action on the site is a full-width orange bar. On a phone the
       search button is THE action of the page. */
    .yw-service-search-page .form.bc_form .g-button-submit {
        width: 100%;
    }

    .yw-service-search-page .form.bc_form .btn-search {
        width: 100%;
        min-height: 50px;
        border-radius: var(--yh-radius);
        font-size: 15px;
        font-weight: 800;
        letter-spacing: .3px;
    }
}

/* Badge pinned to the right of a card image. Replaces an inline
   style="left:auto;right:10px;" that was written into the markup of the search card,
   where the stylesheet could neither see nor adjust it. */
.yh-badge--end {
    left: auto;
    right: 10px;
}

/* ==========================================================================
   SKELETON LOADING — yh- card
   The grid already sets wire:loading.class="skeleton-loading" on every card, and
   app.css already animates a shimmer — but it targets .thumb-image, .g-info > *
   and .g-rate-price, which were the OLD card's parts. Since the card was rebuilt
   on the yh- system those selectors match nothing, so the loading state has been
   inert: results simply blank and reappear.

   Same shimmer, pointed at the parts that exist now.
   ========================================================================== */
.skeleton-loading .yh-card__media,
.skeleton-loading .yh-card__title,
.skeleton-loading .yh-card__meta,
.skeleton-loading .yh-card__incl,
.skeleton-loading .yh-price {
    position: relative;
    overflow: hidden;
    background-color: var(--yh-line, #dddbdd);
    border-radius: var(--yh-radius-sm);
    color: transparent;
}

.skeleton-loading .yh-card__media > img,
.skeleton-loading .yh-card__incl > span,
.skeleton-loading .yh-price > * {
    visibility: hidden;
}

.skeleton-loading .yh-card__media::after,
.skeleton-loading .yh-card__title::after,
.skeleton-loading .yh-card__meta::after,
.skeleton-loading .yh-card__incl::after,
.skeleton-loading .yh-price::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, .35) 50%,
        rgba(255, 255, 255, 0) 100%);
    animation: yh-skeleton-sweep 1.4s infinite;
}

/* The badge asserts a fact about a package whose data has not arrived. */
.skeleton-loading .yh-badge,
.skeleton-loading .yh-btn {
    visibility: hidden;
}

@keyframes yh-skeleton-sweep {
    100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-loading .yh-card__media::after,
    .skeleton-loading .yh-card__title::after,
    .skeleton-loading .yh-card__meta::after,
    .skeleton-loading .yh-card__incl::after,
    .skeleton-loading .yh-price::after {
        animation: none;
    }
}

/* Descriptive badge — "Heritage", "City break", "Winter Special". These say what kind of
   trip it is; they are not offers, so they must not compete with the orange savings badge
   for attention. Navy on a light ground reads as a label rather than a claim. */
.yh-badge--neutral {
    background: rgba(11, 45, 84, .92);
    color: #fff;
}

/* ==========================================================================
   LISTING TOOLBAR — controls should not look like filters
   Measured at 375px: the destination strip and the Filters/Sort/Expert strip
   rendered at identical height, identical radius, identical white-pill-on-light,
   each with one dark-filled item at the left. Nothing distinguished "tap to filter
   by destination" from "tap to open a panel", so the two read as one confusing
   double-strip of near-identical pills.

   Destination chips stay as they are - they are the primary way to move around the
   catalogue and deserve the weight. The toolbar steps back: smaller, flatter,
   sitting on the page rather than floating above it. One filled button, because
   Filters is the primary control; the other two read as what they are.

   Also drops a linear-gradient(135deg, blue, green) - the only gradient on the page,
   and decoration rather than meaning - and brings a stray 16px radius onto the scale.
   ========================================================================== */
@media (max-width: 767px) {
    .yw-mobile-list-tools {
        gap: 6px;
        margin-bottom: 10px;
    }

    .yw-mobile-list-tools button,
    .yw-mobile-list-tools a {
        min-height: 40px;
        border-radius: var(--yh-radius);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0;
    }

    /* Flat brand navy. The gradient added a third colour to a control that needed
       none, and read as decoration on a strip whose job is to be unobtrusive. */
    .yw-mobile-list-tools button {
        background: var(--yh-ink, #0B2D54);
        color: #fff;
    }

    /* Secondary controls: outlined, not filled, so the eye lands on Filters first
       and on the destination strip above before either. */
    .yw-mobile-list-tools a {
        background: transparent;
        color: var(--yh-ink, #0B2D54);
        border: 1px solid var(--yh-line, #dce3ec);
    }
}

/* ==========================================================================
   CARD BADGES — stop them colliding on a narrow card
   The two-up grid gives each card a 151px image. A category badge
   ("Customisable", 100px) anchored left and a discount badge ("13%", 40px)
   anchored right need 160px with their offsets, so they overlapped by 9px and
   rendered as one merged blob with the category clipped.

   Stacked rather than dropped: the discount is the commercial hook and the
   category is what the buyer is choosing between - neither is noise. The image is
   151px tall, so a second row costs nothing that matters.
   ========================================================================== */
@media (max-width: 767px) {
    .yh-card__media .yh-badge--end {
        left: 10px;
        right: auto;
        /* 10px offset + 25px badge + 6px gap */
        top: 41px;
    }
}

/* ==========================================================================
   SERVICE SEARCH PAGES — search card was sliding under the sticky header
   /visa, /hotel, /flight, /esim.

   .bc_form_search carries margin-top: -30px so the search card overlaps the hero
   banner below it - a deliberate and normal treatment. But at <=640px the banner is
   set to display:none to save vertical space, and nothing compensated for the space
   it used to occupy. The negative margin then pulled the card up INTO the sticky
   header, which paints over it at z-index 120: on /visa the service tabs rendered
   with their tops sliced off and the "Soon" badge cut in half.

   Measured at 375px: header ends at 116px, card started at 86px - 30px underneath,
   exactly the pull-up. Cancelling it on mobile and adding a small gap puts the card
   back where it belongs. Desktop keeps the overlap, because there the banner exists.
   ========================================================================== */
@media (max-width: 640px) {
    /* Scoped through .bc_wrap deliberately. EIGHT rules set margin-top on this one
       element (-50, -30, -48, -48, -56, -42, -38), and the one that wins is
       ".bc_wrap .bc_search_tour .bc_form_search" at three classes. A two-class
       selector loses on specificity no matter where it sits in the cascade, so this
       matches the winner's weight rather than reaching for !important. */
    .bc_wrap .yw-service-search-page .bc_form_search,
    .bc_wrap .yw-package-search-page .bc_form_search {
        margin-top: 12px;
    }
}

/* ==========================================================================
   VISA RESULTS — one card per row on mobile
   The service grid puts two cards per row at <=640px, which works for a holiday
   card (image, title, one meta line, price, button) and collapses completely for a
   visa card, which carries an icon, a service name, a country, four inclusion
   chips, a struck-through price, a current price and a CTA.

   Measured at 375px: card 147px wide, the price element 9px wide by 126px tall -
   "Rs 6,499" wrapping one character per line, in red, straight through the "View
   Requirements" button. Its parent had collapsed to zero width. The inclusion chips
   broke to "Tou/rist/Vis/a". This is a flex min-width collapse, not a spacing
   problem: no amount of tuning makes that content fit 147px.

   Holiday cards keep their two-up grid - they were checked and they render fine.
   ========================================================================== */
@media (max-width: 640px) {
    .bc_wrap .bc_search_visa .ajax-search-result .list-item > .row,
    .bc_wrap .yw-service-list-shell .ajax-search-result .list-item > .row {
        grid-template-columns: minmax(0, 1fr);
    }

    .bc_wrap .bc_search_visa .ajax-search-result .list-item > .row > [class*="col-"],
    .bc_wrap .yw-service-list-shell .ajax-search-result .list-item > .row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
}

/* ==========================================================================
   SERVICE CARDS — apply the mobile/desktop swap they were built for
   The card markup carries .yw-tour-card__details, .yw-tour-card__mobile-actions
   and .yw-tour-card__secondary-actions, and yatriwala.css already has a complete
   mobile swap for them: hide the desktop price and details, show the compact
   mobile-actions bar instead. But every one of those rules is scoped to
   ".yw-tour-card.yw-tour-card--listing", and a visa card's root classes are
   "item-tour item-loop-wrap yw-visa-card". None of them ever matched.

   So both variants rendered at once inside a 272px nowrap flex row. The two blocks
   with min-width:auto took 262px and refused to shrink; everything with
   min-width:0 - including .g-price - was crushed to zero width. The price then
   rendered as an absolutely-positioned span against a zero-width containing block:
   "Rs 6,499" one character per line, in red, straight through the CTA.

   Same swap, extended to the cards that were always meant to have it.
   ========================================================================== */
@media (max-width: 767px) {
    .yw-visa-card .g-price,
    .yw-visa-card .yw-tour-card__details,
    .yw-visa-card .yw-tour-card__secondary-actions,
    .yw-service-list-shell .yw-visa-card .g-price {
        display: none;
    }

    .yw-visa-card .yw-tour-card__mobile-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 58px;
    }

    /* The row held both variants side by side; with one gone it can breathe, and
       wrapping means a long country name can never squeeze the price again. */
    .yw-visa-card .info {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   STICKY BOOK BAR: BOTTOM CLEARANCE
   --------------------------------------------------------------------------
   A package page on a phone carries TWO fixed bars: the app tab bar (67px)
   and, above it, the booking bar (70px). Body reserved 84px - enough for the
   tab bar alone. The result was that the last row of the footer sat under the
   booking bar and could not be scrolled to or tapped at any scroll position.

   The links stranded there were Cancellation Policy and Refund Policy: the
   two a customer looks for immediately BEFORE paying a token, and the two a
   payment provider expects to be reachable. Everything above them scrolled
   clear, so nothing looked broken - the page simply ended slightly too soon.

   :has() rather than a body class, because the bar is rendered by the blade
   conditionally and nothing sets a corresponding class on <body>.
   ========================================================================== */
@media (max-width: 991px) {
    body:has(.yw-app-book-bar),
    body:has(.yw-mobile-book-bar) {
        /* 67 tab bar + 70 book bar + 23 so the last link is tappable, not merely visible. */
        padding-bottom: 160px;
    }
}

/* ==========================================================================
   PACKAGE CARD: TOKEN LINE
   --------------------------------------------------------------------------
   A grid of packages priced 12,000-90,000 asks the reader to judge affordability
   from the largest number on the card. The amount actually needed to reserve is a
   small fraction of it, and that difference is the reason someone books with
   Yatriwala rather than an aggregator - so it belongs on the card, not two clicks
   in on the package page.

   Deliberately quiet: small, one line, below the price row. The full price must
   stay the headline, or the card starts to read as though the holiday costs 999.
   ========================================================================== */
.yh-card__token {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(234, 88, 12, 0.07);
    color: #9a3412;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.yh-card__token i {
    font-size: 11px;
    opacity: 0.8;
    flex: 0 0 auto;
}

/* In the 2-up phone grid the card column is ~140px wide. "Reserve for ₹1,925" plus the
   lock icon needs ~122px of that once padding is taken, so it wrapped onto two lines and
   left the icon stranded above the amount. The icon is decoration here - the word
   "Reserve" already carries the meaning - so it goes, and the line holds. */
@media (max-width: 767px) {
    .yh-card__token {
        padding: 5px 8px;
        font-size: 11px;
        white-space: nowrap;
    }

    .yh-card__token i {
        display: none;
    }
}

/* ==========================================================================
   PACKAGE PAGE: STICKY BOOKING SIDEBAR (desktop)
   --------------------------------------------------------------------------
   The package page is ~4,500px tall. The booking card sat at the top of a 340px
   column and scrolled away with it, so from the itinerary downwards the right
   third of the window was empty and the price, the token and the CTA were all
   off screen. A reader deciding between two hotels or reading the exclusions had
   nothing to act on without scrolling back up.

   The grid is align-items:start, so the sidebar shrinks to its content and a
   sticky child inside it would have no travel. Sticky goes on the grid ITEM: it
   is sized by its content but positions against the full grid area, which is the
   row's height. That is why this rule is on the aside, not on .bc_single_book_wrap.

   Offset clears the 92px sticky site header plus a 16px gap.
   ========================================================================== */
@media (min-width: 1024px) {
    .yw-package-detail-commerce > .yw-package-detail-booking {
        position: sticky;
        top: 108px;
        /* Long booking cards must still be readable on a short laptop window: scroll
           inside the card rather than trapping the end of it off screen. */
        max-height: calc(100vh - 124px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* The card carries its own surface; hide the scrollbar gutter until needed. */
    .yw-package-detail-commerce > .yw-package-detail-booking::-webkit-scrollbar {
        width: 6px;
    }

    .yw-package-detail-commerce > .yw-package-detail-booking::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(6, 31, 103, .18);
    }
}

/* ==========================================================================
   PACKAGE PAGE: SECTION RHYTHM
   --------------------------------------------------------------------------
   The page ran nine consecutive .yw-app-card blocks - same white rounded box,
   same head, same padding, one after another for 4,000px. Any single one of them
   looks fine; nine in a row is what makes the page read as generated rather than
   designed, because nothing signals which parts matter more than others.

   Editorial pages vary their surface. Here the card is reserved for content that
   genuinely benefits from being boxed - a list of hotels, a block of reviews -
   and everything else sits directly on the page, separated by space and a hairline
   rather than by a container. The result alternates instead of repeating.

   Done by id rather than by editing nine sections, so the blade keeps one section
   component and the presentation stays in the stylesheet.
   ========================================================================== */
@media (min-width: 1024px) {
    #yw-app-overview,
    #yw-app-plan,
    #yw-app-logistics,
    #yw-app-inclusions,
    #yw-app-policy,
    #yw-app-related {
        padding-left: 0;
        padding-right: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    /* A hairline instead of a box edge: still divides, without drawing another frame. */
    #yw-app-plan,
    #yw-app-logistics,
    #yw-app-inclusions,
    #yw-app-policy,
    #yw-app-related {
        border-top: 1px solid rgba(6, 31, 103, .09);
        padding-top: 30px;
        margin-top: 30px;
    }

    /* The overview is the first thing read after the price. Give it a lede measure
       and a size that reads as prose rather than as another UI label. */
    #yw-app-overview .yw-app-rich,
    #yw-app-overview > .yw-td-overview__col > p {
        max-width: 62ch;
        font-size: 15.5px;
        line-height: 1.65;
    }

    /* Section headings carried an eyebrow AND a heading saying the same thing. With the
       eyebrow gone the heading has to do the work, so it gets real display weight. */
    #yw-app-overview .yw-app-card__head strong,
    #yw-app-plan .yw-app-card__head strong,
    #yw-app-logistics .yw-app-card__head strong,
    #yw-app-inclusions .yw-app-card__head strong,
    #yw-app-policy .yw-app-card__head strong,
    #yw-app-related .yw-app-card__head strong {
        font-size: 22px;
        line-height: 1.2;
    }
}

/* --------------------------------------------------------------------------
   SECTION RHYTHM, PHONE
   The desktop rule above left phones with seven identical inset cards - same
   22px radius, same border, same shadow, stacked - which is the same monotony
   the desktop fix addressed, on the surface that carries most of the traffic.

   Phones are treated differently on purpose. A narrow column needs SOME grouping
   signal, so the card is kept where it groups a list of distinct objects (hotels,
   reviews, related trips) and dropped where the content is simply prose or a list
   that reads perfectly well on the page itself.

   Plain sections go edge to edge with their own 16px gutter. The inset card at
   10px margin and the full-width section at 0 then read as two different kinds of
   thing, which is what creates the rhythm - not decoration, but a real distinction
   between "here is a group of items" and "here is something to read".
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    #yw-app-overview,
    #yw-app-plan,
    #yw-app-inclusions,
    #yw-app-policy {
        margin-left: 0;
        margin-right: 0;
        /* The card's 10px margin + 15px padding gave a 25px gutter; 16px is the
           standard one for full-width content and keeps the two treatments distinct. */
        padding: 18px 16px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    #yw-app-plan,
    #yw-app-inclusions,
    #yw-app-policy {
        border-top: 1px solid rgba(6, 31, 103, .1);
    }

    #yw-app-overview .yw-app-card__head strong,
    #yw-app-plan .yw-app-card__head strong,
    #yw-app-inclusions .yw-app-card__head strong,
    #yw-app-policy .yw-app-card__head strong {
        font-size: 20px;
        line-height: 1.22;
    }

    /* The overview is prose; give it a reading measure and leading rather than the
       tight UI line-height every other block on the page uses. */
    #yw-app-overview .yw-app-rich,
    #yw-app-overview p {
        font-size: 14.5px;
        line-height: 1.62;
    }
}

/* --------------------------------------------------------------------------
   SIMILAR TRIPS: RESTORED ON PHONES
   A rule hid .yw-app-snapshot, .yw-app-expert and .yw-app-related on phones,
   presumably to shorten the page. The first two are defensible - the snapshot row
   repeats the header meta, and the expert block adds a fourth CTA to a screen that
   already has a sticky bar, an enquiry button and WhatsApp.

   Similar trips is not. It is the only recovery path when someone decides this
   package is not the one: without it a phone visitor's alternatives are the back
   button or nothing. It was already built as a scroll-snap rail - the markup and
   the card styles exist - so it was a finished feature switched off, not an
   unfinished one. The other two stay hidden deliberately.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .yw-app-related {
        display: block !important;
    }

    /* The rail bleeds past the card's own 15px padding (to the card edge, not the
       screen edge - this section stays a card on phones) so the next card is clipped
       rather than tidily inset. A cut-off card reads as "swipe for more"; one that
       stops neatly at the padding reads as the end of the list. */
    .yw-app-related .yw-app-related__rail {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 2px 16px 6px;
        margin: 0 -16px;
    }

    .yw-app-related .yw-app-related__rail::-webkit-scrollbar {
        display: none;
    }

    .yw-app-related .yw-app-related__rail > * {
        flex: 0 0 72%;
        scroll-snap-align: start;
    }
}

/* ==========================================================================
   SERVICE PAGES: WORKFLOW STEP DESCRIPTIONS
   --------------------------------------------------------------------------
   Each step row is a two-column grid - [step number][text] - but carries THREE
   children: the number, the title, and the description. With only two columns
   defined, the third auto-placed onto a second implicit row in COLUMN ONE, the
   32px number column. The description then wrapped at roughly three characters
   per line and ran 200px tall as a vertical ribbon.

   Nothing clipped, so it never tripped an overflow check; it simply rendered as
   an unreadable sliver on /esim, /visa and every other service page sharing this
   part. Placing the description in column two puts it under its own title, which
   is where the layout always meant it to go.
   ========================================================================== */
.yw-app-checkout-strip > div > small {
    grid-column: 2;
}

/* --------------------------------------------------------------------------
   SERVICE PAGES: TWO MORE GRID PLACEMENT FAULTS (desktop)

   1. .yw-app-expert is a two-column grid - [brand mark][text] - with THREE
      children, the third being the "Talk to expert" link. It auto-placed onto a
      second row in column one, the 48px brand-mark column, so a text button
      rendered 48px wide with its label spilling out. Same fault as the workflow
      steps above, different section.

   2. .yw-app-price-strip sits its actions in 96px columns, but every anchor in it
      was being sized to 46px - a circular icon-button width that suits the
      WhatsApp icon and nothing else. "Explore packages" (81px of text at
      white-space:nowrap) therefore overflowed its box by 35px. Letting the text
      buttons size to their content, with 46px kept as a floor, leaves the icon
      button circular and lets the labelled ones fit.
   -------------------------------------------------------------------------- */
.yw-app-expert > a {
    grid-column: 2;
    justify-self: end;
}

.yw-app-price-strip > a {
    width: auto;
    min-width: 46px;
}

/* ==========================================================================
   HOMEPAGE: ONE LIGHT BAND, THEN CARDS ON THE CANVAS (19 Sep 2026)
   --------------------------------------------------------------------------
   The owner asked for "light". From Offers down the page used to stack a blue eSIM
   band, a dark photo band, a navy agents band on a tint and the navy footer, with
   tint bands that started flush against the content above them. Now:

     How booking works    the ONLY full-bleed tint band, with canvas above it
     Your trip, your way  white split card
     eSIM                 contained tint card
     FAQ                  canvas
     Travel agents        white card, no band
     footer               the only dark block

   Sections carry top padding only, so the band takes a canvas margin: the Offers
   cards end 56px (40px on phones) before the tint starts instead of touching it.
   ========================================================================== */
#how-it-works {
    margin-top: 56px;
    padding-block: 56px;
    background: var(--yh-tint);
}

#how-it-works .yh-head p {
    color: var(--yh-navy-soft);
}

/* The last section's bottom padding is the whole gap above the footer; the footer's
   own margin showed as a cream strip. Homepage only: inner pages share .yh-footer. */
.yh-page .yh-footer {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   Phone section heads (.yh-page only; inner pages keep .yw-inner-shell .yh-head).
   Titles wrapped to three lines and subtitles were squeezed beside a long admin
   "View all ..." label. One column now: title (24px max), subtitle at full width,
   then the link on its own line. Sections tighten to 48px apart.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .yh-page {
        --yh-space-section: 48px;
    }

    .yh-page h2 {
        font-size: 24px;
        line-height: 1.2;
    }

    .yh-page .yh-esim h2,
    .yh-page .yh-agents h2 {
        font-size: 20px;
    }

    .yh-page .yh-head {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        margin-bottom: 16px;
    }

    .yh-page .yh-head p {
        font-size: 14px;
    }

    .yh-page .yh-head .yh-link-arrow {
        align-self: flex-start;
        min-height: 32px;
    }

    /* The trip-type rail is laid out in yatriwala-system.css; it pads by the gutter
       but had no scroll-padding, so its first tile snapped to the screen edge. */
    .yh-page .yh-trip-types__grid {
        scroll-padding-inline: var(--yh-gutter);
    }

    #how-it-works {
        margin-top: 40px;
        padding-block: 40px;
    }
}

/* ==========================================================================
   PHOTO CREDITS PAGE
   A licence obligation rendered as a real page rather than a dumping ground:
   destination on the left, photographer and source on the right, so it can be
   scanned to check a specific photo is credited.
   ========================================================================== */
.yh-credits {
    padding: 48px 0 64px;
}

.yh-credits h1 {
    margin: 0 0 10px;
    color: var(--yw-navy, #0b2a52);
    font-size: clamp(26px, 2.5vw, 34px);
    font-weight: 800;
    line-height: 1.2;
}

.yh-credits__lede {
    max-width: 62ch;
    margin: 0 0 28px;
    color: var(--yw-muted, #5b6b7a);
    font-size: 15px;
    line-height: 1.6;
}

.yh-credits__list {
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(6, 31, 103, .1);
}

.yh-credits__list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 20px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(6, 31, 103, .1);
}

.yh-credits__place {
    color: var(--yw-navy, #0b2a52);
    font-size: 14.5px;
    font-weight: 700;
}

.yh-credits__by {
    color: var(--yw-muted, #5b6b7a);
    font-size: 13.5px;
}

.yh-credits__by a,
.yh-credits__source a {
    color: var(--yw-primary, #0757a5);
    text-decoration: underline;
}

.yh-credits__source,
.yh-credits__empty {
    color: var(--yw-muted, #5b6b7a);
    font-size: 13.5px;
}

/* ---- Homepage QA follow-ups (19 Sep 2026, specs/tasks/01 H8 attempt 1) ------ */

/* Card names lost their "4D/3N" to the meta line; a third line on phones stops long
   names ("Rajasthan: Jaipur, Jodhpur & Jaisalmer") being cut mid-word. */
@media (max-width: 640px) {
    .yh-page .yh-card__title a {
        -webkit-line-clamp: 3;
    }
}

/* The closed phone drawer sits off-screen, but its shadow fell ~50px into view as a grey
   fade down the left edge of every page. Shadow only while it is open. */
@media (max-width: 1024px) {
    .yh-nav {
        box-shadow: none;
    }

    .yh-nav.is-open {
        box-shadow: 12px 0 40px rgba(11, 45, 84, .18);
    }
}

/* The footer email ran past the screen edge between 1025 and 1199px. */
.yh-footer a[href^="mailto:"] {
    overflow-wrap: anywhere;
}