/*
 * BookPoint booking wizard.
 * Everything is scoped under .bp-ui (design system root) and uses logical
 * properties, so right-to-left languages work without a separate stylesheet.
 * Layout reacts to the width of the widget itself (container queries), not the
 * viewport, so it also fits narrow columns and page builders.
 */

.bp-ui .bp-booking-embed,
.bp-ui.bp-booking-embed { display: block; }

.bp-ui .bp-bw-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bp-s-3);
  min-height: 240px;
  color: var(--bp-c-text-2);
  border: 1px solid var(--bp-c-border);
  border-radius: var(--bp-r-lg);
  background: var(--bp-c-surface);
}

/* ------------------------------------------------------------------ shell */

.bp-ui .bp-bw {
  container-type: inline-size;
  container-name: bp-bw;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  background: var(--bp-c-surface);
  color: var(--bp-c-text);
}
.bp-ui .bp-bw--inline {
  border: 1px solid var(--bp-c-border);
  border-radius: var(--bp-r-xl);
  box-shadow: var(--bp-sh-sm);
  overflow: clip;
}
.bp-ui .bp-bw--modal { flex: 1 1 auto; height: 100%; }

.bp-ui .bp-bw-overlay { z-index: calc(var(--bp-z-modal) + 1); }
.bp-ui .bp-bw-dialog { --_w: 1040px; height: min(780px, calc(100vh - 48px)); height: min(780px, calc(100dvh - 48px)); }
.bp-ui .bp-bw-dialog .bp-bw { border-radius: 0; }

.bp-ui .bp-bw__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bp-s-3);
  padding: var(--bp-s-5) var(--bp-s-6) var(--bp-s-3);
}
.bp-ui .bp-bw__titles { min-width: 0; }
.bp-ui .bp-bw__title {
  font-size: var(--bp-fs-xl);
  font-weight: var(--bp-fw-semibold);
  line-height: var(--bp-lh-snug);
  letter-spacing: -0.015em;
}
.bp-ui .bp-bw__title:focus { outline: none; }
.bp-ui .bp-bw__title:focus-visible { outline: none; }
.bp-ui .bp-bw__subtitle { margin-top: var(--bp-s-1); color: var(--bp-c-text-2); font-size: var(--bp-fs-md); }

/* --------------------------------------------------------------- progress */

.bp-ui .bp-bw-progress { padding: 0 var(--bp-s-6) var(--bp-s-3); }
.bp-ui .bp-bw-progress__count { font-size: var(--bp-fs-xs); font-weight: var(--bp-fw-semibold); color: var(--bp-c-text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.bp-ui .bp-bw-steps { display: none; gap: var(--bp-s-1); margin-top: var(--bp-s-2); }
.bp-ui .bp-bw-steps__item { flex: 1 1 0; min-width: 0; }
.bp-ui .bp-bw-steps__btn {
  display: flex;
  align-items: center;
  gap: var(--bp-s-2);
  width: 100%;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bp-c-text-3);
  font: inherit;
  font-size: var(--bp-fs-sm);
  font-weight: var(--bp-fw-medium);
  text-align: start;
}
.bp-ui button.bp-bw-steps__btn { cursor: pointer; }
.bp-ui button.bp-bw-steps__btn:hover .bp-bw-steps__label { color: var(--bp-c-text); }
.bp-ui .bp-bw-steps__marker {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--bp-c-border-strong);
  font-size: var(--bp-fs-xs);
  font-weight: var(--bp-fw-semibold);
  font-variant-numeric: tabular-nums;
  background: var(--bp-c-surface);
}
.bp-ui .bp-bw-steps__marker svg { width: 13px; height: 13px; }
.bp-ui .bp-bw-steps__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-ui .bp-bw-steps__item.is-done .bp-bw-steps__marker { background: var(--bp-c-primary); border-color: var(--bp-c-primary); color: var(--bp-c-on-primary); }
.bp-ui .bp-bw-steps__item.is-done .bp-bw-steps__btn { color: var(--bp-c-text-2); }
.bp-ui .bp-bw-steps__item.is-current .bp-bw-steps__marker { border-color: var(--bp-c-primary); color: var(--bp-c-primary-text); box-shadow: 0 0 0 3px var(--bp-c-primary-soft-2); }
.bp-ui .bp-bw-steps__item.is-current .bp-bw-steps__btn { color: var(--bp-c-text); font-weight: var(--bp-fw-semibold); }
.bp-ui .bp-bw-progress__bar { height: 4px; margin-top: var(--bp-s-2); border-radius: var(--bp-r-full); background: var(--bp-c-surface-3); overflow: hidden; }
.bp-ui .bp-bw-progress__bar > span { display: block; height: 100%; width: var(--_value, 0); border-radius: inherit; background: var(--bp-c-primary); transition: width var(--bp-dur-slow) var(--bp-ease-out); }

