/* ==========================================================================
   Sri Lanka Travel Tours — Tour detail page (mockup only)
   ========================================================================== */

/* ---- Page grid — left column (gallery + content), right column
       (sticky price card), in the Intrepid Travel trip-page style ---- */
.td-page {
  padding-block: 20px 0;
}

.td-page__inner {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: start;
  margin-bottom: 8px;
}

.td-page__top {
  padding-bottom: 24px;
}

/* ---- Title ---- */
.td-title__h1 {
  font-size: 3.5rem;
  line-height: 4rem;
  font-weight: 700;
  letter-spacing: -2px;
  margin: 6px 0 10px;
}

.td-title__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.td-title__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 0.88rem;
  color: var(--slt-gray-600);
}

.td-title__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

.td-title__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slt-ink);
  background: transparent;
  border: none;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 6px;
  cursor: pointer;
}

.td-title__action svg {
  width: 24px;
  height: 24px;
}

.td-title__action:hover {
  color: var(--slt-blue);
}

/* ---- Social share (toggle button reuses .td-title__action styling) —
   same component/markup as the things-to-do detail pages' .pd-share,
   just kept local here since tour-detail.css doesn't load
   place-detail.css. ---- */
.pd-share {
  position: relative;
  display: inline-flex;
}

.pd-share__toggle[aria-expanded="true"] {
  border-color: var(--slt-blue);
  color: var(--slt-blue);
}

.pd-share__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--slt-surface);
  border: 1px solid var(--slt-gray-200);
  border-radius: var(--slt-radius-sm);
  box-shadow: 0 8px 24px rgba(18, 18, 18, 0.12);
  z-index: 5;
}

.pd-share__menu.is-open {
  display: flex;
}

.pd-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--slt-radius-sm);
  border: 1px solid var(--slt-gray-200);
  background: var(--slt-surface);
  color: var(--slt-gray-600);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.pd-share__btn svg {
  width: 16px;
  height: 16px;
}

.pd-share__btn:hover {
  border-color: var(--slt-blue);
  color: var(--slt-blue);
}

.pd-share__btn--copy.is-copied {
  border-color: var(--slt-green);
  color: var(--slt-green);
}

@media (max-width: 575.98px) {
  .td-title__row {
    flex-wrap: wrap;
  }
}

/* ---- Gallery — 2 blocks: main image + one thumb showing the
   remaining photo count, badge on its corner uses the small radius. ---- */
.td-gallery {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
  height: 441px;
  margin-bottom: 12px;
}

/* ---- Mobile prev/next + counter — overlaid on .td-gallery__main.
   Hidden above 575.98px, where the main + thumb pair sits side by side
   and already shows a photo count via .td-gallery__count on the thumb. ---- */
.td-gallery__nav,
.td-gallery__counter {
  display: none;
}

.td-gallery--single {
  grid-template-columns: 1fr;
}

.td-gallery__main {
  width: 100%;
  border: none;
  padding: 0;
  border-radius: var(--slt-radius-sm);
  background: linear-gradient(135deg, #a9c7e8, #5380b5);
  overflow: hidden;
  cursor: pointer;
  transition: filter 0.2s;
}

.td-gallery__main img,
.td-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.td-gallery__main:hover {
  filter: brightness(1.05);
}

.td-gallery__thumb {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: var(--slt-radius-sm);
  cursor: pointer;
  padding: 0;
  background: linear-gradient(135deg, #f3b89a, #d9703f);
  transition: transform 0.2s;
}

.td-gallery__thumb:hover {
  transform: scale(1.03);
}

.td-gallery__count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(18, 18, 18, 0.6);
  color: var(--slt-white);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--slt-radius-sm);
}

/* ---- Quick facts strip — full-bleed with its own fixed 20px side
   margins instead of the .slt-container max-width it used before. ---- */
