/* Created: 01:41 04-Sep-2026 */
/* Updated: 02:00 04-Sep-2026 — category header photo */
/* Updated: 02:05 04-Sep-2026 — where you are stays pinned while you scroll;
   the date strip names its month and stops stacking two unlabelled numbers. */
/* Updated: 01:55 04-Sep-2026 — one gutter token for all three bands (they had
   16/24/0 and only agreed by accident on mobile); category tiles carry a real
   photograph instead of a 48px thumbnail; service rows stack so a long name
   like "Device Care (Tracheostomy, PEG, NGT, Catheter)" has the full width. */
/* Updated: 02:33 04-Sep-2026 — Sumit's review: grey caption cards, 64px marks,
   logo in the bar, date/time split, Dirham glyph, loud footer price, leave dialog */
/* Updated: 02:49 04-Sep-2026 — Sumit's second review: header rows moved to book-ui.css;
   more air under the header; date strip inside its card, not off the screen edge;
   hours chips gone (wheel in book-ui.css); footer names the service in the same type */
/* Updated: 12:26 04-Sep-2026 — third review: cancel dialog centred on desktop and a bottom sheet on phones with its own close; date card given air */
/* Updated: 12:50 04-Sep-2026 — the 12:26 stamp had landed INSIDE the 02:49 comment, which
   un-commented two lines and swallowed the whole .bk rule (no gutter, no flex column on
   phones; desktop survived only because its 720px override is a separate rule). */
/* Updated: 13:12 04-Sep-2026 — fourth review: phone footer in two rows, full-width Continue */
/* Updated: 15:20 04-Sep-2026 — logical properties so /ar/book/ mirrors; confirmation screen */
/* Booking app. Deliberately NOT a marketing page: no site nav, no site footer,
   no reveal animations -- but the brand logo stays on every step. Full-bleed, one decision per screen, thumb-reachable
   on a phone. Inherits every colour and space token from base.css so it reads
   as the same product -- it defines no colours of its own. */

.bk{min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);
  --bk-gut:20px;               /* the ONLY horizontal padding in this file */
  --bk-rail:var(--container-small)}
@media (min-width:720px){.bk{--bk-gut:28px}}

/* Top bar, body and footer share one measured column. They previously had
   16px / 24px / 0 against the same max-width, so at 1066px their left edges
   landed on 93, 101 and 77. */
.bk-band{width:100%;max-width:var(--bk-rail);margin:0 auto;
  padding-inline:var(--bk-gut)}

/* ---------- top bar ---------- */
/* The rows inside it -- site header, rail, Back/Leave/breadcrumb, search --
   live in book-ui.css. Above the site menu (998) so the burger can close it. */
/* Updated: 14:26 04-Sep-2026 — footer summary: service row + location · date · time row */
/* Updated: 11:53 21-Sep-2026 — .bk-desc: the service description line under each title, two lines max (21-Sep) */
/* Updated: 11:56 21-Sep-2026 — .bk-was: struck-through before price (21-Sep, Sumit Q10 A) */
/* Updated: 20:37 11-Oct-2026 — S1-WP3-02 .bk-check-link: the consent line's privacy-policy link, underlined (the site's a{} has none) */
/* Updated: 20:55 11-Oct-2026 — S1-WP3-03 .bk-refund: the CMS refund and cancellation points above the payment note (wraps, logical sides for RTL) */
/* Updated: 01:33 13-Oct-2026 — S1-WP6-04/05 .bk-human: the Cloudflare check box, centred at the top of the sticky footer (empty unless Cloudflare asks) */
.bk-top{position:sticky;top:0;z-index:999;background:var(--bg);
  border-bottom:1px solid var(--border-faint)}

/* ---------- step body ---------- */
/* 32px, not 24: the first choice sat too close to the header (Sumit, 04-Sep). */
.bk-body{flex:1;padding-top:var(--s-7);padding-bottom:var(--s-9)}
.bk:has(.bk-foot:not([hidden])) .bk-body{padding-bottom:140px}
.bk-step[hidden]{display:none}
.bk-h{font-size:clamp(24px,5.4vw,32px);line-height:1.15;letter-spacing:-.02em;
  margin:0 0 var(--s-2)}
.bk-sub{color:var(--text-medium);margin:0 0 var(--s-6);max-width:var(--measure)}

