/*
 * Burke Williams booking kit — reset, layout, and all component styles.
 * Ported from burke-williams-booking-kit/booking-kit.css's import order
 * (tokens.css and fonts.css are loaded separately, earlier, in App.razor).
 * All rules are scoped under .spa-kit so they never bleed into Bootstrap/Radzen.
 */

/* ============================================================
   base/reset.css
   ============================================================ */

.spa-kit {
  box-sizing: border-box;
}

.spa-kit *,
.spa-kit *::before,
.spa-kit *::after {
  box-sizing: inherit;
}

.spa-kit {
  font-family: var(--font-body, system-ui, -apple-system, sans-serif);
  font-size: var(--font-size-base, 1rem);
  line-height: var(--line-height-base, 1.5);
  color: var(--color-text-primary, #1a1a1a);
  -webkit-font-smoothing: antialiased;
}

.spa-kit img,
.spa-kit svg {
  display: block;
  max-width: 100%;
}

.spa-kit button,
.spa-kit input,
.spa-kit select,
.spa-kit textarea {
  font: inherit;
}

.spa-kit :focus-visible {
  outline: 0.125rem solid var(--color-focus, #0066cc);
  outline-offset: 0.125rem;
}

/* Themed scrollbar — not part of the kit source, added so the browser chrome matches
   the theme site-wide instead of the OS default. html covers the page scrollbar (MainLayout
   wraps every route, including the login page, in .spa-kit); the descendant rule covers
   nested scroll containers (sidebar nav, modal body, table overflow, etc.). Thumb color is
   --color-primary (#335d88) at reduced alpha — no token carries that exact tint. */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(51, 93, 136, 0.35) transparent;
}

.spa-kit * {
  scrollbar-width: thin;
  scrollbar-color: rgba(51, 93, 136, 0.35) transparent;
}

html::-webkit-scrollbar {
  width: 0.625rem;
  height: 0.625rem;
}

.spa-kit *::-webkit-scrollbar {
  width: 0.625rem;
  height: 0.625rem;
}

html::-webkit-scrollbar-track,
.spa-kit *::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb,
.spa-kit *::-webkit-scrollbar-thumb {
  background-color: rgba(51, 93, 136, 0.35);
  border-radius: var(--radius-pill, 6.25rem);
}

html::-webkit-scrollbar-thumb:hover,
.spa-kit *::-webkit-scrollbar-thumb:hover {
  background-color: rgba(51, 93, 136, 0.55);
}

/* ============================================================
   base/layout.css
   ============================================================ */

.spa-kit .spa-container {
  width: 100%;
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}

.spa-kit .spa-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
}

.spa-kit .spa-grid--sidebar-main {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  gap: var(--grid-gutter);
  align-items: start;
}

.spa-kit .spa-page {
  min-height: 100vh;
  background-color: var(--color-bg);
}

.spa-kit .spa-page__body {
  padding-top: calc(3.875rem + var(--space-6));
  padding-bottom: var(--space-8);
}

.spa-kit .spa-section-heading {
  font-family: var(--font-display);
  font-weight: var(--font-weight-light);
  font-size: clamp(3rem, 8vw, var(--font-size-display));
  letter-spacing: var(--letter-spacing-display);
  text-transform: uppercase;
  color: #e5e5e5;
  line-height: 1.3;
  margin: 0;
}

.spa-kit .spa-heading-3 {
  font-family: var(--font-heading);
  font-weight: 350;
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-relaxed);
  color: var(--color-primary);
  margin: 0;
}

.spa-kit .spa-heading-2 {
  font-family: var(--font-heading);
  font-weight: 350;
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
  color: var(--color-primary);
  margin: 0;
}

@media (max-width: 64rem) {
  :root {
    --sidebar-width: 17.5rem;
    --grid-margin: 1.5rem;
  }
}

@media (max-width: 48rem) {
  .spa-kit .spa-grid--sidebar-main {
    grid-template-columns: 1fr;
  }

  .spa-kit .spa-page__body {
    padding-top: calc(3.5rem + var(--space-4));
  }
}

/* ============================================================
   components/top-nav/top-nav.css
   ============================================================ */

.spa-kit .spa-top-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 3.75rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 7.5rem;
  background: rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
  border-bottom: 0.0625rem solid rgba(26, 23, 18, 0.08);
}

.spa-kit .spa-top-nav__left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-self: start;
}

.spa-kit .spa-top-nav__right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-self: end;
}

.spa-kit .spa-top-nav__right-btns {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.spa-kit .spa-top-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.375rem;
  padding: 0 0.5rem;
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.2;
  color: #1a1712;
  text-decoration: none;
  border-radius: 31.25rem;
  white-space: nowrap;
  transition: background-color 150ms ease;
}

.spa-kit .spa-top-nav__link:hover {
  background: rgba(236, 232, 221, 0.5);
  color: #1a1712;
}

.spa-kit .spa-top-nav__link--active {
  background: #ece8dd;
  color: #1a1712;
}

.spa-kit .spa-top-nav__link:focus-visible {
  outline: 0.125rem solid #335d88;
  outline-offset: 0.125rem;
}

.spa-kit .spa-top-nav__logo-link {
  justify-self: center;
  text-decoration: none;
}

.spa-kit .spa-top-nav__wordmark {
  font-family: 'Teodor', 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: #335d88;
  white-space: nowrap;
}

.spa-kit .spa-top-nav__book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  padding: 0 1.5rem;
  background: #335d88;
  color: #fffcf6;
  border: 0.0625rem solid #335d88;
  border-radius: 6.25rem;
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.spa-kit .spa-top-nav__book:hover {
  background: #274a6f;
  border-color: #274a6f;
}

.spa-kit .spa-top-nav__login {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: #1a1712;
  text-decoration: none;
  letter-spacing: -0.009625rem;
}
.spa-kit .spa-top-nav__login:hover { text-decoration: underline; }