.td-facts {
  display: grid;
  /* minmax(0, ...) — plain `fr` tracks default to minmax(auto, 1fr), so a
     track never shrinks below its content's min-content width. With a
     fixed 54px icon box + gap + text inside each .td-fact, that pushed
     the grid (and this element) wider than its container. Capping the
     min at 0 lets tracks actually shrink to fit, and the text below
     wrap instead of forcing an overflow. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  width: auto;
  max-width: none;
  padding-block: 18px;
  margin-block: 40px;
  margin-inline: 20px;
  border-radius: var(--slt-radius-sm);
  position: relative;
}

/* Gradient outline — plain `outline`/`border` only accept a solid
   color, so each tier's gradient needs a masked pseudo-element ring
   instead. It's absolutely positioned (inset: 0) and purely decorative,
   so — like the outline it replaces — it can never affect .td-facts'
   own layout width. 1px to match .td-day's border weight in the
   Itinerary section below.

   Colored per #tdFacts' own data-tier attribute (set from the tour's
   tier on page load, updated by the comfort tier select in the booking
   card) — same gradients as .tour-card__style--{tier} in cards.css, so
   the ring always matches whichever tier is currently selected instead
   of being fixed to one tier's color. */
.td-facts::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.td-facts[data-tier="value"]::after {
  background: linear-gradient(21deg, #2d3853 0%, #1a6070 47%, #2d3853 99%);
}

.td-facts[data-tier="comfort"]::after {
  background: linear-gradient(171deg, #1e2171 5%, #474bc2 52%, #1e2171 99%);
}

.td-facts[data-tier="luxury"]::after {
  background: linear-gradient(135deg, var(--slt-gold-400) 0%, var(--slt-gold-500) 50%, var(--slt-gold-600) 100%);
}

/* The lighter gold ramp above reads as too soft against dark theme's
   surface — dark theme instead uses the heavier gold gradient. */
:root[data-theme="dark"] .td-facts[data-tier="luxury"]::after {
  background: linear-gradient(135deg, #4A3301 0%, #AA771C 45%, #B38728 55%, #674F13 100%);
}

/* Mobile gallery prev/next + counter — solid white/black in light theme
   (readable against any photo), back to the translucent dark-glass look
   in dark theme. */
:root[data-theme="dark"] .td-gallery__nav {
  background: rgba(255, 255, 255, 0.12);
  color: var(--slt-white);
}

:root[data-theme="dark"] .td-gallery__counter {
  background: rgba(18, 18, 18, 0.6);
  color: var(--slt-white);
}

.td-fact {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  color: var(--slt-ink);
  padding-right: 18px;
}

.td-fact:last-child {
  padding-right: 0;
  border-right: none;
}

.td-fact--highlight {
  background-color: var(--slt-highlight-bg);
  color: var(--slt-highlight-text);
  border-radius: var(--slt-radius-sm);
  padding: 6px 14px;
  margin: -6px 0;
}

.td-fact--highlight svg {
  color: var(--slt-highlight-text);
}

.td-fact--highlight span {
  color: var(--slt-highlight-text);
  opacity: 0.8;
}

.td-fact svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--slt-blue);
}

.td-fact div {
  display: flex;
  flex-direction: column;
  gap:10px;
  min-width: 0;
}

/* Icon box — overrides the column-flex rule above (higher specificity
   via the .td-fact ancestor) so the icon centers instead of stacking. */
.td-fact .td-fact__icon-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: var(--slt-radius-sm);
  background-color: var(--slt-surface-subtle);
}

.td-fact__icon {
  width: 30px;
  height: 30px;
  color: var(--slt-blue);
}

/* physical.svg/activities.svg/calender.svg (like hotel.svg) are a
   hardcoded black fill — .td-fact__icon-box--dark used to force them
   permanently white on a permanently-black (var(--slt-ink)) tile, which
   looked overly stark in light theme and actually inverted to
   white-on-white in dark theme (var(--slt-ink) flips light there). Now
   matches the Hotels tile: same light/dark-reactive box, same
   dark-theme-only inversion so the icon stays visible either way. */
:root[data-theme="dark"] .td-fact__icon--hotel,
:root[data-theme="dark"] .td-fact__icon--white {
  filter: brightness(0) invert(1);
}

.td-fact span {
  font-size: 0.8rem;
  color: var(--slt-gray-600);
  font-weight: 500;
}

.td-fact strong {
  font-size: 0.92rem;
  font-weight: 700;
}

.td-fact__note {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--slt-gray-600);
  line-height: 1.4;
  font-family: "Krona One", var(--font-base);
}

/* Hotel-grade fact — title uses the tier-badge Krona One treatment
   from the "Plan My Trip" wizard; the note below stays body text. */
.td-fact__stay strong {
  font-size: 1rem;
  font-family: "Krona One", var(--font-base);
  color: var(--slt-ink);
}

/* Physical grade label — follows the "5-Star Hotels" title's font
   size + family above, so the two fact titles read consistently. */
.td-fact__grade > span:first-child {
  font-size: 1rem;
  font-family: "Krona One", var(--font-base);
color: var(--slt-ink);
}

/* Best Time to Visit — title follows the same font + size as the other
   two fact titles above; the value below uses the same secondary/muted
   color as the meals note (.td-fact__note) instead of full ink. */
.td-fact__season > span:first-child {
  font-size: 1rem;
  font-family: "Krona One", var(--font-base);
  color: var(--slt-ink);
}

.td-fact__season strong {
  color: var(--slt-gray-600);
}

/* Highlights fact — text-only, no icon-box; title follows the same
   font + size as the other fact titles above. */
.td-fact__highlights strong {
  font-size: 1rem;
  font-family: "Krona One", var(--font-base);
  color: var(--slt-ink);
}

/* ---- Physical grade strength meter ---- */
.td-grade {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}

.td-grade__bar {
  width: 20px;
  height: 5px;
  background-color: var(--slt-gray-200);
}

.td-grade__bar--on {
  background-color: var(--slt-ink);
}

.td-grade strong {
  font-size: 0.8rem;
  font-weight: 500;
  font-family: "Krona One", var(--font-base);
  margin-left: 6px;
}

.td-grade--sm .td-grade__bar {
  width: 11px;
  height: 4px;
}

.td-grade--sm strong {
  font-size: 0.85rem;
  margin-left: 4px;
}


/* ---- Section tabs — destination title grows into view on scroll ---- */
.td-tabs {
  position: sticky;
  top: 0;
  background: var(--slt-surface);
  z-index: 10;
}

.td-tabs__title {
  display: block;
  font-size: 0;
  font-weight: 700;
  white-space: nowrap;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: font-size 0.25s ease, max-height 0.25s ease, opacity 0.2s ease, transform 0.2s ease, padding-block 0.25s ease;
}

.td-tabs.is-scrolled .td-tabs__title {
  font-size: 1.3rem;
  max-height: 48px;
  opacity: 1;
  transform: translateY(0);
  padding-block: 12px 8px;
}

.td-tabs__inner {
  display: flex;
  gap: 28px;
}

.td-tabs a {
  display: inline-block;
  padding: 14px 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--slt-gray-600);
  border-bottom: 2px solid transparent;
}

.td-tabs a:hover {
  color: var(--slt-ink);
}

.td-tabs a.is-active {
  color: var(--slt-blue);
  border-bottom-color: var(--slt-blue);
}

.td-block {
  padding-block: 28px;
  border-bottom: 0px solid var(--slt-gray-200);
}

