/* Bookin' Cloud components. Classes start with bc-. Colors come from tokens.css. */

/* Buttons */
.bc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--bc-space-8); min-height: 40px; padding: 0 var(--bc-space-16); border: 1px solid transparent; border-radius: var(--bc-radius-button); background: none; font: inherit; font-size: 15px; font-weight: 600; line-height: 20px; text-decoration: none; white-space: nowrap; cursor: pointer; }
.bc-btn .bc-icon { width: 16px; height: 16px; }
.bc-btn--primary { background: var(--bc-accent-600); color: var(--bc-white); }
.bc-btn--primary:hover { background: var(--bc-accent-700); color: var(--bc-white); }
.bc-btn--secondary { border-color: var(--bc-line-strong); background: var(--bc-surface); color: var(--bc-ink); box-shadow: var(--bc-shadow-1); }
.bc-btn--secondary:hover { background: var(--bc-sunken); color: var(--bc-ink); }
.bc-btn--ghost { color: var(--bc-accent-700); }
.bc-btn--ghost:hover { background: var(--bc-accent-50); color: var(--bc-accent-800); }
.bc-btn--danger { background: var(--bc-danger-solid); color: var(--bc-white); }
.bc-btn--danger:hover { background: var(--bc-status-no-show-fg); color: var(--bc-white); }
.bc-btn--danger-ghost { color: var(--bc-status-no-show-fg); }
.bc-btn--danger-ghost:hover { background: var(--bc-status-no-show-bg); color: var(--bc-status-no-show-fg); }
.bc-btn--sm { min-height: 32px; padding: 0 var(--bc-space-12); border-radius: var(--bc-radius-control); font-size: 13px; }
.bc-btn--block { display: flex; width: 100%; }
.bc-btn:disabled, .bc-btn[aria-disabled="true"] { border-color: var(--bc-line); background: var(--bc-sunken); color: var(--bc-placeholder); box-shadow: none; cursor: not-allowed; }
@media (max-width: 767px) {
  .bc-btn { min-height: 44px; }
  .bc-btn--sm { position: relative; min-height: 32px; }
  .bc-btn--sm::after { content: ""; position: absolute; inset: -6px 0; }
}

/* Fields */
.bc-field { display: grid; gap: var(--bc-space-8); }
.bc-label { display: flex; justify-content: space-between; gap: var(--bc-space-8); color: var(--bc-ink-2); font-size: 14px; line-height: 20px; font-weight: 600; }
.bc-hint { color: var(--bc-muted); font-size: 13px; line-height: 18px; }
.bc-input, .bc-select, .bc-textarea { width: 100%; min-height: 40px; padding: var(--bc-space-8) var(--bc-space-12); border: 1px solid var(--bc-control); border-radius: var(--bc-radius-control); background: var(--bc-surface); color: var(--bc-ink); font: inherit; font-size: 15px; line-height: 22px; }
.bc-textarea { min-height: 96px; resize: vertical; }
.bc-input::placeholder, .bc-textarea::placeholder { color: var(--bc-placeholder); }
.bc-input:focus, .bc-select:focus, .bc-textarea:focus { outline: none; border-color: var(--bc-accent-600); box-shadow: var(--bc-shadow-focus-glow); }
.bc-field--error .bc-input, .bc-field--error .bc-select, .bc-field--error .bc-textarea { border-color: var(--bc-danger-solid); box-shadow: var(--bc-shadow-error-glow); }
.bc-input:disabled, .bc-select:disabled, .bc-textarea:disabled { background: var(--bc-sunken); color: var(--bc-placeholder); }
.bc-error { display: flex; align-items: flex-start; gap: var(--bc-space-8); color: var(--bc-status-no-show-fg); font-size: 13px; line-height: 18px; font-weight: 500; }
.bc-error .bc-icon { width: 16px; height: 16px; margin-top: 1px; }
@media (max-width: 767px) {
  .bc-input, .bc-select, .bc-textarea { min-height: 44px; font-size: 16px; }
}

/* Checkbox and radio */
.bc-check { display: inline-flex; align-items: center; gap: var(--bc-space-8); color: var(--bc-ink-2); font-size: 15px; cursor: pointer; }
.bc-check input { appearance: none; display: inline-grid; flex: none; place-content: center; width: 18px; height: 18px; margin: 0; border: 1px solid var(--bc-control); background: var(--bc-surface); cursor: pointer; }
.bc-check input[type="checkbox"] { border-radius: var(--bc-radius-xs); }
.bc-check input[type="radio"] { border-radius: 50%; }
.bc-check input:checked { border-color: var(--bc-accent-600); background: var(--bc-accent-600); }
.bc-check input[type="checkbox"]:checked::before { content: ""; width: 10px; height: 6px; margin-top: -2px; border: 2px solid var(--bc-white); border-top: 0; border-right: 0; transform: rotate(-45deg); }
.bc-check input[type="radio"]:checked::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bc-white); }

/* Toggle (a checkbox with role="switch") */
.bc-toggle { display: inline-flex; align-items: center; gap: var(--bc-space-8); color: var(--bc-ink-2); font-size: 15px; cursor: pointer; }
.bc-toggle input { appearance: none; position: relative; flex: none; width: 36px; height: 20px; margin: 0; border: 0; border-radius: var(--bc-radius-pill); background: var(--bc-control); cursor: pointer; transition: background-color 0.15s; }
.bc-toggle input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--bc-white); box-shadow: var(--bc-shadow-1); transition: transform 0.15s; }
.bc-toggle input:checked { background: var(--bc-accent-600); }
.bc-toggle input:checked::before { transform: translateX(16px); }

/* Cards */
.bc-card { border: 1px solid var(--bc-line); border-radius: var(--bc-radius-card); background: var(--bc-surface); box-shadow: var(--bc-shadow-1); }
.bc-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--bc-space-12); padding: var(--bc-space-12) var(--bc-space-16); border-bottom: 1px solid var(--bc-line); }
.bc-card__title { color: var(--bc-ink); font-size: 15px; line-height: 22px; font-weight: 600; }
.bc-card__body { padding: var(--bc-space-16); }
.bc-card__footer { display: flex; justify-content: flex-end; gap: var(--bc-space-8); padding: var(--bc-space-12) var(--bc-space-16); border-top: 1px solid var(--bc-line); border-radius: 0 0 var(--bc-radius-card) var(--bc-radius-card); background: var(--bc-sunken); }

