/* ═══════════════════════════════════════════
   TREKKARO 2026 — DESIGN SYSTEM (trek.php)
═══════════════════════════════════════════ */
:root {
  --cream:   #fdf9f4;
  --cream-2: #ffffff;
  --cream-3: #f5f0ea;
  --red:     #cc1a1a;
  --red-dk:  #a01010;
  --gold-l:  #ffbbbb;
  --gold-ll: #fff0f0;
  --ink:     #111111;
  --ink-2:   #222222;
  --ink-3:   #555555;
  --border:  rgba(255,51,51,.15);
  --sh-sm:   0 2px 16px rgba(255,51,51,.07);
  --sh-md:   0 8px 40px rgba(255,51,51,.11);
  --sh-lg:   0 24px 80px rgba(255,51,51,.14);
  --serif:   'Playfair Display', Georgia, serif;
  --sans:    'TKRupee', 'DM Sans', 'Noto Sans', Arial, sans-serif;
  --radius:  4px;
  --transition: all .3s cubic-bezier(.4,0,.2,1);
}

/* ── Rupee symbol fix: force system font so <span class="tk-rupee">&#8377;</span> renders on all devices ── */
.tk-rupee { font-family: Arial, 'Helvetica Neue', sans-serif !important; font-style: normal !important; }


*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--sans); }

/* ── Zero out Bootstrap container/row side padding globally on this page ── */
.container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Re-allow column padding inside the main content wrap only */
.tk-content-wrap .col-xs-12,
.tk-content-wrap .col-sm-12,
.tk-content-wrap [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

body{
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  text-shadow: none;
  letter-spacing: .3px;
  margin: 0; padding: 0;
  max-width: 100%;
  /* Do NOT set overflow-x here — it breaks position:sticky on all descendants.
     Horizontal overflow is clipped by .tk-page-clip wrapper below. */
}
/* Clip horizontal overflow without breaking sticky positioning.
   overflow-x:hidden on a positioned element creates a scroll container
   which kills position:sticky on all descendants (sidebar card).
   max-width:100vw prevents overflow visually without becoming a scroll container. */
.tk-page-clip {
  max-width: 100vw;
  width: 100%;
  position: relative;
}

.question{color:var(--red);font-size:18px;}
a{text-decoration:none;transition:var(--transition);}
a:hover{text-decoration:none;}

.top-right {
  position: absolute;
  top: 8px; right: 10px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  text-align: center;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  width: 100%;
}
.hero-text button {
  border: none; outline: 0;
  display: inline-block;
  padding: 10px 25px;
  background-color: var(--red);
  color: #fff;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
}
.hero-text button:hover { background-color: var(--red-dk); color: #fff; }

.menu-area{background: var(--ink-2);}
.dropdown-menu{padding:8px 0;width:100%;margin:0;border:1px solid var(--border)!important;border-radius:var(--radius);box-shadow:var(--sh-md)!important;}

.sidebar { margin:0;padding:0;width:200px;position:fixed;height:100%;overflow:auto; }
.sidebar a { display:block;color:var(--ink);padding:16px;text-decoration:none; }
.sidebar a.active { background-color:var(--red);color:white; }
.sidebar a:hover:not(.active) { background-color:var(--gold-ll);color:var(--red); }

.card{ background:var(--cream-3);color:var(--ink); }
#bch{ background:var(--cream-3);color:var(--ink);padding:10px 15px;text-transform:capitalize; }

/* ── Batch availability: an open month shows about four batches and scrolls inside
      itself. The native bar auto-hides on macOS, so it is hidden and the script
      draws a permanent one in the same red as the "Trek By Name" list. ── */
.tk-hol{display:block;color:#b26a00;font-size:11px;font-weight:700;letter-spacing:.02em;margin-top:1px;line-height:1.4;}
.tk-batch-scroll{ overscroll-behavior:contain; scrollbar-width:none; -ms-overflow-style:none; }
.tk-batch-scroll::-webkit-scrollbar{ width:0; height:0; display:none; }
.tk-batch-rail{
  position:absolute; right:5px; width:7px; border-radius:4px;
  background:#f0ece6; border:1px solid #e6ded2; z-index:4; display:none;
}
.tk-batch-rail.show{ display:block; }
.tk-batch-rail .tk-batch-thumb{
  position:absolute; left:-1px; width:7px; min-height:40px;
  background:#ff3333; border:1px solid #cc1a1a; border-radius:4px; cursor:grab;
}
.tk-batch-rail .tk-batch-thumb:hover{ background:#cc1a1a; }
.tk-batch-more{
  display:none; text-align:center; padding:5px 0 6px; font-size:10px; color:#666;
  background:var(--cream-3); border-top:1px solid #f0ece6;
  letter-spacing:.06em; align-items:center; justify-content:center; gap:5px;
}
.tk-batch-more.show{ display:flex; }

.closebtn { position:absolute;top:10px;right:15px;color:var(--ink);font-size:35px;cursor:pointer;display:none; }

/* ── BOOK NOW button → red themed ── */
.booknow {
  box-shadow: 0px 2px 8px rgba(255,51,51,.3);
  background: linear-gradient(to bottom, var(--red) 0%, var(--red-dk) 100%);
  background-color: var(--red);
  border-radius: var(--radius);
  border: 1px solid var(--red-dk);
  display: inline-block;
  cursor: pointer;
  color: #fff;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  padding: 8px 24px;
  text-decoration: none;
  letter-spacing: .04em;
  transition: var(--transition);
}
.booknow:hover {
  background: linear-gradient(to bottom, var(--red-dk) 0%, var(--red) 100%);
  background-color: var(--red-dk);
  color: #fff;
}
.booknow:active { position:relative;top:1px; }

/* ── CONTACT / ENQUIRY button → ink themed ── */
.contact {
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  background: var(--ink-2);
  background-color: var(--ink-2);
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  display: inline-block;
  cursor: pointer;
  color: #fff;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  padding: 8px 24px;
  text-decoration: none;
  letter-spacing: .04em;
  transition: var(--transition);
}
.contact:hover { background: var(--ink); background-color: var(--ink); color: #fff; }
.contact:active { position:relative;top:1px; }

#demo { height:100%;position:relative;overflow:hidden; }

img.zoom   { width:100%;height:180px;border-radius:var(--radius);object-fit:cover; }
img.mzoom  { width:130px;height:100px;border-radius:var(--radius);object-fit:cover;max-width:100%; }

/* ══════════════════════════════════
   HEADER — TICKER + STICKY NAVBAR
══════════════════════════════════ */
/* ══════════════════════════════════
   HEADER — TICKER + STICKY NAVBAR
══════════════════════════════════ */
.tk-header-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
}

.tk-ticker {
  background: #1a1a1a;
  border-bottom: 2px solid var(--red);
  overflow: hidden;
  height: 36px;
  display: flex;
  align-items: center;
}
.tk-ticker-label {
  background: var(--red);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 0 18px;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  z-index: 2;
  position: relative;
}
.tk-ticker-label::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 0; bottom: 0;
  width: 10px;
  background: var(--red);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.tk-ticker-track {
  flex: 1;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
}
.tk-ticker-inner {
  display: flex;
  align-items: center;
  animation: ticker-scroll 28s linear infinite;
  white-space: nowrap;
}
.tk-ticker-inner:hover { animation-play-state: paused; }
.tk-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 40px;
  font-size: 12px;
  color: #ffffff;
  font-family: var(--sans);
  letter-spacing: .04em;
}
.tk-ticker-item::after {
  content: '★';
  color: var(--red);
  font-size: 10px;
}
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .tk-ticker-inner { animation: none; }
}

/* Ticker: normal flow, collapses smoothly on scroll */
.tk-ticker {
  position: relative;
  flex-shrink: 0;
  margin: 0;
  overflow: hidden;
  max-height: 36px;
  transition: max-height .35s ease, opacity .3s ease;
  opacity: 1;
}
.tk-ticker.tk-ticker--hidden {
  max-height: 0;
  opacity: 0;
  border-bottom: none;
}

/* Sticky navbar wrapper */
.tk-sticky-header {
  position: sticky;
  top: 0;
  z-index: 9000;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
  line-height: 0;
  font-size: 0;
}

/* Reset font-size/line-height inside navbar */
.tk-navbar,
.tk-navbar * {
  line-height: normal;
}

/* Subtle shadow boost once stuck */
.tk-sticky-header.is-stuck .tk-navbar {
  box-shadow: 0 4px 32px rgba(0,0,0,.12) !important;
}

body { padding-top: 0; }

/* ══════════════════════════════════
   MAIN NAVBAR
══════════════════════════════════ */
.tk-navbar {
  background: var(--cream-2);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 24px rgba(0,0,0,.06);
  margin: 0;
  padding: 0;
}

/* Kill any Bootstrap .navbar top margin/padding */
.tk-sticky-header .tk-navbar,
.tk-sticky-header .navbar {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* The inner nav row */
.tk-nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
  min-height: 80px;
  display: flex !important;
  align-items: center;
  box-sizing: border-box;
}

/* Logo */
.tk-navbar .navbar-brand {
  padding: 8px 0;
  margin-right: 8px;
  flex-shrink: 0;
  flex-grow: 0;
}
.tk-navbar .navbar-brand img {
  height: auto;
  max-height: 56px;
  width: auto;
  max-width: 180px;
  display: block;
  object-fit: contain;
}

/* Desktop nav menu */
.tk-desktop-nav {
  flex: 1;
  align-items: center;
  display: flex;
  min-width: 0;
}
.tk-navbar .nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content: center;
}
.tk-navbar .nav-menu > li > a {
  color: var(--ink-2); font-size: 13px; font-weight: 500;
  padding: 8px 14px; border-radius: var(--radius);
  letter-spacing: .04em; display: block; white-space: nowrap;
}
.tk-navbar .nav-menu > li > a:hover,
.tk-navbar .nav-menu > li.active > a { color: var(--red); }

/* About/User dropdowns (desktop) */
.tk-navbar .dropdown { position: relative; }
.tk-navbar .dropdown-menu {
  display: none; position: absolute; top: 100%; left: 0;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); min-width: 200px;
  box-shadow: var(--sh-md); padding: 8px 0; z-index: 999;
  margin-top: 0;
  animation: dropIn .2s ease;
}
@keyframes dropIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
/* Invisible bridge */
.tk-navbar .dropdown > a::after,
.tk-navbar .dropdown > .tk-user-btn::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 100%;
  height: 12px;
  background: transparent;
}
.tk-navbar .dropdown:hover .dropdown-menu { display: block; }
.tk-navbar .dropdown-menu a {
  display: block; padding: 9px 20px;
  color: var(--ink-2); font-size: 13px;
}
.tk-navbar .dropdown-menu a:hover { background: var(--gold-ll); color: var(--red); }