#faq.td-block {
  border-bottom: none;
}

#itinerary.td-block {
  padding-top: 0;
}

.td-block h2 {
  font-size: 2.5rem;
  line-height: 3rem;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0 0 14px;
}

.td-block p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--slt-gray-600);
  margin: 0 0 12px;
}

.td-subhead {
  font-size: 28px;
  font-weight: 700;
  margin: 24px 0 14px;
}

/* ---- Trip highlight cards ---- */
.td-highlight-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.td-highlight-card {
  border: 1px solid var(--slt-gray-200);
  border-radius: var(--slt-radius-sm);
  padding: 18px;
}

.td-highlight-card svg {
  width: 26px;
  height: 26px;
  color: var(--slt-red);
  margin-bottom: 10px;
}

.td-highlight-card h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.td-highlight-card p {
  font-size: 0.85rem;
  margin: 0;
}

/* ---- Itinerary layout — map column (5/10) stays pinned in view
   while the day-by-day accordion (5/10) scrolls past it, then
   releases once the accordion column ends. ---- */
.td-itinerary__grid {
  display: grid;
  grid-template-columns: 5fr 5fr;
  gap: 58px;
  align-items: start;
}

.td-itinerary__map {
  position: sticky;
  top: 84px;
}

.td-itinerary__map .td-map-placeholder {
  margin-bottom: 0;
}

/* ---- Itinerary map ---- */
.td-map-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--slt-radius-sm);
  object-fit: cover;
  margin-bottom: 20px;
}

/* ---- Itinerary start/end points ---- */
.td-route-point + .td-day {
  border-top: none;
}

/* ---- Itinerary accordion ---- */
.td-day {
  border-top: 1px solid var(--slt-gray-200);
}

.td-day:first-of-type {
  border-top: none;
}

.td-day summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  cursor: pointer;
  list-style: none;
  background:var(--slt-gray-200);
  margin-bottom: 2px;
}

.td-day summary::-webkit-details-marker {
  display: none;
 

}

.td-day__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--slt-text-primary);
  border: 1px solid var(--slt-text-primary);
  border-radius: var(--slt-radius-sm);
  padding: 6px 12px;
  flex-shrink: 0;
}

.td-day__title {
  flex: 1;
  font-size: 1.05rem;
  font-weight: 700;
}

.td-day__chevron {
  width: 24px;
  height: 24px;
  color: var(--slt-gray-600);
  transition: transform 0.2s ease;
}

.td-day[open] .td-day__chevron,
.td-faq[open] .td-day__chevron {
  transform: rotate(180deg);
}

.td-day__body {
  margin: 0 0 18px;
}

.td-day__content {
  display: flex;
  flex-direction: column;
  gap: 0px;
padding: 20px 0px;
}

.td-day__content > p {
  margin: 0;
  color: var(--slt-gray-600);
  line-height: 1.6;
  padding-bottom: 16px;
}

/* ---- Details card — Accommodation/Meals + Included activities grouped
   together and visually separated from the narrative paragraph, so the
   day's hard facts are scannable at a glance. Light theme uses the
   opposite (light) tone of the dark-theme fill, both at 50% opacity so
   the panel reads as a soft tint rather than a solid block either way. ---- */
.td-day__details {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: rgba(239, 240, 240, 0.5);
  padding: 20px;
}

:root[data-theme="dark"] .td-day__details {
  background-color: rgba(29, 34, 37, 0.5);
}

.td-day__row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.td-day__row + .td-day__row {
  border-top: 1px solid var(--slt-gray-200);
  padding-top: 16px;
}

.td-day__thumb {
  flex-shrink: 0;
  width: 284px;
  aspect-ratio: 4 / 3;
  border-radius: var(--slt-radius-sm);
  overflow: hidden;
}

.td-day__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.td-day__thumb--stay {
  background: linear-gradient(135deg, #a9c7e8, #5380b5);
}

.td-day__thumb--activities {
  background: linear-gradient(135deg, #9fd6c0, #2f8f6a);
}

.td-day__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

/* Accommodation/Meals stack into one column instead of sitting
   side-by-side once a day has a .td-day__thumb--stay image next to them
   (see tour-view.php) — the pair reads as a single "here's your night"
   block next to the photo rather than two disconnected half-width cards. */
.td-day__cols--stacked {
  grid-template-columns: 1fr;
}

/* ---- Label icons — small solid-color tile behind a white icon, so the
   icon stays visible regardless of what background it sits on (plain
   card or the tinted Special information callout below). ---- */
.td-day__col-head,
.td-day__section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.td-day__col-icon,
.td-day__section-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--slt-gray-200);
  color: var(--slt-ink);
}

:root[data-theme="dark"] .td-day__col-icon,
:root[data-theme="dark"] .td-day__section-icon {
  color: var(--slt-white);
}

.td-day__col-icon svg,
.td-day__section-icon svg {
  width: 14px;
  height: 14px;
}

/* .td-day__details/.td-day__section--info now flip light/dark tone with
   the theme (above/below), so these go back to the same theme-reactive
   ink/gray tokens the rest of the page uses. */
.td-day__col h4,
.td-day__section h4 {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--slt-ink);
  margin: 0;
}

.td-day__col p,
.td-day__section p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--slt-gray-600);
}

/* Hotel grade is a separate DB field (not just styled text) so it can be
   hidden per day (e.g. blank on departure days) independently of the
   free-text accommodation description. Colored per the tour's own
   comfort tier — same gradients as .tour-card__style--{tier} in
   cards.css, so a Comfort Journey tour's badge here matches its Comfort
   Journey badge on the tour card, instead of an unrelated fixed color. */
