/* ===== Checkout ===== */
.co-body {
  background: var(--background);
  color: #fff;
  font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
  min-height: 100vh;
  position: relative;
}

.co-body > .page-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.co-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(9, 33, 62, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.co-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 1.25rem;
  padding: 0.7rem 1.25rem;
}

.co-header__logo {
  order: 1;
  display: inline-flex;
}

.co-header__logo img {
  height: 2.25rem;
  width: auto;
  display: block;
}

.co-header__right {
  order: 2;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Shared component base. */
.co-header__secure,
.co-autosave,
.co-oi__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
}
.co-header__secure {
  color: var(--tru-pink);
  font-weight: 600;
}

/* Shared component base. */
.co-header__secure svg,
.co-header__login svg,
.co-back svg,
.co-oi__addico svg,
.co-trust__secure svg {
  width: 1rem;
  height: 1rem;
}

/* Shared component base. */
.co-header__login,
.co-rev__edit {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: #fff;
  padding: 0.4rem 0.9rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.co-header__login {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  transition: border-color 0.2s, color 0.2s;
}

.co-header__login:hover {
  border-color: var(--tru-pink);
}

.co-header__login.is-in {
  border-color: var(--tru-green);
  color: var(--tru-green);
}

@media (max-width: 639px) {
  .co-header__secure {
    font-size: 0.72rem;
  }

  .co-header__login {
    padding: 0.35rem 0.7rem;
    font-size: 0.68rem;
  }

  .co-header__right {
    gap: 0.6rem;
  }
}

.co-progress {
  order: 3;
  flex: 1 1 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.co-progress__list {
  max-width: 46rem;
  margin: 0 auto;
  list-style: none;
  display: flex;
  align-items: flex-start;
  padding: 0.7rem 0.75rem 0.2rem;
}

/* Mobile/tablet: progress spans the full header width (edge to edge) */
@media (max-width: 1023px) {
  .co-progress {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }

  .co-progress__list {
    max-width: none;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }
}

@media (min-width: 1024px) {
  .co-header__inner {
    flex-wrap: nowrap;
  }

  .co-progress {
    order: 2;
    flex: 1 1 auto;
    border-top: none;
  }

  .co-progress__list {
    max-width: 42rem;
    padding: 0.15rem 0.75rem;
  }

  .co-header__right {
    order: 3;
    margin-left: 0;
  }
}

.co-pstep {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-faint);
}

.co-pstep .link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.co-pstep__ico {
  position: relative;
  z-index: 1;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: var(--tru-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
}

.co-pstep__ico svg {
  width: 1.05rem;
  height: 1.05rem;
}

.co-pstep__label {
  font-family: "Montserrat", sans-serif;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.2;
}

.co-pstep:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.05rem;
  left: 50%;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  z-index: 0;
}

.co-pstep.is-active {
  color: #fff;
}

.co-pstep.is-active .co-pstep__ico {
  border-color: var(--tru-pink);
  background: var(--tru-pink);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(255, 63, 153, 0.15);
}

.co-pstep.is-done {
  color: var(--tru-green);
}

.co-pstep.is-done .co-pstep__ico {
  border-color: var(--tru-green);
  background: var(--tru-green);
  color: var(--tru-navy);
}

.co-pstep.is-done::after {
  background: var(--tru-green);
}

@media (min-width: 640px) {
  .co-pstep__ico {
    width: 1.9rem;
    height: 1.9rem;
  }

  .co-pstep__ico svg {
    width: 1rem;
    height: 1rem;
  }

  .co-pstep__label {
    font-size: 0.68rem;
  }

  .co-pstep:not(:last-child)::after {
    top: 0.95rem;
  }
}

@media (min-width: 1024px) {
  .co-pstep__ico {
    width: 1.75rem;
    height: 1.75rem;
  }

  .co-pstep__ico svg {
    width: 0.95rem;
    height: 0.95rem;
  }

  .co-pstep__label {
    font-size: 0.64rem;
  }

  .co-pstep:not(:last-child)::after {
    top: 0.875rem;
  }

  .co-pstep {
    gap: 0.28rem;
  }
}

.co-main {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 6rem;
}

/* No trips selected — full-page empty state, shown in place of the checkout grid
   once every tour has been removed. Page-scale sibling of .cart-drawer__empty. */
.co-empty { max-width: 34rem; margin: 0 auto; padding: 4.5rem 1.25rem 6rem; text-align: center; }
.co-empty[hidden] { display: none; }
.co-empty__ico { display: block; width: 4.25rem; height: 4.25rem; margin: 0 auto 1.5rem; color: #4b5563; }
.co-empty__ico svg { width: 100%; height: 100%; }
.co-empty__h { font-family: "Montserrat", sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(1.6rem, 5vw, 2.35rem); line-height: 1.1; letter-spacing: 0.01em; color: #fff; margin: 0 0 0.9rem; }
.co-empty__h span { color: var(--tru-pink); }
.co-empty__s { color: #9ca3af; font-size: 0.95rem; line-height: 1.6; margin: 0 auto 2rem; max-width: 26rem; }
.co-empty__acts { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.co-empty__acts .co-empty__cta { display: inline-flex; width: auto; min-width: 15rem; }
.co-empty__alt { color: #9ca3af; font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; }
.co-empty__alt:hover { color: #fff; }
.co-empty__trust { list-style: none; display: flex; flex-direction: column; align-items: center; gap: 0.55rem; margin: 2.75rem 0 0; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,0.1); }
.co-empty__trust li { display: flex; align-items: center; gap: 0.5rem; color: #9ca3af; font-size: 0.82rem; }
.co-empty__trust svg,
.co-trust__points svg { width: 1rem; height: 1rem; color: var(--tru-green); flex-shrink: 0; }
@media (max-width: 639px) {
  .co-empty__s { max-width: 18rem; }
  .co-empty__trust li { max-width: 17.5rem; }
}

.co-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .co-grid {
    grid-template-columns: minmax(0, 1fr) 440px;
    align-items: start;
    gap: 2rem;
  }
}

/* Cards / steps */
.co-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  overflow: hidden;
  transition: opacity 0.25s, border-color 0.25s;
}

/* Wizard: only the active step is shown; navigation is the sticky top progress bar */
.co-card[data-step]:not(.is-open) {
  display: none;
}

.co-card__edit,
.co-card__done {
  display: none !important;
}

/* Bare step (Confirm your trip): no outer box, big section heading, tours in their own cards */
.co-card--bare {
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
  margin-bottom: 0;
}

.co-card--bare .co-card__body {
  padding: 0;
}

.co-step-heading {
  font-family: "Montserrat", sans-serif;
  margin-bottom: 1rem;
}

.co-card__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.1rem 1.25rem;
}

/* Shared component base. */
.co-card__badge,
.co-trav__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-mute);
  font-weight: 800;
  font-size: 0.85rem;
  font-family: "Montserrat", sans-serif;
  flex-shrink: 0;
}
.co-card__badge {
  width: 1.6rem;
  height: 1.6rem;
}

/* Shared component base. */
.co-card.is-open .co-card__badge,
.co-btn--primary,
.co-trav.is-open .co-trav__badge,
#booking #view_basket_wrapper #booking_promotion_row button:hover,
#booking .co-summary-stage #booking_promotion_row button:hover {
  background: var(--tru-pink);
  color: #fff;
}

/* Shared component base. */
.co-card__title,
.co-oi__title {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #fff;
  margin: 0;
}
.co-card__title {
  font-size: 1.15rem;
  flex: 1;
}

.co-card__edit {
  background: none;
  border: none;
  color: var(--tru-pink);
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.co-card__edit:hover {
  text-decoration: underline;
}

.co-card__body {
  padding: 0 1.25rem 1.4rem;
  display: block;
}

.co-card.is-locked {
  opacity: 0.5;
  pointer-events: none;
}

.co-card.is-locked .co-card__title {
  color: var(--text-faint);
}

.co-card__done {
  padding: 0 1.25rem 1.1rem;
  color: var(--text-mute);
  font-size: 0.9rem;
}

.co-card.is-open .co-card__done {
  display: none;
}

.co-done-tick {
  color: var(--tru-green);
  font-weight: 800;
  margin-right: 0.35rem;
}

.co-sub {
  color: var(--text-mute);
  font-size: 0.9rem;
  margin: 0 0 1rem;
  line-height: 1.5;
}

.co-hint {
  color: var(--text-mute);
  font-size: 0.85rem;
  margin: 1rem 0 1.25rem;
  line-height: 1.5;
}

/* Shared component base. */
.co-hint a,
.co-dd__opt.is-sel {
  color: var(--tru-pink);
  font-weight: 600;
}

.co-autosave {
  color: var(--text-faint);
  margin: 0.9rem 0 0;
}

.co-autosave svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--tru-green);
}

/* Buttons */
.co-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  border-radius: var(--radius);
  padding: 0.95rem 1.25rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
  text-decoration: none;
}

.co-btn:active {
  transform: scale(0.99);
}

.co-btn--primary:hover {
  background: #ff5eab;
}

.co-btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  margin-top: 0.6rem;
}

/* Shared component base. */
.co-btn--ghost:hover,
.co-rev__edit:hover,
.co-promo button:hover,
#booking .co-summary-stage .co-rev__edit:hover,
#booking .co-summary-stage .co-rev__edit:focus-visible,
#booking .co-flow .co-cost-promo .apply_voucher:hover,
#booking .co-flow #booking_promotion_row.co-cost-promo .apply_voucher:hover,
#booking #view_basket_wrapper .co-pn__row.is-picked input.number_input {
  border-color: var(--tru-pink);
  color: var(--tru-pink);
}

.co-btn--yellow {
  background: #FACC15;
  color: var(--tru-navy);
}

.co-btn--yellow:hover {
  background: #ffd83b;
}

.co-btn svg {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
}

.co-btn.is-loading {
  opacity: 0.8;
  pointer-events: none;
}

/* Shared server-side checkout feedback. The booking controller uses these
   classes for errors/messages returned after a POST on every stage. */
#booking .co-main .ap_errors,
#booking .co-main .ap_messages {
  box-sizing: border-box;
  width: min(100%, 72rem);
  max-width: none;
  margin: 0 auto 1.25rem;
  padding: 0.95rem 1.1rem;
  border: 1px solid;
  border-radius: 0.75rem;
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.92rem;
  line-height: 1.45;
  text-align: left;
}

#booking .co-main .ap_errors {
  border-color: rgba(255, 107, 107, 0.55);
  background: rgba(255, 107, 107, 0.1);
  color: #ffd1d1;
}

#booking .co-main .ap_messages {
  border-color: rgba(74, 222, 128, 0.45);
  background: rgba(74, 222, 128, 0.1);
  color: #c7f9d8;
}

#booking .co-main .ap_errors .ap_legend,
#booking .co-main .ap_messages .ap_legend {
  display: block;
  margin: 0;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

#booking .co-main .ap_errors ul,
#booking .co-main .ap_messages ul {
  margin: 0.55rem 0 0;
  padding: 0 0 0 1.2rem;
  color: inherit;
  font-family: inherit;
  font-weight: 500;
}

#booking .co-main .ap_errors li + li,
#booking .co-main .ap_messages li + li {
  margin-top: 0.25rem;
}

#booking .co-main .ap_errors a,
#booking .co-main .ap_messages a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

#booking .co-main .ap_errors a:hover,
#booking .co-main .ap_messages a:hover {
  color: var(--tru-pink);
}

/* Back to basket */
.co-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
  transition: color 0.2s;
}

.co-back:hover {
  color: var(--tru-pink);
}

.co-back span {
  color: var(--text-mute);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

@media (max-width: 520px) {
  .co-back span {
    display: none;
  }
}

/* Lead / descriptive copy */
.co-lead {
  color: var(--text-mute);
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0 0 1.4rem;
}

/* Full-width grid (stage 1, no summary) */
.co-grid--full {
  grid-template-columns: 1fr !important;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

/* Trip card (step 1) — big tour card, deals-style on desktop, stacked on mobile */
.co-trips {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.co-trip {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  background: var(--tru-navy);
  overflow: hidden;
  box-shadow: 0 5px 25px -5px rgba(0, 0, 0, 0.3);
}

/* Shared component base. */
.co-trip__top,
.co-trip__dcol,
.co-payopt__txt,
.co-paymode__txt,
#booking #view_basket_wrapper .pretour_input_holder,
#booking #view_basket_wrapper .posttour_input_holder,
#booking #view_basket_wrapper .pre-tour-rooms-outer,
#booking #view_basket_wrapper .co-trip__addons_list {
  display: flex;
  flex-direction: column;
}

@media (min-width: 640px) {
  .co-trip__top {
    flex-direction: row;
  }
}

.co-trip__img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #000;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .co-trip__img {
    width: 42%;
    aspect-ratio: auto;
    min-height: 250px;
  }
}

.co-trip__info {
  flex: 1;
  min-width: 0;
  padding: 1.15rem 1.3rem;
}

.co-trip__booking {
  padding: 0 1.3rem 1.25rem;
}

@media (min-width: 640px) {
  .co-trip__booking {
    padding: 0 1.4rem 1.4rem;
  }
}

/* Savings badge — consistent with the tour cards (red circular Save X% Off) */
.co-trip__save {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  height: 4.2rem;
  width: 4.2rem;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Montserrat", sans-serif;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.4), 0 6px 16px rgba(0, 0, 0, 0.35);
  transform: rotate(-10deg);
}

.co-trip__save-s {
  font-size: 0.55rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  line-height: 1;
  opacity: 0.9;
}

.co-trip__save-n {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  margin: 0.05rem 0;
}

.co-trip__save-o {
  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1;
}

.co-trip__arw {
  color: var(--tru-pink);
}

/* Shared component base. */
.co-trip__now,
.co-trip__perperson .co-trip__now,
.co-revtrip__x li span,
.co-row--today {
  color: #fff;
  font-weight: 700;
}

/* Shared component base. */
.co-trip__body,
.co-roomtxt,
.co-trav__label,
#booking .co-flow .co-credit__txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.co-trip__body {
  padding: 1.15rem 1.3rem 1.25rem;
}

.co-trip__topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.6rem;
}

/* Shared component base. */

.co-trip__title {
  font-size: 1.15rem;
  line-height: 1.15;
}

@media (min-width: 640px) {
  .co-trip__title {
    font-size: 1.3rem;
  }
}

.co-trip__badge {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
  color: #d1d5db;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}

.co-trip__metas {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 1rem;
}

.co-trip__meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-mute);
  font-size: 0.85rem;
}

.co-trip__meta svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--tru-pink);
  flex-shrink: 0;
}

/* Card sections — Dates / Travellers / Rooming / Trip cost */
.co-trip__sec {
  padding: 0.85rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.co-trip__sec--break {
  margin-top: 1rem;
  padding-top: 1.35rem;
  border-top: 2px solid rgba(255, 255, 255, 0.16);
}

.co-trip__sec-h {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0 0 0.65rem;
}

.co-trip__daterange {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.co-trip__daterange svg,
.co-trip__dates svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--tru-pink);
  flex-shrink: 0;
}

.co-trip__pp {
  color: var(--text-mute);
  font-weight: 400;
}

/* Description / tagline */
.co-trip__tagline {
  color: var(--text-mute);
  font-size: 0.88rem;
  line-height: 1.4;
  margin: 0 0 0.85rem;
}

/* Deals-style departure row: Start | End | Price | Travellers, values inline, labels above */
.co-trip__depart {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.1rem 1.9rem;
  padding-top: 0.3rem;
}

.co-trip__dlbl {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-mute);
  margin-bottom: 0.45rem;
}

.co-trip__dval {
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  white-space: nowrap;
}

.co-trip__dval s {
  color: var(--text-faint);
  font-weight: 400;
  font-size: 0.8rem;
}

.co-trip__dval em {
  color: var(--text-mute);
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 600;
}

.co-trip__dcol--trav .co-trip__pax {
  margin-top: -0.1rem;
}

@media (min-width: 640px) {
  .co-trip__dcol--trav {
    margin-left: auto;
  }
}

.co-trip__perperson {
  color: var(--text-mute);
  font-size: 0.82rem;
}

.co-trip__perperson s {
  color: var(--text-faint);
}

/* Shared component base. */


.co-trip__travrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .co-trip__travrow {
    align-items: flex-end;
  }

  .co-trip__travrow .co-trip__pax {
    margin-bottom: -0.5rem;
  }
}

/* Mobile keeps the simple range + inline price; desktop gets the deals-style Start/End + label */
.co-trip__daterow {
  display: none;
}

.co-trip__col--trav .co-trip__dlbl {
  display: none;
}

