/* =============================================================
   BOOKING OVERLAY — full-page wizard (4 steps)
   Styles theme markup + the nodes booking-flow.js injects.
   ============================================================= */

.bk-booking { position: fixed; inset: 0; z-index: var(--bk-z-overlay); display: none; }
.bk-booking.is-open { display: block; }
.bk-booking__backdrop { position: absolute; inset: 0; background: var(--bk-overlay); }
.bk-booking__panel { position: absolute; inset: 0; height: 100vh; height: 100dvh; background: var(--bk-bg); display: flex; animation: bk-booking-in var(--bk-dur) var(--bk-ease-out); }
@keyframes bk-booking-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.bk-booking [hidden] { display: none !important; }

/* grid-template-rows must be constrained, otherwise the implicit row defaults to
   `auto`, grows past 100vh and the inner .bk-booking__body overflow:auto never
   kicks in (the page can't scroll to the lower time slots / "ادامه"). */
.bk-booking__wizard { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: minmax(0, 1fr); width: 100%; height: 100%; min-height: 0; }
.bk-booking__content { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; }

/* Toolbar */
.bk-booking__toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--bk-space-3); padding: var(--bk-space-4) var(--bk-space-8); border-bottom: 1px solid var(--bk-border); }
.bk-booking__brand { display: inline-flex; }

/* Steps breadcrumb */
.bk-steps { display: flex; align-items: center; gap: var(--bk-space-2); padding: var(--bk-space-5) var(--bk-space-8); flex-wrap: wrap; }
.bk-steps__item { display: inline-flex; align-items: center; gap: 8px; color: var(--bk-text-faint); font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-medium); }
.bk-steps__dot { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--bk-fs-xs); font-weight: var(--bk-fw-bold); background: var(--bk-surface-2); color: var(--bk-text-muted); transition: all var(--bk-dur-fast) var(--bk-ease); }
.bk-steps__item.is-active { color: var(--bk-text); }
.bk-steps__item.is-active .bk-steps__dot { background: var(--bk-ink); color: #fff; }
.bk-steps__item.is-done .bk-steps__dot { background: var(--bk-primary); color: #fff; }
.bk-steps__sep { width: 22px; height: 2px; background: var(--bk-border); border-radius: 2px; }

/* Body / panes — content column centered like a focused checkout flow */
.bk-booking__body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 var(--bk-space-8) var(--bk-space-8); }
.bk-booking__body > .bk-booking__heading,
.bk-booking__body > .bk-booking__pane { width: 100%; max-width: 720px; margin-inline: auto; }
.bk-steps { width: 100%; max-width: 720px; margin-inline: auto; }
.bk-booking__heading { font-size: var(--bk-fs-h3); font-weight: var(--bk-fw-bold); margin-bottom: var(--bk-space-5); }
.bk-booking__subheading { font-size: var(--bk-fs-h4); font-weight: var(--bk-fw-semibold); }
.bk-booking__hint { color: var(--bk-text-muted); font-size: var(--bk-fs-sm); margin-bottom: var(--bk-space-4); background: var(--bk-surface); padding: 12px 14px; border-radius: var(--bk-radius-input); }
.bk-empty { color: var(--bk-text-muted); padding: var(--bk-space-6); text-align: center; }

/* Step 1: service cards */
.bk-svc-chips { display: flex; gap: 8px; margin-bottom: var(--bk-space-4); }
.bk-svc-list { display: flex; flex-direction: column; gap: var(--bk-space-3); }
.bk-svc { display: flex; align-items: center; gap: var(--bk-space-4); padding: var(--bk-space-5); border-radius: var(--bk-radius-card); box-shadow: inset 0 0 0 1px var(--bk-border); transition: box-shadow var(--bk-dur-fast) var(--bk-ease); }
.bk-svc:hover { box-shadow: inset 0 0 0 1px var(--bk-border-strong); }
.bk-svc__body { flex: 1; min-width: 0; }
.bk-svc__name { font-weight: var(--bk-fw-semibold); }
.bk-svc__meta { color: var(--bk-text-muted); font-size: var(--bk-fs-sm); margin-top: 4px; }
.bk-svc__price { font-weight: var(--bk-fw-bold); margin-top: 6px; }
.bk-svc__add { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--bk-radius-circle); display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1.5px var(--bk-ink); color: var(--bk-ink); transition: all var(--bk-dur-fast) var(--bk-ease); }
.bk-svc__add:hover { background: var(--bk-hover); }
.bk-svc__add.is-added { background: var(--bk-primary); color: #fff; box-shadow: none; }
.bk-svc__add.is-added i::before { content: "\f00c"; } /* check */
.bk-svc:has(.is-added) { box-shadow: inset 0 0 0 1.5px var(--bk-primary); }

/* Step 2: pro grid */
.bk-pro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--bk-space-4); max-width: 680px; }
.mp-pro-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: var(--bk-space-5) var(--bk-space-3); border-radius: var(--bk-radius-card); box-shadow: inset 0 0 0 1px var(--bk-border); background: var(--bk-bg); transition: box-shadow var(--bk-dur-fast) var(--bk-ease), transform var(--bk-dur-fast) var(--bk-ease); }
.mp-pro-card:hover { box-shadow: inset 0 0 0 1px var(--bk-border-strong); transform: translateY(-2px); }
.mp-pro-card.is-selected { box-shadow: inset 0 0 0 2px var(--bk-primary); }
.mp-pro-card__avatar { width: 72px; height: 72px; border-radius: var(--bk-radius-circle); object-fit: cover; background: var(--bk-surface-2); display: flex; align-items: center; justify-content: center; }
.mp-pro-card__avatar--any { background: var(--bk-primary-tint); color: var(--bk-primary-600); font-size: 24px; }
.mp-pro-card__name { font-weight: var(--bk-fw-semibold); font-size: var(--bk-fs-sm); }
.mp-pro-card__role { color: var(--bk-text-muted); font-size: var(--bk-fs-xs); }
.mp-pro-card__rating { color: var(--bk-star); font-size: var(--bk-fs-xs); font-weight: var(--bk-fw-semibold); }

