/* ══════════════════════════════════════════════════════════════════════
   VAYANTA — Tour detail v2 (/tour/{slug}, resources/views/tour-v2/show)
   Design: LANDING-PAGE/tour-v2 (approved). Tokens: docs/DESIGN_SYSTEM.md.
   --tv2-head = the sticky site header's height (set by tour-v2.js), so the
   tabs and the price card always sit below it. One page scrollbar.
   ══════════════════════════════════════════════════════════════════════ */
:root { --tv2-head: 77px; }
.tv2 { font-family: 'Manrope', sans-serif; color: #13201B; background: #F5F4EF; width: 100%; min-width: 0; padding-bottom: 8px; }
.tv2 *, .tv2 *::before, .tv2 *::after { box-sizing: border-box; }
.tv2 a { color: #0E3B2E; }
.tv2-wrap { max-width: 1280px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }

/* ---- Buttons ---- */
.tv2 a:focus-visible, .tv2 select:focus-visible, .tv2 input:focus-visible { outline: 3px solid #F2A93B; outline-offset: 2px; }

/* ---- Titles ---- */
.tv2-sechead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.tv2-sechead > div:first-child { display: flex; flex-direction: column; gap: 6px; }
.tv2-sechead__acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- 1–2 Breadcrumb + title ---- */
.tv2-top { padding-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.tv2-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; font-weight: 600; color: #4B5A53; }
.tv2-crumbs li { display: inline-flex; gap: 8px; align-items: center; }
.tv2 .tv2-crumbs a { color: #4B5A53; text-decoration: none; min-height: 24px; display: inline-flex; align-items: center; }
.tv2 .tv2-crumbs a:hover { color: #0E3B2E; text-decoration: underline; }
.tv2-crumbs [aria-current] { color: #13201B; }
.tv2-titlebar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.tv2-titlebar__main { display: flex; flex-direction: column; gap: 10px; max-width: 860px; min-width: 0; }
.tv2-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.tv2-badge { background: #0E3B2E; color: #fff; font-size: 12.5px; font-weight: 800; padding: 6px 12px; border-radius: 999px; }
.tv2-badge--1 { background: #FCEBD0; color: #7A4A0E; }
.tv2-badge--2 { background: #EEF4EF; color: #1F5E43; }
.tv2-h1 { margin: 0; font-family: 'Fraunces', serif; font-weight: 700; font-size: clamp(30px, 4vw, 52px); line-height: 1.06; letter-spacing: -.6px; color: #13201B; overflow-wrap: anywhere; }
.tv2-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; font-weight: 600; color: #3A4A42; align-items: center; }
.tv2-meta span { display: inline-flex; gap: 7px; align-items: center; }
.tv2-meta svg { flex: none; }

/* ---- 3 Gallery ---- */
.tv2-gallery { padding-top: 18px; }

/* ---- 4 Two columns ---- */
.tv2-body { padding-top: 26px; padding-bottom: 20px; }
.tv2-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
.tv2-main { grid-column: 1; grid-row: 1; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.tv2-aside { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--tv2-head) + 12px); display: flex; flex-direction: column; gap: 14px; scroll-margin-top: calc(var(--tv2-head) + 12px); }

/* ---- 4a Price card ---- */
.tv2-price { background: #fff; border: 1px solid #E6E8E2; border-radius: 22px; box-shadow: 0 18px 40px rgba(14, 59, 46, .12); overflow: hidden; }
.tv2-price__top { background: #0E3B2E; color: #fff; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.tv2-price__eyebrow { font-size: 12.5px; font-weight: 800; letter-spacing: 1.2px; color: #F2A93B; text-transform: uppercase; }
.tv2-price__amount { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tv2-price__amount b { font-family: 'Fraunces', serif; font-size: 40px; font-weight: 700; line-height: 1; }
.tv2-price__amount span { font-size: 15px; font-weight: 700; }
.tv2-price__note { font-size: 13px; color: rgba(255, 255, 255, .82); }
.tv2-price__body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.tv2-label { font-size: 13px; font-weight: 800; color: #4B5A53; }
.tv2-tiers-pick { display: flex; flex-direction: column; gap: 8px; }
.tv2-tiers-pick__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.tv2 .tv2-tier-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 56px; padding: 8px 12px; border-radius: 12px; text-decoration: none; background: #fff; color: #13201B; border: 1.5px solid #D9DDD6; }
.tv2 .tv2-tier-btn b { font-size: 14px; }
.tv2 .tv2-tier-btn span { font-size: 12px; font-weight: 600; opacity: .85; }
.tv2 .tv2-tier-btn.is-on { background: #0E3B2E; color: #fff; border-color: #0E3B2E; }
.tv2-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.tv2-form[hidden], .tv2-done[hidden] { display: none; }
.tv2-form__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tv2-form__note { font-size: 12.5px; color: #4B5A53; text-align: center; }
.tv2-done { background: #EEF4EF; border-radius: 16px; padding: 16px; }
.tv2-done:focus { outline: none; }
.tv2-or { display: flex; align-items: center; gap: 10px; color: #4B5A53; font-size: 12.5px; font-weight: 700; }
.tv2-or span { flex: 1; height: 1px; background: #E6E8E2; }
.tv2-talk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tv2-talk .v2-btn { min-height: 48px; }
.tv2-ticks { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid #E6E8E2; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; color: #3A4A42; }
.tv2-ticks li { display: flex; gap: 8px; align-items: center; }
.tv2-ticks svg { flex: none; }
.tv2-expert { background: #fff; border: 1px solid #E6E8E2; border-radius: 18px; padding: 14px 16px; display: flex; gap: 12px; align-items: center; }
.tv2-expert img, .tv2-expert__ini { width: 46px; height: 46px; border-radius: 50%; flex: none; object-fit: cover; }
.tv2-expert__ini { background: #F2A93B; color: #0E3B2E; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.tv2-expert > span { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.tv2-expert b { font-size: 14.5px; }
.tv2-expert > span > span { font-size: 13px; color: #4B5A53; }

/* ---- 5 Sticky section tabs (below the sticky header) ---- */
.tv2-tabs { position: sticky; top: var(--tv2-head); z-index: 30; background: rgba(245, 244, 239, .97); padding: 10px 0; border-bottom: 1px solid #E6E8E2; }
.tv2-tabs__row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.tv2-tabs__row::-webkit-scrollbar { display: none; }
.tv2 .tv2-tabs a { white-space: nowrap; flex: none; text-decoration: none; font-weight: 700; font-size: 14.5px; padding: 0 14px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; color: #3A4A42; }
.tv2 .tv2-tabs a[aria-current="true"] { background: #0E3B2E; color: #fff; }
.tv2-sec { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; scroll-margin-top: calc(var(--tv2-head) + 64px); }
#overview.tv2-sec { gap: 18px; padding-top: 0; }

/* ---- 6 Facts ---- */
.tv2-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tv2-fact { background: #fff; border: 1px solid #E6E8E2; border-radius: 16px; padding: 14px; display: flex; gap: 12px; align-items: center; min-width: 0; }
.tv2-fact__ico { width: 42px; height: 42px; border-radius: 12px; background: #EEF4EF; display: flex; align-items: center; justify-content: center; flex: none; }
.tv2-fact__txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.tv2-fact__txt span { font-size: 12px; font-weight: 800; color: #4B5A53; letter-spacing: .4px; text-transform: uppercase; }
.tv2-fact__txt b { font-size: 14.5px; overflow-wrap: anywhere; }

/* ---- 7 Route strip ---- */
.tv2-card { background: #fff; border: 1px solid #E6E8E2; border-radius: 20px; padding: 18px; }
.tv2-route { border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.tv2-route__row { list-style: none; margin: 0; padding: 30px 0 4px; display: flex; align-items: flex-start; overflow-x: auto; scrollbar-width: thin; }
.tv2-route__stop { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; width: 104px; text-align: center; }
.tv2-route__stop b { font-size: 14.5px; line-height: 1.25; }
.tv2-route__stop > span:last-child { font-size: 12px; color: #4B5A53; }
.tv2-route__dot { width: 16px; height: 16px; border-radius: 50%; background: #0E3B2E; border: 3px solid #CFE0D6; box-sizing: content-box; }
.tv2-route__stop.is-stay .tv2-route__dot { width: 18px; height: 18px; background: #F2A93B; border: 4px solid #FCEBD0; margin-top: -3px; }
.tv2-route__leg { flex: 1; min-width: 96px; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: -22px; text-align: center; }
.tv2-route__mode { font-size: 12px; font-weight: 700; color: #B4691A; }
.tv2-route__line { width: 100%; border-top: 2.5px dashed #B9C7BE; }
.tv2-route__info { font-size: 11.5px; color: #4B5A53; }

/* ---- 8 About + highlights ---- */
.tv2-about { display: flex; flex-direction: column; gap: 10px; }
.tv2-about p { margin: 0; font-size: 16px; line-height: 1.7; color: #3A4A42; }
.tv2-hl h3 { margin: 0 0 12px; font-size: 18px; }
.tv2-hl ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.tv2-hl li { display: flex; gap: 10px; align-items: center; font-size: 15px; font-weight: 600; }
.tv2-hl li > span { width: 26px; height: 26px; border-radius: 50%; background: #FCEBD0; display: flex; align-items: center; justify-content: center; flex: none; }

/* ---- 10 Change-a-day band ---- */
.tv2-band { background: #0E3B2E; color: #fff; border-radius: 18px; padding: 16px 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.tv2-band > span { display: flex; flex-direction: column; gap: 2px; }
.tv2-band b { font-size: 16px; }
.tv2-band > span > span { font-size: 14px; color: rgba(255, 255, 255, .82); }

/* ---- 11 Included ---- */
.tv2-inex { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.tv2-list { display: flex; flex-direction: column; gap: 10px; }
.tv2-list__h { font-size: 16px; }
.tv2-list__h--in { color: #1F5E43; }
.tv2-list__h--out { color: #8A3A12; }
.tv2-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tv2-list li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.5; color: #3A4A42; }
.tv2-list li svg { flex: none; margin-top: 2px; }

/* ---- 12 Hotel classes ---- */
.tv2-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; padding-top: 6px; }
.tv2 .tv2-tier { display: flex; flex-direction: column; gap: 10px; position: relative; text-decoration: none; color: #13201B; transition: transform .25s ease, box-shadow .25s ease; }
.tv2 a.tv2-tier:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(14, 59, 46, .18); }
.tv2-tier.is-on { border: 2px solid #0E3B2E; }
.tv2-tier b { font-size: 18px; }
.tv2-tier > span:not(.v2-price):not(.tv2-tier__flag):not(.tv2-tier__go) { font-size: 14px; color: #3A4A42; line-height: 1.6; }
.tv2-tier__flag { position: absolute; top: -12px; left: 16px; background: #0E3B2E; color: #fff; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.tv2-tier__go { font-weight: 800; color: #0E3B2E; min-height: 24px; }

/* ---- 13 Before you book ---- */
.tv2-notes { background: #FDF4E4; border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.tv2-notes b { font-size: 16px; color: #5A3A0A; }
.tv2-notes ul { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; line-height: 1.55; color: #4A3412; }
.tv2-notes li::marker { color: #B4691A; }

/* ---- 14 FAQ ---- */
.tv2-ask { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 15px; font-weight: 600; color: #3A4A42; }

/* ---- 15 Reviews ---- */
.tv2 .tv2-gpill { display: inline-flex; gap: 8px; align-items: center; background: #fff; border: 1px solid #E6E8E2; border-radius: 999px; padding: 8px 14px; font-weight: 800; font-size: 14px; color: #13201B; text-decoration: none; min-height: 40px; }
.tv2-gpill > span { color: #C98A12; }
.tv2-revs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tv2-rev { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.tv2-rev figcaption { display: flex; gap: 10px; align-items: center; }
.tv2-rev figcaption > span:last-child { display: flex; flex-direction: column; line-height: 1.3; font-size: 12.5px; color: #4B5A53; }
.tv2-rev figcaption b { font-size: 14.5px; color: #13201B; }
.tv2-rev__ini { width: 40px; height: 40px; border-radius: 50%; background: #8FC1A9; color: #0E3B2E; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex: none; }
.tv2-rev__stars { color: #B97511; letter-spacing: 2px; }
.tv2-rev blockquote { margin: 0; font-size: 15px; line-height: 1.6; color: #3A4A42; }

/* ---- 16 Related ---- */
.tv2-related { padding-top: 40px; padding-bottom: 20px; display: flex; flex-direction: column; gap: 18px; }
.tv2 .tv2-more { font-weight: 800; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.tv2-rel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

/* ---- 17 Final CTA ---- */
.tv2-final { padding-top: 36px; padding-bottom: 72px; }
.tv2-final__box { background: #F2A93B; border-radius: 28px; padding: 32px 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.tv2-final__box > div:first-child { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.tv2-final h2 { margin: 0; font-family: 'Fraunces', serif; font-size: clamp(26px, 3.2vw, 40px); color: #0E3B2E; }
.tv2-final p { margin: 0; font-size: 16px; color: #3B2A0E; font-weight: 600; }
.tv2-final__acts { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- 18 Mobile sticky bar (phones only; under every modal) ---- */
.tv2-bar { display: none; }

@media (max-width: 980px) {
    .tv2-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .tv2-main { grid-row: 2; }
    .tv2-aside { grid-column: 1; grid-row: 1; position: static; }
    .tv2-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .tv2-wrap { padding-left: 16px; padding-right: 16px; }
    .tv2-share { display: none; }
    .tv2-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .tv2-fact { padding: 12px; gap: 10px; }
    .tv2-fact__ico { width: 36px; height: 36px; }
    .tv2-hl ul, .tv2-inex, .tv2-tiers, .tv2-revs { grid-template-columns: minmax(0, 1fr); }
    .tv2-tabs__row { margin: 0 -16px; padding: 0 16px; }
    .tv2-route { padding: 18px; }
    .tv2-rel { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 14px; scrollbar-width: none; }
    .tv2-rel::-webkit-scrollbar { display: none; }
    .tv2-rel > * { scroll-snap-align: start; }
    .tv2-final { padding-bottom: 96px; }
    .tv2-final__box { padding: 26px 20px; }
    .tv2-sechead__acts .v2-btn { flex: 1 1 auto; }
    .tv2-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1030; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; background: #0E3B2E; border-radius: 18px; padding: 8px 8px 8px 14px; box-shadow: 0 14px 34px rgba(0, 0, 0, .28); transition: transform .25s ease, opacity .25s ease; }
    .tv2-bar.is-tucked { transform: translateY(140%); opacity: 0; pointer-events: none; }
    .tv2-bar__price { display: flex; flex-direction: column; color: #fff; line-height: 1.15; min-width: 0; }
    .tv2-bar__price span { font-size: 11px; font-weight: 700; opacity: .8; }
    .tv2-bar__price b { font-family: 'Fraunces', serif; font-size: 20px; }
    .tv2 .tv2-bar__wa { background: #1F7A4D; color: #fff; border-radius: 12px; min-height: 50px; width: 50px; display: flex; align-items: center; justify-content: center; }
    .tv2 .tv2-bar__go { text-decoration: none; background: #F2A93B; color: #0E3B2E; font-weight: 800; font-size: 15px; border-radius: 12px; min-height: 50px; padding: 0 16px; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
    /* The bar carries WhatsApp on phones, so the round site-wide button steps aside here. */
    body:has(.tv2-bar) .nd-global-wa-float { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .tv2 .tv2-tier, .tv2-bar { transition: none; }
}