/*
 * tdmc-public.css — TDMC public-site layout overrides.
 * Loaded AFTER build/css/style.css so these rules win.
 * Purpose: make data-driven cards robust to varied real image sizes
 * (the DreamsTour demo only looks tidy because its sample images are
 * all identical dimensions; real tour/destination images are not).
 */

/* --- Featured / Recommended tour cards (home + listing) --- */
/* Theme sets no image height, so card height followed each image's
   aspect ratio -> staggered, uneven rows. Force a uniform crop. */
.recommended-sec .recommended-list-item .recommended-img img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

/* Equal-height cards so the content blocks line up across the row. */
.recommended-sec .row > [class*="col-"] {
    display: flex;
}
.recommended-sec .recommended-list-item {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.recommended-sec .recommended-list-item .recommended-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Overlay legibility. The theme's scrim only darkens the bottom of the photo, so
   the duration/guests line at the TOP sat on whatever the image happened to be —
   white on a bright poster, unreadable. Darken both ends and leave the middle of
   the picture alone. */
.recommended-sec .recommended-list-item .recommended-img::before {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0) 30%,
        rgba(0, 0, 0, 0) 45%,
        rgba(0, 0, 0, 0.8) 100%);
}
.recommended-sec .recommended-list-item .recommended-img .fav-item,
.recommended-sec .recommended-list-item .recommended-amount {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
/* Several tour photos are posters with their own baked-in text, and no amount of
   gradient makes white type readable over yellow lettering. The duration/guests
   facts get their own chip instead — the OTA convention, and it stops depending
   on what the picture happens to look like. */
.recommended-sec .recommended-list-item .recommended-img .fav-item > span {
    display: inline-flex;
    align-items: center;
    background: rgba(12, 18, 32, 0.66);
    backdrop-filter: blur(4px);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 500;
    text-shadow: none;
}

/* The card lifts as one piece; the theme only zoomed the photo. */
.recommended-sec .recommended-list-item {
    border-radius: 16px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.recommended-sec .recommended-list-item:hover {
    transform: translateY(-4px);
}
.recommended-sec .recommended-list-item:hover .recommended-content {
    box-shadow: 0 16px 34px rgba(17, 24, 39, 0.14);
}

/* The theme's flat #FEEDEB pink starts hard against the hero photo. Fading it
   out of white gives the hero an edge to end on, and the wavy backdrop reads as
   texture instead of pattern. */
.recommended-sec {
    background: linear-gradient(180deg, #FFF 0%, #FDF2F0 22%, #FDF2F0 100%);
}
.recommended-sec::after {
    opacity: 0.5;
}

/* --- Listing cards (tour-grid / tour-list "place-item") --- */
/* Same theme fragility: .place-img img has no height/object-fit, so the
   owl-carousel slide images render at their natural size — placeholder or
   oversized images blow the card up. Force a uniform thumbnail crop.
   The partial reuses the same stacked card for grid (col-md-6) and list
   (col-12), so one rule covers both. */
.place-item .place-img img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    display: block;
}

/* Keep cards in a row equal height so content baselines align. */
.place-item {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.place-item .place-content {
    flex: 1 1 auto;
}

/* --- Filter sidebar select2 + toolbar dropdown alignment --- */
/* select2 must fill the sidebar column and match the .form-control height,
   otherwise the rendered box is narrower/shorter than the inputs above it. */
.filter-sidebar .select2-container {
    width: 100% !important;
}
.filter-sidebar .select2-container--default .select2-selection--single {
    height: 42px;
    display: flex;
    align-items: center;
    border: 1px solid #E4EBF1;
    border-radius: 5px;
    padding: 0 10px;
}
.filter-sidebar .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
}

/* Results toolbar: keep the count, view-toggle and Sort By on one tidy
   baseline; give the native Sort By select a sensible width (was width:auto,
   which collapsed it). */
.tour-toolbar .tour-sort-select {
    width: auto;
    min-width: 170px;
}
/* Inactive view-toggle buttons are white with no border -> invisible on the
   white toolbar (only the red active one showed). Give them a border so all
   three (grid/list/map) are always visible. */
.tour-toolbar .list-item .list-icon {
    flex: 0 0 auto;
    border: 1px solid #E4EBF1;
}
.tour-toolbar .list-item .list-icon.active {
    border-color: #CF3425;
}

/* ============================================================
   Tour-details page polish
   ============================================================ */

/* Overview quick-facts bar: equal columns with light dividers. */
.tour-stats-bar .tour-stat {
    border-right: 1px solid #E4EBF1;
}
.tour-stats-bar .tour-stat:last-child {
    border-right: 0;
}
@media (max-width: 767.98px) {
    /* 2-per-row on mobile: drop the divider on the right column. */
    .tour-stats-bar .tour-stat:nth-child(2n) {
        border-right: 0;
    }
}

/* Sticky in-page section nav. Overlaps the ~76px fixed-on-scroll header by a
   couple of px (top:74) so no sliver of scrolling content shows through, and
   tucks under it (z-index below header). Clean bar — not a floating pill. */
.tour-anchor-nav {
    position: sticky;
    top: 74px;
    z-index: 20;
    background: #fff;
    border: 1px solid #E4EBF1;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.06);
}
.tour-anchor-nav .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.25rem;
    margin: 0;
    padding: 0.35rem 0.5rem;
    list-style: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tour-anchor-nav .nav::-webkit-scrollbar {
    display: none;
}
.tour-anchor-nav .nav li {
    list-style: none;
}
.tour-anchor-nav .nav a {
    display: block;
    white-space: nowrap;
    padding: 0.55rem 1rem;
    font-size: 14px;
    font-weight: 500;
    color: #4E5561;
    border-radius: 8px;
    transition: color .2s ease, background .2s ease;
}
.tour-anchor-nav .nav a:hover {
    color: #CF3425;
    background: rgba(207, 52, 37, 0.06);
}
.tour-anchor-nav .nav a.active {
    color: #fff;
    background: #CF3425;
}

/* Anchor jumps clear the sticky nav + fixed header. */
html {
    scroll-behavior: smooth;
}
#overview, #itinerary, #inclusions, #location, #faq, #reviews {
    scroll-margin-top: 150px;
}

/* ---- Gallery polish (tour detail) ---- */
.service-wrap .slider-for img,
.tour-vertical-slide .slider-for img {
    height: 430px;
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
}
.service-wrap .slider-nav {
    width: 100%;
}
.service-wrap .slider-nav img {
    height: 96px;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    opacity: .65;
    transition: opacity .2s ease;
}
.service-wrap .slider-nav .slick-current img,
.service-wrap .slider-nav img:hover {
    opacity: 1;
    outline: 2px solid #CF3425;
    outline-offset: -2px;
}
@media (max-width: 767.98px) {
    .service-wrap .slider-for img,
    .tour-vertical-slide .slider-for img {
        height: 280px;
    }
}
/* Single-image gallery: hide the empty thumbnail rail gracefully (no nav rendered). */
.service-wrap.single-img .slider-for {
    width: 100%;
}
.service-wrap.single-img .slider-for img {
    height: 430px;
}

/* ---- Itinerary timeline (tour detail) — vertical day-by-day, like a
   tour-package site: connecting line + numbered day nodes + tagged cards ---- */
.itinerary-timeline {
    position: relative;
}
.itinerary-timeline .itin-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0 0 1rem 0;
    border: 0;
    background: transparent;
    border-radius: 0;
}
.itinerary-timeline .itin-item:last-child {
    padding-bottom: 0;
}
/* The connecting line runs through the centre of the day nodes. */
.itinerary-timeline .itin-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 8px;
    bottom: -8px;
    width: 2px;
    background: #E4EBF1;
    z-index: 0;
}
.itinerary-timeline .itin-node {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin-top: 4px;
    border-radius: 50%;
    background: #CF3425;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 4px rgba(207, 52, 37, 0.12);
}
.itinerary-timeline .itin-card {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid #E4EBF1;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(17, 24, 39, 0.05);
    transition: box-shadow .2s ease, transform .2s ease;
}
/* Lift the open day for an app-card feel (modern browsers; harmless fallback). */
.itinerary-timeline .itin-item:has(.itin-head:not(.collapsed)) .itin-card {
    box-shadow: 0 10px 26px rgba(207, 52, 37, 0.12);
}
.itinerary-timeline .itin-head {
    display: flex;
    align-items: center;
    padding: 0.9rem 1rem;
    background: #fff;
    box-shadow: none;
    color: #111827;
}
.itinerary-timeline .itin-head:not(.collapsed) {
    background: rgba(207, 52, 37, 0.04);
}
.itinerary-timeline .itin-head:focus {
    box-shadow: none;
    border-color: transparent;
}
.itinerary-timeline .itin-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
}
.itinerary-timeline .itin-day-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #CF3425;
    background: rgba(207, 52, 37, 0.1);
    padding: 3px 10px;
    border-radius: 6px;
}
.itinerary-timeline .itin-head:not(.collapsed) .itin-day-tag {
    color: #fff;
    background: #CF3425;
}
.itinerary-timeline .itin-title {
    font-weight: 600;
    font-size: 15px;
    color: #111827;
}
.itinerary-timeline .itin-body {
    padding: 0 1rem 1rem;
    color: #4E5561;
}
.itinerary-toggle-all {
    white-space: nowrap;
}
/* App-like compact timeline on phones: smaller node, tighter rail so the card
   gets the width, comfortable tap targets, elevated cards. */
