/* ==========================================================================
   Backpacker Tours — design system
   Built on Bootstrap 5.3. Everything below is project-specific; no Bootstrap
   source is redeclared, only extended.
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Base + typography
   3.  Utility atoms (eyebrow, trail rule, pills, buttons)
   4.  Header: topbar, navbar, offcanvas menu
   5.  Destination rail
   6.  Hero + search
   7.  Value strip
   8.  Rails (horizontal scroll-snap sliders)
   9.  Trip card
   10. Price-overlay card
   11. State card (multi-itinerary)
   12. Why-us panel
   13. Reviews
   14. Quick info
   15. Footer + contact float
   16. Chat widget + mobile action bar
   17. Tour detail page
   18. Listing page
   19. Motion + accessibility
   ========================================================================== */

/* 1. Tokens ================================================================ */
:root {
  /* Palette sampled directly from the Backpacker Tours logo:
     black wordmark, crimson pin, burnt-orange swoosh, amber highlight,
     olive-lime base. Nothing here is invented. */
  --ink:        #16110e;   /* logo black, warmed very slightly */
  --ink-2:      #40332c;
  --ink-3:      #786757;
  --ink-4:      #a5958a;

  --brand:      #c81e0f;   /* logo crimson — primary actions */
  --brand-700:  #8c0f06;   /* logo deep red — hover, dark fills */
  --brand-100:  #f6cec7;
  --brand-050:  #fdf0ec;

  --ember:      #a85400;   /* logo burnt orange — secondary accent */
  --sun:        #f58a24;   /* logo amber — prices, ratings, badges */
  --sun-050:    #fff2e2;
  --olive:      #8a9612;   /* logo olive-lime — confirmations */
  --verify:     #6f7a0e;
  --alert:      #c81e0f;

  --paper:      #ffffff;
  --mist:       #fbf4ef;   /* warm tint, taken off the amber */
  --line:       #f0e2d9;
  --line-2:     #e0cbbe;

  --shadow-sm:  0 1px 2px rgba(22, 17, 14, .05), 0 4px 12px rgba(22, 17, 14, .05);
  --shadow-md:  0 2px 6px rgba(22, 17, 14, .06), 0 14px 34px rgba(22, 17, 14, .09);
  --shadow-lg:  0 4px 10px rgba(22, 17, 14, .07), 0 28px 64px rgba(22, 17, 14, .14);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;

  --display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --body:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 68px;
}

/* 2. Base + typography ===================================================== */
* { -webkit-tap-highlight-color: transparent; }

/* the hidden attribute has to beat component display rules */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }

