/*
 * Booking storefront (headless) — merchant-owned, V3-seeded theme styles.
 * The seeded default IS the product, so this is designed to look premium out of
 * the box on any theme. It consumes the theme's design tokens (colors, radius,
 * shadows, fonts) with graceful fallbacks — never hardcoded brand colors — so a
 * plumber's, salon's or consultant's site all feel native. The thin DOM adapter
 * (assets/js/booking.js) only toggles state attributes; all layout lives here.
 */
/* NOTE: the earlier `[data-booking-offerings] .service-card` grid-card block was
   removed — the Kintsugi-parity listing below (`.service-grid` / `.service-card`
   / `.service-card-image|content|meta`) fully supersedes it. */

.fb {
  /* Map booking locals onto theme tokens with sensible fallbacks. */
  --fb-ink: var(--color-text, #111827);
  --fb-muted: var(--color-muted, #6b7280);
  --fb-line: var(--color-line, #e5e7eb);
  --fb-surface: var(--color-white, #ffffff);
  --fb-surface-2: var(--color-soft, #f9fafb);
  --fb-accent: var(--color-primary, #0d9488);
  --fb-accent-strong: var(--color-primary-dark, #0f766e);
  --fb-accent-soft: var(--color-primary-light, #f0fdfa);
  /* Foreground for anything sitting ON the accent color. The theme system has
   * no semantic on-primary token and primaries are saturated, so — matching the
   * ecommerce convention (.faster-checkout__submit) — this stays literal white
   * in BOTH light and dark themes so button labels never go low-contrast. */
  --fb-accent-ink: #ffffff;
  --fb-danger: #b42318;
  --fb-radius: var(--radius, 10px);
  --fb-radius-lg: calc(var(--radius, 10px) + 6px);
  --fb-shadow-sm: var(--shadow-sm, 0 1px 3px rgba(17, 24, 39, 0.08));
  --fb-shadow-md: var(--shadow-md, 0 10px 30px rgba(17, 24, 39, 0.1));
  --fb-heading: var(--font-heading, var(--font-body, inherit));
  --fb-gap: clamp(1rem, 2.4vw, 1.5rem);

  display: grid;
  gap: var(--fb-gap);
  max-width: var(--container, 70rem);
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 2.75rem) clamp(1rem, 4vw, 2rem);
  color: var(--fb-ink);
  font-family: var(--font-body, inherit);
}
.fb *, .fb *::before, .fb *::after { box-sizing: border-box; }
.fb h1, .fb h2, .fb h3, .fb p { margin: 0; }
.fb h1, .fb h2 { font-family: var(--fb-heading); letter-spacing: -0.015em; }
/* The theme's site-header is position:fixed (~72px). Hero pages clear it with
   .page-hero padding; this flow has no hero, so add matching top clearance so
   the offering title never tucks under the fixed nav. */
.page-booking-offering .fb,
.page-booking-event .fb,
.page-booking-plan .fb { padding-top: calc(72px + clamp(1.25rem, 4vw, 2.25rem)); }

.fb__layout { display: grid; gap: var(--fb-gap); align-items: start; }
@media (min-width: 62rem) {
  .fb__layout { grid-template-columns: minmax(0, 1.65fr) minmax(19rem, 1fr); }
  /* Offset the sticky column below the fixed site-header (~72px) so it never
     tucks behind the nav on scroll. */
  .fb__aside { position: sticky; top: calc(72px + 1.25rem); }
}
.fb__main, .fb__aside { display: grid; gap: var(--fb-gap); min-width: 0; }
/* The flow-steps wrapper must carry the same rhythm so stacked section cards
 * never touch (they're grouped in one element the adapter can show/hide). */
[data-fb-steps-region] { display: grid; gap: var(--fb-gap); min-width: 0; }

/* ---- Surfaces --------------------------------------------------------- */
.fb-panel {
  display: grid;
  gap: 0.9rem;
  padding: clamp(1.1rem, 2.6vw, 1.6rem);
  border: 1px solid var(--fb-line);
  border-radius: var(--fb-radius-lg);
  background: var(--fb-surface);
  box-shadow: var(--fb-shadow-sm);
}
.fb-panel[hidden] { display: none; }
.fb-panel__head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.fb-panel__num {
  display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none;
  border-radius: 999px; background: var(--fb-accent-soft); color: var(--fb-accent-strong);
  font-size: 0.85rem; font-weight: 800;
}
.fb-panel__title { font-size: clamp(1.05rem, 2.4vw, 1.2rem); font-weight: 800; }
.fb-panel__hint { color: var(--fb-muted); font-size: 0.92rem; line-height: 1.5; }
.fb-eyebrow {
  justify-self: start;
  display: inline-block;
  background: var(--fb-accent); color: var(--fb-accent-ink);
  border-radius: 999px; padding: 0.32rem 0.8rem;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* ---- Marketing header ------------------------------------------------- */
.fb-hero { display: grid; gap: 0.85rem; }
.fb-hero h1 { font-size: clamp(1.75rem, 5vw, 2.6rem); font-weight: 800; line-height: 1.1; }
.fb-hero__summary { color: var(--fb-muted); font-size: clamp(1rem, 2.4vw, 1.15rem); line-height: 1.55; max-width: 48rem; }
.fb-badges { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.fb-badges span {
  padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--fb-accent-soft);
  color: var(--fb-accent-strong); font-size: 0.78rem; font-weight: 700;
}
.fb-media { display: grid; gap: 0.65rem; }
.fb-media__frame { margin: 0; overflow: hidden; border-radius: var(--fb-radius-lg); border: 1px solid var(--fb-line); box-shadow: var(--fb-shadow-md); }
.fb-media__frame img, .fb-media__frame video { display: block; width: 100%; max-height: 28rem; object-fit: cover; }
.fb-media__thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fb-media__thumb { padding: 0; border: 2px solid transparent; border-radius: var(--fb-radius); background: none; cursor: pointer; overflow: hidden; line-height: 0; transition: border-color .15s ease, transform .15s ease; }
.fb-media__thumb img { width: 4.75rem; height: 4.75rem; object-fit: cover; display: block; }
.fb-media__thumb:hover { transform: translateY(-2px); }
.fb-media__thumb.is-active { border-color: var(--fb-accent); }
.fb-media__thumb:focus-visible { outline: 2px solid var(--fb-accent); outline-offset: 2px; }

/* Back-to-listing link */
.fb-back { display: inline-flex; align-items: center; gap: .4rem; align-self: start; color: var(--fb-muted); font-weight: 600; font-size: .92rem; text-decoration: none; transition: color .15s ease, transform .15s ease; }
.fb-back:hover { color: var(--fb-accent); transform: translateX(-3px); }
.fb-back svg { flex: none; }
.fb-rating { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; }
/* Inline-SVG star bar — grey track with a gold overlay clipped to the average,
 * giving an accurate partial star. No emoji/glyph/remote image anywhere. */
.fb-stars { display: inline-flex; align-items: center; gap: 0.45rem; }
.fb-stars__bar { position: relative; display: inline-block; line-height: 0; }
.fb-stars__track, .fb-stars__fill { display: inline-flex; gap: 2px; }
.fb-stars__track { color: var(--fb-line); }
.fb-stars__fill { position: absolute; inset: 0; overflow: hidden; white-space: nowrap; color: #e8a400; }
.fb-stars svg { fill: currentColor; display: block; }
.fb-stars__text { font-weight: 700; color: var(--fb-ink); font-size: 0.92rem; white-space: nowrap; }
.fb-stars__sep { color: var(--fb-muted); }
.fb-icon { display: inline-block; vertical-align: -0.18em; flex: none; }
.fb-panel__num .fb-icon { color: var(--fb-accent-strong); }
.fb-description { color: var(--fb-ink); line-height: 1.65; }
.fb-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.7rem; margin: 0; }
.fb-facts > div { padding: 0.7rem 0.85rem; border-radius: var(--fb-radius); background: var(--fb-surface-2); border: 1px solid var(--fb-line); }
.fb-facts dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fb-muted); font-weight: 700; }
.fb-facts dd { margin: 0.2rem 0 0; font-weight: 700; }

.fb-reviews { display: grid; gap: 0.75rem; }
.fb-review { padding: 0.9rem 1.05rem; border: 1px solid var(--fb-line); border-radius: var(--fb-radius); background: var(--fb-surface-2); display: grid; gap: 0.35rem; }
.fb-review__meta { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.86rem; color: var(--fb-muted); align-items: center; }
.fb-review p { line-height: 1.55; }
.fb-promos { display: grid; gap: 0.55rem; }
.fb-promo { display: flex; gap: 0.55rem; align-items: center; padding: 0.6rem 0.85rem; border: 1px dashed var(--fb-accent); border-radius: var(--fb-radius); background: var(--fb-accent-soft); color: var(--fb-accent-strong); font-weight: 700; }

/* ---- Step rail -------------------------------------------------------- */
.fb-steps { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.fb-steps li {
  display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.8rem; border-radius: 999px;
  border: 1px solid var(--fb-line); font-size: 0.82rem; font-weight: 700; color: var(--fb-muted);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.fb-steps li b { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 999px; background: var(--fb-surface-2); font-size: 0.76rem; }
.fb-steps li[data-fb-current="true"] { border-color: var(--fb-accent); color: var(--fb-accent-strong); background: var(--fb-accent-soft); }
.fb-steps li[data-fb-current="true"] b { background: var(--fb-accent); color: var(--fb-accent-ink); }
.fb-steps li[data-fb-done="true"] b { background: var(--fb-accent-strong); color: var(--fb-accent-ink); }
.fb-nav { display: flex; flex-wrap: wrap; gap: 0.65rem; justify-content: space-between; align-items: center; }
.fb-nav__spacer { flex: 1 1 auto; }

/* ---- Controls --------------------------------------------------------- */
.fb-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 2.9rem; padding: 0.65rem 1.3rem;
  border-radius: 999px; border: 1px solid var(--fb-accent);
  background: var(--fb-accent); color: var(--fb-accent-ink);
  font: inherit; font-weight: 800; font-size: 0.98rem; cursor: pointer; text-decoration: none;
  box-shadow: var(--fb-shadow-sm);
  transition: transform 0.06s ease, filter 0.15s ease, background 0.15s ease;
}
.fb-button:hover { background: var(--fb-accent-strong); } /* stays white text */
.fb-button:active { transform: translateY(1px); }
/* Ghost buttons never swap their background on hover (which would strand the
 * label); only the border + text shift to the accent, so contrast holds in
 * light and dark. */
.fb-button--ghost { background: transparent; color: var(--fb-ink); border-color: var(--fb-line); box-shadow: none; }
.fb-button--ghost:hover { background: transparent; color: var(--fb-accent-strong); border-color: var(--fb-accent); }
.fb-button--block { width: 100%; }
.fb-button--lg { min-height: 3.2rem; font-size: 1.05rem; }
.fb-button:disabled { opacity: 0.5; cursor: not-allowed; filter: none; transform: none; }
.fb-input, .fb-select {
  min-height: 2.9rem; padding: 0.6rem 0.8rem; width: 100%;
  border: 1px solid var(--fb-line); border-radius: var(--fb-radius); background: var(--fb-surface); color: var(--fb-ink); font: inherit;
}
.fb-input:focus, .fb-select:focus, .fb-option:focus-within, .fb-slot:focus-visible { outline: 2px solid var(--fb-accent); outline-offset: 1px; }
.fb-field { display: grid; gap: 0.35rem; }
.fb-field > span { font-weight: 700; font-size: 0.9rem; }
.fb-contact { display: grid; gap: 0.75rem; }
.fb-contact__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 640px) { .fb-contact__grid { grid-template-columns: 1fr; } }
.fb-member-contact { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border: 1px solid var(--fb-line); border-radius: var(--fb-radius); background: var(--fb-surface-2); }
.fb-member-contact__icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--fb-surface); color: var(--fb-accent); }
.fb-member-contact__body { display: grid; min-width: 0; gap: 0.125rem; }
.fb-member-contact__label { color: var(--fb-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.fb-member-contact__email { overflow-wrap: anywhere; color: var(--fb-muted); font-size: 0.875rem; }

/* ---- Themed dropdown (custom, never a native <select>) ---------------- */
/* Built on <details>: works without JS, keyboard operable, token-styled, and
 * expands in-flow so the panel never overflows a phone viewport. */
/* Collapsed by default = just the trigger. Open = a floating overlay panel that
 * sits ON TOP of the page (absolute) and never reserves permanent space. */
.fb-dd { position: relative; }
.fb-dd__wrap { border: 1px solid var(--fb-line); border-radius: var(--fb-radius); background: var(--fb-surface); }
.fb-dd__wrap[open] { border-color: var(--fb-accent); }
.fb-dd__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  min-height: 2.9rem; padding: 0.65rem 0.9rem; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--fb-ink);
}
.fb-dd__trigger::-webkit-details-marker { display: none; }
.fb-dd__trigger::marker { content: ""; }
.fb-dd__trigger:focus-visible { outline: 2px solid var(--fb-accent); outline-offset: 1px; }
.fb-dd__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-dd__chevron { color: var(--fb-muted); transition: transform 0.15s ease; flex: none; }
.fb-dd__wrap[open] .fb-dd__chevron { transform: rotate(180deg); }
.fb-dd__panel {
  position: absolute; top: calc(100% + 4px); inset-inline: 0; z-index: 40;
  padding: 0.4rem; display: grid; gap: 0.35rem; max-height: 18rem; overflow: auto;
  background: var(--fb-surface); border: 1px solid var(--fb-accent);
  border-radius: var(--fb-radius); box-shadow: var(--fb-shadow-md);
}
.fb-dd__search { margin-bottom: 0.2rem; }
.fb-dd__options { display: grid; gap: 0.3rem; }
.fb-dd__option { display: flex; align-items: center; gap: 0.65rem; min-height: 2.75rem; padding: 0.55rem 0.7rem; border-radius: var(--fb-radius); cursor: pointer; }
.fb-dd__option:hover { background: var(--fb-surface-2); }
.fb-dd__option:has(input:checked) { background: var(--fb-accent-soft); }
.fb-dd__option:has(input:checked) .fb-option__title { color: var(--fb-accent-strong); }
.fb-dd__option input { accent-color: var(--fb-accent); width: 1.1rem; height: 1.1rem; flex: none; }
.fb-dd__option[hidden] { display: none; }
.fb-dd--sm .fb-dd__trigger { min-height: 2.6rem; font-weight: 600; }
.fb-dd[data-fb-dd-disabled] .fb-dd__wrap { opacity: 0.55; }
.fb-dd[data-fb-dd-disabled] .fb-dd__trigger { cursor: not-allowed; }

/* ---- Offers strip (slim, sleek; surfaced near the top when promotions exist) */
.fb-offers {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--fb-accent); border-radius: 999px;
  background: var(--fb-accent-soft);
}
.fb-offers__icon { display: inline-flex; color: var(--fb-accent-strong); flex: none; }
.fb-offers__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; min-width: 0; }
.fb-offers__chip {
  padding: 0.22rem 0.7rem; border-radius: 999px;
  background: var(--fb-surface); border: 1px solid var(--fb-line); color: var(--fb-ink);
  font-weight: 700; font-size: 0.85rem; line-height: 1.35;
}
@media (max-width: 30rem) {
  .fb-offers__chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fb-offers__chip { white-space: nowrap; }
}

/* ---- Extras / one-tap upsell tiles ------------------------------------ */
.fb-extras { padding: 0; }
.fb-extras__summary { display: flex; align-items: center; gap: 0.7rem; padding: clamp(1rem, 2.6vw, 1.5rem); cursor: pointer; list-style: none; }
.fb-extras__summary::-webkit-details-marker { display: none; }
.fb-extras__summary::marker { content: ""; }
.fb-extras__summary:focus-visible { outline: 2px solid var(--fb-accent); outline-offset: -2px; border-radius: var(--fb-radius-lg); }
.fb-extras__heading { display: grid; gap: 0.15rem; flex: 1 1 auto; min-width: 0; }
.fb-extras[open] .fb-extras__summary .fb-dd__chevron { transform: rotate(180deg); }
.fb-extras__body { padding: 0 clamp(1rem, 2.6vw, 1.5rem) clamp(1rem, 2.6vw, 1.5rem); display: grid; gap: 0.85rem; }
.fb-upsell { display: grid; gap: 0.6rem; }
@media (min-width: 40rem) { .fb-upsell { grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); } }
.fb-upsell__card { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 0.9rem; border: 1px solid var(--fb-line); border-radius: var(--fb-radius); background: var(--fb-surface); }
.fb-upsell__body { display: grid; gap: 0.15rem; flex: 1 1 auto; min-width: 0; }
.fb-upsell__name { font-weight: 700; }
.fb-upsell__price { font-weight: 800; white-space: nowrap; }
.fb-upsell__add { min-height: 2.75rem; padding: 0.45rem 1.15rem; flex: none; }
.fb-upsell__add:disabled { opacity: 0.5; cursor: not-allowed; }
.fb-upsell__card[data-fb-added="true"] { border-color: var(--fb-accent); background: var(--fb-accent-soft); }
.fb-upsell__card[data-fb-added="true"] .fb-upsell__add { background: transparent; color: var(--fb-accent-strong); border-color: var(--fb-accent); }
.fb-upsell__summary { display: grid; gap: 0.45rem; padding-top: 0.7rem; border-top: 1px solid var(--fb-line); }
.fb-upsell__lines { display: grid; gap: 0.3rem; }
.fb-upsell__line { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem; }
.fb-upsell__line span:last-child { font-weight: 700; white-space: nowrap; }

/* ---- Option lists ----------------------------------------------------- */
.fb-options { display: grid; gap: 0.6rem; }
.fb-options--grid { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.fb-option {
  display: flex; gap: 0.7rem; align-items: center;
  padding: 0.85rem 0.95rem; border: 1px solid var(--fb-line); border-radius: var(--fb-radius);
  background: var(--fb-surface); cursor: pointer; transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.fb-option:hover { border-color: var(--fb-accent); }
.fb-option[data-fb-selected="true"] { border-color: var(--fb-accent); box-shadow: inset 0 0 0 1.5px var(--fb-accent); background: var(--fb-accent-soft); }
.fb-option input { flex: none; accent-color: var(--fb-accent); width: 1.15rem; height: 1.15rem; }
.fb-option__body { display: grid; gap: 0.15rem; min-width: 0; }
.fb-option__title { font-weight: 700; }
.fb-option__meta { color: var(--fb-muted); font-size: 0.86rem; line-height: 1.4; }
.fb-option__avatar { width: 2.6rem; height: 2.6rem; border-radius: 999px; object-fit: cover; border: 1px solid var(--fb-line); flex: none; }
.fb-option__price { margin-inline-start: auto; font-weight: 800; white-space: nowrap; }

.fb-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.5rem; }
.fb-slot {
  min-height: 2.9rem; border: 1px solid var(--fb-line); border-radius: var(--fb-radius);
  background: var(--fb-surface); color: var(--fb-ink); font: inherit; font-weight: 700; cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.fb-slot:hover { border-color: var(--fb-accent); }
.fb-slot[data-fb-selected="true"] { border-color: var(--fb-accent); background: var(--fb-accent); color: var(--fb-accent-ink); box-shadow: var(--fb-shadow-sm); }
.fb-slots__empty, .fb-empty { color: var(--fb-muted); font-size: 0.92rem; padding: 0.5rem 0; }
.fb-date { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: end; }
.fb-date .fb-field { flex: 1 1 12rem; }

/* Week-strip date picker */
.fb-week { display: flex; align-items: stretch; gap: 0.5rem; }
.fb-week__nav {
  flex: none; width: 2.5rem; border: 1px solid var(--fb-line); border-radius: var(--fb-radius);
  background: var(--fb-surface); color: var(--fb-ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s ease, color .15s ease;
}
.fb-week__nav:hover { border-color: var(--fb-accent); color: var(--fb-accent); }
.fb-week__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.4rem; flex: 1; min-width: 0; }
.fb-week__day {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  padding: 0.55rem 0.25rem; border: 1px solid var(--fb-line); border-radius: var(--fb-radius);
  background: var(--fb-surface); color: var(--fb-ink); cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.fb-week__day:hover:not(:disabled) { border-color: var(--fb-accent); }
.fb-week__dow { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fb-muted); }
.fb-week__date { font-size: 1.05rem; font-weight: 700; line-height: 1.1; }
.fb-week__day.is-today:not(.is-active) .fb-week__date { color: var(--fb-accent-strong); }
.fb-week__day.is-active { background: var(--fb-accent); border-color: var(--fb-accent); color: var(--fb-accent-ink); }
.fb-week__day.is-active .fb-week__dow { color: var(--fb-accent-ink); opacity: 0.85; }
.fb-week__day:disabled { opacity: 0.38; cursor: not-allowed; }

/* Grouped time slots (morning / afternoon / evening) */
.fb-times { margin-top: 1.1rem; }
.fb-slots-groups { display: grid; gap: 1.15rem; }
.fb-slot-group__label { margin: 0 0 0.55rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fb-muted); }
.fb-slot-group__times { display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: 0.5rem; }

/* ---- Add-on steppers -------------------------------------------------- */
.fb-addon { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.8rem 0.95rem; border: 1px solid var(--fb-line); border-radius: var(--fb-radius); }
.fb-addon__body { display: grid; gap: 0.15rem; min-width: 0; }
.fb-stepper { display: inline-flex; align-items: center; gap: 0.6rem; flex: none; }
.fb-stepper button { width: 2.4rem; height: 2.4rem; border-radius: 999px; border: 1px solid var(--fb-line); background: var(--fb-surface); color: var(--fb-ink); font-size: 1.2rem; font-weight: 800; cursor: pointer; }
.fb-stepper button:hover { border-color: var(--fb-accent); }
.fb-stepper output { min-width: 2ch; text-align: center; font-weight: 800; }

/* ---- Pricing ---------------------------------------------------------- */
.fb-pricing { display: grid; gap: 0.55rem; }
.fb-pricing__row { display: flex; justify-content: space-between; gap: 1rem; }
.fb-pricing__row--muted { color: var(--fb-muted); font-size: 0.9rem; }
.fb-pricing__row--discount { color: var(--fb-accent-strong); font-weight: 700; }
.fb-pricing__row--total { border-top: 1px solid var(--fb-line); margin-top: 0.25rem; padding-top: 0.65rem; font-size: 1.2rem; font-weight: 800; }
.fb-pricing__deposit { color: var(--fb-accent-strong); font-weight: 700; font-size: 0.9rem; }
.fb-pricing__note { color: var(--fb-muted); font-size: 0.85rem; }

/* ---- Payment ---------------------------------------------------------- */
.fb-pay { display: grid; gap: 1rem; }
.fb-settlement { display: grid; gap: 0.75rem; margin: 0; padding: 0; border: 0; }
.fb-settlement[hidden] { display: none !important; }
.fb-settlement legend { margin-bottom: 0.75rem; color: var(--fb-ink); font-family: var(--fb-heading); font-size: 1rem; font-weight: 700; }
.fb-settlement__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.fb-settlement__option { display: grid; grid-template-columns: 1.2rem 1fr; gap: 0.75rem; align-items: start; min-height: 5.5rem; padding: 1rem; border: 1px solid var(--fb-line); border-radius: var(--fb-radius); background: var(--fb-surface); cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.fb-settlement__option:hover { border-color: var(--fb-accent); }
.fb-settlement__option[data-fb-selected="true"] { border-color: var(--fb-accent); background: var(--fb-accent-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--fb-accent) 18%, transparent); }
.fb-settlement__option input { position: absolute; opacity: 0; pointer-events: none; }
.fb-settlement__mark { width: 1.15rem; height: 1.15rem; margin-top: 0.12rem; border: 2px solid var(--fb-line); border-radius: 999px; background: var(--fb-surface); box-shadow: inset 0 0 0 3px var(--fb-surface); }
.fb-settlement__option[data-fb-selected="true"] .fb-settlement__mark { border-color: var(--fb-accent); background: var(--fb-accent); }
.fb-settlement__option:focus-within { outline: 3px solid color-mix(in srgb, var(--fb-accent) 28%, transparent); outline-offset: 2px; }
.fb-settlement__copy { display: grid; gap: 0.25rem; line-height: 1.35; }
.fb-settlement__copy strong { color: var(--fb-ink); font-size: 0.95rem; }
.fb-settlement__copy small { color: var(--fb-muted); font-size: 0.8rem; }
@media (max-width: 600px) { .fb-settlement__options { grid-template-columns: 1fr; } }
/* Pill tabs — payment method choice (Pay by card / Use my credits / …). Looks
 * like the Team & Access tab bar; behaves as a single-select radiogroup. */
.fb-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
@media (max-width: 30rem) { .fb-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } }
.fb-tab {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 2.75rem; padding: 0.5rem 1.05rem; border-radius: 999px;
  border: 1px solid var(--fb-line); background: var(--fb-surface-2); color: var(--fb-ink);
  font: inherit; font-weight: 700; font-size: 0.92rem; cursor: pointer; white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.fb-tab:hover { border-color: var(--fb-accent); color: var(--fb-accent-strong); }
.fb-tab[aria-checked="true"] { background: var(--fb-accent); border-color: var(--fb-accent); color: var(--fb-accent-ink); }
.fb-tab[aria-checked="true"]:hover { background: var(--fb-accent-strong); border-color: var(--fb-accent-strong); color: var(--fb-accent-ink); }
.fb-tab:focus-visible { outline: 2px solid var(--fb-accent); outline-offset: 2px; }
.fb-tab .fb-icon { width: 1.05em; height: 1.05em; }
.fb-pay__lock { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--fb-muted); font-size: 0.82rem; font-weight: 600; }
.fb-pay__card { padding: 1rem; border: 1px solid var(--fb-line); border-radius: var(--fb-radius); background: var(--fb-surface-2); min-height: 3.25rem; }
.fb-pay__methods, .fb-pay__saved { display: grid; gap: 0.5rem; }
/* Settlement chooser is a horizontal pill-tab bar (see .fb-tabs), never stacked. */
.fb-pay__settlements { display: flex; }
.fb-pay__group-label { font-weight: 700; font-size: 0.86rem; color: var(--fb-muted); }
.fb-coupon { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.fb-coupon .fb-input { flex: 1 1 12rem; }
.fb-tips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fb-tips button { min-height: 2.5rem; padding: 0.45rem 0.9rem; border: 1px solid var(--fb-line); border-radius: 999px; background: var(--fb-surface); color: var(--fb-ink); font: inherit; font-weight: 700; cursor: pointer; }
.fb-tips button[data-fb-selected="true"] { border-color: var(--fb-accent); background: var(--fb-accent); color: var(--fb-accent-ink); }

/* ---- Event variants --------------------------------------------------- */
.fb-event { display: grid; gap: 0.7rem; }
.fb-event__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.55rem; }
.fb-event__fact { padding: 0.7rem 0.8rem; border-radius: var(--fb-radius); background: var(--fb-surface-2); border: 1px solid var(--fb-line); }
.fb-event__fact dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fb-muted); font-weight: 700; }
.fb-event__fact dd { margin: 0.2rem 0 0; font-weight: 700; }
.fb-event__quantity { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.8rem; border: 1px solid var(--fb-line); border-radius: var(--fb-radius); background: var(--fb-surface-2); }
.fb-event__quantity-copy { display: grid; gap: 0.1rem; }
.fb-event__quantity-copy small { color: var(--fb-muted); }
.fb-event__notice { padding: 0.7rem 0.9rem; border-radius: var(--fb-radius); border-inline-start: 3px solid var(--fb-accent); background: var(--fb-accent-soft); font-size: 0.9rem; line-height: 1.5; }
.fb-capacity { display: grid; gap: 0.35rem; }
.fb-capacity-bar { height: 0.55rem; border-radius: 999px; background: var(--fb-surface-2); overflow: hidden; border: 1px solid var(--fb-line); }
.fb-capacity-bar > span { display: block; height: 100%; background: var(--fb-accent); }