/* Step 3: date strip + schedule */
.bk-datetime__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--bk-space-4); }
.bk-date-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.bk-date-strip::-webkit-scrollbar { display: none; }
.fr-date-card { flex: 0 0 auto; width: 86px; padding: 12px 6px; border-radius: var(--bk-radius-input); box-shadow: inset 0 0 0 1px var(--bk-border); background: var(--bk-bg); text-align: center; display: flex; flex-direction: column; gap: 2px; transition: all var(--bk-dur-fast) var(--bk-ease); }
.fr-date-card:hover { box-shadow: inset 0 0 0 1px var(--bk-ink); }
.fr-date-card.is-selected { background: var(--bk-ink); color: #fff; box-shadow: none; }
.fr-date-card__dow { font-size: var(--bk-fs-xs); color: var(--bk-text-muted); white-space: nowrap; }
.fr-date-card.is-selected .fr-date-card__dow, .fr-date-card.is-selected .fr-date-card__mon { color: rgba(255,255,255,0.75); }
.fr-date-card__day { font-size: var(--bk-fs-h4); font-weight: var(--bk-fw-bold); }
.fr-date-card__mon { font-size: var(--bk-fs-xs); color: var(--bk-text-muted); }

.bk-date-wrap { position: relative; margin-top: var(--bk-space-3); }
.bk-schedule { margin-top: var(--bk-space-6); }
.bk-schedule__main { margin-top: var(--bk-space-4); display: flex; flex-direction: column; gap: var(--bk-space-4); }
.bk-schedule__nav { display: flex; justify-content: space-between; gap: var(--bk-space-3); margin-top: var(--bk-space-4); }
.mp-schedule-card, .fr-time-panel { padding: var(--bk-space-4); border-radius: var(--bk-radius-card); box-shadow: inset 0 0 0 1px var(--bk-border); }
.fr-time-panel__service { font-weight: var(--bk-fw-semibold); margin-bottom: var(--bk-space-3); }
.mp-slots, .fr-time-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.mp-slot { padding: 10px 8px; border-radius: var(--bk-radius-sm); box-shadow: inset 0 0 0 1px var(--bk-border); background: var(--bk-bg); font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-medium); text-align: center; transition: all var(--bk-dur-fast) var(--bk-ease); }
.mp-slot:hover { box-shadow: inset 0 0 0 1px var(--bk-ink); }
.mp-slot.is-selected { background: var(--bk-primary); color: #fff; box-shadow: none; }
/* Taken / blocked / past half-hour slots: greyed-out, struck through, unselectable. */
.mp-slot.is-disabled { background: var(--bk-surface-2, #f1eff7); color: var(--bk-text-faint, #b3afc0); box-shadow: none; cursor: not-allowed; text-decoration: line-through; opacity: .65; }
.mp-slot.is-disabled:hover { box-shadow: none; }
.mp-slots__status { grid-column: 1 / -1; color: var(--bk-text-muted); font-size: var(--bk-fs-sm); padding: var(--bk-space-4); text-align: center; }

/* Stepper (per-service progress) */
.bk-stepper { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--bk-space-4); }
.mp-book-step { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--bk-radius-pill); background: var(--bk-surface-2); font-size: var(--bk-fs-sm); cursor: pointer; transition: all var(--bk-dur-fast) var(--bk-ease); }
/* Highlight the service currently being modified (item 27). JS adds `is-active`. */
/* Item 9 — the service currently being configured (staff/time) is unmistakably
   highlighted with a SOLID primary fill, not just a light tint. */
.mp-book-step.is-active, .mp-book-step.is-schedule-active { background: var(--bk-primary); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--bk-primary) 35%, transparent); font-weight: var(--bk-fw-bold); }
.mp-book-step.is-active .mp-book-step__num, .mp-book-step.is-schedule-active .mp-book-step__num { background: rgba(255,255,255,0.28); color: #fff; }
.mp-book-step.is-done { color: var(--bk-primary-700); box-shadow: inset 0 0 0 1px var(--bk-primary); }
.mp-book-step__num { width: 20px; height: 20px; border-radius: 50%; background: var(--bk-bg); display: inline-flex; align-items: center; justify-content: center; font-size: var(--bk-fs-xs); font-weight: var(--bk-fw-bold); }
.mp-book-step__check { color: var(--bk-success); }

/* Step 4: confirm */
.bk-confirm { display: flex; flex-direction: column; gap: var(--bk-space-3); max-width: 560px; }
.mp-confirm-row { display: flex; align-items: center; justify-content: space-between; gap: var(--bk-space-4); padding: var(--bk-space-4); border-radius: var(--bk-radius-card); box-shadow: inset 0 0 0 1px var(--bk-border); flex-wrap: wrap; }
.mp-confirm-row__title { font-weight: var(--bk-fw-semibold); }
.mp-confirm-row__meta { color: var(--bk-text-muted); font-size: var(--bk-fs-sm); margin-top: 2px; }
.mp-confirm-row--totals { box-shadow: none; background: var(--bk-surface); font-weight: var(--bk-fw-bold); font-size: var(--bk-fs-lg); }
/* Per-service payment-option chips (items 9+13) — own full-width line in the row. */
.mp-confirm-pay { flex: 0 0 100%; margin-top: 8px; border-top: 1px dashed var(--bk-border); padding-top: 8px; }
.mp-confirm-pay__label { font-size: 12px; color: var(--bk-text-muted); margin-bottom: 6px; }
.mp-confirm-pay__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-confirm-pay__opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; border-radius: var(--bk-radius-input); box-shadow: inset 0 0 0 1px var(--bk-border); background: var(--bk-bg); cursor: pointer; font-size: 13px; color: var(--bk-text); }
.mp-confirm-pay__opt small { color: var(--bk-text-muted); font-size: 11px; }
.mp-confirm-pay__opt.is-active { box-shadow: inset 0 0 0 2px var(--bk-primary); background: var(--bk-primary-tint); color: var(--bk-primary-700); }
.mp-confirm-pay__opt.is-active small { color: var(--bk-primary-700); }

