/* ==================================================================
    Gadcet Fix — booking flow
   ------------------------------------------------------------------
   The wizard is almost entirely BENCH register: five steps, a tight
   grid, tabular figures, hairline dividers and a running price. The
   only street-register element is the progress rail at the top, which
   floods green so the flow reads as one continuous surface rather
   than as five separate pages.

   Numbered markers are correct here and only here: booking a repair
   genuinely is a sequence, so the steps are an ordered list.

   Every token comes from styles.css. Nothing in this file invents a
   colour, a radius or a type size.
   ================================================================== */

/* ---------- Shell ------------------------------------------------- */

body.page-booking { background: var(--bench); }

/* The flow supplies its own sticky summary and Continue button on a
   phone, so the site-wide action bar is suppressed for it. */
body.page-booking { padding-bottom: 0; }

.bk { padding-bottom: var(--s9); }
@media (max-width: 899px) { .bk { padding-bottom: 96px; } }

.bk__layout { display: grid; gap: var(--s7); align-items: start; }
@media (min-width: 1000px) {
  .bk__layout { grid-template-columns: 7fr 5fr; gap: var(--s8); }
}
.bk__container { padding-top: var(--s8); }

/* ---------- Progress rail — street register ----------------------- */

.bk-progress {
  background: var(--green-flood);
  color: var(--on-flood);
  padding-top: calc(var(--header-h) + var(--s6));
  padding-bottom: var(--s5);
}

.bk-progress__steps {
  display: none;
  counter-reset: bkstep;
  gap: var(--s2);
}
@media (min-width: 800px) {
  .bk-progress__steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
}

.bk-progress__step {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-top: var(--s4);
  border-top: 2px solid var(--on-flood-line);
  color: var(--on-flood-soft);
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.bk-progress__step.is-current,
.bk-progress__step.is-done { border-top-color: var(--green-bright); color: #fff; }

.bk-progress__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--on-flood-line);
  font-stretch: 112%;
}
.bk-progress__step.is-current .bk-progress__num {
  background: var(--green-bright);
  border-color: var(--green-bright);
  color: var(--ink);
}
.bk-progress__step.is-done .bk-progress__num {
  background: transparent;
  border-color: var(--green-bright);
  color: var(--green-bright);
}

/* On a phone the rail collapses to a count and the current step name,
   which is all the orientation a 360px screen has room for. */
.bk-progress__mobile {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
@media (min-width: 800px) { .bk-progress__mobile { display: none; } }
.bk-progress__count { color: var(--on-flood-soft); }
.bk-progress__now {
  font-stretch: 115%;
  color: #fff;
}

.bk-progress__bar {
  height: 3px;
  background: var(--on-flood-line);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-top: var(--s4);
}
@media (min-width: 800px) { .bk-progress__bar { display: none; } }
.bk-progress__fill {
  display: block;
  height: 100%;
  background: var(--green-bright);
  transition: width 260ms var(--ease);
}
@media (prefers-reduced-motion: reduce) { .bk-progress__fill { transition: none; } }

/* ---------- Steps ------------------------------------------------- */

.bk-step { display: none; }
.bk-step.is-active { display: block; }

.bk-step__title {
  font-stretch: 118%;
  margin-bottom: var(--s4);
  text-wrap: balance;
}
.bk-step__lede { color: var(--text-soft); max-width: 46ch; margin-bottom: var(--s7); }
.bk-step__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s7); }
.bk-step__helpers { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s5); }

.bk-back {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  margin-bottom: var(--s5);
  color: var(--text-soft);
}
.bk-back:hover { color: var(--green); }
.bk-back svg { transform: rotate(180deg); }

/* ---------- Choice cards ------------------------------------------ */

.bk-cards { display: grid; gap: var(--s4); }
.bk-cards--device { grid-template-columns: repeat(2, 1fr); }
.bk-cards--brand { grid-template-columns: repeat(2, 1fr); }
.bk-cards--repairs { grid-template-columns: 1fr; }
.bk-cards--method { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .bk-cards--device, .bk-cards--brand { grid-template-columns: repeat(3, 1fr); }
  .bk-cards--method { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .bk-cards--device { grid-template-columns: repeat(3, 1fr); }
  .bk-cards--brand { grid-template-columns: repeat(4, 1fr); }
}

.bk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-dense);
  text-decoration: none;
  color: inherit;
  min-height: 88px;
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms var(--ease), background-color 140ms var(--ease);
}
.bk-card:hover { border-color: var(--green); background: rgba(14, 124, 74, 0.05); }
.bk-card.is-selected {
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green);
  background: rgba(14, 124, 74, 0.07);
}

.bk-card__media { display: grid; place-items: center; height: 104px; overflow: hidden; }
.bk-card__media img { max-height: 104px; width: auto; object-fit: contain; }
.bk-card__icon { color: var(--green); display: grid; place-items: center; }
.bk-card__body { display: grid; gap: var(--s1); }
.bk-card__sub { color: var(--text-mute); }