/* ---- Plan / package --------------------------------------------------- */
.fb-plan { display: grid; gap: 0.85rem; }
.fb-plan__badge { justify-self: start; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.76rem; font-weight: 800; background: var(--fb-accent); color: var(--fb-accent-ink); }
.fb-plan__price { font-family: var(--fb-heading); font-size: clamp(1.8rem, 5vw, 2.3rem); font-weight: 800; line-height: 1; }
.fb-plan__price small { font-size: 0.85rem; font-weight: 600; color: var(--fb-muted); }
.fb-plan__features { display: grid; gap: 0.5rem; padding: 0; margin: 0; list-style: none; }
.fb-plan__features li { display: flex; gap: 0.55rem; align-items: flex-start; line-height: 1.45; }
.fb-plan__features li::before { content: "✓"; color: var(--fb-accent-strong); font-weight: 800; flex: none; }

/* ---- Access gate ------------------------------------------------------ */
.fb-gate { display: grid; gap: 0.85rem; padding: clamp(1.1rem, 2.6vw, 1.6rem); border: 1px solid var(--fb-line); border-radius: var(--fb-radius-lg); background: var(--fb-surface-2); }
.fb-gate__form { display: grid; gap: 0.6rem; max-width: 24rem; }

/* ---- Status / errors -------------------------------------------------- */
.fb-status { min-height: 1.25rem; font-size: 0.9rem; color: var(--fb-muted); }
.fb-status[data-fb-busy="true"]::before { content: ""; display: inline-block; width: 0.85rem; height: 0.85rem; margin-inline-end: 0.4rem; border: 2px solid var(--fb-line); border-top-color: var(--fb-accent); border-radius: 999px; vertical-align: -1px; animation: fb-spin 0.7s linear infinite; }
@keyframes fb-spin { to { transform: rotate(360deg); } }
.fb-error { padding: 0.7rem 0.9rem; border-radius: var(--fb-radius); border: 1px solid var(--fb-danger); color: var(--fb-danger); background: rgba(180, 35, 24, 0.06); font-weight: 600; line-height: 1.45; }
.fb-error[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .fb-status[data-fb-busy="true"]::before { animation: none; } .fb-button, .fb-option, .fb-slot, .fb-steps li { transition: none; } }

