/* ============================================================================
   RevLimit Auto — CERAMIC COATING experience styles
   Additive stylesheet. Loads AFTER site.css and reuses its REDLINE tokens
   (--black/--panel/--card/--red/--ink/--fog/--mono etc.) verbatim, so the
   ceramic pages read as the same product. Prefixes:
     .cc-*  ceramic sales/feature content
     .bk-*  ceramic booking flow
   Restraint over novelty: deep charcoal, thin lines, generous spacing, ONE
   red accent, mono for every price. Mobile-first; respects reduced-motion.
   No live calendar / Stripe — booking is a visual, integration-ready shell.
   ============================================================================ */

/* ============================ EDITORIAL FEATURE =============================
   Used on the Detailing page: one premium "feature" band that introduces
   ceramic coating and sends interested customers to /ceramic-coating. */
.cc-feature{background:var(--black);border-top:1px solid var(--line-soft);overflow:hidden}
.cc-feature .wrap{padding-top:0;padding-bottom:0}
.cc-feature-grid{
  display:grid;grid-template-columns:1fr;gap:0;align-items:stretch;
  border:1px solid var(--line);border-radius:var(--r-hero);overflow:hidden;
  background:var(--hero-grad);box-shadow:var(--shadow-ambient);margin:44px 0}
.cc-feature-media{position:relative;min-height:300px}
.cc-feature-media img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block}
.cc-feature-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.15) 0%,rgba(10,10,10,.55) 100%)}
.cc-feature-body{padding:30px 26px 34px;display:flex;flex-direction:column;gap:16px;justify-content:center}
.cc-feature-body h2{font-size:26px;font-weight:800;letter-spacing:-.6px;line-height:1.1}
.cc-feature-body .lead{color:var(--muted);font-size:15.5px}
.cc-feature-points{display:flex;flex-direction:column;gap:11px;margin:2px 0 4px}
.cc-feature-points li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--text)}
.cc-feature-points svg{width:18px;height:18px;flex:0 0 auto;color:var(--red-text);margin-top:1px}
.cc-feature-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.cc-feature-link{font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:1px;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid transparent;padding-bottom:2px}
.cc-feature-link:hover{color:var(--white);border-color:var(--red)}

/* Slim "specialist services" strip (keeps Wheel/Rim + PPF present without a
   sparse card grid). Understated — not a second funnel. */
.cc-specialist{display:grid;grid-template-columns:1fr;gap:14px;margin-top:22px}
.cc-spec-card{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:18px 20px}
.cc-spec-card .k{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--white)}
.cc-spec-card .d{font-size:13px;color:var(--muted);margin-top:3px;max-width:46ch}
.cc-spec-card .v{font-family:var(--font-mono);font-size:12px;color:var(--muted);white-space:nowrap}
.cc-spec-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}

/* ================================ CC HERO ================================== */
.cc-hero{position:relative;background:var(--black);overflow:hidden;border-top:0}
.cc-hero-grid{display:grid;grid-template-columns:1fr;gap:0;align-items:center}
.cc-hero-copy{padding:54px 0 30px;display:flex;flex-direction:column;gap:18px;max-width:560px}
.cc-hero-copy h1{font-size:38px;font-weight:900;letter-spacing:-1px;line-height:1.04}
.cc-hero-copy h1 .accent{color:var(--red-text)}
.cc-hero-sub{color:var(--muted);font-size:17px;line-height:1.55;max-width:48ch}
.cc-hero-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px}
.cc-hero-quiet{font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:1px;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid transparent;padding-bottom:2px}
.cc-hero-quiet:hover{color:var(--white);border-color:var(--red)}
.cc-hero-media{position:relative;min-height:300px;border-radius:var(--r-hero);overflow:hidden;
  margin:0 0 30px;border:1px solid var(--line)}
.cc-hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
.cc-hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(10,10,10,.45),transparent 55%)}

/* ============================ TRUST / BENEFIT STRIP ======================== */
.cc-strip{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cc-strip-row{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line)}
.cc-strip-item{background:var(--panel);padding:20px 18px;display:flex;gap:13px;align-items:flex-start}
.cc-strip-item svg{width:22px;height:22px;flex:0 0 auto;color:var(--red-text);margin-top:1px}
.cc-strip-item .t{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--white);line-height:1.25}
.cc-strip-item .s{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45}