.spa-kit .spa-top-nav__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: #1a1712;
  text-decoration: none;
  border-radius: 50%;
  transition: background-color 150ms ease;
}
.spa-kit .spa-top-nav__icon-btn svg { width: 1.25rem; height: 1.25rem; }
.spa-kit .spa-top-nav__icon-btn:hover { background: #ece8dd; color: #335d88; }

.spa-kit .spa-top-nav__flag {
  display: inline-flex;
  align-items: center;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 0.1875rem;
  overflow: hidden;
}
.spa-kit .spa-top-nav__flag svg { width: 1.5rem; height: 1.0625rem; display: block; }

.spa-kit.hub-nav-dark .spa-top-nav__link { color: #ece8dd; }
.spa-kit.hub-nav-dark .spa-top-nav__login { color: #ece8dd; }
.spa-kit.hub-nav-dark .spa-top-nav__icon-btn { color: #ece8dd; }

@media (max-width: 75rem) {
  .spa-kit .spa-top-nav { padding: 0 clamp(1rem, 4vw, 5rem); }
}

/* Hamburger — hidden by default, only shown below 768px (mobile-panel breakpoint). Lives inside
   .spa-top-nav__left as its first child so the existing grid layout doesn't need restructuring. */
.spa-kit .spa-top-nav__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  background: transparent;
  color: #1a1712;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
}
.spa-kit .spa-top-nav__hamburger:hover { background: rgba(236, 232, 221, 0.5); }

.spa-kit .spa-top-nav__mobile-panel { display: none; }

@media (max-width: 56.25rem) {
  /* :first-of-type/:last-of-type key off tag name, so this only counts the <a> links —
     the hamburger <button> doesn't shift the indexing. */
  .spa-kit .spa-top-nav__left .spa-top-nav__link:not(:first-of-type):not(:last-of-type) { display: none; }
}

@media (max-width: 48rem) {
  .spa-kit .spa-top-nav {
    height: 3.5rem;
    padding: 0 1rem;
  }
  .spa-kit .spa-top-nav__left {
    display: flex;
    align-items: center;
  }
  .spa-kit .spa-top-nav__left .spa-top-nav__link { display: none; }
  .spa-kit .spa-top-nav__hamburger { display: inline-flex; }
  .spa-kit .spa-top-nav__logo-link { justify-self: start; }
  .spa-kit .spa-top-nav__book { display: none; }
  .spa-kit .spa-top-nav__right-btns { display: none; }

  .spa-kit .spa-top-nav__mobile-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 3.5rem;
    left: 0;
    right: 0;
    z-index: 99;
    background: #fffdf8;
    border-bottom: 0.0625rem solid rgba(26, 23, 18, 0.08);
    box-shadow: 0 0.5rem 1.5rem rgba(26, 23, 18, 0.12);
    padding: 1rem;
    gap: 0.25rem;
    max-height: calc(100vh - 3.5rem);
    overflow-y: auto;
  }
  .spa-kit .spa-top-nav__mobile-link {
    display: block;
    padding: 0.75rem 0.5rem;
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1a1712;
    text-decoration: none;
    border-radius: 0.5rem;
  }
  .spa-kit .spa-top-nav__mobile-link:hover,
  .spa-kit .spa-top-nav__mobile-link--active {
    background: #ece8dd;
    color: #335d88;
  }
  .spa-kit .spa-top-nav__mobile-divider {
    height: 0.0625rem;
    background: #e8e8e9;
    margin: 0.5rem 0;
  }
  .spa-kit .spa-top-nav__mobile-panel .spa-top-nav__link {
    display: block;
    padding: 0.75rem 0.5rem;
    font-size: 0.9375rem;
  }
  .spa-kit .spa-top-nav__mobile-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    padding: 0 1.5rem;
    margin-top: 0.5rem;
    background: #335d88;
    color: #fffcf6;
    border: 0.0625rem solid #335d88;
    border-radius: 6.25rem;
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01rem;
    text-decoration: none;
  }
}

/* ============================================================
   components/sidebar-menu/sidebar-menu.css
   (cleanup: user-card classes renamed hub-sidebar-user* -> spa-sidebar-user*
   for naming consistency with the rest of the component layer)
   ============================================================ */

.spa-kit .spa-sidebar {
  width: 19.125rem;
  flex-shrink: 0;
}

.spa-kit .spa-sidebar__nav {
  display: flex;
  flex-direction: column;
  background: #fffdf8;
  border-radius: 0.625rem;
  overflow: hidden;
  /* Natural height, not min-height:calc(100vh...) — the kit's own pages/hub/*.html never actually
     apply this component-library rule; they hand-style the sidebar as a natural-height sticky card
     (confirmed against the real markup), which is the behavior we're matching. */
}

.spa-kit .spa-sidebar__group-section {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.spa-kit .spa-sidebar__group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.spa-kit .spa-sidebar__foot {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border-top: 0.0625rem solid #e8e8e9;
}

.spa-kit .spa-sidebar__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #4a4a48;
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  transition: background-color 150ms ease, color 150ms ease;
}

.spa-kit .spa-sidebar__item:hover {
  background: rgba(73, 73, 72, 0.06);
  color: #4a4a48;
}

.spa-kit .spa-sidebar__item--active,
.spa-kit .spa-sidebar__item--active:hover {
  background: #ece8dd;
  border-radius: 3rem;
  color: #335d88;
}

.spa-kit .spa-sidebar__item--logout {
  color: #4a4a48;
  font-weight: 400;
}

.spa-kit .spa-sidebar__item:focus-visible {
  outline: 0.125rem solid #335d88;
  outline-offset: 0.125rem;
}

.spa-kit .spa-sidebar__icon {
  flex-shrink: 0;
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  color: currentColor;
}
.spa-kit .spa-sidebar__icon svg { width: 100%; height: 100%; }

.spa-kit .spa-sidebar__item--active .spa-sidebar__icon { color: #335d88; }

/* User profile card at bottom (was .hub-sidebar-user*) */
.spa-kit .spa-sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: #fffdf8;
  border-radius: 3.625rem;
  border: 0.0625rem solid #e8e8e9;
  height: 4rem;
  box-sizing: border-box;
}

.spa-kit .spa-sidebar-user__avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #ece8dd;
  color: #335d88;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spa-kit .spa-sidebar-user__avatar svg { width: 1.25rem; height: 1.25rem; }

.spa-kit .spa-sidebar-user__info { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }

.spa-kit .spa-sidebar-user__name {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1712;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spa-kit .spa-sidebar-user__tier {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 0.75rem;
  color: #8194a2;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Restores the old membership-status-dot indicator (active/inactive) that the sidebar
   previously showed next to the membership name. */
.spa-kit .spa-sidebar-user__status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.spa-kit .spa-sidebar-user__status-dot--active { background: #6f8a5e; }
.spa-kit .spa-sidebar-user__status-dot--inactive { background: #c0392b; }

/* Below 900px: the sidebar collapses into a slim toggle bar (current section label + chevron,
   ~48px tall) that expands into a dropdown list on tap. Replaces an earlier horizontal-scroll-pill
   attempt that still ate a full row at all times — this keeps the default footprint minimal and only
   shows the full list when the user asks for it. Not part of the kit at all (its own sidebar-menu.css
   only defines the desktop card, plus a cramped multi-row wrap fallback that reads badly on phones). */
.spa-kit .spa-sidebar__mobile-toggle {
  display: none;
}

@media (max-width: 56.25rem) {
  .spa-kit .spa-sidebar { width: 100%; }

  .spa-kit .spa-sidebar__mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 3rem;
    padding: 0 1rem;
    background: #fffdf8;
    border: 0.0625rem solid #e8e8e9;
    border-radius: 0.625rem;
    cursor: pointer;
    font-family: 'Barlow', system-ui, sans-serif;
  }

  .spa-kit .spa-sidebar__mobile-toggle-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #335d88;
  }

  .spa-kit .spa-sidebar__mobile-chevron {
    color: #8194a2;
    flex-shrink: 0;
    transition: transform 150ms ease;
  }
  .spa-kit .spa-sidebar__mobile-toggle[aria-expanded="true"] .spa-sidebar__mobile-chevron {
    transform: rotate(180deg);
  }

  .spa-kit .spa-sidebar__nav {
    display: none;
    flex-direction: column;
    border-radius: 0.625rem;
    margin-top: 0.375rem;
    box-shadow: 0 0.5rem 1.5rem rgba(26, 23, 18, 0.12);
  }
  .spa-kit .spa-sidebar__nav--mobile-open {
    display: flex;
  }

  .spa-kit .spa-sidebar__group-section {
    padding: 0.75rem;
    gap: 1rem;
  }

  .spa-kit .spa-sidebar__foot {
    padding: 0.75rem;
  }

  .spa-kit .spa-sidebar-user {
    display: flex;
  }
}

/* ============================================================
   components/footer/footer.css — real component CSS, ported early from the kit's own import
   list, sat unused until SpaFooter.razor was built to actually consume it (the kit's own pages
   render a flat Figma-exported image instead of wiring this up). Class names verified 1:1
   against the newer kit delivery's real footer markup (pages/hub/my-appointments.html,
   burke-williams-full-kit-24-Aug-2026) — .spa-footer__credits and the non-clipping wordmark
   sizing below came from that pass.
   ============================================================ */

.spa-kit .spa-footer {
  position: relative;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-8) clamp(var(--space-5), 5vw, var(--space-9)) 0;
  margin-top: var(--space-8);
  overflow: hidden;
}

.spa-kit .spa-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-8);
  max-width: var(--grid-max-width);
  margin-inline: auto;
}

.spa-kit .spa-footer__heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: var(--font-size-2xl);
  margin: 0 0 var(--space-5);
  color: var(--color-bg-cream);
  line-height: 1.2;
}

.spa-kit .spa-footer__subscribe {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: 26.25rem;
}

.spa-kit .spa-footer__email {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 0.0625rem solid rgba(255, 253, 248, 0.4);
  padding: var(--space-2) 0;
  color: var(--color-bg-cream);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
}
.spa-kit .spa-footer__email::placeholder { color: rgba(255, 253, 248, 0.6); }
.spa-kit .spa-footer__email:focus { outline: none; border-bottom-color: var(--color-bg-cream); }

.spa-kit .spa-footer__subscribe-btn {
  background: var(--color-bg-cream);
  color: var(--color-primary);
  border: 0.0625rem solid var(--color-bg-cream);
  border-radius: var(--radius-pill);
  padding: 0.625rem var(--space-5);
  height: 2.75rem;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-smooth);
}
.spa-kit .spa-footer__subscribe-btn:hover {
  background: #fff;
  border-color: #fff;
}

.spa-kit .spa-footer__fineprint {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: #b3b3b3;
  line-height: 1.5;
}
.spa-kit .spa-footer__fineprint a {
  color: rgba(255, 253, 248, 0.85);
  text-decoration: underline;
}

.spa-kit .spa-footer__col h4 {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-4);
  color: var(--color-bg-cream);
}

