/**
 * Select2 Overrides (Route AJAX Select)
 * Goal: Match theme design system (colors.css variables).
 *
 * Works with Select2 v4.x (default theme).
 */

:root {
  /* Fallbacks if your design system uses different names */
  --select2-input-height: var(--input-height, 45px);
  --select2-radius: var(--ota-radius-md, var(--radius-btn, 10px));
  --select2-border: rgb(var(--border));
  --select2-bg: rgb(var(--background));
  --select2-fg: rgb(var(--foreground));
  --select2-muted: rgb(var(--muted));
  --select2-primary: var(--ota-color-primary, rgb(var(--primary)));
  --select2-primary-soft: rgba(var(--primary) / 0.10);
}

/* Container */
.select2-container {
  font-size: var(--ota-font-base, 14px);
}

/* Single select (closed) */
.select2-container--default .select2-selection--single {
  height: var(--select2-input-height);
  border: 1px solid var(--select2-border);
  border-radius: var(--select2-radius);
  background: var(--select2-bg);
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* Accent hooks: add class to parent (field--from / field--to) */
.ota-home-search__field--from .select2-container--default .select2-selection--single {
  border-color: rgba(var(--primary) / 0.25);
  box-shadow: 0 0 0 1px rgba(var(--primary) / 0.08);
}
.ota-home-search__field--to .select2-container--default .select2-selection--single {
  border-color: rgba(var(--secondary) / 0.25);
  box-shadow: 0 0 0 1px rgba(var(--secondary) / 0.08);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--select2-fg);
  line-height: calc(var(--select2-input-height) - 2px);
  padding-left: 12px;
  padding-right: 34px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--select2-muted);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: var(--select2-input-height);
  right: 10px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: rgba(var(--foreground) / 0.55) transparent transparent transparent;
}

/* Focus */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--select2-primary);
  box-shadow: 0 0 0 3px rgba(var(--primary) / 0.12);
}

/* Dropdown */
.select2-container--default .select2-dropdown {
  border: 1px solid var(--select2-border);
  border-radius: var(--select2-radius);
  background: var(--select2-bg);
  overflow: hidden;
}

/* Search input inside dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
  height: var(--select2-input-height);
  border: 1px solid var(--select2-border);
  border-radius: calc(var(--select2-radius) - 2px);
  padding: 0 12px;
  outline: none;
  box-sizing: border-box;
  color: var(--select2-fg);
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--select2-primary);
  box-shadow: 0 0 0 3px rgba(var(--primary) / 0.12);
}

/* Options */
.select2-container--default .select2-results__option {
  padding: 10px 12px;
  color: var(--select2-fg);
}

/* Hover */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--select2-primary-soft);
  color: var(--select2-fg);
}

/* Selected */
.select2-container--default .select2-results__option--selected {
  background-color: rgba(var(--primary) / 0.14);
  color: var(--select2-fg);
}

/* Clear button */
.select2-container--default .select2-selection--single .select2-selection__clear {
  height: var(--select2-input-height);
  margin-right: 34px;
  color: rgba(var(--foreground) / 0.6);
}