.td-hotel-grade {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--slt-radius-sm);
  color: var(--slt-white);
  font-weight: 700;
}

.td-hotel-grade--comfort {
  background: linear-gradient(171deg, #1e2171 5%, #474bc2 52%, #1e2171 99%);
}

.td-hotel-grade--value {
  background: linear-gradient(21deg, #2d3853 0%, #1a6070 47%, #2d3853 99%);
}

.td-hotel-grade--luxury {
  background: linear-gradient(135deg, var(--slt-gold-400) 0%, var(--slt-gold-500) 50%, var(--slt-gold-600) 100%);
  color: #4a3301;
}

:root[data-theme="dark"] .td-hotel-grade--luxury {
  background: linear-gradient(135deg, #4A3301 0%, #AA771C 45%, #B38728 55%, #674F13 100%);
  color: var(--slt-white);
}

.td-day__section {
  flex: 1;
  min-width: 0;
}

.td-day__activities {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}

.td-day__activities li {
  padding-left: 16px;
  position: relative;
  color: var(--slt-ink);
}

.td-day__activities li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--slt-gray-600);
}

/* ---- Special information — tinted callout so the advisory note stands
   apart from the plain facts above it instead of blending in. Light
   theme uses a light blue tint (opposite of the dark-theme navy fill),
   both at 50% opacity. ---- */
.td-day__section--info {
  border-top: none;
  background: rgba(243, 248, 255, 0.5);
  padding: 20px;
}

:root[data-theme="dark"] .td-day__section--info {
  background: rgba(9, 42, 102, 0.2);
}

.td-day__section--info h4 {
  color: var(--slt-blue);
}

:root[data-theme="dark"] .td-day__section--info h4 {
  color: var(--slt-blue-300);
}

.td-day__section--info .td-day__section-icon {
  background-color: var(--slt-blue-300);
}

.td-day__section--info p {
  color: var(--slt-ink);
}

/* ---- FAQ accordion ---- */
.td-faq {
  border-top: 1px solid var(--slt-gray-200);
}

.td-faq:first-of-type {
  border-top: none;
}

.td-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  font-weight: 600;
}

.td-faq summary::-webkit-details-marker {
  display: none;
}

.td-faq p {
  margin: 0 0 16px;
}

/* ---- Included / excluded ---- */
.td-list {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  color: var(--slt-ink);
  line-height: 1.5;
}

.td-list li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.td-list li svg {
  flex-shrink: 0;
  width: 18px;
  heigh: 18px;
}

.td-list--yes li svg {
  color: #99AC73;
}

.td-list--no li svg {
  color: #BF4041;
}

/* ---- How this works + What's included — two-column layout,
   modelled on the Lonely Planet itinerary page's numbered steps
   and bordered included/excluded blocks. ---- */
.td-how-included__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 58px;
  align-items: start;
  padding-top:20px;
}

.td-steps {
  display: grid;
  gap: 24px;
}

.td-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.td-step__num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 1px solid var(--slt-ink);
  border-radius: var(--slt-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--slt-ink);
}

.td-step__body h4 {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 6px;
}

.td-step__body p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--slt-gray-600);
  line-height: 1.6;
}

/* ---- CTA banner stack — both banners kept, but placed together
   below the two-column grid instead of one per column. ---- */
.td-cta-banner-stack {
  display: grid;
  gap: 20px;
  margin-top: 24px;
}

/* ---- CTA banner — filled callout below the numbered steps,
   nudging toward booking once the "how it works" flow is read. ---- */