.spa-kit .spa-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.spa-kit .spa-footer__links a {
  color: rgba(255, 253, 248, 0.75);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--duration-normal) var(--ease-default);
}
.spa-kit .spa-footer__links a:hover { color: var(--color-bg-cream); }

.spa-kit .spa-footer__bottom {
  max-width: var(--grid-max-width);
  margin: var(--space-7) auto 0;
  padding: var(--space-3) 0 var(--space-7);
  border-top: 0.0625rem solid var(--color-bg-cream);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--font-size-xs);
  color: rgba(255, 253, 248, 0.75);
}

.spa-kit .spa-footer__credits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.spa-kit .spa-footer__legal {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.spa-kit .spa-footer__legal a {
  color: rgba(255, 253, 248, 0.75);
  text-decoration: underline;
}
.spa-kit .spa-footer__legal a:hover { color: var(--color-bg-cream); }

.spa-kit .spa-footer__social {
  display: flex;
  gap: var(--space-4);
}
.spa-kit .spa-footer__social a {
  color: rgba(255, 253, 248, 0.8);
  display: inline-flex;
  transition: color var(--duration-normal) var(--ease-default);
}
.spa-kit .spa-footer__social a:hover { color: var(--color-bg-cream); }
.spa-kit .spa-footer__social svg { width: 1.125rem; height: 1.125rem; }

/* Oversized wordmark at foot — the FULL "Burke Williams" must be visible. Text is ~12.96em
   wide, so font-size is sized (~6.8vw) to span the footer width edge-to-edge without
   horizontal clipping. line-height 0.9 + small bottom padding keep the letter bottoms from
   being cut by overflow:hidden. (Matches the newer kit delivery's own fix for the exact bug
   we hit independently earlier — the older clamp(4rem,20vw,20rem) + negative margin bled the
   wordmark off the bottom of the frame.) */
.spa-kit .spa-footer__wordmark {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.75rem, 6.8vw, 12rem);
  line-height: 0.9;
  color: var(--color-bg-cream);
  text-align: center;
  margin-top: var(--space-6);
  margin-bottom: 0;
  padding-bottom: 0.06em;
  white-space: nowrap;
  letter-spacing: 0.01em;
  max-width: 100%;
}

.spa-kit .spa-table-footer {
  background: var(--color-bg-cream);
  border-top: 0.0625rem solid #f1f2f4;
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

.spa-kit .spa-table-footer__meta {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

@media (max-width: 64rem) {
  .spa-kit .spa-footer__grid { grid-template-columns: 1fr 1fr; }
  .spa-kit .spa-footer__newsletter { grid-column: 1 / -1; }
}

@media (max-width: 48rem) {
  .spa-kit .spa-footer__grid { grid-template-columns: 1fr; }
  .spa-kit .spa-footer { padding: var(--space-6) var(--space-4) 0; }
  .spa-kit .spa-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   components/button/button.css
   ============================================================ */

.spa-kit .spa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-5);
  height: 2.75rem;
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-button);
  line-height: 1;
  text-decoration: none;
  border: 0.0625rem solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--duration-normal) var(--ease-smooth),
              border-color var(--duration-normal) var(--ease-smooth),
              color var(--duration-normal) var(--ease-smooth);
}

.spa-kit .spa-btn:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.125rem;
}

.spa-kit .spa-btn:disabled,
.spa-kit .spa-btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.spa-kit .spa-btn--primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

.spa-kit .spa-btn--primary:hover:not(:disabled) {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.spa-kit .spa-btn--primary:active:not(:disabled) {
  transform: scale(0.98);
}

.spa-kit .spa-btn--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
  border-radius: var(--radius-xl);
}

.spa-kit .spa-btn--outline:hover:not(:disabled) {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.spa-kit .spa-btn--social {
  background: #ece8dd;
  color: var(--color-text-primary);
  border: 0.0625rem solid #b3b3b3;
  border-radius: var(--radius-sm);
  padding: 0.75rem var(--space-4);
  gap: var(--space-3);
  justify-content: flex-start;
}

.spa-kit .spa-btn--social:hover:not(:disabled) {
  background: #e0dbd0;
  border-color: #999;
}

.spa-kit .spa-btn--social svg,
.spa-kit .spa-btn--social img {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.spa-kit .spa-btn--gray {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.spa-kit .spa-btn--gray:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.spa-kit .spa-btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: transparent;
  padding: var(--space-1) var(--space-2);
  font-weight: var(--font-weight-normal);
}

.spa-kit .spa-btn--ghost:hover:not(:disabled) {
  background: var(--color-primary-muted);
}

.spa-kit .spa-btn--app {
  background: var(--color-bg-cream);
  color: var(--color-primary);
  border: 0.0625rem solid var(--color-primary);
  border-radius: 3.125rem;
  padding: 0.5rem 0.875rem;
  height: 2.75rem;
  font-size: var(--font-size-sm);
}

/* New — not part of the kit's own button.css (which only defines --sm/--lg). Needed for tight
   contexts like the rail's 3-across appointment actions, where even --sm (36px) doesn't fit. */
.spa-kit .spa-btn--xs {
  height: 1.75rem;
  padding: 0 0.625rem;
  font-size: 0.6875rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: normal;
}

.spa-kit .spa-btn--sm {
  height: 2.25rem;
  padding: 0 var(--space-3);
  font-size: var(--font-size-xs);
}

.spa-kit .spa-btn--lg {
  height: 3.25rem;
  padding: 0 var(--space-6);
  font-size: var(--font-size-md);
}

.spa-kit .spa-btn--loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.spa-kit .spa-btn--loading::after {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 0.125rem solid rgba(255,252,246,0.4);
  border-top-color: #fffcf6;
  border-radius: 50%;
  animation: spa-spin 0.6s linear infinite;
}

@keyframes spa-spin {
  to { transform: rotate(360deg); }
}

/* Reusable inline loading cue for content areas mid-fetch (not a full <Spinner> overlay, not a
   button) — reuses the spa-spin keyframe above so every loading indicator in the app animates
   identically. */
.spa-kit .spa-inline-loader {
  width: 1.25rem;
  height: 1.25rem;
  border: 0.1875rem solid var(--color-primary-muted);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  flex-shrink: 0;
  animation: spa-spin 0.6s linear infinite;
}

.spa-kit .spa-loading-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  padding: var(--space-5) 0;
}

/* ============================================================
   components/text-input/text-input.css
   ============================================================ */

.spa-kit .spa-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
}

.spa-kit .spa-field__label {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

/* Darker, larger section header used above a pill group or list (e.g. "Treatment type",
   "Treatments" in the kit's rebook.html) — distinct from spa-field__label's muted input-label
   style. */
.spa-kit .spa-section-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.spa-kit .spa-field__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.spa-kit .spa-field__input {
  width: 100%;
  height: 2.75rem;
  padding: 0.4375rem 0.875rem;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
  background: var(--color-bg-cream);
  border: 0.0625rem solid var(--color-border-input);
  border-radius: var(--radius-input);
  transition: border-color var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default);
  appearance: none;
  -webkit-appearance: none;
}

.spa-kit .spa-field__input::placeholder {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
}

.spa-kit .spa-field__input:hover:not(:disabled) {
  border-color: #6b7f8e;
}

.spa-kit .spa-field__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.1875rem var(--color-primary-muted);
}

.spa-kit .spa-field__input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--color-bg);
}

.spa-kit .spa-field--icon .spa-field__input {
  padding-left: 2.625rem;
}

.spa-kit .spa-field--pw .spa-field__input { padding-right: 2.625rem; }

.spa-kit select.spa-field__input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238194a2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.375rem;
}

.spa-kit .spa-field__lead {
  position: absolute;
  left: 0.875rem;
  display: inline-flex;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-text-muted);
  pointer-events: none;
}
.spa-kit .spa-field__lead svg { width: 100%; height: 100%; }

.spa-kit .spa-field__req { color: var(--color-error); margin-left: 0.125rem; }

.spa-kit .spa-field__icon {
  position: absolute;
  right: 0.875rem;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-text-muted);
  pointer-events: none;
}

.spa-kit .spa-field__toggle {
  display: none;
}

.spa-kit .spa-field--error .spa-field__input {
  border-color: var(--color-error);
}
.spa-kit .spa-field--error .spa-field__input:focus {
  box-shadow: 0 0 0 0.1875rem rgba(192, 57, 43, 0.15);
}

