/* Keep native form dropdowns visually consistent with FutraDay's dark header submenus.
   color-scheme requests a dark system popup; option colours provide readable fallbacks.
   The browser/operating system remains responsible for native option hover rendering. */
:root {
  --fd-select-menu-bg: #111712;
  --fd-select-menu-text: #e1e9df;
  --fd-select-menu-border: #39443b;
  --fd-select-menu-accent: #b8ff2c;
}
form select {
  color-scheme: dark;
  background: var(--fd-select-menu-bg) !important;
  color: var(--fd-select-menu-text) !important;
  border: 1px solid var(--fd-select-menu-border) !important;
  accent-color: var(--fd-select-menu-accent);
}
form select option,
form select optgroup {
  background-color: var(--fd-select-menu-bg);
  color: var(--fd-select-menu-text);
  font-style: normal;
}
form select option:checked {
  background-color: #31472b;
  color: #f8fff0;
}
form select:focus-visible {
  outline: 2px solid var(--fd-select-menu-accent);
  outline-offset: 2px;
}
@media (forced-colors: active) {
  form select, form select option, form select optgroup {
    color: CanvasText;
    background-color: Canvas;
    border-color: ButtonBorder;
  }
}

/* The blueprint form has a high-specificity transparent-field override;
   keep its select closed state consistent with the navigation dropdown. */
html body .plan-main .review-panel form select,
html body .plan-main .review-panel select {
  background: #111712 !important;
  color: #e1e9df !important;
  border: 1px solid #39443b !important;
}

/* Higher specificity than the blueprint's legacy :is() field gradient. */
html body #free-plan-form select {
  background: #111712 !important;
  color: #e1e9df !important;
  border: 1px solid #39443b !important;
}