/* ── NAV SEARCH WIDGET — always open bar ── */
.tk-nav-search-wrap { position: relative; flex-shrink: 0; }
.tk-nav-search-bar {
  display: flex;
  align-items: center;
  position: relative;
  width: 200px;
}
.tk-nsb-icon {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  font-size: 13px;
  pointer-events: none;
  z-index: 1;
}
.tk-nav-search-bar input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 50px;
  padding: 8px 16px 8px 34px;
  font-size: 16px; font-family: var(--sans); color: var(--ink);
  background: var(--cream);
  outline: none;
  transition: border-color .25s, box-shadow .25s;
}
.tk-nav-search-bar input:focus {
  border-color: var(--red);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,51,51,.08);
}
.tk-nav-search-bar input::placeholder { color: var(--ink-3); }
/* Dropdown */
.tk-nav-search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px); right: 0;
  width: 320px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--sh-md);
  max-height: 360px;
  overflow-y: auto;
  z-index: 9999;
}
.tk-nav-search-dropdown.open { display: block; }

/* Mobile search row inside mobile menu */
.tk-mob-search-li {
  border-bottom: 1px solid rgba(0,0,0,.05);
  padding: 10px 16px 12px;
  position: relative;
}
.tk-mob-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  transition: var(--transition);
}
.tk-mob-search:focus-within {
  border-color: var(--red);
  background: #fff;
}
.tk-mob-search i { color: var(--ink-3); font-size: 13px; flex-shrink: 0; }
.tk-mob-search input {
  flex: 1; border: none; background: transparent;
  font-size: 16px; font-family: var(--sans); color: var(--ink);
  outline: none;
  -webkit-text-size-adjust: 100%;
}
.tk-mob-search-dropdown {
  position: relative !important;
  top: 6px !important;
  right: auto !important;
  width: 100% !important;
  box-shadow: var(--sh-sm) !important;
}

/* ── NAV USER BTN ── */
.tk-user-btn {
  display: flex; align-items: center; gap: 8px;
  background: var(--gold-ll); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 16px;
  color: var(--ink); font-size: 13px; font-weight: 500; cursor: pointer;
}
.tk-user-btn:hover { border-color: var(--red); color: var(--red); }

