/*
 * Modern visual layer - homepage redesign pass 1.
 * Loaded after style.css, so these rules win on the cascade without
 * needing !important. Purely additive/visual: no HTML structure changes,
 * no content changes, safe to remove by deleting the <link> tag in head.php.
 */

/* ---- Global typeface: Poppins everywhere (style.css's body rule set
   Open Sans; buttons/inputs/selects don't inherit body font by default,
   so they're listed explicitly). Euphoria Script decorative headings in
   style.css keep their own font-family. */
body,
button,
input,
select,
textarea {
  font-family: var(--font-primary);
}

/* ---- Mobile nav: true side drawer, not Bootstrap's default dropdown.
   The original site never gives the expanded menu a background of its
   own (.travel-bar and Bootstrap's default .navbar-collapse are both
   transparent), so it rendered as see-through text over the dimmed hero
   image. Bootstrap's collapse plugin only animates height via inline
   styles, which fights a fixed-position slide-in panel - so this is
   driven by a small dedicated script (assets/js/nav-drawer.js) toggling
   a .drawer-open class, with pure CSS transform for the slide and a
   backdrop for click-outside-to-close. Matches the reference: solid
   panel, clean dividers, close button.

   BREAKPOINT: the drawer serves everything below 1200px. Between 768 and
   1200 the eight nav items + pill genuinely don't fit Bootstrap's fixed
   750/970px containers (the pill wraps to a second line), so the inline
   nav only renders at >=1200 where it truly fits. Bootstrap's own
   desktop-nav rules kick in at 768, hence the explicit float/display
   overrides below to keep the drawer in charge up to 1199. */
@media (max-width: 1199px) {
  /* defeat Bootstrap's >=768 inline-nav rules inside the drawer range */
  .travel-bar .navbar-toggle {
    display: block;
  }

  .travel-bar .navbar-nav,
  .travel-bar .navbar-nav > li {
    float: none;
  }

  .travel-bar .navbar-nav.navbar-right {
    float: none !important;
  }

  .travel-bar .navbar-brand {
    margin-left: 0;
  }

  /* the drawer-only nav groups (Kerala Attractions) must show whenever
     the drawer is active, not just at Bootstrap's xs range */
  .travel-bar .visible-xs-block {
    display: block !important;
  }

  /* z-index higher than .navbar-header's 1051 (below) - the drawer is
     opaque and needs to visually cover the original header's own
     hamburger/logo row when open, not sit underneath it. That mismatch
     (drawer at 1050, header at 1051) was exactly why the close button
     looked like it was "below the nav bar" - the original header was
     painting over it. Now the drawer has its own in-flow header row
     instead of an absolutely-positioned close button floating over
     unrelated content, so this is robust regardless of exact z-index
     stacking with the original header, but keeping the drawer's
     z-index clearly higher too as a second line of defense. */
  /* Logo and hamburger are floated (Bootstrap default) with different
     total heights (logo: image + 18px/18px padding; button: icon bars +
     9px Bootstrap padding + margin) - floats don't auto-align mismatched
     heights, they just top-align within the row, so the two ended up
     visibly offset from each other rather than centered together. Flex
     with align-items:center is the robust fix regardless of exactly how
     tall either one is, rather than hand-tuning margins to try to match
     them (fragile - breaks again if either element's size changes).
     order swaps them back to logo-left/toggle-right despite the toggle
     coming first in the HTML. */
  .travel-bar .navbar-header {
    position: relative;
    z-index: 1051;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    float: none;
    /* Bootstrap's mobile -15px side margins assume the header's width
       grows to fill them; with an explicit width:100% they just shift
       the box left, leaving a 30px dead zone on the right (hamburger
       looked indented while the logo hugged the screen edge). Zero them
       so the header aligns with the container symmetrically. */
    margin-left: 0;
    margin-right: 0;
  }

  /* Bootstrap's clearfix gives .navbar-header ::before/::after pseudo
     elements (content:" "; display:table). Inside a flex container those
     become ANONYMOUS FLEX ITEMS, so space-between was distributing four
     items (phantom, logo, toggle, phantom) instead of two - which is
     exactly what pushed the logo toward the center. Flex containers
     contain their children natively, so the clearfix is useless here;
     suppress the pseudos entirely. */
  .travel-bar .navbar-header::before,
  .travel-bar .navbar-header::after {
    content: none;
  }

  .travel-bar .navbar-toggle {
    float: none;
    order: 2;
    margin: 0;
  }

  /* Bootstrap hard-codes .navbar-brand{height:50px}, but its content here
     is 41px logo + 36px padding = 77px, so the image visually overflowed
     its own box - and the container/dark-backdrop only track the border
     box, which is why the logo's bottom spilled past the dark bar.
     height:auto derives the box from content (no magic number to drift
     out of sync if the logo or padding ever changes); display:block on
     the img kills the inline-baseline gap below it. */
  /* the container's own 15px padding is the alignment line for BOTH
     ends of the bar - the brand's extra 15px side padding double-inset
     the logo (30px) while the zero-margin hamburger sat at 15px */
  .travel-bar .navbar-brand {
    float: none;
    order: 1;
    height: auto;
    padding: 18px 0;
  }

  .travel-bar .navbar-brand img {
    display: block;
    height: var(--nav-logo-height);
    width: auto;
  }

  /* Bootstrap floats .navbar-header (float:left) at every width, and
     normally .container's own ::after clearfix (content/display:table/
     clear:both) contains that float so the bar's visible height grows
     with its content. style.css's dark-background trick repurposes that
     exact ::after pseudo-element for a different job (the full-bleed
     backdrop), which silently drops the clear:both - so the container
     stopped containing the floated header's real height, and the extra
     bottom padding above had nothing to visibly grow into. flow-root
     establishes a new block formatting context that contains floats
     without needing the clearfix pseudo-element at all, and (unlike
     overflow:hidden) doesn't clip the dark background's own full-bleed
     overflow trick. */
  .travel-bar > .container {
    display: flow-root;
  }

  .travel-bar .navbar-collapse {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 82%;
    max-width: 320px;
    background: #14213d;
    margin: 0;
    padding: 0 0 24px 0;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1060;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.3);
  }

  .travel-bar .navbar-collapse.drawer-open {
    transform: translateX(0);
  }

  /* drawer's own header row - in normal flow, not absolutely positioned,
     so it can't end up stacked behind anything else regardless of
     z-index math elsewhere on the page. */
  .nav-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .nav-drawer-brand img {
    height: var(--nav-logo-height);
    width: auto;
  }

  .nav-drawer-close {
    display: block;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 30px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
  }

  .nav-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1049;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .nav-drawer-backdrop.drawer-open {
    opacity: 1;
    visibility: visible;
  }

  .travel-bar .navbar-nav {
    margin: 0;
  }

  .travel-bar .navbar-nav > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .travel-bar .navbar-nav > li:last-child {
    border-bottom: none;
  }

  .travel-bar .navbar-nav > li > a {
    padding: 16px 20px;
    font-size: 16px;
  }

  .travel-bar .navbar-nav li .kerala {
    display: inline-block;
    margin: 12px 20px;
    padding: 8px 16px;
  }

  /* ---- Expandable group (e.g. Kerala Attractions), matching the
     Paradise Kerala reference: label + caret, tap to reveal a nested
     list, caret rotates when open. */
  .travel-bar .nav-has-children > a.nav-expand-toggle,
  .travel-bar .nav-has-children > a.nav-expand-toggle:hover,
  .travel-bar .nav-has-children > a.nav-expand-toggle:focus,
  .travel-bar .nav-has-children > a.nav-expand-toggle:active,
  .travel-bar .nav-has-children > a.nav-expand-toggle:visited {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    font-size: 16px;
    color: #ffffff;
    outline: none;
  }

  .nav-caret {
    font-size: 12px;
    transition: transform 0.2s ease;
  }

  .nav-has-children.submenu-open .nav-caret {
    transform: rotate(180deg);
  }

  .nav-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.15);
    transition: max-height 0.3s ease;
  }

  .nav-has-children.submenu-open .nav-submenu {
    max-height: 600px;
  }

  /* .travel-bar .navbar-nav ul li (style.css) sets display:inline-block
     on ANY <li> inside ANY <ul> nested in .navbar-nav - a descendant
     selector, so it also caught these submenu items and wrapped them
     into columns instead of stacking. Explicit block + full width here
     overrides it. */
  .nav-submenu li {
    display: block;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-submenu li a {
    display: block;
    padding: 12px 20px 12px 32px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
  }
}