/* ============================ OUTCOME / EXPLAIN ============================ */
.cc-split{display:grid;grid-template-columns:1fr;gap:30px;align-items:center}
.cc-split-media{border-radius:var(--r-hero);overflow:hidden;border:1px solid var(--line);position:relative}
.cc-split-media img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/5}
.cc-split-copy h2{font-size:26px;font-weight:800;letter-spacing:-.5px}
.cc-split-copy .lead{margin-top:12px}
.cc-points{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.cc-points li{display:flex;gap:12px;align-items:flex-start}
.cc-points svg{width:20px;height:20px;flex:0 0 auto;color:var(--red-text);margin-top:2px}
.cc-points .pt-t{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--white)}
.cc-points .pt-s{font-size:13.5px;color:var(--muted);margin-top:2px;line-height:1.5}
.cc-imgnote{font-size:11px;color:var(--muted-2);margin-top:12px;font-style:italic}

/* ============================ PACKAGE COMPARISON ========================== */
.cc-packages{display:grid;grid-template-columns:1fr;gap:18px;align-items:stretch}
.cc-pkg{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);padding:26px 24px;transition:border-color .18s,transform .18s,box-shadow .18s}
.cc-pkg:hover{border-color:var(--line-premium);transform:translateY(-3px);box-shadow:var(--shadow-ambient)}
.cc-pkg-name{font-family:var(--font-head);font-weight:800;font-size:21px;color:var(--white);letter-spacing:-.3px}
.cc-pkg-tier{font-size:12px;color:var(--muted);letter-spacing:.4px;margin-top:4px;
  text-transform:uppercase;font-family:var(--font-head);font-weight:600}
.cc-pkg-price{display:flex;align-items:baseline;gap:7px;margin:20px 0 6px;
  padding-top:18px;border-top:1px solid var(--line)}
.cc-pkg-price .from{font-family:var(--font-mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.cc-pkg-price .amt{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:30px;font-weight:700;color:var(--white);letter-spacing:-.5px}
.cc-pkg-desc{font-size:14px;color:var(--muted);line-height:1.55;margin-bottom:18px}
.cc-pkg-incl{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.cc-pkg-incl li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--text)}
.cc-pkg-incl svg{width:16px;height:16px;flex:0 0 auto;color:var(--red-text);margin-top:2px}
.cc-pkg-incl .placeholder{color:var(--muted-2);font-style:italic}
.cc-pkg-cta{margin-top:auto}
/* When booking is live the CTA label ("Book Now — Pay $50 Booking Fee") is long; on the narrow
   3-column package cards it exceeds the single-line button width and used to spill OUTSIDE the button
   box. Let it wrap onto two centred lines and grow, instead of overflowing. Scoped to ceramic CTAs. */
.btn[data-cc-cta]{white-space:normal;line-height:1.2;height:auto;min-height:44px}
/* a single, restrained emphasis option (NOT auto-applied — needs approval) */
.cc-pkg--emphasis{border-color:var(--red);box-shadow:0 0 0 1px var(--red) inset,var(--shadow-ambient)}

/* wheel/rim add-on row */
.cc-addon{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:var(--recessed);border:1px dashed var(--line-premium);border-radius:var(--r-card);
  padding:20px 22px;margin-top:18px}
.cc-addon .k{font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--white)}
.cc-addon .d{font-size:13px;color:var(--muted);margin-top:3px;max-width:52ch}
.cc-addon .v{font-family:var(--font-mono);font-size:13px;color:var(--muted)}

/* ============================ HOW BOOKING WORKS =========================== */
.cc-how{display:grid;grid-template-columns:1fr;gap:16px;counter-reset:howstep}
.cc-how-step{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);padding:24px 22px 22px}
.cc-how-step::before{counter-increment:howstep;content:counter(howstep);
  font-family:var(--font-mono);font-weight:700;font-size:13px;color:var(--red-text);
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:1px solid var(--red);border-radius:50%;margin-bottom:14px}
.cc-how-step h3{font-size:16px;font-weight:700;color:var(--white)}
.cc-how-step p{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.5}

/* ============================ REASSURANCE ================================= */
.cc-reassure{display:grid;grid-template-columns:1fr;gap:14px}
.cc-reassure-item{display:flex;gap:12px;align-items:flex-start;padding:4px 0}
.cc-reassure-item svg{width:19px;height:19px;flex:0 0 auto;color:var(--green);margin-top:2px}
.cc-reassure-item .t{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--white)}
.cc-reassure-item .s{font-size:13px;color:var(--muted);margin-top:2px}