/* ---------- category tiles ---------- */
/* Photograph on top, name UNDER it on a grey card in black type. The earlier
   white-on-scrim caption read as a banner; a card reads as a thing you pick
   (Sumit, 04-Sep). The count is written out -- "7" alone was a mystery badge. */
.bk-tiles{display:grid;grid-template-columns:1fr;gap:var(--s-4)}
.bk-tile{display:flex;flex-direction:column;width:100%;padding:0;
  border:1px solid var(--border-faint);border-radius:18px;overflow:hidden;
  cursor:pointer;background:var(--ink-8);color:var(--text-strong);text-align:start;
  transition:transform .25s var(--ease-circ),box-shadow .25s var(--ease-circ),
    border-color .25s var(--ease-circ)}
.bk-tile:hover{transform:translateY(-2px);box-shadow:0 10px 28px var(--ink-16);
  border-color:var(--teal)}
.bk-tile img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.bk-tile-t{display:block;padding:var(--s-4) var(--s-5) var(--s-5)}
.bk-tile-t b{display:block;font-size:clamp(17px,4.2vw,19px);font-weight:600;
  line-height:1.25;letter-spacing:-.01em;color:var(--text-strong)}
.bk-tile-t span{display:block;margin-top:4px;font-size:13px;font-weight:500;
  color:var(--text-medium)}

/* ---------- service rows ---------- */
.bk-catbar{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-5)}
.bk-catbar img{flex:0 0 64px;width:64px;height:64px;border-radius:14px;object-fit:cover}
.bk-catbar div{min-width:0}
.bk-catbar b{display:block;font-size:19px;font-weight:600;line-height:1.25}
.bk-catbar span{display:block;font-size:13px;color:var(--text-subtle);margin-top:2px}

.bk-list{display:grid;grid-template-columns:1fr;gap:var(--s-2)}
/* Name on its own line with the full column width. Price sits in the meta row
   underneath rather than stealing width, because names run long here --
   "Device Care (Tracheostomy, PEG, NGT, Catheter)" has to breathe. */
.bk-row{display:flex;align-items:flex-start;gap:var(--s-4);width:100%;
  padding:var(--s-4);border:1px solid var(--border-faint);border-radius:14px;
  background:var(--surface-card);cursor:pointer;text-align:start;
  color:var(--text-strong);
  transition:border-color .2s var(--ease-circ),background .2s var(--ease-circ)}
.bk-row:hover{border-color:var(--teal);background:var(--bg)}
.bk-row[aria-pressed="true"]{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
/* 64px, up from 48: the mark is the only picture a service row has until the
   client sends per-service photos. */
.bk-mark{flex:0 0 64px;width:64px;height:64px;border-radius:16px;display:flex;
  align-items:center;justify-content:center}
.bk-mark svg{width:32px;height:32px}
.bk-row-t{flex:1;min-width:0}
.bk-row-t b{display:block;font-size:16px;font-weight:600;line-height:1.3;
  overflow-wrap:anywhere}
/* Struck-through "before" price (21-Sep, Q10 A): quieter than the price it precedes. */
.bk-was{color:var(--text-subtle);font-weight:400;text-decoration:line-through;margin-inline-end:4px}
.bk-was .bk-dh{font-size:.92em}
.bk-desc{display:block;margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--text-medium);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bk-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin-top:6px;
  font-size:13px;color:var(--text-subtle)}
/* 15px, not 13: the guide's floor for the symbol on screen is 12px, and the
   price is what the customer reads (Sumit). */
.bk-meta .bk-amt{color:var(--text-strong);font-weight:600;font-size:15px}
.bk-meta .bk-enq{color:var(--purple);font-weight:600}
.bk-chev{flex:0 0 auto;align-self:center;width:18px;height:18px;
  stroke:var(--text-subtle);fill:none;stroke-width:2}

/* ---------- chips: emirate, dates, times ---------- */
.bk-chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.bk-chip{padding:var(--s-3) var(--s-4);border:1px solid var(--border-subtle);
  border-radius:10px;background:var(--bg);color:var(--text-strong);cursor:pointer;
  font-size:14px;font-weight:500;transition:all .18s var(--ease-circ)}
