/* ════════════════════════════════════════════════════════════════════════
   Tour detail — v2 layout
   20/80 split: a visually-separate dark teal navigation/actions sidebar (left)
   beside a clean, high-contrast reading column (right). Below 1200px the
   sidebar becomes a sticky top nav with a Reserve button.
   Loaded AFTER tour-detail.css so these rules win where they overlap.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --td-deep: #0F2A24;      /* dark teal-green sidebar */
  --td-deep-2: #143A31;
  --td-gold: #C8A24B;
  --td-cream: #F4EFE6;
  --td-ink: #1B1A17;       /* reading text */
  --td-ink-soft: #4C4A44;
  --td-paper: #FCFBF8;     /* reading bg */
  --td-line: rgba(20,17,14,.10);
}

/* ── Shell (full-bleed: no container cap, no side gaps) ────────────────── */
.tour-details.td2-wrap { background: var(--td-paper); padding: 0; }
.tour-details.td2-wrap > .container { max-width: none; width: 100%; margin: 0; padding: 0; }
.td2-shell {
  display: grid;
  grid-template-columns: 20% 80%;
  gap: 0;
  align-items: stretch;
  padding: 0;
}

/* ── Left sidebar: full height, 20% width, flush to the edges ──────────── */
.td2-side {
  position: sticky; top: 0; align-self: stretch;
  height: 100vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--td-deep) 0%, var(--td-deep-2) 100%);
  border-radius: 0; box-shadow: none; margin: 0;
  /* header is non-sticky here (scrolls away), so no header-clearance needed */
  padding: 2.5rem 1.5rem 2rem;
  color: var(--td-cream);
}

/* Header is transparent and stays in place (navFloat gives position:absolute,
   transparent, never solidifies) — it scrolls away with the hero. */

/* Footer keeps its original dark tone but is lifted above the sticky sidebar
   so it spans the full width across the bottom (covers the sidebar column). */
