.fs-appointments-website-page {
  /* The active Website Theme uses an intentionally oversized navbar glow.
     Clip only on this app route so the decorative image cannot create a
     horizontal mobile scrollbar. */
  overflow-x: clip;
}

.fs-appointments-website-page .fsx-mlux-nav { overflow-x: clip; }

.fs-appointments-public {
  --fs-appointment-primary: var(--primary, #2563eb);
  --fs-appointment-accent: var(--green-500, #16a34a);
  --fs-surface: var(--card-bg, var(--fg-color, #fff));
  --fs-canvas: var(--bg-color, #f8fafc);
  --fs-control: var(--control-bg, var(--fg-color, #fff));
  --fs-text: var(--text-color, #111827);
  --fs-muted: var(--text-muted, #667085);
  --fs-border: var(--border-color, #d9dee5);
  --fs-soft: color-mix(in srgb, var(--fs-appointment-primary) 7%, var(--fs-surface));
  --fs-focus: color-mix(in srgb, var(--fs-appointment-primary) 28%, transparent);
  color: var(--fs-text);
  isolation: isolate;
  margin: 0 auto;
  max-width: 980px;
  padding: clamp(20px, 4vw, 48px) 16px clamp(56px, 8vw, 96px);
  position: relative;
}

.fs-appointments-public::before {
  background: var(--fs-canvas);
  content: "";
  inset-block: 0;
  left: 50%;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  width: 100vw;
  z-index: -1;
}

[data-theme="dark"] .fs-appointments-public,
.dark .fs-appointments-public {
  --fs-appointment-primary: var(--blue-300, #93c5fd);
  --fs-appointment-accent: var(--green-300, #86efac);
  --fs-surface: var(--gray-900, #171a1f);
  --fs-canvas: var(--gray-950, #0f1115);
  --fs-control: var(--gray-800, #252a31);
  --fs-text: var(--gray-100, #f3f4f6);
  --fs-muted: var(--gray-400, #a7afb9);
  --fs-border: var(--gray-700, #3b424d);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body:not([data-theme="light"]) .fs-appointments-public {
    --fs-appointment-primary: var(--blue-300, #93c5fd);
    --fs-appointment-accent: var(--green-300, #86efac);
    --fs-surface: var(--gray-900, #171a1f);
    --fs-canvas: var(--gray-950, #0f1115);
    --fs-control: var(--gray-800, #252a31);
    --fs-text: var(--gray-100, #f3f4f6);
    --fs-muted: var(--gray-400, #a7afb9);
    --fs-border: var(--gray-700, #3b424d);
  }
}

.fs-appointments-page *,
.fs-appointments-page *::before,
.fs-appointments-page *::after { box-sizing: border-box; }

.fs-appointments-page [hidden] { display: none !important; }

.fs-appointments-hero {
  margin: 0 auto clamp(24px, 5vw, 48px);
  max-width: 760px;
  padding: clamp(12px, 3vw, 24px) 0;
  text-align: center;
}

.fs-appointments-hero h1 {
  color: var(--fs-text);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 680;
  letter-spacing: -.035em;
  line-height: 1.08;
  margin: 0 auto 14px;
  max-width: 820px;
}

.fs-appointments-hero p {
  color: var(--fs-muted);
  font-size: clamp(1rem, 2.2vw, 1.18rem);
  line-height: 1.65;
  margin: 0 auto;
  max-width: 680px;
}

.fs-appointments-kicker {
  color: var(--fs-appointment-primary) !important;
  font-size: .75rem !important;
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: 12px !important;
  text-transform: uppercase;
}

.fs-appointments-custom-slot {
  background: var(--fs-surface);
  border: 1px solid var(--fs-border);
  border-radius: 14px;
  color: var(--fs-text);
  margin: 0 auto 20px;
  max-width: 760px;
  padding: clamp(16px, 3vw, 24px);
}

.fs-appointment-wizard { margin: 0 auto; max-width: 760px; }

.fs-appointments-progress {
  display: grid;
  gap: 10px;
  margin: 0 auto 18px;
  padding: 0 2px;
}

.fs-appointment-progress-bar {
  background: color-mix(in srgb, var(--fs-border) 72%, transparent);
  border-radius: 999px;
  height: 4px;
  overflow: hidden;
}

.fs-appointment-progress-bar > span {
  background: var(--fs-appointment-primary);
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width 220ms cubic-bezier(.2, .8, .2, 1);
  width: 0;
}

.fs-appointment-progress-meta {
  color: var(--fs-muted);
  display: flex;
  font-size: .78rem;
  font-weight: 600;
  justify-content: space-between;
  letter-spacing: .01em;
}

.fs-appointments-progress ol {
  display: flex;
  gap: 5px;
  justify-content: space-between;
  list-style: none;
  margin: 2px 0 0;
  overflow: hidden;
  padding: 0;
}

.fs-appointments-progress li {
  color: var(--fs-muted);
  font-size: .7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fs-appointments-progress li[aria-current="step"] { color: var(--fs-text); font-weight: 700; }
.fs-appointments-progress li.is-complete { color: var(--fs-appointment-primary); }
.fs-appointments-progress li.is-upcoming { opacity: .62; }

.fs-appointments-panel {
  background: var(--fs-surface);
  border: 1px solid var(--fs-border);
  border-radius: 20px;
  box-shadow: 0 12px 36px color-mix(in srgb, var(--fs-text) 7%, transparent);
  min-height: 360px;
  padding: clamp(22px, 5vw, 46px);
  scroll-margin-top: 24px;
}

.fs-appointment-step { transform-origin: 50% 10%; }
.fs-appointment-step[hidden] { display: none !important; }
.fs-appointment-step:focus { outline: 0; }

.fs-appointment-step-heading { margin: 0 0 clamp(22px, 4vw, 34px); }
.fs-appointment-step-heading h2 {
  color: var(--fs-text);
  font-size: clamp(1.55rem, 4vw, 2.1rem);
  font-weight: 670;
  letter-spacing: -.025em;
  line-height: 1.18;
  margin: 0 0 10px;
}
.fs-appointment-step-heading h2:focus { outline: 0; }
.fs-appointment-step-heading > p:last-child { color: var(--fs-muted); line-height: 1.55; margin: 0; }
.fs-appointment-step-eyebrow {
  color: var(--fs-appointment-primary) !important;
  font-size: .74rem;
  font-weight: 720;
  letter-spacing: .08em;
  margin: 0 0 8px !important;
  text-transform: uppercase;
}

.fs-appointment-card-list { display: grid; gap: 12px; }

.fs-appointment-choice-card {
  align-items: center;
  appearance: none;
  background: var(--fs-control);
  border: 1px solid var(--fs-border);
  border-radius: 14px;
  color: var(--fs-text);
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 14px;
  min-height: 72px;
  padding: 15px 17px;
  text-align: start;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  width: 100%;
}

.fs-appointment-choice-card:hover:not(:disabled) {
  border-color: var(--fs-appointment-primary);
  transform: translateY(-1px);
}

.fs-appointment-choice-card[aria-pressed="true"] {
  background: var(--fs-soft);
  border-color: var(--fs-appointment-primary);
  box-shadow: 0 0 0 2px var(--fs-focus);
}

.fs-appointment-choice-card:disabled { cursor: not-allowed; opacity: .58; }
.fs-appointment-choice-card img {
  border: 1px solid var(--fs-border);
  border-radius: 50%;
  flex: 0 0 auto;
  height: 48px;
  object-fit: cover;
  width: 48px;
}

.fs-appointment-choice-content { display: grid; flex: 1 1 auto; gap: 3px; min-width: 0; }
.fs-appointment-choice-content strong { color: var(--fs-text); font-size: .98rem; font-weight: 660; }
.fs-appointment-choice-content span { color: var(--fs-muted); font-size: .86rem; line-height: 1.45; }
.fs-appointment-choice-content small { color: var(--fs-muted); font-size: .76rem; }
.fs-appointment-choice-note {
  background: color-mix(in srgb, var(--orange-500, #f59e0b) 11%, var(--fs-surface));
  border-radius: 8px;
  color: var(--fs-text);
  flex: 0 1 38%;
  font-size: .76rem;
  line-height: 1.4;
  padding: 7px 9px;
}

.fs-appointment-calendar {
  background: var(--fs-control);
  border: 1px solid var(--fs-border);
  border-radius: 16px;
  padding: clamp(12px, 3vw, 20px);
}

.fs-appointment-calendar-toolbar {
  align-items: center;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  margin-bottom: 14px;
}

.fs-appointment-calendar-toolbar h3 {
  color: var(--fs-text);
  font-size: 1rem;
  font-weight: 680;
  margin: 0;
  text-align: center;
}

.fs-appointment-icon-button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--fs-text);
  cursor: pointer;
  display: inline-flex;
  font-size: 1.2rem;
  height: 44px;
  justify-content: center;
  padding: 0;
  width: 44px;
}
.fs-appointment-icon-button:hover:not(:disabled) { background: var(--fs-soft); border-color: var(--fs-border); }
.fs-appointment-icon-button:disabled { cursor: not-allowed; opacity: .3; }

.fs-appointment-calendar-grid { display: grid; gap: 5px; }
.fs-appointment-calendar-weekdays,
.fs-appointment-calendar-week { display: grid; gap: 5px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.fs-appointment-calendar-weekdays span {
  color: var(--fs-muted);
  font-size: .7rem;
  font-weight: 680;
  padding: 5px 0;
  text-align: center;
}

.fs-appointment-calendar-day,
.fs-appointment-calendar-empty {
  align-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 11px;
  display: flex;
  justify-content: center;
  min-height: 44px;
  min-width: 0;
}

.fs-appointment-calendar-day {
  background: transparent;
  border: 1px solid transparent;
  color: var(--fs-text);
  cursor: pointer;
  flex-direction: column;
  font: inherit;
  font-size: .88rem;
  font-weight: 620;
  gap: 3px;
  padding: 3px;
  position: relative;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.fs-appointment-calendar-day:hover:not(:disabled) { background: var(--fs-soft); border-color: var(--fs-appointment-primary); }
.fs-appointment-calendar-day:disabled { color: var(--fs-muted); cursor: default; opacity: .36; }
.fs-appointment-calendar-day[aria-current="date"]::before {
  border: 1px solid var(--fs-appointment-primary);
  border-radius: inherit;
  content: "";
  inset: 2px;
  pointer-events: none;
  position: absolute;
}
.fs-appointment-calendar-day[aria-selected="true"] {
  background: var(--fs-appointment-primary);
  border-color: var(--fs-appointment-primary);
  color: var(--btn-primary-color, #fff);
  box-shadow: 0 5px 14px var(--fs-focus);
}
.fs-appointment-calendar-day i { background: var(--fs-appointment-accent); border-radius: 50%; height: 4px; width: 4px; }
.fs-appointment-calendar-day i.is-low { opacity: .55; }
.fs-appointment-calendar-day i.is-high { box-shadow: 0 0 0 2px color-mix(in srgb, var(--fs-appointment-accent) 18%, transparent); }
.fs-appointment-calendar-day[aria-selected="true"] i { background: currentColor; }

.fs-appointment-calendar-skeleton span,
.fs-appointment-skeleton-card,
.fs-appointment-skeleton-slot,
.fs-appointment-skeleton span {
  animation: fs-appointment-shimmer 1.2s ease-in-out infinite alternate;
  background: color-mix(in srgb, var(--fs-border) 68%, transparent);
  border-radius: 10px;
}
.fs-appointment-calendar-skeleton span { aspect-ratio: 1 / 1; min-height: 44px; }
.fs-appointment-skeleton-card { height: 78px; }
.fs-appointment-skeleton-slot { height: 46px; }
.fs-appointment-skeleton { display: grid; gap: 12px; margin: 26px 0; }
.fs-appointment-skeleton span { display: block; height: 18px; }
.fs-appointment-skeleton span:nth-child(2) { width: 76%; }
.fs-appointment-skeleton span:nth-child(3) { width: 56%; }

.fs-appointments-slots { display: grid; gap: 22px; min-height: 96px; }
.fs-appointment-slot-group { display: grid; gap: 10px; }
.fs-appointment-slot-group h3 { color: var(--fs-muted); font-size: .78rem; font-weight: 680; margin: 0; text-transform: uppercase; }
.fs-appointment-slot-group-list { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.fs-appointments-slot {
  background: var(--fs-control);
  border: 1px solid var(--fs-border);
  border-radius: 11px;
  color: var(--fs-text);
  cursor: pointer;
  font: inherit;
  font-weight: 650;
  min-height: 46px;
  padding: 10px 12px;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.fs-appointments-slot:hover { border-color: var(--fs-appointment-primary); transform: translateY(-1px); }
.fs-appointments-slot[aria-pressed="true"] {
  background: var(--fs-soft);
  border-color: var(--fs-appointment-primary);
  box-shadow: 0 0 0 2px var(--fs-focus);
  color: var(--fs-text);
}

.fs-appointments-grid { display: grid; gap: 15px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-appointments-panel label {
  color: var(--fs-muted);
  display: grid;
  font-size: .82rem;
  font-weight: 650;
  gap: 7px;
  margin-bottom: 15px;
}
.fs-appointments-panel input,
.fs-appointments-panel select,
.fs-appointments-panel textarea {
  background: var(--fs-control);
  border: 1px solid var(--fs-border);
  border-radius: 10px;
  color: var(--fs-text);
  font: inherit;
  min-height: 44px;
  padding: 10px 12px;
  width: 100%;
}
.fs-appointments-panel textarea { min-height: 90px; resize: vertical; }
.fs-appointments-panel input:focus,
.fs-appointments-panel select:focus,
.fs-appointments-panel textarea:focus {
  border-color: var(--fs-appointment-primary);
  box-shadow: 0 0 0 3px var(--fs-focus);
  outline: 0;
}

.fs-appointment-intake-questions { border-top: 1px solid var(--fs-border); margin-top: 8px; padding-top: 20px; }
.fs-appointment-intake-questions h3 { color: var(--fs-text); font-size: 1rem; margin: 0 0 15px; }
.fs-appointment-intake-check { align-items: center !important; }

.fs-appointments-check { align-items: start; display: grid !important; font-weight: 400 !important; grid-template-columns: 20px 1fr; }
.fs-appointments-check input { margin-top: 3px; min-height: auto; width: auto; }
.fs-appointments-privacy-notice,
.fs-appointments-notice {
  background: color-mix(in srgb, var(--fs-appointment-accent) 8%, var(--fs-surface));
  border: 1px solid var(--fs-border);
  border-radius: 10px;
  color: var(--fs-text);
  line-height: 1.5;
  margin: 14px 0;
  padding: 11px 13px;
}
.fs-appointments-notice { border-inline-start: 3px solid var(--orange-500, #f59e0b); }

.fs-appointments-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.fs-appointments-actions-between { justify-content: space-between; margin-top: 26px; }
.fs-appointments-actions .btn { min-height: 42px; }
.fs-appointments-submit { min-width: 180px; }

.fs-appointment-summary {
  background: var(--fs-control);
  border: 1px solid var(--fs-border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: minmax(120px, .7fr) minmax(0, 1.3fr);
  margin: 0;
  overflow: hidden;
}
.fs-appointment-summary dt,
.fs-appointment-summary dd { border-bottom: 1px solid var(--fs-border); margin: 0; padding: 12px 15px; }
.fs-appointment-summary dt { color: var(--fs-muted); font-size: .8rem; font-weight: 650; }
.fs-appointment-summary dd { color: var(--fs-text); overflow-wrap: anywhere; }
.fs-appointment-summary > :nth-last-child(-n+2) { border-bottom: 0; }

.fs-appointment-message { color: var(--fs-muted); font-size: .88rem; line-height: 1.5; margin-top: 13px; }
.fs-appointment-message:empty { display: none; }
.fs-appointment-message p { margin: 0 0 9px; }
.fs-appointment-message.is-error { color: var(--red-600, #dc2626); }
.fs-appointment-message.is-success { color: var(--green-600, #16a34a); }
.fs-appointment-message.is-empty { color: var(--fs-muted); }
.fs-appointments-result { font-weight: 600; }
.fs-appointments-muted { color: var(--fs-muted); line-height: 1.5; }

.fs-appointment-success { min-height: 400px; text-align: center; }
.fs-appointment-success .fs-appointment-summary { margin-top: 24px; text-align: start; }
.fs-appointment-success-icon {
  align-items: center;
  background: color-mix(in srgb, var(--fs-appointment-accent) 14%, var(--fs-surface));
  border: 1px solid color-mix(in srgb, var(--fs-appointment-accent) 46%, var(--fs-border));
  border-radius: 50%;
  color: var(--fs-appointment-accent);
  display: inline-flex;
  font-size: 1.5rem;
  font-weight: 750;
  height: 58px;
  justify-content: center;
  margin-bottom: 18px;
  width: 58px;
}

.fs-appointments-honeypot { height: 0; left: -10000px; overflow: hidden; position: absolute; width: 0; }
.fs-appointments-sr-only {
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.fs-appointments-page button:focus-visible,
.fs-appointments-page a:focus-visible,
.fs-appointments-page [tabindex]:focus-visible {
  box-shadow: 0 0 0 3px var(--fs-focus);
  outline: 2px solid var(--fs-appointment-primary);
  outline-offset: 2px;
}

.fs-appointment-step.is-leaving-forward { animation: fs-appointment-leave-forward 80ms ease both; }
.fs-appointment-step.is-leaving-back { animation: fs-appointment-leave-back 80ms ease both; }
.fs-appointment-step.is-entering-forward { animation: fs-appointment-enter-forward 190ms cubic-bezier(.2, .8, .2, 1) both; }
.fs-appointment-step.is-entering-back { animation: fs-appointment-enter-back 190ms cubic-bezier(.2, .8, .2, 1) both; }

@keyframes fs-appointment-enter-forward {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fs-appointment-enter-back {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fs-appointment-leave-forward {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-8px); }
}
@keyframes fs-appointment-leave-back {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(8px); }
}
@keyframes fs-appointment-shimmer {
  from { opacity: .48; }
  to { opacity: .92; }
}

@media (max-width: 760px) {
  .fs-appointments-public { padding-inline: 10px; }
  .fs-appointments-panel { border-radius: 16px; min-height: 340px; padding: 22px 16px; }
  .fs-appointments-grid { grid-template-columns: 1fr; }
  .fs-appointment-choice-card { align-items: flex-start; flex-wrap: wrap; }
  .fs-appointment-choice-note { flex-basis: 100%; }
  .fs-appointments-progress ol { display: none; }
  .fs-appointment-calendar { margin-inline: -4px; padding: 10px 7px; }
  .fs-appointment-calendar-grid,
  .fs-appointment-calendar-weekdays,
  .fs-appointment-calendar-week { gap: 2px; }
  .fs-appointment-calendar-day,
  .fs-appointment-calendar-empty { border-radius: 9px; min-height: 42px; }
  .fs-appointment-summary { grid-template-columns: minmax(95px, .75fr) minmax(0, 1.25fr); }
  .fs-appointment-summary dt,
  .fs-appointment-summary dd { padding: 11px 10px; }
}

@media (max-width: 390px) {
  .fs-appointments-hero { margin-bottom: 20px; }
  .fs-appointments-panel { padding-inline: 13px; }
  .fs-appointment-calendar { margin-inline: -3px; padding-inline: 4px; }
  .fs-appointment-calendar-day { font-size: .8rem; min-height: 40px; }
  .fs-appointment-slot-group-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fs-appointments-actions-between { align-items: stretch; flex-direction: column-reverse; }
  .fs-appointments-actions-between > .btn,
  .fs-appointments-actions-between > .fs-appointments-actions,
  .fs-appointments-actions-between > .fs-appointments-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .fs-appointments-page *,
  .fs-appointments-page *::before,
  .fs-appointments-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}