.bk-card__price {
  font-stretch: 115%;
  color: var(--amber-deep);
  font-variant-numeric: tabular-nums;
}
.bk-card__price--quote {
  color: var(--text-mute);
}

.bk-card__tick {
  position: absolute;
  top: var(--s3); right: var(--s3);
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  opacity: 0;
  transition: opacity 140ms var(--ease);
}
.bk-card.is-selected .bk-card__tick { opacity: 1; }

.bk-card--repair { flex-direction: row; align-items: center; gap: var(--s4); }
.bk-card--repair .bk-card__body { flex: 1; }
.bk-card--other { border-style: dashed; }

/* ---------- Model grid -------------------------------------------- */

.bk-modelgrid { display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .bk-modelgrid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .bk-modelgrid { grid-template-columns: repeat(5, 1fr); } }

.bk-model-card {
  position: relative;
  display: grid;
  gap: var(--s2);
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-dense);
  text-align: center;
  cursor: pointer;
  transition: border-color 140ms var(--ease);
}
.bk-model-card:hover { border-color: var(--green); }
.bk-model-card.is-selected { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.bk-model-card__media { height: 72px; display: grid; place-items: center; }
.bk-model-card__media img { max-height: 72px; width: auto; object-fit: contain; }
.bk-model-card__year { color: var(--text-mute); }
.bk-model-card__tick { position: absolute; top: 6px; right: 6px; color: var(--green); opacity: 0; }
.bk-model-card.is-selected .bk-model-card__tick { opacity: 1; }
.bk-modellist__none { color: var(--text-mute); }

/* ---------- Search within a step ---------------------------------- */

.bk-search, .bk-find { position: relative; margin-bottom: var(--s5); }
.bk-search__input, .bk-find__input {
  width: 100%;
  min-height: 52px;
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-dense);
}
.bk-search__input:focus, .bk-find__input:focus {
  outline: 2px solid var(--green-bright);
  outline-offset: 1px;
  border-color: var(--green);
}
.bk-find__status { color: var(--text-mute); margin-top: var(--s2); min-height: 1.4em; }

/* ---------- Repair tabs and the detail panel ---------------------- */

.bk-repairtabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.bk-rtab {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-dense);
  background: var(--surface);
  cursor: pointer;
}
.bk-rtab:hover { border-color: var(--ink); }
.bk-rtab[aria-selected='true'], .bk-rtab.is-selected {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.bk-rtab__icon { display: inline-grid; place-items: center; }
.bk-rtab__tick { color: var(--green-bright); }

.bk-rpanel {
  display: grid;
  gap: var(--s5);
  padding: var(--s6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
@media (min-width: 800px) { .bk-rpanel { grid-template-columns: 1fr auto; align-items: start; } }
.bk-rpanel__title { font-stretch: 112%; }
.bk-rpanel__detail { color: var(--text-soft); margin-top: var(--s3); max-width: 56ch; }
.bk-rpanel__row { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s4); }
.bk-rpanel__fact { display: flex; align-items: center; gap: var(--s2); color: var(--text-soft); }
.bk-rpanel__icon { color: var(--green); display: inline-grid; place-items: center; }
.bk-rpanel__aside { display: grid; gap: var(--s3); justify-items: start; }
@media (min-width: 800px) { .bk-rpanel__aside { justify-items: end; text-align: right; } }
.bk-rpanel__price {
  font-stretch: 115%;
  color: var(--amber-deep);
  font-variant-numeric: tabular-nums;
}
.bk-rpanel__price--quote { color: var(--text-mute); }
.bk-rpanel__note { color: var(--text-mute); max-width: 30ch; }
.bk-rpanel__cta { margin-top: var(--s2); }
.bk-rpanel--other { border-style: dashed; }

/* Part grades, listed openly with both prices. */
.bk-grades { display: grid; gap: var(--s2); margin-top: var(--s4); }
.bk-grade {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-dense);
  background: var(--surface);
  cursor: pointer;
  min-height: 52px;
}
.bk-grade:hover { border-color: var(--green); }
.bk-grade.is-selected { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.bk-grade__price { font-stretch: 112%; color: var(--amber-deep); font-variant-numeric: tabular-nums; }

/* ---------- Chosen repairs ---------------------------------------- */

.bk-chosen { margin-top: var(--s6); border-top: 1px solid var(--line); padding-top: var(--s5); }
.bk-chosen__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); margin-bottom: var(--s4); }
.bk-chosen__blurb { color: var(--text-mute); }
.bk-chosen__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
.bk-chosen__add { margin-top: var(--s4); }

/* ---------- Stores ------------------------------------------------ */

