/* FunToSee Island Ferry: product compositions (Lagoon Premium). Core tokens and recipes only; no review assets. */

/* ---------- Chrome: desktop top bar (≥960px) and native app header (<960px) ---------- */
/* Page glow (after Wix's hero, simplified): a soft sky glow from the logo's blue behind the top of every product page,
   fixed while content scrolls. Mixed into the page colour, so dark mode gets a dim version automatically. */
body[data-screen] .app{background:transparent}
/* Page glow: sits higher on phones so it frames the header instead of washing the first card. */
body[data-screen]::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(min(72rem,140vw) 34rem at 50% -9rem,color-mix(in srgb,var(--brand-primary) 30%,var(--bg)),transparent 72%),radial-gradient(min(36rem,90vw) 22rem at 94% 7rem,color-mix(in srgb,var(--brand-primary-200) 36%,var(--bg)),transparent 70%),var(--bg)}
@media(min-width:960px){body[data-screen]::before{background:radial-gradient(min(72rem,140vw) 38rem at 50% -4rem,color-mix(in srgb,var(--brand-primary) 30%,var(--bg)),transparent 72%),radial-gradient(min(36rem,90vw) 26rem at 94% 12rem,color-mix(in srgb,var(--brand-primary-200) 36%,var(--bg)),transparent 70%),var(--bg)}}
body[data-screen] .app-header{background:color-mix(in srgb,var(--bg) 45%,transparent)} /* let the glow show through the blurred phone header */

/* Desktop top bar: a card (white, 28px radius, no border or shadow) aligned with the booking grid's content edges,
   sticky 16px from the top. Once the page scrolls (data-scrolled, set in product.js) it turns frosted and translucent. */
.site-header{display:none;position:sticky;top:0;z-index:var(--layer-sticky);padding:var(--space-4) var(--space-8) 0;pointer-events:none}
.site-header__inner{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);max-width:calc(var(--content-lg) - var(--space-8) * 2);min-height:4.5rem;margin:0 auto;padding:var(--space-3) var(--space-4) var(--space-3) var(--space-8);border-radius:var(--radius-xl);background:var(--bg-surface);transition:background-color var(--motion-normal) var(--ease)}
.site-header[data-scrolled] .site-header__inner{background:color-mix(in srgb,color-mix(in srgb,var(--brand-primary-subtle) 70%,var(--bg-surface)) 72%,transparent);backdrop-filter:saturate(1.6) blur(20px);-webkit-backdrop-filter:saturate(1.6) blur(20px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.site-header[data-scrolled] .site-header__inner{background:var(--bg-surface)}}
.wordmark{display:inline-flex;align-items:center;gap:var(--space-3);color:var(--fg);font-size:var(--text-body-lg);line-height:var(--line-height-compact);font-weight:var(--weight-semibold);letter-spacing:var(--letter-spacing-snug);text-decoration:none;white-space:nowrap}
.wordmark:hover{color:var(--fg)}
.wordmark__logo{width:3.25rem;height:auto;display:block}
/* Header action (Sign in, Your trips, Book a transfer): a blue outline button. */
.site-header__link{display:inline-flex;align-items:center;min-height:var(--touch-target);padding:0 var(--space-5);border:var(--border-width-control) solid var(--control-checked);border-radius:var(--radius-md);background:transparent;color:var(--fg-brand-primary);font-size:var(--text-ui);font-weight:var(--weight-semibold);text-decoration:none;white-space:nowrap;transition:background-color var(--motion-fast) var(--ease)}
.site-header__link:hover{background:var(--brand-primary-subtle);color:var(--fg-brand-primary)}
.app-header .app-header__spacer{width:var(--touch-target)}
@media(min-width:960px){.site-header{display:block}.app-header{display:none}}

/* ---------- Booking and trip layout: one column on phones; from 960px a main column plus a sticky aside ---------- */
.booking,.trip{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--space-8);width:100%;max-width:var(--content-lg);margin:0 auto;padding:var(--space-2) var(--space-4) var(--space-6)}
.booking__step,.trip__main{flex:999 1 36rem;min-width:0;max-width:var(--content-md);display:flex;flex-direction:column;gap:var(--space-3)}
.booking__aside,.trip__aside{display:none;flex:1 1 20rem;max-width:24rem;min-width:0;position:sticky;top:calc(6rem + var(--space-4));flex-direction:column;gap:var(--space-3)}
@media(min-width:960px){.booking,.trip{gap:var(--space-10);padding:var(--space-4) var(--space-8) var(--space-20)}.booking__aside,.trip__aside{display:flex}.total-bar{display:none!important}.checkout-prices{display:none}}
.page-back{align-self:flex-start;display:none;align-items:center;gap:var(--space-1-5);min-height:var(--touch-target);text-decoration:none;font-size:var(--text-ui);color:var(--fg-secondary)}
.page-back .icon{width:1.125rem;height:1.125rem}
@media(min-width:960px){.page-back{display:inline-flex}.page-back+.page-head{padding-top:var(--space-1)}}

/* Page head: a large native title over a meta line and the step count. */
.page-head{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4) var(--space-2) var(--space-3)}
.page-title{font-size:var(--text-2xl);line-height:var(--line-height-tight);font-weight:var(--weight-medium);letter-spacing:var(--letter-spacing-tight)}
.page-meta{font-size:var(--text-md);line-height:var(--line-height-normal);color:var(--fg-secondary)}
@media(min-width:960px){.page-head{padding-top:var(--space-6)}.page-title{font-size:var(--text-3xl)}.page-meta{font-size:var(--text-body-lg)}}

/* Steps progress: five quiet numbered dots on hairline connectors. Only the current step carries weight
   (ink fill, soft halo, semibold label); done steps recede to a tinted check and link back; steps ahead are
   hairline outlines. Phones: dots only, in the header's centre column (labels stay for assistive tech).
   Desktop (≥960px): dot and label in a row, in the top bar. */
