/* =====================================================================
   Beyond Journey - tours & attractions
   ---------------------------------------------------------------------
   Scoped under .bjta (hub extras) and used alongside two files that
   already exist and already work:

     css/bj-listing.css   the listing shell - hero band, sticky search
                          dock, filter rail, sort bar, result cards
     css/bj-detail.css    the detail shell - gallery, section cards,
                          sticky booking rail, FAQ, tabs

   Nothing here re-implements either of those. This file holds only what
   an ACTIVITY needs and a holiday package does not:

     .bjta-tabs     the India / International switch on the hub
     .bjta-opt      the ticket-option chooser - an activity is bought as
                    one of several variants (non-prime / prime / SKY),
                    which a package never is
     .bjta-slots    departure times, because most of these are timed
     .bjta-meet     where to be and when, which is the single question
                    people email us about after booking
     .bjta-rev      traveller reviews on the detail page
     .bjta-facts    the quick-facts strip under an activity title

   WHY THE HUB TABS EXIST

   "Trending destinations" on the old page was eight international cities
   and nothing else, on a site whose largest single market is domestic.
   The two tabs are not a filter for its own sake - they are the page
   admitting it sells both, and letting someone who came for Jaipur stop
   scrolling past Dubai.

   The template's own .trend-item / .trend-image classes are reused for
   the cards inside each pane, so the hub keeps the visual language of the
   pages either side of it. Only the switch itself is new.
   ===================================================================== */

.bjta {
  --bjta-navy: #17233e;
  --bjta-orange: #f5761a;
  --bjta-orange-600: #d9600d;
  --bjta-orange-50: #fdf4ec;

  --bjta-ink: #17233e;
  --bjta-muted: #5a6377;
  --bjta-faint: #8b93a5;
  --bjta-line: #e6e3dc;
  --bjta-line-soft: #f1efe9;
  --bjta-surface: #ffffff;
  --bjta-paper: #faf8f5;
  --bjta-ok: #1a7f4b;
  --bjta-no: #b3261e;

  --bjta-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------
   Popular right now - one-tap shortcuts into the listing
   ---------------------------------------------------------------
   A slim band directly under the navy strip. The search panel in the
   banner can only ask WHERE and WHEN; these carry the other half of how
   people shop - "something for the kids", "nothing over two thousand",
   "we only have a spare morning".

   Deliberately quiet: outline chips on paper, wrapping on desktop and
   horizontally scrollable on a phone rather than stacking into four rows
   that push the destinations below the fold.
   --------------------------------------------------------------- */
.bjta-quickband {
  background: var(--bjta-paper);
  border-bottom: 1px solid var(--bjta-line);
  padding: 16px 0 !important;
}

.bjta-quick {
  display: flex;
  align-items: center;
  gap: 10px 20px;
}

.bjta-quick__h {
  flex: 0 0 auto;
  margin: 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bjta-faint);
  white-space: nowrap;
}

.bjta-quick__h i,
.bjta-quick__h svg {
  color: var(--bjta-orange);
  margin-right: 5px;
}

.bjta-quick__list {
  display: flex;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.bjta-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--bjta-line);
  border-radius: 999px;
  background: var(--bjta-surface);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bjta-muted);
  white-space: nowrap;
  transition: border-color .18s var(--bjta-ease), color .18s var(--bjta-ease), background .18s var(--bjta-ease);
}

.bjta-chip i,
.bjta-chip svg {
  font-size: 11px;
  color: var(--bjta-orange);
}

.bjta-chip:hover {
  border-color: var(--bjta-orange);
  background: var(--bjta-orange-50);
  color: var(--bjta-orange-600);
}

@media (max-width: 767px) {
  .bjta-quick { display: block; }
  .bjta-quick__h { margin-bottom: 10px; }

  /* one swipeable line beats four wrapped rows of chips above the fold */
  .bjta-quick__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .bjta-quick__list::-webkit-scrollbar { display: none; }
}

/* ---------------------------------------------------------------
   Region switch - International / India
   ---------------------------------------------------------------
   A segmented control, not two links. The distinction matters: links
   would suggest a page change, and this swaps content in place. The
   moving pill is a pseudo-element on the track so the two buttons stay
   plain text and nothing shifts by a pixel when the state changes.
   --------------------------------------------------------------- */
.bjta-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  margin: 0 auto 34px;
  border: 1px solid var(--bjta-line);
  border-radius: 999px;
  background: var(--bjta-surface);
  box-shadow: 0 1px 2px rgba(23, 35, 62, .04);
}

.bjta-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--bjta-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background .22s var(--bjta-ease), color .22s var(--bjta-ease);
}

.bjta-tab i,
.bjta-tab svg {
  font-size: 12px;
  color: var(--bjta-orange);
  transition: color .22s var(--bjta-ease);
}

.bjta-tab:hover { color: var(--bjta-ink); }

.bjta-tab[aria-selected="true"] {
  background: var(--bjta-navy);
  color: #fff;
}

.bjta-tab[aria-selected="true"] i { color: var(--bjta-orange); }

/* The count sits inside the button so the switch answers "is there
   anything over there?" before you press it. */
.bjta-tab small {
  font-size: 11px;
  font-weight: 600;
  opacity: .62;
}

/* Panes swap with [hidden]; the fade is short enough not to feel like a
   page load and long enough to show that something changed. */
.bjta-pane[hidden] { display: none; }
.bjta-pane { animation: bjta-fade .32s var(--bjta-ease); }

@keyframes bjta-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bjta-pane { animation: none; }
}

/* ---------------------------------------------------------------
   Destination tile
   ---------------------------------------------------------------
   Built on the template's own .trend-item1, the same tile
   /holiday uses for "Exclusive Group Departure
   Destinations": photograph, soft gradient, the name centred at the
   foot. That page carries nothing but the name, because "Australia"
   needs no explaining.

   A city does. So this one adds two short centred lines - what is
   actually bookable there and what it starts at - set as plain type in
   the same white. The first attempt boxed the price in a translucent
   grey pill and put a ticket icon before the description, and both read
   as leftovers from another design rather than as part of the tile.

   The gradient lives on the caption box itself, not on a ::after over
   the photo: a generated box is the last child of .trend-image and
   paints on top of the caption unless every layer is given an explicit
   z-index, which would mean fighting the template's own overlay for the
   order. As the caption's own background it is behind its own text by
   definition, and there is nothing to sequence.
   --------------------------------------------------------------- */
