/*
 * Dark-mode contrast fixes for the product filter and top-up amount controls.
 * These rules are intentionally scoped to dark mode so the existing light
 * theme keeps its own contrast treatment.
 */
html.dark body select,
html.dark body select option {
  color: hsl(var(--tn-copy)) !important;
  background-color: hsl(222 24% 12%) !important;
  color-scheme: dark;
}

html.dark body [data-radix-select-content],
html.dark body [data-radix-menu-content] {
  background: hsl(222 24% 12% / 0.99) !important;
  color: hsl(var(--tn-copy)) !important;
}

html.dark body [data-radix-select-item],
html.dark body [data-radix-menu-item] {
  color: hsl(var(--tn-copy)) !important;
  background: transparent !important;
}

html.dark body [data-radix-select-item][data-highlighted],
html.dark body [data-radix-menu-item][data-highlighted] {
  color: hsl(var(--tn-aqua)) !important;
  background: hsl(185 74% 56% / 0.14) !important;
}

html.dark body [data-radix-select-item][data-state="checked"] {
  color: hsl(var(--tn-aqua)) !important;
  background: hsl(185 74% 56% / 0.1) !important;
}

/* Radix-style combobox triggers used by product/category filters. */
html.dark body [role="combobox"],
html.dark body [role="combobox"] * {
  color: hsl(var(--tn-copy)) !important;
}

html.dark body [role="combobox"][data-state="open"],
html.dark body [role="combobox"][data-state="open"] * {
  color: hsl(var(--tn-aqua)) !important;
}

/* Preset top-up amounts are buttons, not native select options. */
html.dark body button[class*="text-foreground"],
html.dark body button[class*="text-muted-foreground"] {
  color: hsl(var(--tn-copy)) !important;
}

html.dark body button[class*="text-foreground"]:hover,
html.dark body button[class*="text-muted-foreground"]:hover,
html.dark body button[class*="border-primary"] {
  color: #bfdbfe !important;
}

/*
 * Make the active filter and selected nominal unmistakably blue, matching
 * the light-mode selection cue instead of the darker aqua used elsewhere.
 */
html.dark body button[class*="border-primary"] {
  background: linear-gradient(
    135deg,
    rgb(37 99 235 / 0.3),
    rgb(14 165 233 / 0.2)
  ) !important;
  border-color: #60a5fa !important;
  color: #dbeafe !important;
  box-shadow: 0 0 0 1px rgb(96 165 250 / 0.16), 0 8px 20px rgb(37 99 235 / 0.16);
}

html.dark body button[class*="border-primary"]:hover {
  background: linear-gradient(
    135deg,
    rgb(37 99 235 / 0.42),
    rgb(14 165 233 / 0.3)
  ) !important;
  border-color: #93c5fd !important;
  color: #eff6ff !important;
}

html.dark body [data-radix-select-item][data-state="checked"],
html.dark body [data-radix-select-item][data-highlighted] {
  background: rgb(37 99 235 / 0.24) !important;
  color: #dbeafe !important;
}

html.dark body [data-radix-select-item][data-state="checked"] svg,
html.dark body [data-radix-select-item][data-highlighted] svg {
  color: #60a5fa !important;
}