/*
 * 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.
 */

/* smooth in-page scrolling for hash links (e.g. nav/footer "Why us" -> the
   homepage Why-Us section) */
html {
  scroll-behavior: smooth;
}

/* ---- Link colour reset ----
   bootstrap.min.css sets `a { color: #337ab7 }` - its default blue. That one
   declaration was painting ~240 elements across the site (nav drawer, tile
   captions, inline links), which is where the "blue everywhere" came from:
   not our palette, but Bootstrap's default leaking through everywhere we
   never set a colour explicitly. Anchored here rather than by editing the
   vendor file, so a Bootstrap upgrade can't quietly reintroduce it. */
a {
  color: var(--ui-accent);
}

a:hover,
a:focus {
  color: var(--ui-accent-dark);
}

/* ---- Global typeface: --font-primary 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;
    /* full-height panel (standard drawer pattern): edge-to-edge so the page
       never peeks below it; scrolls internally when the menu is taller than
       the screen. !important beats Bootstrap 3's @media(min-width:768px)
       rule `.navbar-collapse.collapse { height:auto!important;
       overflow:visible!important }`. */
    height: 100vh !important;
    width: 82%;
    max-width: 320px;
    background: var(--ui-band);
    margin: 0;
    padding: 0 0 20px 0;
    max-height: none;
    overflow-y: auto !important;
    -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;
    /* pinned to the top of the scrollable drawer so the logo + close stay
       reachable while the menu scrolls; opaque bg (drawer colour) keeps the
       scrolling items from showing through */
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ui-band);
    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: var(--color-white);
    font-size: 30px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
  }

  .nav-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* height:100vh instead of bottom:0 because .travel-bar's backdrop-filter
       (glassy nav) makes it a containing block for this fixed child, so
       bottom:0 would only reach the ~90px navbar height; a vh height is
       viewport-relative regardless of the containing block */
    height: 100vh;
    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;
    /* override legacy style.css `width:37%` (its old horizontal-nav sizing)
       which squeezed the drawer pill to ~113px and wrapped the label to 3
       lines; size the pill to its text on a single line instead */
    width: auto;
    white-space: nowrap;
    margin: 12px 20px;
    padding: 8px 18px;
  }

  /* ---- 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: var(--color-white);
    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;
  }

  /* the "Explore" mega panel is a desktop-only, space-saving construct; in
     the mobile drawer the categories are listed directly as .nav-drawer-cat
     rows (each expandable to its durations), so hide the mega here */
  .nav-mega {
    display: none;
  }

  /* .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: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px 13px 26px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    transition: color 0.15s ease;
  }

  /* teal arrow marker, mirroring the desktop mega panel */
  .nav-submenu li a::before {
    content: '\2192'; /* → */
    color: rgb(0, 196, 155);
    font-size: 14px;
  }

  .nav-submenu li a:hover,
  .nav-submenu li a:focus {
    color: var(--color-white);
  }
}

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

  /* vertically centre the logo in the bar: the 41px logo had only 7px brand
     padding (vs the nav links' 24px top/bottom), so the top-aligned floated
     brand sat high with a big gap beneath it. Balanced padding + display:block
     (kills the inline-image baseline gap) centres it. */
  .travel-bar .navbar-brand {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .travel-bar .navbar-brand img {
    display: block;
  }
}

/* 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 links never underline (Bootstrap's a:hover adds one); this base rule
   (0,2,1) outranks a:hover (0,1,1) in every state, across breakpoints */
.travel-bar .navbar-nav a {
  text-decoration: none;
}

/* keep nav links white when focused/active - Bootstrap's
   .navbar-default .navbar-nav>li>a:focus turns them #333 (dark), which made
   a clicked "Explore" go dark on our dark bar. Our :hover override didn't
   cover :focus/:active. Same specificity as Bootstrap's rule but later in
   source order, so it wins. */
.travel-bar .navbar-nav > li > a:focus,
.travel-bar .navbar-nav > li > a:active,
.travel-bar .navbar-nav .nav-expand-toggle:focus,
.travel-bar .navbar-nav .nav-expand-toggle:active {
  color: var(--color-white);
}

/* no focus ring for mouse/click users; keyboard focus (:focus-visible) still
   shows a ring for accessibility */
.travel-bar .navbar-nav a:focus:not(:focus-visible) {
  outline: none;
}

/* ---- Desktop mega-menu ("Explore"): hover/focus opens a dropdown panel
   listing the tour categories in a multi-column grid, in the site's dark
   glassy style. On mobile the same items render as an accordion (see the
   max-width:1199px block above). Config: data/nav_config.php. ---- */
@media (min-width: 1200px) {
  /* the per-category drawer rows are mobile-only; desktop uses the mega */
  .travel-bar .nav-drawer-cat {
    display: none;
  }

  .travel-bar .nav-mega {
    position: relative;
  }

  /* carets are hidden site-wide on desktop; the mega trigger keeps its own */
  .travel-bar .nav-mega > .nav-expand-toggle .nav-caret {
    display: inline-block !important;
    margin-left: 5px;
    font-size: 10px;
    transition: transform 0.2s ease;
  }

  .travel-bar .nav-mega:hover > .nav-expand-toggle .nav-caret,
  .travel-bar .nav-mega:focus-within > .nav-expand-toggle .nav-caret {
    transform: rotate(180deg);
  }

  .travel-bar .nav-mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    /* transparent bridge so the cursor can travel from the trigger to the
       panel without crossing a dead gap that would close it */
    padding-top: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 1080;
  }

  .travel-bar .nav-mega:hover .nav-mega-panel,
  .travel-bar .nav-mega:focus-within .nav-mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* the visible panel box (the grid itself carries the glass skin) */
  .travel-bar .navbar-nav .nav-mega-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 2px 30px;
    margin: 0;
    padding: 18px 22px 20px;
    list-style: none;
    background: rgba(11, 30, 25, 0.98);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
  }

  .travel-bar .navbar-nav .nav-mega-grid > li {
    display: block;
    width: auto;
    margin: 0;
    border: 0;
  }

  .travel-bar .navbar-nav .nav-mega-grid > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 6px;
    font-size: 14.5px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.86);
    white-space: nowrap;
    /* beat Bootstrap's a:hover{text-decoration:underline} in every state */
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    transition: color 0.15s ease, padding-left 0.15s ease;
  }

  .travel-bar .navbar-nav .nav-mega-grid > li > a::before {
    content: '\2192'; /* → */
    color: rgb(0, 196, 155);
    font-size: 15px;
    transition: transform 0.15s ease;
  }

  .travel-bar .navbar-nav .nav-mega-grid > li > a:hover,
  .travel-bar .navbar-nav .nav-mega-grid > li > a:focus {
    color: var(--color-white);
    padding-left: 12px;
  }

  .travel-bar .navbar-nav .nav-mega-grid > li > a:hover::before {
    transform: translateX(3px);
  }
}

/* ---- 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 var(--ui-ink) topbar inside paints over its strip
   of it, same as before. */
/* frosted-glass navbar: a translucent dark tint + backdrop blur so the
   scenery behind reads through softly instead of as a flat see-through
   panel. A hairline bottom border defines the edge. */