.bjta-pane .trend-content {
  justify-content: center;
  text-align: center;
  padding-top: 46px !important;
  background: linear-gradient(180deg,
      rgba(23, 35, 62, 0) 0%,
      rgba(23, 35, 62, .58) 38%,
      rgba(23, 35, 62, .93) 100%);
}

.bjta-pane .trend-content-title { width: 100%; min-width: 0; }

.bjta-pane .trend-content-title h3 {
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.bjta-citymeta {
  display: block;
  margin-top: 6px;
  line-height: 1.45;
}

.bjta-citymeta__what {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, .78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bjta-citymeta__from {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, .72);
  font-variant-numeric: tabular-nums lining-nums;
}

.bjta-citymeta__from b {
  color: #fff;
  font-weight: 700;
}

/* The whole tile is a link. The template draws a navy bar that grows
   along the foot on hover (.trending .trend-item1::before); the photo
   lifting slightly with it is the only thing worth adding, and it needs
   no extra element. */
.bjta-pane .trend-item1 {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}

.bjta-pane .trend-item1:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px -18px rgba(23, 35, 62, .42);
}

@media (max-width: 575px) {
  .bjta-tabs { width: 100%; justify-content: center; }
  .bjta-tab { flex: 1; justify-content: center; padding: 9px 12px; }
}

/* ---------------------------------------------------------------
   Quick facts under an activity title (detail page)
   ---------------------------------------------------------------
   Duration, languages, confirmation and cancellation - the four things
   someone checks before they read a word of the description.
   --------------------------------------------------------------- */
.bjta-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bjta-facts li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  color: var(--bjta-muted);
  line-height: 1.45;
}

.bjta-facts i,
.bjta-facts svg {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 13px;
  color: var(--bjta-orange);
}

.bjta-facts b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--bjta-ink);
}

.bjta-facts small {
  display: block;
  font-size: 11px;
  color: var(--bjta-faint);
}

/* ---------------------------------------------------------------
   Ticket options
   ---------------------------------------------------------------
   The heart of an activity page and the thing a package page has no
   equivalent of. Every option is a real radio input, visually hidden
   but present, so the whole group works from the keyboard and reads
   correctly to a screen reader without a line of ARIA.
   --------------------------------------------------------------- */
.bjta-opts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}

.bjta-opts legend {
  padding: 0;
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bjta-muted);
}

.bjta-opt {
  position: relative;
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--bjta-line);
  border-radius: 10px;
  background: var(--bjta-surface);
  cursor: pointer;
  transition: border-color .2s var(--bjta-ease), box-shadow .2s var(--bjta-ease), background .2s var(--bjta-ease);
}

.bjta-opt:hover { border-color: #d3cec2; }

.bjta-opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.bjta-opt:has(input:checked),
.bjta-opt.is-on {
  border-color: var(--bjta-orange);
  background: var(--bjta-orange-50);
  box-shadow: 0 0 0 1px var(--bjta-orange);
}

.bjta-opt:has(input:focus-visible),
.bjta-opt.has-focus {
  outline: 2px solid var(--bjta-orange);
  outline-offset: 2px;
}

.bjta-opt__top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.bjta-opt__mark {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid #c9c3b6;
  display: grid;
  place-items: center;
  transition: border-color .2s var(--bjta-ease);
}

.bjta-opt__mark::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bjta-orange);
  transform: scale(0);
  transition: transform .18s var(--bjta-ease);
}

.bjta-opt.is-on .bjta-opt__mark { border-color: var(--bjta-orange); }
.bjta-opt.is-on .bjta-opt__mark::after { transform: scale(1); }

.bjta-opt__txt { flex: 1; min-width: 0; }

.bjta-opt__name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--bjta-ink);
  line-height: 1.35;
}

.bjta-opt__desc {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--bjta-muted);
  line-height: 1.6;
}

/* The price column is right-aligned and uses tabular figures so a stack
   of options can be compared down the column rather than read across. */
.bjta-opt__price {
  flex: 0 0 auto;
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}

.bjta-opt__price del {
  display: block;
  font-size: 11.5px;
  color: var(--bjta-faint);
}

.bjta-opt__price strong {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--bjta-ink);
  letter-spacing: -.02em;
}

.bjta-opt__price span {
  display: block;
  font-size: 10.5px;
  color: var(--bjta-faint);
}

/* Spans, not list items: the option is a <label>, which takes phrasing
   content, and a <ul> inside one is invalid even though browsers tolerate
   it. The layout is identical either way. */
.bjta-opt__incl {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 12px 0 0;
  padding: 11px 0 0 32px;
  border-top: 1px dashed var(--bjta-line);
}

.bjta-opt__incl > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--bjta-muted);
}

.bjta-opt__incl i,
.bjta-opt__incl svg {
  font-size: 10px;
  color: var(--bjta-ok);
}

@media (max-width: 575px) {
  .bjta-opt__top { flex-wrap: wrap; }
  .bjta-opt__price { width: 100%; text-align: left; padding-left: 32px; }
  .bjta-opt__price strong { display: inline; }
  .bjta-opt__price span { display: inline; margin-left: 5px; }
  .bjta-opt__incl { padding-left: 0; }
}

/* ---------------------------------------------------------------
   Departure times
   ---------------------------------------------------------------
   Most of these run to a clock, and the ones that do not say so in
   words rather than pretending to offer a choice.
   --------------------------------------------------------------- */
.bjta-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.bjta-slot {
  padding: 7px 14px;
  border: 1px solid var(--bjta-line);
  border-radius: 7px;
  background: var(--bjta-surface);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bjta-muted);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: border-color .18s var(--bjta-ease), color .18s var(--bjta-ease), background .18s var(--bjta-ease);
}

.bjta-slot:hover {
  border-color: var(--bjta-orange);
  color: var(--bjta-orange-600);
}

.bjta-slot.is-on {
  background: var(--bjta-navy);
  border-color: var(--bjta-navy);
  color: #fff;
}

/* An "any time on your booked date" slot is a sentence, not a time -
   it gets the same box but no hover promise of a choice. */
.bjta-slot--free {
  cursor: default;
  font-weight: 600;
  color: var(--bjta-faint);
  font-variant-numeric: normal;
}

.bjta-slot--free:hover {
  border-color: var(--bjta-line);
  color: var(--bjta-faint);
}

/* ---------------------------------------------------------------
   Meeting point
   ---------------------------------------------------------------
   Given a panel of its own because it is the one thing people look for
   again the morning of the activity, when they are not reading.
   --------------------------------------------------------------- */
.bjta-meet {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 4px 14px;
  align-items: start;
}

