/* Package details page (package.html). Header, menu, login and footer are styled by the shared site stylesheets;
   this file only styles the page content, using the same colours, type and shapes as the home page.
   The plane (.sky) and the road with cars (.road) are the home page's own, styled in header-hero.css.
   The title banner is shared with other inner pages: see page-banner.css. */

/* ---------- Reveal on scroll (the .in class is added by package-page.js) ---------- */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .8s calc(var(--d, 0) * .08s), transform .9s var(--ease-out) calc(var(--d, 0) * .08s); }
.rv.in { opacity: 1; transform: none; }

/* ---------- Content ---------- */
.tour-shell { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(24px, 3vw, 44px); align-items: start; width: min(1240px, calc(100% - 2 * clamp(16px, 3vw, 48px))); margin: 0 auto; padding: 52px 0 100px; }
.tour-main { min-width: 0; }
.tour-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 26px; }
.tag { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--accent); color: var(--ink); font: 700 10px "DM Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.tour-heading h2 { margin: 14px 0 10px; font-size: clamp(30px, 3.6vw, 48px); font-weight: 700; line-height: 1.05; }
.tour-heading p { margin: 0; font-size: 15px; color: #5b6b66; }
.rating { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 12px; padding: 12px 16px; border: 1px solid #0b2a2412; border-radius: 18px; background: #fff; text-align: right; }
.rating small { font: 700 10px "DM Sans", sans-serif; letter-spacing: .16em; color: #6d7c78; }
.rating b { grid-column: 2; grid-row: 1 / 3; font: 800 28px Manrope, sans-serif; letter-spacing: -.03em; }
.rating span { font-size: 13px; color: var(--accent); }
.quick-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.fact { padding: 16px 18px; border: 1px solid #0b2a2412; border-radius: 18px; background: #fff; transition: opacity .8s calc(var(--d, 0) * .08s), transform .6s var(--ease-out), box-shadow .4s, border-color .4s; }
.fact.in:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 18px 30px -22px #0b2a2480; }
.fact i { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 11px; background: #f6b73c2e; font-style: normal; font-size: 16px; transition: background .4s, transform .5s var(--ease-out); }
.fact:hover i { background: var(--accent); transform: rotate(-8deg) scale(1.08); }
.fact small { display: block; margin-bottom: 6px; font: 700 10px "DM Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #6d7c78; }
.fact b { font: 800 15px Manrope, sans-serif; letter-spacing: -.02em; }
.gallery-card, .content-card, .policy-list details { border: 1px solid #0b2a2412; border-radius: 24px; background: #fff; }
.gallery-card { padding: 12px; }
.gallery-stage { position: relative; overflow: hidden; border-radius: 16px; background: var(--ink); }
.gallery-stage img { display: block; width: 100%; height: clamp(260px, 36vw, 460px); object-fit: cover; transition: opacity .3s, transform .9s var(--ease-out); animation: galleryDrift 14s ease-in-out infinite alternate; }
.gallery-stage img.swap { opacity: 0; transform: scale(1.06); }
.gallery-count { position: absolute; right: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: #031a15b3; color: #fff; font: 700 11px "DM Sans", sans-serif; letter-spacing: .14em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@keyframes galleryDrift { from { transform-origin: 30% 40%; scale: 1; } to { transform-origin: 70% 60%; scale: 1.07; } }
.thumbs { display: flex; gap: 10px; padding-top: 12px; }
.thumbs button { width: 104px; height: 72px; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: none; opacity: .65; cursor: pointer; transition: border-color .3s, opacity .3s, transform .4s var(--ease-out); }
.thumbs button:hover { opacity: 1; transform: translateY(-3px); }
.thumbs button.active { border-color: var(--accent); opacity: 1; }
.thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.content-card { margin-top: 20px; padding: clamp(20px, 2.4vw, 32px); }
.content-card h3 { margin: 0 0 14px; font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.content-card > p { margin: 0; font-size: 15.5px; line-height: 1.7; color: #46554f; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chips span { padding: 8px 14px; border-radius: 999px; background: #0b2a240d; font-size: 13px; font-weight: 600; }
.highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.highlights li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--cream); font-size: 15px; line-height: 1.4; }
.highlights b { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--accent); font: 800 13px Manrope, sans-serif; }

/* ---------- Itinerary timeline: the line fills and the car drives down it as you scroll ---------- */
.itinerary-card > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid #0b2a2414; }
.itinerary-card > header h3 { display: inline; margin: 0 12px 0 0; vertical-align: middle; }
.itinerary-card > header span { padding: 6px 12px; border-radius: 999px; background: #0b2a240d; font-size: 12.5px; font-weight: 700; vertical-align: middle; white-space: nowrap; }
.itinerary-card > header button { flex: none; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 700 13px Manrope, sans-serif; cursor: pointer; transition: background .3s, color .3s; }
.itinerary-card > header button:hover { background: var(--accent); color: var(--ink); }
.timeline-wrap { position: relative; padding-top: 24px; }
.tl-rail { position: absolute; left: 21px; top: 46px; bottom: 30px; width: 2px; background: #0b2a2417; }
.tl-rail i { position: absolute; inset: 0; background: linear-gradient(var(--accent), #ff7a59); transform: scaleY(var(--p, 0)); transform-origin: top; }
.tl-car { position: absolute; left: 50%; top: calc(var(--p, 0) * 100%); width: 46px; margin: -6px 0 0 -23px; rotate: 90deg; color: var(--accent); filter: drop-shadow(0 4px 6px #0b2a2466); transition: top .25s linear; }
.tl-car svg { display: block; width: 100%; height: auto; overflow: visible; }
.timeline { position: relative; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.tl-day { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; opacity: 0; transform: translateY(26px); transition: opacity .7s calc(var(--d, 0) * .07s), transform .8s var(--ease-out) calc(var(--d, 0) * .07s); }
.tl-day.in { opacity: 1; transform: none; }
.tl-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-top: 8px; border: 2px solid #0b2a2426; border-radius: 50%; background: #fff; font: 800 13px Manrope, sans-serif; scale: .6; transition: scale .6s cubic-bezier(.5, 1.6, .4, 1) calc(var(--d, 0) * .07s + .15s), background .4s, color .4s, border-color .4s; }
.tl-day.in .tl-dot { scale: 1; }
.tl-day.open .tl-dot { border-color: var(--ink); background: var(--ink); color: var(--accent); }
.tl-card { overflow: hidden; border: 1px solid #0b2a2414; border-radius: 20px; background: #fff; transition: border-color .4s, box-shadow .4s; }
.tl-day.open .tl-card { border-color: var(--accent); box-shadow: 0 18px 34px -24px #0b2a2480; }
.tl-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 16px 18px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tl-head small { display: block; margin-bottom: 4px; font: 700 10px "DM Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #0f7a5c; }
.tl-head strong { font: 800 17px Manrope, sans-serif; letter-spacing: -.02em; }
.tl-head i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #0b2a240d; font-style: normal; font-size: 18px; transition: rotate .45s var(--ease-out), background .3s; }
.tl-day.open .tl-head i { rotate: 45deg; background: var(--accent); }
.tl-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-out); }
.tl-day.open .tl-body { grid-template-rows: 1fr; }
.tl-body > div { min-height: 0; overflow: hidden; }
.tl-in { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 0 18px 18px; }
.tl-in img { display: block; width: 100%; height: 104px; object-fit: cover; border-radius: 14px; }
.tl-in p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: #46554f; }
.tl-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-tags span { padding: 5px 11px; border-radius: 999px; background: var(--cream); font-size: 12px; font-weight: 600; }

.included-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.included-grid > div { padding: 18px; border-radius: 18px; background: #e8f5ee; color: #0f6b52; }
.included-grid > div + div { background: #fdeeea; color: #b1483f; }
.included-grid b { font: 800 14px Manrope, sans-serif; }
.included-grid p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.policy-list { display: grid; gap: 10px; margin-top: 20px; }
.policy-list details { padding: 0 22px; border-radius: 18px; }
.policy-list summary { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; list-style: none; font: 800 15px Manrope, sans-serif; cursor: pointer; }
.policy-list summary::-webkit-details-marker { display: none; }
.policy-list summary span { font-size: 20px; font-weight: 500; transition: transform .3s; }
.policy-list details[open] summary span { transform: rotate(45deg); }
.policy-list details p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: #46554f; }

/* ---------- Pricing card: season prices first, choices next, the full calculation last. It stays in view while the page scrolls;
   when it is taller than the screen, --stick (set in package-page.js) pins its bottom edge so the total and the button stay visible ---------- */
.booking-card { position: sticky; top: var(--stick, 88px); padding: 16px; border-radius: 26px; background: #fff; box-shadow: 0 30px 60px -36px #0b2a2499; }
.pack-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 2px 6px; font-size: 11.5px; color: #6d7c78; }
.pack-head .book-label { margin: 2px 0 0; color: #0f7a5c; }
.pack-head s { text-decoration-thickness: 1px; }
.price-top { margin-top: 14px; padding: 14px 18px; border-radius: 18px; background: linear-gradient(180deg, #0e332c, #082620); color: #fff; }
.calc-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font: 700 10px "DM Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #a9c4bc; }
.calc-head s { text-decoration-thickness: 1px; }
.calc { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.calc li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; gap: 8px; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.calc i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #ffffff1f; font: 800 10px Manrope, sans-serif; font-style: normal; }
.calc small { display: block; margin-top: 1px; font-size: 11px; font-weight: 400; line-height: 1.35; color: #a9c4bc; }
.calc b { font: 700 13px Manrope, sans-serif; white-space: nowrap; }
.calc .sum { margin: 1px -8px; padding: 7px 8px; border-radius: 10px; background: #ffffff14; }
.calc .sum i { background: var(--accent); color: var(--ink); }
.calc .sum b { font: 800 19px/1.1 Manrope, sans-serif; letter-spacing: -.03em; color: var(--accent); }
.total-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #ffffff24; font-size: 13.5px; font-weight: 700; }
.total-line small { display: block; margin-top: 1px; font-size: 11px; font-weight: 400; color: #a9c4bc; }
.total-line strong { display: inline-block; font: 800 22px Manrope, sans-serif; letter-spacing: -.02em; white-space: nowrap; }
.calc-note { margin: 8px 0 0; font-size: 11px; line-height: 1.4; color: #a9c4bc; }
.total-line.bump strong { animation: bump .45s var(--ease-out); }
@keyframes bump { 40% { transform: scale(1.1); color: var(--accent); } }
.book-label { margin: 12px 2px 6px; font: 700 10px "DM Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #6d7c78; }
.dates, .rate-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.date-field { display: grid; gap: 2px; padding: 7px 12px; border: 1px solid #0b2a2417; border-radius: 12px; transition: border-color .3s, box-shadow .3s; }
.date-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px #f6b73c33; }
.date-field span { font: 700 9.5px "DM Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #6d7c78; }
.date-field input { width: 100%; min-width: 0; padding: 0; border: 0; outline: none; background: none; color: var(--ink); font: 700 13.5px Manrope, sans-serif; }
.date-field input:read-only { color: #46554f; pointer-events: none; }
.rate-choice { position: relative; display: grid; gap: 1px; padding: 8px 34px 8px 12px; border: 1px solid #0b2a2417; border-radius: 12px; opacity: .55; transition: border-color .4s, background .4s, opacity .4s; }
.rate-choice.active { border-color: var(--accent); background: #f6b73c24; opacity: 1; }
.rate-choice span { display: flex; align-items: baseline; gap: 6px; }
.rate-choice b { font: 800 12.5px Manrope, sans-serif; white-space: nowrap; }
.rate-choice small { font-size: 11px; color: #6d7c78; white-space: nowrap; }
.rate-choice strong { font: 800 17px Manrope, sans-serif; letter-spacing: -.02em; }
.rate-choice i { position: absolute; right: 9px; top: 50%; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid #0b2a2433; border-radius: 50%; color: transparent; font: 700 11px Manrope, sans-serif; font-style: normal; translate: 0 -50%; transition: background .3s, border-color .3s, scale .45s cubic-bezier(.5, 1.6, .4, 1); }
.rate-choice.active i { border-color: var(--ink); background: var(--ink); color: #fff; scale: 1.12; }
.season-note { margin: 6px 2px 0; font-size: 11.5px; line-height: 1.35; color: #46554f; }
.season-note:empty { display: none; }
.pax { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pax-row { display: grid; justify-items: center; gap: 1px; padding: 8px 6px; border: 1px solid #0b2a2417; border-radius: 12px; text-align: center; }
.pax-row b { font: 800 13px Manrope, sans-serif; letter-spacing: -.01em; white-space: nowrap; }
.pax-row small { font-size: 10.5px; color: #6d7c78; white-space: nowrap; }
.stepper { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.stepper button { width: 26px; height: 26px; padding: 0; border: 1px solid #0b2a2426; border-radius: 50%; background: #fff; color: var(--ink); font-size: 15px; line-height: 1; cursor: pointer; transition: background .3s, color .3s, transform .2s; }
.stepper button:hover { background: var(--ink); color: #fff; }
.stepper button:active { transform: scale(.88); }
.stepper output { min-width: 18px; text-align: center; font: 800 15px Manrope, sans-serif; }
.custom-check { position: relative; display: flex; align-items: center; gap: 10px; margin: 18px 2px 14px; cursor: pointer; }
.custom-check input { position: absolute; width: 0; height: 0; opacity: 0; }
.custom-check i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid #cfcabc; border-radius: 6px; background: #fff; transition: background .25s, border-color .25s; }
.custom-check i:after { content: ""; width: 5px; height: 10px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .25s cubic-bezier(.5, 1.6, .4, 1); }
.custom-check input:checked + i { border-color: var(--ink); background: var(--ink); }
.custom-check input:checked + i:after { transform: rotate(45deg) scale(1); }
.custom-check input:focus-visible + i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 50%, transparent); }
.custom-check > span { display: grid; gap: 1px; }
.custom-check > span b { font: 800 13.5px Manrope, sans-serif; letter-spacing: -.01em; }
.custom-check > span small { font-size: 11.5px; color: #6d7c78; }
.book-button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 14px 20px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 700 15px Manrope, sans-serif; cursor: pointer; transition: background .3s, color .3s; }
.book-button span { transition: transform .35s var(--ease-out); }
.book-button:hover { background: var(--accent); color: var(--ink); }
.book-button:hover span { transform: translateX(4px); }
.safe { display: block; margin-top: 8px; text-align: center; font-size: 11.5px; color: #6d7c78; }
@media (max-height: 800px) {
  .booking-card { padding: 10px; }
  .price-top { margin-top: 10px; padding: 9px 16px; }
  .calc-head { margin-bottom: 5px; }
  .pack-head { margin-bottom: 4px; }
  .calc { gap: 5px; }
  .calc .sum { padding-top: 5px; padding-bottom: 5px; }
  .total-line { margin-top: 6px; padding-top: 6px; }
  .book-label { margin: 7px 2px 4px; }
  .season-note, .custom-check > span small { display: none; }
  .date-field { padding: 5px 12px; }
  .rate-choice { padding-top: 6px; padding-bottom: 6px; }
  .pax-row { padding-top: 5px; padding-bottom: 5px; }
  .stepper { margin-top: 3px; }
  .custom-check { margin: 14px 2px 10px; }
  .book-button { padding: 12px 20px; }
  .safe { display: none; }
}

/* Small screens: fixed bar with the total and the button, shown once the pricing card has scrolled out of view */
.book-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #082620f5; color: #fff; box-shadow: 0 -12px 30px -18px #000; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transform: translateY(105%); transition: transform .5s var(--ease-out); }
.bar-on .book-bar { transform: none; }
.bar-price { flex: 1; display: grid; gap: 1px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.bar-price small { font-size: 11px; color: #a9c4bc; }
.bar-price strong { font: 800 19px Manrope, sans-serif; letter-spacing: -.02em; color: var(--accent); }
.book-bar .book-button { flex: none; gap: 12px; width: auto; padding: 13px 18px; background: var(--accent); color: var(--ink); font-size: 14px; }

/* ---------- Related journeys ---------- */
.related { padding: 90px clamp(16px, 3vw, 48px); background: #e9e5d9; }
.related-head { text-align: center; }
.related-head .section-kicker { justify-content: center; margin: 0 0 16px; }
.related-head h2 { font-size: clamp(34px, 4vw, 56px); font-weight: 600; }
.related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: min(1240px, 100%); margin: 40px auto 0; }
.related-card { overflow: hidden; border-radius: 22px; background: #fff; color: var(--ink); text-decoration: none; transition: opacity .8s calc(var(--d, 0) * .08s), transform .6s var(--ease-out), box-shadow .5s; }
.related-card.in:hover { transform: translateY(-6px); box-shadow: 0 26px 40px -24px #0b2a24a6; }
.related-card img { display: block; width: 100%; height: 170px; object-fit: cover; transition: transform .8s var(--ease-out); }
.related-card:hover img { transform: scale(1.07); }
.related-card div { position: relative; padding: 18px; background: #fff; }
.related-card small { font: 700 10px "DM Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #0f7a5c; }
.related-card h3 { margin: 8px 0 14px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.related-card strong { font: 800 16px Manrope, sans-serif; letter-spacing: -.02em; }
.itinerary-card > header button:focus-visible, .thumbs button:focus-visible, .tl-head:focus-visible, .stepper button:focus-visible, .book-button:focus-visible, .bar-price:focus-visible, .related-card:focus-visible, .hero-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 1000px) {
  .tour-shell { grid-template-columns: minmax(0, 1fr); padding-top: 36px; }
  .booking-card { position: static; order: -1; }
  .book-bar { display: flex; }
  footer { padding-bottom: 96px; }
  .quick-facts, .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .tour-heading { display: block; }
  .rating { display: none; }
  .thumbs button { width: 72px; height: 54px; }
  .highlights, .included-grid, .related-grid { grid-template-columns: minmax(0, 1fr); }
  .itinerary-card > header { flex-wrap: wrap; }
  .tl-day { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; }
  .tl-dot { width: 36px; height: 36px; font-size: 12px; }
  .tl-rail { left: 17px; }
  .tl-in { grid-template-columns: minmax(0, 1fr); }
  .tl-in img { height: 150px; }
  .booking-card { padding: 12px; border-radius: 22px; }
  .related { padding-top: 64px; padding-bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv, .tl-day { opacity: 1; transform: none; transition: none; }
  .tl-dot { scale: 1; transition: none; }
  .gallery-stage img { animation: none; }
  .tl-body, .tl-car, .book-bar { transition: none; }
}