:root {
  --powder: #F7F9FC;
  --snow: #EEF2F8;
  --night: #14213D;
  --night-soft: #3A4A6B;
  --magenta: #E6007E;
  --magenta-deep: #B80065;
  --teal: #00A6A6;
  --sun: #FFC531;
  --line: #D5DDEA;
  --control-border: #7A879D;
  --teal-ink: #007575;
  --piste-easy: #2367D1;
  --piste-intermediate: #D7263D;
  --piste-advanced: #14213D;

  --display: "Krona One", "Arial Black", sans-serif;
  --text: "Atkinson Hyperlegible Next", system-ui, sans-serif;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.5rem;

  --radius-chip: 999px;
  --radius-panel: 18px;
  --radius-card: 12px;
  --lift: 0 18px 40px -18px rgb(20 33 61 / 0.45);
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--night);
  color: var(--night);
  font-family: var(--text);
  font-size: var(--step-0);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--night); outline-offset: 2px; }
.masthead :focus-visible, .tabs :focus-visible, .compare-bar :focus-visible, .globe-view__intro :focus-visible,
.bubble--user :focus-visible, .page__masthead :focus-visible, .console__bar :focus-visible { outline-color: var(--sun); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* App: the conversation on the left, the display it drives on the right. */

.app {
  display: grid;
  grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
  height: 100dvh;
  background: var(--night);
}

.side {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--powder);
}

.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--night);
}

