/* ==========================================================================
   Plan My Trip — focused 3-step wizard
   Minimal header (logo + theme toggle + numbered stepper), one step at a
   time in a single centered column, no page footer. Reuses .ttd-*/
   .slt-trip__*/.td-datepicker* from style.css/tour-detail.css; this file
   only adds the wizard shell, stepper, timer, and this page's field/
   border treatment.
   ========================================================================== */

/* ---- Minimal header — logo / stepper (centered) / theme toggle ---- */
.mct-minimal-header {
  border-bottom: 1px solid var(--slt-gray-200);
}

/* The stops list's max-height + internal scrollbar made sense inside the
   old popup's fixed-height card; on a full page the list should just grow
   with the page and let the browser handle scrolling. */
.mct-shell .ttd-builder__list {
  max-height: none;
  overflow-y: visible;
}

/* 1fr auto 1fr (not auto 1fr auto) — the two outer tracks are equal
   width regardless of how wide the logo/theme toggle actually are, so the
   stepper in the middle track sits on the page's true center instead of
   drifting toward whichever side has the narrower content. */
.mct-minimal-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 8px 20px;
}

/* Pinned to explicit tracks (not just source order) — the direct-entry
   booking flow hides the stepper entirely, and without this the theme
   toggle auto-places into the now-vacant middle track instead of staying
   flush right. */
.mct-minimal-header__inner .slt-logo {
  grid-column: 1;
  justify-self: start;
}

.mct-minimal-header__inner .slt-theme-picker {
  grid-column: 3;
  justify-self: end;
}

/* ---- Wizard content — single centered column ---- */
.mct-shell__right {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 24px 96px;
}

/* ---- Hold timer — fixed bottom bar, same mechanics as the "Plan My
   Trip" mini-header CTA (.slt-header-mini in style.css). ---- */
.mct-timer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 9px 16px;
  background-color: var(--slt-blue-900);
  color: var(--slt-white);
  font-size: 0.86rem;
  font-weight: 600;
  text-align: center;
}

.mct-timer[hidden] {
  display: none;
}

.mct-timer strong {
  font-weight: 700;
}

/* ---- Stepper — sits centered in the minimal header ---- */
.mct-stepper {
  display: flex;
  align-items: flex-start;
  justify-self: center;
}

.mct-stepper[hidden] {
  display: none;
}

/* ---- Header title — direct-entry booking flow's stand-in for the
   stepper above, same middle grid track. ---- */
.mct-header-title {
  grid-column: 2;
  justify-self: center;
  margin: 0;
  font-family: "Krona One", var(--font-base);
  font-size: 3.5rem;
  line-height: 4rem;
  font-weight: 700;
  color: var(--slt-ink);
  text-align: center;
}

.mct-header-title[hidden] {
  display: none;
}

/* ---- Booking summary — participants/date/price/discount recap shown
   under the title, direct-entry flow only. Styled as a small receipt
   slip (monospaced, dashed rules) rather than a full-width bar. Sized to
   the mobile column's width (matching the Contact form fields below it)
   on phones, capped narrower on desktop where full-width would look odd
   next to a short line-item list. ---- */
.mct-summary {
  display: flex;
  justify-content: center;
  margin: 40px auto 0;
  padding: 0 24px;
}

.mct-summary[hidden] {
  display: none;
}

.mct-receipt {
  width: 100%;
  max-width: 320px;
  padding: 14px 18px;
  background-color: var(--slt-gray-50);
  border: 1px dashed var(--slt-border-strong);
  border-radius: var(--slt-radius-sm);
  font-family: "Courier New", Courier, monospace;
}

.mct-receipt__title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--slt-ink);
}

.mct-receipt__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
  font-size: 0.78rem;
  color: var(--slt-ink);
}

/* Comfort tier recap — sits right under the title so it stays visible on
   every step, not just Step 2's tier picker. Chip background is the same
   gradient as .tour-card__style--{tier} on the public tour cards (cards.css),
   just keyed by the long tierSelect option values instead of the short
   'value'/'comfort'/'luxury' DB enum. */
.mct-receipt__tier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0 8px;
}