.bk-chip:hover{border-color:var(--teal)}
.bk-chip[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.bk-chip:disabled{opacity:.35;cursor:not-allowed}

/* Dates scroll horizontally -- a 7x5 desktop calendar grid is the wrong shape
   for a thumb, and availability only runs 14 days ahead anyway. The strip runs
   to the edges of ITS CARD, not of the screen: bled to the viewport, the first
   chip sat cut against the phone's edge (Sumit, 04-Sep). scroll-padding keeps
   the snap point off the card edge too. */
.bk-days{display:flex;gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:var(--s-1);margin-inline:calc(var(--s-5) * -1);padding-inline:var(--s-5);
  scroll-padding-inline:var(--s-5);scrollbar-width:none}
.bk-days::-webkit-scrollbar{display:none}
/* The month is named once above the strip. Without it the chips read as bare
   numbers with no way to tell which month -- and the slot count underneath the
   date made it worse, two unlabelled numbers stacked in one chip. */
/* Air between the label, the month and the chips, and inside each chip between
   the weekday and the number: the card read as cramped (Sumit, third review). */
.bk-month{font-size:14px;font-weight:600;color:var(--text-medium);
  margin-bottom:var(--s-4)}
.bk-day{flex:0 0 64px;scroll-snap-align:start;padding:12px 0 14px;border-radius:14px;
  border:1px solid var(--border-subtle);background:var(--bg);cursor:pointer;
  text-align:center;color:var(--text-strong);transition:all .18s var(--ease-circ)}
.bk-day u{display:block;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;text-decoration:none;color:var(--text-medium);margin-bottom:5px}
.bk-day b{display:block;font-size:22px;font-weight:600;line-height:1.25;
  font-variant-numeric:tabular-nums}
.bk-day[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.bk-day[aria-pressed="true"] u{color:#ffffffd6}
.bk-day:disabled{opacity:.3;cursor:not-allowed}

/* Date and time are two decisions. The date strip sits on the page; the
   times sit in their own grey panel so the eye reads "first this, then that". */
.bk-block{margin-bottom:var(--s-5)}
.bk-lbl{font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;
  color:var(--text-subtle);margin:0 0 var(--s-3)}
.bk-block-date,.bk-block-times{padding:var(--s-5);border-radius:16px;background:var(--ink-8);
  border:1px solid var(--border-faint);overflow:hidden}
.bk-block-date .bk-lbl,.bk-block-times .bk-lbl{color:var(--text-medium)}
.bk-block-date .bk-lbl{margin-bottom:var(--s-4)}
.bk-block-date .bk-day{border-color:var(--border-faint)}
.bk-block-times .bk-part:first-of-type{margin-top:0}
.bk-block-times .bk-chip{border-color:var(--border-faint)}
.bk-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:var(--s-2)}
.bk-part{margin-top:var(--s-5)}
.bk-part h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-subtle);margin:0 0 var(--s-3);font-weight:600}

/* ---------- form ---------- */
.bk-form{display:grid;grid-template-columns:1fr;gap:var(--s-4)}
.bk-field{display:flex;flex-direction:column;gap:6px}
.bk-field label{font-size:13px;font-weight:600;color:var(--text-medium)}
.bk-field input,.bk-field textarea{width:100%;padding:14px var(--s-4);
  border:1px solid var(--border-subtle);border-radius:12px;background:var(--bg);
  color:var(--text-strong);font:inherit;font-size:16px;   /* 16px stops iOS zooming */
  transition:border-color .18s var(--ease-circ)}
.bk-field textarea{resize:vertical;min-height:84px}
.bk-field input:focus,.bk-field textarea:focus{outline:none;border-color:var(--teal)}
.bk-field.bad input,.bk-field.bad textarea{border-color:var(--error)}
.bk-err{font-size:12px;color:var(--error);min-height:0}
.bk-field.bad .bk-err{min-height:16px}

.bk-check{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-3);
  border:1px solid var(--border-faint);border-radius:12px;background:var(--surface-card);
  cursor:pointer;font-size:14px;line-height:1.45;color:var(--text-medium)}
.bk-check input{flex:0 0 20px;width:20px;height:20px;margin-top:1px;accent-color:var(--teal)}
.bk-check-link{color:inherit;font-weight:500;text-decoration:underline;text-underline-offset:2px}
.bk-check-link:hover,.bk-check-link:focus-visible{color:var(--teal-deep)}

/* ---------- review ---------- */
.bk-sum-list{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3) var(--s-5);
  margin:0 0 var(--s-6);padding:var(--s-5);border:1px solid var(--border-faint);
  border-radius:16px;background:var(--surface-card)}
.bk-sum-list dt{font-size:13px;color:var(--text-subtle);white-space:nowrap}
.bk-sum-list dd{margin:0;font-size:15px;font-weight:500;overflow-wrap:anywhere}
.bk-total{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-5);border-radius:16px;background:var(--teal-16);
  border:1px solid var(--teal-32);margin-bottom:var(--s-4)}
/* Direct child only: the Dirham glyph wrapper inside <b> is also a span. */
.bk-total > span{font-size:14px;color:var(--text-medium)}
.bk-total b{font-size:24px;font-weight:600;letter-spacing:-.02em}

/* ---------- money ---------- */
/* The Central Bank's Dirham outline (book.js DIRHAM), filled in the text
   colour and sat on the baseline at the numerals' cap height -- the guide
   asks for the symbol to the left of the value, same height, baseline and
   weight as the digits (p.22). The box is 1.15:1, so .84em wide by .73em. */
.bk-dh{display:inline;white-space:nowrap}
.bk-dh svg{width:.84em;height:.73em;vertical-align:-.01em;margin-inline-end:.09em;
  fill:currentColor;stroke:none}
.bk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

/* ---------- notices ---------- */
.bk-note{border-inline-start:3px solid var(--warning);background:var(--surface-card);
  padding:var(--s-3) var(--s-4);border-radius:0 10px 10px 0;font-size:13px;
  color:var(--text-medium);margin-bottom:var(--s-4)}
.bk-note.err{border-inline-start-color:var(--error)}
.bk-refund{background:var(--surface-card);border:1px solid var(--border-faint);border-radius:10px;
  padding:var(--s-3) var(--s-4);margin-bottom:var(--s-4);font-size:13px;color:var(--text-medium);
  overflow-wrap:anywhere}
.bk-refund-h{font-size:14px;line-height:20px;letter-spacing:0;font-weight:600;color:var(--text-strong);margin:0 0 var(--s-2)}
.bk-refund-list{margin:0;padding-inline-start:1.2em;list-style:disc}
.bk-refund-list li+li{margin-top:var(--s-1)}
.bk-empty{text-align:center;padding:var(--s-10) var(--s-4);color:var(--text-subtle)}
.bk-load{text-align:center;padding:var(--s-10);color:var(--text-subtle)}

/* ---------- sticky footer CTA ---------- */
.bk-foot{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--bg);
  border-top:1px solid var(--border-faint);padding-top:var(--s-3);
  padding-bottom:max(var(--s-3),env(safe-area-inset-bottom))}
.bk-foot-in{display:flex;align-items:center;gap:var(--s-4)}
/* S1-WP6-04/05: Cloudflare's check box (js/book-human.js); invisible unless Cloudflare is unsure, then 300 x 65 px */
.bk-human{display:flex;justify-content:center;max-width:100%}
.bk-sum{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-4)}
.bk-sum-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
/* The price is what the customer is checking here, so it is the big line.
   It used to be 12px in --text-subtle, which Sumit read as "very light". */
/* Row 1 is the service, row 2 is location · date · time. They used to share
   one line, which had no room for the date (Sumit, fifth review). */
.bk-sum-svc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;font-size:15px;font-weight:600;line-height:1.3;color:var(--text-strong)}
.bk-sum-when{display:block;font-size:13px;font-weight:500;line-height:1.3;
  color:var(--text-medium);overflow-wrap:anywhere}
.bk-sum-amt{flex:0 0 auto;display:block;font-size:22px;font-weight:700;line-height:1.2;
  letter-spacing:-.02em;color:var(--text-strong);white-space:nowrap}
.bk-sum-svc i,.bk-sum-when i,.bk-sum-amt i{font-style:normal;color:var(--text-subtle);font-weight:400}
.bk-next{flex:0 0 auto;padding:var(--s-4) var(--s-7);border-radius:12px;border:0;
  background:var(--teal);color:#fff;font-size:15px;font-weight:600;cursor:pointer;
  transition:background .2s var(--ease-circ)}
.bk-next:hover:not(:disabled){background:var(--teal-deep)}
.bk-next:disabled{background:var(--border-subtle);color:var(--text-subtle);cursor:not-allowed}
/* Phones: two rows. Row 1 is the booking line with the price at its end, row 2
   is a full-width Continue. One row squeezed "Long Term Care · 4 hours · Al…"
   against a button wider than the summary (Sumit, fourth review). */
