/* EXEC-WC1 -- the module's OWN styles (a shared partial: one file serves the public site and the Guest Portal) for the ONE guest flow (Web check-in and Reserve a stay), drawn by the public site and by the Guest Portal.
   Rule of the module (the Owner's): a genuinely new style goes in the module's own file and is reported. Neither design family has an atom for the option cards, the date tiles,
   the named stepper, the quantity stepper, the summary rows, the reference card or the action bar, so they are written here -- and ONLY with each family's tokens, through the small
   --web-checkin-flow-NAME layer below (one mapping per family; no raw colour, no raw pixel size). Everything else on the screens is the family's own atoms (apps/webcheckin/ui.py). */

/* ============================== the token layer: one mapping per family ============================== */
/* The interface of this partial is the --web-checkin-flow-NAME properties below. Each family maps them ONCE from its own Tier-1 tokens (the public site in static/public/css/public.css,
   the Guest Portal in static/mobile/guest_wizards.css), exactly as each maps the date picker's --datepicker-NAME interface. This file reads nothing else. */

/* ============================== page + shell ============================== */
.wcf { display: flex; flex-direction: column; gap: var(--web-checkin-flow-s4); font-family: var(--web-checkin-flow-font); color: var(--web-checkin-flow-text); }
.wcf [hidden] { display: none !important; }
/* the elements that carry `hidden` in markup and set their own display */
.wcf-sheet[hidden], .wcf-chosen[hidden], .wcf-field[hidden], .wcf-mobile[hidden] { display: none; }
.wcf-stepper[hidden], .wcf-success[hidden], .wcf-card[hidden], .wcf-actions[hidden] { display: none; }
.wcf-attach__onfile[hidden], .wcf-attach__preview[hidden], .wcf-screen[hidden], .wcf-offer__form[hidden], .wcf-offer__closed[hidden] { display: none; }
.wcf-hidden { display: none !important; }
.wcf-sr { position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.wcf-hp { position: absolute; left: -62.4375rem; width: 0.0625rem; height: 0.0625rem; overflow: hidden; }
.wcf-source { margin: 0; font-size: var(--web-checkin-flow-fs-sm); color: var(--web-checkin-flow-text-3); }
.wcf-optional { font-weight: 400; color: var(--web-checkin-flow-text-3); }
.wcf-req { color: var(--web-checkin-flow-err); }
.wcf-link { background: none; border: 0; padding: var(--web-checkin-flow-s2) 0; font: inherit; font-size: var(--web-checkin-flow-fs-sm); font-weight: 600; color: var(--web-checkin-flow-accent-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.wcf-link:focus-visible { outline: none; box-shadow: var(--web-checkin-flow-focus); border-radius: var(--web-checkin-flow-r-sm); }

/* the "about 2 minutes" card: small, once, before the first screen */
.wcf-intro { display: flex; align-items: center; gap: var(--web-checkin-flow-s3); padding: var(--web-checkin-flow-s3) var(--web-checkin-flow-s4); border-radius: var(--web-checkin-flow-r-lg); background: var(--web-checkin-flow-accent-soft); color: var(--web-checkin-flow-accent-ink); }
.wcf-intro p { margin: 0; font-size: var(--web-checkin-flow-fs-sm); font-weight: 600; color: inherit; line-height: 1.4; }
.wcf-intro__icon { flex: none; display: inline-flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border-radius: var(--web-checkin-flow-r-pill); background: var(--web-checkin-flow-surface); }
.wcf-intro__icon svg { width: 1.25rem; height: 1.25rem; }

/* the named stepper: "2 of 6 · Find your booking" over a segmented bar */
.wcf-stepper { display: flex; flex-direction: column; gap: var(--web-checkin-flow-s2); }
.wcf-stepper__text { margin: 0; font-size: var(--web-checkin-flow-fs-sm); font-weight: 700; color: var(--web-checkin-flow-text); }
.wcf-stepper__bar { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--web-checkin-flow-s1); }
.wcf-stepper__seg { flex: 1; height: 0.375rem; border-radius: var(--web-checkin-flow-r-pill); background: var(--web-checkin-flow-border); }
.wcf-stepper__seg[data-state="done"] { background: var(--web-checkin-flow-ok); }
.wcf-stepper__seg[data-state="current"] { background: var(--web-checkin-flow-accent); }
/* Web check-in's two named parts (Seq #10, Q332): Stay and KYC, no count. A mark (a tick when done) and the part's name, joined by a line; the Portal's mark is its own mob-stepper__mark atom. */
.wcf-parts { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--web-checkin-flow-s2); }
.wcf-part { display: flex; align-items: center; gap: var(--web-checkin-flow-s2); font-size: var(--web-checkin-flow-fs-sm); font-weight: 600; color: var(--web-checkin-flow-text-3); }
.wcf-part + .wcf-part { flex: 1; }
.wcf-part + .wcf-part::before { content: ""; flex: 1; height: 0.125rem; border-radius: var(--web-checkin-flow-r-pill); background: var(--web-checkin-flow-border); }
.wcf-part[data-state="done"]::before, .wcf-part[data-state="current"]::before { background: var(--web-checkin-flow-ok); }
.wcf-part[data-state="done"], .wcf-part[data-state="current"] { color: var(--web-checkin-flow-text); }
.wcf-part[data-state="current"] { font-weight: 700; }
.wcf-part__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 1.5rem; height: 1.5rem; border: 0.125rem solid var(--web-checkin-flow-border); border-radius: var(--web-checkin-flow-r-pill); background: var(--web-checkin-flow-surface); font-size: var(--web-checkin-flow-fs-sm); line-height: 1; }
.wcf-part[data-state="current"] .wcf-part__mark { border-color: var(--web-checkin-flow-accent); background: var(--web-checkin-flow-accent); box-shadow: inset 0 0 0 0.3125rem var(--web-checkin-flow-surface); }
.wcf-part[data-state="done"] .wcf-part__mark { border-color: var(--web-checkin-flow-ok); background: var(--web-checkin-flow-ok); color: var(--web-checkin-flow-surface); }
/* Web check-in's opening card (Seq #10, Q332): the family's soft information atom (.alert-info / .mob-alert-info) carries the colour; only the title and the three rows are laid out here */
.wcf .wcf-open { display: flex; flex-direction: column; align-items: stretch; gap: var(--web-checkin-flow-s2); margin: 0; }
.wcf-open__title { margin: 0; font-size: var(--web-checkin-flow-fs-sm); font-weight: 700; }
.wcf-open__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--web-checkin-flow-s2); font-size: var(--web-checkin-flow-fs-sm); }
.wcf-open__rows li { display: flex; align-items: flex-start; gap: var(--web-checkin-flow-s2); line-height: 1.35; }
.wcf-open__rows svg { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.0625rem; }
.wcf-open__rows small { display: block; font-size: inherit; color: var(--web-checkin-flow-text-3); }
.wcf-alert:empty { display: none; }

