/* Container background & border */
.choices {
  background-color: var(--white, #FAFAF6);
  border: 1px solid var(--charcoal-light);
  border-radius: 8px;
  font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  min-height: 38px;
}

/* The input field */
.choices__inner {
  background-color: var(--white, #FAFAF6);
  color: var(--charcoal);
  min-height: 38px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.95rem;
}

/* Placeholder text */
.choices__input--cloned {
  color: var(--charcoal-light);
}

/* Individual dropdown options */
.choices__list--dropdown .choices__item {
  padding: 0.45em 0.85em;
  color: var(--charcoal);
  background-color: var(--white, #FAFAF6);
  font-family: 'Comfortaa', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.choices__list--dropdown .choices__item--highlighted {
  background-color: var(--primary-blue-extra-light, #EDEEF7);
  color: var(--charcoal);
  border-left: 3px solid var(--primary-blue, #2B3364);
}

/* Selected tags (multiple) */
.choices__list--multiple .choices__item {
  background-color: var(--primary-blue-extra-light, #EDEEF7);
  color: var(--charcoal);
  border-radius: 9999px;
  padding: 0.25rem 0.5rem;
  margin: 0.2rem 0.3rem;
  font-size: 0.9rem;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--primary-blue, #2B3364);
  font-weight: 700;
}

/* “×” remove button on tags */
.choices__list--multiple .choices__button {
  color: var(--charcoal);
  margin-left: 0.4em;
  line-height: 1;
}

/* Dropdown toggle arrow */
.choices__inner::after {
  border-color: var(--charcoal) transparent transparent transparent;
}

/* Search input in dropdown */
.choices__list--dropdown .choices__input {
  padding: 0.45em 0.85em;
  color: var(--charcoal);
  background-color: var(--white, #FAFAF6);
}

/* When dropdown is open */
.choices__list--dropdown {
  border: 1px solid var(--charcoal-light);
  box-shadow: 0 8px 24px rgba(32, 32, 32, 0.08);
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: var(--primary-blue-extra-light, #EDEEF7);
  color: var(--charcoal);
}

/* Disabled state */
.choices.is-disabled .choices__inner {
  background-color: var(--accent-beige-light);
  cursor: not-allowed;
}

/* Error state */
.choices.is-invalid .choices__inner {
  border-color: var(--accent-purple-dark);
}