/* ==========================================================================
   BBS contact controls + scheduled callback
   Designer-owned. Every colour is a named role from base.html :root; the
   handful this feature adds are declared below so the component is
   self-sufficient on Studio's standalone page too.
   ========================================================================== */
:root{
  --action-callback: var(--hl-yellow, #CCFF00);         /* standalone primary action: BBS yellow */
  --contact-face: var(--paper, #fff);                   /* contact controls stay quiet */
  --contact-ink: var(--ink, #111);
  --contact-line: #9a9a9a;
  --contact-hover-face: #f6f6f6;
  --cbk-scrim: rgba(17,17,17,.55);
  --cbk-radius: 14px;
  --cbk-slot-h: 44px;
  --cbk-day: 40px;
  --cbk-feedback: var(--cta-feedback, 70ms ease-out);
}
.sr-only{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;}

/* The shared focus ring, as its own layer so it never erases a raised edge (09-09 lock). */
.cbk-focusable{position:relative;}
.cbk-focusable:focus-visible{outline:none;}
.cbk-focusable:focus-visible::after{
  content:""; position:absolute; inset:-4px; border-radius:11px; pointer-events:none;
  outline:2px solid var(--ink,#111); box-shadow:0 0 0 4px var(--focus-ring,#FFF200);
}

/* ==========================================================================
   1. Contact controls — Chat · Call · Email
   ========================================================================== */
.bbs-contact{display:flex; align-items:stretch; gap:8px; font-family:var(--font-sans, Inter, sans-serif);}
.bbs-contact-btn{
  appearance:none; -webkit-appearance:none; position:relative; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  flex:1 1 0; min-width:0; min-height:var(--control-height,44px); padding:0 12px;
  background:var(--contact-face); color:var(--contact-ink);
  border:1px solid var(--contact-line); border-radius:var(--control-radius,8px);
  font:600 13px/1 var(--font-sans, Inter, sans-serif); cursor:pointer;
  transition:background-color var(--cbk-feedback);
}
.bbs-contact-btn:hover{background:var(--contact-hover-face);}
.bbs-contact-btn:active{background:#efefef; transform:var(--cta-press-shift, translateY(1px));}
.bbs-contact-btn:focus-visible{outline:none;}
.bbs-contact-btn:focus-visible::after{content:""; position:absolute; inset:-4px; border-radius:11px; pointer-events:none; outline:2px solid var(--ink,#111); box-shadow:0 0 0 4px var(--focus-ring,#FFF200);}
.bbs-contact-btn svg{flex:0 0 auto; width:18px; height:18px;}
.bbs-contact-btn .lbl{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bbs-contact-btn .pip{position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%; background:var(--ink-muted,#767676); border:1.5px solid #fff;}

/* Variant A — icons only: square 44px targets, label for assistive tech only. */
.bbs-contact.is-icons .bbs-contact-btn{flex:0 0 auto; width:44px; padding:0;}
.bbs-contact.is-icons .bbs-contact-btn .lbl{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;}
/* Variant B — stacked: icon over a 10px label. Still 44px tall and ≥52px wide. */
.bbs-contact.is-stacked .bbs-contact-btn{flex:0 0 auto; flex-direction:column; gap:3px; width:56px; min-height:46px; padding:5px 4px 4px;}
.bbs-contact.is-stacked .bbs-contact-btn .lbl{font-size:10px; line-height:1; letter-spacing:.01em;}
.bbs-contact.is-stacked .bbs-contact-btn svg{width:17px; height:17px;}

/* Product page — buy box: separated by a rule, sized to the column. */
.buy-box-contact{margin-top:14px; padding-top:14px; border-top:1px solid var(--line,#dcdcdc);}
.buy-box-contact .bbs-contact-lead{margin:0 0 8px; font:600 12px/1.3 var(--font-sans, Inter, sans-serif); color:var(--ink-muted,#767676); letter-spacing:.01em;}

/* Product page — phone purchase bar. Price keeps its place; the icons take the room the generic
   "In stock" badge used to fill. Meaningful availability (backorder, quote-required) still shows,
   as a full-width line under the price row. */
.sticky-bar-mobile .sticky-bar-left{flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px 12px; min-width:0;}
.sticky-bar-mobile .sticky-contact{flex:0 0 auto; margin-left:auto;}
.sticky-bar-mobile .sticky-stock:not(.backorder):not(.quote-required){display:none;}
.sticky-bar-mobile .sticky-stock.backorder, .sticky-bar-mobile .sticky-stock.quote-required{flex:1 0 100%; order:9; font-size:12px;}
@media (max-width:359px){
  .sticky-bar-mobile .sticky-contact.is-icons .bbs-contact-btn{width:40px; min-height:40px;}
  .sticky-bar-mobile .sticky-contact{gap:6px;}
  .sticky-bar-mobile .sticky-contact.is-stacked .bbs-contact-btn{width:50px;}
  .sticky-bar-mobile .sticky-row-secondary{flex-wrap:wrap; gap:8px 12px;}
}
@media (min-width:769px){
  .sticky-bar-mobile .sticky-row-secondary .sticky-bar-left{flex-wrap:nowrap;}
  .sticky-bar-mobile .sticky-contact{margin-left:0;}
  .sticky-bar-mobile .sticky-stock.backorder, .sticky-bar-mobile .sticky-stock.quote-required{flex:0 0 auto; order:0;}
}

/* Homepage — compact assistance block, sized like the Finder card above it. */
.home-assist{padding:0 var(--sp-5, 20px); margin:var(--sp-6, 24px) auto var(--sp-8, 32px); max-width:1100px;}
.home-assist-box{border:1.5px solid var(--ink,#111); border-radius:var(--radius-lg,12px); background:var(--paper,#fff); padding:20px; display:flex; flex-wrap:wrap; align-items:center; gap:16px;}
.home-assist-copy{flex:1 1 300px; min-width:0;}
.home-assist-title{margin:0 0 4px; font:800 19px/1.25 var(--font-sans, Inter, sans-serif);}
.home-assist-desc{margin:0; font:500 13.5px/1.5 var(--font-sans, Inter, sans-serif); color:var(--ink-2,#444);}
.home-assist-actions{display:flex; flex-wrap:wrap; gap:10px; flex:0 0 auto;}
.home-assist-tel{display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; position:relative; min-height:var(--control-height,44px); padding:0 18px; border-radius:var(--control-radius,8px); border:1.5px solid var(--ink,#111); background:var(--paper,#fff); color:var(--ink,#111); font:700 14.5px/1 var(--font-sans, Inter, sans-serif);}
.home-assist-tel svg{width:18px; height:18px;}
.home-assist-tel:hover{background:var(--contact-hover-face);}
.home-assist-tel:focus-visible{outline:none;}
.home-assist-tel:focus-visible::after{content:""; position:absolute; inset:-5px; border-radius:12px; outline:2px solid var(--ink,#111); box-shadow:0 0 0 4px var(--focus-ring,#FFF200);}
@media (max-width:519px){ .home-assist-actions{width:100%;} .home-assist-actions > *{flex:1 1 100%;} }

/* ==========================================================================
   2. Popovers — Call (two choices) and Chat (offline notice)
   ========================================================================== */
.call-pop{
  position:absolute; z-index:940; min-width:262px; max-width:calc(100vw - 24px);
  background:var(--paper,#fff); color:var(--ink,#111);
  border:1.5px solid var(--ink,#111); border-radius:var(--cbk-radius);
  box-shadow:0 6px 0 rgba(0,0,0,.14), 0 18px 40px rgba(0,0,0,.18);
  padding:10px; font-family:var(--font-sans, Inter, sans-serif);
}
.call-pop[hidden]{display:none;}
.call-pop-title{margin:2px 4px 8px; font:700 12px/1.2 var(--font-sans, Inter, sans-serif); color:var(--ink-muted,#767676); text-transform:uppercase; letter-spacing:.06em;}
.call-pop p.call-pop-body{margin:0 4px 6px; font:500 13px/1.45 var(--font-sans, Inter, sans-serif); max-width:30ch;}
.call-choice{
  display:flex; width:100%; align-items:center; gap:10px; text-align:left; text-decoration:none; position:relative;
  appearance:none; background:var(--paper,#fff); color:var(--ink,#111);
  border:1px solid var(--contact-line); border-radius:10px; padding:11px 12px; min-height:52px; cursor:pointer;
  font:600 14px/1.25 var(--font-sans, Inter, sans-serif);
}
.call-choice + .call-choice{margin-top:8px;}
.call-choice:hover{background:var(--contact-hover-face);}
.call-choice:focus-visible{outline:none;}
.call-choice:focus-visible::after{content:""; position:absolute; inset:-4px; border-radius:13px; outline:2px solid var(--ink,#111); box-shadow:0 0 0 4px var(--focus-ring,#FFF200);}
.call-choice .cc-body{display:flex; flex-direction:column; gap:2px; min-width:0;}
.call-choice .cc-sub{font:500 12px/1.3 var(--font-sans, Inter, sans-serif); color:var(--ink-muted,#767676);}
.call-choice svg{flex:0 0 auto; width:20px; height:20px;}

/* ==========================================================================
   3. The scheduler
   ========================================================================== */
html.cbk-open{overflow:hidden;}
.cbk-scrim{position:fixed; inset:0; z-index:950; background:var(--cbk-scrim); display:flex; align-items:flex-start; justify-content:center; padding:max(24px, 5vh) 24px 24px;}
.cbk-scrim[hidden]{display:none;}
/* Fixed height: the dialog never resizes as content loads, so nothing moves under the pointer. */
.cbk{
  background:var(--paper,#fff); color:var(--ink,#111);
  width:min(880px, 100%); height:min(760px, calc(100vh - max(24px, 5vh) - 24px));
  border:2px solid var(--ink,#111); border-radius:var(--cbk-radius);
  box-shadow:0 8px 0 rgba(0,0,0,.16), 0 26px 60px rgba(0,0,0,.28);
  display:flex; flex-direction:column; overflow:hidden; font-family:var(--font-sans, Inter, sans-serif);
}
/* Header, context strip, steps and footer keep their natural height; only the body scrolls. */
.cbk-head, .cbk-context, .cbk-steps, .cbk-foot{flex:0 0 auto;}
.cbk-head{display:flex; align-items:flex-start; gap:12px; padding:16px 18px 14px; border-bottom:1px solid var(--line,#dcdcdc);}
.cbk-head h2{margin:0; font:800 19px/1.2 var(--font-sans, Inter, sans-serif); letter-spacing:-.01em; outline:none;}
.cbk-head .cbk-sub{margin:4px 0 0; font:500 13px/1.4 var(--font-sans, Inter, sans-serif); color:var(--ink-2,#444);}
.cbk-close{
  margin-left:auto; appearance:none; background:var(--paper,#fff); color:var(--ink,#111);
  border:1px solid var(--contact-line); border-radius:8px; width:38px; height:38px; flex:0 0 auto; cursor:pointer; font-size:19px; line-height:1; position:relative;
}
.cbk-close:hover{background:var(--contact-hover-face);}
.cbk-close:focus-visible{outline:none;}
.cbk-close:focus-visible::after{content:""; position:absolute; inset:-4px; border-radius:11px; outline:2px solid var(--ink,#111); box-shadow:0 0 0 4px var(--focus-ring,#FFF200);}

.cbk-context{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:8px 18px; background:var(--paper,#fff); border-bottom:1px solid var(--line,#dcdcdc); font:600 12px/1.35 var(--font-sans, Inter, sans-serif); min-height:36px;}
.cbk-context:has(> [hidden]:only-child), .cbk-context:not(:has(> :not([hidden]))){display:none;}
.cbk-ctx{display:inline-flex; gap:6px; align-items:baseline; min-width:0;}
.cbk-ctx-label{color:var(--ink-muted,#767676); text-transform:uppercase; letter-spacing:.06em; font-size:11px;}
.cbk-ctx-val{color:var(--ink,#111); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:52ch;}
.cbk-demo-flag{margin-left:auto; display:inline-flex; align-items:center; background:var(--hl-yellow,#FFF200); color:#111; border:1px solid #111; border-radius:999px; padding:4px 10px; font:700 11px/1 var(--font-sans, Inter, sans-serif);}
.cbk-demo-flag[hidden], .cbk-ctx[hidden]{display:none;}

.cbk-steps{display:flex; gap:6px; padding:12px 18px 0; margin:0; list-style:none; font:700 11px/1 var(--font-sans, Inter, sans-serif);}
.cbk-steps[hidden]{display:none;}
.cbk-step{flex:1; display:flex; align-items:center; gap:7px; color:var(--ink-muted,#767676); padding-bottom:10px; border-bottom:3px solid var(--line,#dcdcdc); text-transform:uppercase; letter-spacing:.05em;}
.cbk-step .n{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; border:1.5px solid currentColor; font-size:11px; flex:0 0 auto;}
.cbk-step.is-current{color:var(--ink,#111); border-bottom-color:var(--ink,#111);}
.cbk-step.is-done{color:var(--hl-green-text,#2F7A00); border-bottom-color:var(--hl-green-text,#2F7A00);}
.cbk-step.is-done .n{background:var(--hl-green-text,#2F7A00); color:#fff; border-color:var(--hl-green-text,#2F7A00);}

.cbk-body{padding:16px 18px 18px; overflow:auto; flex:1 1 auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;}
.cbk-pane{display:none;}
.cbk-pane.is-active{display:block;}

/* --- Step 1: date + time together ---------------------------------------- */
.cbk-when{display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:22px; align-items:start;}
.cbk-cal-head{display:flex; align-items:center; gap:8px; margin-bottom:10px;}
.cbk-cal-head .cbk-month{font:800 15px/1 var(--font-sans, Inter, sans-serif); flex:1; text-align:center;}
.cbk-nav{appearance:none; width:36px; height:36px; flex:0 0 auto; cursor:pointer; background:var(--paper,#fff); color:var(--ink,#111); border:1px solid var(--contact-line); border-radius:8px; position:relative; font-size:15px; line-height:1;}
.cbk-nav:hover:not(:disabled){background:var(--contact-hover-face);}
.cbk-nav:disabled{background:var(--disabled-face,#EDEDED); color:var(--disabled-ink,#5F5F5F); border-color:var(--disabled-line,#C4C4C4); cursor:not-allowed;}
.cbk-nav:focus-visible{outline:none;}
.cbk-nav:focus-visible::after{content:""; position:absolute; inset:-4px; border-radius:11px; outline:2px solid var(--ink,#111); box-shadow:0 0 0 4px var(--focus-ring,#FFF200);}
.cbk-dow{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px;}
.cbk-dow span{text-align:center; font:700 11px/1 var(--font-sans, Inter, sans-serif); color:var(--ink-muted,#767676); padding:6px 0;}
.cbk-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px;}
.cbk-day{
  appearance:none; position:relative; cursor:pointer; min-height:var(--cbk-day); border-radius:8px;
  background:var(--paper,#fff); color:var(--ink,#111); border:1px solid var(--line,#dcdcdc);
  font:600 14px/1 var(--font-sans, Inter, sans-serif); display:flex; align-items:center; justify-content:center;
  transition:none; /* selection commits instantly — no colour cross-fade through an unreadable mid-state */
}
.cbk-day.is-blank{border:0; background:none; cursor:default;}
.cbk-day:hover:not(:disabled):not(.is-blank):not([aria-pressed="true"]){background:var(--contact-hover-face); border-color:var(--contact-line);}
/* Closed (weekend/past): quiet and plain. Fully booked: struck, still selectable so the next-open route shows. */
.cbk-day.is-closed:disabled{background:var(--paper-2,#f4f4f4); color:var(--disabled-ink,#5F5F5F); border-color:transparent; cursor:not-allowed;}
.cbk-day.is-full{background:var(--disabled-face,#EDEDED); color:var(--disabled-ink,#5F5F5F); border-color:var(--disabled-line,#C4C4C4); text-decoration:line-through;}
.cbk-day.is-full:hover:not([aria-pressed="true"]){background:#e4e4e4;}
.cbk-day:not(.is-closed):not(.is-full):disabled{background:var(--disabled-face,#EDEDED); color:var(--disabled-ink,#5F5F5F); border-color:var(--disabled-line,#C4C4C4); cursor:progress;}
.cbk-day[aria-pressed="true"]{background:var(--ink,#111); color:#fff; border-color:var(--ink,#111); font-weight:800; text-decoration:none;}
.cbk-day.is-today::after{content:""; position:absolute; bottom:5px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:currentColor;}
.cbk-day:focus-visible{outline:none;}
.cbk-day:focus-visible::before{content:""; position:absolute; inset:-4px; border-radius:11px; outline:2px solid var(--ink,#111); box-shadow:0 0 0 4px var(--focus-ring,#FFF200); z-index:2; pointer-events:none;}
.cbk-legend{display:flex; flex-wrap:wrap; gap:10px 12px; margin-top:12px; font:500 11.5px/1.3 var(--font-sans, Inter, sans-serif); color:var(--ink-2,#444);}
.cbk-legend i{display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:5px; vertical-align:-2px; border:1px solid var(--line,#dcdcdc);}
.cbk-legend .lg-open{background:#fff;}
.cbk-legend .lg-closed{background:var(--paper-2,#f4f4f4); border-color:transparent;}
.cbk-legend .lg-full{background:var(--disabled-face,#EDEDED); border-color:var(--disabled-line,#C4C4C4); position:relative;}
.cbk-legend .lg-full::after{content:""; position:absolute; left:2px; right:2px; top:50%; height:1px; background:var(--disabled-ink,#5F5F5F);}
.cbk-legend .lg-sel{background:var(--ink,#111); border-color:var(--ink,#111);}
.cbk-hint{margin:8px 0 0; font:500 11.5px/1.3 var(--font-sans, Inter, sans-serif); color:var(--ink-muted,#767676);}

/* Times: header carries the date, length and the time-zone control, all ABOVE the list so they never move. */
.cbk-times-head{display:flex; align-items:center; gap:8px 12px; margin-bottom:10px; flex-wrap:wrap;}
.cbk-times-head h3{margin:0; font:800 14px/1.25 var(--font-sans, Inter, sans-serif);}
.cbk-times-head .cbk-len{font:500 12px/1.3 var(--font-sans, Inter, sans-serif); color:var(--ink-muted,#767676);}
.cbk-tz{display:flex; align-items:center; gap:8px; margin-left:auto;}
.cbk-tz label{font:600 12px/1.3 var(--font-sans, Inter, sans-serif); color:var(--ink-2,#444); white-space:nowrap;}
.cbk-tz select{min-height:36px; padding:0 8px; border-radius:8px; border:1px solid var(--contact-line); background:var(--paper,#fff); color:var(--ink,#111); font:600 12.5px/1 var(--font-sans, Inter, sans-serif); max-width:100%;}
.cbk-tz select:focus-visible{outline:2px solid var(--ink,#111); outline-offset:2px; box-shadow:0 0 0 4px var(--focus-ring,#FFF200);}
.cbk-times{min-height:212px;} /* four rows of slots: the panel's height is stable across loading, empty and full lists */
.cbk-slots{display:grid; grid-template-columns:repeat(auto-fill, minmax(104px,1fr)); gap:8px;}
.cbk-slot{
  appearance:none; position:relative; cursor:pointer; min-height:var(--cbk-slot-h); border-radius:8px;
  background:var(--paper,#fff); color:var(--ink,#111); border:1px solid var(--contact-line);
  font:600 13.5px/1 var(--font-sans, Inter, sans-serif); transition:none;
}
.cbk-slot:hover:not(:disabled):not([aria-checked="true"]){background:var(--contact-hover-face);}
.cbk-slot:disabled{background:var(--disabled-face,#EDEDED); color:var(--disabled-ink,#5F5F5F); border-color:var(--disabled-line,#C4C4C4); cursor:not-allowed; text-decoration:line-through;}
.cbk-slot[aria-checked="true"]{background:var(--ink,#111); color:#fff; border-color:var(--ink,#111); font-weight:800;}
.cbk-slot:focus-visible{outline:none;}
.cbk-slot:focus-visible::after{content:""; position:absolute; inset:-4px; border-radius:11px; outline:2px solid var(--ink,#111); box-shadow:0 0 0 4px var(--focus-ring,#FFF200); pointer-events:none;}
.cbk-empty{border:1px solid var(--line,#dcdcdc); border-radius:10px; padding:18px 16px; background:var(--paper,#fff);}
.cbk-empty p{margin:0 0 12px; font:600 13.5px/1.45 var(--font-sans, Inter, sans-serif);}
.cbk-empty p:last-child{margin-bottom:0;}
.cbk-empty .cbk-empty-sub{font-weight:500; color:var(--ink-2,#444);}
.cbk-empty-quiet{background:transparent; border-style:dashed;}
.cbk-empty-error{border-color:var(--hl-pink,#FF66BE); background:var(--hl-pink-tint,#FFE4F3);}
.cbk-link{appearance:none; background:none; border:0; padding:0; font:inherit; font-weight:700; color:var(--ink,#111); text-decoration:underline; text-underline-offset:2px; cursor:pointer; border-radius:4px;}
.cbk-link:focus-visible{outline:2px solid var(--ink,#111); outline-offset:2px; box-shadow:0 0 0 4px var(--focus-ring,#FFF200);}
.cbk-loading{display:grid; grid-template-columns:repeat(auto-fill, minmax(104px,1fr)); gap:8px;}
.cbk-loading span{min-height:var(--cbk-slot-h); border-radius:8px; background:linear-gradient(90deg,#eee 25%,#f6f6f6 37%,#eee 63%); background-size:400% 100%; animation:cbk-sheen 1.1s linear infinite;}
@keyframes cbk-sheen{0%{background-position:100% 0}100%{background-position:0 0}}

/* --- Chosen-slot bar (steps 2–3) ----------------------------------------- */
.cbk-chosen{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; border:1.5px solid var(--ink,#111); border-radius:10px; padding:11px 12px; margin-bottom:16px; background:var(--hl-yellow-tint,#FFFDD1);}
.cbk-chosen-kicker{width:100%; font:700 11px/1.2 var(--font-sans, Inter, sans-serif); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2,#444);}
.cbk-chosen-kicker[hidden]{display:none;}
.cbk-chosen-when{font:800 14px/1.3 var(--font-sans, Inter, sans-serif); min-width:0; flex:1 1 200px;}
.cbk-chosen-meta{font:500 12px/1.3 var(--font-sans, Inter, sans-serif); color:var(--ink-2,#444); width:100%;}
.cbk-change{margin-left:auto; appearance:none; cursor:pointer; position:relative; background:var(--paper,#fff); color:var(--ink,#111); border:1px solid var(--ink,#111); border-radius:8px; min-height:36px; padding:0 12px; font:700 12.5px/1 var(--font-sans, Inter, sans-serif);}
.cbk-change:hover{background:var(--contact-hover-face);}
.cbk-change:focus-visible{outline:none;}
.cbk-change:focus-visible::after{content:""; position:absolute; inset:-4px; border-radius:11px; outline:2px solid var(--ink,#111); box-shadow:0 0 0 4px var(--focus-ring,#FFF200);}

/* --- Step 2: details ------------------------------------------------------ */
.cbk-field{margin-bottom:14px;}
.cbk-field label{display:block; font:700 12.5px/1.3 var(--font-sans, Inter, sans-serif); margin-bottom:5px;}
.cbk-field .cbk-opt{font-weight:500; color:var(--ink-muted,#767676);}
.cbk-field input, .cbk-field textarea{width:100%; padding:10px 12px; min-height:var(--control-height,44px); border:1px solid var(--contact-line); border-radius:var(--control-radius,8px); background:var(--paper,#fff); color:var(--ink,#111); font:500 14px/1.4 var(--font-sans, Inter, sans-serif);}
.cbk-field textarea{min-height:84px; resize:vertical;}
.cbk-field input:focus-visible, .cbk-field textarea:focus-visible{outline:2px solid var(--ink,#111); outline-offset:1px; box-shadow:0 0 0 4px var(--focus-ring,#FFF200);}
.cbk-field .cbk-help{margin:5px 0 0; font:500 12px/1.4 var(--font-sans, Inter, sans-serif); color:var(--ink-2,#444);}
.cbk-field.has-error input{border-color:var(--status-error,#B00020); border-width:1.5px;}
.cbk-err{margin:5px 0 0; font:600 12px/1.4 var(--font-sans, Inter, sans-serif); color:var(--status-error,#B00020);}
.cbk-err[hidden]{display:none;}
.cbk-two{display:grid; grid-template-columns:1fr 1fr; gap:14px;}

/* --- Step 3: review — ONE appointment summary (the chosen bar), then contact details ---- */
.cbk-review h3, .cbk-done h3{outline:none;}
.cbk-review h3{margin:0 0 8px; font:800 14px/1.25 var(--font-sans, Inter, sans-serif);}
.cbk-rows{margin:0; border:1px solid var(--line,#dcdcdc); border-radius:10px; overflow:hidden;}
.cbk-rows .rrow{display:flex; gap:14px; padding:11px 14px; border-bottom:1px solid var(--line,#dcdcdc);}
.cbk-rows .rrow:last-child{border-bottom:0;}
.cbk-rows dt{flex:0 0 118px; font:600 12.5px/1.4 var(--font-sans, Inter, sans-serif); color:var(--ink-muted,#767676);}
.cbk-rows dd{margin:0; flex:1; font:600 13.5px/1.45 var(--font-sans, Inter, sans-serif); min-width:0; overflow-wrap:anywhere;}
.cbk-promise{margin:14px 0 0; padding:12px 14px; border-radius:10px; background:var(--hl-blue-tint,#DCF7FF); border:1px solid var(--hl-blue,#3AD1FF); font:600 13.5px/1.45 var(--font-sans, Inter, sans-serif);}

/* --- Confirmed ------------------------------------------------------------- */
.cbk-done-mark{width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--hl-green,#A8FF3C); border:1.5px solid var(--ink,#111); margin-bottom:12px;}
.cbk-done h3{margin:0 0 6px; font:800 20px/1.25 var(--font-sans, Inter, sans-serif);}
.cbk-done .cbk-sub{margin:0;}
.cbk-done-when{margin:12px 0; padding:14px; border:1.5px solid var(--ink,#111); border-radius:10px; background:var(--hl-green-tint,#EFFFDC); font:800 16px/1.35 var(--font-sans, Inter, sans-serif);}
.cbk-done-when small{display:block; margin-top:4px; font:500 12.5px/1.4 var(--font-sans, Inter, sans-serif); color:var(--ink-2,#444);}
.cbk-aftercare{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.cbk-after-btn{appearance:none; cursor:pointer; position:relative; text-decoration:none; display:inline-flex; align-items:center; background:var(--paper,#fff); color:var(--ink,#111); border:1px solid var(--contact-line); border-radius:8px; min-height:42px; padding:0 14px; font:700 13px/1 var(--font-sans, Inter, sans-serif);}
.cbk-after-btn:hover{background:var(--contact-hover-face);}
.cbk-after-btn:focus-visible{outline:none;}
.cbk-after-btn:focus-visible::after{content:""; position:absolute; inset:-4px; border-radius:11px; outline:2px solid var(--ink,#111); box-shadow:0 0 0 4px var(--focus-ring,#FFF200);}
.cbk-cancel-confirm{margin-top:14px; padding:12px 14px; border:1.5px solid var(--hl-pink,#FF66BE); background:var(--hl-pink-tint,#FFE4F3); border-radius:10px;}
.cbk-cancel-confirm[hidden]{display:none;}
.cbk-cancel-confirm p{margin:0 0 10px; font:600 13.5px/1.4 var(--font-sans, Inter, sans-serif);}
.cbk-cancel-confirm .row{display:flex; gap:8px; flex-wrap:wrap;}

/* --- Alert ----------------------------------------------------------------- */
.cbk-alert{display:flex; gap:10px; align-items:flex-start; border:1.5px solid var(--hl-pink,#FF66BE); background:var(--hl-pink-tint,#FFE4F3); border-radius:10px; padding:12px 14px; margin-bottom:14px; outline:none;}
.cbk-alert[hidden]{display:none;}
.cbk-alert:focus-visible{outline:2px solid var(--ink,#111); outline-offset:2px; box-shadow:0 0 0 4px var(--focus-ring,#FFF200);}
.cbk-alert svg{flex:0 0 auto; width:20px; height:20px; margin-top:1px;}
.cbk-alert p{margin:0; font:600 13px/1.45 var(--font-sans, Inter, sans-serif);}
.cbk-alert p small{display:block; font-weight:500; color:var(--ink-2,#444); margin-top:3px;}

/* --- Footer / primary action ---------------------------------------------- */
.cbk-foot{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 18px; border-top:1px solid var(--line,#dcdcdc); background:var(--paper,#fff);}
.cbk-foot .cbk-foot-note{font:500 12px/1.35 var(--font-sans, Inter, sans-serif); color:var(--ink-muted,#767676); flex:1 1 160px; min-width:0;}
.cbk-foot .cbk-foot-note[hidden]{display:none;}
.cbk-btn{
  appearance:none; cursor:pointer; position:relative; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--control-height,44px); padding:0 20px; border-radius:var(--control-radius,8px);
  border:1.5px solid var(--ink,#111); color:var(--action-ink,#111); font:700 14.5px/1 var(--font-sans, Inter, sans-serif);
  transition:filter var(--cbk-feedback), box-shadow var(--cbk-feedback), transform var(--cbk-feedback);
}
.cbk-btn svg{width:18px; height:18px; flex:0 0 auto;}
.cbk-btn-primary{background:var(--action-callback); box-shadow:var(--cta-lift, 0 1px 0 #111, 0 2px 0 rgba(0,0,0,.161));}
.cbk-btn-primary:hover:not(:disabled){filter:var(--cta-hover-lift, brightness(1.025));}
.cbk-btn-primary:active:not(:disabled){transform:var(--cta-press-shift, translateY(1px)); box-shadow:var(--cta-press-shadow, inset 0 1px 2px rgba(0,0,0,.149)); filter:var(--cta-press-dim, brightness(.95));}
.cbk-btn-primary[aria-busy="true"]{cursor:progress;}
.cbk-btn-ghost{background:var(--paper,#fff); border-color:var(--contact-line);}
.cbk-btn-ghost:hover:not(:disabled){background:var(--contact-hover-face);}
.cbk-btn:disabled{background:var(--disabled-face,#EDEDED); color:var(--disabled-ink,#5F5F5F); border-color:var(--disabled-line,#C4C4C4); box-shadow:none; cursor:not-allowed;}
.cbk-btn:focus-visible{outline:none;}
.cbk-btn:focus-visible::after{content:""; position:absolute; inset:var(--cta-focus-inset,-5px); border-radius:var(--cta-focus-radius,12px); outline:2px solid var(--ink,#111); box-shadow:0 0 0 4px var(--focus-ring,#FFF200); pointer-events:none;}
.cbk-foot .cbk-btn-primary{margin-left:auto;}

/* --- Phone: full-height sheet, footer always reachable ---------------------- */
@media (max-width:719px){
  .cbk-scrim{padding:0; align-items:stretch;}
  .cbk{width:100%; height:100%; border-radius:0; border-width:0; box-shadow:none;}
  .cbk-when{grid-template-columns:1fr; gap:18px;}
  .cbk-two{grid-template-columns:1fr; gap:0;}
  .cbk-two .cbk-field{margin-bottom:14px;}
  .cbk-steps{padding:10px 14px 0;}
  .cbk-step{font-size:10px; letter-spacing:.03em; gap:5px;}
  .cbk-step .n{width:18px; height:18px; font-size:10px;}
  .cbk-head, .cbk-context, .cbk-body, .cbk-foot{padding-left:14px; padding-right:14px;}
  .cbk-foot{padding-bottom:max(14px, env(safe-area-inset-bottom));}
  .cbk-foot .cbk-foot-note{order:3; flex-basis:100%;}
  .cbk-foot .cbk-btn{flex:1 1 auto;}
  .cbk-foot .cbk-btn-primary{margin-left:0;}
  .cbk-times{min-height:0;}
  .cbk-times-head{scroll-margin-top:8px;}
  .cbk-tz{margin-left:0; width:100%;}
  .cbk-tz select{flex:1;}
  .cbk-slots, .cbk-loading{grid-template-columns:repeat(auto-fill, minmax(92px,1fr));}
  /* Review + confirmation: rows stack so a long email never fights a label column. */
  .cbk-rows .rrow{flex-direction:column; gap:2px; padding:10px 12px;}
  .cbk-rows dt{flex-basis:auto; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;}
  .cbk-chosen-when{flex-basis:100%;}
  .cbk-change{margin-left:0;}
  .cbk-ctx-val{max-width:100%; white-space:normal;}
  .cbk-demo-flag{margin-left:0;}
}
/* 320px: the narrowest supported width. Day cells hold 40px by tightening the gap, not the target. */
@media (max-width:359px){
  .cbk-head h2{font-size:17px;}
  .cbk-grid, .cbk-dow{gap:2px;}
  .cbk-day{min-height:40px; font-size:13px;}
  .cbk-slots, .cbk-loading{grid-template-columns:repeat(auto-fill, minmax(84px,1fr));}
  .cbk-step .t{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);}
  .cbk-step{flex:0 0 auto; justify-content:center; position:relative;}
  .cbk-btn{padding:0 14px; font-size:13.5px;}
}

/* --- Reduced motion: self-sufficient, not reliant on any page-level reset --- */
@media (prefers-reduced-motion: reduce){
  .cbk-scrim *, .call-pop *, .bbs-contact-btn, .cbk-btn{transition:none !important; animation:none !important;}
  .cbk-loading span{background:#eee;}
  .cbk-btn-primary:active:not(:disabled), .bbs-contact-btn:active{transform:none;}
  .cbk-times-head{scroll-behavior:auto;}
}
#cbk-back[hidden] { display: none; }