/* Progressive, select-only control. The native field remains the form value. */
.djo-select { position: relative; min-width: 0; width: 100%; }
.djo-select__trigger {
  appearance: none; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; width: 100%; min-height: 52px; margin: 0; padding: 9px 12px 9px 16px;
  border: 1px solid #bdc5ce; border-radius: 8px; background: #f7f9fb;
  color: #031120; font: inherit; font-size: 14px; line-height: 1.5; text-align: left;
  cursor: pointer; transition: border-color .16s ease, background-color .16s ease;
}
.djo-select__value { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.djo-select.is-placeholder .djo-select__value { color: #536172; }
.djo-select__trigger:hover { border-color: #438cff; background: #fff; }
.djo-select__trigger:focus-visible { outline: 2px solid #245bc3; outline-offset: 3px; }
.djo-select.is-open .djo-select__trigger { border-color: #438cff; background: #fff; }
.djo-select__chevron {
  display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 50%; background: #e9eef4; color: #031120;
  transition: background-color .16s ease;
}
.djo-select__chevron::before {
  content: ''; width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .16s ease;
}
.djo-select.is-open .djo-select__chevron { background: #e9ff55; }
.djo-select.is-open .djo-select__chevron::before { margin-top: 3px; transform: rotate(225deg); }
.djo-select__menu {
  position: absolute; z-index: 35; top: calc(100% + 8px); left: 0; right: 0;
  max-height: var(--djo-select-max-height, 360px); padding: 8px; margin: 0;
  overflow-y: auto; overscroll-behavior: contain; scroll-padding: 8px;
  border: 1px solid #294561; border-radius: 14px; background: #071827; color: #fff;
  box-shadow: 0 18px 45px #03112038, 0 3px 8px #03112018;
  scrollbar-width: thin; scrollbar-color: #4b6680 #071827;
}
.djo-select__menu[hidden] { display: none; }
.djo-select.opens-up .djo-select__menu { top: auto; bottom: calc(100% + 8px); }
.djo-select__group + .djo-select__group { border-top: 1px solid #25384b; margin-top: 8px; padding-top: 5px; }
.djo-select__heading {
  padding: 11px 12px 6px; color: #a5b9cf; font-size: 10px; font-weight: 700;
  line-height: 1.5; letter-spacing: .09em; text-transform: uppercase;
}
.djo-select__option {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 46px; padding: 11px 12px; margin: 2px 0; border: 1px solid transparent;
  border-radius: 8px; color: #f4f7fb; font-size: 13px; line-height: 1.5;
  cursor: pointer; overflow-wrap: anywhere;
}
.djo-select__option > span:first-child { min-width: 0; }
.djo-select__option.is-active { border-color: #438cff; background: #173650; }
.djo-select__option[aria-selected="true"] { color: #e9ff55; background: #112a3d; }
.djo-select__option[aria-selected="true"].is-active { border-color: #8caedf; background: #173650; }
.djo-select__check {
  display: grid; place-items: center; width: 19px; height: 19px; flex: 0 0 19px;
  border-radius: 50%; background: #e9ff55; color: #031120; visibility: hidden;
}
.djo-select__check::before {
  content: ''; width: 7px; height: 4px; margin-top: -2px;
  border-bottom: 1.5px solid currentColor; border-left: 1.5px solid currentColor;
  transform: rotate(-45deg);
}
.djo-select__option[aria-selected="true"] .djo-select__check { visibility: visible; }
.djo-select__trigger[aria-invalid="true"] { border-color: #b42318; }
@media (max-width: 600px) {
  .djo-select__trigger { font-size: 14px; gap: 10px; }
  .djo-select__menu { border-radius: 12px; }
  .djo-select__option { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .djo-select__trigger, .djo-select__chevron, .djo-select__chevron::before { transition: none; }
}