/* ---------------------------------------------------------------- content */

.bp-ui .bp-bw__content {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.bp-ui .bp-bw__main { min-width: 0; padding: var(--bp-s-3) var(--bp-s-6) var(--bp-s-6); }
.bp-ui .bp-bw--inline .bp-bw__content { overflow: visible; }

.bp-ui .bp-bw__footer {
  position: sticky;
  inset-block-end: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bp-s-3);
  padding: var(--bp-s-3) var(--bp-s-6);
  padding-block-end: max(var(--bp-s-3), env(safe-area-inset-bottom));
  border-top: 1px solid var(--bp-c-border);
  background: var(--bp-c-surface);
}
.bp-ui .bp-bw__continue { min-width: 150px; margin-inline-start: auto; }

.bp-ui .bp-bw-hint { color: var(--bp-c-text-2); font-size: var(--bp-fs-sm); margin: 0 0 var(--bp-s-3); }
.bp-ui .bp-bw-hint--center { text-align: center; margin-top: var(--bp-s-3); }
.bp-ui .bp-bw-subhead { font-size: var(--bp-fs-md); font-weight: var(--bp-fw-semibold); margin-bottom: var(--bp-s-3); }
.bp-ui .bp-bw-skel { display: flex; flex-direction: column; gap: var(--bp-s-3); }

/* ---------------------------------------------------------- option cards */

.bp-ui .bp-bw-options { display: flex; flex-direction: column; gap: var(--bp-s-2); }
.bp-ui .bp-bw-options .bp-option-card { min-height: 64px; }
.bp-ui .bp-bw-options .bp-option-card:focus-visible { outline: var(--bp-focus-ring, 2px solid var(--bp-focus-color)); outline-offset: 2px; }
.bp-ui .bp-bw-any .bp-option-card__media { background: var(--bp-c-primary-soft); color: var(--bp-c-primary-text); }
@container bp-bw (min-width: 560px) {
  .bp-ui .bp-bw-options--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------- date/time */

.bp-ui .bp-bw-datetime__grid { display: grid; gap: var(--bp-s-5); grid-template-columns: minmax(0, 1fr); }
.bp-ui .bp-bw-datetime__notice { margin-bottom: var(--bp-s-4); }
.bp-ui .bp-bw-cal-error { margin-top: var(--bp-s-3); }
.bp-ui .bp-bw-slot-skel { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--bp-s-2); }
.bp-ui .bp-bw-tz { display: flex; align-items: flex-start; gap: var(--bp-s-2); margin-top: var(--bp-s-4); color: var(--bp-c-text-3); font-size: var(--bp-fs-xs); }
.bp-ui .bp-bw-tz svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; }
@container bp-bw (min-width: 560px) {
  .bp-ui .bp-bw-datetime__grid { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); align-items: start; }
}

/* ---------------------------------------------------------------- details */