/* Status pill and count badge */
.bc-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: var(--bc-radius-pill); background: var(--pill-bg); color: var(--pill-fg); box-shadow: inset 0 0 0 1px var(--pill-ring); font-size: 12px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.bc-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pill-dot); }
.bc-pill--pending { --pill-fg: var(--bc-status-pending-fg); --pill-bg: var(--bc-status-pending-bg); --pill-ring: var(--bc-status-pending-ring); --pill-dot: var(--bc-status-pending-dot); }
.bc-pill--confirmed { --pill-fg: var(--bc-status-confirmed-fg); --pill-bg: var(--bc-status-confirmed-bg); --pill-ring: var(--bc-status-confirmed-ring); --pill-dot: var(--bc-status-confirmed-dot); }
.bc-pill--in-progress { --pill-fg: var(--bc-status-in-progress-fg); --pill-bg: var(--bc-status-in-progress-bg); --pill-ring: var(--bc-status-in-progress-ring); --pill-dot: var(--bc-status-in-progress-dot); }
.bc-pill--completed { --pill-fg: var(--bc-status-completed-fg); --pill-bg: var(--bc-status-completed-bg); --pill-ring: var(--bc-status-completed-ring); --pill-dot: var(--bc-status-completed-dot); }
.bc-pill--no-show { --pill-fg: var(--bc-status-no-show-fg); --pill-bg: var(--bc-status-no-show-bg); --pill-ring: var(--bc-status-no-show-ring); --pill-dot: var(--bc-status-no-show-dot); }
.bc-pill--cancelled { --pill-fg: var(--bc-status-cancelled-fg); --pill-bg: var(--bc-status-cancelled-bg); --pill-ring: var(--bc-status-cancelled-ring); --pill-dot: var(--bc-status-cancelled-dot); }
.bc-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--bc-radius-pill); background: var(--bc-accent-600); color: var(--bc-white); font-size: 11.5px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Alerts */
.bc-messages { display: grid; gap: var(--bc-space-8); }
.bc-alert { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: start; gap: var(--bc-space-12); padding: var(--bc-space-12) 14px; border-radius: var(--bc-radius-button); background: var(--alert-bg); color: var(--bc-ink-2); box-shadow: inset 0 0 0 1px var(--alert-ring); font-size: 14px; line-height: 20px; }
.bc-alert > .bc-icon { width: 20px; height: 20px; color: var(--alert-fg); }
.bc-alert__title { display: block; color: var(--bc-ink); font-weight: 600; }
.bc-alert__action { color: var(--alert-fg); font-weight: 600; text-decoration: none; white-space: nowrap; }
.bc-alert__dismiss { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -4px -6px -4px 0; padding: 0; border: 0; border-radius: var(--bc-radius-xs); background: none; color: var(--bc-muted); cursor: pointer; }
.bc-alert--info { --alert-fg: var(--bc-accent-700); --alert-bg: var(--bc-accent-50); --alert-ring: var(--bc-accent-200); }
.bc-alert--success { --alert-fg: var(--bc-status-confirmed-fg); --alert-bg: var(--bc-status-confirmed-bg); --alert-ring: var(--bc-status-confirmed-ring); }
.bc-alert--warning { --alert-fg: var(--bc-status-pending-fg); --alert-bg: var(--bc-status-pending-bg); --alert-ring: var(--bc-status-pending-ring); }
.bc-alert--danger { --alert-fg: var(--bc-status-no-show-fg); --alert-bg: var(--bc-status-no-show-bg); --alert-ring: var(--bc-status-no-show-ring); }

/* Tabs */
.bc-tabs { display: flex; gap: var(--bc-space-4); overflow-x: auto; border-bottom: 1px solid var(--bc-line); }
.bc-tab { display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1px; padding: var(--bc-space-8) var(--bc-space-12) 10px; border-bottom: 2px solid transparent; color: var(--bc-muted); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.bc-tab:hover { color: var(--bc-ink); }
.bc-tab[aria-current="page"] { border-bottom-color: var(--bc-accent-600); color: var(--bc-ink); }
.bc-tab__count { padding: 0 7px; border-radius: var(--bc-radius-pill); background: var(--bc-sunken); color: var(--bc-ink-2); font-size: 12px; line-height: 18px; }
.bc-tab[aria-current="page"] .bc-tab__count { background: var(--bc-accent-50); color: var(--bc-accent-800); }

/* Booking stepper */
.bc-stepper { display: grid; gap: var(--bc-space-8); }
.bc-stepper__steps { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: var(--bc-space-8); margin: 0; padding: 0; list-style: none; }
.bc-stepper__step { display: grid; gap: 6px; color: var(--bc-muted); font-size: 12px; line-height: 16px; font-weight: 600; }
.bc-stepper__step::before { content: ""; height: 4px; border-radius: var(--bc-radius-pill); background: var(--bc-line); }
.bc-stepper__step--done { color: var(--bc-ink-2); }
.bc-stepper__step--done::before { background: var(--bc-accent-600); }
.bc-stepper__step--current { color: var(--bc-accent-700); }
.bc-stepper__step--current::before { background: linear-gradient(90deg, var(--bc-accent-600) 50%, var(--bc-accent-200) 50%); }
.bc-stepper__summary { display: none; color: var(--bc-muted); font-size: 13px; font-weight: 600; }
.bc-stepper__summary strong { color: var(--bc-ink-2); }
@media (max-width: 767px) {
  .bc-stepper__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bc-stepper__summary { display: block; }
}

/* Empty state */
.bc-empty { display: grid; justify-items: center; gap: var(--bc-space-8); padding: var(--bc-space-32) var(--bc-space-24); border: 1px dashed var(--bc-line-strong); border-radius: var(--bc-radius-card); background: var(--bc-surface); text-align: center; }
.bc-empty__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--bc-radius-button); background: var(--bc-accent-50); color: var(--bc-accent-600); }
.bc-empty__icon .bc-icon { width: 22px; height: 22px; }
.bc-empty__title { color: var(--bc-ink); font-size: 16px; font-weight: 600; }
.bc-empty__text { max-width: 36ch; color: var(--bc-muted); font-size: 14px; line-height: 20px; }

/* Table, stacked into cards on phones */
.bc-table-wrap { overflow-x: auto; border: 1px solid var(--bc-line); border-radius: var(--bc-radius-card); background: var(--bc-surface); }
.bc-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.bc-table th { padding: var(--bc-space-8) var(--bc-space-12); border-bottom: 1px solid var(--bc-line); background: var(--bc-sunken); color: var(--bc-muted); font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }
.bc-table td { padding: var(--bc-space-12); border-bottom: 1px solid var(--bc-line); color: var(--bc-ink-2); vertical-align: middle; }
.bc-table tr:last-child td { border-bottom: 0; }
.bc-table .bc-num { color: var(--bc-ink); font-weight: 600; text-align: right; }
@media (max-width: 767px) {
  .bc-table--stack thead { display: none; }
  .bc-table--stack tr { display: grid; gap: var(--bc-space-4); padding: var(--bc-space-12); border-bottom: 1px solid var(--bc-line); }
  .bc-table--stack tr:last-child { border-bottom: 0; }
  .bc-table--stack td { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 var(--bc-space-8); padding: 0; border: 0; }
  .bc-table--stack td::before { content: attr(data-label); color: var(--bc-muted); font-size: 12px; font-weight: 600; }
  .bc-table--stack td > * { grid-column: 2; justify-self: start; }
  .bc-table--stack td > br { display: none; }
  .bc-table--stack .bc-num { text-align: left; }
}

/* Description list: label and value rows. The icon sits inside the <dt> so the list stays valid HTML. */
.bc-dl { display: grid; }
.bc-dl__row { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: start; gap: var(--bc-space-12); padding: var(--bc-space-12) var(--bc-space-16); border-bottom: 1px solid var(--bc-line); }
.bc-dl__row:last-child { border-bottom: 0; }
.bc-dl dt { display: flex; align-items: center; gap: 10px; color: var(--bc-muted); font-size: 14px; line-height: 20px; }
.bc-dl dt .bc-icon { color: var(--bc-muted); }
.bc-dl dd { display: grid; color: var(--bc-ink-2); font-size: 14px; line-height: 20px; }
.bc-dl dd strong { color: var(--bc-ink); font-weight: 600; }
@media (max-width: 767px) {
  .bc-dl__row { grid-template-columns: minmax(0, 1fr); gap: var(--bc-space-4); }
  .bc-dl dd { padding-left: 28px; }
}

