/* ==========================================================================
   The Fix Center — booking.css
   Styles for the booking wizard (assets/js/booking.js) and the /boeken page.
   Reuses the base tokens; dark compact page-hero over a light wizard card.
   ========================================================================== */

/* compact page hero for /boeken */
.book-hero {
  background: var(--ink-950);
  color: var(--fg);
  padding: calc(74px + clamp(2.4rem, 5vh, 4rem)) 0 clamp(2.4rem, 5vh, 4rem);
  position: relative;
  overflow: clip;
}
.book-hero .container { position: relative; z-index: 1; }
.book-hero h1 {
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.6rem);
  letter-spacing: -0.035em; line-height: 1.02; margin: 0.7rem 0 0.6rem;
}
.book-hero h1 .accent { color: var(--accent); }
.book-hero p { color: var(--fg-dim); font-size: var(--text-lead); max-width: 52ch; }

.book-main { background: var(--paper-2); padding-block: clamp(2.5rem, 5vw, 4.5rem); min-height: 40vh; }
.book-main .container { max-width: 820px; }

/* ---------- wizard shell ---------- */
.bk {
  background: color-mix(in oklch, var(--paper) 40%, white);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.bk__panel { padding: clamp(1.4rem, 4vw, 2.6rem); }

.bk-head { margin-bottom: 1.5rem; }
.bk-head h3 { font-size: var(--text-h3); margin-top: 0.5rem; letter-spacing: -0.02em; }

/* ---------- progress ---------- */
.bk__steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0.4rem; margin: 0; padding: 1rem clamp(1.4rem, 4vw, 2.6rem);
  background: color-mix(in oklch, var(--ink-950) 4%, var(--paper));
  border-bottom: 1px solid var(--line);
  counter-reset: bkstep; list-style: none;
}
.bk__steps li {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-dim);
  padding-top: 0.6rem; border-top: 2px solid var(--line);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.bk__steps .dot {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--paper-3); color: var(--ink-dim); font-size: 0.7rem; flex: none;
}
.bk__steps li.active { color: var(--ink); border-top-color: var(--accent); }
.bk__steps li.active .dot { background: var(--accent); color: var(--accent-ink); }
.bk__steps li.done { color: var(--ink); border-top-color: var(--accent-strong); }
.bk__steps li.done .dot { background: var(--accent-strong); color: var(--accent-ink); }
@media (max-width: 620px) {
  .bk__steps .lbl { display: none; }
  .bk__steps { display: flex; justify-content: space-between; gap: 0.5rem; }
}

/* ---------- device tiles ---------- */
.bk-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
@media (max-width: 620px) { .bk-tiles { grid-template-columns: repeat(2, 1fr); } }
.bk-tile {
  display: grid; gap: 0.85rem; place-items: center; text-align: center;
  padding: 1.55rem 0.8rem; border-radius: var(--radius-lg);
  border: 1px solid var(--line); background: color-mix(in oklch, white 80%, var(--paper));
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bk-tile__ico {
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px;
  background: color-mix(in oklch, var(--accent) 10%, white);
  border: 1px solid color-mix(in oklch, var(--accent) 16%, var(--line));
  color: var(--accent-strong);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.bk-tile__label { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); }
.bk-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 32px oklch(46% 0.02 60 / 0.12); border-color: color-mix(in oklch, var(--accent) 55%, var(--line)); }
.bk-tile:hover .bk-tile__ico { background: color-mix(in oklch, var(--accent) 20%, white); border-color: color-mix(in oklch, var(--accent) 40%, var(--line)); }
.bk-tile.is-sel { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 8%, var(--paper)); box-shadow: 0 0 0 3px var(--accent-glow); }

/* ---------- repair rows ---------- */
/* Two columns from 720px: the list is 23 options deep on a phone, and a single
   column turns choosing into scrolling. */
/* minmax(0, 1fr), never a bare 1fr. `1fr` means `minmax(auto, 1fr)`, and the
   `auto` floor is the item's MIN-CONTENT — so a card that cannot shrink forces
   its track wider and steals space from the other one. That is exactly what
   went wrong: the tracks came out 304.8px and 353.9px instead of equal halves,
   overflowing the panel by 30px and pushing the right column's prices out past
   the card edge. minmax(0, …) removes that floor so the tracks stay equal and
   inside the container. Same cause on mobile: the single auto track was blown
   out to 354px inside a 292px panel, which pushed the price off-screen. */