.tk-mob-cta {
  background: var(--red);
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 10px 22px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--transition);
  line-height: 1;
  text-decoration: none;
}
.tk-mob-cta:hover { background: var(--red-dk); color: #fff !important; }

/* ── CUSTOM HAMBURGER BUTTON ── */
.tk-toggler {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: 1.5px solid rgba(0,0,0,.15);
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: border-color .2s, background .2s;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 992px) {
  .tk-toggler { display: none !important; }
  .tk-mob-cta { display: none !important; }
}
.tk-toggler span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: var(--transition);
}
.tk-toggler.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tk-toggler.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.tk-toggler.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.tk-toggler:hover { border-color: var(--red); }
.tk-toggler:hover span { background: var(--red); }

/* ══════════════════════════════════
   MOBILE MENU — SLIDE-IN DRAWER
══════════════════════════════════ */
.tk-mob-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 8998;
  opacity: 0; transition: opacity .3s ease;
}
.tk-mob-overlay.open { display: block; opacity: 1; }

.tk-mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 82vw; max-width: 340px;
  background: #f5f5f5; z-index: 8999;
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  box-shadow: -4px 0 32px rgba(0,0,0,.18);
}
.tk-mobile-menu.open { transform: translateX(0); }

.tk-mob-header {
  background: var(--red); padding: 20px 18px 18px;
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.tk-mob-header-left { display: flex; align-items: center; gap: 14px; }
.tk-mob-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.25); border: 2px solid rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tk-mob-avatar i { font-size: 22px; color: #fff; }
.tk-mob-header-info { flex: 1; }
.tk-mob-header-title { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 2px; }
.tk-mob-header-sub { font-size: 11px; color: rgba(255,255,255,.95); margin-bottom: 8px; }
.tk-mob-login-btn {
  display: inline-block; background: #fff; color: var(--red);
  font-size: 12px; font-weight: 700; padding: 5px 14px;
  border-radius: 20px; text-decoration: none; transition: var(--transition); white-space: nowrap;
}
.tk-mob-login-btn:hover { background: var(--gold-ll); color: var(--red-dk); }
/* Account dropdown inside the drawer's red header (keeps Change Password reachable) */
.tk-mob-acct-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 8px; padding: 7px 12px;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.55);
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  border-radius: 50px; cursor: pointer; font-family: inherit;
}
.tk-mob-acct-btn .tk-acct-caret { transition: transform .2s; font-size: 10px; }
.tk-mob-acct-btn.open .tk-acct-caret { transform: rotate(180deg); }
.tk-mob-acct-menu {
  display: none; width: 100%; margin-top: 10px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  border-radius: 10px; overflow: hidden;
}
.tk-mob-acct-menu.open { display: block; }
.tk-mob-acct-menu a {
  display: block; padding: 11px 14px; color: #fff; font-size: 14px;
  text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.18);
}
.tk-mob-acct-menu a:last-child { border-bottom: none; }
.tk-mob-acct-menu a:active { background: rgba(255,255,255,.22); }
/* Account button now sits first, styled as the solid white pill */
.tk-mob-acct-btn.tk-acct-primary {
  margin-left: 0;
  background: #fff; border-color: #fff; color: var(--red);
  padding: 6px 13px; border: none;
}
.tk-mob-acct-btn.tk-acct-primary:active { background: var(--gold-ll); color: var(--red-dk); }
/* Logout now sits second, styled as the outline pill */
.tk-mob-logout-ghost {
  display: inline-flex; align-items: center; padding: 6px 13px;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.55);
  color: #fff !important; font-size: 12px; font-weight: 700;
  border-radius: 50px; text-decoration: none; white-space: nowrap;
}
.tk-mob-logout-ghost:active { background: rgba(255,255,255,.3); }


.tk-mob-close {
  width: 32px; height: 32px; background: rgba(255,255,255,.2);
  border: none; border-radius: 50%; color: #fff; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: var(--transition); align-self: flex-start;
}
.tk-mob-close:hover { background: rgba(255,255,255,.35); }

.tk-mob-body { flex: 1; overflow-y: auto; padding: 10px 0 24px; }