/* Menus (details/summary) */
.bc-menu { position: relative; }
.bc-menu > summary { list-style: none; cursor: pointer; }
.bc-menu > summary::-webkit-details-marker { display: none; }
.bc-menu__panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: grid; min-width: 220px; padding: 6px; border: 1px solid var(--bc-line); border-radius: var(--bc-radius-button); background: var(--bc-surface); box-shadow: var(--bc-shadow-2); }
.bc-menu--end .bc-menu__panel { right: 0; left: auto; }
.bc-menu--up .bc-menu__panel { top: auto; bottom: calc(100% + 6px); }
.bc-menu__panel form { margin: 0; }
.bc-menu__item { display: flex; align-items: center; gap: var(--bc-space-8); width: 100%; padding: var(--bc-space-8) 10px; border: 0; border-radius: var(--bc-radius-control); background: none; color: var(--bc-ink); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; }
.bc-menu__item:hover { background: var(--bc-sunken); color: var(--bc-ink); }
.bc-menu__item .bc-icon { color: var(--bc-muted); }
.bc-menu__item small { display: block; color: var(--bc-muted); font-size: 12.5px; }

/* Sheets and dialogs (popover elements) */
.bc-sheet, .bc-dialog { margin: 0; padding: 0; border: 0; background: var(--bc-surface); color: var(--bc-ink-2); }
.bc-sheet::backdrop, .bc-dialog::backdrop { background: var(--bc-scrim); }
.bc-sheet { inset: auto 0 0 0; width: 100%; max-width: none; max-height: 85vh; overflow: auto; padding: var(--bc-space-8) var(--bc-space-12) calc(var(--bc-space-24) + env(safe-area-inset-bottom, 0px)); border-radius: var(--bc-radius-dialog) var(--bc-radius-dialog) 0 0; box-shadow: var(--bc-shadow-3); }
.bc-sheet--full { inset: 0; height: 100%; max-height: none; padding-top: calc(var(--bc-space-12) + env(safe-area-inset-top, 0px)); border-radius: 0; }
.bc-sheet--full > .bc-page-header { margin-bottom: var(--bc-space-8); }
.bc-sheet__handle { width: 36px; height: 4px; margin: var(--bc-space-4) auto var(--bc-space-12); border-radius: var(--bc-radius-pill); background: var(--bc-line-strong); }
.bc-sheet__title { margin: 0 6px var(--bc-space-8); color: var(--bc-ink); font-size: 17px; line-height: 24px; font-weight: 650; }
.bc-dialog { inset: 0; width: min(440px, calc(100% - 32px)); height: fit-content; margin: auto; padding: var(--bc-space-24); border-radius: var(--bc-radius-dialog); box-shadow: var(--bc-shadow-3); }
.bc-dialog__title { margin-bottom: var(--bc-space-8); }
.bc-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--bc-space-8); margin-top: var(--bc-space-20); }
.bc-dialog__actions form { margin: 0; }
/* Browsers without the Popover API (Safari 16 and older): ds.js opens sheets and dialogs with .is-open. */
@supports not selector(:popover-open) {
  [popover]:not(.is-open) { display: none; }
  [popover].is-open { position: fixed; z-index: 60; box-shadow: 0 0 0 100vmax var(--bc-scrim), var(--bc-shadow-3); }
}
.bc-action { display: grid; grid-template-columns: 40px minmax(0, 1fr) 16px; align-items: center; gap: var(--bc-space-12); padding: 10px 6px; border-radius: var(--bc-radius-button); color: var(--bc-ink); text-decoration: none; }
.bc-action:hover { background: var(--bc-sunken); }
.bc-action__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--bc-radius-button); background: var(--bc-accent-50); color: var(--bc-accent-600); }
.bc-action__text strong { display: block; font-size: 15px; font-weight: 600; }
.bc-action__text small { color: var(--bc-muted); font-size: 12.5px; }
.bc-action > .bc-icon { width: 16px; height: 16px; color: var(--bc-control); }

/* Avatar and business tile */
.bc-avatar { display: inline-grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bc-accent-100); color: var(--bc-accent-800); font-size: 12px; font-weight: 700; }
.bc-tile { display: inline-grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: var(--bc-radius-control); background: var(--bc-accent-50); color: var(--bc-accent-700); box-shadow: inset 0 0 0 1px var(--bc-accent-200); font-size: 13px; font-weight: 700; object-fit: contain; }
.bc-tile--lg { width: 48px; height: 48px; border-radius: var(--bc-radius-button); font-size: 16px; }
img.bc-tile { padding: 2px; background: var(--bc-surface); box-shadow: inset 0 0 0 1px var(--bc-line); }

/* Page header, action rows and fine print */
.bc-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--bc-space-16); }
.bc-page-header__text { display: grid; justify-items: start; gap: var(--bc-space-4); min-width: 0; }
.bc-page-header__actions { display: flex; flex-wrap: wrap; gap: var(--bc-space-8); }
.bc-back { display: inline-flex; align-items: center; gap: var(--bc-space-4); color: var(--bc-accent-700); font-size: 14px; font-weight: 600; text-decoration: none; }
.bc-back .bc-icon { width: 16px; height: 16px; }
.bc-actions { display: grid; gap: var(--bc-space-8); }
.bc-actions form { margin: 0; }
.bc-fine { color: var(--bc-muted); font-size: 13.5px; line-height: 20px; }

/* Preview tag */

/* Customer pages (sub-project 2) */

/* Sizes */
.bc-tile--xl { width: 64px; height: 64px; border-radius: var(--bc-radius-card); font-size: 20px; }
.bc-avatar--md { width: 40px; height: 40px; font-size: 14px; }
.bc-avatar--lg { width: 56px; height: 56px; font-size: 17px; }
.bc-avatar--xl { width: 72px; height: 72px; font-size: 22px; }
img.bc-avatar { object-fit: cover; background: var(--bc-sunken); }

/* Business introduction, contact buttons and ratings */
.bc-biz { display: grid; gap: var(--bc-space-16); }
.bc-biz__head { display: flex; align-items: center; gap: var(--bc-space-16); }
.bc-biz__title { display: grid; gap: var(--bc-space-4); min-width: 0; }
.bc-biz__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; color: var(--bc-muted); font-size: 14px; line-height: 20px; }
.bc-biz__meta > * + *::before { content: "·"; margin-right: 8px; color: var(--bc-control); }
.bc-biz__book { display: none; }
.bc-quick { display: flex; gap: var(--bc-space-8); }
.bc-quick > .bc-btn { flex: 1 1 0; min-width: 0; padding: 0 var(--bc-space-8); }
.bc-rating { display: inline-flex; align-items: center; gap: 4px; color: var(--bc-ink); font-weight: 600; }
.bc-rating .bc-icon, .bc-review__stars .bc-icon { color: var(--bc-status-pending-dot); fill: currentColor; stroke: none; }
.bc-rating .bc-icon { width: 15px; height: 15px; }