.bjta-meet__ico {
  grid-row: span 3;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--bjta-orange-50);
  color: var(--bjta-orange-600);
  font-size: 14px;
}

.bjta-meet__where {
  font-size: 14px;
  font-weight: 700;
  color: var(--bjta-ink);
  margin: 0;
  line-height: 1.45;
}

.bjta-meet__when {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bjta-orange-600);
}

.bjta-meet__note {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--bjta-muted);
  line-height: 1.65;
}

/* ---------------------------------------------------------------
   Reviews
   ---------------------------------------------------------------
   A score summary and two or three real-length reviews. Not a wall of
   five-star one-liners - those persuade nobody and make the honest ones
   look planted.
   --------------------------------------------------------------- */
.bjta-revhead {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--bjta-line-soft);
}

.bjta-revscore {
  flex: 0 0 auto;
  width: 66px;
  height: 66px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--bjta-ok);
  color: #fff;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.bjta-revscore b { font-size: 22px; font-weight: 700; }
.bjta-revscore small { font-size: 10px; opacity: .85; }

/* The summary takes the slack so the score tile and the distribution
   bars either side of it keep their intended widths. */
.bjta-revsum { flex: 1 1 auto; min-width: 0; }

.bjta-revsum p {
  margin: 0;
  font-size: 13.5px;
  color: var(--bjta-muted);
  line-height: 1.6;
}

.bjta-revsum strong { color: var(--bjta-ink); font-weight: 700; }

.bjta-rev {
  padding: 0 0 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--bjta-line-soft);
}

.bjta-rev:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.bjta-rev__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.bjta-rev__ava {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bjta-orange-50);
  color: var(--bjta-orange-600);
  font-size: 13px;
  font-weight: 700;
}

.bjta-rev__who { flex: 1; min-width: 0; }
.bjta-rev__who b { display: block; font-size: 13px; color: var(--bjta-ink); font-weight: 700; }
.bjta-rev__who small { font-size: 11.5px; color: var(--bjta-faint); }

.bjta-rev__score {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--bjta-ok);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
}

.bjta-rev__score i,
.bjta-rev__score svg { font-size: 9px; }

.bjta-rev p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--bjta-muted);
}

/* ---------------------------------------------------------------
   Listing-page additions
   ---------------------------------------------------------------
   bj-listing.css draws the card. Two things it has no concept of:
   an activity's duration badge on the photo, and the "from" price
   qualifier, since an activity is priced per person outright rather
   than per adult on twin-sharing.
   --------------------------------------------------------------- */
.bjl-row__time {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 5px;
  background: rgba(23, 35, 62, .82);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.bjl-row__time i,
.bjl-row__time svg { font-size: 9px; color: #fff; }

/* bj-listing.css pins the chip row to a single line and lets it overflow
   visibly, because bj-package-card.js caps a package's chips to whatever
   fits. Nothing caps an activity's, so on a 320px card the third chip -
   the languages - ran off the card, out of the grid and off the page,
   giving the whole listing a horizontal scrollbar. Activity cards carry
   less than package cards do, so they can simply wrap. */
.bjta .bjl-chips { flex-wrap: wrap; overflow: hidden; }

/* A saving worth naming gets named - once, in the corner of the photo,
   and never as a red urgency badge. */
.bjl-row__save {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  padding: 4px 9px;
  border-radius: 5px;
  background: #1a7f4b;
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* When a flag and a saving both apply, the flag moves right so they do
   not stack on top of each other. */
.bjl-row__media .bjl-row__save + .bjl-row__flag { left: auto; right: 46px; }

/* ---------------------------------------------------------------
   Category tiles - hub and listing empty state
   --------------------------------------------------------------- */
.bjta-cats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.bjta-cat {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  border: 1px solid var(--bjta-line);
  border-radius: 11px;
  background: var(--bjta-surface);
  transition: border-color .2s var(--bjta-ease), box-shadow .2s var(--bjta-ease), transform .2s var(--bjta-ease);
}

.bjta-cat:hover {
  border-color: #d8d3c8;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(23, 35, 62, .04), 0 14px 30px -18px rgba(23, 35, 62, .34);
}

.bjta-cat__ico {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--bjta-orange-50);
  color: var(--bjta-orange-600);
  font-size: 16px;
}

.bjta-cat__txt { min-width: 0; }

.bjta-cat__txt b {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--bjta-ink);
  line-height: 1.3;
}

.bjta-cat__txt span {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--bjta-faint);
}

@media (max-width: 991px) {
  .bjta-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 479px) {
  .bjta-cats { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   How booking an experience works
   ---------------------------------------------------------------
   Four numbered steps on a single line at desktop. The connector is
   drawn as a border on the list itself rather than per item, so it can
   never fall out of step with the number of steps.
   --------------------------------------------------------------- */
.bjta-how {
  background: var(--bjta-surface);
  padding: 56px 0 !important;
  border-top: 1px solid var(--bjta-line-soft);
}

.bjta-how__head {
  max-width: 660px;
  margin: 0 auto 38px;
  text-align: center;
}

.bjta-how__head h2 {
  font-size: 26px;
  line-height: 1.2;
  text-transform: none;
}

.bjta-how__head p {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--bjta-muted);
  margin: 10px 0 0;
}

.bjta-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: bjta-step;
}

.bjta-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px;
  border: 1px solid var(--bjta-line);
  border-radius: 12px;
  background: var(--bjta-paper);
  transition: border-color .2s var(--bjta-ease), box-shadow .2s var(--bjta-ease);
}

.bjta-step:hover {
  border-color: #d8d3c8;
  box-shadow: 0 2px 4px rgba(23, 35, 62, .04), 0 14px 30px -20px rgba(23, 35, 62, .3);
}

.bjta-step__n {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--bjta-navy);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Step three is the one that says no money changes hands here. It gets
   the accent so the eye lands on it rather than skimming past. */
.bjta-step:nth-child(3) .bjta-step__n { background: var(--bjta-orange); }

.bjta-step strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--bjta-ink);
  line-height: 1.35;
  margin-bottom: 7px;
}

.bjta-step p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--bjta-muted);
}

@media (max-width: 991px) {
  .bjta-steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 575px) {
  .bjta-how { padding: 40px 0 !important; }
  .bjta-steps { grid-template-columns: 1fr; gap: 14px; }
  .bjta-step { flex-direction: row; align-items: flex-start; padding: 18px 16px; }
  .bjta-step__n { flex: 0 0 auto; }
}