.bp-ui .bp-bw-account {
  display: flex;
  align-items: center;
  gap: var(--bp-s-2);
  margin-bottom: var(--bp-s-4);
  padding: var(--bp-s-3);
  border-radius: var(--bp-r-md);
  background: var(--bp-c-surface-2);
  border: 1px solid var(--bp-c-border);
  color: var(--bp-c-text-2);
  font-size: var(--bp-fs-sm);
}
.bp-ui .bp-bw-account svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--bp-c-primary-text); }
.bp-ui .bp-bw-account a { color: var(--bp-c-link); font-weight: var(--bp-fw-semibold); }
.bp-ui .bp-bw-fieldset { border: 0; margin: 0 0 var(--bp-s-5); padding: 0; min-width: 0; }
.bp-ui .bp-bw-fieldset > .bp-bw-subhead { padding: 0; }
.bp-ui .bp-bw-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bp-s-4); }
.bp-ui .bp-bw-terms { margin-top: var(--bp-s-2); }
.bp-ui .bp-bw-terms a { color: var(--bp-c-link); }
@container bp-bw (min-width: 520px) {
  .bp-ui .bp-bw-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-ui .bp-bw-field--full { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- summary */

.bp-ui .bp-bw-summary { display: none; }
.bp-ui .bp-bw-summary__title { font-size: var(--bp-fs-md); font-weight: var(--bp-fw-semibold); margin-bottom: var(--bp-s-4); }

.bp-ui .bp-bw-sumlist { display: flex; flex-direction: column; gap: var(--bp-s-3); }
.bp-ui .bp-bw-sumlist__row { display: flex; align-items: flex-start; gap: var(--bp-s-3); }
.bp-ui .bp-bw-sumlist__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--bp-r-sm);
  background: var(--bp-c-primary-soft);
  color: var(--bp-c-primary-text);
}
.bp-ui .bp-bw-sumlist__icon svg { width: 16px; height: 16px; }
.bp-ui .bp-bw-sumlist__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.bp-ui .bp-bw-sumlist__label { font-size: var(--bp-fs-xs); color: var(--bp-c-text-3); text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--bp-fw-semibold); }
.bp-ui .bp-bw-sumlist__value { font-weight: var(--bp-fw-semibold); overflow-wrap: anywhere; }
.bp-ui .bp-bw-sumlist__sub { font-size: var(--bp-fs-sm); color: var(--bp-c-text-2); overflow-wrap: anywhere; }
.bp-ui .bp-bw-sumlist__edit { flex: 0 0 auto; }

.bp-ui .bp-bw-price { margin: var(--bp-s-4) 0 0; padding-top: var(--bp-s-4); border-top: 1px solid var(--bp-c-border); display: flex; flex-direction: column; gap: var(--bp-s-2); }
.bp-ui .bp-bw-price__row { display: flex; justify-content: space-between; gap: var(--bp-s-3); font-size: var(--bp-fs-md); color: var(--bp-c-text-2); }
.bp-ui .bp-bw-price__row dd { margin: 0; font-variant-numeric: tabular-nums; }
.bp-ui .bp-bw-price__row--discount dd { color: var(--bp-c-success); }
.bp-ui .bp-bw-price__row--total { color: var(--bp-c-text); font-size: var(--bp-fs-lg); font-weight: var(--bp-fw-semibold); }

/* Mobile summary bar (sticky, expands upwards) */
.bp-ui .bp-bw-sumbar { position: sticky; inset-block-end: 0; z-index: 3; border-top: 1px solid var(--bp-c-border); background: var(--bp-c-surface-2); }
.bp-ui .bp-bw--modal .bp-bw-sumbar { position: static; }
.bp-ui .bp-bw-sumbar__panel { max-height: 45vh; max-height: 45dvh; overflow-y: auto; padding: var(--bp-s-4) var(--bp-s-4) var(--bp-s-2); border-bottom: 1px solid var(--bp-c-border); }
.bp-ui .bp-bw-sumbar__panel[hidden] { display: none; }
.bp-ui .bp-bw-sumbar__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bp-s-3);
  width: 100%;
  min-height: 48px;
  padding: 0 var(--bp-s-4);
  border: 0;
  background: none;
  color: var(--bp-c-text);
  font: inherit;
  font-weight: var(--bp-fw-semibold);
  cursor: pointer;
}
.bp-ui .bp-bw-sumbar__label,
.bp-ui .bp-bw-sumbar__total { display: inline-flex; align-items: center; gap: var(--bp-s-2); }
.bp-ui .bp-bw-sumbar__label { color: var(--bp-c-text-2); font-weight: var(--bp-fw-medium); font-size: var(--bp-fs-sm); }
.bp-ui .bp-bw-sumbar svg { width: 16px; height: 16px; }

/* ----------------------------------------------------------------- review */