/* ============================== screens ============================== */
.wcf-form { display: flex; flex-direction: column; gap: var(--web-checkin-flow-s4); }
.wcf-screen:not([hidden]) { display: flex; flex-direction: column; gap: var(--web-checkin-flow-s4); padding: var(--web-checkin-flow-s5); background: var(--web-checkin-flow-surface); border: 0.0625rem solid var(--web-checkin-flow-border); border-radius: var(--web-checkin-flow-r-xl); }
.wcf-title { margin: 0; }
.wcf-title:focus, .wcf-title:focus-visible { outline: none; box-shadow: none; }
.wcf-title--small { font-size: var(--web-checkin-flow-fs-title); }
.wcf-field { display: flex; flex-direction: column; gap: var(--web-checkin-flow-s2); }
.wcf-field > label, .wcf-field > .wcf-label { margin: 0; }
.wcf-field [aria-invalid="true"], .wcf-invalid { border-color: var(--web-checkin-flow-err); }
.wcf-group { display: flex; flex-direction: column; gap: var(--web-checkin-flow-s4); }
.wcf-row { display: flex; flex-wrap: wrap; gap: var(--web-checkin-flow-s3); }
.wcf-lead { margin: 0; font-size: var(--web-checkin-flow-fs); color: var(--web-checkin-flow-text); line-height: 1.55; }
.wcf-fixed { margin: 0; font-size: var(--web-checkin-flow-fs); color: var(--web-checkin-flow-text); }
/* the ID block of the other nationality: sync() (static/shared/kyc_form.js) marks it u-hidden, a class only the Mobile family defines, so the module says it too */
.wcf [data-kyc-branch].u-hidden { display: none !important; }

