/* Styled dropdown menus replacing the native <select> look. */
.cs{ position:relative; }
.cs-native{
  position:absolute !important; inset:0; width:100% !important; height:100% !important;
  opacity:0; pointer-events:none; margin:0 !important;
}

.cs-trigger{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:10px 12px; min-height:46px;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-radius:10px;
  font:inherit; font-size:.93rem; font-weight:500; text-align:start; cursor:pointer;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.cs-trigger:hover{ border-color:#CDBB8E; background:#FDFAF3; }
.cs-trigger:focus-visible, .cs.is-open .cs-trigger{
  outline:none; border-color:var(--turquoise);
  box-shadow:0 0 0 4px rgba(30,122,114,.13);
  background:#fff;
}
.cs.is-invalid .cs-trigger{ border-color:var(--coral); box-shadow:0 0 0 4px rgba(193,80,63,.12); }
.cs-trigger.is-placeholder .cs-value{ color:var(--ink-soft); font-weight:400; }
.cs-value{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-chev{
  width:18px; height:18px; flex:none; fill:none; stroke:var(--ink-soft); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease, stroke .2s;
}
.cs.is-open .cs-chev{ transform:rotate(180deg); stroke:var(--turquoise-deep); }

.cs-ico{
  width:28px; height:28px; flex:none; border-radius:8px;
  display:grid; place-items:center;
  background:rgba(30,122,114,.1);
}
.cs-ico svg{
  width:17px; height:17px; fill:none; stroke:var(--turquoise-deep); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}

.cs-panel{
  position:fixed; z-index:1000; left:0; top:0;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 26px 60px -22px rgba(20,36,51,.4), 0 2px 8px rgba(20,36,51,.06);
  padding:6px; overflow:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden; transform:translateY(-6px) scale(.985); transform-origin:top center;
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  font-family:var(--font-sans);
}
.cs-panel:not(.open){ pointer-events:none; }
.cs-panel.up{ transform-origin:bottom center; transform:translateY(6px) scale(.985); }
.cs-panel.open{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .16s ease, transform .16s ease;
}
.cs-head{
  position:sticky; top:-6px; z-index:1; margin:-6px -6px 4px; padding:10px 14px 8px;
  display:flex; justify-content:space-between; gap:16px;
  background:#fff; border-bottom:1px solid var(--line);
  font-size:.74rem; font-weight:600;
  color:var(--ink-soft);
}
.cs-group{
  padding:12px 12px 6px; font-size:.76rem; font-weight:600;
  color:var(--turquoise-deep);
}
.cs-option{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; cursor:pointer;
  font-size:.92rem; color:var(--ink); line-height:1.3;
  transition:background .12s;
}
.cs-option .cs-text{ flex:1; min-width:0; }
.cs-option.active{ background:#F6EFE2; }
.cs-option[aria-selected="true"]{ color:var(--turquoise-deep); font-weight:600; }
.cs-option[aria-selected="true"] .cs-ico{ background:var(--turquoise-deep); }
.cs-option[aria-selected="true"] .cs-ico svg{ stroke:#fff; }
.cs-meta{
  flex:none; font-family:var(--font-mono); font-size:.74rem; font-weight:600;
  color:var(--ink-soft); white-space:nowrap; direction:ltr;
}
.cs-option[aria-selected="true"] .cs-meta{ color:var(--coral); }
.cs-check{
  width:16px; height:16px; flex:none; fill:none; stroke:var(--turquoise-deep); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round; opacity:0;
}
.cs-option[aria-selected="true"] .cs-check{ opacity:1; }
.cs-panel::-webkit-scrollbar{ width:10px; }
.cs-panel::-webkit-scrollbar-thumb{ background:#E6DBC3; border-radius:10px; border:3px solid #fff; }

@media (prefers-reduced-motion: reduce){
  .cs-panel, .cs-panel.open, .cs-chev{ transition:none; }
}