/* ============================================================================ jp-select.css — JetPatient bespoke dropdown (branded s so the OPEN state is fully branded (native option lists can't be styled). Adapts to both token systems — Passport (--pp-*) and Clinic Portal (--surface/--teal/…) — via component-scoped --jps-* vars with hard fallbacks. Dark-mode inherits whichever system is active. Mobile: panel becomes a bottom sheet. ========================================================================== */ .jps{ --jps-bg: var(--pp-card-bg, var(--surface, #ffffff)); --jps-panel-bg: var(--pp-card-bg, var(--surface, #ffffff)); --jps-border: var(--pp-card-border, var(--border, #E4E9F2)); --jps-text: var(--pp-head-ink, var(--navy, #0A2D6E)); --jps-soft: var(--pp-text-soft, var(--muted, #64748B)); --jps-accent: var(--pp-accent-ink, var(--teal-dk, #0F766E)); --jps-accent-wash: var(--pp-accent-wash, rgba(0,201,192,.12)); --jps-raise: var(--pp-raise-1, rgba(10,45,110,.05)); --jps-divider: var(--pp-divider, var(--border, #E9EEF6)); --jps-shadow: var(--pp-elev-md, var(--shadow-md, 0 18px 44px rgba(10,25,60,.18))); --jps-radius: 11px; position: relative; display: block; width: 100%; } .jps-native{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .jps-btn{ display:flex; align-items:center; gap:9px; width:100%; box-sizing:border-box; font-family:inherit; font-size:14.5px; font-weight:600; color:var(--jps-text); background:var(--jps-bg); border:1.5px solid var(--jps-border); border-radius:var(--jps-radius); padding:11px 13px; cursor:pointer; text-align:left; transition:border-color .15s, box-shadow .15s; min-height:46px; } .jps-btn:hover{ border-color:var(--jps-accent); } .jps.open .jps-btn, .jps-btn:focus-visible{ outline:none; border-color:var(--jps-accent); box-shadow:0 0 0 3px var(--jps-accent-wash); } .jps.disabled{ opacity:.6; pointer-events:none; } .jps-ic{ flex:none; display:grid; place-items:center; color:var(--jps-accent); } .jps-ic svg{ width:17px; height:17px; } .jps-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .jps-label.placeholder{ color:var(--jps-soft); font-weight:500; } .jps-chev{ flex:none; display:grid; place-items:center; color:var(--jps-soft); transition:transform .2s ease; } .jps-chev svg{ width:16px; height:16px; } .jps.open .jps-chev{ transform:rotate(180deg); } /* r60 — the panel is portalled to , so it must carry its own tokens (it no longer inherits them from .jps) and its own open state (it is no longer a descendant, so `.jps.open .jps-panel` can never match it). */ .jps-panel{ --jps-panel-bg: var(--pp-card-bg, var(--surface, #ffffff)); --jps-border: var(--pp-card-border, var(--border, #E4E9F2)); --jps-text: var(--pp-head-ink, var(--navy, #0A2D6E)); --jps-soft: var(--pp-text-soft, var(--muted, #64748B)); --jps-accent: var(--pp-accent-ink, var(--teal-dk, #0F766E)); --jps-accent-wash: var(--pp-accent-wash, rgba(0,201,192,.12)); --jps-raise: var(--pp-raise-1, rgba(10,45,110,.05)); --jps-shadow: var(--pp-elev-md, var(--shadow-md, 0 18px 44px rgba(10,25,60,.18))); position:absolute; z-index:10050; left:0; right:0; top:calc(100% + 6px); background:var(--jps-panel-bg); border:1.5px solid var(--jps-border); border-radius:14px; box-shadow:var(--jps-shadow); padding:6px; max-height:288px; animation:jpsIn .16s ease; box-sizing:border-box; display:none; } .jps-panel.jps-portal{ position:fixed; right:auto; } .jps-panel.open{ display:flex; flex-direction:column; min-height:0; } .jps-list{ overflow-y:auto; overscroll-behavior:contain; min-height:0; flex:1; } .jps-none{ padding:14px 11px; font-size:13px; font-weight:600; color:var(--jps-soft); text-align:center; } .jps-search{ display:flex; align-items:center; gap:8px; flex:none; padding:4px 8px 8px; margin-bottom:4px; border-bottom:1px solid var(--jps-border); } .jps-search .jps-sic{ flex:none; display:grid; place-items:center; color:var(--jps-soft); } .jps-search .jps-sic svg{ width:15px; height:15px; } .jps-search input{ flex:1; min-width:0; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--jps-text); border:none; outline:none; background:transparent; padding:3px 0; } .jps-search input::placeholder{ color:var(--jps-soft); font-weight:500; } @keyframes jpsIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } } .jps-opt{ display:flex; align-items:center; gap:9px; padding:10px 11px; border-radius:10px; font-size:14px; font-weight:600; color:var(--jps-text); cursor:pointer; line-height:1.35; } .jps-opt .jps-ot{ flex:1; min-width:0; } .jps-opt .jps-check{ flex:none; width:16px; height:16px; display:grid; place-items:center; color:var(--jps-accent); opacity:0; transition:opacity .12s; } .jps-opt .jps-check svg{ width:15px; height:15px; } .jps-opt.sel{ color:var(--jps-accent); } .jps-opt.sel .jps-check{ opacity:1; } .jps-opt.active{ background:var(--jps-accent-wash); } .jps-opt.sel.active{ background:var(--jps-accent-wash); } .jps-opt:hover{ background:var(--jps-raise); } .jps-opt.disabled{ color:var(--jps-soft); opacity:.6; cursor:default; } .jps-opt.disabled:hover{ background:none; } .jps-backdrop{ display:none; } @media (max-width:640px){ .jps-panel.open.sheet{ position:fixed; left:0; right:0; width:auto; bottom:0; top:auto; max-height:64vh; border-radius:20px 20px 0 0; border-bottom:0; padding:10px 10px calc(10px + env(safe-area-inset-bottom)); box-shadow:0 -14px 40px rgba(2,10,30,.30); animation:jpsUp .22s ease; z-index:10061; } .jps-panel.open.sheet::before{ content:""; display:block; flex:none; width:38px; height:4px; border-radius:3px; background:var(--jps-border); margin:2px auto 10px; } .jps-opt{ padding:13px 13px; font-size:15px; } .jps-search input{ font-size:16px; } /* 16px or iOS zooms the page on focus */ .jps.open .jps-backdrop{ display:block; position:fixed; inset:0; background:rgba(2,10,30,.48); z-index:10060; animation:jpsFade .2s ease; } } @keyframes jpsUp{ from{ transform:translateY(100%); } to{ transform:none; } } @keyframes jpsFade{ from{ opacity:0; } to{ opacity:1; } } @media (prefers-reduced-motion: reduce) and (min-width: 99999px){ .jps-panel, .jps.open .jps-panel, .jps.open .jps-backdrop{ animation:none; } .jps-chev{ transition:none; } }