/* Desktop nav sizing: the original fit was tuned to Open Sans' narrow
   metrics (15px text + 15px side padding barely fit the 1170px container
   with all 8 items + the phone widget). Poppins runs wider, which pushed
   the right-floated menu onto a second line. Slightly tighter side
   padding (and 14px at the widest breakpoint, vs the 13px the original
   already used at 992-1200) keeps everything on one line with margin to
   spare; nowrap stops any single item breaking internally. */
@media (min-width: 1200px) {
  .navbar-default .navbar-nav > li > a {
    font-size: 14px;
    padding-left: 9px;
    padding-right: 9px;
    white-space: nowrap;
  }
}

/* the drawer close button, header row, backdrop, and expand caret are
   mobile-only constructs - desktop keeps the original flat inline nav
   untouched, .nav-expand-toggle links simply aren't rendered as
   expandable there (see nav.php: children groups are mobile_only). */
@media (min-width: 1200px) {
  .nav-drawer-close,
  .nav-drawer-header,
  .nav-drawer-backdrop,
  .nav-caret {
    display: none !important;
  }
}

/* ---- Nav bar dark background. The original used a pseudo-element hack
   (width:9999% bleeding out of the width-capped .container) that fell
   short on the right at wide viewports; the first replacement used
   100vw, which INCLUDES the scrollbar width and so always poked ~15px
   past the visible viewport (horizontal scroll). The correct home for
   this background is the .travel-bar element itself: as navbar-fixed-top
   it already spans exactly the viewport (left:0/right:0), no width
   hacks needed. The opaque #1a1a1a topbar inside paints over its strip
   of it, same as before. */
.travel-bar {
  background: rgba(0, 0, 0, 0.7);
}

/* scrolled state: JS adds .offset to the navbar; the old rule turned the
   pseudo-element solid black (.offset > .container::after) - same look,
   now on the element */
.travel-bar.offset {
  background: #000000;
}

/* retire the pseudo-element backdrop entirely */
.travel-bar > .container::after {
  content: none;
}

/* ---- Hero search bar (replaces the old lead-capture form card).
   Data-driven from data/packages_catalog.php via includes/hero-search.php;
   behavior in assets/js/hero-search.js. The old .form-contents overlay
   relied on absolute-positioning against a zero-height relative parent
   (bottom:5% of nothing, overflowing upward over the carousel) - this
   positions .banner-contents itself over the hero instead, plainly. */
.banner .banner-contents {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14%;
  /* Bootstrap's .carousel-indicators (the slide dots) sit at z-index 15;
     the search bar must paint above them, not under. */
  z-index: 20;
}

.hero-search {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}

.hero-search-tagline {
  text-align: center;
  color: var(--color-white);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.4px;
  margin: 0 0 14px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.hero-search-bar {
  display: flex;
  align-items: center;
  background: var(--color-white);
  border-radius: var(--radius-pill);
  padding: 9px 9px 9px 12px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.32);
  transition: box-shadow 0.25s ease;
}

/* focus ring on the whole bar when either field is active */
.hero-search-bar:focus-within {
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.32), 0 0 0 3px rgba(0, 161, 202, 0.35);
}

.hero-search-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.15s ease;
}

/* whole field glows on hover so it's obviously clickable */
.hero-search-field:hover {
  background: rgba(0, 161, 202, 0.08);
}

.hero-search-icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--color-btn-end);
  background: rgba(0, 161, 202, 0.1);
}

.hero-search-text {
  flex: 1;
  min-width: 0;
}

.hero-search-field label {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: #1a1a1a;
  letter-spacing: 0.2px;
  margin: 0 0 2px;
  cursor: pointer;
}

.hero-search-field select {
  width: 100%;
  border: none;
  outline: none;
  font-size: 14.5px;
  color: #4a5568;
  padding: 0 26px 0 0;
  cursor: pointer;
  /* replace the browser's default (inconsistently placed) arrow with a
     neat chevron sitting right after the text */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
}

.hero-search-divider {
  flex: none;
  width: 1px;
  height: 44px;
  background: rgba(0, 0, 0, 0.1);
  margin: 0 6px;
}

.hero-search-btn {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 54px;
  padding: 0 28px;
  margin-left: 10px;
  border-radius: var(--radius-pill);
  border: none;
  color: var(--color-white);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background: var(--color-btn-start);
  background: linear-gradient(135deg, var(--color-btn-start) 0%, var(--color-btn-end) 100%);
  box-shadow: 0 4px 14px rgba(0, 161, 202, 0.45);
}

.hero-search-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 20px rgba(0, 161, 202, 0.55);
}

.hero-search-btn:active {
  transform: scale(0.97);
}

/* ---- /search results page ---- */
.search-page {
  background: #f6f7f9;
  padding-bottom: 50px;
}

.search-page-hero {
  background: var(--color-section-start);
  background: linear-gradient(to right, var(--color-section-start) 0%, var(--color-section-mid) 50%, var(--color-section-end) 100%);
  /* clears the fixed navbar (topbar + logo row) at full desktop width */
  padding: 170px 0 35px;
}

/* mobile nav is the compact drawer bar - much shorter */
@media (max-width: 767px) {
  .search-page-hero {
    padding-top: 110px;
  }
}

.search-page-hero h1 {
  color: var(--color-white);
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 25px;
}

.search-page-bar {
  max-width: 720px;
}

.search-page-layout {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  margin-top: 30px;
}

.search-filters {
  flex: 0 0 250px;
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* mobile-only controls: the Filters toggle button, the bottom-sheet close
   button, the Apply button, and the backdrop */
.search-filters-toggle,
.search-filters-apply,
#searchFiltersClose,
.search-filters-backdrop {
  display: none;
}

.search-filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-section-end);
  color: var(--color-white);
  padding: 14px 18px;
}

.search-filters-head h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-white);
}

.search-filters-head button {
  background: transparent;
  border: none;
  color: var(--color-white);
  cursor: pointer;
  font-size: 14px;
}

.search-filter-group {
  padding: 14px 18px 16px;
  border-bottom: 1px solid #eeeeee;
}

.search-filter-group:last-child {
  border-bottom: none;
}

.search-filter-group h5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #333333;
}

.search-filter-clear {
  background: transparent;
  border: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-btn-end);
  cursor: pointer;
  padding: 2px 4px;
}

.search-filter-clear:hover {
  text-decoration: underline;
}

.search-filter-check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 400;
  color: #444444;
  margin: 0 0 9px;
  cursor: pointer;
}

.search-filter-check input {
  margin: 0;
  cursor: pointer;
}

.search-results {
  flex: 1;
  min-width: 0;
}

.search-results-count {
  font-size: 13px;
  color: #777777;
  margin: 0 0 14px;
}

/* Deterministic column counts per breakpoint (auto-fill sizing proved
   unreliable in the 768-991 band, shrink-wrapping to a single left-hung
   column). Explicit 1fr tracks always fill and always distribute evenly:
   - >=1200: 3 across (results area ~864px beside the sidebar)
   - 992-1199: 2 across (results area ~664px beside the sidebar)
   - 768-991: 2 across (sidebar collapses to the Filters sheet, full width)
   - <768: 1 centered column, card capped at a comfortable width */
.search-results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.search-results-grid .pkg-card {
  width: 100%;
}