.travel-bar {
  background: rgba(14, 22, 38, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* the topbar strip is solid var(--ui-ink) in the legacy CSS, which breaks the
   glass at the very top - make it a subtle translucent darkening so the
   blurred scenery reads through the whole navbar */
.travel-bar .topbar {
  background: rgba(0, 0, 0, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* scrolled state (JS adds .offset): deepen the tint for a solid, readable
   bar once content scrolls under it, keeping the glass blur */
.travel-bar.offset {
  background: rgba(10, 16, 28, 0.9);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

/* NOTE: no height/padding transition on the navbar - the sticky search bars
   pin themselves to the live navbar height on each scroll frame, and an
   animated height would read mid-transition and leave the bar mis-aligned
   (tagline clipped under the navbar). The size change snaps instead. */

/* compact navbar once scrolled (.offset): smaller logo + tighter padding to
   save vertical space. The sticky search bars measure the navbar height live,
   so they pin flush beneath the shrunk bar. */
.travel-bar.offset .navbar-brand {
  padding-top: 12px;
  padding-bottom: 12px;
}

.travel-bar.offset .navbar-brand img {
  height: 26px;
}

@media (min-width: 1200px) {
  .travel-bar.offset .navbar-brand {
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .travel-bar.offset .navbar-brand img {
    height: 30px;
  }

  .travel-bar.offset .navbar-nav > li > a {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  /* the "Kerala Tour Guide" pill (17px margins) and the 63px call-circle are
     the tallest right-side items - shrink them too or they keep the bar tall */
  .travel-bar.offset .navbar-nav li .kerala {
    margin-top: 6px;
    margin-bottom: 6px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .travel-bar.offset .contact-num {
    margin-top: 0;
    margin-bottom: 0;
  }

  .travel-bar.offset .contact-num img {
    height: 38px;
    width: 38px;
  }
}

/* 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. */
/* soft dark tint rising from the bottom of the hero - grounds the tagline
   and search bar so white text reads clearly over bright banner photos.
   Sits above the carousel image (z 1) but below the dots (15) and the
   search bar (20). */
.banner {
  position: relative;
}

/* FIXED height, not just a floor. The old min-height-only rule let each
   slide's own native aspect ratio decide its height past ~1075px wide -
   harmless while all three source images shared one aspect ratio (1920x767),
   but the current banner images do NOT: theyyam.png is 1376x768 (aspect
   0.558) while thoni/lighthouse/glider.png are 1584x672 (aspect 0.424). With
   only a floor, theyyam rendered visibly taller than the other three on
   desktop - each slide free-floated to width x its own ratio.
   `height` (with object-fit:cover to crop) makes every slide's box identical
   regardless of the source image's own dimensions; clamp() keeps the same
   viewport-scaling behavior the old min-height was providing. */
.banner .carousel-inner > .item > img {
  height: clamp(430px, 42vw, 640px);
  object-fit: cover;
}

.banner::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  background: linear-gradient(to top, rgba(2, 18, 12, 0.72) 0%, rgba(2, 18, 12, 0.42) 42%, rgba(2, 18, 12, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

.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;
}

/* Sticky hero search: once the hero bar scrolls up under the navbar, JS
   (index.php) adds .hero-search-stuck and sets `top` to the live navbar
   height, pinning the bar to the top. The inner container keeps the same
   width as the hero, so only the vertical framing changes. */
.banner .banner-contents.hero-search-stuck {
  position: fixed;
  top: 0; /* JS overrides with the measured navbar height */
  bottom: auto;
  z-index: 1029; /* just under the fixed navbar (Bootstrap 1030) */
  padding: 7px 0 8px;
  /* frosted glass so the tagline reads over any content scrolling beneath */
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  animation: heroSearchDrop 0.28s ease;
}

/* frozen bar: compact, dark tagline (the bar is light) above the pill */
.hero-search-stuck .hero-search-tagline {
  color: var(--ui-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin: 0 0 5px;
  text-shadow: none;
}

/* shrink the search pill while frozen */
.hero-search-stuck .hero-search-bar {
  padding: 5px 5px 5px 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

.hero-search-stuck .hero-search-field {
  gap: 9px;
  padding: 4px 10px;
}

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

.hero-search-stuck .hero-search-field label {
  font-size: 12.5px;
  margin: 0;
}

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

.hero-search-stuck .hero-search-divider {
  height: 30px;
}

.hero-search-stuck .hero-search-btn {
  height: 42px;
  padding: 0 18px;
  font-size: 13px;
}

/* mobile: the button is an icon-only circle - keep it round when shrunk */
@media (max-width: 767px) {
  .hero-search-stuck .hero-search-btn {
    width: 42px;
    padding: 0;
  }
}

@keyframes heroSearchDrop {
  from { transform: translateY(-14px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Sticky search bar on the /search page: same behaviour as the homepage hero
   bar, but this bar is in normal flow, so JS also drops in a spacer to stop
   the results jumping when it detaches. */
#searchPageBar.hero-search-stuck {
  position: fixed;
  top: 0; /* JS sets the live navbar height */
  left: 0;
  right: 0;
  max-width: none;
  z-index: 1029;
  padding: 8px 15px 9px;
  /* frosted glass, matching the homepage sticky bar */
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  animation: heroSearchDrop 0.28s ease;
}

#searchPageBar.hero-search-stuck .hero-search-bar {
  max-width: 720px;
  margin: 0 auto;
}

.search-bar-spacer {
  display: none;
}

.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 12px rgba(0, 0, 0, 0.7);
}

.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(10, 107, 79, 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(10, 107, 79, 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: var(--ui-accent-soft);
}

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

.hero-search-field label {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: var(--ui-ink);
  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: var(--ui-muted);
  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(10, 107, 79, 0.45);
}

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

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

/* ---- /search results page ---- */
.search-page {
  background: var(--ui-surface-alt);
  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 var(--ui-line);
}

.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: var(--ui-ink);
}

.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: var(--ui-muted);
  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: var(--ui-muted);
  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: var(--ui-muted);
  padding: 50px 0;
}

.search-results-empty p {
  margin: 0 0 18px;
}

.search-clear-all {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 26px;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.6px;
  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: 0 6px 18px rgba(10, 107, 79, 0.35);
  transition: transform 0.15s ease;
}

.search-clear-all:hover {
  transform: translateY(-2px);
}

/* ---- 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;
  /* deep brand teal rather than the bright cyan --color-btn-end: that cyan
     sits at ~2.8:1 on the light section backgrounds and reads as washed out.
     One shared eyebrow colour across every light section; the dark
     .home-browse band overrides it below. */
  color: var(--ui-accent-dark);
  margin: 0 0 10px;
}

.modern-heading h2 {
  font-size: 34px;
  font-weight: 700;
  color: var(--ui-ink);
  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;
  /* was var(--ui-muted) - too faint to read on the var(--ui-surface-alt) section washes, especially
     at the 14px mobile size */
  color: var(--ui-muted);
  margin: 0;
}

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

  .modern-heading h2 {
    font-size: 24px;
    /* desktop 18px/18px around the gradient rule is most of the title
       block's height on a phone - roughly halve the whole block */
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  .modern-heading-eyebrow {
    font-size: 11.5px;
    letter-spacing: 2px;
    margin-bottom: 5px;
  }

  .modern-heading h2::after {
    width: 44px;
    height: 3px;
  }

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

/* ---- Tour card (includes/home-day-tours.php) ----
   Frameless by design: no border, no shadow, no panel. A rounded photo with
   text beneath it, sitting directly on the page. Removing the container is
   what makes a row of these read as editorial rather than as a grid of
   boxes, and it lets the photography carry the page. The whole card is one
   anchor, so there are no competing buttons to dilute the click target. */
.tour-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  /* contained variant: hairline outline, clipped corners, tinted body. The
     outline does the separating so the shadow can stay almost invisible at
     rest and only appear on hover. */
  border: 1px solid var(--ui-line, var(--ui-line));
  border-radius: 16px;
  overflow: hidden;
  background: var(--ui-surface, var(--color-white));
  transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

@media (hover: hover) {
  .tour-card:hover {
    border-color: var(--ui-line-hover);
    box-shadow: 0 10px 26px rgba(16, 24, 32, 0.12);
    transform: translateY(-3px);
  }
}

/* keyboard users get the same emphasis as hover */
.tour-card:focus-within {
  border-color: var(--ui-line-hover);
  box-shadow: 0 10px 26px rgba(16, 24, 32, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .tour-card {
    transition: none;
  }

  .tour-card:hover {
    transform: none;
  }
}

/* The whole card is clickable via a stretched pseudo-element rather than by
   wrapping everything in one <a>. That keeps the wishlist button a real
   sibling button - a <button> nested inside an <a> is invalid and behaves
   unpredictably - while the card still reads as a single target. */
.tour-card-link {
  text-decoration: none;
  color: inherit;
}

.tour-card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.tour-card-link:hover,
.tour-card-link:focus {
  text-decoration: none;
  color: inherit;
}

/* wishlist toggle sits above the stretched link */
.tour-card-fav {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--color-white);
  font-size: 20px;
  cursor: pointer;
  /* no chip behind it, per the reference - the drop shadow is what keeps the
     white outline legible over pale sky and sand in the photos */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
  transition: transform 0.15s ease, color 0.15s ease;
}

.tour-card-fav:focus-visible {
  outline: 2px solid var(--ui-ink);
  outline-offset: 2px;
}

@media (hover: hover) {
  .tour-card-fav:hover {
    transform: scale(1.12);
  }
}

/* saved state: the solid heart is swapped in by JS toggling this class */
.tour-card-fav.is-saved {
  color: var(--ui-favorite);
}

.tour-card-fav .fa-heart {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .tour-card-fav {
    transition: none;
  }
}

/* the card clips its own corners now, so the media sits flush */
.tour-card-media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ui-surface-alt);
}

.tour-card-media img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

@media (hover: hover) {
  .tour-card:hover .tour-card-media img {
    transform: scale(1.04);
  }
}

/* status flag, top-left over the photo */
.tour-card-flag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--ui-accent-soft);
  color: var(--ui-accent-ink);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

/* tinted body separates the text block from the photo without a divider rule,
   and gives the card a finished, filled feel rather than text floating on
   white */
.tour-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 15px 16px 16px;
  /* white, not a tint: the card should be one continuous white object under
     the photo. The section wash behind it is what gives it an edge. */
  background: var(--color-white);
}

.tour-card-meta {
  display: block;
  font-size: 13px;
  color: var(--ui-muted);
  margin-bottom: 12px;
}

/* leading icons get a fixed box so the text after them starts at the same x
   on every row - glyph widths differ (the pin is ~8px, the star ~14px), which
   otherwise leaves the location and rating lines visibly out of step */
.tour-card-meta i {
  font-size: 11px;
  color: var(--ui-faint);
  margin-right: 4px;
}

/* rating and price share one baseline row at the foot of the card, pushed to
   the bottom so cards of differing title lengths still line up */
.tour-card-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}

.tour-card-rating {
  font-size: 13.5px;
  color: var(--ui-ink);
  white-space: nowrap;
}

.tour-card-rating i {
  margin-right: 4px;
}

.tour-card-rating i {
  color: var(--ui-positive);
  font-size: 12.5px;
}

.tour-card-rating strong {
  font-weight: 700;
}

.tour-card-reviews {
  color: var(--ui-muted);
  font-weight: 400;
}

.tour-card-title {
  display: block;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.34;
  color: var(--ui-ink);
  margin-bottom: 9px;
  /* long SEO-oriented titles clamp instead of pushing the price out of line
     with the neighbouring cards */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (hover: hover) {
  .tour-card:hover .tour-card-title {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

.tour-card-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--ui-ink);
  white-space: nowrap;
}

/* "from" is a qualifier, not part of the figure - it stays small and light so
   the number reads cleanly at a glance */
.tour-card-from {
  font-size: 13px;
  font-weight: 400;
  color: var(--ui-muted);
  margin-right: 2px;
}

.tour-card-note {
  display: block;
  font-size: 12px;
  color: var(--ui-faint);
}

@media (max-width: 767px) {
  .tour-card-media img {
    height: 200px;
  }

  .tour-card-title {
    font-size: 15.5px;
  }
}

/* ---- 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 {
  /* warm off-white so the white cards read as objects sitting on a surface,
     rather than dissolving into a white page */
  background: var(--ui-page-wash);
  padding: 55px 0 55px;
  /* Contain the carousel's shadow breakout locally.
     .day-carousel .owl-stage-outer extends 15px past the container each side
     (padding + negative margin, so card shadows aren't clipped). That lands
     exactly on the viewport edge, leaving zero headroom - on a device with a
     fractional viewport or DPR it rounds past and produces a horizontal
     scroll. body has overflow-x:hidden, but that is unreliable on iOS Safari,
     so the breakout is clipped at its own section instead of trusting it. */
  overflow-x: hidden;
}

/* phones: tighten the top pad so the cards follow the duration list closely */
@media (max-width: 767px) {
  .home-day-tours {
    padding: 24px 0 30px;
  }

  /* the day-tour card ran to ~648px on a 390px viewport - taller than the
     screen, so a single card never fit and the row read as a wall. Trim the
     photo and the internal padding to bring it under the fold; the title
     keeps its size, only the supporting parts shrink. */
  .day-card .cat-card-media img {
    height: 150px;
  }

  .day-card .cat-card-body {
    padding: 14px 16px 16px;
  }

  .day-card .cat-card-eyebrow {
    font-size: 10.5px;
    letter-spacing: 1.5px;
    margin-bottom: 5px;
  }

  .day-card .cat-card-meta {
    font-size: 13px;
    margin-bottom: 7px;
  }

  .day-card .cat-card-points {
    margin-top: 3px;
  }

  .day-card .cat-card-points li {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 5px;
  }

  .day-card .cat-card-divider {
    margin: 6px 0 10px;
  }

  .day-card .cat-card-price-note {
    margin-bottom: 10px;
  }

  .day-card .cat-btn {
    padding: 9px 14px;
    font-size: 13px;
  }
}

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

/* homepage "Explore Our Tour Packages" cards run a touch smaller so one more
   fits per row (5 across on a desktop container vs 4); auto-fill still drops
   to fewer columns on tablet/mobile */
.home-categories .day-tile-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

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

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

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

.day-carousel .tour-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: var(--ui-ink);
  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,
  /* the homepage override (.home-categories .day-tile-grid, 0,2,0) otherwise
     beats the plain .day-tile-grid rule here and keeps its auto-fill single
     column on phones - match its specificity to force 2 columns */
  .home-categories .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. */
/* Scrim weighted to the bottom only. The old version started at 35% opacity
   at the very top, dimming the whole photograph to carry text that only sits
   in the bottom third. Now the upper half is left essentially untouched so
   the image stays bright, and the darkening ramps in just above the title.
   Legibility is shared with the text-shadow below rather than paid for
   entirely in scrim. */
.pkg-hero-overlay {
  background: linear-gradient(to bottom,
    rgba(8, 16, 24, 0) 0%,
    rgba(8, 16, 24, 0.04) 40%,
    rgba(8, 16, 24, 0.34) 68%,
    rgba(8, 16, 24, 0.76) 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: var(--ui-line-hover);
}

.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;
}

/* category crumb: its own flex item (separator + link together) so it can
   be dropped as one unit on narrow screens without leaving an orphaned
   slash behind */
.pkg-breadcrumb-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.pkg-breadcrumb-cat a {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Home / Packages / {category} / {tour title} comfortably overflowed a
   phone screen, pushing the actual page title (the crumb that matters
   most here) off-screen entirely. The category link is already in the
   BreadcrumbList schema for Google either way, so dropping it from the
   visible trail below tablet width costs nothing but width. */
@media (max-width: 767px) {
  .pkg-breadcrumb-cat {
    display: none;
  }
}

/* ---- Sticky tour title (includes/package-hero.php) ----
   Pins directly under the sticky breadcrumb so the tour name stays on screen
   through the itinerary. Collapsed to zero height until JS adds .is-visible
   (once the h1 scrolls out), so it costs no vertical space at the top of the
   page where the h1 is already visible. `top` is set in JS alongside the
   breadcrumb's, since the navbar height is dynamic. */
.pkg-title-bar {
  position: sticky;
  top: var(--pkg-title-top, 129px);
  z-index: 899;
  /* Pale mint, not white. Stacked directly under the white breadcrumb bar a
     white strip read as one continuous slab with the tour name printed twice.
     The tint separates the two and marks this as the persistent context bar
     rather than more page chrome. */
  background: var(--ui-band-light);
  border-bottom: 1px solid var(--ui-band-light-line);
  box-shadow: 0 4px 14px rgba(11, 36, 29, 0.09);
  /* hidden state: no height, no paint, but still in flow for the sticky
     calculation to stay stable when it flips visible */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.22s ease, opacity 0.22s ease;
}

.pkg-title-bar.is-visible {
  max-height: 96px;
  opacity: 1;
  visibility: visible;
}

.pkg-title-bar > .container {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.pkg-title-bar-text {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ui-ink);
  line-height: 1.25;
  min-width: 0;
  /* wrap to a second line rather than truncate - the tour name is the point */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pkg-title-bar-meta {
  flex: none;
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--ui-accent-dark);
  white-space: nowrap;
}

@media (max-width: 575px) {
  .pkg-title-bar-text {
    font-size: 14.5px;
  }

  .pkg-title-bar-meta {
    font-size: 11px;
  }
}

/* users who prefer reduced motion get the bar without the slide/fade */
@media (prefers-reduced-motion: reduce) {
  .pkg-title-bar {
    transition: none;
  }
}

.pkg-breadcrumb-current {
  color: var(--ui-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* duration pill: a frosted badge so it reads clearly over any photo,
   instead of low-contrast cyan text floating on a busy background */
.pkg-hero-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-white);
  background: rgba(10, 107, 79, 0.85);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-pill);
  padding: 7px 16px;
  margin: 0 0 16px;
}

.pkg-hero-title {
  color: var(--color-white);
  font-size: 52px;
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 18px;
  max-width: 820px;
  /* carries legibility that the scrim no longer provides: a tight dark halo
     reads against a bright sky without darkening the photograph itself */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 18px rgba(0, 0, 0, 0.45);
}

.pkg-hero-locations {
  /* full white rather than 90%: the lighter scrim leaves less headroom, and
     a translucent white is the first thing to disappear over a bright sky */
  color: var(--color-white);
  font-size: 17px;
  margin: 0 0 36px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.pkg-hero-locations i {
  color: var(--ui-accent-on-dark);
  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(10, 107, 79, 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: var(--ui-surface-alt);
  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: var(--ui-muted);
}

/* 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: var(--ui-ink);
  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: var(--ui-muted);
}

/* 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: var(--ui-positive);
}

.package-detail .exclusion-title {
  color: var(--ui-negative);
}

.package-detail .notes-title {
  color: var(--ui-ink);
}

.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: var(--ui-positive);
}

.package-detail .exclusion li::before {
  content: '\f00d';
  color: var(--ui-negative);
}

.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: var(--ui-muted);
  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: var(--ui-ink);
  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;
  }

  /* mobile only: .container loses its fixed width here, so as a flex item
     its margin:auto centers it on the cross-axis (excess left inset).
     Zero the auto margins so content aligns with the 15px breadcrumb
     inset. Desktop keeps the fixed-width centered container (aligned
     with the nav), so this override must NOT apply there. */
  .pkg-hero-overlay > .container {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .pkg-hero-eyebrow {
    font-size: 12px;
    letter-spacing: 2px;
    padding: 6px 14px;
    margin-bottom: 14px;
  }

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

/* the 52px top padding was sized for desktop's roomier hero/breadcrumb -
   on a phone, stacked under the sticky breadcrumb bar, it read as a large
   dead gap before "Duration" */
@media (max-width: 767px) {
  .pkgm {
    padding-top: 22px;
  }
}

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

/* two-column: all content in the left column, sticky price card in the
   right. Everything except the closing CTA / browse / related lives here,
   so nothing spans under the sidebar. */
.pkgm-layout {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

.pkgm-content {
  flex: 1;
  min-width: 0;
}

/* section separators inside the left column */
.pkgm-content > .pkgm-journey,
.pkgm-content > .pkgm-incl-grid,
.pkgm-browse {
  padding-top: 40px;
  margin-top: 40px;
  border-top: 1px solid var(--ui-line);
}

/* homepage "Choose a Trip Based on Your Days" section - clean cool-neutral
   backdrop; the attractiveness comes from the gradient heading word and the
   white accordion cards floating on it (all scoped to .home-browse so the
   package pages are untouched) */
.home-browse {
  /* Pale mint wash rather than a dark band: it separates the section without
     the heavy contrast flip, and text stays black (17:1) instead of going
     white. The white accordion rows still read as cards against it. */
  position: relative;
  background: var(--ui-band-light);
  padding: 60px 0 66px;
}

/* light band - dark heading text (17:1 on the mint wash) */
.home-browse .modern-heading h2 {
  color: var(--ui-ink);
}

.home-browse .modern-heading-sub {
  color: var(--ui-muted);
}

.home-browse .modern-heading-eyebrow {
  color: var(--ui-accent-dark);
}

/* the accented "Days" word: a flat accent fill rather than a gradient. On a
   pale band the two-stop gradient washed out at the light end; one solid
   colour is both stronger and legible (5.85:1). */
.home-browse .hb-grad {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--ui-accent);
}

/* drop the package-page framing; accordion fills the full section width
   (groups stay single-column; item rows keep their 2-up grid at >=992px) */
.home-browse .pkgm-browse {
  padding-top: 0;
  margin: 0;
  border-top: none;
  max-width: none;
}

/* each duration group is a clean white card floating on the dark band */
.home-browse .pkgm-dur {
  border: 0;
  border-radius: 14px;
  background: var(--ui-surface-alt);
  box-shadow: 0 10px 26px rgba(11, 36, 29, 0.22), 0 2px 6px rgba(11, 36, 29, 0.12);
  margin-bottom: 14px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* closed bars lift on hover for a tactile feel. Gated on (hover: hover) so
   touch devices never enter it - a tap otherwise leaves the row stuck in the
   lifted/heavier-shadow state, which reads as a broken selected state. */
@media (hover: hover) {
  .home-browse .pkgm-dur:not([open]):hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(11, 36, 29, 0.28), 0 3px 8px rgba(11, 36, 29, 0.14);
  }

  .home-browse .pkgm-dur > summary:hover {
    background: var(--ui-surface-alt);
  }
}

/* brand-green accent down the left edge of every closed row: gives the list a
   strong vertical rhythm and pulls the eye through it, while the row fill
   stays near-white so the dark label text keeps its full contrast. The open
   state swaps this to the teal --color-btn-mid2 accent below. */
.home-browse .pkgm-dur > summary {
  background: var(--ui-surface-alt);
  padding: 17px 22px;
}

/* chevron in a soft tinted circle */
.home-browse .pkgm-collapse-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  /* green tint to match the left accent; the glyph uses a deepened green
     rather than the bright --color-btn-start, which is too light to read
     as an icon on a pale fill */
  background: rgba(13, 128, 96, 0.16);
  color: var(--ui-accent);
  font-size: 11px;
}

/* open group: brand-gradient title bar + a coloured left accent */
.home-browse .pkgm-dur[open] {
  box-shadow: 0 16px 36px rgba(11, 36, 29, 0.3), 0 0 0 1px rgba(10, 111, 84, 0.25);
}

/* Open group keeps the plain white bar. The green tint it used to carry sat
   directly behind the label and the count badge, dropping their contrast for
   no informational gain - the left accent stripe and the rotated chevron
   already say "open". */
.home-browse .pkgm-dur[open] > summary {
  /* identical to the closed bar - opening a group must not change its
     background. The green tint it used to carry sat directly behind the
     label and the count badge, dropping their contrast for no informational
     gain; the left accent stripe and the rotated chevron already say "open". */
  background: var(--ui-surface-alt);
  border-bottom: 1px solid var(--ui-line);
}

.home-browse .pkgm-dur[open] .pkgm-collapse-chevron {
  background: linear-gradient(135deg, var(--color-btn-start) 0%, var(--color-btn-end) 100%);
  color: var(--color-white);
}

/* item rows are light chips on the white body, lifting to white on hover.
   Each duration group carries its own tint (below) so the groups read as
   distinct sets rather than one undifferentiated white run. */
/* Rows stay plain white here, matching the package-page rail. The earlier
   per-group tints are gone: against the dark band a white card reads as the
   cleaner, more premium option, and it keeps one card treatment across the
   whole site instead of two. Base .pkgm-dur-item supplies the white fill,
   hairline border and resting shadow. */

/* phones: the band's desktop rhythm (60/66px padding, 32px heading gap,
   17px summary rows) eats most of a viewport before the first package is
   reachable - roughly halve it so the accordion starts near the top. */
@media (max-width: 767px) {
  .home-browse {
    /* minimal bottom pad: the last duration row should sit close to the
       day-tour section that follows it */
    padding: 30px 0 18px;
  }

  /* claw back the container's 15px gutters - on a 390px screen that is 30px
     of dead margin, and the accordion rows want every pixel for the
     destination titles */
  .home-browse > .container {
    padding-left: 7px;
    padding-right: 7px;
  }

  .home-browse .modern-heading {
    margin-bottom: 18px;
  }

  .home-browse .modern-heading h2 {
    margin-bottom: 12px;
    padding-bottom: 12px;
  }

  .home-browse .pkgm-dur {
    margin-bottom: 6px;
  }

  .home-browse .pkgm-dur > summary {
    padding: 10px 14px;
  }
}

/* :focus-visible (not :focus) keeps the keyboard ring while stopping a tap
   from leaving the row highlighted on touch; :hover is gated for the same
   reason as the summary bars above. */
.home-browse .pkgm-dur-item:focus-visible {
  background: var(--color-white);
  border-color: rgba(10, 107, 79, 0.4);
  box-shadow: 0 6px 16px rgba(11, 36, 29, 0.08);
}

@media (hover: hover) {
  .home-browse .pkgm-dur-item:hover {
    background: var(--color-white);
    border-color: rgba(10, 107, 79, 0.4);
    box-shadow: 0 6px 16px rgba(11, 36, 29, 0.08);
  }
}

/* section label: neutral grey. The gold was a second accent with no meaning
   attached to it, pulling attention away from the actual content beneath. */
.pkgm-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ui-faint);
  margin: 0 0 10px;
}

.pkgm-heading {
  font-size: 30px;
  font-weight: 700;
  color: var(--ui-ink);
  margin: 0 0 28px;
}

.pkgm-side {
  flex: 0 0 340px;
  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);
}

/* booking summary: plain white surface with a hairline edge. The cream wash
   and soft glow read as decoration on what is the page's transaction panel -
   it should feel like a receipt, not a banner. */
.pkgm-side-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 3px rgba(16, 24, 32, 0.05);
  padding: 22px;
}

.pkgm-side-price {
  font-size: 26px;
  font-weight: 700;
  color: var(--ui-ink);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.4px;
}

.pkgm-side-note {
  font-size: 12.5px;
  color: var(--ui-faint);
  margin: 3px 0 16px;
}

.pkgm-side-facts {
  list-style: none;
  margin: 0 0 16px;
  padding: 14px 0 0;
  border-top: 1px solid var(--ui-line-soft);
}

.pkgm-side-facts li {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ui-muted);
  margin-bottom: 7px;
}

.pkgm-side-facts strong {
  color: var(--ui-ink);
  font-weight: 600;
}

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

/* secondary action: neutral outline. A second saturated button competes with
   the primary and halves the value of having one. */
.pkgm-side-btn-2 {
  margin-top: 9px;
  border: 1px solid var(--ui-line);
  color: var(--ui-ink);
  background: transparent;
}

@media (hover: hover) {
  .pkgm-side-btn-2:hover,
  .pkgm-side-btn-2:focus {
    background: var(--ui-surface-alt);
    border-color: var(--ui-line-hover);
    color: var(--ui-ink);
  }
}

.pkgm-description {
  padding: 0;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ui-muted);
}

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

/* journey: DAY N eyebrow + title + text, no timeline chrome */
.pkgm-journey {
  /* no horizontal padding: the 4px it used to carry pushed the "Itinerary"
     heading out of line with every other section title on the page */
  padding: 10px 0 4px;
  margin-bottom: 26px;
}

/* Compact day-by-day itinerary: tight rows, a small day badge, a thumbnail
   photo and dense text - so the whole trip scans quickly (readability over
   scrolling) without the big headings/photos of the old layout. */
.pkgm-day {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ui-line);
}

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

