/* ==================== CHOICES.JS - EDITABLE SELECT DROPDOWN ==================== */
/* Style for select dropdown that allows custom text entry */

.choices {
  margin-bottom: 0;
}

/* Main container - default styling for most forms */
.choices__inner {
  background-color: #ffffff !important;
  border: 1.5px solid #b0bec5 !important;
  border-radius: 40px !important;
  padding: 12px 20px !important;
  box-shadow: none !important;
  font-size: 0.95rem !important;
  min-height: auto !important;
  color: #1a1f2e !important;
}

/* Test prep page styling - grey background */
#counsel .choices__inner,
.country-select-editable.form-select[style*="background-color: #f6f7f6"] + .choices .choices__inner {
  background-color: #f6f7f6 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
}

/* Match counsel-form-input styling in modal (white background) */
.counsel-form .choices__inner {
  background-color: #ffffff !important;
  border: 1.5px solid #b0bec5 !important;
  border-radius: 40px !important;
  padding: 12px 20px !important;
  box-shadow: none !important;
  font-size: 0.95rem !important;
}

.choices.is-open .choices__inner {
  border-radius: 40px 40px 0 0 !important;
}

#counsel .choices.is-open .choices__inner {
  border-radius: 8px 8px 0 0 !important;
}

/* Selected value display */
.choices__list--single .choices__item {
  color: #1a1f2e !important;
  padding: 0 !important;
}

/* Placeholder */
.choices__list--single .choices__placeholder {
  color: #a0a5aa !important;
  opacity: 1 !important;
}

/* Dropdown list - WHITE BACKGROUND */
.choices__list--dropdown {
  background-color: #ffffff !important;
  border: 1.5px solid #b0bec5 !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
  margin-top: 0 !important;
  z-index: 9999 !important;
  max-height: 300px !important;
  overflow-y: auto !important;
}

/* Search input inside dropdown */
.choices__input--cloned {
  background-color: #f8f9fa !important;
  border: 1px solid #e9ecef !important;
  border-radius: 6px !important;
  padding: 0.5rem 0.75rem !important;
  margin: 0.5rem 1rem !important;
  font-size: 0.9rem !important;
  color: #1a1f2e !important;
}

.choices__input--cloned:focus {
  border-color: #047433 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(4, 116, 51, 0.1) !important;
}

/* Dropdown items */
.choices__list--dropdown .choices__item {
  padding: 0.75rem 1.25rem !important;
  font-size: 0.95rem !important;
  color: #1a1f2e !important;
  background-color: #ffffff !important;
  transition: background-color 0.2s ease !important;
}

/* Hover state */
.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: #f4fbf7 !important;
  color: #047433 !important;
}

/* Dropdown arrow */
.choices[data-type*="select-one"]::after {
  border-color: #6c757d transparent transparent transparent !important;
  opacity: 0.6 !important;
  transition: opacity 0.2s, transform 0.2s !important;
  margin-top: -2px !important;
}

.choices.is-open[data-type*="select-one"]::after {
  transform: rotate(180deg) !important;
  margin-top: 2px !important;
}

.choices:hover[data-type*="select-one"]::after {
  opacity: 1 !important;
}

/* Focus state - match other inputs */
.choices.is-focused .choices__inner {
  border-color: #047433 !important;
  box-shadow: 0 0 0 3px rgba(4, 116, 51, 0.12) !important;
}

#counsel .choices.is-focused .choices__inner {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Mobile responsive */
@media (max-width: 767px) {
  .choices__inner {
    padding: 12px 20px !important;
    font-size: 0.9rem !important;
  }
  
  .choices__list--dropdown .choices__item {
    padding: 0.625rem 1rem !important;
    font-size: 0.9rem !important;
  }
}

/* Scrollbar */
.choices__list--dropdown::-webkit-scrollbar {
  width: 8px;
}

.choices__list--dropdown::-webkit-scrollbar-track {
  background: #f8f9fa;
  border-radius: 0 0 8px 0;
}

.choices__list--dropdown::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 4px;
}

.choices__list--dropdown::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}