/* How did you book? / Which booking?: big option buttons with a one-line hint each */
.wcf-choices { display: flex; flex-direction: column; gap: var(--web-checkin-flow-s3); }
.wcf-choice { display: flex; align-items: center; gap: var(--web-checkin-flow-s4); width: 100%; min-height: 4.25rem; padding: var(--web-checkin-flow-s4); text-align: left; font: inherit; color: var(--web-checkin-flow-text); background: var(--web-checkin-flow-surface); border: 0.125rem solid var(--web-checkin-flow-border); border-radius: var(--web-checkin-flow-r-lg); cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.wcf-choice:hover { border-color: var(--web-checkin-flow-accent); background: var(--web-checkin-flow-sunken); }
.wcf-choice:focus-visible { outline: none; border-color: var(--web-checkin-flow-accent); box-shadow: var(--web-checkin-flow-focus); }
.wcf-choice[aria-pressed="true"] { border-color: var(--web-checkin-flow-accent); background: var(--web-checkin-flow-accent-soft); }
.wcf-choice__icon { flex: none; display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border-radius: var(--web-checkin-flow-r-pill); background: var(--web-checkin-flow-accent-soft); color: var(--web-checkin-flow-accent-ink); }
.wcf-choice__icon svg { width: 1.375rem; height: 1.375rem; }
.wcf-choice__body { display: flex; flex-direction: column; gap: var(--web-checkin-flow-s1); min-width: 0; }
.wcf-choice__body strong { font-size: var(--web-checkin-flow-fs); font-weight: 700; }
.wcf-choice__body span { font-size: var(--web-checkin-flow-fs-sm); color: var(--web-checkin-flow-text-2); line-height: 1.4; }
.wcf-choice[aria-checked="true"] { border-color: var(--web-checkin-flow-accent); background: var(--web-checkin-flow-accent-soft); }
@media (prefers-reduced-motion: reduce) { .wcf-choice { transition: none; } }

/* Seq #13 (Q334): "You already have a booking" -- a compact summary above three large rows (the first preselected); Add an apartment; the saved-draft card. Tokens only. */
.wcf-booking { display: flex; flex-direction: column; gap: var(--web-checkin-flow-s3); }
.wcf-booking__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--web-checkin-flow-s3); }
.wcf-booking__ref { font-size: var(--web-checkin-flow-fs-sm); color: var(--web-checkin-flow-text-2); }
.wcf-booking__ref strong { color: var(--web-checkin-flow-text); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.wcf-status { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 var(--web-checkin-flow-s3); border: 0.0625rem solid transparent; border-radius: var(--web-checkin-flow-r-pill); background: var(--web-checkin-flow-accent-soft); color: var(--web-checkin-flow-accent-ink); font-size: var(--web-checkin-flow-fs-cap); font-weight: 700; }
.wcf-status[data-status="approved"] { background: var(--web-checkin-flow-surface); border-color: var(--web-checkin-flow-ok); color: var(--web-checkin-flow-ok); }
.wcf-draft { margin: 0; padding: var(--web-checkin-flow-s3) var(--web-checkin-flow-s4); border-radius: var(--web-checkin-flow-r-lg); background: var(--web-checkin-flow-sunken); font-size: var(--web-checkin-flow-fs); font-weight: 700; color: var(--web-checkin-flow-text); }

/* apartment cards (Reserve): a small thumbnail beside the facts */
.wcf-types { display: flex; flex-direction: column; gap: var(--web-checkin-flow-s3); }
.wcf-type { display: flex; align-items: stretch; gap: var(--web-checkin-flow-s3); width: 100%; padding: 0; overflow: hidden; text-align: left; font: inherit; color: var(--web-checkin-flow-text); background: var(--web-checkin-flow-surface); border: 0.125rem solid var(--web-checkin-flow-border); border-radius: var(--web-checkin-flow-r-lg); cursor: pointer; }
.wcf-type:hover { border-color: var(--web-checkin-flow-accent); }
.wcf-type:focus-visible { outline: none; border-color: var(--web-checkin-flow-accent); box-shadow: var(--web-checkin-flow-focus); }
.wcf-type[aria-checked="true"] { border-color: var(--web-checkin-flow-accent); background: var(--web-checkin-flow-accent-soft); }
.wcf-type__media { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 6.5rem; aspect-ratio: 4 / 3; background: var(--web-checkin-flow-sunken); color: var(--web-checkin-flow-text-3); overflow: hidden; }
.wcf-type__media img, .wcf-type__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.wcf-type__body { display: flex; flex-direction: column; justify-content: center; gap: var(--web-checkin-flow-s1); padding: var(--web-checkin-flow-s3) var(--web-checkin-flow-s3) var(--web-checkin-flow-s3) 0; min-width: 0; }
.wcf-type__body strong { font-size: var(--web-checkin-flow-fs); font-weight: 700; }
.wcf-type__body span { font-size: var(--web-checkin-flow-fs-sm); color: var(--web-checkin-flow-text-2); }
.wcf-type__body .wcf-type__price { font-weight: 700; color: var(--web-checkin-flow-text); }

/* the apartment already chosen (Reserve): one quiet line with Change */
.wcf-chosen { display: flex; align-items: center; gap: var(--web-checkin-flow-s3); padding: var(--web-checkin-flow-s3) var(--web-checkin-flow-s4); background: var(--web-checkin-flow-sunken); border-radius: var(--web-checkin-flow-r-lg); }
.wcf-chosen strong { flex: 1; min-width: 0; font-size: var(--web-checkin-flow-fs); }
.wcf-chosen__icon svg { width: 1.25rem; height: 1.25rem; color: var(--web-checkin-flow-accent-ink); }

/* Check-in / Check-out: two single-date tiles with the nights between them */
.wcf-dates { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--web-checkin-flow-s2); }
.wcf-date { display: flex; flex-direction: column; gap: var(--web-checkin-flow-s1); min-height: 3.75rem; padding: var(--web-checkin-flow-s3) var(--web-checkin-flow-s4); text-align: left; font: inherit; color: var(--web-checkin-flow-text); background: var(--web-checkin-flow-surface); border: 0.0625rem solid var(--web-checkin-flow-border-strong); border-radius: var(--web-checkin-flow-r-lg); cursor: pointer; }
.wcf-date:hover { border-color: var(--web-checkin-flow-accent); }
.wcf-date:focus-visible, .wcf-date[aria-expanded="true"] { outline: none; border-color: var(--web-checkin-flow-accent); box-shadow: var(--web-checkin-flow-focus); }
.wcf-date__cap { font-size: var(--web-checkin-flow-fs-cap); font-weight: 600; color: var(--web-checkin-flow-text-2); }
.wcf-date__val { font-size: var(--web-checkin-flow-fs); font-weight: 700; }
.wcf-date.is-empty .wcf-date__val { font-weight: 400; color: var(--web-checkin-flow-text-3); }
.wcf-dates__nights { min-width: 3.5rem; text-align: center; font-size: var(--web-checkin-flow-fs-cap); font-weight: 700; color: var(--web-checkin-flow-accent-ink); }
.wcf-dates__nights:empty::before { content: "\2192"; color: var(--web-checkin-flow-text-3); font-weight: 400; font-size: var(--web-checkin-flow-fs); }
@media (max-width: 26rem) {
  .wcf-dates { grid-template-columns: 1fr 1fr; }
  .wcf-dates__nights { grid-column: 1 / -1; grid-row: 2; }
  .wcf-dates__nights:empty { display: none; }
}