.tk-mob-card {
  background: #fff; border-radius: 12px; margin: 8px 12px;
  overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.tk-mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.tk-mobile-menu .tk-mob-card > ul > li > a,
.tk-mobile-menu .tk-mob-card > ul > li > .tk-mob-parent {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; font-size: 15px; font-weight: 500; color: var(--ink);
  border-bottom: 1px solid rgba(0,0,0,.06); text-decoration: none;
  transition: background .15s; cursor: pointer; background: none;
  border-left: none; border-right: none; border-top: none;
  width: 100%; font-family: var(--sans); letter-spacing: .01em;
}
.tk-mobile-menu .tk-mob-card > ul > li:last-child > a,
.tk-mobile-menu .tk-mob-card > ul > li:last-child > .tk-mob-parent { border-bottom: none; }
.tk-mobile-menu .tk-mob-card > ul > li > a:hover,
.tk-mobile-menu .tk-mob-card > ul > li > .tk-mob-parent:hover { background: var(--gold-ll); color: var(--red); }
.tk-mob-chevron { font-size: 11px; color: var(--ink-3); transition: transform .25s; }
.tk-mob-chevron.rotated { transform: rotate(180deg); }

.tk-mob-sub { display: none; list-style: none; padding: 0; margin: 0; background: #fafafa; border-top: 1px solid rgba(0,0,0,.06); }
.tk-mob-sub.open { display: block; }
.tk-mob-sub li a {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px 12px 32px; font-size: 14px; font-weight: 400;
  color: var(--ink-2); border-bottom: 1px solid rgba(0,0,0,.04);
  text-decoration: none; transition: background .15s;
}
.tk-mob-sub li:last-child a { border-bottom: none; }
.tk-mob-sub li a::before { content: ''; width: 5px; height: 5px; background: var(--red); border-radius: 50%; flex-shrink: 0; opacity: .5; }
.tk-mob-sub li a:hover { color: var(--red); background: var(--gold-ll); }
.tk-mob-sub li a:hover::before { opacity: 1; }

@media (max-width: 991px) {
  .tk-nav-inner { position: relative; padding: 0 12px !important; min-height: 64px; }
  .tk-navbar .navbar-brand { flex: 0 0 auto; margin-right: auto; }
  .tk-navbar .navbar-brand img { max-height: 38px; max-width: 120px; }
  .tk-mob-cta { flex: 0 0 auto; margin: 0 12px; text-align: center; justify-content: center; padding: 10px 28px; }
  .tk-toggler { flex: 0 0 auto; margin-left: auto; }
  .tk-mega-menu { display: none !important; }
}

.tk-mega { position: static !important; }

/* All Treks trigger button */
.tk-mega-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--red); color: #fff !important;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  padding: 9px 18px; border-radius: var(--radius);
  cursor: pointer; border: none; white-space: nowrap;
  transition: background .2s; text-decoration: none;
  -webkit-appearance: none; appearance: none;
}
.tk-mega-trigger:hover { background: var(--red-dk); color: #fff !important; }
.tk-mega-trigger svg { width: 14px; height: 14px; transition: transform .25s; }
.tk-mega-trigger.open svg { transform: rotate(180deg); }
.tk-mega-menu {
  display: none; position: fixed;
  top: 80px; left: 0; right: 0; width: 100%;
  background: #fff; border-top: 3px solid var(--red);
  box-shadow: 0 16px 48px rgba(0,0,0,.14);
  z-index: 8999; padding: 0; overflow: hidden;
}
.tk-mega-menu.open { display: block; }
/* Invisible bridge so mouse doesn't escape between trigger and menu */
.tk-mega::after {
  content: '';
  position: fixed;
  left: 0; right: 0;
  height: 12px;
  top: 80px;
  background: transparent;
  z-index: 9000;
  display: none;
}
.tk-mega:hover::after,
.tk-mega-menu.open + * .tk-mega::after { display: block; }
.tk-mega-inner {
  max-width: 1300px; margin: 0 auto;
  padding: 32px 48px 36px;
  display: grid; grid-template-columns: 220px 1fr 1fr 1fr 1fr; gap: 0;
}
.tk-mega-col { padding: 0 28px 0 0; border-right: 1px solid rgba(0,0,0,.07); }
.tk-mega-col:first-child { padding-left: 0; }
.tk-mega-col:last-child  { border-right: none; padding-right: 0; }
.tk-mega-col + .tk-mega-col { padding-left: 28px; }
.tk-mega-col-title { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 12px; border-bottom: 1.5px solid var(--border); margin-bottom: 14px; }
.tk-mega-search { width: 100%; border: 1.5px solid var(--border); border-radius: var(--radius); padding: 8px 12px; font-size: 16px; font-family: var(--sans); color: var(--ink); background: var(--cream); outline: none; margin-bottom: 10px; transition: border-color .2s; }
.tk-mega-search:focus { border-color: var(--red); background: #fff; }
.tk-mega-trek-list { max-height: 320px; overflow-y: scroll; scrollbar-width: auto; scrollbar-color: #ff3333 #f0ece6; position: relative; }
.tk-mega-trek-list::-webkit-scrollbar { -webkit-appearance: none; width: 7px; background: #f0ece6; border-radius: 4px; }
.tk-mega-trek-list::-webkit-scrollbar-thumb { background: #ff3333; border-radius: 4px; min-height: 40px; border: 1px solid #cc1a1a; }
.tk-mega-trek-list::-webkit-scrollbar-track { background: #f0ece6; border-radius: 4px; }
.tk-mega-trek-list::-webkit-scrollbar-corner { background: #f0ece6; }
.tk-mega-col a { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; color: var(--ink-2); font-size: 13.5px; font-weight: 400; border-radius: var(--radius); transition: background .15s, color .15s; text-decoration: none; }
.tk-mega-col a:hover { background: var(--gold-ll); color: var(--red); }
.tk-mega-col a svg { width: 12px; height: 12px; opacity: .4; flex-shrink: 0; }
.tk-mega-trek-list a { padding: 6px 8px; font-size: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; justify-content: flex-start; }
.tk-mega-trek-list a svg { display: none; }
@media (max-width: 991px) { .tk-mega-menu { display: none !important; } }
.tk-bottom-nav { display: none; }

/* ── MOBILE MEGA MENU PANEL ── */
.tk-mob-mega-panel { display: none; padding: 0 !important; background: var(--cream-3); border-top: 1px solid var(--border); }
.tk-mob-mega-panel.open { display: block; }
.tk-mmg-tabs { display: flex; gap: 0; background: var(--cream-2); border-bottom: 1.5px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tk-mmg-tabs::-webkit-scrollbar { display: none; }
.tk-mmg-tab { flex: 1 0 auto; min-width: 0; padding: 10px 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); background: none; border: none; border-bottom: 2.5px solid transparent; cursor: pointer; font-family: var(--sans); white-space: nowrap; transition: color .2s, border-color .2s; -webkit-tap-highlight-color: transparent; }
.tk-mmg-tab.active { color: var(--red); border-bottom-color: var(--red); background: none; }
.tk-mmg-tab:not(.active):hover { color: var(--ink-2); }
.tk-mmg-pane { display: none; padding: 8px 0; }
.tk-mmg-pane.active { display: block; }
.tk-mmg-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 500; border-bottom: 1px solid rgba(0,0,0,.05); background: var(--cream-2); transition: background .15s, color .15s; -webkit-tap-highlight-color: transparent; }
.tk-mmg-item:last-of-type { border-bottom: none; }
.tk-mmg-item:active { background: var(--gold-ll); color: var(--red); }
.tk-mmg-item-sm { padding: 11px 16px; font-size: 13px; font-weight: 400; }
.tk-mmg-emoji { font-size: 20px; line-height: 1; width: 28px; text-align: center; flex-shrink: 0; }
.tk-mmg-sub { font-size: 11px; color: var(--ink-3); font-weight: 400; margin-left: auto; white-space: nowrap; }
.tk-mmg-badge { font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 20px; letter-spacing: .04em; flex-shrink: 0; min-width: 36px; text-align: center; }
.tk-mmg-viewall { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 16px; margin: 8px 12px; background: var(--red); color: #fff !important; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 6px; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.tk-mmg-viewall:active { background: var(--red-dk); }
.tk-mmg-search-wrap { padding: 10px 12px 6px; background: var(--cream-3); }
.tk-mmg-search-wrap input { width: 100%; box-sizing: border-box; padding: 10px 14px 10px 38px; border: 1.5px solid var(--border); border-radius: 6px; font-size: 16px; font-family: var(--sans); color: var(--ink); background: var(--cream-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='22' y2='22'/%3E%3C/svg%3E") no-repeat 12px center; outline: none; -webkit-text-size-adjust: 100%; }
.tk-mmg-search-wrap input:focus { border-color: var(--red); background-color: #fff; }
.tk-mmg-trek-list { max-height: 280px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.tk-mmg-trek-list .tk-mmg-item-sm { gap: 10px; }

/* ══ FOOTER ══ */
.tk-footer{
  width:100%;margin:0;padding:0;
  box-sizing:border-box;display:block;
  background:#0a0a0a;
}
/* Desktop: full-width image behind entire footer */
.tk-footer-brand-img{display:none;} /* shown only on mobile via media query */
.tk-footer-inner-wrap{
  display:grid;
  grid-template-columns:58fr 42fr;
  position:relative;
  background-image:url('/img/footer-bg.png?v=3');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  min-height:clamp(260px,30vw,420px);
}
/* Dark gradient over entire wrap so right text is readable */
.tk-footer-inner-wrap::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    to right,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,0)    40%,
    rgba(0,0,0,.75)  58%,
    rgba(0,0,0,.88) 100%
  );
  pointer-events:none;
  z-index:0;
}
/* Left spacer: image shows through */
.tk-footer-left-spacer{
  position:relative;
  z-index:1;
  min-height:clamp(260px,30vw,420px);
}
/* #trekkaro HTML text — hidden desktop (baked in image), shown mobile */
.tk-footer-hashtag-overlay{display:none;}
/* Right: transparent — image + gradient show through */
.tk-footer-right{
  background:transparent;
  padding:36px 40px 32px 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  z-index:1;
}
.tk-footer-links-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px 24px;
}
.tk-footer-col h3,.tk-footer-col h6{
  font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--red);
  margin:0 0 14px;padding-bottom:8px;
  border-bottom:1px solid rgba(255,51,51,.2);
}
.tk-footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;}
.tk-footer-col ul li a{
  color:rgba(255,255,255,.7);font-size:14px;font-weight:400;
  text-decoration:none;transition:color .2s,padding-left .15s;display:block;
}
.tk-footer-col ul li a:hover{color:#fff;padding-left:4px;}
.tk-footer-col-contact p{font-size:14px;color:rgba(255,255,255,.65);line-height:2;margin:0;}
.tk-footer-col-contact a{color:rgba(255,255,255,.65);font-size:14px;text-decoration:none;transition:color .2s;}
.tk-footer-col-contact a:hover{color:var(--red);}
.tk-footer-col-contact i{color:var(--red);width:16px;font-size:13px;}
/* Bottom bar */
.tk-footer-bottom-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 40px;
  border-top:1px solid rgba(255,255,255,.08);
  background:#050505;
  gap:16px;
  flex-wrap:wrap;
}
.tk-footer-copyright{
  font-size:12px;
  color:rgba(255,255,255,.65);
  letter-spacing:.02em;
  line-height:1.6;
}
.tk-footer-copyright a{
  color:rgba(255,255,255,.65);
  text-decoration:none;
  transition:color .2s;
}
.tk-footer-copyright a:hover{ color:var(--red); }
.tk-footer-social{display:flex;gap:8px;align-items:center;}
.tk-footer-social a{
  width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.4);font-size:12px;
  text-decoration:none;transition:all .2s;
}
.tk-footer-social a:hover{border-color:var(--red);color:var(--red);background:rgba(255,51,51,.08);}
/* Mobile */
@media(max-width:991px){
  .tk-footer-inner-wrap{
    display:block;
    background-image:none;
    min-height:0;
  }
  /* Mobile: use the actual #trekkaro brand image */
  .tk-footer-left-spacer{
    min-height:0;
    padding:0;
    display:block;
    position:relative;
    overflow:hidden;
  }
  .tk-footer-brand-img{
    display:block!important;
    width:100%;
    height:auto;
    max-height:none;
    object-fit:contain;
    object-position:center center;
  }
  /* Show #trekkaro overlay text on mobile */
  .tk-footer-hashtag-overlay{
    display:none!important;
  }
  /* Links: solid background, completely separate from image */
  .tk-footer-right{
    background:#0a0a0a;
    padding:24px 20px;
  }
  .tk-footer-links-grid{grid-template-columns:1fr 1fr;gap:20px 16px;}
  .tk-footer-bottom-bar{padding:12px 20px;flex-direction:column;align-items:flex-start;gap:10px;}
  .tk-footer-copyright{font-size:11px;}
}
@media(max-width:575px){
  .tk-footer-left-spacer{min-height:200px;}
  .tk-footer-links-grid{gap:16px 12px;}
  .tk-footer-col ul li a{font-size:13px;}
  .tk-footer-col-contact p,.tk-footer-col-contact a{font-size:13px;}
}

/* Background image — 1536×1024, aspect 3:2, covers full footer */
.tk-footer-bg{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center center;
  opacity:1;
  pointer-events:none;
  z-index:0;
}
/* Overlay: right side gets dark so links are readable */
.tk-footer-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(
    to right,
    rgba(0,0,0,0)   0%,
    rgba(0,0,0,.1)  45%,
    rgba(0,0,0,.78) 62%,
    rgba(0,0,0,.88) 100%
  );
}
/* Content grid — sits above image */
.tk-footer-content{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:60fr 40fr;
  /* Height derived from image: width × (1024/1536) = width × 0.667 */
  min-height:clamp(280px, 33vw, 480px);
}
/* Left spacer — #trekkaro text is baked into the image */
.tk-footer-left-spacer{
  min-height:clamp(280px, 33vw, 480px);
  position:relative;
}
/* Right padding set in links-grid block above */
.tk-footer-links-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px 24px;
}
/* Right: links */
.tk-footer-right{
  padding:40px 40px 32px 64px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:transparent;
  position:relative;
  z-index:1;
}
.tk-footer-col h6{
  font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--red);
  margin:0 0 14px;padding-bottom:8px;
  border-bottom:1px solid rgba(255,51,51,.2);
}
.tk-footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;}
.tk-footer-col ul li a{
  color:rgba(255,255,255,.7);font-size:14px;font-weight:400;
  text-decoration:none;transition:color .2s,padding-left .15s;display:block;
}
.tk-footer-col ul li a:hover{color:#fff;padding-left:4px;}
.tk-footer-col-contact p{font-size:14px;color:rgba(255,255,255,.65);line-height:2;margin:0;}
.tk-footer-col-contact a{color:rgba(255,255,255,.65);font-size:14px;text-decoration:none;transition:color .2s;}
.tk-footer-col-contact a:hover{color:var(--red);}
.tk-footer-col-contact i{color:var(--red);width:16px;font-size:13px;}
/* #trekkaro overlay on image area */
.tk-footer-hashtag-overlay{
  position:absolute;
  bottom:24px;left:24px;
  z-index:3;
}
.tk-footer-hashtag{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(32px,5vw,56px);
  font-weight:700;font-style:italic;
  color:#fff;line-height:1;
  margin-bottom:10px;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.tk-footer-taglines p{
  font-size:12px;color:rgba(255,255,255,.7);
  margin:0;font-weight:300;
}
/* Desktop: hide HTML text — image already has it baked in */
@media(min-width:992px){
  .tk-footer-hashtag-overlay{ display:none; }
}
/* Mobile: show the HTML text overlay */
@media(max-width:991px){
  .tk-footer-hashtag-overlay{ display:block; }
}
/* Bottom bar */
.tk-footer-bottom-bar{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 48px;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.82);
  gap:12px;flex-wrap:wrap;
}
.tk-footer-bottom-bar p{font-size:11px;color:rgba(255,255,255,.65);margin:0;}
.tk-footer-social{display:flex;gap:8px;align-items:center;}
.tk-footer-social a{
  width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.4);font-size:12px;
  text-decoration:none;transition:all .2s;
}
.tk-footer-social a:hover{border-color:var(--red);color:var(--red);background:rgba(255,51,51,.08);}
.tk-footer-made{font-size:11px;color:rgba(255,255,255,.25);}
/* ── Responsive ── */
@media(max-width:991px){
  /* Stack: image on top, links below with solid dark background */
  .tk-footer-content{
    grid-template-columns:1fr;
    display:flex;
    flex-direction:column;
  }
  /* Image area: only covers the spacer portion */
  .tk-footer-left-spacer{
    min-height:260px;
    position:relative;
    z-index:2;
  }
  /* Links section: solid dark background so NOT on top of image */
  .tk-footer-right{
    padding:28px 20px 28px 20px;
    background:#0f0f0f;
    position:relative;
    z-index:2;
  }
  .tk-footer-links-grid{grid-template-columns:1fr 1fr;gap:24px 20px;}
  /* Image only fills the spacer height, not the links */
  .tk-footer-bg{
    object-position:center top;
  }
  /* Overlay stronger on mobile */
  .tk-footer-overlay{
    background:linear-gradient(
      to bottom,
      rgba(0,0,0,.1) 0%,
      rgba(0,0,0,.6) 70%,
      rgba(0,0,0,.95) 100%
    );
  }
}
@media(max-width:575px){
  .tk-footer-links-grid{grid-template-columns:1fr 1fr;gap:20px 16px;}
  .tk-footer-left-spacer{min-height:220px;}
  .tk-footer-col ul li a{font-size:13px;}
  .tk-footer-col-contact p{font-size:13px;}
}
/* Search dropdown */
.tk-sd-group-title{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);padding:10px 16px 6px;border-bottom:1px solid var(--border);background:var(--cream-3);position:sticky;top:0;}
.tk-sd-group-title svg{width:12px;height:12px;flex-shrink:0;color:var(--ink-3);stroke:var(--ink-3);margin-right:4px;vertical-align:middle;}
.tk-sd-item{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:13px;color:var(--ink-2);cursor:pointer;transition:background .15s;border-bottom:1px solid rgba(0,0,0,.04);text-decoration:none;}
.tk-sd-item:hover{background:var(--gold-ll);color:var(--red);}
.tk-sd-item i{font-size:11px;color:var(--ink-3);width:14px;flex-shrink:0;}
.tk-sd-item svg{width:14px;height:14px;flex-shrink:0;color:var(--ink-3);stroke:var(--ink-3);}
.tk-sd-tag{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:3px;background:var(--cream-3);color:var(--ink-3);flex-shrink:0;}
.tk-sd-item:hover .tk-sd-tag{background:rgba(255,51,51,.1);color:var(--red);}
.tk-sd-empty{padding:20px 16px;font-size:13px;color:var(--ink-3);text-align:center;}
@media(max-width:991px){
  .tk-footer-wrap{grid-template-columns:1fr;}
  .tk-footer-left{min-height:320px;padding:20px;}
  .tk-footer-right{padding:28px 20px 24px;}
  .tk-footer-links-grid{grid-template-columns:1fr 1fr;gap:20px 14px;}
  .tk-footer-bottom-bar{padding:12px 20px;flex-direction:column;gap:8px;}
}
@media(max-width:575px){
  .tk-footer-links-grid{grid-template-columns:1fr 1fr;gap:16px 10px;}
  .tk-footer-left{min-height:260px;}
}
/* Responsive */