/* Dates & Travellers groups: stacked on mobile (with dividers), side by side on desktop */
.co-trip__cols {
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.co-trip__col--trav {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 639px) {
  .co-trip__cols {
    padding-bottom: 0.95rem;
  }

  .co-trip__travrow {
    align-items: center;
  }

  .co-trip__travrow .co-trip__dval {
    font-size: 1rem;
  }
}

@media (min-width: 640px) {
  .co-trip__daterange {
    display: none;
  }

  .co-trip__daterow {
    display: flex;
    gap: 2.5rem;
  }

  .co-trip__col--trav .co-trip__dlbl {
    display: block;
  }

  .co-trip__pp {
    display: none;
  }

  .co-trip__cols {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem 3rem;
    align-items: start;
    border-top: none;
    padding-top: 0.9rem;
    padding-bottom: 1.1rem;
  }

  .co-trip__col--trav {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .co-trip__roomopts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }

  .co-trip__roomopts .co-trip__roomopt {
    margin-bottom: 0;
  }

  .co-trip__roomopts .co-addon--double {
    grid-column: 1 / -1;
  }
}

.co-trip__pax {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 0.15rem;
}

.co-trip__pax button {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.co-trip__pax button:hover {
  background: var(--tru-pink);
}

.co-trip__paxn {
  min-width: 1.8rem;
  width: 50px;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  appearance: textfield;

  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
}

/* Chrome / Safari / Edge: remove number arrows */
.co-trip__paxn::-webkit-inner-spin-button,
.co-trip__paxn::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.co-trip__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.45rem;
  padding-top: 0.6rem;
  /* border-top: 1px solid rgba(255, 255, 255, 0.12); */
}

.co-trip__total span {
  color: var(--text-mute);
  font-size: 0.85rem;
}

.co-trip__total strong {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
}

/* Pax changer — change traveller count from the Traveller Info step
   (mobile: above the traveller forms; desktop: inside the order summary). */
.co-pax {
  border: 1px solid rgba(255, 63, 153, 0.35);
  border-radius: var(--radius);
  background: var(--tru-navy);
  box-shadow: 0 5px 25px -5px rgba(0, 0, 0, 0.3);
  padding: 0.9rem 1.05rem;
}

.co-pax--mobile {
  margin-bottom: 1.25rem;
}

@media (min-width: 1024px) {
  .co-pax--mobile {
    display: none;
  }
}

.co-pax--desk {
  margin: 0.9rem 0 1rem;
}

/* Shared component base. */
.co-pax__h,
.co-trav__label strong,
.co-revtrip__t {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: #fff;
}
.co-pax__h {
  letter-spacing: 0.03em;
  margin: 0 0 0.55rem;
}

.co-pax__row {
  padding: 0.45rem 0;
}

.co-pax__row+.co-pax__row {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.co-pax__trip {
  color: #d1d5db;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* .co-trip__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.45rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.co-trip__total span {
  color: #9ca3af;
  font-size: 0.85rem;
}

.co-trip__total strong {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
} */

.co-trip .tripcard__rating {
  margin-bottom: 0.6rem;
}

.co-trip .tripcard__facts {
  margin: 0.2rem 0 0;
}

.co-trip .tripcard__exp {
  margin-top: 0.9rem;
}

.co-trip .exp-ico .count {
  color: #fff;
  font-size: 0.95rem;
}

.co-trip__costrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.18rem 0;
  color: #9ca3af;
  font-size: 0.88rem;
}

.co-trip__costrow span:last-child {
  color: #d1d5db;
  font-weight: 600;
}

.co-trip__costrow--save {
  color: var(--tru-pink);
}

/* Shared component base. */
.co-trip__costrow--save span:last-child,
.co-req,
#booking .co-flow .co-costrow .co-costrow--save {
  color: var(--tru-pink);
  font-weight: 700;
}

.co-trip__deprow {
  padding-top: 0.55rem;
}

.co-trip__deprow-l {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #d1d5db;
  font-size: 0.85rem;
}

.co-trip__deprow-l svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--tru-green);
  flex-shrink: 0;
}

.co-trip__deprow strong {
  color: var(--tru-green);
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 1rem;
}

.co-trip__depnote {
  color: #6b7280;
  font-size: 0.73rem;
  margin: 0.2rem 0 0;
}

/* Back to basket — text link at the foot of the flow */
.co-back-link {
  display: block;
  text-align: center;
  color: var(--text-mute);
  font-size: 0.85rem;
  padding: 1.5rem 0 0.5rem;
  transition: color 0.2s;
}

.co-back-link:hover {
  color: var(--tru-pink);
}

/* Per-trip rooming (inside each tour card) */
.co-trip__room {
  padding: 0.9rem 0 0.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Shared component base. */
.co-trip__room-h,
.co-travellers__h {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0.05em;
}
.co-trip__room-h {
  font-size: 0.75rem;
  margin: 0 0 0.5rem;
}

.co-trip__roomopt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 0.65rem 0.8rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  margin-bottom: 0.5rem;
}

/* Shared component base. */
.co-trip__roomopt.is-active,
.co-paymode__opt.is-active {
  border-color: var(--tru-pink);
  background: rgba(255, 63, 153, 0.07);
}

/* Shared component base. */
.co-roomdot,
.co-payopt__radio,
.co-paymode__radio {
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
  position: relative;
}
.co-roomdot {
  width: 1.05rem;
  height: 1.05rem;
}

.co-trip__roomopt.is-active .co-roomdot {
  border-color: var(--tru-pink);
}

.co-trip__roomopt.is-active .co-roomdot::after,
.co-payopt.is-active .co-payopt__radio::after,
.co-paymode__opt.is-active .co-paymode__radio::after,
#booking #view_basket_wrapper .srs_input_wrapper:has(input:checked) .co-roomdot::after,
#booking #view_basket_wrapper .co-trip__roomopt.is-active .co-roomcheck::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: var(--tru-pink);
}

.co-roomtxt strong {
  color: #fff;
  font-size: 0.83rem;
  font-weight: 700;
}

.co-roomtxt span {
  color: var(--text-mute);
  font-size: 0.73rem;
}

.co-roomprice {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 0.8rem;
  color: #fff;
  flex-shrink: 0;
}

.co-trip__roomopt.is-active .co-roomprice {
  color: var(--tru-pink);
}

/* "Travelling as a couple?" — styled like an in-card add-on (icon, title/body, Free + toggle) */
.co-addon--double {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
  margin-top: 0.5rem;
}

/* Shared component base. */
.co-addon--double.is-on,
.co-trip__addons .co-addon.is-on {
  border-color: var(--tru-pink);
  box-shadow: none;
}

.co-addon--double .co-addon__ico {
  width: 2.4rem;
  height: 2.4rem;
}

/* Shared component base. */
.co-addon--double .co-addon__name,
.co-trip__addons .co-addon__name {
  font-size: 0.83rem;
  font-weight: 700;
  margin-bottom: 0.1rem;
}

/* Shared component base. */
.co-addon--double .co-addon__desc,
.co-trip__addons .co-addon__desc {
  display: block;
  font-size: 0.73rem;
  line-height: 1.4;
}

/* Shared component base. */
.co-addon--double .co-addon__price,
.co-trip__addons .co-addon__price {
  font-size: 0.8rem;
  font-weight: 800;
}

.co-addon--double .co-addon__btn.is-on svg {
  width: 0.95rem;
  height: 0.95rem;
}

/* Add-ons (step 2) */
.co-addons {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 1.2rem;
}

/* Per-tour add-on blocks */
.co-adtour {
  margin-bottom: 1.5rem;
}

.co-adtour__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
}

/* Shared component base. */
.co-adtour__badge,
.co-confirm__next li span {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--tru-pink);
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  flex-shrink: 0;
}
.co-adtour__badge {
  width: 1.7rem;
  height: 1.7rem;
  font-size: 0.82rem;
}

/* Shared component base. */
.co-adtour__title,
.co-modal__title,
.co-rev__title,
.co-payopt__txt strong,
.co-confirm__account-h {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
}
.co-adtour__title {
  font-size: 0.92rem;
  margin: 0;
}

.co-adtour__meta {
  color: var(--text-mute);
  font-size: 0.78rem;
  margin: 0.1rem 0 0;
}

/* Shared component base. */
.co-adgroup__h,
.co-trip__adgroup,
.co-oi__grouphd {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
}
.co-adgroup__h {
  font-size: 0.72rem;
  margin: 1rem 0 0.5rem;
}

.co-adgroup__h:first-of-type {
  margin-top: 0;
}

/* Add-ons folded into each trip card (step 2) — match the card's rooming style, not the standalone navy box */
.co-trip__adgroup {
  font-size: 0.72rem;
  margin: 0.9rem 0 0.5rem;
}

.co-trip__adgroup:first-child {
  margin-top: 0;
}

.co-trip__addons .co-addon {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
  margin-bottom: 0.5rem;
}

.co-trip__addons .co-addon:last-child {
  margin-bottom: 0;
}

.co-trip__addons .co-addon__ico {
  width: 2.4rem;
  height: 2.4rem;
}

/* Match the rooming rows: bold title then muted body, same sizes */

/* Price matches the "My own room" price size */

/* Added state collapses to a compact green tick to save space */

.co-trip__addons .co-addon__btn.is-on svg {
  width: 0.95rem;
  height: 0.95rem;
}

@media (max-width: 480px) {
  .co-trip__addons .co-addon {
    padding: 0.7rem;
    gap: 0.55rem;
    align-items: center;
  }

  .co-trip__addons .co-addon__ico {
    width: 2rem;
    height: 2rem;
  }

  .co-trip__addons .co-addon__ico svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  .co-trip__addons .co-addon__right {
    gap: 0.55rem;
  }
}

.co-adtour+.co-adtour {
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.co-adtour .co-addon {
  margin-bottom: 0.6rem;
}

.co-addon__ico {
  background: rgba(255, 255, 255, 0.06);
}

.co-addon {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem;
  border-radius: var(--radius);
  background: var(--tru-navy);
  box-shadow: 0 5px 25px -5px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.2s;
}

.co-addon.is-on {
  box-shadow: 0 0 0 1.5px var(--tru-pink), 0 5px 25px -5px rgba(0, 0, 0, 0.3);
}

.co-addon__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 8px;
  flex-shrink: 0;
}

.co-addon__ico svg {
  width: 1.4rem;
  height: 1.4rem;
}

/* Shared component base. */
.co-addon__info,
.co-oi__info,
#booking #view_basket_wrapper #booking_promotion_row .booking_promotion_inner,
#booking .co-summary-stage #booking_promotion_row .booking_promotion_inner,
#booking .co-flow #booking_promotion_row .booking_promotion_inner,
#booking #view_basket_wrapper .pretour_transport_wrapper .co-addon__info,
#booking #view_basket_wrapper .posttour_transport_wrapper .co-addon__info,
#booking .co-flow .co-cost-promo .booking_promotion_inner {
  flex: 1;
  min-width: 0;
}

.co-addon__name {
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  margin: 0 0 0.15rem;
}

.co-addon__desc {
  color: var(--text-mute);
  font-size: 0.78rem;
  margin: 0;
  line-height: 1.45;
}

.co-addon__right {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.9rem;
}

/* Shared component base. */
.co-addon__price,
.co-payopt__price {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
  white-space: nowrap;
}

.co-addon__btn {
  border: 1px solid var(--tru-pink);
  background: var(--tru-pink);
  color: #fff;
  border-radius: 8px;
  padding: 0.4rem 0.9rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
}

.co-addon__btn.is-on {
  background: transparent;
  color: var(--tru-green);
  border-color: var(--tru-green);
}

@media (max-width: 480px) {
  .co-addon__desc {
    display: none;
  }
}

/* Forms */
.co-field {
  margin-bottom: 0.9rem;
}

/* Shared component base. */
.co-field label,
.co-trav__body .ap_input_label,
.co-trav__body .dob_input_label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.co-field label {
  margin-bottom: 0.35rem;
}

/* Shared component base. */
.co-field input,
.co-dd__btn {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 0.8rem 0.9rem;
  color: #fff;
  font-size: 1rem;
  font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
  transition: border-color 0.2s;
}

.co-field input::placeholder {
  color: #4b5563;
}

/* Shared component base. */
.co-field input:focus,
.co-field select:focus,
.co-promo input:focus,
#booking #view_basket_wrapper #booking_promotion_row input:focus,
#booking .co-summary-stage #booking_promotion_row input:focus,
#booking .co-flow .co-cost-promo input:focus {
  outline: none;
  border-color: var(--tru-pink);
}

.co-field input.is-err {
  border-color: #ef4444;
}

.co-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.co-field-row .co-field--cc {
  grid-column: auto;
}

.co-field-row:has(.co-field--cc) {
  grid-template-columns: 90px 1fr;
}

/* Shared component base. */
.co-check,
.co-trav__body .co-no-middle {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  color: var(--text-mute);
  cursor: pointer;
}
.co-check {
  font-size: 0.82rem;
  margin: 0.3rem 0 1.1rem;
  line-height: 1.45;
}

.co-check input {
  margin-top: 0.15rem;
  accent-color: var(--tru-pink);
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.co-check--sm {
  font-size: 0.78rem;
  margin: 0.5rem 0 0;
}

.co-travellers__h {
  font-size: 0.8rem;
  margin: 0.5rem 0 0.7rem;
}

/* Log in to autofill */
.co-login {
  border: 1px solid rgba(33, 114, 213, 0.35);
  background: rgba(33, 114, 213, 0.08);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-bottom: 1.2rem;
}

.co-login__prompt,
.co-login__done {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.co-login__prompt[hidden],
.co-login__done[hidden],
.co-login__form[hidden] {
  display: none;
}

.co-login__msg {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #d1d5db;
  font-size: 0.85rem;
  line-height: 1.4;
}

.co-login__msg strong {
  color: #fff;
}

.co-login__msg svg {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--tru-blue);
  flex-shrink: 0;
}

.co-login__done .co-login__msg svg {
  color: var(--tru-green);
}

.co-login__btn {
  flex-shrink: 0;
  border: 1px solid var(--tru-blue);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.co-login__btn:hover {
  background: var(--tru-blue);
}

.co-login__form {
  padding-top: 0.3rem;
}

.co-login__actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.co-login__actions .co-btn {
  width: auto;
  flex: 1;
}

/* Shared component base. */
.co-login__cancel,
.co-modal__guest {
  background: none;
  border: none;
  color: var(--text-mute);
  cursor: pointer;
  text-decoration: underline;
}
.co-login__cancel {
  font-size: 0.82rem;
  white-space: nowrap;
}

.co-login__cancel:hover {
  color: #fff;
}

.co-login__hint {
  color: var(--text-faint);
  font-size: 0.74rem;
  margin: 0.7rem 0 0;
  text-align: center;
}

.co-modal__err {
  color: #ff6b6b;
  font-size: 0.82rem;
  margin: -0.2rem 0 0.7rem;
}

.co-modal__err[hidden] {
  display: none;
}

/* Log in modal */
.co-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.co-modal[hidden] {
  display: none;
}

.co-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
}

.co-modal__panel {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--tru-navy);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem 1.4rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: coModalIn 0.25s ease;

  overflow: hidden;
  gap: 30px;
}

@keyframes coModalIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.co-modal__x {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  background: none;
  border: none;
  color: var(--text-mute);
  cursor: pointer;
  padding: 0.25rem;
}

.co-modal__x svg {
  width: 1.3rem;
  height: 1.3rem;
}

.co-modal__x:hover {
  color: #fff;
}

.co-modal__title {
  font-size: 1.2rem;
  margin: 0 0 0.3rem;
}

.co-modal__sub {
  color: var(--text-mute);
  font-size: 0.85rem;
  margin: 0 0 1.1rem;
  line-height: 1.4;
}

.co-modal__panel .co-btn {
  margin-top: 0.3rem;
}

.co-modal__guest {
  width: 100%;
  font-size: 0.85rem;
  margin-top: 0.7rem;
}

.co-modal__guest:hover {
  color: #fff;
}

/* Custom brand-styled dropdowns (replace native select popups) */
.co-dd {
  position: relative;
}

.co-dd select {
  display: none;
}

.co-dd__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
  text-align: left;
}

.co-dd__val {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.co-dd.is-placeholder .co-dd__val {
  color: #4b5563;
}

.co-dd.is-open .co-dd__btn {
  border-color: var(--tru-pink);
}

.co-dd.is-open .co-dd__btn svg {
  transform: rotate(180deg);
}

.co-dd__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--tru-navy);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  padding: 0.3rem;
  display: none;
}

.co-dd.is-open .co-dd__list {
  display: block;
}

.co-dd__opt {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #d1d5db;
  padding: 0.55rem 0.65rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
}

/* Shared component base. */
.co-dd__opt:hover,
.co-body .ap_autocomplete dt:hover,
.co-body .ap_autocomplete .ac_select {
  background: rgba(255, 63, 153, 0.16);
  color: #fff;
}

/* Selects (nationality/DOB/dial code) */
.co-field select {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 0.8rem 0.9rem;
  color: #fff;
  font-size: 1rem;
  font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  padding-right: 2.2rem;
}

.co-field input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.co-opt {
  color: var(--text-faint);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.co-help {
  color: var(--text-faint);
  font-size: 0.75rem;
  margin: 0.4rem 0 0;
}

.co-dob {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 0.5rem;
}

.co-phone {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 0.5rem;
}

.co-phone .co-dd__btn {
  padding-left: 0.7rem;
  padding-right: 0.6rem;
}

.co-phone .co-dd__list {
  right: auto;
  min-width: 15rem;
}

/* Traveller accordion */
.co-travellers-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0.5rem 0 1.1rem;
}

.co-trav {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: var(--tru-navy);
  box-shadow: 0 5px 25px -5px rgba(0, 0, 0, 0.3);
}

.co-trav.is-open {
  position: relative;
  z-index: 5;
}

.co-trav.is-open {
  border-color: rgba(255, 63, 153, 0.35);
}

