.search-select {
  position: relative;
  display: inline-block;
  width: 100%;
  font-size: var(--font-sm);
}

.search-select .search-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  color: var(--color-text);
  box-sizing: border-box;
}

.search-select .search-results {
  display: none; /* hidden by default */
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 240px;
  overflow-y: auto;
  margin-top: 4px;
  padding: var(--space-xs) 0;
  list-style: none;
  z-index: 100;
}

.search-select.open .search-results {
  display: block; /* show dropdown */
}

.search-select .search-results li {
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  font-size: var(--font-sm);
}

.search-select .search-results li:hover,
.search-select .search-results li.active {
  background-color: var(--hover-bg);
}