.td-cta-banner {
  padding: 10px 24px;
  background-color: var(--slt-blue);
  transform: rotate(-3deg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

.td-cta-banner__text {
  flex: 1;
  min-width: 0;
}

.td-cta-banner h4 {
  font-size: 2rem;
  font-weight: 700;
  font-family: "Krona One", var(--font-base);
  color: var(--slt-white);
  margin: 0 0 0px;
}

.td-cta-banner p {
  margin: 0;
  font-size: 0.9rem;
  font-family: "Krona One", var(--font-base);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
}

.td-cta-banner__logo {
  height: 40px;
  width: auto;
  display: block;
}

.td-cta-banner .td-btn-book {
  display: inline-block;
  flex-shrink: 0;
  color: var(--slt-ink);
  text-decoration: none;
  background-color: var(--slt-white);
}

.td-cta-banner .td-btn-book:hover {
  background-color: var(--slt-blue-500);
  color: var(--slt-white);
}

.td-cta-banner--dark {
  background-color: var(--slt-blue-900);
  width: auto;
  justify-self: start;
}

.td-cta-banner--dark .td-btn-book {
  color: var(--slt-ink);
  background-color: var(--slt-white);
}

:root[data-theme="dark"] .td-cta-banner .td-btn-book,
:root[data-theme="dark"] .td-cta-banner--dark .td-btn-book {
  color: var(--slt-white);
  background-color: var(--slt-slate-900);
}

.td-included-block + .td-included-block {
  margin-top: 24px;
}

.td-included-block__head {
  margin-bottom: 16px;
}

/* Light theme (default) tints these at reduced opacity instead of the
   full-strength color below — same hue, softened so it reads as a
   light tint rather than a heavy solid block. Dark theme keeps the
   original full-strength color, same treatment used elsewhere on this
   page (.td-day__details, .td-day__section--info). */
.td-included-block h3 {
  font-size: 1.05rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
  padding: 10px 14px;
  color: var(--slt-ink);
  background-color: rgba(153, 172, 115, 0.45);
letter-spacing:2px;
}

.td-included-block--no h3 {
  background-color: rgba(191, 64, 65, 0.45);
}

:root[data-theme="dark"] .td-included-block h3 {
  background-color: #99AC73;
}

:root[data-theme="dark"] .td-included-block--no h3 {
  background-color: #BF4041;
}

.td-btn-book {
  background-color: var(--slt-blue);
  color: var(--slt-white);
  border: none;
  border-radius: var(--slt-radius-sm);
  padding: 10px 20px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.td-btn-book:hover {
  background-color: var(--slt-action-hover);
}

.td-btn-book:disabled {
  background-color: var(--slt-gray-200);
  color: var(--slt-gray-600);
  cursor: not-allowed;
}

.td-btn-book--full {
  width: 100%;
  padding: 18px;
  font-size: 1.2rem;
  margin-bottom: 10px;
}

/* border-strong (not the plain --slt-border it used before) — this
   button sits on .td-booking-card, whose light-theme fill is now solid
   slate-200, the same color --slt-border resolves to, which made the
   outline disappear entirely. */
.td-btn-compare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background-color: transparent;
  color: var(--slt-gray-600);
  border: 2px solid var(--slt-border-strong);
  border-radius: var(--slt-radius-sm);
  padding: 13px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.td-btn-compare svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke-width: 2px;
}

.td-btn-compare:hover {
  border-color: var(--slt-blue-400);
  color: var(--slt-blue-400);
}

.td-customize-note {
  margin: 8px 0 0;
  font-size: 0.6rem;
  color: var(--slt-gray-600);
  text-align: left;
}

.td-booking-card__field.is-invalid .td-datepicker__trigger {
  box-shadow: 0 0 0 1.5px var(--slt-urgent);
  border-radius: var(--slt-radius-sm);
}

.td-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--slt-blue);
  color: var(--slt-blue);
  border-radius: var(--slt-radius-sm);
  padding: 10px 22px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.td-btn-outline:hover {
  background-color: #eef4ff;
}

:root[data-theme="dark"] .td-btn-outline:hover {
  background-color: rgba(139, 180, 255, 0.12);
}

.td-btn-outline--full {
  width: 100%;
  padding: 13px;
  font-size: 0.95rem;
}

/* ---- Reviews ---- */
.td-review {
  padding-block: 16px;
  border-top: 1px solid var(--slt-gray-200);
}

.td-review:first-of-type {
  border-top: none;
}

.td-review__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.td-review__rating {
  color: #d99a1f;
  font-size: 0.9rem;
}

.td-review__head strong {
  font-size: 0.95rem;
}

.td-review p {
  margin: 0 0 6px;
}

.td-review__by {
  font-size: 0.82rem;
  color: var(--slt-gray-600);
}

/* ---- Sticky booking sidebar ---- */
.td-sidebar {
  position: sticky;
  top: 84px;
  /* Own stacking context (position: sticky) with no z-index defaults
     to "auto", which stacks by DOM order — .td-facts comes right after
     this sidebar and would otherwise paint over the date-picker dropdown
     (whose z-index: 20 only applies inside the sidebar's own context). */
  z-index: 2;
}

/* Light theme uses the opposite (light) tone of the dark-theme fill, both
   at full opacity — same treatment as .td-day__details/.td-day__section--info
   below, so the sidebar doesn't stay a solid dark block regardless of site
   theme. Slate-200 here (not slate-100) so it stays a shade darker than
   .td-datepicker__trigger's slate-100 fill — same tone step dark theme
   already uses (slate-900 card / slate-800 trigger) to keep the trigger
   visibly distinct instead of blending into the card. */
.td-booking-card {
  position: relative;
  overflow: visible;
  border-radius: var(--slt-radius-sm);
  padding: 22px;
  background: var(--slt-slate-200);
}

:root[data-theme="dark"] .td-booking-card {
  background: var(--slt-slate-900);
}

/* Sits half-off the card's top-left corner, so it needs the card's
   overflow: visible above — clipping would cut the badge in half. */
.td-booking-card .tour-card__style {
  left: 0px;
  top: -3px;
}

.td-booking-card > .td-title__days {
  background: none;
  padding: 0;
  font-size: 18px;
  margin: 14px 0px 10px 0px;
  /* The card's own background is now theme-reactive (above), so this
     goes back to the same ink token the rest of the page's text uses. */
  color: var(--slt-ink);
}

.td-booking-card__pricing {
  margin-bottom: 18px;
}

.td-booking-card__was {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--slt-gray-600);
  text-decoration: line-through;
}

.td-badge-save {
  display: inline-flex;
  align-items: center;
  background-color: var(--slt-red-100);
  color: var(--slt-red-800);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: var(--slt-radius-sm);
  vertical-align: middle;
}

.td-booking-card__now-row {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 10px;
}

.td-booking-card__price-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.td-booking-card__price-group[hidden] {
  display: none;
}

.td-booking-card__price-caption {
  font-size: 0.7rem;
  color: var(--slt-gray-600);
  margin-bottom: 2px;
}

.td-booking-card__price-divider {
  width: 1px;
  align-self: stretch;
  background-color: var(--slt-border-strong);
}

.td-booking-card__now-row--split {
  flex-wrap: nowrap;
  gap: 8px;
}

.td-booking-card__now-row--split .td-booking-card__from {
  font-size: 0.92rem;
}

.td-booking-card__now-row--split .td-booking-card__now {
  font-size: 1.3rem;
}

.td-booking-card__now-row--split .td-booking-card__price-caption {
  font-size: 0.62rem;
}

.td-booking-card__now {
  font-size: 2rem;
  font-weight: 500;
  text-align: right;
  color: var(--slt-ink);
}

.td-booking-card__from {
  font-size: 1.2rem;
  font-weight: 500;
  text-align: right;
  color: var(--slt-ink);
}