@media (max-width: 1199px) {
  .search-results-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .search-results-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .search-results-grid .pkg-card {
    max-width: 420px;
  }

  /* single-column cards are large on mobile - the compact (-sm) type
     scale is desktop-density; restore comfortable reading sizes */
  .cat-card-sm .cat-card-eyebrow {
    font-size: 12px;
  }

  .cat-card-sm .cat-card-title {
    font-size: 19px;
  }

  .cat-card-sm .cat-card-meta {
    font-size: 14px;
  }

  .cat-card-sm .cat-card-points li {
    font-size: 14px;
  }

  .cat-card-sm .cat-card-price {
    font-size: 24px;
  }

  .cat-card-sm .cat-card-price-note {
    font-size: 13px;
  }

  .cat-card-sm .cat-btn {
    font-size: 13px;
    padding: 11px 18px;
  }

  /* filter sheet: comfortable tap-and-read sizes */
  .search-filter-check {
    font-size: 15px;
  }
}

.search-results-empty {
  text-align: center;
  color: #777777;
  padding: 50px 0;
}

/* ---- Modern section heading (new homepage sections) ----
   Replaces the legacy .section-title pattern (huge faded word floating
   behind the title), which reads as broken on plain backgrounds:
   centered eyebrow + bold title with a short gradient underline + one
   line of supporting text. */
.modern-heading {
  text-align: left;
  max-width: 640px;
  margin: 0 0 45px;
}

.modern-heading-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-btn-end);
  margin: 0 0 10px;
}

.modern-heading h2 {
  font-size: 34px;
  font-weight: 700;
  color: #1e2a32;
  margin: 0 0 18px;
  position: relative;
  padding-bottom: 18px;
}

.modern-heading h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-btn-start);
  background: linear-gradient(90deg, var(--color-btn-start) 0%, var(--color-btn-end) 100%);
}

.modern-heading-sub {
  font-size: 15.5px;
  line-height: 1.6;
  color: #6b7680;
  margin: 0;
}

@media (max-width: 767px) {
  .modern-heading {
    margin-bottom: 32px;
  }

  .modern-heading h2 {
    font-size: 26px;
  }

  .modern-heading-sub {
    font-size: 14px;
  }
}

/* ---- Homepage day-tour tiles (includes/home-day-tours.php) ----
   Full-bleed photo cards: tour name always on the image, subtitle +
   3 highlight bullets revealed on hover (always shown on touch
   devices, where hover doesn't exist). */
.home-day-tours {
  background: var(--color-white);
  padding: 55px 0 55px;
}

.day-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* day-tour cards ride in an Owl carousel; stretch items so every card
   in the visible row is the same height regardless of text length */
.day-carousel {
  position: relative;
}

/* Owl's stage-outer clips at its own box (overflow:hidden), which was
   shaving off the cards' shadows and rounded corners. Padding pushes
   the clip edge outward; the matching negative margin keeps the
   carousel visually aligned with the rest of the page. */
.day-carousel .owl-stage-outer {
  /* sized for the HOVER shadow, not just the resting one - otherwise
     hovering slices the shadow at the clip edge. Two hard bounds on the
     side value: it must stay under the 22px item gap (or neighboring
     off-screen cards peek through) AND within the container's own 15px
     side padding (or the expanded box pokes past the viewport on mobile
     = horizontal scroll). 15px satisfies both. */
  padding: 16px 15px 42px;
  margin: -16px -15px -24px;
}

/* contained hover shadow for carousel cards (the default hover shadow's
   28px blur can't fit inside a clip that stays sliver-free) */
.day-carousel .cat-card:hover {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}

.day-carousel .owl-stage {
  display: flex;
}

.day-carousel .owl-item {
  display: flex;
}

.day-carousel .cat-card {
  width: 100%;
}

/* nav arrows: white circles floating at the carousel's sides at card
   height - not the default bottom-centered blobs */
.day-carousel .owl-nav {
  margin: 0;
}

.day-carousel .owl-nav button.owl-prev,
.day-carousel .owl-nav button.owl-next {
  position: absolute;
  /* the carousel element's height includes the dots row below the cards,
     so a plain 50% sits too low - offset by half the dots strip (~44px)
     to center on the cards themselves */
  top: calc(50% - 22px);
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-white);
  color: #1e2a32;
  font-size: 17px;
  margin: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: background 0.15s ease, color 0.15s ease;
}

.day-carousel .owl-nav button.owl-prev {
  left: -14px;
}

.day-carousel .owl-nav button.owl-next {
  right: -14px;
}

.day-carousel .owl-nav button.owl-prev:hover,
.day-carousel .owl-nav button.owl-next:hover {
  background: var(--color-btn-end);
  color: var(--color-white);
}

.day-carousel .owl-nav button.disabled {
  opacity: 0;
  pointer-events: none;
}

/* the stage-outer's negative bottom margin pulls the dots up into its
   padding zone, where the transformed .owl-stage (its transform promotes
   it above normal-flow siblings in paint/hit order) can swallow their
   clicks - lift the dots above it explicitly */
.day-carousel .owl-dots {
  position: relative;
  z-index: 5;
  margin-top: 6px;
}

.day-carousel .owl-dots .owl-dot {
  cursor: pointer;
}

/* comfortable tap target around each small dot */
.day-carousel .owl-dots .owl-dot span {
  margin: 6px 7px;
}

.day-carousel .owl-dots .owl-dot.active span {
  background: var(--color-btn-end);
}

/* phones keep the arrows as a visual cue that more tours exist beyond
   the screen - but INSIDE the carousel box (the desktop -14px offsets
   would poke past the viewport = horizontal scroll), slightly smaller,
   overlapping the card images */
@media (max-width: 767px) {
  .day-carousel .owl-nav button.owl-prev,
  .day-carousel .owl-nav button.owl-next {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }

  /* pushed to the outer limit: -13px lands the buttons flush with the
     screen edge (the carousel box sits inside the container's 15px
     padding) - any further would poke past the viewport and bring back
     horizontal scroll */
  .day-carousel .owl-nav button.owl-prev {
    left: -13px;
  }

  .day-carousel .owl-nav button.owl-next {
    right: -13px;
  }
}

.day-tile {
  position: relative;
  display: block;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 1 / 1.05;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.day-tile:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
  text-decoration: none;
}

.day-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.day-tile:hover img {
  transform: scale(1.05);
}

.day-tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0) 70%);
  transition: background 0.3s ease;
}

.day-tile:hover .day-tile-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.15) 100%);
}

.day-tile-overlay h3 {
  color: var(--color-white);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 4px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.day-tile-subtitle {
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  margin: 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.day-tile-points {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  opacity: 0;
  transform: translateY(8px);
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.3s ease, transform 0.3s ease;
}

.day-tile:hover .day-tile-points {
  max-height: 140px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 12px;
}

.day-tile-points li {
  color: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 6px;
  padding-left: 14px;
  position: relative;
}

.day-tile-points li::before {
  content: '\2022';
  position: absolute;
  left: 0;
}

/* touch screens have no hover - show the details all the time */
@media (hover: none), (max-width: 767px) {
  .day-tile-points {
    max-height: 140px;
    opacity: 1;
    transform: none;
    margin-top: 12px;
  }

  .day-tile-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.15) 100%);
  }
}

/* phones: two tiles per row (full-width tiles eat too much scroll),
   with text scaled to the half-width footprint */
@media (max-width: 767px) {
  .day-tile-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .day-tile {
    border-radius: 16px;
  }

  .day-tile-overlay {
    padding: 14px;
  }

  .day-tile-overlay h3 {
    font-size: 17px;
  }

  .day-tile-subtitle {
    font-size: 12px;
  }
}

/* ---- Package detail page ----
   Premium re-skin. The hero (includes/package-hero.php) is new markup
   fed by the catalog; everything below restyles the EXISTING body-file
   markup (consistent across all 39 packages) so no body file changes. */

/* hero */
.pkg-hero {
  position: relative;
  background-size: cover;
  background-position: center;
}