/* day badge + title on one compact line */
.pkgm-day-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 9px;
}

.pkgm-day-num {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-btn-end);
  background: var(--ui-accent-soft);
  padding: 3px 11px;
  border-radius: 20px;
}

.pkgm-day-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ui-ink);
  margin: 0;
  line-height: 1.35;
}

/* day content: small thumbnail left, dense text right */
.pkgm-day-flex {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.pkgm-day-body {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ui-muted);
}

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

/* day plan: short bullet points (the itinerary narrative) */
.pkgm-day-plan {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pkgm-day-plan li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ui-muted);
}

.pkgm-day-plan li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-btn-start);
}

/* small label above the place chips */
.pkgm-day-sights-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ui-faint);
  margin: 12px 0 6px;
}

/* compact sight bullets - two columns where there's room, tight rows */
.pkgm-day-sights {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 22px;
}

.pkgm-day-sights li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 4px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ui-muted);
  break-inside: avoid;
}

.pkgm-day-sights li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-btn-end);
}

.pkgm-day-img {
  flex: 0 0 130px;
  width: 130px;
  height: 100px;
  object-fit: cover;
  border-radius: 10px;
}

/* NOTE: .pkgm-incl-grid and the tinted-panel rules that used to live here
   were the OLD side-by-side static-div layout. The current template
   (includes/package-page.php) uses .pkgm-incl-excl with <details
   class="pkgm-collapse pkgm-incl/excl"> instead (see the toggle rules
   further down this file). Those old rules reused the SAME class names
   (.pkgm-incl / .pkgm-excl), so they were still applying their own
   background/padding UNDER the new toggle box - producing a visible
   "double box" (tinted outer box + white toggle box inside it). Only
   .pkgm-notes still uses the plain h3/ul/li styling below; the incl/excl
   heading, list and bullet rules were removed with the tinted panels since
   nothing renders that markup shape anymore. */
