/* Searchable select — the wrap carries the original select's classes, so it
   inherits the themed look; the inner button is transparent. */
.ss-wrap { position: relative; cursor: pointer; }

/* Sections like the home hero use overflow:hidden, which would clip the open
   panel — release the clip only while a dropdown inside them is open. */
section:has(.ss-wrap.open),
.hero:has(.ss-wrap.open) { overflow: visible; }
.ss-wrap select.ss-native { display: none !important; }

.ss-trigger {
  display: block; width: 100%;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-trigger:focus-visible { outline: 2px solid #f47a20; outline-offset: 3px; border-radius: 4px; }

.ss-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  min-width: 240px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.16);
  z-index: 1200; overflow: hidden;
  cursor: default;
  text-align: left; /* don't inherit centered text from hero sections */
}

.ss-search {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid #f1f5f9; color: #94a3b8;
}
.ss-search input {
  flex: 1 1 auto; min-width: 0;
  border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 8px 11px; font-size: 14px; font-family: inherit; outline: none;
  background: #fff; color: #1f2937;
}
.ss-search input:focus { border-color: #f47a20; box-shadow: 0 0 0 3px rgba(244, 122, 32, 0.12); }

/* ~6 options tall, then scroll */
.ss-list { max-height: 234px; overflow-y: auto; padding: 6px; }

.ss-option {
  padding: 9px 12px; border-radius: 8px;
  font-size: 14px; color: #1f2937; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-option:hover, .ss-option.active { background: #fff3e8; color: #c2570b; }
.ss-option.selected { background: #eef1fb; color: #0b2a8f; font-weight: 600; }

.ss-group {
  padding: 9px 12px 3px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8;
}
.ss-empty { padding: 14px 12px; text-align: center; color: #94a3b8; font-size: 14px; }