/* Native selects remain available until the enhanced controls are ready. */
.order-fields > .field { min-width: 0; }
.field .select-wrap select {
  min-height: 56px;
  padding-right: 42px;
  border-radius: 7px;
  font-size: 14px;
  color-scheme: dark;
}
.field select option { background: #141d21; color: #f1efe9; }
.select-wrap > .select-chevron {
  top: 50%; right: 15px;
  transform: translateY(-50%);
  color: var(--gold);
  stroke: var(--gold);
}
.select-wrap.is-enhanced > .select-chevron { display: none; }
.dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%; min-width: 0; min-height: 66px;
  padding: 11px 13px;
  border: 1px solid #3d4b50;
  border-radius: 7px;
  background: linear-gradient(135deg, #172126, #10171a);
  color: var(--text);
  text-align: left;
  line-height: 1.4;
  box-shadow: 0 2px 3px #00000014;
  touch-action: manipulation;
}
.dropdown-trigger[aria-expanded="true"] {
  border-color: var(--gold);
  background: #1b2529;
  box-shadow: 0 0 0 3px #d9b98012;
}
.dropdown-trigger:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}
.dropdown-symbol {
  display: grid; place-items: center;
  flex: 0 0 32px;
  width: 32px; height: 34px;
  color: var(--gold);
  background: #d9b9800b;
  border: 1px solid #d9b98026;
  border-radius: 5px;
}
.dropdown-symbol .icon { width: 18px; height: 18px; }
.dropdown-value { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.dropdown-title { display: block; color: var(--text); font-size: 14px; font-weight: 700; }
.dropdown-detail { display: block; color: #aab7b9; font-size: 11px; font-weight: 400; line-height: 1.4; }
.dropdown-chevron {
  width: 18px; height: 18px; flex: 0 0 18px; margin-left: auto;
  fill: none; stroke: var(--gold); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s ease;
}
.dropdown-trigger[aria-expanded="true"] .dropdown-chevron { transform: rotate(180deg); }
.dropdown-list {
  position: fixed; z-index: 200;
  margin: 0; padding: 7px;
  border: 1px solid #a88c586e;
  border-radius: 10px;
  background: #172126;
  box-shadow: 0 18px 55px #0009, 0 2px 6px #0005;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #796849 #172126;
  -webkit-overflow-scrolling: touch;
}
.dropdown-list[hidden] { display: none; }
.dropdown-option {
  display: flex; align-items: center; gap: 16px;
  min-height: 60px; padding: 11px 13px;
  border: 1px solid transparent; border-radius: 5px;
  cursor: pointer; user-select: none;
  line-height: 1.4;
}
.dropdown-option + .dropdown-option { margin-top: 3px; }
.dropdown-option .dropdown-detail { font-size: 12px; }
.dropdown-option[aria-selected="true"] { background: #d9b98014; }
.dropdown-option.is-active { border-color: #d9b98070; background: #d9b9801c; }
.dropdown-option.is-active .dropdown-title,
.dropdown-option[aria-selected="true"] .dropdown-title { color: var(--gold-light); }
.dropdown-check {
  display: grid; place-items: center;
  flex: 0 0 22px; width: 22px; height: 22px;
  border: 1px solid #647175;
  border-radius: 50%; color: transparent;
}
.dropdown-check .icon { width: 14px; height: 14px; stroke-width: 2; }
.dropdown-option[aria-selected="true"] .dropdown-check {
  border-color: var(--gold); background: var(--gold); color: #172126;
}
@media (hover: hover) {
  .dropdown-trigger:hover { border-color: #a88c58; background: #1b2529; }
  .dropdown-option:hover { background: #d9b98014; }
}
@media (max-width: 640px) {
  .order-fields { grid-template-columns: minmax(0, 1fr); gap: 19px; }
  .order-fields .field:last-child { grid-column: auto; }
  .dropdown-trigger { min-height: 70px; padding: 12px 15px; gap: 13px; }
  .dropdown-symbol { width: 36px; height: 38px; flex-basis: 36px; }
  .dropdown-title, .field .select-wrap select { font-size: 16px; }
  .dropdown-detail { font-size: 12px; }
  .dropdown-option { min-height: 66px; padding: 12px 13px; }
  .dropdown-option .dropdown-title { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .dropdown-trigger, .dropdown-chevron { transition: none; }
}
@media (forced-colors: active) {
  .dropdown-trigger, .dropdown-list, .dropdown-option.is-active { border-color: ButtonText; }
  .dropdown-check { color: Canvas; }
  .dropdown-option[aria-selected="true"] .dropdown-check { background: Highlight; color: HighlightText; }
}