.steps-progress{min-width:0}
.steps-progress ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none}
.steps-progress__item{position:relative;display:flex;justify-content:center;min-width:0}
/* Connector: a 1px hairline from dot edge to dot edge, at dot centre height. */
.steps-progress__item+.steps-progress__item::before{content:'';position:absolute;top:calc(var(--dot) / 2);left:calc(-50% + var(--dot) / 2 + var(--space-2));right:calc(50% + var(--dot) / 2 + var(--space-2));height:var(--border-width);background:var(--border)}
.steps-progress__item[data-state="done"]+.steps-progress__item::before{background:var(--border-strong)}
.steps-progress{--dot:1.5rem}
.steps-progress__step{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);min-width:0;color:var(--fg-muted);text-decoration:none;font-weight:var(--weight-regular)}
.steps-progress__dot{display:grid;place-items:center;flex:none;width:var(--dot);height:var(--dot);border:var(--border-width) solid var(--border-strong);border-radius:var(--radius-full);background:transparent;color:var(--fg-muted);font-size:var(--text-xs);line-height:var(--line-height-tight);font-weight:var(--weight-medium);font-variant-numeric:tabular-nums;transition:background-color var(--motion-normal) var(--ease),box-shadow var(--motion-normal) var(--ease),color var(--motion-normal) var(--ease)}
.steps-progress__dot .icon{width:.8125rem;height:.8125rem}
.steps-progress__item[data-state="done"] .steps-progress__dot .icon path{stroke:currentColor;stroke-width:10;stroke-linejoin:round;stroke-linecap:round} /* Regular check, thickened about half a pixel */
.steps-progress__label{font-size:var(--text-sm);line-height:var(--line-height-compact);letter-spacing:var(--letter-spacing-snug);white-space:nowrap}
/* Done: a tinted dot with an ink check; it links back. */
.steps-progress__item[data-state="done"] .steps-progress__dot{border-color:transparent;background:var(--brand-primary-subtle);color:var(--fg-brand-primary)}
.steps-progress__item[data-state="done"] .steps-progress__step{color:var(--fg-secondary)}
a.steps-progress__step:hover{color:var(--fg)}a.steps-progress__step:hover .steps-progress__dot{background:var(--brand-primary-muted)}
/* Current: the only weighted mark: ink fill with a soft halo. */
.steps-progress__item[data-state="current"] .steps-progress__dot{border-color:var(--fg);background:var(--fg);color:var(--bg-surface);box-shadow:0 0 0 var(--space-1) var(--bg-muted)}
.steps-progress__item[data-state="current"] .steps-progress__step{color:var(--fg)}
.steps-progress__item[data-state="current"] .steps-progress__label{font-weight:var(--weight-semibold)}
/* Phone header: dots only, centred between the back button and a spacer. */
.app-header[data-variant="stepper"]{grid-template-columns:var(--touch-target) minmax(0,1fr) var(--touch-target);gap:var(--space-2)}
/* Phone booking header: the desktop top bar's floating white card, inset from the edges; frosted once the page scrolls.
   The step dots are centred on the card itself, whatever sits left and right. */
