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

/* --- 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. The theme's
   decorative ::after re-draws banner-bg-05 (a hiker with a transparent/white sky)
   on top, which washes out the area under the glassmorphic header so the white menu
   text vanishes. Neutralise that overlay and darken the top so the glass menu stays
   readable — the standard transparent/overlay-header technique. */
.home-hero::after {
    display: none !important;
}
.home-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 260px;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.55), rgba(17, 24, 39, 0));
    z-index: 0;
    pointer-events: none;
}
.home-hero > .container {
    position: relative;
    z-index: 1;
}
/* 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;
}