.bk-repairs { display: grid; gap: 0.7rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .bk-repairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bk-repair {
  display: flex; align-items: flex-start; gap: 0.9rem; text-align: left;
  min-width: 0;                 /* a <button> will not shrink on its own */
  padding: 1rem 1.15rem; border-radius: var(--radius);
  border: 1.5px solid var(--line); background: var(--paper);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* From tablet up the card edge carries more weight, so the grid of options
   reads as separate cards rather than one field of text. Kept to 2px — at 3px
   the unselected cards start competing with the selected one. */
@media (min-width: 720px) {
  .bk-repair { border-width: 2px; border-color: color-mix(in oklch, var(--ink) 13%, var(--line)); }
}
.bk-repair:hover { transform: translateY(-2px); border-color: color-mix(in oklch, var(--accent) 45%, var(--line)); box-shadow: var(--shadow-sm); }
.bk-repair.is-sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* Icon chip — same tinted-square treatment as the device tiles, so a repair
   card reads as part of the same family as step 1. */
.bk-repair__ico {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 12px;
  color: var(--accent-strong);
  background: color-mix(in oklch, var(--accent) 10%, white);
  border: 1px solid color-mix(in oklch, var(--accent) 16%, var(--line));
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bk-repair:hover .bk-repair__ico,
.bk-repair.is-sel .bk-repair__ico { background: color-mix(in oklch, var(--accent) 20%, white); }

.bk-repair__body { flex: 1; min-width: 0; display: grid; gap: 0.25rem; }
/* Wraps rather than forcing the row wider. The price is `white-space: nowrap`
   (a broken "vanaf €1 / 29" is worse than a second line), so without this the
   label and the price together set an unbreakable minimum width for the whole
   card. Allowing the wrap lets the price drop under a long label instead —
   which is what keeps it inside the card at every width. */
.bk-repair__top {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.15rem 0.7rem;
  min-width: 0;
}
.bk-repair__label { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink); min-width: 0; }
.bk-repair__desc { font-size: 0.85rem; line-height: 1.45; color: var(--ink-dim); }
.bk-repair__meta {
  display: inline-flex; align-items: center; gap: 0.32rem;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-dim);
}
.bk-repair__meta svg { flex: none; opacity: 0.7; }
.bk-repair__note { font-size: 0.82rem; color: var(--ink-dim); }
.bk-repair__price { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-dim); white-space: nowrap; }
.bk-repair__price b { font-family: var(--font-display); font-size: 1.12rem; color: var(--ink); }

/* Kwaliteiten onder een kaart: "Scherm" klapt open naar Budget, OLED, OEM.
   De open groep pakt op tablet en breder de volle rij, anders staan vier
   varianten in een halve kolom geperst. */
.bk-group { display: grid; gap: 0.5rem; min-width: 0; }
.bk-group__head { width: 100%; }
.bk-group__chev { flex: none; align-self: center; color: var(--ink-dim); transition: transform var(--dur) var(--ease); }
.bk-group.is-open .bk-group__chev { transform: rotate(180deg); }
.bk-group__items { display: none; }
.bk-group.is-open .bk-group__items {
  display: grid; gap: 0.5rem;
  padding-left: 1.05rem;
  border-left: 2px solid color-mix(in oklch, var(--accent) 24%, var(--line));
}
@media (min-width: 720px) { .bk-group.is-open { grid-column: 1 / -1; } }

/* "Offerte opsturen", onder het totaal op stap 5. Bewust rustig: het is een
   uitweg, geen tweede oproep naast de bevestigknop. */
.bk-quote { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin-top: 0.9rem; }
.bk-quote__note { font-size: 0.82rem; color: var(--ink-dim); }

/* The quote form, unfolded under the button. It sits inside the bill card, so
   it is a panel rather than a second card: another bordered box inside a
   bordered box reads as a nesting doll. The width is the card's, so the fields
   stack to one column on a phone like the rest of the wizard's forms. */
.bk-quoteform { flex-basis: 100%; margin-top: 0.3rem; }
.bk-quoteform__intro { margin: 0 0 0.7rem; font-size: 0.86rem; color: var(--ink-dim); line-height: 1.5; }
.bk-quoteform .bk-form { gap: 0.7rem 0.8rem; }
.bk-quoteform__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin-top: 0.9rem;
}
.bk-repair__price--tbd { color: var(--accent-text); font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; }
.bk-note { margin-top: 1rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-dim); }