.mct-receipt__tier-label {
  font-size: 0.78rem;
}

.mct-receipt__tier-chip {
  display: block;
  border-radius: 6px;
  padding: 5px 10px;
  text-align: right;
  line-height: 1.3;
  background: linear-gradient(120deg, #2d3853, #1a6070, #2d3853);
}

.mct-receipt__tier-row[data-tier="comfort-journey"] .mct-receipt__tier-chip {
  background: linear-gradient(120deg, #1e2171, #474bc2, #1e2171);
}

.mct-receipt__tier-row[data-tier="luxury-collection"] .mct-receipt__tier-chip {
  background: linear-gradient(135deg, var(--slt-gold-400), var(--slt-gold-500), var(--slt-gold-600));
}

.mct-receipt__tier-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}

.mct-receipt__tier-grade {
  display: block;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 1px;
}

.mct-receipt__price--placeholder {
  color: var(--slt-text-secondary);
  font-style: italic;
  font-size: 0.72rem;
}

.mct-receipt__row[hidden] {
  display: none;
}

.mct-receipt__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.mct-receipt__price[hidden] {
  display: none;
}

.mct-receipt__was {
  color: var(--slt-text-secondary);
  text-decoration: line-through;
}

.mct-receipt__was[hidden] {
  display: none;
}

.mct-receipt__divider {
  margin: 6px 0;
  border-top: 1px dashed var(--slt-border-strong);
}

.mct-receipt__row--total {
  padding-top: 2px;
  font-size: 0.86rem;
  font-weight: 700;
}

@media (max-width: 575.98px) {
  .mct-summary {
    padding: 0 16px;
    margin-top: 28px;
  }

  /* Fills the same width as the page's mobile column (no cap) instead
     of floating as a narrow card with dead space on either side. */
  .mct-receipt {
    max-width: none;
    padding: 12px 16px;
  }

  .mct-receipt__row {
    font-size: 0.74rem;
  }

  .mct-receipt__row--total {
    font-size: 0.82rem;
  }
}

.mct-stepper__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mct-stepper__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid var(--slt-border-strong);
  border-radius: var(--slt-radius-sm);
  color: var(--slt-text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
}

.mct-stepper__label {
  max-width: 90px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--slt-gray-600);
  text-align: center;
  line-height: 1.3;
}

.mct-stepper__line {
  width: 40px;
  height: 1.5px;
  margin-top: 14px;
  background-color: var(--slt-gray-200);
}

.mct-stepper__item.is-active .mct-stepper__circle,
.mct-stepper__item.is-done .mct-stepper__circle {
  background-color: var(--slt-blue-400);
  color: var(--slt-white);
}

.mct-stepper__item.is-active .mct-stepper__label,
.mct-stepper__item.is-done .mct-stepper__label {
  color: var(--slt-ink);
}

/* ---- Wizard steps ---- */
.mct-wizard[hidden] {
  display: none;
}

.mct-step[hidden] {
  display: none;
}

.mct-wizard__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
}

.mct-wizard__footer[hidden] {
  display: none;
}

/* Step 1 has no Back button, so the primary button sits alone on the right. */
.mct-wizard__footer--start {
  justify-content: flex-end;
}

/* .ttd-builder__back sets its own display: flex in style.css, which wins
   over the browser's default [hidden] rule (author styles always beat
   user-agent styles) — without this, backStepBtn.hidden = true still left
   the Back button visible on step 1. */
.ttd-builder__back[hidden] {
  display: none;
}

/* ---- Warning banner ---- */
.mct-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  margin-top: 16px;
  background-color: rgba(255, 23, 23, 0.08);
  border: 1px solid var(--slt-red-400);
  border-radius: var(--slt-radius-sm);
  color: var(--slt-red-400);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.5;
}

.mct-warning[hidden] {
  display: none;
}

.mct-warning svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ---- Field border spec: 2px solid, Slate 100 default / Blue 300 focus /
   Red 400 invalid — applies to every text field on this page. ---- */
.mct-shell .ttd-field__label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--slt-ink);
  margin-bottom: 8px;
}

