*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --blue:#2B5CAE;--blue-dark:#1A2744;--blue-mid:#3a6ec2;
  --blue-light:#EBF0FA;--blue-xlight:#F4F7FD;
  --pink:#E84C88;--pink-light:#FDF0F5;--pink-mid:#d43f79;
  --bg:#F1F4F9;--white:#fff;
  --border:#DDE3EE;--border-strong:#C4CFDF;
  --text:#1A2744;--muted:#6B7A99;--muted-lt:#9AAAC0;
  --warn-bg:#FFFBEC;--warn-border:#F0D98A;--warn-text:#6B4C00;
  --r-sm:8px;--r-md:12px;--r-lg:16px;
  --shadow:0 1px 3px rgba(26,39,68,.06),0 4px 14px rgba(26,39,68,.05);
}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:'Roboto',sans-serif;background:var(--bg);color:var(--text);min-height:100vh}

/* ─── LAYOUT ─── */
.page{max-width:640px;margin:0 auto;padding:1.25rem 1rem 3rem}

/* ─── PROGRESS ─── */
.progress-wrap{margin-bottom:2rem;display:flex;justify-content:center}
.progress-steps{display:flex;align-items:center;gap:8px;padding:4px 0}
.p-step{width:8px;height:8px;border-radius:99px;background:var(--border-strong);border:none;padding:0;cursor:default;flex-shrink:0;opacity:.4;transition:width 400ms cubic-bezier(.34,1.56,.64,1),background-color 320ms ease,opacity 280ms ease,transform 360ms cubic-bezier(.34,1.56,.64,1);outline:none;display:block;-webkit-appearance:none;appearance:none}
.p-step:focus-visible{box-shadow:0 0 0 3px rgba(43,92,174,.3);opacity:1;border-radius:99px}
.p-step.done{background:#183866;opacity:1;cursor:pointer}
.p-step.done:hover{background:#234d8a;transform:scale(1.4)}
.p-step.active{width:28px;height:6px;background:#EB4A99;opacity:1;cursor:default;transform:scale(1)}

/* ─── STEPS ─── */
.step{display:none}
.step.active{display:block;animation:si .28s ease both}
@keyframes si{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}

/* ─── CARD ─── */
.card{position:relative;background:var(--white);border-radius:var(--r-lg);border:1px solid var(--border);box-shadow:var(--shadow);padding:2rem;margin-bottom:1.5rem}
#step0 .card{padding-bottom:2rem}

/* ─── Hero status pill ─── */
.hero-status{display:flex;align-items:center;gap:7px;margin-bottom:1rem;font-size:12px;font-weight:600;color:var(--text)}
.hero-dot{width:9px;height:9px;border-radius:50%;background:#F5A623;flex-shrink:0;transition:background .3s}
.hero-dot.open{background:#4FD9A8}

.card-title{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:700;color:#183866;margin-bottom:6px;letter-spacing:-.3px}
.card-sub{font-size:13.5px;color:var(--muted);line-height:1.65;margin-bottom:2rem}
.sec-label{font-size:11px;font-weight:700;color:var(--muted);margin:1.75rem 0 12px}
.sec-label.mt0{margin-top:0}
.divider{height:1px;background:var(--border);margin:1.75rem 0}

/* ─── LOCATION ─── */
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.loc-btn{border:1.5px solid var(--border);border-radius:var(--r-md);padding:1.25rem 1rem;cursor:pointer;background:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:border-color .2s;font-family:'Roboto',sans-serif;width:100%;min-height:110px;text-align:center}
.loc-btn:hover{border-color:var(--blue)}
.loc-btn.selected{border-color:var(--blue);background:var(--blue-xlight)}
.loc-icon{width:40px;height:40px;border-radius:50%;background:var(--blue-xlight);display:flex;align-items:center;justify-content:center;transition:background .2s;flex-shrink:0}
.loc-icon svg{width:19px;height:19px;stroke:var(--blue-dark);fill:none;stroke-width:1.75;stroke-linecap:round;transition:stroke .2s}
.loc-btn.selected .loc-icon{background:var(--blue)}
.loc-btn.selected .loc-icon svg{stroke:white}
.loc-name{font-size:14px;font-weight:700;color:var(--text)}
.loc-btn.selected .loc-name{color:var(--blue)}
.loc-state{font-size:11px;color:var(--muted)}

/* ─── SYMPTOM CLUSTERS (Step 1) ─── */
.symptom-clusters{display:flex;flex-direction:column;gap:1.25rem}
.sym-cluster-hd{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--blue-dark);letter-spacing:.3px;text-transform:uppercase;margin-bottom:6px}
.sym-cluster-icon{width:16px;height:16px;flex-shrink:0;color:var(--blue-dark)}
.sym-cluster .sym-item{font-size:13px;color:var(--text);line-height:1.55;padding:4px 0;border:none}
.card-title-icon{width:17px;height:17px;flex-shrink:0;stroke:var(--blue-dark);fill:none;stroke-width:1.5;stroke-linecap:round}

/* ─── CHECKBOX ROW - neutral only ─── */
.cb-row{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:var(--r-md);border:1.5px solid var(--border);background:var(--white);cursor:pointer;transition:border-color .2s;user-select:none}
.cb-row:hover{border-color:var(--blue)}
.cb-row.checked{border-color:var(--blue);background:var(--blue-xlight)}
.cb-box{width:20px;height:20px;border-radius:5px;border:2px solid var(--border-strong);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s;background:var(--white)}
.cb-row.checked .cb-box{background:var(--blue);border-color:var(--blue)}
.cb-box svg{width:11px;height:11px;stroke:white;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .15s}
.cb-row.checked .cb-box svg{opacity:1}
.cb-text{font-size:13px;color:var(--text);font-weight:500;line-height:1.45}

/* ─── DATE / TIME ─── */
.date-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.date-chip{padding:9px 4px;border-radius:var(--r-sm);border:1.5px solid var(--border);text-align:center;cursor:pointer;background:var(--white);transition:border-color .2s;font-family:'Roboto',sans-serif}
.date-chip:hover{border-color:var(--blue)}
.date-chip.selected{border-color:var(--blue);background:var(--blue-xlight)}
.dc-day{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.dc-num{font-size:19px;font-weight:700;color:var(--text);line-height:1.2}
.date-chip.selected .dc-num{color:var(--blue)}
.dc-mon{font-size:10px;color:var(--muted)}

.time-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:.75rem}
.time-chip{padding:10px 5px;border-radius:var(--r-sm);border:1.5px solid var(--border);text-align:center;cursor:pointer;font-size:12px;font-weight:500;color:var(--text);background:var(--white);transition:border-color .2s;font-family:'Roboto',sans-serif}
.time-chip:hover:not(.unavail){border-color:var(--blue)}
.time-chip.selected{border-color:var(--blue);background:var(--blue-xlight);color:var(--blue)}
.time-chip.unavail{opacity:.32;cursor:not-allowed;color:var(--muted)}
.unavail-tag{display:block;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;margin-top:2px}

/* ─── 30-MIN SLOTS ─── */
.pref-time-section{margin-top:1.25rem}
.pref-label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pref-note{font-size:11px;color:var(--muted-lt);font-style:italic}
.slots-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.slot-chip{padding:8px 4px;border-radius:var(--r-sm);border:1.5px solid var(--border);text-align:center;cursor:pointer;font-size:12px;font-weight:500;color:var(--text);background:var(--white);transition:border-color .2s;font-family:'Roboto',sans-serif}
.slot-chip:hover{border-color:var(--blue)}
.slot-chip.selected{border-color:var(--blue);background:var(--blue-xlight);color:var(--blue)}
.slot-chip.skip{font-style:italic;color:var(--muted)}

/* ─── RUSH FEE ─── */
.rush-row{display:flex;align-items:center;gap:13px;padding:13px 15px;margin-top:10px;border-radius:var(--r-md);border:1.5px solid var(--border);background:var(--white);cursor:pointer;transition:border-color .2s;user-select:none}
.rush-row.on{border-color:var(--blue);background:var(--blue-xlight)}
.rush-cb{width:20px;height:20px;border-radius:5px;border:2px solid var(--border-strong);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s;background:var(--white)}
.rush-row.on .rush-cb{background:var(--blue);border-color:var(--blue)}
.rush-cb svg{width:11px;height:11px;stroke:white;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .15s}
.rush-row.on .rush-cb svg{opacity:1}
.rush-body{flex:1}
.rush-name{font-size:13px;font-weight:600;color:var(--text)}
.rush-desc{font-size:12px;color:var(--muted);margin-top:1px}
.rush-price{font-size:14px;font-weight:700;color:var(--blue);white-space:nowrap}

.info-note{margin-top:1rem;padding:11px 13px;border-radius:var(--r-sm);background:var(--blue-xlight);border:1px solid #D0DCF0;font-size:12px;color:#2a4a8a;line-height:1.65;display:flex;gap:10px;align-items:flex-start}
.info-note svg{width:13px;height:13px;flex-shrink:0;margin-top:1px;stroke:#2a4a8a;fill:none;stroke-width:1.5;stroke-linecap:round}

/* ─── PORTAL BANNER ─── */
.portal-banner{display:flex;gap:12px;padding:12px 14px;border-radius:var(--r-md);background:#FFF7ED;border:1px solid #FDDCAB;margin-bottom:1.5rem}
.portal-icon{width:30px;height:30px;border-radius:7px;background:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.portal-icon svg{width:14px;height:14px;stroke:white;fill:none;stroke-width:1.75;stroke-linecap:round}
.portal-text{font-size:12px;color:var(--blue-dark);line-height:1.65}
.portal-text strong{font-weight:600}

/* ─── FORM ─── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.span2{grid-column:span 2}
.fg{display:flex;flex-direction:column;gap:8px}
.fg label{font-size:11px;font-weight:700;color:var(--muted)}
.fg input,.fg select,.fg textarea{width:100%;padding:10px 12px;border-radius:var(--r-sm);border:1.5px solid var(--border);font-family:'Roboto',sans-serif;font-size:14px;color:var(--text);background:var(--white);transition:border-color .2s,box-shadow .2s;outline:none;appearance:none}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(43,92,174,.1)}
.fg select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7A99' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;cursor:pointer}
.fg input[type="date"]{-webkit-appearance:none;text-align:left;min-height:42px;line-height:1.4;display:block;box-sizing:border-box}
.field-hint{font-size:11px;color:var(--muted-lt);margin-top:2px}

/* ─── PILLS ─── */
.pill-group{display:flex;flex-wrap:wrap;gap:10px}
.pill{padding:8px 18px;border-radius:8px;border:1.5px solid var(--border);cursor:pointer;font-size:13px;font-weight:500;color:var(--text);background:var(--white);transition:border-color .2s;font-family:'Roboto',sans-serif}
.pill:hover{border-color:var(--blue)}
.pill.on{border-color:#eb4a99;background:#eb4a99;color:white}
.pill.on-navy{border-color:#183866;background:#183866;color:white}

/* ─── MORE OPTIONS TOGGLE ─── */
.more-opts-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;font-family:'Roboto',sans-serif;font-size:11px;font-weight:600;color:var(--muted-lt);letter-spacing:.3px;padding:0;margin-top:1.5rem}
.more-opts-btn:hover{color:var(--blue)}
.more-opts-btn svg{width:10px;height:10px;transition:transform .25s}
.more-opts-btn.open svg{transform:rotate(180deg)}

/* ─── CHIPS ─── */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:7px 13px;border-radius:8px;border:1.5px solid var(--border);cursor:pointer;font-size:12px;font-weight:500;color:var(--text);background:var(--white);transition:border-color .2s;font-family:'Roboto',sans-serif;user-select:none;white-space:nowrap}
.chip:hover{border-color:var(--blue)}
.chip.on{border-color:#eb4a99;background:#eb4a99;color:white}
[id^="genderChips"] .chip{padding:10px 13px;font-size:13px}

/* ─── REVEAL ─── */
.reveal{overflow:hidden;max-height:0;opacity:0;transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .3s ease}
.reveal.open{max-height:1400px;opacity:1}

/* ─── REASONS ─── */
.reasons{display:flex;flex-wrap:wrap;gap:10px}
.r-chip{padding:8px 15px;border-radius:8px;border:1.5px solid var(--border);cursor:pointer;font-size:13px;color:var(--text);background:var(--white);transition:border-color .2s;font-family:'Roboto',sans-serif;user-select:none}
.r-chip:hover{border-color:var(--blue)}
.r-chip.on{border-color:#eb4a99;background:#eb4a99;color:white;font-weight:500}


/* ─── RECURRING ─── */
.recurring-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:1rem}
.recur-btn{border:1.5px solid var(--border);border-radius:var(--r-sm);padding:.75rem .5rem;cursor:pointer;text-align:center;background:var(--white);transition:border-color .2s;font-family:'Roboto',sans-serif}
.recur-btn:hover{border-color:var(--blue)}
.recur-btn.on{border-color:var(--blue);background:var(--blue-xlight)}
.recur-icon{margin:0 auto 6px;display:flex;align-items:center;justify-content:center}
.recur-icon svg{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.recur-btn.on .recur-icon svg{stroke:var(--blue)}
.recur-label{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.2px}
.recur-btn.on .recur-label{color:var(--blue)}
.bloodwork-callout{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border-radius:var(--r-md);background:var(--bg);border:1px solid var(--border)}
.bloodwork-callout svg{width:20px;height:20px;flex-shrink:0;stroke:var(--blue);fill:none;stroke-width:1.5;stroke-linecap:round;margin-top:1px}
@media(max-width:400px){.recurring-options{grid-template-columns:1fr 1fr}}


.bill-grid-3{grid-template-columns:1fr 1fr 1fr}
.is-refuah .bill-ico{background:#F0F4FF}
.is-refuah .bill-ico svg{stroke:#5B6FA8}
.bill-tab.refuah{border-color:#5B6FA8;background:#F0F4FF}
.bill-tab.refuah .bill-ico{background:#5B6FA8}
.bill-tab.refuah .bill-ico svg{stroke:white}
.bill-tab.refuah .bill-name{color:#3a4f8a}

/* ─── OOP PRICING ─── */
.oop-visit-fee{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-radius:var(--r-md);background:var(--blue-xlight);border:1.5px solid #C5D5EE;margin-top:4px}
.oop-fee-label{font-size:14px;font-weight:700;color:var(--blue-dark)}
.oop-fee-desc{font-size:12px;color:var(--muted);margin-top:2px}
.oop-fee-price{font-size:22px;font-weight:700;color:var(--blue);flex-shrink:0;margin-left:1rem}
.test-list{display:flex;flex-direction:column;gap:6px}
.test-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--r-sm);border:1.5px solid var(--border);background:var(--white);cursor:pointer;transition:border-color .2s;user-select:none}
.test-row:hover{border-color:var(--blue)}
.test-row.on{border-color:var(--blue);background:var(--blue-xlight)}
.test-cb{width:18px;height:18px;border-radius:4px;border:2px solid var(--border-strong);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s;background:var(--white)}
.test-row.on .test-cb{background:var(--blue);border-color:var(--blue)}
.test-cb svg{width:10px;height:10px;stroke:white;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .15s}
.test-row.on .test-cb svg{opacity:1}
.test-body{flex:1}
.test-name{font-size:13px;font-weight:500;color:var(--text)}
.test-price{font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap;transition:color .2s}
.test-row.on .test-price{color:var(--blue)}
.oop-total-row{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;border-radius:var(--r-sm);background:var(--blue-dark);margin-top:10px}
.oop-total-label{font-size:13px;font-weight:600;color:rgba(255,255,255,.75)}
.oop-total-val{font-size:20px;font-weight:700;color:white}
.hold-notice{display:flex;align-items:flex-start;gap:9px;padding:10px 13px;border-radius:var(--r-sm);background:var(--warn-bg);border:1px solid var(--warn-border);font-size:12px;color:var(--warn-text);line-height:1.65;margin-top:10px}
.hold-notice svg{width:13px;height:13px;flex-shrink:0;margin-top:1px;stroke:var(--warn-text);fill:none;stroke-width:1.5;stroke-linecap:round}
.refuah-coming{display:flex;align-items:flex-start;gap:12px;padding:14px 15px;border-radius:var(--r-md);background:var(--bg);border:1px solid var(--border);margin-top:4px}
.refuah-coming svg{width:22px;height:22px;flex-shrink:0;stroke:var(--muted);fill:none;stroke-width:1.5;stroke-linecap:round;margin-top:1px}
.refuah-note{margin-top:10px;padding:8px 0;font-size:11px;font-style:italic;color:var(--muted);line-height:1.55}
.refuah-note a{color:var(--blue);font-weight:600;text-decoration:none}
.refuah-note a:hover{text-decoration:underline}


.bill-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:1.5rem}
.bill-grid-3{grid-template-columns:1fr 1fr 1fr!important}
.bill-tab{padding:1rem .75rem;border-radius:var(--r-md);border:1.5px solid var(--border);cursor:pointer;text-align:center;background:var(--white);transition:border-color .2s;font-family:'Roboto',sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center}
.bill-tab:hover{border-color:var(--blue)}
.bill-tab.ins{border-color:var(--blue);background:var(--blue-xlight)}
.bill-tab.oop{border-color:var(--blue);background:var(--blue-xlight)}
.bill-ico{width:38px;height:38px;border-radius:9px;background:var(--blue-xlight);margin:0 auto 9px;display:flex;align-items:center;justify-content:center;transition:background .2s}
.bill-ico svg{width:19px;height:19px;stroke:var(--blue);fill:none;stroke-width:1.75;stroke-linecap:round;transition:stroke .2s}
.bill-tab.ins .bill-ico{background:var(--blue)}
.bill-tab.ins .bill-ico svg{stroke:white}
.is-oop .bill-ico{background:var(--blue-xlight)}
.is-oop .bill-ico svg{stroke:var(--blue)}
.bill-tab.oop .bill-ico{background:var(--blue)}
.bill-tab.oop .bill-ico svg{stroke:white}
.bill-name{font-size:14px;font-weight:700;color:var(--text)}
.bill-desc{font-size:11px;color:var(--muted);margin-top:2px}
.bill-tab.ins .bill-name{color:var(--blue)}
.bill-tab-muted{opacity:.5;pointer-events:none}
.bill-tab.oop .bill-name{color:var(--blue)}

/* ─── MEDICAID ─── */
.med-note{padding:10px 13px;border-radius:var(--r-sm);background:var(--warn-bg);border:1px solid var(--warn-border);font-size:12px;color:var(--warn-text);line-height:1.65;margin-top:10px;display:flex;gap:8px;align-items:flex-start}
.med-note svg{width:13px;height:13px;flex-shrink:0;margin-top:1px;stroke:var(--warn-text);fill:none;stroke-width:1.5;stroke-linecap:round}

/* ─── INSURANCE CARD SCANNER ─── */
.ins-scan-wrap{margin-top:.5rem;overflow:hidden;max-height:300px;opacity:1;transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .25s ease}
.ins-scan-wrap.collapsing{max-height:0;opacity:0}

.ins-scan-zone{position:relative;display:flex;align-items:center;gap:14px;padding:1.25rem 1.25rem;border:1.5px dashed var(--border-strong);border-radius:var(--r-md);background:var(--bg);cursor:pointer;transition:border-color .2s,background .2s;min-height:96px;overflow:hidden}
.ins-scan-zone[data-state="idle-front"]:hover,
.ins-scan-zone[data-state="idle-back"]:hover{border-color:var(--blue);background:var(--blue-xlight)}
.ins-scan-zone[data-state^="uploading"]{cursor:wait;pointer-events:none}
.ins-scan-zone[data-state="success-front"],
.ins-scan-zone[data-state="success-back"]{border-color:#52c47a;border-style:solid;background:#f0faf4;cursor:default;pointer-events:none}
.ins-scan-zone[data-state="success-front-warn"]{border-color:var(--warn-border);border-style:solid;background:var(--warn-bg);cursor:default;pointer-events:none}

.ins-scan-input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}

.ins-scan-thumb{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .3s ease;z-index:0}
.ins-scan-zone[data-state^="uploading"] .ins-scan-thumb{opacity:.35}
.ins-scan-zone[data-state^="success"] .ins-scan-thumb{opacity:.45}

.ins-scan-content{position:relative;z-index:1;display:flex;align-items:center;gap:14px;width:100%}

.ins-scan-icon{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--white);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s}
.ins-scan-zone[data-state^="success"] .ins-scan-icon{background:transparent;border-color:transparent}
.ins-scan-icon svg{width:22px;height:22px;stroke:var(--muted);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ins-scan-icon-default,.ins-scan-icon-spinner,.ins-scan-icon-check{display:none}
.ins-scan-zone[data-state="idle-front"] .ins-scan-icon-default,
.ins-scan-zone[data-state="idle-back"] .ins-scan-icon-default{display:block}
.ins-scan-zone[data-state^="uploading"] .ins-scan-icon-spinner{display:block;color:var(--blue);animation:insScanSpin .8s linear infinite}
.ins-scan-zone[data-state^="success"] .ins-scan-icon-check{display:block;animation:insScanCheckIn .35s cubic-bezier(.34,1.56,.64,1) both;width:32px!important;height:32px!important}
.ins-scan-zone[data-state="success-front-warn"] .ins-scan-icon-check circle{fill:var(--warn-border)}

@keyframes insScanSpin{to{transform:rotate(360deg)}}
@keyframes insScanCheckIn{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}

.ins-scan-title{font-size:14px;font-weight:600;color:var(--text);line-height:1.35;transition:opacity .25s ease}
.ins-scan-sub{font-size:11px;color:var(--muted);margin-top:3px}

.ins-scan-skip{background:none;border:none;color:var(--blue);font-size:12px;font-weight:600;cursor:pointer;font-family:'Roboto',sans-serif;padding:6px 0;margin-top:6px;text-align:left}
.ins-scan-skip:hover{color:var(--blue-dark);text-decoration:underline}

.ins-scan-complete{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--r-sm);background:#f0faf4;border:1px solid #c5e8d2;font-size:12.5px;color:#1d5e3a;margin-top:.5rem;opacity:0;animation:insScanCompleteIn .3s ease .1s both}
.ins-scan-complete-icon{width:18px;height:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.ins-scan-complete-icon svg{width:18px;height:18px}
.ins-scan-complete-text{font-weight:600;flex:1}
.ins-scan-reupload{background:none;border:none;color:#1d5e3a;font-size:12px;font-weight:600;cursor:pointer;font-family:'Roboto',sans-serif;text-decoration:underline;padding:0}
.ins-scan-reupload:hover{color:#0e3a22}

@keyframes insScanCompleteIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}

@media (prefers-reduced-motion: reduce){
  .ins-scan-wrap,.ins-scan-zone,.ins-scan-icon,.ins-scan-icon-check,.ins-scan-icon-spinner,.ins-scan-complete{animation:none!important;transition:none!important}
}

/* ─── OOP ─── */
.oop-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.oop-btn{padding:.9rem;border-radius:var(--r-md);border:1.5px solid var(--border);cursor:pointer;text-align:center;background:var(--white);transition:border-color .2s;font-family:'Roboto',sans-serif}
.oop-btn:hover{border-color:var(--pink)}
.oop-btn.on{border-color:var(--pink);background:var(--pink-light)}
.oop-ico{width:34px;height:34px;border-radius:8px;background:var(--bg);margin:0 auto 7px;display:flex;align-items:center;justify-content:center;transition:background .2s}
.oop-ico svg{width:17px;height:17px;stroke:var(--muted);fill:none;stroke-width:1.5;stroke-linecap:round;transition:stroke .2s}
.oop-btn.on .oop-ico{background:var(--pink-light)}
.oop-btn.on .oop-ico svg{stroke:var(--pink)}
.oop-name{font-size:13px;font-weight:700;color:var(--text)}
.oop-btn.on .oop-name{color:var(--pink)}
.oop-sub{font-size:11px;color:var(--muted);margin-top:1px}
.cc-wrap{display:flex;flex-direction:column;gap:11px;margin-top:1rem}
.cc-pair{display:grid;grid-template-columns:1fr 1fr;gap:11px}

/* ─── SUMMARY ─── */
.sum-patient{padding-bottom:1rem}
.sum-patient-extra{padding-top:1rem;border-top:1px solid var(--border)}
.sum-patient-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.sum-patient-name{font-size:15px;font-weight:700;color:var(--text)}
.sum-symptoms{font-size:13px;color:var(--muted);line-height:1.5}
.sum-appt-inline{display:flex;align-items:center;gap:4px;margin-bottom:8px}
.sum-appt-label{font-size:12px;font-weight:700;color:#183866;letter-spacing:.2px;line-height:1.4}
.sum-appt-standalone{margin-bottom:0;padding-bottom:1rem}
.sum-edit-btn{background:none;border:none;cursor:pointer;padding:4px;flex-shrink:0;margin-left:6px;display:inline-flex;align-items:center;color:var(--muted-lt);transition:color .15s;line-height:0}
.sum-edit-btn svg{width:14px;height:14px}
.sum-edit-btn:hover{color:var(--blue)}
.sum-patient-notes{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.5;font-style:italic}
.sum-addr-block{margin-top:1.25rem}
.sum-addr-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.sum-addr-street{font-size:20px;font-weight:700;color:var(--blue-dark);line-height:1.2}
.sum-addr-city{font-size:14px;color:var(--text);margin-top:4px}
.sum-addr-notes{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.55}

/* ─── CONSENT ─── */
.consent-box{border:1.5px solid var(--border);border-radius:var(--r-md);padding:13px 15px;background:var(--bg);margin-bottom:1rem}
.consent-text{font-size:12px;color:var(--muted);line-height:1.7;margin-bottom:10px}

/* ─── BUTTONS ─── */
.btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:14px 24px;border-radius:var(--r-md);background:#eb4a99;color:white;border:none;font-size:15px;font-weight:600;cursor:pointer;font-family:'Roboto',sans-serif;transition:background .2s}
.btn svg{width:15px;height:15px;stroke:white;fill:none;stroke-width:2;stroke-linecap:round}
.btn:hover:not(:disabled){background:#d43f88}
.btn:disabled{background:#C4CBDA;cursor:not-allowed}
.btn.pink{background:#eb4a99}
.btn.pink:hover:not(:disabled){background:#d43f88}
.btn-add-patient{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--blue);font-size:13px;font-weight:600;cursor:pointer;font-family:'Roboto',sans-serif;padding:4px 0;margin-top:1.25rem;transition:color .2s}
.btn-add-patient:hover:not(:disabled){color:var(--blue-dark)}
.btn-add-patient:disabled{opacity:.4;cursor:not-allowed;color:var(--muted);pointer-events:none}
.btn-add-patient svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round}
.btn-remove-patient{background:none;border:none;color:var(--muted);font-size:12px;font-weight:500;cursor:pointer;font-family:'Roboto',sans-serif;padding:4px 0;transition:color .2s}
.btn-remove-patient:hover{color:#DC2626}
.btn-back{display:flex;align-items:center;gap:5px;background:none;border:none;color:var(--muted);font-size:13px;font-weight:500;cursor:pointer;font-family:'Roboto',sans-serif;padding:8px 0;transition:color .2s}
.btn-back svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.btn-back:hover{color:var(--blue)}
.nav-row{display:flex;align-items:center;justify-content:space-between;margin-top:1.5rem}
.nav-row .btn{width:auto;padding:12px 28px}

/* ─── SUCCESS ─── */
.success{display:none}
.success.active{display:block;animation:si .4s ease both}
.ok-circle{width:64px;height:64px;border-radius:50%;background:var(--blue-xlight);border:2px solid #C0CCE8;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem}
.ok-circle svg{width:28px;height:28px;stroke:var(--blue);fill:none;stroke-width:2;stroke-linecap:round}
.next-steps{display:flex;flex-direction:column;gap:8px;margin-top:1.5rem}
.ns{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;border-radius:var(--r-sm);background:var(--bg);border:1px solid var(--border);font-size:13px;color:var(--text)}
.ns-num{width:21px;height:21px;border-radius:50%;background:var(--blue);color:white;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ns-body{line-height:1.5}
.ns-body strong{display:block;font-weight:600;margin-bottom:1px}


/* ─── PATIENT COLLAPSE ─── */
.patient-summary{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-radius:var(--r-md);background:var(--blue-xlight);border:1.5px solid #C5D5EE;margin-top:0}
.patient-summary-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin-bottom:2px}
.patient-summary-name{font-size:14px;font-weight:600;color:var(--text)}
.patient-summary-actions{display:flex;align-items:center;gap:2px}
.btn-patient-edit,.btn-patient-remove{width:30px;height:30px;border:none;background:none;cursor:pointer;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:#6b7a8f;transition:background .15s,color .15s;padding:0;font-family:'Roboto',sans-serif}
.btn-patient-edit svg,.btn-patient-remove svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.btn-patient-edit:hover{background:rgba(43,92,174,.1);color:var(--blue)}
.btn-patient-remove:hover{background:rgba(220,38,38,.08);color:#dc2626}
.patient-form-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.patient-form-hd .sec-label{margin:0}
.btn-patient-done{font-size:11px;font-weight:600;color:var(--muted);background:none;border:1.5px solid var(--border);border-radius:99px;cursor:pointer;padding:3px 10px;font-family:'Roboto',sans-serif;transition:color .15s,border-color .15s;letter-spacing:.2px}
.btn-patient-done:hover{color:var(--text);border-color:var(--border-strong)}
.patient-summary--done{background:var(--blue-xlight);border-color:#C5D5EE}
.patient-summary--done .patient-summary-label{color:var(--blue)}
.patient-summary--done::before{content:none}
.patient-summary-billing{font-size:11px;font-weight:600;color:var(--muted);margin-top:2px;letter-spacing:.2px}
.patient-summary-icon{width:42px;height:42px;flex-shrink:0;margin-right:10px;display:flex;align-items:center;justify-content:center}
.patient-icon-wrap{position:relative;width:42px;height:42px;display:flex;align-items:center;justify-content:center}
.patient-person-icon{width:34px;height:34px;stroke:var(--blue);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.patient-check-badge{position:absolute;bottom:0;right:0;width:15px;height:15px}
.patient-summary-meta{font-size:11px;color:var(--muted);margin-top:3px;font-weight:500}
@keyframes sectionReveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.section-reveal-anim{animation:sectionReveal .3s ease}

@media(max-width:600px){.page{padding:1.25rem .75rem 3rem}.card{padding:1.25rem}.card-title{font-size:16px}input,select,textarea{font-size:16px!important}.bill-name{font-size:11px}.bill-tab{padding:.75rem .4rem}.time-chip{font-size:11px}.window-groups{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.form-grid{grid-template-columns:1fr}.span2{grid-column:1}.cc-pair{grid-template-columns:1fr}#btn1{font-size:13px;padding:10px 14px}.time-grid{grid-template-columns:1fr 1fr}.wg-btn{min-height:104px}
  #step1 .nav-row{flex-direction:column-reverse;align-items:stretch;gap:12px}
  #step1 .nav-row .btn{width:100%}
  #step1 .nav-row .btn-back{align-self:flex-start}
}
@media(max-width:400px){.loc-grid,.bill-grid,.oop-grid{grid-template-columns:1fr}.bill-grid-3{grid-template-columns:1fr!important}.time-grid,.slots-grid{grid-template-columns:1fr 1fr}.window-groups{gap:10px}.wg-btn{min-height:96px}.nav-row{flex-wrap:wrap;gap:8px}.nav-row .btn{width:100%}}
@media(max-width:380px){.date-grid{grid-template-columns:repeat(3,1fr)}}

/* ─── TEST CARD GRID (OOP redesign) ─── */
.test-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.test-card{position:relative;border:1.5px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;cursor:pointer;background:var(--white);transition:border-color .2s,background .2s;user-select:none}
.test-card:hover{border-color:var(--blue)}
.test-card.on{border-color:var(--blue);background:var(--blue-xlight)}
.test-card-tag{font-size:9px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px;display:none}
.test-card.recommended .test-card-tag{display:block}
.test-card-header{display:flex;align-items:center;gap:8px}
.test-card-icon{flex-shrink:0}
.test-card-icon svg{width:17px;height:17px;stroke:var(--muted);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:block;transition:stroke .2s}
.test-card.on .test-card-icon svg{stroke:var(--blue)}
.test-card-name{font-size:12px;font-weight:600;color:var(--text);flex:1;line-height:1.3}
.test-card.on .test-card-name{color:var(--blue-dark)}
.test-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.test-card-price{font-size:13px;font-weight:700;color:var(--muted);transition:color .2s}
.test-card.on .test-card-price{color:var(--blue)}
.test-card-cb{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border-strong);display:flex;align-items:center;justify-content:center;background:var(--white);flex-shrink:0;transition:all .2s}
.test-card.on .test-card-cb{background:var(--blue);border-color:var(--blue)}
.test-card-cb svg{width:9px;height:9px;stroke:white;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .15s}
.test-card.on .test-card-cb svg{opacity:1}
@media(max-width:400px){.test-grid{grid-template-columns:1fr}}

/* ─── TIME-OF-DAY ILLUSTRATED CARDS (Step 2 tiered arrival) ─── */
.window-groups{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

.wg-btn{
  position:relative;overflow:hidden;
  aspect-ratio:3/4;min-height:120px;
  border:2px solid var(--border);border-radius:var(--r-md);
  background:var(--white);cursor:pointer;font-family:'Roboto',sans-serif;
  box-shadow:var(--shadow);transform:translateY(0);
  transition:transform .2s,box-shadow .2s,border-color .2s,opacity .2s;
  -webkit-tap-highlight-color:transparent;
}

/* Full-bleed art layer (hover-zoom target — scaling this leaves border/ring/badge fixed) */
.wg-img{position:absolute;inset:0;background-color:var(--blue-dark);background-size:cover;background-position:center;transform:scale(1);transition:transform .35s ease;will-change:transform}
/* Themed fallback gradients for image-less slots */
.wg-img-empty{background:linear-gradient(150deg,var(--blue-mid),var(--blue-dark))}
.wg-btn[data-group="asap"] .wg-img-empty{background:linear-gradient(150deg,#3a6ec2,#1A2744)}
.wg-btn[data-group="morning"] .wg-img-empty{background:linear-gradient(150deg,#FBC97A,#E8965A)}
.wg-btn[data-group="afternoon"] .wg-img-empty{background:linear-gradient(150deg,#7FB6F2,#2B5CAE)}
.wg-btn[data-group="evening"] .wg-img-empty{background:linear-gradient(150deg,#3B4B7A,#161F38)}

/* Dark-at-bottom scrim for white-text legibility over any image */
.wg-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(16,22,40,.78) 0%,rgba(16,22,40,.42) 34%,rgba(16,22,40,.05) 64%,rgba(16,22,40,0) 100%)}

/* Accent line icon (top-left), white over art; focal point on image-less slots */
.wg-icon{position:absolute;top:11px;left:12px}
.wg-icon svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block;opacity:.92;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.wg-btn:has(.wg-img-empty) .wg-icon svg{width:30px;height:30px;opacity:1}

/* Overlaid text block, bottom-left, white with shadow */
.wg-text{position:absolute;left:12px;right:12px;bottom:11px}
.wg-label{font-size:15px;font-weight:700;color:#fff;line-height:1.15;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.wg-range{font-size:11px;color:rgba(255,255,255,.92);margin-top:1px;text-shadow:0 1px 3px rgba(0,0,0,.55)}

/* Check badge (top-right), revealed when selected */
.wg-badge{position:absolute;top:9px;right:9px;width:24px;height:24px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.5);transition:opacity .2s,transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.wg-badge svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;display:block}

/* Lively hover: card lifts + shadow grows; ART zooms (card box unaffected) */
.wg-btn:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(26,39,68,.18)}
.wg-btn:hover .wg-img{transform:scale(1.07)}

/* Selected: ring + badge in */
.wg-btn.on{border-color:var(--blue);box-shadow:0 0 0 3px rgba(43,92,174,.28),0 8px 22px rgba(26,39,68,.18);transform:translateY(-2px)}
.wg-btn.on .wg-badge{opacity:1;transform:scale(1)}

/* Dim the non-selected cards once a choice is made */
.window-groups:has(.wg-btn.on) .wg-btn:not(.on){opacity:.62}
.window-groups:has(.wg-btn.on) .wg-btn:not(.on):hover{opacity:1}

/* Disabled / Closed (ASAP when office closed) — legible over art */
.wg-btn-disabled{cursor:not-allowed;pointer-events:none}
.wg-btn-disabled .wg-img{filter:grayscale(1) brightness(.7)}
.wg-btn-disabled .wg-scrim{background:linear-gradient(to top,rgba(16,22,40,.82) 0%,rgba(16,22,40,.5) 60%,rgba(16,22,40,.3) 100%)}
.wg-btn-disabled .wg-icon svg,.wg-btn-disabled .wg-label,.wg-btn-disabled .wg-range{opacity:.78}
.wg-btn-disabled .asap-live-dot{display:none}
.hero-dot.closed{background:var(--muted-lt);animation:none}

/* ─── TWO-PANE SCENE RAIL (desktop >=960px; mobile keeps single column) ─── */
.layout-shell{display:block}     /* mobile / default: transparent passthrough */
.scene-rail{display:none}        /* mobile: no rail ever */

@media(min-width:960px){
  .page{max-width:1200px;padding-top:3.5rem}   /* push the whole layout down from the very top */

  /* Pre-selection: centered single column. Widen so the 4 cards render LARGE. */
  .layout-shell{display:grid;grid-template-columns:1fr;justify-items:center}
  .flow-col{width:100%;max-width:820px}
  .window-groups{gap:16px}
  .wg-btn{min-height:200px}       /* aspect-ratio:3/4 keeps proportion */
  /* Keep the wide pre-selection column from stretching the Continue button
     or the (rail-less) success card. */
  .layout-shell:not(.has-rail) #btn0{max-width:440px;margin-left:auto;margin-right:auto}
  #successScreen .card{max-width:560px;margin-left:auto;margin-right:auto}

  /* Post-selection: two panes centered as a unit; rail top aligns with the card top
     because the brand mark + progress now sit above the grid. */
  /* Two equal columns (1fr each) so the rail image is the SAME width as the form
     box; cap + center the pair. (minmax/auto sizing shrank the rail to its art's
     intrinsic width.) */
  .layout-shell.has-rail{grid-template-columns:1fr 1fr;gap:2.5rem;max-width:1160px;margin-left:auto;margin-right:auto;align-items:stretch;justify-items:stretch}
  .layout-shell.has-rail .scene-rail{display:block}   /* stretches to the row height so it matches the form column */
  .layout-shell.has-rail #timeGrid{display:none}   /* chosen scene now lives in the rail */
  /* Form card stretches to the same height as the image. */
  .layout-shell.has-rail .flow-col{display:flex;flex-direction:column}
  .layout-shell.has-rail .flow-col > .step.active{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
  .layout-shell.has-rail .flow-col > .step.active > .card{flex:1 1 auto}
}

/* Rail = just the illustration + a Change-time affordance. */
.scene-rail-art{position:relative;overflow:hidden;width:100%;height:100%;min-height:600px;border-radius:var(--r-lg);box-shadow:var(--shadow);background:var(--blue-dark)}
.scene-rail-img{position:absolute;inset:0;background-color:var(--blue-dark);background-size:cover;background-position:center}
.scene-rail-img[data-group="asap"]{background:linear-gradient(150deg,#3a6ec2,#1A2744)}
.scene-rail-img[data-group="morning"]{background:linear-gradient(150deg,#FBC97A,#E8965A)}
.scene-rail-img[data-group="afternoon"]{background:linear-gradient(150deg,#7FB6F2,#2B5CAE)}
.scene-rail-img[data-group="evening"]{background:linear-gradient(150deg,#3B4B7A,#161F38)}
.scene-rail-change{position:absolute;top:12px;right:12px;z-index:2;background:rgba(16,22,40,.55);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:99px;font-family:'Roboto',sans-serif;font-size:11px;font-weight:600;padding:5px 11px;cursor:pointer;backdrop-filter:blur(2px);transition:background .15s ease}
.scene-rail-change:hover{background:rgba(16,22,40,.78)}

/* Entrance: the rail is already visible (opacity:1) once .has-rail lands, so it can
   never be stranded invisible. JS adds .rail-in a couple frames later to play the
   drop on an already-displayed element (reliable); if it never runs, the rail still shows. */
.scene-rail.rail-in{animation:railDrop .62s cubic-bezier(.16,1,.3,1)}
@keyframes railDrop{from{opacity:0;transform:translateY(-28px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.scene-rail.rail-in{animation:none}}

/* ─── DATE STATUS ROW (Step 0 same-day default) ─── */
.date-status-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;font-size:13px;color:var(--muted)}
.date-status-row strong{color:var(--text);font-weight:600}
#selDateLabel{color:#183866}
.date-change-link{background:none;border:none;color:var(--blue);font-size:13px;font-weight:600;cursor:pointer;font-family:'Roboto',sans-serif;padding:4px 0;display:inline-flex;align-items:center;gap:5px}
.date-change-link svg{transition:transform .25s}
.date-change-link.open svg{transform:rotate(180deg)}
.date-change-link:hover{color:var(--blue-dark)}

/* ─── ARRIVAL SUB-INPUT (2D connector) ─── */
.arrival-sub-input{display:none;margin-top:8px;margin-left:12px;padding-left:12px;border-left:2px solid var(--border-strong)}
.arrival-sub-input.open{display:block}
.arrival-sub-input input{width:100%;padding:10px 12px;border-radius:var(--r-sm);border:1.5px solid var(--border);font-family:'Roboto',sans-serif;font-size:14px;color:var(--text);background:var(--white);outline:none;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}
.arrival-sub-input input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(43,92,174,.1)}

/* ─── STEP 3 TITLE HIDE (2B) ─── */
.step3-title-hidden{opacity:0;max-height:0;margin-bottom:0!important;overflow:hidden;pointer-events:none;transition:opacity 200ms,max-height 200ms,margin 200ms}

/* ─── SUCCESS ACTIONS (calendar / share) ─── */
.success-actions{display:flex;gap:10px;margin:1.25rem auto 0;max-width:380px}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:1;padding:11px 14px;border-radius:var(--r-md);background:var(--white);color:var(--blue-dark);border:1.5px solid var(--blue-dark);font-family:'Roboto',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s,color .2s;line-height:1}
.btn-outline:hover{background:var(--blue-xlight)}
.btn-outline svg{width:15px;height:15px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:400px){.success-actions{flex-direction:column}}

/* ─── BOOKING ID (success screen) ─── */
.booking-id-box{margin:0 auto 1.25rem;max-width:300px;padding:12px 16px;border-radius:var(--r-sm);border:1.5px solid var(--border);background:var(--bg);text-align:center}
.booking-id-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.booking-id-code{font-family:'Courier New',Courier,monospace;font-size:17px;font-weight:700;color:var(--blue-dark);letter-spacing:2px}
.booking-id-hint{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.5}

/* ─── PERSIST BANNER (2F) ─── */
.persist-banner{display:none;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:var(--r-sm);background:var(--blue-xlight);border:1px solid #D0DCF0;margin-bottom:1rem;font-size:13px;color:var(--blue-dark);flex-wrap:wrap}
.persist-banner.show{display:flex}
.persist-banner-text{flex:1;font-weight:500;min-width:140px}
.persist-banner-btns{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap}
.persist-continue{background:#183866;color:white;padding:5px 12px;border-radius:6px;border:none;font-family:'Roboto',sans-serif;font-size:12px;font-weight:600;cursor:pointer;text-align:center}
.persist-continue:hover{background:#102849}
.persist-fresh{background:none;color:var(--muted);border:1.5px solid var(--border-strong);padding:4px 10px;border-radius:6px;font-family:'Roboto',sans-serif;font-size:12px;font-weight:600;cursor:pointer}
.persist-fresh:hover{color:var(--text);border-color:var(--border-strong)}
@media(max-width:600px){
  .persist-banner.show{flex-direction:column;align-items:stretch;gap:10px}
  .persist-banner-text{flex:none;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
  .persist-banner-btns{width:100%;flex-wrap:nowrap}
  .persist-continue{flex:1}
  .persist-fresh{flex:0 0 auto}
}

/* ─── OOP NOTICE (Step 5, 1F) ─── */
#oopNotice{padding:11px 14px;border-radius:var(--r-sm);background:var(--blue-xlight);border:1px solid #D0DCF0;font-size:12px;color:#2a4a8a;line-height:1.65;margin-bottom:1rem}
#oopNotice p{margin:0 0 5px}
#oopNotice p:last-child{margin-bottom:0}

/* ─── SUMMARY OOP TOTAL (2A) ─── */
.sum-oop-total{font-size:13px;font-weight:600;color:var(--text);margin-top:4px}

/* ─── SAVE PATIENT BUTTON (Step 3 mid-flow, lower hierarchy than pink) ─── */
.btn-save-patient{background:var(--blue);color:white}
.btn-save-patient:hover:not(:disabled){background:var(--blue-mid)}

/* ─── FIELD VALIDATION ─── */
.field-error{border-color:#E05C6A!important;background:#FEF3F3!important}
.field-error:focus{border-color:#E05C6A!important;background:var(--white)!important;box-shadow:0 0 0 3px rgba(224,92,106,.15)!important}
.field-error-msg{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;font-family:'Roboto',sans-serif;color:#C0392B;margin-top:4px;line-height:1.3}
.field-error-icon{width:12px;height:12px;color:#C0392B;flex-shrink:0}
.field-error-text{line-height:1.3}
.patient-error-banner{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--r-sm);background:#FEF3F3;border:1px solid #F5CDCD;color:#8B2020;font-size:12.5px;font-weight:500;line-height:1.45;margin-bottom:12px}
.patient-error-banner svg{width:14px;height:14px;flex-shrink:0;stroke:#8B2020;fill:none;stroke-width:1.75}

/* ─── PAGE BRAND MARK ─── */
.page-brand-mark {
  display: flex;
  justify-content: center;
  padding: 1.75rem 0 1.75rem;
}
.page-brand-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  opacity: 1;
}

/* ─── GOOGLE PLACES DROPDOWN ─── */
.pac-container {
  z-index: 9999;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow);
  font-family: 'Roboto', sans-serif;
  margin-top: 4px;
}
.pac-item {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.pac-item:hover {
  background: var(--blue-xlight);
}
.pac-item-query {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}
.pac-matched {
  font-weight: 700;
  color: var(--blue);
}
/* Hide the Google Places "Powered by Google" logo row */
.pac-container:after {
  display: none !important;
}
/* Custom "Enter address manually" row appended as the last dropdown item */
.pac-manual-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--blue);
  cursor: pointer;
}
.pac-manual-item:hover {
  background: var(--blue-xlight);
}
.pac-manual-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%232B5CAE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.pac-manual-text {
  font-size: 12.5px;
}

/* ─── ASAP LIVE INDICATOR ─── */
.asap-range {
  color: #2E9E6B;
  font-weight: 600;
}
.asap-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2E9E6B;
  margin-right: 4px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  animation: asapPulse 1.8s ease-in-out infinite;
}
@keyframes asapPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}
/* ASAP estimate sits on dark art inside the time card — keep the live feel but ensure contrast */
.wg-btn .asap-range{color:#fff;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.wg-btn .asap-live-dot{background:#46E08A;box-shadow:0 0 0 2px rgba(0,0,0,.18)}

/* ─── DOB TRIPLE SELECT (always hidden — kept in DOM so persistence/sync helpers keep working; masked text input below is the visible picker on all viewports) ─── */
.dob-grid {
  display: none;
  grid-template-columns: 5fr 3fr 4fr;
  gap: 8px;
  width: 100%;
}
.dob-grid select {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 28px 10px 12px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--white);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7A99' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  min-width: 0;
}
.dob-grid select.dob-unset {
  color: var(--muted-lt);
}
.dob-grid select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(43,92,174,.1);
}
.dob-grid select option {
  font-size: 14px;
  color: var(--text);
}

/* ─── DOB MASKED TEXT INPUT (visible on all viewports) ─── */
.dob-mobile-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: var(--text);
  background: var(--white);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  letter-spacing: 0.5px;
}
.dob-mobile-input::placeholder {
  color: var(--muted-lt);
  letter-spacing: 0;
  font-size: 14px;
}
.dob-mobile-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(43,92,174,.1);
}

/* ─── STEP 5: PAYMENT SECTION ─── */
#paymentSection {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
#paymentLineItems {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
}
.payment-line {
  display: flex;
  justify-content: space-between;
}
.payment-total {
  font-weight: 700;
  font-size: 15px;
  color: var(--blue-dark);
  border-top: 1.5px solid var(--border);
  padding-top: 12px;
  margin-top: 10px;
}
#squareCardContainer {
  padding: 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--white);
  margin-top: 1rem;
}
.payment-hold-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 10px;
}
.payment-error {
  padding: 12px;
  background: #FEF3F3;
  border: 1px solid #E0A0A0;
  border-radius: var(--r-sm);
  color: #8B2020;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 1rem;
}

/* ─── BILLING INHERITANCE (Patient 2+) ─── */
.inherited-billing-indicator{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:var(--r-sm);background:var(--blue-xlight);border:1px solid var(--border);font-size:13px;color:var(--text);line-height:1.5;margin-top:0.75rem}
.inherited-billing-indicator svg{flex-shrink:0;margin-top:1px}
.inherited-link{font-size:12px;font-weight:600;color:var(--blue);text-decoration:none;cursor:pointer;background:none;border:none;padding:0;font-family:'Roboto',sans-serif}
.inherited-link:hover{text-decoration:underline}
.section-collapsed-on-inherit{display:none!important}
.inherit-return-row{margin-bottom:8px;font-size:12px}

/* ─── INSURANCE FIELDS GRID ─── */
.ins-fields-grid{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.ins-fields-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ins-field-col input{width:100%;font-size:13px;padding:9px 10px;background:var(--white);color:var(--text)}
.ins-field-col input:focus{border-color:var(--blue);outline:none}
.ins-field-full{grid-column:span 2}

.pre-upload-muted label{color:var(--muted-lt) !important}
.pre-upload-muted input,.pre-upload-muted select{background-color:var(--bg) !important;border-color:var(--border) !important;color:var(--muted) !important}

.ins-summary-row{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;border-radius:var(--r-sm);background:var(--blue-xlight);border:1px solid #C5D5EE;margin-top:10px}
.ins-summary-text{font-size:13px;font-weight:600;color:var(--blue-dark)}
.ins-summary-edit{background:none;border:none;color:var(--blue);font-size:12px;font-weight:600;cursor:pointer;font-family:Roboto,sans-serif;padding:0;flex-shrink:0}

/* ─── FLOATING-LABEL FIELDS ───────────────────────────────────────────
   Reusable text-input style. The <label> rests inside the box like a
   placeholder, then floats up to notch the top border on focus or once the
   field has a value. Pure CSS, no JS — it relies on the <label> being the
   sibling that FOLLOWS the input, and on a real placeholder attribute being
   present (the float-when-filled trick keys off :placeholder-shown).

   Every colour is driven from an existing project token, so there is a single
   source of truth. This project has no dark theme today; if one is ever added,
   redefining these --ff-* tokens under that theme is all that's needed.

   --ff-page-bg MUST equal the colour directly behind the field so the floated
   label's "chip" cuts the border cleanly with no line showing through. Every
   floating field here lives on the white .card, so it is var(--white).

   Placed at end-of-file on purpose: it must win the specificity ties against
   .ins-field-col input / .dob-mobile-input / .dob-grid select so converted
   fields render uniformly.                                                   */
.float-field{
  --ff-text:    var(--text);
  --ff-muted:   var(--muted-lt);          /* resting label / placeholder grey */
  --ff-accent:  var(--blue);
  --ff-border:  var(--border);
  --ff-bg:      var(--white);
  --ff-ring:    rgba(43,92,174,.12);      /* matches the app's focus ring */
  --ff-page-bg: var(--white);             /* backdrop behind the field = card */
  --ff-error:   #E05C6A;                  /* matches .field-error border colour */
  position:relative;
  margin:0;                               /* spacing comes from the grid/reveal */
}

.float-field input,
.float-field select{
  width:100%;
  box-sizing:border-box;
  padding:16px 14px;
  font-family:'Roboto',sans-serif;
  font-size:15px;
  color:var(--ff-text);
  background:var(--ff-bg);
  border:1.5px solid var(--ff-border);
  border-radius:var(--r-md);
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
  -webkit-appearance:none;
  appearance:none;
}

.float-field select{
  padding-right:36px;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7A99' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}

.float-field input:focus,
.float-field select:focus{
  border-color:var(--ff-accent);
  box-shadow:0 0 0 3px var(--ff-ring);
}

/* Hide the real placeholder at rest so it doesn't collide with the resting
   label; reveal it on focus so format hints (MM/DD/YYYY, "Jane", …) show. */
.float-field input::placeholder{color:transparent;transition:color .18s ease}
.float-field input:focus::placeholder{color:var(--ff-muted)}

.float-field label{
  position:absolute;
  top:16px;                               /* matches the input's padding-top */
  left:10px;
  padding:0 4px;
  font-size:15px;
  color:var(--ff-muted);
  pointer-events:none;
  transform-origin:left center;
  transition:all .18s ease;
}

/* Float on focus, when a text input is filled, or when a select has a value.
   (Selects need `required` so the empty placeholder option reads as :invalid;
   the hidden .dob-grid selects never match here because they are not direct
   siblings of a .float-field label.) */
.float-field input:focus ~ label,
.float-field input:not(:placeholder-shown) ~ label,
.float-field select:focus ~ label,
.float-field select:valid ~ label{
  top:0;
  transform:translateY(-50%) scale(.84);
  font-weight:600;
  color:var(--ff-accent);
  background:var(--ff-page-bg);          /* MUST match the backdrop */
}

/* Error state — integrates with the existing .field-error class that
   showFieldError() adds to the input; .error on the wrapper also works. */
.float-field input.field-error ~ label,
.float-field select.field-error ~ label,
.float-field.error label{color:var(--ff-error)}

/* The shared field error message sits in normal flow below the input. */
.float-field .field-error-msg{margin-top:6px}

/* Desktop: tighter inputs. The mobile padding (16px → ~53px tall) reads as
   oversized on larger screens; recommended desktop input height is ~32–40px
   with a 14–16px font, so on ≥600px viewports we trim the vertical padding to
   land around ~43px. Mobile keeps its taller, touch-friendly target. Only
   padding-top/bottom change, so the select chevron (padding-right) and the
   search-icon offset (padding-left) are left intact. */
@media(min-width:600px){
  .float-field input,
  .float-field select{padding-top:11px;padding-bottom:11px}
  .float-field label{top:11px}   /* keep resting label aligned with padding-top */
}

/* Leading magnifying-glass for the address autocomplete field. Drawn as a
   background image so it stays put while the user types (it isn't tied to the
   field's text content, so typing never hides it). */
.float-field.with-search input{
  padding-left:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7A99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 14px center;
  background-size:16px 16px;
}
.float-field.with-search label{left:40px}   /* resting label clears the icon */
.float-field.with-search input:focus ~ label,
.float-field.with-search input:not(:placeholder-shown) ~ label{left:10px}  /* floated label aligns with the other fields */

/* Address step: "enter manually" link (shown only while typing) and the
   collapsible block holding apt/city/state/zip. */
.addr-manual-link{
  display:none;                 /* .show is toggled on while the user types */
  margin:10px 0 0 2px;
  padding:2px;
  background:none;
  border:none;
  font-family:'Roboto',sans-serif;
  font-size:13px;
  font-weight:500;
  color:var(--blue);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
}
.addr-manual-link.show{display:inline-block}
.addr-manual-link:hover{color:var(--blue-dark)}
.addr-manual-link:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r-sm)}
.addr-manual-grid{margin-top:16px}   /* gap appears only once the block opens */