@media (max-width:766px){
  #mview, #tkBatchCard{padding:0px;}
  #sz{font-size:22px;font-weight:700;line-height:normal;}
  #szz{font-size:14px;}
  #boption{
    display:block !important;
    position:fixed;
    bottom:calc(60px + env(safe-area-inset-bottom,0px));
    left:0;right:0;
    z-index:9000;
    background:#fff;
    border-top:2px solid rgba(255,51,51,.2);
    box-shadow:0 -4px 16px rgba(0,0,0,.1);
    padding:0;
  }
  #boption center{ margin:0; }
  #boption hr{ display:none; }
  #boption .tk-booking-bar{
    border-radius:0;
    border-top:none;
    padding:10px 12px;
  }
  /* Show mobile accordion, hide desktop tab layout */
  /* old mobile/desktop toggle removed - unified tab system used instead */
  /* old mobile/desktop toggle removed - unified tab system used instead */
  .foot{padding:10px 10px 70px 10px;}
}
@media (min-width:767px){
  #sz{font-weight:bold;font-size:32px;}
  #topic{margin-top:15vh;}
  /* Show desktop tab layout, hide mobile accordion */
  /* old mobile/desktop toggle removed - unified tab system used instead */
  /* old mobile/desktop toggle removed - unified tab system used instead */
}