.pkgm-notes h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ui-ink);
  margin: 0 0 16px;
}

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

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

.pkgm-notes li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ui-muted);
}

.pkgm-notes li:last-child {
  margin-bottom: 0;
}

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

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

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

/* closing CTA band */
/* ---- Closing CTA band (includes/package-page.php) ----
   Pale mint band, copy left, a small stack of tilted photos right. This is
   the page's one argument for booking; the summary card handles the actual
   controls, so this stays a statement rather than another button rack. */
.trip-cta {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 30px;
  align-items: center;
  margin: 30px 0 26px;
  padding: 44px 42px;
  border-radius: 22px;
  background: var(--ui-band-light);
}

.trip-cta-eyebrow {
  margin: 0 0 16px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ui-accent-dark);
}

.trip-cta-title {
  margin: 0 0 14px;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--ui-accent-dark);
}

/* the second line carries the emphasis - italic plus the lighter accent so
   the two lines read as one sentence with a turn in it */
.trip-cta-title em {
  font-style: italic;
  color: var(--ui-accent);
}

.trip-cta-sub {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ui-ink);
  max-width: 46ch;
}

.trip-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.trip-cta-primary,
.trip-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--radius-pill);
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}

/* NOTE the :link/:visited/:focus/:active chain, and why it is not just
   `.trip-cta-primary`.
   modern.css sets a global `a:hover, a:focus { color: var(--ui-accent-dark) }`.
   That selector is (0,1,1); a bare `.trip-cta-primary` is (0,1,0), so it LOST.
   On a phone a tap fires :focus, the label was repainted --ui-accent-dark, and
   the button background is also --ui-accent-dark - identical hex, 1:1 contrast,
   text gone. Desktop hid it because the white-text hover rule lives inside
   @media (hover: hover), which phones never match. These states pin the label
   white regardless of input device. */
.trip-cta-primary,
.trip-cta-primary:link,
.trip-cta-primary:visited,
.trip-cta-primary:focus,
.trip-cta-primary:active {
  background: var(--ui-accent-dark);
  color: var(--color-white);
  border: 1px solid var(--ui-accent-dark);
  text-decoration: none;
}

/* pressed feedback for touch, where there is no hover to rely on */
.trip-cta-primary:active {
  background: var(--ui-accent-darker);
  border-color: var(--ui-accent-darker);
}

/* same specificity guard as the primary above */
.trip-cta-secondary,
.trip-cta-secondary:link,
.trip-cta-secondary:visited,
.trip-cta-secondary:focus,
.trip-cta-secondary:active {
  background: var(--color-white);
  color: var(--ui-accent-dark);
  border: 1px solid var(--ui-accent-dark);
  text-decoration: none;
}

.trip-cta-secondary:active {
  background: var(--ui-accent-soft);
}

.trip-cta-primary i,
.trip-cta-secondary i {
  font-size: 14px;
  transition: transform 0.16s ease;
}

@media (hover: hover) {
  .trip-cta-primary:hover,
  .trip-cta-primary:focus {
    /* was --ui-ink (near-black): the button appeared to change identity on
       hover instead of deepening. Stays in the green family. */
    background: var(--ui-accent-darker);
    border-color: var(--ui-accent-darker);
    color: var(--color-white);
    text-decoration: none;
  }

  .trip-cta-primary:hover i {
    transform: translateX(3px);
  }

  .trip-cta-secondary:hover,
  .trip-cta-secondary:focus {
    background: var(--ui-accent-soft);
    color: var(--ui-accent-dark);
    text-decoration: none;
  }
}

/* photo stack: three shots fanned out, largest in front */
.trip-cta-media {
  position: relative;
  min-height: 300px;
}

.trip-cta-shot {
  position: absolute;
  border-radius: 12px;
  border: 6px solid var(--color-white);
  box-shadow: 0 12px 30px rgba(11, 36, 29, 0.18);
  object-fit: cover;
}

.trip-cta-shot-1 {
  width: 62%;
  height: 76%;
  top: 8%;
  left: 19%;
  transform: rotate(-3deg);
  z-index: 3;
}

.trip-cta-shot-2 {
  width: 46%;
  height: 58%;
  top: 26%;
  left: 0;
  transform: rotate(-9deg);
  z-index: 2;
}

.trip-cta-shot-3 {
  width: 44%;
  height: 56%;
  top: 30%;
  right: 0;
  transform: rotate(7deg);
  z-index: 1;
}

@media (max-width: 991px) {
  .trip-cta {
    grid-template-columns: 1fr;
    padding: 30px 24px 26px;
    gap: 22px;
  }

  /* the fan is laid out in percentages, so it scales down intact - it just
     needs less height and a thinner photo border at this size. The auto
     margins matter: once the band stacks to one column the capped stack is
     narrower than the band, and without them it pins to the left edge. */
  .trip-cta-media {
    min-height: 240px;
    /* width:100% is load-bearing. Every .trip-cta-shot is absolutely
       positioned, so this container has no in-flow content to size from.
       The auto margins turn it into a shrink-to-fit grid item, and
       shrink-to-fit with only absolute children collapses it to 0 wide -
       the photos vanish. Give it a width, then cap and centre it. */
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  .trip-cta-shot {
    border-width: 4px;
  }
}

@media (max-width: 575px) {
  .trip-cta {
    padding: 24px 20px 24px;
    border-radius: 18px;
  }

  .trip-cta-sub {
    font-size: 15px;
  }

  .trip-cta-primary,
  .trip-cta-secondary {
    flex: 1 1 100%;
    padding: 14px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trip-cta-primary,
  .trip-cta-secondary,
  .trip-cta-primary i {
    transition: none;
  }
}

/* ---- Call us directly (includes/call-direct.php) ----
   Pale mint panel; the whole card is the tap target because on mobile this
   is the fastest route to a person. */
.call-direct {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-card);
  background: var(--ui-band-light);
  text-decoration: none;
  transition: background 0.16s ease;
}

@media (hover: hover) {
  .call-direct:hover,
  .call-direct:focus {
    background: var(--ui-accent-soft);
    text-decoration: none;
  }
}

.call-direct-icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ui-accent);
  color: var(--color-white);
  font-size: 17px;
}

.call-direct-text {
  min-width: 0;
}

.call-direct-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ui-accent-dark);
  margin-bottom: 2px;
}

.call-direct-num {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ui-accent-dark);
  white-space: nowrap;
}

/* sidebar variant: same anatomy, tighter */
.call-direct-sm {
  padding: 11px 13px;
  gap: 11px;
}

.call-direct-sm .call-direct-icon {
  width: 38px;
  height: 38px;
  font-size: 14px;
}

.call-direct-sm .call-direct-num {
  font-size: 17px;
}

@media (max-width: 575px) {
  .pkgm-enquire-btn {
    padding: 16px 20px;
    font-size: 16px;
  }

  .call-direct-num {
    font-size: 18px;
  }
}

/* ---- Simplified enquiry modal (includes/package-modals.php) ----
   Photo on the left, three fields on the right. Overrides Bootstrap's own
   .modal-content chrome rather than fighting it field by field. */
.enq-modal-simple .modal-dialog {
  max-width: 880px;
  width: calc(100% - 28px);
  margin: 28px auto;
}

.enq-modal-simple .modal-content {
  position: relative;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(11, 36, 29, 0.28);
}

.enq-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--ui-ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  opacity: 1;
}

.enq-close:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}

.enq-split {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
}

.enq-media {
  position: relative;
  background: var(--ui-surface-alt);
}

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

.enq-form-col {
  padding: 34px 34px 30px;
}

.enq-title {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ui-accent-dark);
}

.enq-sub {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ui-muted);
}

.enq-field {
  margin-bottom: 14px;
}

.enq-field label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ui-ink);
  margin-bottom: 6px;
}

.enq-field input,
.enq-field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--ui-ink);
  background: var(--color-white);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-btn);
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.enq-field textarea {
  resize: vertical;
  min-height: 84px;
}

.enq-field input:focus,
.enq-field textarea:focus {
  outline: none;
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px rgba(10, 107, 79, 0.14);
}

.enq-phone {
  display: flex;
  gap: 8px;
}

/* country code selector. Fixed width so the long option labels ("+971 UAE")
   don't stretch the control - the closed select shows the code, the open
   list shows the country name. */
.enq-cc {
  flex: none;
  width: 92px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ui-ink);
  background: var(--ui-surface-alt);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-btn);
  padding: 12px 8px 12px 12px;
  cursor: pointer;
  /* keep the native arrow on mobile, where the OS picker is better than
     anything we would draw */
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.enq-cc:focus {
  outline: none;
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px rgba(10, 107, 79, 0.14);
}

.enq-phone input {
  flex: 1;
  min-width: 0;
}

/* visually hidden but read by screen readers - the select needs a label */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.enq-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 4px 0 18px;
  font-size: 14.5px;
  color: var(--ui-ink);
  cursor: pointer;
}

.enq-check input {
  width: 17px;
  height: 17px;
  accent-color: var(--ui-accent);
  cursor: pointer;
}

.enq-send {
  width: 100%;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-white);
  background: var(--ui-accent);
  border-radius: var(--radius-pill);
  padding: 14px 24px;
  transition: background 0.16s ease;
}

.enq-send:hover,
.enq-send:focus {
  background: var(--ui-accent-dark);
}

.enq-alt {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--ui-muted);
}