.spa-kit .spa-field__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
/* Blazor's built-in <ValidationMessage> always renders "validation-message" as its own class;
   whether a splatted class="spa-field__error" merges with or replaces that is ambiguous from
   here, so both selectors get the identical treatment below — whichever one actually lands on
   the rendered <div>, the icon shows. app.css's old global .validation-message rule (plain
   #e50000, no font) predates the kit reskin and is overridden by these (loaded after, more
   specific — .spa-kit ancestor). */
.spa-kit .spa-field__error,
.spa-kit .validation-message {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-error);
  margin-top: 0.375rem;
}

.spa-kit .spa-field__error::before,
.spa-kit .validation-message::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cline x1='12' y1='8' x2='12' y2='13'/%3E%3Ccircle cx='12' cy='16.5' r='0.6' fill='%23c0392b'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ============================================================
   components/checkbox — new, not part of the kit (missing items.txt
   flags "Checkbox" as a missing UI control). Built from spa-field/
   spa-btn tokens so it matches the rest of the library.
   ============================================================ */

.spa-kit .spa-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
}

.spa-kit .spa-checkbox--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.spa-kit .spa-checkbox__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.spa-kit .spa-checkbox__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  color: transparent;
  background: var(--color-bg-cream);
  border: 0.0938rem solid var(--color-border-input);
  border-radius: 0.25rem;
  transition: background-color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}

.spa-kit .spa-checkbox__input:checked + .spa-checkbox__box {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.spa-kit .spa-checkbox__input:focus-visible + .spa-checkbox__box {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.125rem;
}

.spa-kit .spa-checkbox__label {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ============================================================
   components/appointment-card/appointment-card.css
   ============================================================ */

.spa-kit .spa-appointment-card {
  background: var(--color-bg-cream);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.spa-kit .spa-appointment-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.spa-kit .spa-appointment-card__avatar {
  flex-shrink: 0;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: var(--radius-lg);
  border: 0.0625rem solid var(--color-primary-muted);
  background: var(--color-surface);
  overflow: hidden;
}

.spa-kit .spa-appointment-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spa-kit .spa-appointment-card__meta {
  flex: 1;
  min-width: 0;
}

.spa-kit .spa-appointment-card__date {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  margin: 0;
}

.spa-kit .spa-appointment-card__location {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
}

.spa-kit .spa-appointment-card__edit {
  flex-shrink: 0;
}

.spa-kit .spa-appointment-card__treatment {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  line-height: var(--line-height-relaxed);
  margin: 0;
  white-space: pre-line;
}

.spa-kit .spa-appointment-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.spa-kit .spa-appointment-card__link {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

.spa-kit .spa-appointment-card__link:hover {
  color: var(--color-primary-hover);
}

@media (max-width: 48rem) {
  .spa-kit .spa-appointment-card {
    padding: var(--space-4);
  }

  .spa-kit .spa-appointment-card__actions {
    flex-direction: column;
  }

  .spa-kit .spa-appointment-card__actions .spa-btn {
    width: 100%;
  }
}

/* ============================================================
   components/pill-button/pill-button.css
   (treatment card + pill group/pill)
   ============================================================ */

.spa-kit .spa-treatment-card {
  background: var(--color-bg-cream);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 0.0625rem solid var(--color-border);
  transition: box-shadow var(--duration-normal) var(--ease-default);
}

.spa-kit .spa-treatment-card:hover {
  box-shadow: var(--shadow-md);
}

.spa-kit .spa-treatment-card__image {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--color-border);
}

.spa-kit .spa-treatment-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spa-kit .spa-treatment-card__body {
  padding: var(--space-4);
}

.spa-kit .spa-treatment-card__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: 350;
  color: var(--color-primary);
  margin: 0 0 var(--space-2);
}

.spa-kit .spa-treatment-card__meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

.spa-kit .spa-treatment-card__price {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.spa-kit .spa-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.spa-kit .spa-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1.25rem;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
}

.spa-kit .spa-pill:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.spa-kit .spa-pill--selected,
.spa-kit .spa-pill[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.spa-kit .spa-pill:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.125rem;
}

.spa-kit .spa-pill:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================
   components/dropdown/dropdown.css
   ============================================================ */

.spa-kit .spa-dropdown {
  position: relative;
  width: 100%;
}

.spa-kit .spa-dropdown__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-1);
  color: var(--color-text-primary);
}

.spa-kit .spa-dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2.75rem; /* matches .spa-field__input — dropdown.css never set this, so it was only as tall as its padding+line-height */
  padding: 0 1rem;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-border-input);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
}

.spa-kit .spa-dropdown__trigger:hover {
  border-color: var(--color-primary-muted);
}

.spa-kit .spa-dropdown__trigger:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.1875rem var(--color-primary-muted);
}

.spa-kit .spa-dropdown__trigger[aria-expanded="true"] {
  border-color: var(--color-primary);
}

.spa-kit .spa-dropdown__icon {
  width: 1rem;
  height: 1rem;
  transition: transform var(--duration-normal) var(--ease-default);
}

.spa-kit .spa-dropdown__trigger[aria-expanded="true"] .spa-dropdown__icon {
  transform: rotate(180deg);
}

.spa-kit .spa-dropdown__menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  list-style: none;
  margin: 0;
  padding: var(--space-2);
  max-height: 15rem;
  overflow-y: auto;
}

.spa-kit .spa-dropdown__menu[hidden] {
  display: none;
}

.spa-kit .spa-dropdown__option {
  padding: 0.625rem 0.75rem;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.spa-kit .spa-dropdown__option:hover,
.spa-kit .spa-dropdown__option--selected {
  background: var(--color-primary-muted);
  color: var(--color-primary);
}

.spa-kit .spa-dropdown--error .spa-dropdown__trigger {
  border-color: var(--color-error);
}

.spa-kit .spa-dropdown--disabled .spa-dropdown__trigger {
  opacity: 0.6;
  cursor: not-allowed;
}

.spa-kit .spa-dropdown__option--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.spa-kit .spa-dropdown__icon-leading {
  width: 1rem;
  height: 1rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
  margin-right: 0.5rem;
}

.spa-kit .spa-dropdown__trigger-content {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   components/date-picker/date-picker.css
   ============================================================ */

.spa-kit .spa-datepicker {
  box-sizing: border-box;
  width: 19.125rem;
  max-width: 19.125rem;
  background: #fffdf8;
  border: none;
  border-radius: 0.625rem;
  padding: 0 0 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  box-shadow: 0 0.1875rem 0.5rem rgba(34, 48, 62, 0.10);
}

.spa-kit .spa-datepicker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 3.375rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0;
  box-sizing: border-box;
}

.spa-kit .spa-datepicker__title {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.375rem;
  color: rgba(34, 48, 62, 0.90);
}

.spa-kit .spa-datepicker__nav {
  width: 1.875rem;
  height: 1.875rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34, 48, 62, 0.08);
  border: none;
  border-radius: 0.25rem;
  color: rgba(34, 48, 62, 0.70);
  cursor: pointer;
}

.spa-kit .spa-datepicker__nav:hover:not(:disabled) {
  background: rgba(34, 48, 62, 0.14);
}

.spa-kit .spa-datepicker__nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.spa-kit .spa-datepicker__nav svg {
  display: block;
}

.spa-kit .spa-datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 2.25rem);
  justify-content: center;
  gap: 0;
  width: 15.75rem;
  text-align: center;
}

.spa-kit .spa-datepicker__dow {
  width: 2.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  color: rgba(34, 48, 62, 0.90);
}

.spa-kit .spa-datepicker__day {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1;
  border: none;
  background: none;
  border-radius: 0.625rem;
  cursor: pointer;
  color: rgba(34, 48, 62, 0.90);
  padding: 0;
}

.spa-kit .spa-datepicker__day:hover:not(:disabled):not(.spa-datepicker__day--selected) {
  background: rgba(34, 48, 62, 0.08);
}

.spa-kit .spa-datepicker__day--today {
  font-weight: 400;
  border: none;
}

.spa-kit .spa-datepicker__day:disabled {
  color: rgba(34, 48, 62, 0.40);
  cursor: not-allowed;
}

.spa-kit .spa-datepicker__day--other {
  color: rgba(34, 48, 62, 0.40);
}

.spa-kit .spa-datepicker__day--available {
  background: rgba(52, 93, 137, 0.12);
  color: #345d89;
  border-radius: 0.625rem;
}

/* Day already has a scheduled visit — distinct from --available (open slots), can overlap it,
   so this is a corner dot rather than a background fill. No kit reference; app-specific state. */