/* small "not yet connected" note used near integration points */
.cc-pending{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);
  font-size:11.5px;color:var(--amber);background:rgba(216,162,58,.08);
  border:1px solid rgba(216,162,58,.3);border-radius:8px;padding:8px 12px;line-height:1.3}
.cc-pending svg{width:14px;height:14px;flex:0 0 auto}

/* =========================================================================== */
/* ============================ BOOKING SHELL ================================ */
/* =========================================================================== */
.bk-body{background:var(--black);min-height:100vh}

/* simplified checkout header */
.bk-header{position:sticky;top:0;z-index:60;background:rgba(10,10,10,.94);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bk-header-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;height:62px}
.bk-header .logo-chip{background:#fff;padding:6px 10px;border-radius:6px;height:34px;display:inline-flex;align-items:center}
.bk-header .logo-chip img{height:20px;width:auto}
.bk-secure{display:flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;
  font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.bk-secure svg{width:15px;height:15px;color:var(--green)}
.bk-header-right{display:flex;align-items:center;gap:18px}
.bk-back{font-size:12px;color:var(--muted)}
.bk-back:hover{color:var(--white)}
.bk-support{font-size:12px;color:var(--muted);display:none}
.bk-support a{color:var(--red-text)}

/* progress */
.bk-progress{display:flex;gap:6px;padding:18px 0 4px}
.bk-progress-step{flex:1;display:flex;flex-direction:column;gap:8px}
.bk-progress-bar{height:3px;border-radius:3px;background:var(--line)}
.bk-progress-step.is-active .bk-progress-bar,
.bk-progress-step.is-done .bk-progress-bar{background:var(--red)}
.bk-progress-label{font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--muted-2)}
.bk-progress-step.is-active .bk-progress-label{color:var(--white)}
.bk-progress-step.is-done .bk-progress-label{color:var(--muted)}

/* layout: content + sticky summary */
.bk-layout{display:grid;grid-template-columns:1fr;gap:26px;padding:26px 0 120px;align-items:start}
.bk-layout[hidden]{display:none}   /* ensure the flow truly hides on the confirmation screen */
.bk-main{min-width:0}
.bk-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:26px 24px;margin-bottom:18px}
.bk-panel h2{font-size:20px;font-weight:800;letter-spacing:-.4px}
.bk-panel .bk-panel-sub{color:var(--muted);font-size:14px;margin-top:6px}
.bk-step{display:none}
.bk-step.is-active{display:block;animation:bkfade .25s ease both}
@keyframes bkfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* selected-package block */
.bk-pkg{display:flex;flex-direction:column;gap:6px}
.bk-pkg-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.bk-pkg-name{font-family:var(--font-head);font-weight:800;font-size:20px;color:var(--white)}
.bk-pkg-tier{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:3px}
.bk-pkg-price{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:24px;
  font-weight:700;color:var(--white);white-space:nowrap}
.bk-pkg-price .from{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;text-align:right}
.bk-pkg-incl{display:flex;flex-direction:column;gap:9px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.bk-pkg-incl li{display:flex;gap:10px;font-size:13.5px;color:var(--text)}
.bk-pkg-incl svg{width:16px;height:16px;flex:0 0 auto;color:var(--red-text);margin-top:2px}
.bk-change{align-self:flex-start;margin-top:16px;font-family:var(--font-head);font-weight:700;
  font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);
  background:none;border:0;border-bottom:1px solid transparent;padding:0 0 2px;cursor:pointer}
.bk-change:hover{color:var(--white);border-color:var(--red)}

/* package selector (shown when no/invalid param) */
.bk-selector{display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px}
.bk-select-card{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--recessed);border:1px solid var(--line);border-radius:var(--r-card);
  padding:16px 18px;cursor:pointer;text-align:left;width:100%;transition:border-color .15s}
.bk-select-card:hover{border-color:var(--red)}
.bk-select-card .n{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--white)}
.bk-select-card .p{font-family:var(--font-mono);font-size:14px;color:var(--muted)}