body[data-screen] .app-header[data-variant="stepper"]{top:calc(max(env(safe-area-inset-top),var(--device-top)) + var(--space-2));margin:calc(max(env(safe-area-inset-top),var(--device-top)) + var(--space-2)) var(--space-3) 0;min-height:calc(var(--touch-target) + var(--space-2) * 2);padding:var(--space-2);border-radius:var(--radius-xl);background:var(--bg-surface);backdrop-filter:none;-webkit-backdrop-filter:none;transition:background-color var(--motion-normal) var(--ease)}
body[data-screen] .app-header[data-variant="stepper"][data-scrolled]{background:color-mix(in srgb,color-mix(in srgb,var(--brand-primary-subtle) 70%,var(--bg-surface)) 72%,transparent);backdrop-filter:saturate(1.6) blur(20px);-webkit-backdrop-filter:saturate(1.6) blur(20px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){body[data-screen] .app-header[data-variant="stepper"][data-scrolled]{background:var(--bg-surface)}}
.app-header[data-variant="stepper"] .button--icon{background:transparent;box-shadow:none;color:var(--fg)}.app-header[data-variant="stepper"] .button--icon:hover{background:var(--bg-subtle)}
.app-header[data-variant="stepper"]>.steps-progress{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.app-header[data-variant="stepper"]>:last-child{grid-column:-2/-1}
body[data-screen] .app-header--brand[data-variant="stepper"]{padding-inline:var(--space-3) var(--space-2)} /* the logo needs a little more room from the card edge than the menu does */
/* First step on phones: the logo and Sign in frame the step dots, as the desktop top bar does. */
.app-header--brand[data-variant="stepper"]{grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-3)}
.app-header--brand .wordmark__logo{width:2.75rem}
.steps-progress[data-place="header"] .steps-progress__label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.steps-progress[data-place="header"] .steps-progress__step{min-height:var(--touch-target);justify-content:center}
/* Phone header (after Shop's checkout header on Mobbin): the current step's name, centred, with five short rounded segments
   under it. Done = sky, current = blue, ahead = hairline grey. No numbers, ticks or connectors. The back button does the
   navigating, so the segments take no taps; the step links stay in the accessibility tree with their labels. */
.steps-progress__title{display:none}
.steps-progress[data-place="header"]{display:flex;flex-direction:column;align-items:center;gap:var(--space-1-5)}
.steps-progress[data-place="header"] .steps-progress__title{display:block;font-size:var(--text-md);line-height:var(--line-height-compact);font-weight:var(--weight-semibold);letter-spacing:var(--letter-spacing-snug);color:var(--fg);white-space:nowrap}
.steps-progress[data-place="header"] ol{display:flex;justify-content:center;gap:var(--space-1)}
.steps-progress[data-place="header"] .steps-progress__item{flex:none}
.steps-progress[data-place="header"] .steps-progress__item+.steps-progress__item::before{display:none}
.steps-progress[data-place="header"] .steps-progress__step{min-height:0;min-width:0;pointer-events:none}
.steps-progress[data-place="header"] .steps-progress__dot{width:1.125rem;height:.1875rem;border:0;border-radius:var(--radius-full);background:var(--border);overflow:hidden;color:transparent;box-shadow:none;transition:background-color var(--motion-normal) var(--ease)}
.steps-progress[data-place="header"] .steps-progress__dot>*{display:none}
.steps-progress[data-place="header"] .steps-progress__item[data-state="done"] .steps-progress__dot{background:color-mix(in srgb,var(--brand-primary) 55%,var(--border))}
.steps-progress[data-place="header"] .steps-progress__item[data-state="current"] .steps-progress__dot{background:var(--control-checked);box-shadow:none}
/* Desktop top bar: dot and label in a row, connectors flex between them. */
.steps-progress[data-place="bar"]{--dot:1.625rem;flex:1;max-width:40rem}
.steps-progress[data-place="bar"] ol{display:flex;align-items:center}
.steps-progress[data-place="bar"] .steps-progress__item{flex:1 1 0;align-items:center;justify-content:flex-start}
.steps-progress[data-place="bar"] .steps-progress__item:first-child{flex:none}
.steps-progress[data-place="bar"] .steps-progress__item+.steps-progress__item::before{position:static;flex:1;min-width:var(--space-5);margin:0 var(--space-4)}
.steps-progress[data-place="bar"] .steps-progress__step{flex-direction:row;gap:var(--space-2-5)}
.steps-progress[data-place="bar"] .steps-progress__label{font-size:var(--text-ui)}

/* Card: white rounded section on the misty page. Sections stack with a small gap, never hairlines. */
.card{display:flex;flex-direction:column;padding:var(--space-6) var(--space-5);border-radius:var(--radius-xl);background:var(--bg-surface)}
@media(min-width:768px){.card{padding:var(--space-7) var(--space-8)}}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-5)}
.section-head--tight{margin-bottom:var(--space-1)}
/* Card titles lead with a blue Phosphor Duotone icon, no background (decorative; the heading names the section). */
.title-icon{display:flex;align-items:center;gap:var(--space-3)}
.title-icon__icon{flex:none;display:inline-grid;place-items:center;color:var(--fg-brand-primary)}
.title-icon__icon .icon{width:1.5rem;height:1.5rem}
/* Duotone layer: a vivid sky fill at full strength instead of the outline colour at 20%. */
.title-icon__icon .ph-icon path[opacity]{fill:var(--icon-duotone);opacity:1}
.text-body-lg.title-icon .title-icon__icon .icon{width:1.25rem;height:1.25rem}
.section-head:has(.title-icon){align-items:center}
.section-head__meta{flex:none;font-size:var(--text-ui);line-height:var(--line-height-compact);color:var(--fg-muted)}
.section-lead{margin-bottom:var(--space-5);font-size:var(--text-ui);line-height:var(--line-height-compact);color:var(--fg-secondary)}
.rule{width:100%;height:0;margin:var(--space-6) 0;border:0;border-top:var(--border-width) solid var(--border)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(13.75rem,100%),1fr));gap:var(--space-4)}
.form-grid--pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.form-grid--name-age{grid-template-columns:minmax(0,1fr) 5.75rem;gap:var(--space-3)}
.pax__contact{gap:var(--space-3)} /* email and mobile: side by side when there's room, stacked on phones */
.stack-4{display:flex;flex-direction:column;gap:var(--space-4)}
/* Trip-type note: an icon tile, a bold lead phrase and the rest in secondary text. The round-trip offer is sun yellow
   (promo, brand-sun); arrival-only and departure-only notes are light sky. */
.note{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4) var(--space-3) var(--space-3);border-radius:var(--radius-md);background:var(--brand-primary-subtle);font-size:var(--text-ui);line-height:var(--line-height-normal);color:var(--fg-secondary)}
.note[data-tone="promo"]{background:var(--promo-bg)}
.note__icon{flex:none;display:grid;place-items:center;width:var(--space-8);height:var(--space-8);border-radius:var(--radius-full);background:var(--bg-surface);color:var(--fg-brand-primary)}
.note[data-tone="promo"] .note__icon{background:var(--promo-icon-bg);color:var(--promo-icon)}
.note__icon .icon{width:1.125rem;height:1.125rem}
.note__text{flex:1;min-width:0;padding-top:calc(var(--space-1) * 1.25);text-wrap:pretty}
.note__text strong{font-weight:var(--weight-semibold);color:var(--fg)}
.inline-reason{display:flex;gap:var(--space-2);align-items:center;margin-bottom:var(--space-3);font-size:var(--text-sm);line-height:var(--line-height-normal);font-weight:var(--weight-semibold);color:var(--warning)}
.inline-reason .icon{width:1rem;height:1rem}
.text-link{align-self:flex-start;display:inline-flex;align-items:center;min-height:var(--touch-target);font-size:var(--text-ui);line-height:var(--line-height-compact)}

