/* Skin88 public booking pages — same palette and type as the Skin88 website */
[hidden]{display:none!important}
:root{--bg:#f7ede5;--bg2:#efdfd3;--ink:#3b2d27;--soft:#7b6a60;--gold:#a8803f;--gold2:#d9b872;--blush:#ecd3c8;--card:#fffaf6;--line:rgba(168,128,63,.35);--btn-ink:#fff;--bad:#a94442;--ok:#2f5a3a;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1f1815;--bg2:#2a201b;--ink:#f3e6dc;--soft:#b9a79a;--gold:#d4b06a;--gold2:#ecd29a;--blush:#4a3730;--card:#2b221d;--line:rgba(212,176,106,.35);--btn-ink:#1f1815;--bad:#e59a96;--ok:#9fd0ac;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 12% 0%,var(--blush),transparent 40%),var(--bg);color:var(--ink);font:300 16.5px/1.65 var(--font-body,'Jost',system-ui,sans-serif);min-height:100vh}
a{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}
.top{display:flex;justify-content:space-between;align-items:center;height:68px;border-bottom:1px solid var(--line)}
.logo{font:600 30px var(--font-head,'Cormorant Garamond',serif);color:var(--gold);text-decoration:none}
.top a.back{font-size:14px;color:var(--soft);text-decoration:none}
h1{font:500 clamp(40px,7vw,62px)/1.05 var(--font-head,'Cormorant Garamond',serif);margin:38px 0 6px;letter-spacing:-.01em}
h1 em{font:400 1.05em 'Pinyon Script',cursive;color:var(--gold);font-style:normal}
h2{font:500 28px/1.2 var(--font-head,'Cormorant Garamond',serif);margin:0 0 4px}
.lead{color:var(--soft);margin:0 0 30px;max-width:560px}
.step{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px;margin-bottom:18px}
.step-head{display:flex;gap:14px;align-items:baseline;margin-bottom:14px}
.step-no{font:600 26px var(--font-head,'Cormorant Garamond',serif);color:var(--gold);min-width:22px}
.step-head p{margin:0;color:var(--soft);font-size:14.5px}
.svc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.svc{position:relative;display:block;border:1px solid var(--line);border-radius:16px;padding:14px 16px;cursor:pointer;background:var(--bg);transition:border-color .15s}
.svc input{position:absolute;opacity:0;pointer-events:none}
.svc .n{display:block;font-weight:400;line-height:1.3}
.svc .p{display:block;font:600 22px var(--font-head,'Cormorant Garamond',serif);color:var(--gold);margin-top:4px}
.svc .m{display:block;font-size:13px;color:var(--soft)}
.svc:has(input:checked){border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset;background:var(--card)}
.svc:hover{border-color:var(--gold)}
.cat{font-size:13px;color:var(--soft);margin:14px 0 8px}
.cat:first-child{margin-top:0}
.days{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.day{flex:0 0 auto;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:14px;padding:8px 12px;text-align:center;cursor:pointer;font:inherit;min-width:66px}
.day b{display:block;font:600 22px/1.1 var(--font-head,'Cormorant Garamond',serif)}
.day small{font-size:12px;color:var(--soft)}
.day.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.day.on small{color:var(--bg2)}
.times{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin-top:14px}
.time{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:9px 0;font:inherit;font-size:15px;cursor:pointer}
.time.on{background:var(--gold);border-color:var(--gold);color:var(--btn-ink)}
.muted{color:var(--soft);font-size:14.5px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:620px){.grid2{grid-template-columns:1fr}}
label.f{display:block;font-size:13.5px;color:var(--soft);margin-bottom:4px}
input.i,select.i,textarea.i{width:100%;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:16px}
textarea.i{border-radius:14px;min-height:80px}
input.i:focus,select.i:focus,textarea.i:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(168,128,63,.18)}
.btn{display:inline-block;padding:14px 34px;border-radius:999px;background:var(--gold);color:var(--btn-ink);text-decoration:none;font:400 16px var(--font-body,'Jost',sans-serif);border:0;cursor:pointer;text-align:center}
.btn:hover{filter:brightness(.95)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.block{display:block;width:100%}
.summary{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:15.5px}
.summary dt{color:var(--soft)}
.summary dd{margin:0;text-align:right;font-weight:400}
.summary .big{font:600 30px var(--font-head,'Cormorant Garamond',serif);color:var(--gold)}
.policy{white-space:pre-wrap;font-size:14px;color:var(--soft);background:var(--bg);border-radius:14px;padding:14px 16px;margin:14px 0}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.check input{margin-top:5px;accent-color:var(--gold);width:18px;height:18px}
.alert{border-radius:16px;padding:14px 18px;margin:18px 0}
.alert.err{background:#f6e0dc;color:#7a2f22;border:1px solid #e3b5ab}
.alert.ok{background:#dcebdf;color:#24472e;border:1px solid #b6d3bd}
.alert.wait{background:var(--blush);color:var(--ink);border:1px solid var(--line)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .alert.err{background:#4a2723;color:#f3c9c2;border-color:#6d3a33}:root:not([data-theme="light"]) .alert.ok{background:#22382a;color:#c7e6cf;border-color:#365a41}}
.pay-opt{border:1px solid var(--line);border-radius:18px;padding:18px;margin-top:12px;background:var(--bg)}
.pay-opt h3{font:500 22px var(--font-head,'Cormorant Garamond',serif);margin:0 0 4px}
.qr{max-width:220px;width:100%;border-radius:12px;background:#fff;padding:8px;display:block;margin:10px 0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.badge{display:inline-block;border-radius:99px;padding:3px 12px;font-size:13px;background:var(--blush)}
footer{color:var(--soft);font-size:13.5px;text-align:center;padding:30px 0 50px}
.sticky-bar{position:sticky;bottom:0;padding:14px 0 calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,var(--bg) 30%)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.btn.paypal{background:#ffc439;color:#111}
.btn.paypal b{color:#003087;font-style:italic;font-weight:800}
.pm-title{font:500 22px var(--font-head,'Cormorant Garamond',serif);margin:20px 0 10px}
.pm-list{display:grid;gap:10px;margin-bottom:16px}
.pm{position:relative;display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:16px;padding:14px 16px;cursor:pointer;background:var(--bg)}
.pm input{position:absolute;opacity:0;pointer-events:none}
.pm-dot{flex:0 0 20px;height:20px;border-radius:50%;border:2px solid var(--line);margin-top:2px;background:var(--card)}
.pm .n{display:block;font-weight:400}
.pm .m{display:block;font-size:13.5px;color:var(--soft)}
.pm:hover{border-color:var(--gold)}
.pm:has(input:checked){border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset;background:var(--card)}
.pm:has(input:checked) .pm-dot{border-color:var(--gold);background:radial-gradient(circle,var(--gold) 45%,var(--card) 50%)}
.pm:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:3px}
.pm .pp{color:#003087;font-style:italic;font-weight:800}.pm .pal{color:#009cde;font-style:italic;font-weight:800}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .pm .pp{color:#8fb4ff}}
.pay-panel{border:1px dashed var(--line);border-radius:16px;padding:16px;margin-top:4px;background:var(--bg)}
.pay-panel+.pay-panel{margin-top:10px}
.check.flash{animation:flash 1.2s ease 2;border-radius:10px}
@keyframes flash{0%,100%{background:transparent}50%{background:rgba(168,128,63,.25)}}
@media(prefers-reduced-motion:reduce){.check.flash{animation:none;outline:2px solid var(--gold);outline-offset:4px}}
/* client portal */
.pnav{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.pnav a{text-decoration:none;color:var(--ink);padding:8px 12px;border-radius:999px;font-size:15px}
.pnav a.on{background:var(--gold);color:var(--btn-ink)}
.pnav a:hover:not(.on){background:var(--bg2,rgba(0,0,0,.05))}
@media(max-width:620px){.top{height:auto;flex-wrap:wrap;padding:12px 0;gap:8px}.pnav{width:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-bottom:18px}
.pgrid .step{margin-bottom:0}
.bignum{font:600 46px/1.1 var(--font-head,'Cormorant Garamond',serif);color:var(--gold);margin:4px 0}
.bar{height:8px;border-radius:99px;background:var(--bg2,rgba(0,0,0,.08));overflow:hidden;margin:14px 0 6px}
.bar i{display:block;height:100%;background:var(--gold);border-radius:99px}
.appt{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.appt:last-child{border-bottom:0}
.appt.past{opacity:.6}
.step h2{font-size:26px;margin-bottom:10px}
@media print{.top,.pnav,footer,p a{display:none!important}.step{border:0}}
/* treatment categories (dropdowns) + multi-select */
.cat-acc{border:1px solid var(--line);border-radius:16px;margin-bottom:10px;background:var(--bg);overflow:hidden}
.cat-acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;cursor:pointer;font-weight:400}
.cat-acc summary::-webkit-details-marker{display:none}
.cat-acc summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform .2s;margin-left:6px;flex:0 0 auto}
.cat-acc[open] summary::after{transform:rotate(225deg)}
.cat-acc .cat-name{font:500 21px var(--font-head,'Cormorant Garamond',serif)}
.cat-acc .cat-meta{margin-left:auto;font-size:13.5px;color:var(--soft);display:flex;gap:8px;align-items:center}
.cat-acc .cat-count{background:var(--gold);color:var(--btn-ink);border-radius:99px;padding:1px 10px;font-weight:500;font-size:12.5px}
.cat-acc .svc-list{padding:0 14px 14px}
.cat-acc[open]{background:var(--card)}
.svc-check{padding-left:46px}
.svc-check .tick{position:absolute;left:14px;top:16px;width:22px;height:22px;border-radius:7px;border:2px solid var(--line);background:var(--card);transition:.15s}
.svc-check:has(input:checked) .tick{background:var(--gold);border-color:var(--gold)}
.svc-check:has(input:checked) .tick::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid var(--btn-ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.svc-check:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.picked{margin-top:14px;border-radius:16px;background:var(--blush);padding:12px 16px}
.picked-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.picked .chip{background:var(--card);border:1px solid var(--line);border-radius:99px;padding:4px 6px 4px 12px;font-size:14px;display:inline-flex;align-items:center;gap:4px}
.picked .chip button{border:0;background:none;color:var(--soft);font-size:17px;line-height:1;cursor:pointer;padding:0 4px}
.picked-total{display:flex;justify-content:space-between;align-items:center;font-weight:400}
.link-btn{background:none;border:0;color:var(--gold);text-decoration:underline;cursor:pointer;font:inherit;font-size:14px}
/* practitioner picker + availability by practitioner */
.staff-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}
.sp{position:relative;display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:12px 14px;background:var(--bg);cursor:pointer}
.sp input{position:absolute;opacity:0;pointer-events:none}
.sp:hover{border-color:var(--gold)}
.sp:has(input:checked){border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset;background:var(--card)}
.sp:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.av{flex:0 0 42px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:500;font-size:15px;letter-spacing:.04em}
.av.any{background:var(--blush);color:var(--gold);font-size:18px}
.sp-t b{display:block;font-weight:500;line-height:1.25}
.sp-t small{display:block;color:var(--soft);font-size:13px}
.day{position:relative}
.day .cnt{display:block;font-style:normal;font-size:11px;color:var(--gold);min-height:15px;margin-top:2px}
.day.full .cnt{color:var(--soft)}
.day.on .cnt{color:var(--bg2)}
.staff-slots{border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-top:12px;background:var(--bg)}
.staff-slots.empty{opacity:.7}
.ss-head{display:flex;gap:12px;align-items:center}
.ss-head .av{flex-basis:36px;width:36px;height:36px;font-size:13px}
.ss-head b{display:block;font-weight:500}
.ss-head small{display:block;color:var(--soft);font-size:13px}
.ss-badge{margin-left:auto;background:var(--gold);color:var(--btn-ink);border-radius:99px;padding:2px 12px;font-size:12.5px;white-space:nowrap}
.ss-badge.none{background:var(--bg2,rgba(0,0,0,.08));color:var(--soft)}
.staff-slots .times{margin-top:12px}