/* Custom styling for Choices.js using Tailwind's primary-color */
.choices__list--multiple .choices__item {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.choices__list--multiple .choices__item.is-highlighted {
  background-color: var(--primary-color-dark);
  border-color: var(--primary-color-dark);
}

/* Make sure the remove button is visible against the primary color */
.choices__button {
  border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: white !important;
}

/* Optional: Style the focus state of the choices container */
.choices__inner:focus, .is-focused .choices__inner {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

/* Optional: Style the dropdown items on hover */
.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: var(--primary-color-light);
}