/* Created: 12:58 21-Sep-2026 */
/* Updated: 16:18 21-Sep-2026 — geofencing note: .bk-area.ok green, .bk-area.err red (client meeting 21-Sep) */
/* Updated: 16:47 22-Sep-2026 — map and area note span the whole form row; the step's intro runs to one line where it fits */
/* Updated: 18:32 22-Sep-2026 — category header intro back on its own row (the h1 was wrapping word by word) */
/* Updated: 19:59 22-Sep-2026 — point 43: Service Location picker on the details screen (.bk-region) */
/* Updated: 20:43 22-Sep-2026 — empty area note hidden until the pin (or the area) gives it text (Sumit) */
/* Updated: 16:44 23-Sep-2026 — wrapper hidden guard: display:flex beat the hidden attribute, so a keyless engine still showed the map buttons */
/* Updated: 16:32 05-Oct-2026 — C-18 (05-Oct round, D-148): name, phone and email in one row on the details screen from 1024 px */
/* The map pin on the details step (21-Sep client request B1). Its own file: book.css is
   already over the 300-line limit. Uses the booking form's tokens only. */

.bk-map-wrap{display:flex;flex-direction:column;gap:var(--s-3)}
.bk-map-wrap[hidden]{display:none}
.bk-map-actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.bk-map-actions .bk-btn-ghost{display:inline-flex;align-items:center;gap:8px;
  min-height:44px;font:inherit;cursor:pointer}
.bk-map-actions .bk-btn-ghost svg{width:18px;height:18px;flex:none}
.bk-map{height:280px;border-radius:12px;overflow:hidden;
  border:1px solid var(--border-subtle);background:var(--surface-card)}
.bk-map[hidden]{display:none}
.bk-map-note{margin:0;font-size:.875rem;color:var(--text-medium)}
.bk-map-note.ok{color:var(--success)}
.bk-map-note.err{color:var(--error)}
@media (max-width:480px){.bk-map{height:240px}}

/* Geofencing (21-Sep): the pin's area, accepted or refused for this service. */
.bk-area.ok{border-left-color:#1e8e5a;color:#155f3e;background:#eaf6ef}
.bk-area.err{border-left-color:#b3261e;color:#8c1d18;background:#fbecea}
/* 22-Sep: in the two-column form the map and the area note had one column each, so
   the note stretched into a tall green box beside the buttons. Both take the row. */
.bk-form>.bk-map-wrap,.bk-form>.bk-area{grid-column:1/-1}
.bk-area{margin:0}
.bk-area:empty{display:none}
.bk .bk-sub{max-width:var(--measure-6)}
/* Sumit 22-Sep: the cap above let a category page's intro ("Select one service.") share the
   heading's row -- flex-basis 100% capped at 680px fits beside it -- so the h1 wrapped one
   word per line. In the category header the intro always takes its own full row. */
.bk .bk-hd .bk-sub{flex-basis:100%;max-width:none}

/* Point 43: where the service is wanted, on the first screen. A fieldset, so it needs the
   field label's look spelled out; two areas per row keeps the first screen short. */
.bk-region{grid-column:1/-1;border:0;margin:0;padding:0;min-width:0}
.bk-region legend{padding:0;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--text-medium)}
.bk-region .bk-opts{grid-template-columns:repeat(2,minmax(0,1fr))}
.bk-region.bad .bk-opt{border-color:var(--error)}

/* ---- lane F, 05-Oct round: C-18 (D-148 "one row on desktop") ----
   The details screen only: name, phone and email side by side from 1024 px (the form is
   856 px there, so each field is about 270 px). Below 1024 px nothing changes. The address
   form and the review's consent box share .bk-form but never carry .bk-details. The
   Service Location picker and the consent boxes already span the whole row. */
@media (min-width:1024px){.bk-form.bk-details{grid-template-columns:repeat(3,minmax(0,1fr))}}