/* ---------------------------------------------------------------
   FAQ
   ---------------------------------------------------------------
   Plain <details> elements. They open with no JavaScript at all, the
   browser's own find-in-page reaches inside a closed one, and there is
   no library to keep in sync with a stylesheet.
   --------------------------------------------------------------- */
.bjta-faqband {
  background: var(--bjta-paper);
  padding: 56px 0 !important;
  border-top: 1px solid var(--bjta-line);
}

.bjta-faqgrid {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

.bjta-faqgrid__aside h2 {
  font-size: 26px;
  line-height: 1.2;
  text-transform: none;
}

.bjta-faqgrid__aside p {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--bjta-muted);
  margin: 10px 0 18px;
}

.bjta-faqgrid__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 8px;
  background: var(--bjta-navy);
  color: #fff !important;
  font-size: 13.5px;
  font-weight: 700;
  transition: background .18s var(--bjta-ease);
}

.bjta-faqgrid__cta:hover { background: #22315a; color: #fff !important; }

.bjta-faqgrid__link {
  display: block;
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bjta-orange-600);
}

.bjta-faqgrid__link i,
.bjta-faqgrid__link svg {
  font-size: 10px;
  margin-left: 5px;
  transition: transform .2s var(--bjta-ease);
}

.bjta-faqgrid__link:hover i,
.bjta-faqgrid__link:hover svg { transform: translateX(4px); }

.bjta-faqlist {
  background: var(--bjta-surface);
  border: 1px solid var(--bjta-line);
  border-radius: 12px;
  padding: 4px 22px;
}

.bjta-faq { border-bottom: 1px solid var(--bjta-line-soft); }
.bjta-faq:last-child { border-bottom: 0; }

.bjta-faq > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 0;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--bjta-ink);
  transition: color .18s var(--bjta-ease);
}

/* Safari draws its own disclosure triangle unless this is said twice. */
.bjta-faq > summary::-webkit-details-marker { display: none; }
.bjta-faq > summary::marker { content: ""; }

.bjta-faq > summary:hover { color: var(--bjta-orange-600); }

/* The chevron is addressed by position, not by tag. FontAwesome's JS
   rewrites the <i> into an <svg> after load, so `summary i` matches for
   the first paint and then stops - which is how the chevron ended up
   sitting against the question text instead of out at the right edge. */
.bjta-faq > summary > :last-child {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--bjta-faint);
  transition: transform .25s var(--bjta-ease);
}

.bjta-faq[open] > summary > :last-child { transform: rotate(180deg); }

.bjta-faq p {
  margin: 0;
  padding: 0 34px 18px 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--bjta-muted);
}

.bjta-faq p a {
  color: var(--bjta-orange-600);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 991px) {
  .bjta-faqgrid { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 575px) {
  .bjta-faqband { padding: 40px 0 !important; }
  .bjta-faqlist { padding: 4px 16px; }
}

/* ---------------------------------------------------------------
   Star distribution
   ---------------------------------------------------------------
   The bars sit beside the score, not under the reviews, because their
   job is to qualify the headline number before anyone reads a word of
   prose. Figures are tabular so the right-hand column lines up.
   --------------------------------------------------------------- */
.bjta-revbars {
  flex: 0 0 210px;
  list-style: none;
  margin: 0;
  padding: 0 0 0 20px;
  border-left: 1px solid var(--bjta-line-soft);
}

.bjta-revbars li {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 5px;
}

.bjta-revbars li:last-child { margin-bottom: 0; }

.bjta-revbars__lbl {
  flex: 0 0 auto;
  width: 30px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--bjta-muted);
  font-variant-numeric: tabular-nums;
}

.bjta-revbars__lbl i,
.bjta-revbars__lbl svg { font-size: 9px; color: var(--bjta-orange); }

.bjta-revbars__track {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: var(--bjta-line-soft);
  overflow: hidden;
}

.bjta-revbars__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--bjta-ok);
}

.bjta-revbars__n {
  flex: 0 0 auto;
  min-width: 38px;
  text-align: right;
  font-size: 11px;
  color: var(--bjta-faint);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .bjta-revhead { flex-wrap: wrap; }
  .bjta-revbars {
    flex: 1 1 100%;
    padding: 16px 0 0;
    margin-top: 4px;
    border-left: 0;
    border-top: 1px solid var(--bjta-line-soft);
  }
}

/* ---------------------------------------------------------------
   Booking this with us
   ---------------------------------------------------------------
   Four promises read off the record itself - the confirmation speed and
   the cancellation rule differ per experience, and a trust block that
   says the same thing on all thirty-four is worth nothing.
   --------------------------------------------------------------- */
.bjta-trustgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bjta-trustgrid li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.bjta-trustgrid__ico {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--bjta-orange-50);
  color: var(--bjta-orange-600);
  font-size: 14px;
}

.bjta-trustgrid b {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--bjta-ink);
  line-height: 1.35;
  margin-bottom: 3px;
}

.bjta-trustgrid span span {
  display: block;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--bjta-muted);
}

@media (max-width: 575px) {
  .bjta-trustgrid { grid-template-columns: 1fr; gap: 14px; }
}

/* The "see everything in this city" line under a cross-link strip. */
.bjta-morelink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--bjta-orange-600);
}

.bjta-morelink i,
.bjta-morelink svg {
  font-size: 10px;
  transition: transform .2s var(--bjta-ease);
}

.bjta-morelink:hover { color: var(--bjta-orange-600); }
.bjta-morelink:hover i,
.bjta-morelink:hover svg { transform: translateX(4px); }

/* ---------------------------------------------------------------
   Destination context
   ---------------------------------------------------------------
   Shown only when the results have narrowed to one city. It turns a
   filtered search into something that reads as a destination page - the
   move every experiences marketplace makes, and the reason their city
   pages feel like pages rather than queries.

   Every figure in it is computed from the records on screen, so it can
   never describe a city we do not sell or go stale against the data.
   --------------------------------------------------------------- */
.bjta-context {
  padding: 16px 18px;
  margin-bottom: 18px;
  border: 1px solid var(--bjta-line);
  border-left: 3px solid var(--bjta-orange);
  border-radius: 10px;
  background: var(--bjta-surface);
}

.bjta-context__lede {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--bjta-muted);
}

.bjta-context__lede strong { color: var(--bjta-ink); font-weight: 700; }

.bjta-context__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.bjta-context__chips .bjta-chip {
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}

.bjta-context__chips .bjta-chip small {
  font-size: 11px;
  font-weight: 700;
  opacity: .6;
}

/* The saved toggle sits in the sort bar and only appears once there is
   something to show. Heart-red would fight the one accent colour, so the
   active state is the same navy every other active control uses. */