.mct-shell .ttd-field__select,
.mct-shell .ttd-field__input,
.mct-shell .ttd-field__textarea {
  font-size: 1rem;
  padding: 14px 16px;
  border: 2px solid var(--slt-slate-400);
  background-color: var(--slt-surface);
}

.mct-shell .ttd-field__select:focus,
.mct-shell .ttd-field__input:focus,
.mct-shell .ttd-field__textarea:focus {
  outline: none;
  border-color: var(--slt-blue-300);
}

/* A filled field keeps the same border used on focus/click, instead of
   looking unstyled again the moment it loses focus. */
.mct-shell .ttd-field__input:not(:placeholder-shown),
.mct-shell .ttd-field__textarea:not(:placeholder-shown) {
  border-color: var(--slt-blue-300);
}

/* Browsers auto-highlight recognized/autofilled fields (name, email, tel)
   with their own solid fill color that background-color can't override
   directly — neutralize it and match this page's own border treatment
   instead of the browser's yellow/blue fill. */
.mct-shell .ttd-field__input:-webkit-autofill,
.mct-shell .ttd-field__input:-webkit-autofill:hover,
.mct-shell .ttd-field__input:-webkit-autofill:focus,
.mct-shell .ttd-field__textarea:-webkit-autofill,
.mct-shell .ttd-field__textarea:-webkit-autofill:hover,
.mct-shell .ttd-field__textarea:-webkit-autofill:focus {
  border-color: var(--slt-blue-300);
  -webkit-text-fill-color: var(--slt-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--slt-surface) inset;
  transition: background-color 9999s ease-in-out 0s;
}

.mct-shell .ttd-field__input.is-invalid,
.mct-shell .ttd-field__textarea.is-invalid {
  border-color: var(--slt-red-400);
}

#ttdDateField.is-invalid .td-datepicker__trigger {
  border: 2px solid var(--slt-red-400);
}

.mct-shell .ttd-builder__nights-btn {
  width: 32px;
  height: 32px;
  font-size: 1.1rem;
}

.mct-shell .ttd-builder__nights-count {
  font-size: 0.95rem;
  min-width: 20px;
}

.mct-shell .ttd-security {
  background-color: var(--slt-surface-subtle);
}

.mct-shell .ttd-security span {
  font-size: 0.82rem;
}

.mct-shell .ttd-captcha {
  margin-top: 2px;
}

/* The reCAPTCHA iframe itself can't be restyled, so the invalid state
   highlights its wrapper instead — same red-400 used on every other
   invalid field on this page. */
.mct-shell .ttd-captcha.is-invalid {
  outline: 2px solid var(--slt-red-400);
  outline-offset: 4px;
  border-radius: var(--slt-radius-sm);
}

/* ---- Country field suggestions dropdown ---- */
.ttd-field--autocomplete {
  position: relative;
}

.ttd-country-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background-color: var(--slt-surface);
  border: 1px solid var(--slt-gray-200);
  border-radius: var(--slt-radius-sm);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
  z-index: 20;
}

.ttd-country-suggest[hidden] {
  display: none;
}

.ttd-country-suggest__item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--slt-ink);
  background: none;
  border: none;
  padding: 10px 16px;
  cursor: pointer;
}

.ttd-country-suggest__item:hover,
.ttd-country-suggest__item.is-active {
  background-color: var(--slt-surface-subtle);
}

/* Native select arrows sat flush against the text — swap in a bigger
   custom chevron with real padding reserved for it, and keep it visible
   against the page's dark theme (fixed gray washes out there). */
.mct-shell .ttd-field__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235b5b5b' stroke-width='2'%3E%3Cpath d='M5 7.5 10 13 15 7.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 44px;
}