/* date & time placeholder */
.bk-dates{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}
.bk-date{display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 8px;
  background:var(--recessed);border:1px solid var(--line);border-radius:11px;min-height:64px;
  cursor:not-allowed;opacity:.6}
.bk-date .dow{font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted-2)}
.bk-date .dnum{font-family:var(--font-mono);font-size:19px;font-weight:700;color:var(--muted)}
.bk-date .dmon{font-size:10px;color:var(--muted-2);text-transform:uppercase}
.bk-times{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.bk-time{padding:13px 8px;text-align:center;font-family:var(--font-mono);font-size:14px;
  background:var(--recessed);border:1px solid var(--line);border-radius:10px;color:var(--muted);
  min-height:44px;cursor:not-allowed;opacity:.55}
.bk-tz{font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-top:14px;display:flex;gap:7px;align-items:center}

/* live, interactive slot picker (buttons) — only the LIVE date/time controls are
   <button>s, so these override the not-allowed placeholder styling above. */
[data-cal-dates]{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;margin-top:16px}
[data-cal-dates] button.bk-date{flex:0 0 72px;width:72px}
[data-cal-times]{margin-top:14px}
button.bk-date,button.bk-time{cursor:pointer;opacity:1;font:inherit;width:100%;transition:border-color .15s ease,background .15s ease,color .15s ease}
button.bk-time{color:var(--white)}
button.bk-date:hover,button.bk-time:hover{border-color:var(--red)}
button.bk-date:focus-visible,button.bk-time:focus-visible{outline:2px solid var(--red);outline-offset:2px}
button.bk-date.is-active{border-color:var(--red);background:rgba(200,16,46,.10)}
button.bk-date.is-active .dnum,button.bk-date.is-active .dow,button.bk-date.is-active .dmon{color:var(--white)}
button.bk-time.is-active{border-color:var(--red);background:rgba(200,16,46,.14);color:#fff}
.bk-times-wrap{margin-top:14px}

/* details form */
.bk-form-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:16px}
.bk-field{display:flex;flex-direction:column;gap:7px}
.bk-field.bk-field--full{grid-column:1/-1}
.bk-field label{font-family:var(--font-head);font-weight:600;font-size:12.5px;color:var(--text);letter-spacing:.2px}
.bk-field label .req{color:var(--red-text)}
.bk-field .opt{color:var(--muted-2);font-weight:400;font-size:11px}
.bk-field input,.bk-field select,.bk-field textarea{
  font-family:var(--font-body);font-size:15px;color:var(--white);background:var(--recessed);
  border:1px solid var(--line);border-radius:var(--r-input);padding:13px 14px;width:100%;min-height:48px;transition:border-color .15s}
.bk-field textarea{min-height:90px;resize:vertical}
.bk-field input::placeholder,.bk-field textarea::placeholder{color:var(--muted-2)}
.bk-field input:focus,.bk-field select:focus,.bk-field textarea:focus{outline:none;border-color:var(--red)}
.bk-field input:invalid:not(:placeholder-shown){border-color:var(--red-dark)}
.bk-field-err{color:var(--red-text);font-size:12px;display:none}
.bk-field.is-invalid .bk-field-err{display:block}
.bk-field.is-invalid input,.bk-field.is-invalid select{border-color:var(--red-dark)}

/* step nav buttons */
.bk-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.bk-nav .btn{min-width:120px}

/* order summary (right rail on desktop) */
.bk-summary{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:22px 22px;position:sticky;top:84px}
/* the right-rail summary is desktop-only; on mobile the sticky bottom bar + the
   in-panel payment summary cover it (avoids showing the summary twice). */
.bk-layout > .bk-summary{display:none}
.bk-summary h3{font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.bk-sum-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.bk-sum-row .k{color:var(--muted)}
.bk-sum-row .v{color:var(--white);font-weight:600;text-align:right}
.bk-sum-row .v.mono{font-family:var(--font-mono)}
.bk-sum-row .v.pending{color:var(--muted-2);font-weight:400;font-style:italic}
.bk-sum-total{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.bk-sum-total .k{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--white)}
.bk-sum-total .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:24px;font-weight:700;color:var(--white)}
.bk-sum-due{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-top:6px;text-align:right}
.bk-pay-note{font-size:12px;color:var(--muted);margin-top:16px;line-height:1.5}
.bk-pay-cta{margin-top:16px}

/* mobile sticky summary bar */
.bk-mbar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(17,17,17,.97);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--line);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:14px}
.bk-mbar .mb-k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.bk-mbar .mb-v{font-family:var(--font-mono);font-weight:700;font-size:17px;color:var(--white)}
.bk-mbar .btn{flex:0 0 auto}

