/* Dropdown lists in the Biekar orange theme — replaces the browser's default blue highlight. */

/* Chrome / Edge: style the real dropdown list (customizable <select>). */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]),
  select:not([multiple]):not([size])::picker(select) {
    appearance: base-select;
  }

  select:not([multiple]):not([size]) {
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  /* Bootstrap's .form-select already draws its own arrow. */
  select.form-select::picker-icon {
    display: none;
  }

  select:not(.form-select)::picker-icon {
    color: #f7951f;
    transition: rotate 0.2s ease;
  }

  select:not(.form-select):open::picker-icon {
    rotate: 180deg;
  }

  select::picker(select) {
    background: #fff;
    border: 1px solid #f0e2cf;
    border-radius: 12px;
    padding: 0.35rem;
    margin-top: 4px;
    box-shadow: 0 14px 34px rgba(26, 29, 38, 0.14);
    max-height: min(340px, 60vh);
    scrollbar-width: thin;
    scrollbar-color: #f7951f transparent;
  }

  select option {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    color: #1a1d26;
    background: transparent;
    cursor: pointer;
  }

  select option::checkmark {
    display: none;
  }

  select option:hover,
  select option:focus {
    background: #fde7c9;
    color: #b45f00;
  }

  select option:checked {
    background: linear-gradient(135deg, #f7951f, #e67e22);
    color: #fff;
    font-weight: 600;
  }
}

/* Firefox and others that still use the native list. */
select option:checked {
  background: #f7951f linear-gradient(#f7951f, #f7951f);
  color: #fff;
}

/* Select2 dropdowns (ad form). */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #f7951f !important;
  color: #fff !important;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
  background-color: #fde7c9;
  color: #b45f00;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: #f7951f;
  outline: none;
}