/* ---------- Photo hero: the Pitons and the ferry, with the logo and three plain facts ---------- */
.photo-hero{position:relative;overflow:hidden;min-height:20rem;border-radius:var(--radius-xl);background:var(--photo-shade);color:var(--photo-fg);isolation:isolate}
.photo-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;z-index:-2}
.photo-hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--photo-shade) 0%,transparent) 22%,color-mix(in srgb,var(--photo-shade) 55%,transparent) 58%,color-mix(in srgb,var(--photo-shade) 88%,transparent) 100%)}
.photo-hero__inner{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--space-4);min-height:inherit;padding:var(--space-5)}
.photo-hero__logo{position:absolute;top:var(--space-4);left:var(--space-4);width:var(--space-16);height:auto;filter:drop-shadow(0 4px 12px #0003)}
.photo-hero__title{max-width:18ch;font-size:var(--text-xl);line-height:var(--line-height-snug);font-weight:var(--weight-medium);letter-spacing:var(--letter-spacing-snug);color:var(--photo-fg)}
.photo-hero__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin:0;padding:var(--space-4) 0 0;list-style:none;border-top:var(--border-width) solid color-mix(in srgb,var(--photo-fg) 28%,transparent)}
.photo-hero__facts li{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--text-sm);line-height:var(--line-height-normal);color:var(--photo-fg)}
.photo-hero__facts .icon{width:1.375rem;height:1.375rem}
.photo-hero--short{min-height:13rem}
@media(min-width:768px){.photo-hero{min-height:26rem}.photo-hero--short{min-height:16rem}.photo-hero__inner{padding:var(--space-8)}.photo-hero__logo{top:var(--space-6);left:var(--space-6);width:var(--space-20)}.photo-hero__title{font-size:var(--text-2xl);line-height:var(--line-height-tight);letter-spacing:var(--letter-spacing-tight)}.photo-hero__facts li{font-size:var(--text-ui)}}

/* Sailing row: a single preselected sailing, shown as a read-only radio. */
/* Sailing row: a single, already-chosen option (the sailing, the pickup, Captain's Choice). It shows the selected-card treatment. */
.sailing{display:flex;align-items:flex-start;gap:var(--space-3-5);padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);background:var(--brand-primary-subtle);box-shadow:inset 0 0 0 var(--border-width-control) var(--control-checked)}
.sailing+.sailing,.sailing+.field__confirm{margin-top:var(--space-3)}
.sailing__dot{display:grid;place-items:center;flex:none;width:var(--indicator);height:var(--indicator);margin-top:1px;border-radius:var(--radius-full);background:var(--control-checked)}
.sailing__dot::before{content:'';width:.5rem;height:.5rem;border-radius:var(--radius-full);background:var(--control-checked-on)}

/* Resort combobox: a search field whose list shows before typing, grouped by area and ferry port (RES-07).
   The popup floats over the content below; the result row restates what the stay decides. */
.combo{position:relative;scroll-margin-top:calc(var(--header-height) + var(--space-6))}
.card:has(.combo){position:relative;z-index:2} /* cards animate in with a transform, so each is its own layer: lift the one holding the list */
.combo__control>.field__control{padding-right:var(--space-12)}
.combo__clear{position:absolute;right:var(--space-1);top:50%;transform:translateY(-50%);display:grid;place-items:center;width:var(--touch-target);height:var(--touch-target);border:0;border-radius:var(--radius-full);background:none;color:var(--fg-muted);cursor:pointer}
.combo__clear:hover{color:var(--fg)}.combo__clear:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:calc(var(--focus-width) * -1)}
.combo__popup{position:absolute;left:0;right:0;top:calc(100% + var(--space-1));z-index:var(--layer-overlay);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:var(--shadow-lg),0 0 0 var(--border-width) var(--border);overflow:hidden}
.combo__list{max-height:min(24rem,55vh);overflow-y:auto;overscroll-behavior:contain;padding:var(--space-2) 0}
.combo__group+.combo__group{border-top:var(--border-width) solid var(--border);margin-top:var(--space-2);padding-top:var(--space-2)}
.combo__group-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 var(--space-2);padding:var(--space-2) var(--space-4) var(--space-1);font-size:var(--text-sm);line-height:var(--line-height-normal);font-weight:var(--weight-semibold);color:var(--fg)}
.combo__group-meta{font-weight:var(--weight-regular);color:var(--fg-muted)}
.combo__option{display:flex;align-items:center;gap:var(--space-3);min-height:var(--touch-target);padding:var(--space-2-5) var(--space-4);cursor:pointer}
.combo__option:hover,.combo__option.is-active{background:var(--bg-subtle)}
.combo__option.is-active{box-shadow:inset 3px 0 0 var(--brand-primary)}
.combo__option-body{display:flex;flex-direction:column;flex:1;min-width:0}
.combo__option-title{font-size:var(--text-md);line-height:var(--line-height-snug);color:var(--fg)}
.combo__option-meta{font-size:var(--text-sm);line-height:var(--line-height-normal);color:var(--fg-muted)}
.combo__option[aria-selected="true"] .combo__option-title{font-weight:var(--weight-semibold)}
.combo__check{flex:none;color:var(--fg-brand-primary);display:none}.combo__option[aria-selected="true"] .combo__check{display:block}
.combo__thumb{flex:none;width:var(--space-14);height:var(--space-14);border-radius:var(--radius-md);object-fit:cover;background:var(--bg-muted)}
.combo__thumb--icon{display:grid;place-items:center;background:var(--brand-primary-subtle);color:var(--fg-brand-primary)}
.combo__thumb--code{display:grid;place-items:center;background:var(--bg-subtle);color:var(--fg);font-size:var(--text-sm);line-height:var(--line-height-normal);font-weight:var(--weight-semibold);letter-spacing:var(--letter-spacing-wide)}
.combo__option-badge{display:flex;margin-top:var(--space-1)}
button.text-link{padding:0;border:0;background:none;color:var(--fg);font-family:inherit;font-weight:var(--weight-medium);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:var(--border-strong);cursor:pointer}
button.text-link:hover{text-decoration-color:currentColor}
@media(max-width:479px){.combo__thumb{width:var(--space-12);height:var(--space-12)}.combo__option{padding-inline:var(--space-3)}.combo__group-head{padding-inline:var(--space-3)}}
.combo__group--other .combo__option-title{color:var(--fg-brand-primary);font-weight:var(--weight-medium)}
.combo__empty{padding:var(--space-3) var(--space-4);font-size:var(--text-ui);line-height:var(--line-height-compact);color:var(--fg-secondary)}
@media(forced-colors:active){.combo__option.is-active{outline:2px solid Highlight;outline-offset:-2px}}
/* Info rows (picker result, quiet notes inside cards): plain text, no fill and no icon. */
.combo-result{display:flex;align-items:flex-start;gap:var(--space-3);margin-top:var(--space-2)}