/* tall, relaxed hero - content bottom-aligned with generous breathing
   room (padding-top clears the fixed navbar). Column direction so the
   inner .container stretches to full width (cross-axis) instead of
   shrinking to its content and getting centered by its margin:auto -
   that shrink was pushing the hero text toward the middle on phones. */
.pkg-hero-overlay {
  background: linear-gradient(to bottom, rgba(10, 20, 35, 0.35) 0%, rgba(10, 20, 35, 0.45) 45%, rgba(10, 20, 35, 0.8) 100%);
  min-height: 620px;
  padding: 180px 0 70px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Sticky breadcrumb bar: pins flush under the fixed navbar while
   scrolling so Home / Packages stay one tap away. The navbar's height is
   dynamic (topbar hides on scroll, layout changes per breakpoint), so
   the `top` offset is set in JS (package-detail-scripts.php) - the value
   here is just a sensible pre-JS fallback. z-index sits below the
   nav/drawer layers (1040+) but above page content. */
.pkg-breadcrumb-bar {
  position: sticky;
  top: 90px;
  z-index: 900;
  background: var(--color-white);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

.pkg-breadcrumb-bar .container {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 13px;
  color: #c2c8ce;
}

.pkg-breadcrumb-bar a {
  color: var(--color-btn-end);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.pkg-breadcrumb-bar a:hover,
.pkg-breadcrumb-bar a:focus {
  text-decoration: underline;
  color: var(--color-btn-end);
}

.pkg-breadcrumb-bar a i {
  font-size: 11px;
  margin-right: 3px;
}

.pkg-breadcrumb-current {
  color: #6b7680;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.pkg-hero-eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #7fd8e8;
  margin: 0 0 14px;
}

.pkg-hero-title {
  color: var(--color-white);
  font-size: 52px;
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 18px;
  max-width: 820px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.pkg-hero-locations {
  color: rgba(255, 255, 255, 0.9);
  font-size: 17px;
  margin: 0 0 36px;
}

.pkg-hero-locations i {
  color: #7fd8e8;
  margin-right: 7px;
}

.pkg-hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.pkg-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: var(--color-white);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pkg-hero-btn:hover,
.pkg-hero-btn:focus {
  color: var(--color-white);
  text-decoration: none;
  transform: translateY(-2px);
}

.pkg-hero-btn-wa {
  background: var(--color-whatsapp);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
}

.pkg-hero-btn-call {
  background: var(--color-btn-start);
  background: linear-gradient(135deg, var(--color-btn-start) 0%, var(--color-btn-end) 100%);
  box-shadow: 0 6px 18px rgba(0, 161, 202, 0.35);
}

/* body: hide the legacy title/rate block - the hero shows both */
.package-detail .package-content > h6,
.package-detail .package-content > .rate {
  display: none;
}

.package-detail {
  background: #f6f7f9;
  padding: 45px 0 55px;
}

/* description reads as an article card */
.package-detail .package-description {
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 26px 28px;
  margin: 26px 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: #4a5568;
}

/* itinerary: timeline cards with a teal day badge */
.package-detail .package-itenerary .day {
  background: var(--color-btn-end);
  background: linear-gradient(135deg, var(--color-btn-start) 0%, var(--color-btn-end) 100%);
  border-radius: 50%;
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
  margin: 0 18px 8px 0;
}

.package-detail .package-itenerary .day p {
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  line-height: 1.1;
  margin: 0;
}

.package-detail .package-itenerary .day p span {
  font-size: 20px;
  font-weight: 700;
}

.package-detail .package-itenerary .media-heading {
  font-size: 20px;
  font-weight: 600;
  color: #1e2a32;
  padding-top: 16px;
}

.package-detail .package-itenerary > .media,
.package-detail .package-itenerary .media .media {
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
  margin: 0 0 22px;
  overflow: hidden;
}

.package-detail .package-itenerary .media .media {
  box-shadow: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
}

.package-detail .package-itenerary .media-object {
  border-radius: 10px;
  max-width: 220px;
  margin-right: 18px;
}

.package-detail .package-itenerary .media-body {
  font-size: 14px;
  line-height: 1.75;
  color: #4a5568;
}

/* inclusions / exclusions / notes as clean cards with icon bullets */
.package-detail .inclusions,
.package-detail .exclusion,
.package-detail .notes {
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px 26px;
  margin: 0 0 22px;
}

.package-detail .inclusion-title,
.package-detail .exclusion-title,
.package-detail .notes-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.package-detail .inclusion-title {
  color: #1d9e74;
}

.package-detail .exclusion-title {
  color: #c0504d;
}

.package-detail .notes-title {
  color: #1e2a32;
}

.package-detail .inclusions ul,
.package-detail .exclusion ul,
.package-detail .notes ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.package-detail .inclusions li,
.package-detail .exclusion li,
.package-detail .notes li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 4px;
}

.package-detail .inclusions li::before,
.package-detail .exclusion li::before,
.package-detail .notes li::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 1px;
}

.package-detail .inclusions li::before {
  content: '\f00c';
  color: #1d9e74;
}

.package-detail .exclusion li::before {
  content: '\f00d';
  color: #c0504d;
}

.package-detail .notes li::before {
  content: '\f05a';
  color: var(--color-btn-end);
}

.package-detail .inclusions li p,
.package-detail .exclusion li p,
.package-detail .notes li p {
  font-size: 14px;
  line-height: 1.7;
  color: #4a5568;
  margin: 0 0 8px;
}

/* CTA buttons (BOOK NOW / CUSTOMIZE, opens the existing modals) */
.package-detail .button-list {
  margin: 6px 0 26px;
}

.package-detail .button-list-btn,
.package-detail .button-list-btn-second {
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.8px;
  padding: 13px 30px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.package-detail .button-list-btn {
  background: var(--color-btn-start);
  background: linear-gradient(135deg, var(--color-btn-start) 0%, var(--color-btn-end) 100%);
  color: var(--color-white);
  border: none;
}

.package-detail .button-list-btn-second {
  background: transparent;
  color: var(--color-btn-end);
  border: 2px solid var(--color-btn-end);
  margin-left: 8px;
}

.package-detail .button-list-btn:hover,
.package-detail .button-list-btn-second:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  color: var(--color-white);
}

.package-detail .button-list-btn-second:hover {
  background: var(--color-btn-end);
}

/* sidebar: related-package accordions as cards */
.package-detail .panel-group .panel {
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 14px;
}

.package-detail .panel-heading {
  background: var(--color-white);
  border: none;
  padding: 0;
}

.package-detail .panel-title a {
  display: block;
  padding: 15px 18px;
  font-size: 14.5px;
  font-weight: 600;
  color: #1e2a32;
  text-decoration: none;
}

.package-detail .panel-heading.active .panel-title a,
.package-detail .panel-title a:hover {
  color: var(--color-btn-end);
}

@media (max-width: 991px) {
  .pkg-hero-overlay {
    min-height: 480px;
    padding-top: 150px;
  }

  .pkg-hero-title {
    font-size: 40px;
  }
}

@media (max-width: 767px) {
  .pkg-hero-overlay {
    min-height: 440px;
    padding: 110px 0 40px;
  }

  .pkg-hero-eyebrow {
    font-size: 13px;
    letter-spacing: 2.5px;
    margin-bottom: 12px;
  }

  /* keep the title big and left-aligned on phones too */
  .pkg-hero-title {
    font-size: 36px;
    line-height: 1.15;
    margin-bottom: 14px;
  }

  .pkg-hero-locations {
    font-size: 16px;
    margin-bottom: 28px;
  }

  .pkg-hero-ctas {
    gap: 12px;
  }

  .pkg-hero-btn {
    flex: 1;
    justify-content: center;
    gap: 8px;
    padding: 14px 12px;
    font-size: 14px;
  }

  .pkg-hero-btn i {
    font-size: 15px;
  }

  /* compact summary card so it doesn't dominate the fold on mobile */
  .pkgm-side-card {
    padding: 20px;
  }

  .pkgm-side-price {
    font-size: 26px;
  }

  .pkgm-side-card .pkgm-eyebrow {
    letter-spacing: 1.8px;
    margin-bottom: 10px;
  }

  .package-detail .package-itenerary .media-object {
    max-width: 100%;
    margin: 0 0 14px;
  }

  .package-detail .button-list-btn-second {
    margin-left: 0;
    margin-top: 10px;
  }
}

/* ---- Modern package body (includes/package-page.php) ----
   Airy, full-width layout inspired by the reference: plain text content
   (no boxed cards) on a white page; only the price summary stays a card.
   Wide container, generous spacing. */
.pkgm {
  background: var(--color-white);
  padding: 52px 0 64px;
}

.pkgm-main {
  max-width: 1140px;
  margin: 0 auto;
}

/* section separator instead of card chrome */
.pkgm-journey,
.pkgm-incl-grid,
.pkgm-browse {
  padding-top: 40px;
  margin-top: 40px;
  border-top: 1px solid #e8ebef;
}

.pkgm-eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #b08d3e;
  margin: 0 0 14px;
}

.pkgm-heading {
  font-size: 30px;
  font-weight: 700;
  color: #1e2a32;
  margin: 0 0 28px;
}

/* overview: plain text left, price summary card right (the hero already
   shows the main photo - no repeat below) */
.pkgm-top {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

.pkgm-top .pkgm-description {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.pkgm-side {
  flex: 0 0 320px;
  position: sticky;
  /* pins below the sticky breadcrumb (offset published by
     package-detail-scripts.php); fallback for pre-JS / no breadcrumb */
  top: var(--pkg-sticky-top, 160px);
}

.pkgm-side-card {
  background: #fbfaf7;
  border: 1px solid #eceae3;
  border-radius: var(--radius-card);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.06);
  padding: 26px;
}

.pkgm-side-price {
  font-size: 30px;
  font-weight: 700;
  color: #1e3932;
  margin: 0;
  line-height: 1.2;
}

.pkgm-side-note {
  font-size: 12.5px;
  color: #8a939c;
  margin: 2px 0 16px;
}

.pkgm-side-facts {
  list-style: none;
  margin: 0 0 18px;
  padding: 14px 0 0;
  border-top: 1px solid #efefef;
}

.pkgm-side-facts li {
  font-size: 13.5px;
  line-height: 1.6;
  color: #4a5568;
  margin-bottom: 8px;
}

.pkgm-side-facts strong {
  color: #1e2a32;
}

.pkgm-side-btn {
  width: 100%;
  justify-content: center;
}

.pkgm-side-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 18px;
}

.pkgm-side-photos img {
  width: 100%;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
}

.pkgm-description {
  padding: 0;
  font-size: 16px;
  line-height: 1.9;
  color: #3d4756;
}

.pkgm-description p {
  margin: 0 0 14px;
}

/* highlights: warm cream card with gold label and check bullets */
.pkgm-highlights {
  background: #faf6ee;
  border: 1px solid #f0e9d8;
  border-radius: var(--radius-card);
  padding: 26px 30px;
  margin-top: 40px;
}

.pkgm-highlights ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 28px;
}

