/* Booking + partner flow components — loaded (after bootstrap.min.css, see header.php's
   $page_needs_bootstrap flag) only on booking/partner pages. Bootstrap supplies grid/card/
   form/button/badge/spinner primitives; this file (a) retunes Bootstrap's own CSS custom
   properties to the brand tokens already defined in css/style.css's :root, so stock
   Bootstrap components pick up brand identity automatically, and (b) keeps a handful of
   small custom classes for things Bootstrap has no clean equivalent for: a horizontally-
   scrollable day/time chip picker, the sticky checkout bar, the 6-box OTP input, and a
   selectable/deletable address card. */

:root{
  --bs-primary: var(--gold); --bs-primary-rgb: 244,198,19;
  --bs-success: var(--grn);
  --bs-border-radius: var(--r); --bs-border-radius-lg: var(--r-lg);
  --bs-font-sans-serif: 'Manrope', sans-serif;
  --bs-body-color: var(--blk);
  --bs-link-color: var(--gold-dk);
}
.btn-primary{ --bs-btn-color: var(--blk); --bs-btn-bg: var(--gold); --bs-btn-border-color: var(--gold);
  --bs-btn-hover-color: var(--blk); --bs-btn-hover-bg: var(--gold-dk); --bs-btn-hover-border-color: var(--gold-dk);
  --bs-btn-active-color: var(--blk); --bs-btn-active-bg: var(--gold-dk); --bs-btn-active-border-color: var(--gold-dk); }
.card{ --bs-card-border-width: 0; }
.badge{ font-weight: 700; }

/* OTP: 6 single-digit boxes */
.bk-otp-row{display:flex;gap:8px;justify-content:space-between}
.bk-otp-row input{width:15%;aspect-ratio:1;text-align:center;font-size:19px;font-weight:800;border:1.5px solid var(--gray2);border-radius:11px}
.bk-otp-row input:focus{outline:none;border-color:var(--gold)}

/* ── Address cards (selectable + deletable — no clean Bootstrap list-group equivalent) ── */
.addr-card{border:1.5px solid var(--gray2);border-radius:var(--r);padding:14px;cursor:pointer;display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;transition:border-color .2s}
.addr-card.sel{border-color:var(--gold);background:var(--gold-lt)}
.addr-card .ic{width:34px;height:34px;border-radius:9px;background:var(--gray);display:flex;align-items:center;justify-content:center;flex:none;color:var(--blk)}
.addr-card .t{font-size:13px;font-weight:800}
.addr-card .d{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.5}
.addr-card .del{margin-left:auto;background:none;border:none;color:#c0392b;font-size:14px;cursor:pointer;flex:none}

/* ── Date / timeslot chip rows (horizontally scrollable — no dropdowns on small screens) ── */
.chip-row{display:flex;gap:9px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.chip-row::-webkit-scrollbar{height:5px}
.chip-row::-webkit-scrollbar-thumb{background:var(--gray2);border-radius:5px}
.chip{flex:none;min-height:44px;padding:10px 16px;border-radius:11px;border:1.5px solid var(--gray2);background:#fff;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.chip.sel{background:var(--gold);border-color:var(--gold);color:var(--blk)}

/* Category/subcategory browse-card thumbnails: source images are 512x512 square icon-style
   illustrations, not landscape photos - object-fit:cover in a short wide box (the plain
   .card-img-top default) crops off most of the artwork. Use contain + padding instead so
   the whole icon is always visible, letterboxed on a light background. Subcategory-level
   images that ARE landscape photos still look fine with this (contain just centers them,
   no meaningful crop loss for a photo that already roughly fills the box). */
.card-img-icon{height:120px;object-fit:contain;background:var(--gray);padding:14px}

/* ── Sticky checkout bar (mobile) ── */
/* This is a top-level element (a sibling of .container, not nested inside it), so no
   negative margin is needed to bleed edge-to-edge - it already spans the full body width.
   (A stray margin:0 -5vw here previously - left over from the pre-Bootstrap layout where
   this sat inside a 5vw-padded .bk-wrap - was pushing it off-screen and causing horizontal
   page overflow.) */
.bk-sticky-bar{position:sticky;bottom:0;background:#fff;box-shadow:0 -6px 24px rgba(0,0,0,.08);padding:12px 5vw;display:flex;align-items:center;gap:14px;z-index:80}
.bk-sticky-bar .amt{font-size:16px;font-weight:800;flex:none;white-space:nowrap}