/* Adults / Children: one step per press; 44 px targets */
.wcf-guests { display: grid; grid-template-columns: 1fr 1fr; gap: var(--web-checkin-flow-s4); }
.wcf-qty { display: flex; align-items: stretch; border: 0.0625rem solid var(--web-checkin-flow-border-strong); border-radius: var(--web-checkin-flow-r-lg); background: var(--web-checkin-flow-surface); overflow: hidden; }
.wcf-qty__btn { flex: none; width: var(--web-checkin-flow-touch); min-height: var(--web-checkin-flow-touch); font: inherit; font-size: 1.25rem; font-weight: 600; color: var(--web-checkin-flow-accent-ink); background: var(--web-checkin-flow-sunken); border: 0; cursor: pointer; }
.wcf-qty__btn:hover { background: var(--web-checkin-flow-accent-soft); }
.wcf-qty__btn:focus-visible { outline: none; box-shadow: inset var(--web-checkin-flow-focus); }
.wcf-qty__input { flex: 1; min-width: 0; width: 100%; text-align: center; font: inherit; font-size: var(--web-checkin-flow-fs); font-weight: 700; color: var(--web-checkin-flow-text); background: transparent; border: 0; }
.wcf-qty__input:focus-visible { outline: none; box-shadow: inset var(--web-checkin-flow-focus); }
.wcf-unavailable { margin: 0; font-weight: 600; }
.wcf-price { margin: 0; font-size: var(--web-checkin-flow-fs-sm); font-weight: 700; color: var(--web-checkin-flow-text); }