.pkgm-highlights li {
  font-size: 15px;
  color: #38455e;
}

.pkgm-highlights li i {
  color: #1e3932;
  font-size: 13px;
  margin-right: 10px;
}

/* journey: DAY N eyebrow + title + text, no timeline chrome */
.pkgm-journey {
  padding: 10px 4px 4px;
  margin-bottom: 26px;
}

.pkgm-day {
  margin-bottom: 44px;
  padding-bottom: 34px;
  border-bottom: 1px solid #e8ebef;
}

.pkgm-day:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 10px;
}

.pkgm-day-eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #b08d3e;
  margin: 0 0 4px;
}

.pkgm-day-title {
  font-size: 22px;
  font-weight: 600;
  color: #1e3932;
  margin: 0 0 12px;
}

/* day content: text left, photo right */
.pkgm-day-flex {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.pkgm-day-body {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  line-height: 1.85;
  color: #4a5568;
}

.pkgm-day-body p {
  margin: 0 0 12px;
}

.pkgm-day-img {
  flex: 0 0 260px;
  width: 260px;
  height: 190px;
  object-fit: cover;
  border-radius: 12px;
  position: sticky;
  /* same breadcrumb-aware offset as the summary card */
  top: var(--pkg-sticky-top, 160px);
}

/* inclusions / exclusions side by side */
.pkgm-incl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.pkgm-incl h3,
.pkgm-excl h3,
.pkgm-notes h3 {
  font-size: 17px;
  font-weight: 700;
  color: #1e2a32;
  margin: 0 0 16px;
}

.pkgm-incl h3 i {
  color: #1d9e74;
  margin-right: 8px;
}

.pkgm-excl h3 i {
  color: #c0504d;
  margin-right: 8px;
}

.pkgm-notes h3 i {
  color: var(--color-btn-end);
  margin-right: 8px;
}

.pkgm-incl ul,
.pkgm-excl ul,
.pkgm-notes ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* tinted panels: green wash for what's in, red wash for what's not
   (these keep a panel look on purpose - the user asked for the tints) */
.pkgm-incl,
.pkgm-excl {
  border-radius: var(--radius-card);
  padding: 24px 26px;
}

.pkgm-incl {
  background: #eef8f3;
  border: 1px solid #d6ede2;
}

.pkgm-excl {
  background: #fdf0ef;
  border: 1px solid #f3d9d6;
}

.pkgm-incl li,
.pkgm-excl li,
.pkgm-notes li {
  font-size: 14px;
  line-height: 1.7;
  color: #4a5568;
}

/* the source data packs several lines as <p>s inside ONE <li>, so the
   icon must ride on each <p> (every visible row), not the <li> */
.pkgm-incl li p,
.pkgm-excl li p,
.pkgm-notes li p {
  position: relative;
  padding-left: 26px;
  margin: 0 0 9px;
}

/* the legacy content carries stray empty <p></p> tags - without this
   they'd render as orphan ticks/crosses with no text */
.pkgm-incl li p:empty,
.pkgm-excl li p:empty,
.pkgm-notes li p:empty,
.pkgm-day-body p:empty {
  display: none;
}

.pkgm-incl li p::before,
.pkgm-excl li p::before,
.pkgm-notes li p::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 12px;
}

.pkgm-incl li p::before {
  content: '\f00c';
  color: #1d9e74;
}

.pkgm-excl li p::before {
  content: '\f00d';
  color: #c0504d;
}

.pkgm-notes li p::before {
  content: '\f05a';
  color: var(--color-btn-end);
}

.pkgm-notes {
  margin-bottom: 26px;
}

/* closing CTA band */
.pkgm-cta {
  background: #14213d;
  border-radius: var(--radius-card);
  padding: 40px 32px;
  text-align: center;
  margin: 44px 0 40px;
}

.pkgm-related {
  padding-top: 40px;
  border-top: 1px solid #e8ebef;
}

.pkgm-cta-title {
  color: var(--color-white);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 6px;
}

.pkgm-cta-sub {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14.5px;
  margin: 0 0 22px;
}

