/* HomeCall – booking flow, quote request, pay step and invoice pay link (builder B). base.css holds the design's
   .bk / .bstep / .days / .slots / .pays / .gw / .sum classes; this file only adds what the working pages need. */

/* The gateways' own brand colours on their letter tiles (third-party marks, the same in both themes). */
:root{--gw-stripe:#635BFF;--gw-paypal:#003087;--gw-paystack:#0BA4DB;--gw-razorpay:#0C2451;--gw-payhere:#E2363C;--gw-bank:#4A5070}
.gw .lg.g-stripe{background:var(--gw-stripe)}.gw .lg.g-paypal{background:var(--gw-paypal)}.gw .lg.g-paystack{background:var(--gw-paystack)}
.gw .lg.g-razorpay{background:var(--gw-razorpay)}.gw .lg.g-payhere{background:var(--gw-payhere)}.gw .lg.g-bank{background:var(--gw-bank)}
.gw label{min-width:0}
.gw label:focus-within{outline:2px solid var(--pri);outline-offset:2px}

.bk-page{padding-bottom:0}
.bk-err{color:var(--bad);margin-top:10px}
.bk-err[hidden]{display:none}
.bk-note{margin-top:10px;display:flex;gap:6px;align-items:flex-start}
.bk-note .ic{flex:none;margin-top:2px}

/* step 1 – address */
.bstep-h .chip{flex:none}
.bk-addr{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.bk-addrs{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.bk-addrs .check span{min-width:0;overflow-wrap:anywhere}
.bk-new{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px}
.bk-new[hidden]{display:none}
.bk-new .f{min-width:0}

/* step 2 – week paging + repeat */
.bk-wk{display:flex;gap:6px;flex:none;align-self:flex-start}
.bk-wk .btn{width:36px;padding:0}
.bk-wk .btn:disabled{opacity:.4;cursor:default}
.day{cursor:pointer}.day.full{cursor:default}
.slot{cursor:pointer;min-width:0}.slot b{white-space:nowrap}
.slot .av-s{min-height:22px}
.slot .av-s .bk-av{width:22px;height:22px;border-radius:50%;border:2px solid var(--surface);margin-right:-6px;flex:none;object-fit:cover}
.slot .av-s .av-i{display:inline-grid;place-items:center;background:var(--pri-soft);color:var(--pri-soft-ink);font-size:.55rem;font-weight:800}
.bk-rule{display:inline-flex;align-items:center;gap:6px}
.bk-rep{margin-top:16px;display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:8px 16px;align-items:end}
.bk-rep .tiny{display:flex;gap:6px;align-items:flex-start;padding-bottom:10px}
.bk-rep .tiny .ic{flex:none;margin-top:2px}

/* step 3 – photos */
.bk-add{width:84px;height:84px;padding:6px;cursor:pointer;justify-content:center}
.bk-add[hidden]{display:none}
.bk-add:focus-within{outline:2px solid var(--pri);outline-offset:2px}
.bk-th{position:relative;overflow:hidden}
.bk-th img{width:100%;height:100%;object-fit:cover}
.bk-rm{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:50%;background:var(--surface);color:var(--ink);border:1px solid var(--line-2);display:grid;place-items:center;font-size:1.1rem;line-height:1}
.inp[aria-invalid=true]{border-color:var(--bad)}

/* step 4 – pay options are labels with a radio */
.payo{min-width:0}
.payo:focus-within{outline:2px solid var(--pri);outline-offset:2px}
.bk-one{grid-template-columns:minmax(0,1fr)}
.bk-one .payo{cursor:default;max-width:360px}
.bk-pane{margin-top:14px}
.bk-pane .msg{margin:0}
.bk-stripe{min-height:52px}
dl.kv.bk-bank{grid-template-columns:minmax(0,1fr);max-width:520px}
.bk-bank dd{overflow-wrap:anywhere}
[data-bk-pay].is-busy{opacity:.75;cursor:progress}

/* step 5 + quote sent */
.ok-ring.bad{background:var(--bad-soft);color:var(--bad)}
.ok-ring .ic{width:44px;height:44px}
.bk-done-l{border-right:1px solid var(--line)}
.bk-acts .btn{min-width:0}

/* quote request */
.bk-cats a{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line-2);font-weight:600;font-size:.88rem}
.bk-cats a:hover{border-color:var(--pri);color:var(--pri)}
.bk-qdrop{cursor:pointer}
.bk-qdrop.over,.bk-qdrop:focus-within{border-color:var(--pri);color:var(--pri)}
.bk-qdrop b{color:var(--ink-2)}
.tagpick button .sr{position:absolute}
.bk-qside{min-width:0}

/* invoice pay link */
.inv-r{text-align:right}
.stamp.ok{border-color:var(--ok);color:var(--ok)}
.bk-bal{border-top:2px solid var(--ink);padding-top:10px;font-size:1.15rem}

@media (max-width:760px){
  .bk-done-l{border-right:0;border-bottom:1px solid var(--line)}
  .bk-rep{grid-template-columns:minmax(0,1fr)}
  .bk-rep .tiny{padding-bottom:0}
  .inv-r{text-align:left}
}
@media (max-width:640px){
  .bk-new{grid-template-columns:minmax(0,1fr)}
  .bk-acts .btn{flex:1 1 100%}
}