:root[data-theme="dark"] .mct-shell .ttd-field__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23f1f1f1' stroke-width='2'%3E%3Cpath d='M5 7.5 10 13 15 7.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mct-shell .ttd-field__input[type="date"]::-webkit-calendar-picker-indicator {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

:root[data-theme="dark"] .mct-shell .ttd-field__input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* Reverse order — styled as a real outlined button (the shared style.css
   rule sets the ink-colored border/text, which flips to white in dark
   theme; this just sizes it), and sits on the same line as the "(N stops)"
   text since it's now inside .ttd-title-meta rather than a sibling of the
   whole title block. */
.mct-shell .ttd-builder__reverse {
  font-size: 0.8rem;
  padding: 8px 14px;
  border-radius: var(--slt-radius-sm);
}

/* Icon-only twin lives on the Arrival row for narrow screens (see the
   (max-width: 575.98px) block below) — hidden by default so it doesn't
   double up with the labeled button next to "(N stops)" on wider ones. */
.mct-shell .ttd-builder__reverse--mobile {
  display: none;
}

/* ---- Meals-included note for the selected comfort tier — plain text. ---- */
.ttd-tier-info {
  margin: 8px 0 8px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--slt-gray-600);
}

/* Board-basis note — called out on a light yellow panel so it reads as an
   important detail rather than routine body copy. */
.ttd-tier-info--meals {
  border-radius: var(--slt-radius-sm);
  padding: 10px 12px;
  color: var(--slt-ink, #1a1a1a);
  font-family: "Krona One", var(--font-base);
}

/* Board-basis box background — swapped per comfort tier via the JS-set
   data-tier attribute on #ttdTierMeals. Light theme (default) used to
   just take the dark-theme gradient at low alpha, blending it with the
   page's white background — that made it read as a washed-out, unequal
   version of the dark-theme color rather than a real light counterpart.
   These are instead solid (full-opacity) light versions of the same
   hues/gradient angle/stop positions as the dark-theme colors below,
   with each stop's lightness remapped (not flattened to one shared
   value — that killed the visible gradation on tiers whose dark-theme
   contrast comes from a lightness shift rather than a hue shift, e.g.
   Comfort Journey/Luxury Collection) so it reads as
   "the same gradient, lighter" while staying readable for the dark-ink
   text (.ttd-tier-info--meals, .ttd-tier-info--grade). Dark theme keeps
   the original full-strength gradient. */
#ttdTierMeals[data-tier="value-escape"] {
  background: linear-gradient(21deg, #5975b7 0%, #37c0df 47%, #5975b7 99%);
}

#ttdTierMeals[data-tier="comfort-journey"] {
  background: linear-gradient(171deg, #575bdb 5%, #a0a2ee 52%, #575bdb 99%);
}

#ttdTierMeals[data-tier="luxury-collection"] {
  background: linear-gradient(135deg, #eaa40a 0%, #f7b540 45%, #f7c14b 55%, #f5b618 100%);
}

:root[data-theme="dark"] #ttdTierMeals[data-tier="value-escape"] {
  background: linear-gradient(21deg, #2d3853 0%, #1a6070 47%, #2d3853 99%);
}

:root[data-theme="dark"] #ttdTierMeals[data-tier="comfort-journey"] {
  background: linear-gradient(171deg, #1e2171 5%, #474bc2 52%, #1e2171 99%);
}

:root[data-theme="dark"] #ttdTierMeals[data-tier="luxury-collection"] {
  background: linear-gradient(135deg, #4A3301 0%, #AA771C 45%, #B38728 55%, #674F13 100%);
}

/* Hotel grade — sits inside the meals box, above the board-basis line.
   var(--slt-ink) instead of a hardcoded white — dark in light theme
   (readable on the new tint above), light in dark theme (readable on
   the original full-strength gradient). */
.ttd-tier-info--grade {
  margin: 0 0 10px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--slt-ink);
  font-family: "Krona One", var(--font-base);
}

/* ---- Booking success popup — reuses .slt-trip-overlay/.slt-trip-modal
   (the header's "My Trip" modal chrome) for the backdrop + card, just
   centered text instead of a form. ---- */
.mct-success-modal {
  max-width: 380px;
  border: none;
  text-align: center;
  align-items: center;
  animation: mctSuccessPop 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.2);
}