/* Link rows with a price */
.bc-card > .bc-list, .bc-card > .bc-select-list { overflow: hidden; border-radius: inherit; }
.bc-card__header + .bc-list, .bc-card__header + .bc-select-list { border-top-left-radius: 0; border-top-right-radius: 0; }
.bc-list { display: grid; }
.bc-list__item { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: var(--bc-space-12); min-height: 64px; padding: var(--bc-space-12) var(--bc-space-16); color: var(--bc-ink-2); text-decoration: none; }
.bc-list__item + .bc-list__item { border-top: 1px solid var(--bc-line); }
.bc-list__item--image { grid-template-columns: 48px minmax(0, 1fr) auto 16px; }
.bc-list__item:hover { background: var(--bc-sunken); }
.bc-list__text { display: grid; gap: 2px; min-width: 0; }
.bc-list__text strong { color: var(--bc-ink); font-size: 15px; line-height: 21px; font-weight: 600; }
.bc-list__text small { overflow: hidden; color: var(--bc-muted); font-size: 13px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.bc-list__text small.bc-clamp-2 { display: -webkit-box; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bc-list__price { display: grid; justify-items: end; color: var(--bc-ink); font-size: 15px; font-weight: 600; line-height: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bc-list__price small { color: var(--bc-muted); font-size: 11.5px; line-height: 14px; font-weight: 500; }
.bc-list__item > .bc-icon { width: 16px; height: 16px; color: var(--bc-control); }
.bc-thumb { width: 48px; height: 48px; border-radius: var(--bc-radius-control); object-fit: cover; }

/* Team row and reviews */
.bc-team { display: flex; gap: var(--bc-space-8); padding: var(--bc-space-16) var(--bc-space-12); overflow-x: auto; }
.bc-team__member { display: grid; justify-items: center; gap: 6px; min-width: 84px; color: var(--bc-ink-2); font-size: 13px; line-height: 17px; font-weight: 500; text-align: center; text-decoration: none; }
.bc-review { display: grid; gap: var(--bc-space-4); padding: var(--bc-space-12) var(--bc-space-16); font-size: 14px; line-height: 20px; }
.bc-review + .bc-review { border-top: 1px solid var(--bc-line); }
.bc-review__stars { display: flex; gap: 2px; }
.bc-review__stars .bc-icon { width: 14px; height: 14px; }
.bc-review__stars .bc-star-empty .bc-icon { color: var(--bc-line-strong); }
.bc-review__title { color: var(--bc-ink); font-weight: 600; }
.bc-review__by { color: var(--bc-muted); font-size: 13px; }
.bc-score { display: flex; align-items: baseline; gap: var(--bc-space-8); padding: var(--bc-space-16) var(--bc-space-16) var(--bc-space-4); }
.bc-score strong { color: var(--bc-ink); font-size: 28px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; }

/* Selectable rows and the options panel */
.bc-select-list { display: grid; }
.bc-select-list > * + * { border-top: 1px solid var(--bc-line); }
.bc-select-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; align-items: center; gap: var(--bc-space-12); min-height: 64px; padding: var(--bc-space-12) var(--bc-space-16); cursor: pointer; }
.bc-select-row--image { grid-template-columns: 48px minmax(0, 1fr) auto 24px; }
.bc-select-row--person { grid-template-columns: 40px minmax(0, 1fr) auto 24px; }
.bc-select-row:hover { background: var(--bc-sunken); }
.bc-select-row.is-selected, .bc-select-row:has(input:checked) { background: var(--bc-accent-50); }
.bc-select-row:has(input:focus-visible) { outline: 2px solid var(--bc-accent-600); outline-offset: -2px; }
.bc-mark { display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--bc-control); border-radius: 50%; background: var(--bc-surface); color: transparent; }
.bc-mark--box { border-radius: var(--bc-radius-xs); }
.bc-mark .bc-icon { width: 14px; height: 14px; stroke-width: 2.5; }
.bc-select-row.is-selected .bc-mark, .bc-select-row:has(input:checked) .bc-mark { border-color: var(--bc-accent-600); background: var(--bc-accent-600); color: var(--bc-white); }
.bc-options { display: grid; gap: var(--bc-space-12); padding: var(--bc-space-4) var(--bc-space-16) var(--bc-space-16); background: var(--bc-accent-50); }
.bc-options fieldset { display: grid; gap: var(--bc-space-8); min-width: 0; margin: 0; padding: 0; border: 0; }
.bc-options legend { display: flex; justify-content: space-between; width: 100%; padding: 0 0 var(--bc-space-4); color: var(--bc-ink); font-size: 14px; line-height: 20px; font-weight: 600; }
.bc-options legend span { color: var(--bc-muted); font-size: 12px; font-weight: 500; }
.bc-option { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; padding: var(--bc-space-8) var(--bc-space-12); border: 1px solid var(--bc-line-strong); border-radius: var(--bc-radius-control); background: var(--bc-surface); color: var(--bc-ink); font-size: 15px; cursor: pointer; }
.bc-option:has(input:checked) { border-color: var(--bc-accent-600); box-shadow: inset 0 0 0 1px var(--bc-accent-600); }
.bc-option input { appearance: none; display: inline-grid; place-content: center; width: 18px; height: 18px; margin: 0; border: 1px solid var(--bc-control); border-radius: 50%; background: var(--bc-surface); cursor: pointer; }
.bc-option input[type="checkbox"] { border-radius: var(--bc-radius-xs); }
.bc-option input:checked { border-color: var(--bc-accent-600); background: var(--bc-accent-600); }
.bc-option input[type="radio"]:checked::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bc-white); }
.bc-option input[type="checkbox"]:checked::before { content: ""; width: 10px; height: 6px; margin-top: -2px; border: 2px solid var(--bc-white); border-top: 0; border-right: 0; transform: rotate(-45deg); }
.bc-option small { display: block; color: var(--bc-muted); font-size: 12.5px; line-height: 16px; }
.bc-option__price { color: var(--bc-ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Toggle row, more-about disclosure, groups and fieldsets */
.bc-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--bc-space-16); padding: 14px var(--bc-space-16); }
label.bc-toggle-row { cursor: pointer; }
.bc-toggle-row strong { display: block; color: var(--bc-ink); font-size: 15px; line-height: 21px; font-weight: 600; }
.bc-toggle-row small { display: block; color: var(--bc-muted); font-size: 13px; line-height: 18px; }
.bc-toggle-row > .bc-icon { color: var(--bc-accent-600); }
.bc-more { padding: 0 var(--bc-space-16) var(--bc-space-12) 68px; }
.bc-more > summary { color: var(--bc-accent-700); font-size: 13.5px; font-weight: 600; list-style: none; cursor: pointer; }
.bc-more > summary::-webkit-details-marker { display: none; }
.bc-more__body { display: grid; gap: var(--bc-space-8); padding-top: var(--bc-space-8); color: var(--bc-ink-2); font-size: 14px; line-height: 20px; }
.bc-group { display: grid; gap: var(--bc-space-8); }
.bc-group > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--bc-space-8); padding: var(--bc-space-4); list-style: none; cursor: pointer; }
.bc-group > summary::-webkit-details-marker { display: none; }
.bc-group > summary .bc-icon { color: var(--bc-control); transition: transform 0.15s; }
.bc-group[open] > summary .bc-icon { transform: rotate(180deg); }
.bc-group__title { color: var(--bc-ink); font-size: 15px; line-height: 22px; font-weight: 600; }
@media (max-width: 767px) {
  .bc-more { padding-bottom: var(--bc-space-4); }
  .bc-more > summary { display: flex; align-items: center; min-height: 44px; }
  .bc-group > summary { min-height: 44px; }
}
.bc-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.bc-fieldset > legend { margin-bottom: var(--bc-space-8); padding: 0; }
.bc-fieldset__title { color: var(--bc-ink); font-size: 15px; line-height: 21px; font-weight: 650; }
.bc-hint--ok { color: var(--bc-status-confirmed-fg); }
.bc-hint--bad { color: var(--bc-status-no-show-fg); }
.bc-required { color: var(--bc-muted); font-size: 12px; font-weight: 500; }

