/* The multi-service booking flow, ported from Rekaz's own storefront. Values follow it; --bk-primary takes the
   theme's --brand. Everything is scoped under .bk so it cannot leak into the rest of the theme. */
.bk {
  --bk-primary: var(--brand, #171717);
  --bk-on-primary: #fff;
  --bk-fg: #0d0d0d;
  --bk-page: #f5f5f5;
  --bk-card: #fff;
  --bk-muted: #f2f2f2;
  --bk-muted-fg: #767676;
  --bk-accent: color-mix(in oklab, var(--bk-primary) 10%, #fff);
  --bk-border: #e5e5e5;
  --bk-input: #d3d3d3;
  --bk-danger: #d4163a;
  --bk-star: #f7b500;
  --bk-r-sm: 8px;
  --bk-r: 12px;
  --bk-r-lg: 16px;
  --bk-r-xl: 24px;
  --bk-r-2xl: 32px;
  --bk-shadow-float: 0 2px 8px rgb(19 19 19 / 0.08), 0 4px 20px rgb(19 19 19 / 0.12);
  --bk-shadow-sticky: 0 4px 2px -2px rgb(19 19 19 / 0.06);
  --bk-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --bk-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --bk-ring: 0 0 0 3px color-mix(in oklab, var(--bk-primary) 40%, transparent);
  --bk-selected: 0 0 0 1px var(--bk-primary);
  --bk-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --bk-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --bk-gutter: 20px;
  --bk-header-h: 64px;
  --bk-catbar-h: 129px;
  min-height: 100dvh;
  background: var(--bk-page);
  color: var(--bk-fg);
  font-family: var(--font-family, "IBM Plex Sans Arabic", system-ui, sans-serif);
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
.bk-body { margin: 0; background: #f5f5f5; }
.bk *, .bk *::before, .bk *::after { box-sizing: border-box; }
.bk :where(h1, h2, h3, p, ol, ul) { margin: 0; padding: 0; }
.bk :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.bk :where(button:disabled) { cursor: default; }
.bk :where(input, select) { font: inherit; color: inherit; }
.bk [hidden] { display: none !important; }
html[lang^="ar"] .bk * { letter-spacing: normal !important; }
@media (min-width: 768px) { .bk { --bk-gutter: 32px; } }

.bk-i { width: 16px; height: 16px; flex-shrink: 0; }
.bk-i--muted { color: var(--bk-muted-fg); }
[dir="rtl"] .bk-flip { transform: scaleX(-1); }
.bk-riyal { width: auto; height: 0.9em; vertical-align: -0.08em; margin-inline-start: 0.15em; }

.bk-muted { color: var(--bk-muted-fg); }
.bk-small { font-size: 13px; line-height: 16px; }
.bk-truncate { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-grow { flex: 1; min-width: 0; }
.bk-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bk-h2 { margin-block-end: 16px; font-size: 19px; line-height: 24px; font-weight: 600; }
.bk-h2--lg { margin: 0; font-size: 24px; line-height: 32px; }
.bk-lead { margin-block: 8px 28px; max-width: 576px; line-height: 24px; }
.bk-link { font-weight: 600; color: var(--bk-primary); text-underline-offset: 4px; }
.bk-link:hover { text-decoration: underline; }
.bk-note { margin-block-start: 16px; border-radius: var(--bk-r-lg); background: var(--bk-muted); padding: 12px; font-size: 13px; font-weight: 500; color: var(--bk-muted-fg); }
.bk-field-error { margin-block-start: 8px; font-size: 13px; font-weight: 500; color: var(--bk-danger); }
.bk-stack > * + * { margin-block-start: 12px; }
.bk-stack-sm > * + * { margin-block-start: 10px; }
.bk-stack-lg > * + * { margin-block-start: 32px; }
.bk-row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bk-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk-actions-row { margin-block-start: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.bk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0;
  height: 32px; padding-inline: 10px; border: 1px solid transparent; border-radius: 9999px;
  font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; user-select: none;
  transition: background-color 150ms var(--bk-ease), border-color 150ms var(--bk-ease), opacity 150ms var(--bk-ease), transform 150ms var(--bk-ease);
}
.bk-btn:active:not(:disabled) { transform: translateY(1px); }
.bk-btn:disabled { opacity: 0.5; pointer-events: none; }
.bk-btn:focus-visible, .bk-icon-btn:focus-visible, .bk-chip:focus-visible, .bk-add:focus-visible,
.bk-date:focus-visible, .bk-slot:focus-visible, .bk-select-pill:focus-visible, .bk-pill:focus-visible { outline: none; box-shadow: var(--bk-ring); }
.bk-btn--primary { background: var(--bk-primary); color: var(--bk-on-primary); }
.bk-btn--outline { border-color: var(--bk-border); background: var(--bk-card); }
.bk-btn--sm { height: 32px; padding-inline: 20px; }
.bk-btn--md { height: 44px; padding-inline: 24px; min-width: 112px; }
.bk-btn--lg { height: 48px; padding-inline: 20px; }
.bk-btn--xl { height: 52px; border-radius: var(--bk-r-xl); margin-block-start: 24px; }
.bk-btn--block { width: 100%; }
@media (hover: hover) {
  .bk-btn--primary:hover { background: color-mix(in oklab, var(--bk-primary) 85%, transparent); }
  .bk-btn--outline:hover { background: var(--bk-muted); }
}
.bk-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border: 1px solid transparent; border-radius: 9999px;
  transition: background-color 150ms var(--bk-ease);
}
.bk-icon-btn--bordered { border-color: var(--bk-border); background: var(--bk-card); }
.bk-icon-btn:disabled { opacity: 0.5; }
@media (hover: hover) { .bk-icon-btn:hover:not(:disabled) { background: var(--bk-muted); } }

.bk-header { position: sticky; top: 0; z-index: 30; background: var(--bk-page); padding: 12px 16px; transition: box-shadow 150ms var(--bk-ease); }
.bk-header[data-scrolled] { box-shadow: var(--bk-shadow-sticky); }
.bk-header__inner { max-width: 1440px; margin-inline: auto; display: flex; align-items: center; gap: 8px; }
.bk-header__title {
  flex: 1; min-width: 0; padding-inline: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 19px; line-height: 24px; font-weight: 600; opacity: 0; transition: opacity 150ms var(--bk-ease);
}
.bk-header[data-scrolled] .bk-header__title { opacity: 1; }
@media (min-width: 640px) {
  .bk-header { padding-inline: 64px; }
  .bk-header .bk-icon-btn { width: 48px; height: 48px; border-color: var(--bk-input); background: var(--bk-card); }
  .bk-header__title { padding-inline: 48px; font-size: 22px; line-height: 28px; }
}

.bk-titlebar, .bk-layout { max-width: 1248px; margin-inline: auto; padding-inline: var(--bk-gutter); }
.bk-progress { display: none; list-style: none; }
.bk-progress li { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; color: color-mix(in oklab, var(--bk-muted-fg) 65%, transparent); }
.bk-progress li[data-done], .bk-progress li[data-current] { color: var(--bk-fg); }
.bk-progress .bk-i { width: 14px; height: 14px; }
.bk-title { margin-block-start: 14px; font-size: 28px; line-height: 36px; font-weight: 600; }
@media (min-width: 640px) {
  .bk-progress { display: flex; align-items: center; gap: 8px; }
  .bk-title { font-size: 40px; line-height: 48px; font-weight: 700; }
}
@media (min-width: 1024px) {
  .bk-titlebar > div { width: calc(100% - 444px - 96px); }
}

.bk-layout { display: grid; gap: 40px; padding-block: 20px 128px; }
.bk-content { min-width: 0; }
.bk-aside { display: none; }
@media (min-width: 1024px) {
  .bk-layout { grid-template-columns: minmax(0, 1fr) 444px; gap: 96px; padding-block-end: 56px; }
  .bk-aside { display: block; margin-block-start: -64px; }
  .bk-aside__sticky { position: sticky; top: calc(var(--bk-header-h) + 40px); height: calc(100dvh - var(--bk-header-h) - 160px); min-height: 512px; }
}

.bk-summary { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid color-mix(in oklab, var(--bk-border) 80%, transparent); border-radius: var(--bk-r-xl); background: var(--bk-card); box-shadow: var(--bk-shadow-float); }
.bk-summary__business { display: flex; align-items: center; gap: 12px; border-block-end: 1px solid var(--bk-border); padding: 24px 32px; }
.bk-summary__business img { width: 64px; height: 64px; border-radius: var(--bk-r-sm); background: var(--bk-muted); object-fit: contain; }
.bk-summary__business h2 { font-size: 16px; line-height: 1.375; font-weight: 600; overflow-wrap: anywhere; }
.bk-summary__scroll { flex: 1; min-height: 0; overflow-y: auto; }
.bk-summary__when { border-block-end: 1px solid var(--bk-border); padding: 20px 32px; }
.bk-summary__when p { display: flex; align-items: center; gap: 8px; }
.bk-summary__when p + p { margin-block-start: 12px; }
.bk-summary__lines { border-block-end: 1px solid var(--bk-border); padding: 20px 32px; }
.bk-summary__lines > * + * { margin-block-start: 16px; }
.bk-summary__lines:empty { display: none; }
.bk-summary__total { display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; font-weight: 600; }
.bk-summary__action { flex-shrink: 0; border-block-start: 1px solid var(--bk-border); padding: 16px 32px; }
.bk-line { display: flex; align-items: flex-start; gap: 16px; }
.bk-line__name { font-weight: 600; line-height: 1.375; overflow-wrap: anywhere; }
.bk-line__name + p { margin-block-start: 4px; }
.bk-line__price { min-width: max-content; font-weight: 500; }

.bk-footer {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  border-block-start: 1px solid color-mix(in oklab, var(--bk-border) 70%, transparent);
  background: rgb(255 255 255 / 0.9); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  padding: 12px 16px max(16px, env(safe-area-inset-bottom));
}
.bk-footer__inner { max-width: 768px; margin-inline: auto; display: flex; align-items: center; gap: 16px; }
.bk-footer__title { font-weight: 600; }
.bk-footer__meta { margin-block-start: 2px; font-size: 13px; line-height: 16px; display: flex; flex-wrap: wrap; column-gap: 4px; }
.bk-footer__btn { min-width: 128px; }
@media (min-width: 1024px) { .bk-footer { display: none !important; } }

.bk-banner {
  position: fixed; inset-inline: 16px; bottom: 96px; z-index: 40; max-width: 768px; margin-inline: auto;
  border: 1px solid color-mix(in oklab, var(--bk-danger) 20%, transparent); border-radius: var(--bk-r-xl);
  background: var(--bk-card); padding: 12px 16px; font-weight: 500; color: var(--bk-danger); box-shadow: var(--bk-shadow-lg);
}
@media (min-width: 1024px) { .bk-banner { bottom: 32px; } }

.bk-card { border: 1px solid var(--bk-border); border-radius: var(--bk-r-xl); background: var(--bk-card); transition: border-color 150ms var(--bk-ease), box-shadow 150ms var(--bk-ease), background-color 150ms var(--bk-ease); }
.bk-card[data-selected] { border-color: var(--bk-primary); box-shadow: var(--bk-selected); }
@media (hover: hover) { .bk-card:not([data-selected]):hover { border-color: color-mix(in oklab, var(--bk-fg) 25%, transparent); } }
.bk-empty { border-radius: var(--bk-r-xl); border: 1px solid var(--bk-border); background: var(--bk-card); padding: 40px 20px; text-align: center; font-weight: 600; }
.bk-empty p + p { margin-block-start: 6px; font-weight: 400; }
.bk-skeleton { border-radius: var(--bk-r-xl); background: #e9e9e9; animation: bk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.bk-skeleton--row { height: 148px; }
.bk-skeleton--slot { height: 64px; }
@keyframes bk-pulse { 50% { opacity: 0.5; } }

.bk-catbar {
  position: sticky; top: var(--bk-header-h); z-index: 20; display: flex; flex-direction: column; justify-content: center; gap: 12px;
  height: var(--bk-catbar-h); margin-inline: calc(var(--bk-gutter) * -1); margin-block-end: 16px; padding: 16px var(--bk-gutter);
  background: var(--bk-page); transition: box-shadow 150ms var(--bk-ease);
}
.bk-catbar[data-stuck] { box-shadow: var(--bk-shadow-sticky); }
@media (min-width: 1024px) { .bk-catbar { margin-inline: -12px; padding-inline: 12px; } }
.bk-search { position: relative; }
.bk-search__icon { position: absolute; top: 50%; inset-inline-start: 16px; width: 19px; height: 19px; translate: 0 -50%; color: var(--bk-muted-fg); pointer-events: none; }
.bk-search__input {
  width: 100%; height: 48px; border: 1px solid var(--bk-input); border-radius: 9999px; background: var(--bk-card);
  padding-inline: 44px; font-size: 16px; box-shadow: var(--bk-shadow-sm); outline: none;
  transition: border-color 150ms var(--bk-ease), box-shadow 150ms var(--bk-ease);
}
.bk-search__input::-webkit-search-cancel-button { appearance: none; }
.bk-search__input:focus { border-color: var(--bk-primary); box-shadow: var(--bk-ring); }
@media (min-width: 768px) { .bk-search__input { font-size: 14px; } }
.bk-search__clear { position: absolute; top: 50%; inset-inline-end: 8px; translate: 0 -50%; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9999px; color: var(--bk-muted-fg); }
.bk-chips { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 1px; }
.bk-chips::-webkit-scrollbar { display: none; }
.bk-chip {
  flex-shrink: 0; scroll-snap-align: start; height: 36px; max-width: 232px; padding-inline: 16px; border-radius: 9999px;
  background: var(--bk-card); box-shadow: inset 0 0 0 1px rgb(19 19 19 / 0.1); font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; transition: background-color 150ms var(--bk-ease), color 150ms var(--bk-ease), transform 150ms var(--bk-ease);
}
.bk-chip:active { transform: scale(0.98); }
.bk-chip[aria-selected="true"] { background: var(--bk-primary); color: var(--bk-on-primary); box-shadow: none; }
.bk-chip:disabled { color: var(--bk-muted-fg); opacity: 0.4; }
.bk-category { scroll-margin-top: calc(var(--bk-header-h) + var(--bk-catbar-h) + 16px); }
.bk-service { padding: 16px; }
@media (min-width: 640px) { .bk-service { padding: 20px; } }
@media (min-width: 1024px) { .bk-service { padding: 24px; } }
.bk-service__open { display: flex; width: 100%; align-items: flex-start; gap: 12px; text-align: start; border-radius: var(--bk-r); }
.bk-service__image { width: 56px; height: 56px; border-radius: var(--bk-r-lg); background: var(--bk-muted); object-fit: cover; }
@media (min-width: 640px) { .bk-service__image { width: 64px; height: 64px; } }
.bk-service__name { display: block; font-size: 16px; line-height: 22px; font-weight: 500; }
.bk-service__duration { display: block; margin-block-start: 4px; }
.bk-service__description { display: -webkit-box; margin-block-start: 8px; max-width: 576px; line-height: 24px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bk-service__description:empty { display: none; }
.bk-service__foot { margin-block-start: 16px; }
.bk-add {
  display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--bk-border); border-radius: 9999px; background: var(--bk-card);
  transition: background-color 150ms var(--bk-ease), color 150ms var(--bk-ease), border-color 150ms var(--bk-ease), transform 150ms var(--bk-ease);
}
.bk-add .bk-i { width: 18px; height: 18px; grid-area: 1 / 1; }
.bk-add:active { transform: scale(0.95); }
.bk-add__check, .bk-add[aria-pressed="true"] .bk-add__plus { display: none; }
.bk-add[aria-pressed="true"] { border-color: var(--bk-primary); background: var(--bk-primary); color: var(--bk-on-primary); }
.bk-add[aria-pressed="true"] .bk-add__check { display: block; }

.bk-price { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 4px; }
.bk-price__now { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bk-price__was { font-size: 13px; color: var(--bk-muted-fg); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.bk-price__save { font-size: 13px; font-weight: 500; color: var(--bk-primary); }

.bk-option {
  position: relative; display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 16px; cursor: pointer;
  border: 1px solid var(--bk-border); border-radius: var(--bk-r-lg); background: var(--bk-card); transition: border-color 150ms var(--bk-ease), box-shadow 150ms var(--bk-ease);
}
.bk-option strong, .bk-option .bk-muted { display: block; }
.bk-option .bk-muted { margin-block-start: 4px; }
.bk-option__price { display: block; margin-block-start: 12px; }
.bk-option:has(input:checked) { border-color: var(--bk-primary); box-shadow: var(--bk-selected); }
.bk-option:has(input:focus-visible) .bk-radio { box-shadow: var(--bk-ring); }
.bk-radio { width: 20px; height: 20px; flex-shrink: 0; border: 1px solid var(--bk-border); border-radius: 9999px; padding: 4px; }
.bk-option:has(input:checked) .bk-radio { border-color: var(--bk-primary); background: radial-gradient(circle, var(--bk-primary) 5px, transparent 5.5px); }
.bk-option--place { min-height: 64px; }
.bk-badge-icon { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 9999px; background: var(--bk-accent); color: var(--bk-primary); }
.bk-badge-icon .bk-i { width: 19px; height: 19px; }
.bk-badge-icon--sm { width: 24px; height: 24px; }
.bk-badge-icon--sm .bk-i { width: 14px; height: 14px; }

.bk-pad-step { padding-block: 8px 24px; }
.bk-choice { display: flex; align-items: center; gap: 16px; min-height: 112px; padding: 16px; }
@media (min-width: 640px) { .bk-choice { min-height: 120px; padding-inline: 24px; } }
.bk-avatar { position: relative; display: grid; place-items: center; width: 80px; height: 80px; flex-shrink: 0; border-radius: 9999px; background: var(--bk-accent); color: var(--bk-primary); font-size: 22px; line-height: 28px; font-weight: 600; }
.bk-avatar img { width: 100%; height: 100%; border-radius: 9999px; object-fit: cover; grid-area: 1 / 1; }
.bk-avatar__icon { width: 28px; height: 28px; }
.bk-rating { position: absolute; bottom: -4px; inset-inline-start: 8px; display: inline-flex; align-items: center; gap: 2px; height: 24px; padding-inline: 6px; border: 1px solid var(--bk-border); border-radius: 9999px; background: var(--bk-card); color: var(--bk-fg); font-size: 13px; font-weight: 600; }
.bk-rating .bk-i { width: 12px; height: 12px; color: var(--bk-star); }
.bk-choice__title { display: block; font-size: 16px; line-height: 22px; font-weight: 500; }
.bk-choice .bk-muted { margin-block-start: 4px; }
.bk-select-pill {
  display: inline-flex; align-items: center; justify-content: center; height: 36px; flex-shrink: 0; padding-inline: 16px;
  border: 1px solid var(--bk-border); border-radius: 9999px; background: var(--bk-card); font-weight: 500; box-shadow: var(--bk-shadow-sm);
  transition: background-color 150ms var(--bk-ease), color 150ms var(--bk-ease), border-color 150ms var(--bk-ease);
}
.bk-select-pill__check { display: none; width: 20px; height: 20px; }
.bk-select-pill[aria-pressed="true"] { padding-inline: 8px; border-color: var(--bk-primary); background: var(--bk-primary); color: var(--bk-on-primary); }
.bk-select-pill[aria-pressed="true"] .bk-select-pill__text { display: none; }
.bk-select-pill[aria-pressed="true"] .bk-select-pill__check { display: block; }
.bk-per-service { display: flex; flex-direction: column; align-items: flex-start; padding: 16px; }
@media (min-width: 640px) { .bk-per-service { padding: 20px 24px; } }
.bk-per-service .bk-muted { margin-block-start: 4px; }
.bk-staff-btn { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 36px; margin-block-start: 12px; padding-inline: 6px 12px; border: 1px solid var(--bk-border); border-radius: 9999px; background: var(--bk-card); font-size: 13px; font-weight: 500; }

.bk-time { padding-block: 12px 24px; }
.bk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 16px; }
.bk-pill { display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 40px; padding-inline: 14px; border: 1px solid var(--bk-border); border-radius: 9999px; background: var(--bk-card); font-weight: 500; transition: border-color 150ms var(--bk-ease); }
.bk-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-pill:disabled { opacity: 0.6; }
@media (min-width: 640px) { .bk-pill, .bk-time .bk-icon-btn { height: 44px; } .bk-time .bk-icon-btn { width: 44px; } }
.bk-calendar { position: relative; cursor: pointer; overflow: hidden; }
.bk-calendar input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bk-location-card { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin-block-end: 32px; padding: 12px 16px; border: 1px solid var(--bk-border); border-radius: var(--bk-r-lg); background: var(--bk-card); text-align: start; }
.bk-location-card strong { display: block; }
.bk-state { border-radius: var(--bk-r-xl); background: var(--bk-card); padding: 48px 24px; text-align: center; }
@media (min-width: 640px) { .bk-state { padding: 64px 40px; } }
.bk-state__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-inline: auto; border-radius: 9999px; background: var(--bk-accent); color: var(--bk-primary); }
.bk-state__icon .bk-i { width: 24px; height: 24px; }
.bk-state--error .bk-state__icon { background: color-mix(in oklab, var(--bk-danger) 10%, transparent); color: var(--bk-danger); }
.bk-state h2 { margin-block-start: 20px; font-size: 19px; line-height: 24px; font-weight: 600; }
.bk-state p { margin: 8px auto 0; max-width: 448px; line-height: 24px; color: var(--bk-muted-fg); }
.bk-state > .bk-btn { margin-block-start: 24px; height: 44px; padding-inline: 24px; }
.bk-dates { display: flex; align-items: center; gap: 8px; }
.bk-dates__row { display: flex; flex: 1; min-width: 0; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block-end: 4px; }
.bk-dates__row::-webkit-scrollbar { display: none; }
.bk-date {
  display: flex; flex-direction: column; align-items: center; flex: 0 0 66px; min-height: 96px; padding: 16px 8px;
  border: 1px solid var(--bk-border); border-radius: var(--bk-r-lg); background: var(--bk-card); text-align: center;
  transition: background-color 150ms var(--bk-ease), color 150ms var(--bk-ease), border-color 150ms var(--bk-ease);
}
@media (min-width: 640px) { .bk-date { flex: 1 1 0; min-width: 0; } }
.bk-date[aria-pressed="true"] { border-color: var(--bk-primary); background: var(--bk-primary); color: var(--bk-on-primary); box-shadow: var(--bk-shadow-sm); }
.bk-date:disabled { opacity: 0.35; }
.bk-date__weekday { font-size: 13px; font-weight: 500; opacity: 0.75; }
.bk-date__day { margin-block-start: 4px; font-size: 19px; line-height: 24px; font-weight: 600; }
.bk-date__month { font-size: 11px; line-height: 16px; opacity: 0.7; }
.bk-times { margin-block-start: 28px; }
.bk-slot {
  display: flex; align-items: center; width: 100%; min-height: 64px; padding: 12px 20px; border: 1px solid var(--bk-border);
  border-radius: var(--bk-r-xl); background: var(--bk-card); text-align: start; font-weight: 600;
  transition: border-color 150ms var(--bk-ease), box-shadow 150ms var(--bk-ease);
}
.bk-slot[aria-pressed="true"] { border-color: var(--bk-primary); box-shadow: var(--bk-selected); }
@media (hover: hover) { .bk-slot:not([aria-pressed="true"]):hover, .bk-pill:not(:disabled):hover { border-color: color-mix(in oklab, var(--bk-fg) 30%, transparent); } }
.bk-error-box { border: 1px solid color-mix(in oklab, var(--bk-danger) 25%, transparent); border-radius: var(--bk-r-lg); background: var(--bk-card); padding: 24px; text-align: center; font-weight: 500; color: var(--bk-danger); }
.bk-error-box .bk-btn { margin-block-start: 16px; color: var(--bk-fg); }

.bk-details { max-width: 768px; padding-block: 28px 40px; }
.bk-field-group { border: 1px solid var(--bk-border); border-radius: var(--bk-r-xl); background: var(--bk-card); padding: 20px; }
@media (min-width: 640px) { .bk-field-group { padding: 24px; } }
.bk-field-group h3 { margin-block-end: 20px; font-size: 16px; font-weight: 600; }
.bk-field + .bk-field { margin-block-start: 20px; }
.bk-label { display: block; margin-block-end: 8px; font-weight: 600; }
.bk-label__required { margin-inline-start: 4px; color: var(--bk-danger); }
.bk-input, .bk-select {
  width: 100%; height: 48px; border: 1px solid var(--bk-input); border-radius: var(--bk-r-lg); background: var(--bk-card);
  padding-inline: 14px; font-size: 16px; outline: none; transition: border-color 150ms var(--bk-ease), box-shadow 150ms var(--bk-ease);
}
.bk-input:focus, .bk-select:focus { border-color: var(--bk-primary); box-shadow: var(--bk-ring); }
.bk-field[data-invalid] :is(.bk-input, .bk-select) { border-color: var(--bk-danger); }
@media (min-width: 768px) { .bk-input, .bk-select { font-size: 14px; } }
.bk-choices { display: grid; gap: 8px; }
@media (min-width: 640px) { .bk-choices { grid-template-columns: 1fr 1fr; } }
.bk-choices label { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 12px 14px; border: 1px solid var(--bk-border); border-radius: var(--bk-r-lg); background: var(--bk-card); cursor: pointer; font-weight: 500; }
.bk-choices--multi label { justify-content: flex-start; font-weight: 400; }
.bk-choices label:has(input:checked) { border-color: var(--bk-primary); background: color-mix(in oklab, var(--bk-accent) 60%, transparent); box-shadow: var(--bk-selected); }

.bk-addon-grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .bk-addon-grid { grid-template-columns: 1fr 1fr; } }
.bk-addons-service h3 { margin-block-end: 12px; font-weight: 600; }
.bk-addon { position: relative; display: flex; gap: 16px; padding: 16px; border: 1px solid var(--bk-border); border-radius: var(--bk-r-lg); background: var(--bk-card); cursor: pointer; transition: border-color 150ms var(--bk-ease), box-shadow 150ms var(--bk-ease), background-color 150ms var(--bk-ease); }
.bk-addon:has(input:checked) { border-color: var(--bk-primary); background: color-mix(in oklab, var(--bk-accent) 60%, transparent); box-shadow: var(--bk-selected); }
.bk-addon .bk-small { display: block; margin-block-start: 6px; line-height: 20px; }
.bk-addon__amount { display: block; margin-block-start: 12px; }
.bk-addon__check { width: 20px; height: 20px; color: color-mix(in oklab, var(--bk-muted-fg) 35%, transparent); }
.bk-addon:has(input:checked) .bk-addon__check { color: var(--bk-primary); }
.bk-addon__image { width: 80px; height: 80px; flex-shrink: 0; border-radius: var(--bk-r-lg); object-fit: cover; }

/* sign-in; the phone field is assets/phone.js, coloured by the theme */
.bk { --rk-phone-ring: var(--bk-primary); --rk-phone-border: var(--bk-input); }
.bk-auth__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-block-end: 20px; border-radius: var(--bk-r-xl); background: var(--bk-accent); color: var(--bk-primary); }
.bk-auth__icon .bk-i { width: 24px; height: 24px; }
.bk-otp { display: block; width: 100%; height: 56px; border: 1px solid var(--bk-input); border-radius: var(--bk-r-xl); text-align: center; font-size: 22px; font-weight: 600; letter-spacing: 0.6em; outline: none; }
.bk-otp:focus { border-color: var(--bk-primary); box-shadow: var(--bk-ring); }
.bk-resend { margin-block-start: 12px; text-align: center; }
.bk-cart-list { list-style: none; }
.bk-cart-list li { padding-block: 10px; border-block-end: 1px solid var(--bk-border); font-weight: 500; }
.bk-cart-list li:last-child { border: 0; }

.bk-map { margin-block-start: 16px; }
.bk-map__picker { height: 320px; overflow: hidden; border-radius: var(--bk-r-lg); background: var(--bk-muted); }
.bk-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-block-start: 12px; }
.bk-types label { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--bk-border); border-radius: var(--bk-r-lg); background: var(--bk-card); cursor: pointer; font-weight: 500; }
.bk-types input { position: absolute; opacity: 0; }
.bk-types label:has(input:checked) { border-color: var(--bk-primary); background: color-mix(in oklab, var(--bk-primary) 8%, transparent); }
[data-bk-add-place] { margin-block-start: 12px; }

.bk-dialog {
  position: fixed; inset: auto 0 0; width: 100%; max-width: 100%; max-height: calc(100dvh - 24px); margin: 0;
  display: none; flex-direction: column; padding: 0; border: 1px solid var(--bk-border); border-block-end: 0;
  border-radius: var(--bk-r-2xl) var(--bk-r-2xl) 0 0; background: var(--bk-card); color: var(--bk-fg); box-shadow: var(--bk-shadow-lg);
  transition: translate 500ms var(--bk-ease-drawer), opacity 150ms var(--bk-ease), overlay 500ms allow-discrete, display 500ms allow-discrete;
}
.bk-dialog[open] { display: flex; }
@starting-style { .bk-dialog[open] { translate: 0 100%; } }
.bk-dialog::backdrop { background: rgb(0 0 0 / 0.2); }
@media (min-width: 768px) {
  .bk-dialog { inset: 0; margin: auto; width: calc(100% - 48px); max-width: 720px; max-height: calc(100dvh - 48px); border-block-end: 1px solid var(--bk-border); border-radius: var(--bk-r-2xl); box-shadow: var(--bk-shadow-float); transition: opacity 150ms var(--bk-ease), scale 150ms var(--bk-ease), overlay 150ms allow-discrete, display 150ms allow-discrete; }
  @starting-style { .bk-dialog[open] { opacity: 0; scale: 0.95; translate: none; } }
  .bk-dialog--compact { max-width: 480px; }
  .bk-dialog--wide { max-width: 896px; }
}
@media (prefers-reduced-motion: reduce) { .bk-dialog, .bk-dialog * { transition-duration: 0.01ms !important; } .bk-skeleton { animation: none; } }
.bk-dialog--muted { background: var(--bk-page); }
.bk-dialog__close { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--bk-r-sm); }
@media (hover: hover) { .bk-dialog__close:hover { background: var(--bk-muted); } }
.bk-dialog__header { padding: 32px 20px 20px; }
.bk-dialog__header h2 { padding-inline-end: 32px; font-size: 24px; line-height: 1.25; font-weight: 600; }
.bk-dialog__header p { margin-block-start: 12px; line-height: 24px; }
.bk-dialog__header--tall { padding-block: 56px 32px; }
.bk-dialog__header--bordered { border-block-end: 1px solid var(--bk-border); }
.bk-dialog__header--center { padding-block-start: 40px; text-align: center; }
.bk-dialog__header--center h2 { padding-inline-end: 0; }
.bk-dialog__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 20px; }
.bk-dialog__body > section + section, .bk-dialog__body > section + div { margin-block-start: 24px; }
.bk-dialog__header--bordered + .bk-dialog__body { padding-block-start: 20px; }
.bk-dialog__close:focus-visible { outline: none; box-shadow: var(--bk-ring); }
.bk-dialog__body h3 { margin-block-end: 12px; font-size: 16px; font-weight: 600; }
.bk-dialog__footer { display: flex; align-items: center; gap: 16px; margin-block-start: auto; border-block-start: 1px solid var(--bk-border); padding: 16px 20px max(16px, env(safe-area-inset-bottom)); }
.bk-dialog__footer--stack { flex-direction: column; align-items: stretch; gap: 8px; }
@media (min-width: 640px) {
  .bk-dialog__header { padding: 48px 48px 28px; }
  .bk-dialog__header--tall { padding: 64px 40px 32px; }
  .bk-dialog__body { padding-inline: 48px; }
  .bk-dialog__footer { padding-inline: 48px; }
  .bk-dialog--compact .bk-dialog__header, .bk-dialog--compact .bk-dialog__body, .bk-dialog--compact .bk-dialog__footer { padding-inline: 28px; }
}
.bk-divided > * { padding-block: 12px; border-block-end: 1px solid var(--bk-border); }
.bk-divided > :last-child { border: 0; }
.bk-stepper { display: flex; align-items: center; height: 44px; padding: 4px; border: 1px solid var(--bk-border); border-radius: 9999px; background: var(--bk-card); }
.bk-stepper button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9999px; }
.bk-stepper button:disabled { opacity: 0.35; }
.bk-stepper span { width: 32px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

/* sheet heights and the page behind them (the skill's reference/sheets.md) */
html:has(.bk-dialog[open]) { overflow: hidden; }
.bk-dialog__header, .bk-dialog__footer { flex-shrink: 0; }
.bk-dialog[data-bk-dialog="location"] { height: calc(100vh - 24px); height: calc(100dvh - 24px); }
.bk-dialog[data-bk-dialog="staff"] { height: calc(100vh - 16px); height: calc(100dvh - 16px); }
.bk-dialog[data-bk-dialog="auth"] { max-height: min(92dvh, 100svh); }
.bk-dialog__body:last-child { padding-block-end: max(20px, env(safe-area-inset-bottom)); }
@media (min-width: 768px) {
  .bk-dialog[data-bk-dialog="location"], .bk-dialog[data-bk-dialog="staff"] { height: min(48rem, calc(100dvh - 48px)); }
  .bk-dialog[data-bk-dialog="auth"] { max-height: calc(100dvh - 48px); }
}

/* short screens (a laptop window, a phone on its side): the dialog scrolls as one, the footer stays pinned,
   so the content never shrinks to a sliver between a tall header and the buttons */
@media (max-height: 760px) {
  .bk-dialog { overflow-y: auto; overscroll-behavior: contain; }
  .bk-dialog > .bk-dialog__body { flex: none; min-height: auto; overflow: visible; }
  .bk-dialog__footer { position: sticky; bottom: 0; z-index: 1; background: inherit; }
  .bk-dialog__header, .bk-dialog__header--tall, .bk-dialog__header--center { padding-block: 28px 14px; }
  .bk-dialog__header p { margin-block-start: 6px; }
  .bk-auth__icon { width: 40px; height: 40px; margin-block-end: 12px; }
  .bk-dialog[data-bk-dialog="location"], .bk-dialog[data-bk-dialog="staff"] { height: auto; max-height: calc(100dvh - 16px); }
}
@media (max-height: 760px) and (min-width: 768px) {
  .bk-dialog { max-height: calc(100dvh - 24px); }
  .bk-dialog__header, .bk-dialog__header--tall, .bk-dialog__header--center { padding: 32px 40px 16px; }
  .bk-dialog__body, .bk-dialog__footer { padding-inline: 40px; }
}
@media (max-height: 520px) { .bk-auth__icon { display: none; } }
/* a short laptop window: the summary card fits the window and scrolls inside, so its button stays reachable */
@media (min-width: 1024px) and (max-height: 760px) {
  .bk-aside__sticky { top: calc(var(--bk-header-h) + 16px); height: calc(100dvh - var(--bk-header-h) - 32px); min-height: 0; }
}