/* Yatriwala package-detail redesign — breadcrumb, hero header, image gallery, inclusion strip,
   Token-First Booking process. Scoped under .yw-tour-app-detail so it only ever touches this
   page; reuses the global --yw-primary/--yw-accent/--yw-navy/--yw-muted/--yw-line/--yw-soft
   tokens from public_html/landing/css/yatriwala-figma.css, which loads site-wide via Layout::app. */

.yw-app-token-first {
    margin: 20px 0;
    padding: 24px;
    border-radius: 16px;
    background: var(--yw-soft, #eaf1ff);
}

.yw-app-token-first__head {
    margin-bottom: 20px;
}

.yw-app-token-first__head strong {
    display: block;
    margin-bottom: 6px;
    color: var(--yw-navy);
    font-size: 19px;
    font-weight: 850;
}

.yw-app-token-first__head p {
    margin: 0;
    max-width: 640px;
    color: var(--yw-muted);
    font-size: 13.5px;
    line-height: 1.5;
}

.yw-app-token-first__steps {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.yw-app-token-first__step {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 16px 14px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(6, 31, 103, .06);
}

.yw-app-token-first__num {
    display: block;
    margin-bottom: 8px;
    color: var(--yw-line);
    font-size: 20px;
    font-weight: 900;
}

.yw-app-token-first__step i {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    border-radius: 999px;
    background: var(--yw-soft, #eaf1ff);
    color: var(--yw-primary);
    font-size: 14px;
}

.yw-app-token-first__step:nth-child(4n) i {
    background: rgba(255, 122, 0, .12);
    color: var(--yw-accent);
}

.yw-app-token-first__step strong {
    display: block;
    margin-bottom: 4px;
    color: var(--yw-ink, #172033);
    font-size: 13.5px;
    font-weight: 800;
}

.yw-app-token-first__step p {
    margin: 0;
    color: var(--yw-muted);
    font-size: 11.5px;
    line-height: 1.4;
}

.yw-app-token-first__arrow {
    flex: 0 0 auto;
    margin-top: 34px;
    color: var(--yw-line);
    font-size: 16px;
}

@media (max-width: 1023px) {
    .yw-app-token-first__steps {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .yw-app-token-first__arrow {
        display: none;
    }

    .yw-app-token-first__step {
        padding: 12px 14px;
    }

    .yw-app-token-first__num {
        position: absolute;
        top: 12px;
        right: 14px;
        margin: 0;
        font-size: 16px;
    }

    .yw-app-token-first__step i {
        margin-bottom: 6px;
    }
}

@media (max-width: 767px) {
    .yw-app-token-first {
        margin: 16px 0;
        padding: 16px;
    }
}

/* Overview: About + Trip Highlights two-column */
.yw-td-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 28px;
}

.yw-td-overview__bullets {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.yw-td-overview__bullets li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--yw-ink, #172033);
    font-size: 13.5px;
    line-height: 1.5;
}

.yw-td-overview__bullets i {
    margin-top: 3px;
    color: #16a34a;
    font-size: 12px;
}

.yw-td-highlight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.yw-td-highlight-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 10px;
    border: 1px solid var(--yw-line);
    border-radius: 12px;
    text-align: center;
}

.yw-td-highlight-card i {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--yw-soft, #eaf1ff);
    color: var(--yw-primary);
    font-size: 14px;
}

.yw-td-highlight-card span {
    color: var(--yw-ink, #172033);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

@media (max-width: 1023px) {
    .yw-td-overview {
        /* minmax(0, 1fr), not a bare 1fr. A plain fr track is minmax(auto, 1fr), so it cannot
           shrink below its content's min-content width - one wide child pushed this column to
           494px inside a 375px screen, and an ancestor with overflow:hidden then CLIPPED it,
           making the content unreachable rather than merely scrollable. The base rule above
           already uses minmax(0, ...); this override had dropped that protection. */
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .yw-td-highlight-grid {
        /* Same reason as above - keep the shrink protection the base rule has. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.yw-td-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 14px 0 10px;
    color: var(--yw-muted);
    font-size: 12.5px;
    font-weight: 650;
}

.yw-td-breadcrumb a {
    color: var(--yw-muted);
}

.yw-td-breadcrumb a:hover {
    color: var(--yw-primary);
}

.yw-td-breadcrumb i {
    font-size: 9px;
    opacity: .6;
}

.yw-td-breadcrumb span[aria-current] {
    color: var(--yw-ink, #172033);
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 260px;
}

.yw-td-header {
    margin-bottom: 16px;
}

.yw-td-header__badge {
    display: inline-flex;
    margin-bottom: 8px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--yw-soft, #eaf1ff);
    color: var(--yw-primary);
    font-size: 10.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.yw-td-header h1 {
    margin: 0 0 10px;
    color: var(--yw-navy);
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.18;
    font-weight: 850;
}

.yw-td-header__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    color: var(--yw-muted);
    font-size: 13px;
    font-weight: 650;
}

.yw-td-header__meta > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.yw-td-header__meta i {
    color: var(--yw-primary);
    font-size: 12px;
}

.yw-td-header__rating {
    color: var(--yw-navy);
    font-weight: 800;
}

.yw-td-header__rating i {
    color: #f5a524;
}

.yw-td-header__rating em {
    color: var(--yw-muted);
    font-style: normal;
    font-weight: 650;
}

.yw-td-header__route {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.yw-td-header__badge--fixed {
    background: rgba(255, 122, 0, .12);
    color: var(--yw-accent);
}

.yw-td-fixed-departure {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.yw-td-fixed-departure span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--yw-line);
    border-radius: 999px;
    color: var(--yw-navy);
    font-size: 12px;
    font-weight: 700;
}

.yw-td-fixed-departure span i {
    color: var(--yw-primary);
    font-size: 11px;
}

.yw-td-fixed-departure span.is-urgent {
    border-color: rgba(239, 68, 68, .3);
    background: rgba(239, 68, 68, .06);
    color: #ef4444;
}

.yw-td-fixed-departure span.is-urgent i {
    color: #ef4444;
}

/* Gallery */
.yw-td-gallery {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) 200px;
    gap: 10px;
    margin-bottom: 16px;
    height: 360px;
}

.yw-td-gallery__main {
    position: relative;
    display: block;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: var(--yw-soft, #eaf1ff);
}

.yw-td-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.yw-td-gallery__sale {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #fff;
    color: var(--yw-accent);
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 6px 16px rgba(6, 31, 103, .16);
}

.yw-td-gallery__side {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    height: 100%;
}

.yw-td-gallery__thumb {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: var(--yw-soft, #eaf1ff);
}

.yw-td-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.yw-td-gallery__more {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: rgba(6, 21, 51, .58);
    color: #fff;
    font-size: 18px;
    font-weight: 900;
}

.yw-td-gallery__more small {
    font-size: 10.5px;
    font-weight: 700;
    opacity: .9;
}

.yw-td-gallery__save {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--yw-navy);
    box-shadow: 0 6px 16px rgba(6, 31, 103, .18);
    cursor: pointer;
}

.yw-td-gallery__save:hover {
    color: var(--yw-accent);
}

/* Inclusion strip */
.yw-td-includes {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 20px;
    padding: 14px 8px;
    border: 1px solid var(--yw-line);
    border-radius: 12px;
}

.yw-td-includes span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    color: var(--yw-muted);
    font-size: 11px;
    font-weight: 700;
}

.yw-td-includes span.is-active {
    color: var(--yw-ink, #172033);
}

.yw-td-includes i {
    font-size: 17px;
    color: var(--yw-line);
}

.yw-td-includes span.is-active i {
    color: var(--yw-primary);
}

@media (max-width: 1023px) {
    .yw-td-gallery {
        grid-template-columns: minmax(0, 1.4fr) 130px;
        height: 280px;
    }

    .yw-td-includes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Booking card — "Reserve your trip" */
.yw-package-detail-booking .form-head {
    position: relative;
}

.yw-book-sale-badge {
    position: absolute;
    top: 14px;
    right: 16px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 122, 0, .12);
    color: var(--yw-accent);
    font-size: 11.5px;
    font-weight: 900;
}

.yw-book-sale-badge::after {
    content: ' OFF';
}

.yw-package-detail-booking .submit-group .btn span::after {
    content: '\2192';
    margin-left: 7px;
    font-weight: 700;
}

.yw-book-trust-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.yw-book-trust-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--yw-muted);
    font-size: 12px;
    font-weight: 650;
}

.yw-book-trust-list i {
    color: #16a34a;
    font-size: 13px;
}

.yw-book-social-proof {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 0;
    padding: 12px;
    border-top: 1px solid var(--yw-line);
}

.yw-book-social-proof i {
    color: var(--yw-primary);
    font-size: 18px;
}

.yw-book-social-proof strong {
    display: block;
    color: var(--yw-ink, #172033);
    font-size: 12.5px;
    font-weight: 800;
}

.yw-book-social-proof span {
    display: block;
    color: var(--yw-muted);
    font-size: 11.5px;
}

@media (max-width: 767px) {
    .yw-td-breadcrumb {
        margin: 10px 0 8px;
        font-size: 11.5px;
    }

    .yw-td-header {
        margin-bottom: 12px;
    }

    .yw-td-header h1 {
        font-size: 21px;
    }

    .yw-td-header__meta {
        font-size: 12px;
        gap: 6px 12px;
    }

    .yw-td-gallery {
        grid-template-columns: 1fr;
        grid-template-rows: 220px;
        height: auto;
        gap: 0;
        /* Exact full-bleed. The previous `margin: 0 -16px` assumed a 16px parent padding that
           is not present at this breakpoint, so the gallery ran 16px past BOTH edges (422px on
           a 390px viewport) and was only hidden by body{overflow-x:hidden} — cropping the image
           and relying on that clip to avoid a scrollbar. This spans exactly the viewport. */
        /* 100vw includes the scrollbar, so this rendered 390px wide inside a 375px
           viewport and overflowed by exactly the scrollbar width. 100% tracks the
           container, which is what was meant. */
        width: 100%;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        margin-bottom: 16px;
        border-radius: 0;
    }

    .yw-td-gallery__main {
        border-radius: 0;
        height: 220px;
    }

    .yw-td-gallery__side {
        display: none;
    }

    .yw-td-gallery__save {
        top: 14px;
        right: 14px;
    }

    .yw-td-includes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 0 0 16px;
        border-radius: 10px;
    }
}

/* Itinerary — vertical connected timeline. Reuses .yw-app-day's border/background/summary-grid
   base from yatriwala.css but restructures the summary into node+heading+chevron, so overrides
   below are scoped under .yw-app-itinerary--timeline for specificity over the shared rules. */
.yw-app-itinerary--timeline {
    position: relative;
    padding-left: 30px;
}

.yw-app-itinerary--timeline::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 22px;
    bottom: 22px;
    width: 2px;
    background: repeating-linear-gradient(to bottom, var(--yw-border) 0 6px, transparent 6px 12px);
}

.yw-app-itinerary--timeline .yw-app-day {
    position: relative;
    overflow: visible;
}

.yw-app-itinerary--timeline .yw-app-day summary {
    grid-template-columns: 30px minmax(0, 1fr) 20px;
    gap: 10px;
}

.yw-app-itinerary--timeline .yw-app-day summary .yw-app-day__node {
    grid-row: auto;
    justify-self: start;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--yw-forest, #1c7c54);
    color: #fff;
    font-size: 13px;
    font-weight: 950;
    text-transform: none;
    box-shadow: 0 0 0 4px #fbfcff;
}

.yw-app-itinerary--timeline .yw-app-day[open] summary .yw-app-day__node {
    background: var(--yw-coral, #ff6e4a);
}

.yw-app-itinerary--timeline .yw-app-day summary .yw-app-day__heading {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.yw-app-itinerary--timeline .yw-app-day summary .yw-app-day__label {
    color: var(--yw-coral, #ff6e4a);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.yw-app-itinerary--timeline .yw-app-day summary .yw-app-day__heading strong {
    min-width: 0;
    color: var(--yw-ink);
    font-size: 15px;
    line-height: 1.25;
    font-weight: 950;
}

.yw-app-itinerary--timeline .yw-app-day summary i.fa-angle-down {
    grid-row: auto;
    justify-self: end;
}

/* Hotels & Rooms — premium horizontal cards (image left, details right), stacked vertically. */
.yw-app-hotel-list {
    display: grid;
    gap: 12px;
}

.yw-app-hotel-list .yw-app-hotel {
    display: flex;
    align-items: stretch;
    flex: none;
    width: 100%;
    border: 1px solid var(--yw-border);
    border-radius: 18px;
    overflow: hidden;
    background: #fbfcff;
}

.yw-app-hotel-list .yw-app-hotel .yw-app-hotel__media {
    flex: 0 0 128px;
    width: 128px;
    height: auto;
    min-height: 112px;
}

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

.yw-app-hotel-list .yw-app-hotel .yw-app-hotel__media-fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--yw-forest);
    background: var(--yw-mist);
    font-size: 26px;
}

.yw-app-hotel-list .yw-app-hotel .yw-app-hotel__body {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.yw-app-hotel-list .yw-app-hotel .yw-app-hotel__stars {
    color: #f5a623;
    font-size: 11px;
    letter-spacing: 1px;
}

.yw-app-hotel-list .yw-app-hotel .yw-app-hotel__body strong {
    color: var(--yw-ink);
    font-size: 15px;
    line-height: 1.25;
    font-weight: 950;
    display: block;
}

.yw-app-hotel-list .yw-app-hotel .yw-app-hotel__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.yw-app-hotel-list .yw-app-hotel .yw-app-hotel__meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--yw-muted);
    font-size: 12px;
    font-weight: 800;
}

/* Inclusions / Exclusions — two side-by-side cards. */
.yw-app-inex-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.yw-app-inex-card {
    border: 1px solid var(--yw-border);
    border-radius: 16px;
    padding: 14px;
    background: #fbfcff;
}

.yw-app-inex-card--in {
    background: rgba(28, 124, 84, .06);
    border-color: rgba(28, 124, 84, .25);
}

.yw-app-inex-card--ex {
    background: rgba(148, 154, 168, .08);
}

.yw-app-inex-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 950;
    color: var(--yw-ink);
}

.yw-app-inex-card--in .yw-app-inex-card__head i {
    color: var(--yw-forest, #1c7c54);
}

.yw-app-inex-card--ex .yw-app-inex-card__head i {
    color: #9aa0ab;
}

.yw-app-inex-card ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.yw-app-inex-card li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--yw-ink);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
}

.yw-app-inex-card--in li i {
    color: var(--yw-forest, #1c7c54);
    margin-top: 3px;
}

.yw-app-inex-card--ex li {
    color: var(--yw-muted);
}

.yw-app-inex-card--ex li i {
    color: #b6bac2;
    margin-top: 3px;
}

/* Essential Info accordion — clean rows: leading icon, label, trailing chevron. */
.yw-app-accordion.yw-app-accordion--info summary {
    grid-template-columns: 22px minmax(0, 1fr) 18px;
    gap: 10px;
}

.yw-app-accordion.yw-app-accordion--info summary .yw-app-accordion__icon {
    grid-row: auto;
    justify-self: start;
    color: var(--yw-forest, #1c7c54);
    font-size: 15px;
}

.yw-app-accordion.yw-app-accordion--info summary span:not(.yw-app-accordion__icon):not(.yw-app-accordion__chevron) {
    min-width: 0;
    color: var(--yw-ink);
    font-size: 14px;
    font-weight: 900;
    text-transform: none;
    letter-spacing: normal;
}

.yw-app-accordion.yw-app-accordion--info summary .yw-app-accordion__chevron {
    grid-row: auto;
    justify-self: end;
    color: var(--yw-muted);
    font-size: 13px;
}

@media (max-width: 1023px) {
    .yw-app-inex-grid {
        /* minmax(0, 1fr) rather than a bare 1fr, so a long inclusion line cannot force
           this track wider than the phone screen. */
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Similar Trips rail — premium hover lift on top of the existing scroll-snap cards. */
.yw-app-related-card {
    transition: transform .2s ease, box-shadow .2s ease;
}

@media (hover: hover) {
    .yw-app-related-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 38px rgba(6, 31, 103, .14);
    }
}

/* ==========================================================================
   READABILITY — minimum text sizes on the package detail page.

   Audited 2026-08-20: 72 leaf elements were rendering below 12px, including the
   Token-First explainer (11.5px) — the copy that sells the ₹999 booking model — and
   the contact bar's phone number (11px). Body copy and contact details at that size
   are hard to read on a phone, which is where most of this traffic lands.

   Badges stay small deliberately (they are labels, not prose) but get a 10.5px floor
   so none drops to 9.5px.
   ========================================================================== */
.yw-app-token-first__step p {
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.yw-app-day__label {
    font-size: 12px !important;
}

.yw-tour-app-detail small,
.yw-tour-app-detail .form-group small {
    font-size: 12.5px !important;
}

/* Site-wide contact strip: phone number and helper lines were 11px. */
.yw-contact-bar small,
.yw-contact-bar span {
    font-size: 12.5px !important;
}

.yh-nav__badge {
    font-size: 10.5px;
}

/* ------------------------------------------------------- request-a-quote panel
   Shown in place of the token/booking form while no payment gateway can take money.
   It is the primary action in that state, so it is styled as the main CTA rather than
   as a fallback - a quote is a real outcome, not a consolation. */
.yw-book-quote {
    padding: 16px 18px 18px;
}

.yw-book-quote__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    border: 0;
    border-radius: 10px;
    padding: 14px 18px;
    background: #f2691f;
    color: #fff;
    font-size: 15.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.yw-book-quote__cta:hover,
.yw-book-quote__cta:focus-visible {
    background: #d95a15;
}

.yw-book-quote__cta:focus-visible {
    outline: 2px solid #10314f;
    outline-offset: 2px;
}

.yw-book-quote p {
    margin: 11px 0 12px;
    color: #5b6b7a;
    font-size: 13px;
    line-height: 1.55;
}

.yw-book-quote ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 7px;
}

.yw-book-quote li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #33475b;
    font-size: 12.5px;
    line-height: 1.45;
}

.yw-book-quote li i {
    color: #1b8a5a;
    margin-top: 2px;
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .yw-book-quote__cta { transition: none; }
}

/* Marks a field as optional without shouting - the required ones carry the asterisk. */
.yw-enquiry-optional {
    margin-left: 5px;
    color: #7b8794;
    font-size: 11.5px;
    font-weight: 400;
    text-transform: lowercase;
}

/* ------------------------------------------- single-action sticky bars (quote mode)
   With no gateway able to take payment there is one action, not two, so the button
   takes the space the pair used to share. A phone's sticky bar is the whole
   conversion surface - one unmistakable target beats two competing ones. */
.yw-app-book-bar--quote .yw-app-book-trigger,
.yw-mobile-book-bar--quote .yw-mobile-book-bar__quote {
    grid-column: 2 / -1;
    width: 100%;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 10px;
    background: #f2691f;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.yw-app-book-bar--quote .yw-app-book-trigger:hover,
.yw-mobile-book-bar--quote .yw-mobile-book-bar__quote:hover {
    background: #d95a15;
}

/* ------------------------------------------------------------- phone chrome trim
   On a 390px screen the page spent 186px above the title on a contact row, a header
   and a four-level breadcrumb that wrapped onto two lines - roughly a quarter of the
   first screen before the product was named. A phone has a back gesture and a back
   button; the trail is desktop wayfinding, so it steps aside and the title moves up. */
@media (max-width: 767px) {
    .yw-td-breadcrumb {
        display: none;
    }

    .yw-td-header {
        padding-top: 12px;
    }
}

/* ------------------------------------------------------- header on phones
   Two faults measured at 390px:

   1. The route line was white-space:nowrap with an ellipsis, so "Kochi - Munnar -
      Thekkady - Periyar - Alleppey - Kerala backwaters" was cut after "backw". That
      list is how someone decides whether the trip goes where they want, so it is the
      last thing that should be truncated. It wraps to two lines instead.

   2. The header ran edge to edge - text touched both screen edges with no gutter,
      which is what makes a page feel like a document rather than an app. */
@media (max-width: 767px) {
    .yw-td-header {
        padding-left: 16px;
        padding-right: 16px;
    }

    .yw-td-header__route {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow-y: hidden;
        line-height: 1.45;
    }
}