/* ============================================================================
   localkw — searchable picker component (used on public forms and in admin).
   Enhances <select data-combo="…"> via assets/js/combo.js.
   ========================================================================= */

/* ===================== Searchable category picker ====================== */
.combo-native { display: none !important; }
.combo { position: relative; }

.combo-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  font: 400 15px/1.5 "Inter", sans-serif; color: var(--ink, #0f1b2e); text-align: left; padding: 12px 14px;
  border: 1px solid var(--line-2, #e2e6ee); border-radius: var(--radius-sm, 10px); background: #fff; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease; }
.combo-toggle:focus-visible { outline: none; border-color: var(--brand, #2563eb); box-shadow: 0 0 0 3px var(--brand-50, #eef4ff); }
.combo:not(.has-value) .combo-label { color: var(--muted, #6b7890); }
.combo-chev { flex: none; color: var(--muted, #6b7890); transition: transform .15s ease; }
.combo.open .combo-chev { transform: rotate(180deg); }
.combo.open .combo-toggle { border-color: var(--brand, #2563eb); box-shadow: 0 0 0 3px var(--brand-50, #eef4ff); }

.combo-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: #fff; border: 1px solid var(--line-2, #e2e6ee); border-radius: 12px; overflow: hidden;
  box-shadow: 0 14px 38px rgba(15, 27, 46, .14); }
.combo-search, .field .combo-panel .combo-search { display: block; width: 100%;
  font: 400 15px/1.5 "Inter", sans-serif; color: var(--ink, #0f1b2e); padding: 12px 14px;
  border: 0; border-bottom: 1px solid var(--line, #e6e9f0); border-radius: 0; box-shadow: none; }
.combo-search:focus, .field .combo-panel .combo-search:focus { outline: none;
  border: 0; border-bottom: 1px solid var(--brand, #2563eb); border-radius: 0; box-shadow: none; }
.combo-search::placeholder { color: var(--muted, #6b7890); }

.combo-list { max-height: 280px; overflow-y: auto; padding: 6px; }
.combo-group { padding: 10px 10px 4px; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted, #6b7890); }
.combo-item { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px;
  background: transparent; font: 500 14.5px/1.4 "Inter", sans-serif; color: var(--ink, #0f1b2e);
  text-align: left; cursor: pointer; }
.combo-item:hover, .combo-item.is-active { background: var(--brand-50, #eef4ff); }
.combo-item[hidden], .combo-group[hidden], .combo-empty[hidden] { display: none; }
.combo-item.is-selected { color: var(--brand-700, #1d4ed8); font-weight: 700; }
.combo-empty { margin: 0; padding: 14px; }