/* ============================================================================
   search-panel.css — unified filter/search UI for the three backbone pages
   (Directory, Events, Members). One look, one behavior, one source of truth.

   Round 144. Replaces the three divergent filter bars (.dir-bar / .ev-bar /
   .pml-filters) with a single tokenized "search panel" card that sits BELOW
   the map on every page. Auto-submits on change (no Search button). Shows a
   consistent result-count + active-filter chips row beneath the controls.

   Structure (same on all three pages):
     <div class="sp-wrap">
       <form class="sp-panel" ...>
         <div class="sp-fields">
           <div class="sp-field sp-field--search"> icon + input </div>
           <div class="sp-field"> icon + input </div>
           <label class="sp-select"> <select> </label>
           ...
         </div>
       </form>
       <div class="sp-meta">
         <span class="sp-count">N results</span>
         <a class="sp-chip">filter ✕</a> ...
         <a class="sp-chip sp-chip--clear">Clear all ✕</a>
       </div>
     </div>

   All colors come from the shared theme tokens, so it adapts to light/dark
   automatically and matches the rest of the site's forms.
   ============================================================================ */

.sp-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.6rem 1.5rem 0;
}

/* The panel card */
.sp-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  background: var(--bg-card);
  border: 1px solid var(--border, rgba(201,168,92,.18));
  border-radius: 14px;
  padding: .8rem .9rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
[data-theme="light"] .sp-panel {
  box-shadow: 0 1px 6px rgba(60,45,20,.06);
}

/* A text-search field (icon + input) */
.sp-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 200px;
  min-width: 0;
}
.sp-field--search { flex: 2 1 240px; }
.sp-field svg {
  position: absolute;
  left: .75rem;
  color: var(--fg-muted);
  pointer-events: none;
  flex-shrink: 0;
}
.sp-field input {
  width: 100%;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 9px;
  color: var(--field-fg);
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .9rem;
  padding: .62rem .8rem .62rem 2.2rem;
  box-sizing: border-box;
  transition: border-color .16s, box-shadow .16s;
}
.sp-field input::placeholder { color: var(--fg-dim); }
.sp-field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(156,123,46,.14);
}

/* A select control */
.sp-select { position: relative; display: flex; flex: 1 1 150px; min-width: 0; }
.sp-select select {
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--field-bg);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239c7b2e' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  border: 1px solid var(--field-border);
  border-radius: 9px;
  color: var(--field-fg);
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .88rem;
  padding: .62rem 2rem .62rem .8rem;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color .16s, box-shadow .16s;
}
.sp-select select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(156,123,46,.14);
}

/* A month input behaves like a select-width control */
.sp-month {
  flex: 1 1 150px;
  min-width: 0;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 9px;
  color: var(--field-fg);
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .88rem;
  padding: .58rem .8rem;
  box-sizing: border-box;
  transition: border-color .16s, box-shadow .16s;
}
.sp-month:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(156,123,46,.14); }

/* An inline checkbox toggle (e.g. "Online only") */
.sp-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex: 0 0 auto;
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .85rem;
  color: var(--fg-muted);
  cursor: pointer;
  white-space: nowrap;
  padding: 0 .4rem;
}
.sp-toggle input { accent-color: var(--gold); width: 15px; height: 15px; cursor: pointer; }

/* Meta row: count + active filter chips */
.sp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .85rem .2rem .2rem;
  font-family: var(--font-ui, 'DM Sans', sans-serif);
}
.sp-count {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--fg-muted);
  margin-right: .25rem;
}
.sp-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  padding: .26rem .65rem;
  border-radius: 20px;
  text-decoration: none;
  background: rgba(156,123,46,.14);
  border: 1px solid rgba(156,123,46,.3);
  color: var(--gold);
  transition: background .14s, border-color .14s;
}
.sp-chip:hover { background: rgba(156,123,46,.22); border-color: var(--gold); }
.sp-chip--sort {
  background: transparent;
  border-color: var(--border-dim, rgba(255,255,255,.12));
  color: var(--fg-muted);
}
.sp-chip--clear {
  background: transparent;
  border-color: rgba(179,67,59,.4);
  color: var(--danger, #c0524a);
}
.sp-chip--clear:hover { background: rgba(179,67,59,.1); border-color: var(--danger, #c0524a); }

/* Responsive: stack fields on narrow screens */
@media (max-width: 640px) {
  .sp-wrap { padding: 1.1rem 1rem 0; }
  .sp-panel { gap: .5rem; padding: .7rem; }
  .sp-field, .sp-field--search, .sp-select, .sp-month { flex: 1 1 100%; }
  .sp-toggle { flex: 1 1 100%; padding: .2rem; }
}