@media (max-width: 575.98px) {
    .itinerary-timeline .itin-item {
        gap: 0.6rem;
    }
    .itinerary-timeline .itin-node {
        width: 32px;
        height: 32px;
        font-size: 13px;
        margin-top: 8px;
        box-shadow: 0 0 0 3px rgba(207, 52, 37, 0.12);
    }
    .itinerary-timeline .itin-item:not(:last-child)::before {
        left: 15px;
    }
    .itinerary-timeline .itin-head {
        padding: 0.85rem 0.85rem;
        min-height: 56px;
    }
    .itinerary-timeline .itin-meta {
        gap: 0.2rem 0.5rem;
    }
    .itinerary-timeline .itin-title {
        font-size: 14px;
        line-height: 1.35;
    }
    .itinerary-timeline .itin-body {
        padding: 0 0.85rem 0.9rem;
        font-size: 14px;
    }
    /* Give the section card more usable width on phones. */
    #itinerary.card-bg-light,
    #itinerary.bg-light-200 {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }
}

/* Currency switcher (uses the theme flag-dropdown look). The theme only overrides
   the .active background, leaving Bootstrap's default white text -> white-on-grey =
   invisible. Restore a readable colour and give the active row a themed hover. */
.currency-switcher .dropdown-menu .dropdown-item.active {
    color: #4E5561;
    background-color: #F1F4F7;
    font-weight: 500;
}
.currency-switcher .dropdown-menu .dropdown-item.active:hover,
.currency-switcher .dropdown-menu .dropdown-item.active:focus {
    color: #FFF;
    background-color: #CF3425;
}

/* =====================================================================
   Home hero.

   The chosen background image is set inline on .home-hero. Everything here
   undoes a theme hero that was built for a different picture and a different
   product:

   - The theme's decorative ::after re-draws banner-bg-05 (a hiker with a
     transparent/white sky) on top of whatever image is chosen, washing out the
     area under the glassmorphic header so the white menu text vanishes.
   - .hero-sec-eight is a fixed 846px with background-attachment: fixed. Fixed
     attachment is ignored/janky on iOS and re-crops the photo to the viewport
     rather than the section, so the subject drifts out of frame.
   - The h1 carried .animate-text: 16.5vw uppercase, absolutely positioned. That
     is a one-word decoration; a real sentence wrapped to three lines and spilled
     out of the hero across the section below it. The h1 is now an ordinary
     in-flow .home-hero-title.

   The result is the OTA pattern: one photo, one legible scrim, a headline and a
   floating search card.
   ===================================================================== */
.home-hero::after {
    display: none !important;
}
.home-hero {
    height: auto;
    min-height: clamp(540px, 66vh, 700px);
    padding: 150px 0 76px;
    justify-content: center;
    background-attachment: scroll !important;
}
/* Full-cover scrim rather than a top band: dark at the top so the transparent
   header stays readable, dark again at the bottom so the glass card has
   something to sit against, and lighter through the middle so the photo is
   still the photo. */
.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(9, 14, 26, 0.74) 0%, rgba(9, 14, 26, 0.22) 34%, rgba(9, 14, 26, 0.62) 100%);
    z-index: 0;
    pointer-events: none;
}
.home-hero > .container {
    position: relative;
    z-index: 1;
}