.td-booking-card__from--adjusted {
  color: var(--slt-red-400);
}

.td-booking-card__now--discounted {
  color: var(--slt-red-500);
}

.td-booking-card__per {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--slt-gray-600);
  text-align: right;
}

.td-booking-card__price-note {
  display: block;
  margin: 0;
  font-size: 0.8rem;
  color: var(--slt-gray-600);
  text-align: right;
  padding-bottom:10px;
}

.td-booking-card__supplement {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--slt-gray-600);
  text-align: right;
}

.td-booking-card__room-link {
  display: block;
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--slt-blue);
  text-align: right;
  text-decoration: underline;
  text-decoration-color: var(--slt-blue-200);
  text-underline-offset: 6px;
}

.td-booking-card__room-link:hover {
  text-decoration-color: currentColor;
}

/* ---- Plan-your-visit facts list (used on place pages like sigiriya.html) ---- */
.td-booking-card__facts {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin: 0 0 18px;
  padding: 16px 0;
  border-top: 1px solid var(--slt-gray-200);
  border-bottom: 1px solid var(--slt-gray-200);
}

.td-booking-card__facts li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.td-booking-card__facts svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--slt-blue);
}

.td-booking-card__facts li > span,
.td-booking-card__facts li > strong {
  display: block;
}

.td-booking-card__facts span {
  font-size: 0.72rem;
  color: var(--slt-gray-600);
}

.td-booking-card__facts strong {
  font-size: 0.85rem;
  font-weight: 700;
}

/* ---- Date picker field ---- */
.td-booking-card__field {
  margin: 0 0 12px;
}

/* ---- Custom date picker (replaces native <input type="date"> so the
   dropdown itself can be themed — native picker UI can't be restyled) ---- */
.td-datepicker {
  position: relative;
}

.td-datepicker__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--slt-slate-900);
  background-color: var(--slt-slate-100);
  border: none;
  border-radius: var(--slt-radius-sm);
  padding: 14px 20px;
  cursor: pointer;
  text-align: left;
}

.td-datepicker__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--slt-slate-900);
}

.td-datepicker__trigger span {
  flex: 1;
}

.td-datepicker__chevron {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--slt-slate-900);
  transition: transform 0.15s ease;
}

:root[data-theme="dark"] .td-datepicker__trigger {
  color: #fff;
  background-color: var(--slt-slate-800);
}

:root[data-theme="dark"] .td-datepicker__trigger:hover,
:root[data-theme="dark"] .td-datepicker__trigger[aria-expanded="true"] {
  background-color: var(--slt-slate-800);
}

:root[data-theme="dark"] .td-datepicker__icon,
:root[data-theme="dark"] .td-datepicker__chevron {
  color: #fff;
}

.td-datepicker__trigger[aria-expanded="true"] .td-datepicker__chevron {
  transform: rotate(180deg);
}

.td-datepicker__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 280px;
  background-color: var(--slt-surface);
  border: 1px solid var(--slt-gray-200);
  border-radius: var(--slt-radius-sm);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
  padding: 16px;
  z-index: 20;
}

/* Shared dark scrim behind the Participants/Start date dropdowns once
   they become mobile bottom sheets — invisible outside that breakpoint,
   where those stay small anchored dropdowns with no backdrop. Same
   pattern as plan-my-trip's .mct-sheet-backdrop. */
.td-sheet-backdrop {
  display: none;
}

.td-datepicker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.td-datepicker__header strong {
  font-size: 0.92rem;
  font-weight: 700;
}

.td-datepicker__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--slt-radius-sm);
  border: 1px solid var(--slt-gray-200);
  background: transparent;
  color: var(--slt-ink);
  cursor: pointer;
}

.td-datepicker__nav svg {
  width: 20px;
  height: 20px;
}

.td-datepicker__nav:hover {
  border-color: var(--slt-blue);
  color: var(--slt-blue);
}

.td-datepicker__weekdays,
.td-datepicker__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}

.td-datepicker__weekdays span {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--slt-gray-600);
  padding-bottom: 6px;
}

.td-datepicker__day {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: none;
  border-radius: var(--slt-radius-sm);
  background: transparent;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--slt-ink);
  cursor: pointer;
}

.td-datepicker__day:hover:not(:disabled) {
  background-color: var(--slt-surface-subtle);
}

.td-datepicker__day:disabled {
  color: var(--slt-text-muted);
  cursor: not-allowed;
}

.td-datepicker__day--unavailable {
  position: relative;
  color: var(--slt-red-400);
  cursor: not-allowed;
}

.td-datepicker__day--unavailable:hover {
  background-color: transparent;
}

.td-datepicker__day--unavailable::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 150px;
  background: var(--slt-surface);
  color: var(--slt-text-primary);
  border: 1px solid var(--slt-border);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.3;
  padding: 6px 10px;
  border-radius: var(--slt-radius-sm);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 5;
}

.td-datepicker__day--unavailable:hover::after,
.td-datepicker__day--unavailable.td-datepicker__day--tooltip-active::after {
  opacity: 1;
  visibility: visible;
}

.td-participants__panel {
  width: 100%;
}

.td-participants__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}


.td-participants__who {
  display: flex;
  flex-direction: column;
}

.td-participants__who strong {
  font-size: 0.88rem;
  font-weight: 700;
}

.td-participants__who span {
  font-size: 0.74rem;
  color: var(--slt-red-400);
  font-weight: 500;
}

.td-stepper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.td-stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--slt-gray-200);
  border-radius: var(--slt-radius-sm);
  background: transparent;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--slt-ink);
  cursor: pointer;
}

.td-stepper__btn:hover {
  border-color: var(--slt-blue);
  color: var(--slt-blue);
}

