/* Book a repair (book.html), Amazon checkout style (Sir, Oct 24):
   numbered steps on the left, a sticky summary with the button on the right; phone: one column, summary last. */
.bk{background:var(--gray);padding:0 var(--gut) 72px}
.bk-top{max-width:1180px;margin:0 auto;padding:28px 0 18px}
.bk-crumb{display:flex;gap:8px;font-size:13px;line-height:18px;color:var(--ink-2)}
.bk-crumb a{color:var(--link);text-decoration:none}
.bk-crumb a:hover{text-decoration:underline}
.bk-h1{margin-top:6px;font-size:34px;line-height:40px;font-weight:700;letter-spacing:-.4px}
.bk-small{margin-top:12px;font-size:13px;line-height:18px;color:var(--ink-2)}
.bk-body{margin-top:12px;font-size:17px;line-height:25px}
.bk-link{color:var(--link);background:none;border:0;padding:0;cursor:pointer;font:inherit;text-decoration:none}
.bk-link:hover{text-decoration:underline}

.bk-co{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;max-width:1180px;margin:0 auto;align-items:start}

/* steps: white boxes, number + title row, content under */
.bk-steps{display:grid;gap:14px}
.bk-step{min-width:0;margin:0;padding:22px 24px 24px;border:0;border-radius:14px;background:var(--white);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.bk-sh{display:flex;align-items:center;gap:12px;float:left;width:100%;margin-bottom:16px;padding:0;font-size:20px;line-height:26px;font-weight:700}
.bk-sb{clear:both}
.bk-n{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-size:14px;font-weight:600}
.bk-step:has(:checked) .bk-n,.bk-step.is-done .bk-n{background:var(--mag)}

/* device tiles */
.bk-devices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.bk-dev{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;border-radius:12px;cursor:pointer;
  border:1px solid var(--line);font-size:14px;line-height:18px;text-align:center;transition:border-color .15s ease,box-shadow .15s ease}
.bk-dev input,.bk-chip input{position:absolute;opacity:0;width:1px;height:1px}
.bk-dev-ic{display:grid;place-items:center;height:40px}
.bk-dev-ic svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bk-dev:hover{border-color:var(--ink-3)}
.bk-dev:has(input:checked){border-color:var(--mag);box-shadow:0 0 0 1px var(--mag);color:var(--mag);background:#fdf6f8}
.bk-dev:has(input:focus-visible){outline:2px solid var(--mag);outline-offset:2px}

/* problem chips */
.bk-chips{display:flex;flex-wrap:wrap;gap:8px}
.bk-chip span{display:inline-flex;align-items:center;height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--white);cursor:pointer;
  font-size:14px;line-height:18px;transition:border-color .15s ease,color .15s ease}
.bk-chip:hover span{border-color:var(--ink-3)}
.bk-chip input:checked + span{border-color:var(--mag);box-shadow:0 0 0 1px var(--mag);color:var(--mag);background:#fdf6f8}
.bk-chip input:focus-visible + span{outline:2px solid var(--mag);outline-offset:2px}

/* fields: floating labels */
.bk-field{position:relative;margin-top:16px}
.bk-row{display:flex;gap:12px}
.bk-row .bk-field{flex:1;margin-top:0}
.bk-field input,.bk-field select,.bk-field textarea{display:block;width:100%;min-height:52px;padding:18px 14px 0;border:1px solid var(--ink-3);border-radius:10px;
  background:var(--white);font-size:16px;line-height:24px;appearance:none;-webkit-appearance:none}
.bk-field textarea{padding-top:22px;resize:vertical}
.bk-field select{padding-right:40px;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center/20px}
.bk-field label{position:absolute;left:15px;right:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;top:8px;font-size:12px;line-height:16px;color:var(--ink-2);pointer-events:none;
  transform-origin:0 0;transition:transform .2s cubic-bezier(.22,1,.36,1),color .2s ease}   /* (smooth pass, Oct 31) moves with transform, not top/font-size */
/* empty field: the label sits in the middle at 16px = the 12px label scaled by 4/3 and moved down (same spot as before) */
.bk-field :is(input,textarea):placeholder-shown:not(:focus) + label{transform:translateY(8px) scale(1.3333);right:calc(15px + 25%)}
.bk-field :is(input,select,textarea):focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 1px var(--focus)}
.bk-field [aria-invalid="true"]{border-color:var(--mag);box-shadow:0 0 0 1px var(--mag)}
.bk-devices:has([aria-invalid="true"]) .bk-dev,.bk-chips:has([aria-invalid="true"]) .bk-chip span{border-color:var(--mag)}

/* summary column (Amazon's "Place your order" box) */
.bk-sum{position:sticky;top:64px;display:grid;gap:14px}
.bk-sum-box{padding:20px;border-radius:14px;background:var(--white);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.bk-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;border:0;border-radius:980px;background:var(--mag);color:#fff;
  font:inherit;font-size:17px;font-weight:500;cursor:pointer;transition:background .2s ease}
.bk-btn:hover{background:var(--mag-hover)}
.bk-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.bk-fine{margin-top:10px;font-size:12px;line-height:16px;color:var(--ink-2);text-align:center}
.bk-error{margin-top:10px;padding:10px 12px;border-radius:10px;background:#fdf0f3;color:var(--mag);font-size:14px;line-height:19px}
.bk-sum-pic{margin-top:16px;aspect-ratio:16/10;border-radius:12px;background:var(--gray);overflow:hidden;display:grid;place-items:center}
.bk-sum-pic img{width:70%;height:90%;object-fit:contain;mix-blend-mode:multiply}
.bk-sum-h{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:17px;line-height:22px;font-weight:700}
.bk-where .bk-sum-h{margin-top:0;padding-top:0;border-top:0}
.bk-where p{margin-top:8px;font-size:14px;line-height:20px;color:var(--ink-2)}
.bk-sum-list{margin:10px 0 0}
.bk-sum-list div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:14px;line-height:19px}
.bk-sum-list dt{color:var(--ink-2)}
.bk-sum-list dd{margin:0;text-align:right;font-weight:500}
.bk-sum-list dd.is-empty{color:var(--ink-3);font-weight:400}
.bk-sum-total{display:flex;justify-content:space-between;gap:12px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line);font-size:15px;line-height:20px}
.bk-sum-total b{color:var(--mag)}
.bk-sum-perks{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.bk-sum-perks li{display:flex;align-items:center;gap:10px;font-size:13px;line-height:18px;color:#1a7f37}
.bk-sum-perks svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* done card */
.bk-done{max-width:640px;margin:0 auto;padding:40px 28px;border-radius:18px;background:var(--white);text-align:center}
.bk-done-ic{display:inline-grid;margin-bottom:16px;color:var(--mag)}
.bk-done-ic svg{width:56px;height:56px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bk-done-h{font-size:28px;line-height:32px;font-weight:700}
.bk-again{margin-top:24px;font-size:17px}

@media (max-width:980px){
  .bk-co{grid-template-columns:minmax(0,1fr)}
  .bk-sum{position:static}
}
@media (max-width:734px){
  .bk{padding:0 16px 48px}
  .bk-h1{font-size:28px;line-height:34px}
  .bk-step{padding:18px 16px 20px}
  .bk-devices{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .bk-row{flex-direction:column}
}
.bk-pick{margin-top:16px}.bk-pick .bk-field[hidden]{display:none}
@media (pointer:coarse){.bk-where .bk-link{display:inline-block;padding:12px 0;margin:-12px 0}}
@media (prefers-reduced-motion:reduce){.bk-dev,.bk-chip span,.bk-btn,.bk-field label{transition:none}}
.bk-sum-pic[hidden],.bk-error[hidden]{display:none}
/* phones / small iPads: Send booking stays at the bottom of the screen (Amazon-style), in place of the WhatsApp | Call dock */
.bk-bar{display:none}
@media (max-width:980px){
  body.book .dock{display:none}
  .bk-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 -1px 0 rgba(0,0,0,.08)}
  .bk-bar .bk-btn{max-width:520px;margin:0 auto}
  .bk{padding-bottom:96px}
}
.bk-bar[hidden]{display:none!important}
.bk-step{scroll-margin-top:72px}
.bk-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}   /* spam trap, people never see it */
.bk-btn.is-busy{opacity:.6;cursor:progress}
/* "Booking sent" screen (Sir, Oct 24) */
.bk-done{max-width:560px;padding:44px 32px 36px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.bk-done-ic svg{width:64px;height:64px;stroke-width:1.8}
.bk-done:not([hidden]) .bk-done-ic{animation:bk-pop .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes bk-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.bk-done-eye{font-size:15px;font-weight:600;color:var(--mag)}
.bk-done-h{margin-top:4px;font-size:32px;line-height:38px}
.bk-done-num{margin-top:10px;font-size:16px;color:var(--ink-2)}
.bk-done-num b{color:var(--ink);font-variant-numeric:tabular-nums}
.bk-done-list{margin-top:22px;padding:14px 16px;border-radius:12px;background:var(--gray);text-align:left}
.bk-next{margin:22px 0 0;padding:0;list-style:none;counter-reset:n;text-align:left;display:grid;gap:12px}
.bk-next li{counter-increment:n;display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:21px;color:var(--ink-2)}
.bk-next li::before{content:counter(n);flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--mag);color:#fff;font-size:13px;font-weight:600}
.bk-next b{color:var(--ink)}
.bk-done-btns{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:26px}
.bk-btn-line{width:auto;padding:0 28px;background:#fff;color:var(--mag);border:1px solid var(--mag);text-decoration:none}
.bk-btn-line:hover{background:var(--mag);color:#fff}
.bk-again{margin-top:0;min-height:44px}
@media (prefers-reduced-motion:reduce){.bk-done:not([hidden]) .bk-done-ic{animation:none}}
.bk [hidden]{display:none!important}   /* the form must really go away after Send */
/* (Sir, Nov 1) photo gone, Send booking moved to the end of the summary */
.bk-sum-box > .bk-sum-h:first-child{margin-top:0;padding-top:0;border-top:0}
html body .bk-sum-box > .bk-btn:not(#_a){margin-top:22px !important}
/* (Sir, Nov 1: "what is this") the thank-you screen was still in the old light colours: white box, white text.
   Now dark glass with light text, chrome step numbers */
html body.book .bk-done-list:not(#_a){background:rgba(255,255,255,.05) !important;border:1px solid rgba(222,220,219,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
html body.book .bk-done-list:not(#_a) dt{color:rgba(245,244,238,.6) !important;-webkit-text-fill-color:rgba(245,244,238,.6)}
html body.book .bk-done-list:not(#_a) dd{color:#F5F4EE !important;-webkit-text-fill-color:#F5F4EE}
html body.book .bk-next:not(#_a) li{color:rgba(245,244,238,.68) !important;-webkit-text-fill-color:rgba(245,244,238,.68)}
html body.book .bk-next:not(#_a) b{color:#F5F4EE !important;-webkit-text-fill-color:#F5F4EE}
html body.book .bk-next:not(#_a) li::before{background:linear-gradient(180deg,#F4F3F1 0%,#C9C7C5 48%,#8C8A89 52%,#DAD8D6 100%) !important;
  color:#0B0B0B !important;-webkit-text-fill-color:#0B0B0B}
/* (Sir, Nov 3 spacing sweep) phone: 10 devices in 3 columns left "Other laptop" alone at the left; centre it */
@media (max-width:734px){.bk-devices>.bk-dev:last-child:nth-child(3n+1){grid-column:2}}