.enq-alt a {
  font-weight: 700;
  color: var(--ui-accent-dark);
}

@media (max-width: 767px) {
  /* the photo becomes a banner so the form stays above the fold */
  .enq-split {
    grid-template-columns: 1fr;
  }

  .enq-media img {
    height: 132px;
  }

  .enq-form-col {
    padding: 22px 20px 24px;
  }

  .enq-title {
    font-size: 20px;
  }
}

.pkgm-related {
  padding-top: 40px;
  border-top: 1px solid var(--ui-line);
}

.pkgm-btn {
  display: inline-flex;
  align-items: center;
  padding: 13px 26px;
  /* squarer than the full pill: a booking control should read as a control,
     and long labels in a pill start to look like a lozenge of text */
  border-radius: var(--radius-btn);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

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

/* primary action: one flat accent fill. The gradient plus coloured glow made
   the button the loudest object on the page regardless of context; a solid
   fill still wins attention because nothing else on the card is saturated. */
.pkgm-btn-solid {
  background: var(--ui-accent);
  color: var(--color-white);
}

.pkgm-btn-solid:hover,
.pkgm-btn-solid:focus {
  background: var(--ui-accent-dark);
  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);
}

/* ---- "People Also Ask" FAQ (includes/package-faq.php) ----
   Two columns on desktop: the heading parks on the left while the questions
   run down the right, so the list reads as a single column of text rather
   than a boxed widget. Hairline rules between rows, no card chrome. */
.pkgm-faq {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 30px;
  padding-top: 40px;
  margin-top: 40px;
  border-top: 1px solid var(--ui-line);
}

.pkgm-faq .pkgm-heading {
  margin: 0;
  /* the first question's own text sits 18px down from the row top (its
     summary's padding-top) while the heading's text started flush at the
     top - a few pixels of extra padding-top plus a size-for-size nudge
     brings "People Also Ask" onto the same line as that first question
     instead of floating above it. */
  padding-top: 15px;
}

/* no border-top here: .pkgm-faq's own border-top (the section separator,
   a few lines up) already draws a line right above this same row - a
   second one directly under it read as a doubled/stray line. */
.pkgm-faq-item {
  border-bottom: 1px solid var(--ui-line);
}

/* The last question's rule sat immediately above the next section's own
   border-top, drawing two lines a few pixels apart. The section separator
   below is the one that carries meaning, so this one goes. */
.pkgm-faq-item:last-child {
  border-bottom: 0;
}

.pkgm-faq-item > summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 2px;
  cursor: pointer;
  list-style: none;
}

/* the default disclosure triangle duplicates the chevron */
.pkgm-faq-item > summary::-webkit-details-marker {
  display: none;
}

.pkgm-faq-item > summary::marker {
  content: '';
}

.pkgm-faq-item > summary:focus-visible {
  outline: 2px solid var(--ui-ink, var(--ui-ink));
  outline-offset: 2px;
}

.pkgm-faq-q {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ui-ink, var(--ui-ink));
}

.pkgm-faq-chevron {
  flex: none;
  font-size: 14px;
  color: var(--ui-muted, var(--ui-muted));
  transition: transform 0.2s ease;
}

.pkgm-faq-item[open] .pkgm-faq-chevron {
  transform: rotate(180deg);
}

.pkgm-faq-a {
  padding: 0 2px 20px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ui-muted, var(--ui-muted));
}

.pkgm-faq-a p {
  margin: 0 0 10px;
}

.pkgm-faq-a p:last-child {
  margin-bottom: 0;
}

.pkgm-faq-list {
  margin: 10px 0 0;
  padding-left: 22px;
}

.pkgm-faq-list li {
  margin-bottom: 8px;
}

.pkgm-faq-list a {
  color: var(--ui-ink, var(--ui-ink));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pkgm-faq-list a:hover,
.pkgm-faq-list a:focus {
  color: var(--color-btn-end);
}

@media (prefers-reduced-motion: reduce) {
  .pkgm-faq-chevron {
    transition: none;
  }
}

@media (max-width: 991px) {
  /* single column: the heading sits above the questions - a generous gap
     here since the alignment padding-top above is desktop-only (the two
     no longer share a row once stacked, so it'd just read as an odd gap
     under the heading instead of a fix) */
  .pkgm-faq {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 18px;
    margin-top: 18px;
  }

  .pkgm-faq .pkgm-heading {
    padding-top: 0;
  }

  .pkgm-faq-q {
    font-size: 15.5px;
  }

  .pkgm-faq-item > summary {
    padding: 14px 2px;
    gap: 12px;
  }

  .pkgm-faq-a {
    font-size: 14px;
    padding-bottom: 16px;
  }
}

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

/* end-of-page "search any tour" band - the broadest discovery tool, so it
   sits last. Teal band with a white search pill (reuses the hero-search
   component + hero-search.js). */
.pkgm-search {
  margin-top: 48px;
  padding: 44px 34px 48px;
  border-radius: var(--radius-card);
  text-align: center;
  background: var(--color-section-start);
  background: linear-gradient(120deg, var(--color-section-end) 0%, var(--color-section-mid) 55%, var(--color-section-start) 100%);
}

.pkgm-search .pkgm-eyebrow {
  color: rgba(255, 255, 255, 0.85);
}

.pkgm-search .pkgm-heading {
  color: var(--color-white);
  margin-bottom: 8px;
}

.pkgm-search-sub {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  margin: 0 0 26px;
}

/* the hero-search partial ships a white tagline meant for the banner -
   redundant here (we have our own heading), so hide it */
.pkgm-search .hero-search-tagline {
  display: none;
}

.pkgm-search .hero-search {
  margin: 0 auto;
}

/* smaller screens: full-bleed blue band edge-to-edge (no side margin,
   no rounded corners), giving the search bar the most room. body has
   overflow-x:hidden, so the 50vw breakout can't cause a horizontal
   scrollbar. The inner search pill keeps its own padding for breathing. */
@media (max-width: 991px) {
  .pkgm-search {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    padding: 40px 20px 44px;
  }

  .pkgm-search .hero-search {
    max-width: 640px;
  }

  /* the day photo is now a small thumbnail, so it stays inline beside the
     text at tablet widths (just a touch smaller) rather than stacking */
  .pkgm-day-img {
    flex: 0 0 110px;
    width: 110px;
    height: 84px;
  }

  /* give the content column the majority of the width (60/40) so it reads
     comfortably next to the price card at tablet widths */
  .pkgm-layout {
    gap: 32px;
  }

  .pkgm-content {
    flex: 1 1 60%;
  }

  .pkgm-side {
    flex: 0 0 40%;
  }
}

@media (max-width: 767px) {
  /* full-bleed band, so it carries its own gutter - matched to the body's
     22px so its heading lines up with every other section title */
  .pkgm-search {
    padding: 30px 22px 34px;
  }

  /* phones: Bootstrap's 15px gutter runs the headings and body copy too close
     to the screen edge. 22px gives the section titles room to breathe without
     costing meaningful reading width. */
  .pkgm > .container {
    padding-left: 22px;
    padding-right: 22px;
  }

  /* the browse rail still sits wider than the body copy, but relative to the
     new gutter - it lands at 10px rather than pinning to the screen edge.
     Scoped to `.pkgm-main >` so the homepage copy of this component (inside
     .home-browse, which has its own gutter handling) is untouched. */
  .pkgm-main > .pkgm-browse {
    margin-left: -12px;
    margin-right: -12px;
  }

  /* pull this section's own headings back to the body gutter - only the
     accordion rows are meant to run wide, not the titles above them */
  .pkgm-main > .pkgm-browse > .pkgm-eyebrow,
  .pkgm-main > .pkgm-browse > .pkgm-heading {
    padding-left: 12px;
    padding-right: 12px;
  }

  .pkgm-main > .pkgm-browse .pkgm-dur-grid {
    padding: 6px;
    gap: 6px;
  }

  .pkgm-main > .pkgm-browse .pkgm-dur-item {
    padding: 10px 12px;
    gap: 12px;
  }

  .pkgm-main > .pkgm-browse .pkgm-dur > summary {
    padding: 13px 14px;
  }

  /* NOTE the `.pkgm-content >` prefix: the base rule is
     `.pkgm-content > .pkgm-journey` (0,2,0), so the plain `.pkgm-journey`
     this block used to carry (0,1,0) lost the cascade and these mobile
     values never actually applied - the sections kept the desktop 40/40.
     Tightened further so the itinerary starts right after the overview. */
  .pkgm-content > .pkgm-journey,
  .pkgm-content > .pkgm-incl-grid,
  .pkgm-browse {
    padding-top: 18px;
    margin-top: 18px;
  }

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

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

  /* .pkgm-day-flex / .pkgm-day-img / .pkgm-incl-grid now stack at <=991px
     (see above) */

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

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

  /* very small screens: drop the thumbnail to a compact size and let the
     text keep the row (small enough not to crush the text) */
  .pkgm-day-img {
    flex: 0 0 92px;
    width: 92px;
    height: 72px;
  }

  /* sights to a single column on phones */
  .pkgm-day-sights {
    columns: 1;
  }
}

/* ---- 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 var(--ui-line);
  border-radius: var(--radius-card);
  margin-top: 30px;
  overflow: hidden;
}

.pkgm-tc > summary {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 20px;
  background: var(--ui-surface-alt);
  font-size: 16px;
  font-weight: 700;
  color: var(--ui-ink);
}

.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 var(--ui-line);
}

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

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

.pkgm-dur > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  background: var(--ui-surface-alt);
  font-size: 16px;
  font-weight: 700;
  color: var(--ui-ink);
  transition: background 0.15s ease;
}

.pkgm-dur > summary:hover {
  background: var(--ui-line);
}

.pkgm-dur[open] > summary {
  border-bottom: 1px solid var(--ui-line);
}

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

.pkgm-dur-count {
  margin-left: auto;
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-white);
  /* deep teal, not --color-btn-end: white on that cyan is only ~3.1:1, so
     the count read as a washed-out smudge on the pale bar */
  background: var(--ui-accent-dark);
  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;
  /* min-width:0 lets the item shrink inside its grid cell; without it the
     flex content's intrinsic width blows past the cell and the row scrolls
     horizontally on narrow screens */
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* always a white card, not just on hover: a row with no fill until you point
   at it doesn't read as clickable, and on touch there is no hover at all so
   the affordance never appeared. The hover state now only deepens the edge. */
.pkgm-dur-item {
  background: var(--ui-surface, var(--color-white));
  box-shadow: 0 1px 2px rgba(16, 24, 32, 0.05);
}

@media (hover: hover) {
  .pkgm-dur-item:hover {
    border-color: var(--ui-line-hover);
    box-shadow: 0 6px 16px rgba(16, 24, 32, 0.1);
    text-decoration: none;
    transform: translateY(-1px);
  }
}

.pkgm-dur-item:focus-visible {
  border-color: var(--ui-line-hover);
  box-shadow: 0 6px 16px rgba(16, 24, 32, 0.1);
  text-decoration: none;
}

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

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

/* the destination name is the row's headline - it outranks the price, which
   is deliberately quiet below */
.pkgm-dur-item-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ui-ink);
  line-height: 1.25;
  /* clamp long titles to 2 lines instead of forcing the row wider */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

.pkgm-dur-item-meta {
  font-size: 12.5px;
  color: var(--ui-muted);
  margin-top: 5px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/* quiet, but not below the AA floor: var(--ui-faint) measured ~3.5:1 on the row
   tints, which is unreadable at this size. The subordination to the title
   is carried by size (12.5 vs 18px) and weight, not by fading the text out. */
.pkgm-dur-item-price {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ui-muted);
  margin-top: 5px;
}

.pkgm-dur-item-arrow {
  flex: none;
  font-size: 13px;
  color: var(--ui-line-hover);
  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);
}