.card .alert[data-status="panel"]{align-items:center;padding:0;background:none}
.combo-result>.icon{flex:none;margin-top:2px;color:var(--fg-brand-primary)}

/* Guests rows on the Trip step. */
.guest-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:var(--space-16);border-bottom:var(--border-width) solid var(--border)}
.guest-row:last-child{border-bottom:0}
.pax{display:flex;flex-direction:column;gap:var(--space-3);padding-bottom:var(--space-5);margin-bottom:var(--space-5);border-bottom:var(--border-width) solid var(--border)}
.pax:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.pax__head{display:flex;justify-content:space-between;font-size:var(--text-ui);line-height:var(--line-height-compact);font-weight:var(--weight-semibold)}
.pax__head span:last-child{font-weight:var(--weight-regular);color:var(--fg-muted)}

/* ---------- Summary card, price lines and total ---------- */
.summary{padding:var(--space-2) var(--space-5);border-radius:var(--radius-xl);background:var(--bg-surface)}
@media(min-width:768px){.summary{padding-inline:var(--space-7)}}
.summary__block{padding:var(--space-5) 0;border-bottom:var(--border-width) solid var(--border)}
.summary__block:last-child{border-bottom:0}
.summary__title{display:block;font-size:var(--text-body-lg);line-height:var(--line-height-compact);font-weight:var(--weight-semibold);letter-spacing:var(--letter-spacing-snug)}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.fact{display:flex;flex-direction:column;gap:calc(var(--space-1) / 2);min-width:0}
.fact dt,.fact__label{font-size:var(--text-sm);line-height:var(--line-height-normal);color:var(--fg-muted)}
.fact dd,.fact__value{margin:0;font-size:var(--text-ui);line-height:var(--line-height-compact);font-weight:var(--weight-medium);color:var(--fg)}
.facts dl,dl.facts{margin:0}
/* Booking summary (desktop aside), after Airbnb's and Expedia's trip summaries: the stay leads with its photo, each trip
   fact carries a quiet icon tile, and the total pairs a quiet label with a confident amount. */
.summary__stay{display:flex;align-items:center;gap:var(--space-3-5)}
.summary__thumb{flex:none;width:var(--space-14);height:var(--space-14);border-radius:var(--radius-md);object-fit:cover;background:var(--bg-subtle)}
.summary__thumb--icon{display:grid;place-items:center;color:var(--fg-brand-primary);background:var(--brand-primary-subtle)}
.summary__stay-text{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.facts--icons{row-gap:var(--space-5)}
.facts--icons .fact{position:relative;padding-left:calc(var(--space-8) + var(--space-3))}
.fact__icon{position:absolute;left:0;top:calc(var(--space-1) / 2);display:grid;place-items:center;width:var(--space-8);height:var(--space-8);border-radius:var(--radius-full);background:var(--bg-subtle);color:var(--fg-secondary)}
.fact__icon .icon{width:1.125rem;height:1.125rem}
.facts--icons dd[data-pending]{color:var(--fg-muted);font-weight:var(--weight-regular)}
.booking__aside .price-total{align-items:center}
.booking__aside .price-total>[data-total-label]{font-size:var(--text-md);font-weight:var(--weight-medium);color:var(--fg-secondary);letter-spacing:var(--letter-spacing)}
.booking__aside .price-total .total-amount{font-size:var(--text-xl);line-height:var(--line-height-tight);font-variant-numeric:tabular-nums}
.price-lines{display:flex;flex-direction:column}
/* Price details: a quiet disclosure row above the total in the desktop summary. */
.price-details>summary{display:flex;align-items:center;gap:var(--space-2);min-height:var(--touch-target);list-style:none;cursor:pointer;font-size:var(--text-ui);line-height:var(--line-height-compact);font-weight:var(--weight-semibold);color:var(--fg);border-radius:var(--radius-xs)}
.price-details>summary::-webkit-details-marker{display:none}
.price-details>summary:focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:2px}
.price-details__count{margin-left:auto;font-size:var(--text-sm);font-weight:var(--weight-regular);color:var(--fg-muted)}
.price-details>summary .icon{width:1rem;height:1rem;color:var(--fg-muted);transition:transform var(--motion-fast) var(--ease-out)}
.price-details[open]>summary .icon{transform:rotate(180deg)}
.price-details>summary:hover .icon{color:var(--fg)}
.price-details[open]>.price-lines{padding-bottom:var(--space-1)}
/* A sticky summary never runs past the window: when it is taller (breakdown open), it scrolls on its own so Pay stays reachable. */
@media(min-width:960px){.booking__aside{max-height:calc(100dvh - 6rem - var(--space-8));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:var(--space-1);margin:calc(var(--space-1) * -1)}}
.price-points{display:flex;margin-bottom:var(--space-2)}
[data-points] .price-points{margin-bottom:0}[data-points]+.price-details>summary{margin-top:calc(var(--space-1) * -1)}
.promo-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2)}
/* Apply reads as live: the same blue outline as Sign in, never the pale neutral outline that looks disabled. */
.promo-row>.button{border:var(--border-width-control) solid var(--control-checked);color:var(--fg-brand-primary)}.promo-row>.button:hover{background:var(--brand-primary-subtle);color:var(--fg-brand-primary)}
.price-line[data-cash] .price-line__amount{color:var(--fg-secondary);font-weight:var(--weight-regular)} /* listed, not charged */
.terms-summary{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-4);padding:var(--space-4);border-radius:var(--radius-lg);background:var(--bg-subtle);font-size:var(--text-sm);line-height:var(--line-height-normal);color:var(--fg-secondary)}
.terms-summary strong{color:var(--fg)}
.price-line{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-2) 0}
.price-line__label{display:flex;flex-direction:column}
.price-line__meta{font-size:var(--text-sm);line-height:var(--line-height-normal);color:var(--fg-muted)}
.price-line__amount{flex:none}.price-line[data-saving] .price-line__amount{color:var(--success);font-weight:var(--weight-semibold)}
.price-lines[data-size="compact"] .price-line{font-size:var(--text-ui);line-height:var(--line-height-compact)}
.price-lines[data-size="compact"] .price-line__meta{display:none}
.price-total{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);padding-top:var(--space-4);margin-top:var(--space-2);border-top:var(--border-width) solid var(--border);font-size:var(--text-lg);line-height:var(--line-height-heading);font-weight:var(--weight-semibold);letter-spacing:var(--letter-spacing-snug)}
.price-foot{margin-top:var(--space-1);font-size:var(--text-sm);line-height:var(--line-height-normal);color:var(--fg-muted)}
.total-amount{display:inline-flex;align-items:center;gap:var(--space-1-5);padding:calc(var(--space-1) / 2) var(--space-1-5);margin-right:calc(var(--space-1-5) * -1);border-radius:var(--radius-xs);transition:background-color var(--motion-normal) var(--ease),color var(--motion-normal) var(--ease)}
.total-amount.is-flash{background:var(--brand-primary-muted)}