/* Date and time: day strip, time slots and the month grid */
.bc-icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--bc-line-strong); border-radius: var(--bc-radius-control); background: var(--bc-surface); color: var(--bc-ink-2); cursor: pointer; }
.bc-icon-btn:disabled { border-color: var(--bc-line); color: var(--bc-placeholder); cursor: not-allowed; }
.bc-picker { display: grid; gap: var(--bc-space-12); }
.bc-picker__head { display: flex; align-items: center; justify-content: space-between; gap: var(--bc-space-12); }
.bc-picker__title { color: var(--bc-ink); font-size: 15px; line-height: 22px; font-weight: 600; }
.bc-days { display: grid; grid-auto-columns: 58px; grid-auto-flow: column; gap: var(--bc-space-8); margin: 0 calc(-1 * var(--bc-space-16)); padding: 2px var(--bc-space-16) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--bc-space-16); }
.bc-day { display: grid; justify-items: center; align-content: start; gap: 1px; min-height: 64px; padding: var(--bc-space-8) 0; border: 1px solid var(--bc-line-strong); border-radius: var(--bc-radius-button); background: var(--bc-surface); color: var(--bc-ink-2); font: inherit; cursor: pointer; scroll-snap-align: start; }
.bc-day__dow { color: var(--bc-muted); font-size: 12px; line-height: 16px; font-weight: 600; }
.bc-day__num { color: var(--bc-ink); font-size: 19px; line-height: 26px; font-weight: 650; font-variant-numeric: tabular-nums; }
.bc-day__note { color: var(--bc-muted); font-size: 11px; line-height: 14px; font-weight: 500; }
.bc-day[aria-pressed="true"] { border-color: var(--bc-accent-600); background: var(--bc-accent-600); }
.bc-day[aria-pressed="true"] :is(.bc-day__dow, .bc-day__num, .bc-day__note) { color: var(--bc-white); }
.bc-day:disabled { border-color: var(--bc-line); background: var(--bc-sunken); cursor: not-allowed; }
.bc-day:disabled .bc-day__num { color: var(--bc-placeholder); font-weight: 500; }
.bc-slots { display: grid; gap: var(--bc-space-16); }
.bc-slots__title { color: var(--bc-ink); font-size: 17px; line-height: 24px; font-weight: 650; }
.bc-slots__group { display: grid; gap: var(--bc-space-8); }
.bc-slots__label { color: var(--bc-muted); font-size: 13px; line-height: 18px; font-weight: 600; }
.bc-slots__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--bc-space-8); }
.bc-slot { min-height: 44px; padding: 0 var(--bc-space-8); border: 1px solid var(--bc-line-strong); border-radius: var(--bc-radius-control); background: var(--bc-surface); color: var(--bc-ink); font: inherit; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; }
.bc-slot:hover { border-color: var(--bc-accent-600); color: var(--bc-accent-700); }
.bc-slot[aria-pressed="true"] { border-color: var(--bc-accent-600); background: var(--bc-accent-600); color: var(--bc-white); }
.bc-month { display: grid; gap: var(--bc-space-8); padding: var(--bc-space-4) var(--bc-space-4) var(--bc-space-8); }
.bc-month__head { display: flex; align-items: center; justify-content: space-between; gap: var(--bc-space-8); }
.bc-month__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.bc-month__dow { padding: var(--bc-space-4) 0; color: var(--bc-muted); font-size: 12px; line-height: 16px; font-weight: 600; text-decoration: none; }
.bc-month__day { display: grid; place-items: center; justify-self: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--bc-ink); font: inherit; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.bc-month__day:hover { background: var(--bc-accent-50); }
.bc-month__day:disabled { background: none; color: var(--bc-placeholder); font-weight: 400; cursor: default; }
.bc-month__day[aria-pressed="true"] { background: var(--bc-accent-600); color: var(--bc-white); }

/* After booking and the account */
.bc-done { display: grid; justify-items: center; gap: var(--bc-space-8); padding: var(--bc-space-8) 0; text-align: center; }
.bc-done__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--bc-status-confirmed-bg); color: var(--bc-status-confirmed-fg); box-shadow: inset 0 0 0 1px var(--bc-status-confirmed-ring); }
.bc-done__icon--pending { background: var(--bc-status-pending-bg); color: var(--bc-status-pending-fg); box-shadow: inset 0 0 0 1px var(--bc-status-pending-ring); }
.bc-done__icon--info { background: var(--bc-accent-50); color: var(--bc-accent-700); box-shadow: inset 0 0 0 1px var(--bc-accent-200); }
.bc-done__icon .bc-icon { width: 28px; height: 28px; }
.bc-done > p { max-width: 40ch; }
.bc-appt__head { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: var(--bc-space-12); padding: 14px var(--bc-space-16); }
.bc-appt__date { display: grid; place-items: center; align-content: center; width: 48px; height: 54px; border-radius: var(--bc-radius-button); background: var(--bc-accent-50); color: var(--bc-accent-800); }
.bc-appt__date span { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.bc-appt__date strong { font-size: 20px; line-height: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bc-appt__text { display: grid; justify-items: start; gap: var(--bc-space-4); min-width: 0; }
.bc-appt__text strong { color: var(--bc-ink); font-size: 15px; line-height: 21px; font-weight: 600; }
.bc-appt__meta { color: var(--bc-muted); font-size: 13.5px; line-height: 19px; }
.bc-appt .bc-card__footer { justify-content: flex-start; }
.bc-past { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--bc-space-12); padding: var(--bc-space-12) var(--bc-space-16); }
.bc-past + .bc-past { border-top: 1px solid var(--bc-line); }
.bc-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: var(--bc-space-12); }
.bc-photos img { width: 100%; aspect-ratio: 1; border-radius: var(--bc-radius-control); object-fit: cover; }
.bc-photo { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--bc-radius-control); background: var(--bc-sunken); color: var(--bc-control); }

/* Password field with Show, and the sign-in card's heading */
.bc-password { position: relative; }
.bc-password .bc-input { padding-right: 64px; }
.bc-password__show { position: absolute; top: 50%; right: 6px; min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--bc-radius-xs); background: none; color: var(--bc-accent-700); font: inherit; font-size: 13px; font-weight: 600; transform: translateY(-50%); cursor: pointer; }
@media (max-width: 767px) {
  .bc-password__show { min-width: 44px; min-height: 44px; }
}
.bc-label a { color: var(--bc-accent-700); font-size: 13px; font-weight: 600; text-decoration: none; }
.bc-signin__title { font-size: 22px; line-height: 28px; font-weight: 650; letter-spacing: -0.015em; }
.bc-center { text-align: center; }

/* Owner and team app (sub-project 3) */

/* An alert's action can be a button in a form that posts */
.bc-alert form { margin: 0; }
button.bc-alert__action { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }

/* Numbers at a glance */
.bc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--bc-space-16); padding: var(--bc-space-16); }
.bc-stats > div { display: grid; gap: 2px; }
.bc-stats dt { color: var(--bc-muted); font-size: 13px; line-height: 18px; font-weight: 500; }
.bc-stats dd { color: var(--bc-ink); font-size: 24px; line-height: 30px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* Progress bar (a <progress> element) */
.bc-progress { appearance: none; display: block; width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: var(--bc-radius-pill); background: var(--bc-sunken); color: var(--bc-accent-600); }
.bc-progress::-webkit-progress-bar { border-radius: var(--bc-radius-pill); background: var(--bc-sunken); }
.bc-progress::-webkit-progress-value { border-radius: var(--bc-radius-pill); background: currentColor; }
.bc-progress::-moz-progress-bar { border-radius: var(--bc-radius-pill); background: currentColor; }
.bc-progress--warning { color: var(--bc-status-pending-dot); }
.bc-progress--danger { color: var(--bc-status-no-show-dot); }

/* Setup checklist */
.bc-checklist { display: grid; margin: 0; padding: 0; list-style: none; }
.bc-checklist__item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--bc-space-12); padding: var(--bc-space-12) var(--bc-space-16); border-top: 1px solid var(--bc-line); }
.bc-checklist__text { display: grid; gap: 2px; min-width: 0; }
.bc-checklist__text strong { color: var(--bc-ink); font-size: 15px; line-height: 21px; font-weight: 600; }
.bc-checklist__text small { color: var(--bc-muted); font-size: 13px; line-height: 18px; }
.bc-checklist__item.is-done .bc-checklist__text strong { color: var(--bc-muted); font-weight: 500; }
.bc-checklist__item.is-done .bc-mark { border-color: var(--bc-status-confirmed-dot); background: var(--bc-status-confirmed-dot); color: var(--bc-white); }
.bc-checklist__item.is-locked .bc-checklist__text strong { color: var(--bc-muted); }
.bc-checklist__text a { color: var(--bc-accent-700); font-weight: 600; }
.bc-mark--step { color: var(--bc-ink-2); font-size: 12px; line-height: 1; font-weight: 650; }
/* Something to do right under a step, such as adding starter services */
.bc-checklist__more { padding: 0 var(--bc-space-16) var(--bc-space-16) calc(var(--bc-space-16) + 24px + var(--bc-space-12)); }
.bc-checklist__more form { display: grid; gap: var(--bc-space-8); padding: var(--bc-space-12); border-radius: var(--bc-radius-button); background: var(--bc-sunken); }
@media (max-width: 767px) {
  .bc-checklist__more { padding-left: var(--bc-space-16); }
}

/* Appointment rows: the time, who and what, then the status */
.bc-list__item--time { grid-template-columns: 84px minmax(0, 1fr) auto; }
.bc-list__time { display: grid; gap: 2px; color: var(--bc-ink); font-size: 14px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bc-list__time small { color: var(--bc-muted); font-size: 12.5px; line-height: 16px; font-weight: 500; }
.bc-list__end { display: grid; justify-items: end; gap: 4px; }
.bc-list__end small { color: var(--bc-ink-2); font-size: 13px; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Rows that open in place to show details and actions (details/summary) */
.bc-entries { display: grid; }
.bc-entry + .bc-entry { border-top: 1px solid var(--bc-line); }
.bc-entry > summary { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto 16px; align-items: center; gap: var(--bc-space-12); min-height: 64px; padding: var(--bc-space-12) var(--bc-space-16); list-style: none; cursor: pointer; }
.bc-entry > summary::-webkit-details-marker { display: none; }
.bc-entry > summary:hover, .bc-entry[open] > summary { background: var(--bc-sunken); }
.bc-entry > summary > .bc-icon { width: 16px; height: 16px; color: var(--bc-control); transition: transform 0.15s; }
.bc-entry[open] > summary > .bc-icon { transform: rotate(180deg); }
.bc-entry__body { display: grid; gap: var(--bc-space-16); padding: var(--bc-space-4) var(--bc-space-16) var(--bc-space-16); background: var(--bc-sunken); }
.bc-entry__body > .bc-dl { border: 1px solid var(--bc-line); border-radius: var(--bc-radius-button); background: var(--bc-surface); }
.bc-entry__actions { display: flex; flex-wrap: wrap; gap: var(--bc-space-8); }
.bc-entry__actions form { margin: 0; }
.bc-entry.is-quiet .bc-list__text strong { color: var(--bc-muted); }
.bc-entry--plain > summary { grid-template-columns: minmax(0, 1fr) auto 16px; }
.bc-entry--plain > summary .bc-list__text strong .bc-icon { width: 16px; height: 16px; margin-right: 6px; color: var(--bc-accent-600); }
.bc-card__header + .bc-entries { border-top: 0; }
.bc-entry.is-highlighted > summary { box-shadow: inset 3px 0 0 var(--bc-accent-600); }
/* Photos of a team member's work, each with its caption and Remove */
.bc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--bc-space-12); margin: 0; padding: var(--bc-space-16); list-style: none; }
.bc-gallery__item { display: grid; align-content: start; justify-items: start; gap: var(--bc-space-8); }
.bc-gallery__item img { width: 100%; aspect-ratio: 1; border-radius: var(--bc-radius-control); background: var(--bc-sunken); object-fit: cover; }
.bc-gallery__item p { color: var(--bc-ink-2); font-size: 13.5px; line-height: 18px; }
/* A team member's own note on an appointment */
.bc-note { display: grid; gap: var(--bc-space-4); padding: var(--bc-space-12); border: 1px solid var(--bc-line); border-radius: var(--bc-radius-button); background: var(--bc-surface); }
.bc-note > strong { color: var(--bc-muted); font-size: 13px; line-height: 18px; font-weight: 600; }

/* A card that folds open (details/summary), such as "Add a walk-in" */
.bc-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--bc-space-12); min-height: 64px; padding: var(--bc-space-12) var(--bc-space-16); list-style: none; cursor: pointer; }
.bc-fold > summary::-webkit-details-marker { display: none; }
.bc-fold > summary > .bc-icon { flex: none; color: var(--bc-control); transition: transform 0.15s; }
.bc-fold[open] > summary { border-bottom: 1px solid var(--bc-line); }
.bc-fold[open] > summary > .bc-icon { transform: rotate(180deg); }

.bc-empty__icon--danger { background: var(--bc-status-no-show-bg); color: var(--bc-status-no-show-fg); }

/* A neutral label, such as "Walk-in" */
.bc-tag { display: inline-flex; align-items: center; padding: 0 8px; border-radius: var(--bc-radius-pill); background: var(--bc-sunken); color: var(--bc-ink-2); box-shadow: inset 0 0 0 1px var(--bc-line); font-size: 12px; line-height: 20px; font-weight: 600; white-space: nowrap; }

/* Search and filters above a list */
.bc-filters { display: flex; flex-wrap: wrap; gap: var(--bc-space-8); }
.bc-filters > .bc-input { flex: 2 1 240px; }
.bc-filters > .bc-select { flex: 1 1 160px; width: auto; }
.bc-filters > .bc-filters__actions { display: flex; flex: none; gap: var(--bc-space-8); }

/* Lists of checkboxes or radios from a form (Django's CheckboxSelectMultiple and RadioSelect) */
.bc-choices > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--bc-space-8); }
.bc-choices label { display: flex; align-items: center; gap: var(--bc-space-8); min-height: 40px; padding: var(--bc-space-8) var(--bc-space-12); border: 1px solid var(--bc-line-strong); border-radius: var(--bc-radius-control); background: var(--bc-surface); color: var(--bc-ink); font-size: 15px; cursor: pointer; }
.bc-choices label:has(input:checked) { border-color: var(--bc-accent-600); box-shadow: inset 0 0 0 1px var(--bc-accent-600); }
.bc-choices input { appearance: none; display: inline-grid; flex: none; place-content: center; width: 18px; height: 18px; margin: 0; border: 1px solid var(--bc-control); border-radius: var(--bc-radius-xs); background: var(--bc-surface); cursor: pointer; }
.bc-choices input[type="radio"] { border-radius: 50%; }
.bc-choices input:checked { border-color: var(--bc-accent-600); background: var(--bc-accent-600); }
.bc-choices input[type="checkbox"]:checked::before { content: ""; width: 10px; height: 6px; margin-top: -2px; border: 2px solid var(--bc-white); border-top: 0; border-right: 0; transform: rotate(-45deg); }
.bc-choices input[type="radio"]:checked::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bc-white); }