.home-hero .home-hero-head {
    text-align: center;
    margin-bottom: 28px;
}
.home-hero .home-hero-title {
    color: #FFF;
    font-size: clamp(30px, 4.2vw, 52px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    max-width: 900px;
    margin: 0 auto;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.38);
}
.home-hero .home-hero-sub {
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.5;
    max-width: 640px;
    margin: 12px auto 0;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* Search card: heavier glass than the theme's 0.2 white, a real shadow so it
   reads as floating above the photo, and corners that match the pill tabs. */
.home-hero .banner-form .card-header {
    background-color: transparent;
    backdrop-filter: none;
    border: 0 !important;
    margin-bottom: 12px;
    padding: 0;
}
.home-hero .banner-form .nav {
    gap: 8px;
    flex-wrap: wrap;
}
.home-hero .banner-form .nav li {
    margin-right: 0;
}
.home-hero .banner-form .nav li .nav-link {
    color: #FFF;
    background: rgba(12, 18, 32, 0.42);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    padding: 9px 18px;
    font-weight: 600;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.home-hero .banner-form .nav li .nav-link:hover {
    background: rgba(207, 52, 37, 0.85);
    border-color: transparent;
}
.home-hero .banner-form .nav li .nav-link.active {
    background: #CF3425;
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(207, 52, 37, 0.38);
}
.home-hero .banner-form .card-body {
    background-color: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(8, 15, 30, 0.32);
    padding: 18px;
}
.home-hero .banner-form .card-body .form-info {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(8, 15, 30, 0.12);
}
.home-hero .banner-form .form-info .form-item {
    padding: 12px 16px;
}
.home-hero .banner-form .form-info .form-item .form-label {
    font-weight: 500;
    white-space: nowrap;
}
/* The theme sizes these at 20px/600 — right for "Anywhere", too wide for a
   formatted date, which then clips its own calendar button. */
.home-hero .form-item input[type="date"].form-control {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
    width: 100%;
}
.home-hero .form-item .value-input {
    font-size: 18px;
}
.home-hero .banner-form .search-btn {
    border-radius: 14px;
    padding: 16px 26px;
    font-weight: 600;
    min-width: 148px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(207, 52, 37, 0.34);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.home-hero .banner-form .search-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(207, 52, 37, 0.42);
}

@media (min-width: 992px) {
    /* Location takes the slack; the date and traveller cells only need what
       their content is: a formatted date and a two-digit count. */
    .home-hero .banner-form .form-info .form-item.hero-when {
        flex: 0 0 186px;
    }
    .home-hero .banner-form .form-info .form-item.pax-dropdown {
        flex: 0 0 196px;
    }
}

@media (max-width: 991.98px) {
    .home-hero {
        padding: 120px 0 56px;
        min-height: 0;
    }
    .home-hero .banner-form .search-btn {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    /* The theme pads the top by 45% of the viewport width to clear its own
       decorative overlay — with that overlay gone it is just dead space. */
    .home-hero {
        padding: 104px 0 48px !important;
    }
    .home-hero .home-hero-head {
        margin-bottom: 20px;
    }
    .home-hero .banner-form .card-body {
        padding: 12px;
        border-radius: 16px;
    }
}
/* Optional foreground/overlay image (e.g. a cut-out subject) layered on top of the
   background but behind the content — replaces the theme's hard-coded ::after. */
.home-hero .home-hero-fg {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    z-index: 0;
    pointer-events: none;
}

/* =====================================================================
   Tour cards (.place-item) — grid polish
   The theme leaves the card media unsized, so varied/placeholder images
   make ragged rows. Lock the media to a uniform area with object-fit
   cover, render the theme's (un-sized) bottom gradient, and add a modern
   hover lift. List view keeps the more-specific .hotel-list rules, so it
   is unaffected.
   ===================================================================== */
.place-item .place-img,
.place-item .place-img .img-slider,
.place-item .place-img .image-slide,
.place-item .place-img .owl-stage-outer,
.place-item .place-img .owl-stage,
.place-item .place-img .owl-item,
.place-item .place-img .slide-images,
.place-item .place-img .slide-images > a {
    height: 230px;
}
.place-item .place-img img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    display: block;
}
/* The theme ships .place-img::before with a gradient but no dimensions. */
.place-item .place-img::before {
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
/* Smooth, modern card lift. */
.place-item {
    height: 100%;
    transition: transform .3s ease, box-shadow .3s ease;
}
.place-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(17, 24, 39, .16);
}
/* Title picks up the brand colour on hover for a clear interactive cue. */
.place-item .place-content h5 a {
    transition: color .2s ease;
}
.place-item:hover .place-content h5 a {
    color: #CF3425;
}
/* Slightly larger, softer wishlist control sitting above the gradient. */
.place-item .place-img .fav-item {
    z-index: 2;
}
.place-item .place-img .fav-item .fav-icon {
    width: 34px;
    height: 34px;
    font-size: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
/* Crisper pill badges on the media. */
.place-item .place-img .fav-item .badge {
    padding: 6px 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

/* =====================================================================
   Mobile app-style booking: sticky bottom CTA bar + enquiry bottom-sheet
   (only below xl; the desktop sidebar widget is untouched). The single
   enquiry widget is moved into the drawer by JS, so no duplicate form.
   ===================================================================== */
.mobile-tour-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: #fff;
    border-top: 1px solid #E4EBF1;
    box-shadow: 0 -6px 22px rgba(17, 24, 39, 0.10);
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
}
.mobile-tour-cta .mtc-price {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    flex-shrink: 0;
}
.mobile-tour-cta .mtc-label {
    font-size: 11px;
    color: #6B7280;
}
.mobile-tour-cta .mtc-amount {
    font-size: 18px;
    font-weight: 700;
    color: #CF3425;
}
.mobile-tour-cta .mtc-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    justify-content: flex-end;
}
.mobile-tour-cta .mtc-actions .btn {
    padding: 0.65rem 1rem;
    font-weight: 600;
    border-radius: 10px;
}
.mobile-tour-cta .mtc-wa {
    flex: 0 0 auto;
    width: 48px;
    padding: 0.65rem 0;
    font-size: 18px;
    color: #128C7E;
    background: rgba(37, 211, 102, 0.12);
}

/* Bottom-sheet drawer */
.enquire-drawer {
    height: auto;
    max-height: 90vh;
    border-radius: 18px 18px 0 0;
}
.enquire-drawer .offcanvas-body {
    overflow-y: auto;
    padding-top: 0;
}
.enquire-drawer #enquire {
    box-shadow: none;
}
.enquire-drawer #enquire .card-body {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

@media (max-width: 1199.98px) {
    /* Hide the inline enquiry widget — it lives in the drawer on mobile. */
    .theiaStickySidebar #enquire {
        display: none;
    }
    .enquire-drawer #enquire {
        display: block;
    }
    /* Keep the sticky bar from covering the last of the page. */
    body {
        padding-bottom: 76px;
    }
}

/* ---------------------------------------------------------------------------
   Brand logo sizing.
   The mark is a square badge, but the theme's header slot renders it at ~36px,
   where the artwork inside is unreadable. The theme's own rules win on
   specificity, so these need !important to land.
   --------------------------------------------------------------------------- */
.navbar-logo .logo,
.header-logo .logo,
.black-logo-responsive img,
.white-logo-responsive img {
    height: 72px !important;
    max-height: 72px !important;
    width: auto !important;
    max-width: none !important;
}

.navbar-logo,
.header-logo {
    display: flex;
    align-items: center;
}

/* Room for the taller mark so the bar never clips it. */
header .main-menu-wrapper,
header .navbar,
.header .header-nav {
    min-height: 88px;
}

/* The footer mark sits on a dark panel and has room to be larger still. */
.footer-logo img,
.footer-logo-light img,
.footer-logo-dark img {
    height: 86px !important;
    max-height: 86px !important;
    width: auto !important;
}

@media (max-width: 991.98px) {
    .navbar-logo .logo,
    .header-logo .logo,
    .black-logo-responsive img,
    .white-logo-responsive img {
        height: 52px !important;
        max-height: 52px !important;
    }
}

/* The homepage's floating header (header-eight) is a short pill; give it room
   for the taller mark so the logo is not clipped by the bar. */
.header-eight .main-menu-wrapper,
.header-eight .navbar,
.header-eight .header-navbar-rht {
    min-height: 92px;
    align-items: center;
}

/* =====================================================================
   Transfer search form.
   The theme sizes .banner-form .form-item .form-control at 20px/600 — fine
   for "Anywhere", but it clips real place names ("Changi Airpo"). These
   cells carry long zone names, so the type is smaller and the row is
   explicitly proportioned: the two zone pickers flex, while date, time and
   passengers keep a fixed basis. Scoped to >=992px so the theme's own
   mobile stacking (form-item {width:50%}) is untouched.
   ===================================================================== */
.transfer-search .form-item .form-control {
    font-size: 15px;
    font-weight: 600;
    max-width: 100%;
}

/* The zone display is a div, so it can wrap rather than be cut short.
   Height is free to grow; .form-info stretches its cells to match. */