body.td2-detail .site-foot { position: relative; z-index: 5; }
.td2-side-title { font-family:'Cormorant Garamond', serif; font-size:1.05rem; color:#fff; margin:0 0 1rem; letter-spacing:.02em; }
.td2-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 1.6rem; }
.td2-nav-link {
  display: block; text-decoration: none;
  font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 500;
  color: rgba(244,239,230,.72);
  padding: 9px 0 9px 14px; border-left: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.td2-nav-link:hover { color: #fff; }
.td2-nav-link.active { color: #fff; font-weight: 700; border-left-color: var(--td-gold); }
.td2-side-divider { border: 0; border-top: 1px solid rgba(244,239,230,.16); margin: 0 0 1.4rem; }
.td2-side-note { font-size: 0.92rem; line-height: 1.55; color: rgba(244,239,230,.78); margin: 0 0 1.2rem; }
.td2-actions { display: flex; flex-direction: column; gap: 0.65rem; }
.td2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 0.85rem 1rem; border-radius: 6px; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  border: 1.5px solid transparent; transition: all .2s ease;
}
.td2-btn-solid { background: var(--td-gold); color: #201704; }
.td2-btn-solid:hover { background: #d8b25b; }
.td2-btn-ghost { background: transparent; color: var(--td-cream); border-color: rgba(244,239,230,.45); }
.td2-btn-ghost:hover { background: rgba(244,239,230,.1); border-color: #fff; }

/* ── Right reading column ──────────────────────────────────────────────── */
.td2-read { padding: 2.5rem clamp(1.75rem, 3.5vw, 4rem) 4rem; min-width: 0; font-family: 'Hanken Grotesk', 'Inter', sans-serif; }
.td2-read .tour-details-main { display: block; }
.td2-read .tour-title-lead { font-family:'Cormorant Garamond', serif; font-weight:500; font-size:clamp(1.9rem,3vw,2.5rem); line-height:1.12; color:var(--td-ink); margin:0 0 2rem; max-width:820px; }

/* Sections: clean rhythm, no card chrome */
.td2-read .tour-section { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 3.5rem !important; scroll-margin-top: 90px; }
.td2-read .tour-section + .tour-section { border-top: 1px solid var(--td-line); padding-top: 3.5rem !important; }
.td2-read .tour-section > h2,
.td2-read .tour-section > .collapsible-trigger {
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--td-ink);
  margin: 0 0 1.4rem; padding: 0; background: none; border: 0; cursor: default; width: 100%; text-align: left;
}
.td2-read .collapsible-trigger .collapsible-icon { display: none; }
.td2-read .collapsible-body.collapsed { max-height: none; overflow: visible; } /* keep readable, no clipping */

/* Overview reading text — full width, sits directly on the page (no box).
   Comfortable book-page size: caps just above 1.1rem instead of scaling
   with the viewport. */
.td2-read .tour-description,
.td2-read #overview .tour-description {
  background: none !important; box-shadow: none !important; border: 0 !important;
  padding: 0 !important; margin: 0 !important; max-width: none;
}
.td2-read .tour-description p,
.td2-read .tour-description {
  font-size: clamp(1rem, 0.2vw + 0.95rem, 1.12rem);
  line-height: 1.75; color: var(--td-ink-soft); max-width: none;
}
.td2-read .tour-description p { margin: 0 0 1.2rem; }

/* Map slider inside overview — collapsible, closed by default.
   Transparent: only a thin rule + the toggle sit on the paper, no card. */
.td2-read .td2-map-collapse { margin-top: 2rem; border: 0; border-top: 1px solid var(--td-line); background: none; }
.td2-read .td2-map-summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0; background: none;
  font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--td-ink);
}
.td2-read .td2-map-summary::-webkit-details-marker { display: none; }
.td2-read .td2-map-chevron { color: var(--td-gold); transition: transform .25s ease; flex-shrink: 0; }
.td2-read .td2-map-collapse[open] .td2-map-chevron { transform: rotate(180deg); }
.td2-read .td2-map-collapse .map-slider { margin: 0 0 1rem; border-radius: 0; border: 0; background: none; overflow: hidden; }

/* ── Itinerary: clear hierarchy (core narrative vs. logistics/extra) ───── */
/* Itinerary reads as a plain list on the paper — no cards, just day rules. */
.td2-read #mergedItinerary { display: flex; flex-direction: column; gap: 0; }
.td2-read .accordion-item { background: none; border: 0; border-top: 1px solid var(--td-line); border-radius: 0; overflow: visible; }
.td2-read .accordion-item:last-child { border-bottom: 1px solid var(--td-line); }
.td2-read .accordion-trigger { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 1.15rem 0; background: none; border: 0; cursor: pointer; text-align: left; }
.td2-read .accordion-trigger .day-title-text { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 700; color: var(--td-deep); }
.td2-read .accordion-icon svg { color: var(--td-gold); }
.td2-read .accordion-body { padding: 0 0 1.6rem; }
.td2-read .day-image { margin: 0 0 1.25rem; border-radius: 0; overflow: hidden; }
.td2-read .day-image img { width: 100%; height: auto; display: block; }
/* Core narrative — the thing you actually read */
.td2-read .day-description { font-size: 1.02rem; line-height: 1.75; color: var(--td-ink); }
.td2-read .day-description h5 { display: none; }
/* Logistics = secondary "extra": labelled, transparent (sits on the paper) */
.td2-read .day-activities,
.td2-read .day-accommodation,
.td2-read .day-included,
.td2-read .stop-duration {
  margin-top: 1rem; padding: 0; border-radius: 0;
  background: none; border: 0; border-left: 2px solid rgba(200,162,75,.5); padding-left: 1rem;
}
.td2-read .day-activities h5,
.td2-read .day-accommodation h5,
.td2-read .day-included h5,
.td2-read .stop-duration h5 {
  margin: 0 0 .25rem; font-family:'Inter',sans-serif; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: #9a7c2f;
}
.td2-read .day-activities div,
.td2-read .day-accommodation div,
.td2-read .day-included div,
.td2-read .stop-duration div { font-size: 0.95rem; line-height: 1.6; color: var(--td-ink-soft); }

/* Extensions — optional add-ons, transparent (no card fill), a gold accent */
.td2-read #extensions .extension-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 1.5rem; }
.td2-read .extension-card { background: none; border: 0; border-left: 2px solid rgba(200,162,75,.5); border-radius: 0; padding: 1.25rem 0 1.25rem 1.25rem; }
.td2-read .extension-card-badge { display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#201704; background:var(--td-gold); padding:.25rem .6rem; border-radius:3px; margin-bottom:.75rem; }

/* Inclusions — plain list on the paper, thin rules only */
.td2-read #inclusions .collapsible-section { margin-bottom: 0; border: 0; border-top: 1px solid var(--td-line); border-radius: 0; overflow: visible; }
.td2-read #inclusions .collapsible-trigger { display:flex; justify-content:space-between; align-items:center; width:100%; padding: 1rem 0; font-family:'Inter',sans-serif !important; font-size:1rem !important; font-weight:600 !important; background:none; cursor:pointer; }
.td2-read #inclusions .collapsible-trigger .collapsible-icon { display:inline; color:var(--td-gold); }
.td2-read .inclusion-list { list-style:none; margin:0; padding: 0 0 1.25rem; }
.td2-read .inclusion-list li { display:flex; gap:.6rem; padding:.4rem 0; font-size:1rem; line-height:1.5; color:var(--td-ink-soft); }
.td2-read .inclusion-list .check { color:#2C7A4B; font-weight:700; }
.td2-read .inclusion-list .cross { color:#B04A3A; font-weight:700; }

/* FAQs */
.td2-read .faq-item { border-top: 1px solid var(--td-line); padding: 1.25rem 0; }
.td2-read .faq-question { font-family:'Cormorant Garamond', serif; font-size:1.3rem; font-weight:600; color:var(--td-ink); margin:0 0 .5rem; }
.td2-read .faq-answer p { font-size:1.02rem; line-height:1.7; color:var(--td-ink-soft); margin:0; }

/* ── Reserve drawer (holds the existing booking card) ──────────────────── */
.td2-drawer { position: fixed; inset: 0; z-index: 2000; display: none; }
.td2-drawer.open { display: block; }
.td2-drawer-scrim { position: absolute; inset: 0; background: rgba(11,20,17,.55); }
.td2-drawer-panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(440px, 92vw);
  background: #fff; box-shadow: -10px 0 40px rgba(0,0,0,.25);
  overflow-y: auto; padding: 1.5rem; transform: translateX(100%); transition: transform .3s ease;
}
.td2-drawer.open .td2-drawer-panel { transform: translateX(0); }
.td2-drawer-close { position: absolute; top: 12px; right: 14px; background: none; border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer; color: #555; }
.td2-drawer .tour-details-sidebar { position: static; }
.td2-drawer .tour-booking-card { box-shadow: none; border: 0; padding: 1rem 0 0; }

/* ── Mobile sticky nav (below the breakpoint) ──────────────────────────── */
.td2-mobilenav { display: none; }
@media (max-width: 1200px) {
  .td2-shell { grid-template-columns: 1fr; gap: 0; padding-bottom: 4rem; }
  .td2-side { display: none; }
  .td2-read { padding-top: 0; max-width: 860px; margin: 0 auto; }
  .td2-mobilenav {
    display: flex; align-items: center; gap: 1rem;
    position: sticky; top: 0; z-index: 40;
    background: rgba(15,42,36,.97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(200,162,75,.25);
    padding: 0.5rem clamp(1rem,4vw,1.5rem);
  }
  .td2-mobilenav-links { display: flex; gap: 1.25rem; overflow-x: auto; flex: 1; scrollbar-width: none; }
  .td2-mobilenav-links::-webkit-scrollbar { display: none; }
  .td2-mobilenav-links a { white-space: nowrap; text-decoration: none; font-size: 0.85rem; font-weight: 600; color: rgba(244,239,230,.8); padding: 0.75rem 0; }
  .td2-mobilenav-links a.active { color: var(--td-gold); }
  .td2-mobilenav .td2-btn { padding: 0.55rem 1rem; font-size: 0.72rem; flex-shrink: 0; }
}
@media (max-width: 640px) {
  .td2-read .tour-description p, .td2-read .tour-description { font-size: 1rem; }
}

/* ── Hero: full screen, no filter (raw photo), facts pinned at the bottom ─ */
.tour-hero {
  min-height: 100vh;
  flex-direction: column; justify-content: center; align-items: stretch;
  padding: 0;
}
.tour-hero > .container { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; width: 100%; padding: 96px 20px 0; }
.tour-hero .hero-overlay { display: none !important; }
.tour-hero:before { display: none !important; }
.tour-hero-title { text-shadow: 0 2px 22px rgba(10,10,10,.55); }
.hero-destination-label { text-shadow: 0 1px 10px rgba(10,10,10,.5); }

/* ── Quick-facts bar — inside the hero, glossy frosted-glass over the photo ─ */
.td2-facts--hero {
  width: 100%; border: 0; position: relative; z-index: 2;
  border-top: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(11,20,17,.30) 0%, rgba(11,20,17,.62) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 -10px 40px rgba(10,10,10,.28);
}
.td2-facts-inner {
  max-width: 1440px; margin: 0 auto;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 1rem clamp(1.5rem, 3vw, 2.75rem);
  padding: 1.4rem clamp(1.25rem, 3vw, 2.5rem) 1.6rem;
}
.td2-fact { display: flex; flex-direction: column; gap: 0.15rem; }
.td2-fact-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--td-ink-soft); }
.td2-fact-val { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 600; color: var(--td-ink); }
.td2-dots { display: inline-flex; gap: 5px; align-items: center; margin: 0.15rem 0 0.1rem; }
.td2-dot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #cfc7b3; }
.td2-dot.on { background: var(--td-gold); border-color: var(--td-gold); }
.td2-fact-activity { position: relative; }
.td2-fact-level { font-size: 0.78rem; color: var(--td-ink-soft); }

/* Over the photo the facts text goes light with a shadow for legibility */
.td2-facts--hero .td2-fact-label { color: rgba(244,239,230,.85); text-shadow: 0 1px 8px rgba(10,10,10,.6); }
.td2-facts--hero .td2-fact-val { color: #fff; text-shadow: 0 2px 12px rgba(10,10,10,.65); }
.td2-facts--hero .td2-fact-level { color: rgba(244,239,230,.9); text-shadow: 0 1px 8px rgba(10,10,10,.6); }
.td2-facts--hero .td2-dot { border-color: rgba(255,255,255,.55); }
.td2-facts--hero .td2-dot.on { background: var(--td-gold); border-color: var(--td-gold); }
.td2-facts--hero .td2-fact-explain { color: var(--td-cream); }
.td2-fact-activity:hover .td2-fact-explain { opacity: 1; visibility: visible; transform: translateY(0); }
.td2-fact-explain {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
  width: 240px; padding: 0.7rem 0.85rem; border-radius: 6px;
  background: var(--td-deep); color: var(--td-cream); font-size: 0.82rem; line-height: 1.45;
  box-shadow: 0 12px 30px rgba(0,0,0,.2);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: all 0.2s ease;
}
.td2-facts-cta { margin-left: auto; }
@media (max-width: 700px) {
  .td2-facts-cta { margin-left: 0; width: 100%; }
  .td2-fact-explain { width: 200px; }
}

/* ════════════════════════════════════════════════════════════════════════
   Warm modals — pre/post-trip extensions AND the booking modal share one
   warm cream + bronze-gold palette (replacing the cool blue/purple defaults)
   and are tuned for readability (larger, higher-contrast text).
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --wm-paper: #F7F1E5;      /* warm cream modal surface */
  --wm-ink: #2E2A22;        /* warm near-black text */
  --wm-ink-soft: #5C5442;   /* warm secondary text */
  --wm-line: rgba(122, 90, 43, .18);
  --wm-head-a: #7A5A2B;     /* bronze */
  --wm-head-b: #C8A24B;     /* gold */
}

/* ── Pre / Post-trip extension modals ─────────────────────────────────── */
.extension-modal-overlay { background: rgba(20, 17, 14, .58); }
.extension-modal {
  background: var(--wm-paper); border-radius: 14px; max-width: 760px;
  padding: 2.5rem clamp(1.5rem, 4vw, 3rem);
  box-shadow: 0 30px 90px rgba(20, 17, 14, .42); color: var(--wm-ink);
}
.extension-modal h2 { font-family: 'Cormorant Garamond', serif; color: var(--td-deep); font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 600; }
.extension-modal-badge.pre { background: rgba(200, 162, 75, .18); color: #8A6A1E; }
.extension-modal-badge.post { background: rgba(176, 74, 58, .16); color: #A5432F; }
.extension-modal-meta { color: var(--wm-ink-soft); font-size: 1rem; }
.extension-modal-overview { color: var(--wm-ink); font-size: clamp(0.98rem, 0.2vw + 0.92rem, 1.08rem); line-height: 1.75; }
.extension-modal-highlights h4, .extension-modal-itinerary h4 { color: var(--td-deep); }
.extension-modal-highlights li { color: var(--wm-ink); font-size: 1rem; }
.extension-modal-highlights li::before { content: '✦ '; color: var(--td-gold); font-size: 0.8rem; }
.extension-modal-overview, .ext-day-description { white-space: pre-wrap; }
.ext-day-description { color: var(--wm-ink); font-size: 1.02rem; line-height: 1.8; }
.ext-day-title { color: var(--td-deep); }
.ext-accordion-item, .ext-accordion-item:first-child { border-color: var(--wm-line); }
.extension-modal-actions { border-top: 1px solid var(--wm-line); }
.extension-modal-close { color: #8A7D63; }
.extension-modal-close:hover { color: var(--td-deep); }
.btn-add-extension {
  background: var(--td-gold); color: #201704; border: 0; border-radius: 8px;
  padding: 0.85rem 1.4rem; font-weight: 700; letter-spacing: 0.03em; cursor: pointer;
  transition: background .2s ease;
}
.btn-add-extension:hover { background: #d8b25b; }

/* ── Extension cards: brand palette (overrides the blue in tour-detail.css) ── */
.btn-extension-details {
  border-color: var(--td-gold); color: #8a6d2c;
}
.btn-extension-details:hover { background: rgba(200,162,75,.1); }
.btn-extension-add { background: var(--td-gold); color: #201704; }
.btn-extension-add:hover { background: #d8b25b; }
.btn-extension-add.added { background: var(--td-deep); color: var(--td-cream); }
.btn-extension-add.added:hover { background: var(--td-deep-2); }
.extension-card-highlights li::before { color: var(--td-gold); }
.extension-card-badge.pre,
.extension-card-badge.post,
.extension-modal-badge.pre,
.extension-modal-badge.post { background: rgba(200,162,75,.16); color: #8a6d2c; }
.extension-card.added { border-color: var(--td-gold); }
/* Pre/post day badges inside the merged itinerary list */
.day-type-badge.pre { background: rgba(200,162,75,.16); color: #8a6d2c; }
.day-type-badge.post { background: rgba(15,42,36,.08); color: var(--td-deep); }

/* ── Email-me-the-itinerary modal ── */
.itin-email-modal { max-width: 460px; }
.itin-email-modal h2 { font-family: 'Cormorant Garamond', serif; color: var(--td-deep); font-size: 1.7rem; font-weight: 600; margin: 0 0 .4rem; }
.itin-email-lead { color: var(--td-ink-soft); font-size: .96rem; line-height: 1.6; margin: 0 0 1.4rem; }
.itin-email-label { display: block; font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--td-ink-soft); margin: 0 0 .4rem; }
.itin-email-input { width: 100%; padding: .8rem .9rem; border: 1.5px solid rgba(20,17,14,.22); border-radius: 7px; font-size: 1rem; font-family: inherit; margin-bottom: 1rem; background: #fff; color: var(--td-ink); }
.itin-email-input:focus { outline: none; border-color: var(--td-gold); box-shadow: 0 0 0 3px rgba(200,162,75,.18); }
.itin-email-check { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; line-height: 1.5; color: var(--td-ink-soft); margin: 0 0 1.3rem; cursor: pointer; }
.itin-email-check input { margin-top: .2rem; accent-color: var(--td-gold); flex-shrink: 0; }
.itin-email-send { width: 100%; padding: .9rem 1rem; background: var(--td-gold); color: #201704; border: 0; border-radius: 7px; font-family: 'Inter', sans-serif; font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .2s ease; }
.itin-email-send:hover { background: #d8b25b; }
.itin-email-send:disabled { opacity: .6; cursor: default; }

/* ── Booking modal (scoped to the tour-detail page) ───────────────────── */
body.td2-detail .modal-content { background: var(--wm-paper); }
body.td2-detail .modal-header {
  background: linear-gradient(135deg, var(--wm-head-a) 0%, var(--wm-head-b) 100%);
  color: #FFF9EC;
}
body.td2-detail .tour-summary { background: #FBF6EC; border: 1px solid rgba(200, 162, 75, .28); }
body.td2-detail .tour-summary h3 { color: #8A6A1E; }
body.td2-detail .summary-value,
body.td2-detail .summary-label { color: var(--wm-ink); }
body.td2-detail #totalPrice, body.td2-detail #summaryPrice { color: var(--td-deep); }
body.td2-detail .modal-body .form-group label { color: var(--wm-ink); }
body.td2-detail .modal-body .form-control {
  background: #fff; border: 1.5px solid var(--wm-line); color: var(--wm-ink);
}
body.td2-detail .modal-body .form-control:focus { border-color: var(--td-gold); box-shadow: 0 0 0 3px rgba(200, 162, 75, .18); }
body.td2-detail .modal-actions .btn-primary { background: var(--td-gold); color: #201704; }
body.td2-detail .modal-actions .btn-primary:hover:not(:disabled) { background: #d8b25b; }
body.td2-detail .modal-actions .btn-secondary { color: var(--wm-ink-soft); }