/* Mountain Wubz dark theme for Choices.js dropdowns on the apply form.
 *
 * Loaded on /apply AFTER choices.min.css so these rules win, and scoped to
 * `.choices--mw` (added in public/js/applyEnhance.js) so nothing else on
 * the site is affected. Mirrors the .apply-input field styling in site.css
 * and uses the MW cyan accent for the highlighted option.
 */
.choices--mw { margin-bottom: 0; }

.choices--mw .choices__inner {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #fff;
  min-height: 0;
  padding: 9px 16px;
  font-family: var(--font-body);
  font-size: 15px;
}
.choices--mw.is-focused .choices__inner,
.choices--mw.is-open .choices__inner {
  border-color: var(--mw-cyan);
  box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.15);
}

.choices--mw .choices__list--single { padding: 0; }
.choices--mw .choices__list--single .choices__item { color: #fff; }
.choices--mw .choices__placeholder { color: #555; opacity: 1; }

/* Open option list */
.choices--mw .choices__list--dropdown,
.choices--mw .choices__list[aria-expanded] {
  background: #15151c;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
}
.choices--mw .choices__list--dropdown .choices__item,
.choices--mw .choices__list[aria-expanded] .choices__item {
  color: #e0e0e0;
  font-size: 15px;
}
.choices--mw .choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices--mw .choices__list[aria-expanded] .choices__item--selectable.is-highlighted,
.choices--mw .choices__list--dropdown .choices__item--selectable:hover,
.choices--mw .choices__list[aria-expanded] .choices__item--selectable:hover {
  background: var(--mw-cyan);
  color: #0a0a0a;
}

/* Dropdown caret */
.choices--mw[data-type*="select-one"]::after {
  border-color: var(--mw-cyan) transparent transparent;
}
.choices--mw.is-open[data-type*="select-one"]::after {
  border-color: transparent transparent var(--mw-cyan);
}