body {
  font-family: var(--body);
  color: var(--ink-2);
  background: var(--paper);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, .display-face {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.08;
}

.h-hero    { font-size: clamp(2.1rem, 6.2vw, 4.4rem); line-height: 1.02; }
.h-section { font-size: clamp(1.6rem, 3.6vw, 2.7rem); }
.h-card    { font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.25; }

.lede { font-size: clamp(.95rem, 1.4vw, 1.06rem); color: var(--ink-3); max-width: 56ch; }

a { color: var(--brand-700); text-decoration: none; }
a:hover { color: var(--brand); }

.container-bt { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }

.section       { padding-block: clamp(2.75rem, 6vw, 5.25rem); }
.section--tight{ padding-block: clamp(2rem, 4vw, 3.25rem); }
.section--mist { background: var(--mist); }
.section--ink  { background: var(--ink); color: #cfc9e4; }
.section--ink h2, .section--ink h3 { color: #fff; }

/* 3. Utility atoms ========================================================= */
.eyebrow {
  font-family: var(--mono);
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-700);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
/* signature motif: a dashed trail with a pin, used as the section marker */
.eyebrow::before {
  content: "";
  width: 30px; height: 2px;
  background-image: linear-gradient(90deg, currentColor 55%, transparent 55%);
  background-size: 7px 2px;
  opacity: .6;
}
.eyebrow--light { color: var(--sun); }

.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.section-head > div { min-width: 0; }

.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; font-weight: 700; line-height: 1;
  padding: .42rem .68rem; border-radius: 999px;
  background: var(--brand-050); color: var(--brand-700);
  white-space: nowrap;
}
.pill--sun   { background: var(--sun-050);  color: #8f4a05; }
.pill--good  { background: #f2f5da;         color: #5c650a; }
.pill--glass { background: rgba(255,255,255,.92); color: var(--ink); backdrop-filter: blur(8px); }
.pill--ink   { background: rgba(22,17,14,.72); color: #fff; backdrop-filter: blur(8px); }

.data { font-family: var(--mono); font-size: .78rem; letter-spacing: .01em; color: var(--ink-3); }

.price      { font-family: var(--display); font-weight: 800; color: var(--ink); font-size: 1.32rem; letter-spacing: -.02em; }
.price small{ font-family: var(--body); font-weight: 500; font-size: .72rem; color: var(--ink-4); }
.price-was  { font-size: .82rem; color: var(--ink-4); text-decoration: line-through; margin-left: .3rem; }

.stars { color: var(--sun); font-size: .84rem; letter-spacing: .04em; }

/* Buttons ---------------------------------------------------------------- */
.btn-bt {
  --_bg: var(--brand); --_fg: #fff; --_bd: var(--brand);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--body); font-weight: 700; font-size: .92rem; line-height: 1;
  padding: .82rem 1.35rem; border-radius: 999px;
  background: var(--_bg); color: var(--_fg); border: 1.5px solid var(--_bd);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  cursor: pointer;
}
.btn-bt:hover  { color: var(--_fg); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(200,30,15,.28); }
.btn-bt:active { transform: translateY(0); }
.btn-bt--ghost { --_bg: transparent; --_fg: var(--ink); --_bd: var(--line-2); }
.btn-bt--ghost:hover { --_bg: var(--ink); --_fg: #fff; --_bd: var(--ink); box-shadow: 0 10px 22px rgba(22,17,14,.2); }
.btn-bt--ink   { --_bg: var(--ink); --_bd: var(--ink); }
.btn-bt--ink:hover { box-shadow: 0 10px 22px rgba(22,17,14,.28); }
.btn-bt--sun   { --_bg: var(--sun); --_fg: #2a1200; --_bd: var(--sun); }
.btn-bt--sun:hover { color: #2a1200; box-shadow: 0 10px 22px rgba(245,138,36,.42); }
.btn-bt--wide  { width: 100%; }
.btn-bt--sm    { padding: .58rem 1rem; font-size: .84rem; }

.link-more { font-weight: 700; font-size: .88rem; color: var(--ink); display: inline-flex; align-items: center; gap: .35rem; }
.link-more:hover { color: var(--brand); }
.link-more i { transition: transform .18s ease; }
.link-more:hover i { transform: translateX(3px); }

/* 4. Header ================================================================ */
.topbar {
  background: var(--ink); color: #b9b3d1;
  font-size: .78rem; padding: .45rem 0;
}
.topbar a { color: #efecff; font-weight: 600; }
.topbar a:hover { color: var(--sun); }
.topbar .data { color: #8f89ab; }

.site-header {
  position: sticky; top: 0; z-index: 1030;
  /* also the containing block for the centred mega panel */
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease;
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }

.navbar-bt { display: flex; align-items: center; gap: 1.25rem; height: var(--header-h); }

/* The logo is a supplied lockup (icon + wordmark), so it ships as one image. */
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img { display: block; width: auto; height: 40px; }
@media (max-width: 400px) { .brand img { height: 34px; } }
.brand-mark img { height: 34px; }

.nav-main { display: none; align-items: center; gap: .25rem; margin-inline: auto; }
.nav-main > li { position: static; }
.nav-main a.nav-link-bt {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .58rem .8rem; border-radius: 999px;
  font-weight: 600; font-size: .92rem; color: var(--ink-2);
}
.nav-main a.nav-link-bt:hover,
.nav-main a.nav-link-bt.is-active { background: var(--brand-050); color: var(--brand-700); }

/* desktop mega menu */
.mega {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  width: min(900px, calc(100vw - 3rem));
  margin-top: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 1.4rem;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-main > li:hover .mega,
.nav-main > li:focus-within .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.mega-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.mega h6 { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); margin-bottom: .6rem; }
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .12rem; }
.mega ul a { display: block; padding: .34rem .5rem; margin-inline: -.5rem; border-radius: 8px; font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.mega ul a:hover { background: var(--mist); color: var(--brand-700); }

.header-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

/* menu button — deliberately labelled, not a bare hamburger */
.menu-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem .5rem .9rem; border-radius: 999px;
  border: 1.5px solid var(--line-2); background: #fff;
  font-weight: 700; font-size: .86rem; color: var(--ink); cursor: pointer;
}
.menu-btn:hover { border-color: var(--ink); }
.menu-btn i { font-size: 1.15rem; }

@media (min-width: 992px) {
  .nav-main { display: flex; }
  .menu-btn { display: none; }
}

/* offcanvas mobile menu */
.bt-offcanvas { width: min(400px, 92vw); border-left: none; }
.bt-offcanvas .offcanvas-header { border-bottom: 1px solid var(--line); padding: 1rem 1.15rem; }
.bt-offcanvas .offcanvas-body { padding: 0 0 6rem; }
.m-nav-group { border-bottom: 1px solid var(--line); }
.m-nav-head {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 1rem 1.15rem; background: none; border: 0;
  font-family: var(--display); font-weight: 800; font-size: 1.02rem; color: var(--ink);
}
.m-nav-head i { color: var(--ink-4); transition: transform .2s ease; }
.m-nav-head[aria-expanded="true"] i { transform: rotate(180deg); color: var(--brand); }
.m-nav-list { list-style: none; margin: 0; padding: 0 1.15rem 1rem; display: grid; gap: .1rem; }
.m-nav-list a { display: flex; align-items: center; gap: .6rem; padding: .62rem .7rem; border-radius: 10px; font-weight: 600; color: var(--ink-2); }
.m-nav-list a:hover { background: var(--mist); }
.m-nav-list .data { margin-left: auto; }
.m-cta { padding: 1.15rem; display: grid; gap: .6rem; }

/* 5. Destination rail ====================================================== */
/* Liked reference: destination icon strip sitting above the hero on both
   desktop and mobile. */
.dest-rail { background: #fff; border-bottom: 1px solid var(--line); }
.dest-rail-scroll {
  display: flex; gap: .35rem; overflow-x: auto; scroll-snap-type: x proximity;
  padding: .55rem 0; scrollbar-width: none;
}
.dest-rail-scroll::-webkit-scrollbar { display: none; }
.dest-item {
  scroll-snap-align: start; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: .28rem;
  min-width: 82px; padding: .5rem .55rem .45rem; border-radius: var(--r-md);
  color: var(--ink-2); position: relative;
}
.dest-item:hover { background: var(--mist); color: var(--brand-700); }
.dest-item i { font-size: 1.5rem; color: var(--ink); }
.dest-item:hover i { color: var(--brand); }
.dest-item span { font-size: .74rem; font-weight: 600; white-space: nowrap; }
.dest-item.is-active { color: var(--brand-700); }
.dest-item.is-active::after {
  content: ""; position: absolute; left: 50%; bottom: -1px; translate: -50% 0;
  width: 26px; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand);
}

/* 6. Hero ================================================================== */
.hero { position: relative; background: var(--ink); }
.hero-slide { position: relative; min-height: clamp(430px, 74vh, 640px); }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(22,17,14,.62) 0%, rgba(22,17,14,.18) 38%, rgba(22,17,14,.84) 100%),
    linear-gradient(90deg, rgba(22,17,14,.6) 0%, transparent 62%);
}
.hero-inner {
  position: relative; z-index: 2;
  min-height: clamp(430px, 74vh, 640px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(2.5rem, 6vw, 4rem);
  color: #fff;
}
.hero-inner h1, .hero-inner .h-hero { color: #fff; max-width: 17ch; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26);
  color: #fff; padding: .4rem .8rem; border-radius: 999px; backdrop-filter: blur(6px);
  margin-bottom: 1rem;
}
.hero-sub { color: rgba(255,255,255,.86); max-width: 46ch; margin-top: .85rem; font-size: 1.02rem; }
.hero-proof { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.1rem; }
.hero-proof span { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 600; color: rgba(255,255,255,.9); }
.hero-proof i { color: var(--sun); }

.hero .carousel-indicators { margin-bottom: .9rem; }
.hero .carousel-indicators [data-bs-target] { width: 26px; height: 3px; border-radius: 3px; border: 0; background: rgba(255,255,255,.45); }
.hero .carousel-indicators .active { background: var(--sun); }

/* Search — Expedia-style date-led search, restated for a tour brand ------- */
.searchbar {
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: .5rem; display: grid; gap: .35rem;
  grid-template-columns: 1fr; margin-top: 1.6rem;
}
.search-field {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .9rem; border-radius: var(--r-md); background: var(--mist);
  border: 1.5px solid transparent; min-width: 0;
}
.search-field:focus-within { border-color: var(--brand); background: #fff; }
.search-field > i { font-size: 1.25rem; color: var(--brand); flex: 0 0 auto; }
.search-field label { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.search-field input, .search-field select {
  border: 0; background: transparent; padding: 0; width: 100%;
  font-family: var(--body); font-weight: 700; font-size: .94rem; color: var(--ink);
  outline: none; appearance: none;
}
.search-field select { cursor: pointer; }
@media (min-width: 768px) {
  .searchbar { grid-template-columns: 1.4fr 1fr 1fr auto; align-items: stretch; }
  .searchbar .btn-bt { height: 100%; padding-inline: 1.6rem; }
}

/* 7. Value strip =========================================================== */
/* Liked reference: brand-value band with four icon statements. */
.valuestrip { background: var(--brand-050); }
.value-grid { display: grid; gap: 1.6rem 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 992px) { .value-grid { grid-template-columns: repeat(4, 1fr); } }
.value-item { text-align: center; padding-inline: .4rem; position: relative; }
@media (min-width: 992px) {
  .value-item + .value-item::before {
    content: ""; position: absolute; left: -.5rem; top: 12%; bottom: 12%;
    width: 1px; background: var(--brand-100);
  }
}
.value-icon {
  width: 52px; height: 52px; margin: 0 auto .75rem; border-radius: 16px;
  display: grid; place-items: center; background: #fff; color: var(--brand);
  font-size: 1.5rem; box-shadow: var(--shadow-sm);
}
.value-item h3 { font-size: 1rem; margin-bottom: .35rem; }
.value-item p  { font-size: .86rem; color: var(--ink-3); margin: 0; }

/* 8. Rails ================================================================= */
.rail-wrap { position: relative; }
.rail {
  display: grid; grid-auto-flow: column; gap: .75rem;
  grid-auto-columns: calc((100% - .75rem) / 2);   /* fixed track, so it scrolls */
  overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding-block: .35rem 1.25rem; padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 576px) { .rail { gap: 1rem; grid-auto-columns: calc((100% - 1rem) / 2); } }
@media (min-width: 768px) { .rail { gap: 1rem; grid-auto-columns: calc((100% - 2rem) / 3); } }
@media (min-width: 992px) { .rail { gap: 1rem; grid-auto-columns: calc((100% - 3rem) / 4); margin-inline: 0; padding-inline: 0; } }

.rail-nav { display: none; gap: .4rem; }
@media (min-width: 992px) { .rail-nav { display: inline-flex; } }
.rail-btn {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--line-2); background: #fff; color: var(--ink);
  font-size: 1.1rem; cursor: pointer; transition: .18s ease;
}
.rail-btn:hover:not(:disabled) { background: var(--ink); color: #fff; border-color: var(--ink); }
.rail-btn:disabled { opacity: .32; cursor: not-allowed; }

.rail-progress { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: .35rem; }
.rail-progress span { display: block; height: 100%; background: var(--brand); border-radius: 3px; transition: width .15s linear, transform .15s linear; }
@media (min-width: 992px) { .rail-progress { display: none; } }

/* 9. Trip card ============================================================= */
/* Deliberately restrained: the sheet flagged competitor cards that push too
   much information onto the card face, especially on mobile. Everything that
   is not decision-critical lives on the detail page. */
.trip-card {
  position: relative;
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.trip-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-2); }

.trip-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); }
.trip-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.trip-card:hover .trip-media img { transform: scale(1.05); }
.trip-media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(180deg, transparent, rgba(22,17,14,.55));
}
.trip-badge { position: absolute; top: .7rem; left: .7rem; z-index: 2; }
.trip-save  { position: absolute; top: .7rem; right: .7rem; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--ink); cursor: pointer; }
.trip-save:hover, .trip-save.is-on { background: var(--brand); color: #fff; }
.trip-meta {
  position: absolute; left: .7rem; right: .7rem; bottom: .7rem; z-index: 2;
  display: flex; gap: .35rem; flex-wrap: wrap;
}

.trip-body { padding: .95rem 1rem 1.05rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.trip-title { font-family: var(--display); font-weight: 800; font-size: 1.06rem; line-height: 1.22; color: var(--ink); }
.trip-card:hover .trip-title { color: var(--brand-700); }

.trip-route {
  display: flex; align-items: center; gap: .4rem; min-width: 0;
  font-size: .84rem; color: var(--ink-3);
}
.trip-route span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trip-route i { color: var(--brand); flex: 0 0 auto; }

.trip-dates { display: flex; align-items: center; gap: .4rem; font-family: var(--mono); font-size: .74rem; color: var(--ink-3); }
.trip-dates i { color: var(--ink-4); }
.trip-dates b { color: var(--ink); font-weight: 600; }

.trip-foot {
  margin-top: auto; padding-top: .8rem; border-top: 1px dashed var(--line-2);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.trip-foot .price small { display: block; margin-top: 1px; }

/* Mobile keeps only: image, one meta pill, title, price, one action. */
@media (max-width: 575.98px) {
  .trip-card .trip-route,
  .trip-card .trip-dates { display: none; }
  .trip-card .trip-meta .pill:nth-child(n + 3) { display: none; }
  .trip-body { padding: .8rem .85rem .9rem; gap: .45rem; }
  .trip-title { font-size: 1rem; }
  .trip-foot { padding-top: .65rem; }
}

/* 10. Price-overlay card =================================================== */
/* Liked reference: horizontal slider where the price sits on the photograph. */
.poster-card {
  position: relative; display: block; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 3 / 4; color: #fff; isolation: isolate;
}
.poster-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.poster-card:hover img { transform: scale(1.06); }
.poster-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,17,14,.42) 0%, transparent 34%, rgba(22,17,14,.86) 100%);
}
.poster-tag { position: absolute; top: .8rem; left: .8rem; z-index: 2; }
.poster-body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 1rem; }
.poster-body h3 { color: #fff; font-size: 1.22rem; margin-bottom: .3rem; }
.poster-body .data { color: rgba(255,255,255,.7); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; }
.poster-price { font-family: var(--display); font-weight: 800; font-size: 1.35rem; color: #fff; }
.poster-go {
  position: absolute; right: .9rem; bottom: 1rem; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); color: #fff;
  backdrop-filter: blur(6px); transition: .2s ease;
}
.poster-card:hover .poster-go { background: #fff; color: var(--ink); }

/* 11. State card (several itineraries, one card) ============================ */
/* Liked reference: one card that carries multiple itineraries for the same
   region, so the grid does not repeat the same destination five times. */
.state-card {
  display: grid; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
@media (min-width: 768px) { .state-card { grid-template-columns: 42% 1fr; } }
.state-media { position: relative; min-height: 210px; }
.state-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.state-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,17,14,.5), rgba(22,17,14,.15) 45%, rgba(22,17,14,.7)); }
.state-media-body { position: absolute; inset: auto 0 0 0; padding: 1rem; z-index: 2; color: #fff; }
.state-media-body h3 { color: #fff; font-size: 1.42rem; margin-bottom: .2rem; }
.state-media-body .data { color: rgba(255,255,255,.75); }

.state-body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; }
.state-tabs { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; margin-bottom: .9rem; }
.state-tabs::-webkit-scrollbar { display: none; }
.state-tab {
  flex: 0 0 auto; padding: .42rem .8rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line-2); background: #fff;
  font-size: .8rem; font-weight: 700; color: var(--ink-2); white-space: nowrap;
}
.state-tab:hover { border-color: var(--brand); color: var(--brand-700); }
.state-tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.state-panel { display: none; }
.state-panel.is-active { display: block; animation: fadeUp .28s ease both; }
.state-panel h4 { font-size: 1.06rem; margin-bottom: .5rem; }
.state-facts { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }
.state-foot { margin-top: auto; padding-top: .85rem; border-top: 1px dashed var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: .8rem; }

/* 12. Why-us panel ========================================================= */
.why-panel {
  background: var(--ink); border-radius: var(--r-xl);
  padding: clamp(1.25rem, 3vw, 2.25rem); color: #cfc9e4;
}
.why-top { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 992px) { .why-top { grid-template-columns: 46% 1fr; gap: 2.5rem; } }
.why-img { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.why-img img { width: 100%; height: 100%; object-fit: cover; }
.why-top h2 { color: #fff; font-size: clamp(1.5rem, 3.2vw, 2.4rem); }
.why-top p { color: #a9a2c6; }

.why-grid { display: grid; gap: .8rem; grid-template-columns: repeat(2, 1fr); margin-top: 1.6rem; }
@media (min-width: 992px) { .why-grid { grid-template-columns: repeat(4, 1fr); } }
.why-tile { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: var(--r-md); padding: 1rem; }
.why-tile i { font-size: 1.4rem; color: var(--sun); display: block; margin-bottom: .6rem; }
.why-tile h3 { color: #fff; font-size: .96rem; margin-bottom: .3rem; }
.why-tile p { font-size: .82rem; color: #a9a2c6; margin: 0; }

/* 13. Reviews ============================================================== */
.review-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; height: 100%; display: flex; flex-direction: column;
}
.review-photo { aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist); }
.review-photo img { width: 100%; height: 100%; object-fit: cover; }
.review-body { padding: 1rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.review-text {
  font-size: .92rem; color: var(--ink-2); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.review-more { font-size: .82rem; font-weight: 700; color: var(--ink-4); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.review-more:hover { color: var(--brand); }
.review-card.is-open .review-text { -webkit-line-clamp: unset; }
.review-who { display: flex; align-items: center; gap: .6rem; margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--line); }
.review-who img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.review-who b { display: block; font-size: .88rem; color: var(--ink); font-weight: 700; }
.review-who span { font-size: .76rem; color: var(--ink-4); }
.review-src { margin-left: auto; font-size: .68rem; color: var(--ink-4); display: flex; align-items: center; gap: .25rem; }

.rating-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem; }
.rating-big { font-family: var(--display); font-weight: 800; font-size: 2.4rem; color: var(--ink); line-height: 1; }

/* 14. Quick info =========================================================== */
.quickinfo { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem; }
.quickinfo h3 { font-size: 1rem; margin-bottom: .75rem; }
.qi-list { display: grid; gap: .45rem; }
.qi-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem .9rem; border-radius: var(--r-md); background: var(--mist);
  font-weight: 600; font-size: .9rem; color: var(--ink-2);
}
.qi-item i:first-child { font-size: 1.2rem; color: var(--brand); }
.qi-item i:last-child  { margin-left: auto; color: var(--ink-4); transition: transform .18s ease; }
.qi-item:hover { background: var(--brand-050); color: var(--brand-700); }
.qi-item:hover i:last-child { transform: translateX(3px); }

/* 15. Footer =============================================================== */
.footer-shell { position: relative; background: var(--ink); color: #a9a2c6; padding-top: 5.5rem; }
.contact-float {
  position: absolute; top: 0; left: 50%; translate: -50% -50%;
  width: min(1080px, calc(100% - var(--gutter) * 2));
  background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  padding: 1.25rem clamp(1rem, 3vw, 2rem);
  display: grid; gap: 1rem; text-align: center;
}
@media (min-width: 768px) { .contact-float { grid-template-columns: 1fr 1px 1fr; align-items: center; gap: 2rem; text-align: left; } }
.contact-call { display: flex; align-items: center; justify-content: center; gap: .9rem; }
@media (min-width: 768px) { .contact-call { justify-content: flex-start; } }
.contact-call i { font-size: 2.4rem; color: #25d366; }
.contact-call small { display: block; font-size: .82rem; color: var(--ink-3); }
.contact-call b { font-family: var(--display); font-size: 1.5rem; color: var(--ink); letter-spacing: -.02em; }
.contact-div { display: none; background: var(--line); }
@media (min-width: 768px) { .contact-div { display: block; height: 46px; } }
.social-row { display: flex; gap: .5rem; justify-content: center; }
@media (min-width: 768px) { .social-row { justify-content: flex-end; } }
.social-row a {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--mist); color: var(--ink); font-size: 1.2rem; transition: .18s ease;
}
.social-row a:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }

.footer-grid { display: grid; gap: 2rem; padding-block: clamp(2rem, 4vw, 3rem); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
@media (min-width: 1100px){ .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer-shell h4 { color: #fff; font-size: .98rem; margin-bottom: .85rem; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footer-links a { color: #a9a2c6; font-size: .9rem; }
.footer-links a:hover { color: var(--sun); }
.footer-addr { display: flex; gap: .6rem; font-size: .86rem; line-height: 1.55; margin-top: 1rem; }
.footer-addr i { color: var(--sun); font-size: 1.1rem; flex: 0 0 auto; }

.newsletter { display: flex; gap: .5rem; margin-top: .8rem; }
.newsletter input {
  flex: 1; min-width: 0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px; padding: .72rem 1rem; color: #fff; font-size: .88rem; outline: none;
}
.newsletter input::placeholder { color: #7c769b; }
.newsletter input:focus { border-color: var(--brand); background: rgba(255,255,255,.1); }

.footer-base {
  border-top: 1px solid rgba(255,255,255,.1); padding-block: 1.1rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; justify-content: space-between;
  font-size: .82rem;
}
.footer-base .made { display: inline-flex; align-items: center; gap: .35rem; }
.footer-base .made i { color: var(--alert); }

/* 16. Chat widget + mobile action bar ====================================== */
.chat-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 1045;
  width: 56px; height: 56px; border-radius: 50%; border: 0;
  background: var(--brand); color: #fff; font-size: 1.5rem;
  box-shadow: 0 10px 30px rgba(200,30,15,.42); cursor: pointer;
  display: grid; place-items: center; transition: transform .2s ease;
}
.chat-fab:hover { transform: scale(1.06); }
.chat-fab .dot { position: absolute; top: 4px; right: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--sun); border: 2px solid #fff; }
@media (max-width: 991.98px) { .chat-fab { bottom: 84px; } }

.chat-panel {
  position: fixed; right: 16px; bottom: 84px; z-index: 1046;
  width: min(370px, calc(100vw - 32px));
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  overflow: hidden; transform-origin: bottom right;
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.97);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.chat-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
@media (max-width: 991.98px) { .chat-panel { bottom: 152px; } }
.chat-head { background: var(--ink); color: #fff; padding: 1rem 1.1rem; display: flex; align-items: center; gap: .75rem; }
.chat-head h4 { color: #fff; font-size: .98rem; margin: 0; }
.chat-head p { margin: 0; font-size: .76rem; color: #a9a2c6; }
.chat-head .close-x { margin-left: auto; background: none; border: 0; color: #a9a2c6; font-size: 1.3rem; cursor: pointer; }
.chat-body { padding: 1.1rem; display: grid; gap: .7rem; max-height: 62vh; overflow-y: auto; }
.chat-note { background: var(--brand-050); border-radius: var(--r-md); padding: .8rem .9rem; font-size: .86rem; color: var(--brand-700); }
.field-row { display: grid; gap: .7rem; }
@media (min-width: 400px) { .field-row--2 { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: .3rem; }
.field input, .field select, .field textarea {
  width: 100%; border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  padding: .68rem .8rem; font-size: .9rem; font-family: var(--body); color: var(--ink);
  background: #fff; outline: none; transition: border-color .16s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); }
.field textarea { resize: vertical; min-height: 80px; }
.form-note { font-size: .74rem; color: var(--ink-4); }

.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
  background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); padding: .6rem var(--gutter);
  display: flex; align-items: center; gap: .75rem;
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
}
@media (min-width: 992px) { .action-bar { display: none; } }
.action-bar .price { font-size: 1.12rem; }
.action-bar .btn-bt { margin-left: auto; }
body.has-action-bar { padding-bottom: 72px; }
@media (min-width: 992px) { body.has-action-bar { padding-bottom: 0; } }

/* 17. Tour detail ========================================================== */
.gallery { display: grid; gap: 6px; grid-template-columns: repeat(4, 1fr); border-radius: var(--r-lg); overflow: hidden; position: relative; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery > a { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.gallery > a:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: 8 / 6.1; }
@media (max-width: 767.98px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery > a { display: none; aspect-ratio: 16 / 11; }
  .gallery > a:first-child { display: block; grid-column: auto; grid-row: auto; aspect-ratio: 16 / 11; }
}
.gallery-all {
  position: absolute; right: .8rem; bottom: .8rem; z-index: 3;
  background: rgba(255,255,255,.95); color: var(--ink);
  border: 0; border-radius: 999px; padding: .55rem .9rem;
  font-size: .82rem; font-weight: 700; display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
}
.gallery-all:hover { background: #fff; box-shadow: var(--shadow-sm); }

.detail-layout { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 992px) { .detail-layout { grid-template-columns: 1fr 358px; gap: 2rem; } }

.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1rem, 2.4vw, 1.5rem); }
.panel + .panel { margin-top: 1rem; }
.panel h2 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); margin-bottom: .9rem; }
.panel h3 { font-size: 1rem; margin-bottom: .7rem; }

.buy-card { position: static; }
@media (min-width: 992px) { .buy-card { position: sticky; top: calc(var(--header-h) + 16px); } }
.buy-head { background: linear-gradient(120deg, #f4f7dc, #eef3cf); border-radius: var(--r-md); padding: .55rem .8rem; display: flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 700; color: #5c650a; margin-bottom: .9rem; }
.buy-price { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.buy-price .price { font-size: 1.9rem; }
.buy-emi { background: var(--brand-050); border-radius: var(--r-md); padding: .6rem .8rem; font-size: .82rem; color: var(--brand-700); font-weight: 600; margin-block: .8rem; display: flex; align-items: center; gap: .4rem; }
.buy-trust { display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: center; margin-top: .8rem; font-size: .78rem; color: var(--ink-3); }
.buy-trust span { display: inline-flex; align-items: center; gap: .3rem; }

/* trip details + inclusions */
.deal-card {
  background: linear-gradient(140deg, var(--brand), var(--brand-700) 55%, #4a0a02 100%);
  border-radius: var(--r-lg); padding: 1.25rem; color: #fff;
}
.deal-card h3 { color: #fff; text-align: center; font-size: 1.14rem; padding-bottom: .8rem; border-bottom: 1px solid rgba(255,255,255,.25); margin-bottom: .9rem; }
.deal-row { display: flex; align-items: center; gap: .8rem; }
.deal-row + .deal-row { margin-top: .85rem; }
.deal-row i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); font-size: 1.15rem; flex: 0 0 auto; }
.deal-row b { display: block; font-family: var(--display); font-size: 1.02rem; font-weight: 700; }
.deal-row span { font-size: .8rem; color: rgba(255,255,255,.72); }

.incl-grid { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 576px) { .incl-grid { grid-template-columns: 1fr 1fr; } }
.incl-item {
  display: flex; align-items: flex-start; gap: .75rem;
  border: 1.5px solid var(--brand-100); border-radius: 10px; padding: .8rem .9rem;
}
.incl-item i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-050); color: var(--brand); font-size: 1rem; flex: 0 0 auto; }
.incl-item b { display: block; font-size: .9rem; color: var(--ink); }
.incl-item span { font-size: .76rem; color: var(--ink-3); line-height: 1.35; }

/* option choosers */
.opt-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.opt-chip {
  border: 1.5px solid var(--line-2); background: #fff; border-radius: 999px;
  padding: .55rem .95rem; font-size: .85rem; font-weight: 700; color: var(--ink-2); cursor: pointer;
  position: relative; transition: .16s ease;
}
.opt-chip:hover { border-color: var(--brand); }
.opt-chip.is-active { border-color: var(--brand); color: var(--brand-700); background: var(--brand-050); }
.opt-chip.is-active::after {
  content: "\2713"; position: absolute; top: -7px; right: -5px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: #fff;
  font-size: .64rem; display: grid; place-items: center;
}

.dur-row { display: flex; gap: .7rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem; }
.dur-row::-webkit-scrollbar { display: none; }
.dur-opt { flex: 0 0 auto; width: 132px; cursor: pointer; }
.dur-opt-media { position: relative; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; border: 2px solid transparent; }
.dur-opt-media img { width: 100%; height: 100%; object-fit: cover; }
.dur-opt.is-active .dur-opt-media { border-color: var(--brand); }
.dur-opt-media b { position: absolute; left: .4rem; bottom: .4rem; z-index: 2; background: rgba(22,17,14,.75); color: #fff; font-size: .72rem; padding: .2rem .5rem; border-radius: 999px; }
.dur-opt small { display: block; font-size: .68rem; color: var(--ink-4); margin-top: .4rem; }
.dur-opt .price { font-size: .98rem; }

/* itinerary — the trail motif returns as a day spine */
.itin-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.itin { position: relative; }
.itin::before {
  content: ""; position: absolute; left: 27px; top: 12px; bottom: 12px; width: 2px;
  background-image: linear-gradient(180deg, var(--line-2) 55%, transparent 55%);
  background-size: 2px 8px;
}
@media (max-width: 575.98px) { .itin::before { left: 22px; } }
.itin-day { position: relative; border-bottom: 1px solid var(--line); }
.itin-day:last-child { border-bottom: 0; }
.itin-btn {
  width: 100%; display: flex; align-items: center; gap: .85rem; text-align: left;
  background: none; border: 0; padding: .95rem 0; cursor: pointer;
}
.itin-pin {
  width: 56px; flex: 0 0 auto; z-index: 2;
  font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .08em;
  background: #fff; color: var(--ink); border: 1.5px solid var(--line-2);
  border-radius: 999px; padding: .3rem 0; text-align: center;
}
@media (max-width: 575.98px) { .itin-pin { width: 46px; font-size: .58rem; } }
.itin-btn[aria-expanded="true"] .itin-pin { background: var(--brand); border-color: var(--brand); color: #fff; }
.itin-title { font-weight: 700; font-size: .94rem; color: var(--ink); flex: 1; min-width: 0; }
.itin-btn > i { color: var(--ink-4); transition: transform .2s ease; flex: 0 0 auto; }
.itin-btn[aria-expanded="true"] > i { transform: rotate(180deg); color: var(--brand); }
.itin-panel { display: none; padding: 0 0 1rem 4.4rem; font-size: .9rem; color: var(--ink-3); }
@media (max-width: 575.98px) { .itin-panel { padding-left: 3.6rem; } }
.itin-day.is-open .itin-panel { display: block; animation: fadeUp .25s ease both; }
.itin-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }

.expert-card { background: var(--mist); border-radius: var(--r-lg); padding: 1.1rem; }
.expert-card p { font-size: .84rem; color: var(--ink-3); margin-bottom: .8rem; }

/* 18. Listing page ========================================================= */
.filter-bar {
  position: sticky; top: var(--header-h); z-index: 1020;
  background: rgba(255,255,255,.96); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); padding-block: .7rem;
}
.chip-row { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
  border: 1.5px solid var(--line-2); background: #fff; border-radius: 999px;
  padding: .5rem .9rem; font-size: .85rem; font-weight: 700; color: var(--ink-2); cursor: pointer;
  transition: .16s ease; white-space: nowrap;
}
.chip:hover { border-color: var(--brand); color: var(--brand-700); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip .count { font-family: var(--mono); font-size: .68rem; opacity: .65; }

.month-chip { flex-direction: column; gap: 0; padding: .45rem .9rem; min-width: 66px; text-align: center; }
.month-chip b { font-size: .88rem; line-height: 1.15; }
.month-chip small { font-family: var(--mono); font-size: .6rem; opacity: .6; }

.grid-trips { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 576px) { .grid-trips { gap: 1rem; } }
/* two cards per row on phones, as requested */
@media (min-width: 768px)   { .grid-trips { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px)  { .grid-trips { grid-template-columns: repeat(4, 1fr); } }

.empty-state { text-align: center; padding: 3rem 1rem; }
.empty-state i { font-size: 2.6rem; color: var(--line-2); display: block; margin-bottom: .75rem; }

.page-hero { background: var(--ink); color: #cfc9e4; padding-block: clamp(1.75rem, 4vw, 3rem); }
.page-hero h1 { color: #fff; }
.crumbs { font-size: .8rem; color: #8f89ab; margin-bottom: .6rem; }
.crumbs a { color: #cfc9e4; }
.crumbs a:hover { color: var(--sun); }

/* 19. Motion + accessibility =============================================== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 2000;
  background: var(--ink); color: #fff; padding: .7rem 1rem; border-radius: 0 0 10px 10px; font-weight: 700;
}
.skip-link:focus { top: 0; color: #fff; }

.visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .topbar, .chat-fab, .chat-panel, .action-bar, .footer-shell { display: none !important; }
}

/* ==========================================================================
   20. Revision 2 — added after client review
   --------------------------------------------------------------------------
   20.1 Compact trip card (phones now show two per row)
   20.2 Contact card / footer overlap fix
   20.3 Location landing pages
   20.4 Image lightbox
   ========================================================================== */

/* 20.1 Compact trip card ---------------------------------------------------
   At two-up on a 360px screen a card is ~165px wide, so the type, padding and
   control sizes all step down. Route and date lines are already hidden. */
@media (max-width: 575.98px) {
  .trip-body   { padding: .65rem .7rem .75rem; gap: .35rem; }
  .trip-title  { font-size: .88rem; line-height: 1.28; }
  .trip-media  { aspect-ratio: 1 / 1; }
  .trip-meta   { left: .45rem; right: .45rem; bottom: .45rem; }
  .trip-meta .pill { font-size: .64rem; padding: .3rem .5rem; }
  .trip-badge  { top: .45rem; left: .45rem; font-size: .62rem; padding: .28rem .5rem; }
  .trip-save   { top: .45rem; right: .45rem; width: 28px; height: 28px; font-size: .85rem; }
  .trip-foot   { padding-top: .55rem; flex-direction: column; align-items: stretch; gap: .5rem; }
  .trip-foot .price { font-size: 1.02rem; }
  .trip-foot .price small { font-size: .62rem; }
  .trip-foot .price-was { font-size: .7rem; }
  .trip-foot .btn-bt { width: 100%; padding: .5rem .6rem; font-size: .78rem; }

  .poster-card  { aspect-ratio: 3 / 4.1; }
  .poster-body  { padding: .7rem; }
  .poster-body h3 { font-size: 1rem; }
  .poster-price { font-size: 1.05rem; }
  .poster-go    { width: 32px; height: 32px; right: .55rem; bottom: .7rem; font-size: .85rem; }

  .review-card .review-body { padding: .8rem; }
  .review-text { font-size: .84rem; -webkit-line-clamp: 5; }
}

/* 20.2 Contact card / footer overlap --------------------------------------
   The white contact card is pulled halfway out of the footer, so the space it
   needs depends on how tall it renders at that breakpoint. main.js measures it
   and writes --contact-h; these two rules reserve the room on both sides so it
   can never sit on top of the section above. */
.footer-shell {
  margin-top: calc(var(--contact-h, 190px) / 2 + 1.75rem);
  padding-top: calc(var(--contact-h, 190px) / 2 + 2.75rem);
}
.contact-float { top: 0; }

/* 20.3 Location landing pages ---------------------------------------------- */
.dest-rail--page { position: sticky; top: var(--header-h); z-index: 1020; }

.loc-hero { position: relative; background: var(--ink); overflow: hidden; }
.loc-hero-media { position: absolute; inset: 0; }
.loc-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.loc-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(22,17,14,.9) 0%, rgba(22,17,14,.62) 55%, rgba(22,17,14,.35) 100%);
}
.loc-hero-inner { position: relative; z-index: 2; padding-block: clamp(1.75rem, 5vw, 3.25rem); color: #fff; }
.loc-hero-inner h1 { color: #fff; font-size: clamp(1.9rem, 5vw, 3.2rem); }
.loc-hero-inner p { color: rgba(255,255,255,.84); max-width: 52ch; margin-top: .7rem; }
.loc-stats { display: flex; flex-wrap: wrap; gap: .5rem .5rem; margin-top: 1.1rem; }
.loc-stats .pill { background: rgba(255,255,255,.13); color: #fff; border: 1px solid rgba(255,255,255,.22); }

/* the Tour Package / Group Trip / Attractions switcher from the reference */
.loc-tabs { background: #fff; border-bottom: 1px solid var(--line); padding-block: .8rem; }
.loc-tab-row { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
.loc-tab-row::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .loc-tab-row { justify-content: center; } }
.loc-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem;
  border: 1.5px solid var(--line-2); background: #fff; border-radius: 999px;
  padding: .6rem 1.1rem; font-weight: 700; font-size: .88rem; color: var(--ink-2);
  cursor: pointer; transition: .16s ease; white-space: nowrap;
}
.loc-tab i { font-size: 1.15rem; }
.loc-tab:hover { border-color: var(--brand); color: var(--brand-700); }
.loc-tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.attraction-card { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; color: #fff; }
.attraction-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.attraction-card:hover img { transform: scale(1.06); }
.attraction-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(22,17,14,.85)); }
.attraction-body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: .85rem; }
.attraction-body h3 { color: #fff; font-size: 1rem; margin-bottom: .15rem; }
.attraction-body span { font-size: .76rem; color: rgba(255,255,255,.75); }

.loc-intro { columns: 1; }
@media (min-width: 992px) { .loc-intro { columns: 2; column-gap: 2.5rem; } }
.loc-intro p { break-inside: avoid; }

/* 20.4 Lightbox ------------------------------------------------------------
   Replaces the grid modal. Images are contained, never cropped, and the frame
   is sized against the device viewport. */
.lb {
  position: fixed; inset: 0; z-index: 1080;
  background: rgba(14, 9, 7, .96);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s;
  padding: 4.5rem 5rem 4.5rem;
}
.lb.is-open { opacity: 1; visibility: visible; }
.lb-figure {
  margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center; gap: .85rem;
  width: 100%; height: 100%; min-height: 0;
}
.lb-img {
  display: block; min-height: 0;
  /* explicit, so the default grid stretch can't letterbox the frame */
  place-self: center;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  border-radius: 14px; background: #221510;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.lb-cap { color: #cfc9e4; font-size: .86rem; text-align: center; max-width: 60ch; }

.lb-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .45rem;
  height: 48px; padding: 0 1.15rem 0 1rem; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #fff;
  font-family: var(--body); font-weight: 700; font-size: .88rem;
  backdrop-filter: blur(10px); cursor: pointer; transition: .18s ease;
}
.lb-close i { font-size: 1.35rem; }
.lb-close:hover { background: #fff; color: var(--ink); transform: scale(1.04); }

.lb-arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 3;
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.12); color: #fff; font-size: 1.4rem;
  display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(10px);
  transition: .18s ease;
}
.lb-arrow:hover { background: #fff; color: var(--ink); }
.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }

.lb-count {
  position: absolute; left: 50%; bottom: 1.15rem; translate: -50% 0; z-index: 3;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; color: #cfc9e4;
  background: rgba(255,255,255,.1); border-radius: 999px; padding: .45rem 1rem;
  backdrop-filter: blur(10px);
}

/* phones: full-bleed frame, thumb-reachable controls */
@media (max-width: 991.98px) { .lb { padding: 4.25rem 3.5rem; } }

@media (max-width: 767.98px) {
  /* arrows drop to the thumb zone, so the frame only needs side breathing room */
  .lb { padding: 4rem .75rem 5.5rem; }
  .lb-img { border-radius: 12px; }
  .lb-close { top: .75rem; right: .75rem; height: 42px; padding: 0 .95rem 0 .8rem; font-size: .82rem; }
  .lb-arrow { top: auto; bottom: 1rem; translate: none; width: 46px; height: 46px; }
  .lb-prev { left: 1.25rem; }
  .lb-next { right: 1.25rem; }
  .lb-count { bottom: 1.65rem; font-size: .7rem; padding: .35rem .8rem; }
  .lb-cap { font-size: .78rem; }
}
@media (max-width: 380px) { .lb-close span { display: none; } .lb-close { padding: 0; width: 44px; justify-content: center; } }

body.lb-open { overflow: hidden; }

/* the gallery tiles are buttons for the lightbox now */
.gallery > a { cursor: zoom-in; }

@media (max-height: 460px) {
  .lb { padding: 3.25rem 3.5rem; }
  .lb-cap { display: none; }
  .lb-figure { grid-template-rows: minmax(0, 1fr); }
}

/* ==========================================================================
   21. Revision 5 — booking flow, accounts, dashboard, sidebar filters
   --------------------------------------------------------------------------
   21.1  Six-up poster grid
   21.2  Sidebar filter listing (tour-location)
   21.3  Mobile filter sheets
   21.4  Auth modal + OTP
   21.5  Booking flow: steps, travellers, add-ons, fare summary
   21.6  Payment page
   21.7  Dashboard
   ========================================================================== */

/* 21.1 Six-up poster grid --------------------------------------------------- */
.grid-6 { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 576px) { .grid-6 { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 992px) { .grid-6 { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 992px) { .grid-6 .poster-card { aspect-ratio: 3 / 4.2; } }
@media (min-width: 992px) {
  .grid-6 .poster-body h3 { font-size: 1.02rem; }
  .grid-6 .poster-price   { font-size: 1.08rem; }
  .grid-6 .poster-go      { width: 34px; height: 34px; font-size: .85rem; right: .6rem; bottom: .75rem; }
}

/* 21.2 Sidebar filter listing ---------------------------------------------- */
.listing-layout { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 992px) { .listing-layout { grid-template-columns: 274px 1fr; gap: 1.5rem; } }

.filter-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 992px) { .filter-panel { position: sticky; top: calc(var(--header-h) + 14px); max-height: calc(100vh - var(--header-h) - 28px); overflow-y: auto; } }
.filter-panel-head { padding: 1rem 1.1rem .75rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.filter-panel-head h2 { font-size: 1.02rem; margin: 0; }
.filter-clear { background: none; border: 0; padding: 0; font-size: .8rem; font-weight: 700; color: var(--brand); cursor: pointer; }
.filter-group { padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
.filter-group:last-child { border-bottom: 0; }
.filter-group h3 { font-size: .88rem; margin-bottom: .7rem; }
.filter-search { position: relative; }
.filter-search i { position: absolute; left: .8rem; top: 50%; translate: 0 -50%; color: var(--ink-4); }
.filter-search input { width: 100%; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); padding: .65rem .8rem .65rem 2.3rem; font-size: .88rem; outline: none; font-family: var(--body); }
.filter-search input:focus { border-color: var(--brand); }

.switch-row { display: flex; align-items: center; gap: .75rem; }
.switch-row div { flex: 1; }
.switch-row b { display: block; font-size: .9rem; color: var(--ink); }
.switch-row span { font-size: .78rem; color: var(--ink-3); }
.switch { position: relative; width: 46px; height: 26px; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--line-2); transition: .18s ease; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: .18s ease; box-shadow: var(--shadow-sm); }
.switch input:checked + i { background: var(--brand); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { outline: 3px solid var(--brand); outline-offset: 2px; }

.range-wrap { padding-top: .35rem; }
.range-vals { display: flex; justify-content: space-between; margin-bottom: .6rem; }
.range-vals span { font-family: var(--mono); font-size: .74rem; font-weight: 600; color: var(--ink); background: var(--mist); border: 1px solid var(--line-2); border-radius: 999px; padding: .25rem .6rem; }
.range-track { position: relative; height: 26px; }
.range-track input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 26px; margin: 0;
  background: none; appearance: none; pointer-events: none;
}
.range-track::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 4px; background: var(--line-2); }
.range-fill { position: absolute; top: 11px; height: 4px; border-radius: 4px; background: var(--brand); }
.range-track input[type="range"]::-webkit-slider-thumb {
  appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--brand); cursor: grab; box-shadow: var(--shadow-sm); margin-top: 0;
}
.range-track input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--brand); cursor: grab;
}

.check-row { display: flex; align-items: center; gap: .6rem; padding: .38rem 0; cursor: pointer; }
.check-row input { width: 17px; height: 17px; accent-color: var(--brand); flex: 0 0 auto; cursor: pointer; }
.check-row span { font-size: .88rem; color: var(--ink-2); flex: 1; }
.check-row .count { font-family: var(--mono); font-size: .7rem; color: var(--ink-4); }

.pick-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.pick {
  border: 1.5px solid var(--line-2); background: #fff; border-radius: var(--r-sm);
  padding: .45rem .75rem; font-size: .8rem; font-weight: 600; color: var(--ink-2); cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem; transition: .16s ease;
}
.pick:hover { border-color: var(--brand); }
.pick.is-active { border-color: var(--brand); background: var(--brand-050); color: var(--brand-700); }

/* the circular "select your experience" strip */
.exp-strip { background: var(--brand-050); border: 1px solid var(--brand-100); border-radius: var(--r-lg); padding: 1rem; margin-bottom: 1rem; }
.exp-strip-head { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: .85rem; }
.exp-strip-head span { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-700); }
.exp-strip-head i { color: var(--sun); }
.exp-row { display: flex; gap: 1rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; }
.exp-row::-webkit-scrollbar { display: none; }
.exp-item { flex: 0 0 auto; width: 90px; text-align: center; background: none; border: 0; padding: 0; cursor: pointer; }
.exp-item img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; border: 3px solid transparent; transition: .18s ease; }
.exp-item span { display: block; font-size: .74rem; font-weight: 600; color: var(--ink-2); margin-top: .4rem; line-height: 1.2; }
.exp-item:hover img { border-color: var(--brand-100); }
.exp-item.is-active img { border-color: var(--brand); }
.exp-item.is-active span { color: var(--brand-700); }

/* 21.3 Mobile filter bar + sheets ------------------------------------------ */
.mfilter-bar {
  position: sticky; top: var(--header-h); z-index: 1025;
  background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); padding: .6rem 0;
}
@media (min-width: 992px) { .mfilter-bar { display: none; } }
.mfilter-row { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; }
.mfilter-row::-webkit-scrollbar { display: none; }
.mfilter-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
  border: 1.5px solid var(--line-2); background: #fff; border-radius: 999px;
  padding: .5rem .9rem; font-size: .84rem; font-weight: 700; color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.mfilter-btn:hover, .mfilter-btn.is-active { border-color: var(--brand); color: var(--brand-700); }
.mfilter-btn .badge-n { background: var(--brand); color: #fff; border-radius: 999px; font-size: .64rem; padding: .1rem .35rem; }

.sheet-scrim {
  position: fixed; inset: 0; z-index: 1060; background: rgba(22,17,14,.55);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
}
.sheet-scrim.is-open { opacity: 1; visibility: visible; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1061;
  background: #fff; border-radius: var(--r-xl) var(--r-xl) 0 0;
  max-height: 86vh; display: flex; flex-direction: column;
  transform: translateY(101%); transition: transform .26s cubic-bezier(.22,.61,.36,1);
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet.is-open { transform: translateY(0); }
.sheet-head { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); }
.sheet-head h3 { margin: 0; font-size: 1.15rem; }
.sheet-head .sheet-x { background: none; border: 0; font-size: 1.5rem; color: var(--ink); cursor: pointer; padding: 0; line-height: 1; }
.sheet-head .filter-clear { margin-left: auto; }
.sheet-body { padding: .25rem 1.15rem 1rem; overflow-y: auto; flex: 1; }
.sheet-body .filter-group { padding-inline: 0; }
.sheet-foot { padding: .85rem 1.15rem; border-top: 1px solid var(--line); }

/* 21.4 Auth modal ---------------------------------------------------------- */
.auth-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1.5px solid var(--line-2); background: #fff; border-radius: 999px;
  padding: .5rem .95rem; font-weight: 700; font-size: .86rem; color: var(--ink); cursor: pointer;
}
.auth-btn:hover { border-color: var(--brand); color: var(--brand-700); }
.auth-btn i { font-size: 1.15rem; }

.auth-dialog .modal-content { border: 0; border-radius: var(--r-xl); overflow: hidden; }
.auth-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .auth-grid { grid-template-columns: 44% 1fr; } }
.auth-promo { position: relative; display: none; min-height: 420px; }
@media (min-width: 768px) { .auth-promo { display: block; } }
.auth-promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth-promo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,17,14,.25), rgba(22,17,14,.85)); }
.auth-promo-body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 1.5rem; color: #fff; }
.auth-promo-body h3 { color: #fff; font-size: 1.35rem; margin-bottom: .4rem; }
.auth-promo-body p { color: rgba(255,255,255,.82); font-size: .88rem; margin: 0; }
.auth-panel { padding: 1.5rem 1.4rem 1.6rem; position: relative; }
.auth-x { position: absolute; top: .9rem; right: .9rem; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--mist); color: var(--ink); font-size: 1.15rem; cursor: pointer; }
.auth-x:hover { background: var(--ink); color: #fff; }
.auth-tabs { display: flex; gap: .25rem; background: var(--mist); border-radius: 999px; padding: .25rem; margin-bottom: 1.25rem; }
.auth-tab { flex: 1; border: 0; background: none; border-radius: 999px; padding: .6rem .5rem; font-weight: 700; font-size: .84rem; color: var(--ink-3); cursor: pointer; }
.auth-tab.is-active { background: var(--brand); color: #fff; }
.auth-step { display: none; }
.auth-step.is-active { display: block; animation: fadeUp .25s ease both; }
.phone-field { display: flex; align-items: stretch; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; }
.phone-field:focus-within { border-color: var(--brand); }
.phone-cc { display: flex; align-items: center; gap: .35rem; padding: .7rem .8rem; background: var(--mist); font-weight: 700; font-size: .9rem; border-right: 1.5px solid var(--line-2); }
.phone-field input { flex: 1; border: 0; padding: .7rem .8rem; font-size: .95rem; font-family: var(--body); outline: none; min-width: 0; }
.auth-or { display: flex; align-items: center; gap: .75rem; margin: 1.15rem 0; color: var(--ink-4); font-size: .78rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-social { display: flex; gap: .6rem; justify-content: center; }
.auth-social button {
  width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--line-2);
  background: #fff; font-size: 1.35rem; cursor: pointer; display: grid; place-items: center; transition: .16s ease;
}
.auth-social button:hover { border-color: var(--brand); transform: translateY(-2px); }
.auth-legal { font-size: .74rem; color: var(--ink-4); margin-top: 1.1rem; margin-bottom: 0; }
.auth-back { background: none; border: 0; padding: 0; font-size: .84rem; font-weight: 700; color: var(--ink-3); cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; margin-bottom: .9rem; }
.auth-back:hover { color: var(--brand); }

.otp-row { display: flex; gap: .5rem; justify-content: space-between; margin: 1rem 0 .8rem; }
.otp-row input {
  width: 100%; max-width: 52px; aspect-ratio: 1; text-align: center;
  font-family: var(--mono); font-size: 1.25rem; font-weight: 600; color: var(--ink);
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm); outline: none; background: #fff;
}
.otp-row input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-050); }
.otp-row input.is-filled { border-color: var(--brand); }
.otp-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .8rem; color: var(--ink-3); }
.otp-resend { background: none; border: 0; padding: 0; font-weight: 700; color: var(--brand); cursor: pointer; }
.otp-resend:disabled { color: var(--ink-4); cursor: default; }
.otp-hint { background: var(--sun-050); border-radius: var(--r-sm); padding: .55rem .7rem; font-size: .78rem; color: #8f4a05; margin-top: .8rem; }

/* signed-in chip in the header */
.user-chip { display: inline-flex; align-items: center; gap: .5rem; border: 1.5px solid var(--line-2); background: #fff; border-radius: 999px; padding: .3rem .8rem .3rem .35rem; font-weight: 700; font-size: .84rem; color: var(--ink); }
.user-chip .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: .74rem; }

/* 21.5 Booking flow -------------------------------------------------------- */
.steps { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.step { display: inline-flex; align-items: center; gap: .5rem; font-size: .84rem; font-weight: 700; color: var(--ink-4); }
.step b { width: 24px; height: 24px; border-radius: 50%; background: var(--line); color: var(--ink-3); display: grid; place-items: center; font-size: .72rem; }
.step.is-done b { background: var(--olive); color: #fff; }
.step.is-now  { color: var(--ink); }
.step.is-now b { background: var(--brand); color: #fff; }
.step-sep { width: 22px; height: 1.5px; background: var(--line-2); }

.counter { display: inline-flex; align-items: center; gap: .75rem; }
.counter button {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line-2);
  background: #fff; color: var(--ink); font-size: 1.1rem; cursor: pointer; display: grid; place-items: center;
}
.counter button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.counter button:disabled { opacity: .35; cursor: not-allowed; }
.counter output { font-family: var(--display); font-weight: 800; font-size: 1.1rem; min-width: 1.6rem; text-align: center; }

.pax-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.pax-row:last-child { border-bottom: 0; }
.pax-row b { display: block; font-size: .94rem; color: var(--ink); }
.pax-row span { font-size: .8rem; color: var(--ink-3); }

.trav-card { border: 1.5px solid var(--line); border-radius: 10px; padding: 1rem; }
.trav-card + .trav-card { margin-top: .75rem; }
.trav-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .85rem; }
.trav-head h4 { margin: 0; font-size: .95rem; }
.trav-remove { background: none; border: 0; color: var(--ink-4); font-size: 1.15rem; cursor: pointer; padding: 0; }
.trav-remove:hover { color: var(--alert); }

.slot-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.slot {
  border: 1.5px solid var(--line-2); background: #fff; border-radius: 10px;
  padding: .65rem .9rem; cursor: pointer; text-align: left; transition: .16s ease; min-width: 128px;
}
.slot:hover { border-color: var(--brand); }
.slot.is-active { border-color: var(--brand); background: var(--brand-050); }
.slot b { display: block; font-size: .88rem; color: var(--ink); }
.slot span { font-family: var(--mono); font-size: .7rem; color: var(--ink-3); }

.addon {
  display: flex; align-items: flex-start; gap: .85rem;
  border: 1.5px solid var(--line); border-radius: 10px; padding: .9rem 1rem; cursor: pointer;
}
.addon + .addon { margin-top: .7rem; }
.addon:hover { border-color: var(--brand-100); }
.addon.is-active { border-color: var(--brand); background: var(--brand-050); }
.addon input { width: 18px; height: 18px; accent-color: var(--brand); margin-top: .15rem; flex: 0 0 auto; }
.addon i.ico { font-size: 1.4rem; color: var(--brand); flex: 0 0 auto; }
.addon b { display: block; font-size: .92rem; color: var(--ink); }
.addon span { font-size: .8rem; color: var(--ink-3); line-height: 1.4; display: block; }
.addon .amt { margin-left: auto; font-family: var(--display); font-weight: 800; font-size: .95rem; color: var(--ink); white-space: nowrap; }

.fare-list { display: grid; gap: .55rem; }
.fare-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .88rem; }
.fare-row span:first-child { color: var(--ink-3); }
.fare-row span:last-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
.fare-row.is-off span:last-child { color: var(--olive); }
.fare-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: .9rem; padding-top: .9rem; border-top: 1.5px dashed var(--line-2); }
.fare-total b { font-family: var(--display); font-size: 1.5rem; color: var(--ink); }

/* 21.6 Payment ------------------------------------------------------------- */
.pay-option {
  display: flex; align-items: center; gap: .9rem; width: 100%;
  background: #fff; border: 0; border-bottom: 1px solid var(--line);
  padding: 1rem .25rem; cursor: pointer; text-align: left;
}
.pay-option:last-child { border-bottom: 0; }
.pay-option:hover { background: var(--mist); }
.pay-option.is-active { background: var(--brand-050); }
.pay-option > i:first-child { width: 40px; height: 40px; border-radius: 10px; background: var(--mist); color: var(--brand); display: grid; place-items: center; font-size: 1.25rem; flex: 0 0 auto; }
.pay-option b { display: block; font-size: .94rem; color: var(--ink); }
.pay-option span { font-size: .8rem; color: var(--ink-3); }
.pay-option > i:last-child { margin-left: auto; color: var(--ink-4); }
.pay-body { display: none; padding: 0 .25rem 1.1rem; }
.pay-option.is-active + .pay-body { display: block; animation: fadeUp .22s ease both; }

.coupon-field { display: flex; gap: .5rem; }
.coupon-field input { flex: 1; min-width: 0; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); padding: .68rem .8rem; font-family: var(--mono); font-size: .86rem; text-transform: uppercase; outline: none; }
.coupon-field input:focus { border-color: var(--brand); }
.coupon {
  display: flex; align-items: flex-start; gap: .7rem;
  border: 1.5px solid var(--line); border-radius: 10px; padding: .8rem .9rem; margin-top: .6rem;
}
.coupon.is-applied { border-color: var(--olive); background: #f7f9e6; }
.coupon i { font-size: 1.2rem; color: var(--brand); }
.coupon b { display: block; font-family: var(--mono); font-size: .82rem; color: var(--ink); }
.coupon span { font-size: .78rem; color: var(--ink-3); }
.coupon-act { margin-left: auto; background: none; border: 0; padding: 0; font-weight: 700; font-size: .82rem; color: var(--brand); cursor: pointer; white-space: nowrap; }
.coupon-off { font-family: var(--display); font-weight: 800; color: var(--olive); white-space: nowrap; }

.gift-card { border: 1.5px dashed var(--line-2); border-radius: 10px; padding: 1rem; background: var(--sun-050); }
.gift-card h3 { font-size: .95rem; margin-bottom: .25rem; }

.secure-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; font-size: .78rem; color: var(--ink-3); }
.secure-strip span { display: inline-flex; align-items: center; gap: .35rem; }
.secure-strip i { color: var(--olive); font-size: 1rem; }

/* 21.7 Dashboard ----------------------------------------------------------- */
.dash-layout { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 992px) { .dash-layout { grid-template-columns: 250px 1fr; gap: 1.75rem; } }

.dash-nav { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: .6rem; }
@media (min-width: 992px) { .dash-nav { position: sticky; top: calc(var(--header-h) + 14px); } }
.dash-user { display: flex; align-items: center; gap: .7rem; padding: .8rem .7rem 1rem; border-bottom: 1px solid var(--line); margin-bottom: .5rem; }
.dash-user .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 800; }
.dash-user b { display: block; font-size: .95rem; color: var(--ink); }
.dash-user span { font-size: .78rem; color: var(--ink-4); }
.dash-links { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; }
.dash-links::-webkit-scrollbar { display: none; }
@media (min-width: 992px) { .dash-links { flex-direction: column; overflow: visible; } }
.dash-link {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .6rem; width: auto;
  border: 0; background: none; border-radius: 10px; padding: .7rem .8rem;
  font-weight: 600; font-size: .9rem; color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
@media (min-width: 992px) { .dash-link { width: 100%; } }
.dash-link i { font-size: 1.2rem; color: var(--ink-4); }
.dash-link:hover { background: var(--mist); }
.dash-link.is-active { background: var(--brand); color: #fff; }
.dash-link.is-active i { color: #fff; }
.dash-link .badge-n { margin-left: auto; font-family: var(--mono); font-size: .68rem; background: var(--brand-050); color: var(--brand-700); border-radius: 999px; padding: .1rem .4rem; }
.dash-link.is-active .badge-n { background: rgba(255,255,255,.22); color: #fff; }

.dash-pane { display: none; }
.dash-pane.is-active { display: block; animation: fadeUp .25s ease both; }

.booking-row {
  display: grid; gap: 1rem; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: .85rem;
}
@media (min-width: 640px) { .booking-row { grid-template-columns: 116px 1fr auto; } }
.booking-row + .booking-row { margin-top: .75rem; }
.booking-row.is-next { border-color: var(--brand-100); box-shadow: var(--shadow-sm); }
.booking-thumb { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; }
.booking-thumb img { width: 100%; height: 100%; object-fit: cover; }
.booking-main h3 { font-size: 1.02rem; margin-bottom: .25rem; }
.booking-meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .8rem; color: var(--ink-3); }
.booking-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.booking-side { display: flex; flex-direction: row; gap: .5rem; align-items: center; }
@media (min-width: 640px) { .booking-side { flex-direction: column; align-items: flex-end; } }
.countdown { font-family: var(--mono); font-size: .72rem; color: var(--brand-700); background: var(--brand-050); border-radius: 999px; padding: .3rem .65rem; }

.table-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.bt-table { width: 100%; border-collapse: collapse; min-width: 660px; }
.bt-table th, .bt-table td { padding: .85rem 1rem; text-align: left; font-size: .88rem; border-bottom: 1px solid var(--line); }
.bt-table th { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); background: var(--mist); }
.bt-table tbody tr:last-child td { border-bottom: 0; }
.bt-table tbody tr:hover { background: var(--mist); }
.bt-table .num { font-family: var(--mono); font-size: .82rem; }
.bt-table .amt { font-weight: 700; color: var(--ink); white-space: nowrap; }
.table-scroll { overflow-x: auto; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid var(--line-2);
  background: #fff; color: var(--ink-2); cursor: pointer; display: inline-grid; place-items: center; font-size: 1rem;
}
.icon-btn:hover { border-color: var(--brand); color: var(--brand); }
.status { font-size: .74rem; font-weight: 700; border-radius: 999px; padding: .25rem .6rem; white-space: nowrap; }
.status--paid { background: #f2f5da; color: #5c650a; }
.status--due  { background: var(--sun-050); color: #8f4a05; }
.status--ref  { background: var(--brand-050); color: var(--brand-700); }

.empty-pane { text-align: center; padding: 3rem 1rem; background: #fff; border: 1px dashed var(--line-2); border-radius: var(--r-lg); }
.empty-pane i { font-size: 2.4rem; color: var(--line-2); display: block; margin-bottom: .6rem; }

/* breadcrumbs are noise on a phone — the back gesture already covers it */
@media (max-width: 767.98px) { .crumbs { display: none; } }