/* provisional (pending-partner-confirmation) vehicle-condition block */
.bk-provisional{margin-top:18px;padding:18px;border:1px dashed var(--line-premium);border-radius:var(--r-card);background:var(--recessed)}
.bk-prov-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:12px}
.bk-prov-tag{font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.bk-prov-note{font-size:12px;color:var(--muted-2)}

/* review summary */
.bk-review{margin-top:8px;display:flex;flex-direction:column;gap:18px}
.bk-rev-group h3{font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.bk-rev-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.bk-rev-row .k{color:var(--muted)}
.bk-rev-row .v{color:var(--white);font-weight:600;text-align:right;word-break:break-word}
.bk-rev-grouphead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.bk-rev-grouphead h3{margin:0}
.bk-rev-edit{background:none;border:0;color:var(--red-text);font-family:var(--font-head);font-weight:700;
  font-size:11px;letter-spacing:.6px;text-transform:uppercase;cursor:pointer;border-bottom:1px solid transparent;padding:0 0 1px}
.bk-rev-edit:hover{border-color:var(--red)}
.bk-submit-err{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px 14px;border-radius:10px;
  background:var(--red-soft);border:1px solid rgba(200,16,46,.4);font-size:13px;color:var(--text);line-height:1.45}
.bk-submit-err svg{width:18px;height:18px;flex:0 0 auto;color:var(--red-text);margin-top:1px}
.bk-submit-err a{color:var(--red-text);font-weight:600}
.bk-submit-err[hidden]{display:none}

/* calendar shell (Date & Time stage) */
.bk-cal{margin-top:14px}
.bk-cal-msg{display:flex;align-items:center;gap:10px;justify-content:center;text-align:center;
  padding:26px 18px;background:var(--recessed);border:1px solid var(--line);border-radius:var(--r-card);color:var(--muted);font-size:14px;margin-top:14px}
.bk-cal-msg--err{color:var(--red-text);border-color:rgba(200,16,46,.35)}
.bk-cal-msg a{color:var(--red-text);font-weight:600}
/* CRITICAL: these are flex/grid, so the `hidden` attribute (UA display:none) is overridden and the
   availability states would ALL show at once. Restore hidden so only ONE state is ever visible
   (matches the .bk-layout[hidden]/.bk-day[hidden]/etc. guards used elsewhere in this file). */
.bk-cal-msg[hidden],.bk-times[hidden],.bk-cal-view[hidden]{display:none}
/* the AWST timezone note's clock icon has no intrinsic cap and rendered ~276px; keep it inline-small */
.bk-tz svg{width:14px;height:14px;flex:0 0 auto}
.bk-spinner{width:16px;height:16px;border:2px solid var(--line-premium);border-top-color:var(--red);border-radius:50%;animation:bkspin .7s linear infinite;flex:0 0 auto}
@keyframes bkspin{to{transform:rotate(360deg)}}

/* payment summary (Review & Payment stage) */
.bk-pay-summary{margin-top:18px;background:var(--recessed);border:1px solid var(--line);border-radius:var(--r-card);padding:6px 18px}
.bk-pay-summary .bk-sum-row:last-child{border-bottom:0}

/* booking-fee terms (Review & Payment stage) — the real $50 commercial terms (incl. ACL) */
.bk-fee-terms{margin-top:16px;background:var(--recessed);border:1px solid var(--line);border-radius:var(--r-card);padding:16px 18px}
.bk-fee-terms h3{font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.bk-fee-terms ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px}
.bk-fee-terms li{font-size:13px;color:var(--text);line-height:1.5}
.bk-fee-terms strong{color:var(--white)}

/* "what to expect on the day" details (success state) */
.bk-day{text-align:left;margin:18px auto 4px;max-width:48ch;background:var(--recessed);border:1px solid var(--line);border-radius:var(--r-card);padding:16px 18px}
.bk-day[hidden]{display:none}
.bk-day-h{font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.bk-day ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px}
.bk-day li{font-size:13.5px;color:var(--text);line-height:1.55}
.bk-day strong{color:var(--white)}

/* outcome state panel (success / failure) */
.bk-state{padding:40px 0 120px;display:flex;justify-content:center}
.bk-state[hidden]{display:none}
.bk-state-card{max-width:560px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:44px 32px}
.bk-state-ic{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;margin-bottom:16px;
  background:rgba(95,208,138,.1);border:1px solid rgba(95,208,138,.4);color:var(--green)}
.bk-state-ic svg{width:32px;height:32px}
.bk-state[data-tone="err"] .bk-state-ic{background:var(--red-soft);border-color:rgba(200,16,46,.4);color:var(--red-text)}
.bk-state[data-tone="warn"] .bk-state-ic{background:rgba(216,162,58,.1);border-color:rgba(216,162,58,.4);color:var(--amber)}
.bk-state-tag{display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--amber);background:rgba(216,162,58,.1);border:1px solid rgba(216,162,58,.35);border-radius:6px;padding:4px 9px;margin-bottom:12px}
.bk-state-card h2{font-size:24px;font-weight:800}
.bk-state-card p{color:var(--muted);font-size:15px;line-height:1.6;margin:12px auto 8px;max-width:48ch}

/* "what happens next" note (amber, honest expectation-setting) */
.bk-next-note{display:flex;gap:11px;align-items:flex-start;margin-top:18px;padding:14px 16px;border-radius:11px;
  background:rgba(216,162,58,.08);border:1px solid rgba(216,162,58,.28);font-size:13px;color:var(--text);line-height:1.5}
.bk-next-note svg{width:18px;height:18px;flex:0 0 auto;color:var(--amber);margin-top:1px}
.bk-next-note strong{color:var(--white)}

/* summary-rail reassurance note */
.bk-sum-note{display:flex;gap:9px;align-items:flex-start;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);line-height:1.45}
.bk-sum-note svg{width:16px;height:16px;flex:0 0 auto;color:var(--green);margin-top:1px}