.bk-stores { display: grid; gap: var(--s4); }
.bk-store {
  display: grid;
  gap: var(--s3);
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-dense);
  cursor: pointer;
  text-align: left;
}
.bk-store:hover { border-color: var(--green); }
.bk-store.is-selected { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.bk-store__top { display: flex; justify-content: space-between; align-items: start; gap: var(--s3); }
.bk-store__distance { color: var(--text-soft); white-space: nowrap; }
.bk-store__address { color: var(--text-soft); }
.bk-store__open { display: flex; align-items: center; gap: var(--s2); }
.bk-store__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-mute); flex: none; }
.bk-store__dot.is-open { background: var(--green-bright); box-shadow: 0 0 0 3px rgba(34, 196, 107, 0.22); }
.bk-store__slot { color: var(--text-soft); }
.bk-store__slot-label { color: var(--ink); }
.bk-store__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.bk-store__book { margin-top: var(--s2); }
.bk-store__blocked { color: var(--warn); }
.bk-store__none { color: var(--text-mute); }

.bk-altstores { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }
.bk-altstore { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; }

.bk-storemap { margin-top: var(--s5); border: 1px solid var(--line); border-radius: var(--r-dense); overflow: hidden; background: var(--surface); }
.bk-storemap__svg { width: 100%; height: auto; display: block; }
.bk-storemap__note { padding: var(--s3) var(--s4); color: var(--text-mute); border-top: 1px solid var(--line); }
.bk-storeview__btn { margin-top: var(--s4); }

.bk-drawer__head { display: flex; justify-content: space-between; gap: var(--s4); align-items: start; }
.bk-drawer__address { color: var(--text-soft); }
.bk-drawer__status { display: flex; align-items: center; gap: var(--s2); }
.bk-drawer__hours { margin-top: var(--s4); }
.bk-drawer__tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }

/* ---------- Appointment ------------------------------------------- */

.bk-appt__eyebrow { color: var(--text-mute); }
.bk-appt__title { font-stretch: 112%; }
.bk-appt__context { color: var(--text-soft); margin-top: var(--s2); }

.bk-cal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-dense); padding: var(--s5); }
.bk-cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.bk-cal__nav { display: flex; gap: var(--s2); }
.bk-cal__nav button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r-dense); }
.bk-cal__nav button:hover { border-color: var(--ink); }
.bk-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.bk-cal__dow { text-align: center; color: var(--text-mute); padding-bottom: var(--s2); }
.bk-cal__pad { aspect-ratio: 1; }
.bk-cal__day {
  aspect-ratio: 1;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--r-dense);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.bk-cal__day:hover:not(:disabled) { border-color: var(--green); }
.bk-cal__day:disabled { color: var(--text-mute); opacity: 0.4; cursor: not-allowed; }
.bk-cal__day.is-selected { background: var(--green); color: #fff; border-color: var(--green); }
.bk-cal__key { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s4); color: var(--text-mute); }

.bk-dates { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--s2); }
.bk-dates::-webkit-scrollbar { display: none; }
.bk-chip {
  display: grid;
  gap: 2px;
  min-width: 76px;
  min-height: 68px;
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-dense);
  background: var(--surface);
  text-align: center;
  cursor: pointer;
}
.bk-chip:hover { border-color: var(--green); }
.bk-chip.is-selected { background: var(--ink); border-color: var(--ink); color: #fff; }
.bk-chip__day { opacity: 0.75; }
.bk-chip__date { font-stretch: 112%; font-variant-numeric: tabular-nums; }
.bk-chip__note { opacity: 0.75; }
.bk-chip--more { min-width: 60px; }

.bk-slots { margin-top: var(--s6); }
.bk-slots__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); margin-bottom: var(--s4); }
.bk-slots__day { color: var(--text-mute); }
.bk-slotgroup { margin-bottom: var(--s5); }
.bk-slotgroup__none { color: var(--text-mute); }
.bk-slotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--s2); }
.bk-slot {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--r-dense);
  background: var(--surface);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.bk-slot:hover { border-color: var(--green); }
.bk-slot.is-selected { background: var(--green); border-color: var(--green); color: #fff; }
.bk-slot:disabled { opacity: 0.4; cursor: not-allowed; }
.bk-slots__chosen { margin-top: var(--s4); }
.bk-slots__go { margin-top: var(--s5); }

.bk-walkin { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }

/* ---------- Details form ------------------------------------------ */

.bk-form { display: grid; gap: var(--s5); max-width: 44rem; }
.bk-contact { display: grid; gap: var(--s5); }
@media (min-width: 700px) { .bk-contact { grid-template-columns: 1fr 1fr; } }
.bk-notes { grid-column: 1 / -1; }
.bk-note { color: var(--text-mute); }
.bk-terms { color: var(--text-soft); }
.bk-privacy { color: var(--text-mute); }
.bk-marketing { display: flex; gap: var(--s3); align-items: start; }
.bk-checklist { display: grid; gap: var(--s2); }
.bk-checklist li { display: flex; gap: var(--s2); align-items: start; color: var(--text-soft); }
/* The honeypot. Present for a bot, invisible and unreachable for a
   person, and never announced to a screen reader. */
.bk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bk-review { display: grid; gap: var(--s3); padding: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-dense); }
.bk-review__row { display: flex; justify-content: space-between; gap: var(--s4); }
.bk-review__sub { color: var(--text-mute); }