/* ---- Booking / enquiry modals (includes/package-modals.php) ----
   Legacy Bootstrap-3 modal markup restyled to our UI. CSS-only so the
   form ids the validation JS targets stay untouched. Scoped to the two
   package modals so no other Bootstrap modal is affected. */
#enq-modal .modal-content,
#get-free-quote .modal-content {
  border: none;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

#enq-modal .modal-dialog,
#get-free-quote .modal-dialog {
  margin-top: 90px;
}

#enq-modal .modal-header,
#get-free-quote .modal-header {
  background: var(--ui-band);
  border-bottom: none;
  padding: 18px 24px;
}

#enq-modal .modal-header p,
#get-free-quote .modal-header p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--color-white);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

#enq-modal .modal-header p img,
#get-free-quote .modal-header p img {
  filter: brightness(0) invert(1);
  width: 22px;
  height: auto;
}

#enq-modal .modal-header .close,
#get-free-quote .modal-header .close {
  color: var(--color-white);
  opacity: 0.8;
  font-size: 26px;
  text-shadow: none;
  margin-top: 2px;
}

#enq-modal .modal-header .close:hover,
#get-free-quote .modal-header .close:hover {
  opacity: 1;
}

#enq-modal .modal-body,
#get-free-quote .modal-body {
  padding: 26px 24px 22px;
}

#enq-modal .form-group,
#get-free-quote .form-group {
  margin-bottom: 18px;
}

#enq-modal .modal-body label,
#get-free-quote .modal-body label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-ink);
  margin-bottom: 6px;
}

#enq-modal .form-control,
#get-free-quote .form-control {
  height: auto;
  min-height: 46px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--ui-ink);
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#enq-modal textarea.form-control,
#get-free-quote textarea.form-control {
  min-height: 92px;
  resize: vertical;
}

#enq-modal .form-control:focus,
#get-free-quote .form-control:focus {
  border-color: var(--color-btn-end);
  box-shadow: 0 0 0 3px rgba(10, 107, 79, 0.15);
  outline: none;
}

#enq-modal .form-control::placeholder,
#get-free-quote .form-control::placeholder {
  color: var(--ui-faint);
}

/* submit -> our brand pill button */
#enq-modal .btn-primary,
#get-free-quote .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  padding: 13px 40px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-white);
  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(10, 107, 79, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#enq-modal .btn-primary:hover,
#enq-modal .btn-primary:focus,
#get-free-quote .btn-primary:hover,
#get-free-quote .btn-primary:focus {
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

#enq-modal .grecap,
#get-free-quote .grecap,
#enq-modal .modal-body > div > small,
#get-free-quote .modal-body > div > small {
  display: block;
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--ui-faint);
}

@media (max-width: 767px) {
  #enq-modal .modal-dialog,
  #get-free-quote .modal-dialog {
    margin: 70px 10px 10px;
  }
}

/* ---- Content pages (navbar pages): shared banner + article system ---- */

/* gradient title band (includes/page-banner.php) - tall enough that the
   photo variant reads as a real hero (padding-top clears the fixed nav) */
.page-banner {
  background: var(--color-section-start);
  background: linear-gradient(120deg, var(--color-section-end) 0%, var(--color-section-mid) 55%, var(--color-section-start) 100%);
  min-height: 500px;
  padding: 200px 0 70px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* photo variant: the page's themed image with a dark overlay so the title
   stays legible (the gradient above is the fallback when no image) */
.page-banner-photo {
  background-size: cover;
  background-position: center;
  position: relative;
}

.page-banner-photo .container {
  position: relative;
  z-index: 1;
}

.page-banner-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 10px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.page-banner-title {
  color: var(--color-white);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

/* readable article body used by the content pages */
.page-shell {
  background: var(--color-white);
  padding: 52px 0 64px;
}

.page-article {
  max-width: 820px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ui-muted);
}

/* all sub-headings (the page title is the banner h1) get a clear, readable
   hierarchy - the source pages lean on h5, which browsers render tiny by
   default, so every level is set explicitly and sits above the 16px body */
.page-article h2,
.page-article h3,
.page-article h4,
.page-article h5,
.page-article h6 {
  color: var(--ui-ink);
  font-weight: 700;
  line-height: 1.35;
  margin: 34px 0 12px;
}

.page-article h2 {
  font-size: 26px;
}

/* small inline CTA for simple content pages (e.g. thankyou.php) - the
   full-width .pkgm-enquire-btn is sized for a package sidebar, not a
   centred one-off link */
.page-article-cta,
.page-article-cta:link,
.page-article-cta:visited {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 13px 26px;
  border-radius: var(--radius-card);
  background: var(--ui-accent); color: var(--color-white);
  font-size: 15px; font-weight: 700; text-decoration: none;
  transition: background 0.16s ease;
}
.page-article-cta:hover, .page-article-cta:focus {
  background: var(--ui-accent-dark); color: var(--color-white);
}

.page-article h3 {
  font-size: 22px;
}

.page-article h4 {
  font-size: 20px;
}

.page-article h5 {
  font-size: 19px;
}

.page-article h6 {
  font-size: 17px;
}

.page-article p {
  margin: 0 0 18px;
}

.page-article strong {
  color: var(--ui-ink);
  font-weight: 700;
}

.page-article a {
  color: var(--color-btn-end);
  text-decoration: none;
}

.page-article a:hover {
  text-decoration: underline;
}

.page-article ul,
.page-article ol {
  margin: 0 0 20px;
  padding-left: 0;
  list-style: none;
  counter-reset: pa-counter;
}

.page-article ul > li,
.page-article ol > li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 14px;
}

.page-article ul > li::before {
  content: '\f00c';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 12px;
  color: var(--color-btn-end);
  position: absolute;
  left: 0;
  top: 5px;
}

.page-article ol > li::before {
  counter-increment: pa-counter;
  content: counter(pa-counter);
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-btn-end);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-article img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  margin: 8px 0 22px;
}

/* image "lists" (e.g. home-stays classification badges) aren't checklists -
   lay them out as a centered image row, no ✓ bullets */
.page-article .page-img-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 30px;
  list-style: none;
  padding: 0;
  margin: 26px 0;
}

.page-article .page-img-row > li {
  padding-left: 0;
  margin: 0;
}

.page-article .page-img-row > li::before {
  display: none;
}

.page-article .page-img-row img {
  max-width: 200px;
  border-radius: 0;
  margin: 0;
}

/* about-us: image + text split, modernized. The legacy section has a
   12% top padding (huge gap under the banner) - reset it. */
.about-us {
  padding: 0;
}

.about-us .container-fluid {
  max-width: 1140px;
  margin: 0 auto;
  padding: 52px 15px 60px;
}

/* image left (40%) at the top, text right (60%) - top-aligned so the
   image sits at the top-left rather than floating to the vertical middle
   of the taller text column */
.about-us .container-fluid > .row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0;
}

.about-us .col-md-6 {
  flex: 0 0 40%;
  max-width: 40%;
}

.about-us .col-md-5 {
  flex: 0 0 60%;
  max-width: 60%;
}

/* legacy caps the paragraph at 80% width and justifies it - let it fill */
.about-us .about-us-content p {
  width: 100%;
  text-align: left;
}

.about-us img {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.about-us .about-us-content {
  padding-left: 10px;
}

.about-us .about-us-content h6 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ui-faint);
  margin: 0 0 16px;
}

.about-us .about-us-content p {
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--ui-muted);
}

/* contact page: banner + modern form */
.contact-us {
  background: var(--ui-surface-alt);
  padding-bottom: 60px;
}

.contact-us .banner-img {
  display: none;
}

.contact-us .form-contents {
  /* the legacy .form-contents is absolutely positioned (old banner
     overlay) - reset it to a normal centered card */
  position: static;
  bottom: auto;
  right: auto;
  width: auto;
  max-width: 640px;
  margin: 40px auto 0;
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 34px 34px 30px;
}

.contact-us .form-contents > p:first-child {
  font-size: 22px;
  font-weight: 700;
  color: var(--ui-ink);
  margin: 0 0 22px;
}

/* labels above fields, matching the enquiry modal standard */
.contact-us .form-contents label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-ink);
  margin-bottom: 6px;
}

.contact-us .form-contents .form-group {
  margin-bottom: 16px;
}

/* match the legacy .contact-us .form-contents .form-control specificity
   (0,3,0) which forces an underline/transparent style with white
   placeholders - restore proper boxed inputs */
.contact-us .form-contents .form-control {
  height: auto;
  min-height: 48px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  padding: 12px 15px;
  font-size: 14px;
  color: var(--ui-ink);
  background: var(--color-white);
  box-shadow: none;
  margin-bottom: 8px;
}

.contact-us .form-contents textarea.form-control {
  min-height: 110px;
  margin-top: 0;
  border: 1px solid var(--ui-line);
}

.contact-us .form-contents .form-control:focus {
  border-color: var(--color-btn-end);
  box-shadow: 0 0 0 3px rgba(10, 107, 79, 0.15);
}

.contact-us .form-contents .form-control::placeholder {
  color: var(--ui-faint);
  font-size: 14px;
  font-weight: 400;
}

.contact-us .contact-us-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  padding: 13px 40px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-white);
  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(10, 107, 79, 0.35);
  transition: transform 0.15s ease;
}

.contact-us .contact-us-btn:hover {
  transform: translateY(-2px);
  color: var(--color-white);
}

/* button + fine-print row: keep them on separate lines (the legacy layout
   let the button float over the grecap text) */
.contact-us .form-contents .contact-us-btn {
  float: none;
  margin-top: 6px;
}

.contact-us .form-contents form > .clearfix {
  clear: both;
  width: 100%;
}

/* legacy makes the reCAPTCHA links white (invisible on the white card) and
   the text a faint grey - match its specificity to restore readable text
   and teal links */
.contact-us .form-contents .grecap {
  clear: both;
  margin: 16px 0 0 !important;
  font-size: 11.5px !important;
  color: var(--ui-faint) !important;
}

.contact-us .form-contents .grecap a {
  color: var(--color-btn-end) !important;
  text-decoration: underline;
}

/* kerala-tour-guide: hide the old inline title (shared page-banner shows
   it), restyle the attraction gallery into a clean modern card grid */
.kerala-tour-guide > .container > .row:first-child {
  display: none;
}

.kerala-tour-guide {
  background: var(--color-white);
  padding: 50px 0 56px;
}

@media (max-width: 767px) {
  .page-banner {
    min-height: 380px;
    padding: 120px 0 40px;
  }

  /* flex column makes the auto-margin .container center on the cross-axis
     (indent on mobile where it has no fixed width) - zero those margins */
  .page-banner > .container {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .page-banner-title {
    font-size: 28px;
  }

  .page-article {
    font-size: 15px;
  }

  /* about-us stacks: image on top, text below, each full width */
  .about-us .col-md-6,
  .about-us .col-md-5 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .about-us .about-us-content {
    padding-left: 0;
    margin-top: 24px;
  }

  /* day-tours tiles: on phones keep them compact - just name + subtitle,
     drop the highlight bullets (too much info in a small tile) */
  .page-shell .day-tile-points {
    display: none;
  }
}

/* ---- 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: var(--ui-band);
  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;
  }

  /* centre the legal links (and any that wrap) on small screens */
  .sf-legal {
    justify-content: center;
  }

  .sf-copy {
    flex: none;
  }
}

/* ---- 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: var(--ui-surface-alt);
  padding: 55px 0 55px;
  /* same shadow breakout as the day carousel - see note there */
  overflow-x: hidden;
}

/* phones: the review cards were nearly full-screen; trim the chrome so a
   card plus the next one's edge fit without dominating the page */