.bjl-savedbtn i,
.bjl-savedbtn svg { color: var(--bjta-orange); margin-right: 2px; }
.bjl-savedbtn.is-active i,
.bjl-savedbtn.is-active svg { color: #fff; }

/* ---------------------------------------------------------------
   Browse everything - the block that ends the listing
   ---------------------------------------------------------------
   Four columns of internal links, generated from the catalogue. It is
   here for the visitor whose filters found nothing they wanted: a
   sideways step beats the back button.
   --------------------------------------------------------------- */
.bjta-seo {
  display: block;
  margin-top: 40px;
  padding: 30px 0 0;
  border-top: 1px solid var(--bjta-line);
}

.bjta-seo__h {
  font-size: 17px;
  font-weight: 700;
  text-transform: none;
  margin: 0 0 22px;
  color: var(--bjta-ink);
}

.bjta-seo__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 32px;
}

.bjta-seo__col h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bjta-faint);
  margin: 0 0 12px;
}

.bjta-seo__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* `display: block` said out loud: the template's reset leaves list items
   inline, so without this the links ran together into one paragraph
   ("Things to do in SingaporeThings to do in Paris"). */
.bjta-seo__col li {
  display: block;
  margin-bottom: 8px;
}

.bjta-seo__col a {
  display: inline-block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--bjta-muted);
  transition: color .16s var(--bjta-ease);
}

.bjta-seo__col a:hover { color: var(--bjta-orange-600); }

@media (max-width: 991px) {
  .bjta-seo__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 479px) {
  .bjta-seo__grid { grid-template-columns: 1fr; gap: 22px; }
}

/* The mobile Filters button is an icon plus a word and bj-listing.css sets
   no gap on .bjl-sort, so the two were touching. */
.bjta .bjl-filterbtn { gap: 7px; }
/* =====================================================================
   Experience card - the site's own card, not a new one
   ---------------------------------------------------------------------
   This is .hp-pack-card, copied value for value from the inline block in
   /holiday, where it draws "Top Selling Holiday Packages",
   and matching the same card on index.html.

   The previous version of this page invented its own card - green rating
   pill, dashed rule, small square button, uppercase kicker - and that is
   exactly why the page did not look like the rest of the site sitting
   either side of it. Same markup, same class names, same numbers: a
   tours card and a packages card are now the same object with different
   contents.

   The only addition is .hp-pack-card__where, one muted line under the
   title carrying the city and the category. A package card does not need
   it because its name says where it goes; "Gardens by the Bay" does not.

   NOTE: /holiday keeps its own inline copy. Extracting the
   component into one shared file would mean editing that page too, which
   is outside what was asked for here - so if these numbers are ever
   changed, change them in both places.
   ===================================================================== */

.hp-pack-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.hp-pack-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e8e7e2;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 18px -12px rgba(23, 35, 62, 0.2);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.hp-pack-card:hover {
  transform: translateY(-6px);
  border-color: rgba(245, 118, 26, 0.45);
  box-shadow: 0 18px 36px -16px rgba(23, 35, 62, 0.32);
}

