/**
 * Dropdown / select — matches input field tokens (Figma input 1:324 family).
 */

.fh-field__select-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.fh-field__select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--fh-input-padding-x) + 0.35rem);
  width: 15px;
  height: 8px;
  pointer-events: none;
  transform: translateY(-50%);
  background: url("../language-selector/assets/chevron.svg") center / contain no-repeat;
}

.fh-select {
  display: block;
  width: 100%;
  height: var(--fh-input-height);
  margin: 0;
  padding: 0 calc(var(--fh-input-padding-x) + 1.5rem) 0 var(--fh-input-padding-x);
  font-family: var(--fh-font-family);
  font-size: var(--fh-font-size-input);
  font-weight: var(--fh-font-weight-input);
  line-height: var(--fh-line-height-input);
  color: var(--fh-color-text);
  background-color: var(--fh-color-surface);
  border: var(--fh-border-width) solid var(--fh-color-border-input);
  border-radius: var(--fh-radius-input);
  appearance: none;
  cursor: pointer;
  transition: border-color var(--fh-transition-fast);
}

.fh-select:focus {
  outline: none;
  border-color: var(--fh-color-border-focus);
}

.fh-select:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.fh-select option {
  color: var(--fh-color-text);
}

.fh-select option.fh-select__divider,
.fh-select option[disabled].fh-select__divider {
  color: var(--fh-color-text-muted);
  font-size: var(--fh-font-size-sm);
  text-align: center;
}