/* Scroll-to-top */



/* ── BACK TO TOP — triptotemples style ── */
#tkBackTop{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:9990;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#cc1a1a;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 16px rgba(255,51,51,.45);
  padding:0;
  -webkit-tap-highlight-color:transparent;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease, bottom .3s cubic-bezier(.4,0,.2,1);
  opacity:1;
  pointer-events:auto;
}
#tkBackTop svg{
  width:22px;height:22px;
  stroke:#fff;fill:none;
  stroke-width:2.8;
  stroke-linecap:round;stroke-linejoin:round;
  display:block;
}
/* bottom/right set dynamically by JS on mobile */




/* ── TREK PAGE SPECIFIC ── */
#tag {
  position: relative;
  background: var(--red);
}
#tag:after, #tag:before {
  top: 100%; left: 50%;
  border: solid transparent;
  content: " "; height: 0; width: 0;
  position: absolute; pointer-events: none;
}
#tag:after  { border-color: rgba(136,183,213,0); border-top-color: var(--red); border-width: 5px;  margin-left: -5px; }
#tag:before { border-color: rgba(194,225,245,0); border-top-color: var(--red); border-width: 8px;  margin-left: -8px; }

#obtn{margin-top:2vh;background:var(--red);color:#fff;border-radius:25px;font-size:18px;border:none;padding:8px 20px;margin-left:1vh;}
#tdetails{letter-spacing:.70px;font-size:15px;border-radius:0;background:var(--red);color:#fff;padding:10px 18px;border:none;}