/* mobile: shown read-only with Change, or typed under +91 */
.wcf-mobile { display: flex; align-items: center; justify-content: space-between; gap: var(--web-checkin-flow-s3); min-height: var(--web-checkin-flow-touch); padding: 0 var(--web-checkin-flow-s3) 0 var(--web-checkin-flow-s4); border: 0.0625rem solid var(--web-checkin-flow-border); border-radius: var(--web-checkin-flow-r-lg); background: var(--web-checkin-flow-sunken); }
.wcf-mobile__value { font-weight: 700; letter-spacing: 0.02em; }
/* the shared mobile helper adds its counter, warning and message after the input: each takes its own line under the +91 box */

/* photos: the shared Attach control, drawn with the module's own layout */
.wcf-attach { display: flex; flex-direction: column; gap: var(--web-checkin-flow-s2); }
.wcf-attach__add { justify-content: flex-start; align-self: flex-start; }
.wcf-attach__onfile { display: flex; align-items: center; gap: var(--web-checkin-flow-s2); margin: 0; font-size: var(--web-checkin-flow-fs-sm); font-weight: 600; color: var(--web-checkin-flow-ok); }
.wcf-attach__onfile svg { width: 1.125rem; height: 1.125rem; flex: none; }
.wcf-attach__preview { display: flex; flex-direction: column; gap: var(--web-checkin-flow-s2); }
.wcf-attach__frame { display: flex; justify-content: center; padding: var(--web-checkin-flow-s2); border: 0.0625rem solid var(--web-checkin-flow-border); border-radius: var(--web-checkin-flow-r-lg); background: var(--web-checkin-flow-sunken); }
.wcf-attach__thumb { max-width: 100%; max-height: 12rem; object-fit: contain; border-radius: var(--web-checkin-flow-r-sm); }
.wcf-attach__tile { font-size: var(--web-checkin-flow-fs-sm); font-weight: 600; }
.wcf-attach__status { display: flex; align-items: center; gap: var(--web-checkin-flow-s2); margin: 0; font-size: var(--web-checkin-flow-fs-sm); color: var(--web-checkin-flow-ok); }
.wcf-attach__status svg { width: 1.125rem; height: 1.125rem; flex: none; }
.wcf-attach__actions { display: flex; gap: var(--web-checkin-flow-s2); }
.wcf-icon-btn { width: var(--web-checkin-flow-touch); padding: 0; justify-content: center; }
.wcf-attach-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--web-checkin-flow-s4); }
.wcf-attach-grid > *, .wcf-attach, .wcf-attach__status { min-width: 0; }
.wcf-attach__status { flex-wrap: wrap; overflow-wrap: anywhere; }
@media (min-width: 40rem) { .wcf-attach-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.wcf-sheet { position: fixed; inset: 0; z-index: var(--web-checkin-flow-z-sheet); display: flex; align-items: flex-end; justify-content: center; background: var(--web-checkin-flow-scrim); }
.wcf-sheet__panel { width: 100%; max-width: 30rem; display: flex; flex-direction: column; gap: var(--web-checkin-flow-s2); padding: var(--web-checkin-flow-s4) var(--web-checkin-flow-s4) calc(var(--web-checkin-flow-s4) + env(safe-area-inset-bottom)); background: var(--web-checkin-flow-surface); border-radius: var(--web-checkin-flow-r-xl) var(--web-checkin-flow-r-xl) 0 0; }
.wcf-sheet__head { display: flex; align-items: center; justify-content: space-between; }
.wcf-sheet__title { margin: 0; font-weight: 700; color: var(--web-checkin-flow-text); }
.wcf-sheet__choice { display: flex; align-items: center; gap: var(--web-checkin-flow-s3); min-height: 3rem; padding: 0 var(--web-checkin-flow-s3); font: inherit; font-weight: 600; color: var(--web-checkin-flow-text); background: var(--web-checkin-flow-surface); border: 0.0625rem solid var(--web-checkin-flow-border); border-radius: var(--web-checkin-flow-r-md); cursor: pointer; }
.wcf-sheet__choice:hover { background: var(--web-checkin-flow-sunken); }
.wcf-sheet__choice:focus-visible { outline: none; box-shadow: var(--web-checkin-flow-focus); }
.wcf-sheet__choice svg { width: 1.25rem; height: 1.25rem; }

/* summary rows: the review, the reference card and the success facts */
.wcf-facts { margin: 0; display: flex; flex-direction: column; border: 0.0625rem solid var(--web-checkin-flow-border); border-radius: var(--web-checkin-flow-r-lg); background: var(--web-checkin-flow-sunken); }
.wcf-facts:empty { display: none; }
.wcf-facts__row { display: flex; justify-content: space-between; gap: var(--web-checkin-flow-s4); padding: var(--web-checkin-flow-s3) var(--web-checkin-flow-s4); font-size: var(--web-checkin-flow-fs-sm); }
.wcf-facts__row + .wcf-facts__row { border-top: 0.0625rem solid var(--web-checkin-flow-border); }
.wcf-facts__row dt { color: var(--web-checkin-flow-text-2); }
.wcf-facts__row dd { margin: 0; font-weight: 700; color: var(--web-checkin-flow-text); text-align: right; }
.wcf-review { display: flex; flex-direction: column; gap: var(--web-checkin-flow-s4); }
.wcf-review__card { display: flex; flex-direction: column; gap: var(--web-checkin-flow-s2); }
.wcf-review__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--web-checkin-flow-s3); }
.wcf-review__head h3 { margin: 0; font-family: var(--web-checkin-flow-font); font-size: var(--web-checkin-flow-fs); font-weight: 700; color: var(--web-checkin-flow-text); }