.pkgm-cta-btns {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.pkgm-btn {
  display: inline-flex;
  align-items: center;
  padding: 13px 30px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pkgm-btn:hover,
.pkgm-btn:focus {
  transform: translateY(-2px);
  text-decoration: none;
}

.pkgm-btn-solid {
  background: var(--color-btn-start);
  background: linear-gradient(135deg, var(--color-btn-start) 0%, var(--color-btn-end) 100%);
  color: var(--color-white);
  box-shadow: 0 6px 18px rgba(0, 161, 202, 0.35);
}

.pkgm-btn-solid:hover,
.pkgm-btn-solid:focus {
  color: var(--color-white);
}

.pkgm-btn-outline {
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: var(--color-white);
}

.pkgm-btn-outline:hover,
.pkgm-btn-outline:focus {
  border-color: var(--color-white);
  color: var(--color-white);
}

/* related packages */
.pkgm-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

@media (max-width: 991px) {
  .pkgm-related-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .pkgm-highlights,
  .pkgm-incl,
  .pkgm-excl {
    padding: 18px 16px;
  }

  .pkgm-journey,
  .pkgm-incl-grid,
  .pkgm-browse {
    padding-top: 28px;
    margin-top: 28px;
  }

  /* overview + summary card stack; the summary card comes first so the
     price/booking is immediately visible after the hero */
  .pkgm-top {
    flex-direction: column;
    gap: 26px;
  }

  .pkgm-side {
    position: static;
    flex: none;
    width: 100%;
    order: -1;
  }

  .pkgm-highlights ul {
    grid-template-columns: 1fr;
  }

  /* day photo drops below its text at full width */
  .pkgm-day-flex {
    flex-direction: column;
  }

  .pkgm-day-img {
    position: static;
    flex: none;
    width: 100%;
    height: auto;
    max-height: 230px;
  }

  .pkgm-incl-grid {
    grid-template-columns: 1fr;
  }

  .pkgm-related-grid {
    grid-template-columns: 1fr;
  }

  .pkgm-heading {
    font-size: 23px;
  }

  .pkgm-day-title {
    font-size: 19px;
  }
}

/* ---- Collapsibles: Terms & Conditions + Browse-by-Duration (native
   <details>). Shared chevron rotation; each has its own skin. ---- */
.pkgm-collapse > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.pkgm-collapse > summary::-webkit-details-marker {
  display: none;
}

.pkgm-collapse-chevron {
  font-size: 13px;
  color: var(--color-btn-end);
  transition: transform 0.2s ease;
  flex: none;
}

.pkgm-collapse[open] > summary .pkgm-collapse-chevron {
  transform: rotate(90deg);
}

/* Terms & Conditions - a self-contained bordered box, closed by default */
.pkgm-tc {
  border: 1px solid #e8ebef;
  border-radius: var(--radius-card);
  margin-top: 30px;
  overflow: hidden;
}

.pkgm-tc > summary {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 20px;
  background: #f6f7f9;
  font-size: 16px;
  font-weight: 700;
  color: #1e2a32;
}

.pkgm-tc > summary .pkgm-collapse-icon {
  color: var(--color-btn-end);
  font-size: 15px;
}

.pkgm-tc > summary .pkgm-collapse-chevron {
  margin-left: auto;
}

.pkgm-tc[open] > summary {
  border-bottom: 1px solid #e8ebef;
}

.pkgm-tc > ul {
  padding: 18px 22px;
  margin: 0;
}

/* Browse by Duration - accordion of trip-length groups */
.pkgm-dur {
  border: 1px solid #e8ebef;
  border-radius: var(--radius-card);
  margin-bottom: 12px;
  overflow: hidden;
}

.pkgm-dur > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  background: #f6f7f9;
  font-size: 16px;
  font-weight: 700;
  color: #1e2a32;
  transition: background 0.15s ease;
}

.pkgm-dur > summary:hover {
  background: #eef0f2;
}

.pkgm-dur[open] > summary {
  border-bottom: 1px solid #e8ebef;
}

.pkgm-dur-label {
  min-width: 0;
}

.pkgm-dur-count {
  margin-left: auto;
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-btn-end);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
}

/* single column by default; two only where the detailed cards genuinely
   fit (>=992px). auto columns below that would overflow. */
.pkgm-dur-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 12px;
}

@media (min-width: 992px) {
  .pkgm-dur-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.pkgm-dur-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid #eef0f2;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.pkgm-dur-item:hover,
.pkgm-dur-item:focus {
  background: #fafbfc;
  border-color: rgba(0, 161, 202, 0.4);
  text-decoration: none;
  transform: translateY(-1px);
}

.pkgm-dur-item img {
  width: 88px;
  height: 76px;
  border-radius: 10px;
  object-fit: cover;
  flex: none;
}

.pkgm-dur-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.pkgm-dur-item-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e2a32;
  line-height: 1.3;
}

.pkgm-dur-item:hover .pkgm-dur-item-title {
  color: var(--color-btn-end);
}

.pkgm-dur-item-meta {
  font-size: 12.5px;
  color: #8a939c;
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pkgm-dur-item-meta i {
  color: var(--color-btn-end);
  margin-right: 4px;
}

.pkgm-dur-item-price {
  font-size: 14px;
  font-weight: 700;
  color: #1e3932;
  margin-top: 6px;
}

.pkgm-dur-item-arrow {
  flex: none;
  font-size: 13px;
  color: #c2c8ce;
  transition: transform 0.15s ease, color 0.15s ease;
}

.pkgm-dur-item:hover .pkgm-dur-item-arrow {
  color: var(--color-btn-end);
  transform: translateX(3px);
}

/* ---- Site footer (includes/footer.php) ----
   Clean 4-column standard footer replacing the legacy layout. style.css
   still styles the bare `footer` element (photo background, old paddings)
   so the background/padding are explicitly reset here. */
footer.site-footer {
  background: #14213d;
  padding: 55px 0 0;
  color: rgba(255, 255, 255, 0.75);
}

.site-footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.3fr;
  gap: 36px;
  padding-bottom: 45px;
}

.sf-col h4 {
  color: var(--color-white);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.sf-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sf-col ul li {
  margin: 0 0 9px;
}

.sf-col a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13.5px;
  text-decoration: none;
  transition: color 0.15s ease;
}

.sf-col a:hover,
.sf-col a:focus {
  color: var(--color-white);
  text-decoration: none;
}

.sf-logo {
  height: 40px;
  width: auto;
  margin-bottom: 16px;
}

.sf-brand p {
  font-size: 13.5px;
  line-height: 1.7;
  margin: 0 0 18px;
}

.sf-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  font-size: 15px;
  transition: background 0.15s ease;
}

.sf-social:hover,
.sf-social:focus {
  background: var(--color-btn-end);
  color: var(--color-white);
}

.site-footer address {
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.7;
  margin: 0 0 14px;
}

.sf-contact li {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.sf-contact i {
  font-size: 12px;
  color: var(--color-btn-end);
  flex: none;
}

.site-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 0;
}

.site-footer-bottom .container {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.sf-copy {
  font-size: 12.5px;
  margin: 0;
  flex: 1;
}

.sf-legal {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0;
  padding: 0;
}

.sf-legal a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12.5px;
  text-decoration: none;
}

.sf-legal a:hover,
.sf-legal a:focus {
  color: var(--color-white);
  text-decoration: none;
}

.sf-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.sf-top:hover,
.sf-top:focus {
  background: var(--color-btn-end);
  color: var(--color-white);
}

@media (max-width: 991px) {
  .site-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  footer.site-footer {
    padding-top: 40px;
  }

  .site-footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 32px;
  }

  .sf-col a,
  .sf-brand p,
  .site-footer address {
    font-size: 14px;
  }

  .site-footer-bottom .container {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* ---- Homepage testimonials (includes/home-testimonials.php) ----
   Real client reviews from data/testimonials.php as quote cards in an
   Owl carousel. Same stage-clip/arrow treatment as the day-tours
   carousel (equal-height flexed items, side arrows, contained shadows). */
.home-testimonials {
  background: #f6f7f9;
  padding: 55px 0 55px;
}

.testi-carousel {
  position: relative;
}

.testi-carousel .owl-stage-outer {
  padding: 10px 15px 30px;
  margin: -10px -15px -12px;
}

.testi-carousel .owl-stage {
  display: flex;
}

.testi-carousel .owl-item {
  display: flex;
}

.testi-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 26px 26px 24px;
}

.testi-quote {
  display: block;
  font-size: 26px;
  color: var(--color-btn-end);
  opacity: 0.35;
  margin-bottom: 12px;
}