/* ---------- Summary rail — bench card, fills as you go ------------ */

.bk-summary { display: none; }
@media (min-width: 1000px) { .bk-summary { display: block; } }

.bk-summary__inner {
  position: sticky;
  top: calc(var(--header-h) + var(--s5));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s6);
}
.bk-summary__title {
  font-stretch: 112%;
  margin-bottom: var(--s4);
}
.bk-summary__empty { color: var(--text-mute); }
.bk-summary__list { display: grid; gap: var(--s3); }
.bk-summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.bk-summary__row:last-child { border-bottom: 0; padding-bottom: 0; }
.bk-summary__fact { color: var(--text-mute); }
.bk-summary__device { display: flex; align-items: center; gap: var(--s3); }

/* The running price. The largest thing in the rail, because it is the
   number the customer is actually tracking as they move through. */
.bk-summary__price {
  display: block;
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-stretch: 118%;
  color: var(--amber-deep);
  font-variant-numeric: tabular-nums;
}
.bk-summary__price--quote {
  color: var(--text-mute);
}

.bk-summary__trust {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  color: var(--text-soft);
}
.bk-summary__trust li { display: flex; align-items: center; gap: var(--s2); }
.bk-summary__trust svg { color: var(--green); flex: none; }

/* ---------- Mobile summary bar and sheet -------------------------- */

.bk-mobilebar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: var(--lift);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 1000px) { .bk-mobilebar { display: none; } }
.bk-mobilebar__toggle {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 64px;
  padding: var(--s3) var(--gutter);
  text-align: left;
}
.bk-mobilebar__label { color: var(--text-mute); flex: none; }
.bk-mobilebar__value { flex: 1; }
.bk-mobilebar__chev { transform: rotate(-90deg); color: var(--text-mute); }
.bk-mobilebar[aria-expanded='true'] .bk-mobilebar__chev { transform: rotate(90deg); }

.bk-sheet { position: fixed; inset: 0; z-index: 120; }
.bk-sheet[hidden] { display: none; }
.bk-sheet__backdrop { position: absolute; inset: 0; background: rgba(11, 31, 23, 0.5); }
.bk-sheet__panel {
  position: absolute;
  inset: auto 0 0 0;
  background: var(--surface);
  border-radius: var(--r-card) var(--r-card) 0 0;
  padding: var(--s4) var(--gutter) calc(var(--s7) + env(safe-area-inset-bottom, 0px));
  max-height: 82vh;
  overflow-y: auto;
}
.bk-sheet__grab { width: 40px; height: 4px; border-radius: var(--r-pill); background: var(--line); margin: 0 auto var(--s5); }
.bk-sheet__title { margin-bottom: var(--s4); }
.bk-sheet__body { margin-bottom: var(--s5); }

/* ---------- Modal -------------------------------------------------- */

.bk-modal { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: var(--gutter); }
.bk-modal[hidden] { display: none; }
.bk-modal__backdrop { position: absolute; inset: 0; background: rgba(11, 31, 23, 0.55); }
.bk-modal__panel {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-card);
  padding: var(--s7);
  max-width: 560px;
  width: 100%;
  max-height: 84vh;
  overflow-y: auto;
}
.bk-modal__x { position: absolute; top: var(--s4); right: var(--s4); width: 44px; height: 44px; color: var(--text-mute); }
.bk-modal__x:hover { color: var(--ink); }
.bk-modal__title { font-stretch: 112%; margin-bottom: var(--s4); padding-right: var(--s7); }
.bk-modal__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

/* ---------- Confirmation ------------------------------------------ */

.bk-done { text-align: center; max-width: 44rem; margin-inline: auto; padding-block: var(--s8); }
.bk-done__mark {
  width: 72px; height: 72px;
  margin: 0 auto var(--s6);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
}
.bk-done__actions { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; margin-top: var(--s7); }

.bk-ticket {
  margin-top: var(--s7);
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  overflow: hidden;
}
.bk-ticket__reflabel { color: var(--text-mute); }
.bk-ticket__ref {
  font-stretch: 120%;
  font-variant-numeric: tabular-nums;
  padding: var(--s5);
  background: var(--ink);
  color: var(--amber);
}
.bk-ticket__rows { padding: var(--s5); display: grid; gap: var(--s3); }

/* ---------- Manage and track -------------------------------------- */

.bk-manage, .bk-track { max-width: 44rem; margin-inline: auto; }
.bk-manage__head { margin-bottom: var(--s6); }
.bk-manage-lede { color: var(--text-soft); }
.bk-manage__lookup, .bk-manage-lookup, .bk-track-form { display: grid; gap: var(--s4); }
.bk-manage__result, .bk-manage-result, .bk-track-result { margin-top: var(--s7); }
/* A lookup result reuses the booking summary card, which the booking flow
   hides below 1000px (it is a sidebar there). A result must always show. */