/* Shared component base. */
.co-trav__head,
.co-rev__head,
.co-paycard__head {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.co-trav__head {
  gap: 0.75rem;
  padding: 0.9rem 1rem;
}

.co-trav__badge {
  width: 1.75rem;
  height: 1.75rem;
}

.co-trav__label strong {
  letter-spacing: 0.03em;
}

/* Shared component base. */
.co-trav__label span,
.co-rev__sub {
  color: var(--text-mute);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.co-trav__label span {
  margin-top: 0.1rem;
}

.co-trav__chev,
.co-rev__chev {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--text-mute);
  flex-shrink: 0;
  transition: transform 0.25s;
}

.co-trav.is-open .co-trav__chev {
  transform: rotate(180deg);
}

.co-trav__body {
  display: none;
  padding: 0.2rem 1rem 1.1rem;
}

/* Keep the CMS-generated fields in the same reading order as the checkout design. */
.co-trav.is-open .co-trav__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.co-trav__body .pax_email_holder_outer,
.co-trav__body > .input_group {
  display: contents;
}

.co-trav__body .pax_email_holder_outer > *,
.co-trav__body > .input_group > .input_holder {
  flex: 0 0 100%;
}
.co-trav__body > .input_group::after,
.co-trav__body .pax_email_holder_outer > .clear,
.co-trav__body br[style*="clear"] {
  display: none;
}

/* Passenger details are rendered by the existing CMS input helper. Keep its
   fields and validation hooks, but give the generated wrappers the same
   visual treatment as the redesigned checkout fields. */
.co-trav__body .pax_email_holder_outer,
.co-trav__body > .input_group {
  width: 100%;
  margin: 0;
}

.co-trav__body > .input_group::after {
  display: block;
  clear: both;
  content: "";
}

.co-trav__body .pax_email_holder_outer > .input_holder,
.co-trav__body > .input_group > .input_holder,
.co-trav__body .readonly_input_outer {
  display: block;
  float: none;
  width: 100% !important;
  margin: 0 0 0.9rem;
}

.co-trav__body .readonly_input_outer > .input_holder {
  display: block;
  float: none;
  width: 100% !important;
  margin: 0;
}

.co-trav__body .ap_input_label,
.co-trav__body .dob_input_label {
  width: auto;
  margin: 0 0 0.35rem;
  line-height: 1.2;
}

.co-trav__body .req {
  color: var(--tru-pink);
  font-style: normal;
  font-weight: 700;
}

.co-trav__body input.ap_input:not([type="hidden"]),
.co-trav__body select.ap_input {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none;
  min-height: 3.05rem;
  margin: 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-family: "Source Sans 3", sans-serif;
  font-size: 1rem;
  line-height: 1.35;
  transition: border-color 0.2s, background-color 0.2s;
}

.co-trav__body input.ap_input::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
}

.co-trav__body input.ap_input:not([type="hidden"])::placeholder {
  color: #4b5563;
  opacity: 1;
}

.co-trav__body input.ap_input:not([type="hidden"]):focus,
.co-trav__body select.ap_input:focus {
  outline: none;
  border-color: var(--tru-pink);
  background: rgba(255, 255, 255, 0.06);
}

.co-trav__body input.ap_input[readonly],
.co-trav__body input.ap_input:disabled,
.co-trav__body select.ap_input:disabled {
  opacity: 0.6;
}

.co-trav__body .input_error {
  display: block;
  margin-top: 0.3rem;
  color: #ef4444 !important;
  font-size: 0.75rem;
  line-height: 1.35;
}

.co-trav__body .input_error.no_error:empty {
  display: none;
}

.co-trav__body .ap_help .help_inner {
  display: none;
}

.co-trav__body .ap_help:not(:has(.toggle_password)) {
  display: none;
}

.co-trav__body .reg_password {
  position: relative;
}

.co-trav__body .reg_password .ap_help:has(.toggle_password) {
  position: absolute;
  top: 2rem;
  right: 0.75rem;
  z-index: 1;
  width: auto !important;
}

.co-trav__body .dob_container {
  width: 100% !important;
  margin-bottom: 0.9rem;
}

.co-trav__body .dob_container_inner {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  align-items: start;
  gap: 0.5rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

.co-trav__body .dob_container_inner > .input_holder {
  width: auto !important;
  margin: 0;
}

.co-trav__body .dob_divider {
  display: none;
}

.co-trav__body select.ap_input,
.co-trav__body select.ap_input option {
  color: #fff;
  background-color: #102d4e;
}

.co-trav__body select.ap_input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-position: right 0.8rem center;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
  color-scheme: dark;
}

/* Autocomplete menus are moved to <body> by the CMS script, so scope them
   through the passenger form rather than the field wrapper. */
.co-body .ap_autocomplete {
  color: #fff;
  font-family: "Source Sans 3", sans-serif;
}

.co-body .ap_autocomplete dl {
  overflow-x: hidden;
  border: 1px solid rgba(255, 63, 153, 0.35);
  border-radius: 8px;
  background: var(--tru-navy);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.65);
}

.co-body .ap_autocomplete dt {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-mute);
  font-size: 0.9rem;
  line-height: 1.35;
}

.co-body .ap_autocomplete dt em {
  color: var(--tru-pink);
}

.co-trav__body br[style*="clear"] {
  display: none;
}

.co-trav__body .social_login_block {
  width: 100%;
  margin: 0 0 0.9rem;
  float: none;
}

.co-trav__body .login-with-outer {
  width: 100%;
}

.co-trav__body .login_popup_divider {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--text-mute);
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.co-trav__body .login_popup_divider .divider_line {
  height: 1px;
  flex: 1;
  background: rgba(255, 255, 255, 0.12);
}

.co-trav__body .login-with-inner {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.co-trav__body .login-with-option {
  float: none;
  margin: 0;
  padding: 0.45rem 0 0;
}

.co-trav__body .button.login-with {
  width: 49px;
  height: 49px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background-image: url("/images/new-site-icons-23/log-in-with-icons.png");
  background-size: cover;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}

.co-trav__body .button.login-with.facebook {
  background-position: -66px;
}

.co-trav__body .button.login-with:hover {
  border-color: var(--tru-pink);
  transform: translateY(-1px);
}

.co-trav__body .co-no-middle {
  margin: -0.45rem 0 0.9rem;
  font-size: 0.78rem;
  line-height: 1.4;
}

.co-trav__body .co-no-middle input {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  margin: 0.08rem 0 0;
  accent-color: var(--tru-pink);
}

.co-trav__body .email_response_error .input_error {
  margin: -0.35rem 0 0.65rem;
  color: #ff9ec9 !important;
  font-size: 0.82rem;
  line-height: 1.45;
}

.co-trav__body .email_response_error .error_login_link {
  color: var(--tru-pink);
  font-weight: 700;
  text-decoration: underline;
}

.co-trav__body .register_during_checkout_message {
  margin: 0 0 0.9rem;
  color: var(--text-mute);
  font-size: 0.8rem;
  line-height: 1.45;
}

.co-input-icon {
  position: relative;
}

.co-card-brands {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 0.3rem;
}

.co-card-brands img {
  height: 18px;
  width: auto;
  opacity: 0.85;
}

/* Review collapsibles (payment step) */
.co-review {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 1rem 0 1.5rem;
}

.co-rev {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: var(--tru-navy);
  overflow: hidden;
}

.co-rev__head {
  gap: 0.7rem;
  padding: 0.9rem 1rem;
}

.co-rev__title {
  font-size: 0.85rem;
  flex-shrink: 0;
}

.co-rev__sub {
  flex: 1;
  text-align: right;
}

.co-rev.is-open .co-rev__chev {
  transform: rotate(180deg);
}

.co-rev__body {
  display: none;
  padding: 0.2rem 1rem 1rem;
}

.co-rev.is-open .co-rev__body {
  display: block;
}

/* Static, always-open box (Cost breakdown) — same card, no toggle/chevron */
.co-rev__head--static {
  cursor: default;
}

.co-rev--static .co-rev__body {
  padding-top: 0.6rem;
}

/* Terms & Conditions box */
.co-terms .co-check {
  margin: 0 0 0.7rem;
  color: #d1d5db;
}

.co-terms .co-check:last-of-type {
  margin-bottom: 0;
}

/* Shared component base. */
.co-terms a,
#booking .co-flow .co-terms a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.co-terms a:hover {
  color: var(--tru-pink);
}

.co-terms .co-payopts__err {
  margin: 0.85rem 0 0;
}

.co-rev__edits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.co-rev__edit {
  font-size: 0.68rem;
}

/* Shared component base. */
.co-revtrip,
.co-revtrav {
  padding: 0.65rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Shared component base. */
.co-revtrip:first-child,
.co-revtrav:first-child {
  border-top: none;
  padding-top: 0;
}

.co-revtrip__t {
  margin: 0;
}

.co-revtrip__m {
  color: var(--text-mute);
  font-size: 0.78rem;
  margin: 0.3rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.co-revtrip__m svg,
.co-oi__meta svg,
.co-oi__facts svg {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  color: var(--tru-pink);
}

.co-revtrip__x {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.co-revtrip__x li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: #d1d5db;
  font-size: 0.77rem;
}

.co-revtrip__none {
  color: var(--text-faint);
  font-size: 0.76rem;
  margin: 0.4rem 0 0;
}

.co-revtrav__n {
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  margin: 0;
}

.co-revtrav__e {
  color: var(--text-mute);
  font-size: 0.76rem;
  margin: 0.1rem 0 0;
}

.co-revtrav__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  margin-top: 0.4rem;
}

.co-revtrav__d {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-mute);
  font-size: 0.76rem;
}

.co-revtrav__d svg {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  opacity: 0.75;
}

.co-revtrav__todo {
  color: #f0b429;
  font-size: 0.76rem;
  margin: 0.3rem 0 0;
}

/* Payment options */
/* Shared component base. */
.co-pay-h,
.co-summary__h {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0.02em;
}
.co-pay-h {
  font-size: 0.9rem;
  margin: 0 0 0.7rem;
}

.co-payopts {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.3rem;
}

/* Shared component base. */
.co-payopt,
.co-paymode__opt {
  display: flex;
  align-items: center;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  cursor: pointer;
}
.co-payopt {
  gap: 0.75rem;
  background: var(--tru-navy);
  padding: 0.9rem 1rem;
  transition: border-color 0.2s;
}

.co-payopt[hidden] {
  display: none;
}

.co-payopt.is-active {
  border-color: var(--tru-pink);
  box-shadow: 0 0 0 1px var(--tru-pink);
}

.co-payopt__radio {
  width: 1.2rem;
  height: 1.2rem;
}

.co-payopt.is-active .co-payopt__radio {
  border-color: var(--tru-pink);
}

.co-payopt__txt {
  flex: 1;
}

.co-payopt__txt strong {
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.co-payopt__txt span {
  color: var(--text-mute);
  font-size: 0.78rem;
  margin-top: 0.15rem;
}

.co-payopt__price {
  margin-left: auto;
  padding-left: 0.9rem;
  flex-shrink: 0;
}

.co-payopt.is-active .co-payopt__price {
  color: var(--tru-pink);
}

/* Booking summary (Add-ons step) — full-width tour cards, hero image on top */
.co-booking-sec {
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.co-booking-h {
  margin-bottom: 0.35rem;
}

.co-booking {
  margin: 1.35rem 0 0.5rem;
}

.co-booking .co-oi {
  display: block;
  padding: 0;
  border-bottom: none;
  background: var(--tru-navy);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.1rem;
}

.co-booking .co-oi:last-child {
  margin-bottom: 0;
}

.co-booking .co-oi__img {
  width: 100%;
  height: 220px;
  border-radius: 0;
}

.co-booking .co-oi__remove {
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: rgba(11, 18, 32, 0.72);
  backdrop-filter: blur(4px);
}

.co-booking .co-oi__remove svg { width: 16px; height: 16px; }

.co-booking .co-oi__info {
  padding: 1.1rem 1.25rem 1.25rem;
}

.co-bkrows.co-summary__rows {
  background: var(--tru-navy);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 1.35rem 0 1.75rem;
}

/* Payment-choice validation */
.co-payopts__err {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #ff6b6b;
  font-size: 0.85rem;
  margin: -0.7rem 0 1.1rem;
}

.co-payopts__err svg {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

.co-payopts__err[hidden] {
  display: none;
}

/* Change payment option link (payment step) */
.co-pay-total {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  color: #fff;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

.co-pay-change {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin: 0.2rem 0 1.5rem;
}

.co-pay-chosen {
  margin-bottom: 0.75rem;
}

.co-pay-chosen strong {
  color: #fff;
}

#booking .co-flow .co-pay-subscription-info {
  color: var(--text-mute);
  font-size: .9rem;
  line-height: 1.5;
  margin: 0 0 .75rem;
}

#booking .co-flow .co-pay-subscription-info > * {
  color: inherit;
  font: inherit;
}

#booking .co-flow .co-pay-subscription-info > :first-child { margin-top: 0; }
#booking .co-flow .co-pay-subscription-info > :last-child { margin-bottom: 0; }

#booking .co-flow .co-payment-method { margin-top: 1.5rem; }
#booking .co-flow .co-payment-method > .co-pay-h { margin: 0 0 .75rem; }
#booking .co-flow .co-payment-frame {
  width: 100%;
  min-width: 0;
  margin-top: 0;
  background: var(--tru-navy);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: .85rem;
  box-shadow: 0 5px 25px -5px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  border-radius: var(--radius);
}

#booking .co-flow .co-payment-frame #sagepayouterwrapper {
  padding: 1rem;
  border-radius: 8px;
  background: var(--tru-navy);
  overflow: hidden;
}

#booking .co-flow .co-payment-frame #sagepaywrapper {
  height: 500px !important;
  background: #fff;
}

#booking .co-flow .co-payment-frame #sagepayouterwrapper,
#booking .co-flow .co-payment-frame iframe {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100%;
  border: 0;
}

@media (max-width: 1058px) {
  #booking .co-flow .co-payment-frame #sagepaywrapper { height: 670px !important; }
}
@media (max-width: 1023px) {
  #booking .co-flow .co-payment-frame #sagepaywrapper { height: 500px !important; }
}
@media (max-width: 581px) {
  #booking .co-flow .co-payment-frame #sagepaywrapper { height: 675px !important; }
}
@media (max-width: 531px) {
  #booking .co-flow .co-payment-frame #sagepaywrapper { height: 701px !important; }
}
@media (max-width: 397px) {
  #booking .co-flow .co-payment-frame #sagepaywrapper { height: 720px !important; }
}

/* Hold panel */
.co-hold {
  background: rgba(33, 114, 213, 0.08);
  border: 1px solid rgba(33, 114, 213, 0.3);
  border-radius: var(--radius);
  padding: 1.2rem;
}

.co-hold__txt {
  color: #d1d5db;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 1rem;
}

.co-hold__txt strong {
  color: #fff;
}

/* Payment mode toggle */
.co-paymode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-bottom: 1.2rem;
}

@media (max-width: 420px) {
  .co-paymode {
    grid-template-columns: 1fr;
  }
}

.co-paymode__opt {
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.03);
  padding: 0.85rem;
  transition: border-color 0.2s, background 0.2s;
}

.co-paymode__radio {
  width: 1.15rem;
  height: 1.15rem;
}

.co-paymode__opt.is-active .co-paymode__radio {
  border-color: var(--tru-pink);
}

.co-paymode__txt strong {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}

.co-paymode__txt span {
  color: var(--text-mute);
  font-size: 0.75rem;
}

/* Express pay */
.co-express {
  margin-bottom: 1rem;
}

.co-express__label {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: var(--text-mute);
  text-align: center;
  margin: 0 0 0.7rem;
}

.co-express__btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

.co-express__btns--pay {
  margin-bottom: 1rem;
}

.co-pay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.2s;
}

.co-pay-btn:active {
  transform: scale(0.98);
}

.co-pay-btn--apple {
  background: #000;
}

.co-pay-btn--google {
  background: #000;
}

.co-pay-btn img {
  height: 22px;
  width: auto;
}

.co-express__or {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--text-faint);
  font-size: 0.78rem;
  margin: 1rem 0;
}

.co-express__or::before,
.co-express__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

/* Payment method list — every method in its own navy box */
.co-paymethods {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.co-paymethod {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  padding: 1.25rem 1.15rem;
  background: var(--tru-navy);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s;
}

.co-paymethod:hover {
  border-color: rgba(255, 63, 153, 0.55);
}

.co-paymethod__label {
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
}

.co-paymethod__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.co-paymethod__logo img {
  height: 36px;
  width: auto;
}

.co-paycard {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  background: var(--tru-navy);
  overflow: hidden;
}

.co-paycard.is-open {
  border-color: var(--tru-pink);
}

.co-paycard__head {
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 76px;
  padding: 0.5rem 1.15rem;
}

.co-paycard__label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
}

.co-paycard__label svg {
  width: 1.3rem;
  height: 1.3rem;
  color: var(--tru-pink);
}

.co-paycard__brands {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.co-paycard__brands img {
  height: 22px;
  width: auto;
}

.co-paycard__chev {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--text-mute);
  transition: transform 0.25s;
  margin-left: 0.15rem;
}

.co-paycard.is-open .co-paycard__chev {
  transform: rotate(180deg);
}

.co-paycard__body {
  display: none;
  padding: 0.4rem 1.15rem 1.2rem;
}

.co-paycard.is-open .co-paycard__body {
  display: block;
}

/* Info card below the methods — ATOL/ABTA + ticks + encrypted note */
.co-paynote {
  margin-top: 1.2rem;
  padding: 1.2rem 1.15rem;
  background: var(--tru-navy);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
}

.co-paynote .co-pay-trust {
  margin: 0;
  padding: 0;
  border-top: none;
}

.co-paynote .co-secure-note {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 1024px) {
  .co-paynote .co-pay-trust {
    display: none;
  }

  .co-paynote .co-secure-note {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
}

.co-secure-note {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-faint);
  font-size: 0.76rem;
  margin: 0.8rem 0 0;
  line-height: 1.4;
}