/* Tab nav */
.tab-card-header { /* overridden below */ }
/* Override Bootstrap 4 nav-tabs defaults */
/* old tab CSS removed */
/* Hide ONLY the outermost main tab navigation cardt header */
#desktop > .cardt.tab-card > .cardt-header,
#desktop > .cardt.tab-card > .tab-card-header,
#desktopMainTabContent > .cardt-header,
#desktopMainTabContent > .trekultabs {
  display: none !important;
}
/* Always show sub-tab navs inside desktop section panes */
.tk-main-pane .cardt-header,
.tk-main-pane .trekultabs {
  display: block !important;
}
/* Always show sub-tab navs inside mobile accordion sections */
/* .tk-msection rules removed - not used in new tab system */
/* Nuclear override — always show Inclusions/Exclusions tab bars */
#desktopIncExTab,
#mobileIncExTab,
#desktopIncExTab .nav-link,
#mobileIncExTab .nav-link {
  display: flex !important;
}
#sec-terms .trekultabs,
#sec-terms .cardt-header,
#collapsefive .trekultabs,
#collapsefive .cardt-header {
  display: block !important;
}

#obtn { background: var(--cream-2); color: var(--red); border-bottom: 2px solid var(--red); font-weight: 700; }
.activeb { background: var(--cream-2); }

/* ── SUB-TAB STYLING — matches main sticky tab bar pill design ── */
.trekultabs {
  background: var(--red);
  border-radius: 8px 8px 0 0;
  padding: 10px 14px !important;
  border-bottom: none !important;
}
.trektabs {
  border-bottom: none !important;
  background: transparent !important;
  padding: 0 !important;
  gap: 6px;
  display: flex !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  border: none !important;
}
.trektabs::-webkit-scrollbar { display: none; }
.trektabs.nav-tabs { border-bottom: none !important; }
.trektabs .nav-item { margin-bottom: 0 !important; }
.trektabs .nav-link {
  flex-shrink: 0;
  white-space: nowrap;
  border-radius: 50px !important;
  border: 2px solid rgba(255,255,255,.85) !important;
  padding: 7px 18px !important;
  font-size: 14px;
  font-weight: 600;
  color: #fff !important;
  background: transparent !important;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.3;
  margin-bottom: 0 !important;
}
.trektabs .nav-link:hover {
  background: rgba(255,255,255,.2) !important;
  border-color: #fff !important;
}
.trektabs .nav-link.active {
  background: #fff !important;
  color: var(--red) !important;
  border-color: #fff !important;
  font-weight: 700 !important;
}
@media(max-width:991px){
  .trekultabs { padding: 8px 10px !important; }
  .trektabs .nav-link { font-size: 13px; padding: 6px 14px !important; }
}
/* Main tab panes — hidden by default; JS shows the active one */
.tk-main-pane { display: none; }
/* Sections separated by bottom hr */
/* Fix: remove extra gap between section title and first content item */
#sec-faqs .col-sm-12.trekcontent:first-of-type { margin-top: 0 !important; padding-top: 0 !important; }
#sec-faqs .col-sm-12.trekcontent { margin-top: 16px; }
#sec-faqs .tk-section-title,
#sec-cancellation .tk-section-title,
#sec-safety .tk-section-title,
#sec-expectations .tk-section-title,
#sec-reviews .tk-section-title { margin-bottom: 8px; }
/* Border-bottom removed — no longer needed with show/hide tab system */
/* Sections with sub-tabs: no outer padding (sub-tab card handles it) */
#sec-reach.tk-main-pane,
#sec-things.tk-main-pane,
#sec-faqs.tk-main-pane { padding: 0 !important; }
/* Panes: padding handled by inner wrappers */
/* Section h2 headings */
.tk-section-title {
  color: #222;
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 8px 0;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--red);
  display: block;
}
/* Kill top margin on first paragraph of DB-stored content right after title */
.tk-sec-body > p:first-child,
.tk-sec-body > p:first-of-type { margin-top: 0 !important; }
#desktopMainTabContent { overflow: visible; }



/* Content area */
#mcontent, .mcontent { color: var(--ink); line-height:1.7; font-size:16px; font-weight:300; }

/* ── Mobile table overflow — wrap tables so they scroll inside a container ── */
.mcontent table,
.tk-sec-body table,
#mcontent table,
.trekcontent table {
  max-width: 100%;
  border-collapse: collapse;
  white-space: normal;
}
/* Wrap every table in a scroll container via CSS — no JS needed */
.mcontent,
.tk-sec-body,
#mcontent,
.trekcontent {
  /* overflow-x removed — was 'clip', which breaks position:sticky on ancestors.
     Wide tables are handled by .tk-table-scroll-wrap injected by JS. */
}
/* The actual scroll wrapper is applied via JS below */
.tk-table-scroll-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-bottom: 16px;
}
.tk-table-scroll-wrap::-webkit-scrollbar { display: none; }
.tk-table-scroll-wrap table {
  min-width: 400px;
  white-space: nowrap;
}
.tk-table-scroll-wrap table td,
.tk-table-scroll-wrap table th {
  white-space: normal;
  min-width: 80px;
}

/* ── Inclusions / Exclusions formatted list ── */
.tk-inc-exc-content {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.75;
}
.tk-inc-exc-content .tk-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.tk-inc-exc-content .tk-item:last-child { border-bottom: none; }
.tk-inc-exc-content .tk-item-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
#eexclusions .tk-item-num,
#exclusions .tk-item-num {
  background: #666;
}
.tk-inc-exc-content .tk-item-label {
  font-weight: 600;
  color: var(--ink);
  margin-right: 4px;
}
.tk-inc-exc-content .tk-item-body {
  flex: 1;
  color: var(--ink-2);
}

/* Accordion */
.mcard { background: var(--cream-2); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; box-shadow: var(--sh-sm); }
.mheader { background: var(--cream-3); padding: 15px; border: none; border-radius: var(--radius); }
.mheader a { color: var(--ink); font-weight: 500; }
.mheader a:hover { color: var(--red); }
.inn { background: var(--cream-2); border-right: solid 1px var(--border); border-left: solid 1px var(--border); }

/* Stars */
.checked { color: var(--red); }

/* Breadcrumb */
.breadcrumb { background: transparent; }
.breadcrumb-item a { color: var(--red); }
.breadcrumb-item.active { color: var(--ink-3); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--ink-3); }

/* Price display */
.oldprice { color: var(--ink-3); }
.totalamount { color: var(--ink); }