.bp-ui .bp-bw-review { display: flex; flex-direction: column; gap: var(--bp-s-5); }
.bp-ui .bp-bw-review__block { padding: var(--bp-s-4); border: 1px solid var(--bp-c-border); border-radius: var(--bp-r-lg); background: var(--bp-c-surface); }
.bp-ui .bp-bw-review__head { display: flex; align-items: center; justify-content: space-between; gap: var(--bp-s-3); }
.bp-ui .bp-bw-review__head .bp-bw-subhead { margin-bottom: var(--bp-s-3); }
.bp-ui .bp-bw-review__dl { display: flex; flex-direction: column; gap: var(--bp-s-2); margin: 0; }
.bp-ui .bp-bw-review__row { display: flex; justify-content: space-between; gap: var(--bp-s-4); font-size: var(--bp-fs-md); }
.bp-ui .bp-bw-review__row dt { color: var(--bp-c-text-2); flex: 0 0 auto; }
.bp-ui .bp-bw-review__row dd { margin: 0; text-align: end; font-weight: var(--bp-fw-medium); overflow-wrap: anywhere; min-width: 0; }
.bp-ui .bp-bw-review__method { display: flex; align-items: center; gap: var(--bp-s-2); margin: 0 0 var(--bp-s-3); font-weight: var(--bp-fw-medium); }
.bp-ui .bp-bw-review__method svg { width: 18px; height: 18px; color: var(--bp-c-primary-text); }
.bp-ui .bp-bw-review__block .bp-bw-price { margin-top: var(--bp-s-3); }

.bp-ui .bp-bw-promo { margin-bottom: var(--bp-s-2); }
.bp-ui .bp-bw-promo__row { display: flex; gap: var(--bp-s-2); margin-top: var(--bp-s-1); }
.bp-ui .bp-bw-promo__row .bp-input-wrap,
.bp-ui .bp-bw-promo__row .bp-input { flex: 1 1 auto; min-width: 0; }
.bp-ui .bp-bw-promo--applied { display: flex; align-items: center; gap: var(--bp-s-2); padding: var(--bp-s-2) var(--bp-s-3); border-radius: var(--bp-r-md); background: var(--bp-c-success-soft); border: 1px solid var(--bp-c-success-border); color: var(--bp-c-success); }
.bp-ui .bp-bw-promo--applied svg { width: 16px; height: 16px; }
.bp-ui .bp-bw-promo--applied .bp-btn { margin-inline-start: auto; }

.bp-ui .bp-bw-stripe { display: flex; flex-direction: column; gap: var(--bp-s-3); margin-top: var(--bp-s-4); }
.bp-ui .bp-bw-stripe__form { display: flex; flex-direction: column; gap: var(--bp-s-4); }
.bp-ui .bp-bw-stripe__loading { display: flex; flex-direction: column; gap: var(--bp-s-3); margin-top: var(--bp-s-4); }

/* ------------------------------------------------------------ confirmation */