.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--powder); text-decoration: none;
}
.wordmark__text { display: grid; }
.wordmark__name { font-family: var(--display); font-size: var(--step-1); line-height: 1.1; letter-spacing: -0.01em; }
.wordmark__tagline { font-size: var(--step--1); color: #C9D4E8; }

.masthead__reset {
  border: 1px solid rgb(247 249 252 / 0.35); background: transparent; color: var(--powder);
  padding: 5px 14px; border-radius: var(--radius-chip); font-size: var(--step--1); white-space: nowrap;
}
.masthead__reset:hover { background: rgb(247 249 252 / 0.12); }
.masthead__trust { display: flex; align-items: center; gap: 8px; margin-left: auto; opacity: 0.85; }
.masthead__trust img { display: block; height: 24px; width: auto; }
.masthead__trust .abta-mark, .trust .abta-mark { height: 17px; }

/* The snowglobe bot: its mood shows what it's doing. Thinking shakes the globe. */
.bot { flex: none; overflow: visible; }
.bot * { transform-box: fill-box; transform-origin: center; }
.bot__body { transform-origin: 50% 100%; animation: bot-bob 3.2s ease-in-out infinite; }
.bot__eye { animation: bot-blink 5s infinite; }
.bot__happy, .bot__mouth { opacity: 0; }
.bot__snow circle { opacity: 0; animation: bot-snow 3.2s linear infinite; }
.bot__snow circle:nth-child(2) { animation-delay: -0.6s; }
.bot__snow circle:nth-child(3) { animation-delay: -1.3s; }
.bot__snow circle:nth-child(4) { animation-delay: -1.9s; }
.bot__snow circle:nth-child(5) { animation-delay: -2.4s; }
.bot__snow circle:nth-child(6) { animation-delay: -2.9s; }
.bot[data-state=thinking] .bot__body { animation: bot-shake 0.5s ease-in-out infinite; }
.bot[data-state=thinking] .bot__snow circle { opacity: 1; animation: bot-swirl 0.8s ease-in-out infinite alternate; }
.bot[data-state=thinking] .bot__snow circle:nth-child(even) { animation-direction: alternate-reverse; }
.bot[data-state=thinking] .bot__light { animation: bot-light 0.9s steps(1) infinite; }
.bot[data-state=thinking] .bot__light:nth-of-type(2) { animation-delay: 0.3s; }
.bot[data-state=thinking] .bot__light:nth-of-type(3) { animation-delay: 0.6s; }
.bot[data-state=replying] .bot__body { animation-duration: 0.7s; }
.bot[data-state=replying] .bot__eye, .bot[data-state=replying] .bot__smile { opacity: 0; }
.bot[data-state=replying] .bot__happy { opacity: 1; }
.bot[data-state=replying] .bot__mouth { opacity: 1; animation: bot-talk 0.22s ease-in-out infinite alternate; }
@keyframes bot-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes bot-blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@keyframes bot-snow { 0% { transform: translateY(-4px); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateY(7px); opacity: 0; } }
@keyframes bot-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes bot-swirl { from { transform: translate(-3px, -3px); } to { transform: translate(3px, 3px); } }
@keyframes bot-light { 0%, 66% { opacity: 0.25; } 33% { opacity: 1; } }
@keyframes bot-talk { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }

/* The trip card: an 80s lift ticket that fills in, and opens the matching question when tapped. */

/* The trip: one line that always shows what we know, opening into the full lift pass. */

.pass-slot { position: relative; z-index: 5; background: var(--powder); border-bottom: 1px solid var(--line); }
.trip__bar {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px;
  list-style: none; cursor: pointer; font-size: var(--step--1);
}
.trip__bar::-webkit-details-marker { display: none; }
.trip__bar:hover { background: var(--snow); }
.trip__label { flex: none; font-weight: 700; color: var(--magenta-deep); }
.trip__summary { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip__missing { flex: none; padding: 2px 8px; border-radius: var(--radius-chip); background: var(--snow); color: var(--teal-ink); font-weight: 700; font-size: 12px; }
.trip__toggle { flex: none; width: 9px; height: 9px; margin: 0 4px 4px; border-right: 2px solid var(--night); border-bottom: 2px solid var(--night); transform: rotate(45deg); transition: transform 0.15s; }
.trip[open] .trip__toggle { transform: rotate(-135deg); margin-top: 6px; }
.trip__panel { position: absolute; top: 100%; left: 12px; right: 12px; padding-top: 6px; }
/* Open, the card covers the bar rather than sitting below it. */
.trip[open] .trip__panel { top: 0; }
/* It swings down like a lift pass on a clip, and flips back up when put away. */
.trip[open] .pass { transform-origin: 50% 0; animation: pass-swing-in 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
.trip[open].trip--closing .pass { animation: pass-swing-out 0.16s ease-in forwards; }
@keyframes pass-swing-in {
  0% { opacity: 0; transform: translateY(-14px) rotate(-7deg) scale(0.92); }
  60% { opacity: 1; transform: translateY(2px) rotate(2deg) scale(1.01); }
  100% { transform: none; }
}
@keyframes pass-swing-out { to { opacity: 0; transform: translateY(-12px) rotate(4deg) scale(0.94); } }
.pass__done {
  position: absolute; top: 12px; right: 12px; padding: 4px 12px; border: 1.5px solid var(--night); border-radius: var(--radius-chip);
  background: #FFFFFF; font-size: var(--step--1); font-weight: 700;
}
.pass__done:hover { background: var(--night); color: var(--powder); }
.pass-slot--updated .trip__bar { animation: trip-updated 1.6s ease-out; }
@keyframes trip-updated { from { background: #FFF1C7; } to { background: transparent; } }

.pass {
  position: relative; background: #FFFFFF; border-radius: 10px;
  padding: 18px 16px 12px; border-top: 5px solid var(--magenta);
  box-shadow: 0 1px 0 var(--line), var(--lift);
}
.pass__hint { margin: 0 0 10px; font-size: 12px; color: var(--night-soft); }
.pass__hole { position: absolute; top: 7px; left: 50%; width: 34px; height: 8px; margin-left: -17px; border-radius: 4px; background: var(--night); }
.pass__title { margin: 0; font-family: var(--display); font-size: var(--step-0); font-weight: 400; }
.pass__destination { margin-left: 6px; font-family: var(--text); font-size: var(--step--1); font-weight: 700; color: var(--magenta-deep); }
.pass__lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; margin: 0; }
.pass__line { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 6px; align-items: start; }
.pass__line dt { padding-top: 3px; font-size: 12px; color: var(--night-soft); }
.pass__line dd { margin: 0; min-width: 0; }
.pass__edit {
  border: 0; background: none; padding: 4px 2px; margin: -4px -2px; min-height: 32px; text-align: left; max-width: 100%;
  font-weight: 700; font-size: var(--step--1); line-height: 1.35;
  text-decoration: underline dotted var(--line); text-underline-offset: 3px;
}
.pass__edit:hover { color: var(--magenta); text-decoration-color: currentColor; }
.pass__edit--empty { color: var(--teal-ink); font-weight: 700; }
.pass__wants { margin: 6px 0 0; font-size: 12px; color: var(--night-soft); }
.pass__barcode {
  height: 22px; border-radius: 2px; margin-top: 10px;
  background: repeating-linear-gradient(90deg, var(--night) 0 2px, transparent 2px 4px, var(--night) 4px 7px, transparent 7px 9px, var(--night) 9px 10px, transparent 10px 13px);
  opacity: 0.85;
}

/* Chat */

.chat__log {
  flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 18px 16px; list-style: none;
  display: flex; flex-direction: column; gap: 12px; background: #FFFFFF;
}

.bubble { max-width: 90%; }
.bubble p { margin: 0 0 0.6em; }
.bubble p:last-child { margin-bottom: 0; }
.bubble--agent { align-self: flex-start; background: var(--snow); padding: 10px 14px; border-radius: 4px 16px 16px 16px; }
.bubble--agent:empty { display: none; }
.typing { display: flex; align-items: flex-end; gap: 8px; align-self: flex-start; animation: typing-in 0.2s ease-out; }
.typing__bubble {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 4px 16px 16px 16px;
  background: #FFF8E1; border: 2px solid var(--night); box-shadow: 3px 3px 0 var(--sun); font-size: var(--step--1); font-weight: 700;
}
.typing__dots { display: inline-flex; gap: 4px; }
.typing__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--magenta); animation: typing-dot 1s ease-in-out infinite; }
.typing__dots i:nth-child(2) { animation-delay: 0.15s; }
.typing__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes typing-in { from { opacity: 0; transform: translateY(6px); } }
.bubble--user {
  align-self: flex-end; background: var(--night); color: var(--powder);
  padding: 9px 14px; border-radius: 16px 16px 4px 16px;
}

.chat__footer { padding: 10px 16px 14px; border-top: 1px solid var(--line); background: var(--powder); }

.chat__replies { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 10px; }
.chat__replies:empty { display: none; }
.reply {
  border: 2px solid var(--night); background: #FFFFFF;
  padding: 6px 14px; border-radius: var(--radius-chip);
  font-weight: 600; font-size: var(--step--1); line-height: 1.3; text-align: left;
}
.reply:first-child { background: var(--sun); }
.reply:hover { background: var(--night); color: var(--powder); }

.composer { display: flex; gap: 8px; align-items: flex-end; }
.composer__input {
  flex: 1; resize: none; font: inherit; color: inherit;
  border: 2px solid var(--control-border); border-radius: 14px; padding: 10px 12px;
  background: #FFFFFF; max-height: 160px;
}
.composer__input:focus { border-color: var(--night); }
.composer__send { border: 0; border-radius: 14px; padding: 12px 18px; background: var(--magenta); color: #FFFFFF; font-weight: 700; }
.composer__send:hover { background: var(--magenta-deep); }
.composer__send:disabled { background: var(--line); color: var(--night-soft); cursor: default; }

/* Structured questions */

.chat__ask { align-self: stretch; }
.ask {
  position: relative; display: grid; gap: 12px; padding: 14px;
  background: #FFFFFF; border: 2px solid var(--night); border-radius: 4px 16px 16px 16px;
  box-shadow: 4px 4px 0 var(--sun);
}
.ask__title { margin: 0; padding-right: 48px; min-height: 44px; display: flex; align-items: center; font-size: var(--step-0); }
.ask__fields { display: grid; gap: 12px; padding: 2px; }
.ask__preference { display: grid; gap: 10px; padding: 12px; border-radius: 10px; background: var(--snow); }
.ask__preference[hidden] { display: none; }
.ask__field select { width: 100%; }
.ask__actions { display: grid; gap: 6px; justify-items: start; padding-top: 10px; border-top: 1px solid var(--line); }
.ask__actions:not(:has(button, .ask__error:not(:empty))) { display: none; }
.ask__error { margin: 0; color: var(--magenta-deep); font-weight: 700; font-size: var(--step--1); }
.ask__error:empty { display: none; }
.ask__amount { display: inline-flex !important; grid-template-columns: none; align-items: center; gap: 4px; font-family: var(--display); font-size: var(--step-1) !important; }
.ask__amount input { width: 7ch; font: inherit; padding: 4px 8px; border: 2px solid var(--control-border); border-radius: 8px; }
.ask__hint { margin: -6px 0 0; font-size: var(--step--1); color: var(--night-soft); }
.ask__close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--snow); font-size: 22px; line-height: 1; }
.ask__submit { justify-self: start; }
.ask__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ask label, .ask__inline { display: grid; gap: 4px; font-size: var(--step--1); font-weight: 600; }
.ask input[type=date], .ask select { font: inherit; padding: 8px 10px; border: 2px solid var(--control-border); border-radius: 10px; background: #FFFFFF; }
.ask__inline { grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.ask__ages { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.ask__ages:empty { display: none; }
.ask__group { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ask__group legend { width: 100%; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--night-soft); }
.ask__range { display: grid; gap: 6px; }
.ask__range span { font-family: var(--display); font-size: var(--step-1); }
.ask__range input { accent-color: var(--magenta); }

.stepper { display: grid; grid-template-columns: 1fr 40px 36px 40px; align-items: center; gap: 6px; }
.stepper__label { font-weight: 700; }
.stepper__label small { display: block; font-weight: 400; color: var(--night-soft); }
.stepper__button { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--night); background: #FFFFFF; font-size: 20px; line-height: 1; }
.stepper__button:hover { background: var(--night); color: var(--powder); }
.stepper output { text-align: center; font-family: var(--display); font-size: var(--step-1); }

.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.choices:has(small) { grid-template-columns: minmax(0, 1fr); }
.choices:has(small) .choice span { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 12px; }
.choices:has(small) .choice small { text-align: right; }
.choice { position: relative; display: block !important; }
.choice input { position: absolute; opacity: 0; }
.choice span {
  display: block; padding: 8px 10px; border: 2px solid var(--control-border); border-radius: 10px;
  font-weight: 700; font-size: var(--step--1); cursor: pointer; background: #FFFFFF;
}
.choice small { display: block; font-weight: 400; color: var(--night-soft); }
.choice input:checked + span { border-color: var(--magenta); background: #FDE6F2; }
.choice input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 2px; }
.choice--check span { padding: 6px 10px; font-weight: 600; }
button.choice { width: 100%; padding: 0; border: 0; background: none; text-align: left; }
button.choice:hover span { border-color: var(--night); }
button.choice[aria-pressed=true] span { border-color: var(--magenta); background: #FDE6F2; }
button.choice:focus-visible { outline: none; }
button.choice:focus-visible span { outline: 3px solid var(--sun); outline-offset: 2px; }
.choices--nights { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choices--nights .choice span { text-align: center; font-size: var(--step-0); padding: 10px; }
.ask__custom { display: grid; gap: 10px; justify-items: start; }
.ask__custom .ask__row { width: 100%; }
.ask__chosen { margin: 0; font-weight: 700; color: var(--teal-ink); }
.ask [data-back] { justify-self: start; padding: 4px 0; }

/* Display */

.display { display: flex; flex-direction: column; min-height: 0; background: var(--snow); }

.display__bar {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 24px;
  background: var(--snow); border-bottom: 1px solid var(--line);
}
.display__back { border: 0; background: none; padding: 4px 8px 4px 0; font-weight: 700; color: var(--night-soft); }
.display__back:hover { color: var(--magenta); }
.display__title { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--step-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.display__stage { position: relative; flex: 1; min-height: 0; display: flex; overflow: hidden; }
.display__body { position: relative; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }

/* A place to stay slides over the list it was opened from. */
.sheet { position: absolute; inset: 0; z-index: 5; }
.sheet__scrim { position: absolute; inset: 0; background: rgb(20 33 61 / 0.35); opacity: 0; transition: opacity 0.25s; cursor: pointer; }
.sheet__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, max(calc(100% - 64px), 320px)); overflow-y: auto;
  background: var(--snow); box-shadow: -12px 0 32px -12px rgb(20 33 61 / 0.5);
  transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sheet--open .sheet__scrim { opacity: 1; }
.sheet--open .sheet__panel { transform: none; }
.sheet__bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; min-height: 44px; padding: 6px 24px; background: var(--snow); border-bottom: 1px solid var(--line); }
.sheet__close { border: 0; background: none; padding: 6px 8px 6px 0; font-weight: 700; color: var(--night-soft); }
.sheet__close:hover { color: var(--magenta); }
.sheet .view { padding-top: 16px; }
.display__body > turbo-frame { flex: 1 0 auto; display: flex; flex-direction: column; }
.display__body > turbo-frame > .view { flex: 1 0 auto; }
.map-holder { display: none; }

.view { padding: 24px; max-width: 1200px; }
.view:has(.globe-view) { padding: 0; max-width: none; display: flex; }
.view__header { margin-bottom: 16px; }
.view__title { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--step-2); line-height: 1.25; }
.view__lede { margin: 6px 0 0; max-width: 70ch; color: var(--night-soft); }
.section-title { margin: 28px 0 6px; font-size: var(--step-1); scroll-margin-top: 60px; }
.section-lede { margin: 0 0 10px; color: var(--night-soft); font-size: var(--step--1); }
.empty { padding: 16px; background: var(--powder); border-radius: var(--radius-card); }

/* The map, moved into whichever view needs it */

.globe { position: relative; width: 100%; height: 100%; }
.globe__map { position: absolute; inset: 0; }
.globe__credit { position: absolute; right: 8px; bottom: 4px; margin: 0; font-size: 11px; color: var(--night-soft); z-index: 1; }
.globe__credit a { color: inherit; }
.maplibregl-ctrl-group { border-radius: 10px; box-shadow: var(--lift); }

.map-slot { position: relative; border-radius: var(--radius-card); overflow: hidden; background: var(--night); }
.map-slot--globe { position: absolute; inset: 0; border-radius: 0; }
.map-slot--region { height: 260px; margin-bottom: 16px; }
.map-slot--resort { height: 460px; }

.globe-view { position: relative; flex: 1; min-height: 520px; overflow: hidden; background: #0E1830; }
.map-slot--globe { background: #0E1830; }
.map-slot--globe .maplibregl-ctrl-top-right, .map-slot--globe .maplibregl-ctrl-bottom-right { display: none; }

.globe-view__intro { position: absolute; top: 20px; left: 24px; right: 24px; z-index: 2; color: var(--powder); pointer-events: none; }
.globe-view__title { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--step-2); line-height: 1.2; text-shadow: 0 2px 12px rgb(14 24 48 / 0.8); }
.globe-view__lede { margin: 6px 0 0; max-width: 46ch; color: #C9D4E8; font-size: var(--step--1); }
.globe-view__regions { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; pointer-events: auto; }
.region-chip {
  padding: 5px 12px; border: 1.5px solid rgb(247 249 252 / 0.45); border-radius: var(--radius-chip);
  background: rgb(14 24 48 / 0.55); color: var(--powder); font-size: var(--step--1); font-weight: 700;
}
.region-chip:hover { border-color: var(--sun); color: var(--sun); }
.globe-view :focus-visible { outline-color: var(--sun); }

/* The tour's card: a place, why it's worth a look, and a way in. */
.spotlight { position: absolute; left: 24px; bottom: 24px; z-index: 2; width: 330px; }
.spotlight__card {
  overflow: hidden; background: #FFFFFF; border: 2px solid var(--night); border-radius: var(--radius-card);
  box-shadow: 5px 5px 0 var(--sun); animation: spotlight-in 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.spotlight__card--deal { box-shadow: 5px 5px 0 var(--magenta); }
@keyframes spotlight-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
.spotlight__image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--line); }
.spotlight__body { display: grid; gap: 4px; padding: 12px 14px 14px; }
.spotlight__body p { margin: 0; }
.spotlight__label { justify-self: start; padding: 2px 10px; border-radius: var(--radius-chip); background: var(--teal); color: #FFFFFF; font-size: 12px; font-weight: 700; }
.spotlight__card--deal .spotlight__label { background: var(--magenta); }
.spotlight__title { margin: 2px 0 0; font-family: var(--display); font-weight: 400; font-size: var(--step-0); line-height: 1.3; }
.spotlight__where { font-size: var(--step--1); color: var(--night-soft); }
.spotlight__line { font-size: var(--step--1); }
.spotlight__price { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 2px !important; }
.spotlight__price .save { margin: 0; }
.spotlight__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; }
.spotlight__actions .link-button { padding: 4px 0; }
.spotlight__controls { display: flex; align-items: center; gap: 4px; margin-top: 10px; color: var(--powder); font-size: 12px; }
.spotlight__step, .spotlight__pause {
  min-width: 32px; min-height: 32px; padding: 0 8px; border: 1.5px solid rgb(247 249 252 / 0.45); border-radius: var(--radius-chip);
  background: rgb(14 24 48 / 0.6); color: var(--powder); font-weight: 700;
}
.spotlight__step:hover, .spotlight__pause:hover { border-color: var(--sun); color: var(--sun); }
.spotlight__count { min-width: 52px; text-align: center; }
.spotlight__pause { margin-left: 4px; }
.spotlight__timer { flex: 1; height: 3px; margin-left: 8px; border-radius: 2px; background: rgb(247 249 252 / 0.2); overflow: hidden; }
.spotlight__timer i { display: block; height: 100%; background: var(--sun); transform-origin: left; animation: spotlight-timer 7s linear both; }
.spotlight-waiting .spotlight__timer i { animation-play-state: paused; }
@keyframes spotlight-timer { from { transform: scaleX(0); } }

.map-pin.map-pin--spot { background: var(--magenta); border-color: var(--night); color: #FFFFFF; z-index: 4; animation: spot-pop 0.4s cubic-bezier(0.34, 1.6, 0.64, 1); }
.map-pin.map-pin--spot::after { border-top-color: var(--night); }
.map-pin--spot::before {
  content: ""; position: absolute; left: 50%; bottom: -16px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  border: 2px solid var(--sun); animation: spot-ring 1.6s ease-out infinite;
}
@keyframes spot-pop { from { transform: translateY(8px) scale(0.6); opacity: 0; } }
@keyframes spot-ring { from { transform: scale(0.5); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }

@container (max-width: 620px) {
  .globe-view__intro { top: 14px; left: 16px; right: 16px; }
  .globe-view__title { font-size: var(--step-1); }
  .globe-view__regions { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; }
  .region-chip { white-space: nowrap; }
  .spotlight { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .spotlight__image { aspect-ratio: 5 / 2; }
}

.map-legend {
  position: absolute; left: 10px; bottom: 10px; z-index: 1; max-width: 300px; padding: 8px 12px;
  background: rgb(255 255 255 / 0.94); border-radius: 10px; font-size: 12px;
}
.map-legend ul { display: grid; grid-template-columns: repeat(2, auto); gap: 2px 12px; margin: 6px 0 0; padding: 0; list-style: none; }
.map-legend__title { cursor: pointer; font-weight: 700; }
.map-legend:not([open]) { padding: 6px 10px; }
.map-legend__note { margin: 6px 0 0; color: var(--night-soft); }
.map-slot__toggle { position: absolute; top: 10px; left: 10px; z-index: 1; }
.map-legend li { display: flex; align-items: center; gap: 8px; }
.map-legend__run { width: 18px; height: 4px; border-radius: 2px; }
.map-legend__run--novice { background: #2E9E4F; }
.map-legend__run--easy { background: var(--piste-easy); }
.map-legend__run--freeride { background: #E07A00; }
.map-legend__run--intermediate { background: var(--piste-intermediate); }
.map-legend__run--advanced { background: var(--piste-advanced); }
.map-legend__lift { width: 18px; border-top: 2px dashed var(--night); }
.map-legend__pin { width: 10px; height: 10px; border-radius: 50%; background: var(--magenta); border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px var(--magenta); }

.map-pin {
  display: grid; padding: 3px 8px; border-radius: 8px; background: #FFFFFF; color: var(--night);
  font-size: 12px; line-height: 1.25; text-decoration: none; white-space: nowrap;
  box-shadow: 0 2px 6px rgb(20 33 61 / 0.35); border: 2px solid var(--night);
}
.map-pin::after { content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--night); border-bottom: 0; }
.map-pin__label { font-weight: 700; }
.map-pin__details { color: var(--night-soft); }
.map-pin--stay { border-color: var(--magenta); }
.map-pin--stay::after { border-top-color: var(--magenta); }
.map-pin--focus { background: var(--magenta); color: #FFFFFF; z-index: 2; }
.map-pin--focus .map-pin__details { color: #FFFFFF; }
.map-pin--village { background: var(--night); color: var(--powder); }
.map-pin--place { border-color: var(--teal); }
.map-pin--place::after { border-top-color: var(--teal); }
a.map-pin:hover { background: var(--sun); color: var(--night); }
.map-pin--compact .map-pin__label { display: none; }
.map-pin--compact:hover, .map-pin--compact:focus-visible { z-index: 3; }
.map-pin--compact:hover .map-pin__label, .map-pin--compact:focus-visible .map-pin__label { display: block; }
.map-pin--compact:hover .map-pin__details, .map-pin--compact:focus-visible .map-pin__details { display: none; }

/* Comparison tables */

.view { container-type: inline-size; }
.compare { background: var(--powder); border-radius: var(--radius-card); }
/* Tables scroll sideways only when their columns can't fit, which costs the sticky header. */
@container (max-width: 760px) { .compare { overflow-x: auto; } }
@container (max-width: 910px) { .compare:has(thead th:nth-child(6)) { overflow-x: auto; } }
@container (max-width: 1060px) { .compare:has(thead th:nth-child(7)) { overflow-x: auto; } }
@container (max-width: 1210px) { .compare:has(thead th:nth-child(8)) { overflow-x: auto; } }
.compare:has(thead th:nth-child(9)) { overflow-x: auto; }
.compare__names th { position: sticky; top: 0; z-index: 2; background: var(--powder); box-shadow: 0 1px 0 var(--line); }
.compare__names .compare__corner { left: 0; z-index: 3; }
.compare__table .compare__photos td { position: relative; padding-bottom: 0; border-bottom: 0; }
.compare__photos .pick-badge { position: absolute; top: 18px; left: 20px; margin: 0; box-shadow: 0 2px 6px rgb(20 33 61 / 0.3); }
.compare__photos .compare__corner { position: sticky; left: 0; z-index: 1; }
.compare__table tfoot th, .compare__table tfoot td { border-bottom: 0; }
.compare__table { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; }
.compare__table .compare__corner { width: 130px; }
.compare__table:has(.compare__names th:nth-child(4)) { min-width: 580px; }
.compare__table:has(.compare__names th:nth-child(5)) { min-width: 730px; }
.compare__table:has(.compare__names th:nth-child(6)) { min-width: 880px; }
.compare__table:has(.compare__names th:nth-child(7)) { min-width: 1030px; }
.compare__table:has(.compare__names th:nth-child(8)) { min-width: 1180px; }
.compare__table:has(.compare__names th:nth-child(9)) { min-width: 1330px; }
.compare__table th, .compare__table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-size: var(--step--1); min-width: 150px; }
.compare__table tbody th { position: sticky; left: 0; z-index: 1; min-width: 120px; width: 120px; background: var(--powder); color: var(--night-soft); font-weight: 600; }
.compare__corner { position: sticky; left: 0; background: var(--powder); }
.compare__head { vertical-align: bottom; }
.compare__photos .card__image { height: auto; aspect-ratio: 3 / 2; border-radius: 8px; }
.compare__photos > :first-child { border-top-left-radius: var(--radius-card); }
.compare__photos > :last-child { border-top-right-radius: var(--radius-card); }

/* Extra comparison rows drop in one after another, flashing yellow as they land. */
.compare__more.is-entering td, .compare__more.is-entering th { animation: row-in 0.36s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(var(--row) * 45ms); }
.compare__more.is-entering td { animation-name: row-in, row-flash; animation-duration: 0.36s, 1.2s; }
.compare__more.is-leaving td, .compare__more.is-leaving th { animation: row-out 0.16s ease-in both; animation-delay: calc((var(--rows) - var(--row)) * 20ms); }
@keyframes row-in { from { opacity: 0; transform: translateY(-14px) scaleY(0.6); } }
@keyframes row-flash { from { background-color: #FFE89A; } }
@keyframes row-out { to { opacity: 0; transform: translateY(-10px) scaleY(0.7); } }
.reveal__chevron { display: inline-block; margin-left: 4px; text-decoration: none; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
[aria-expanded=true] .reveal__chevron { transform: rotate(180deg); }
.compare__name { display: block; font-size: var(--step-0); font-weight: 700; color: var(--night); }
.compare__name:hover { color: var(--magenta); }
.compare__where { display: block; font-weight: 400; color: var(--night-soft); }
.compare__tagline { font-weight: 600; }
.compare__fact { color: var(--night); }
.compare__list { margin: 0; padding-left: 16px; }
.compare__actions { display: grid; gap: 8px; justify-items: start; }
.compare__actions form { margin: 0; }

.meter { display: inline-flex; gap: 3px; vertical-align: middle; }
.meter i { width: 14px; height: 8px; border-radius: 2px; background: var(--line); transform: skewX(-20deg); }
.meter i.meter__on { background: var(--magenta); }
.meter--empty { font-size: 12px; color: var(--night-soft); }

.price { margin: 0; font-size: var(--step--1); }
.price strong { font-size: var(--step-1); font-weight: 700; }
.price__basis { color: var(--night-soft); }
.price__each { margin: 2px 0 0; font-size: var(--step--1); color: var(--night-soft); }
.price--guide strong { font-size: var(--step-0); }
.price__was { color: var(--night-soft); margin-left: 4px; }
.price__note { margin: 2px 0 0; font-size: 12px; color: var(--night-soft); }
.price__total { margin: 0; font-family: var(--display); font-size: var(--step-1); line-height: 1.15; }
.price__unit { font-family: var(--text); font-size: var(--step--1); color: var(--night-soft); }
.price--guide .price__total { font-size: var(--step-0); }
.save { display: inline-block; margin: 4px 0 0; padding: 1px 8px; border-radius: var(--radius-chip); background: #D9F5F2; color: var(--teal-ink); font-size: 12px; font-weight: 700; }

/* snowglobe's pick, and how each option fits what this group asked for. */

.pick-note {
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 16px; max-width: 70ch;
  background: #FFF8E1; border: 2px solid var(--night); border-radius: 4px 16px 16px 16px; box-shadow: 4px 4px 0 var(--sun);
}
.pick-note p { margin: 0; }
.pick-badge { display: inline-block; margin: 0 0 6px; padding: 2px 10px; border-radius: var(--radius-chip); background: var(--sun); color: var(--night); font-size: 12px; font-weight: 700; }
.pick-note--card { grid-column: 1 / -1; margin: 0; max-width: none; padding: 8px 14px; gap: 10px; border: 0; border-bottom: 2px solid var(--night); border-radius: 0; box-shadow: none; font-size: 0.9375rem; }
.stay--pick { border: 2px solid var(--night); box-shadow: 4px 4px 0 var(--sun); }
.stay__trip { margin: 6px 0 0; font-size: var(--step--1); color: var(--night-soft); }
.stay__airport { display: block; font-weight: 700; color: var(--teal-ink); }
.fit-points { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 6px 0 0; padding: 0; list-style: none; font-size: var(--step--1); color: var(--night-soft); }
.fit-points--large { display: grid; gap: 6px; margin-top: 4px; font-size: var(--step-0); color: var(--night); }
.fit-points__item::before { content: "·"; display: inline-block; width: 1em; font-weight: 700; }
.fit-points__item--good { color: var(--teal-ink); font-weight: 700; }
.fit-points__item--good::before { content: "✓"; }
.fit-points__item--warn { color: var(--magenta-deep); font-weight: 700; }
.fit-points__item--warn::before { content: "!"; }
.matters { display: block; margin-top: 2px; font-size: 11px; font-weight: 700; color: var(--magenta-deep); }
.best-mark { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-chip); background: #D9F5F2; color: var(--teal-ink); font-size: 11px; font-weight: 700; vertical-align: middle; }
.compare__table .compare__cell--pick { background: #FFF8E1; }
.compare__photos .compare__cell--pick { box-shadow: inset 0 4px 0 var(--sun); }
.compare__names .compare__cell--pick { box-shadow: 0 1px 0 var(--line); }
.notice { margin: 10px 0 0; max-width: 70ch; padding: 10px 14px; font-size: var(--step--1); font-weight: 600; background: #FDE6F2; border-left: 4px solid var(--magenta); border-radius: 6px; }
.trust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 14px 0 0; font-size: 12px; color: var(--night-soft); }
.trust img { height: 24px; width: auto; }
.browse__list .meter { margin-left: 6px; }
.list-note { margin: 10px 0 0; font-size: var(--step--1); color: var(--night-soft); }
.departures__row--selected td { background: #FFF8E1; }

.piste-bar { display: block; width: 100%; height: 6px; border-radius: 3px; overflow: hidden; margin: 6px 0 2px; background: var(--line); }
.piste-bar__easy { fill: var(--piste-easy); }
.piste-bar__intermediate { fill: var(--piste-intermediate); }
.piste-bar__advanced { fill: var(--piste-advanced); }

.card__image { display: block; width: 100%; height: 120px; object-fit: cover; background: var(--line); }
.card__image--empty { background: linear-gradient(160deg, var(--snow), var(--line)); }

/* Resort page */

.resort__hero { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 20px; margin-bottom: 20px; }
.resort__hero .card__image { height: 100%; min-height: 220px; border-radius: var(--radius-card); }
.resort__where { margin: 0 0 4px; font-size: var(--step--1); color: var(--night-soft); }
.resort__where a { color: inherit; }
.resort__tagline { margin: 6px 0; font-weight: 700; font-size: var(--step-1); }
.resort__scores { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.score-card { padding: 12px 14px; background: var(--powder); border-radius: var(--radius-card); align-self: start; }
.score-card__label { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; font-size: 0.9375rem; font-weight: 700; cursor: pointer; list-style: none; }
.score-card__label > span:first-child { grid-column: 1 / -1; }
.score-card__label::-webkit-details-marker { display: none; }
.score-card__label::after { content: "Why?"; font-size: 12px; font-weight: 600; color: var(--teal-ink); text-decoration: underline; }
.score-card[open] .score-card__label::after { content: "Hide"; }
.score-card__notes { margin: 8px 0 0; font-size: var(--step--1); color: var(--night-soft); }
.facts-row { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 20px 0 0; padding: 14px 16px; background: var(--powder); border-radius: var(--radius-card); }
.facts-row dt { font-size: 12px; color: var(--night-soft); }
.facts-row dd { margin: 0; font-weight: 700; min-width: 90px; }
.resort__notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.resort__notes ul { margin: 0; padding-left: 18px; }

/* Places to stay and holiday options */

.stay-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stay {
  position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; column-gap: 16px;
  background: #FFFFFF; border: 2px solid transparent; border-radius: var(--radius-card); overflow: hidden;
  transition: border-color 0.15s;
}
.stay:hover { border-color: var(--night); }
.stay .card__image { height: 100%; min-height: 104px; }
.stay__body { padding: 12px 0; }
.stay__name { margin: 0; font-size: var(--step-0); }
.stay__link { color: var(--night); text-decoration: none; }
.stay__link::after { content: ""; position: absolute; inset: 0; }
.stay__link:focus-visible { outline: none; }
.stay:has(.stay__link:focus-visible) { outline: 3px solid var(--night); outline-offset: 2px; }
.stay__meta { margin: 1px 0 0; font-size: var(--step--1); color: var(--night-soft); }
.stay__side { display: grid; align-content: space-between; justify-items: end; gap: 4px; padding: 12px 14px 4px; text-align: right; }
.stay__side .compare-toggle { position: relative; z-index: 1; min-height: 36px; }
.compare-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; font-size: var(--step--1); font-weight: 600; cursor: pointer; }
.compare-toggle:has(input:disabled) { opacity: 0.5; cursor: default; }
.compare-toggle input { width: 18px; height: 18px; accent-color: var(--magenta); }

.compare-bar {
  position: sticky; bottom: 12px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding: 10px 14px; background: var(--night); color: var(--powder); border-radius: var(--radius-card); box-shadow: var(--lift);
}

/* Place to stay page */

.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 150px 150px; gap: 6px; margin-bottom: 16px; border-radius: var(--radius-card); overflow: hidden; }
.gallery__image { width: 100%; height: 100%; object-fit: cover; }
.gallery__image--main { grid-row: span 2; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.chips li { font-size: 12px; background: var(--powder); border: 1px solid var(--line); padding: 3px 10px; border-radius: var(--radius-chip); }

.departures { background: var(--powder); border-radius: var(--radius-card); padding: 6px 14px 14px; }
.departures__table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.departures__table th { text-align: left; font-weight: 600; color: var(--night-soft); padding: 8px 6px; }
.departures__table td { padding: 8px 6px; border-top: 1px solid var(--line); }
.departures__table a { font-weight: 700; color: var(--teal-ink); }
.departures__date tr:first-child > * { border-top: 2px solid var(--line); }
.departures__table .departures__when { vertical-align: top; padding: 8px 6px; border-top: 1px solid var(--line); font-weight: 700; color: var(--night); }
.departures__total { font-weight: 700; }
.departures__row--other td { color: var(--night-soft); }
.departures__row--other .departures__total { font-weight: 400; }
.departures__row--other a { font-weight: 600; }
.yours-mark { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-chip); background: var(--night); color: var(--powder); font-size: 11px; font-weight: 700; vertical-align: middle; }
.departures__each { display: block; font-size: 12px; color: var(--night-soft); }

.booking-summary { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; background: var(--powder); border-radius: var(--radius-card); overflow: hidden; }
.booking-summary .card__image { height: 100%; }
.booking-summary > div { padding: 18px 18px 18px 0; display: grid; gap: 10px; align-content: start; }
.booking-summary p { margin: 0; }

.button--small { padding: 6px 14px; border-radius: var(--radius-chip); font-size: var(--step--1); }

/* Supporting pieces */

.link-button { border: 0; background: none; padding: 8px 0; font-weight: 700; color: var(--teal-ink); text-decoration: underline; }
.inclusions { margin: 10px 0 0; max-width: 70ch; padding: 10px 14px; font-size: var(--step--1); background: var(--powder); border-left: 4px solid var(--sun); border-radius: 6px; }
.search-details { margin-top: 6px; font-size: var(--step--1); color: var(--night-soft); }
.search-details summary { cursor: pointer; font-weight: 700; color: var(--teal-ink); }
.search-details p { margin: 6px 0 0; max-width: 70ch; }
.provenance { margin: 10px 0 0; font-size: var(--step--1); color: var(--night-soft); max-width: 80ch; }
.provenance a { color: inherit; }
.meter__value { margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--night); }
.meter__marks { display: inline-flex; gap: 3px; }

.chat__jump { justify-self: center; margin: 0 auto 6px; display: block; border: 0; border-radius: var(--radius-chip); padding: 6px 14px; background: var(--night); color: var(--powder); font-weight: 700; font-size: var(--step--1); }
.chat__failure { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; padding: 8px 12px; background: #FDE6F2; border-left: 4px solid var(--magenta-deep); border-radius: 6px; font-size: var(--step--1); }


.compare-bar__status { margin: 0; flex: 1; }
.compare-bar__clear { color: var(--powder); }


.browse { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 24px; }
.browse__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.browse__list a { font-weight: 700; color: var(--night); }
.browse__tagline { display: block; font-size: var(--step--1); color: var(--night-soft); }

.pdp { container-type: inline-size; }
.pdp__head { margin-bottom: 14px; }
.pdp__meta { margin: 4px 0 0; color: var(--night-soft); }
.pdp__layout { display: grid; gap: 4px 28px; }
.pdp__main > section:first-child .section-title, .pdp__main > .pick-note + section .section-title { margin-top: 8px; }
.pdp__main .pick-note { margin: 4px 0 0; }
.pdp__buy { display: grid; gap: 8px; align-content: start; padding: 16px; background: #FFFFFF; border: 2px solid var(--night); border-radius: var(--radius-card); box-shadow: 4px 4px 0 var(--night); }
.pdp__buy .price__total { font-size: var(--step-2); }
.pdp__trip { margin: 0; font-weight: 700; }
.pdp__cta { width: 100%; }
.pdp__buy form { margin: 0; }
.pdp__buy .form__note { margin: 0; font-size: 12px; }
.pdp__buy .trust { margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.pdp__change { font-size: var(--step--1); font-weight: 700; color: var(--teal-ink); }
.pdp__none { margin: 0; }
.pdp__outside { margin: 0; font-size: var(--step--1); font-weight: 700; color: var(--magenta-deep); }
.pdp__about { margin: 0; max-width: 68ch; }
.pdp__more { margin-top: 8px; }
.pdp__more summary { cursor: pointer; font-size: var(--step--1); font-weight: 700; color: var(--teal-ink); }
.pdp__more[open] summary { margin-bottom: 6px; }
@container (min-width: 720px) {
  .pdp__layout { grid-template-columns: minmax(0, 1fr) 280px; }
  .pdp__buy { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: 60px; }
  .pdp__main { grid-column: 1; grid-row: 1; }
}
.gallery__item { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; }
.gallery__item--main { grid-row: span 2; }
.gallery__all { position: absolute; right: 10px; bottom: 10px; }
.gallery { position: relative; }
.lightbox { max-width: min(1100px, 94vw); padding: 12px; border: 0; border-radius: var(--radius-card); background: var(--night); color: var(--powder); }
.lightbox::backdrop { background: rgb(20 33 61 / 0.8); }
.lightbox__figure { margin: 0; }
.lightbox__image { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto; border-radius: 8px; }
.lightbox__caption { margin-top: 8px; font-size: var(--step--1); }
.lightbox__controls { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; counter-reset: step; }
.steps__step { counter-increment: step; padding: 10px 12px; border-radius: 10px; background: var(--snow); font-size: var(--step--1); }
.steps__step::before { content: counter(step) ". "; font-weight: 700; }
.steps__step strong { font-size: 0.9375rem; }
.steps__step span { display: block; color: var(--night-soft); }
.steps__step--current { background: var(--night); color: var(--powder); }
.steps__step--current span { color: rgb(247 249 252 / 0.8); }

/* Phone: one column at a time, switched with tabs. */

.tabs { display: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .display { display: none; }
  .app--display .side { display: none; }
  .app--display .display { display: flex; }
  .tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--night); }
  .tabs__tab { position: relative; padding: 12px; border: 0; background: none; color: var(--powder); font-weight: 700; }
  .app:not(.app--display) .tabs__tab:first-child, .app--display .tabs__tab:last-child { box-shadow: inset 0 -3px 0 var(--magenta); }
  .tabs__new { color: var(--sun); }
  .tabs { padding-bottom: env(safe-area-inset-bottom); }
  .view__title { font-size: 1.25rem; line-height: 1.35; }
  .view { padding: 16px; }
  .display__bar { padding: 8px 16px; }
  .pass__lines { grid-template-columns: 1fr; }
  .wordmark { gap: 8px; }
  .wordmark__name { font-size: var(--step-0); }
  .wordmark .bot { width: 38px; height: 38px; }
  .masthead__trust img { height: 20px; }
  .masthead__trust .abta-mark { height: 14px; }
  .resort__hero, .booking-summary { grid-template-columns: 1fr; }
  .booking-summary > div { padding: 0 16px 16px; }
  .stay { grid-template-columns: 110px minmax(0, 1fr); }
  .stay__side { grid-column: 1 / -1; grid-template-columns: 1fr auto; justify-items: start; align-items: center; padding-top: 0; text-align: left; }
  .gallery { grid-template-columns: 1fr; grid-template-rows: 200px; }
  .gallery__item:not(.gallery__item--main) { display: none; }
  .gallery__item--main { grid-row: auto; }
  .steps { grid-template-columns: 1fr; }
  .map-slot--resort { height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet__panel, .sheet__scrim, .reveal__chevron { transition: none; }
  .spotlight__card, .map-pin--spot, .map-pin--spot::before, .spotlight__timer i { animation: none !important; }
  .compare__more td, .compare__more th { animation: none !important; }
  .bot *, .pass-slot--updated .trip__bar, .typing, .typing__dots i, .trip .pass { animation: none !important; }
}

/* Content pages: booking */

.page { min-height: 100dvh; background: var(--powder); }

.page__masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--gutter); background: var(--night);
}
.page__masthead .masthead__trust { margin-right: 8px; }
.page__back { color: var(--powder); font-size: var(--step--1); }

.page__body { max-width: 1080px; margin: 0 auto; padding: 32px var(--gutter) 64px; }

.booking { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 40px; align-items: start; }
.booking__holiday { position: sticky; top: 24px; }
.booking__holiday .pass { transform: rotate(-1deg); }
.booking__title { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--step-1); line-height: 1.3; }
.booking__resort { margin: 0 0 12px; color: var(--night-soft); }
.booking__holiday .pass { padding-top: 24px; }
.booking__holiday .pass__lines { grid-template-columns: 1fr; margin-bottom: 10px; }
.booking__holiday .pass__line { grid-template-columns: 82px 1fr; font-size: var(--step--1); }
.booking__holiday .pass__line dd { font-weight: 700; }
.booking__total { margin: 0 0 12px; font-size: var(--step--1); color: var(--night-soft); }

.booking__heading { margin: 0 0 6px; font-family: var(--display); font-weight: 400; font-size: var(--step-2); line-height: 1.25; }
.booking__lede { margin: 0 0 24px; max-width: 60ch; }

.flash { padding: 10px 14px; border-radius: var(--radius-card); background: #DDF4F4; border-left: 4px solid var(--teal); }
.flash--alert { background: #FDE6F2; border-left-color: var(--magenta); }

.form { display: grid; gap: 28px; }
.form__group { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; }
.form__group legend { font-weight: 700; font-size: var(--step-1); margin-bottom: 8px; }
.form label { display: grid; gap: 4px; font-size: var(--step--1); font-weight: 600; }
.form input:not([type=checkbox]), .form textarea {
  font: inherit; font-weight: 400; color: inherit; padding: 10px 12px;
  border: 2px solid var(--control-border); border-radius: 10px; background: #FFFFFF; width: 100%;
}
.form input:focus, .form textarea:focus { border-color: var(--night); }
.form input[aria-invalid=true], .form textarea[aria-invalid=true] { border-color: var(--magenta-deep); }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.form__traveller { margin: 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); }
.form__traveller legend { padding: 0; margin-bottom: 8px; font-weight: 700; }
.form__traveller-label { margin: 0 0 8px; font-weight: 700; }
.form__optional { font-weight: 400; color: var(--night-soft); }
.form__terms { background: var(--snow); padding: 18px; border-radius: var(--radius-card); }
.form__terms p, .form__terms ul { margin: 0; }
.form__check { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: 10px; font-weight: 400 !important; font-size: var(--step-0) !important; }
.form__check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--magenta); }
.form__errors { padding: 12px 16px; border-radius: var(--radius-card); background: #FDE6F2; border-left: 4px solid var(--magenta); }
.form__errors p, .form__errors ul { margin: 0; }
.form__note { margin: 8px 0 0; font-size: var(--step--1); color: var(--night-soft); max-width: 52ch; }

.button {
  display: inline-block; border: 2px solid var(--night); background: var(--powder);
  padding: 10px 20px; border-radius: 14px; font-weight: 700; text-decoration: none; color: var(--night);
}
.button--primary { background: var(--magenta); border-color: var(--magenta); color: #FFFFFF; }
.button--primary:hover { background: var(--magenta-deep); border-color: var(--magenta-deep); }

.progress { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 0; counter-reset: step; }
.progress__step {
  counter-increment: step; position: relative; padding: 0 0 20px 44px; color: var(--night-soft);
}
.progress__step::before {
  content: counter(step); position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--line); background: var(--powder); font-weight: 700; font-size: var(--step--1);
}
.progress__step:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 30px; bottom: 0; width: 2px; background: var(--line); }
.progress__step--done { color: var(--night); }
.progress__step--done::before { content: "✓"; background: var(--teal); border-color: var(--teal); color: #FFFFFF; }
.progress__label { font-weight: 700; }
.progress__when { display: block; font-size: var(--step--1); color: var(--night-soft); }

@media (max-width: 860px) {
  .booking { grid-template-columns: 1fr; gap: 24px; }
  .booking__holiday { position: static; }
  .booking__holiday .pass { transform: none; }
}

/* Booking console */

.console { background: var(--snow); }
.console__bar { padding: 12px var(--gutter); background: var(--night); }
.console__body { max-width: 1200px; margin: 0 auto; padding: 24px var(--gutter) 64px; }
.console__title { font-family: var(--display); font-weight: 400; font-size: var(--step-2); margin: 0 0 12px; }
.console__subtitle { margin: 32px 0 8px; font-size: var(--step-1); }
.console__next { padding: 10px 14px; background: var(--powder); border-radius: var(--radius-card); border-left: 4px solid var(--teal); }
.console__next--overdue { border-left-color: var(--magenta); background: #FDE6F2; }
.console__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin: 16px 0; }

.panel { background: var(--powder); border-radius: var(--radius-card); padding: 16px 20px; margin-bottom: 16px; }
.panel h2 { margin: 0 0 10px; font-size: var(--step-1); }
.panel h3 { margin: 16px 0 6px; font-size: var(--step-0); }

.facts { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; margin: 0; }
.facts dt { color: var(--night-soft); }
.facts dd { margin: 0; }

.actions { display: grid; gap: 16px; justify-items: start; }
.action-form { display: grid; gap: 10px; max-width: 760px; width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-card); }
.action-form p { margin: 0; }
.action-form label { display: grid; gap: 4px; font-weight: 600; font-size: var(--step--1); }
.action-form input { font: inherit; padding: 8px 10px; border: 2px solid var(--line); border-radius: 8px; }
.action-form--danger { border-color: #F3B6D3; }

.table { width: 100%; border-collapse: collapse; background: var(--powder); border-radius: var(--radius-card); overflow: hidden; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: var(--step--1); color: var(--night-soft); font-weight: 600; }
.table__row--overdue td { background: #FDE6F2; }

.history { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: var(--step--1); }
.history time { color: var(--night-soft); margin-right: 6px; }

.copy-list { display: grid; gap: 2px; margin: 4px 0; }
.copy-list__row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--line); }
.copy-list__row dt { color: var(--night-soft); font-size: var(--step--1); }
.copy-list__row dd { margin: 0; white-space: pre-line; }
.copy-list__button { border: 1px solid var(--line); background: #FFFFFF; border-radius: 6px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.copy-list__button:hover { border-color: var(--night); }
.action-form__inline { display: grid; gap: 10px; }

[tabindex="-1"]:focus { outline: none; }

.progress__step--current { color: var(--night); }
.progress__step--current::before { border-color: var(--magenta); color: var(--magenta-deep); }
.pay-now { display: grid; gap: 10px; justify-items: start; margin: 8px 0 24px; padding: 18px; background: var(--powder); border: 2px solid var(--magenta); border-radius: var(--radius-card); }
.pay-now__action { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.pay-now__provider { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--step--1); color: var(--night-soft); }
.pay-now__logo { display: block; width: 120px; height: auto; }
.button--large { padding: 14px 26px; font-size: var(--step-1); }
.spinner { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 2px solid var(--line); border-top-color: var(--magenta); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }