/* Created: 02:49 04-Sep-2026 */
/* Updated: 12:26 04-Sep-2026 — third review: burger top-right as a ringed button, menu is a right-hand drawer with room to breathe and its own scroll, Cancel text at the bar's end */
/* Updated: 13:12 04-Sep-2026 — fourth review: tighter header rows on phones */
/* Updated: 15:20 04-Sep-2026 — logical properties so /ar/book/ mirrors; confirmation screen */
/* Updated: 23:44 04-Sep-2026 — who step: two-line options, fully-booked state */
/* Updated: 06:18 07-Sep-2026 — BL-189: .bk-hrs-sel */
/* Updated: 13:10 21-Sep-2026 — discount-code box on the review step (21-Sep B9) */
/* Updated: 16:47 22-Sep-2026 — Sumit's live review: the card's price spans both rows at 24px; Continue explains what is missing instead of going dead */
/* Updated: 22:27 11-Oct-2026 — S1-WP3-06 .bk-dur: the caregivers' days | hours pair (two drums / two dropdowns), wraps under the question on a phone */
/* Booking chrome after Sumit's second review (04-Sep). The website's own header
   row sits alone at the top; the progress rail runs under it; Back, Leave and a
   breadcrumb share the next row; the hours picker is a wheel, not a wall of
   tabs; location options sit in the thumb zone; every tap answers with motion.
   book.css keeps the step content. No colours of its own -- base.css tokens. */

/* ---------- row 1: the site header ---------- */
.bk-nav{display:flex;align-items:center;gap:var(--s-3);height:60px}
.bk-logo{display:inline-flex;align-items:center;flex:0 0 auto;border-radius:6px}
.bk-logo img{display:block;height:34px;width:auto}
.bk-call{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;border-radius:999px;border:1px solid var(--border-subtle);
  font-size:14px;font-weight:600;color:var(--text-strong);text-decoration:none;
  white-space:nowrap;transition:border-color .2s var(--ease-circ),background .2s var(--ease-circ)}
.bk-call:hover{border-color:var(--teal);background:var(--surface-card)}
.bk-call svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* Burger: top RIGHT, after the call pill, drawn as the same ringed control as
   the pill so the row reads as one set (Sumit, third review). Shown at every
   width -- the booking page carries no desktop link row, the menu IS the
   navigation. Two bars, not three; they cross into an X while the drawer is
   open, and the header row stays above the drawer so that X can close it. */
.nav-burger{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;width:40px;height:40px;flex:0 0 40px;margin-inline-start:var(--s-2);border-radius:50%;
  border:1px solid var(--border-subtle);background:transparent;color:var(--text-strong);
  cursor:pointer;transition:border-color .2s var(--ease-circ),background .2s var(--ease-circ)}
.nav-burger:hover{border-color:var(--teal);background:var(--surface-card)}
.nav-burger span{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .3s var(--ease-circ)}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
/* Menu: a drawer from the right edge, under the burger, not a wall over the
   whole screen. Full width on a phone, 420px on a desktop. The DRAWER scrolls,
   not the page: 19 links did not fit a phone and the old full-screen panel
   clipped its own tail (Sumit, third review). The panel sits OUTSIDE .bk, so
   --bk-gut is not defined here -- --pad-page is the site's own gutter. */
.mobile-menu{position:fixed;inset:0;z-index:998;display:none;background:var(--ink-48);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.mobile-menu.is-open{display:block}
.bk-menu-panel{display:flex;flex-direction:column;margin-inline-start:auto;width:min(100%,420px);
  height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:calc(60px + var(--s-6)) var(--pad-page) var(--s-9);   /* clears the header row */
  scroll-padding-top:80px;background:var(--ink-88);color:var(--paper-100);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.mobile-menu.is-open .bk-menu-panel{animation:bk-drawer .35s var(--ease-circ)}
@keyframes bk-drawer{from{transform:translateX(32px);opacity:0}to{transform:none;opacity:1}}
/* flex:none on the list: a flex child may shrink to its container and hide
   its overflow, which is exactly the "cannot see the whole menu" complaint. */
.mobile-menu nav{display:flex;flex-direction:column;flex:none}
.mobile-menu nav>a{font-size:20px;line-height:1.3;font-weight:500;padding:14px 0;
  color:inherit;text-decoration:none;border-bottom:1px solid var(--paper-16);
  transition:color .2s var(--ease-circ)}
.mobile-menu .mob-sub{display:flex;flex-direction:column;padding:6px 0 12px;
  border-bottom:1px solid var(--paper-16)}
.mobile-menu .mob-sub a{font-size:16px;line-height:1.4;padding-block:9px;padding-inline-start:18px;
  color:var(--paper-64);text-decoration:none;transition:color .2s var(--ease-circ)}
.mobile-menu nav a:hover{color:var(--teal)}
.mobile-menu .btn{flex:none;margin:var(--s-7) 0 0;align-self:flex-start}
@media (min-width:720px){.bk-menu-panel{padding-top:calc(68px + var(--s-6))}}
/* While the menu is open only the header row stays above it, so the burger can
   close it; the rail and the breadcrumb bar fold away. */
body.bk-menu-open .bk-top>:not(:first-child){display:none}

/* ---------- row 2: progress ---------- */
.bk-rail{display:flex;gap:4px;height:4px;margin-bottom:var(--s-3)}
.bk-seg{flex:1;border-radius:2px;background:var(--border-subtle);overflow:hidden}
.bk-seg i{display:block;height:100%;width:0;border-radius:2px;background:var(--teal);
  transition:width .45s var(--ease-circ)}
.bk-seg.done i,.bk-seg.now i{width:100%}

/* ---------- row 3: back, leave, breadcrumb, search ---------- */
.bk-bar{display:flex;align-items:center;gap:var(--s-2);padding-bottom:var(--s-3)}
.bk-ic{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  flex:0 0 36px;border-radius:50%;border:1px solid var(--border-subtle);background:transparent;
  color:var(--text-strong);cursor:pointer;
  transition:background .2s var(--ease-circ),border-color .2s var(--ease-circ),
    transform .15s var(--ease-circ)}
.bk-ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.bk-ic:hover{background:var(--surface-card);border-color:var(--border-medium)}
/* Reserved, not removed: [hidden] would slide the breadcrumb 44px sideways. */
.bk-ic.is-off{visibility:hidden;pointer-events:none}
.bk-ic[hidden]{display:none}
.bk-ic-find{margin-inline-start:auto}
/* Cancel: plain words at the far right of the bar, only once there is a
   booking to cancel. It opens the same sheet the logo does. */
.bk-cancel{margin-inline-start:auto;flex:0 0 auto;padding:8px 10px;border:0;border-radius:8px;
  background:transparent;color:var(--text-medium);font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;transition:color .2s var(--ease-circ),background .2s var(--ease-circ)}
.bk-cancel:hover{color:var(--text-strong);background:var(--surface-card)}
.bk-cancel[hidden]{display:none}
.bk-ic[aria-expanded="true"]{background:var(--teal);border-color:var(--teal);color:#fff}

.bk-crumb{flex:1;min-width:0;display:flex;align-items:center;gap:4px;margin-inline-start:var(--s-2);
  overflow-x:auto;scrollbar-width:none;white-space:nowrap;font-size:13px;line-height:1.2}
.bk-crumb::-webkit-scrollbar{display:none}
/* Crumbs never shrink: shrinking squeezed every crumb to an ellipsis and the
   current step read as "L...". Long ones truncate at a cap, the row scrolls,
   and renderCrumbs() keeps the current place in view. */
.bk-crumb>*{flex:0 0 auto}
.bk-crumb a,.bk-crumb span{display:inline-block;max-width:170px;overflow:hidden;
  text-overflow:ellipsis;padding:8px 0}
/* On a phone the path is too long for the row: show the last two crumbs
   (service and step, or flow and category). Back covers the rest. */
@media (max-width:559px){
  .bk-crumb>:not(:nth-last-child(-n+3)){display:none}
}
.bk-crumb a{color:var(--text-medium);text-decoration:none;transition:color .2s}
.bk-crumb a:hover{color:var(--teal-deep)}
/* The current crumb is the one that may give way: it shrinks to what is left
   and ends in an ellipsis, rather than the row scrolling and cutting its START. */
.bk-crumb span[aria-current]{flex:0 1 auto;min-width:0;max-width:none;
  color:var(--text-strong);font-weight:600}
.bk-crumb svg{flex:0 0 12px;width:12px;height:12px;stroke:var(--text-subtle);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.bk-find{position:relative;padding-bottom:var(--s-3)}
.bk-find[hidden]{display:none}
.bk-find svg{position:absolute;inset-inline-start:calc(var(--bk-gut) + 14px);top:13px;width:18px;height:18px;
  stroke:var(--text-subtle);fill:none;stroke-width:2;stroke-linecap:round;pointer-events:none}
.bk-find input{width:100%;padding:12px 14px 12px 42px;border:1px solid var(--border-subtle);
  border-radius:12px;background:var(--surface-card);color:var(--text-strong);
  font:inherit;font-size:16px;transition:border-color .18s var(--ease-circ)}
.bk-find input:focus{outline:none;border-color:var(--teal);background:var(--bg)}
.bk-find input::-webkit-search-cancel-button{-webkit-appearance:none}

/* ---------- step heading + which service ---------- */
.bk-hd{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-4);
  margin-bottom:var(--s-6)}
.bk-hd img{flex:0 0 56px;width:56px;height:56px;border-radius:14px;object-fit:cover}
.bk-hd h1{flex:1;min-width:0;margin:0}
.bk-hd .bk-sub{flex-basis:100%;margin:0}
.bk-h2{font-size:clamp(20px,5vw,24px);font-weight:600;line-height:1.2;
  letter-spacing:-.015em;margin:0 0 var(--s-2)}
/* The service card: name and price in the SAME type, one line, so "ECG" and
   "500" read as one fact (Sumit, 04-Sep). */
.bk-ctx{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);
  border:1px solid var(--border-faint);border-radius:14px;background:var(--surface-card);
  margin:var(--s-2) 0 var(--s-7)}
.bk-ctx .bk-mark{flex:0 0 44px;width:44px;height:44px;border-radius:12px}
.bk-ctx .bk-mark svg{width:22px;height:22px}
.bk-ctx-t{flex:1;min-width:0;display:grid;grid-template-columns:1fr auto;
  column-gap:var(--s-3);align-items:baseline}
.bk-ctx-t b{font-size:16px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.bk-ctx-p{font-size:16px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.bk-ctx-t small{grid-column:1/-1;margin-top:2px;font-size:13px;color:var(--text-medium);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- location: options in the thumb zone ---------- */
.bk-opts{display:grid;gap:var(--s-2)}
.bk-opt{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  width:100%;min-height:60px;padding:var(--s-4) var(--s-5);border:1px solid var(--border-faint);
  border-radius:14px;background:var(--surface-card);color:var(--text-strong);
  font-size:17px;font-weight:600;text-align:start;cursor:pointer;
  transition:border-color .2s var(--ease-circ),background .2s var(--ease-circ),
    transform .15s var(--ease-circ)}
.bk-opt i{position:relative;flex:0 0 22px;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--border-medium);transition:border-color .2s var(--ease-circ)}
.bk-opt:hover{border-color:var(--teal)}
.bk-opt[aria-pressed="true"]{border-color:var(--teal);background:var(--teal-16)}
.bk-opt[aria-pressed="true"] i{border-color:var(--teal)}
.bk-opt[aria-pressed="true"] i::after{content:"";position:absolute;inset:4px;
  border-radius:50%;background:var(--teal)}
/* The who step puts a second line inside the option -- how many times that
   person has free, or that they are fully booked. `span` becomes the column so
   the radio stays centred against both lines. */
.bk-opt>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.bk-opt>span small{font-size:13px;font-weight:500;color:var(--text-muted);
  letter-spacing:.01em}
/* A professional with no free time is SHOWN, not hidden: a name that silently
   vanishes reads as a bug, "fully booked" reads as an answer. */
.bk-opt.is-off{cursor:default;opacity:.55}
.bk-opt.is-off:hover{border-color:var(--border-faint)}
/* On a phone the options drop to the bottom of the screen, where the thumb is
   (Sumit, 04-Sep). The question stays at the top; the gap is deliberate. */
@media (max-width:719px){
  .bk-body.is-end{display:flex;flex-direction:column}
  .bk-body.is-end .bk-opts{margin-top:auto;padding-top:var(--s-6)}
}

/* ---------- hours: a wheel, not tabs ---------- */
/* iOS-alarm drum: a scroll-snap list, three rows visible, the middle row is the
   value. Ours, not the browser's <select> (Sumit, 04-Sep). */
.bk-hrs{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-3) var(--s-3) var(--s-3) var(--s-5);border:1px solid var(--border-faint);
  border-radius:16px;background:var(--surface-card);margin-bottom:var(--s-4)}
.bk-hrs-t{min-width:0}
.bk-hrs-t h4{font-size:16px;font-weight:600;margin:0}
.bk-hrs-t p{font-size:13px;color:var(--text-medium);margin:4px 0 0}
/* BL-189: on a desktop with a mouse the hours are a dropdown, not a drum */
.bk-hrs-sel,.bk-dur-sel{font:inherit;font-size:16px;font-weight:600;padding:10px 40px 10px 14px;border:1px solid var(--line,#d9e4e1);border-radius:12px;background:#fff;color:inherit;min-width:150px;cursor:pointer}
.bk-hrs-sel:focus-visible,.bk-dur-sel:focus-visible{outline:2px solid var(--teal,#2a7f74);outline-offset:2px}
.bk-wheel-wrap{position:relative;flex:0 0 150px;--row:44px}
.bk-wheel-wrap::before{content:"";position:absolute;left:0;right:0;top:var(--row);
  height:var(--row);border-radius:10px;background:var(--teal-16);pointer-events:none}
.bk-wheel{position:relative;height:calc(var(--row) * 3);overflow-y:auto;overscroll-behavior:contain;
  scroll-snap-type:y mandatory;scrollbar-width:none;border-radius:12px;outline:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 66%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 66%,transparent 100%)}
.bk-wheel::-webkit-scrollbar{display:none}
.bk-wheel::before,.bk-wheel::after{content:"";display:block;height:var(--row)}
.bk-wheel button{display:flex;align-items:center;justify-content:center;width:100%;
  height:var(--row);scroll-snap-align:center;border:0;background:transparent;font:inherit;
  font-size:16px;font-weight:500;color:var(--text-subtle);cursor:pointer;
  font-variant-numeric:tabular-nums;transition:color .2s var(--ease-circ),font-size .2s var(--ease-circ)}
.bk-wheel button[aria-selected="true"]{color:var(--text-strong);font-weight:600;font-size:18px}
.bk-wheel:focus-visible{box-shadow:0 0 0 2px var(--teal)}
/* S1-WP3-06: caregivers pick days | hours side by side (mirrors on /ar/); on a phone the pair takes its own row */
.bk-dur{display:flex;gap:8px;flex:0 0 auto}.bk-dur .bk-wheel-wrap{flex:0 0 120px}.bk-dur select{min-width:130px}
@media (max-width:480px){.bk-hrs.is-dur{flex-wrap:wrap}.bk-hrs.is-dur .bk-dur{flex:1 1 100%}.bk-hrs.is-dur .bk-dur .bk-wheel-wrap{flex:1 1 0;min-width:0}}

/* ---------- motion: every tap answers ---------- */
@keyframes bk-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes bk-pop{0%{transform:scale(1)}40%{transform:scale(.955)}100%{transform:scale(1)}}
/* A new screen slides up; a re-render of the same screen (picking a time) must
   not, or the page would flicker on every tap -- book.js sets .is-new. */
.bk-body.is-new>*{animation:bk-in .4s var(--ease-circ) both}
.bk-body.is-new>*:nth-child(2){animation-delay:.05s}
.bk-body.is-new>*:nth-child(3){animation-delay:.1s}
.bk-body.is-new>*:nth-child(4){animation-delay:.15s}
.bk-body.is-new>*:nth-child(n+5){animation-delay:.2s}
.bk-tile:active,.bk-row:active,.bk-chip:active,.bk-day:active,.bk-opt:active,
.bk-ic:active,.nav-burger:active,.bk-next:active:not(:disabled){transform:scale(.97)}
/* The thing you just chose pops once. Scoped by data-pop so the day you picked
   earlier does not pop again when you pick a time. */
.bk-body[data-pop="where"] .bk-opt[aria-pressed="true"],
.bk-body[data-pop="date"] .bk-day[aria-pressed="true"],
.bk-body[data-pop="time"] .bk-times .bk-chip[aria-pressed="true"]{animation:bk-pop .3s var(--ease-circ)}
@media (prefers-reduced-motion:reduce){
  .bk-body.is-new>*,.bk-opt,.bk-day,.bk-chip{animation:none!important}
  .bk-wheel{scroll-behavior:auto}
}

/* Phones: the three header rows -- brand, rail, Back/crumb/Cancel -- were 135px
   of an 844px screen. Smaller controls and less air between rows (Sumit, fourth
   review); nothing removed. */
@media (max-width:719px){
  .bk-nav{height:52px;gap:var(--s-2)}
  .bk-logo img{height:30px}
  .bk-call{padding:6px 10px;font-size:13px}
  .nav-burger{width:36px;height:36px;flex-basis:36px}
  .bk-rail{margin-bottom:var(--s-2)}
  .bk-bar{padding-bottom:var(--s-2)}
  .bk-ic{width:32px;height:32px}
  .bk-crumb{font-size:14px}
}
@media (min-width:720px){
  .bk-nav{height:68px}
  .bk-logo img{height:38px}
  .bk-ctx-t b{font-size:17px}
  .bk-ctx-p{font-size:17px}
}

/* The tile, row or option you just tapped pops and turns teal for the ~190ms
   before the next screen arrives (book.js tap()). */
.is-pop{animation:bk-pop .3s var(--ease-circ);border-color:var(--teal)!important}

/* ---- right-to-left (15:20 04-Sep-2026): the drawer enters from the left ---- */
[dir="rtl"] .bk-menu-panel{animation-name:bk-drawer-rtl}
@keyframes bk-drawer-rtl{from{transform:translateX(-32px);opacity:0}to{transform:none;opacity:1}}
[dir="rtl"] input[type="tel"],[dir="rtl"] input[type="email"]{direction:ltr;text-align:start}
/* the language switch at the foot of the drawer */
.bk-lang{margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--ink-8);font-weight:600}

/* 21-Sep B9: the discount code, under the review total */
.bk-coupon{display:flex;flex-direction:column;gap:var(--s-2)}
.bk-coupon-form{display:flex;flex-direction:column;gap:6px}
.bk-coupon-line{display:flex;gap:var(--s-2)}
.bk-coupon-line input{flex:1;min-width:0;min-height:44px;padding:0 var(--s-3);border-radius:12px;
  border:1px solid var(--border-medium);font:inherit;text-transform:uppercase;letter-spacing:.04em}
.bk-coupon-line .bk-btn-ghost{min-height:44px;font:inherit;cursor:pointer}
.bk-coupon-err{margin:0;min-height:1.2em;font-size:.875rem;color:var(--error)}
.bk-coupon-row b{color:var(--success)}
.bk-coupon-remove{align-self:flex-start;background:none;border:0;padding:4px 0;font:inherit;
  font-size:.875rem;color:var(--text-medium);text-decoration:underline;cursor:pointer}

/* Sumit 22-Sep: the service card's price was 16-17px on one row with the second row
   empty under it. It spans both rows now, centred, at the review total's size. */
.bk-ctx-t{align-items:center}
.bk-ctx-t small{grid-column:1}
.bk-ctx-p{grid-column:2;grid-row:1/span 2;align-self:center;font-size:22px;letter-spacing:-.02em}
@media (min-width:720px){.bk-ctx-p{font-size:24px}}
/* Continue that cannot go on yet still takes the tap and says what is missing. */
.bk-next.is-off{background:var(--border-subtle);color:var(--text-subtle)}
.bk-next.is-off:hover{background:var(--border-subtle)}
.bk-need{position:absolute;inset-inline:0;bottom:100%;margin:0 0 var(--s-2);display:flex;justify-content:center;
  pointer-events:none}
.bk-need span{padding:10px 16px;border-radius:12px;background:var(--text-strong);color:#fff;
  font-size:14px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.bk-need[hidden]{display:none}