/*
 * Searchable select component — pairs with:
 *   app/views/shared/_country_searchable_select.html.erb
 *   app/views/shared/_producer_searchable_select.html.erb
 *   app/views/shared/_provider_searchable_select.html.erb
 * Driven by app/javascript/controllers/searchable_select_controller.js.
 */
.searchable-select {
  position: relative;
}

.searchable-select-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 250px;
  overflow-y: auto;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-float);
  z-index: var(--z-dropdown);
}

.searchable-select-dropdown.open {
  display: block;
}

.searchable-select-option {
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  font-size: var(--font-size-sm);
}

.searchable-select-option:hover,
.searchable-select-option.highlighted {
  background: var(--color-bg-hover);
}

.searchable-select input[type="text"] {
  width: 100%;
}

@media (max-width: 768px) {
  .searchable-select-option {
    min-height: var(--tap-target-min);
    display: flex;
    align-items: center;
  }
}