/* ---------- brand tiles (step 2) ---------- */
.bk-brands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
@media (max-width: 620px) { .bk-brands { grid-template-columns: repeat(2, 1fr); } }
.bk-brand {
  padding: 1.15rem 0.8rem; border-radius: var(--radius);
  border: 1.5px solid var(--line); background: var(--paper);
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  letter-spacing: -0.02em; color: var(--ink);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bk-brand:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: color-mix(in oklch, var(--accent) 45%, var(--line)); }
.bk-brand.is-sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* Client-supplied brand logos, always in their original brand colours (this is
   the repair brand picker the client asked for). A fixed box keeps a wide
   wordmark (Samsung) and a square mark (Xiaomi) optically the same weight, so
   the grid stays even whatever each logo's aspect ratio is. */
.bk-brand--logo { display: grid; place-items: center; min-height: 74px; padding: 0.9rem; }
/* Every logo ships pre-normalised on one 320x80 canvas (see scratchpad/
   brand-logos.py) — the marks are already balanced against each other by ink
   area, so a single height here renders them all at equal visual weight.
   Sizing by max-height alone would put Samsung at ~6x Apple's footprint. */
.bk-brand__logo {
  height: 46px; width: auto; max-width: 100%; object-fit: contain;
  transition: transform var(--dur) var(--ease);
}
.bk-brand--logo:hover .bk-brand__logo { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .bk-brand__logo { transition: none; } }

/* ---------- model cards (step 3) ---------- */
/* A browsable grid, not a list. People recognise their phone by how it LOOKS —
   an iPhone 15 and a 15 Pro differ by a camera bump — so the render gets the
   room and the name sits under it. auto-fill keeps the columns responsive
   without a breakpoint per size. */
.bk-models {
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
@media (max-width: 420px) { .bk-models { grid-template-columns: repeat(2, 1fr); } }
.bk-model {
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem; text-align: center;
  padding: 0.9rem 0.7rem 1rem; border-radius: var(--radius);
  border: 1.5px solid var(--line); background: var(--paper);
  font-family: var(--font-display); font-weight: 500; font-size: 0.92rem; line-height: 1.3; color: var(--ink);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bk-model:hover { transform: translateY(-3px); border-color: color-mix(in oklch, var(--accent) 45%, var(--line)); box-shadow: var(--shadow-sm); }
.bk-model.is-sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.bk-model[hidden] { display: none; }

/* The device render itself. No frame, no fill, no inner padding: the client
   asked for the white box around the photo gone, and these are cut-out product
   shots that read better floating on the card than boxed in a chip. A tall
   fixed height (not a square) matches a phone's portrait aspect, so the model
   fills the space instead of shrinking to fit a square. */
/* The image is sized in the SAME absolute unit as its box, never in percent.
   A percentage height here resolves against a grid/flex track that is itself
   sized by the image, which is circular — CSS falls back to `auto` and a
   160x212 render scaled to 170px, spilling out of a 112px box. One shared
   custom property keeps the two in step. */
.bk-model { --shot-h: 112px; }
.bk-model__shot {
  flex: none; display: grid; place-items: center;
  width: 100%; height: var(--shot-h);
}
.bk-model__shot img {
  width: 100%; height: var(--shot-h);
  object-fit: contain;
  transition: transform var(--dur) var(--ease);
}
.bk-model:hover .bk-model__shot img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .bk-model__shot img { transition: none; } }
.bk-model__shot--icon { color: color-mix(in oklch, var(--accent) 55%, var(--ink-dim)); }
.bk-model__name { display: block; width: 100%; }

/* "Ander model" catch-all — same card as a real model (the client asked for
   identical treatment), only the dashed edge marks it as the fallback. */
.bk-model--other { border-style: dashed; }
.bk-model--other .bk-model__name small {
  display: block; margin-top: 0.15rem;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 400; color: var(--ink-dim);
}
.bk-empty { margin-top: 1.2rem; text-align: center; color: var(--ink-dim); }

/* Five per row on a full-width desktop panel (client request). A fixed count
   rather than a narrower auto-fill minimum, so the density is exactly five and
   does not drift to four or six as the panel resizes. minmax(0, …) for the same
   reason as the repair grid: a bare 1fr lets a long model name push its track
   wider and unbalance the row.

   Placed AFTER the .bk-model rules on purpose — these overrides share their
   specificity, so earlier in the file they would simply lose. The card drops
   from ~153px to ~121px at this density, so the render and the label step down
   with it; at full size the names wrap to two lines and the rows lose their
   rhythm. */
@media (min-width: 1000px) {
  .bk-models { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.55rem; }
  .bk-model { --shot-h: 92px; padding: 0.8rem 0.5rem 0.9rem; font-size: 0.84rem; }
  .bk-model--other .bk-model__name small { font-size: 0.62rem; }
}

/* Model filter */
.bk-find { position: relative; display: block; margin-bottom: 1rem; }
.bk-find__ico {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; color: var(--ink-dim); pointer-events: none;
}
.bk-find input {
  width: 100%; padding: 0.85rem 1rem 0.85rem 2.9rem;
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper);
  font: inherit; color: var(--ink);
}
.bk-find input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow);
}
.bk-find input::-webkit-search-cancel-button { cursor: pointer; }
.bk-otherwrap {
  margin-bottom: 1.4rem; padding: 1.05rem 1.15rem;
  border: 1px solid color-mix(in oklch, var(--accent) 22%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--accent) 5%, var(--paper));
}
.bk-otherwrap .bk-note { margin-top: 0.6rem; }

