/* custom-select.css — app-wide custom dropdowns (upgrades every <select>) */
.cs-select { position: relative; display: block; width: 100%; }
.cs-select > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }

.cs-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: 44px; padding: 8px 12px;
  border: 1px solid #ced4da; border-radius: 4px; background: #fff;
  cursor: pointer; line-height: 1.25;
}
.cs-toggle:focus { outline: none; border-color: #009688; box-shadow: 0 0 0 2px rgba(0,150,136,.15); }
.cs-toggle .cs-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cs-toggle .cs-text.cs-muted { color: #6c757d; }
.cs-toggle i { color: #868e96; flex: 0 0 auto; }

.cs-l1 { font-weight: 600; color: #373757; }
.cs-l1 .cs-slug { color: #009688; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; margin-left: 6px; }
.cs-l2 { color: #6c757d; font-size: 12px; margin-top: 1px; }

.cs-menu {
  position: fixed; z-index: 2000;
  background: #fff; border: 1px solid #ced4da; border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  max-height: 320px; overflow-y: auto; -webkit-overflow-scrolling: touch; display: none;
}
.cs-select.open .cs-menu { display: block; }
.cs-option { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f1f3f5; }
.cs-option:last-child { border-bottom: 0; }
.cs-option:hover, .cs-option.active { background: #f0fbf9; }
.cs-option.cs-muted { color: #6c757d; }