/* ──────────────────────────────────────────────────────────────────────────
   Bunsik Bites — shared cart UI  (Sept 2026)
   ══════════════════════════════════════════
   Styles for cart.js: the dish selection sheet, the persistent View Cart
   bar, and the "Add ↔ − n +" slot on a dish card.

   Everything is `bkc-` prefixed and every colour comes from the tokens the
   two pages already define (--brand, --text, --muted, --line, --surface),
   so the light/dark toggle keeps working with no rules of its own.

   Loaded AFTER each page's inline <style> so these rules win without
   !important; the site's own broad `button { position: relative; z-index: 22 }`
   rule cannot escape the two stacking contexts created below.
   ────────────────────────────────────────────────────────────────────── */

:root {
  --bkc-safe-b: env(safe-area-inset-bottom, 0px);
  --bkc-bar-space: 0px;
}

.bkc-num { font-variant-numeric: tabular-nums; }

/* ── dish sheet ──────────────────────────────────────────────────────── */

.bkc-sheet-root {
  position: fixed;
  inset: 0;
  z-index: 9500;      /* above menu.html's modals (190), below index.html's (10000) */
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.bkc-sheet-root[hidden] { display: none !important; }

.bkc-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 220ms ease;
}
.bkc-sheet-root.is-open .bkc-scrim { opacity: 1; }

.bkc-sheet {
  position: relative;
  width: min(520px, 100%);
  max-height: 88vh;
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  border-radius: 26px 26px 0 0;
  border: 1px solid rgba(245, 166, 35, 0.28);
  border-bottom: 0;
  background: #120b05;
  color: var(--text, #f7efe3);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.55);
  transform: translateY(14px);
  opacity: 0;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
}
.bkc-sheet-root.is-open .bkc-sheet { transform: translateY(0); opacity: 1; }

body[data-theme="light"] .bkc-sheet {
  background: #fffdf5;
  border-color: rgba(180, 100, 10, 0.26);
  color: #1b0c03;
}

@media (min-width: 720px) {
  .bkc-sheet-root { align-items: center; padding: 20px; }
  .bkc-sheet { border-radius: 26px; border-bottom: 1px solid rgba(245, 166, 35, 0.28); }
  body[data-theme="light"] .bkc-sheet { border-bottom-color: rgba(180, 100, 10, 0.26); }
  .bkc-sheet-grab { display: none; }
}

.bkc-sheet-grab {
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: rgba(245, 237, 220, 0.24);
  margin: 10px auto 0;
  flex: 0 0 auto;
}
body[data-theme="light"] .bkc-sheet-grab { background: rgba(27, 12, 3, 0.2); }

.bkc-sheet-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: rgba(245, 237, 220, 0.08);
  color: inherit;
  font-size: 22px;
  line-height: 1;
  z-index: 2;
}
body[data-theme="light"] .bkc-sheet-close { background: rgba(27, 12, 3, 0.07); }

.bkc-sheet-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 18px calc(18px + var(--bkc-safe-b));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bkc-head { display: flex; gap: 14px; align-items: flex-start; padding-right: 42px; }
.bkc-head-img {
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(245, 166, 35, 0.1);
}
.bkc-head-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bkc-head-img.bkc-img-missing::after {
  content: "🍱";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 30px;
}
.bkc-head-copy { min-width: 0; flex: 1 1 auto; }
.bkc-head-copy h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.bkc-korean { margin: 4px 0 0; font-size: 12.5px; color: var(--muted, rgba(247, 239, 227, 0.72)); }
.bkc-desc {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted, rgba(247, 239, 227, 0.72));
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bkc-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 800;
}
.bkc-group-hint {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--quiet, rgba(247, 239, 227, 0.48));
  flex: 0 0 auto;
}

.bkc-opts {
  border: 1px solid rgba(245, 166, 35, 0.2);
  border-radius: 16px;
  overflow: hidden;
}
body[data-theme="light"] .bkc-opts { border-color: rgba(180, 100, 10, 0.2); }

