/* Customer-facing theme (home, booking, manage). Light, monochrome, Bai Jamjuree —
   modeled on the Wix "Solstice Detailing" template's palette and type. Loaded AFTER each
   page's own <style>, so it re-points base.css tokens and squares off the hard-coded radii.
   Admin and ops pages don't load this and keep the dark theme. */
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@300;400;500;600&display=swap');
:root{
  color-scheme:light;
  --bg:#fcfcfc;--panel:#f2f2f2;--raise:#e6e6e6;--line:#e2e2e2;--line-hi:#bdbdbd;
  --ink:#1e1e1e;--ink-2:#6c6c6c;--ink-3:#9a9a9a;
  --orange:#000;--orange-ink:#fcfcfc;--orange-dim:rgba(0,0,0,.06);   /* the accent is black now */
  --red:#c62828;--green:#2e7d32;--amber:#8d6e00;
  --sans:'Bai Jamjuree',system-ui,sans-serif;--mono:'Bai Jamjuree',system-ui,sans-serif;
  --r:0px;
}
html,body{font-weight:400}
body{font-variant-numeric:tabular-nums}
a{color:var(--ink)}
h1,h2,h3{font-weight:400;letter-spacing:normal}
h1,h2{text-transform:capitalize}
input,select,textarea{background:#fff;border-color:#cfcfcf;border-radius:0}
input:focus,select:focus,textarea:focus{border-color:var(--ink)}
.btn{border-radius:0;font-weight:400;background:transparent;border-color:var(--ink);color:var(--ink)}
.btn:hover{border-color:var(--ink);background:var(--raise)}
.btn.primary{background:#000;color:#fcfcfc;border-color:#000;font-weight:400}
.btn.primary:hover{filter:none;background:#1e1e1e}
.btn.ghost{border-color:transparent}
.toast{border-radius:0}

/* ---------- home (index.html) ---------- */
.nav{background:rgba(252,252,252,.92);border-bottom:0}
.brand{font-family:var(--sans);font-weight:500;color:var(--ink);letter-spacing:normal}
.brand small{color:var(--ink-2)}
.links a{color:var(--ink)}.links a:hover{color:var(--ink-2)}
.hero{background:linear-gradient(180deg,#ececec 0%,#f6f6f6 70%,var(--bg) 100%);padding:clamp(80px,14vw,160px) 0 clamp(64px,10vw,120px)}
.hero::before{display:none}
.hero .kicker{font-family:var(--sans);color:var(--ink-2);font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.hero h1{font-weight:400;letter-spacing:-.01em;line-height:1.02;font-size:clamp(40px,5.4vw,76px);max-width:15ch}
.hero p{color:var(--ink);font-size:18px}
.cta-row .btn.primary{padding:12px 28px;font-size:16px}
.cta-row .call b{font-family:var(--sans);font-weight:400;text-decoration:underline}
.stripe{background:var(--panel);border:0}
.stripe span::before{color:var(--ink)}
.stripe .sec-h .n::before{content:none}
section{padding:clamp(64px,9vw,112px) 0}
.sec-h .n{font-family:var(--sans);color:var(--ink-3)}
.sec-h h2{font-weight:400;letter-spacing:-.01em;line-height:1.05;font-size:clamp(32px,4.2vw,58px)}
.sec-sub{color:var(--ink-2)}
.svc{background:var(--raise);border:0;border-radius:0;padding:24px}
.svc:hover{background:#dcdcdc}
.svc h3{font-weight:500}
.svc .price{font-family:var(--sans);color:var(--ink)}
.addons span{border-radius:0;border-color:#cfcfcf}.addons span b{font-family:var(--sans)}
.step{border-top:1px solid var(--ink)}
.step .k{font-family:var(--sans);color:var(--ink-3)}
.step h3{font-weight:500}
.cmp,.single img{border-radius:0;border:0}
.cmp .tag{border-radius:0;font-family:var(--sans);color:#fcfcfc}
.cmp .knob{box-shadow:0 2px 10px rgba(0,0,0,.25)}
.rev{background:var(--raise);border:0;border-radius:0;padding:24px}
.rev p{font-size:17px;line-height:1.5}
details.faq summary::after{font-family:var(--sans)}
.pol b{color:var(--ink)}
.foot-cta{background:var(--panel);border:0}
.foot-cta h2{font-weight:400;font-size:clamp(32px,4.2vw,58px)}
footer{border-top:1px solid var(--line);color:var(--ink-2)}
.hours{font-family:var(--sans)}
@media(max-width:640px){.sticky-book .btn{box-shadow:0 6px 24px rgba(0,0,0,.18)}}

/* ---------- booking (book.html) + manage (manage.html) ---------- */
.mark{font-family:var(--sans);color:var(--ink-2);letter-spacing:.06em;text-transform:uppercase}
.step h2 .pick{font-weight:500}
.svc.on,.day.on{border:1px solid #000;background:var(--orange-dim)}
.day,.slot{border-radius:0}
.day b,.slot,.done dd,dd,.total b,.done .big,.svc .price,.addon .price{font-family:var(--sans)}
.done .big,.total b{color:var(--ink)}
.done .card,.card,.addon,.policy,#map{border-radius:0}
.addon.on{border-color:#000}
.leaflet-bar a{background:#fff;color:var(--ink)}
.step h2{text-transform:none}