/* File picker and a switch field inside a form */
.bc-file { width: 100%; color: var(--bc-ink-2); font: inherit; font-size: 14px; }
.bc-file::file-selector-button { margin-right: var(--bc-space-12); padding: var(--bc-space-8) var(--bc-space-12); border: 1px solid var(--bc-line-strong); border-radius: var(--bc-radius-control); background: var(--bc-surface); color: var(--bc-ink); font: inherit; font-weight: 600; cursor: pointer; }
.bc-switch { display: grid; gap: var(--bc-space-4); border: 1px solid var(--bc-line); border-radius: var(--bc-radius-button); }
.bc-switch .bc-error { padding: 0 var(--bc-space-16) var(--bc-space-12); }
.bc-preview-image { width: 96px; height: 96px; border-radius: var(--bc-radius-button); object-fit: cover; }

/* Rows of settings in a card: switches, with the fields that belong to them tucked under */
.bc-rows { display: grid; }
.bc-rows > * + * { border-top: 1px solid var(--bc-line); }
.bc-rows__sub { display: grid; gap: var(--bc-space-16); padding: 0 var(--bc-space-16) var(--bc-space-16); }
.bc-toggle-row + .bc-rows__sub { border-top: 0; }
.bc-section-head { display: grid; gap: var(--bc-space-4); }
.bc-url { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bc-space-8); }
.bc-url a { color: var(--bc-accent-700); font-weight: 600; overflow-wrap: anywhere; }
.bc-input-group { display: flex; align-items: center; overflow: hidden; border: 1px solid var(--bc-control); border-radius: var(--bc-radius-control); background: var(--bc-surface); }
.bc-input-group:focus-within { border-color: var(--bc-accent-600); box-shadow: var(--bc-shadow-focus-glow); }
.bc-input-group__prefix { padding: 0 var(--bc-space-4) 0 var(--bc-space-12); color: var(--bc-muted); font-size: 15px; white-space: nowrap; }
.bc-input-group .bc-input { border: 0; box-shadow: none; padding-left: 0; }
.bc-inline-field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bc-space-8); color: var(--bc-ink-2); font-size: 15px; }
.bc-inline-field .bc-select, .bc-inline-field .bc-input { width: auto; min-width: 88px; }

/* A form laid out in a card: fields in a grid, two columns on larger screens */
.bc-form { display: grid; gap: var(--bc-space-16); }
.bc-form__grid { display: grid; gap: var(--bc-space-16); }
@media (min-width: 768px) {
  .bc-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bc-form__grid > .bc-form__wide { grid-column: 1 / -1; }
}
.bc-form__actions { display: flex; flex-wrap: wrap; gap: var(--bc-space-8); }

/* Service rows: the row opens the service; its menu holds the rest */
.bc-svc-list { display: grid; margin: 0; padding: 0; list-style: none; }
.bc-svc { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--bc-space-4); padding-right: var(--bc-space-12); }
.bc-svc + .bc-svc { border-top: 1px solid var(--bc-line); }
.bc-svc__main { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--bc-space-12); min-height: 72px; padding: var(--bc-space-12) var(--bc-space-8) var(--bc-space-12) var(--bc-space-16); color: inherit; text-decoration: none; }
.bc-svc__main:hover .bc-list__text strong { color: var(--bc-accent-700); }
.bc-svc__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--bc-radius-control); background: var(--bc-accent-50); color: var(--bc-accent-600); }
.bc-icon-btn.bc-icon-btn { list-style: none; }
.bc-menu > summary.bc-icon-btn::-webkit-details-marker { display: none; }
.bc-menu__item--danger, .bc-menu__item--danger .bc-icon { color: var(--bc-status-no-show-fg); }

/* Weekly hours: the day, its shifts, then Add */
.bc-hours { grid-template-columns: 104px minmax(0, 1fr) auto; gap: var(--bc-space-12); min-height: 56px; padding: var(--bc-space-8) var(--bc-space-12) var(--bc-space-8) var(--bc-space-16); }
.bc-hours__day { color: var(--bc-ink); font-size: 15px; font-weight: 600; }
.bc-hours__shifts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bc-space-8); min-width: 0; }
.bc-hours__shift { display: inline-flex; align-items: center; gap: 2px; padding-left: 10px; border-radius: var(--bc-radius-pill); background: var(--bc-accent-50); box-shadow: inset 0 0 0 1px var(--bc-accent-200); font-size: 14px; font-variant-numeric: tabular-nums; }
.bc-hours__shift a:not([class]) { color: var(--bc-accent-800); font-weight: 600; text-decoration: none; }
.bc-icon-btn--plain { width: 32px; height: 32px; border: 0; background: none; color: var(--bc-muted); }
.bc-icon-btn--plain .bc-icon { width: 14px; height: 14px; }
@media (max-width: 767px) {
  .bc-hours { grid-template-columns: minmax(0, 1fr) auto; }
  .bc-hours__shifts { grid-column: 1 / -1; grid-row: 2; }
  .bc-icon-btn--plain { width: 44px; height: 44px; }
}

