/* =====================================================================
   Custom select — themed listbox panel (used by select.js)
   Templates define --cs-* aliases in their own :root block.
   ===================================================================== */
.cs{position:relative;width:100%}
.cs-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;opacity:0;pointer-events:none;
}
.cs-trigger{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:var(--cs-pad,0 14px);
  border:var(--cs-border-w,1.5px) solid var(--cs-border);border-radius:var(--cs-radius,10px);
  background:var(--cs-field-bg);color:var(--cs-ink);
  font-family:inherit;font-size:16px;text-align:left;cursor:pointer;
  transition:border-color .14s,box-shadow .14s;
}
.cs-trigger:hover{border-color:color-mix(in srgb,var(--cs-accent) 45%,var(--cs-border))}
.cs.is-open .cs-trigger,
.cs-trigger:focus-visible{
  outline:none;border-color:var(--cs-accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--cs-accent) 14%,transparent);
}
.cs-err .cs-trigger{
  border-color:var(--cs-red);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--cs-red) 12%,transparent);
}
.cs-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-empty .cs-value{color:color-mix(in srgb,var(--cs-muted) 80%,transparent)}
.cs-caret{flex:none;color:var(--cs-muted);transition:transform .18s ease}
.cs.is-open .cs-caret{transform:rotate(180deg);color:var(--cs-accent)}

.cs-panel{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:120;
  background:var(--cs-card);border:1px solid var(--cs-border);border-radius:var(--cs-panel-radius,12px);
  box-shadow:var(--cs-shadow);padding:6px;
  max-height:288px;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
  scrollbar-width:thin;scrollbar-color:var(--cs-border) transparent;
}
.cs.cs-up .cs-panel{top:auto;bottom:calc(100% + 6px);transform:translateY(6px)}
.cs.is-open .cs-panel{opacity:1;visibility:visible;transform:translateY(0)}
.cs-panel::-webkit-scrollbar{width:10px}
.cs-panel::-webkit-scrollbar-thumb{
  background:var(--cs-border);border-radius:99px;
  border:3px solid var(--cs-card);background-clip:padding-box;
}
.cs-panel::-webkit-scrollbar-track{background:transparent}

.cs-opt{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 12px;height:42px;border-radius:var(--cs-opt-radius,8px);
  font-size:15px;color:var(--cs-body);cursor:pointer;
  transition:background .1s,color .1s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cs-opt.is-active{background:color-mix(in srgb,var(--cs-accent) 10%,transparent);color:var(--cs-ink)}
.cs-opt.is-selected{background:var(--cs-accent);color:var(--cs-on-accent);font-weight:600}
.cs-opt.is-selected.is-active{background:var(--cs-accent-d)}
.cs-opt-empty{color:var(--cs-muted)}
.cs-check{flex:none;opacity:0;transform:scale(.6);transition:.14s}
.cs-opt.is-selected .cs-check{opacity:1;transform:scale(1)}
@media(max-width:720px){
  .cs-opt{height:46px;font-size:16px}
  .cs-panel{max-height:52vh}
}

.cs-err ~ .emsg,
.cs-err ~ .cs-note,
.cs-err ~ .e-msg,
.cs-err ~ .e,
.cs-err ~ .msg,
.cs-err ~ .err{display:block}

.dob-group .cs,.npd-group .cs{width:100%}