.td-stepper__count {
  min-width: 18px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
}

.td-participants__apply {
  margin-top: 14px;
}

.td-datepicker__day--empty {
  visibility: hidden;
}

.td-datepicker__day--today {
  font-weight: 700;
  color: var(--slt-blue);
}

.td-datepicker__day--selected {
  background-color: var(--slt-blue);
  color: var(--slt-white);
  font-weight: 700;
}

.td-datepicker__day--selected:hover {
  background-color: var(--slt-blue);
}

/* ---- Per-traveler pricing ---- */
.td-booking-card__travelers {
  margin: 0 0 18px;
}

.td-traveler {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-block: 8px;
}

.td-traveler__who {
  display: flex;
  flex-direction: column;
}

.td-traveler__who strong {
  font-size: 0.88rem;
  font-weight: 700;
}

.td-traveler__who span {
  font-size: 0.74rem;
  color: var(--slt-gray-600);
}

.td-traveler__price {
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
}

.td-traveler__price--free {
  color: var(--slt-green);
}

/* ---- Booking perks (cancellation / pay later) ---- */
.td-booking-card__perks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 16px 0 0;
  padding: 16px 0 0;
}

.td-booking-card__perks li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.td-booking-card__perks svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--slt-green);
  margin-top: 1px;
}

.td-booking-card__perks strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.td-booking-card__perks p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--slt-gray-600);
}

/* ---- Related tours ---- */
.td-related {
  padding-block: 48px 20px;
  border-top: 1px solid var(--slt-gray-200);
}

.td-related h2 {
  font-size: 2.5rem;
  line-height: 3rem;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0 0 14px;
}

/* Same card row as the home page's Sri Lanka Tours rail (.slt-rail__track),
   for pages that list a plain (non-bleed) related-tours grid. */
.td-related__grid {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.td-related__grid::-webkit-scrollbar {
  display: none;
}

.td-related__grid > .tour-card {
  flex: 0 0 300px;
  height: auto;
  scroll-snap-align: start;
}

.td-related__grid > .tour-card .tour-card__media {
  flex: none;
  aspect-ratio: 4 / 3;
}

@media (max-width: 575.98px) {
  .td-related__grid > .tour-card {
    flex: 0 0 82%;
    height: auto;
  }
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (max-width: 991.98px) {
  .td-page__inner {
    grid-template-columns: 1fr;
  }

  .td-sidebar {
    position: static;
    order: -1;
    margin-bottom: 24px;
    
  }

  .td-gallery {
    height: 300px;
  }

  .td-title__h1 {
    font-size: 2.75rem;
    line-height: 1.25;
  }

  .td-block h2,
  .td-related h2 {
    font-size: 2.25rem;
    letter-spacing: -0.5px;
  }

  .td-subhead {
    font-size: 1.3rem;
  }

  /* Below-minimum body/heading sizes that previously had no mobile
     override at all (so this single desktop value was also what mobile
     got) — raised to the mobile readability minimums. */
  .td-block p {
    font-size: 1rem;
  }

  .td-highlight-card h4 {
    font-size: 1.125rem;
    line-height: 1.35;
  }

  .td-highlight-card p {
    font-size: 1rem;
  }

  .td-day__col h4,
  .td-day__section h4 {
    font-size: 1.125rem;
    line-height: 1.35;
  }

  .td-day__col p,
  .td-day__section p {
    font-size: 1rem;
  }

  .td-step__body h4 {
    font-size: 1.125rem;
    line-height: 1.35;
  }

  .td-step__body p {
    font-size: 1rem;
  }

  .td-included-block h3 {
    font-size: 1.25rem;
    line-height: 1.3;
  }

  .td-booking-card__perks p {
    font-size: 1rem;
  }

  .td-facts {
    grid-template-columns: 1fr;
    gap: 16px 24px;
  }

  .td-fact {
    padding-right: 0;
  }

  .td-highlight-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .td-how-included__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .td-itinerary__grid {
    grid-template-columns: 1fr;
  }

  .td-itinerary__map {
    position: static;
    margin-bottom: 20px;
  }
}

@media (max-width: 575.98px) {
  /* ---- Top-of-page spacing — this page only. .tours-titlebar's
     padding-block: 28px 8px (style.css) is the same fixed value used at
     every viewport width; against mobile's smaller header and title
     text, that 28px top gap reads noticeably larger than every other
     gap on the page (18px header-to-title, ~10px title-to-content),
     which is what actually makes the top of the page feel inconsistent
     rather than any single gap being "wrong" on its own. Trimmed here so
     the sequence steps down evenly, and .td-title__row gets an explicit
     margin instead of relying on incidental h1 margin + booking-card
     padding happening to add up to something reasonable. ---- */
  .tours-titlebar {
    padding-block: 20px 8px;
  }

  .td-title__row {
    margin-bottom: 16px;
  }

  /* Fixed type-scale phone value — the 991.98px rule above is the
     intermediate tablet step; this is the true phone-width target. */
  .td-title__h1 {
    font-size: 2.25rem;
    line-height: 2.75rem;
  }

  .td-block h2,
  .td-related h2 {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  /* .td-sidebar's z-index: 2 (further up) only exists to keep its sticky
     desktop dropdown above .td-facts — but as a CSS Grid item, that
     z-index still creates a stacking context here even though position
     is already static at this width (grid items respect z-index
     regardless of position). Left in place, it traps the Participants/
     Start date panel's position: fixed bottom sheet inside the sidebar's
     stacking context, capping it below .td-sheet-backdrop's z-index —
     the panel silently paints underneath the scrim instead of above it
     (looks like the sheet never opens). Resetting to auto here is safe:
     the sidebar isn't sticky at this width, so it never actually
     overlaps .td-facts in the first place. ---- */
  .td-sidebar {
    z-index: auto;
  }

  .td-gallery {
    grid-template-columns: 1fr;
    height: 320px;
  }

  .td-gallery__thumb {
    display: none;
  }

  .td-gallery__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--slt-radius-sm);
    background: rgba(255, 255, 255, 0.7);
    color: var(--slt-ink);
    cursor: pointer;
    z-index: 1;
  }

  .td-gallery__nav svg {
    width: 20px;
    height: 20px;
  }

  .td-gallery__nav--prev {
    left: 8px;
  }

  .td-gallery__nav--next {
    right: 8px;
  }

  .td-gallery__counter {
    display: inline-block;
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--slt-ink);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: var(--slt-radius-sm);
    z-index: 1;
  }

  .td-tabs__inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .td-highlight-grid {
    grid-template-columns: 1fr;
  }

  /* Accommodation/Meals (.td-day__cols) and the Included activities image
     row (.td-day__row, thumb + text) both stay side-by-side at every
     other width — their fixed-width children (.td-day__thumb is a flat
     284px, and .td-day__cols' two 1fr tracks each carry an auto min-width
     from their content) don't fit a phone-width column and were forcing
     the whole itinerary grid to blow out past the viewport. Stacking both
     removes that unshrinkable content, which also fixes the resulting
     horizontal scroll on .td-itinerary__map (it wasn't actually oversized
     itself, just dragged wide by its sibling column blowing out). */
  .td-day__row {
    flex-direction: column;
  }

  .td-day__thumb {
    width: 100%;
  }

  .td-day__cols {
    grid-template-columns: 1fr;
  }

  .td-customize-note {
    font-size: 0.8rem;
  }

  .td-cta-banner {
    padding: 8px 16px;
    gap: 8px;
  }

  .td-cta-banner h4 {
    font-size: 1rem;
    white-space: nowrap;
  }

  .td-cta-banner p {
    font-size: 0.8rem;
  }

  .td-cta-banner__logo {
    height: 26px;
  }

  .td-cta-banner .td-btn-book {
    white-space: nowrap;
    padding: 8px 14px;
    font-size: 0.75rem;
  }

  /* ---- Participants / Start date — become a full-width bottom sheet
     (no corner rounding) instead of a small anchored popover, with the
     shared dark scrim behind them. Same treatment as plan-my-trip. ---- */
  .td-sheet-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .td-datepicker__panel {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--slt-gray-200);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
    background-color: var(--slt-surface);
    z-index: 1001;
    padding: 20px;
  }

  /* ---- Bottom-sheet content sizing — as a full-width phone sheet this
     has room to give every number, label and control the ~16px text /
     ~44px touch target that's the accepted mobile-accessibility minimum
     (WCAG 2.5.5 / Apple HIG / Material Design), instead of the compact
     sizes that made sense for the small anchored desktop popover. ---- */
  .td-datepicker__header strong {
    font-size: 1.05rem;
  }

  .td-datepicker__nav {
    width: 44px;
    height: 44px;
  }

  .td-datepicker__nav svg {
    width: 22px;
    height: 22px;
  }

  .td-datepicker__weekdays span {
    font-size: 0.85rem;
  }

  .td-datepicker__day {
    font-size: 1rem;
  }

  .td-participants__row {
    padding: 14px 0;
  }

  .td-participants__who strong {
    font-size: 1rem;
  }

  .td-participants__who span {
    font-size: 0.85rem;
  }

  .td-stepper__btn {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
  }

  .td-stepper__count {
    min-width: 24px;
    font-size: 1.05rem;
  }
}