.hp-pack-card__media {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.hp-pack-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.hp-pack-card:hover .hp-pack-card__media img { transform: scale(1.07); }

.hp-pack-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(23, 35, 62, 0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* A saving worth naming sits opposite the duration, in the site's green.
   The packages card has no equivalent because package prices there are
   not discounted; the position and the pill shape are the badge's. */
.hp-pack-card__save {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(26, 127, 75, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.hp-pack-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 18px 18px;
}

.hp-pack-card__body h4 {
  margin: 0 0 6px;
  font-size: 17px;
  color: #17233e;
  line-height: 1.35;
  /* Two lines, clamped: activity names run from "Singapore Flyer" to
     "Eiffel Tower Guided Tour to 2nd Floor & Summit by Lift", and without
     this the cards in a row finish at different heights. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 46px;
}

.hp-pack-card__where {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: #56607a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-pack-card__where i,
.hp-pack-card__where svg { color: #f5761a; font-size: 11px; margin-right: 5px; }

.hp-pack-card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #56607a;
}

.hp-pack-card__rating i,
.hp-pack-card__rating svg { color: #f5761a; font-size: 12px; }

/* A half star is drawn as a full star at reduced opacity - the bundled
   FontAwesome build cannot be relied on to carry fa-star-half-alt. */
.hp-pack-card__rating .half { opacity: 0.45; }

.hp-pack-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(23, 35, 62, 0.08);
}

.hp-pack-card__price { font-variant-numeric: tabular-nums lining-nums; }

.hp-pack-card__price small {
  display: block;
  font-size: 11px;
  color: #56607a;
}

.hp-pack-card__price del {
  font-size: 12px;
  color: #8b93a5;
  margin-right: 6px;
}

.hp-pack-card__price strong {
  font-size: 18px;
  color: #17233e;
}

.hp-pack-card__cta {
  padding: 9px 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f5761a 0%, #dd660f 100%);
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  white-space: nowrap;
}

.hp-pack-card__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 118, 26, 0.45);
  color: #fff;
}

@media (max-width: 991px) {
  .hp-pack-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 576px) {
  .hp-pack-grid { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------
   Offers band
   ---------------------------------------------------------------
   Replaces two banners that set yellow type on an orange gradient over a
   photograph, beside a stack of translucent white boxes over a second
   photo with a decorative blob cutting through them. Same two messages,
   on flat grounds, with one accent colour and a real button on each.
   --------------------------------------------------------------- */
.bjta-offers { background: var(--bjta-surface); padding: 0 0 56px !important; }

.bjta-offers__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.bjta-offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 32px;
  border-radius: 14px;
}

.bjta-offer--deal {
  background: linear-gradient(120deg, #17233e 0%, #22315a 100%);
  color: #fff;
}

.bjta-offer--ask {
  background: var(--bjta-paper);
  border: 1px solid var(--bjta-line);
}

.bjta-offer__tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.bjta-offer--deal .bjta-offer__tag {
  background: rgba(245, 118, 26, .18);
  color: #f5a163;
}

.bjta-offer--ask .bjta-offer__tag {
  background: var(--bjta-orange-50);
  color: var(--bjta-orange-600);
}

.bjta-offer h3 {
  margin: 16px 0 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
  text-transform: none;
}

.bjta-offer--deal h3 { color: #fff; }
.bjta-offer--ask h3 { color: var(--bjta-ink); }

.bjta-offer p {
  margin: 10px 0 22px;
  font-size: 13.5px;
  line-height: 1.7;
  max-width: 460px;
}

.bjta-offer--deal p { color: rgba(255, 255, 255, .74); }
.bjta-offer--ask p { color: var(--bjta-muted); }

.bjta-offer__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding: 12px 22px;
  border: 0;
  border-radius: 8px;
  background: var(--bjta-orange);
  color: #fff !important;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s var(--bjta-ease);
}

.bjta-offer__btn:hover { background: var(--bjta-orange-600); color: #fff !important; }

.bjta-offer__btn i,
.bjta-offer__btn svg { font-size: 10px; transition: transform .2s var(--bjta-ease); }
.bjta-offer__btn:hover i,
.bjta-offer__btn:hover svg { transform: translateX(4px); }

.bjta-offer__btn--quiet { background: var(--bjta-navy); color: #fff !important; }
.bjta-offer__btn--quiet:hover { background: #22315a; }

@media (max-width: 767px) {
  .bjta-offers { padding: 0 0 40px !important; }
  .bjta-offers__grid { grid-template-columns: 1fr; gap: 14px; }
  .bjta-offer { padding: 24px 22px; }
  .bjta-offer h3 { font-size: 19px; }
}

/* the "Browse by category" heading inside the India band */
.bjta-catshead {
  margin: 46px 0 18px;
  font-size: 17px;
  font-weight: 700;
  text-transform: none;
  color: var(--bjta-ink);
}


/* =====================================================================
   Section bands and heads
   ---------------------------------------------------------------------
   Restored after the invented card block was removed - these belong to
   the sections, not to the card, and went out with it.
   ===================================================================== */

/* Visually hidden, still read aloud. The offers band has a heading for
   screen readers that must not print on screen. */
.bjta-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.bjta-band { background: #fff; padding: 56px 0 !important; }
.bjta-band--grey { background: var(--bjta-paper); border-top: 1px solid var(--bjta-line); }

.bjta-bandhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
  /* clears the slider arrows, which sit above the track on the right */
  margin-bottom: 30px;
}

.bjta-bandhead > div { max-width: 620px; }

.bjta-bandhead__kicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--bjta-orange);
}

.bjta-bandhead__h {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--bjta-ink);
}

.bjta-bandhead__sub {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--bjta-muted);
}

.bjta-bandhead__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid var(--bjta-line);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: var(--bjta-ink);
  white-space: nowrap;
  transition: border-color .18s var(--bjta-ease), color .18s var(--bjta-ease), background .18s var(--bjta-ease);
}

.bjta-bandhead__cta i,
.bjta-bandhead__cta svg { font-size: 10px; transition: transform .2s var(--bjta-ease); }

.bjta-bandhead__cta:hover {
  border-color: var(--bjta-orange);
  background: var(--bjta-orange-50);
  color: var(--bjta-orange-600);
}

.bjta-bandhead__cta:hover i,
.bjta-bandhead__cta:hover svg { transform: translateX(4px); }

/* On a slider band the head has to leave room on the right for the
   arrows, so the CTA drops under the copy rather than colliding. */
.bjta-band--slider .bjta-bandhead { padding-right: 116px; }

@media (max-width: 991px) {
  .bjta-band { padding: 40px 0 !important; }
  .bjta-band--slider .bjta-bandhead { padding-right: 0; }
  .bjta-bandhead { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
  .bjta-bandhead__h { font-size: 22px; }
}

/* =====================================================================
   Slider - equal-height cards, real gutters, arrows that render
   =====================================================================
   Three things slick does not give you for free:

     1  slides are floated and sized to their own content, so four cards
        of different title lengths finish at four different heights and
        sit on four different baselines. A flex track with `stretch`
        fixes both, but only if the slide's inline height is overridden.

     2  a gutter has to live on a wrapper. With `rows: 0` the direct child
        IS the slide, so padding the card would put the gap inside the
        white box.

     3  plugin.css hides the arrow label with `font-size: 0` and
        `color: transparent` and expects a glyph from a font this page
        does not load. The icons are passed to slick as real elements
        instead, and the colour is restored here.
   ===================================================================== */
.bjta-slider { margin: 0 -12px; }
.bjta-slider .slick-list { padding-bottom: 8px; }

.bjta-slider .slick-track {
  display: flex !important;
  align-items: stretch;
}

.bjta-slide {
  height: auto !important;
  float: none !important;
  padding: 0 12px;
}

.bjta-slide .hp-pack-card { height: 100%; }

.bjta-slider .slick-prev,
.bjta-slider .slick-next {
  top: -66px;
  margin-top: 0;
  width: 42px;
  height: 42px;
  border: 1px solid var(--bjta-line);
  border-radius: 50%;
  background: #fff;
  /* plugin.css sets both of these to hide slick's default label; the
     icon we pass in has to be visible */
  font-size: 14px;
  color: var(--bjta-ink);
  line-height: 1;
  z-index: 3;
  transition: background .2s var(--bjta-ease), border-color .2s var(--bjta-ease), color .2s var(--bjta-ease);
}

.bjta-slider .slick-prev i,
.bjta-slider .slick-next i,
.bjta-slider .slick-prev svg,
.bjta-slider .slick-next svg { color: inherit; font-size: 13px; }

.bjta-slider .slick-prev { right: 58px; left: auto; }
.bjta-slider .slick-next { right: 0; }

.bjta-slider .slick-prev:hover,
.bjta-slider .slick-next:hover,
.bjta-slider .slick-prev:focus,
.bjta-slider .slick-next:focus {
  background: var(--bjta-navy);
  border-color: var(--bjta-navy);
  color: #fff;
}

/* plugin.css fades the default glyph out on a disabled arrow; with
   infinite scrolling there are none, but say it anyway. */
.bjta-slider .slick-disabled { opacity: .4; cursor: default; }

@media (max-width: 991px) {
  .bjta-slider { margin: 0 -8px; }
  .bjta-slide { padding: 0 8px; }
  .bjta-slider .slick-prev,
  .bjta-slider .slick-next { display: none !important; }
}

/* The template capitalises every h4, which is invisible on package names
   that are already Title Case but prints activity names as "Skip-The-Line"
   and "With BBQ". Names here are written correctly in the dataset and
   should print as written. */
.hp-pack-card__body h4 { text-transform: none; }

/* =====================================================================
   Traveller stories - the site's own review card
   ---------------------------------------------------------------------
   .hp-reviews / .hp-review-card, copied value for value from the inline
   block in /holiday so the band reads identically on both
   pages.

   One addition: .hp-review-card__link, the line naming the experience
   the quote is about. The packages page does not need it because its
   quotes name the package in the byline; here the quote comes from a
   record that has its own page, and saying so turns a testimonial into
   a way in.

   NOTE: /holiday keeps its own inline copy. If these
   numbers change, change them in both places.
   ===================================================================== */
.hp-reviews {
  background: #f9f9f8;
  padding: 70px 0;
}

.hp-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 10px;
}

.hp-review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e8e7e2;
  border-radius: 18px;
  padding: 26px 24px;
  box-shadow: 0 6px 18px -12px rgba(23, 35, 62, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.hp-review-card::before {
  content: "\201C";
  position: absolute;
  top: 6px;
  right: 20px;
  font-family: Georgia, serif;
  font-size: 72px;
  line-height: 1;
  color: rgba(245, 118, 26, 0.15);
  pointer-events: none;
}

.hp-review-card:hover {
  transform: translateY(-5px);
  border-color: rgba(245, 118, 26, 0.45);
  box-shadow: 0 16px 32px -14px rgba(23, 35, 62, 0.3);
}

.hp-review-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.hp-review-card__avatar {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(245, 118, 26, 0.55);
}

.hp-review-card__who strong {
  display: block;
  color: #17233e;
}

.hp-review-card__who span {
  font-size: 13px;
  color: #56607a;
}

.hp-review-card__who span i,
.hp-review-card__who span svg {
  color: #f5761a;
  margin-right: 4px;
}

.hp-review-card__stars {
  color: #f5761a;
  margin-bottom: 10px;
  font-size: 13px;
  letter-spacing: 2px;
}

/* the faded star the shared renderer marks a not-quite-earned point with */
.hp-review-card__stars .half { opacity: 0.45; }

.hp-review-card blockquote {
  margin: 0 0 14px;
  border: 0;
  padding: 0;
  /* style.css paints every blockquote navy; unreset, the quote rendered
     as grey text on a dark block and could not be read */
  background: transparent;
  font-size: 14px;
  color: #56607a;
  line-height: 1.75;
}

/* Names the experience the quote is about, and goes there. */
.hp-review-card__link {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 14px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
  color: #d9600d;
}

.hp-review-card__link i,
.hp-review-card__link svg {
  font-size: 9px;
  transition: transform .2s ease;
}

.hp-review-card__link:hover { color: #d9600d; text-decoration: underline; text-underline-offset: 2px; }
.hp-review-card__link:hover i,
.hp-review-card__link:hover svg { transform: translateX(3px); }

.hp-review-card__verified {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(23, 35, 62, 0.08);
  font-size: 13px;
  font-weight: 600;
  color: #1e8e5a;
}

@media (max-width: 991px) {
  .hp-reviews { padding: 52px 0; }
  .hp-reviews__grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 10px auto 0;
  }
}

/* The three placeholder avatar SVGs have initials drawn into them, so
   reusing them beside different names printed the wrong ones. The circle
   is drawn from the real name instead - same 52px disc and orange ring
   the packages card uses, so the band still matches. */
.hp-review-card__avatar--initials {
  display: grid;
  place-items: center;
  background: #17233e;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
}

/* =====================================================================
   Destinations marquee
   ---------------------------------------------------------------------
   A new band, not a replacement for anything. The navy strip under the
   banner stays exactly what it was - four short promises about buying an
   activity - and this sits much further down, after the category tiles,
   as the page's one moment of movement.

   It carries every city in the catalogue, which is more than any grid on
   this page has room for, and every name is a real link into the listing
   filtered to it. Two rows travelling in opposite directions, because a
   single line reads as a stock ticker and two reads as a place.

   HOW THE LOOP IS SEAMLESS

   Each row holds its list twice and travels exactly one copy's width,
   landing on the start of the second copy - visually identical to the
   start of the first, so the reset is invisible. That only holds while
   the two halves are the same width, which is why js/bj-tours-hub.js
   writes the same list twice rather than splitting it.

   It pauses on hover and on keyboard focus, because a name you cannot
   click is not a link, and it stops entirely for anyone who has asked
   their system for less motion.
   ===================================================================== */
.bjta-marquee {
  background: var(--bjta-paper);
  border-top: 1px solid var(--bjta-line);
  border-bottom: 1px solid var(--bjta-line);
  padding: 46px 0 !important;
  overflow: hidden;
}

.bjta-marquee__head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 30px;
}

.bjta-marquee__head h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--bjta-ink);
}