.bk-manage__result .bk-summary, .bk-manage-result .bk-summary, .bk-track-result .bk-summary { display: block; }
.bk-manage__result { scroll-margin-block: calc(var(--header-h) + 24px) 24px; }
.bk-manage__result .bk-summary__inner { position: static; display: grid; gap: 20px; padding: var(--card-padding, 24px); }
.bk-manage__result .bk-summary__inner > :is(p, h2, dl) { margin: 0; }
.bk-manage__result .bk-summary__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.bk-manage__result .bk-summary__fact { display: grid; align-content: start; gap: 6px; padding-block: 16px; border-top: 1px solid var(--line); }
.bk-manage__result .bk-summary__fact dd { color: var(--ink); line-height: 1.5; }
@media (max-width: 479px) {
  .bk-manage__result .bk-summary__list { grid-template-columns: minmax(0, 1fr); }
  .bk-manage__result .bk-manage__buttons .btn { width: 100%; }
}
.bk-manage-status, .bk-track-status { min-height: 1.5em; }

/* ---------- Utility ----------------------------------------------- */

.bk-facts { display: flex; flex-wrap: wrap; gap: var(--s4); color: var(--text-soft); }
.bk-tag { display: inline-flex; align-items: center; min-height: 28px; padding: 2px var(--s2); border: 1px solid var(--line); border-radius: var(--r-dense); color: var(--text-mute); }
.bk-link { color: var(--green); text-decoration: none; border-bottom: 2px solid transparent; }
.bk-link:hover { border-bottom-color: currentColor; }
.bk-link--remove { color: var(--error); }
.bk-help { color: var(--text-mute); }
.bk-warn { display: flex; gap: var(--s3); padding: var(--s4); border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: var(--r-dense); background: var(--surface); }
.bk-locked:not(body) { display: flex; gap: var(--s3); padding: var(--s4); background: var(--bench); border-radius: var(--r-dense); }
.bk-empty { padding: var(--s7); text-align: center; border: 1px dashed var(--line); border-radius: var(--r-dense); }
.bk-empty__or { display: block; margin: var(--s4) 0 var(--s2); color: var(--text-mute); }
.bk-noscript { padding: var(--s5); border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: var(--r-dense); background: var(--surface); margin-top: var(--s6); }

.bk-fast { margin-bottom: var(--s6); padding: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-dense); }
.bk-fast__head { margin-bottom: var(--s3); }
.bk-fast__list { display: flex; flex-wrap: wrap; gap: var(--s2); }
.bk-fast__none { color: var(--text-mute); }
.bk-fast__go { margin-top: var(--s4); }

.bk-areas__head { margin-bottom: var(--s5); }
.bk-areas__lede { color: var(--text-soft); }
.bk-arealist { display: grid; gap: var(--s2); }
.bk-area { display: flex; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.bk-area__icon { color: var(--green); flex: none; }
.bk-area__text { flex: 1; }
.bk-area__where { color: var(--text-mute); }
.bk-area__trade { color: var(--green); }

.bk-devicehead { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s6); }
.bk-devicehead__media { width: 64px; flex: none; }
.bk-devicehead__media img { width: 100%; height: auto; }
.bk-devicehead__body { flex: 1; }

.bk-trust { background: var(--ink); }

/* Loading skeletons. A grey block that never pulses is calmer than
   one that does, and it respects reduced motion by construction. */
.bk-skel { display: grid; gap: var(--s3); }
.bk-skel__item { height: 88px; border-radius: var(--r-dense); background: var(--bench); border: 1px solid var(--line); }

/* ---------- State classes the flow actually sets ------------------
   booking.js uses `is-active` for the current choice and `is-chosen`
   for a repair already added to the basket, plus `is-selected` on the
   model grid, `is-open`/`is-shut` on a store's status and `is-closed`
   / `is-empty` on calendar cells. They are aliased rather than
   renamed, because renaming them would mean editing 2,900 lines of
   working flow logic to achieve nothing visible. */

.bk-card.is-active, .bk-card.is-chosen,
.bk-store.is-active, .bk-store.is-chosen {
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green);
  background: rgba(14, 124, 74, 0.07);
}
.bk-card.is-active .bk-card__tick, .bk-card.is-chosen .bk-card__tick { opacity: 1; }
.bk-model-card.is-active { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.bk-model-card.is-active .bk-model-card__tick { opacity: 1; }

.bk-rtab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.bk-rtab.is-chosen:not(.is-active) { border-color: var(--green); color: var(--green); }
.bk-rtab.is-chosen .bk-rtab__tick { color: currentColor; }

.bk-chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.bk-chip.is-empty { opacity: 0.45; }

.bk-slot.is-active { background: var(--green); border-color: var(--green); color: #fff; }

.bk-cal__day.is-active { background: var(--green); color: #fff; border-color: var(--green); }
.bk-cal__day.is-closed { color: var(--text-mute); opacity: 0.4; cursor: not-allowed; }

.bk-storeview__btn {
  min-height: 44px;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-dense);
  background: var(--surface);
}
.bk-storeview__btn.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.bk-store__open.is-open .bk-store__dot,
.bk-drawer__status.is-open .bk-store__dot { background: var(--green-bright); }
.bk-store__open.is-open::before,
.bk-drawer__status.is-open::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 0 3px rgba(34, 196, 107, 0.22);
  flex: none;
}
.bk-store__open.is-shut::before,
.bk-drawer__status.is-shut::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-mute);
  flex: none;
}
.bk-drawer__status { display: flex; align-items: center; gap: var(--s2); }