.bp-ui .bp-bw-confirm { display: flex; flex-direction: column; gap: var(--bp-s-5); max-width: 640px; margin-inline: auto; }
.bp-ui .bp-bw-confirm__loading { display: flex; flex-direction: column; align-items: center; gap: var(--bp-s-4); padding: var(--bp-s-6) 0; }
.bp-ui .bp-bw-confirm__hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--bp-s-2); padding: var(--bp-s-4) 0 0; }
.bp-ui .bp-bw-confirm__badge { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--bp-c-success-soft); color: var(--bp-c-success); }
.bp-ui .bp-bw-confirm__hero--warning .bp-bw-confirm__badge { background: var(--bp-c-warning-soft); color: var(--bp-c-warning); }
.bp-ui .bp-bw-confirm__hero--danger .bp-bw-confirm__badge { background: var(--bp-c-danger-soft); color: var(--bp-c-danger); }
.bp-ui .bp-bw-confirm__badge svg { width: 32px; height: 32px; }
.bp-ui .bp-bw-confirm__title { font-size: var(--bp-fs-2xl); font-weight: var(--bp-fw-semibold); letter-spacing: -0.02em; }
.bp-ui .bp-bw-confirm__title:focus { outline: none; }
.bp-ui .bp-bw-confirm__sub { color: var(--bp-c-text-2); max-width: 46ch; }
.bp-ui .bp-bw-confirm__ref { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--bp-s-2) var(--bp-s-3); padding: var(--bp-s-3) var(--bp-s-4); border-radius: var(--bp-r-lg); background: var(--bp-c-surface-2); border: 1px dashed var(--bp-c-border-strong); }
.bp-ui .bp-bw-confirm__ref-label { color: var(--bp-c-text-2); font-size: var(--bp-fs-sm); }
.bp-ui .bp-bw-confirm__ref-value { font-size: var(--bp-fs-lg); font-weight: var(--bp-fw-bold); font-variant-numeric: tabular-nums; }
.bp-ui .bp-bw-confirm__details { display: flex; flex-direction: column; margin: 0; border: 1px solid var(--bp-c-border); border-radius: var(--bp-r-lg); overflow: hidden; }
.bp-ui .bp-bw-confirm__details > div { display: flex; justify-content: space-between; gap: var(--bp-s-4); padding: var(--bp-s-3) var(--bp-s-4); }
.bp-ui .bp-bw-confirm__details > div + div { border-top: 1px solid var(--bp-c-border); }
.bp-ui .bp-bw-confirm__details dt { color: var(--bp-c-text-2); flex: 0 0 auto; }
.bp-ui .bp-bw-confirm__details dd { margin: 0; text-align: end; font-weight: var(--bp-fw-medium); overflow-wrap: anywhere; min-width: 0; }
.bp-ui .bp-bw-confirm__muted { color: var(--bp-c-text-3); font-weight: var(--bp-fw-regular); }
.bp-ui .bp-bw-confirm__buttons,
.bp-ui .bp-bw-confirm__actions { display: flex; flex-wrap: wrap; gap: var(--bp-s-2); }
.bp-ui .bp-bw-confirm__actions { justify-content: center; }

/* ------------------------------------------------------- wide layout (2 col) */

@container bp-bw (min-width: 760px) {
  .bp-ui .bp-bw-steps { display: flex; }
  .bp-ui .bp-bw-progress__count { display: none; }
  .bp-ui .bp-bw-progress__bar { display: none; }
  .bp-ui .bp-bw__content { grid-template-columns: minmax(0, 1fr) 320px; }
  .bp-ui .bp-bw-summary {
    display: block;
    align-self: start;
    position: sticky;
    inset-block-start: 0;
    margin: var(--bp-s-3) var(--bp-s-6) var(--bp-s-6) 0;
    padding: var(--bp-s-5);
    border: 1px solid var(--bp-c-border);
    border-radius: var(--bp-r-lg);
    background: var(--bp-c-surface-2);
  }
  [dir="rtl"] .bp-ui .bp-bw-summary,
  .bp-ui[dir="rtl"] .bp-bw-summary { margin: var(--bp-s-3) 0 var(--bp-s-6) var(--bp-s-6); }
  .bp-ui .bp-bw-sumbar { display: none; }
  .bp-ui .bp-bw__footer { padding-inline: var(--bp-s-6); }
}

/* -------------------------------------------------------- narrow widgets */

@container bp-bw (max-width: 559px) {
  .bp-ui .bp-bw__header { padding: var(--bp-s-4) var(--bp-s-4) var(--bp-s-2); }
  .bp-ui .bp-bw__title { font-size: var(--bp-fs-lg); }
  .bp-ui .bp-bw-progress { padding: 0 var(--bp-s-4) var(--bp-s-2); }
  .bp-ui .bp-bw__main { padding: var(--bp-s-2) var(--bp-s-4) var(--bp-s-5); }
  .bp-ui .bp-bw__footer { padding: var(--bp-s-3) var(--bp-s-4); padding-block-end: max(var(--bp-s-3), env(safe-area-inset-bottom)); }
  .bp-ui .bp-bw__continue { flex: 1 1 auto; }
  .bp-ui .bp-bw-confirm__actions .bp-btn,
  .bp-ui .bp-bw-confirm__buttons .bp-btn { flex: 1 1 100%; }
}

/* Full-screen dialog on phones */
@media (max-width: 640px) {
  .bp-ui .bp-bw-dialog { height: 100%; }
}