.bjta-marquee__head p {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--bjta-muted);
}

/* ---- a row ---- */
.bjta-mq {
  position: relative;
  overflow: hidden;
}

.bjta-mq + .bjta-mq { margin-top: 12px; }

.bjta-mq__track {
  display: flex;
  width: max-content;
  animation: bjta-mq-left 54s linear infinite;
}

.bjta-mq--rev .bjta-mq__track {
  animation-name: bjta-mq-right;
}

@keyframes bjta-mq-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes bjta-mq-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

.bjta-mq:hover .bjta-mq__track,
.bjta-mq:focus-within .bjta-mq__track {
  animation-play-state: paused;
}

.bjta-mq__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bjta-mq__list li { display: inline-flex; align-items: center; }

/* Each chip is a round photograph followed by the city over its
   from-price. The picture is what makes the row scan as places rather
   than as a list of words, and it costs nothing: BJTourData.cities()
   already carries a lead photo per city, so there is no second image
   list to keep in step with the catalogue. */
.bjta-mq__list a {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 7px 20px 7px 7px;
  border: 1px solid var(--bjta-line);
  border-radius: 999px;
  background: var(--bjta-surface);
  color: var(--bjta-ink);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(23, 35, 62, .04);
  transition: border-color .18s var(--bjta-ease), background .18s var(--bjta-ease),
              color .18s var(--bjta-ease), box-shadow .18s var(--bjta-ease);
}

.bjta-mq__pic {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bjta-line-soft);
}

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

.bjta-mq__txt {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.bjta-mq__txt b {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--bjta-ink);
}

.bjta-mq__txt small {
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--bjta-faint);
  font-variant-numeric: tabular-nums lining-nums;
}

.bjta-mq__list a:hover {
  border-color: var(--bjta-orange);
  background: var(--bjta-orange-50);
  box-shadow: 0 6px 16px -8px rgba(23, 35, 62, .3);
}

.bjta-mq__list a:hover .bjta-mq__txt b { color: var(--bjta-orange-600); }
.bjta-mq__list a:hover .bjta-mq__txt small { color: var(--bjta-orange-600); }

.bjta-mq__list li::after {
  content: "";
  width: 12px;
}