.spa-kit .spa-datepicker__day--prior-booking::after {
  content: '';
  position: absolute;
  bottom: 0.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--color-accent-terracotta);
}

.spa-kit .spa-datepicker__day--selected,
.spa-kit .spa-datepicker__day--selected.spa-datepicker__day--available,
.spa-kit .spa-datepicker__day--selected:hover:not(:disabled) {
  background: #345d89;
  color: #ffffff;
  border-radius: 1.625rem;
}

.spa-kit .spa-datepicker__legend {
  display: none;
}

/* ============================================================
   components/itinerary-panel/itinerary-panel.css
   ============================================================ */

.spa-kit .spa-itinerary {
  background: var(--color-bg-cream);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.spa-kit .spa-itinerary__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
}

.spa-kit .spa-itinerary__toggle:hover {
  background: var(--color-primary-muted);
}

.spa-kit .spa-itinerary__toggle:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: -0.125rem;
}

.spa-kit .spa-itinerary__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin: 0;
}

.spa-kit .spa-itinerary__summary {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}

.spa-kit .spa-itinerary__chevron {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-primary);
  transition: transform var(--duration-normal) var(--ease-default);
  flex-shrink: 0;
}

.spa-kit .spa-itinerary__toggle[aria-expanded="true"] .spa-itinerary__chevron {
  transform: rotate(180deg);
}

.spa-kit .spa-itinerary__panel {
  padding: 0 var(--space-5) var(--space-5);
  border-top: 0.0625rem solid var(--color-border);
}

.spa-kit .spa-itinerary__panel[hidden] {
  display: none;
}

.spa-kit .spa-itinerary__item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-3) 0;
  border-bottom: 0.0625rem solid var(--color-border);
  gap: var(--space-3);
}

.spa-kit .spa-itinerary__item:last-child {
  border-bottom: none;
}

.spa-kit .spa-itinerary__item-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: 0;
}

.spa-kit .spa-itinerary__item-detail {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}

.spa-kit .spa-itinerary__item-price {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  white-space: nowrap;
}

.spa-kit .spa-itinerary__total {
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-4);
  margin-top: var(--space-2);
  border-top: 0.125rem solid var(--color-primary-muted);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

@media (max-width: 48rem) {
  .spa-kit .spa-itinerary--sticky-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-lg);
  }

  .spa-kit .spa-itinerary--sticky-mobile .spa-itinerary__panel {
    max-height: 60vh;
    overflow-y: auto;
  }
}

/* ============================================================
   components/misc/misc.css
   ============================================================ */

.spa-kit .spa-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.25rem 0.5rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  border-radius: var(--radius-badge);
  background: var(--color-primary-muted);
  color: var(--color-primary);
  white-space: nowrap;
}

.spa-kit .spa-badge--finalized,
.spa-kit .spa-badge--success {
  background: #c8d7c2;
  color: #3a5c34;
}
.spa-kit .spa-badge--error { background: rgba(192,57,43,0.12); color: var(--color-error); }
.spa-kit .spa-badge--upcoming { background: #dce8f5; color: var(--color-primary); }
.spa-kit .spa-badge--pending { background: rgba(194,106,79,0.14); color: var(--color-accent-terracotta); }

.spa-kit .spa-search {
  position: relative;
  width: 100%;
}

.spa-kit .spa-search__input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  border: 0.0625rem solid var(--color-border-input);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

.spa-kit .spa-search__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.1875rem var(--color-primary-muted);
}

.spa-kit .spa-search__icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-text-muted);
}

.spa-kit .spa-card {
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.spa-kit .spa-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: var(--space-5);
}

.spa-kit .spa-product-card {
  background: var(--color-bg-cream);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 0.0625rem solid var(--color-border);
}

.spa-kit .spa-product-card__image {
  aspect-ratio: 1;
  background: var(--color-border);
  overflow: hidden;
}

.spa-kit .spa-product-card__image img { width: 100%; height: 100%; object-fit: cover; }

.spa-kit .spa-product-card__body { padding: var(--space-4); }

.spa-kit .spa-product-card__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  margin: 0 0 var(--space-2);
}

.spa-kit .spa-product-card__price {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.spa-kit .spa-benefits-card {
  background: linear-gradient(135deg, var(--color-primary) 0%, #2a4d70 100%);
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.spa-kit .spa-benefits-card h3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  margin: 0 0 var(--space-3);
}

.spa-kit .spa-benefits-card ul {
  margin: 0;
  padding-left: var(--space-5);
  line-height: 1.8;
  font-size: var(--font-size-sm);
}

.spa-kit .spa-quiz-step {
  max-width: 45rem;
  margin: 0 auto;
  text-align: center;
}

.spa-kit .spa-quiz-step__progress {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin-bottom: var(--space-6);
}

.spa-kit .spa-quiz-step__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-border);
}

.spa-kit .spa-quiz-step__dot--active,
.spa-kit .spa-quiz-step__dot--done {
  background: var(--color-primary);
}

.spa-kit .spa-booking-layout {
  display: grid;
  grid-template-columns: 1fr 22.5rem;
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 64rem) {
  .spa-kit .spa-booking-layout { grid-template-columns: 1fr; }
}

.spa-kit .spa-auth-card {
  max-width: 25.875rem;
  width: 100%;
}

.spa-kit .spa-page-header {
  margin-bottom: var(--space-6);
}

.spa-kit .spa-page-header p {
  color: var(--color-text-muted);
  margin: var(--space-2) 0 0;
}

.spa-kit .spa-empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-text-muted);
}

/* New — not in the kit's own misc.css. See SpaAlert.razor for why. */
.spa-kit .spa-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}
.spa-kit .spa-alert__icon { flex-shrink: 0; margin-top: 0.125rem; }
.spa-kit .spa-alert--error {
  background: rgba(192, 57, 43, 0.08);
  color: var(--color-error);
}
.spa-kit .spa-alert--success {
  background: var(--color-success-bg);
  color: #3a5c34;
}
.spa-kit .spa-alert--warning {
  background: rgba(194, 106, 79, 0.1);
  color: var(--color-accent-terracotta);
}

.spa-kit .spa-cart-row {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 0.0625rem solid var(--color-border);
  align-items: center;
}

.spa-kit .spa-cart-row__image {
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius-md);
  background: var(--color-border);
  flex-shrink: 0;
  overflow: hidden;
}

.spa-kit .spa-cart-row__image img { width: 100%; height: 100%; object-fit: cover; }

.spa-kit .spa-cart-row__info { flex: 1; }

.spa-kit .spa-cart-row__title {
  font-weight: var(--font-weight-medium);
  margin: 0 0 var(--space-1);
}

.spa-kit .spa-cart-summary {
  background: var(--color-bg-cream);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  position: sticky;
  top: 6.25rem;
}

.spa-kit .spa-cart-summary__row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  font-size: var(--font-size-sm);
}

.spa-kit .spa-cart-summary__total {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  border-top: 0.0625rem solid var(--color-border);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
}

.spa-kit .spa-404 {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-8);
}

.spa-kit .spa-404 h1 {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 15vw, 8rem);
  color: var(--color-primary);
  margin: 0;
  line-height: 1;
}

.spa-kit .spa-help-section {
  margin-bottom: var(--space-6);
}

.spa-kit .spa-help-section h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}

.spa-kit .spa-accordion__trigger {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  text-align: left;
  margin-bottom: var(--space-2);
}

.spa-kit .spa-accordion__panel {
  padding: 0 var(--space-4) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.spa-kit .spa-accordion__panel[hidden] { display: none; }

/* ============================================================
   SpaModal (Components/Shared/Kit/SpaModal.razor) — ported from the kit's actual
   appointment-details.html modal markup (lines ~214-251); not part of any component-library CSS
   file, since the kit itself only ever inlined this once, on one page.
   ============================================================ */

.spa-kit .spa-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 23, 18, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: 1rem;
}

.spa-kit .spa-modal {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  max-width: 32.5rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.spa-kit .spa-modal__header {
  display: flex;
  align-items: center;
  padding: var(--space-5);
  border-bottom: 0.0625rem solid var(--color-border);
  gap: var(--space-3);
}

.spa-kit .spa-modal__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 350;
  color: var(--color-primary);
  margin: 0;
  flex: 1;
  min-width: 0;
}