.co-secure-note svg {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--tru-green);
  flex-shrink: 0;
}

/* Order summary */
.co-summary--desk {
  display: none;
}

@media (min-width: 1024px) {
  .co-summary--desk {
    display: block;
    position: sticky;
    top: 118px;
  }

  .co-grid--full .co-summary--desk {
    display: none;
  }

  .co-summary--mobile {
    display: none;
  }
}

/* Mobile: no order summary on the payment step — the cost breakdown box on the
   previous step already covers it, keeping the payment screen clean. */
@media (max-width: 1023px) {
  .co-grid.is-pay .co-summary--desk {
    display: none;
  }
}

.co-summary__inner {
  background: var(--tru-navy);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: 0 5px 25px -5px rgba(0, 0, 0, 0.3);
}

.co-summary__h {
  font-size: 1rem;
  margin: 0 0 1rem;
}

.co-oi {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.co-oi__img {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #000;
}

/* Shared component base. */
.co-oi__img img,
#booking #view_basket_wrapper .tour_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.co-oi__title {
  font-size: 0.92rem;
  line-height: 1.15;
}

.co-oi__meta {
  color: var(--text-mute);
  margin: 0.18rem 0 0;
}

.co-oi__priceline {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.co-oi__priceline strong {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: #fff;
  font-size: 1rem;
  white-space: nowrap;
}

.co-oi__priceline s {
  color: var(--text-faint);
  font-size: 0.76rem;
}

.co-oi__perday {
  color: var(--text-mute);
  font-size: 0.7rem;
  margin-top: 0.12rem;
}

.co-oi__remove {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(11, 18, 32, 0.78);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.co-oi__remove svg { width: 13px; height: 13px; }

.co-oi__remove:hover,
.co-oi__remove:focus-visible {
  background: var(--tru-pink);
  border-color: var(--tru-pink);
  color: #fff;
}

.co-oi__tagline {
  color: var(--text-mute);
  font-size: 0.78rem;
  line-height: 1.35;
  margin: 0.4rem 0 0;
}

.co-oi__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.9rem;
  font-size: 0.78rem;
  color: #d1d5db;
  margin: 0.45rem 0 0;
}

.co-oi__facts span {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.co-oi__meta--book {
  margin-top: 0.55rem;
}

.co-oi__extras {
  margin-top: 0.6rem;
  padding-top: 0.55rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.co-oi__xname {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #d1d5db;
  min-width: 0;
}

/* Shared component base. */
.co-oi__xtext,
#booking #view_basket_wrapper .co-addon__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.co-oi__xdate {
  color: var(--text-faint);
  font-size: 0.7rem;
  margin-top: 0.05rem;
}

.co-oi__toprow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0;
}

.co-oi__toprow+.co-oi__meta {
  margin-top: 0.1rem;
}

.co-oi__toprow .co-oi__title {
  margin: 0;
}

.co-oi__price {
  flex-shrink: 0;
}

.co-oi__rating {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.35rem;
}

.co-oi__stars {
  display: inline-flex;
  gap: 1px;
}

.co-oi__stars svg {
  width: 0.8rem;
  height: 0.8rem;
  color: var(--amber);
}

.co-oi__rnum {
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
}

.co-oi__rrev {
  color: var(--text-faint);
  font-size: 0.74rem;
}

.co-oi__grouphd {
  font-size: 0.7rem;
  margin: 0.9rem 0 0.2rem;
}

.co-oi--extra {
  align-items: center;
  padding: 0.5rem 0;
}

.co-oi--extra .co-oi__price strong {
  color: var(--tru-pink);
}

.co-oi--addon {
  align-items: center;
  padding: 0.55rem 0;
}

.co-oi__addico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--tru-blue);
  flex-shrink: 0;
}

.co-oi--addon .co-oi__title {
  flex: 1;
}

.co-promo {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0;
}

/* Promo widget embedded in the price-breakdown box, below the discount value */
.co-promo--rows {
  margin: 0.7rem 0 0.5rem;
}

.co-promo__msg--rows {
  margin: 0 0 0.6rem;
}

.co-promo input {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 0.65rem 0.8rem;
  color: #fff;
  font-size: 0.9rem;
}

.co-promo input.is-err {
  border-color: #ef4444;
}

.co-promo input.is-ok {
  border-color: var(--tru-green);
}

.co-promo__msg {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  margin: -0.5rem 0 1rem;
  line-height: 1.3;
}

.co-promo__msg[hidden] {
  display: none;
}

.co-promo__msg svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.co-promo__msg strong {
  font-weight: 800;
}

.co-promo__msg--ok {
  color: var(--tru-green);
}

.co-promo__msg--err {
  color: #ef4444;
}

.co-promo button {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  border-radius: 8px;
  padding: 0 1.1rem;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
}

.co-summary__rows {
  margin-top: 0.4rem;
}

.co-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 0;
  color: #d1d5db;
  font-size: 0.88rem;
}

.co-row--save {
  color: var(--tru-green);
  font-weight: 600;
}

.co-row--total {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 0.5rem;
  padding-top: 0.7rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
  text-transform: uppercase;
}

.co-row--today span:last-child {
  color: var(--tru-pink);
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
}

.co-row--bal {
  color: var(--text-mute);
  font-size: 0.78rem;
}

/* Trust */
.co-trust {
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.co-trust__secure {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--tru-green);
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0 0 0.8rem;
}

.co-trust__logos {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.85rem;
}

.co-trust__logos img {
  height: 26px;
  width: auto;
  opacity: 0.9;
}

/* Shared component base. */

.co-trust__badges {
  gap: 1rem 1.5rem;
  margin: 1rem 0;
}

.co-trust__badges>img {
  height: 32px;
  width: auto;
  opacity: 0.9;
}

.co-trust__rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.co-trust__rstars {
  display: inline-flex;
  gap: 1px;
}

.co-trust__rstars svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--amber);
}

.co-trust__rlabel {
  color: var(--text-mute);
  font-size: 0.74rem;
  white-space: nowrap;
}

.co-trust__points {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.co-trust__points li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #d1d5db;
  font-size: 0.8rem;
}

.co-trust__cards {
  gap: 0.5rem 1.25rem;
}

.co-trust__cards img {
  height: 24px;
  width: auto;
  opacity: 0.8;
}

/* Legacy mobile summary is not emitted by the server templates. */
.co-summary--mobile {
  display: none !important;
}

/* Confirmation */
.co-confirm {
  text-align: center;
  padding: 2.5rem 1.5rem;
  max-width: 620px;
  margin: 0 auto;
}

.co-confirm__tick {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 999px;
  background: var(--tru-green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.2rem;
}

.co-confirm__tick svg {
  width: 2.2rem;
  height: 2.2rem;
  color: var(--tru-navy);
}

.co-confirm__title {
  font-size: 2rem;
}

.co-confirm__script {
  font-family: "Caveat", cursive;
  color: var(--tru-pink);
  font-size: 1.9rem;
  margin: 0.1rem 0 0.8rem;
}

.co-confirm__sub {
  color: var(--text-mute);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 auto 1.5rem;
  max-width: 420px;
}

.co-confirm__sub strong {
  color: #fff;
}

.co-confirm__message { max-width: 520px; }
.co-confirm__message p { margin: 0; }

.co-confirm__ref {
  display: inline-flex;
  flex-direction: column;
  gap: 0.2rem;
  background: var(--tru-navy);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 0.8rem 2rem;
  margin-bottom: 1.8rem;
}

.co-confirm__ref span {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute);
}

.co-confirm__ref strong {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: #fff;
  letter-spacing: 0.05em;
}

.co-confirm__next {
  text-align: left;
  background: var(--tru-navy);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.2rem;
}

/* Shared component base. */
.co-confirm__next-h,
.co-confirm__costs h4 {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0.05em;
}
.co-confirm__next-h {
  font-size: 0.85rem;
  margin: 0 0 0.8rem;
}

.co-confirm__next ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.co-confirm__next li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: #d1d5db;
  font-size: 0.88rem;
  line-height: 1.45;
}

.co-confirm__next li span {
  width: 1.4rem;
  height: 1.4rem;
  font-size: 0.75rem;
}

.co-confirm__account {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  background: linear-gradient(135deg, rgba(255, 63, 153, 0.1), rgba(33, 114, 213, 0.08));
  border: 1px solid rgba(255, 63, 153, 0.25);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.2rem;
}

.co-confirm__account-h {
  font-size: 0.9rem;
  margin: 0 0 0.25rem;
}

.co-confirm__account-s {
  color: var(--text-mute);
  font-size: 0.82rem;
  margin: 0;
  line-height: 1.4;
}

.co-confirm__account .co-btn {
  width: auto;
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .co-confirm__account {
    flex-direction: column;
    align-items: stretch;
  }

  .co-confirm__account .co-btn {
    width: 100%;
  }

  .co-confirm__title {
    font-size: 1.6rem;
  }
}

/* The confirmation page leaves booking figures in its shared sidebar and shows
   only the payment recorded by this checkout. */
.co-complete-grid {
  align-items: start;
}

.co-confirm__costs {
  margin: 0 0 0.6rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  background: rgba(9, 33, 62, 0.72);
  text-align: left;
}

.co-confirm__costs h4 {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
}

/* Shared component base. */
.co-confirm__total,
#booking .co-summary-stage .final_price_row,
#booking .co-flow .final_price_row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
}
.co-confirm__total {
  padding-top: 0.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.78rem;
}

.co-confirm__total strong {
  color: var(--tru-pink);
  font-size: 1rem;
  white-space: nowrap;
}

.co-confirm__total + .co-confirm__total {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top-color: rgba(255, 255, 255, 0.07);
}

.co-confirm__total--secondary {
  color: var(--text-mute);
  font-weight: 600;
}

.co-confirm__total--secondary strong {
  color: #fff;
  font-size: 0.9rem;
}

/* ============================================================
   CHECKOUT — full-screen "booking your trip" processing overlay
   Shown between Review & confirm and Payment while the API is called.
   A determinate progress bar (not a spinner) so it never reads as "buffering".
   ============================================================ */
.co-processing {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--tru-navy);
  overflow: hidden;
}

.co-processing[hidden] {
  display: none;
}

.co-processing::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 25%, rgba(255, 63, 153, 0.18) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 80%, rgba(33, 114, 213, 0.16) 0%, transparent 45%);
}

.co-processing__inner {
  position: relative;
  text-align: center;
  width: 100%;
  max-width: 40rem;
}

.co-processing__script {
  font-family: "Caveat", cursive;
  color: var(--tru-pink);
  font-size: 1.5rem;
  line-height: 1;
  margin: 0 0 0.75rem;
}

@media (min-width: 640px) {
  .co-processing__script {
    font-size: 1.875rem;
  }
}

.co-processing__title {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0 0 2rem;
  font-size: 2rem;
}

@media (min-width: 640px) {
  .co-processing__title {
    font-size: 3.25rem;
  }
}

@media (min-width: 1024px) {
  .co-processing__title {
    font-size: 4rem;
  }
}

.co-processing__title span {
  color: var(--tru-pink);
}

.co-processing__bar {
  position: relative;
  height: 8px;
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.co-processing__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tru-pink), #ff8ac4);
  box-shadow: 0 0 18px -2px rgba(255, 63, 153, 0.7);
}

/* Indeterminate: the booking API has no known duration, so the fill loops
   across the track instead of implying a fixed % towards completion. */
.co-processing.is-on .co-processing__fill {
  animation: co-proc-loop 1.3s cubic-bezier(0.65, 0.05, 0.35, 1) infinite;
}

@keyframes co-proc-loop {
  0% {
    left: -45%;
  }

  100% {
    left: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .co-processing.is-on .co-processing__fill {
    animation: none;
    left: 0;
    width: 100%;
    opacity: 0.5;
  }
}

.co-processing__status {
  color: #e5e7eb;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  margin: 1.1rem 0 0;
  min-height: 1rem;
}

.co-processing__note {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #9ca3af;
  font-size: 0.8rem;
  margin: 1.75rem 0 0;
}

.co-processing__note svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--tru-pink);
}

/* Custom */

/* ============================================================
   Basket / add-ons stage

   The view stage still submits the established basket fields and is driven by
   redesign_26_checkout.js. These rules style those existing hooks rather
   than replacing the markup, so the basket interactions remain unchanged.
   ============================================================ */
#booking #view_basket_wrapper { display: flow-root; }
#booking #view_basket_wrapper > .checkout_box {
  margin: 0 0 1rem;
  padding: 1.15rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  background: rgba(255,255,255,.035);
  color: #fff;
}
#booking #view_basket_wrapper > .checkout_box:last-child { margin-bottom: 0; }
#booking #view_basket_wrapper > .qty_box {
  padding: .8rem 1rem;
  background: var(--tru-navy);
}

#booking #view_basket_wrapper .qty_box .heading,
#booking #view_basket_wrapper .srs_input_wrapper .heading,
#booking #view_basket_wrapper .pre_tour_acc .heading,
#booking #view_basket_wrapper .not-available .heading {
  margin: 0 0 .55rem; color: #fff; font-family: "Montserrat",sans-serif;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
#booking #view_basket_wrapper .qty_box .qty_holder {
  display: inline-flex; align-items: center; gap: .45rem; flex-shrink: 0;
}
#booking #view_basket_wrapper .qty_adj {
  position: relative; display: inline-flex; width: 2rem; height: 2rem;
  align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px; background: rgba(255,255,255,.06); background-image: none;
  color: #fff; cursor: pointer; transition: border-color .2s,background .2s;
}
#booking #view_basket_wrapper .qty_adj::before { content:"−"; font-size:1rem; line-height:1; }
#booking #view_basket_wrapper .qty_adj.add::before { content:"+"; }
/* Shared component base. */
#booking #view_basket_wrapper .qty_adj:hover,
#booking #view_basket_wrapper .pre-tour-checkbox.checked > div,
#booking #view_basket_wrapper .post-tour-checkbox.checked > div {
  border-color: var(--tru-pink);
  background: var(--tru-pink);
}

#booking #view_basket_wrapper .qty_box .input_holder,
#booking #view_basket_wrapper .number_container .input_holder {
  display: inline-flex; width: auto !important; margin: 0;
}
#booking #view_basket_wrapper .qty_box input.number_input,
#booking #view_basket_wrapper .number_container input.number_input {
  min-height: 2rem; padding: .25rem; border: 1px solid rgba(255,255,255,.18);
  border-radius: 7px; background: rgba(255,255,255,.06); color:#fff;
  font-family:"Montserrat",sans-serif; font-weight:800; text-align:center;
}
#booking #view_basket_wrapper .qty_box input.number_input { width:2.65rem !important; }

#booking #view_basket_wrapper .tour_info_box {
  overflow:hidden; padding:0; background:var(--tru-navy);
  box-shadow:0 14px 34px rgba(0,0,0,.18);
}
#booking #view_basket_wrapper .basket_tour_item {
  display:grid; grid-template-columns:minmax(10.5rem,28%) minmax(0,1fr);
  gap:1.25rem; padding:1.15rem;
}
#booking #view_basket_wrapper .basket_tour_item_left,
#booking #view_basket_wrapper .basket_tour_item_right { min-width:0; }
#booking #view_basket_wrapper .basket_tour_item_left { display:flex; flex-direction:column; gap:.75rem; }
#booking #view_basket_wrapper .tour_image {
  overflow:hidden; aspect-ratio:16/10; border-radius:8px; background:rgba(255,255,255,.06);
}

#booking #view_basket_wrapper .tour_description { color:var(--text-mute); font-size:.78rem; line-height:1.5; }
#booking #view_basket_wrapper .remove_tour {
  align-self:flex-start; color:var(--text-faint); font-family:"Montserrat",sans-serif;
  font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
#booking #view_basket_wrapper .remove_tour::before { color:var(--tru-pink); }
#booking #view_basket_wrapper .remove_tour:hover { color:var(--tru-pink); }
#booking #view_basket_wrapper .item_heading {
  margin:0 0 .7rem; color:#fff; font-family:"Montserrat",sans-serif;
  font-size:clamp(1rem,2vw,1.35rem); font-weight:800; line-height:1.2;
}
#booking #view_basket_wrapper .right_inner_top { display:flow-root; }
#booking #view_basket_wrapper .stops {
  display:flex; align-items:center; gap:.45rem; min-height:1.5rem; margin:0 0 .8rem;
  color:var(--text-mute); font-size:.82rem; line-height:1.3;
}
#booking #view_basket_wrapper .stops img,
#booking #view_basket_wrapper .selected_container img { width:1rem; height:1rem; object-fit:contain; }
#booking #view_basket_wrapper .tour_price_container {
  display:flex; align-items:center; justify-content:flex-end; gap:.55rem; margin:0 0 .8rem;
}
#booking #view_basket_wrapper .deposit_price { color:var(--text-faint); font-size:.7rem; }
#booking #view_basket_wrapper .tour_price {
  padding:.35rem .65rem; border:1px solid rgba(255,63,153,.55); border-radius:999px;
  color:var(--tru-pink); font-family:"Montserrat",sans-serif; font-size:.95rem; font-weight:800;
}
#booking #view_basket_wrapper .tour_date_selected {
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center;
  gap:.65rem; clear:both; margin:.4rem 0 1rem; padding:.8rem 0;
  border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1);
}
#booking #view_basket_wrapper .selected_container {
  display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto;
  column-gap:.45rem; align-items:center; width:auto; color:#fff; font-size:.8rem;
}
#booking #view_basket_wrapper .selected_container .heading {
  grid-column:1/-1; margin:0 0 .15rem; color:var(--text-faint);
  font-family:"Montserrat",sans-serif; font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
