/* ============================================================
   Flat & True — "Build my groom" multi-area builder + mobile visit
   Loaded after styles.css; uses its variables and base classes
   (.pick, .chip, .field, .check, .summary-box, .btn).
   ============================================================ */

/* ---------- entry card (grooming wing, above the single-service list) ---------- */
.bld-entry{ margin:0 0 6px; }
.bld-entry-btn{
  width:100%; text-align:left; cursor:pointer; color:var(--ink); font-family:var(--font-body);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 20px; border-radius:var(--radius);
  border:1px solid rgba(47,107,255,.45);
  background:linear-gradient(135deg, rgba(47,107,255,.16), rgba(47,107,255,.04));
  box-shadow:inset 0 0 40px rgba(47,107,255,.05), 0 0 22px rgba(47,107,255,.10);
  transition:border-color .15s, box-shadow .2s, transform .15s;
}
.bld-entry-btn:hover{ border-color:var(--blue-hi); box-shadow:var(--blue-glow); transform:translateY(-1px); }
.bld-entry-txt{ min-width:0; }
.bld-entry-kicker{
  display:block; font-family:var(--font-disp); font-size:.58rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--blue-hi); margin-bottom:6px;
}
.bld-entry-btn strong{ display:block; font-size:1.2rem; font-weight:800; line-height:1.2; }
.bld-entry-btn small{ display:block; color:var(--ink-dim); font-size:.86rem; line-height:1.5; margin-top:4px; }
.bld-entry-go{
  flex:none; font-weight:700; font-size:.92rem; color:#fff; white-space:nowrap;
  padding:10px 16px; border-radius:999px;
  background:linear-gradient(135deg,var(--blue),var(--blue-hi)); box-shadow:0 0 14px rgba(47,107,255,.35);
}
.bld-entry-or{ margin:12px 2px 0; }
@media (max-width:480px){
  .bld-entry-btn{ flex-direction:column; align-items:flex-start; }
}

/* ---------- builder panel ---------- */
.bld-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px 18px; flex-wrap:wrap; margin-bottom:6px; }
.bld-head h3{ font-size:1.35rem; margin:0 0 4px; }
.bld-head p{ margin:0; max-width:52ch; }
.bld-head .back-link{ margin:0; text-decoration:underline; text-underline-offset:3px; }
.bld-h{ display:flex; align-items:center; gap:12px; font-size:1.08rem; margin:28px 0 6px; }
.bld-h-sm{ font-size:.98rem; margin:22px 0 10px; }
.bld-num{
  flex:none; width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-disp); font-size:.74rem; font-weight:400; color:var(--blue-hi);
  border:1px solid rgba(47,107,255,.4); border-radius:9px; background:var(--blue-soft);
}
.bld-sub{ margin:0 0 14px; }

.bld-pick{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:760px){
  .bld-pick{ grid-template-columns:232px minmax(0,1fr); align-items:start; }
  .bld-map{ position:sticky; top:84px; }
}