/* ---- Unavailable / edge ---------------------------------------------- */
.fb-unavailable { display: grid; gap: 0.7rem; max-width: 40rem; margin: 0 auto; text-align: center; padding: clamp(2rem, 7vw, 4rem) 1rem; }
.fb-unavailable__icon { font-size: 2.5rem; }
.fb-unavailable h1 { font-size: clamp(1.4rem, 4vw, 1.75rem); font-weight: 800; }
.fb-unavailable p { color: var(--fb-muted); line-height: 1.55; }
.fb-unavailable__actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-top: 0.5rem; }

/* ---- Manage (member) -------------------------------------------------- */
.fb-manage { display: grid; gap: var(--fb-gap); max-width: 62rem; margin: 0 auto; padding: calc(72px + clamp(1rem, 4vw, 2.75rem)) clamp(1rem, 4vw, 2rem) clamp(1rem, 4vw, 2.75rem); color: var(--fb-ink); font-family: var(--font-body, inherit); }
.fb-manage h1 { font-family: var(--fb-heading); font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; }
.fb-manage__group { display: grid; gap: 0.85rem; }
.fb-manage__group h2 { font-size: 1.15rem; font-weight: 800; }
.fb-appt { display: grid; gap: 0.6rem; padding: clamp(1rem, 2.6vw, 1.4rem); border: 1px solid var(--fb-line); border-radius: var(--fb-radius-lg); background: var(--fb-surface); box-shadow: var(--fb-shadow-sm); }
.fb-appt__row { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.fb-appt__title { font-weight: 800; font-size: 1.05rem; }
.fb-appt__status { padding: 0.2rem 0.65rem; border-radius: 999px; background: var(--fb-accent-soft); color: var(--fb-accent-strong); font-size: 0.78rem; font-weight: 700; }
.fb-appt__meta { color: var(--fb-muted); font-size: 0.92rem; }
.fb-appt__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }

/* Manage uses the same tokens; keep locals in sync. */
.fb-manage {
  --fb-ink: var(--color-text, #111827);
  --fb-muted: var(--color-muted, #6b7280);
  --fb-line: var(--color-line, #e5e7eb);
  --fb-surface: var(--color-white, #ffffff);
  --fb-surface-2: var(--color-soft, #f9fafb);
  --fb-accent: var(--color-primary, #0d9488);
  --fb-accent-strong: var(--color-primary-dark, #0f766e);
  --fb-accent-soft: var(--color-primary-light, #f0fdfa);
  --fb-accent-ink: #ffffff;
  --fb-radius: var(--radius, 10px);
  --fb-radius-lg: calc(var(--radius, 10px) + 6px);
  --fb-shadow-sm: var(--shadow-sm, 0 1px 3px rgba(17, 24, 39, 0.08));
  --fb-heading: var(--font-heading, var(--font-body, inherit));
  --fb-gap: clamp(1rem, 2.4vw, 1.5rem);
}

/* ---- Lone1 confirmation (/bookings/thank-you) ------------------------
 * The route is Runtime-owned, while the visual frame belongs to this theme.
 * Keep the receipt data and guest-management contract untouched and give the
 * full screen the same square cream/paper/deep/gold language as the builder. */
.page-booking-confirmation #main-content{
  min-height:calc(100vh - 80px);
  padding:clamp(10rem,18vh,13rem) 6vw max(28rem,46vh);
  background:var(--c-cream,#efeae0);
}
.booking-confirmation{
  display:grid;
  gap:clamp(1.5rem,3vw,2.25rem);
  box-sizing:border-box;
  width:100%;
  max-width:900px;
  margin:0 auto;
  padding:clamp(2rem,5vw,4.5rem);
  border:1px solid var(--c-line,rgba(22,25,34,.12));
  border-radius:0;
  background:var(--c-paper,#ece6db);
  box-shadow:none;
  color:var(--c-ink,#424346);
  font-family:'Inter',system-ui,sans-serif;
}
.booking-confirmation h1,
.booking-confirmation h2,
.booking-confirmation h3,
.booking-confirmation p{margin:0}
.booking-confirmation__check{
  display:flex;
  align-items:center;
  justify-content:center;
  width:68px;
  height:68px;
  margin:0 auto;
  border:1px solid var(--c-gold,#c89a3a);
  border-radius:0;
  background:var(--c-gold,#c89a3a);
  box-shadow:none;
  color:var(--c-deep,#161922);
}
.booking-confirmation__header,
.booking-confirmation__card,
.booking-confirmation__services,
.booking-confirmation__service,
.booking-confirmation__purchase,
.booking-confirmation__account{display:grid;gap:12px}
.booking-confirmation__header{text-align:center}
.booking-confirmation__eyebrow{
  display:block;
  color:var(--c-gold,#c89a3a);
  font-size:10px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.booking-confirmation__header h1{
  color:var(--c-deep,#161922);
  font-family:'Instrument Serif','Crimson Pro',Georgia,serif;
  font-size:clamp(44px,6vw,72px);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.01em;
  line-height:1;
}
.booking-confirmation__header>p:not(.booking-confirmation__reference){
  color:var(--c-ink,#424346);
  font-family:'Instrument Serif','Crimson Pro',Georgia,serif;
  font-size:18px;
  font-style:italic;
  line-height:1.5;
}
.booking-confirmation__reference{
  display:inline-flex;
  align-items:center;
  align-self:center;
  justify-self:center;
  padding:11px 16px;
  border:1px solid var(--c-line,rgba(22,25,34,.12));
  border-radius:0;
  background:var(--c-cream,#efeae0);
  color:var(--c-deep,#161922);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;
  letter-spacing:.06em;
}
.booking-confirmation .fb-receipt{display:none}
.booking-confirmation__card,
.booking-confirmation__purchase,
.booking-confirmation__account,
.booking-confirmation__occurrence{
  padding:clamp(1.25rem,3vw,2rem);
  border:1px solid var(--c-line,rgba(22,25,34,.12));
  border-radius:0;
  background:var(--c-cream,#efeae0);
}
.booking-confirmation__media{display:none}
.booking-confirmation__service h2,
.booking-confirmation__purchase h2,
.booking-confirmation__account h2,
.booking-confirmation__occurrence h3{
  color:var(--c-deep,#161922);
  font-family:'Instrument Serif','Crimson Pro',Georgia,serif;
  font-size:clamp(22px,2.5vw,28px);
  font-style:italic;
  font-weight:400;
  line-height:1.2;
}
.booking-confirmation__service h2 a{color:inherit;text-decoration:none}
.booking-confirmation__details{
  display:grid;
  grid-template-columns:minmax(8rem,.42fr) minmax(0,1fr);
  gap:0 20px;
  margin:0;
}
.booking-confirmation__details dt,
.booking-confirmation__details dd{
  padding:12px 0;
  border-top:1px solid var(--c-line,rgba(22,25,34,.12));
  font-size:13px;
  line-height:1.45;
}
.booking-confirmation__details dt{
  color:var(--c-gold,#c89a3a);
  font-size:9px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.booking-confirmation__details dd{
  margin:0;
  color:var(--c-deep,#161922);
  font-family:'Instrument Serif','Crimson Pro',Georgia,serif;
  font-size:17px;
  font-style:italic;
  font-weight:400;
  text-align:right;
  overflow-wrap:anywhere;
}
.booking-confirmation__details dt:first-of-type,
.booking-confirmation__details dt:first-of-type+dd{border-top:0}
.booking-confirmation__occurrences{display:grid;gap:12px;padding:0;margin:0;list-style:none}
.booking-confirmation__purchase-grid{display:grid;grid-template-columns:1fr;gap:12px}
.booking-confirmation__included{display:grid;gap:8px;padding:0;margin:0;list-style:none}
.booking-confirmation__included li{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:12px;
  border:1px solid var(--c-line,rgba(22,25,34,.12));
  border-radius:0;
  background:var(--c-paper,#ece6db);
  font-size:13px;
}
.booking-confirmation__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.booking-confirmation__actions a,
.booking-confirmation__actions button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  min-height:52px;
  padding:12px 16px;
  border:1px solid var(--c-deep,#161922);
  border-radius:0;
  background:transparent;
  color:var(--c-deep,#161922);
  font:700 10px/1.25 'Inter',system-ui,sans-serif;
  letter-spacing:.16em;
  text-align:center;
  text-decoration:none;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.booking-confirmation__actions a:hover,
.booking-confirmation__actions button:hover{
  border-color:var(--c-gold,#c89a3a);
  background:var(--c-gold,#c89a3a);
  color:var(--c-deep,#161922);
}
.booking-confirmation__actions [data-booking-join-meeting],
.booking-confirmation__actions a[href*="/account/appointments"],
.booking-confirmation__actions [data-fb-guest-manage]{
  border-color:var(--c-deep,#161922);
  background:var(--c-deep,#161922);
  color:var(--c-cream,#efeae0);
}
.booking-confirmation__actions a[href*="/account/appointments"]{order:-1}
.page-booking-confirmation .fb-receipt-actions{
  justify-content:center;
  padding-top:20px;
  border-top:1px solid var(--c-line,rgba(22,25,34,.12));
}
.page-booking-confirmation .fb-receipt-actions .fb-button{
  min-height:42px;
  padding:9px 14px;
  border-radius:0;
  border-color:var(--c-line,rgba(22,25,34,.12));
  color:var(--c-deep,#161922);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.page-booking-confirmation .fb-receipt-actions [hidden]{display:none!important}
.page-booking-confirmation [data-fb-standalone]{max-width:900px;margin:24px auto 0}
@media (max-width:640px){
  .page-booking-confirmation #main-content{padding:8.5rem 18px max(24rem,44vh)}
  .booking-confirmation{padding:30px 20px}
  .booking-confirmation__header h1{font-size:42px}
  .booking-confirmation__card,
  .booking-confirmation__purchase,
  .booking-confirmation__account,
  .booking-confirmation__occurrence{padding:18px}
  .booking-confirmation__details{grid-template-columns:1fr}
  .booking-confirmation__details dt{padding-bottom:3px}
  .booking-confirmation__details dd{padding-top:3px;text-align:left}
  .booking-confirmation__details dt:first-of-type+dd{border-top:0}
  .booking-confirmation__actions{grid-template-columns:1fr}
  .booking-confirmation__actions a,
  .booking-confirmation__actions button{grid-column:1!important;width:100%}
}

/* ---- Receipt header + print stylesheet -------------------------------- *
 * Print forces a clean light receipt (black on white) regardless of screen
 * theme, hides all chrome, controls and the upsell, and shows only the
 * receipt. The adapter triggers window.print(); the browser's Save-as-PDF does
 * the rest — no server-side PDF, no payment logic. */
.fb-receipt { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
.fb-receipt__brand { font-family: var(--font-heading, inherit); font-size: 1.15rem; font-weight: 800; color: var(--color-text, #111827); }
.fb-receipt__tag { color: var(--color-muted, #6b7280); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }

@media print {
  html, body { background: #ffffff !important; color: #000000 !important; }
  .site-header, .site-footer, header, footer, nav,
  .fb-offers, [data-fb-extras], [data-fb-upsell],
  .booking-confirmation__actions, [data-fb-print],
  button, .fb-button, .fb-tabs { display: none !important; }
  * { box-shadow: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .booking-confirmation, .booking-confirmation__card, .booking-confirmation__purchase,
  .booking-confirmation__account, .booking-confirmation__occurrence,
  .booking-confirmation__included li, .fb-receipt {
    background: #ffffff !important; color: #000000 !important; border-color: #cccccc !important;
  }
  .booking-confirmation__eyebrow, .fb-receipt__brand, .fb-receipt__tag, a { color: #000000 !important; }
  a { text-decoration: none !important; }
  .booking-confirmation { max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
  .page-booking-confirmation #main-content { padding: 0 !important; background: #ffffff !important; }
  .booking-confirmation__check { display: none !important; }
  .fb-receipt { display: flex !important; }
  .booking-confirmation__service, .booking-confirmation__occurrence, .booking-confirmation__purchase-grid, .fb-receipt { break-inside: avoid; }
  @page { margin: 16mm; }
}

/* Receipt action row (Print · Download · Email) on the thank-you page. Lives
 * outside the .fb token scope, so it seeds the tokens its buttons need. */
.fb-receipt-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 0.75rem; }
.fb-receipt-actions .fb-button {
  --fb-accent: var(--color-primary, #0d9488);
  --fb-accent-strong: var(--color-primary-dark, #0f766e);
  --fb-accent-ink: #ffffff;
  --fb-line: var(--color-line, #e5e7eb);
  --fb-ink: var(--color-text, #111827);
  --fb-shadow-sm: var(--shadow-sm, 0 1px 3px rgba(17, 24, 39, 0.08));
  --fb-radius: var(--radius, 10px);
}
.fb-receipt-actions .fb-status { flex-basis: 100%; margin: 0; color: var(--color-muted, #6b7280); }

/* ============================================================
   Booking services listing — Kintsugi-parity filter rail + cards
   Structure mirrors the 1.0 gold standard; colors come from the
   active theme tokens so every merchant's brand applies.
   ============================================================ */
:root {
  /* The listing/filter surfaces live outside the .fb flow wrapper, so the flow
     tokens have to resolve at the root too — otherwise they fall back to their
     literal light defaults and the page stays white in dark mode. */
  --fb-ink: var(--color-text, #111827);
  --fb-muted: var(--color-muted, #6b7280);
  --fb-line: var(--color-line, #e5e7eb);
  --fb-surface: var(--color-white, #ffffff);
  --fb-surface-2: var(--color-soft, #f9fafb);
  --fb-accent: var(--color-primary, #0d9488);
  --fb-accent-strong: var(--color-primary-dark, #0f766e);
  --fb-accent-soft: var(--color-primary-light, #f0fdfa);
  --bk-card-radius: 12px;
  --bk-card-shadow: 0 4px 12px rgba(17, 24, 39, .08);
  --bk-card-shadow-hover: 0 14px 34px -8px color-mix(in srgb, var(--fb-accent, #0e7c74) 40%, transparent);
  --bk-brand: var(--fb-accent, #0e7c74);
  --bk-brand-strong: var(--fb-accent-strong, #06312e);
  --bk-badge-bg: color-mix(in srgb, var(--color-primary-dark, #06312e) 82%, transparent);
  --bk-hairline: var(--color-line, rgba(17, 24, 39, .09));
  --bk-field-border: var(--color-line, rgba(17, 24, 39, .16));
}
.page-services .booking-listing {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 2.75rem;
  align-items: start;
}
@media (max-width: 900px) {
  .page-services .booking-listing { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Filter rail */
.page-services .booking-filters {
  position: sticky; top: 1.5rem;
  border: 1px solid var(--bk-hairline);
  border-radius: 16px;
  padding: 1.35rem 1.35rem 1.6rem;
  background: var(--fb-surface, #fff);
  box-shadow: var(--fb-shadow-sm, 0 1px 3px rgba(17,24,39,.08));
  display: grid; gap: 1.5rem;
}
@media (max-width: 900px) { .page-services .booking-filters { position: static; } }
.page-services .booking-filters__head { display: flex; align-items: center; justify-content: space-between; }
.page-services .booking-filters__head h2 { font-size: 1.1rem; margin: 0; font-family: var(--fb-heading, inherit); font-weight: 600; }
.page-services .booking-filters__reset {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: .82rem; color: var(--bk-brand); text-decoration: none; font-weight: 600;
}
.page-services .booking-filters__reset:hover { text-decoration: underline; }
.page-services .booking-filter { display: block; }
.page-services .booking-filter[hidden] { display: none; }
.page-services .booking-filter__label { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--fb-muted, #6b7280); margin: 0 0 .6rem; display: block; }
.page-services .booking-filter__search-wrap { position: relative; }
.page-services .booking-filter__search {
  background: var(--fb-surface, #fff);
  color: var(--fb-ink, #111827);
  width: 100%; box-sizing: border-box; padding: .6rem .85rem;
  border: 1px solid var(--bk-field-border); border-radius: 10px; font: inherit; background: var(--fb-surface, #fff);
}
.page-services .booking-filter__search:focus-visible { outline: 2px solid var(--bk-brand); outline-offset: 1px; border-color: var(--bk-brand); }
.page-services .booking-filter__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.page-services .booking-filter__opt { display: flex; align-items: center; gap: .6rem; font-size: .92rem; cursor: pointer; }
.page-services .booking-filter__opt input { width: 16px; height: 16px; accent-color: var(--bk-brand); cursor: pointer; }
.page-services .booking-filter__opt span { flex: 1; }
.page-services .booking-filter__opt em { font-style: normal; font-size: .8rem; color: var(--fb-muted, #6b7280); background: color-mix(in srgb, var(--fb-muted, #6b7280) 12%, transparent); border-radius: 999px; padding: .05rem .5rem; }
.page-services .booking-filter__range { display: flex; align-items: center; gap: .5rem; }
.page-services .booking-filter__range input { width: 100%; min-width: 0; box-sizing: border-box; padding: .55rem .65rem; border: 1px solid var(--bk-field-border); border-radius: 9px; font: inherit; background: var(--fb-surface, #fff); color: var(--fb-ink, #111827); }
.page-services .booking-filter__range input:focus-visible { outline: 2px solid var(--bk-brand); outline-offset: 1px; border-color: var(--bk-brand); }
.page-services .booking-filter__range span { color: var(--fb-muted, #6b7280); }

/* Results bar */
.page-services .booking-results__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.page-services .booking-results__count { margin: 0; font-size: .95rem; color: var(--fb-muted, #6b7280); }
.page-services .booking-results__count b { color: var(--fb-ink, inherit); font-weight: 700; }
.page-services .booking-sort { display: inline-flex; align-items: center; gap: .55rem; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--fb-muted, #6b7280); font-weight: 700; }
.page-services .booking-sort select { font: inherit; text-transform: none; letter-spacing: normal; font-weight: 500; padding: .5rem 2rem .5rem .75rem; border: 1px solid var(--bk-field-border); border-radius: 10px; background: var(--fb-surface, #fff); color: var(--fb-ink, #111827); cursor: pointer; }
.page-services .booking-results__none { padding: 3.5rem 1rem; text-align: center; color: var(--fb-muted, #6b7280); }
.page-services .booking-results__none button { background: none; border: 0; color: var(--bk-brand); text-decoration: underline; cursor: pointer; font: inherit; }

/* Card grid — 2-up in the content column, like the reference */
.page-services .service-grid {
  display: grid; gap: 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  align-items: stretch;
}
@media (min-width: 1100px) {
  .page-services .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.page-services .service-grid__empty { grid-column: 1 / -1; padding: 3rem 1rem; text-align: center; color: var(--fb-muted, #6b7280); }

/* Card */
.page-services .service-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 0; border: 0;
  background: var(--fb-surface, #fff);
  border-radius: var(--bk-card-radius);
  overflow: hidden;
  box-shadow: var(--bk-card-shadow);
  transition: transform .3s ease, box-shadow .3s ease;
  cursor: pointer;
}
.page-services .service-card:hover { transform: translateY(-8px); box-shadow: var(--bk-card-shadow-hover); }
.page-services .service-card[hidden] { display: none !important; }

/* Image stack — stacked <img>, only .active visible, crossfade for multi-image hover */
.page-services .service-card-image { position: relative; height: 260px; overflow: hidden; background: linear-gradient(135deg, var(--fb-accent-soft, #e4f5f3), var(--fb-accent, #0e7c74)); }
.page-services .service-card-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease-in-out; }
.page-services .service-card-image img.active { opacity: 1; }
.page-services .service-card-image__empty { position: absolute; inset: 0; background: linear-gradient(135deg, var(--fb-accent-soft, #e4f5f3), color-mix(in srgb, var(--fb-accent, #0e7c74) 55%, #fff)); }
.page-services .service-badge {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  background: var(--bk-badge-bg); color: #fff; font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: .34rem .7rem; border-radius: 999px;
  backdrop-filter: blur(2px);
}
.page-services .service-image-counter {
  position: absolute; bottom: 12px; right: 12px; z-index: 2;
  background: rgba(0,0,0,.68); color: #fff; font-size: .68rem; font-weight: 600;
  padding: .2rem .55rem; border-radius: 999px; letter-spacing: .03em;
}

/* Content */
.page-services .service-card-content { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.3rem; }
.page-services .service-card-title { margin: 0 0 .4rem; font-family: var(--fb-heading, inherit); font-size: 1.4rem; font-weight: 500; line-height: 1.2; letter-spacing: .01em; }
.page-services .service-card-title a { color: inherit; text-decoration: none; }
.page-services .service-card-description {
  margin: 0 0 1rem; font-size: .92rem; line-height: 1.5; color: var(--fb-muted, #6b7280);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 2.75em;
}
.page-services .service-card-meta { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--bk-hairline); }
.page-services .service-card-fact--duration { justify-self: start; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font-size: .9rem; color: var(--fb-muted, #6b7280); }
.page-services .service-card-fact--duration svg { opacity: .7; }
.page-services .service-card-price { justify-self: center; font-weight: 700; font-size: .95rem; color: var(--fb-ink, inherit); white-space: nowrap; }
.page-services .service-card-price:empty { display: none; }
.page-services .service-card-action { justify-self: end; display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .9rem; color: var(--bk-brand); text-decoration: none; white-space: nowrap; transition: transform .15s ease, color .15s ease; }
.page-services .service-card-action:hover { transform: translateX(4px); color: var(--bk-brand-strong); }
.page-services .service-card-status { justify-self: end; font-size: .85rem; font-weight: 600; color: var(--fb-muted, #6b7280); }

/* ---- Booking summary card (D6) ---------------------------------------- */
.fb-sumcard__rows { display: grid; gap: 0.55rem; margin: 0; }
.fb-sumcard__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.fb-sumcard__row dt { color: var(--fb-muted); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin: 0; flex-shrink: 0; }
.fb-sumcard__row dd { margin: 0; text-align: right; font-weight: 600; font-size: 0.95rem; overflow-wrap: anywhere; }
.fb-sumcard__row--total { border-top: 1px solid var(--fb-line); margin-top: 0.3rem; padding-top: 0.65rem; }
.fb-sumcard__row--total dd { font-size: 1.15rem; font-weight: 800; }
.fb-sumcard__empty { color: var(--fb-muted); font-weight: 500; font-style: italic; }
.fb-sumcard__row[data-fb-sum-set="true"] dd { color: inherit; }

/* [hidden] must always win over component display rules (fb-pricing is grid). */
[data-fb-live][hidden], .fb-sumcard__row[hidden], .fb-pricing[hidden], .fb-pricing__row[hidden] { display: none !important; }

/* ---- Service chain: searchable add + compact selected rows ------------- */
.fb-chain__head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.65rem; }
.fb-chain__head .fb-panel__hint { margin: 0; }
.fb-chain__rows { display: grid; gap: 0.45rem; margin-bottom: 0.55rem; }
.fb-chain__rows:not(:has(.fb-chain-row:not([hidden]))) { display: none; }
.fb-chain-row { display: flex; align-items: center; gap: 0.6rem; border: 1px solid var(--fb-line); border-radius: 10px; padding: 0.45rem 0.65rem; background: var(--fb-accent-soft, rgba(0,0,0,0.03)); }
.fb-chain-row[hidden] { display: none; }
.fb-chain-row__title { font-weight: 600; font-size: 0.95rem; }
.fb-chain-row__dd .fb-dd__trigger { padding: 0.2rem 0.55rem; font-size: 0.85rem; }
.fb-chain-row__remove { border: 0; background: none; font-size: 1.15rem; line-height: 1; cursor: pointer; color: var(--fb-muted); padding: 0.2rem 0.4rem; border-radius: 6px; }
.fb-chain-row__remove:hover { color: inherit; background: rgba(0,0,0,0.06); }
.fb-chain__picker { max-width: 22rem; }
.fb-chain__add { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; cursor: pointer; }
.fb-dd__search { margin: 0.4rem; width: calc(100% - 0.8rem); }
.fb-dd__option[hidden] { display: none; }

/* Payment panel sits in the rail — keep its internals comfortable. */
.fb__aside [data-fb-payment-panel] .fb-pay { gap: 0.7rem; }

/* Chain picker polish: the trigger is the only visible chrome; the wrap box
   disappears, and button-based options match label-based ones exactly. */
.fb-chain__picker .fb-dd__wrap { border: 0; background: none; display: inline-block; }
.fb-chain__picker .fb-dd__wrap[open] { border: 0; }
.fb-chain__add {
  border: 1px solid var(--fb-line); border-radius: 999px; background: var(--fb-surface);
  padding: 0.45rem 0.95rem; min-height: 0; font-size: 0.95rem;
  transition: border-color .15s ease, background .15s ease;
}
.fb-chain__add:hover { border-color: var(--fb-accent); }
.fb-chain__picker .fb-dd__wrap[open] .fb-chain__add { border-color: var(--fb-accent); }
button.fb-dd__option { border: 0; background: none; font: inherit; text-align: left; width: 100%; }
button.fb-dd__option:hover { background: var(--fb-surface-2); }

/* Locked payment: visible but clearly inert until a time is held. */
[data-fb-payment-panel][data-fb-locked] .fb-pay { opacity: 0.45; pointer-events: none; filter: grayscale(0.35); }
.fb-pay__locked-hint { margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--fb-muted); font-style: italic; }
.fb-nav-panel { display: grid; gap: 0.5rem; }
.fb-nav__primary { width: 100%; }
.fb-nav__primary:disabled { opacity: 0.55; cursor: not-allowed; }

/* Picker menu polish: roomier panel, tighter rows, calmer typography. */
.fb-chain__picker { max-width: 26rem; }
.fb-chain__picker .fb-dd__panel { padding: 0.55rem; }
.fb-chain__picker .fb-dd__option { min-height: 2.5rem; font-weight: 600; }
.fb-chain__picker .fb-dd__search { margin: 0 0 0.45rem; width: 100%; }

/* ---- Provider avatars + person options --------------------------------- */
.fb-avatar {
  flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fb-accent-soft); color: var(--fb-accent-strong);
  font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; overflow: hidden;
}
.fb-avatar--img { background: none; }
.fb-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-avatar--any { font-size: 1rem; }
/* Person rows: hide the raw radio, let the row highlight + check carry state. */
.fb-dd__option--person input { position: absolute; opacity: 0; width: 0; height: 0; }
.fb-dd__option--person { position: relative; padding-right: 2.1rem; }
.fb-dd__option--person:has(input:checked)::after {
  content: "✓"; position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%);
  font-weight: 800; color: var(--fb-accent-strong);
}
.fb-option__meta--clamp { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* Service thumbnails in the add-a-service picker. */
.fb-thumb { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 8px; overflow: hidden; background: var(--fb-surface-2); }
.fb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-dd__option--service { align-items: center; }

/* Selected chain row: thumb + title/meta stack. */
.fb-chain-row__body { display: grid; gap: 0.1rem; margin-right: auto; }
.fb-chain-row__body .fb-option__meta { font-size: 0.85rem; }
.fb-chain-row .fb-thumb { width: 2.9rem; height: 2.9rem; }

/* Hold countdown — quiet until the last two minutes. */
.fb-pay__countdown { margin: 0 0 0.6rem; font-size: 0.9rem; font-weight: 600; color: var(--fb-accent-strong); }
.fb-pay__countdown--urgent { color: #b3261e; }


/* ---- Visit builder (/bookings/build) ---------------------------------
 * The native V2 controller owns the live booking state. This visual layer is
 * ported from Lone1's reviewed V1 appointment surface: editorial hero, four-step
 * orientation, square paper panels, hairline fields, and deep/gold selection.
 * --------------------------------------------------------------------- */
.page-booking-build .fb-build{
  --fb-ink:var(--c-ink,#424346);
  --fb-muted:#716f6b;
  --fb-line:var(--c-line,rgba(22,25,34,.12));
  --fb-surface:var(--c-paper,#ece6db);
  --fb-surface-2:var(--c-cream,#efeae0);
  --fb-accent:var(--c-gold,#c89a3a);
  --fb-accent-strong:var(--brand-accent-dark,#a87e26);
  --fb-accent-soft:color-mix(in srgb,var(--c-gold,#c89a3a) 13%,transparent);
  --fb-accent-ink:var(--c-deep,#161922);
  --fb-danger:var(--c-error,#b9482b);
  --fb-radius:0px;
  --fb-radius-lg:0px;
  --fb-shadow-sm:none;
  --fb-shadow-md:0 18px 45px rgba(22,25,34,.14);
  --fb-heading:'Instrument Serif','Crimson Pro',Georgia,serif;
  display:block;
  max-width:none;
  margin:0;
  padding:0;
  background:var(--c-cream,#efeae0);
  color:var(--c-ink,#424346);
}
.page-booking-build .fb-build .fb{padding:0;gap:clamp(1.25rem,2.5vw,2rem)}

/* V1 editorial hero and progress rail. */
.fb-build__hero{
  margin-top:80px;
  padding:clamp(8rem,16vh,11rem) 6vw clamp(5rem,10vh,7rem);
  background:var(--c-deep,#161922);
  color:var(--c-cream,#efeae0);
}
.fb-build__hero-inner{max-width:1280px;margin:0 auto}
.fb-build__hero-copy{margin-bottom:clamp(4rem,9vh,7rem)}
.fb-build__hero-eyebrow{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 28px}
.fb-build__hero-eyebrow span,
.fb-build__step-label{
  font-family:'Inter',system-ui,sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.fb-build__hero-eyebrow span{color:var(--c-gold,#c89a3a)}
.fb-build__hero-eyebrow em{
  color:var(--c-gold,#c89a3a);
  font-family:'Instrument Serif','Crimson Pro',Georgia,serif;
  font-size:24px;
  font-weight:400;
  line-height:1.1;
}
.fb-build__hero h1{
  max-width:12ch;
  margin:0;
  color:var(--c-cream,#efeae0);
  font-family:'Instrument Serif','Crimson Pro',Georgia,serif;
  font-size:clamp(58px,8vw,104px);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.01em;
  line-height:.96;
}
.fb-build__progress{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0;
  padding:40px 0 0;
  border-top:1px solid var(--c-line-light,rgba(239,234,224,.18));
  list-style:none;
}
.fb-build__progress li{display:grid;gap:14px;padding:0 28px;border-left:1px solid var(--c-line-light,rgba(239,234,224,.18))}
.fb-build__progress li:first-child{padding-left:0;border-left:0}
.fb-build__step-num{
  color:rgba(239,234,224,.25);
  font-family:'Instrument Serif','Crimson Pro',Georgia,serif;
  font-size:44px;
  font-style:italic;
  line-height:1;
}
.fb-build__step-label{color:rgba(239,234,224,.42)}
.fb-build__progress li.is-active .fb-build__step-num{color:var(--c-gold,#c89a3a)}
.fb-build__progress li.is-active .fb-build__step-label{color:var(--c-cream,#efeae0)}

/* The footer arch can rise 30vh and the footer itself has an 8vh negative
 * margin. This protected runway keeps both shapes behind empty cream, never
 * over a picker, payment field, action, or policy acknowledgement. */
.fb-build__shell{max-width:1280px;margin:0 auto;padding:clamp(4.5rem,9vh,7rem) 6vw max(24rem,42vh)}
.fb-build__head{margin:0 0 clamp(2rem,5vh,3.5rem);max-width:760px}
.fb-build__eyebrow{margin:0 0 14px;color:var(--c-gold,#c89a3a);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.fb-build__title{margin:0 0 16px;color:var(--c-deep,#161922);font-family:'Instrument Serif','Crimson Pro',Georgia,serif;font-size:clamp(42px,5vw,68px);font-style:italic;font-weight:400;letter-spacing:-.01em;line-height:1}
.fb-build__intro{margin:0;max-width:58ch;color:var(--c-ink,#424346);font-size:15px;line-height:1.65}

/* Paper panels and labels follow V1's square, editorial treatment. */
.page-booking-build .fb-panel{gap:1rem;padding:clamp(1.5rem,3vw,2.25rem);border:1px solid var(--fb-line);border-radius:0;background:var(--fb-surface);box-shadow:none}
.page-booking-build .fb-panel__title,
.page-booking-build .fb-sumcard__title,
.page-booking-build .fb-build__empty h2{
  color:var(--c-deep,#161922);
  font-family:'Instrument Serif','Crimson Pro',Georgia,serif;
  font-size:clamp(25px,2.5vw,32px);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.005em;
  line-height:1.1;
}
.page-booking-build .fb-panel__num{width:32px;height:32px;border:1px solid var(--c-gold,#c89a3a);border-radius:0;background:transparent;color:var(--c-gold,#c89a3a)}
.page-booking-build .fb-panel__num .fb-icon{color:currentColor}
.page-booking-build .fb-panel__hint{color:var(--fb-muted);font-size:13px;line-height:1.6}
.fb-build__bar{margin-bottom:clamp(1.5rem,4vh,3rem)}
.fb-build__bar-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:10px}
.fb-build__field{display:grid;gap:9px;min-width:0}
.fb-build__field-label,
.page-booking-build .fb-field>span{
  color:var(--c-gold,#c89a3a);
  font-size:10px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.fb-build__select,
.page-booking-build .fb-input,
.page-booking-build .fb-select{
  width:100%;
  min-height:54px;
  padding:13px 16px;
  border:1px solid var(--fb-line);
  border-radius:0;
  background:var(--c-cream,#efeae0);
  color:var(--c-deep,#161922);
  font:inherit;
  font-weight:500;
}
.fb-build__select:focus,
.page-booking-build .fb-input:focus{outline:2px solid var(--c-gold,#c89a3a);outline-offset:2px;box-shadow:none}
.fb-build__select:disabled{opacity:.52;cursor:not-allowed}

/* Empty frame mirrors the live layout, but carries the V1 placeholder style. */
.fb-build__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:360px;text-align:center}
.fb-build__empty-icon{display:grid;place-items:center;width:72px;height:72px;border:1px solid var(--c-gold,#c89a3a);color:var(--c-gold,#c89a3a)}
.fb-build__empty p{margin:0;max-width:44ch;color:var(--fb-muted);font-size:14px;line-height:1.6}
.fb-build__back{display:block;margin-top:16px;color:var(--c-deep,#161922);font-size:10px;font-weight:600;letter-spacing:.16em;text-align:center;text-decoration:none;text-transform:uppercase}
.fb-build__back:hover{color:var(--c-gold,#c89a3a)}

/* Selection controls and live calendar. */
.page-booking-build .fb-week{gap:8px}
.page-booking-build .fb-week__nav,
.page-booking-build .fb-week__day,
.page-booking-build .fb-slot{border-radius:0;background:var(--c-cream,#efeae0)}
.page-booking-build .fb-week__nav{width:46px;min-height:66px}
.page-booking-build .fb-week__days{gap:7px}
.page-booking-build .fb-week__day{min-height:66px}
.page-booking-build .fb-week__dow,
.page-booking-build .fb-slot-group__label,
.page-booking-build .fb-sumcard__row dt{
  color:var(--c-gold,#c89a3a);
  font-size:9px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.page-booking-build .fb-week__date{font-family:'Instrument Serif','Crimson Pro',Georgia,serif;font-size:22px;font-weight:400}
.page-booking-build .fb-week__day.is-active,
.page-booking-build .fb-slot[data-fb-selected="true"]{border-color:var(--c-deep,#161922);background:var(--c-deep,#161922);color:var(--c-gold,#c89a3a);box-shadow:none}
.page-booking-build .fb-week__day.is-active .fb-week__dow{color:var(--c-gold,#c89a3a)}
.page-booking-build .fb-slot{min-height:48px;font-weight:600}
.page-booking-build .fb-slot:hover,
.page-booking-build .fb-week__day:hover:not(:disabled),
.page-booking-build .fb-week__nav:hover{border-color:var(--c-gold,#c89a3a);color:var(--c-gold,#c89a3a)}

/* Summary, price, customer and action rail. */
.page-booking-build .fb__aside{gap:18px}
.page-booking-build .fb-sumcard__rows{gap:12px}
.page-booking-build .fb-sumcard__row{padding-bottom:12px;border-bottom:1px solid var(--fb-line)}
.page-booking-build .fb-sumcard__row:last-child{padding:14px 0 0;border-bottom:0}
.page-booking-build .fb-sumcard__row dd{color:var(--c-deep,#161922);font-family:'Instrument Serif','Crimson Pro',Georgia,serif;font-size:17px;font-style:italic;font-weight:400}
.page-booking-build .fb-sumcard__row--total dd{color:var(--c-gold,#c89a3a);font-size:28px}
.page-booking-build .fb-pricing__row{font-size:13px}
.fb-build__policy-list{display:grid;gap:0;margin:0}
.fb-build__policy-list>div{display:grid;gap:6px;padding:14px 0;border-bottom:1px solid var(--fb-line)}
.fb-build__policy-list>div:first-child{padding-top:4px}
.fb-build__policy-list>div:last-child{padding-bottom:0;border-bottom:0}
.fb-build__policy-list dt{color:var(--c-gold,#c89a3a);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.fb-build__policy-list dd{margin:0;color:var(--c-deep,#161922);font-family:'Instrument Serif','Crimson Pro',Georgia,serif;font-size:18px;font-style:italic;line-height:1.3}
.page-booking-build .fb-contact{gap:18px}
.page-booking-build .fb-contact__grid{gap:14px}
.page-booking-build .fb-coupon{gap:10px}
.page-booking-build .fb-button{
  min-height:52px;
  border-radius:0;
  border-color:var(--c-gold,#c89a3a);
  background:var(--c-gold,#c89a3a);
  color:var(--c-deep,#161922);
  box-shadow:none;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.page-booking-build .fb-button:hover{background:transparent;color:var(--c-deep,#161922)}
.page-booking-build .fb-button--ghost{border-color:var(--c-deep,#161922);background:transparent;color:var(--c-deep,#161922)}
.page-booking-build .fb-button--ghost:hover{border-color:var(--c-deep,#161922);background:var(--c-deep,#161922);color:var(--c-cream,#efeae0)}
.page-booking-build .fb-nav__primary{width:100%}
.page-booking-build [data-fb-payment-panel][data-fb-locked] .fb-pay{opacity:.55;filter:none}
.page-booking-build .fb-pay__locked-hint{color:var(--fb-muted);font-family:'Instrument Serif','Crimson Pro',Georgia,serif;font-size:16px;font-style:italic}
.page-booking-build .fb-option,
.page-booking-build .fb-settlement__option,
.page-booking-build .fb-member-contact{border-radius:0;background:var(--c-cream,#efeae0);box-shadow:none}

/* The service chain lives inside the selection panel. */
.fb-build__bar .fb-chain{margin:0;padding:0;border:0;background:transparent;box-shadow:none;gap:.7rem}
.fb-build__bar .fb-chain__head{display:none}
.fb-build__bar .fb-chain__rows:empty{display:none}

/* Styled dropdown painted over the native select (which stays for no-JS). */
.fb-select{position:relative}
.fb-select__native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.fb-select__trigger{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px;border:1px solid var(--fb-line);border-radius:0;background:var(--c-cream,#efeae0);color:var(--c-deep,#161922);font:inherit;text-align:left;cursor:pointer}
.fb-select__trigger:hover{border-color:var(--c-gold,#c89a3a)}
.fb-select.is-open .fb-select__trigger{border-color:var(--c-gold,#c89a3a);box-shadow:0 0 0 2px var(--fb-accent-soft)}
.fb-select__thumb{flex:none;width:36px;height:36px;border-radius:0;overflow:hidden;background:var(--c-paper,#ece6db)}
.fb-select__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.fb-select__value{display:grid;gap:2px;min-width:0;flex:1}
.fb-select__value-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-select__value-meta{font-size:12px;color:var(--fb-muted)}
.fb-select__caret{flex:none;color:var(--c-gold,#c89a3a);display:flex}
.fb-select.is-open .fb-select__caret{transform:rotate(180deg)}
.fb-select__menu{position:absolute;z-index:40;top:calc(100% + 6px);left:0;right:0;max-height:320px;overflow:auto;padding:6px;border:1px solid var(--c-gold,#c89a3a);border-radius:0;background:var(--c-paper,#ece6db);box-shadow:var(--fb-shadow-md)}
.fb-select__option{display:flex;align-items:center;gap:12px;width:100%;padding:10px;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.fb-select__option:hover{background:var(--c-cream,#efeae0)}
.fb-select__option-body{display:grid;gap:2px;min-width:0}
.fb-select__option-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-select__option-meta{font-size:12px;color:var(--fb-muted)}
.fb-select__thumb--text{display:flex;align-items:center;justify-content:center;border-radius:0;border:1px solid var(--c-gold,#c89a3a);background:transparent;color:var(--c-gold,#c89a3a);font-size:.72rem;font-weight:800;letter-spacing:.02em}
.fb-build__bar .fb-chain-row__dd{position:relative}
.fb-build__bar .fb-chain-row__dd .fb-dd__panel{inset-inline:auto 0;min-width:15rem;width:max-content;max-width:min(20rem,80vw)}
.fb-build__bar .fb-chain-row__dd .fb-dd__option{white-space:nowrap}

@media (max-width:968px){
  .fb-build__hero{padding-top:clamp(7rem,14vh,9rem)}
  .fb-build__progress{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
  .fb-build__progress li:nth-child(3){padding-left:0;border-left:0}
  .fb-build__shell{padding-inline:5vw}
}
@media (min-width:969px) and (max-width:1199px){
  .page-booking-build .fb-build__layout{grid-template-columns:minmax(0,1fr)}
  .page-booking-build .fb-build__layout>.fb__aside{position:static;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .page-booking-build .fb-build__layout>.fb__aside>[data-fb-payment-panel],
  .page-booking-build .fb-build__layout>.fb__aside>.fb-nav-panel,
  .page-booking-build .fb-build__layout>.fb__aside>.fb-build__back{grid-column:1/-1}
}
@media (max-width:720px){
  .fb-build__hero{margin-top:66px;padding:84px 20px 64px}
  .fb-build__hero-copy{margin-bottom:56px}
  .fb-build__hero h1{font-size:clamp(48px,15vw,68px)}
  .fb-build__progress{grid-template-columns:1fr;gap:0;padding-top:24px}
  .fb-build__progress li,
  .fb-build__progress li:nth-child(3){grid-template-columns:44px 1fr;align-items:center;gap:14px;padding:14px 0;border-left:0;border-bottom:1px solid var(--c-line-light,rgba(239,234,224,.18))}
  .fb-build__progress li:last-child{border-bottom:0}
  .fb-build__step-num{font-size:34px}
  .fb-build__shell{padding:64px 20px max(22rem,42vh)}
  .fb-build__head{margin-bottom:38px}
  .fb-build__bar-grid{grid-template-columns:minmax(0,1fr)}
  .page-booking-build .fb-panel{padding:22px 18px}
  .fb-build__empty{min-height:260px}
  .page-booking-build .fb-week{gap:4px}
  .page-booking-build .fb-week__nav{width:34px;min-height:58px}
  .page-booking-build .fb-week__days{gap:3px}
  .page-booking-build .fb-week__day{min-height:58px;padding:7px 1px}
  .page-booking-build .fb-week__dow{font-size:7px;letter-spacing:.08em}
  .page-booking-build .fb-week__date{font-size:17px}
}

/* ---- Plans & packages (/plans) --------------------------------------- */
.fb-plans{max-width:var(--container,1120px);margin:0 auto;padding:104px 24px 80px}
.fb-plans__head{margin:0 0 26px;text-align:center}
.fb-plans__eyebrow{margin:0 0 6px;font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--fb-muted,#6b7280)}
.fb-plans__title{margin:0 0 8px;font-size:2.1rem;line-height:1.15}
.fb-plans__intro{margin:0 auto;max-width:56ch;color:var(--fb-muted,#6b7280)}

.fb-plans__grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,278px),1fr));align-items:start}
.fb-plans__card{position:relative;display:flex;flex-direction:column;gap:11px;padding:24px 22px;border:1px solid var(--fb-line,#e5e7eb);border-radius:16px;background:var(--fb-surface,#fff);box-shadow:var(--fb-shadow-sm,0 1px 3px rgba(17,24,39,.06))}
.fb-plans__card.is-featured{border-color:var(--fb-accent,#0d9488);box-shadow:0 12px 34px -14px var(--fb-accent,#0d9488)}
.fb-plans__badge{position:absolute;top:-11px;left:22px;padding:4px 11px;border-radius:999px;background:var(--fb-accent,#0d9488);color:var(--fb-accent-ink,#fff);font-size:.72rem;font-weight:800;letter-spacing:.02em}
.fb-plans__name{margin:0;font-size:1.2rem}
.fb-plans__summary{margin:0;color:var(--fb-muted,#6b7280);font-size:.92rem;line-height:1.5}
.fb-plans__price{display:flex;align-items:baseline;gap:7px;margin:2px 0 0;flex-wrap:wrap}
.fb-plans__amount{font-size:1.85rem;font-weight:800;letter-spacing:-.02em}
.fb-plans__period{color:var(--fb-muted,#6b7280);font-size:.9rem}
.fb-plans__facts,.fb-plans__features{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:.92rem}
.fb-plans__facts li,.fb-plans__features li{display:flex;align-items:flex-start;gap:8px}
.fb-plans__facts .fb-icon,.fb-plans__features .fb-icon{flex:none;margin-top:2px;color:var(--fb-accent,#0d9488)}
.fb-plans__features{padding-top:11px;border-top:1px solid var(--fb-line,#e5e7eb);color:var(--fb-muted,#6b7280)}
.fb-plans__cta{margin-top:auto;justify-content:center;width:100%}
.fb-plans__empty{display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center;padding:52px 24px}
.fb-plans__empty-icon{color:var(--fb-accent,#0d9488);opacity:.5}
@media (max-width:720px){.fb-plans{padding-top:96px}.fb-plans__title{font-size:1.65rem}}
.services-hero__packages{margin-top:10px;font-weight:600}
.services-hero__packages a{color:var(--fb-accent,#0d9488)}

/* Plan card imagery + detail header. */
.fb-plans__media{display:block;margin:-24px -22px 4px;border-radius:16px 16px 0 0;overflow:hidden;aspect-ratio:16/9;background:var(--fb-surface-2,#f4f4f1)}
.fb-plans__media img{width:100%;height:100%;object-fit:cover;display:block}
.fb-plans__name a{color:inherit;text-decoration:none}
.fb-plans__name a:hover{color:var(--fb-accent,#0d9488)}
.fb-plan-detail__head{display:grid;gap:8px;margin-bottom:4px}
.fb-plan-detail__badge{position:static;align-self:start}
.fb-plan-detail__title{margin:0;font-size:2rem;line-height:1.15}
.fb-plan-detail__summary{margin:0;max-width:60ch;color:var(--fb-muted,#6b7280)}
.fb-plan-terms .fb-plans__features{margin-top:11px}
.fb-appt__bookmark{margin-top:.55rem;font-size:.85rem;opacity:.8}
.fb-req{color:var(--fb-danger,#b42318);font-weight:800}
.fb-optional{font-weight:500;opacity:.65;font-size:.86em}
/* Guest actions sit in the confirmation page's own action row. */
.booking-confirmation__actions .fb-guest-action{display:inline-flex;align-items:center;min-height:2.5rem;padding:.6rem .85rem;border:1px solid var(--fb-line,#d8dee4);border-radius:.5rem;background:transparent;color:inherit;font:inherit;font-weight:800;cursor:pointer;text-decoration:none}
.booking-confirmation__actions .fb-guest-action[hidden]{display:none}
/* In-page cancellation confirm — never a browser dialog on a customer page. */
.fb-guest-confirm{margin-top:.9rem;padding:1rem 1.1rem;border:1px solid var(--fb-line,#d8dee4);border-left:4px solid var(--fb-danger,#b42318);border-radius:.6rem;background:var(--fb-surface,#fff)}
.fb-guest-confirm[hidden]{display:none}
.fb-guest-confirm__question{margin:0 0 .7rem;font-weight:700}
.fb-guest-confirm__error{margin:0 0 .7rem;color:var(--fb-danger,#b42318)}
.fb-guest-confirm__actions{display:flex;flex-wrap:wrap;gap:.6rem}
.fb-guest-action--danger{border-color:var(--fb-danger,#b42318);background:var(--fb-danger,#b42318);color:#fff}

[data-fb-payment-panel] [hidden] { display: none !important; }
.fb-registration-details { display: grid; gap: 1rem; margin-bottom: 1rem; }

.fb label { margin: 0; font-size: .875rem; line-height: 1.5; }
.fb label + label { margin-top: 0; }
.fb label :is(input, textarea, select) { margin: 0; }
.fb .fb-field { min-width: 0; align-content: start; }
.fb .fb-contact__grid { align-items: start; }
.fb textarea.fb-input { height: auto; min-height: 104px; resize: vertical; }
.fb .fb-registration-details > .fb-option { align-items: start; }
.fb .fb-registration-details > .fb-option .fb-option__title { font-size: .875rem; font-weight: 400; line-height: 1.65; }
.fb .fb-description { display: grid; gap: 1.25rem; line-height: 1.8; }
.fb .fb-description__section { display: grid; gap: .7rem; }
.fb .fb-description__section h3 { font-size: 1.08rem; line-height: 1.4; color: var(--fb-ink); }
.fb .fb-description__section ul { display: grid; gap: .5rem; margin: 0; padding-inline-start: 1.2rem; list-style: disc; }
.fb .fb-description__section li::marker { color: var(--fb-accent); }
.fb .fb-agenda { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--fb-line); }
.fb .fb-agenda li { display: grid; grid-template-columns: minmax(7.25rem, .7fr) minmax(0, 1.6fr); gap: .8rem; padding: .75rem 0; border-bottom: 1px solid var(--fb-line); }
.fb .fb-agenda__time { color: var(--fb-accent-strong); font-weight: 650; }
@media (max-width: 40rem) { .fb .fb-agenda li { grid-template-columns: 1fr; gap: .2rem; } }