#booking #view_basket_wrapper .border-divider { width:1px; height:2.75rem; background:rgba(255,255,255,.12); }
#booking #view_basket_wrapper .edit_dates {
  grid-column:1/-1; justify-self:end; margin-top:-.35rem; color:var(--tru-pink);
  font-family:"Montserrat",sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
#booking #view_basket_wrapper .edit_dates:hover { text-decoration:underline; }
#booking #view_basket_wrapper .tour_pp_price {
  display:flex; justify-content:space-between; gap:1rem; width:100%; margin-top:.5rem;
  color:var(--text-faint); font-size:.72rem;
}
#booking #view_basket_wrapper .tour_pp_price .price { color:#fff; font-family:"Montserrat",sans-serif; font-weight:700; }

#booking #view_basket_wrapper .room_type,
#booking #view_basket_wrapper .srs_input_wrapper,
#booking #view_basket_wrapper .pre_tour_acc,
#booking #view_basket_wrapper .pretour_transport_wrapper,
#booking #view_basket_wrapper .posttour_transport_wrapper,
#booking #view_basket_wrapper .not-available {
  margin-top:.75rem; padding:.85rem; border:1px solid rgba(255,255,255,.1);
  border-radius:8px; background:rgba(255,255,255,.035);
}
#booking #view_basket_wrapper .room_type { color:var(--text-mute); font-size:.8rem; }
#booking #view_basket_wrapper .room_type b { color:#fff; }

#booking #view_basket_wrapper .srs_input_holder { display:inline-flex; align-items:center; gap:.5rem; margin:0; }
#booking #view_basket_wrapper .srs_input_holder label,
#booking #view_basket_wrapper .pretour_transport_wrapper label,
#booking #view_basket_wrapper .posttour_transport_wrapper label { color:#fff; font-size:.82rem; }
#booking #view_basket_wrapper input[type="checkbox"] { width:1rem; height:1rem; accent-color:var(--tru-pink); }
#booking #view_basket_wrapper .unit_price,
#booking #view_basket_wrapper .price_text { color:var(--tru-pink); font-family:"Montserrat",sans-serif; font-size:.78rem; font-weight:800; }

#booking #view_basket_wrapper .pre_tour_acc { overflow:visible; color:var(--text-mute); }
#booking #view_basket_wrapper .pre_tour_acc > div[id] { max-width:none !important; overflow:visible !important; }
#booking #view_basket_wrapper .pre-tour-checkbox,
#booking #view_basket_wrapper .post-tour-checkbox { display:flex; align-items:center; gap:.65rem; margin-bottom:.65rem; cursor:pointer; }
#booking #view_basket_wrapper .pre-tour-checkbox > div,
#booking #view_basket_wrapper .post-tour-checkbox > div {
  position:relative; width:1.15rem; height:1.15rem; flex-shrink:0; border:2px solid rgba(255,255,255,.3);
  border-radius:4px; background:transparent;
}

#booking #view_basket_wrapper .pre-tour-checkbox.checked > div::after,
#booking #view_basket_wrapper .post-tour-checkbox.checked > div::after {
  position:absolute; top:.05rem; left:.27rem; width:.32rem; height:.6rem; border:solid #fff;
  border-width:0 2px 2px 0; content:""; transform:rotate(45deg);
}
#booking #view_basket_wrapper .pre-tour-checkbox .subheading,
#booking #view_basket_wrapper .post-tour-checkbox .subheading {
  margin:0; color:#fff; font-family:"Montserrat",sans-serif; font-size:.78rem; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase;
}
#booking #view_basket_wrapper .intro_text,
#booking #view_basket_wrapper .not-available p { color:var(--text-mute); font-size:.76rem; line-height:1.5; }

#booking #view_basket_wrapper .number_container {
  display:grid; grid-template-columns:2rem 3rem 2rem minmax(0,1fr); align-items:center; gap:.4rem; min-height:2.25rem;
}
#booking #view_basket_wrapper .number_container .qty_adj { width:1.8rem; height:1.8rem; }
#booking #view_basket_wrapper .number_container .input_holder { justify-content:center; }
#booking #view_basket_wrapper .number_container input.number_input { width:3rem !important; }
#booking #view_basket_wrapper .number_container label { min-width:0; color:var(--text-mute); font-size:.78rem; line-height:1.35; }
#booking #view_basket_wrapper .pretour_price_holder {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid rgba(255,255,255,.1);
  color: var(--text-mute);
}

#booking #view_basket_wrapper .pretour_transport_wrapper > div:first-child,
#booking #view_basket_wrapper .posttour_transport_wrapper > div:first-child {
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
}
#booking #view_basket_wrapper .disclaimer { margin-top:.35rem; color:var(--text-faint); font-size:.7rem; line-height:1.45; }
#booking #view_basket_wrapper .not-available p + p { margin-top:.5rem; }

#booking #view_basket_wrapper .summary_wrapper { padding:1.1rem 1.15rem 1.2rem; background:rgba(9,33,62,.92); }
#booking #view_basket_wrapper .summary_wrapper .basket_tour_item_right { width:100%; }
#booking #view_basket_wrapper #summary_wrapper { margin:0; }
/* Shared component base. */
#booking #view_basket_wrapper #summary_wrapper .row,
#booking .co-summary-stage .co-review__trip .summary_wrapper .row,
#booking .co-summary-stage .co-review__cost .summary_wrapper .row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: var(--text-mute);
  font-size: .8rem;
}

#booking #view_basket_wrapper #summary_wrapper .row .price_text { flex-shrink:0; color:#fff; }
#booking #view_basket_wrapper .summary_wrapper .total_price {
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-top:.85rem;
  color:#fff; font-family:"Montserrat",sans-serif; font-size:.78rem; font-weight:700; text-transform:uppercase;
}
#booking #view_basket_wrapper .summary_wrapper .total_price .total { color:var(--tru-pink); font-size:1.25rem; font-weight:900; }
#booking #view_basket_wrapper .summary_wrapper .deposit_price {
  margin-left:auto; color:var(--text-mute); font-family:"Source Sans 3",sans-serif; font-size:.72rem; font-weight:400; text-transform:none;
}
#booking #view_basket_wrapper .summary_wrapper .submit {
  display:inline-flex; align-items:center; justify-content:center; width:100%; margin-top:1rem; padding:.9rem 1rem;
  border:0; border-radius:var(--radius); background:#facc15; color:var(--tru-navy);
  font-family:"Montserrat",sans-serif; font-size:.82rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; cursor:pointer;
}
#booking #view_basket_wrapper .summary_wrapper .submit:hover { background:#fde047; }

#booking .co-flow > button.submit.co-btn--yellow { margin-top: 1.5rem !important; }

@media (max-width:700px) {
  /* Shared component base. */
#booking #view_basket_wrapper > .qty_box,
#booking #view_basket_wrapper .pretour_transport_wrapper > div:first-child,
#booking #view_basket_wrapper .posttour_transport_wrapper > div:first-child,
#booking #view_basket_wrapper .srs_input_wrapper {
  align-items: flex-start;
  flex-direction: column;
}

  #booking #view_basket_wrapper .basket_tour_item { grid-template-columns:1fr; }
  #booking #view_basket_wrapper .basket_tour_item_left {
    display:grid; grid-template-columns:minmax(7.5rem,34%) minmax(0,1fr); align-items:start; gap:.75rem;
  }
  #booking #view_basket_wrapper .basket_tour_item_left .tour_image { grid-row:span 2; }
  #booking #view_basket_wrapper .basket_tour_item_left .remove_tour { grid-column:2; }
  #booking #view_basket_wrapper .tour_date_selected { grid-template-columns:1fr; gap:.55rem; }
  #booking #view_basket_wrapper .border-divider { width:100%; height:1px; }
  #booking #view_basket_wrapper .edit_dates { grid-column:auto; }
  
}

/* Keep helper copy from the existing number fields out of the compact addon rows. */
html { overflow-x: hidden; }
#booking.co-body { overflow-x: hidden; }

#booking #view_basket_wrapper .ap_help,
#booking #view_basket_wrapper .ap_help .help_inner { display: none !important; }

#booking #view_basket_wrapper #booking_promotion_row {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(255,255,255,.1);
}

#booking #view_basket_wrapper #booking_promotion_row input,
#booking .co-summary-stage #booking_promotion_row input,
#booking .co-flow #booking_promotion_row input {
  width: 100% !important;
  min-height: 2.5rem;
  padding: .55rem .7rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 7px;
  background: rgba(255,255,255,.05);
  color: #fff;
  font: 400 .85rem "Source Sans 3", sans-serif;
}

#booking #view_basket_wrapper #booking_promotion_row button,
#booking .co-summary-stage #booking_promotion_row button,
#booking .co-flow #booking_promotion_row button {
  min-height: 2.5rem;
  padding: .55rem .85rem;
  border: 1px solid var(--tru-pink);
  border-radius: 7px;
  color: var(--tru-pink);
  font: 700 .72rem "Montserrat", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (max-width: 480px) {
  #booking #view_basket_wrapper #booking_promotion_row { align-items: stretch; flex-direction: column; }
  #booking #view_basket_wrapper #booking_promotion_row button { width: 100%; }
}

/* ============================================================
   Review & Confirm stage

   This stage is still rendered by the existing summary template. Keep its
   field names and payment handlers intact while presenting the information
   in the same dark card language as the redesigned checkout.
   ============================================================ */
#booking .co-summary-stage .co-card__body { padding: 0; }
#booking .co-summary-stage .co-sub { margin-bottom: 1rem; }

#booking .co-summary-stage .traveller_summary, #booking .co-summary-stage .summary_wrapper, #booking .co-summary-stage .terms_wrapper, #booking .co-summary-stage .payment_options,
#booking .co-flow .traveller_summary, #booking .co-flow .summary_wrapper, #booking .co-flow .terms_wrapper, #booking .co-flow .payment_options {
  margin: 0 0 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  background: var(--tru-navy);
  color: #fff;
}

#booking .co-summary-stage .traveller_summary:empty { display: none; }
#booking .co-summary-stage .pax-inner { padding: .15rem 0 .9rem; }
/* Shared component base. */
#booking .co-summary-stage .pax-inner + .pax-inner,
#booking .co-flow .pax-inner + .pax-inner {
  padding-top: .9rem;
  border-top: 1px solid rgba(255,255,255,.1);
}

#booking .co-summary-stage .pax-inner:last-child { padding-bottom: 0; }
#booking .co-summary-stage .pax-inner > .heading, #booking .co-summary-stage .terms_wrapper > .heading,
#booking .co-flow .pax-inner > .heading, #booking .co-flow .terms_wrapper > .heading {
  margin: 0 0 .65rem;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
#booking .co-summary-stage .pax-inner > .heading { color: var(--tru-pink); }
#booking .co-summary-stage .pax-inner .content,
#booking .co-flow .pax-inner .content,
#booking .co-summary-stage .co-review__travellers .pax-inner .content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .35rem 1rem;
  color: var(--text-mute);
  font-size: .8rem;
  line-height: 1.45;
}
#booking .co-summary-stage .pax-inner .content > div { min-width: 0; }

#booking .co-summary-stage .summary_wrapper { padding-bottom: 1.1rem; }
#booking .co-summary-stage #summary_wrapper { margin: 0; }
#booking .co-summary-stage #summary_wrapper .tour_holder > .heading,
#booking .co-flow #summary_wrapper .tour_holder > .heading {
  margin: 0 0 .45rem;
  color: var(--text-faint);
  font-family: "Montserrat", sans-serif;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#booking .co-summary-stage #summary_wrapper .row,
#booking .co-flow #summary_wrapper .row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: .65rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: var(--text-mute);
  font-size: .82rem;
  line-height: 1.4;
}
#booking .co-summary-stage #summary_wrapper .row .item_name { min-width: 0; }
#booking .co-summary-stage #summary_wrapper .row .item_name span { color: var(--text-faint); }
#booking .co-summary-stage #summary_wrapper .row .price_text,
#booking .co-flow #summary_wrapper .row .price_text, #booking .co-flow #summary_wrapper .row .unit_price {
  flex-shrink: 0;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  white-space: nowrap;
}
#booking .co-summary-stage .final_price_row,
#booking .co-flow .final_price_row {
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .78rem;
  letter-spacing: .04em;
}

/* Shared component base. */
#booking .co-summary-stage .final_price_row .price_text,
#booking .co-flow .final_price_row .price_text,
#booking .co-summary-stage .co-review__cost .co-trip__total strong {
  color: var(--tru-pink);
  font-size: 1.3rem;
  font-weight: 900;
}

#booking .co-summary-stage #booking_promotion_row,
#booking .co-flow #booking_promotion_row {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(255,255,255,.1);
}

/* Shared component base. */
#booking .co-summary-stage #booking_promotion_row .input_holder,
#booking .co-flow #booking_promotion_row .input_holder {
  width: 100% !important;
  margin: 0;
}

#booking .co-summary-stage .terms_wrapper { padding-bottom: 1.05rem; }
#booking .co-summary-stage .terms_wrapper .content > br { display: none; }
/* Shared component base. */
#booking .co-summary-stage .terms_wrapper .content > .input_holder,
#booking .co-flow .terms_wrapper .content > .input_holder,
#booking .co-flow .co-terms .input_holder {
  display: block;
  width: 100% !important;
  margin: 0 0 .65rem;
}

#booking .co-summary-stage .terms_wrapper .content > .input_holder > .input_holder,
#booking .co-flow .terms_wrapper .content > .input_holder > .input_holder {
  display: block;
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
  line-height: 1.45 !important;
}
#booking .co-summary-stage .terms_wrapper label.ap_checkbox_label,
#booking .co-flow .terms_wrapper label.ap_checkbox_label {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  width: 100% !important;
  color: var(--text-mute);
  font-size: .82rem !important;
  line-height: 1.45;
}
#booking .co-summary-stage .terms_wrapper label.ap_checkbox_label input,
#booking .co-flow .terms_wrapper label.ap_checkbox_label input,
#booking .co-flow .co-terms label.ap_checkbox_label input {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  margin: .12rem 0 0;
  accent-color: var(--tru-pink);
}
/* Shared component base. */
#booking .co-summary-stage .terms_wrapper label.ap_checkbox_label a,
#booking .co-flow .terms_wrapper label.ap_checkbox_label a {
  color: #fff;
  text-decoration: underline;
}

#booking .co-summary-stage .terms_wrapper label.ap_checkbox_label a:hover { color: var(--tru-pink); }
/* Shared component base. */
#booking .co-summary-stage .terms_wrapper .req,
#booking .co-flow .terms_wrapper .req {
  color: var(--tru-pink);
  font-style: normal;
  font-weight: 800;
}

#booking .co-summary-stage .terms_wrapper .input_error:not(:empty) {
  display: block;
  margin-top: .35rem;
  color: #ff6b6b !important;
  font-size: .75rem;
}

#booking .co-summary-stage .payment_options { padding-bottom: 1.15rem; }

#booking .co-summary-stage .payment_option_holder .option_title,
#booking .co-flow .payment_option_holder .option_title {
  grid-area: title;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
#booking .co-summary-stage .payment_option_holder .option_price,
#booking .co-flow .payment_option_holder .option_price {
  grid-area: price;
  color: var(--tru-pink);
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 900;
  white-space: nowrap;
}

#booking .co-summary-stage .payment_option_holder .option_select .input_holder {
  margin: 0;
}

#booking .co-summary-stage .payment_option_holder .option_select .input_holder > .input_holder {
  float: none !important;
}

#booking .co-summary-stage .deposit_explanation,
#booking .co-flow .deposit_explanation {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .55rem;
  margin-top: .5rem;
}
#booking .co-summary-stage .deposit_icon,
#booking .co-flow .deposit_icon {
  min-height: 7rem;
  padding: .6rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  text-align: center;
}
#booking .co-summary-stage .deposit_icon .icon { display: none; }
/* Shared component base. */
#booking .co-summary-stage .deposit_icon .price,
#booking .co-flow .deposit_icon .price {
  color: var(--tru-pink);
  font-family: "Montserrat",sans-serif;
  font-weight: 900;
}

#booking .co-summary-stage .deposit_icon .heading,
#booking .co-flow .deposit_icon .heading,
#booking .co-summary-stage .payment_option_holder .deposit_icon .heading { margin-top: .4rem; color: #fff; font-size: .63rem; font-weight: 800; }
#booking .co-summary-stage .deposit_icon i,
#booking .co-flow .deposit_icon i,
#booking .co-summary-stage .payment_option_holder .deposit_icon i { display: block; margin-top: .25rem; color: var(--text-faint); font-size: .68rem; line-height: 1.3; }
/* Shared component base. */
#booking .co-summary-stage .payment_options > .submit,
#booking .co-flow .payment_options > .submit,
#booking .co-flow > .co-card > .co-card__body > .button.submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: .95rem 1rem;
  border: 0;
  border-radius: var(--radius);
  background: #facc15;
  color: var(--tru-navy);
  font-family: "Montserrat", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
#booking .co-summary-stage .payment_options > .submit,
#booking .co-flow .payment_options > .submit {
  margin-top: .4rem;
  font-size: .85rem;
  font-weight: 800;
}

#booking .co-summary-stage .payment_options > .submit:hover { background: #fde047; }