/* Compact option (shortcode compact="1") */
.bp-ui .bp-bw--compact .bp-bw-options .bp-option-card { min-height: 52px; padding: var(--bp-s-2) var(--bp-s-3); }
.bp-ui .bp-bw--compact .bp-option-card__media { width: 40px; height: 40px; }

@media (prefers-reduced-motion: reduce) {
  .bp-ui .bp-bw-progress__bar > span { transition: none; }
}

/* The confirmation screen brings its own heading; keep the header slim. */
.bp-ui .bp-bw[data-step="confirmation"] .bp-bw__header { padding-block-end: 0; }
.bp-ui .bp-bw--inline[data-step="confirmation"] .bp-bw__header { padding: 0; min-height: 0; }

/* Staff photos/initials are round; no tile behind them. */
.bp-ui .bp-bw-options .bp-option-card__media:has(.bp-avatar) { background: none; border-radius: 0; overflow: visible; }

/* ======================================================================
   Manage booking page and "My bookings" portal (server-rendered)
   ====================================================================== */

.bp-ui.bp-manage { min-height: 100vh; min-height: 100dvh; background: var(--bp-c-bg); padding: var(--bp-s-8) var(--bp-s-4); }
.bp-ui .bp-manage__wrap { max-width: 640px; margin-inline: auto; }
.bp-ui .bp-manage__card,
.bp-ui .bp-portal__card { display: flex; flex-direction: column; gap: var(--bp-s-4); padding: var(--bp-s-6); }
.bp-ui .bp-manage__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bp-s-3); }
.bp-ui .bp-manage__title { margin: 0; }
.bp-ui .bp-manage__ref { margin: var(--bp-s-1) 0 0; }
.bp-ui .bp-manage__calendar { display: flex; flex-wrap: wrap; gap: var(--bp-s-2); }
.bp-ui .bp-manage__section { display: flex; flex-direction: column; gap: var(--bp-s-3); padding-top: var(--bp-s-4); border-top: 1px solid var(--bp-c-border); }
.bp-ui .bp-manage__panel { border: 1px solid var(--bp-c-border); border-radius: var(--bp-r-lg); background: var(--bp-c-surface); }
.bp-ui .bp-manage__summary { display: flex; align-items: center; gap: var(--bp-s-3); padding: var(--bp-s-3) var(--bp-s-4); cursor: pointer; list-style: none; border-radius: var(--bp-r-lg); }
.bp-ui .bp-manage__summary::-webkit-details-marker { display: none; }
.bp-ui .bp-manage__summary:focus-visible { outline: 2px solid var(--bp-focus-color); outline-offset: 2px; }
.bp-ui .bp-manage__summary-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--bp-r-sm); background: var(--bp-c-primary-soft); color: var(--bp-c-primary-text); flex: 0 0 auto; }
.bp-ui .bp-manage__summary-title { display: block; font-weight: var(--bp-fw-semibold); }
.bp-ui .bp-manage__summary-sub { display: block; font-size: var(--bp-fs-sm); color: var(--bp-c-text-2); }
.bp-ui .bp-manage__panel[open] > .bp-manage__summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 1px solid var(--bp-c-border); }
.bp-ui .bp-manage__panel-body { display: flex; flex-direction: column; gap: var(--bp-s-4); padding: var(--bp-s-4); }
.bp-ui .bp-manage__panel-body .bp-r-msg { margin: 0; min-height: 1.4em; font-size: var(--bp-fs-sm); }
.bp-ui .bp-manage__panel-body .bp-input { max-width: 260px; }
.bp-ui .bp-manage__cancel { display: flex; }
.bp-ui .bp-manage__foot { text-align: center; margin-top: var(--bp-s-4); font-size: var(--bp-fs-sm); }
.bp-ui .bp-manage__foot a { color: inherit; }
.bp-ui .bp-r-slots-wrap[hidden] { display: none; }
.bp-ui .bp-r-slots { display: flex; flex-direction: column; gap: var(--bp-s-4); margin-top: var(--bp-s-2); }
.bp-ui .bp-r-submit { align-self: flex-start; }