/* ---------- color swatches (step 4) ---------- */
.bk-colors-wrap { margin-top: 1.5rem; }
.bk-sublabel {
  display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 0.7rem;
}
.bk-colors { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.bk-color {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.85rem 0.5rem 0.55rem; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--paper);
  font-size: 0.9rem; color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bk-color:hover { border-color: color-mix(in oklch, var(--accent) 45%, var(--line)); }
.bk-color.is-sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.bk-color__dot {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 1px solid color-mix(in oklch, var(--ink) 18%, transparent);
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.18);
}

/* ---------- appointment form ---------- */
.bk-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; }
.bk-field { display: grid; gap: 0.4rem; }
.bk-field--wide { grid-column: 1 / -1; }
.bk-field > span { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.bk-field input, .bk-field select, .bk-field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  padding: 0.75rem 0.85rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); background: var(--paper);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.bk-field textarea { resize: vertical; }
.bk-field input:focus, .bk-field select:focus, .bk-field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow);
}
@media (max-width: 560px) { .bk-form { grid-template-columns: 1fr; } }

/* ---------- payment options (step 5) ---------- */
.bk-pay { display: grid; gap: 0.7rem; margin-bottom: 0.5rem; }
.bk-payopt {
  display: flex; align-items: flex-start; gap: 0.85rem; text-align: left;
  padding: 1rem 1.1rem; border-radius: var(--radius);
  border: 1.5px solid var(--line); background: var(--paper);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bk-payopt.is-sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.bk-payopt__radio {
  flex: none; width: 20px; height: 20px; margin-top: 0.15rem; border-radius: 50%;
  border: 2px solid var(--line); position: relative; transition: border-color var(--dur) var(--ease);
}
.bk-payopt.is-sel .bk-payopt__radio { border-color: var(--accent); }
.bk-payopt.is-sel .bk-payopt__radio::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent);
}
.bk-payopt__body { flex: 1; min-width: 0; }
.bk-payopt__ico { flex: none; height: 24px; width: auto; max-width: 64px; object-fit: contain; align-self: center; }
.bk-payopt b { display: block; font-family: var(--font-display); font-size: 1.02rem; color: var(--ink); }
.bk-payopt small { display: block; color: var(--ink-dim); font-size: 0.86rem; margin-top: 0.1rem; }

/* ---------- afronden (step 5) ---------- */
/* Laid out like gefixt's last step: two equal columns from 860px, left how
   the device reaches us, right the bill, the details, the payment and the
   button. The DOM order is bill, handover, details, so on one column (phone)
   the customer reads what it costs first and ends on the button. The booking
   page holds the wizard at 820px; that is tight for two forms side by side,
   so the page container widens for this step only (:has()). */