/* confirmation panel (post-submit) */
.bk-confirm{padding:40px 0 120px;display:flex;justify-content:center}
.bk-confirm[hidden]{display:none}   /* hidden until the request is submitted */
.bk-confirm-card{max-width:560px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:44px 32px}
.bk-confirm-ic{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:rgba(95,208,138,.1);border:1px solid rgba(95,208,138,.4);color:var(--green);margin-bottom:18px}
.bk-confirm-ic svg{width:32px;height:32px}
.bk-confirm-card h2{font-size:24px;font-weight:800}
.bk-confirm-card p{color:var(--muted);font-size:15px;line-height:1.6;margin:12px auto 8px;max-width:46ch}

/* ============================ RESPONSIVE ================================== */
@media (min-width:760px){
  .cc-strip-row{grid-template-columns:repeat(2,1fr)}
  .cc-how{grid-template-columns:repeat(3,1fr)}
  .cc-reassure{grid-template-columns:repeat(2,1fr)}
  .cc-packages{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cc-specialist{grid-template-columns:repeat(2,1fr)}
  .bk-dates{grid-template-columns:repeat(4,1fr)}
  .bk-times{grid-template-columns:repeat(4,1fr)}
  .bk-form-grid{grid-template-columns:repeat(2,1fr)}
  .bk-support{display:block}
}
@media (min-width:900px){
  .cc-packages{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cc-feature-grid{grid-template-columns:1.05fr 1fr}
  .cc-feature-media{min-height:auto}
  .cc-hero-grid{grid-template-columns:1.05fr .95fr;gap:46px}
  .cc-hero-copy{padding:84px 0}
  .cc-hero-media{margin:0;min-height:460px}
  .cc-hero-copy h1{font-size:46px}
  .cc-split{grid-template-columns:1fr 1fr;gap:44px}
  .cc-strip-row{grid-template-columns:repeat(4,1fr)}
  .cc-layout-narrow{max-width:1180px}
  .bk-layout{grid-template-columns:1fr 360px;gap:34px}
  .bk-layout > .bk-summary{display:block}
  .bk-mbar{display:none}
  .bk-progress{padding-top:24px}
}
@media (min-width:900px){
  /* image-left variant for alternating splits */
  .cc-split--rev .cc-split-media{order:2}
}

@media (prefers-reduced-motion:reduce){
  .cc-pkg:hover{transform:none}
  .bk-step.is-active{animation:none}
}