/* Patient facing booking widget and join page */
body[data-app=widget],body[data-app=join]{display:flex;justify-content:center;padding:18px 12px calc(40px + var(--safe-b))}
.widget{width:100%;max-width:540px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px 18px;align-self:flex-start}
@media (min-width:560px){.widget{padding:28px}}
.w-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.w-client{font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.w-sub{font-size:13px;color:var(--muted);margin-top:3px;font-weight:600}
.w-logo{height:34px;width:auto;flex-shrink:0}
.w-steps{display:flex;gap:6px;margin:18px 0 22px;list-style:none}
.w-steps li{flex:1;height:4px;border-radius:99px;background:rgba(255,255,255,.1)}
.w-steps li.on{background:var(--green)}
.stitle{font-size:17px;font-weight:800;margin-bottom:4px}
.ssub{color:var(--muted);font-size:13.5px;margin-bottom:16px;line-height:1.55}
.opt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px;min-height:60px}
.opt:hover,.opt:focus-visible{border-color:var(--green)}
.opt strong{font-size:15px;display:block}
.opt .sub{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.opt .go{color:var(--green);font-weight:800;font-size:13.5px;flex-shrink:0}
.daysrow{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin:0 -2px 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.daybtn{flex-shrink:0;scroll-snap-align:start;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:9px 6px;font-size:12px;font-weight:700;text-align:center;min-width:62px;min-height:62px}
.daybtn .dd{display:block;font-size:18px;font-weight:800;margin-top:2px}
.daybtn.on{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.daybtn:disabled{opacity:.3;cursor:default}
.slotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.slot{background:var(--green-soft);color:var(--green);border:1px solid transparent;border-radius:10px;padding:11px 4px;font-weight:700;font-size:15px;min-height:46px;font-variant-numeric:tabular-nums}
.slot:hover{border-color:var(--green)}
.w-back{margin-top:14px}
.confirm{text-align:center;padding:8px 0}
.confirm .tick{width:60px;height:60px;border-radius:50%;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.confirm .tick svg{width:30px;height:30px}
.confirm h2{font-size:20px;font-weight:800;margin-bottom:8px}
.sumcard{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:16px 0;text-align:left;font-size:14px;line-height:1.85}
.sumcard strong{color:var(--green)}
.w-foot{margin-top:18px;text-align:center;font-size:12px;color:var(--dim);line-height:1.65}
.consent-text{font-size:12.5px;color:var(--dim);line-height:1.6;margin:-6px 0 12px 30px}
.w-head+#stage{margin-top:20px}
.stitle:focus,.stitle:focus-visible{outline:none}