/* the reference: a large number, no unit */
.wcf-ref { display: flex; flex-direction: column; gap: var(--web-checkin-flow-s1); padding: var(--web-checkin-flow-s4); text-align: center; border-radius: var(--web-checkin-flow-r-lg); background: var(--web-checkin-flow-accent-soft); }
.wcf-ref span { font-size: var(--web-checkin-flow-fs-sm); font-weight: 600; color: var(--web-checkin-flow-accent-ink); }
.wcf-ref strong { font-family: var(--web-checkin-flow-font-title); font-size: var(--web-checkin-flow-fs-title); letter-spacing: 0.04em; color: var(--web-checkin-flow-text); font-variant-numeric: tabular-nums; }
.wcf-ref--big strong { font-size: var(--web-checkin-flow-fs-big); }
.wcf-sent { display: flex; flex-direction: column; gap: var(--web-checkin-flow-s4); }
.wcf-sent__icon, .wcf-success__icon { display: inline-flex; width: 3rem; height: 3rem; align-items: center; justify-content: center; border-radius: var(--web-checkin-flow-r-pill); background: var(--web-checkin-flow-accent-soft); color: var(--web-checkin-flow-ok); }
.wcf-sent__icon svg, .wcf-success__icon svg { width: 1.75rem; height: 1.75rem; }