/* Floating total bar (phones): total and meta on the left, the pill action on the right, on a dark rounded slab. */
.total-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--space-3)}
.total-bar__summary{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--space-1) / 2);min-width:0;min-height:var(--touch-target);padding:0;border:0;background:transparent;color:var(--bar-fg);text-align:left}
.total-bar__amount{display:inline-flex;align-items:center;gap:var(--space-1-5);font-size:var(--text-lg);line-height:var(--line-height-heading);font-weight:var(--weight-semibold);letter-spacing:var(--letter-spacing-snug)}
.total-bar__amount .total-amount{padding:0;margin:0}.total-bar__amount .total-amount.is-flash{background:transparent;color:var(--brand-primary)}
.total-bar__amount .icon{width:1rem;height:1rem;color:var(--bar-muted)}
.total-bar__meta{font-size:var(--text-sm);line-height:var(--line-height-normal);color:var(--bar-muted)}
.total-bar .button{padding-inline:var(--space-6)}
.total-bar .button[aria-disabled="true"],.total-bar .button:disabled{background:color-mix(in srgb,var(--bar-fg) 14%,transparent);color:var(--bar-muted)}
/* The floating bar stays one row: no "why Continue is off" line here. The dimmed Continue and the page itself carry that; the desktop summary keeps its hint. */
.total-bar .blocked-hint{display:none!important}
.total-bar>*{min-width:0}
.blocked-hint{font-size:var(--text-sm);line-height:var(--line-height-normal);color:var(--fg-muted);text-align:center}
.wide-only{display:none}@media(min-width:400px){.wide-only{display:inline}}
.booking__aside .button{width:100%}

/* ---------- Disclosure (What's covered) ---------- */
.disclosure{margin-top:var(--space-4);border-radius:var(--radius-lg);background:var(--bg-subtle);padding:0 var(--space-5)}
.disclosure>summary{display:flex;align-items:center;justify-content:space-between;min-height:var(--control-xl);cursor:pointer;list-style:none;font-size:var(--text-ui);line-height:var(--line-height-compact);font-weight:var(--weight-semibold)}
.disclosure>summary::-webkit-details-marker{display:none}
.disclosure>summary .icon{transition:transform var(--motion-normal) var(--ease)}.disclosure[open]>summary .icon{transform:rotate(180deg)}
.cover-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);line-height:var(--line-height-normal)}
.cover-table th,.cover-table td{padding:var(--space-3) var(--space-2);border-bottom:var(--border-width) solid var(--border);text-align:left;vertical-align:top}
.cover-table thead th{font-weight:var(--weight-semibold);color:var(--fg)}
.cover-table tbody th{font-weight:var(--weight-regular);color:var(--fg-secondary)}
.cover-table td{color:var(--fg)}
.cover-scroll{overflow-x:auto;margin-inline:calc(var(--space-2) * -1)}

/* ---------- Confirmation trip pass ---------- */
.success-mark{display:grid;place-items:center;width:var(--space-12);height:var(--space-12);border-radius:var(--radius-full);background:var(--success-bg);color:var(--success)}
.success-mark .icon{width:1.5rem;height:1.5rem}
.pass-row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);min-height:var(--control-xl);padding-block:var(--space-2);border-top:var(--border-width) solid var(--border);font-size:var(--text-ui);line-height:var(--line-height-compact)}
.pass-row>:first-child{font-weight:var(--weight-semibold)}.pass-row>:last-child{color:var(--fg-secondary);text-align:right}

/* ---------- Trip page ---------- */
.trip .page-head{padding-bottom:var(--space-1)}
.trip__sub{color:var(--fg-secondary);font-size:var(--text-md);line-height:var(--line-height-normal)}
.trip__tag{align-self:flex-start}
/* Trip legs: one 36px icon axis, as in the checkout recap. Ahead = pale sky circle with the leg's icon; done = blue with a
   white check; now = blue with a soft halo. A hairline joins the legs and turns blue up to where the guest is. */