@media (max-width: 767px) {
  .home-testimonials {
    padding: 26px 0 30px;
  }

  .testi-card {
    padding: 16px 18px 16px;
  }

  .testi-quote {
    font-size: 20px;
    margin-bottom: 6px;
  }

  .testi-text {
    font-size: 13.5px;
    line-height: 1.55;
    margin-bottom: 14px;
    -webkit-line-clamp: 5;
  }
}

.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: var(--ui-muted);
  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 var(--ui-line);
  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: var(--ui-ink);
  margin: 0;
}

.testi-trip {
  font-size: 12px;
  color: var(--ui-faint);
  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: var(--ui-ink);
  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, so hide only the dots. Keep the prev/next arrows so guests
     can toggle reviews by tapping (not just swiping). */
  .testi-carousel .owl-dots {
    display: none;
  }

  /* smaller arrows nudged further into the side gutters, off the card text */
  .testi-carousel .owl-nav button.owl-prev,
  .testi-carousel .owl-nav button.owl-next {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

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

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

/* ---- 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: var(--ui-surface-alt);
  padding: 55px 0 60px;
}

/* ---- Homepage "About Us" / Why Choose Us section ---- */
.home-about {
  /* soft neutral slate wash - clearly its own section without being colorful;
     hairline top/bottom borders reinforce the section edges */
  background: linear-gradient(180deg, var(--ui-wash-start) 0%, var(--ui-wash-end) 100%);
  border-top: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
  padding: 64px 0 68px;
  /* "Why us" links (nav/footer) scroll here; offset so the fixed navbar
     doesn't cover the heading when landed on */
  scroll-margin-top: 90px;
}

.home-about-grid {
  display: grid;
  /* text column (left, wider) then image column (right) */
  grid-template-columns: 1fr 0.85fr;
  gap: 54px;
  align-items: center;
}

/* body is first in source but sits on the LEFT; media on the RIGHT */
.home-about-body {
  order: 1;
}

/* image column with floating badge + quote */
.home-about-media {
  order: 2;
  position: relative;
}

.home-about-media > img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  max-height: 560px;
  object-fit: cover;
  border-radius: 20px;
  display: block;
}

.home-about-badge {
  position: absolute;
  top: 22px;
  right: 22px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px;
  border-radius: 14px;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-btn-start) 0%, var(--color-btn-end) 100%);
  box-shadow: var(--shadow-card-hover);
}

.home-about-badge-num {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.home-about-badge-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.3;
  opacity: 0.95;
}

.home-about-quote {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  box-shadow: var(--shadow-card-hover);
}

.home-about-quote p {
  margin: 0 0 8px;
  font-size: 16px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ui-ink);
}

.home-about-quote span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ui-faint);
}

/* text column */
.home-about-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-btn-end);
  margin: 0 0 14px;
}

.home-about-title {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ui-ink);
  margin: 0 0 18px;
}

.home-about-title span {
  color: var(--color-btn-end);
}

.home-about-intro {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ui-muted);
  margin: 0 0 30px;
}

.home-about-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 32px;
}

/* each feature is a proper card */
.home-about-feature {
  padding: 22px 20px;
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  background: var(--color-white);
  box-shadow: 0 6px 18px rgba(11, 36, 29, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.home-about-feature:hover {
  transform: translateY(-3px);
  border-color: rgba(10, 107, 79, 0.35);
  box-shadow: 0 14px 30px rgba(11, 36, 29, 0.1);
}

.home-about-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  font-size: 18px;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-btn-start) 0%, var(--color-btn-end) 100%);
  box-shadow: 0 6px 14px rgba(10, 107, 79, 0.28);
  margin-bottom: 14px;
}

.home-about-feature h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ui-ink);
  margin: 0 0 7px;
}

.home-about-feature p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ui-muted);
  margin: 0;
}

.home-about-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 28px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-btn-start) 0%, var(--color-btn-end) 100%);
  box-shadow: 0 8px 20px rgba(10, 107, 79, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-about-cta:hover,
.home-about-cta:focus {
  color: var(--color-white);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(10, 107, 79, 0.4);
}

.home-about-cta i {
  transition: transform 0.2s ease;
}

.home-about-cta:hover i {
  transform: translateX(3px);
}

@media (max-width: 991px) {
  .home-about-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .home-about-media > img {
    /* the badge (top) and quote card (bottom) both float over this image;
       it has to stay tall enough to seat both without them colliding */
    min-height: 300px;
  }
}

@media (max-width: 575px) {
  .home-about {
    padding: 30px 0 34px;
  }

  .home-about-title {
    font-size: 26px;
  }

  .home-about-features {
    gap: 12px;
  }

  .home-about-feature {
    padding: 16px 14px;
  }

  .home-about-feature-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
    margin-bottom: 10px;
  }

  .home-about-feature h3 {
    font-size: 15px;
  }

  .home-about-feature p {
    font-size: 12.5px;
  }

  /* shrink the two floating overlays so they fit the shorter phone image
     without overlapping each other */
  .home-about-badge {
    top: 14px;
    right: 14px;
    padding: 9px 13px;
    border-radius: 12px;
  }

  .home-about-badge-num {
    font-size: 20px;
  }

  .home-about-badge-label {
    font-size: 9.5px;
    letter-spacing: 0.6px;
  }

  .home-about-quote {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 13px 15px;
    border-radius: 13px;
  }

  .home-about-quote p {
    font-size: 13.5px;
    line-height: 1.45;
    margin-bottom: 5px;
  }

  .home-about-quote span {
    font-size: 11px;
    letter-spacing: 1.2px;
  }
}

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

/* Card shell: a crisp hairline border carrying only a whisper of shadow,
   rather than a heavy drop shadow doing the separating. Reads cleaner
   against both the white and the tinted section backgrounds, and keeps the
   photo - not the chrome - as the loudest thing on the card. */
.cat-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  border: 1px solid var(--ui-line);
  box-shadow: 0 1px 2px rgba(16, 24, 32, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

/* gated: an ungated :hover leaves the last-tapped card stuck in the lifted
   state on touch devices */
@media (hover: hover) {
  .cat-card:hover {
    border-color: var(--ui-line-hover);
    box-shadow: 0 8px 22px rgba(16, 24, 32, 0.1);
    transform: translateY(-3px);
  }
}

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

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

/* image zoom on hover - consistent across every .cat-card (homepage
   category cards, search results, day-tour carousel cards) */
.cat-card:hover .cat-card-media img {
  transform: scale(1.06);
}

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

/* category label as a compact chip rather than gold letter-spaced text.
   The old var(--ui-faint) gold was a second accent competing with the brand teal
   for attention on a card that should lead with its photo and title. */
.cat-card-eyebrow {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ui-accent-dark);
  background: var(--ui-accent-soft);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  margin: 0 0 9px;
}

/* the card's headline - carries the scan-ability and the keyword weight,
   so it outranks the price (see .cat-card-price). Sized to stay readable
   with the longer, SEO-oriented titles the tours use. */
.cat-card-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.28;
  margin: 0 0 6px;
}

.cat-card-title a {
  color: var(--ui-ink);
  text-decoration: none;
}

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

.cat-card-meta {
  font-size: 14px;
  color: var(--ui-muted);
  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(10, 107, 79, 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: var(--ui-muted);
  margin: 0 0 10px;
  padding-left: 16px;
  position: relative;
}

.cat-card-points li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  color: var(--ui-muted);
}

.cat-card-divider {
  border: none;
  border-top: 1px solid var(--ui-line);
  margin: 8px 0 16px;
}

/* Price is deliberately quiet: it was 28px/700 against a 21px title, so the
   rupee figure read as the headline of every card. The tour name is what
   carries both the scan-ability and the keyword weight, so the price now
   sits below it in the visual hierarchy. */
.cat-card-price-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ui-faint);
  margin: 0 0 2px;
}

.cat-card-price {
  font-size: 18px;
  font-weight: 600;
  color: var(--ui-muted);
  margin: 0 0 1px;
}

.cat-card-price-note {
  font-size: 11.5px;
  color: var(--ui-faint);
  margin: 0 0 14px;
}

.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: var(--ui-ink);
}

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

/* secondary action: tied to the brand teal instead of a neutral grey, so the
   two buttons read as one family rather than "brand button + generic button" */
.cat-btn-outline {
  color: var(--ui-accent-dark);
  border: 1px solid var(--ui-line-hover);
  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 {
    /* tighter bottom pad so the tile grid doesn't leave a dead band before
       the "Choose a Trip Based on Your Days" section starts */
    padding: 30px 0 24px;
  }

  .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 var(--ui-line);
    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) {
  /* the homepage hero search had an EXTRA 12px of side padding on
     .banner-contents (on top of the container 15px + row/col), making the
     bar narrower than the /search bar. Drop only that extra 12px; the
     container+row+col chain still nets the standard 15px inset, so the bar
     matches /search's width AND keeps a proper left/right margin. */
  .banner .banner-contents {
    bottom: 8%;
    padding: 0;
  }

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

  /* hero min-height now lives in a base rule (see .banner img above) so it
     applies across the tablet range too, not just here */

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

  /* the action bar paints over the drawer's bottom (it lives in the root
     stacking context, above the drawer which is trapped inside .travel-bar's
     backdrop-filter context). Pad the drawer so its last item scrolls clear
     of the bar instead of hiding under it. */
  .travel-bar .navbar-collapse {
    padding-bottom: calc(84px + 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: var(--ui-band);
  }

  .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;
  }
}

/* ============ 2026 inner-page rebuild (single column) ============ */
.pkgm-content-full { max-width: 760px; margin: 0 auto; }

/* facts strip: duration + route, right under the hero */
.pkgm-facts {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  border-bottom: 1px solid var(--ui-line); padding-bottom: 18px;
}
.pkgm-facts li { display: flex; gap: 12px; font-size: 15px; line-height: 1.5; }
.pkgm-facts-k {
  flex: none; width: 76px; font-weight: 700; color: var(--ui-ink);
}
.pkgm-facts-v { color: var(--ui-muted); }

/* Overview "See more" clamp */
.pkgm-clamp-body { overflow: hidden; }
.js-clamp.is-clamped .pkgm-clamp-body {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
}
.pkgm-clamp-toggle {
  margin-top: 8px; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--ui-accent);
  padding: 2px 0; display: inline-flex; align-items: center; gap: 6px;
}
.pkgm-clamp-toggle:hover { color: var(--ui-accent-dark); }

/* Inclusions / Exclusions collapsed toggles - matched to the T&C box so all
   three read as one consistent stack. */
.pkgm-incl-excl {
  display: flex; flex-direction: column; gap: 12px;
  margin: 26px 0 12px; padding-top: 26px; border-top: 1px solid var(--ui-line);
}
.pkgm-collapse-icon-yes { color: var(--ui-positive); }
.pkgm-collapse-icon-no { color: var(--ui-negative); }

/* even the gap to T&C: was 26px (incl-excl bottom) + 30px (tc top) = 56px.
   Now 12px + 12px matches the gap between the two toggles above it. */
.pkgm-tc { margin-top: 12px; }