.spa-kit .spa-modal__header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.spa-kit .spa-modal__close {
  border: none;
  background: none;
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  line-height: 1;
  padding: 0.25rem;
  cursor: pointer;
}
.spa-kit .spa-modal__close:hover { color: var(--color-text-primary); }

.spa-kit .spa-modal__body {
  padding: var(--space-5);
}

.spa-kit .spa-modal__footer {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-5);
  border-top: 0.0625rem solid var(--color-border);
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ============================================================
   Billing step shell — header/page-card/label/failure-banner/card-list/actions originally built for
   BillingSection (booking wizard's billing step). Promoted here, unchanged, once GiftBillingSection
   (gifts checkout's payment step) needed the identical look — two components now share it.
   ============================================================ */

.spa-kit .billing-header {
  margin-bottom: var(--space-5);
}

.spa-kit .billing-header h1 {
  margin: 0;
}

.spa-kit .billing-page-card {
  background: var(--color-bg-cream);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.spa-kit .billing-label {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.spa-kit .billing-failure {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  width: 100%;
}

.spa-kit .billing-failure__text p {
  margin: 0.25rem 0 0;
}

.spa-kit .billing-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.spa-kit .billing-card-list--busy {
  opacity: 0.6;
  pointer-events: none;
}

.spa-kit .billing-card-list .hub-card-on-file {
  max-width: none;
}

.spa-kit .billing-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-2);
}

@media (max-width: 40rem) {
  .spa-kit .billing-page-card {
    padding: var(--space-4);
  }

  .spa-kit .billing-actions .spa-btn {
    flex: 1;
  }
}

/* ============================================================
   Credit-card form fields — the field grid + CardConnect tokenizer chrome originally built for
   BillingSection (booking wizard's billing step). Promoted here, unchanged, once
   MembershipCreditCardSection (Manage Membership's edit-payment-method modal) needed the identical
   look — two components now share it, so it belongs in the design system, not one page's isolated CSS.
   ============================================================ */

.spa-kit .billing-form-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.spa-kit .billing-form-fieldset:disabled {
  opacity: 0.6;
}

.spa-kit .billing-form-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.spa-kit .billing-form-row {
  display: grid;
  gap: var(--space-4);
}

.spa-kit .billing-form-row--address {
  grid-template-columns: 2fr 1fr;
}

.spa-kit .billing-form-row--card {
  grid-template-columns: 1fr 1fr 1fr;
}

.spa-kit .billing-form-row--split {
  grid-template-columns: 1fr 1fr;
}

.spa-kit .billing-form-row--city-state {
  grid-template-columns: 2fr 1fr;
}

.spa-kit .billing-tokenizer {
  height: 2.75rem;
  padding: 0.4375rem 0.875rem;
  background: var(--color-bg-cream);
  border: 0.0625rem solid var(--color-border-input);
  border-radius: var(--radius-input);
  overflow: hidden;
  transition: border-color var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default);
}

.spa-kit .billing-tokenizer--focused {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.1875rem var(--color-primary-muted);
}

.spa-kit .billing-tokenizer--error {
  border-color: var(--color-error);
}

.spa-kit .billing-tokenizer--busy {
  opacity: 0.6;
  pointer-events: none;
}

.spa-kit .billing-tokenizer__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 40rem) {
  .spa-kit .billing-form-row--address,
  .spa-kit .billing-form-row--card,
  .spa-kit .billing-form-row--split,
  .spa-kit .billing-form-row--city-state {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   pages/booking/booking.css — reusable pieces the UX team left as
   page-scoped "hub-" classes instead of splitting into components/.
   Ported here (not into a page .razor.css) because they're reused
   across multiple booking-wizard steps: time slots (availability),
   card-on-file (confirm-reservation), enhancement cards
   (treatments-enhancements). hub-table*/hub-badge*/hub-pagination
   are intentionally NOT ported — My Appointments keeps its existing
   RadzenDataGrid, reskinned in place rather than rebuilt (Phase 3).
   ============================================================ */

.spa-kit .hub-timeslots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.spa-kit .hub-timeslot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 5.75rem;
  height: 4rem;
  padding: 0.5rem 0.75rem;
  border: 0.0625rem solid #e8e8e9;
  border-radius: 0.625rem;
  background: #fffdf8;
  text-decoration: none;
  font-family: 'Barlow', system-ui, sans-serif;
  color: #1a1712;
  cursor: pointer;
}

.spa-kit .hub-timeslot span { font-size: 0.875rem; font-weight: 600; }
.spa-kit .hub-timeslot small { font-size: 0.6875rem; color: #8194a2; margin-top: 0.125rem; }
.spa-kit .hub-timeslot--selected {
  border-color: #335d88;
  background: rgba(51, 93, 136, 0.08);
}
.spa-kit .hub-timeslot:disabled,
.spa-kit .hub-timeslot--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.spa-kit .hub-card-on-file {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 22.5rem;
  padding: 1rem;
  border: 0.09375rem solid #335d88;
  border-radius: 0.625rem;
  background: rgba(51, 93, 136, 0.06);
  text-align: left;
  transition: border-color var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default);
}

.spa-kit .hub-card-on-file--unselected {
  border-color: var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
}

.spa-kit .hub-card-on-file--unselected:hover {
  border-color: var(--color-primary);
}

.spa-kit .hub-card-on-file--expired {
  cursor: not-allowed;
  opacity: 0.55;
}

.spa-kit .hub-card-on-file__check {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #335d88;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.spa-kit .hub-card-on-file__check--unselected {
  background: transparent;
  border: 0.09375rem solid var(--color-border-input);
}

.spa-kit .hub-card-on-file__body {
  flex: 1;
  min-width: 0;
}

.spa-kit .hub-card-on-file__name {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #1a1712;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.spa-kit .hub-card-on-file__detail {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 0.875rem;
  color: #515151;
  margin: 0.25rem 0 0;
}

.spa-kit .hub-card-on-file__expiry {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 0.8125rem;
  color: #8194a2;
  margin: 0.25rem 0 0;
}

.spa-kit .hub-enhancement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4);
}

.spa-kit .hub-enhancement-card {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-cream);
}

.spa-kit .hub-enhancement-card__img {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-sm);
  background: var(--color-border);
  flex-shrink: 0;
  overflow: hidden;
}
.spa-kit .hub-enhancement-card__img img { width: 100%; height: 100%; object-fit: cover; }

.spa-kit .hub-enhancement-card__title {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1712;
  margin: 0;
}

.spa-kit .hub-enhancement-card__meta {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: var(--font-size-xl);
  color: var(--color-primary);
  margin: 0.25rem 0 0.5rem;
}

.spa-kit .hub-enhancement-card__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  padding: 0 0.875rem;
  border: 0.09375rem solid #335d88;
  border-radius: 6.25rem;
  background: transparent;
  font-family: 'Barlow', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  color: #335d88;
  cursor: pointer;
  white-space: nowrap;
}
.spa-kit .hub-enhancement-card__add:hover { background: rgba(51, 93, 136, 0.08); }
.spa-kit .hub-enhancement-card__add--added {
  background: #335d88;
  color: #fffcf6;
}
.spa-kit .hub-enhancement-card__add:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.spa-kit .hub-enhancement-card__add--loading {
  position: relative;
  color: transparent;
  opacity: 1;
}
.spa-kit .hub-enhancement-card__add--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.875rem;
  height: 0.875rem;
  margin: -0.4375rem 0 0 -0.4375rem;
  border: 0.125rem solid rgba(51, 93, 136, 0.35);
  border-top-color: #335d88;
  border-radius: 50%;
  animation: spa-spin 0.6s linear infinite;
}
.spa-kit .hub-enhancement-card__add--added.hub-enhancement-card__add--loading::after {
  border-color: rgba(255, 252, 246, 0.4);
  border-top-color: #fffcf6;
}

/* ============================================================
   Itinerary sidebar — new, class-based. The kit's own
   pages/booking/elements/itinerary-sidebar.html had no CSS behind
   it at all (100% hand-copied inline styles); this converts that
   one-off markup into a reusable, token-driven component instead
   of carrying the inline styles forward (same cleanup pattern as
   the sidebar user card).
   ============================================================ */

.spa-kit .hub-itinerary-sidebar {
  background: #fffdf8;
  border: 0.0625rem solid #ece8dd;
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex-shrink: 0;
}

.spa-kit .hub-itinerary-sidebar__location {
  font-family: var(--font-heading);
  font-weight: 350;
  font-size: 1.25rem;
  color: #0b0f0e;
  margin: 0;
}