.legs{--mark:2.25rem;--line:calc(var(--mark) / 2 - .75px);margin:0;list-style:none;padding:var(--space-3) var(--space-5);border-radius:var(--radius-xl);background:var(--bg-surface)}
@media(min-width:768px){.legs{padding-inline:var(--space-7)}}
.leg{position:relative}
.leg+.leg::before{content:'';position:absolute;left:var(--line);top:calc(var(--space-1) * -1);height:var(--space-3);border-left:var(--border-width-control) solid var(--border)}
.leg:not(:last-child)::after{content:'';position:absolute;left:var(--line);top:calc(var(--space-3) + var(--mark) + var(--space-1));bottom:var(--space-1);border-left:var(--border-width-control) solid var(--border)}
.leg[data-state="done"]::after,.leg[data-state="done"]+.leg::before{border-color:var(--control-checked)}
.leg[data-state="active"]::after{display:none}
.leg[data-state="active"]::before{height:var(--space-5)}
.leg__row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) 0}
.leg__lead{display:flex;align-items:flex-start;gap:var(--space-4);min-width:0}
.leg__mark{display:grid;place-items:center;flex:none;width:var(--mark);height:var(--mark);border-radius:var(--radius-full);background:var(--brand-primary-subtle);color:var(--fg-brand-primary);transition:background-color var(--motion-normal) var(--ease),color var(--motion-normal) var(--ease)}
.leg__mark .icon{width:1.125rem;height:1.125rem}
.leg[data-state="done"] .leg__mark{background:var(--control-checked);color:var(--control-checked-on)}
.leg[data-state="done"] .leg__mark .icon path{stroke:currentColor;stroke-width:8;stroke-linejoin:round}
.leg[data-state="active"] .leg__mark{background:var(--control-checked);color:var(--control-checked-on);box-shadow:0 0 0 var(--space-1) var(--brand-primary-subtle)}
.leg__text{display:flex;flex-direction:column;gap:calc(var(--space-1) / 2);min-width:0;padding-top:calc(var(--space-1) / 2)}
.leg__title{font-weight:var(--weight-semibold)}
.leg__meta{font-size:var(--text-sm);line-height:var(--line-height-normal);color:var(--fg-muted)}
.leg__meta[data-tone="success"]{color:var(--success)}
.leg__times{display:flex;flex:none;flex-direction:column;align-items:flex-end;padding-top:calc(var(--space-1) / 2);text-align:right}
.leg__time{font-size:var(--text-ui);line-height:var(--line-height-normal);font-weight:var(--weight-medium);color:var(--fg);font-variant-numeric:tabular-nums}
.leg[data-state="done"] .leg__time{font-weight:var(--weight-regular);color:var(--fg-secondary)}
.leg__time[data-changed]{color:var(--fg-brand-primary);font-weight:var(--weight-semibold);animation:time-swap var(--motion-emphasis) var(--ease)}
.leg__old{font-size:var(--text-sm);line-height:var(--line-height-normal);color:var(--fg-muted);text-decoration:line-through}
.leg__active{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-5) 0;animation:reveal var(--motion-slow) var(--ease-out)}
.leg__active-head{display:flex;align-items:center;gap:var(--space-4)}
.leg__active-title{font-size:var(--text-lg);line-height:var(--line-height-heading);font-weight:var(--weight-semibold);letter-spacing:var(--letter-spacing-snug)}
.driver{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4);border-radius:var(--radius-lg);background:var(--bg-subtle)}
.eta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.eta dt{font-size:var(--text-sm);line-height:var(--line-height-normal);color:var(--fg-muted)}
.eta dd{margin:0;font-size:var(--text-body-lg);line-height:var(--line-height-compact);font-weight:var(--weight-medium);color:var(--fg)}.eta dd[data-live]{color:var(--fg-brand-primary);font-weight:var(--weight-semibold)}
.eta dl{margin:0}
.map{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--map-land)}.map[data-base="sea"]{background:var(--map-sea)}
.map svg{display:block;width:100%;height:9.5rem;stroke:none}
@media(min-width:960px){.map svg{height:12rem}}
.map__sea{fill:var(--map-sea)}.map__land{fill:var(--map-land)}.map__route{fill:none;stroke:var(--map-route);stroke-width:3;stroke-linecap:round}.map__done{fill:none;stroke:var(--map-route-done);stroke-width:3;stroke-linecap:round}
.map__stop{fill:var(--map-pin)}.map__here{fill:var(--map-route);stroke:var(--bg-surface);stroke-width:3}.map__label{fill:var(--map-label);font:var(--weight-semibold) var(--text-xs)/var(--line-height-tight) var(--font-body)}
.map[data-stale] svg{opacity:.45;filter:grayscale(1)}
.map__flag{position:absolute;left:var(--space-2);bottom:var(--space-2);display:inline-flex;align-items:center;gap:var(--space-1-5);padding:var(--space-1) var(--space-2-5);border-radius:var(--radius-full);background:var(--bg-surface);color:var(--fg);font-size:var(--text-sm);line-height:var(--line-height-normal);font-weight:var(--weight-semibold);box-shadow:var(--shadow-sm)}
.map__flag .icon{width:1rem;height:1rem}
.trip-link{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:var(--space-20);padding:var(--space-4) var(--space-5);border-radius:var(--radius-xl);background:var(--bg-surface);color:var(--fg);text-decoration:none;font-weight:var(--weight-regular)}
@media(min-width:768px){.trip-link{padding-inline:var(--space-7)}}
.trip-link:hover{color:var(--fg);box-shadow:var(--shadow-md)}
.trip-link__cta{display:inline-flex;align-items:center;flex:none;min-height:var(--control-md);padding:0 var(--space-4);border-radius:var(--radius-full);background:var(--bg-subtle);font-size:var(--text-ui);font-weight:var(--weight-semibold)}
.manage-list{padding:0 var(--space-5);border-radius:var(--radius-xl);background:var(--bg-surface)}
/* Manage rows lead with a 36px mist icon circle, the same size as the trip legs and recap rows. */
.manage-list .list-row__icon,.sheet .list-row__icon{width:2.25rem;height:2.25rem;color:var(--fg-secondary)}.manage-list .list-row__icon .icon,.sheet .list-row__icon .icon{width:1.125rem;height:1.125rem}
.list-row .icon:last-child{color:var(--fg-muted)}