.testi-text {
  font-size: 14px;
  line-height: 1.7;
  color: #4a5568;
  margin: 0 0 20px;
  /* long reviews trim to a consistent card height; the words stay
     verbatim, just clamped */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.testi-person {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 13px;
  border-top: 1px solid #efefef;
  padding-top: 16px;
}

/* Owl's stylesheet forces width:100% on EVERY img inside a carousel item
   (meant for slide photos) - that stretched this 48px avatar into a
   full-width ellipse. The .owl-item selector matches its specificity so
   the later-loaded rule wins. */
.testi-carousel .owl-item .testi-person img,
.testi-person img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.testi-person > div {
  min-width: 0;
}

.testi-name {
  font-size: 14.5px;
  font-weight: 600;
  color: #1e2a32;
  margin: 0;
}

.testi-trip {
  font-size: 12px;
  color: #8a939c;
  margin: 2px 0 0;
}

.testi-carousel .owl-nav {
  margin: 0;
}

.testi-carousel .owl-nav button.owl-prev,
.testi-carousel .owl-nav button.owl-next {
  position: absolute;
  top: calc(50% - 22px);
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-white);
  color: #1e2a32;
  font-size: 17px;
  margin: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: background 0.15s ease, color 0.15s ease;
}

.testi-carousel .owl-nav button.owl-prev {
  left: -14px;
}

.testi-carousel .owl-nav button.owl-next {
  right: -14px;
}

.testi-carousel .owl-nav button.owl-prev:hover,
.testi-carousel .owl-nav button.owl-next:hover {
  background: var(--color-btn-end);
  color: var(--color-white);
}

.testi-carousel .owl-dots {
  position: relative;
  z-index: 5;
  margin-top: 6px;
}

.testi-carousel .owl-dots .owl-dot {
  cursor: pointer;
}

.testi-carousel .owl-dots .owl-dot span {
  margin: 6px 7px;
}

.testi-carousel .owl-dots .owl-dot.active span {
  background: var(--color-btn-end);
}

@media (max-width: 767px) {
  .home-testimonials {
    padding: 40px 0 45px;
  }

  /* 18 reviews = 18 dots - they wrap to a messy second line on narrow
     screens. Swipe + autoplay make them redundant there; desktop keeps
     them, where one row fits comfortably. Arrows likewise. */
  .testi-carousel .owl-nav,
  .testi-carousel .owl-dots {
    display: none;
  }
}

/* ---- Homepage category cards (includes/home-categories.php) ----
   Design follows the reference: photo top, small-caps eyebrow, serif
   title, meta line, tagline, pill buttons. Clicking lands on /search
   pre-filtered to the package type. */
.home-categories {
  background: #f6f7f9;
  padding: 55px 0 60px;
}

.cat-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 26px;
}

.cat-card {
  background: var(--color-white);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.cat-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.cat-card-media {
  display: block;
}

.cat-card-media img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
}

.cat-card-body {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cat-card-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #b08d3e;
  margin: 0 0 8px;
}

.cat-card-title {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 6px;
}

.cat-card-title a {
  color: #1e2a32;
  text-decoration: none;
}

.cat-card-title a:hover {
  color: var(--color-btn-end);
}

.cat-card-meta {
  font-size: 14px;
  color: #666666;
  margin: 0 0 10px;
}

/* clickable duration chips - land on /search pre-filtered to this
   package type AND that trip length */
.cat-card-durations {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 2px 0 14px;
}

.cat-chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-btn-end);
  border: 1px solid rgba(0, 161, 202, 0.45);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.cat-chip:hover,
.cat-chip:focus {
  background: var(--color-btn-end);
  color: var(--color-white);
  text-decoration: none;
}

.cat-card-points {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.cat-card-points li {
  font-size: 14px;
  line-height: 1.5;
  color: #4a5568;
  margin: 0 0 10px;
  padding-left: 16px;
  position: relative;
}

.cat-card-points li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  color: #4a5568;
}

.cat-card-divider {
  border: none;
  border-top: 1px solid #e8e8e8;
  margin: 8px 0 16px;
}

.cat-card-price-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #b08d3e;
  margin: 0 0 4px;
}

.cat-card-price {
  font-size: 28px;
  font-weight: 700;
  color: #1e2a32;
  margin: 0 0 2px;
}

.cat-card-price-note {
  font-size: 13px;
  color: #666666;
  margin: 0 0 18px;
}

.cat-card-actions {
  margin-top: auto;
  display: flex;
  gap: 10px;
}

.cat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cat-btn:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.cat-btn-solid {
  color: var(--color-white);
  background: #1e3932;
}

.cat-btn-solid:hover,
.cat-btn-solid:focus {
  color: var(--color-white);
  background: #162b26;
  box-shadow: 0 6px 18px rgba(30, 57, 50, 0.35);
}

.cat-btn-outline {
  color: #444444;
  border: 1px solid #cccccc;
  background: transparent;
}

.cat-btn-outline:hover,
.cat-btn-outline:focus {
  color: var(--color-btn-end);
  border-color: var(--color-btn-end);
}

@media (max-width: 767px) {
  .home-categories {
    padding: 40px 0 45px;
  }

  .cat-card-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Compact variant of the standard card (search results) ----
   Same structure/classes as the homepage cards; .pkg-card on the root is
   only the JS hook search-page.js filters by. */
.cat-card-sm .cat-card-media img {
  height: 165px;
}

.cat-card-sm .cat-card-body {
  padding: 15px 17px 17px;
}

.cat-card-sm .cat-card-eyebrow {
  font-size: 11px;
  margin-bottom: 6px;
}

.cat-card-sm .cat-card-title {
  font-size: 17px;
}

.cat-card-sm .cat-card-meta {
  font-size: 13px;
  margin-bottom: 8px;
}

.cat-card-sm .cat-card-points li {
  font-size: 13px;
  margin-bottom: 7px;
}

.cat-card-sm .cat-card-divider {
  margin: 6px 0 12px;
}

.cat-card-sm .cat-card-price-label {
  font-size: 11px;
}

.cat-card-sm .cat-card-price {
  font-size: 22px;
}

.cat-card-sm .cat-card-price-note {
  font-size: 12px;
  margin-bottom: 14px;
}

.cat-card-sm .cat-btn {
  font-size: 12px;
  padding: 10px 16px;
}

/* ---- Mobile search page: sidebar becomes a bottom-sheet behind a
   full-width Filters button, matching the reference pattern. Filters
   still apply live; Apply just closes the sheet. */
@media (max-width: 991px) {
  .search-page-layout {
    flex-direction: column;
    /* the base align-items: flex-start is for the ROW layout (top-aligns
       the sidebar). In column mode the cross axis is horizontal, so
       flex-start shrink-wraps children to content width and hangs them
       left - the results area must stretch full width here. */
    align-items: stretch;
  }

  .search-filters-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 22px;
    padding: 14px;
    border: none;
    border-radius: var(--radius-card);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-white);
    cursor: pointer;
    background: var(--color-btn-start);
    background: linear-gradient(135deg, var(--color-btn-start) 0%, var(--color-btn-end) 100%);
    box-shadow: var(--shadow-card);
  }

  .search-filters {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 82vh;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
    z-index: 1070;
    flex-direction: column;
  }

  .search-filters.filters-open {
    display: flex;
  }

  .search-filters-backdrop.filters-open {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1069;
  }

  .search-filters-head {
    flex: none;
  }

  .search-filters-head span {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  #searchFiltersClose {
    display: block;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    color: var(--color-white);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }

  /* the groups scroll inside the sheet; the head and Apply stay pinned */
  .search-filter-group {
    overflow-y: visible;
  }

  .search-filters-sheet-body,
  .search-filter-group.scrollable {
    max-height: none;
  }

  .search-filters {
    overflow-y: auto;
  }

  .search-filters-apply {
    display: block;
    position: sticky;
    bottom: 0;
    padding: 12px 18px;
    background: var(--color-white);
    border-top: 1px solid #eeeeee;
    margin-top: auto;
  }

  .search-filters-apply button {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: var(--radius-card);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-white);
    cursor: pointer;
    background: var(--color-btn-start);
    background: linear-gradient(135deg, var(--color-btn-start) 0%, var(--color-btn-end) 100%);
  }
}