.transfer-search .form-item .tz-label {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
    height: auto;
    min-height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.transfer-search .form-item .tz-label.is-placeholder {
    color: #9CA3AF;
    font-weight: 500;
}

.transfer-search .form-item input[type="date"].form-control,
.transfer-search .form-item input[type="time"].form-control {
    font-size: 14px;
    padding-right: 0;
}

.transfer-search .pax-dropdown .home-eight-title {
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
}

@media (min-width: 992px) {
    /* Only the zone pickers may shrink; the rest need a real floor or they
       collapse to one character per line.

       Sized by what a cell HOLDS, not by where it sits. These were nth-child
       rules until the pick-up mode toggle added a column: every cell after it
       shifted into the wrong width, and the flight field — the widest thing in
       the row — inherited the 98px meant for a clock. Positional sizing in a
       row whose columns swap is a bug waiting for the next feature. */
    .transfer-search .form-info .form-item.booking-dropdown {
        flex: 1 1 0;
        min-width: 0;
    }
    .transfer-search .form-info .form-item.tsf-col-date,
    .transfer-search .form-info .form-item.tsf-col-time {
        flex: 0 0 98px;
    }
    /* An airline code, a number and the Check button, side by side. */
    .transfer-search .form-info .form-item.tsf-col-flightno {
        flex: 0 0 172px;
    }
    .transfer-search .form-info .form-item.tsf-col-pax {
        flex: 0 0 126px;
    }
    /* Two-word labels on a narrow column wrap and drag the control down out of
       line with its neighbours. */
    .transfer-search .form-info .form-item .form-label {
        white-space: nowrap;
    }
}

@media (max-width: 991.98px) {
    .transfer-search .search-btn {
        width: 100%;
        margin-left: 0;
        padding: 14px;
    }
}

/* ---------------------------------------------------------------------------
   Booking-dropdown hover.
   Bootstrap paints .dropdown-item:hover with the primary red, while the
   theme's markup puts .text-dark on the inner line — and Bootstrap utilities
   carry !important, so the label stayed black on red: unreadable. Scoped to
   .booking-dropdown, which is only ever these place pickers, so both the
   homepage hero and the transfer search behave the same.
   --------------------------------------------------------------------------- */
.booking-dropdown .dropdown-menu .dropdown-item {
    white-space: normal;
    border-radius: 6px;
}

.booking-dropdown .dropdown-menu .dropdown-item:hover,
.booking-dropdown .dropdown-menu .dropdown-item:focus,
.booking-dropdown .dropdown-menu .dropdown-item.active {
    background-color: #FDECEA;   /* tint of the brand red, not the red itself */
    color: #1F2937;
}

/* Beat the .text-dark / .text-muted utilities inside a hovered row. */
.booking-dropdown .dropdown-menu .dropdown-item:hover .dropdown-name,
.booking-dropdown .dropdown-menu .dropdown-item:hover .tz-name,
.booking-dropdown .dropdown-menu .dropdown-item:hover .text-dark {
    color: #CF3425 !important;
}

.booking-dropdown .dropdown-menu .dropdown-item:hover p {
    color: #6B7280 !important;
}

.booking-dropdown .tz-name {
    color: #1F2937;
}

/* The search box inside the picker should not inherit the 20px form-item type. */
.booking-dropdown .input-search .form-control {
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 6px 10px !important;
    border-color: #E4EBF1 !important;
    background: #fff !important;
}

/* ---------------------------------------------------------------------------
   Place-picker panel.
   style.css applies this to ANY dropdown inside a banner-form field:

     .banner-form .form-info .form-item.dropdown .dropdown-menu {
         padding: 20px; max-height: 300px; overflow-y: auto;
     }

   That is meant for the travellers panel, but it also catches the place
   pickers — giving them a second scroll container on top of the list's own
   max-height (double scrollbars) and 20px of padding that .p-0 cannot beat on
   specificity, so the sticky search box and row dividers sat inside a padded,
   clipped box. Scoped to .booking-dropdown, which is only ever a place picker,
   so the list is the single scrolling element.
   --------------------------------------------------------------------------- */
.banner-form .form-info .form-item.booking-dropdown .dropdown-menu,
.transfer-search .form-item.booking-dropdown .dropdown-menu {
    padding: 0;
    /* Bounded to the viewport, so opening downward can never run off the
       bottom of the screen. The panel itself does not scroll — the list
       inside it does — which is what keeps the search box pinned. */
    max-height: min(380px, calc(100vh - 140px));
    overflow: hidden;
    /* Never wider than the screen, however narrow the cell it hangs off. */
    max-width: calc(100vw - 24px);
    box-shadow: 0 8px 28px rgba(17, 24, 39, .14);
}

/* The flex column ONLY on the open state. Bootstrap hides a dropdown with
   `display:none` and reveals it with `.show{display:block}`, so declaring
   `display:flex` unconditionally overrides the hidden state and pins every
   picker permanently open. It must be qualified with .show. */
.banner-form .form-info .form-item.booking-dropdown .dropdown-menu.show,
.transfer-search .form-item.booking-dropdown .dropdown-menu.show {
    display: flex;
    flex-direction: column;
}

/* The list is the one scrolling element, taking whatever height is left. */
.booking-dropdown .dropdown-menu .tz-list,
.booking-dropdown .dropdown-menu .dest-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Search box is fixed height at the top; the list scrolls beneath it. */
.booking-dropdown .dropdown-menu .input-search {
    flex: 0 0 auto;
    background: #fff;
    border-radius: 8px 8px 0 0;
}

/* ---------------------------------------------------------------------------
   Hero stacking vs the section below it.

   style.css gives BOTH the hero and the section that follows the same
   stacking level:

       .hero-sec-eight  { position: relative; z-index: 1; }
       .recommended-sec { position: relative; z-index: 1; background: #FEEDEB; }

   Two positioned siblings at the same z-index paint in DOM order, so
   .recommended-sec paints over anything the hero's children overflow into.
   An open search dropdown is therefore hidden behind an opaque background
   from exactly the point that section begins — it looks "cut off".

   Raising the hero fixes the paint order. The two boxes do not overlap
   geometrically (the hero has a fixed height), so nothing else moves; only
   the overflowing dropdown now paints on top, which is the intent.

   This is a theme bug and affects every tab, including the theme's own Tours
   and Activities pickers — not just the transfers one.
   --------------------------------------------------------------------------- */
.hero-sec-eight,
.home-hero {
    z-index: 3;
}

/* Belt and braces: an open picker in any banner-form outranks adjacent
   positioned sections, wherever that form appears on the site. */
.banner-form .form-item.dropdown .dropdown-menu.show,
.banner-form .form-item.booking-dropdown .dropdown-menu.show {
    z-index: 1010;
}

/* =====================================================================
   Transfer search results.
   A three-column row — glyph, detail, price — instead of a wide card with
   a dead middle and a full-width button. The price column is fixed so the
   amounts line up down the page, which is what makes options comparable.
   ===================================================================== */
.transfer-journey {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid #E4EBF1;
    border-radius: 12px;
}
.transfer-journey .tj-leg { display: flex; align-items: center; gap: .625rem; }
.transfer-journey .tj-label { display: block; font-size: 12px; color: #6B7280; line-height: 1.1; }
.transfer-journey .tj-leg strong { font-size: 15px; color: #111827; }
.transfer-journey .tj-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.transfer-journey .tj-from { background: #04BD6C; }
.transfer-journey .tj-to { background: #CF3425; }
.transfer-journey .tj-arrow { color: #9CA3AF; }
.transfer-journey .tj-meta {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 13px;
    color: #4B5563;
}
.transfer-journey .tj-meta i { margin-right: .3rem; color: #9CA3AF; }

.transfer-option {
    position: relative;
    display: grid;
    /* minmax(0,…) not 1fr: a bare 1fr track has min-width:auto, so a long
       spec row can push the track wider than the card and spill out. */
    grid-template-columns: 132px minmax(0, 1fr) 232px;
    gap: 1.25rem;
    align-items: center;
    padding: 1.25rem;
    margin-bottom: 1rem;
    background: #fff;
    border: 1px solid #E4EBF1;
    border-radius: 12px;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.transfer-option:hover {
    border-color: #F3C9C4;
    box-shadow: 0 10px 28px rgba(17, 24, 39, .09);
    transform: translateY(-2px);
}
.transfer-option.is-best { border-color: #CF3425; }
.transfer-option.is-unavailable { opacity: .65; }
.transfer-option.is-unavailable:hover { transform: none; box-shadow: none; }

.transfer-badge {
    position: absolute;
    top: -10px;
    left: 18px;
    background: #CF3425;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 3px 10px;
    border-radius: 999px;
}

.transfer-option .to-media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92px;
    border-radius: 10px;
    background: linear-gradient(180deg, #FDECEA, #FBF7F6);
    color: #CF3425;
}
.transfer-option .to-media img { max-width: 100%; max-height: 84px; object-fit: contain; }
.transfer-option .to-media .tv-glyph { width: 88px; height: auto; }
.transfer-option .to-media-sic { background: linear-gradient(180deg, #E8F1FE, #F5F9FF); color: #155EEF; }

/* Grid children default to min-width:auto too — pin them so nothing overflows. */
.transfer-option > * { min-width: 0; }
.transfer-option .to-body h5 { font-size: 17px; }
.transfer-option .to-models { font-size: 13px; color: #6B7280; }

.transfer-option .to-specs,
.transfer-option .to-includes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    font-size: 13.5px;
}
.transfer-option .to-specs { color: #374151; }
.transfer-option .to-specs i { color: #9CA3AF; margin-right: .35rem; }
.transfer-option .to-includes { margin-top: .5rem; color: #047857; font-size: 12.5px; }
.transfer-option .to-includes i { margin-right: .3rem; }
.transfer-option .to-meet { margin-top: .5rem; font-size: 12.5px; color: #6B7280; }
.transfer-option .to-meet i { margin-right: .35rem; }

.transfer-option .to-price {
    text-align: right;
    padding-left: 1.25rem;
    border-left: 1px solid #EEF2F6;
}
.transfer-option .to-price-label { display: block; font-size: 12px; color: #6B7280; }
.transfer-option .to-amount { font-size: 26px; font-weight: 700; color: #CF3425; line-height: 1.15; }
.transfer-option .to-note { display: block; font-size: 12px; color: #6B7280; margin-bottom: .75rem; }
.transfer-option .to-cta { width: 100%; font-weight: 600; padding: .6rem 1rem; border-radius: 10px; }

@media (max-width: 991.98px) {
    .transfer-option { grid-template-columns: 88px minmax(0, 1fr); }
    .transfer-option .to-media { height: 68px; }
    .transfer-option .to-media .tv-glyph { width: 62px; }
    .transfer-option .to-price {
        grid-column: 1 / -1;
        text-align: left;
        padding-left: 0;
        padding-top: 1rem;
        border-left: 0;
        border-top: 1px solid #EEF2F6;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .25rem .75rem;
    }
    .transfer-option .to-price-label { width: 100%; }
    .transfer-option .to-note { margin-bottom: 0; }
    .transfer-option .to-cta { width: auto; margin-left: auto; }
    .transfer-journey .tj-meta { margin-left: 0; width: 100%; }
}

/* Group headings inside the place picker (Airports / Popular / Hotels). */
.booking-dropdown .tz-list .tz-group {
    padding: .5rem .9rem .3rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #9CA3AF;
    background: #FAFBFC;
    position: sticky;
    top: 0;
}

/* ---------------------------------------------------------------------------
   ion-range-slider value bubbles.
   The .irs-to / .irs-from labels are absolutely positioned from the handle and
   at narrow widths the upper bubble overshoots the track, pushing the document
   17px wider than the viewport on the tours listing. `clip` (not `hidden`)
   contains it without creating a scroll container, so sticky positioning in
   the filter sidebar is unaffected.
   --------------------------------------------------------------------------- */
.irs {
    max-width: 100%;
    overflow-x: clip;
}

/* ===========================================================================
   Transfer route card (.tr-card)
   Replaces the theme's .place-item for transfers. .place-item sets no image
   height and no card height, so a two-line route name shifted the price row
   out of line with the card beside it — visible on every browse page, since
   route names are long ("Kuala Lumpur International Airport to Genting
   Highlands"). Fixed media ratio + full-height flex column fixes both.
   =========================================================================== */
.tr-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 24px;
    background: #fff;
    border: 1px solid #EDEDED;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.tr-card:hover {
    border-color: #E3E3E3;
    box-shadow: 0 8px 24px rgba(17, 24, 39, .10);
    transform: translateY(-2px);
}

/* --- media ------------------------------------------------------------- */
.tr-card-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #F4F5F7;
}
/* aspect-ratio has no effect on a flex/grid item in older Safari; the padding
   trick is the portable floor. Modern browsers use the ratio above. */
@supports not (aspect-ratio: 16 / 10) {
    .tr-card-media { height: 0; padding-bottom: 62.5%; }
}
.tr-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.tr-card:hover .tr-card-media img { transform: scale(1.04); }

.tr-card-badges {
    position: absolute;
    inset: 12px 12px auto 12px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}
.tr-card-badges .badge {
    font-size: 11px;
    font-weight: 600;
    padding: .35em .7em;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

/* --- the no-photograph visual ------------------------------------------ */
/* Drawn, not photographed: the journey is the product, and a stock skyline on
   sixteen cards says nothing. Also means zero requests and nothing to 404. */
.tr-visual {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 20px 18px;
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(207, 52, 37, .10) 0%, rgba(207, 52, 37, 0) 55%),
        linear-gradient(160deg, #FBFBFC 0%, #F1F3F6 100%);
}
/* Faint grid, so the panel reads as a map rather than a blank swatch. */
.tr-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(17, 24, 39, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 24, 39, .045) 1px, transparent 1px);
    background-size: 28px 28px;
}
.tr-visual-route {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 78%;
}
.tr-visual-endpoint {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    color: #1F2937;
    min-width: 0;
}
.tr-visual-endpoint i {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #CF3425;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(17, 24, 39, .14);
}
/* Long place names must clamp, not overflow the frame. */
.tr-visual-place {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* The leg the car drives, joining the two pins. */
.tr-visual-line {
    width: 2px;
    height: 22px;
    margin-left: 10px;
    border-radius: 2px;
    background: repeating-linear-gradient(
        to bottom, #CF3425 0 4px, transparent 4px 8px
    );
}
.tr-visual-vehicle {
    position: absolute;
    right: 16px;
    bottom: 14px;
    width: 62px;
    color: rgba(207, 52, 37, .26);
}
.tr-visual-vehicle .tv-glyph { width: 100%; height: auto; display: block; }

/* --- body -------------------------------------------------------------- */
.tr-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;      /* the foot below pins to the bottom of every card */
    padding: 16px 18px 18px;
}
.tr-card-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 10px;
}
.tr-card-title a { color: #111827; }
.tr-card-title a:hover { color: #CF3425; }

.tr-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    font-size: 13px;
    color: #6B7280;
}
.tr-card-meta li { display: inline-flex; align-items: center; }
.tr-card-meta i { margin-right: 5px; font-size: 14px; color: #9CA3AF; }

.tr-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;          /* the alignment guarantee */
    padding-top: 14px;
    border-top: 1px solid #F0F0F0;
}
.tr-card-price span { display: block; font-size: 12px; color: #6B7280; line-height: 1.2; }
.tr-card-price strong { font-size: 19px; font-weight: 700; color: #CF3425; }
.tr-card-price .tr-card-onreq { font-size: 13px; color: #6B7280; }
.tr-card-foot .btn { flex: 0 0 auto; white-space: nowrap; }

.dark-mode .tr-card { background: #16191C; border-color: #2A2E33; }
.dark-mode .tr-card-title a { color: #F3F4F6; }
.dark-mode .tr-card-foot { border-top-color: #2A2E33; }

/* ── Extras picker on option cards and at checkout ──────────────────────────
   .transfer-option is a grid; the picker spans every column so it sits inside
   the card's border rather than beneath it. */
.transfer-option .to-extras { grid-column: 1 / -1; }

.to-extras {
    margin-top: .35rem;
    padding-top: .85rem;
    border-top: 1px dashed #E4EBF1;
}
.to-extras-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    color: #CF3425;
    font-size: 14px;
    font-weight: 600;
}
.to-extras-toggle > i:first-child { font-size: 17px; }
.to-extras-caret { margin-left: auto; transition: transform .18s ease; font-size: 15px; }
.to-extras-toggle[aria-expanded="true"] .to-extras-caret { transform: rotate(180deg); }
.to-extras-count {
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #CF3425;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.to-extras-list { list-style: none; margin: .85rem 0 0; padding: 0; }
.to-extra {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .75rem 1rem;
    align-items: center;
    padding: .7rem 0;
    border-top: 1px solid #F1F4F7;
}
.to-extra:first-child { border-top: 0; padding-top: 0; }
.to-extra-info { min-width: 0; }
.to-extra-name { display: block; font-size: 14px; font-weight: 600; color: #111827; cursor: pointer; }
.to-extra-desc { display: block; font-size: 12.5px; color: #6B7280; }
.to-extra-price { font-size: 14px; font-weight: 600; color: #111827; white-space: nowrap; text-align: right; }
.to-extra-price small { display: block; font-size: 11.5px; font-weight: 400; color: #9CA3AF; }
.to-extra-qty {
    /* Fixed width so a checkbox row and a stepper row line up in the
       same column rather than sitting at two different right edges. */
    display: flex;
    justify-content: flex-end;
    min-width: 106px;
}
.to-extra-qty .form-check-input { width: 20px; height: 20px; margin: 0; cursor: pointer; }

.to-extra-step { display: flex; align-items: center; gap: .25rem; }
.to-extra-step .btn-number {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #E4EBF1;
    border-radius: 8px;
    background: #fff;
    color: #374151;
}
.to-extra-step .btn-number:hover { border-color: #CF3425; color: #CF3425; }
.to-extra-step .input-number {
    width: 38px;
    height: 30px;
    padding: 0;
    text-align: center;
    border: 0;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    -moz-appearance: textfield;
}
.to-extra-step .input-number::-webkit-outer-spin-button,
.to-extra-step .input-number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.checkout-extras .card-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.checkout-extras .to-extras { margin-top: 0; padding-top: 0; border-top: 0; }
.checkout-extras .to-extras-toggle { display: none; }

@media (max-width: 575.98px) {
    .to-extra { grid-template-columns: minmax(0, 1fr) auto; }
    .to-extra-price { grid-column: 1; text-align: left; }
    .to-extra-qty { grid-row: 2; grid-column: 2; }
}

.dark-mode .to-extras { border-top-color: #2A2E33; }
.dark-mode .to-extra { border-top-color: #23262B; }
.dark-mode .to-extra-name,
.dark-mode .to-extra-price { color: #F3F4F6; }
.dark-mode .to-extra-step .btn-number { background: #16191C; border-color: #2A2E33; color: #D1D5DB; }
.dark-mode .to-extra-step .input-number { color: #F3F4F6; }

/* Airport chips on the transfers hub. The theme's .avatar.bg-light gave a pale
   grey glyph on a pale grey disc — legible only if you knew it was there. */
.tr-airport {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #EDEDED;
    border-radius: 12px;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.tr-airport:hover { border-color: #CF3425; box-shadow: 0 4px 14px rgba(17, 24, 39, .07); }
.tr-airport-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: #CF3425;
    background: rgba(207, 52, 37, .10);
    border-radius: 50%;
}
.tr-airport-text { min-width: 0; }
.tr-airport-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
}
.tr-airport-terminal { display: block; font-size: 12px; color: #6B7280; }
.tr-airport-go {
    margin-left: auto;
    font-size: 15px;
    color: #C7CBD1;
    transition: color .2s ease, transform .2s ease;
}
.tr-airport:hover .tr-airport-go { color: #CF3425; transform: translateX(2px); }

.dark-mode .tr-airport { background: #16191C; border-color: #2A2E33; }
.dark-mode .tr-airport-name { color: #F3F4F6; }

/* Hourly charters have no drop-off: what is sold is the block of time. */
.tr-visual-hourly {
    margin: 8px 0 0 31px;
    font-size: 13px;
    font-weight: 600;
    color: #CF3425;
    line-height: 1.3;
}
.tr-visual-hourly .tr-visual-sub {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #6B7280;
}

/* ── Arrival / Departure switch ───────────────────────────────────────────
   The one decision that actually matters on an airport transfer, so it leads
   the form and is sized to be read before anything else. Each option carries
   its own plain-language sub-label, because "Arrival" alone is ambiguous to
   someone who has not booked a transfer before. */
.tsf-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .9rem;
}
.tsf-dir {
    display: inline-flex;
    gap: .4rem;
    padding: 4px;
    background: #F1F4F7;
    border-radius: 14px;
}
.tsf-dir-opt {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .5rem .95rem;
    border-radius: 11px;
    color: #4B5563;
    cursor: pointer;
    line-height: 1.15;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.tsf-dir-opt input { position: absolute; opacity: 0; pointer-events: none; }
.tsf-dir-opt i { font-size: 18px; transform: rotate(45deg); }
.tsf-dir-opt .tsf-dir-up { transform: rotate(-45deg); }
.tsf-dir-opt span { font-size: 14px; font-weight: 600; display: block; }
.tsf-dir-opt small { display: block; font-size: 11.5px; color: #6B7280; font-weight: 400; }
.tsf-dir-opt.is-on {
    background: #fff;
    color: #CF3425;
    box-shadow: 0 1px 3px rgba(17, 24, 39, .12);
}
.tsf-dir-opt.is-on small { color: #9A4B43; }
.tsf-dir-opt:focus-within { outline: 2px solid #CF3425; outline-offset: 2px; }

.tsf-return-toggle {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #4B5563;
    cursor: pointer;
}
.tsf-return-toggle input { accent-color: #CF3425; width: 16px; height: 16px; }

@media (max-width: 575.98px) {
    .tsf-dir { width: 100%; }
    .tsf-dir-opt { flex: 1 1 0; justify-content: center; text-align: center; }
    .tsf-dir-opt small { display: none; }
}

.dark-mode .tsf-dir { background: #1D2125; }
.dark-mode .tsf-dir-opt { color: #9CA3AF; }
.dark-mode .tsf-dir-opt small { color: #6B7280; }
.dark-mode .tsf-dir-opt.is-on { background: #16191C; color: #F97066; }
.dark-mode .tsf-dir-opt.is-on small { color: #C8756C; }
.dark-mode .tsf-return-toggle { color: #9CA3AF; }

/* ── One-way / Return toggle and the per-leg price breakdown ──────────────── */
.tsf-trip {
    display: inline-flex;
    gap: .25rem;
    margin-bottom: .85rem;
    padding: 4px;
    background: #F1F4F7;
    border-radius: 999px;
}
.tsf-trip-opt {
    margin: 0;
    padding: .35rem 1.1rem;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: #4B5563;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.tsf-trip-opt input { position: absolute; opacity: 0; pointer-events: none; }
.tsf-trip-opt.is-on { background: #fff; color: #CF3425; box-shadow: 0 1px 3px rgba(17, 24, 39, .12); }

.transfer-journey .tj-return { color: #047857; font-weight: 600; }

.to-legs {
    list-style: none;
    margin: 0 0 .5rem;
    padding: 0 0 .5rem;
    border-bottom: 1px solid #F1F4F7;
    font-size: 12.5px;
    color: #4B5563;
}
.to-legs li { display: flex; justify-content: space-between; gap: .75rem; }
.to-legs li + li { margin-top: .15rem; }

.dark-mode .tsf-trip { background: #1D2125; }
.dark-mode .tsf-trip-opt { color: #9CA3AF; }
.dark-mode .tsf-trip-opt.is-on { background: #16191C; color: #F97066; }
.dark-mode .to-legs { border-bottom-color: #23262B; color: #9CA3AF; }

/* ── Checkout: progress, sticky summary, consent, mobile total bar ───────── */
.checkout-steps {
    display: flex;
    align-items: center;
    gap: .5rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.checkout-steps::-webkit-scrollbar { display: none; }
.cs-step {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
    color: #9CA3AF;
    font-size: 14px;
    font-weight: 600;
}
.cs-step + .cs-step::before {
    content: "";
    width: 28px;
    height: 2px;
    background: #E4EBF1;
    margin-right: .5rem;
}
.cs-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    background: #F1F4F7;
    color: #6B7280;
    font-size: 13px;
}
.cs-step.is-done { color: #047857; }
.cs-step.is-done .cs-mark { background: #DCFCE7; color: #047857; }
.cs-step.is-done .cs-label a { color: inherit; text-decoration: underline; }
.cs-step.is-current { color: #111827; }
.cs-step.is-current .cs-mark { background: #CF3425; color: #fff; }

.checkout-aside { position: sticky; top: 90px; }

.checkout-summary .cs-facts,
.checkout-summary .cs-lines,
.checkout-summary .cs-trust { list-style: none; margin: 0; padding: 0; }
.checkout-summary .cs-facts li {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: 13.5px;
    color: #4B5563;
    margin-top: .3rem;
}
.checkout-summary .cs-facts i { color: #9CA3AF; }
.checkout-summary .cs-when { font-size: 13.5px; color: #4B5563; }
.checkout-summary .cs-heading { font-size: 14px; color: #CF3425; }
.checkout-summary .cs-lines li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 13.5px;
    margin-bottom: .4rem;
}
.checkout-summary .cs-lines li span:last-child { font-weight: 600; white-space: nowrap; }
.checkout-summary .cs-total { display: flex; justify-content: space-between; align-items: center; }
.checkout-summary .cs-trust li {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    font-size: 12.5px;
    color: #4B5563;
    margin-top: .45rem;
}
.checkout-summary .cs-trust i { color: #047857; margin-top: 1px; }

.checkout-consent .form-check-label { font-size: 13.5px; color: #4B5563; }
.checkout-consent a { color: #CF3425; text-decoration: underline; }
.checkout-submit { font-weight: 600; padding: .7rem 1rem; border-radius: 10px; }
.checkout-reassure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    font-size: 12.5px;
    color: #6B7280;
}

.checkout-mobile-bar { display: none; }

@media (max-width: 991.98px) {
    .checkout-aside { position: static; }
    /* The bar is fixed, so the last card needs room or it sits underneath. */
    .content-two { padding-bottom: 88px; }
    .checkout-mobile-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid #E4EBF1;
        box-shadow: 0 -6px 20px rgba(17, 24, 39, .1);
    }
    .cmb-label { display: block; font-size: 11.5px; color: #6B7280; line-height: 1.2; }
    .cmb-amount { font-size: 19px; font-weight: 700; color: #CF3425; }
    .cmb-cta { flex: 1 1 auto; font-weight: 600; border-radius: 10px; padding: .6rem 1rem; }
    .checkout-aside .checkout-submit,
    .checkout-aside .checkout-reassure { display: none; }
}

.dark-mode .cs-mark { background: #1D2125; color: #9CA3AF; }
.dark-mode .cs-step + .cs-step::before { background: #2A2E33; }
.dark-mode .cs-step.is-current { color: #F3F4F6; }
.dark-mode .checkout-mobile-bar { background: #16191C; border-top-color: #2A2E33; }

/* Duration badge on an hourly charter's vehicle cards. */
.transfer-option .to-duration {
    display: inline-block;
    margin-left: .4rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: #FDECEA;
    color: #CF3425;
    font-size: 11.5px;
    font-weight: 600;
    vertical-align: middle;
}
.dark-mode .transfer-option .to-duration { background: #2A1D1B; color: #F97066; }

/* ── Payment method selector ─────────────────────────────────────────────── */
.pay-method {
    display: flex;
    align-items: center;
    gap: .85rem;
    width: 100%;
    margin: 0 0 .6rem;
    padding: .85rem 1rem;
    border: 1px solid #E4EBF1;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.pay-method:last-of-type { margin-bottom: 0; }
.pay-method:hover { border-color: #F3C9C4; }
.pay-method input { position: absolute; opacity: 0; pointer-events: none; }
.pay-method.is-on { border-color: #CF3425; background: #FEF6F5; box-shadow: 0 0 0 1px #CF3425 inset; }
.pay-method-icon { font-size: 22px; color: #6B7280; flex: 0 0 auto; }
.pay-method.is-on .pay-method-icon { color: #CF3425; }
.pay-method-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pay-method-text strong { font-size: 14.5px; color: #111827; }
.pay-method-text small { font-size: 12.5px; color: #6B7280; }
.pay-method-tick { flex: 0 0 auto; color: #CF3425; font-size: 19px; opacity: 0; transition: opacity .15s ease; }
.pay-method.is-on .pay-method-tick { opacity: 1; }

.pay-note {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    font-size: 12.5px;
    color: #6B7280;
}
.pay-note i { color: #047857; margin-top: 1px; }

.booking-paynext {
    padding: .85rem 1rem;
    border-radius: 10px;
    background: #F8FAFC;
    border: 1px solid #E4EBF1;
}
.booking-paynext strong { display: block; margin-bottom: .2rem; font-size: 14px; color: #111827; }

@media (max-width: 575.98px) {
    .pay-method { padding: .75rem .85rem; gap: .65rem; }
    .pay-method-icon { font-size: 19px; }
}

.dark-mode .pay-method { background: #16191C; border-color: #2A2E33; }
.dark-mode .pay-method.is-on { background: #23181A; }
.dark-mode .pay-method-text strong { color: #F3F4F6; }
.dark-mode .booking-paynext { background: #16191C; border-color: #2A2E33; }
.dark-mode .booking-paynext strong { color: #F3F4F6; }

/* On a phone the three step labels do not fit, and the rail silently scrolled
   the last one out of view. Keep the marks and name only where you are. */
@media (max-width: 575.98px) {
    .checkout-steps { gap: .35rem; margin-bottom: 1.1rem; }
    .cs-step:not(.is-current) .cs-label { display: none; }
    .cs-step + .cs-step::before { width: 18px; margin-right: .35rem; }
}

/* ── Pick-up mode: by flight number, or by the clock ──────────────────────────
   A quieter pill row than .tsf-dir: arrival-vs-departure is the decision that
   defines the journey, this one only decides how you phrase the time, so it
   must not compete with it for attention. */
.tsf-mode {
    display: inline-flex;
    gap: .25rem;
    margin-bottom: .85rem;
    padding: 3px;
    background: #F1F4F7;
    border-radius: 999px;
}
.tsf-mode-opt {
    margin: 0;
    padding: .34rem .85rem;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: #4B5563;
    cursor: pointer;
    line-height: 1.3;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.tsf-mode-opt input { position: absolute; opacity: 0; pointer-events: none; }
.tsf-mode-opt.is-on {
    background: #fff;
    color: #CF3425;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
.tsf-mode-opt:focus-within { outline: 2px solid #CF3425; outline-offset: 2px; }

/* The number and its Check button read as one control. The button is sized off
   the input rather than the theme's button scale, which is built for CTAs and
   would out-shout the field it belongs to. */
.tsf-flight-entry { display: flex; align-items: center; gap: .35rem; }
.tsf-flight-entry .form-control { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.tsf-flight-check {
    flex: 0 0 auto;
    padding: .28rem .6rem;
    font-size: 12px;
    font-weight: 600;
    color: #CF3425;
    background: #FDF2F1;
    border: 1px solid #F6D9D6;
    border-radius: 8px;
    line-height: 1.4;
}
.tsf-flight-check:hover:not(:disabled) { background: #FAE4E2; color: #A82A1E; }
.tsf-flight-check:disabled { opacity: .6; cursor: default; }

/* The theme declares display:flex on .form-item, which outranks the [hidden]
   attribute on specificity. It happens to lose today, but a cell that hides
   only by accident is a cell that reappears the next time the theme is
   touched — and this one carries a value the customer never chose. */
.transfer-search .form-info .form-item[hidden] { display: none !important; }

/* What we made of the flight. Full width under the row, because it is a
   sentence, and truncating it to a form column would hide the pick-up time it
   exists to state.

   The success state is a tinted chip, not just green type: colour alone is the
   one signal a colour-blind customer cannot read, and this sentence is the
   confirmation that their flight was understood. */
.tsf-flight-note {
    margin: .7rem 0 0;
    padding: .5rem .75rem;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: #4B5563;
    background: #F3F5F8;
    display: inline-block;
}
.tsf-flight-note.is-ok {
    color: #0A6B44;
    font-weight: 600;
    background: #E8F6EF;
    box-shadow: inset 0 0 0 1px #BFE5D4;
}
.tsf-flight-note.is-ok::before { content: "✓ "; font-weight: 700; }
.tsf-flight-note.is-warn {
    color: #92400E;
    font-weight: 500;
    background: #FEF6E7;
    box-shadow: inset 0 0 0 1px #F5DEB8;
}
.tsf-flight-note.is-warn::before { content: "! "; font-weight: 700; }

.dark-mode .tsf-mode { background: #1D2125; }
.dark-mode .tsf-mode-opt { color: #9CA3AF; }
.dark-mode .tsf-mode-opt.is-on { background: #16191C; color: #F97066; }
.dark-mode .tsf-flight-check { color: #F97066; background: #241A19; border-color: #3A2523; }
.dark-mode .tsf-flight-note { color: #9CA3AF; background: #1D2125; }
.dark-mode .tsf-flight-note.is-ok { color: #6EE7A8; background: #10261C; box-shadow: inset 0 0 0 1px #1E4635; }
.dark-mode .tsf-flight-note.is-warn { color: #FDB022; background: #2A1F0E; box-shadow: inset 0 0 0 1px #4A3818; }

/* =====================================================================
   Singapore packages listing (/tours)

   One loud element, everything else disciplined. The duration band gets the
   largest numerals on the page because choosing a number of days IS the
   decision here — Singapore is small enough that nobody is choosing a place.
   The theme strip and reviews below it stay deliberately quiet so the band
   keeps its job.

   All type comes from the theme's own families. Introducing a webfont into a
   Bootstrap theme means either a network request the CSP may drop or a silent
   fallback, and neither is worth a page's personality.
   ===================================================================== */

.tl-band-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 12px;
}

.tl-band-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 18px 14px;
    border: 1px solid #E4EBF1;
    border-radius: 14px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.tl-band-item:hover {
    border-color: #CF3425;
    box-shadow: 0 10px 24px -14px rgba(207, 52, 37, .5);
}
.tl-band-item:focus-visible { outline: 2px solid #CF3425; outline-offset: 3px; }
.tl-band-item.is-on { border-color: #CF3425; background: #FDF2F1; }

/* The one piece of type doing real work. Tabular so the row of numbers lines
   up as a scale rather than as four unrelated headings. */
.tl-band-num {
    font-size: 2.55rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: #CF3425;
}
.tl-band-unit {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #6B7C85;
    margin-top: 4px;
}
.tl-band-meta { font-size: .82rem; color: #6B7C85; margin-top: 10px; }
.tl-band-price { font-size: .9rem; font-weight: 600; margin-top: 2px; }
.tl-band-clear { color: #CF3425; }

/* Theme cards: a photo, a name, and the number the reader came for. */
.tl-theme {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 10px;
    border: 1px solid #E4EBF1;
    border-radius: 14px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    height: 100%;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.tl-theme:hover { border-color: #CF3425; box-shadow: 0 10px 24px -16px rgba(16, 24, 40, .35); }
.tl-theme:focus-visible { outline: 2px solid #CF3425; outline-offset: 3px; }
.tl-theme.is-on { border-color: #CF3425; background: #FDF2F1; }
.tl-theme-img {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    overflow: hidden;
    background: #F1F4F7;
    display: block;
}
.tl-theme-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-theme-text { flex: 1 1 auto; min-width: 0; }
.tl-theme-name { display: block; font-weight: 600; font-size: .95rem; }
.tl-theme-meta { display: block; font-size: .78rem; color: #6B7C85; }
.tl-theme-price { font-size: .85rem; font-weight: 600; white-space: nowrap; }

/* Reviews: quiet cards, because the words are the content. */
.tl-review {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid #E4EBF1;
    border-radius: 14px;
    background: #fff;
}
.tl-review-stars { color: #F5A524; font-size: .88rem; margin-bottom: 10px; letter-spacing: 1px; }
.tl-review-title { font-size: .98rem; font-weight: 600; margin: 0 0 8px; }
.tl-review-body {
    font-size: .9rem;
    line-height: 1.6;
    color: #4B5563;
    margin: 0 0 16px;
    flex: 1 1 auto;
}
.tl-review-by { display: flex; align-items: center; gap: 10px; }
.tl-review-avatar {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #FDF2F1;
    color: #CF3425;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tl-review-name { display: block; font-weight: 600; font-size: .88rem; }
.tl-review-meta { display: block; font-size: .76rem; color: #6B7C85; }

.dark-mode .tl-band-item,
.dark-mode .tl-theme,
.dark-mode .tl-review { background: #16191C; border-color: #263238; }
.dark-mode .tl-band-item.is-on,
.dark-mode .tl-theme.is-on { background: #241A19; border-color: #F97066; }
.dark-mode .tl-band-num { color: #F97066; }
.dark-mode .tl-band-unit,
.dark-mode .tl-band-meta,
.dark-mode .tl-theme-meta,
.dark-mode .tl-review-meta { color: #9CA3AF; }
.dark-mode .tl-review-body { color: #B2C0C6; }
.dark-mode .tl-theme-img { background: #1D2125; }
.dark-mode .tl-review-avatar { background: #241A19; color: #F97066; }

@media (prefers-reduced-motion: reduce) {
    .tl-band-item, .tl-theme { transition: none; }
}

@media (max-width: 575.98px) {
    .tl-band-num { font-size: 2.1rem; }
    .tl-band-item { padding: 13px 14px 12px; }
}

/* Five themes in a four-up grid leaves one orphan on its own row. Auto-fit
   lets the row decide how many fit at each width instead of forcing a count. */
.tl-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
    gap: 12px;
}

/* Departure cities: a link list, not a card grid. Thirty destinations styled
   as cards would out-shout the packages they exist to feed traffic into, so
   they stay as text in columns — dense, scannable, and obviously a directory. */
.tl-cities-list {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 4;
    column-gap: 28px;
}
.tl-cities-list li { break-inside: avoid; margin-bottom: 7px; }
.tl-cities-list a {
    font-size: .875rem;
    color: #4B5563;
    text-decoration: none;
    display: block;
    padding: 2px 0;
}
.tl-cities-list a:hover { color: #CF3425; text-decoration: underline; }
.tl-cities-list a:focus-visible { outline: 2px solid #CF3425; outline-offset: 2px; border-radius: 3px; }
.dark-mode .tl-cities-list a { color: #9CA3AF; }
.dark-mode .tl-cities-list a:hover { color: #F97066; }

@media (max-width: 991.98px) { .tl-cities-list { columns: 2; } }
@media (max-width: 575.98px) { .tl-cities-list { columns: 1; } }

/* =====================================================================
   Origin-city landing pages (/singapore-tour-package-from-*) and their
   hub (/singapore-tour-packages-from-india).
   ===================================================================== */

/* The hero carries a real Singapore photo. The view sets only the image, as
   --city-hero-img; the darkening gradient is here so both the hub and the
   1,155 city pages share one definition. It is heaviest at the top, where
   the site header sits over it, and lightest through the middle so the
   photograph is actually visible behind the heading. Without a photo the
   rule collapses to the flat brand-dark background. */
.city-hero {
    background-color: #0E1421;
    background-image:
        linear-gradient(rgba(14, 20, 33, .74) 0%, rgba(14, 20, 33, .44) 52%, rgba(14, 20, 33, .66) 100%),
        var(--city-hero-img, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* The theme puts a second, heavier scrim on .breadcrumb-bar::before. Stacked
   under the gradient above it darkens the photo to almost solid black, so it
   is dropped here — this hero brings its own. */
.city-hero::before { background: none; }
.city-hero .breadcrumb-title,
.city-hero > .container p {
    color: #fff;
}
.city-hero .breadcrumb-item,
.city-hero .breadcrumb-item a,
.city-hero .breadcrumb-item.active {
    color: rgba(255, 255, 255, .85);
}
.city-hero .breadcrumb-item a:hover { color: #fff; }

/* These cards render a single static <img> rather than the owl slider the
   theme's card uses, so the anchor needs to stop being inline or it leaves
   a descender gap under the image. Heights come from the shared
   .place-item rules above. */
.place-item .place-img > a { display: block; height: 230px; }
.place-item .place-content h3 a { color: inherit; transition: color .2s ease; }
.place-item:hover .place-content h3 a { color: #CF3425; }

/* The hub lists 1,155 cities. Columns keep that scannable without turning
   the page into a mile of single-file links. */
.city-columns {
    columns: 4;
    column-gap: 24px;
}
.city-columns li { break-inside: avoid; padding: 2px 0; }
.city-columns a { color: #4B5563; text-decoration: none; }
.city-columns a:hover { color: #CF3425; text-decoration: underline; }
.city-columns a:focus-visible { outline: 2px solid #CF3425; outline-offset: 2px; border-radius: 3px; }
.dark-mode .city-columns a { color: #9CA3AF; }
.dark-mode .city-columns a:hover { color: #F97066; }

@media (max-width: 1199.98px) { .city-columns { columns: 3; } }
@media (max-width: 767.98px)  { .city-columns { columns: 2; } }
@media (max-width: 479.98px)  { .city-columns { columns: 1; } }