:root{--brand:#344054;--on-brand:#fff;--ink:#172033;--accent:color-mix(in srgb,var(--brand),black 50%);--surface:#f5f7fb;--summary-surface:var(--surface);font-family:Inter,system-ui,sans-serif;color:var(--ink)}
/* Doctor Heal's configured green and the blue/green palette of its public website. */
:root[data-brand=doctor-heal]{--brand:#a8c850;--on-brand:#000;--ink:#001039;--accent:#00699c;--surface:#eff9fd;--summary-surface:#f5f9ec}
:root[data-brand=doctor-heal] main{border-top:4px solid var(--brand)}
:root[data-brand=doctor-heal] h1,:root[data-brand=doctor-heal] #clinic{color:var(--ink)}
:root[data-brand=doctor-heal] .steps{color:var(--accent)}
:root[data-brand=doctor-heal] #slots button{border-color:var(--accent);color:var(--accent)}
:root[data-brand=doctor-heal] #slots button[aria-pressed=true]{border-color:var(--brand);color:var(--on-brand)}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;background:var(--surface);padding:28px 18px}main{width:min(880px,100%);margin:auto;background:white;padding:32px;border-radius:16px;box-shadow:0 8px 30px #17203318}
h1{font-size:1.65rem;margin:6px 0 12px}h2,legend{font-size:1rem;font-weight:650;margin:0}p{color:#596275;line-height:1.5}#clinic{font-weight:650;margin:0;color:#172033}#logo{max-width:180px;max-height:80px;object-fit:contain;margin-bottom:12px}
button,input,select,a.primary{font:inherit;min-height:44px;border-radius:8px}button{cursor:pointer;border:1px solid #b8c1d1;background:#fff;padding:8px 14px;color:#172033}button:disabled{cursor:default;color:#667185}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #172033;outline-offset:3px}button[aria-pressed=true]{background:var(--brand);color:var(--on-brand)}
label{display:block;font-weight:600;font-size:.9rem}input,select{display:block;width:100%;margin-top:7px;background:white;border:1px solid #b8c1d1;padding:10px;color:#172033}
.steps{display:flex;gap:24px;padding:14px 0 14px 22px;margin:16px 0 24px;font-size:.85rem;color:#596275;flex-wrap:wrap}.preferences{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.scheduler{display:grid;grid-template-columns:minmax(300px,1fr) minmax(180px,.65fr);gap:24px;margin:28px 0}.month-nav{display:grid;grid-template-columns:44px 1fr 44px;gap:8px;align-items:center;margin-bottom:14px}.month-nav h2{text-align:center}.month-nav button{font-size:1.4rem;padding:0}.calendar-grid,.weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.weekdays{text-align:center;color:#667185;font-size:.8rem;margin-bottom:8px}.calendar-grid button{min-width:0;min-height:44px;border:0;border-radius:50%;padding:0}.calendar-grid button:not(:disabled){background:color-mix(in srgb,var(--brand),white 86%);color:#172033;font-weight:650}.calendar-grid button[aria-pressed=true]{background:var(--brand);color:var(--on-brand)}#calendar-status{min-height:24px;font-size:.85rem}#slots-retry{margin-bottom:12px}.times-panel{border-left:1px solid #e2e6ee;padding-left:24px}#time-title{line-height:1.5}#slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:8px;max-height:310px;overflow-y:auto;margin-top:16px;padding:4px;align-content:start;scrollbar-gutter:stable}
#patient{border-top:1px solid #e2e6ee;padding:22px 0}.patient-options{display:flex;gap:12px;flex-wrap:wrap}fieldset{margin:22px 0 0;padding:18px;border:1px solid #e2e6ee;border-radius:8px}legend{padding:0 6px}.primary{display:inline-block;background:var(--brand);color:var(--on-brand);border:0;padding:12px 20px;font-weight:650;text-decoration:none}.primary:disabled{opacity:.6;color:var(--on-brand)}#continue{width:100%}#summary{white-space:pre-line;background:var(--summary-surface);border-radius:8px;padding:18px;line-height:1.7;color:#172033}#summary:empty{display:none}#message{min-height:24px}#contact{display:inline-block;margin-top:14px;color:var(--accent)}#payment-panel{border-top:1px solid #e2e6ee;padding-top:22px}#payment-frame{display:block;width:100%;height:1000px;border:1px solid #e2e6ee;border-radius:8px;margin:16px 0}#payment-retry{font-size:.85rem}
@media(max-width:620px){body{padding:0;background:white}main{padding:22px 16px;border-radius:0;box-shadow:none}.scheduler,.preferences{grid-template-columns:1fr}.times-panel{border-left:0;border-top:1px solid #e2e6ee;padding:20px 0 0}.steps{gap:16px;font-size:.75rem}#payment-frame{height:1100px}}

:root[data-experience=integrated] #mode{margin:16px 0;padding:0;border:0}
:root[data-experience=integrated] #mode legend{padding:0;margin-bottom:10px}
:root[data-experience=integrated] #payment-modes{display:grid;gap:10px}
:root[data-experience=integrated] .payment-choice{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:center;border:1px solid #b8c1d1;border-radius:8px;padding:12px;cursor:pointer;min-height:64px;line-height:1.5}
:root[data-experience=integrated] .payment-choice:has(input:checked){border-color:var(--brand);background:var(--summary-surface);box-shadow:0 0 0 1px var(--brand)}
:root[data-experience=integrated] .payment-choice input{width:18px;height:18px;min-height:0;padding:0;margin:0;accent-color:var(--accent)}
:root[data-experience=integrated] .payment-choice small{display:block;font-weight:400;color:#596275}
:root[data-experience=integrated] #timezone-detail{font-size:.8rem;overflow-wrap:anywhere;margin:8px 0 0}
:root[data-experience=integrated] #summary{overflow-wrap:anywhere}
:root[data-experience=integrated] .patient-actions{display:flex;gap:12px;justify-content:space-between;margin-top:24px;flex-wrap:wrap}
:root[data-experience=integrated] #selection[data-step=patient]>.preferences,
:root[data-experience=integrated] #selection[data-step=patient]>.purchase-layout{display:none}
:root[data-experience=integrated] #patient-summary{white-space:pre-line;background:var(--summary-surface);padding:16px;border-radius:8px}
@media(min-width:1100px){
  :root[data-experience=integrated] body{padding:8px}
  :root[data-experience=integrated] main{width:min(1240px,100%);padding:14px 24px}
  :root[data-experience=integrated] header{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center}
  :root[data-experience=integrated] #logo{grid-column:1;grid-row:1/4;max-width:56px;max-height:56px;margin:0}
  :root[data-experience=integrated] header>p,:root[data-experience=integrated] header>h1{grid-column:2}
  :root[data-experience=integrated] header>p:last-child{font-size:.85rem;margin:2px 0}
  :root[data-experience=integrated] h1{font-size:1.5rem;margin:4px 0}
  :root[data-experience=integrated] .steps{padding-top:0;padding-bottom:0;margin:4px 0 8px}
  :root[data-experience=integrated] .preferences{grid-template-columns:minmax(0,440px);margin-bottom:12px}
  :root[data-experience=integrated] .purchase-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
  :root[data-experience=integrated] .scheduler{grid-template-columns:minmax(300px,1fr) minmax(170px,.65fr);margin:0;gap:20px}
  :root[data-experience=integrated] .month-nav{margin-bottom:6px}
  :root[data-experience=integrated] .calendar-grid{gap:2px}
  :root[data-experience=integrated] #calendar-status{margin:8px 0}
  :root[data-experience=integrated] #calendar-status[data-kind=availability]{position:absolute;width:1px;height:1px;min-height:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0}
  :root[data-experience=integrated] .times-panel{padding-left:16px}
  :root[data-experience=integrated] #slots{margin-top:8px;max-height:350px;grid-template-columns:1fr}
  :root[data-experience=integrated] #purchase-details{border-left:1px solid #e2e6ee;padding-left:20px;min-width:0}
  :root[data-experience=integrated] #summary{padding:12px;font-size:.85rem;line-height:1.5;margin:12px 0}
  :root[data-experience=integrated] #message{margin:12px 0 0}
  :root[data-experience=integrated] #patient{padding-top:12px}
  :root[data-experience=integrated] #patient .preferences{grid-template-columns:1fr 1fr;margin:0}
}