@layer wsb-v4-components {
  .wsb-booking-app__stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 3vw, 48px); padding: 0; list-style: none; }
  .wsb-booking-app__step { position: relative; min-width: 0; color: var(--wsb-color-muted); }
  .wsb-booking-app__step > button { position: relative; display: grid; width: 100%; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 14px; border: 0; padding: 0 0 8px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
  .wsb-booking-app__step > button:disabled { cursor: default; }
  .wsb-booking-app__step:not(:last-child)::after { position: absolute; z-index: 0; top: 25px; right: clamp(14px, -2.2vw, -18px); width: clamp(80px, 3vw, 76px); height: 2px; background: var(--wsb-color-border-strong); content: ""; pointer-events: none; }
  .wsb-booking-app__step-marker { position: relative; z-index: 1; display: grid; width: 52px; aspect-ratio: 1; place-items: center; border: 1px solid var(--wsb-color-border); border-radius: var(--wsb-radius-full); background: linear-gradient(145deg, var(--wsb-color-surface-raised), var(--wsb-color-canvas)); color: var(--wsb-color-muted); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wsb-color-surface) 70%, transparent); }
  .wsb-booking-app__step-copy { display: grid; min-width: 0; gap: 3px; line-height: 1.22; }
  .wsb-booking-app__step-copy strong { overflow: hidden; color: currentColor; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
  .wsb-booking-app__step-copy small { overflow: hidden; color: var(--wsb-color-quiet); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .wsb-booking-app__step-marker .wsb-ui-icon { width: 24px; height: 24px; color: currentColor; }
  .wsb-booking-app__step-marker .wsb-asset-icon { --wsb-icon-size: 25px; --wsb-icon-color: currentColor; }
  .wsb-booking-app__step--active { color: var(--wsb-color-ink-strong); }
  .wsb-booking-app__step--active .wsb-booking-app__step-marker { border-color: transparent; background: linear-gradient(135deg, var(--wsb-color-brand) 4%, var(--wsb-color-interaction) 96%); color: var(--wsb-color-surface); box-shadow: 0 0 0 5px color-mix(in srgb, var(--wsb-color-brand) 10%, transparent), 0 8px 22px color-mix(in srgb, var(--wsb-color-interaction) 20%, transparent); }
  .wsb-booking-app__step--available .wsb-booking-app__step-marker { border-color: color-mix(in srgb, var(--wsb-color-interaction) 48%, var(--wsb-color-border)); background: color-mix(in srgb, var(--wsb-color-interaction) 5%, var(--wsb-color-surface)); color: var(--wsb-color-interaction); }
  .wsb-booking-app__step--complete { color: var(--wsb-color-success); }
  .wsb-booking-app__step--complete .wsb-booking-app__step-marker { border-color: color-mix(in srgb, var(--wsb-color-success) 42%, var(--wsb-color-border)); background: color-mix(in srgb, var(--wsb-color-success) 9%, var(--wsb-color-surface)); color: var(--wsb-color-success); }
  .wsb-booking-app__step--complete:not(:last-child)::after { background: color-mix(in srgb, var(--wsb-color-success) 52%, var(--wsb-color-border)); }
  .wsb-booking-app__step--locked .wsb-booking-app__step-copy { opacity: .72; }
  .wsb-booking-app__step--active > button::after, .wsb-booking-app__step--complete > button::after, .wsb-booking-app__step--available > button::after { position: absolute; right: 0; bottom: 0; left: 66px; height: 3px; border-radius: var(--wsb-radius-full); background: linear-gradient(90deg, var(--wsb-color-brand), var(--wsb-color-interaction)); content: ""; opacity: 0; transform: scaleX(0); transform-origin: left; transition: opacity var(--wsb-motion-fast) ease, transform var(--wsb-motion-medium) cubic-bezier(.2, .8, .2, 1); }
  .wsb-booking-app__step--active > button:hover::after, .wsb-booking-app__step--active > button:focus-visible::after, .wsb-booking-app__step--complete > button:hover::after, .wsb-booking-app__step--complete > button:focus-visible::after, .wsb-booking-app__step--available > button:hover::after, .wsb-booking-app__step--available > button:focus-visible::after { opacity: 1; transform: scaleX(1); }
  @media (max-width: 64rem) {
    .wsb-booking-app__stepper { gap: 12px; }
    .wsb-booking-app__step > button { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
    .wsb-booking-app__step-marker { width: 44px; }
    .wsb-booking-app__step-marker .wsb-ui-icon { width: 22px; height: 22px; }
    .wsb-booking-app__step:not(:last-child)::after { top: 21px; right: -13px; width: 26px; }
    .wsb-booking-app__step-copy strong { font-size: 13px; }
    .wsb-booking-app__step--active > button::after, .wsb-booking-app__step--complete > button::after, .wsb-booking-app__step--available > button::after { left: 54px; }
  }
  @media (max-width: 42rem) {
    .wsb-booking-app__stepper { gap: 0; }
    .wsb-booking-app__step > button { grid-template-columns: 1fr; justify-items: center; gap: 6px; text-align: center; }
    .wsb-booking-app__step-copy small { display: none; }
    .wsb-booking-app__step-copy strong { overflow: visible; font-size: 10px; text-overflow: clip; white-space: nowrap; }
    .wsb-booking-app__step-marker { width: 36px; }
    .wsb-booking-app__step-marker .wsb-ui-icon { width: 20px; height: 20px; }
    .wsb-booking-app__step-marker .wsb-asset-icon { --wsb-icon-size: 20px; }
    .wsb-booking-app__step:not(:last-child)::after { top: 18px; right: calc(-50% + 18px); width: calc(100% - 36px); }
    .wsb-booking-app__step--active > button::after, .wsb-booking-app__step--complete > button::after, .wsb-booking-app__step--available > button::after { right: 22%; left: 22%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .wsb-booking-app__step > button::after { transition-duration: 0s; }
  }
}