/* success + the optional account offer */
.wcf-success { display: flex; flex-direction: column; gap: var(--web-checkin-flow-s4); }
.wcf-card { display: flex; flex-direction: column; gap: var(--web-checkin-flow-s4); padding: var(--web-checkin-flow-s5); background: var(--web-checkin-flow-surface); border: 0.0625rem solid var(--web-checkin-flow-border); border-radius: var(--web-checkin-flow-r-xl); }
.wcf-help { display: flex; align-items: center; gap: var(--web-checkin-flow-s2); }
.wcf-help svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--web-checkin-flow-accent-ink); }
/* Seq #12 (Q333): the two soft offer cards that close a public success screen (templates/webcheckin/_offer.html). The same soft fill as the opening card; two-up only when the column is wide enough
   for two comfortable cards (the public column is 40rem today, so they stack); the account card takes the full row while its form is open. */
.wcf-done { margin: 0; font-size: var(--web-checkin-flow-fs); font-weight: 600; color: var(--web-checkin-flow-ok); }
.wcf-offer { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--web-checkin-flow-s4); align-items: start; }
.wcf-offer__card { gap: var(--web-checkin-flow-s3); background: var(--web-checkin-flow-accent-soft); border-color: transparent; }
.wcf-offer__card--account.is-open { grid-column: 1 / -1; }
.wcf-offer__icon { display: inline-flex; align-self: flex-start; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: var(--web-checkin-flow-r-pill); background: var(--web-checkin-flow-surface); color: var(--web-checkin-flow-accent-ink); }
.wcf-offer__icon svg { width: 1.25rem; height: 1.25rem; }
.wcf-offer__card .wcf-title, .wcf-offer__card .wcf-title + p { margin: 0; }
.wcf-offer__note { margin: 0; font-size: var(--web-checkin-flow-fs-sm); font-weight: 600; color: var(--web-checkin-flow-accent-ink); }
/* the three steps: numbered dots on one connecting line (Set password, Verify OTP, Log in), not chips */
.wcf-offer__steps { list-style: none; margin: 0; padding: 0; display: flex; counter-reset: wcf-step; font-size: var(--web-checkin-flow-fs-sm); font-weight: 600; color: var(--web-checkin-flow-text); }
.wcf-offer__steps li { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--web-checkin-flow-s1); text-align: center; counter-increment: wcf-step; }
.wcf-offer__steps li::before { content: counter(wcf-step); position: relative; z-index: 1; display: inline-flex; width: 1.75rem; height: 1.75rem; align-items: center; justify-content: center; border-radius: var(--web-checkin-flow-r-pill); background: var(--web-checkin-flow-surface); border: 0.125rem solid var(--web-checkin-flow-accent-ink); color: var(--web-checkin-flow-accent-ink); font-size: var(--web-checkin-flow-fs-cap); }
.wcf-offer__steps li + li::after { content: ""; position: absolute; top: 0.8125rem; right: 50%; width: 100%; height: 0.125rem; background: var(--web-checkin-flow-accent-ink); }
.wcf-offer__closed, .wcf-offer__form { display: flex; flex-direction: column; gap: var(--web-checkin-flow-s2); }
.wcf-offer__form { gap: var(--web-checkin-flow-s4); }
.wcf-offer__cta { align-self: stretch; justify-content: center; text-align: center; }
.wcf-offer__closed .wcf-link { align-self: center; }
.wcf-later { text-align: center; }
.wcf-home { align-self: stretch; text-align: center; justify-content: center; }