.bp-ui .bp-manage-dialog { max-width: min(420px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--bp-c-border); border-radius: var(--bp-r-xl); background: var(--bp-c-surface); color: var(--bp-c-text); box-shadow: var(--bp-sh-xl); }
.bp-ui .bp-manage-dialog::backdrop { background: var(--bp-c-overlay); }
.bp-ui .bp-manage-dialog__form { display: flex; flex-direction: column; gap: var(--bp-s-3); padding: var(--bp-s-6); }
.bp-ui .bp-manage-dialog__text { color: var(--bp-c-text-2); }
.bp-ui .bp-manage-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--bp-s-2); margin-top: var(--bp-s-2); }

/* Portal */
.bp-ui.bp-portal { display: block; padding: var(--bp-s-4) 0; }
.bp-ui .bp-portal__card { max-width: 440px; margin-inline: auto; }
.bp-ui .bp-portal__card--wide { max-width: 720px; }
.bp-ui .bp-portal__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--bp-r-lg); background: var(--bp-c-primary-soft); color: var(--bp-c-primary-text); }
.bp-ui .bp-portal__form { display: flex; flex-direction: column; gap: var(--bp-s-4); }
.bp-ui .bp-portal__otp { font-size: var(--bp-fs-xl); letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums; }
.bp-ui .bp-portal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bp-s-3); }
.bp-ui .bp-portal__group { font-size: var(--bp-fs-sm); font-weight: var(--bp-fw-semibold); color: var(--bp-c-text-3); text-transform: uppercase; letter-spacing: 0.05em; margin: var(--bp-s-2) 0 0; }
.bp-ui .bp-portal__list { display: flex; flex-direction: column; gap: var(--bp-s-2); }
.bp-ui .bp-portal__item { display: flex; align-items: center; gap: var(--bp-s-4); padding: var(--bp-s-3) var(--bp-s-4); border: 1px solid var(--bp-c-border); border-radius: var(--bp-r-lg); background: var(--bp-c-surface); }
.bp-ui .bp-portal__list--past .bp-portal__item { background: var(--bp-c-surface-2); }
.bp-ui .bp-portal__when { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--bp-r-md); background: var(--bp-c-primary-soft); color: var(--bp-c-primary-text); line-height: 1.1; }
.bp-ui .bp-portal__day { font-size: var(--bp-fs-xl); font-weight: var(--bp-fw-bold); font-variant-numeric: tabular-nums; }
.bp-ui .bp-portal__month { font-size: var(--bp-fs-xs); text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--bp-fw-semibold); }
.bp-ui .bp-portal__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.bp-ui .bp-portal__name { font-weight: var(--bp-fw-semibold); overflow-wrap: anywhere; }
.bp-ui .bp-portal__meta { color: var(--bp-c-text-2); font-size: var(--bp-fs-sm); }
.bp-ui .bp-portal__side { flex: 0 0 auto; display: flex; align-items: center; gap: var(--bp-s-3); }

@media (max-width: 540px) {
  .bp-ui.bp-manage { padding: var(--bp-s-4) var(--bp-s-3); }
  .bp-ui .bp-manage__card,
  .bp-ui .bp-portal__card { padding: var(--bp-s-4); }
  .bp-ui .bp-manage__head { flex-direction: column; }
  .bp-ui .bp-manage__calendar .bp-btn { flex: 1 1 100%; }
  .bp-ui .bp-portal__item { flex-wrap: wrap; }
  .bp-ui .bp-portal__side { flex: 1 1 100%; justify-content: space-between; }
  .bp-ui .bp-r-submit { align-self: stretch; }
}

/* Dynamic values (names, durations, prices, addresses) take their own direction,
   so "1 hr" or "$30" is not reordered inside a right-to-left interface. */
.bp-ui .bp-bw-sumlist__value,
.bp-ui .bp-bw-sumlist__sub,
.bp-ui .bp-bw-review__row dd,
.bp-ui .bp-bw-confirm__details dd,
.bp-ui .bp-bw-price__row dd,
.bp-ui .bp-option-card__title,
.bp-ui .bp-option-card__desc,
.bp-ui .bp-option-card__meta,
.bp-ui .bp-option-card__price,
.bp-ui .bp-portal__name,
.bp-ui .bp-portal__meta,
.bp-ui .bp-dl__desc { unicode-bidi: plaintext; }