.spa-kit .hub-itinerary-sidebar__address {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: #676767;
  margin: 0;
}

.spa-kit .hub-itinerary-sidebar__date {
  border-top: 0.0625rem solid #e4e9ee;
  padding-top: var(--space-3);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: #0b0f0e;
}

.spa-kit .hub-itinerary-sidebar__item {
  border: 0.0625rem solid rgba(107, 107, 110, 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.spa-kit .hub-itinerary-sidebar__item-time-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: #676767;
}

.spa-kit .hub-itinerary-sidebar__item-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
}

.spa-kit .hub-itinerary-sidebar__item-name {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  color: #0b0f0e;
  margin: 0;
}
.spa-kit .hub-itinerary-sidebar__item-name small { font-weight: 400; }

.spa-kit .hub-itinerary-sidebar__item-provider {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: #676767;
  margin: 0.25rem 0 0;
}

.spa-kit .hub-itinerary-sidebar__item-price {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: #0b0f0e;
  margin: 0;
  flex-shrink: 0;
}

.spa-kit .hub-itinerary-sidebar__item-member-price {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: #676767;
  margin: 0;
  text-align: right;
}

.spa-kit .hub-itinerary-sidebar__membership-cta {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: #000;
  text-decoration: none;
  text-align: center;
  background: #ece8dd;
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: block;
}

.spa-kit .hub-itinerary-sidebar__subtotal {
  border-top: 0.0625rem solid #e4e9ee;
  padding-top: var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: #0b0f0e;
}

/* Kit has no reference for these — ItinerarySection and ConfirmationSection's embedded itinerary
   both need them (customer group header, remove buttons, discount line, countdown), so they live
   here rather than duplicated in each component's isolated .razor.css. */

.spa-kit .cart-visit-id {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
}

.spa-kit .cart-countdown {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
  background: var(--color-primary-muted);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

.spa-kit .cart-countdown a {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  margin-left: 0.25rem;
  cursor: pointer;
}

.spa-kit .cart-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.spa-kit .cart-group__name {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: var(--font-size-base);
  color: var(--color-primary);
  margin: 0;
}

.spa-kit .cart-empty {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.spa-kit .cart-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 50%;
  transition: color var(--duration-normal) var(--ease-default), background-color var(--duration-normal) var(--ease-default);
}

.spa-kit .cart-remove-btn:hover {
  color: var(--color-error);
  background: rgba(192, 57, 43, 0.1);
}

.spa-kit .cart-remove-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.spa-kit .cart-link--busy {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.spa-kit .cart-remove-btn--enh {
  width: 1rem;
  height: 1rem;
}

.spa-kit .cart-enh-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-top: 0.375rem;
  border-top: 0.0625rem dashed rgba(107, 107, 110, 0.25);
}

.spa-kit .cart-enh-row {
  position: relative;
  padding-right: 1.25rem;
}

.spa-kit .cart-enh-row .cart-remove-btn--enh {
  position: absolute;
  top: 0;
  right: 0;
}

.spa-kit .cart-discount-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-error);
}

.spa-kit .cart-remove-confirm-text {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
  margin: 0;
}

/* ============================================================
   Gifts module shared shell — kit has no reference pages for the gifts purchase flow, so its
   step components (FlatAmountSection, GiftCardPackageSection, GiftExperienceSection,
   GiftCardCart, GiftRecipientSection, GiftRecipientAddressSection, ...) are styled to match the
   sibling QuickBooking wizard's shell (qb-page-card / billing-page-card) instead of inventing a
   new look. Lives here, not in one component's isolated .razor.css, because these are sibling
   components (not parent/child) that all need the same header/card/field classes.
   ============================================================ */

.spa-kit .gc-header {
  margin-bottom: var(--space-5);
}

.spa-kit .gc-header__title {
  margin: 0 0 var(--space-2);
}

.spa-kit .gc-header__subtitle {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 40rem;
  line-height: var(--line-height-base);
}

.spa-kit .gc-page-card {
  background: var(--color-bg-cream);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.spa-kit .gc-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.spa-kit .gc-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.spa-kit .gc-field--amount {
  max-width: 16rem;
}

.spa-kit .gc-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.spa-kit .gc-divider {
  margin: 0;
  border: 0;
  border-top: 0.0625rem solid #d4cdbb;
}

.spa-kit .gc-subheading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  margin: 0;
}

.spa-kit textarea.spa-field__input {
  height: auto;
  min-height: 6rem;
  resize: vertical;
  line-height: var(--line-height-base);
}

.spa-kit .gc-message-counter {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: right;
}

.spa-kit .gc-gratuity-pills {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.375rem;
}

.spa-kit .gc-gratuity-pills .spa-pill {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.375rem 0.25rem;
  font-size: var(--font-size-xs);
  justify-content: center;
  text-align: center;
}

.spa-kit .gc-shipping-card {
  border: 0.0625rem solid var(--color-border);
  background: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.spa-kit .gc-shipping-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 0.0625rem solid var(--color-border);
}

.spa-kit .gc-shipping-option:last-child {
  border-bottom: none;
}

.spa-kit .gc-shipping-option__price {
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  flex-shrink: 0;
}

.spa-kit .gc-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-2);
}

.spa-kit .gc-actions--split {
  justify-content: space-between;
}

.spa-kit .gc-empty {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-6) 0;
}

.spa-kit .gc-summary {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--space-5);
}

.spa-kit .gc-summary__title {
  margin: 0 0 var(--space-2);
}

.spa-kit .gc-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 0.0625rem solid var(--color-border);
}

.spa-kit .gc-summary__row:first-of-type {
  border-top: none;
}

.spa-kit .gc-summary__label {
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.spa-kit .gc-summary__value {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  text-align: right;
}

.spa-kit .gc-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 0.125rem solid var(--color-primary-muted);
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
  color: var(--color-primary);
}

@media (max-width: 40rem) {
  .spa-kit .gc-page-card {
    padding: var(--space-4);
  }

  .spa-kit .gc-field-row {
    grid-template-columns: 1fr;
  }

  .spa-kit .gc-actions {
    justify-content: stretch;
  }

  .spa-kit .gc-actions ::deep .spa-btn,
  .spa-kit .gc-actions .spa-btn {
    width: 100%;
  }
}

/* .gifts-cart-sticky marks the cart-sidebar column across every gifts step (Index.razor's main
   flow, GiftOrderConfirmation's review/receipt page, ...). Promoted here — this used to live only
   in Index.razor.css, so CSS isolation kept it from ever reaching the other components that reuse
   the same class name once Bootstrap's col-md-* stacks it below the main content on mobile
   (48rem = Bootstrap's md breakpoint, where col-md-* stacks). */
@media (max-width: 48rem) {
  .spa-kit .gifts-cart-sticky {
    margin-top: var(--space-6);
  }
}

/* ============================================================
   SpaTable (Components/Shared/Kit/SpaTable.razor) — generic table chrome, ported from the kit's
   actual pages/hub/my-appointments.html table markup. Row/cell content (badges, expand rows, etc.)
   is entirely up to the caller's RowContent template, so those classes live with the caller instead.
   ============================================================ */

.spa-kit .hub-table-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--color-bg-cream);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.spa-kit .hub-table-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 350;
  color: #000;
  margin: 0;
}

.spa-kit .hub-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--color-bg-cream);
  border-radius: var(--radius-md);
}

.spa-kit .hub-table {
  width: 100%;
  /* Guarantees a sane minimum so narrow viewports scroll horizontally instead of the browser
     trying to compress every column down to unreadable widths first. */
  min-width: 40rem;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.spa-kit .hub-table th, .spa-kit .hub-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 0.0625rem solid var(--color-border);
  vertical-align: middle;
}
.spa-kit .hub-table th {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  background: var(--color-bg-cream);
  white-space: nowrap;
}
.spa-kit .hub-table tbody tr:last-child td { border-bottom: none; }