@keyframes mctSuccessPop {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Dark badge panel behind the checkmark — a deliberate accent block (not
   theme-reactive, unlike the rest of the card) so it reads as a little
   celebratory moment against the white card in both light and dark
   theme. The check draws in first, then the spark dots pop in around it
   once it's nearly finished — see the animation-delay stagger below. */
.mct-success-modal__icon {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 4px auto 18px;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 42%, #16241a 0%, #0a100b 75%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mct-success-modal__icon svg {
  width: 56px;
  height: 56px;
  position: relative;
  z-index: 1;
}

.mct-success-modal__icon-circle {
  fill: none;
  stroke: var(--slt-green);
  stroke-width: 2.5;
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
  animation: mctCircleDraw 0.5s ease forwards;
}

.mct-success-modal__icon-check {
  fill: none;
  stroke: var(--slt-green);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: mctCheckDraw 0.3s ease 0.45s forwards;
}

@keyframes mctCircleDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes mctCheckDraw {
  to { stroke-dashoffset: 0; }
}

.mct-success-modal__spark {
  position: absolute;
  border-radius: 50%;
  background: var(--slt-green);
  opacity: 0;
  animation: mctSparkPop 0.5s ease forwards;
}

.mct-success-modal__spark--1 { width: 5px; height: 5px; top: 16px; left: 22px; background: #fff; animation-delay: 0.5s; }
.mct-success-modal__spark--2 { width: 4px; height: 4px; top: 12px; right: 18px; animation-delay: 0.58s; }
.mct-success-modal__spark--3 { width: 7px; height: 7px; top: 32px; right: 12px; animation-delay: 0.54s; }
.mct-success-modal__spark--4 { width: 3px; height: 3px; bottom: 16px; left: 16px; background: #fff; animation-delay: 0.64s; }
.mct-success-modal__spark--5 { width: 5px; height: 5px; bottom: 22px; right: 24px; animation-delay: 0.7s; }
.mct-success-modal__spark--6 { width: 3px; height: 3px; top: 42px; left: 14px; background: #fff; animation-delay: 0.75s; }

@keyframes mctSparkPop {
  0% { opacity: 0; transform: scale(0); }
  60% { opacity: 1; transform: scale(1.3); }
  100% { opacity: 1; transform: scale(1); }
}

.mct-success-modal h2 {
  margin: 0 0 12px;
  font-family: "Krona One", var(--font-base);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--slt-ink);
}

.mct-success-modal p {
  margin: 0 0 20px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--slt-gray-600);
}

.mct-success-modal__next {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin: 0 0 26px;
  padding-top: 18px;
  border-top: 1px solid var(--slt-gray-200);
}

.mct-success-modal__next-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--slt-gray-600);
}

.mct-success-modal__next-item svg {
  width: 26px;
  height: 26px;
  color: var(--slt-gray-600);
}

/* .ttd-field sets its own display: block, which otherwise wins over the
   browser's default [hidden] rule — same reason .ttd-builder__tier[hidden]
   exists in style.css. Needed here since render() toggles #ttdTierWrap. */
#ttdTierWrap[hidden] {
  display: none;
}

/* ---- Comfort tier mobile dropdown — hidden by default (desktop keeps
   the native <select> above it); the (max-width: 575.98px) block below
   swaps the two. ---- */
.ttd-tier-mobile {
  display: none;
}

.ttd-tier-mobile__option {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--slt-ink);
  background: none;
  border: none;
  border-radius: var(--slt-radius-sm);
  padding: 12px 14px;
  cursor: pointer;
}

.ttd-tier-mobile__option:hover {
  background-color: var(--slt-surface-subtle);
}

/* ---- Shared dark scrim behind the Comfort tier/Participants/Start
   date/Country dropdowns once they become mobile bottom sheets —
   invisible outside that breakpoint, where those stay small anchored
   dropdowns with no backdrop. ---- */
.mct-sheet-backdrop {
  display: none;
}

/* ---- Stop label — day number stacked above the location name, so a long
   place name wraps onto its own line instead of crowding the nights
   stepper and move/delete controls that share the row. ---- */
.mct-shell .ttd-builder__stop {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 110px;
}

.mct-shell .ttd-builder__stop .ttd-builder__name {
  flex: none;
  min-width: 0;
}

/* Every small round icon button in the itinerary builder (reorder,
   delete, and the add-stop form's confirm) shares the same 32px
   bordered-circle sizing, so "delete" doesn't look like a different
   control from its neighbors — only its color signals destructive. */