.book-main .container:has(.bk-final) { max-width: 1080px; }
.bk-final { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) {
  .bk-final {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "hand top" "hand rest";
    gap: 1.2rem 2.2rem; align-items: start;
  }
  .bk-final__hand { grid-area: hand; }
  .bk-final__top  { grid-area: top; }
  .bk-final__rest { grid-area: rest; }
}
.bk-back {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin: -0.6rem 0 1.1rem; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.88rem; color: var(--ink-dim);
}
.bk-back:hover { color: var(--ink); }
.bk-block { margin-top: 1.5rem; }
.bk-final .bk-pay { margin-bottom: 0; }

/* Handover cards. The chosen one unfolds what we still need for it (date and
   time, or the address), so a card is a div with a button head, not a button:
   a form inside a button is not valid HTML. */
.bk-handover .bk-sublabel { margin-bottom: 0.7rem; }
.bk-hands { display: grid; gap: 0.7rem; }
.bk-hand {
  border-radius: var(--radius); border: 1.5px solid var(--line); background: var(--paper);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bk-hand.is-sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.bk-hand__head {
  display: flex; align-items: flex-start; gap: 0.85rem; text-align: left;
  width: 100%; padding: 1rem 1.1rem; background: none; border: 0; cursor: pointer;
}
.bk-hand__radio {
  flex: none; width: 20px; height: 20px; margin-top: 0.15rem; border-radius: 50%;
  border: 2px solid var(--line); position: relative; transition: border-color var(--dur) var(--ease);
}
.bk-hand.is-sel .bk-hand__radio { border-color: var(--accent); }
.bk-hand.is-sel .bk-hand__radio::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent);
}
.bk-hand__body { min-width: 0; }
.bk-hand b { display: block; font-family: var(--font-display); font-size: 1.02rem; color: var(--ink); }
.bk-hand small { display: block; color: var(--ink-dim); font-size: 0.86rem; margin-top: 0.15rem; line-height: 1.45; }
.bk-hand__fee {
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 400;
  color: var(--accent-text); margin-left: 0.35rem;
}
.bk-hand__more { display: grid; gap: 0.9rem; padding: 0 1.1rem 1.15rem 3rem; }
@media (max-width: 560px) { .bk-hand__more { padding-left: 1.1rem; } }
.bk-hand__more .bk-sublabel { margin: 0.2rem 0 -0.2rem; }
.bk-hand__more .bk-form { gap: 0.8rem 0.9rem; }
.bk-note--pc { margin-top: -0.2rem; }

.bk-ship {
  padding: 1.05rem 1.15rem; border-radius: var(--radius);
  border: 1px solid color-mix(in oklch, var(--accent) 22%, var(--line));
  background: color-mix(in oklch, var(--accent) 5%, var(--paper));
}
.bk-ship b { font-family: var(--font-display); color: var(--ink); }
.bk-ship address { font-style: normal; margin: 0.35rem 0 0.9rem; color: var(--ink); line-height: 1.55; }
.bk-ship p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--ink-dim); }

/* Carrier choice, inside the unfolded "Opsturen" card. Two small pills rather
   than a third stack of handover-sized cards: it is one informative field, not
   a decision that changes the price or the route, and it has to read as
   subordinate to the handover choice it sits inside. */
.bk-carrier { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.bk-carrier__opt {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.6rem 0.95rem; border-radius: var(--radius);
  border: 1.5px solid var(--line); background: var(--paper);
  font: inherit; cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bk-carrier__opt:hover { border-color: color-mix(in oklch, var(--accent) 45%, var(--line)); }
.bk-carrier__opt.is-sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.bk-carrier__radio {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line); position: relative; transition: border-color var(--dur) var(--ease);
}
.bk-carrier__opt.is-sel .bk-carrier__radio { border-color: var(--accent); }
.bk-carrier__opt.is-sel .bk-carrier__radio::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent);
}
.bk-carrier__opt b { font-family: var(--font-display); font-size: 0.98rem; color: var(--ink); font-weight: 600; }