@media (max-width: 700px) {
  #booking .co-summary-stage .pax-inner .content { grid-template-columns: 1fr; }
  /* Shared component base. */
#booking .co-summary-stage #booking_promotion_row,
#booking .co-flow #booking_promotion_row {
  align-items: stretch;
  flex-direction: column;
}

  #booking .co-summary-stage #booking_promotion_row button { width: 100%; }
  
  #booking .co-summary-stage .deposit_explanation { grid-template-columns: 1fr; }
}

/* Compatibility selectors for the live summary markup. */
#booking .co-flow > .co-card > .co-card__body { padding: 0; }
#booking .co-flow .co-sub { margin-bottom: 1rem; }

#booking .co-flow .traveller_summary:empty { display: none; }
#booking .co-flow .pax-inner { padding: .15rem 0 .9rem; }

#booking .co-flow .pax-inner:last-child { padding-bottom: 0; }

#booking .co-flow .pax-inner > .heading { color: var(--tru-pink); }

#booking .co-flow .summary_wrapper { padding-bottom: 1.1rem; }
#booking .co-flow #summary_wrapper { margin: 0; }

#booking .co-flow #summary_wrapper .row .item_name { min-width: 0; }

#booking .co-flow .terms_wrapper .content > br { display: none; }

#booking .co-flow .payment_options { padding-bottom: 1.15rem; }
#booking .co-flow .payment_option_holder {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  grid-template-areas: "title price" "text select";
  align-items: start;
  gap: .35rem .8rem;
  margin-bottom: .65rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  background: rgba(255,255,255,.035);
}
#booking .co-flow .payment_option_holder:has(input:checked) { border-color: var(--tru-pink); background: rgba(255,63,153,.07); box-shadow: 0 0 0 1px rgba(255,63,153,.35); }

#booking .co-flow .payment_option_holder .option_text, #booking .co-flow .payment_options .payment_option_holder .option_text,
#booking .co-summary-stage .payment_option_holder .option_text { grid-area: text; color: var(--text-mute); font-size: .78rem; line-height: 1.45; }
#booking .co-flow .payment_option_holder .option_select { grid-area: select; align-self: end; }
#booking .co-flow .payment_option_holder .option_select .input_holder { margin: 0; padding: 0 !important; }
#booking .co-flow .payment_option_holder .option_select .input_holder > .input_holder { float: none !important; padding: 0 !important; line-height: 1 !important; }
#booking .co-flow .payment_option_holder .option_select label { display: block; line-height: 1; }
#booking .co-flow .payment_option_holder .option_select input,
#booking .co-summary-stage .payment_option_holder .option_select input { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--tru-pink); }

#booking .co-flow .deposit_icon .icon { display: none; }

#booking .co-flow .payment_options > .submit:hover { background: #fde047; }
@media (max-width: 700px) {
  #booking .co-flow .pax-inner .content { grid-template-columns: 1fr; }
  
  #booking .co-flow #booking_promotion_row button { width: 100%; }
  #booking .co-flow .payment_option_holder { grid-template-columns: 1fr auto; }
  #booking .co-flow .deposit_explanation { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  #booking .co-grid .co-flow,
  #booking .co-grid .co-flow > .co-card,
  #booking .co-grid .co-flow > .co-card > .co-card__body { width: 100%; min-width: 0; }
  #booking .co-grid .co-flow .summary_wrapper,
  #booking .co-grid .co-flow .traveller_summary,
  #booking .co-grid .co-flow .terms_wrapper,
  #booking .co-grid .co-flow .payment_options { box-sizing: border-box; max-width: 100%; }
  #booking .co-flow #summary_wrapper .row { flex-wrap: wrap; }
}

#booking .co-flow .traveller_summary,
#booking .co-flow .summary_wrapper,
#booking .co-flow .terms_wrapper,
#booking .co-flow .payment_options { overflow-wrap: anywhere; }
#booking .co-flow > .co-card > .co-card__body > .button.submit {
  margin: .1rem 0 1rem;
  font-size: .9rem;
  font-weight: 700;
}

#booking .co-flow > .co-card > .co-card__body > .button.submit:hover { background: #fde047; }

/* Add-ons stage: the established basket controls sit inside the prototype card
   layout so their existing names, data attributes and handlers remain intact. */
#booking #view_basket_wrapper .co-trip {
  overflow: visible;
  background: var(--tru-navy);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  box-shadow: 0 5px 25px -5px rgba(0,0,0,.3);
}
#booking #view_basket_wrapper .co-trip__top {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
#booking #view_basket_wrapper .co-trip__img {
  position: relative;
  display: block;
  width: auto;
  min-height: 250px;
  aspect-ratio: auto;
  background: #000;
}

#booking #view_basket_wrapper .co-trip__img .tour_image img { object-fit: cover; }
#booking #view_basket_wrapper .co-trip__img .tour_description,
#booking #view_basket_wrapper .co-trip__img .remove_tour { display: none; }
#booking #view_basket_wrapper .co-trip__booking {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.15rem 1.3rem;
}
#booking #view_basket_wrapper .co-trip__info { padding: 1.15rem 1.3rem; }
#booking #view_basket_wrapper .co-trip__booking > .trip_meta { display: none; }
#booking #view_basket_wrapper .co-trip__booking > div[style*="clear"] { display: none !important; }
#booking #view_basket_wrapper .co-trip__info .item_heading {
  margin: 0 0 .65rem;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
}
#booking #view_basket_wrapper .co-trip__info .stops { margin-bottom: .7rem; }
#booking #view_basket_wrapper .co-trip__info .tripcard__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  margin: .4rem 0 0;
  color: var(--text-mute);
  font-size: .8rem;
}
#booking #view_basket_wrapper .co-trip__info .tripcard__facts span span { color: var(--tru-pink); }
#booking #view_basket_wrapper .co-trip__experiences > summary { list-style: none; }
#booking #view_basket_wrapper .co-trip__experiences > summary::-webkit-details-marker { display: none; }
#booking #view_basket_wrapper .co-trip__experiences[open] > summary svg { transform: rotate(180deg); }
#booking #view_basket_wrapper .co-trip__experiences > summary:focus-visible {
  outline: 2px solid var(--tru-pink);
  outline-offset: 4px;
}
#booking #view_basket_wrapper .co-trip__booking > .co-trip__cols { order: 1; }
#booking #view_basket_wrapper .co-trip__booking > .co-trip__room,
#booking #view_basket_wrapper .co-trip__booking > .pre_tour_acc,
#booking #view_basket_wrapper .co-trip__booking > .pretour_transport_wrapper,
#booking #view_basket_wrapper .co-trip__booking > .posttour_transport_wrapper,
#booking #view_basket_wrapper .co-trip__booking > .not-available { flex-shrink: 0; }
#booking #view_basket_wrapper .co-trip__booking > .srs_input_wrapper { order: 2; }
#booking #view_basket_wrapper .co-trip__booking > .co-trip__room { order: 2; }
#booking #view_basket_wrapper .co-trip__booking > .co-trip__addons_section { order: 3; }
#booking #view_basket_wrapper .co-trip__booking > .pre_tour_acc:not(.post_tour) { order: 4; }
#booking #view_basket_wrapper .co-trip__booking > .pre_tour_acc.post_tour { order: 5; }
#booking #view_basket_wrapper .co-trip__booking > .pretour_transport_wrapper { order: 6; }
#booking #view_basket_wrapper .co-trip__booking > .posttour_transport_wrapper { order: 7; }
#booking #view_basket_wrapper .co-trip__booking > .not-available { order: 8; }

#booking #view_basket_wrapper .co-trip__room,
#booking #view_basket_wrapper .co-trip__prototype-cost {
  margin-top: .85rem;
  padding: .9rem 0 .2rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
#booking #view_basket_wrapper .co-trip__roomopts { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
#booking #view_basket_wrapper .co-trip__roomopt { margin: 0; min-width: 0; }
#booking #view_basket_wrapper .srs_input_wrapper .srs_input_holder { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
#booking #view_basket_wrapper .srs_input_wrapper .unit_price { display: none; }
#booking #view_basket_wrapper .srs_input_wrapper:has(input:checked) { border-color: var(--tru-pink); background: rgba(255,63,153,.07); }
#booking #view_basket_wrapper .srs_input_wrapper:has(input:checked) .co-roomdot { border-color: var(--tru-pink); }

#booking #view_basket_wrapper .co-roomcheck {
  display: inline-flex;
  width: 1.05rem;
  height: 1.05rem;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid var(--tru-pink);
  color: var(--tru-pink);
  font-weight: 900;
}

/* Shared component base. */
#booking #view_basket_wrapper .co-trip__roomopt:not(.is-active) .co-roomcheck,
#booking #view_basket_wrapper .co-trip__roomopts:has(.srs_input_wrapper input:checked) > .co-trip__roomopt.is-active:not(.srs_input_wrapper) .co-roomcheck {
  border-color: rgba(255,255,255,.3);
  color: transparent;
}

#booking #view_basket_wrapper .co-trip__roomopts:has(.srs_input_wrapper input:checked) > .co-trip__roomopt.is-active:not(.srs_input_wrapper) {
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.03) !important;
}

#booking #view_basket_wrapper .co-trip__addons_section > .co-trip__sec-h { margin: 0 0 .65rem; }
#booking #view_basket_wrapper .co-trip__booking > .pre_tour_acc:not(.post_tour)::before,
#booking #view_basket_wrapper .co-trip__booking > .pretour_transport_wrapper:first-of-type::before {
  margin: .85rem 0 .65rem;
  color: #fff;
  font: 900 .92rem "Montserrat", sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
}

#booking #view_basket_wrapper .co-trip__booking > .pre_tour_acc:not(.post_tour)::before,
#booking #view_basket_wrapper .co-trip__booking > .pretour_transport_wrapper:first-of-type::before { display: none; content: none; }
#booking #view_basket_wrapper .co-trip__addons { display: flex; flex-direction: column; gap: .5rem; }
#booking #view_basket_wrapper .pre_tour_acc,
#booking #view_basket_wrapper .pretour_transport_wrapper,
#booking #view_basket_wrapper .posttour_transport_wrapper {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
#booking #view_basket_wrapper .pretour_transport_wrapper:has(input[type="checkbox"]:checked),
#booking #view_basket_wrapper .posttour_transport_wrapper:has(input[type="checkbox"]:checked) {
  border-color: var(--tru-pink);
}
#booking #view_basket_wrapper .pre_tour_acc > div:first-child { max-width: none !important; }
#booking #view_basket_wrapper .pre-tour-checkbox.co-addon,
#booking #view_basket_wrapper .post-tour-checkbox.co-addon {
  cursor: pointer;
}

#booking #view_basket_wrapper .pre-tour-checkbox.co-addon.checked .co-addon__btn, #booking #view_basket_wrapper .post-tour-checkbox.co-addon.checked .co-addon__btn,
#booking #view_basket_wrapper .addon_control:has(input:checked) .ap_input_label {
  border-color: var(--tru-green);
  background: transparent;
  color: var(--tru-green);
  font-size: 0;
}
/* Shared component base. */
#booking #view_basket_wrapper .pre-tour-checkbox.co-addon.checked .co-addon__btn::after,
#booking #view_basket_wrapper .post-tour-checkbox.co-addon.checked .co-addon__btn::after,
#booking #view_basket_wrapper .addon_control:has(input:checked) .ap_input_label::after,
#booking #view_basket_wrapper .addon_control:has(input:checked) .ap_checkbox_label::after {
  content: "✓";
  font-size: .9rem;
}

#booking #view_basket_wrapper .pretour_accom_outer,
#booking #view_basket_wrapper .posttour_accom_outer { display: none; }
#booking #view_basket_wrapper .pre_tour_acc:has(.pre-tour-checkbox.checked) .pretour_accom_outer,
#booking #view_basket_wrapper .pre_tour_acc:has(.post-tour-checkbox.checked) .posttour_accom_outer { display: block; }
#booking #view_basket_wrapper .pretour_transport_wrapper,
#booking #view_basket_wrapper .posttour_transport_wrapper { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .85rem; }
#booking #view_basket_wrapper .pretour_transport_wrapper .co-addon__ico,
#booking #view_basket_wrapper .posttour_transport_wrapper .co-addon__ico { display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; flex-shrink: 0; border-radius: 8px; background: rgba(255,255,255,.06); }

#booking #view_basket_wrapper .pretour_transport_wrapper .co-addon__right,
#booking #view_basket_wrapper .posttour_transport_wrapper .co-addon__right { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; margin-left: auto; }
#booking #view_basket_wrapper .addon_price_source,
#booking #view_basket_wrapper .pretour_transport_wrapper .unit_price,
#booking #view_basket_wrapper .posttour_transport_wrapper .unit_price { display: none; }
#booking #view_basket_wrapper .addon_control .input_holder { margin: 0; }
#booking #view_basket_wrapper .addon_control .ap_input_label { display: inline-flex; align-items: center; justify-content: center; min-width: 3.5rem; padding: .4rem .75rem; border: 1px solid var(--tru-pink); border-radius: 8px; background: var(--tru-pink); color: #fff; font: 700 .72rem "Montserrat",sans-serif; text-transform: uppercase; cursor: pointer; }

#booking .summary_bridge { display: none !important; }
#booking #view_basket_wrapper .co-trip__prototype-cost { order: 9; }
#booking #view_basket_wrapper .co-trip__prototype-cost .co-trip__total { border-top: 1px solid rgba(255,255,255,.12); }
#booking #view_basket_wrapper > .submit { order: 10; }

/* Keep the add-on heading and cards together. The existing controls are now
   grouped inside this wrapper so the prototype card styles apply consistently. */
#booking #view_basket_wrapper .co-trip__booking > .co-trip__addons {
  order: 3;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin-top: .85rem;
  padding: .9rem 0 .2rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
#booking #view_basket_wrapper .co-trip__addons > .co-trip__sec-h { margin: 0; }

#booking #view_basket_wrapper .co-trip__addons_list > .pre_tour_acc { order: 1; }
#booking #view_basket_wrapper .co-trip__addons_list > .pre_tour_acc.post_tour { order: 2; }
#booking #view_basket_wrapper .co-trip__addons_list > .pretour_transport_wrapper { order: 3; }
#booking #view_basket_wrapper .co-trip__addons_list > .posttour_transport_wrapper { order: 4; }
#booking #view_basket_wrapper .co-trip__addons_list > .not-available { order: 5; }
#booking #view_basket_wrapper .co-trip__addons_list .co-addon { margin-bottom: 0; }

@media (max-width: 639px) {
  #booking #view_basket_wrapper .co-trip__top { grid-template-columns: 1fr; }
  #booking #view_basket_wrapper .co-trip__img { min-height: 190px; aspect-ratio: 16 / 10; }
  #booking #view_basket_wrapper .co-trip__roomopts { grid-template-columns: 1fr; }
}

/* Keep every add-on as a complete, readable row. The existing accommodation
   wrapper is retained for its expand/collapse hooks, while the visible row
   follows the prototype card treatment. */
#booking #view_basket_wrapper .pre-tour-checkbox.co-addon,
#booking #view_basket_wrapper .post-tour-checkbox.co-addon {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: .9rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  box-shadow: none;
}
#booking #view_basket_wrapper .pre-tour-checkbox.co-addon.checked,
#booking #view_basket_wrapper .post-tour-checkbox.co-addon.checked {
  border-color: var(--tru-pink);
}
#booking #view_basket_wrapper .pretour_transport_wrapper,
#booking #view_basket_wrapper .posttour_transport_wrapper {
  box-sizing: border-box;
  width: 100%;
  margin: .5rem 0 0;
  padding: .9rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  box-shadow: none;
}

/* On this template the sidebar is emitted beside, rather than inside,
   the grid element. Make both pieces participate in the intended desktop
   two-column layout without changing the mobile flow. */
@media (min-width: 1024px) {
  #booking .co-main:has(> .co-summary--desk) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    align-items: start;
    gap: 2rem;
  }
  #booking .co-main:has(> .co-summary--desk) > .co-grid { display: contents; }
  #booking .co-main:has(> .co-summary--desk) > .co-grid > .co-flow {
    grid-column: 1;
    min-width: 0;
  }
  #booking .co-main:has(> .co-summary--desk) > .co-summary--desk {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    width: auto;
  }
}

@media (max-width: 1023px) {
  
  #booking .co-main:has(> .co-summary--desk) > .co-grid { display: block; }
}

/* Rooming uses the same circular radio treatment for the included shared
   option as it does for the own-room option. */
#booking #view_basket_wrapper .co-roomcheck {
  position: relative;
  border-radius: 999px;
  font-size: 0;
}
#booking #view_basket_wrapper .co-trip__roomopt.is-active .co-roomcheck {
  border-color: var(--tru-pink);
  color: transparent;
}

/* The existing input helper renders transfer controls as .ap_checkbox_label;
   give them the same button treatment as the visible accommodation Add
   controls above. */
#booking #view_basket_wrapper .addon_control .ap_checkbox_label {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: .4rem .9rem;
  border: 1px solid var(--tru-pink);
  border-radius: 8px;
  background: var(--tru-pink);
  color: #fff;
  font: 700 .72rem "Montserrat", sans-serif !important;
  letter-spacing: .05em;
  text-transform: uppercase;
}

#booking #view_basket_wrapper .addon_control input {
  position: absolute;
  opacity: 0;
}
#booking #view_basket_wrapper .addon_control:has(input:checked) .ap_checkbox_label {
  border-color: var(--tru-green);
  background: transparent;
  color: var(--tru-green);
  font-size: 0 !important;
}