@media (max-width:719px){
  .bk-foot{padding-top:var(--s-3)}
  .bk-foot-in{flex-direction:column;align-items:stretch;gap:var(--s-3)}
  .bk-sum-svc{font-size:14px;font-weight:600}
  .bk-sum-when{font-size:13px}
  .bk-foot .bk-next{width:100%;min-height:50px;padding:14px var(--s-5);font-size:16px}
  .bk:has(.bk-foot:not([hidden])) .bk-body{padding-bottom:172px}
}

/* ---------- cancel-booking dialog ---------- */
/* margin:auto is what centres a <dialog>; base.css resets every margin to 0,
   which is why it sat in the top-left corner (Sumit, third review). On a phone
   it is a sheet that rises from the bottom, where the thumb is. */
.bk-dlg{position:fixed;margin:auto;border:0;border-radius:18px;padding:var(--s-6);
  width:min(92vw,400px);background:var(--bg);color:var(--text-strong);
  box-shadow:0 24px 64px var(--ink-32)}
.bk-dlg[open]{animation:bk-dlg-in .28s var(--ease-circ)}
@keyframes bk-dlg-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.bk-dlg::backdrop{background:var(--ink-48);backdrop-filter:blur(3px)}
.bk-dlg h2{font-size:20px;font-weight:600;letter-spacing:-.015em;margin:0 0 var(--s-2);
  padding-inline-end:44px}
.bk-dlg p{font-size:15px;color:var(--text-medium);margin:0 0 var(--s-6)}
.bk-dlg-b{display:flex;gap:var(--s-3);justify-content:flex-end}
.bk-dlg-x{position:absolute;top:var(--s-4);inset-inline-end:var(--s-4);display:inline-flex;
  align-items:center;justify-content:center;width:36px;height: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)}
.bk-dlg-x:hover{background:var(--surface-card);border-color:var(--border-medium)}
.bk-dlg-x svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round}
@media (max-width:719px){
  .bk-dlg{margin:auto 0 0;width:100%;max-width:none;border-radius:22px 22px 0 0;
    padding:var(--s-6) var(--s-5) max(var(--s-6),env(safe-area-inset-bottom))}
  .bk-dlg[open]{animation:bk-sheet-in .34s var(--ease-circ)}
  .bk-dlg-b{flex-direction:column-reverse}   /* Cancel on top, Keep under it */
  .bk-dlg-b button{width:100%;padding-top:var(--s-4);padding-bottom:var(--s-4)}
}
@keyframes bk-sheet-in{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.bk-dlg[open]{animation:none}}
.bk-btn-ghost{padding:var(--s-4) var(--s-6);border-radius:12px;
  border:1px solid var(--border-subtle);background:transparent;color:var(--text-strong);
  font-size:15px;font-weight:600;cursor:pointer}
.bk-btn-ghost:hover{background:var(--surface-card)}

@media (min-width:560px){
  .bk-form{grid-template-columns:1fr 1fr}
  .bk-field:nth-last-child(-n+2){grid-column:1/-1}
  .bk-check{grid-column:1/-1}
  .bk-tiles{grid-template-columns:1fr 1fr}
  .bk-list{grid-template-columns:1fr 1fr}
}
@media (min-width:720px){
  .bk-body{padding-top:var(--s-9)}
  .bk-logo img{height:30px}
}

/* ---- confirmation screen (15:20 04-Sep-2026) ---- */
.bk-done-actions{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-6)}
.bk-done-actions .bk-next,.bk-done-actions .bk-btn-ghost{display:flex;align-items:center;
  justify-content:center;min-height:50px;text-decoration:none;width:100%}
.bk-note.bk-important{border-inline-start-color:var(--text-strong)}
.bk-card{margin-top:var(--s-5)}
.bk-sum-list bdi{font-variant-numeric:tabular-nums}
/* ---- right-to-left: same markup, mirrored ---- */
[dir="rtl"] .bk-ic svg,[dir="rtl"] .bk-crumb svg{transform:scaleX(-1)}
[dir="rtl"] .bk-dh{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .bk-sum-svc i,[dir="rtl"] .bk-sum-when i{margin:0 .25em}