.bkc-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 0;
  border-top: 1px solid rgba(245, 166, 35, 0.14);
  background: transparent;
  color: inherit;
  text-align: left;
  font-size: 14.5px;
}
.bkc-opt:first-child { border-top: 0; }
.bkc-opt.is-on { background: rgba(245, 166, 35, 0.12); }
body[data-theme="light"] .bkc-opt { border-top-color: rgba(180, 100, 10, 0.14); }

.bkc-radio {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 2px solid rgba(245, 237, 220, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 160ms ease;
}
body[data-theme="light"] .bkc-radio { border-color: rgba(27, 12, 3, 0.34); }
.bkc-opt.is-on .bkc-radio { border-color: var(--brand, #f5a623); }
.bkc-opt.is-on .bkc-radio::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand, #f5a623);
}

.bkc-opt-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.bkc-opt.is-on .bkc-opt-label { font-weight: 800; }
.bkc-opt-price { flex: 0 0 auto; font-weight: 800; }
.bkc-opt.is-on .bkc-opt-price { color: var(--brand, #f5a623); }

.bkc-breakdown {
  border: 1px solid rgba(245, 166, 35, 0.2);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13.5px;
}
body[data-theme="light"] .bkc-breakdown { border-color: rgba(180, 100, 10, 0.2); }
.bkc-breakdown-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--muted, rgba(247, 239, 227, 0.72)); }
.bkc-breakdown-total {
  padding-top: 8px;
  border-top: 1px solid rgba(245, 166, 35, 0.16);
  font-weight: 900;
  font-size: 15px;
  color: inherit;
}
body[data-theme="light"] .bkc-breakdown-total { border-top-color: rgba(180, 100, 10, 0.16); }

.bkc-qty-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bkc-qty-label { font-size: 14px; font-weight: 800; }

.bkc-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(245, 166, 35, 0.34);
  border-radius: 14px;
  overflow: hidden;
  flex: 0 0 auto;
}
body[data-theme="light"] .bkc-stepper { border-color: rgba(180, 100, 10, 0.3); }

.bkc-step {
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent;
  color: var(--brand, #f5a623);
  font-size: 21px;
  line-height: 1;
  transition: background 140ms ease;
}
.bkc-step:hover:not(:disabled) { background: rgba(245, 166, 35, 0.14); }
.bkc-step:active:not(:disabled) { transform: scale(0.94); }
.bkc-step:disabled { opacity: 0.32; cursor: not-allowed; }

.bkc-qty-val {
  min-width: 46px;
  text-align: center;
  font-size: 17px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.bkc-cap-note { margin: -6px 0 0; font-size: 11.5px; color: var(--quiet, rgba(247, 239, 227, 0.48)); }

.bkc-sheet-actions { display: flex; gap: 10px; align-items: stretch; }

.bkc-btn {
  min-height: 52px;
  padding: 14px 18px;
  border: 0;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 1000;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: transform 140ms ease, background 140ms ease, opacity 140ms ease;
}
.bkc-btn:active { transform: scale(0.98); }

.bkc-btn-ghost {
  flex: 0 0 auto;
  background: rgba(245, 237, 220, 0.07);
  color: var(--text, #f7efe3);
  border: 1px solid rgba(245, 237, 220, 0.14);
}
body[data-theme="light"] .bkc-btn-ghost { background: rgba(27, 12, 3, 0.06); color: #1b0c03; border-color: rgba(27, 12, 3, 0.14); }

.bkc-btn-primary {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--brand, #f5a623);
  color: #160c05;
}
.bkc-btn-primary.bkc-btn-danger { background: #c0392b; color: #fff5f2; }
.bkc-cta-amount { font-variant-numeric: tabular-nums; opacity: 0.86; }
.bkc-cta-amount:empty { display: none; }

@media (max-width: 359px) {
  .bkc-sheet-scroll { padding-left: 14px; padding-right: 14px; gap: 13px; }
  .bkc-head-img { width: 64px; height: 64px; border-radius: 15px; }
  .bkc-head-copy h2 { font-size: 19px; }
  .bkc-btn { padding: 13px 12px; font-size: 12.5px; }
  .bkc-btn-ghost { padding-left: 14px; padding-right: 14px; }
  .bkc-step { width: 44px; height: 44px; }
  .bkc-qty-val { min-width: 40px; }
}

/* ── persistent View Cart bar ────────────────────────────────────────── */

.bkc-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);   /* never animated — the pop lives on the button */
  bottom: calc(12px + var(--bkc-safe-b));
  width: min(92vw, 28rem);
  max-width: calc(100vw - 24px);
  z-index: 180;                  /* above the install/theme buttons, below every modal */
  isolation: isolate;
  pointer-events: none;
}
.bkc-bar[hidden] { display: none !important; }

.bkc-bar-btn {
  pointer-events: auto;
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px 10px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--brand, #f5a623);
  color: #160c05;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.42), 0 6px 20px rgba(245, 166, 35, 0.26);
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.bkc-bar-btn:active { transform: scale(0.985); }
.bkc-bar.is-pop .bkc-bar-btn { transform: scale(1.03); }

.bkc-bar-left { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.bkc-bar-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(22, 12, 5, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bkc-bar-label {
  font-weight: 1000;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bkc-bar-right { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; min-width: 0; }
.bkc-bar-meta {
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bkc-bar-count { display: inline-block; transition: transform 200ms ease-out; }
.bkc-bar.is-pop .bkc-bar-count { transform: scale(1.18); }
.bkc-bar-arrow { display: inline-flex; align-items: center; opacity: 0.9; }

@media (max-width: 359px) {
  .bkc-bar { width: calc(100vw - 20px); bottom: calc(10px + var(--bkc-safe-b)); }
  .bkc-bar-btn { min-height: 50px; padding: 8px 12px 8px 10px; gap: 6px; }
  .bkc-bar-icon { width: 26px; height: 26px; }
  .bkc-bar-icon svg { width: 15px; height: 15px; }
  .bkc-bar-label { font-size: 12px; }
  .bkc-bar-meta { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .bkc-bar-btn, .bkc-bar-count, .bkc-sheet, .bkc-scrim { transition: none; }
  .bkc-bar.is-pop .bkc-bar-btn, .bkc-bar.is-pop .bkc-bar-count { transform: none; }
  .bkc-bar { transform: translateX(-50%); }
}

/* Nothing else on either page is pinned to the bottom of a phone viewport
   at these widths — both pages move the PWA install pill to the TOP below
   768 px and the theme switch lives in the header — so the pill covers no
   control. The one exception is index.html's own floating "Cart (n)" pill,
   which that page hides while this bar is up (the bar IS that CTA, with
   the count and the total on it).

   The footer grows by the pill's height so its last row can still be
   scrolled clear of it. The space goes on the FOOTER rather than the body
   because the footer paints its own dark background on both pages — body
   padding would leave a strip of page background below it. */
body.bkc-bar-on footer { padding-bottom: calc(66px + var(--bkc-safe-b)) !important; }

/* ── the "Add ↔ − n +" slot on a dish card ───────────────────────────── */

/* The host page sizes the slot (it replaces that page's own Add button,
   so it inherits that button's width rules). */
.bkc-slot { display: block; }

.bkc-slot-add {
  width: 100%;
  min-height: 40px;
  padding: 10px 14px;
  border: 0;
  border-radius: 14px;
  background: var(--brand, #f5a623);
  color: #160c05;
  font-weight: 1000;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 200ms ease, transform 200ms ease;
}
.bkc-slot-add:active { transform: scale(0.97); }
.bkc-slot-add.is-added { background: #1e7e44; color: #f2fff7; transform: scale(0.97); }
.bkc-tick { font-size: 13px; line-height: 1; }

.bkc-slot-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* 42, not 40: the 1px border + overflow:hidden would otherwise clip the
     40px buttons to a 38px tap target. */
  min-height: 42px;
  border: 1px solid rgba(245, 166, 35, 0.5);
  border-radius: 14px;
  background: rgba(245, 166, 35, 0.12);
  overflow: hidden;
}
.bkc-slot-step {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--brand, #f5a623);
  font-size: 18px;
  line-height: 1;
  transition: background 140ms ease;
}
body[data-theme="light"] .bkc-slot-step { color: #7a4a06; }
.bkc-slot-step:hover:not(:disabled) { background: rgba(245, 166, 35, 0.2); }
.bkc-slot-step:active:not(:disabled) { transform: scale(0.94); }
.bkc-slot-step:disabled { opacity: 0.35; cursor: not-allowed; }
.bkc-slot-qty {
  flex: 1 1 auto;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  color: var(--brand, #f5a623);
}
body[data-theme="light"] .bkc-slot-qty { color: #7a4a06; }

/* ── add-on groups in the dish sheet ─────────────────────────────────── */

.bkc-modgroup + .bkc-modgroup { margin-top: 4px; }
.bkc-check {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border-radius: 6px;
  border: 2px solid rgba(245, 237, 220, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 160ms ease, background 160ms ease;
}
body[data-theme="light"] .bkc-check { border-color: rgba(27, 12, 3, 0.34); }
.bkc-opt.is-on .bkc-check { border-color: var(--brand, #f5a623); background: var(--brand, #f5a623); }
.bkc-opt.is-on .bkc-check::after {
  content: "";
  width: 5px;
  height: 9px;
  margin-top: -2px;
  border: solid #160c05;
  border-width: 0 2.4px 2.4px 0;
  transform: rotate(45deg);
}
.bkc-opt-price:empty { display: none; }
.bkc-opt.is-off { opacity: 0.55; cursor: not-allowed; }
.bkc-soldout {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(192, 57, 43, 0.16);
  color: #ff8a7a;
  vertical-align: middle;
}
body[data-theme="light"] .bkc-soldout { color: #a3271b; }
.bkc-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.bkc-slot-add.is-soldout, .bkc-slot-add:disabled {
  background: rgba(245, 237, 220, 0.1);
  color: var(--muted, rgba(247, 239, 227, 0.72));
  cursor: not-allowed;
}
body[data-theme="light"] .bkc-slot-add.is-soldout { background: rgba(27, 12, 3, 0.08); }

/* ── live-menu loading / retry states (both pages) ───────────────────── */

.bkm-skel {
  display: grid;
  gap: 14px;
}
.bkm-skel-card {
  border-radius: 18px;
  min-height: 92px;
  background: linear-gradient(90deg, rgba(245, 166, 35, 0.08) 25%, rgba(245, 166, 35, 0.18) 50%, rgba(245, 166, 35, 0.08) 75%);
  background-size: 200% 100%;
  animation: bkmShimmer 1.3s ease-in-out infinite;
}
@keyframes bkmShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .bkm-skel-card { animation: none; } }

.bkm-error {
  border: 1px solid rgba(245, 166, 35, 0.3);
  border-radius: 18px;
  padding: 22px 18px;
  text-align: center;
  display: grid;
  gap: 12px;
  justify-items: center;
}
.bkm-error p { margin: 0; color: var(--muted, rgba(247, 239, 227, 0.72)); font-size: 14px; }
.bkm-retry {
  min-height: 44px;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--brand, #f5a623);
  color: #160c05;
  font-weight: 1000;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bkm-stale {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--quiet, rgba(247, 239, 227, 0.48));
  text-align: center;
}

/* ── open / closed pill (hero) ───────────────────────────────────────── */

.bk-open-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(245, 237, 220, 0.18);
  background: rgba(12, 8, 5, 0.5);
  color: #f5ede0;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
}
.bk-open-pill[hidden] { display: none !important; }
.bk-open-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34c26b;
  box-shadow: 0 0 0 4px rgba(52, 194, 107, 0.22);
}
.bk-open-pill.is-closed::before { background: #ff6b5b; box-shadow: 0 0 0 4px rgba(255, 107, 91, 0.2); }
.bk-open-pill .bk-open-sub { font-weight: 700; opacity: 0.8; }

/* ── ordering paused / closed banner (checkout modal) ────────────────── */

.bk-closed-banner {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 107, 91, 0.45);
  background: rgba(192, 57, 43, 0.14);
  color: inherit;
  font-size: 13.5px;
  line-height: 1.45;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.bk-closed-banner[hidden] { display: none !important; }
.bk-closed-banner strong { display: block; font-size: 14px; margin-bottom: 2px; }
.bk-closed-banner .bk-banner-dot { flex: 0 0 auto; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: #ff6b5b; }

.bk-pay-note {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted, rgba(247, 239, 227, 0.72));
  text-align: center;
}
.bk-notes-count { font-size: 11px; opacity: 0.7; float: right; }
.bk-form-error {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 107, 91, 0.45);
  background: rgba(192, 57, 43, 0.12);
  font-size: 13px;
  line-height: 1.45;
}
.bk-form-error[hidden] { display: none !important; }

/* ── in-modal order confirmation ─────────────────────────────────────── */

.bk-confirm { display: grid; gap: 14px; }
.bk-confirm[hidden] { display: none !important; }
.bk-confirm-head { display: flex; gap: 14px; align-items: center; }
.bk-confirm-tick {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(52, 194, 107, 0.16);
  color: #34c26b;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 900;
}
.bk-confirm-head h3 { margin: 0; font-size: 22px; line-height: 1.15; }
.bk-confirm-head p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted, rgba(247, 239, 227, 0.72)); }
.bk-confirm-number {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px dashed rgba(245, 166, 35, 0.45);
  font-size: 13px;
}
.bk-confirm-number strong { font-size: 20px; letter-spacing: 0.04em; color: var(--brand, #f5a623); }
.bk-confirm-lines { display: grid; gap: 8px; font-size: 13.5px; }
.bk-confirm-line { display: flex; justify-content: space-between; gap: 12px; }
.bk-confirm-line small { display: block; opacity: 0.7; font-size: 12px; margin-top: 2px; }
.bk-confirm-line .bk-line-qty { flex: 0 0 auto; opacity: 0.85; margin-right: 6px; }
.bk-confirm-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(245, 166, 35, 0.2);
  font-weight: 1000;
  font-size: 18px;
}
.bk-confirm-total small { display: block; font-size: 12px; font-weight: 700; opacity: 0.7; margin-top: 3px; }
.bk-confirm-wait {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(245, 166, 35, 0.1);
  font-size: 13.5px;
  font-weight: 800;
}
.bk-confirm-wait::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--brand, #f5a623);
  border-right-color: transparent;
  animation: bkSpin 0.9s linear infinite;
  flex: 0 0 auto;
}
@keyframes bkSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bk-confirm-wait::before { animation: none; } }
.bk-confirm-actions { display: grid; gap: 10px; }
.bk-confirm-help { text-align: center; font-size: 13px; color: var(--muted, rgba(247, 239, 227, 0.72)); margin: 0; }
/* The loyalty reward could not be attached. A note, never an error: the
   order stands and the points were not taken. */
.bk-confirm-skip {
  margin: 0;
  padding: 11px 13px;
  border-radius: 13px;
  background: rgba(245, 166, 35, 0.09);
  color: var(--muted, rgba(247, 239, 227, 0.78));
  font-size: 13px;
  line-height: 1.5;
}

/* ── the reward the customer attached to this cart ──────────────────────
   No amount: the value is Dines' to decide when the order is placed, and
   a figure guessed here would eventually be the wrong one. */
.bk-cart-reward {
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 800;
}
.bk-cart-reward .bk-cart-reward-copy { flex: 1 1 auto; min-width: 0; }
.bk-cart-reward .bk-cart-reward-copy small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.75;
}
.bk-cart-reward button {
  flex: 0 0 auto;
  min-height: 44px;
  min-width: 44px;
  padding: 0 12px;
  border: 1px solid rgba(245, 166, 35, 0.35);
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.bk-cart-reward button:hover { background: rgba(245, 166, 35, 0.12); }

/* ── category sheet (menu.html "Menu" button) ───────────────────────── */

.bkm-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
}
.bkm-search {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(245, 166, 35, 0.28);
  background: rgba(255, 248, 235, 0.06);
  color: inherit;
}
body[data-theme="light"] .bkm-search { background: rgba(255, 255, 255, 0.55); border-color: rgba(180, 100, 10, 0.26); }
.bkm-search svg { flex: 0 0 auto; opacity: 0.7; }
.bkm-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  padding: 10px 0;
  outline: none;
}
.bkm-search input::placeholder { color: var(--quiet, rgba(247, 239, 227, 0.48)); }
.bkm-search-clear {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(245, 237, 220, 0.12);
  color: inherit;
  font-size: 16px;
  line-height: 1;
}
.bkm-search-clear[hidden] { display: none !important; }
.bkm-menu-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--brand, #f5a623);
  color: #160c05;
  font-weight: 1000;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(245, 166, 35, 0.28);
}
.bkm-menu-btn:active { transform: scale(0.97); }
@media (min-width: 901px) { .bkm-menu-btn { display: none; } }

.bkm-no-results {
  padding: 28px 16px;
  text-align: center;
  color: var(--muted, rgba(247, 239, 227, 0.72));
  font-size: 14px;
}
.bkm-no-results[hidden] { display: none !important; }

.bkm-sheet-root {
  position: fixed;
  inset: 0;
  z-index: 9400;   /* below the dish sheet (9500), above the page + cart bar */
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.bkm-sheet-root[hidden] { display: none !important; }
.bkm-sheet-root .bkc-scrim { opacity: 1; }
.bkm-sheet {
  position: relative;
  width: min(520px, 100%);
  max-height: 78vh;
  max-height: 78dvh;
  display: flex;
  flex-direction: column;
  border-radius: 26px 26px 0 0;
  border: 1px solid rgba(245, 166, 35, 0.28);
  border-bottom: 0;
  background: #120b05;
  color: var(--text, #f7efe3);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.55);
}
body[data-theme="light"] .bkm-sheet { background: #fffdf5; border-color: rgba(180, 100, 10, 0.26); color: #1b0c03; }
.bkm-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px 10px;
}
.bkm-sheet-head h2 { margin: 0; font-size: 18px; font-weight: 900; }
.bkm-sheet-head span { font-size: 12px; color: var(--quiet, rgba(247, 239, 227, 0.48)); }
.bkm-sheet-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 10px calc(16px + var(--bkc-safe-b));
  margin: 0;
  list-style: none;
}
.bkm-cat {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 12px 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  text-align: left;
  font-size: 15px;
  font-weight: 800;
}
.bkm-cat:hover, .bkm-cat:focus-visible { background: rgba(245, 166, 35, 0.1); }
.bkm-cat.is-active { background: rgba(245, 166, 35, 0.16); color: var(--brand, #f5a623); }
body[data-theme="light"] .bkm-cat.is-active { color: #7a4a06; }
.bkm-cat-icon { flex: 0 0 auto; width: 22px; text-align: center; font-size: 16px; }
.bkm-cat-name { flex: 1 1 auto; min-width: 0; }
.bkm-cat-count {
  flex: 0 0 auto;
  min-width: 28px;
  text-align: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(245, 237, 220, 0.1);
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
body[data-theme="light"] .bkm-cat-count { background: rgba(27, 12, 3, 0.08); }

/* ── Checkout: payment method (Sept 2026) ─────────────────────────────
   Cash on Delivery is the only selectable method; UPI is rendered greyed
   with a "Coming Soon" badge and never leads anywhere. */
.bk-payment { border: 0; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.bk-pay-legend { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted, #b7a68a); margin-bottom: 4px; padding: 0; }
.bk-pay-option { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); cursor: pointer; position: relative; }
.bk-pay-option input { position: absolute; opacity: 0; pointer-events: none; }
.bk-pay-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); flex: 0 0 18px; position: relative; }
.bk-pay-option.is-selected { border-color: #e6a23c; background: rgba(230,162,60,.10); }
.bk-pay-option.is-selected .bk-pay-radio { border-color: #e6a23c; }
.bk-pay-option.is-selected .bk-pay-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #e6a23c; }
.bk-pay-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.bk-pay-text strong { font-size: 15px; }
.bk-pay-text small { font-size: 12px; color: var(--muted, #b7a68a); }
.bk-pay-option.is-disabled { opacity: .55; cursor: not-allowed; border-style: dashed; }
.bk-pay-badge { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.10); color: #e9dcc3; white-space: nowrap; }
.bk-pay-hint { margin: 2px 0 0; font-size: 13px; color: #f1c27d; }

/* Live confirmation pill states (site-ui.js liveConfirmation) */
.bk-confirm-wait.is-live { color: #f1c27d; border-color: rgba(230,162,60,.55); }
.bk-confirm-wait.is-done { color: #9be3a6; border-color: rgba(120,220,140,.5); }
.bk-confirm-wait.is-bad  { color: #ff9b9b; border-color: rgba(255,120,120,.5); }