/* the bar that holds Back and the one primary button, always in thumb reach; it says why the button is off */
.wcf-actions { position: fixed; left: 0; right: 0; bottom: var(--web-checkin-flow-kbd); z-index: var(--web-checkin-flow-z-bar); display: flex; flex-direction: column; gap: var(--web-checkin-flow-s2); padding: var(--web-checkin-flow-s3) var(--web-checkin-flow-bar-pad) calc(var(--web-checkin-flow-s3) + env(safe-area-inset-bottom)); background: var(--web-checkin-flow-surface); border-top: 0.0625rem solid var(--web-checkin-flow-border); box-shadow: var(--web-checkin-flow-shadow); }
.wcf-actions__row { display: flex; gap: var(--web-checkin-flow-s3); }
.wcf-actions__row .wcf-primary { flex: 1; }
.wcf-why { margin: 0; font-size: var(--web-checkin-flow-fs-sm); font-weight: 600; color: var(--web-checkin-flow-text-2); }
.wcf-primary[aria-disabled="true"] { opacity: 0.55; }
.wcf-back[hidden] { display: none; }

/* ============================== Room Service (EXEC-WC1 Seq #6): the public Room Service page's own few styles ============================== */
/* The page reuses every .wcf- style above; only the service list, the chosen-service card and the sent line are new. Tokens only. */
.rsv-for:empty { display: none; }
.rsv-list { max-height: 22rem; overflow-y: auto; padding: var(--web-checkin-flow-s1); }
.rsv-list:empty, .rsv-count:empty { display: none; }
.rsv-item { min-height: 3.5rem; }
.rsv-picked[hidden] { display: none; }
.rsv-picked { display: flex; flex-direction: column; gap: var(--web-checkin-flow-s4); }
.rsv-picked__row { display: flex; align-items: center; justify-content: space-between; gap: var(--web-checkin-flow-s3); padding: var(--web-checkin-flow-s4); border-radius: var(--web-checkin-flow-r-lg); background: var(--web-checkin-flow-accent-soft); }
.rsv-picked__body { display: flex; flex-direction: column; gap: var(--web-checkin-flow-s1); min-width: 0; }
.rsv-picked__body strong { color: var(--web-checkin-flow-text); }
.rsv-picked__body span { font-size: var(--web-checkin-flow-fs-sm); color: var(--web-checkin-flow-text-2); }
.rsv-price { font-weight: 700; }
.rsv-price:empty, [data-rsv-price-note]:empty { display: none; }
.rsv-qty { max-width: 8rem; }
.rsv-sent { display: flex; flex-direction: column; gap: var(--web-checkin-flow-s1); text-align: center; }