/* Month of time off: every day links to adding or changing it */
.bc-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--bc-space-4); padding: var(--bc-space-12); }
.bc-cal__dow { padding: var(--bc-space-4) 0; color: var(--bc-muted); font-size: 12px; line-height: 16px; font-weight: 600; text-align: center; }
.bc-cal__day { display: grid; align-content: start; gap: 2px; min-width: 0; min-height: 64px; padding: 6px; border: 1px solid var(--bc-line); border-radius: var(--bc-radius-control); background: var(--bc-surface); color: var(--bc-ink); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; }
.bc-cal__day:hover { border-color: var(--bc-accent-600); }
.bc-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--bc-accent-600); border-color: var(--bc-accent-600); }
.bc-cal__day.is-off { border-color: var(--bc-status-cancelled-ring); background: var(--bc-status-cancelled-bg); }
.bc-cal__day.is-special { border-color: var(--bc-accent-200); background: var(--bc-accent-50); }
.bc-cal__note { overflow: hidden; color: var(--bc-ink-2); font-size: 11.5px; line-height: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.bc-cal__blank { min-height: 64px; }
.bc-cal__legend { justify-content: flex-start; align-items: center; color: var(--bc-muted); font-size: 13px; }
.bc-cal__key { width: 14px; height: 14px; margin-left: var(--bc-space-8); border-radius: 4px; }
.bc-cal__key:first-child { margin-left: 0; }
.bc-cal__key.is-off { background: var(--bc-status-cancelled-bg); box-shadow: inset 0 0 0 1px var(--bc-status-cancelled-ring); }
.bc-cal__key.is-special { background: var(--bc-accent-50); box-shadow: inset 0 0 0 1px var(--bc-accent-200); }
@media (max-width: 767px) {
  .bc-cal { gap: 2px; padding: var(--bc-space-8); }
  .bc-cal__day, .bc-cal__blank { min-height: 52px; padding: 4px; }
  .bc-cal__note { font-size: 10px; }
}

/* Bar chart: an SVG 100 units tall, one unit wide per bar, stretched to the card */
.bc-chart { display: block; width: 100%; height: 180px; }
.bc-chart__bar { fill: var(--bc-accent-500); }
.bc-chart__bar:hover { fill: var(--bc-accent-700); }
.bc-chart__base { stroke: var(--bc-line-strong); stroke-width: 1; }
.bc-chart__axis { display: flex; justify-content: space-between; gap: var(--bc-space-8); margin-top: var(--bc-space-8); color: var(--bc-muted); font-size: 12px; line-height: 16px; }
.bc-more-table { margin-top: var(--bc-space-12); }
.bc-more-table > summary { display: inline-flex; min-height: 32px; align-items: center; font-size: 13.5px; cursor: pointer; }
.bc-more-table > .bc-table-wrap { margin-top: var(--bc-space-8); max-height: 320px; overflow-y: auto; }

/* A table cell with a main line and a muted line under it */
.bc-cell { display: grid; gap: 2px; min-width: 0; }
.bc-cell strong { color: var(--bc-ink); font-weight: 600; }
.bc-cell small { color: var(--bc-muted); font-size: 13px; line-height: 18px; }

/* Booking page: the QR code, the website button's color and the code to paste */
.bc-card__body--line { border-top: 1px solid var(--bc-line); }
.bc-row--center { justify-content: center; }
.bc-qr { display: block; width: 200px; height: 200px; margin: 0 auto; padding: var(--bc-space-8); border: 1px solid var(--bc-line); border-radius: var(--bc-radius-control); background: var(--bc-white); }
.bc-qr--sm { width: 120px; height: 120px; padding: var(--bc-space-4); }
.bc-qr-main { display: grid; justify-items: center; gap: var(--bc-space-16); }
.bc-qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--bc-space-12); margin: 0; padding: var(--bc-space-16); list-style: none; }
.bc-qr-tile { display: grid; justify-items: center; gap: var(--bc-space-8); padding: var(--bc-space-16) var(--bc-space-12); border: 1px solid var(--bc-line); border-radius: var(--bc-radius-button); text-align: center; }
@media (min-width: 768px) {
  .bc-qr-main { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: var(--bc-space-24); }
}
.bc-input--color { width: 72px; padding: 4px; cursor: pointer; }
.bc-code { min-height: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 20px; white-space: pre; overflow-x: auto; }
/* The button as it will look on the owner's website (its color comes from their setting) */
.bc-widget-preview { display: grid; place-items: center; min-height: 104px; padding: var(--bc-space-20); border: 1px dashed var(--bc-line-strong); border-radius: var(--bc-radius-button); background: var(--bc-sunken); }
.bc-widget-preview__button { padding: 12px 24px; background: var(--bc-accent-600); color: var(--bc-white); font-size: 16px; line-height: 22px; font-weight: 600; box-shadow: var(--bc-shadow-2); }
.bc-widget-preview__button[data-shape="rounded"] { border-radius: 8px; }
.bc-widget-preview__button[data-shape="pill"] { border-radius: var(--bc-radius-pill); }
.bc-warning-hint { display: flex; align-items: flex-start; gap: var(--bc-space-8); color: var(--bc-status-pending-fg); font-size: 13px; line-height: 18px; font-weight: 500; }
.bc-warning-hint[hidden] { display: none; }
.bc-warning-hint .bc-icon { flex: none; width: 16px; height: 16px; margin-top: 1px; }

@media (min-width: 768px) {
  /* The month grid opens as a centred dialog on larger screens and a bottom sheet on phones. */
  .bc-sheet--adaptive { inset: 0; width: min(440px, calc(100% - 32px)); height: fit-content; max-height: 85vh; margin: auto; padding: var(--bc-space-20); border-radius: var(--bc-radius-dialog); }
  .bc-sheet--adaptive .bc-sheet__handle { display: none; }
}
@media (max-width: 767px) {
  .bc-icon-btn { width: 44px; height: 44px; }
}

/* Keyboard keys, such as the shortcut on the sidebar's search button */
.bc-kbd { padding: 1px 6px; border: 1px solid var(--bc-line); border-radius: var(--bc-radius-xs); background: var(--bc-surface); color: var(--bc-muted); font: inherit; font-size: 11.5px; line-height: 16px; font-weight: 500; white-space: nowrap; }

/* Search settings: the whole screen on phones, a panel near the top on larger screens. The dialog itself keeps
   the browser's display, so it stays hidden while closed. */
.bc-search { inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--bc-surface); color: var(--bc-ink-2); }
.bc-search::backdrop { background: var(--bc-scrim); }
.bc:has(.bc-search[open]) { overflow: hidden; }
.bc-search__panel { display: flex; flex-direction: column; height: 100%; padding-top: env(safe-area-inset-top, 0px); }
.bc-search__bar { display: flex; flex: none; align-items: center; gap: var(--bc-space-8); padding: var(--bc-space-8) var(--bc-space-8) var(--bc-space-8) var(--bc-space-16); border-bottom: 1px solid var(--bc-line); }
.bc-search__bar:focus-within { box-shadow: inset 0 -2px 0 var(--bc-accent-600); }
.bc-search__bar > .bc-icon { color: var(--bc-muted); }
.bc-search__input { flex: 1; min-width: 0; min-height: 44px; padding: 0; border: 0; background: none; color: var(--bc-ink); font: inherit; font-size: 16px; outline: none; }
.bc-search__input::placeholder { color: var(--bc-placeholder); }
/* The bar's underline shows the focus, so the box doesn't need a ring of its own. */
.bc-search__input:focus-visible { outline: none; }
.bc-search__label { margin: var(--bc-space-12) var(--bc-space-16) 0; }
.bc-search__results { display: grid; flex: 1 1 auto; align-content: start; gap: 1px; min-height: 0; padding: var(--bc-space-8); overflow-y: auto; overscroll-behavior: contain; }
.bc-search__option { display: flex; align-items: center; gap: var(--bc-space-12); min-height: 52px; padding: var(--bc-space-8) var(--bc-space-12); border-radius: var(--bc-radius-control); color: var(--bc-ink-2); text-decoration: none; }
.bc-search__option > .bc-icon { color: var(--bc-muted); }
.bc-search__option[aria-selected="true"] { background: var(--bc-accent-50); }
.bc-search__option[aria-selected="true"] > .bc-icon { color: var(--bc-accent-600); }
.bc-search__text { display: grid; min-width: 0; line-height: 1.3; }
.bc-search__text strong { overflow: hidden; color: var(--bc-ink); font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.bc-search__text small { overflow: hidden; color: var(--bc-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.bc-search__text mark { background: none; color: var(--bc-accent-700); }
.bc-search__empty { display: grid; justify-items: start; gap: var(--bc-space-8); padding: var(--bc-space-16); color: var(--bc-ink-2); font-size: 15px; }
.bc-search__empty p { margin: 0; }
@media (min-width: 768px) {
  .bc-search { inset: 12vh 0 auto; width: min(600px, calc(100% - 32px)); height: auto; max-height: min(560px, 76vh); margin: 0 auto; overflow: hidden; border-radius: var(--bc-radius-dialog); box-shadow: var(--bc-shadow-3); }
  .bc-search__panel { height: auto; max-height: inherit; padding-top: 0; }
}

/* Something opened from a link, such as a setting picked in Search settings, is pointed out for a moment. */
.bc-found { animation: bc-found 2.4s ease-out; }
.bc-field.bc-found, .bc-inline-field.bc-found, .bc-check.bc-found { animation-name: bc-found-area; }
@keyframes bc-found { 0%, 45% { background-color: var(--bc-accent-50); box-shadow: inset 0 0 0 2px var(--bc-accent-600); } }
@keyframes bc-found-area { 0%, 45% { background-color: var(--bc-accent-50); box-shadow: 0 0 0 8px var(--bc-accent-50); } }
@media (prefers-reduced-motion: reduce) {
  .bc-found { background-color: var(--bc-accent-50); }
}