/* Larger shared arrow icons on this page only */
.tours-breadcrumb__arrow {
  width: 18px;
  height: 18px;
}

.slt-viewall-arrow {
  width: 18px;
  height: 18px;
}

.slt-rail-nav svg {
  width: 22px;
  height: 22px;
}

/* ---- Photo lightbox — opened from the gallery, cycles through all
   trip photos with close / prev / next controls ---- */
.td-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 96px;
}

.td-lightbox[hidden] {
  display: none;
}

.td-lightbox__backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  background: rgba(10, 10, 14, 0.9);
  cursor: pointer;
}

.td-lightbox__inner {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.td-lightbox__stage {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 100%;
  border-radius: var(--slt-radius-sm);
  overflow: hidden;
}

.td-lightbox__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--slt-radius-sm);
}

.td-lightbox__close,
.td-lightbox__nav {
  position: fixed;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--slt-radius-sm);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.15s ease;
}

.td-lightbox__close:hover,
.td-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.24);
}

.td-lightbox__close {
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
}

.td-lightbox__close svg {
  width: 22px;
  height: 22px;
}

.td-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
}

.td-lightbox__nav svg {
  width: 26px;
  height: 26px;
}

.td-lightbox__nav--prev {
  left: 24px;
}

.td-lightbox__nav--next {
  right: 24px;
}

.td-lightbox__counter {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.12);
  padding: 6px 14px;
  border-radius: var(--slt-radius-sm);
  z-index: 2;
}

@media (max-width: 767.98px) {
  .td-lightbox {
    padding: 88px 16px;
  }

  .td-lightbox__stage {
    aspect-ratio: 4 / 3;
  }

  .td-lightbox__close {
    top: 12px;
    right: 12px;
  }

  .td-lightbox__nav {
    width: 40px;
    height: 40px;
  }

  .td-lightbox__nav svg {
    width: 20px;
    height: 20px;
  }

  .td-lightbox__nav--prev {
    left: 8px;
  }

  .td-lightbox__nav--next {
    right: 8px;
  }
}