.bk-pin { cursor: pointer; }
.bk-pin.is-chosen { fill: var(--green); }

/* The details form marks an invalid field and shows what to fix. */
.bk-form .is-invalid input,
.bk-form .is-invalid select,
.bk-form .is-invalid textarea { border-color: var(--error); }

/* Scroll lock while a modal or sheet is open. */
body.bk-locked { overflow: hidden; }

.bk-list.is-ordered { counter-reset: bklist; }
/* Booking tracking uses the same site typography, surfaces and controls. */
.tracking-page .bk-manage { max-width: 1040px; }
.tracking-page [hidden] { display: none !important; }
.tracking-page .bk-manage__head { text-align: center; max-width: 640px; margin: 0 auto var(--s7); }
.tracking-page__icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: #eaf1db; color: var(--forest); margin-bottom: 16px; }
.tracking-page__eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); margin-bottom: 10px; }
.tracking-page .bk-manage__head h1 { font-size: clamp(28px, 3vw, 36px); line-height: 1.2; margin: 0 0 14px; }
.tracking-page .bk-manage__head > p:last-child { color: var(--text-soft); font-size: 16px; }
.tracking-page__lookup { display: grid; grid-template-columns: 1.1fr 1fr; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.tracking-page .bk-manage__lookup { padding: 32px; gap: 20px; }
.tracking-page h2 { font-size: 18px; line-height: 1.35; font-weight: 600; margin: 0 0 12px; letter-spacing: normal; }
.tracking-page h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.tracking-page .bk-manage__lookup h2 { margin: 0; }
.tracking-page .bk-manage__lookup > p { margin: 0; color: var(--text-soft); }
.tracking-page .field { display: grid; gap: 8px; }
.tracking-page .field input { width: 100%; min-height: 48px; }
.tracking-page .field small { color: var(--text-soft); font-size: 13px; }
.tracking-page__help { padding: 32px; background: var(--forest); color: #fff; }
.tracking-page__help h2, .tracking-page__help h3 { color: #fff; }
.tracking-page__help p, .tracking-page__help li { color: #d7e3da; }
.tracking-page__help ul { padding: 20px 0 20px 20px; display: grid; gap: 10px; list-style: disc; }
.tracking-page__help > div { padding-top: 20px; border-top: 1px solid #456359; }
.tracking-page__help .tlink { color: #d6f76a; margin-top: 12px; }
.tracking-page .form__status:empty { display: none; }
.tracking-page__dashboard { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: start; }
.tracking-page .bk-ticket { margin: 0; border-radius: 14px; }
.tracking-page .bk-ticket__ref { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 20px 24px; background: var(--forest); color: #fff; }
.tracking-page .bk-ticket__ref span { font-size: 14px; color: #d7e3da; }
.tracking-page .bk-ticket__ref strong { color: #d6f76a; font-size: 18px; }
.tracking-page .bk-ticket__status { margin: 20px 24px 0; }
.tracking-page .bk-pill { display: inline-flex; padding: 6px 12px; border-radius: 99px; font-size: 13px; font-weight: 600; background: #eef4e3; color: #176344; }
.tracking-page .bk-pill.is-cancelled { background: #f6eeee; color: #8c3434; }
.tracking-page .bk-ticket__rows { padding: 12px 24px 24px; gap: 0; }
.tracking-page .bk-ticket__rows > div { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.tracking-page .bk-ticket__rows > div:last-child { border-bottom: 0; padding-bottom: 0; }
.tracking-page dt { color: var(--text-soft); font-size: 14px; }
.tracking-page dd { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.tracking-page .bk-review__sub { display: inline-block; font-size: 14px; color: var(--text-soft); margin-top: 5px; }
.tracking-page__side { display: grid; gap: 16px; }
.tracking-page__progress, .tracking-page .bk-manage__actions, .tracking-page .bk-checklist { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.tracking-page .bk-track { margin: 20px 0 0; padding: 0; list-style: none; }
.tracking-page .bk-track__step { position: relative; display: flex; align-items: flex-start; gap: 12px; padding-bottom: 24px; font-size: 14px; }
.tracking-page .bk-track__step:not(:last-child)::before { content: ''; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--line); }
.tracking-page .bk-track__step:last-child { padding-bottom: 0; }
.tracking-page .bk-track__dot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c5cec8; background: #fff; }
.tracking-page .is-current .bk-track__dot { border-color: var(--green); box-shadow: inset 0 0 0 4px #fff; background: var(--green); }
.tracking-page .is-done .bk-track__dot { border-color: var(--green); background: var(--green); }
.tracking-page .is-done .bk-track__dot::after { content: '\2713'; display: block; color: #fff; text-align: center; line-height: 18px; }
.tracking-page .bk-track__now { font-size: 12px; color: var(--green); margin-left: auto; }
.tracking-page__notice { padding: 12px; background: #fff8e8; border-radius: 8px; color: #695128; font-size: 14px; }
.tracking-page__notice strong { display: block; }
.tracking-page .bk-done__actions, .tracking-page .bk-manage__buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; justify-content: stretch; }
.tracking-page .bk-done__actions .btn { flex: 1; }
.tracking-page .bk-checklist ul { padding-left: 20px; list-style: disc; color: var(--text-soft); display: grid; gap: 8px; font-size: 14px; }
.tracking-page .bk-note { padding: 20px; background: #eef4e8; border-radius: 10px; margin-top: 20px; font-size: 14px; }
.tracking-page .bk-manage__confirm, .tracking-page [data-reschedule-panel] { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.tracking-page .bk-manage__confirm p { margin-bottom: 12px; }
.tracking-page .bk-manage__confirm .bk-link { margin: 12px; }
@media (max-width: 700px) {
  .tracking-page__lookup, .tracking-page__dashboard { grid-template-columns: 1fr; }
  .tracking-page .bk-manage__lookup, .tracking-page__help { padding: 24px; }
  .tracking-page .bk-ticket__rows > div { grid-template-columns: 85px minmax(0,1fr); gap: 12px; }
  .tracking-page .bk-ticket__rows, .tracking-page__progress, .tracking-page .bk-manage__actions, .tracking-page .bk-checklist { padding: 20px; }
}
/* Page-scoped layout: no fixed masthead or shared repair-hub styles. */
body.tracking-page-shell { padding-top: 0; }
body.tracking-page-shell #site-header { position: relative; top: auto; left: auto; right: auto; height: 72px; min-height: 72px; transform: none; }
.tracking-page-shell .header__inner { height: 72px; min-height: 72px; }
.tracking-page-shell > .crumbs { margin-top: 0; padding-block: 12px; }
.tracking-page-shell :is(.crumbs, .footer) > .container { max-width: 1120px; }
.tracking-page-shell .tracking-page { padding: 32px 0 40px; }
.tracking-page .bk-manage { max-width: 960px; }
.tracking-page .bk-manage__head { margin-bottom: 24px; }
.tracking-page .bk-manage__head h1 { font-size: 42px; }
.tracking-page .bk-manage__head > p:last-child { max-width: 600px; margin-inline: auto; font-size: 16px; }
.tracking-page__icon { width: 48px; height: 48px; margin-bottom: 8px; }
.tracking-page__lookup { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); border-radius: 16px; box-shadow: 0 4px 20px #102c2306; }
.tracking-page .bk-manage__lookup { display: flex; flex-direction: column; align-items: stretch; gap: 16px; min-width: 0; padding: 32px; }
.tracking-page .bk-manage__lookup > p { font-size: 16px; }
.tracking-page .bk-manage__lookup > .tracking-page__legacy { padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.6; }
.tracking-page__legacy a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.tracking-page .form__status { scroll-margin-block: 24px; }
.tracking-page .form__status[data-state="error"] { padding: 12px 16px; background: color-mix(in srgb, var(--error) 5%, var(--surface)); border: 1px solid color-mix(in srgb, var(--error) 30%, var(--surface)); border-radius: var(--r-btn); color: var(--error); }
.tracking-page .field { gap: 8px; }
.tracking-page .field input { height: 56px; min-height: 56px; font-size: 16px; padding: 12px 16px; border-radius: 8px; }
.tracking-page .field input:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-color: var(--brand); box-shadow: none; }
.tracking-page .field label { font-size: 16px; font-weight: 500; }
.tracking-page .field input[aria-invalid="true"] { border-color: var(--error); }
.tracking-page__field-error { min-height: 20px; font-size: 13px; line-height: 20px; color: var(--error); }
.tracking-page__field-error:empty { display: none; }
.tracking-page .bk-manage__lookup > .btn { width: 100%; min-height: 56px; font-size: 16px; }
.tracking-page .btn:disabled { opacity: .65; cursor: wait; }
.tracking-page :is(a, button):focus-visible { outline: 3px solid var(--lime, #d6f76a); outline-offset: 3px; }
.tracking-page__help { display: flex; flex-direction: column; gap: 16px; padding: 32px 24px; border-radius: 0; min-width: 0; }
.tracking-page__help > .tracking-page__icon { display: none; }
.tracking-page__help h2, .tracking-page__help h3 { color: #fff; margin: 0; font-size: 18px; }
.tracking-page__help p, .tracking-page__help li { color: #e5eee7; font-size: 16px; line-height: 1.6; margin: 0; }
.tracking-page__help ul { padding: 0; margin: 8px 0; list-style: none; display: grid; gap: 16px; }
.tracking-page__help li { display: flex; gap: 12px; align-items: flex-start; }
.tracking-page__help li svg { flex: none; margin-top: 3px; color: var(--lime, #d6f76a); }
.tracking-page__help > div { margin-top: auto; padding-top: 24px; display: grid; gap: 8px; }
.tracking-page__help .tlink { font-size: 16px; min-height: 44px; color: #d6f76a; }
.tracking-page__help a:hover { text-decoration: underline; }
.tracking-page__reassurance { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 24px; padding: 0; margin: 24px 0 0; list-style: none; }
.tracking-page__reassurance li { display: inline-flex; align-items: center; gap: 8px; color: var(--text-soft); font-size: 14px; }
.tracking-page-shell .footer { position: static; margin: 0; padding: 0; }
.tracking-page-shell .footer__statement { padding-block: 32px; gap: 24px; }
.tracking-page-shell .footer__statement-line { font-size: 32px; line-height: 1.25; }
.tracking-page-shell .footer__main { padding-block: 32px; }
.tracking-page-shell .footer__bar { padding-block: 24px; }
.tracking-page-shell .footer__links a { min-height: 32px; }
@media (max-width: 1024px) {
  .tracking-page__lookup { grid-template-columns: 1fr; }
  .tracking-page__help { padding: 32px; }
  .tracking-page-shell .nav, .tracking-page-shell .header__phone { display: none; }
  .tracking-page-shell .menu-btn { display: inline-flex; }
}
@media (max-width: 600px) {
  .tracking-page-shell .container { padding-inline: var(--gutter); }
  .tracking-page-shell .tracking-page { padding-block: 24px 32px; }
  .tracking-page .bk-manage__head h1 { font-size: 32px; }
  .tracking-page .bk-manage__lookup, .tracking-page__help { padding: var(--card-padding, 20px); }
  .tracking-page__reassurance { flex-direction: column; align-items: center; gap: 8px; }
  .tracking-page-shell .footer__statement-line { font-size: 28px; }
  .tracking-page-shell .footer__links a { min-height: 44px; }
}
body.tracking-page-shell .footer .footer__statement-line { font-size: 32px; line-height: 1.25; }
body.tracking-page-shell .menu__list a[aria-current="page"] { color: var(--lime, #d6f76a); text-decoration: underline; text-underline-offset: 6px; }
@media (max-width: 600px) { body.tracking-page-shell .footer .footer__statement-line { font-size: 28px; } }

/* /rate-your-repair/ — the answer page for the post-repair review email. */
.rate-page .bk-manage { max-width: 640px; }
.rate-form { display: grid; gap: 22px; margin-top: 24px; padding: 28px; background: #fff; border: 1px solid var(--line, #dfe5de); border-radius: 16px; }
.rate-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.rate-form legend { margin-bottom: 12px; font-size: 17px; font-weight: 600; }
.rate-choice { display: grid; gap: 10px; }
.rate-choice label { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; border: 1px solid var(--line, #dfe5de); border-radius: 12px; cursor: pointer; font-weight: 500; }
.rate-choice label:has(input:checked) { border-color: var(--forest, #0f3d2e); background: #f1f8f2; }
.rate-choice input { width: 20px; height: 20px; accent-color: var(--forest, #0f3d2e); }
.rate-stars__row { display: flex; gap: 6px; }
.rate-form .rate-star { position: relative; cursor: pointer; font-size: 40px; line-height: 1; color: #c9cfc8; }
.rate-form .rate-star input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.rate-form .rate-star.is-on { color: #e09a00; }
.rate-star:has(input:focus-visible) { outline: 3px solid var(--lime, #d6f76a); outline-offset: 2px; border-radius: 6px; }
.rate-stars__label { min-height: 1.4em; margin-top: 6px; font-weight: 600; }
.rate-form textarea { width: 100%; padding: 12px 16px; font: inherit; font-size: 16px; border: 1px solid var(--line, #cfd6ce); border-radius: 8px; }
.rate-form .field small { display: block; margin-top: 6px; color: var(--text-soft, #5d6b65); font-weight: 400; }
.rate-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rate-optout, .rate-done { margin-top: 24px; padding: 24px 28px; background: #fff; border: 1px solid var(--line, #dfe5de); border-radius: 16px; }
.rate-done h2 { font-size: 24px; margin-bottom: 8px; }
#rate-error:empty { display: none; }
#rate-error { color: var(--error, #b42318); }
@media (max-width: 600px) { .rate-form, .rate-optout, .rate-done { padding: 20px; } .rate-form .rate-star { font-size: 44px; } }