/* ---------- Simple task pages (manage, sign in) ---------- */
.task{width:100%;max-width:var(--content-md);margin:0 auto;padding:var(--space-2) var(--space-4) var(--space-12);display:flex;flex-direction:column;gap:var(--space-3)}
@media(min-width:960px){.task{padding-top:var(--space-4)}}
.task--narrow{max-width:var(--content-sm)}
.task__lead{color:var(--fg-secondary);font-size:var(--text-md);line-height:var(--line-height-normal)}
.task__actions{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-6)}
@media(min-width:960px){.task__actions{flex-direction:row;align-items:center;gap:var(--space-4)}.task__actions .button:not([data-variant="link"]){min-width:16rem}}
.setting{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) 0;border-bottom:var(--border-width) solid var(--border)}
.setting:first-child{padding-top:0}.setting:last-child{border-bottom:0;padding-bottom:0}
.setting__text{display:flex;flex-direction:column;gap:calc(var(--space-1) / 2)}
.setting__title{font-weight:var(--weight-semibold)}
.setting__meta{font-size:var(--text-sm);line-height:var(--line-height-normal);color:var(--fg-muted)}
.empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.empty .icon{width:2rem;height:2rem;color:var(--fg-muted)}

/* ---------- Route recap (Checkout): the journey as a dotted timeline of times and stops ---------- */
/* Checkout recap: every row hangs off one 36px icon axis. Arrival stops join with a hairline; the resort stop is the destination and fills blue. */
.route{--mark:2.25rem;margin:0;padding:0;list-style:none}
.route__stop{position:relative;display:grid;grid-template-columns:var(--mark) minmax(0,1fr);column-gap:var(--space-4);padding-bottom:var(--space-6)}
.route__stop:last-child{padding-bottom:0}
.route__stop:not(:last-child)::after{content:'';position:absolute;left:calc(var(--mark) / 2 - .75px);top:calc(var(--mark) + var(--space-1));bottom:var(--space-1);border-left:var(--border-width-control) solid var(--border)}
.route__mark,.recap__mark{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:var(--radius-full);background:var(--brand-primary-subtle);color:var(--fg-brand-primary)}
.route__mark .icon,.recap__mark .icon{width:1.125rem;height:1.125rem}
.route__stop:last-child .route__mark{background:var(--control-checked);color:var(--control-checked-on)}
.route__body,.recap__body{display:flex;flex-direction:column;gap:calc(var(--space-1) / 2);min-width:0;padding-top:calc(var(--space-1) / 4)}
.route__time{font-size:var(--text-sm);line-height:var(--line-height-compact);font-weight:var(--weight-semibold);color:var(--fg-brand-primary);font-variant-numeric:tabular-nums;white-space:nowrap}
.route__title,.recap__title{font-size:var(--text-ui);line-height:var(--line-height-compact);font-weight:var(--weight-semibold);color:var(--fg)}
.route__meta,.recap__meta{font-size:var(--text-sm);line-height:var(--line-height-normal);color:var(--fg-muted)}
.recap__row{display:grid;grid-template-columns:2.25rem minmax(0,1fr) auto;column-gap:var(--space-4);align-items:center}
.recap__row .recap__mark{background:var(--bg-subtle);color:var(--fg-secondary)}
.recap__edit{align-self:center;font-size:var(--text-ui);line-height:var(--line-height-compact);font-weight:var(--weight-semibold);padding-block:var(--space-2)}

/* ---------- Journey progress (Your trip, travel day): four legs as one thin segmented bar ---------- */
.journey{display:flex;flex-direction:column;gap:var(--space-2);padding:0 var(--space-2) var(--space-2)}
.journey__bar{--progress:50%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-1)}
.journey__bar span{height:var(--space-1-5);border-radius:var(--radius-full);background:var(--border)}
.journey__bar [data-state="done"]{background:var(--control-checked)}
.journey__bar [data-state="active"]{background:linear-gradient(90deg,var(--brand-primary) var(--progress),var(--border) var(--progress))}
.journey__label{display:flex;justify-content:space-between;gap:var(--space-3);font-size:var(--text-sm);line-height:var(--line-height-normal);color:var(--fg-muted)}
.journey__label strong{color:var(--fg);font-weight:var(--weight-semibold)}

@keyframes reveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes time-swap{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.reveal{animation:reveal var(--motion-normal) var(--ease)}
/* One authored moment: the page's cards rise in once, in order, on arrival. */
.booking__step>*,.trip__main>*,.task>*{animation:rise var(--motion-slow) var(--ease-out) both}
.booking__step>:nth-child(2),.trip__main>:nth-child(2),.task>:nth-child(2){animation-delay:40ms}
.booking__step>:nth-child(3),.trip__main>:nth-child(3),.task>:nth-child(3){animation-delay:80ms}
.booking__step>:nth-child(n+4),.trip__main>:nth-child(n+4),.task>:nth-child(n+4){animation-delay:120ms}

/* ---------- Supporting compositions ---------- */
.stack-cards{display:flex;flex-direction:column;gap:var(--space-3)}
/* Group head: a section label that sits on the page above its card, like a native grouped list. */
.group-head{margin:var(--space-3) var(--space-2) 0}
.section-head.group-head{margin-bottom:0}
.price-block{margin-top:var(--space-2);padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);background:var(--bg-subtle)}
.page-logo{width:var(--space-20);height:auto;margin-bottom:var(--space-2)}
/* Notices placed directly on the page sit on the surface colour so they read as cards. */
.trip__main>.alert[data-status="panel"],.task>.alert[data-status="panel"],.booking__step>.alert[data-status="panel"]{background:var(--bg-surface)}
.card>.alert[data-status="panel"]:last-child{margin-top:var(--space-5)}
.confirm-cta{margin-top:var(--space-2)}