.spa-kit .hub-table-meta {
  padding: 1.25rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  background: var(--color-bg-cream);
  border-top: 0.0625rem solid var(--color-border-light);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.spa-kit .hub-pagination {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}
.spa-kit .hub-pagination button {
  min-width: 2rem;
  height: 2rem;
  border: 0.0625rem solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  cursor: pointer;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}
.spa-kit .hub-pagination button[aria-current="page"] {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.spa-kit .hub-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.spa-kit .hub-pagination__nav { border-color: transparent !important; }
.spa-kit .hub-pagination__ellipsis { color: var(--color-text-muted); padding: 0 0.125rem; }

@media (max-width: 40rem) {
  .spa-kit .hub-table-controls,
  .spa-kit .hub-table-meta {
    padding: 0.875rem 1rem;
  }
}

/* ============================================================
   Order/booking summary — hero + itemized rows + totals, originally built for SummarySection
   (booking confirmation: /appointments, embedded confirm-reservation card, dialogs). Promoted here,
   unchanged, once GiftOrderConfirmation (gifts checkout's review/receipt step) needed the identical
   "confirmed" hero and itemized-list look — two components now share it.
   ============================================================ */

.spa-kit .summary-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.spa-kit .summary-card--flush {
  background: transparent;
  padding: 0;
}

.spa-kit .summary-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.spa-kit .summary-hero__check {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.spa-kit .summary-hero__title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
  color: var(--color-primary);
  margin: 0;
}

.spa-kit .summary-hero__text {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  max-width: 32rem;
  margin: 0;
  line-height: var(--line-height-base);
}

.spa-kit .summary-resend {
  display: flex;
  justify-content: center;
}

.spa-kit .summary-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.spa-kit .summary-section__title {
  margin: 0;
}

.spa-kit .summary-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Booking-confirmed's date/location line reads larger and darker than other summary-meta
   usages (e.g. the gift receipt header) — kit's booking-confirmed.html shows this row at
   16px/#101010, not the smaller muted meta style. */
.spa-kit .summary-section .summary-meta {
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
}

.spa-kit .summary-meta__directions {
  color: var(--color-primary);
  text-decoration: underline;
  margin-left: var(--space-3);
}

.spa-kit .summary-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-2);
}

.spa-kit .summary-customer {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.spa-kit .summary-customer__name {
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xl);
  color: var(--color-text-primary);
  margin: 0;
}

.spa-kit .summary-item {
  padding: var(--space-2) 0;
  border-top: 0.0625rem solid var(--color-border);
}

.spa-kit .summary-item:first-of-type {
  border-top: none;
}

.spa-kit .summary-item__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.spa-kit .summary-item__row--enh {
  margin-top: var(--space-1);
}

.spa-kit .summary-item__time {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.spa-kit .summary-item__name {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: var(--font-size-xl);
  color: var(--color-text-primary);
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.spa-kit .summary-item__price {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  white-space: nowrap;
  flex-shrink: 0;
}

.spa-kit .summary-item__detail {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: var(--space-1) 0 0;
}

.spa-kit .summary-item__detail--discount {
  color: var(--color-error);
}

.spa-kit .summary-total {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) 0;
}

.spa-kit .summary-total__row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.spa-kit .summary-total__discount {
  color: var(--color-error);
}

.spa-kit .summary-total__row--grand {
  padding-top: var(--space-3);
  border-top: 0.125rem solid var(--color-primary-muted);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
  color: var(--color-primary);
}

.spa-kit .summary-billing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-4);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.spa-kit .summary-billing__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.spa-kit .summary-billing__label {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  margin: 0;
}

.spa-kit .summary-billing__value {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  margin: 0;
  word-break: break-word;
}

.spa-kit .summary-billing__value--muted {
  color: var(--color-text-muted);
}

.spa-kit .summary-policy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.spa-kit .summary-policy p {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
  margin: 0;
}

@media (max-width: 30rem) {
  .spa-kit .summary-card {
    padding: var(--space-5) var(--space-4) var(--space-6);
    gap: var(--space-5);
  }

  .spa-kit .summary-meta {
    flex-direction: column;
    gap: var(--space-1);
  }

  .spa-kit .summary-item__row {
    flex-wrap: wrap;
  }
}

/* ============================================================
   Auth split screen (login + create account) — promoted from Login.razor.css once
   Profile/Create needed the identical shell (same pattern as summary-* above, promoted when
   GiftOrderConfirmation needed SummarySection's look). Kit reference: pages/hub/login.html +
   pages/hub/hub.css's .hub-login* rules — a real, dedicated component, not inline-only like some
   other kit pages. Ported 1:1, px converted to rem. No ::deep needed here (unlike when this lived
   in an isolated .razor.css) since a global stylesheet applies by class name regardless of which
   component rendered the element.
   ============================================================ */

.spa-kit .hub-login {
  display: grid;
  /* Figma: 919px left / 1001px right at 1920px canvas */
  grid-template-columns: 919fr 1001fr;
  /* Pinned directly to the viewport rather than sized with height:100vh, because this
     component's ancestors (MainLayout's <main> and .spa-page, both min-height:100vh) are
     outside any reskinned page's own reach — position:fixed sidesteps the whole ancestor
     chain instead of fighting it. See MainLayout.razor.css's .spa-page--fullbleed for the
     matching ancestor-side fix, and each page's HeadContent for the html/body-level fix. */
  position: fixed;
  inset: 0;
  align-items: stretch;
  background: var(--color-bg);
}

.spa-kit .hub-login__brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-8) clamp(var(--space-6), 9vw, 6.25rem);
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.spa-kit .hub-login__panel {
  width: 100%;
  max-width: 25.875rem;
}

.spa-kit .hub-login__logo {
  display: block;
  width: min(11.25rem, 60%);
  height: auto;
  margin-bottom: var(--space-6);
}

.spa-kit .hub-login__title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 2.5rem;
  line-height: 1.15;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
  white-space: nowrap;
}

.spa-kit .hub-login__subtitle {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-primary);
  margin: 0 0 var(--space-6);
}

.spa-kit .hub-login__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.spa-kit .hub-login__field .spa-field__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.spa-kit .hub-login__field .spa-field__input {
  background: var(--color-bg-cream);
  border: 0.0625rem solid var(--color-border-input);
  border-radius: var(--radius-input);
  padding: 0.4375rem 0.875rem;
  height: 2.75rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.spa-kit .hub-login__remember {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9375rem;
  margin-top: -0.25rem;
}

.spa-kit .hub-login__forgot {
  font-family: var(--font-body);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--font-weight-normal);
  font-size: 0.9375rem;
}

.spa-kit .hub-login__forgot:hover {
  text-decoration: underline;
}

.spa-kit .hub-login__submit {
  width: 100%;
  margin-top: var(--space-2);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-6);
  height: 2.75rem;
  font-size: var(--font-size-md);
}

.spa-kit .hub-login__signup {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin: 0;
}

.spa-kit .hub-login__signup a {
  color: var(--color-primary);
  font-weight: var(--font-weight-normal);
  text-decoration: none;
}

.spa-kit .hub-login__signup a:hover {
  text-decoration: underline;
}

.spa-kit .hub-login__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  margin: var(--space-2) 0;
}

.spa-kit .hub-login__divider::before,
.spa-kit .hub-login__divider::after {
  content: '';
  flex: 1;
  height: 0.0625rem;
  background: var(--color-border);
}

.spa-kit .hub-login__sso {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.spa-kit .hub-login__sso-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 0.75rem 1rem;
  height: 2.75rem;
  border: 0.0625rem solid #b3b3b3;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: #0d0d12;
  width: 100%;
  transition: border-color var(--duration-normal) var(--ease-default), background-color var(--duration-normal) var(--ease-default);
}

.spa-kit .hub-login__sso-btn:hover {
  border-color: var(--color-border-input);
  background: #e4e0d5;
}

.spa-kit .hub-login__hero {
  position: relative;
  height: 100%;
  overflow: hidden;
  align-self: stretch;
  /* Key kit detail: large rounded bottom-left corner on the photo panel */
  border-bottom-left-radius: 13.75rem;
}

.spa-kit .hub-login__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Page-specific extras that aren't part of the kit reference (kit has no "create account" or
   footnote/hint pattern) — still live here since they're small and belong next to the shell
   they decorate, not worth a separate file. */
.spa-kit .hub-login__hint {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
  margin: 0.375rem 0 0;
}

.spa-kit .hub-login__note {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
  margin: 0;
}

.spa-kit .hub-login__footnote {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

@media (max-width: 48rem) {
  /* No hero column below this width, so there's nothing to clamp to the viewport for — drop
     the fixed positioning and let the page grow and scroll normally, like any other form. */
  .spa-kit .hub-login {
    position: static;
    inset: auto;
    grid-template-columns: 1fr;
    min-height: 100vh;
  }

  .spa-kit .hub-login__hero {
    display: none;
  }

  .spa-kit .hub-login__brand {
    height: auto;
    overflow-y: visible;
    padding: var(--space-6) var(--space-4);
  }
}