/* Match the prototype's compact addon scale and keep both existing and visible
   Add controls the same size in their default and selected states. */
#booking #view_basket_wrapper .co-addon__price {
  font-size: .8rem;
}
#booking #view_basket_wrapper .co-addon__btn,
#booking #view_basket_wrapper .addon_control .ap_checkbox_label {
  box-sizing: border-box;
  min-width: 3.75rem;
  height: 2rem;
  line-height: 1;
  cursor: pointer !important;
}
#booking #view_basket_wrapper .pre-tour-checkbox.co-addon .co-addon__btn,
#booking #view_basket_wrapper .post-tour-checkbox.co-addon .co-addon__btn {
  pointer-events: auto;
}
#booking #view_basket_wrapper .co-addon__btn.is-on,
#booking #view_basket_wrapper .addon_control:has(input:checked) .ap_checkbox_label {
  cursor: pointer !important;
}
/* Selected hotel buttons and helper-rendered transfer labels share the prototype's circular tick. */
#booking #view_basket_wrapper .pre-tour-checkbox.checked .co-addon__btn,
#booking #view_basket_wrapper .post-tour-checkbox.checked .co-addon__btn,
#booking #view_basket_wrapper .addon_control:has(input:checked) .ap_checkbox_label {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.75rem;
  width: 1.75rem;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border-radius: 50%;
  line-height: 1;
}
/* The shared form submit handler fades descendant buttons while the request is pending. Transfer Add controls are labels from input(), so mirror that state here. */
#booking form#view_cart[data-been-submitted="true"] #view_basket_wrapper .addon_control .ap_checkbox_label {
  opacity: 0.1;
}

@media (min-width: 1024px) {
  #booking.co-body { overflow-x: visible; }
  #booking .co-main:has(> .co-summary--desk) > .co-summary--desk {
    position: sticky;
    top: 118px;
    align-self: start;
  }
}

/* The transfer checkbox helper nests a second .input_holder around the
   label and adds inline padding to it. Remove that helper spacing so the
   transfer control sits flush with the hotel Add button. */
#booking #view_basket_wrapper .addon_control,
#booking #view_basket_wrapper .addon_control > .input_holder,
#booking #view_basket_wrapper .addon_control .input_holder .input_holder {
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
#booking #view_basket_wrapper .addon_control > .input_holder {
  display: inline-flex !important;
  width: auto !important;
  align-items: center;
}
#booking #view_basket_wrapper .addon_control .input_error {
  display: none !important;
}
#booking #view_basket_wrapper .pretour_transport_wrapper,
#booking #view_basket_wrapper .posttour_transport_wrapper {
  cursor: pointer;
}
#booking #view_basket_wrapper .co-trip__prototype-cost .co-trip__sec-h {
  margin: 0 0 .45rem;
}
#booking #view_basket_wrapper .co-trip__prototype-cost .co-trip__costrow {
  padding: .16rem 0;
  line-height: 1.35;
}
#booking #view_basket_wrapper .co-trip__prototype-cost .co-trip__total {
  margin-top: .55rem;
  padding: .65rem 0 .05rem;
}

/* Summary stage review cards. The server keeps rendering the established
   passenger and basket helpers; these rules place their output into the
   prototype's review-card hierarchy without changing the submitted fields. */
#booking .co-summary-stage .co-review {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin: 1rem 0 1.5rem;
}
#booking .co-summary-stage .co-rev {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  background: var(--tru-navy);
}
#booking .co-summary-stage .co-rev__head {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: .9rem 1rem;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  text-align: left;
}
#booking .co-summary-stage .co-rev__head--static { cursor: default; }
#booking .co-summary-stage .co-rev__title {
  flex-shrink: 0;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
#booking .co-summary-stage .co-rev__sub {
  flex: 1;
  overflow: hidden;
  color: var(--text-mute);
  font-size: .78rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#booking .co-summary-stage .co-rev__chev {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  color: var(--text-mute);
  transition: transform .25s;
}
#booking .co-summary-stage .co-rev.is-open .co-rev__chev { transform: rotate(180deg); }
#booking .co-summary-stage .co-rev__body {
  display: none;
  padding: .2rem 1rem 1rem;
}
#booking .co-summary-stage .co-rev.is-open .co-rev__body { display: block; }
#booking .co-summary-stage .co-rev--static .co-rev__body { padding-top: .6rem; }
#booking .co-summary-stage .co-rev__edits {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .9rem;
}
#booking .co-summary-stage .co-rev__edit {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: .4rem .9rem;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: none;
  color: #fff;
  font: 700 .68rem "Montserrat", sans-serif;
  letter-spacing: .04em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

/* Traveller recap */
#booking .co-summary-stage .co-review__travellers,
#booking .co-summary-stage .co-review__trip,
#booking .co-summary-stage .co-review__cost { margin: 0; padding: 0; border: 0; background: none; }
#booking .co-summary-stage .co-review__travellers .pax-inner {
  padding: .65rem 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
#booking .co-summary-stage .co-review__travellers .pax-inner:first-child { padding-top: 0; border-top: 0; }
#booking .co-summary-stage .co-review__travellers .pax-inner:last-child { padding-bottom: 0; }
#booking .co-summary-stage .co-review__travellers .pax-inner > .heading {
  margin: 0 0 .45rem;
  color: #fff;
  font: 800 .75rem "Montserrat", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Trip recap and live cost breakdown use the established basket helper rows. */
#booking .co-summary-stage .co-review__trip .summary_wrapper,
#booking .co-summary-stage .co-review__cost .summary_wrapper { margin: 0; }
#booking .co-summary-stage .co-review__trip .summary_wrapper .heading,
#booking .co-summary-stage .co-review__cost .summary_wrapper .heading {
  margin: .65rem 0 .35rem;
  color: var(--text-mute);
  font: 800 .68rem "Montserrat", sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
}
#booking .co-summary-stage .co-review__trip .summary_wrapper > .tour_holder:first-child > .heading,
#booking .co-summary-stage .co-review__cost .summary_wrapper > .tour_holder:first-child > .heading { margin-top: 0; }
#booking .co-summary-stage .co-review__trip .summary_wrapper .row,
#booking .co-summary-stage .co-review__cost .summary_wrapper .row {
  align-items: flex-start;
  line-height: 1.4;
}

#booking .co-summary-stage .co-review__trip .summary_wrapper .row .item_name,
#booking .co-summary-stage .co-review__cost .summary_wrapper .row .item_name { min-width: 0; }
#booking .co-summary-stage .co-review__trip .summary_wrapper .row .price_text,
#booking .co-summary-stage .co-review__cost .summary_wrapper .row .price_text {
  flex-shrink: 0;
  color: #fff;
  font: 800 .8rem "Montserrat", sans-serif;
  white-space: nowrap;
}
#booking .co-summary-stage .co-review__trip .summary_wrapper .row .item_name span,
#booking .co-summary-stage .co-review__cost .summary_wrapper .row .item_name span { color: var(--text-faint); }
#booking .co-summary-stage .co-review__cost .summary_wrapper #booking_promotion_row { margin-top: .7rem; }
#booking .co-summary-stage .co-review__cost .co-trip__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .85rem;
  padding: .85rem 0 .05rem;
  border-top: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font: 800 .78rem "Montserrat", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Terms keep the input() helper's names/validation hooks, but follow the
   prototype's compact checklist treatment. */

#booking .co-flow .co-terms .summary_terms_holder { margin-bottom: 0; }
#booking .co-flow .co-terms > br,
#booking .co-flow .co-terms .input_holder > br { display: none; }
#booking .co-flow .co-terms .input_holder > .input_holder { float: none !important; width: 100% !important; padding: 0 !important; line-height: 1.45 !important; }
#booking .co-flow .co-terms label.ap_checkbox_label { display: flex; align-items: flex-start; gap: .55rem; width: 100% !important; color: #d1d5db; font-size: .82rem !important; line-height: 1.45; }

#booking .co-flow .co-terms a:hover { color: var(--tru-pink); }

/* Payment choices retain the server's checkbox fields and become the
   prototype's radio-style option cards. */
#booking .co-summary-stage .payment_options {
  margin: 0;
  padding: 0 0 1rem;
  border: 0;
  background: none;
}
/* Shared component base. */
#booking .co-summary-stage .co-pay-h,
#booking .co-flow .co-credit__txt strong {
  color: #fff;
  font: 800 .9rem "Montserrat", sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
}
#booking .co-summary-stage .co-pay-h {
  margin: 0 0 .7rem;
}

/* Shared component base. */
#booking .co-summary-stage .payment_option_holder,
#booking .co-flow .payment_options .payment_option_holder {
  display: grid;
  grid-template-areas: "select title price" "select text price";
  align-items: center;
  gap: .25rem .75rem;
  margin-bottom: .6rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  background: var(--tru-navy);
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
#booking .co-summary-stage .payment_option_holder {
  grid-template-columns: auto minmax(0,1fr) auto;
}

/* Shared component base. */
#booking .co-summary-stage .payment_option_holder:has(input:checked),
#booking .co-flow .payment_options .payment_option_holder:has(input:checked) {
  border-color: var(--tru-pink);
  background: rgba(255,63,153,.07);
  box-shadow: 0 0 0 1px var(--tru-pink);
}

#booking .co-summary-stage .payment_option_holder .option_select { grid-area: select; align-self: center; }
#booking .co-summary-stage .payment_option_holder .option_title,
#booking .co-flow .payment_options .payment_option_holder .option_title { grid-area: title; color: #fff; font: 800 1.05rem "Montserrat", sans-serif; letter-spacing: .02em; text-transform: uppercase; }
#booking .co-summary-stage .payment_option_holder .option_price { grid-area: price; color: #fff; font: 800 1.05rem "Montserrat", sans-serif; white-space: nowrap; }
#booking .co-summary-stage .payment_option_holder:has(input:checked) .option_price { color: var(--tru-pink); }

#booking .co-summary-stage .payment_option_holder .option_select .input_holder,
#booking .co-summary-stage .payment_option_holder .option_select .input_holder > .input_holder { margin: 0 !important; padding: 0 !important; line-height: 1 !important; }
#booking .co-summary-stage .payment_option_holder .option_select label { display: block; line-height: 1; }

/* Shared component base. */
#booking .co-summary-stage .payment_option_holder .deposit_explanation,
#booking .co-flow .payment_options .payment_option_holder .deposit_explanation {
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .55rem;
  margin-top: .5rem;
}

#booking .co-summary-stage .payment_option_holder .deposit_icon { min-height: 6rem; padding: .6rem; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.035); text-align: center; }
#booking .co-summary-stage .payment_option_holder .deposit_icon .icon { display: none; }
#booking .co-summary-stage .payment_option_holder .deposit_icon .price { color: var(--tru-pink); font: 900 1rem "Montserrat", sans-serif; }

@media (max-width: 700px) {
  #booking .co-summary-stage .co-review__travellers .pax-inner .content { grid-template-columns: 1fr; }
  #booking .co-summary-stage .payment_option_holder { grid-template-columns: auto minmax(0,1fr); grid-template-areas: "select title" "select price" "select text"; }
  #booking .co-summary-stage .payment_option_holder .option_price { justify-self: start; }
  #booking .co-summary-stage .payment_option_holder .deposit_explanation { grid-template-columns: 1fr; }
}

/* The payment helper emits inline-styled nested holders. Keep the live
   controls accessible, but reset those wrappers into the prototype's
   left-aligned radio column. */
#booking .co-flow .payment_options .payment_option_holder {
  grid-template-columns: 1.35rem minmax(0, 1fr) auto;
}

#booking .co-flow .payment_options .payment_option_holder .option_select {
  grid-area: select;
  align-self: center;
  width: 1.35rem !important;
  min-width: 1.35rem !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  position: static !important;
}
#booking .co-flow .payment_options .payment_option_holder .option_select > .input_holder,
#booking .co-flow .payment_options .payment_option_holder .option_select > .input_holder > .input_holder {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 1.35rem !important;
  min-width: 1.35rem !important;
  height: 1.35rem !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  line-height: 1 !important;
}
#booking .co-flow .payment_options .payment_option_holder .option_select .input_error { display: none !important; }
#booking .co-flow .payment_options .payment_option_holder .option_select label.ap_checkbox_label {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 1.35rem !important;
  height: 1.35rem !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  position: relative;
  font-size: 0 !important;
  line-height: 1 !important;
}
#booking .co-flow .payment_options .payment_option_holder .option_select input {
  appearance: none;
  -webkit-appearance: none;
  display: block !important;
  width: 1.2rem !important;
  height: 1.2rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: static !important;
}
#booking .co-flow .payment_options .payment_option_holder .option_select input:checked { border-color: var(--tru-pink); }
#booking .co-flow .payment_options .payment_option_holder .option_select label.ap_checkbox_label:has(input:checked)::after {
  content: "";
  position: absolute;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--tru-pink);
  pointer-events: none;
}
/* Shared component base. */
#booking .co-flow .payment_options .payment_option_holder .option_select input:focus-visible,
#booking .co-request-dialog :is(input,button):focus-visible,
#booking .co-pay-change:focus-visible {
  outline: 2px solid var(--tru-pink);
  outline-offset: 3px;
}

#booking .co-flow .payment_options .payment_option_holder .option_price { grid-area: price; align-self: center; color: #fff; font: 800 1.05rem "Montserrat", sans-serif; white-space: nowrap; }
#booking .co-flow .payment_options .payment_option_holder:has(input:checked) .option_price { color: var(--tru-pink); }

#booking .co-flow .co-credit {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 0 0 1.1rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(107,212,149,.4);
  border-radius: var(--radius);
  background: rgba(107,212,149,.08);
}
#booking .co-flow .co-credit.is-applied { border-color: rgba(107,212,149,.6); background: rgba(107,212,149,.12); }
#booking .co-flow .co-credit__ico { display: flex; align-items: center; justify-content: center; flex: 0 0 2.1rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: rgba(107,212,149,.18); color: var(--tru-green); }
#booking .co-flow .co-credit__ico svg { width: 1.15rem; height: 1.15rem; }

#booking .co-flow .co-credit__txt span { margin-top: .1rem; color: #9ca3af; font-size: .78rem; }
#booking .co-flow .co-credit__btn { flex-shrink: 0; padding: .45rem 1.1rem; border: 1px solid var(--tru-green); border-radius: 999px; background: var(--tru-green); color: var(--tru-navy); font: 700 .72rem "Montserrat", sans-serif; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
#booking .co-flow .co-credit__btn:hover { background: #87e0aa; }
#booking .co-flow .co-credit.is-applied .co-credit__btn { background: transparent; color: var(--tru-green); }

@media (max-width: 700px) {
  #booking .co-flow .payment_options .payment_option_holder { grid-template-columns: 1.35rem minmax(0,1fr) auto; grid-template-areas: "select title price" "select text price"; }
  #booking .co-flow .payment_options .payment_option_holder .option_price { justify-self: end; }
  #booking .co-flow .payment_options .payment_option_holder .deposit_explanation { grid-template-columns: 1fr; }
  #booking .co-flow .co-credit { align-items: flex-start; }
}

/* Every checkout stage uses the same live sidebar markup at both breakpoints.
   Mobile only changes its position and exposes the existing contents below a
   compact prototype-style disclosure bar. */
#booking .co-summary--desk .co-summary__mobile-toggle { display: none; }
@media (max-width: 1023px) {
  #booking .co-grid:has(> .co-summary--desk) { row-gap: 1.25rem; }
  #booking .co-grid:has(> .co-summary--desk) > .co-flow { grid-row: 2; }
  /* Shared component base. */
#booking .co-grid > .co-summary--desk,
#booking .co-main:has(> .co-summary--desk) > .co-summary--desk {
  display: block !important;
  position: static;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  overflow: hidden;
}
#booking .co-grid > .co-summary--desk {
  grid-row: 1;
}

  #booking .co-main:has(> .co-summary--desk) {
    display: flex;
    flex-direction: column;
  }
  #booking .co-main:has(> .co-summary--desk) > .co-summary--desk {
  order: -1;
  width: auto;
  margin-bottom: 1.25rem;
}

  #booking .co-main:has(> .co-summary--desk) > .co-grid { order: 0; }
  #booking .co-summary--desk .co-summary__mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .9rem 1.1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
  }
  #booking .co-summary--desk .co-summary__mobile-label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font: 800 .78rem "Montserrat", sans-serif;
    letter-spacing: .03em;
    text-transform: uppercase;
  }
  #booking .co-summary--desk .co-summary__mobile-label > svg:first-child { width: 1rem; height: 1rem; color: var(--tru-pink); }
  #booking .co-summary--desk .co-summary__mobile-chevron { width: 1rem; height: 1rem; color: var(--text-mute); transition: transform .2s; }
  #booking .co-summary--desk.is-open .co-summary__mobile-chevron { transform: rotate(180deg); }
  #booking .co-summary--desk .co-summary__mobile-total { color: var(--tru-pink); font: 900 .95rem "Montserrat", sans-serif; }
  #booking .co-summary--desk:not(.is-open) .co-summary__mobile-total { display: none; }
  #booking .co-summary--desk > .co-summary__inner {
    display: none;
    margin: 0;
    padding: 0 1.1rem 1.1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  #booking .co-summary--desk.is-open > .co-summary__inner { display: block; }
  #booking .co-summary--desk > .co-summary__inner > .co-summary__h,
  #booking .co-summary--desk > .co-summary__inner > .co-pax--desk,
  #booking .co-summary--desk > .co-summary__inner > .co-trust { display: none !important; }
}

