/**
 * Booking Wizard mock-accurate skin.
 * Matches the industry Book Now frames (header, stepper, dual Where/When, sidebar).
 */
.booking-shell.bk-mock{
  --bk-ui-accent:#2563eb;
  --bk-mock-surface:#fff;
  --bk-mock-bg:#f3f5f8;
  --bk-mock-border:#e6ebf2;
  --bk-mock-ink:#0f172a;
  --bk-mock-muted:#64748b;
  --ink:var(--bk-mock-ink);
  --ink-2:#334155;
  --ink-3:var(--bk-mock-muted);
  --ink-4:#94a3b8;
  color:var(--bk-mock-ink);
  background:var(--bk-mock-bg);
  font-family:"DM Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
}
.booking-shell.bk-mock .ws-bk-close{display:none}
.booking-shell.bk-mock .booking-header{
  display:grid;
  grid-template-columns:88px 1fr auto;
  align-items:center;
  gap:12px;
  padding:14px 22px;
  background:#fff;
  border-bottom:1px solid var(--bk-mock-border);
  box-shadow:0 1px 0 rgba(15,23,42,.02);
}
.booking-shell.bk-mock .booking-back{
  justify-self:start;
  font-size:14px;
  font-weight:650;
  color:var(--bk-mock-muted);
}
.booking-shell.bk-mock .booking-brand{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:12px;
  max-width:min(520px,70vw);
}
.booking-shell.bk-mock .booking-logo{
  width:44px;height:44px;border-radius:14px;
  box-shadow:0 6px 16px color-mix(in srgb,var(--bk-ui-accent) 25%,transparent);
}
.booking-shell.bk-mock .booking-biz{
  font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--bk-mock-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.booking-shell.bk-mock .booking-tag{
  font-size:11px;color:#9a3412;margin-top:4px;
  max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:inline-flex;align-items:center;gap:5px;
  background:#fff0e6;border-radius:999px;padding:3px 10px;font-weight:700;
}
.booking-shell.bk-mock .booking-tag:empty{display:none}
.booking-shell.bk-mock .bk-save-exit{
  justify-self:end;
  margin-left:0;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1.5px solid var(--bk-mock-border);
  background:#fff;
  color:var(--bk-mock-ink);
  border-radius:999px;
  padding:9px 14px;
  font-size:13px;
  font-weight:700;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.booking-shell.bk-mock .bk-save-exit svg{width:15px;height:15px;flex-shrink:0}
.booking-shell.bk-mock .booking-prog-wrap{display:none!important}

/* Rich 4-step stepper */
.booking-shell.bk-mock .bk-prog-labels,
.booking-shell.bk-mock #bk-prog-labels{
  display:grid!important;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  padding:0 28px;
  background:#fff;
  border-bottom:1px solid var(--bk-mock-border);
  position:relative;
}
.booking-shell.bk-mock #bk-prog-labels::before{
  content:"";
  position:absolute;
  left:10%;right:10%;top:28px;height:2px;
  background:#e8eef6;z-index:0;
}
.booking-shell.bk-mock #bk-prog-labels .bk-sq-prog-pill,
.booking-shell.bk-mock #bk-prog-labels > span{
  appearance:none;border:none!important;background:transparent!important;
  border-radius:0!important;padding:14px 8px 16px!important;
  display:flex!important;flex-direction:column;align-items:center;gap:6px;
  text-align:center;position:relative;z-index:1;
  color:var(--bk-mock-muted)!important;font-weight:650!important;font-size:13px!important;
  box-shadow:none!important;
}
.booking-shell.bk-mock #bk-prog-labels .bk-sq-prog-pill > span:first-child,
.booking-shell.bk-mock #bk-prog-labels [data-bk-step]::before{
  width:28px!important;height:28px!important;border-radius:999px!important;
  display:inline-flex!important;align-items:center;justify-content:center;
  background:#e8eef6!important;color:#94a3b8!important;font-size:12px!important;font-weight:800!important;
  border:2px solid #fff;box-shadow:0 0 0 1px #e8eef6;
}
.booking-shell.bk-mock #bk-prog-labels .bk-sq-prog-pill.on,
.booking-shell.bk-mock #bk-prog-labels .bk-sq-prog-pill.done,
.booking-shell.bk-mock #bk-prog-labels > span.on,
.booking-shell.bk-mock #bk-prog-labels > span.done{
  color:var(--bk-mock-ink)!important;
}
.booking-shell.bk-mock #bk-prog-labels .bk-sq-prog-pill.on > span:first-child,
.booking-shell.bk-mock #bk-prog-labels .bk-sq-prog-pill.done > span:first-child,
.booking-shell.bk-mock #bk-prog-labels > span.on::before,
.booking-shell.bk-mock #bk-prog-labels > span.done::before{
  background:var(--bk-ui-accent)!important;color:#fff!important;
  box-shadow:0 0 0 1px var(--bk-ui-accent),0 6px 14px color-mix(in srgb,var(--bk-ui-accent) 30%,transparent);
}
.booking-shell.bk-mock #bk-prog-labels .bk-sq-prog-pill.on::after{
  content:"";position:absolute;left:18%;right:18%;bottom:0;height:3px;
  background:var(--bk-ui-accent);border-radius:3px 3px 0 0;
}
.booking-shell.bk-mock #bk-prog-labels .bk-sq-prog-pill em.bk-step-hint,
.booking-shell.bk-mock #bk-prog-labels .bk-step-hint{
  display:block;font-size:11px;font-weight:500;font-style:normal;color:var(--bk-mock-muted);margin-top:2px;line-height:1.25;
}
.booking-shell.bk-mock #bk-prog-labels .bk-sq-prog-pill.on .bk-step-hint{color:var(--bk-ui-accent)}
.booking-shell.bk-mock .bk-sel-check{
  position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:999px;
  background:var(--bk-ui-accent);color:#fff;font-size:12px;font-weight:800;
  display:none;align-items:center;justify-content:center;z-index:2;
  box-shadow:0 4px 10px color-mix(in srgb,var(--bk-ui-accent) 35%,transparent);
}
.booking-shell.bk-mock .bk-svc-card,
.booking-shell.bk-mock .bk-where-card{position:relative}
.booking-shell.bk-mock .bk-svc-card.sel .bk-sel-check,
.booking-shell.bk-mock .bk-where-card.sel .bk-sel-check{display:inline-flex}
.booking-shell.bk-mock .bk-svc-card{display:flex;flex-direction:column;text-align:left;padding:0;background:#fff;cursor:pointer}
.booking-shell.bk-mock .bk-svc-card img,
.booking-shell.bk-mock .bk-svc-card .bk-svc-ph{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#e2e8f0}
.booking-shell.bk-mock .bk-selected-pkg{
  display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:12px 14px;margin:0 0 14px;border:1.5px solid var(--bk-mock-border);border-radius:16px;background:#fff;
  box-shadow:0 6px 18px rgba(15,23,42,.04);
}
.booking-shell.bk-mock .bk-selected-pkg img,
.booking-shell.bk-mock .bk-selected-pkg-ph{
  width:56px;height:44px;border-radius:10px;object-fit:cover;background:#e2e8f0;
}
.booking-shell.bk-mock .bk-selected-pkg-copy em{
  display:block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:#64748b;margin:0 0 2px;
}
.booking-shell.bk-mock .bk-selected-pkg-copy strong{display:block;font-size:15px;font-weight:800;color:var(--bk-mock-ink)}
.booking-shell.bk-mock .bk-selected-pkg-copy span{display:block;font-size:12px;color:#475569;margin-top:2px}
.booking-shell.bk-mock .bk-selected-pkg-change{
  appearance:none;border:none;background:none;color:var(--bk-ui-accent);
  font:inherit;font-size:13px;font-weight:750;cursor:pointer;padding:6px 4px;white-space:nowrap;
}
.booking-shell.bk-mock .bk-svc-card strong{padding:10px 12px 2px;font-size:14px;color:var(--bk-mock-ink)}
.booking-shell.bk-mock .bk-svc-meta{
  padding:0 12px 4px;font-size:13px;font-weight:750;color:var(--bk-ui-accent);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.booking-shell.bk-mock .bk-svc-meta .bk-svc-dur{font-weight:650}
.booking-shell.bk-mock .bk-svc-card span{padding:0 12px 12px;font-size:12px;color:#475569;line-height:1.35}
.booking-shell.bk-mock .bk-svc-card em{display:block;padding:0 12px 12px;margin-top:-6px;font-style:normal;font-size:11px;font-weight:800;color:#c2410c}
@media(max-width:860px){
  .booking-shell.bk-mock .bk-svc-pick{
    grid-template-columns:1fr;
    gap:12px;
  }
  .booking-shell.bk-mock .bk-svc-card{
    display:grid;grid-template-columns:92px minmax(0,1fr);grid-template-rows:auto auto auto auto;
    column-gap:12px;row-gap:2px;align-items:start;padding:10px;border-radius:16px;
  }
  .booking-shell.bk-mock .bk-svc-card img,
  .booking-shell.bk-mock .bk-svc-card .bk-svc-ph{
    grid-column:1;grid-row:1 / span 4;width:92px;height:92px;aspect-ratio:1;border-radius:12px;object-fit:cover;align-self:center;
  }
  .booking-shell.bk-mock .bk-svc-card strong{grid-column:2;padding:2px 28px 0 0;font-size:15px;font-weight:800}
  .booking-shell.bk-mock .bk-svc-meta{grid-column:2;padding:0}
  .booking-shell.bk-mock .bk-svc-card > span{
    grid-column:2;padding:0 4px 0 0;font-size:12px;color:#475569;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  }
  .booking-shell.bk-mock .bk-svc-card em{grid-column:2;padding:2px 0 0;margin:0}
  .booking-shell.bk-mock .bk-svc-card.sel .bk-sel-check{top:10px;right:10px}
  .booking-shell.bk-mock .bk-svc-card.sel::after{display:none}
}
.booking-shell.bk-mock .bk-where-list .bk-where-card{
  display:grid;grid-template-columns:72px 1fr;gap:0;align-items:stretch;min-height:78px;text-align:left;padding:0;background:#fff;cursor:pointer;
}
.booking-shell.bk-mock .bk-where-list .bk-where-card img,
.booking-shell.bk-mock .bk-where-list .bk-where-card .bk-where-ph{
  width:72px;height:100%;min-height:78px;object-fit:cover;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--bk-ui-accent) 12%,#e2e8f0);font-weight:800;color:var(--bk-ui-accent);
}
.booking-shell.bk-mock .bk-where-copy{padding:12px 14px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.booking-shell.bk-mock .bk-where-copy strong{font-size:14px;color:var(--bk-mock-ink)}
.booking-shell.bk-mock .bk-where-copy span{font-size:12px;color:var(--bk-mock-muted);line-height:1.35}
.booking-shell.bk-mock .addon-item{
  border:1.5px solid #e2e8f0;border-radius:14px;padding:12px;background:#fff;cursor:pointer;position:relative;
}
.booking-shell.bk-mock .addon-item.sel{border-color:var(--bk-ui-accent);box-shadow:0 0 0 1px var(--bk-ui-accent)}
.booking-shell.bk-mock .bk-review-row{
  display:grid!important;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;
}
.booking-shell.bk-mock .bk-review-ico{
  width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--bk-ui-accent) 12%,#fff);font-size:16px;
}
.booking-shell.bk-mock .bk-review-body strong{display:block;font-size:13px;color:var(--bk-mock-ink)}
.booking-shell.bk-mock .bk-review-body span{display:block;font-size:12px;color:var(--bk-mock-muted);margin-top:2px;line-height:1.4}
.booking-shell.bk-mock .bk-review-edit{
  appearance:none;border:none;background:none;color:var(--bk-ui-accent);font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;
}
.booking-shell.bk-mock #bk-sq-intake .sq-tile{position:relative;text-align:left;cursor:pointer;background:#fff;padding:0;overflow:hidden}
.booking-shell.bk-mock #bk-sq-intake .sq-tile.sel::after{
  content:"✓";position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:999px;
  background:var(--bk-ui-accent);color:#fff;font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.booking-shell.bk-mock .bk-svc-card.sel::after{display:none}
.booking-shell.bk-mock .bk-step-body{padding:18px 22px 8px}
@media(max-width:720px){
  .booking-shell.bk-mock #bk-prog-labels .bk-step-hint{display:none}
  .booking-shell.bk-mock .bk-trust-row{grid-template-columns:1fr}
}

.booking-shell.bk-mock .sticky-summary{display:none}
.booking-shell.bk-mock .bk-sq-layout{
  grid-template-columns:minmax(0,1fr) min(340px,32%);
  gap:0;
  background:var(--bk-mock-bg);
}
.booking-shell.bk-mock .bk-sq-main{padding:0}
.booking-shell.bk-mock .bk-sq-mode .bk-step-inner,
.booking-shell.bk-mock .bk-step-inner{
  max-width:none;
  /* `auto` on the sides, not a fixed 20px. The base rule is `margin:0 auto`;
     overriding it with `18px 20px 20px` pinned the panel to the left edge, so
     any step with a max-width (steps 3 and 4 cap at 720px) rendered flush left
     with the remaining width empty. Horizontal auto keeps it centred at every
     width and is identical to 20px when the panel is the constraint. */
  margin:18px auto 20px;
  /* `width` keeps the 20px-a-side gutter that the old fixed margin provided,
     while `margin:auto` does the centring. Steps 3/4 additionally cap at 720px
     (#bk-step-3 .bk-step-inner, id beats these three classes), so they centre
     inside the panel instead of hugging the left edge. */
  width:calc(100% - 40px);
  border-radius:22px;
  border:1px solid var(--bk-mock-border);
  box-shadow:0 12px 40px rgba(15,23,42,.06);
  background:#fff;
  overflow:hidden;
}
.booking-shell.bk-mock .bk-step-body{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:18px 22px 8px;
}
.booking-shell.bk-mock .bk-step-title{
  font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--bk-mock-ink);
  display:flex;align-items:center;gap:10px;
}
.booking-shell.bk-mock .bk-step-title .bk-title-ico{
  width:36px;height:36px;border-radius:12px;
  background:color-mix(in srgb,var(--bk-ui-accent) 12%,#fff);
  color:var(--bk-ui-accent);
  display:inline-flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;
}
.booking-shell.bk-mock .bk-step-sub{font-size:14px;color:var(--bk-mock-muted);margin:4px 0 20px}
.booking-shell.bk-mock .bk-step-foot{
  border-top:1px solid #f1f5f9;
  padding:14px 20px;
  background:#fff;
}
.booking-shell.bk-mock .bk-step-foot .bk-trust{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:var(--bk-mock-muted);
}
.booking-shell.bk-mock .btn-ink{
  background:var(--bk-ui-accent)!important;
  border-color:var(--bk-ui-accent)!important;
  border-radius:14px!important;
  padding:13px 22px!important;
  font-weight:750!important;
  box-shadow:0 10px 22px color-mix(in srgb,var(--bk-ui-accent) 28%,transparent);
}
.booking-shell.bk-mock .btn-out{border-radius:14px!important;padding:12px 16px!important}
.booking-shell.bk-mock .field label{font-size:12px;font-weight:700;color:#334155;margin-bottom:7px}
.booking-shell.bk-mock .field input,
.booking-shell.bk-mock .field textarea,
.booking-shell.bk-mock .field select{
  background:#fff!important;
  border:1.5px solid #dbe3ee!important;
  border-radius:12px!important;
  padding:12px 14px!important;
  color:var(--bk-mock-ink);
}

/* Service / option cards */
.booking-shell.bk-mock .bk-svc-pick{
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:12px;
}
.booking-shell.bk-mock .bk-svc-card,
.booking-shell.bk-mock .bk-where-card,
.booking-shell.bk-mock #bk-sq-intake .sq-tile{
  border:2px solid #e7edf5;
  border-radius:16px;
  overflow:hidden;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.booking-shell.bk-mock .bk-svc-card:hover,
.booking-shell.bk-mock .bk-where-card:hover,
.booking-shell.bk-mock #bk-sq-intake .sq-tile:hover{
  transform:translateY(-1px);
  border-color:#cbd5e1;
}
.booking-shell.bk-mock .bk-svc-card.sel,
.booking-shell.bk-mock .bk-where-card.sel,
.booking-shell.bk-mock #bk-sq-intake .sq-tile.sel{
  border-color:var(--bk-ui-accent);
  box-shadow:0 0 0 1px var(--bk-ui-accent),0 10px 24px color-mix(in srgb,var(--bk-ui-accent) 16%,transparent);
}
.booking-shell.bk-mock #bk-sq-intake .sq-lbl{
  font-size:13px;font-weight:750;color:var(--bk-mock-ink);margin:0 0 10px;
}
.booking-shell.bk-mock #bk-sq-intake .sq-tiles{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;
}
.booking-shell.bk-mock #bk-sq-intake .sq-tiles-rich{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.booking-shell.bk-mock #bk-sq-intake .sq-tile-rich img,
.booking-shell.bk-mock #bk-sq-intake .sq-tile img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
}
.booking-shell.bk-mock .bk-addon-row{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:8px 0 4px;
}
.booking-shell.bk-mock .bk-trust-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin:18px 0 4px;padding:14px;border-radius:14px;background:#f8fafc;border:1px solid #eef2f7;
}
.booking-shell.bk-mock .bk-trust-row div{font-size:12px;font-weight:650;color:#334155;text-align:center;line-height:1.35}
.booking-shell.bk-mock .bk-trust-row strong{display:block;font-size:11px;color:var(--bk-ui-accent);margin-bottom:2px}

/* Dual Where & When — keep on one screen when possible */
.booking-shell.bk-mock .bk-where-when{
  display:grid;grid-template-columns:1fr 1.05fr;gap:14px;align-items:start;
}
@media(max-width:960px){
  .booking-shell.bk-mock .bk-where-when{grid-template-columns:1fr}
  .booking-shell.bk-mock .bk-sq-layout{grid-template-columns:1fr}
  .booking-shell.bk-mock .bk-sq-estimate{display:none}
  .booking-shell.bk-mock .bk-sq-mobile-est{display:none!important}
  .booking-shell.bk-mock .bk-step-inner,
  .booking-shell.bk-mock .bk-sq-mode .bk-step-inner{
    margin:0!important;border:none!important;border-radius:0!important;
    box-shadow:none!important;background:transparent!important;overflow:visible;
  }
  .booking-shell.bk-mock .bk-step-body{
    overflow:visible!important;flex:none;padding:16px 16px 24px;
  }
  .booking-shell.bk-mock .bk-sq-layout,
  .booking-shell.bk-mock .bk-sq-main{background:#fff}
  .booking-shell.bk-mock{background:#fff}
}
.booking-shell.bk-mock .bk-col-title{
  font-size:17px;font-weight:800;letter-spacing:-.02em;margin:0 0 2px;
  display:flex;align-items:center;gap:8px;
}
.booking-shell.bk-mock .bk-col-sub{font-size:12px;color:var(--bk-mock-muted);margin:0 0 10px}
.booking-shell.bk-mock .bk-where-list{display:flex;flex-direction:column;gap:8px;margin:0 0 10px}
.booking-shell.bk-mock .bk-where-list .bk-where-card{
  display:grid;grid-template-columns:56px 1fr;gap:0;align-items:stretch;min-height:64px;
}
.booking-shell.bk-mock .bk-where-list .bk-where-card img,
.booking-shell.bk-mock .bk-where-list .bk-where-card .bk-where-ph{
  width:56px;height:100%;min-height:64px;aspect-ratio:auto;object-fit:cover;
}
.booking-shell.bk-mock .bk-where-list .bk-where-card strong{padding:10px 12px 2px;font-size:13px}
.booking-shell.bk-mock .bk-where-list .bk-where-card span{padding:0 12px 10px;font-size:11px}
.booking-shell.bk-mock .bk-where-note{
  margin-top:8px;padding:10px 12px;border-radius:12px;
  background:color-mix(in srgb,var(--bk-ui-accent) 8%,#fff);
  border:1px solid color-mix(in srgb,var(--bk-ui-accent) 18%,#e8eef6);
  font-size:12px;line-height:1.4;color:#334155;
}

/* Mini calendar */
.bk-cal{border:1px solid var(--bk-mock-border);border-radius:16px;padding:12px;background:#fff;margin:0 0 14px}
.bk-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.bk-cal-head strong{font-size:14px;font-weight:750;color:#0f172a}
.bk-cal-head button{
  appearance:none;border:1px solid #e2e8f0;background:#fff;border-radius:8px;
  width:30px;height:30px;cursor:pointer;font-weight:700;color:#334155;
}
.bk-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.bk-cal-dow{font-size:10px;font-weight:700;color:#64748b;text-align:center;padding:4px 0}
.bk-cal-day{
  appearance:none;border:none;background:transparent;border-radius:999px;
  aspect-ratio:1;font-size:12px;font-weight:650;color:#0f172a;cursor:pointer;
}
.bk-cal-day.mute{color:#cbd5e1;cursor:default}
.bk-cal-day.sel{background:var(--bk-ui-accent);color:#fff}
.bk-cal-day:not(.mute):not(.sel):hover{background:#f1f5f9}
.booking-shell.bk-mock #time-grid{
  display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px;
}
.booking-shell.bk-mock #time-grid .vtype-opt{
  border-radius:12px;padding:12px 8px;border:1.5px solid #e2e8f0;background:#fff;color:var(--bk-mock-ink);
}
.booking-shell.bk-mock #time-grid .vtype-opt.active{
  border-color:var(--bk-ui-accent);background:color-mix(in srgb,var(--bk-ui-accent) 8%,#fff);color:var(--bk-ui-accent);
  box-shadow:none;
}

/* Sidebar summary — mock card stack (no price-unlock copy) */
.booking-shell.bk-mock .bk-sq-estimate{
  background:transparent;
  border-left:1px solid var(--bk-mock-border);
  padding:18px 16px 24px;
  overflow-y:auto;
}
.booking-shell.bk-mock .bk-mock-side{
  display:flex;flex-direction:column;gap:12px;
}
.booking-shell.bk-mock .bk-sum-card{
  background:#fff;border:1px solid var(--bk-mock-border);border-radius:18px;overflow:hidden;
  box-shadow:0 10px 28px rgba(15,23,42,.05);
}
.booking-shell.bk-mock .bk-sum-head{
  background:var(--bk-ui-accent);color:#fff;padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.booking-shell.bk-mock .bk-sum-head strong{font-size:14px;font-weight:750}
.booking-shell.bk-mock .bk-sum-dots{display:flex;gap:5px}
.booking-shell.bk-mock .bk-sum-dots i{
  width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.35);display:block;
}
.booking-shell.bk-mock .bk-sum-dots i.on{background:#fff}
.booking-shell.bk-mock .bk-sum-body{padding:14px 16px 16px}
.booking-shell.bk-mock .bk-sum-svc{
  display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;
  margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #f1f5f9;
}
.booking-shell.bk-mock .bk-sum-svc img{
  width:56px;height:44px;object-fit:cover;border-radius:10px;background:#e2e8f0;
}
.booking-shell.bk-mock .bk-sum-svc strong{display:block;font-size:13px;color:var(--bk-mock-ink)}
.booking-shell.bk-mock .bk-sum-svc span{display:block;font-size:11px;color:#475569;margin-top:2px;line-height:1.35}
.booking-shell.bk-mock .bk-sum-edit{
  appearance:none;border:none;background:none;color:var(--bk-ui-accent);
  font:inherit;font-size:12px;font-weight:700;cursor:pointer;padding:0;
}
.booking-shell.bk-mock .bk-sum-lines{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
.booking-shell.bk-mock .bk-sum-line{
  display:flex;justify-content:space-between;gap:8px;align-items:flex-start;
  font-size:12px;color:#0f172a;line-height:1.35;
}
.booking-shell.bk-mock .bk-sum-line span,
.booking-shell.bk-mock .bk-sum-line strong{color:#0f172a}
.booking-shell.bk-mock .bk-sum-line em{font-style:normal;color:#475569;font-size:11px}
.booking-shell.bk-mock .bk-sum-includes{margin:0;padding:0;list-style:none}
.booking-shell.bk-mock .bk-sum-includes li{
  position:relative;padding:0 0 8px 18px;font-size:12px;color:#334155;line-height:1.4;
}
.booking-shell.bk-mock .bk-sum-includes li::before{
  content:"✓";position:absolute;left:0;top:0;color:var(--bk-ui-accent);font-weight:800;
}
.booking-shell.bk-mock .bk-studio-box{
  margin:0 0 12px;padding:12px 14px;border-radius:14px;
  background:color-mix(in srgb,var(--bk-ui-accent) 8%,#fff);
  border:1px solid color-mix(in srgb,var(--bk-ui-accent) 18%,#e8eef6);
}
.booking-shell.bk-mock .bk-studio-box.hidden{display:none!important}
.booking-shell.bk-mock .bk-studio-box strong{display:block;font-size:12px;font-weight:800;margin-bottom:4px}
.booking-shell.bk-mock .bk-studio-box p{margin:0;font-size:13px;color:#334155;line-height:1.4}
.booking-shell.bk-mock .bk-where-when{gap:12px}
.booking-shell.bk-mock #bk-step-2 .field{margin-bottom:8px}
.booking-shell.bk-mock #bk-step-2 .bk-lbl{margin-top:6px;margin-bottom:6px;font-size:11px}

/* Your info + Review: readable measure — stop full-bleed long lines.
   28rem (448px) was far tighter than the 720px the panel gives these two steps,
   so the form sat in a narrow left-hand strip with the rest of the panel empty
   and the body scrolled internally because the content had nowhere to go.
   Measured, not guessed: at a 1710px viewport the inner resolved to 720px while
   this rule held the body at 448px and the inputs at 408px.

   The earlier attempt raised max-width on `#bk-step-3 .bk-step-inner` in
   hubly.html's inline CSS. It had no effect on the body, because THIS file loads
   after it and `.booking-shell.bk-mock #bk-step-3 .bk-step-body` (2 classes +
   1 id + 1 class) outspecifies `#bk-step-3 .bk-step-body`. A width fix for this
   shell has to be made here. */
.booking-shell.bk-mock #bk-step-3 .bk-step-body,
.booking-shell.bk-mock #bk-step-4 .bk-step-body{
  max-width:none;
  width:100%;
}
.booking-shell.bk-mock #bk-step-3 .field{margin-bottom:12px}
.booking-shell.bk-mock #bk-step-3 .field-row{gap:12px}
.booking-shell.bk-mock #bk-step-3 .bk-sms-consent{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  padding:10px 12px;border-radius:12px;border:1px solid #e8eef6;background:#f8fafc;
  font-size:12px;line-height:1.4;margin:4px 0 12px;
}
.booking-shell.bk-mock #bk-step-3 .bk-sms-main{display:block;color:#334155}
.booking-shell.bk-mock #bk-step-3 .bk-sms-fine{display:block;margin-top:4px;font-size:11px;color:#94a3b8}
/* The privacy note is helper text under Email now, not a card in a second
   column. It sat between Email and Phone in the DOM, which is what put the SMS
   checkbox in the tab path before Phone. */
.booking-shell.bk-mock #bk-step-3 .bk-field-hint{
  margin-top:5px;font-size:11px;line-height:1.4;color:#94a3b8;
}
.booking-shell.bk-mock #bk-step-3 .bk-info-card{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  padding:10px 12px;border-radius:12px;background:#f8fafc;border:1px solid #e8eef6;
  font-size:12px;line-height:1.4;color:#64748b;margin-top:4px;
}
.booking-shell.bk-mock #bk-step-4 #bk-details-summary{
  display:flex;flex-direction:column;gap:8px;max-width:28rem;
}
.booking-shell.bk-mock #bk-step-4 .bk-review-row{
  padding:10px 12px!important;gap:10px;border-radius:12px;
}
.booking-shell.bk-mock #bk-step-4 .bk-review-body strong{font-size:13px}
.booking-shell.bk-mock #bk-step-4 .bk-review-body span{font-size:12px;line-height:1.35;margin-top:1px}
.booking-shell.bk-mock #bk-step-4 .order-summary,
.booking-shell.bk-mock #bk-step-4 .bk-guarantee{max-width:28rem}
.booking-shell.bk-mock #time-grid{gap:6px}
.booking-shell.bk-mock .bk-cal{padding:10px;margin:0 0 10px}
.booking-shell.bk-mock .bk-where-list .bk-where-card{min-height:64px}
.booking-shell.bk-mock .bk-step-body{padding:14px 18px 6px}
.booking-shell.bk-mock .bk-sum-lock{display:none!important}
.booking-shell.bk-mock .bk-sum-total{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:12px;padding-top:12px;border-top:1px solid #eef2f7;
  font-size:13px;font-weight:700;
}
.booking-shell.bk-mock .bk-sum-total b{font-size:20px;color:var(--bk-ui-accent);letter-spacing:-.02em}
.booking-shell.bk-mock .bk-help-card{display:none!important}
.booking-shell.bk-mock .bk-reviews-card{
  background:#fff;border:1px solid var(--bk-mock-border);border-radius:16px;padding:14px;
  box-shadow:0 8px 20px rgba(15,23,42,.04);
}
.booking-shell.bk-mock .bk-svc-switch-hint{
  margin:6px 0 0;font-size:12px;color:#64748b;line-height:1.35;
}
.booking-shell.bk-mock .bk-reviews-card{font-size:12px;color:#334155;line-height:1.4}
.booking-shell.bk-mock .bk-reviews-card .stars{color:#f59e0b;letter-spacing:1px;margin-bottom:4px}

/* Review edit cards */
.booking-shell.bk-mock #bk-details-summary{
  background:transparent!important;border:none!important;padding:0!important;gap:10px!important;
}
.booking-shell.bk-mock .bk-review-row{
  background:#fff;border:1px solid var(--bk-mock-border)!important;border-radius:14px;
  padding:12px 14px!important;align-items:center;
}
.booking-shell.bk-mock .bk-review-edit{color:var(--bk-ui-accent)}
.booking-shell.bk-mock .order-summary{
  border-radius:16px;border:1px solid var(--bk-mock-border);background:#f8fafc;
}
.booking-shell.bk-mock .bk-guarantee{
  margin-top:12px;padding:12px 14px;border-radius:14px;
  background:color-mix(in srgb,var(--bk-ui-accent) 8%,#fff);
  border:1px solid color-mix(in srgb,var(--bk-ui-accent) 16%,#e8eef6);
  font-size:13px;line-height:1.45;color:#1e3a5f;
}

#v-booking-wizard.bw-mock .bw-prev-shell{
  border-radius:22px;padding:0;overflow:hidden;background:#fff;color:var(--bk-mock-ink,#0f172a);
  border:1px solid var(--bk-mock-border,#e6ebf2);
}
#v-booking-wizard.bw-mock .bw-prev-brand{
  background:var(--bk-ui-accent,#2563eb);color:#fff;padding:12px 16px;margin:0;font-size:13px;font-weight:700;
}
#v-booking-wizard.bw-mock .bw-prev-steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:10px 12px;border-bottom:1px solid #eef2f7;background:#fff;
}
#v-booking-wizard.bw-mock .bw-prev-steps span{
  display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;font-weight:700;color:#94a3b8;text-align:center;
}
#v-booking-wizard.bw-mock .bw-prev-steps span.on{color:#0f172a}
#v-booking-wizard.bw-mock .bw-prev-steps i{
  width:22px;height:22px;border-radius:999px;background:#e8eef6;color:#94a3b8;
  display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;font-weight:800;
}
#v-booking-wizard.bw-mock .bw-prev-steps span.on i{background:var(--bk-ui-accent,#2563eb);color:#fff}
#v-booking-wizard.bw-mock .bw-prev-steps em{font-style:normal;font-size:9px;font-weight:500;color:#94a3b8;line-height:1.2}
#v-booking-wizard.bw-mock .bw-prev-shell h2{padding:14px 16px 0;color:var(--bk-mock-ink,#0f172a);font-size:18px;margin:0}
#v-booking-wizard.bw-mock .bw-prev-shell>p{padding:4px 16px 0;color:#64748b;font-size:12px;margin:0}
#v-booking-wizard.bw-mock .bw-prev-prompt{padding:12px 16px 6px;color:#0f172a;font-size:12px;font-weight:700}
#v-booking-wizard.bw-mock .bw-prev-grid{padding:0 16px 14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
#v-booking-wizard.bw-mock .bw-prev-card{background:#f8fafc;border:1px solid #e8eef6;color:#0f172a;border-radius:12px;overflow:hidden;padding:0}
#v-booking-wizard.bw-mock .bw-prev-card .bw-prev-media{aspect-ratio:4/3;background:#e2e8f0}
#v-booking-wizard.bw-mock .bw-prev-card .bw-prev-media img{width:100%;height:100%;object-fit:cover;display:block}
#v-booking-wizard.bw-mock .bw-prev-card strong{display:block;padding:8px 10px 2px;font-size:12px}
#v-booking-wizard.bw-mock .bw-prev-meta{padding:0 10px 4px;font-size:11px;font-weight:750;color:var(--bw-accent,var(--bk-ui-accent,#0f766e))}
#v-booking-wizard.bw-mock .bw-prev-card span{display:block;padding:0 10px 10px;font-size:11px;color:#64748b}
#v-booking-wizard.bw-mock .bw-prev-card em{display:block;padding:0 10px 10px;margin-top:-6px;font-style:normal;font-size:10px;font-weight:800;color:#c2410c}
#v-booking-wizard.bw-mock .bw-prev-side{border-top:1px solid #eef2f7;padding:14px 16px 16px;background:#f8fafc}
#v-booking-wizard.bw-mock .bw-prev-kicker{color:var(--bk-ui-accent,#2563eb);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px}
#v-booking-wizard.bw-mock .bw-prev-side ul{color:#334155;margin:0;padding:0;list-style:none}
#v-booking-wizard.bw-mock .bw-prev-side li{position:relative;padding:0 0 6px 16px;font-size:12px}
#v-booking-wizard.bw-mock .bw-prev-side li::before{content:"✓";position:absolute;left:0;color:var(--bk-ui-accent,#2563eb);font-weight:800}
#v-booking-wizard.bw-mock .bw-prev-side .bw-muted{color:#64748b;font-size:12px;margin:8px 0 0}