.mct-shell .ttd-builder__move,
.mct-shell .ttd-builder__remove,
.mct-shell .ttd-builder__addstop-confirm {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--slt-gray-200);
}

.mct-shell .ttd-builder__move svg,
.mct-shell .ttd-builder__remove svg,
.mct-shell .ttd-builder__addstop-confirm svg {
  width: 16px;
  height: 16px;
}

.mct-shell .ttd-builder__remove {
  color: var(--slt-red-400);
  border-color: var(--slt-red-400);
}

.mct-shell .ttd-builder__remove:hover {
  background-color: var(--slt-red-400);
  color: var(--slt-white);
}

.mct-shell .ttd-builder__addstop-confirm {
  border-color: var(--slt-green);
}

/* ---- Itinerary meta (days/nights/stops/reverse) — rendered above the
   "CMB → Arrival" marker in step 1 ---- */
.mct-itinerary-meta {
  margin-bottom: 14px;
}

.mct-itinerary-meta h2 {
  margin: 0 0 24px;
  font-size: 2rem;
  font-weight: 700;
  color: var(--slt-ink);
}

@media (max-width: 991.98px) {
  .mct-stepper__label {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .mct-minimal-header__inner {
    padding: 10px 16px;
    gap: 8px;
    /* Logo/theme toggle keep their natural (content) width instead of
       sharing the row as 1fr tracks — at this width, the title's max-content
       contribution alone (even a short tour name) was enough to squeeze
       both flexible 1fr tracks down to 0, making the logo disappear. The
       title now gets whatever space is left over and truncates instead. */
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  /* .mct-header-title is a real h1 (direct-entry booking flow's stand-in
     for the stepper). Its desktop size (3.5rem) doesn't fit next to the
     logo and theme toggle on a phone screen, so it's cut down here and
     truncated to one line rather than wrapping/overflowing. */
  .mct-header-title {
    /* justify-self:stretch (overriding the desktop rule's :center) — with
       :center the box sizes to its own max-content width and just overflows
       past the grid track instead of respecting it, which defeats the
       truncation below. Stretching it to the track's width lets min-width:0
       + overflow:hidden actually clip long tour names. */
    justify-self: stretch;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1.15rem;
    line-height: 1.4;
  }

  /* .mct-success-modal h2 has no mobile override and sits below the
     24px heading floor at its base 1.3rem. */
  .mct-success-modal h2 {
    font-size: 1.5rem;
  }

  /* .ttd-tier-info is a real <p> (plan-my-trip pricing note) with no
     mobile override — its base 0.85rem sits below the 16px body floor. */
  .ttd-tier-info {
    font-size: 1rem;
  }

  .mct-stepper__line {
    width: 18px;
  }

  .mct-shell__right {
    padding: 24px 16px 96px;
  }

  /* ---- Hold timer — stacked directly above the wizard footer ribbon
     below instead of both sharing bottom: 0 (which made the timer cover
     the Next button). --mct-footer-h is kept in sync with the ribbon's
     real rendered height by my-custom-trip.js (0 when the ribbon is
     hidden), so this still collapses to bottom: 0 on steps with no
     ribbon and adapts if the buttons ever wrap to two lines. ---- */
  .mct-timer {
    bottom: var(--mct-footer-h, 0px);
  }

  /* ---- Wizard Back/Next — mobile app style bottom action ribbon,
     same fixed-bar treatment as .mct-timer above it (z-index kept lower
     so the hold-timer banner stays on top if both are ever visible). ---- */
  .mct-wizard__footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    margin-top: 0;
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background-color: var(--slt-surface);
    border-top: 1px solid var(--slt-gray-200);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
  }

  .mct-wizard__footer .ttd-builder__back,
  .mct-wizard__footer .ttd-builder__submit {
    flex: 1 1 0;
    padding: 14px 20px;
  }

  /* ---- Itinerary title + days/nights/stops — trimmed down so
     "10 Days / 9 Nights (9 stops)" reliably fits on one line once the
     Reverse button (below) is out of this row. ---- */
  .mct-itinerary-meta h2 {
    margin-bottom: 12px;
    font-size: 1.5rem;
  }

  .mct-shell .td-title__days {
    font-size: 15px;
  }

  .mct-shell .ttd-stops-count {
    margin-left: 8px;
    font-size: 0.72rem;
  }

  .mct-shell .ttd-title-meta,
  .mct-shell .ttd-title-meta__left {
    flex-wrap: nowrap;
  }

  /* ---- Reverse order — desktop's labeled button (next to "(N stops)")
     swaps for the icon-only twin on the Arrival row, right-aligned via
     margin-left: auto so the pin label stays left. Sized as a real touch
     target (36px, well past the ~24px the labeled version's icon alone
     would give a thumb to hit). ---- */
  .mct-shell .ttd-builder__reverse--desktop {
    display: none;
  }

  .mct-shell .ttd-builder__reverse--mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin-left: auto;
    flex-shrink: 0;
  }

  .mct-shell .ttd-builder__reverse--mobile svg {
    width: 18px;
    height: 18px;
    /* .td-route-point svg (style.css) colors the pin icon red; this button
       lives inside the same route point, so it needs its own color back. */
    color: var(--slt-ink);
  }

  /* ---- Route markers (Arrival/Departure) — a bit more breathing room
     now one of them also carries the Reverse icon button. ---- */
  .mct-shell .td-route-point {
    padding: 12px 14px;
  }

  /* ---- Day rows — more space between rows, and the name/day-number
     block forced onto its own full-width line (flex-wrap on the row
     already sends the rest to a new line after it) so a long place name
     never crowds or overlaps the nights/move/remove controls — those
     stay together on the row below, nights left / icons right. ---- */
  .mct-shell .ttd-builder__list {
    gap: 12px;
  }

  .mct-shell .ttd-builder__day {
    gap: 12px;
    padding: 12px;
  }

  .mct-shell .ttd-builder__stop {
    flex: 1 1 100%;
  }

  .mct-shell .ttd-builder__actions {
    margin-left: auto;
  }

  /* ---- Touch targets — every small control in the builder bumped
     toward the ~40-44px minimum recommended for a comfortable thumb tap,
     with more gap between neighbors so adjacent icons don't compete for
     the same tap. ---- */
  .mct-shell .ttd-builder__nights {
    gap: 8px;
  }

  .mct-shell .ttd-builder__nights-btn {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .mct-shell .ttd-builder__nights-count {
    min-width: 24px;
    font-size: 0.95rem;
  }

  .mct-shell .ttd-builder__actions {
    gap: 10px;
  }

  .mct-shell .ttd-builder__move,
  .mct-shell .ttd-builder__remove,
  .mct-shell .ttd-builder__addstop-confirm {
    width: 40px;
    height: 40px;
  }

  .mct-shell .ttd-builder__move svg,
  .mct-shell .ttd-builder__remove svg,
  .mct-shell .ttd-builder__addstop-confirm svg {
    width: 18px;
    height: 18px;
  }

  .mct-shell .ttd-builder__addstop {
    padding: 12px 14px;
  }

  .mct-shell .ttd-builder__addstop-btn {
    font-size: 0.9rem;
    padding: 4px 0;
  }

  /* ---- Comfort tier / Participants / Start date / Country — all four
     become a full-width bottom sheet (no corner rounding) instead of a
     small anchored popover, with the shared dark scrim behind them.
     Comfort tier swaps the native <select> for its custom stand-in
     (#ttdTierMobile), since a native select's own popup is OS-rendered
     and can't be restyled this way. ---- */
  .mct-sheet-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
  }

  #ttdTierSelect {
    display: none;
  }

  .ttd-tier-mobile {
    display: block;
  }

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

  /* Kept anchored to the input (not the viewport) unlike the date
     picker above — this list opens while the on-screen keyboard is up,
     and a viewport-bottom sheet renders behind the keyboard instead of
     above it. Staying positioned relative to the field means it opens
     directly under the input, in the visible area above the keyboard. */
  .mct-shell .ttd-country-suggest {
    max-height: 160px;
    z-index: 1001;
  }
}