/* body map */
.bld-map{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; justify-items:center;
  background:var(--bg-2); border:1px solid var(--line-soft); border-radius:12px; padding:14px 10px 10px;
}
.bld-map figure{ margin:0; text-align:center; width:100%; max-width:118px; }
.bld-map svg{ display:block; width:100%; height:auto; overflow:visible; }
.bld-map figcaption{
  font-family:var(--font-disp); font-size:.54rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-faint); margin-top:8px;
}
.bld-map .bz-off{ fill:#12151d; stroke:#222735; stroke-width:1.2; }
.bld-map .bz{ fill:#1a1f2c; stroke:#37405a; stroke-width:1.2; cursor:pointer; transition:fill .15s, stroke .15s; }
.bld-map .bz:hover{ fill:#222a3d; stroke:var(--blue-hi); }
.bld-map .bz.on{ fill:var(--blue); stroke:#9dbcff; filter:drop-shadow(0 0 5px rgba(47,107,255,.65)); }
.bld-map .bz.off{ fill:#12151d; stroke:#222735; cursor:default; }

/* bundle quick-picks */
.bld-sets{ margin-bottom:6px; }
.bld-sets-t{
  font-family:var(--font-disp); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-dim); margin:0 0 10px;
}
.bld-set{ font-size:.86rem; padding:9px 13px; }
.bld-set small{ margin-left:8px; color:var(--blue-hi); font-weight:700; font-size:.82rem; }

/* area list */
.bld-cat{ margin:20px 0 8px !important; }
.bld-areas{ display:grid; gap:8px; }
.bld-area{
  width:100%; text-align:left; cursor:pointer; color:var(--ink); font-family:var(--font-body); font-size:.98rem;
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:var(--panel); border:1px solid var(--line-soft); border-radius:12px;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.bld-area:hover{ border-color:var(--blue); }
.bld-area.selected{ border-color:var(--blue); background:var(--blue-soft); box-shadow:0 0 14px rgba(47,107,255,.18); }
.bld-box{
  flex:none; width:22px; height:22px; border-radius:6px; border:1.5px solid #3a4258; background:var(--bg-2);
  display:flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s;
}
.bld-area.selected .bld-box{ background:var(--blue); border-color:var(--blue-hi); }
.bld-area.selected .bld-box::after{
  content:""; width:10px; height:5px; border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:translateY(-1px) rotate(-45deg);
}
.bld-area-n{ flex:1; min-width:0; }
.bld-area-n strong{ display:block; font-weight:700; line-height:1.25; }
.bld-area-n small{ display:block; color:var(--ink-dim); font-size:.8rem; }
.bld-area .pr{ font-weight:800; white-space:nowrap; text-align:right; }
.bld-area .pr > span:last-child{ display:block; font-size:.58rem; letter-spacing:.1em; color:var(--blue-hi); text-transform:uppercase; font-weight:600; }

/* per-area method chips (round 4): each selected area gets its own Trim / Shave / Wax */
.bld-area-wrap{ display:block; }
.bld-area-m{
  display:none; gap:6px; flex-wrap:wrap; margin:6px 0 2px; padding-left:34px;
}
.bld-area-wrap.selected .bld-area-m{ display:flex; }
.bld-area-mc{
  cursor:pointer; font-family:var(--font-body); font-size:.82rem; font-weight:600; color:var(--ink-dim);
  padding:7px 12px; background:var(--bg-2); border:1px solid var(--line-soft); border-radius:999px;
  transition:border-color .15s, color .15s, background .15s; min-height:34px;
}
.bld-area-mc:hover{ border-color:var(--blue); color:var(--ink); }
.bld-area-mc.selected{ border-color:var(--blue-hi); color:var(--ink); background:var(--blue-soft); font-weight:700; }
.bld-area-mc b{ font-weight:inherit; }
.bld-area-mc small{ margin-left:5px; color:var(--blue-hi); font-weight:700; }
@media (max-width:480px){ .bld-area-m{ padding-left:12px; } }
.bld-lines .bld-line-m{ color:var(--blue-hi); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; margin-left:6px; }

/* round 5: the "what do you want to book?" dropdown */
.book-start{ max-width:560px; margin:0 auto 6px; }
.book-start .field label{ font-weight:700; }
.book-start-tip{ margin-top:8px; color:var(--ink-dim); }

/* round 5: barbering pieces folded inside the builder (the cross-wing path) */
.bld-barber{
  margin:20px 0 4px; background:var(--panel); border:1px solid var(--line-soft);
  border-radius:12px; padding:0 14px;
}
.bld-barber > summary{
  cursor:pointer; list-style:none; padding:14px 0; display:block;
}
.bld-barber > summary::-webkit-details-marker{ display:none; }
.bld-barber > summary b{
  display:block; color:var(--blue-hi); font-weight:800; letter-spacing:.02em;
}
.bld-barber > summary small{ display:block; color:var(--ink-dim); font-size:.84rem; margin-top:3px; }
.bld-barber > div{ padding-bottom:14px; }
.bld-barber .menu-cat.bld-cat-b{ margin:14px 0 8px; }

/* round 5: promo code inside the estimate */
.bld-promo{ margin:14px 0 4px; }
.bld-promo label{ font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); }
.bld-promo .promo-row{ display:flex; gap:8px; }
.bld-promo input{
  flex:1; min-width:0; background:var(--bg-2); border:1px solid var(--line-soft); border-radius:10px;
  color:var(--ink); padding:10px 12px; font-family:var(--font-body); font-size:.95rem;
}
.bld-promo input:focus{ border-color:var(--blue); outline:none; }
.bld-lines .bld-line-promo span{ color:var(--blue-hi); font-weight:700; }

/* option cards: method, finish, where, handling */
.bld-opt{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;
  text-align:left; cursor:pointer; color:var(--ink); font-family:var(--font-body);
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.bld-opt:hover{ border-color:var(--blue); }
.bld-opt b{ display:block; font-size:.98rem; font-weight:700; }
.bld-opt small{ display:block; color:var(--ink-dim); font-size:.8rem; line-height:1.45; margin-top:2px; }
.bld-opt.selected{ border-color:var(--blue); background:var(--blue-soft); box-shadow:0 0 12px rgba(47,107,255,.22); }
.bld-opt.selected b{ color:var(--blue-hi); }
.bld-opt[disabled]{ opacity:.38; cursor:not-allowed; }

.bld-methods{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.bld-finishes{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.bld-where, .bld-modes{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:640px){
  .bld-methods{ grid-template-columns:1fr; }
  .bld-finishes{ grid-template-columns:1fr 1fr; }
  .bld-modes{ grid-template-columns:1fr; }
}
@media (max-width:380px){ .bld-where{ grid-template-columns:1fr; } }
.bld-note{ margin:12px 2px 0; }
.bld-note b{ color:var(--ink-dim); }

/* estimate */
.bld-est{
  margin-top:26px; background:var(--bg-3); border:1px solid var(--line); border-radius:12px; padding:16px 18px;
  transition:opacity .15s;
}
.bld-est.loading{ opacity:.55; }
.bld-est-t{
  font-family:var(--font-disp); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--blue-hi); margin:0 0 8px;
}
.bld-lines{ list-style:none; margin:0; padding:0; }
.bld-lines li{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:.95rem;
}
.bld-lines li > span:last-child{ font-weight:700; white-space:nowrap; }
.bld-lines .bld-empty{ color:var(--ink-dim); border-bottom:none; }
.bld-lines .bld-line-bundle > span:first-child{ font-weight:700; }
.bld-lines em{
  font-style:normal; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--blue-hi); border:1px solid rgba(47,107,255,.45); border-radius:999px; padding:2px 8px;
  margin-left:6px; vertical-align:2px; white-space:nowrap;
}
.bld-lines small{ display:block; color:var(--ink-faint); font-size:.78rem; font-weight:400; margin-top:2px; }
.bld-lines .bld-line-meta{ color:var(--ink-dim); font-size:.88rem; }
.bld-lines .bld-line-meta > span:last-child{ font-weight:600; color:var(--ink); }
.bld-saved{
  margin:12px 0 0; padding:10px 12px; border-radius:10px; font-size:.88rem; font-weight:600;
  color:var(--blue-hi); background:var(--blue-soft); border:1px solid rgba(47,107,255,.35);
}
.bld-est-note{ margin:12px 0 0; }

/* sticky total + next */
.bld-bar{
  position:sticky; bottom:10px; z-index:5; margin-top:14px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border-radius:14px; border:1px solid rgba(47,107,255,.4);
  background:rgba(14,16,22,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,.55), 0 0 22px rgba(47,107,255,.12);
}
.bld-bar-sum{ display:flex; align-items:center; gap:12px; min-width:0; }
.bld-bar-sum b{ font-size:1.7rem; font-weight:800; line-height:1; }
.bld-bar-sum span{ display:block; line-height:1.3; }
.bld-bar-sum i{ display:block; font-style:normal; color:var(--blue-hi); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; }
.bld-bar-sum em{ display:block; font-style:normal; color:var(--ink-dim); font-size:.84rem; white-space:nowrap; }
.bld-bar .btn{ padding:12px 20px; font-size:.95rem; }
.bld-bar .bld-narrow{ display:none; }
.bld-bar-sum i{ white-space:nowrap; }
@media (max-width:480px){
  .bld-bar{ padding:10px 12px; }
  .bld-bar-sum{ gap:10px; }
  .bld-bar-sum b{ font-size:1.5rem; }
  .bld-bar .btn{ padding:12px 18px; font-size:.92rem; white-space:nowrap; }
  .bld-bar .bld-wide{ display:none; }
  .bld-bar .bld-narrow{ display:inline; }
}

/* step 3 recap */
.bld-recap{
  margin:0 0 18px; padding:11px 14px; border-radius:10px; font-size:.9rem; color:var(--ink-dim);
  background:var(--bg-3); border:1px solid var(--line);
}

/* ---------- details: where / mobile / handling ---------- */
#bldWhere{ margin-bottom:20px; }
.bld-mobile{
  margin-top:14px; padding:16px; border-radius:12px;
  border:1px dashed rgba(47,107,255,.45); background:rgba(47,107,255,.04);
}
.bld-warn{
  background:rgba(195,58,78,.1); border:1px solid rgba(195,58,78,.45); color:#ffb3bd;
  border-radius:10px; padding:12px 14px; margin:0 0 14px; font-size:.9rem;
}
.bld-charges{
  margin-top:16px; background:var(--bg-3); border:1px solid var(--line); border-radius:12px; padding:14px 16px;
}
.bld-charges h4{ font-size:.92rem; margin:0 0 6px; }
.bld-charges .ln{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:8px 0; border-bottom:1px solid var(--line-soft); font-size:.88rem; color:var(--ink-dim);
}
.bld-charges .ln > span:last-child{ font-weight:700; color:var(--ink); white-space:nowrap; }
.bld-charges .ln.tot{ color:var(--ink); }
.bld-charges .ln b{ color:var(--ink); }
.bld-charges p{ margin:10px 0 0; font-size:.82rem; color:var(--ink-faint); }

.bld-handling{
  margin-top:20px; padding:18px; border-radius:12px;
  border:1px solid rgba(47,107,255,.35); background:var(--bg-2);
}
.bld-handling h4{ font-size:1rem; margin:0 0 12px; }
.bld-err{ color:#ff7b8a; font-size:.85rem; margin:10px 0 0; }

/* the select matches the existing inputs */
.field select{
  width:100%; background-color:var(--bg-2); border:1px solid var(--line); color:var(--ink);
  border-radius:10px; padding:13px 40px 13px 14px; font-family:var(--font-body); font-size:1rem;
  -webkit-appearance:none; appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  background-position:calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  transition:border-color .15s, box-shadow .15s;
}
.field select:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(47,107,255,.18); outline:none; }
.field.invalid select, .field.invalid textarea{ border-color:#c33a4e; }

/* ---------- done: mobile deposit ---------- */
.bld-deposit{
  max-width:520px; margin:26px auto 0; padding:22px; text-align:left; border-radius:var(--radius);
  border:1px solid rgba(47,107,255,.45); background:var(--blue-soft);
  box-shadow:inset 0 0 40px rgba(47,107,255,.05);
}
.bld-deposit h4{ font-size:1.2rem; text-align:center; margin:0 0 10px; }
.bld-deposit p{ margin:0 0 10px; color:var(--ink-dim); }
.bld-deposit strong{ color:var(--ink); }
.bld-deposit ul{ margin:0 0 18px; padding-left:20px; color:var(--ink-dim); }
.bld-deposit li{ margin-bottom:4px; }
.bld-deposit .btn{ width:100%; }
.bld-deposit .small{ text-align:center; }

/* Oct 2026: the barbering builder ("Build your visit") — the body-grooming parts stay hidden */
.bld[data-flavor="barber"] .bld-map,
.bld[data-flavor="barber"] #bldSetsWrap,
.bld[data-flavor="barber"] #bldMethodSec,
.bld[data-flavor="barber"] #bldFinishWrap,
.bld[data-flavor="barber"] #bldPromo{ display:none !important; }
@media (min-width:760px){ .bld[data-flavor="barber"] .bld-pick{ grid-template-columns:minmax(0,1fr); } }
/* add-ons: shown after the services they go with, locked until one of those is picked */
.menu-cat.bld-cat-addon{ margin-top:22px; }
.bld-addon-note{ margin:-2px 0 10px; color:var(--ink-dim); }
.bld-area.bld-area-addon.locked{ opacity:.45; cursor:not-allowed; }
.bld-area.bld-area-addon.locked:hover{ border-color:var(--line-soft); }
.bld-swap{
  margin:12px 0 0; padding:10px 12px; border:1px solid var(--blue); background:var(--blue-soft);
  border-radius:10px; font-size:.88rem; color:var(--ink);
}
/* Oct 2026: a description's capitals lead-in (The Fade — Sides Only) stands out */
.bld-area-n small b.bld-caps{ color:var(--blue-hi); font-weight:800; letter-spacing:.01em; }

/* v31: people coming with him — up to 3 guest rows under the selection (first name, age, services) */
.bld-party{ margin-top:24px; }
.bld-party [hidden]{ display:none !important; }
.pty-rows{ display:grid; gap:12px; }
.pty-rows:empty{ display:none; }
.pty-row{ background:var(--panel); border:1px solid var(--line-soft); border-radius:12px; padding:12px 14px; min-width:0; }
.pty-row.invalid{ border-color:#c33a4e; }
.pty-top{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.pty-name{
  flex:1 1 170px; min-width:0; min-height:44px; background:var(--bg-2); border:1px solid var(--line); color:var(--ink);
  border-radius:10px; padding:10px 12px; font-family:var(--font-body); font-size:1rem;
}
.pty-name:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(47,107,255,.18); outline:none; }
.pty-ages{ display:flex; gap:6px; flex:0 0 auto; }
.pty-age{
  min-height:44px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--bg-2);
  color:var(--ink-dim); font-family:var(--font-body); font-size:.9rem; font-weight:700; cursor:pointer; white-space:nowrap;
  transition:border-color .15s, background .15s, color .15s;
}
.pty-age:hover{ border-color:var(--blue); color:var(--ink); }
.pty-age.selected{ border-color:var(--blue-hi); background:var(--blue-soft); color:var(--ink); }
.pty-x{
  flex:none; width:44px; height:44px; margin-left:auto; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--ink-dim); font-size:1.4rem; line-height:1; cursor:pointer;
}
.pty-x:hover{ border-color:#c33a4e; color:#ffb3bd; }
.pty-svcs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.pty-svc{
  min-height:44px; padding:9px 14px; border-radius:999px; border:1px solid var(--line-soft); background:var(--bg-2);
  color:var(--ink); font-family:var(--font-body); font-size:.9rem; font-weight:600; cursor:pointer; text-align:left;
  max-width:100%; overflow-wrap:anywhere; transition:border-color .15s, background .15s;
}
.pty-svc small{ margin-left:6px; color:var(--blue-hi); font-weight:700; font-size:.82rem; }
.pty-svc:hover{ border-color:var(--blue); }
.pty-svc.selected{ border-color:var(--blue-hi); background:var(--blue-soft); box-shadow:0 0 12px rgba(47,107,255,.2); }
.pty-svc.locked{ opacity:.45; cursor:not-allowed; }
.pty-svc.locked:hover{ border-color:var(--line-soft); }
.pty-hint, .pty-note{ margin:8px 0 0; color:var(--ink-dim); flex-basis:100%; }
.pty-note{ color:var(--ink); }
.pty-rowerr{ margin:8px 0 0; color:#ff7b8a; font-size:.85rem; }
.pty-add{
  width:100%; margin-top:12px; min-height:48px; padding:10px 14px; border-radius:12px;
  border:1px dashed rgba(47,107,255,.5); background:transparent; color:var(--blue-hi);
  font-family:var(--font-body); font-size:.98rem; font-weight:700; cursor:pointer; text-align:center;
  transition:border-color .15s, background .15s;
}
.pty-add:hover{ border-color:var(--blue-hi); background:var(--blue-soft); }
.pty-max{ margin:12px 2px 0; color:var(--ink-dim); text-align:center; }
.pty-err{
  margin:12px 0 0; padding:10px 12px; border-radius:10px; font-size:.9rem;
  background:rgba(195,58,78,.1); border:1px solid rgba(195,58,78,.45); color:#ffb3bd;
}
@media (max-width:480px){
  .pty-name{ flex-basis:100%; }
  .pty-ages{ flex:1 1 auto; }
  .pty-age{ flex:1 1 0; padding:8px 10px; }
}
/* the estimate with more than one person: a line each, then the total */
.bld-lines .bld-line-person b{ color:var(--ink); }
.bld-lines .bld-line-person > span:first-child{ min-width:0; overflow-wrap:anywhere; }
.bld-lines .bld-line-total{ border-bottom:none; font-weight:800; color:var(--ink); }
/* review + done: everyone on the booking */
.sum-people{ list-style:none; margin:8px 0 0; padding:0; font-size:.88rem; color:var(--ink-dim); }
.sum-people li{ padding:2px 0; overflow-wrap:anywhere; }
.sum-people b{ color:var(--ink); }
.sum-people[hidden]{ display:none; }
.conf-people{ display:inline-block; text-align:left; margin:4px auto 0; }
.mg-done{ margin:18px 0 0; }
.mg-done[hidden]{ display:none; }