/* Misc shared */
hr { border-color: var(--border); }
.card-link { color: var(--ink); }
.card-link:hover { color: var(--red); }
select, input[type="text"]:not(#tkNavSearchInput):not(#tkMobSearchInput):not(#tkFabSearchInput), input[type="email"], input[type="tel"], textarea {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  padding: 8px 12px;
  transition: border-color .2s;
}
select:focus, input:not(#tkNavSearchInput):not(#tkMobSearchInput):not(#tkFabSearchInput):focus, textarea:focus {
  border-color: var(--red);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,51,51,.08);
}
/* Force nav search to always match index.php exactly */
#tkNavSearchInput, #tkMobSearchInput {
  width: 100% !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 50px !important;
  padding: 8px 16px 8px 34px !important;
  font-size: 16px !important;
  font-family: var(--sans) !important;
  color: var(--ink) !important;
  background: var(--cream) !important;
  outline: none !important;
  transition: border-color .25s, box-shadow .25s !important;
  box-shadow: none !important;
}
#tkNavSearchInput:focus, #tkMobSearchInput:focus {
  border-color: var(--red) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(255,51,51,.08) !important;
}
/* Search sheet input — match index.php exactly */
#tkFabSearchInput {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  font-size: 16px !important;
  font-family: inherit !important;
  color: #222 !important;
  outline: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#tkFabSearchInput:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}
/* ── MOBILE PILL TABS ── */
#tkMobileTabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 8px;
  padding: 10px 12px;
  background: var(--red);
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: sticky;
  top: 0;
  z-index: 500;
}
#tkMobileTabs::-webkit-scrollbar { display: none; }
.tk-mtab {
  flex-shrink: 0;
  white-space: nowrap;
  border-radius: 50px;
  border: 2px solid rgba(255,255,255,.85);
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: transparent;
  cursor: pointer;
  user-select: none;
  transition: all .2s;
  -webkit-tap-highlight-color: transparent;
}
.tk-mtab:hover { background: rgba(255,255,255,.2); }
.tk-mtab.active {
  background: #fff !important;
  color: var(--red) !important;
  border-color: #fff !important;
  font-weight: 700 !important;
}
/* Force active mobile sections to show — overrides Bootstrap collapse display:none */
/* #mobile .tk-msection removed - not used in new tab system */
/* #mobile .tk-msection.active removed - not used in new tab system */
/* Sub-tab pane visibility inside mobile sections */
#mobile .tab-pane { display: none; }
#mobile .tab-pane.show.active { display: block; }

/* ── STICKY BOOKING BAR ── */
/* Quick actions. On desktop they sit under the price; on phones everything —
   price, Book Now, dates and share — shares a single compact line. */
/* phones only — on desktop the dates are already listed right above */
.tk-quickrow{ display:none; gap:8px; padding:10px 16px 0 16px; }
.tk-qr-btn{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 10px; border:1.5px solid var(--border); border-radius:50px;
  background:#fff; color:var(--ink); font-family:inherit;
  font-size:12.5px; font-weight:700; letter-spacing:.02em; cursor:pointer;
}
.tk-qr-btn svg{ width:14px; height:14px; color:var(--red); }
.tk-qr-btn:active{ background:var(--gold-ll); border-color:var(--red); }

@media (max-width:991px){
  /* one row: price | Book Now | dates | share */
  #boption center{
    display:flex; align-items:center; gap:64px;   /* the gap in the middle is where the OMI button sits */
    /* no safe-area padding here — the bottom nav below already covers it,
       and adding it again left a white gap under the bar */
    padding:8px 10px;
  }
  #boption .tk-booking-bar{
    order:1; flex:1 1 0; min-width:0;
    padding:0; border-top:none; background:transparent; gap:8px;
  }
  #boption .tk-quickrow{
    display:flex; order:2; flex:1 1 0; min-width:0; gap:6px; padding:0; background:transparent;
  }
  /* smaller price + Book Now, so "View Dates" can keep its label */
  #boption .tk-booking-bar > div:first-child{ flex:0 0 auto !important; }
  #boption .tk-booking-bar > div:first-child span:first-child{ font-size:10px !important; }
  #boption .tk-booking-bar > div:first-child span:last-child{ font-size:15px !important; }
  #boption .tk-booking-bar form{ flex:1 1 auto !important; min-width:0; } #boption .tk-booking-bar form .tk-bar-btn{ width:100%; justify-content:center; }
  /* the guest "Login to Book" link and the admin Edit link carry inline flex:1,
     which stretched them across the bar — match the logged-in Book Now button */
  #boption .tk-booking-bar > a.tk-bar-btn{ flex:1 1 auto !important; width:auto !important; text-align:center; }
  #boption .tk-bar-btn{ padding:9px 13px !important; font-size:11.5px !important; gap:5px; }
  #boption .tk-bar-btn svg{ width:13px !important; height:13px !important; }

  #boption .tk-qr-btn{
    flex:1 1 auto; min-width:0; height:36px; width:auto; padding:0 8px; border-radius:50px; gap:5px; white-space:nowrap;
  }
  #boption .tk-qr-btn svg{ width:15px; height:15px; }
  #boption .tk-qr-label{ display:inline; font-size:11px; }
  /* share is icon-only — its label would push the row onto two lines */
  #boption .tk-quickrow .tk-qr-btn:first-child{ overflow:hidden; }
  #boption .tk-qr-share, #boption .tk-qr-pdf{ flex:0 0 36px; width:36px; height:36px; padding:0; margin:0; box-sizing:border-box; line-height:1; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
  #boption .tk-qr-share svg, #boption .tk-qr-pdf svg{ width:15px; height:15px; display:block; margin:0; }
  #boption .tk-qr-share .tk-qr-label, #boption .tk-qr-pdf .tk-qr-label{ display:none; }
}
@media (max-width:440px){
  #boption center{ gap:58px; padding:8px 8px; }
  #boption .tk-booking-bar{ gap:6px; }
  #boption .tk-bar-btn{ padding:9px 10px !important; font-size:11px !important; }
  #boption .tk-quickrow{ gap:5px; }
  #boption .tk-qr-btn{ padding:0 7px; gap:4px; }
  #boption .tk-qr-label{ font-size:10.5px; }
  #boption .tk-quickrow .tk-qr-btn:first-child svg{ display:none; }
  #boption .tk-qr-share, #boption .tk-qr-pdf{ flex:0 0 34px; width:34px; height:34px; }
  #boption .tk-qr-share svg, #boption .tk-qr-pdf svg{ width:14px; height:14px; }
}

.tk-booking-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  background: var(--cream-2);
  border-top: 2px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  flex-wrap: nowrap;
}

.tk-bar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
  font-family: var(--sans);
}
.tk-bar-book { background: var(--red); color: #fff !important; }
.tk-bar-book:hover { background: var(--red-dk); color: #fff !important; }
.tk-bar-wa { background: #25D366; color: #fff !important; }
.tk-bar-wa:hover { background: #1da851; color: #fff !important; }
.tk-bar-edit { background: var(--ink-2); color: #fff !important; }
.tk-bar-edit:hover { background: var(--ink); color: #fff !important; }