/* The rows have to run off the edges, not stop at them. */
.bjta-mq::before,
.bjta-mq::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 110px;
  z-index: 2;
  pointer-events: none;
}

.bjta-mq::before {
  left: 0;
  background: linear-gradient(90deg, var(--bjta-paper) 0%, rgba(250, 248, 245, 0) 100%);
}

.bjta-mq::after {
  right: 0;
  background: linear-gradient(270deg, var(--bjta-paper) 0%, rgba(250, 248, 245, 0) 100%);
}

@media (max-width: 767px) {
  .bjta-marquee { padding: 34px 0 !important; }
  .bjta-marquee__head { margin-bottom: 22px; }
  .bjta-marquee__head h2 { font-size: 22px; }
  .bjta-mq__list a { padding: 6px 15px 6px 6px; gap: 9px; }
  .bjta-mq__pic { width: 36px; height: 36px; }
  .bjta-mq__txt b { font-size: 13px; }
  .bjta-mq__txt small { font-size: 11px; }
  .bjta-mq::before,
  .bjta-mq::after { width: 48px; }
}

/* No motion for anyone who has asked for none: one row becomes a normal
   scrollable strip they push themselves, and the second row and the
   duplicate copies are dropped so nothing is read twice. */
@media (prefers-reduced-motion: reduce) {
  .bjta-mq__track {
    animation: none;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 16px;
  }

  .bjta-mq__track::-webkit-scrollbar { display: none; }
  .bjta-mq__list + .bjta-mq__list { display: none; }
  .bjta-mq--rev { display: none; }
}

/* ---------------------------------------------------------------
   Section "see more" button
   ---------------------------------------------------------------
   A smaller sibling of the site's .nir-btn. Same navy, same weight,
   same shape, so it still reads as a real button and not as a link -
   but at roughly half the area.

   .nir-btn is the site standard at 15px on 14px/24px padding, plus a
   4px white ring, and it capitalises every word. That is right for a
   page-level call to action; sitting alone under a grid of eight tiles
   it was the loudest thing in the section. This is the same object,
   quieter.
   --------------------------------------------------------------- */
.bjta-morebtn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
  border: 0;
  border-radius: 8px;
  background: var(--bjta-navy);
  color: #fff !important;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
  white-space: nowrap;
  transition: background .2s var(--bjta-ease), box-shadow .2s var(--bjta-ease);
}

.bjta-morebtn i,
.bjta-morebtn svg {
  font-size: 10px;
  transition: transform .2s var(--bjta-ease);
}

.bjta-morebtn:hover {
  background: var(--bjta-orange);
  color: #fff !important;
  box-shadow: 0 8px 18px -8px rgba(245, 118, 26, .55);
}

.bjta-morebtn:hover i,
.bjta-morebtn:hover svg { transform: translateX(3px); }

@media (max-width: 575px) {
  .bjta-morebtn { padding: 9px 16px; font-size: 12.5px; }
}

/* =====================================================================
   Result card (/tour-listing)
   ---------------------------------------------------------------------
   The site's .hp-pack-card, the same card the hub draws and the same one
   /holiday closes its grid with. The listing used to carry a
   different card entirely - green rating pill beside the title, chips, a
   full-width button - which meant two designs for the same thirty-four
   products across two pages of one journey.

   .bjta-lcard is the handful of things a RESULT card needs that a
   marketing card does not: a save heart, a photo carousel, and a strip of
   what is included, because on a results page the answer to "why this one
   and not that one" is usually free cancellation or hotel pickup.
   ===================================================================== */

/* bj-listing.css lays #bjlResults out as a three-across grid and styles
   .bjl-row inside it. The cards are .hp-pack-card now, so the grid keeps
   its job and the row rules simply find nothing. */
.bjta .hp-pack-card { height: 100%; }

/* A listing photo is wider than the hub's 180px - three across a 1140
   container gives ~360px, and 16:9 sits better than a fixed height. */
.bjta-lcard .hp-pack-card__media {
  height: auto;
  aspect-ratio: 16 / 9;
}

.bjta-lcard .hp-pack-card__media img { display: none; }
.bjta-lcard .hp-pack-card__media img.is-on { display: block; }

/* 16px, not 17px: a result title has to fit two lines at a third of the
   container, and this is what makes "Dubai Desert Safari with BBQ Dinner
   & Live Shows" land inside them instead of clamping mid-word. */
.bjta-lcard .hp-pack-card__body h4 {
  font-size: 16px;
  min-height: 44px;
}

.bjta-lcard__link { color: inherit; }
.bjta-lcard:hover .bjta-lcard__link { color: var(--bjta-orange-600); }

/* The badge sits bottom left, clear of the duration top left and the
   saving top right. */
.bjta-lcard__flag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(23, 35, 62, .86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Solid heart both ways - the bundled FontAwesome build is not guaranteed
   to carry the outline pack - so the state is told by colour. */
.bjta-lcard__heart {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  display: grid;
  place-items: center;
  color: #b6bdc9;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(23, 35, 62, .25);
  transition: color .18s var(--bjta-ease), transform .18s var(--bjta-ease);
}

.bjta-lcard__heart:hover { transform: scale(1.08); }
.bjta-lcard__heart.is-on { color: var(--bjta-orange); }

/* What is included, above the price rule. Two columns so four items take
   two lines rather than four. */
.bjta-lcard__incl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 12px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.bjta-lcard__incl li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--bjta-muted);
}

.bjta-lcard__incl i,
.bjta-lcard__incl svg {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 9px;
  color: var(--bjta-ok);
}

/* The price column carries a second small line ("per person + 5% tax")
   that the hub card does not, so the foot wraps rather than squeezing the
   button. */
.bjta-lcard .hp-pack-card__foot { flex-wrap: wrap; row-gap: 10px; }
.bjta-lcard .hp-pack-card__price small:last-child { margin-top: 1px; }

@media (max-width: 400px) {
  .bjta-lcard .hp-pack-card__foot { flex-direction: column; align-items: stretch; }
  .bjta-lcard .hp-pack-card__cta { text-align: center; }
}

/* ---------------------------------------------------------------
   Show more
   ---------------------------------------------------------------
   Twelve cards, then the rest on request. Thirty-four is about nine
   screens of scrolling, every one of them loading a photograph, and a
   results page is a place to compare a handful rather than a catalogue to
   read end to end.
   --------------------------------------------------------------- */
.bjta-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}

.bjta-more__count {
  margin: 0;
  font-size: 12.5px;
  color: var(--bjta-faint);
  font-variant-numeric: tabular-nums;
}