/* ---- Cart summary sidebar ---- */
.bk-cart { background: var(--bk-surface); border-inline-start: 1px solid var(--bk-border); display: flex; flex-direction: column; height: 100%; min-height: 0; padding: var(--bk-space-6); }
.bk-cart__head { display: flex; gap: 12px; padding-bottom: var(--bk-space-5); border-bottom: 1px solid var(--bk-border); }
.bk-cart__thumb { width: 64px; height: 64px; border-radius: var(--bk-radius-input); object-fit: cover; flex: 0 0 auto; background: var(--bk-surface-2); }
.bk-cart__venue { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bk-cart__salon { font-weight: var(--bk-fw-bold); }
.bk-cart__rating { display: inline-flex; align-items: center; gap: 5px; font-size: var(--bk-fs-sm); color: var(--bk-text-muted); }
.bk-cart__rating i { color: var(--bk-star); }
.bk-cart__rating strong { color: var(--bk-text); }
.bk-cart__address { color: var(--bk-text-muted); font-size: var(--bk-fs-xs); }
.bk-cart__items { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-block: var(--bk-space-4); display: flex; flex-direction: column; gap: var(--bk-space-3); }
.bk-cart__empty { color: var(--bk-text-faint); font-size: var(--bk-fs-sm); text-align: center; padding: var(--bk-space-8) 0; }
.mp-drawer-summary__item { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mp-drawer-summary__item-name { font-weight: var(--bk-fw-medium); font-size: var(--bk-fs-sm); }
.mp-drawer-summary__item-meta { color: var(--bk-text-muted); font-size: var(--bk-fs-xs); margin-top: 2px; }
.mp-drawer-summary__item-price { font-weight: var(--bk-fw-semibold); font-size: var(--bk-fs-sm); white-space: nowrap; }
.bk-cart__total { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding-block: var(--bk-space-4); border-top: 1px solid var(--bk-border); }
.bk-cart__total-label { color: var(--bk-text-muted); }
.bk-cart__total-value { font-size: var(--bk-fs-h4); font-weight: var(--bk-fw-extrabold); }
/* CTA footer must never be squeezed out — it holds the booking button. */
.bk-cart__foot { flex: 0 0 auto; padding-top: var(--bk-space-2); }
.bk-cart__foot .bk-btn { width: 100%; }

/* ---- Auth modal ---- */
.bk-authmodal { position: fixed; inset: 0; z-index: var(--bk-z-modal); display: flex; align-items: center; justify-content: center; padding: var(--bk-space-5); }
.bk-authmodal[hidden] { display: none; }
.bk-authmodal__backdrop { position: absolute; inset: 0; background: var(--bk-overlay); }
.bk-authmodal__panel { position: relative; z-index: 1; background: var(--bk-bg); border-radius: var(--bk-radius-lg); padding: var(--bk-space-8); max-width: 400px; width: 100%; text-align: center; box-shadow: var(--bk-shadow-xl); display: flex; flex-direction: column; gap: var(--bk-space-3); }
.bk-authmodal__close { position: absolute; top: var(--bk-space-4); inset-inline-end: var(--bk-space-4); }
.bk-authmodal__icon { width: 56px; height: 56px; border-radius: var(--bk-radius-circle); background: var(--bk-primary-tint); color: var(--bk-primary-600); display: inline-flex; align-items: center; justify-content: center; font-size: 24px; margin-inline: auto; }
.bk-authmodal__title { font-size: var(--bk-fs-h4); font-weight: var(--bk-fw-bold); }
.bk-authmodal__text { color: var(--bk-text-muted); font-size: var(--bk-fs-sm); margin-bottom: var(--bk-space-2); }

/* Jalali datepicker styles live in pickers.css (global). */

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .bk-booking__wizard { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  /* Cart collapses to a sticky checkout bar: total + CTA only */
  .bk-cart { border-inline-start: none; border-top: 1px solid var(--bk-border); height: auto; padding: var(--bk-space-3) var(--bk-space-5) calc(var(--bk-space-3) + env(safe-area-inset-bottom)); background: var(--bk-bg); box-shadow: 0 -6px 20px rgba(21,19,31,0.08); }
  .bk-cart__head, .bk-cart__items { display: none; }
  .bk-cart__total { padding-block: 0 var(--bk-space-3); border-top: none; }
  .bk-cart__total-value { font-size: var(--bk-fs-lg); }
  /* The itemised lines are the only explanation of the total once the cart
     list is hidden, so they get a disclosure of their own here. Collapsed by
     default — the bar must not eat the screen — and capped in height so a long
     booking scrolls instead of pushing the CTA off.
     Selectors are `.bk-cart .bk-cart__x` on purpose: the desktop defaults for
     these are declared further down the file, and a plain single-class rule
     here would lose to them on source order alone. */
  .bk-cart .bk-cart__lines {
    display: flex; order: -1; margin: 0;
    max-height: 0; overflow: hidden; padding-top: 0; gap: 0;
    transition: max-height var(--bk-dur-normal) var(--bk-ease), padding-top var(--bk-dur-fast) var(--bk-ease);
  }
  .bk-cart .bk-cart__lines.is-open { max-height: 40vh; overflow-y: auto; padding-top: var(--bk-space-3); gap: 6px; }
  .bk-cart .bk-cart__toggle {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; padding: 4px 0 8px; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: var(--bk-fs-xs); color: var(--bk-primary);
    order: -2; /* above the lines, which are above the total (item 31) */
  }
  .bk-cart .bk-cart__toggle i { font-size: 10px; transition: transform var(--bk-dur-fast) var(--bk-ease); }
  .bk-cart .bk-cart__toggle[aria-expanded="true"] i { transform: rotate(180deg); }
  .bk-booking__body { padding-inline: var(--bk-space-4); }
  .bk-steps { padding: var(--bk-space-4); justify-content: center; }
  .bk-booking__toolbar { padding-inline: var(--bk-space-4); }
  .bk-steps__label { display: none; }
  .bk-booking__heading { font-size: var(--bk-fs-h4); }
  .bk-svc { padding: var(--bk-space-4); }
  .bk-pro-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}
@media (max-width: 480px) {
  .bk-steps__sep { width: 12px; }
  .fr-date-card { width: 78px; }
  .mp-slots, .fr-time-slots { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
}

/* Item 23 — fee/tax breakdown under the cart total during the flow. */
.bk-cart__breakdown { margin: 4px 0 0; font-size: var(--bk-fs-xs); color: var(--bk-text-muted); line-height: 1.6; }

/* Item 31 — the lines that add up to the payable total, above the total.
   Desktop already itemises everything in the cart list, so this block only
   earns its place on mobile, where that list is collapsed away. */
.bk-cart__lines { display: none; flex-direction: column; gap: 6px; padding-top: var(--bk-space-3); }
.bk-cart__line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bk-space-3); font-size: var(--bk-fs-sm); }
.bk-cart__line > span:first-child { color: var(--bk-text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-cart__line > span:last-child { flex: 0 0 auto; font-weight: var(--bk-fw-semibold); }
.bk-cart__line--fee > span { color: var(--bk-text-muted); font-weight: var(--bk-fw-normal); }
/* The per-service amount carries a second line («از ۷۰۰٬۰۰۰») in the cart list. */
.mp-drawer-summary__item-note { display: block; font-size: var(--bk-fs-xs); color: var(--bk-text-muted); font-weight: var(--bk-fw-normal); margin-top: 2px; }
.mp-confirm-row__note { color: var(--bk-text-muted); }

/* Desktop shows the cart list itself, so the disclosure is mobile-only.
   The [hidden] rules are declared after the responsive block on purpose: a
   `display` set there would otherwise beat the attribute and keep an empty
   cart's lines on screen. */
.bk-cart__toggle { display: none; }
.bk-cart__lines[hidden], .bk-cart__toggle[hidden] { display: none; }

/* Payment mode stated even when the salon offers only one. */
.mp-confirm-pay--single { display: flex; align-items: center; gap: 8px; }
.mp-confirm-pay__badge {
    display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
    background: var(--bk-primary-tint); color: var(--bk-primary-700);
    font-size: 12px; font-weight: var(--bk-fw-semibold);
}
.mp-confirm-pay--single small { color: var(--bk-text-muted); font-size: 11.5px; }

/* Item 24 — "first free slot" button in the time-panel header. */
.fr-time-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--bk-space-3); margin-bottom: var(--bk-space-3); flex-wrap: wrap; }
.fr-time-panel__firstfree {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: var(--bk-radius-pill);
    background: var(--bk-primary-tint, #f5f3ff); color: var(--bk-primary-700, #5b3df5);
    font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-bold);
    transition: background var(--bk-dur-fast) var(--bk-ease);
}
.fr-time-panel__firstfree:hover { background: color-mix(in srgb, var(--bk-primary, #5b3df5) 18%, #fff); }
.fr-time-panel__firstfree:disabled { opacity: .5; cursor: not-allowed; }