/* Summary recaps are deliberately built from the live basket above rather
   than exposing the legacy summary wrapper. These selectors also cover the
   CMS parser's live DOM, where the form attribute is not an ancestor of every
   emitted summary node. */
#booking .co-flow .co-review__travellers,
#booking .co-flow .co-review__trip,
#booking .co-flow .co-review__cost,
#booking .co-flow .co-review__cost .co-summary__rows {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
#booking .co-flow .co-review__travellers .co-revtrav,
#booking .co-flow .co-review__trip .co-revtrip { margin: 0; }
#booking .co-flow .co-review__travellers .co-revtrav:first-child,
#booking .co-flow .co-review__trip .co-revtrip:first-child { padding-top: 0; border-top: 0; }
#booking .co-flow .co-review__travellers .co-revtrav__n,
#booking .co-flow .co-review__trip .co-revtrip__t { color: #fff; }
#booking .co-flow .co-review__travellers .co-revtrav__meta { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin-top: .4rem; }
#booking .co-flow .co-review__travellers .co-revtrav__d { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-mute); font-size: .76rem; }
#booking .co-flow .co-review__trip .co-revtrip__m { color: var(--text-mute); }
#booking .co-flow .co-review__trip .co-revtrip__x { margin: .45rem 0 0; padding: 0; list-style: none; }
#booking .co-flow .co-review__trip .co-revtrip__x li { display: flex; justify-content: space-between; gap: .75rem; padding: .2rem 0; color: #d1d5db; font-size: .77rem; }
#booking .co-flow .co-review__trip .co-revtrip__x li span:last-child { flex-shrink: 0; color: #fff; font-weight: 700; white-space: nowrap; }
#booking .co-flow .co-review__trip .co-revtrip__accommodation { margin-top: .25rem; color: #9ca3af; line-height: 1.5; }

#booking .co-flow .co-cost-list { display: flex; flex-direction: column; gap: 0; width: 100%; }
#booking .co-flow .co-costrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .18rem 0; border: 0; color: var(--text-mute); font-size: .88rem; line-height: 1.4; }
#booking .co-flow .co-costrow span { min-width: 0; }
#booking .co-flow .co-costrow strong { flex-shrink: 0; color: #d1d5db; font: 600 .88rem "Source Sans 3", sans-serif; white-space: nowrap; }

#booking .co-flow .co-costrow--promo span { color: var(--tru-pink); }
#booking .co-flow .co-costrow--credit span { color: var(--text-mute); }
#booking .co-flow .co-costrow--credit strong { color: var(--tru-green); }
#booking .co-flow .co-cost-promo { display: flex; align-items: center; gap: .5rem; margin: .7rem 0 .5rem; padding: 0; border: 0; }

#booking .co-flow .co-cost-promo .input_holder { width: 100% !important; margin: 0 !important; }
#booking .co-flow .co-cost-promo input { box-sizing: border-box; width: 100% !important; min-height: 2.5rem; padding: .65rem .8rem; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(255,255,255,.04); color: #fff; font: 400 .9rem "Source Sans 3", sans-serif; }

#booking .co-flow .co-cost-promo .apply_voucher { min-height: 2.5rem; padding: 0 1.1rem; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(255,255,255,.08); color: #fff; font: 700 .8rem "Montserrat", sans-serif; text-transform: uppercase; cursor: pointer; }

#booking .co-flow #booking_promotion_row.co-cost-promo .apply_voucher { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: #fff; }

#booking .co-flow .co-review__cost .co-trip__total { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .45rem; padding: .6rem 0 0; border-top: 1px solid rgba(255,255,255,.12); color: var(--text-mute); font: 400 .85rem "Source Sans 3", sans-serif; letter-spacing: 0; text-transform: none; }
#booking .co-flow .co-review__cost .co-trip__total strong { color: #fff; font: 800 1.15rem "Montserrat", sans-serif; }

#booking .co-flow .payment_options {
  margin: 0 0 1rem;
  padding: 0 0 1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

@media (max-width: 700px) {
  #booking .co-flow .co-review__travellers .co-revtrav__meta { display: grid; grid-template-columns: 1fr; gap: .35rem; }
  #booking .co-flow #booking_promotion_row.co-cost-promo { align-items: stretch; flex-direction: row; }
  #booking .co-flow #booking_promotion_row.co-cost-promo .apply_voucher { width: auto; }
}

@media (max-width: 700px) {
  #booking .co-flow .co-payment-frame { padding: .7rem; }
  /* #booking .co-flow .co-payment-frame #sagepayouterwrapper { padding: .7rem; } */
  /* #booking .co-flow .co-payment-frame #sagepaywrapper { height: 700px !important; } */
}

/* Add-ons: keep the final row clear of the trip card edge even when some
   services are unavailable, and style the CMS hotel fields as prototype rows. */

#booking #view_basket_wrapper .co-trip__addons_list {
  gap: .65rem;
}

#booking #view_basket_wrapper .co-trip__addons_list > .pretour_transport_wrapper,
#booking #view_basket_wrapper .co-trip__addons_list > .posttour_transport_wrapper { margin: 0; }
#booking #view_basket_wrapper .co-pn__cfg { padding: 1rem .25rem .35rem; }
#booking #view_basket_wrapper .co-pn__lede { margin: 0 0 1rem; color: #9ca3af; font-size: .8rem; line-height: 1.5; }
#booking #view_basket_wrapper .co-pn__lede p { margin: 0; }
#booking #view_basket_wrapper .co-pn__h { margin: 0 0 .7rem; color: var(--tru-pink); font: 800 .72rem/1.5 "Montserrat", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
#booking #view_basket_wrapper .co-pn__rhead { margin: 1.15rem 0 .5rem; }
#booking #view_basket_wrapper .co-pn__rhead .co-pn__h { margin: 0; }
#booking #view_basket_wrapper .pretour_input_holder,
#booking #view_basket_wrapper .posttour_input_holder { gap: 0; margin-top: 0; }
#booking #view_basket_wrapper .pre-tour-rooms-outer { gap: 0; }
#booking #view_basket_wrapper .co-pn__row {
  display: grid;
  grid-template-columns: 34px 2.7rem 34px minmax(0, 1fr);
  align-items: center;
  gap: .5rem;
  min-height: 0;
  padding: .45rem 0;
}
#booking #view_basket_wrapper .co-pn__row .qty_adj { width: 34px; height: 34px; background: rgba(255,255,255,.03); }
#booking #view_basket_wrapper .co-pn__row .qty_adj:hover { background: var(--tru-pink); }
#booking #view_basket_wrapper .co-pn__row .qty_adj::before { font-size: 1.2rem; }
#booking #view_basket_wrapper .co-pn__row .input_holder { width: 2.7rem !important; }
#booking #view_basket_wrapper .co-pn__row input.number_input {
  box-sizing: border-box;
  width: 2.7rem !important;
  height: 34px;
  min-height: 34px;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  background: var(--tru-navy);
  font-size: 1rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
#booking #view_basket_wrapper .co-pn__row input.number_input::-webkit-outer-spin-button,
#booking #view_basket_wrapper .co-pn__row input.number_input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

#booking #view_basket_wrapper .co-pn__row label { display: block; margin-left: .35rem; color: #fff; font-size: .9rem; line-height: 1.5; }
#booking #view_basket_wrapper .co-pn__row label b { font-weight: 700; }
#booking #view_basket_wrapper .co-pn__rate { margin-left: .35rem; color: #fff; font-size: .8rem; font-weight: 700; line-height: 1.5; white-space: nowrap; }
#booking #view_basket_wrapper .co-pn__checkin { display: flex; align-items: center; gap: .4rem; margin: .15rem 0 .55rem; padding-left: .1rem; color: #9ca3af; font-size: .78rem; }
#booking #view_basket_wrapper .co-pn__checkin svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--tru-pink); }
#booking #view_basket_wrapper .co-pn__checkin strong { color: #fff; font-weight: 600; }
#booking #view_basket_wrapper .pretour_price_holder { margin-top: .9rem; padding-top: .8rem; font-size: .88rem; }
#booking #view_basket_wrapper .pretour_price_holder .price_text { color: #fff; font-size: 1.05rem; }
#booking #view_basket_wrapper .pre-tour-rooms-outer > .clear { display: none; }
#booking #view_basket_wrapper .pre-tour-rooms-outer .co-pn__row { min-height: 53px; }
#booking #view_basket_wrapper .co-trip__addons .co-addon__ico svg { width: 1.4rem; height: 1.4rem; }

/* Keep selected add-on buttons after the helper checkbox overrides. */
.co-addon--double .co-addon__btn.is-on,
.co-trip__addons .co-addon__btn.is-on,
#booking #view_basket_wrapper .pre-tour-checkbox.checked .co-addon__btn, #booking #view_basket_wrapper .post-tour-checkbox.checked .co-addon__btn {
  padding: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

/* Arrival guidance follows the prototype's inline info control. */
#booking .co-info { position: relative; display: inline-flex; vertical-align: middle; margin-left: .35rem; }
#booking .co-info__btn { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 999px; background: none; color: #9ca3af; font-size: 16px; line-height: 1; cursor: pointer; }
#booking .co-info__btn:hover,
#booking .co-info.is-open .co-info__btn { color: var(--tru-pink); }
#booking .co-info__btn:focus-visible { outline: 2px solid var(--tru-pink); outline-offset: 2px; }
#booking .co-info__pop {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 9px);
  left: 50%;
  width: 250px;
  max-width: calc(100vw - 3rem);
  padding: .7rem .8rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: #0b1220;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.7);
  color: #d1d5db;
  font: 400 .75rem/1.5 "Open Sans", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
#booking .co-info__pop::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: rgba(255,255,255,.16); }
#booking .co-info:hover .co-info__pop,
#booking .co-info:focus-within .co-info__pop,
#booking .co-info.is-open .co-info__pop { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
@media (max-width: 639px) {
  #booking #view_basket_wrapper .co-pn__row { gap: .4rem; }
  #booking #view_basket_wrapper .co-pn__row label { font-size: .9rem; }
  #booking #view_basket_wrapper .co-pn__rate { display: inline; margin-left: .35rem; font-size: .8rem; }
  #booking .co-info__pop { left: -4rem; transform: translateY(4px); }
  #booking .co-info:hover .co-info__pop,
  #booking .co-info:focus-within .co-info__pop,
  #booking .co-info.is-open .co-info__pop { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #booking .co-info__pop { transition: none; }
}
#booking .co-info__btn svg { width: 16px; height: 16px; }
#booking #payment_plan .option_title { display: flex; align-items: center; gap: .3rem; }
#booking #payment_plan .co-info { margin-left: 0; }
#booking #payment_plan .co-info__pop { width: 340px; max-height: min(420px, 65vh); overflow-y: auto; overscroll-behavior: contain; text-align: left; cursor: default; }
#booking #payment_plan .co-info__pop p { margin: 0 0 .65rem; }
#booking #payment_plan .co-info__pop p:last-child { margin-bottom: 0; }
#booking #payment_plan .co-info__terms { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid rgba(255,255,255,.16); }
@media (max-width: 639px) {
  #booking .co-flow .payment_options #payment_plan { grid-template-areas: "select title price" "select text text"; }
  #booking #payment_plan .option_title { font-size: .92rem; }
  #booking #payment_plan .option_price { font-size: .9rem; }
  #booking #payment_plan .co-info__pop { left: calc(50% - 20px); transform: translate(-50%, 4px); }
  #booking #payment_plan .co-info:hover .co-info__pop,
  #booking #payment_plan .co-info:focus-within .co-info__pop,
  #booking #payment_plan .co-info.is-open .co-info__pop { transform: translate(-50%, 0); }
}

@media (max-width: 639px) {
  #booking #view_basket_wrapper .pretour_transport_wrapper,
  #booking #view_basket_wrapper .posttour_transport_wrapper { align-items: flex-start; }
  #booking #view_basket_wrapper .pretour_transport_wrapper .co-addon__info,
  #booking #view_basket_wrapper .posttour_transport_wrapper .co-addon__info { flex: 1 1 calc(100% - 3rem); }
  #booking #view_basket_wrapper .pretour_transport_wrapper .co-addon__right,
  #booking #view_basket_wrapper .posttour_transport_wrapper .co-addon__right { flex: 1 1 100%; justify-content: flex-end; margin-left: 0; }
  #booking #view_basket_wrapper .pretour_transport_wrapper .co-info__pop,
  #booking #view_basket_wrapper .posttour_transport_wrapper .co-info__pop { left: -7rem; }
}
@media (max-width: 639px) {
  #booking #view_basket_wrapper .pretour_transport_wrapper .co-addon__info,
  #booking #view_basket_wrapper .posttour_transport_wrapper .co-addon__info { flex-basis: calc(100% - 3.6rem); }
  #booking #view_basket_wrapper .pretour_transport_wrapper .co-addon__desc,
  #booking #view_basket_wrapper .posttour_transport_wrapper .co-addon__desc { display: block; }
}

/* Add-on cards and Trip Cost share the booking panel; the list owns spacing
   irrespective of which optional service is rendered last. */
#booking #view_basket_wrapper .co-trip__booking > .co-trip__addons { padding-bottom: 0; }
#booking #view_basket_wrapper .co-trip__addons_list { padding-bottom: 0; }
#booking #view_basket_wrapper .co-trip__booking > .co-trip__prototype-cost {
  order: 4;
  margin: 1rem 0 0;
  padding: .85rem 0 .1rem;
}
#booking #view_basket_wrapper .co-trip__booking { padding-bottom: 1.3rem; }
#booking #view_basket_wrapper .co-addon__date { white-space: nowrap; }
@media (max-width: 639px) {
  #booking #view_basket_wrapper .pretour_transport_wrapper,
  #booking #view_basket_wrapper .posttour_transport_wrapper {
    gap: .55rem;
    padding: .7rem;
  }
}

/* Calendar styles for checkout by HP on 2026-10-02 */
#passenger_information .calendar_input {
  color: #fff !important;
}
#passenger_information .cds {
  float: right;
  right: 2px;
  top: 2px;
  height: 42px;
  position: relative;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

#passenger_information .calendar_input_holder .cds {
  height: 44px;
}
#passenger_information .calendar_input_holder .cds.has-value {
  background-position: -32px -421px;
}
@media (max-width: 768px) {
  #passenger_information .calendar_input {
    width: 200px !important;
  }
}
@media (max-width: 420px) {
  #passenger_information .calendar_input {
    width: 100% !important;
  }
}
/* ===== Payment Request ===== */
#booking .co-payment-request { align-items: start; }
#booking .co-payment-request .co-step-heading { color: var(--tru-pink); }
#booking .co-payment-request .co-pay-change { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--tru-pink); }
#booking .co-payment-request .co-secure-note { margin-top: 20px; }
#booking .co-request-summary { display: grid; gap: 20px; min-width: 0; }
#booking .co-request-card { padding: 24px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; }
#booking .co-request-card h2, #booking .co-request-dialog h2 { margin: 0 0 20px; color: #fff; font: 800 16px/1.4 "Montserrat",sans-serif; text-transform: uppercase; }
#booking .co-request-item { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.1); color: #9ca3af; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
#booking .co-request-item strong, #booking .co-request-price { color: #fff; }
#booking .co-request-totals { margin: 16px 0 0; border-top: 1px solid rgba(255,255,255,.1); padding-top: 16px; }
#booking .co-request-totals > div, #booking .co-request-history > div { display: flex; justify-content: space-between; gap: 16px; margin: 10px 0; font-size: 13px; color: #9ca3af; }
#booking .co-request-totals dd { margin: 0; color: #fff; font-weight: 700; text-align: right; }
#booking .co-request-totals .co-request-due { padding-top: 16px; margin-top: 16px; border-top: 1px solid rgba(255,255,255,.1); color: #fff; }
#booking .co-request-due dd { color: var(--tru-pink); font-size: 20px; }
#booking .co-request-history { margin-top: 20px; font-size: 13px; }
#booking .co-request-history summary { cursor: pointer; color: #d1d5db; }
#booking .co-request-dialog { box-sizing: border-box; width: calc(100% - 32px); max-width: 480px; max-height: calc(100dvh - 32px); padding: 32px; background: #0b1626; color: #d1d5db; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; box-shadow: 0 24px 80px rgba(0,0,0,.4); }
#booking .co-request-dialog::backdrop { background: rgba(0,0,0,.7); }
#booking .co-request-dialog h2 { margin-right: 32px; }
#booking .co-request-dialog p { font-size: 14px; line-height: 1.6; color: #9ca3af; }
#booking .co-request-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; background: none; color: #fff; font-size: 24px; cursor: pointer; }
#booking .co-request-dialog label { display: block; margin: 24px 0 8px; font-size: 13px; }
#booking .co-request-dialog input[type="number"] { box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; background: rgba(255,255,255,.05); color: #fff; font-size: 16px; }
#booking .co-request-submit { width: 100%; min-height: 48px; margin-top: 24px; padding: 12px; border: 0; border-radius: 8px; background: var(--tru-pink); color: #fff; font: 700 11px/1.4 "Montserrat",sans-serif; text-transform: uppercase; cursor: pointer; transition: background-color .2s; }
#booking .co-request-submit:hover { background: #ff5bab; }

@media(max-width: 1023px) { #booking .co-request-summary { margin-top: 24px; } }
@media(max-width: 600px) { #booking .co-request-card, #booking .co-request-dialog { padding: 24px; } }
#booking .co-header--payment-request .co-header__right { margin-left: auto; }