/* The device card on top of the bill: render, name, repair, and a way back. */
.bk-device { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.9rem; }
.bk-device__shot {
  flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px;
  background: color-mix(in oklch, var(--accent) 8%, white);
  border: 1px solid color-mix(in oklch, var(--accent) 16%, var(--line));
}
.bk-device__shot img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.bk-device__shot--icon { color: var(--accent-strong); }
.bk-device__body { flex: 1; min-width: 0; }
.bk-device b { display: block; font-family: var(--font-display); font-size: 1.08rem; color: var(--ink); }
.bk-device small { display: block; color: var(--ink-dim); font-size: 0.86rem; margin-top: 0.1rem; }
.bk-link {
  font: inherit; font-size: 0.85rem; color: var(--accent-text); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.bk-link:hover { color: var(--ink); }

/* The bill. */
.bk-sum {
  display: grid; gap: 0.5rem; padding: 1.1rem 1.2rem; border-radius: var(--radius);
  border: 1px solid color-mix(in oklch, var(--accent) 28%, var(--line));
  background: color-mix(in oklch, var(--accent) 8%, var(--paper));
}
.bk-sum__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.95rem; color: var(--ink); }
.bk-sum__row b { font-family: var(--font-display); white-space: nowrap; }
.bk-sum__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-top: 0.3rem; padding-top: 0.8rem;
  border-top: 1px solid color-mix(in oklch, var(--accent) 28%, var(--line));
}
.bk-sum__total span { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.bk-sum__total small {
  display: block; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 400;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim);
}
.bk-sum__total strong { font-family: var(--font-display); font-size: 1.9rem; letter-spacing: -0.02em; color: var(--accent-strong); }
.bk-sum__note { margin: 0; font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-dim); }
.bk-sum .bk-quote { margin-top: 0.4rem; }

/* Terms (only when the shop set a terms page) and the one button. */
.bk-confirm { display: grid; gap: 0.8rem; margin-top: 1.5rem; }
.bk-terms { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; color: var(--ink); }
.bk-terms input { margin-top: 0.2rem; accent-color: var(--accent); }
.bk-terms a { color: var(--accent-text); }
.bk-confirm__btn { justify-content: center; width: 100%; font-size: 1.05rem; padding: 1.05em 1.5em; }
.bk-confirm__btn[disabled] { opacity: 0.6; pointer-events: none; }
.bk-confirm__note { text-align: center; color: var(--ink-dim); font-size: 0.82rem; }

/* ---------- offer request (step 5, no-price repairs) ---------- */
.bk-quotecard {
  display: flex; align-items: flex-start; gap: 0.9rem;
  margin-bottom: 1.5rem; padding: 1.1rem 1.2rem; border-radius: var(--radius);
  border: 1px solid color-mix(in oklch, var(--accent) 24%, var(--line));
  background: color-mix(in oklch, var(--accent) 6%, var(--paper));
}
.bk-quotecard__ico {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px;
  color: var(--accent-strong);
  background: color-mix(in oklch, var(--accent) 16%, white);
  border: 1px solid color-mix(in oklch, var(--accent) 22%, var(--line));
}
.bk-quotecard p { margin: 0; color: var(--ink); line-height: 1.55; }
/* A quote option is a different kind of choice from a priced one, so it reads
   differently: no hard price to compare, an invitation to ask. */
.bk-repair--quote .bk-repair__ico {
  color: var(--ink-dim);
  background: color-mix(in oklch, var(--ink) 5%, white);
  border-color: var(--line);
}
.bk-repair--quote.is-sel .bk-repair__ico,
.bk-repair--quote:hover .bk-repair__ico { color: var(--accent-strong); background: color-mix(in oklch, var(--accent) 14%, white); }

/* ---------- actions / error ---------- */
.bk-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.8rem; }
.bk-actions .btn[disabled] { opacity: 0.4; pointer-events: none; }
.bk__error {
  margin-top: 1rem; padding: 0.7rem 0.9rem; border-radius: var(--radius-sm);
  background: color-mix(in oklch, oklch(62% 0.19 25) 12%, var(--paper));
  border: 1px solid color-mix(in oklch, oklch(62% 0.19 25) 40%, transparent);
  color: oklch(45% 0.16 25); font-size: 0.9rem;
}

/* ---------- done / confirmation ---------- */
.bk-done { text-align: center; display: grid; justify-items: center; gap: 0.9rem; padding-block: clamp(2.5rem, 6vw, 4rem); }
.bk-done__check {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in oklch, var(--accent) 18%, transparent); color: var(--accent-strong);
}
.bk-done h3 { font-size: var(--text-h3); }
.bk-done p { color: var(--ink-dim); max-width: 48ch; }
.bk-done .btn { margin-top: 0.6rem; }