@media (max-width: 767px) {
  .banner .banner-contents {
    bottom: 8%;
    padding: 0 12px;
  }

  .hero-search-tagline {
    font-size: 14px;
    margin-bottom: 10px;
  }

  /* the banner images render at natural aspect ratio, which on a narrow
     screen is only ~150px tall - the bottom-anchored search bar then
     rides up underneath the fixed nav. Give the hero real height so
     the bar always clears the nav. */
  .banner .carousel-inner > .item > img {
    min-height: 430px;
    object-fit: cover;
  }

  /* Native form controls never go below 16px on mobile: the OS picker
     inherits the select's font size (a 12px select = unreadably small
     native dropdown), and iOS force-zooms the page on focusing any
     control under 16px. This is the platform-wide convention. */
  select,
  input,
  textarea {
    font-size: 16px;
  }

  /* homepage hero bar stays HORIZONTAL on mobile (hero space is
     precious) - compact spacing, but type stays at readable sizes;
     long select values ellipsize rather than shrinking the font */
  .hero-search-bar {
    padding: 6px;
  }

  .hero-search-field {
    gap: 7px;
    padding: 5px 7px;
  }

  .hero-search-icon {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .hero-search-field label {
    font-size: 13.5px;
  }

  .hero-search-field select {
    font-size: 16px;
  }

  .hero-search-divider {
    margin: 0 2px;
    height: 40px;
  }

  .hero-search-btn {
    width: 46px;
    height: 46px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    font-size: 16px;
    margin-left: 5px;
  }

  .hero-search-btn span {
    display: none;
  }

}

/* ---- Section backgrounds: reverted to the exact original blue/cyan
   gradient, now expressed via variables instead of hardcoded rgba(). Same
   colors, same stops, same angle as the original style.css rule - visual
   output is unchanged, but the color values now live in theme.css for
   whenever we start the section-by-section redesign. ---- */
.most-selling,
.honeymoon {
  background: var(--color-section-start);
  background: -moz-linear-gradient(left, var(--color-section-start) 0%, var(--color-section-mid) 50%, var(--color-section-end) 100%);
  background: -webkit-linear-gradient(left, var(--color-section-start) 0%, var(--color-section-mid) 50%, var(--color-section-end) 100%);
  background: linear-gradient(to right, var(--color-section-start) 0%, var(--color-section-mid) 50%, var(--color-section-end) 100%);
}

/* ---- Card treatment ----
   .package-block has a deliberately-bleeding absolutely-positioned duration
   badge (hangs outside the container's normal box on purpose in the
   original design), so overflow:hidden on the CONTAINER clips it. Round
   the actual image corners instead, and keep shadow/lift on the container
   without clipping anything.
   .honeymoon-img is a different case: it's a full-bleed image pinned to
   the section's edge (position:absolute; bottom:0; left:0), not a card -
   rounding its corners exposes the background through the curved gap, so
   it intentionally stays square. */
.most-selling .selling-cover {
  border-radius: var(--radius-card);
}

/* The honeymoon photo's right edge is a hard cutoff baked into the source
   PNG itself (verified: image content touches its own canvas edge, this
   isn't CSS clipping). Fade it into the section background instead of
   letting it stop abruptly, so the cutoff reads as intentional. */
.honeymoon-img {
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
}

/* Corrected fix (3rd attempt). padding-bottom was the wrong primitive: it's
   ADDITIVE to the container's existing content height (the paragraph
   text), not a "minimum total height" cap. At wide screens the text wraps
   to very few lines (short natural height), so padding-bottom stacked a
   full image-equivalent gap ON TOP of that short text - way more space
   than needed. min-height is the right tool: it caps the total at "at
   least this tall" without adding to whatever the text already needs.

   Bootstrap's .container width is FIXED per breakpoint (750/970/1170px),
   not fluid, so a fixed min-height per breakpoint is actually correct
   here (not fragile) as long as the numbers are computed against the real
   container width, not guessed. Values below = (container - 30px column
   padding) * 47% image width * (467/608) aspect ratio, plus a few px
   buffer - and the 992-1200 range is verified directly against the
   devtools reading provided: 940px inner width needing 339px height. */
@media (min-width: 768px) and (max-width: 992px) {
  .honeymoon .honeymoon-content {
    min-height: 265px;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  .honeymoon .honeymoon-content {
    min-height: 345px;
  }
}

@media (min-width: 1200px) {
  .honeymoon .honeymoon-content {
    min-height: 415px;
  }
}

@media (min-width: 768px) {
  .honeymoon-img {
    bottom: 0;
    left: 0;
  }
}

.most-selling .package-block {
  transition: transform 0.25s ease;
}

.most-selling .package-block:hover {
  transform: translateY(-4px);
}

/* north-indian cards and testimonials have no bleeding children, safe to
   round + clip normally. */
.north-indian .north-image {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.north-indian .north-image:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.client-says .testmonial-content {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* soften the flat 50% black overlay on package images - a subtle
   bottom-up fade reads as more modern and keeps the photo visible */
.most-selling .selling-img::before {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.05) 55%, rgba(0, 0, 0, 0) 100%);
  border-radius: var(--radius-card);
}

/* the old light-blue divider under selling-second/selling-third was tuned
   for the previous cyan background and clashes with the new teal */
.most-selling .selling-second,
.most-selling .selling-third {
  border-bottom-color: rgba(255, 255, 255, 0.3);
}

/* ---- Section titles: slightly more modern weight/spacing ---- */
.section-title h2 {
  letter-spacing: 0.3px;
}

/* ---- Buttons / CTAs: pill shape, teal brand color, hover lift ---- */
.most-selling .selling-more a,
.honeymoon .explore a {
  border-radius: var(--radius-pill);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.honeymoon .explore a:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

/* ---- WhatsApp floating action button (new, site-wide via footer.php) ---- */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  background: var(--color-whatsapp);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  z-index: 999;
  transition: transform 0.2s ease, background 0.2s ease;
}

.whatsapp-float:hover,
.whatsapp-float:focus {
  background: var(--color-whatsapp-dark);
  transform: scale(1.08);
  color: var(--color-white);
}

.whatsapp-float i {
  color: var(--color-white);
  font-size: 28px;
}

/* ---- Mobile bottom action bar: always-visible one-tap contact
   (replaces the floating WhatsApp button on phones, where it was easy
   to miss/covered). Fixed white bar, three labeled actions, safe-area
   aware for gesture-nav phones. Hidden on desktop, where the FAB
   remains. ---- */
.mobile-action-bar {
  display: none;
}

@media (max-width: 767px) {
  .whatsapp-float {
    display: none;
  }

  .mobile-action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    display: flex;
    gap: 8px;
    background: var(--color-white);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.14);
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  }

  /* three solid pill buttons - unmistakably tappable */
  .mab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-white);
    border-radius: var(--radius-pill);
  }

  .mab-btn:hover,
  .mab-btn:focus,
  .mab-btn:active {
    color: var(--color-white);
    text-decoration: none;
  }

  .mab-btn i {
    font-size: 15px;
  }

  .mab-call {
    background: var(--color-btn-start);
    background: linear-gradient(135deg, var(--color-btn-start) 0%, var(--color-btn-end) 100%);
  }

  .mab-enquire {
    background: #14213d;
  }

  .mab-whatsapp {
    background: var(--color-whatsapp);
  }

  /* the fixed bar must never cover page content or the footer's end */
  body {
    padding-bottom: calc(66px + env(safe-area-inset-bottom));
  }

  /* the banner's slide dots land right under the search bar on mobile -
     pure clutter at this size, and swiping still works without them */
  .banner .carousel-indicators {
    display: none;
  }
}

/* ---- Mobile-first refinements (site currently has thin breakpoint coverage) ---- */
@media (max-width: 767px) {
  .section-title h2 {
    font-size: 22px;
  }

  .most-selling .package-block {
    margin-bottom: 20px;
  }

  .north-indian .north-image,
  .client-says .testmonial-content {
    margin: 0 6px;
  }
}