/* the incl/excl toggles are bordered boxes like T&C */
.pkgm-incl,
.pkgm-excl {
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* unified summary row for all three toggles: padded, chevron pushed right */
.pkgm-incl > summary,
.pkgm-excl > summary {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 20px;
  background: var(--ui-surface-alt);
  font-size: 16px;
  font-weight: 700;
  color: var(--ui-ink);
}
/* Not Included reads as the negative counterpart to What's Included - a
   red tint instead of the neutral surface, matching its X icon */
.pkgm-excl > summary {
  background: var(--ui-negative-soft);
}
.pkgm-incl > summary .pkgm-collapse-chevron,
.pkgm-excl > summary .pkgm-collapse-chevron {
  margin-left: auto;
}
.pkgm-incl[open] > summary {
  border-bottom: 1px solid var(--ui-line);
}
.pkgm-excl[open] > summary {
  border-bottom: 1px solid var(--ui-negative-line);
}

/* opened content gets breathing room under the summary (was flush) */
.pkgm-incl > ul,
.pkgm-excl > ul {
  list-style: none;
  padding: 16px 20px;
  margin: 0;
}

/* checkmark / cross bullets, scoped to the ul only - not the box background,
   so this doesn't reintroduce the tinted double-box that was just removed */
.pkgm-incl > ul > li,
.pkgm-excl > ul > li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ui-muted);
}
.pkgm-incl > ul > li:last-child,
.pkgm-excl > ul > li:last-child {
  margin-bottom: 0;
}
.pkgm-incl > ul > li::before,
.pkgm-excl > ul > li::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 3px;
  font-size: 12px;
}
.pkgm-incl > ul > li::before {
  content: '\f00c'; /* check */
  color: var(--ui-positive);
}
.pkgm-excl > ul > li::before {
  content: '\f00d'; /* times */
  color: var(--ui-negative);
}

/* single closing enquire action */
.pkgm-enquire-btn,
.pkgm-enquire-btn:link,
.pkgm-enquire-btn:visited,
.pkgm-enquire-btn:focus,
.pkgm-enquire-btn:active {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin: 28px 0 8px; padding: 17px 24px;
  border-radius: var(--radius-card);
  background: var(--ui-accent); color: var(--color-white);
  font-size: 16.5px; font-weight: 700; text-decoration: none;
  transition: background 0.16s ease;
}
.pkgm-enquire-btn i { font-size: 15px; transition: transform 0.16s ease; }
.pkgm-enquire-btn:active { background: var(--ui-accent-darker); }
@media (hover: hover) {
  .pkgm-enquire-btn:hover, .pkgm-enquire-btn:focus {
    background: var(--ui-accent-dark); color: var(--color-white);
  }
  .pkgm-enquire-btn:hover i { transform: translateX(3px); }
}

/* ---- Floating wishlist pill (assets/js/wishlist.js) ---- */
.kte-wish-pill {
  position: fixed; right: 16px; bottom: 84px; z-index: 1000;
  width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--color-white); color: var(--ui-favorite);
  box-shadow: 0 6px 20px rgba(16,24,32,.22);
  display: none; align-items: center; justify-content: center; font-size: 20px;
}
.kte-wish-pill.is-shown { display: inline-flex; }
.kte-wish-count {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: 10px; background: var(--ui-accent);
  color: #fff; font-size: 12px; font-weight: 700; line-height: 20px;
  font-family: var(--font-primary);
}
.kte-wish-panel {
  position: fixed; right: 16px; bottom: 144px; z-index: 1001;
  width: min(340px, calc(100vw - 32px)); max-height: 70vh; overflow: auto;
  background: var(--color-white); border: 1px solid var(--ui-line);
  border-radius: 14px; box-shadow: 0 16px 44px rgba(16,24,32,.24);
}
.kte-wish-head {
  position: sticky; top: 0; z-index: 1; background: var(--color-white);
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 15px; border-bottom: 1px solid var(--ui-line);
  font-size: 15px; color: var(--ui-ink);
}
.kte-wish-head-count { color: var(--ui-muted); font-weight: 400; }
.kte-wish-close { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ui-muted); }
.kte-wish-list { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.kte-wish-item {
  display: flex; align-items: center; gap: 12px; padding: 8px;
  border: 1px solid var(--ui-line); border-radius: 12px;
}
.kte-wish-thumb {
  flex: none; width: 60px; height: 60px; border-radius: 9px; overflow: hidden;
  background: var(--ui-faint-bg, #f2f2f2); display: flex; align-items: center; justify-content: center;
}
.kte-wish-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kte-wish-thumb i { color: var(--ui-faint); font-size: 18px; }
.kte-wish-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kte-wish-title {
  font-size: 14px; font-weight: 600; color: var(--ui-ink); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kte-wish-title:hover { color: var(--ui-accent); }
.kte-wish-meta {
  font-size: 12px; color: var(--ui-muted); display: flex; align-items: center; gap: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kte-wish-meta i { font-size: 10px; color: var(--ui-accent); flex: none; }
.kte-wish-price { font-size: 13px; font-weight: 700; color: var(--ui-accent); }
.kte-wish-actions { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.kte-wish-view {
  font-size: 12px; font-weight: 700; color: #fff; background: var(--ui-accent);
  padding: 5px 12px; border-radius: 999px; text-decoration: none; white-space: nowrap;
}
.kte-wish-view:hover { filter: brightness(0.94); color: #fff; }
.kte-wish-remove { border: 0; background: none; font-size: 18px; line-height: 1; cursor: pointer; color: var(--ui-faint); padding: 0 2px; }
.kte-wish-remove:hover { color: var(--ui-negative); }
.kte-wish-empty {
  padding: 30px 20px; margin: 0; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.kte-wish-empty i { font-size: 26px; color: var(--ui-faint); }
.kte-wish-empty p { margin: 0; font-size: 13.5px; color: var(--ui-muted); }
.kte-wish-browse {
  font-size: 13px; font-weight: 700; color: #fff; background: var(--ui-accent);
  padding: 8px 18px; border-radius: 999px; text-decoration: none;
}
.kte-wish-browse:hover { color: #fff; filter: brightness(0.94); }
/* desktop: no mobile action bar, so the pill can sit lower */
@media (min-width: 992px) {
  /* stack above the floating WhatsApp button (.whatsapp-float, 56px tall,
     right:20/bottom:20) instead of sitting beside it - at the old bottom:24
     the two circles nearly coincided (this is the overlap that was reported) */
  .kte-wish-pill { right: 20px; bottom: 92px; }
  .kte-wish-panel { right: 20px; bottom: 152px; }
}

/* ---- Search results grouped by duration, each row an Owl carousel
   (same component/controls as the homepage day-tours/testimonial rails -
   see .day-carousel above) ---- */
.search-results-grid { display: flex; flex-direction: column; gap: 26px; }
/* search-page.js has to build every duration group's Owl carousel before
   anything should appear - with dozens of packages now on the page that
   takes a beat, and doing it in full view read as a flicker. The grid
   stays present-but-invisible (visibility, NOT display:none - Owl reads
   the container's real width at init, which a display:none ancestor would
   report as zero) while a spinner overlays the same spot; JS flips
   .search-ready / .is-hidden once the first pass is done. */
.search-results { position: relative; }
.search-results-grid:not(.search-ready) { visibility: hidden; }
.search-results-loader {
  /* fixed-height band pinned to the top, NOT inset:0 - the grid below
     stays visibility:hidden (not display:none, see .search-ready comment)
     while every duration group's carousel gets built, so it keeps growing
     taller during the build. inset:0 stretched this to match, and centering
     the spinner inside a still-growing box made it visibly drift down the
     page over the course of the build (worse on mobile - more groups,
     less CPU). A fixed height keeps the spinner's position stable. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--ui-muted);
  font-size: 14px;
  background: #fff;
}
.search-results-loader.is-hidden { display: none; }
.search-results-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(0, 0, 0, 0.08);
  border-top-color: var(--ui-accent);
  border-radius: 50%;
  animation: search-results-spin 0.7s linear infinite;
}
@keyframes search-results-spin {
  to { transform: rotate(360deg); }
}
.search-dur-group { min-width: 0; }
.search-dur-head {
  font-size: 17px; font-weight: 800; color: var(--ui-ink);
  margin: 0 0 12px; letter-spacing: -0.01em;
}
.search-dur-head .search-dur-count { color: var(--ui-muted); font-weight: 600; font-size: 14px; }

.search-dur-carousel { position: relative; }
.search-dur-carousel .owl-stage-outer {
  /* see .day-carousel .owl-stage-outer above - same shadow-clip fix */
  padding: 16px 15px 42px;
  margin: -16px -15px -24px;
}
.search-dur-carousel .owl-stage { display: flex; }
.search-dur-carousel .owl-item { display: flex; }
.search-dur-carousel .tour-card { width: 100%; }

.search-dur-carousel .owl-nav { margin: 0; }
.search-dur-carousel .owl-nav button.owl-prev,
.search-dur-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: var(--ui-ink); 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;
}
.search-dur-carousel .owl-nav button.owl-prev { left: -14px; }
.search-dur-carousel .owl-nav button.owl-next { right: -14px; }
.search-dur-carousel .owl-nav button.owl-prev:hover,
.search-dur-carousel .owl-nav button.owl-next:hover {
  background: var(--color-btn-end); color: var(--color-white);
}
.search-dur-carousel .owl-nav button.disabled { opacity: 0; pointer-events: none; }
/* loop:true never disables Owl's own nav buttons (see search-page.js) - a
   group with no more cards than the current breakpoint shows fits needs
   its arrows hidden by hand instead, or they'd just spin the same cards */
.search-dur-carousel.search-dur-no-overflow .owl-nav { display: none; }

/* Capping items (search-page.js's Math.min(breakpointItems, count)) matches
   a non-overflowing group's owl-item width to that breakpoint's normal
   column width EXCEPT in one specific case: 2 real cards at the desktop
   breakpoint (normal=3 columns). There, items gets capped to 2, so each
   owl-item is already HALF the row - correct for the tablet breakpoint
   (whose own normal is 2 columns), but oversized for desktop's 3-column
   norm.
   Fix is on the CAROUSEL itself, not the card inside it: Owl measures
   ITS OWN element's width once, synchronously, the moment .owlCarousel()
   runs, and caches every owl-item width/position from that one reading -
   it does not re-measure just because a class added afterwards changes
   the container's CSS width. So this only works keyed off [data-count="2"]
   alone (search-page.js sets that attribute BEFORE calling .owlCarousel(),
   unlike .search-dur-no-overflow which is only added after init once Owl's
   own settings are readable - keying off that class here reproduced the
   bug: the container visibly shrank, but Owl's already-cached, wider
   item widths/positions didn't, leaving the second card exactly where
   the original half-width slot placed it - a gap, not a shrink). With the
   container narrowed before Owl ever measures it, Owl's own items:2 math
   runs against the smaller box and produces two correctly-sized,
   adjacently-positioned columns with no extra step needed.
   2 columns + 1 gap, as a fraction of 3 columns + 2 gaps: every other
   combination (1 card - see .search-dur-single below; 2 cards at
   mobile/tablet; 3 cards at any breakpoint) already lands on the right
   width with no correction. */
@media (min-width: 1000px) {
  .search-dur-carousel[data-count="2"] {
    width: calc(66.6667% - 7.3333px);
  }
}

/* A single-card group isn't handed to Owl at all (search-page.js) - Owl's
   clone-based looping needs enough real cards to keep the clones off-stage,
   and with only one card it visibly duplicates it instead. Rendered plain,
   the card would default to 100% of the row's width (see
   .search-dur-carousel .tour-card above) - unlike the owl-item case above,
   this element IS the full row (no Owl slot dividing it further first), so
   these fractions need no compensating math: 1/1.15, 1/2 and 1/3 directly. */
.search-dur-single .tour-card {
  width: auto;
  max-width: 87%;
}
@media (min-width: 600px) {
  .search-dur-single .tour-card {
    max-width: calc((100% - 22px) / 2);
  }
}
@media (min-width: 1000px) {
  .search-dur-single .tour-card {
    max-width: calc((100% - 44px) / 3);
  }
}

@media (max-width: 767px) {
  .search-dur-head { font-size: 15.5px; }
  .search-dur-carousel .owl-nav button.owl-prev,
  .search-dur-carousel .owl-nav button.owl-next { width: 38px; height: 38px; font-size: 15px; }
  .search-dur-carousel .owl-nav button.owl-prev { left: -13px; }
  .search-dur-carousel .owl-nav button.owl-next { right: -13px; }
}