/**
 * HB-190 — Storefront select/dropdown contrast (light theme).
 *
 * Root cause: frozen CategoryBrands chunk still sets SelectContent
 * `bg-slate-700 border-slate-600` while SelectItem uses `text-slate-900`.
 * Radix portals render outside `.public-light-scope`, so BN2 remaps that
 * only rewrite slate backgrounds under that scope never reach the menu →
 * dark text on dark panel («Mới nhất» open menu).
 *
 * Overlay only: do NOT edit index-C7BUmI7G.js / index-BN2ZtJyR.css / D1.
 * Prefers light panel + dark ink (site light-theme policy).
 */

html.storefront-root {
  --hb190-menu-bg: #ffffff;
  --hb190-menu-ink: #0f172a;
  --hb190-menu-muted: #334155;
  --hb190-menu-border: #e2e8f0;
  --hb190-menu-hover: #e8fbff;
}

/* ---- Portaled select menus (body / popper; outside public-light-scope) ---- */
html.storefront-root [data-radix-select-content],
html.storefront-root [data-radix-select-viewport],
html.storefront-root [data-radix-popper-content-wrapper] [role="listbox"],
html.storefront-root body > [role="listbox"],
html.storefront-root [role="listbox"][class*="bg-slate-"],
html.storefront-root [role="listbox"][class*="bg-gray-"],
html.storefront-root [role="listbox"][class*="bg-zinc-"],
html.storefront-root [role="listbox"][class*="bg-neutral-"],
html.storefront-root [role="listbox"][class*="bg-popover"] {
  background-color: var(--hb190-menu-bg) !important;
  background-image: none !important;
  color: var(--hb190-menu-ink) !important;
  -webkit-text-fill-color: var(--hb190-menu-ink);
  border-color: var(--hb190-menu-border) !important;
  box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.12), 0 4px 6px -2px rgba(15, 23, 42, 0.06) !important;
}

html.storefront-root [data-radix-select-item],
html.storefront-root [data-radix-select-label],
html.storefront-root [role="listbox"] [role="option"],
html.storefront-root [role="listbox"] [data-radix-select-item] {
  color: var(--hb190-menu-ink) !important;
  -webkit-text-fill-color: var(--hb190-menu-ink);
  background-color: transparent;
}

html.storefront-root [data-radix-select-item][data-highlighted],
html.storefront-root [data-radix-select-item][data-state="checked"],
html.storefront-root [data-radix-select-item]:focus,
html.storefront-root [data-radix-select-item]:hover,
html.storefront-root [role="listbox"] [role="option"][data-highlighted],
html.storefront-root [role="listbox"] [role="option"][data-state="checked"],
html.storefront-root [role="listbox"] [role="option"]:focus,
html.storefront-root [role="listbox"] [role="option"]:hover {
  background-color: var(--hb190-menu-hover) !important;
  color: var(--hb190-menu-ink) !important;
  -webkit-text-fill-color: var(--hb190-menu-ink);
}

html.storefront-root [data-radix-select-item] span,
html.storefront-root [role="listbox"] [role="option"] span {
  color: inherit !important;
  -webkit-text-fill-color: inherit;
}

/* Triggers that still carry dark utility classes after partial remaps */
html.storefront-root [data-radix-select-trigger],
html.storefront-root button[role="combobox"][class*="bg-slate-"],
html.storefront-root button[role="combobox"][class*="bg-gray-"],
html.storefront-root button[role="combobox"][class*="bg-zinc-"] {
  background-color: #ffffff !important;
  color: var(--hb190-menu-ink) !important;
  -webkit-text-fill-color: var(--hb190-menu-ink);
  border-color: #cbd5e1 !important;
}

html.storefront-root [data-radix-select-trigger] span,
html.storefront-root [data-radix-select-value],
html.storefront-root button[role="combobox"] span {
  color: inherit !important;
  -webkit-text-fill-color: inherit;
}

html.storefront-root [data-radix-select-trigger] svg,
html.storefront-root button[role="combobox"] svg {
  color: var(--hb190-menu-muted) !important;
  opacity: 0.85;
}

/* Related portaled menus with the same dark-panel leftover pattern */
html.storefront-root [data-radix-dropdown-menu-content],
html.storefront-root [data-radix-dropdown-menu-sub-content],
html.storefront-root [data-radix-context-menu-content],
html.storefront-root [data-radix-context-menu-sub-content],
html.storefront-root [data-radix-menubar-content],
html.storefront-root [data-radix-menubar-sub-content] {
  background-color: var(--hb190-menu-bg) !important;
  color: var(--hb190-menu-ink) !important;
  -webkit-text-fill-color: var(--hb190-menu-ink);
  border-color: var(--hb190-menu-border) !important;
}

html.storefront-root [data-radix-dropdown-menu-item],
html.storefront-root [data-radix-dropdown-menu-checkbox-item],
html.storefront-root [data-radix-dropdown-menu-radio-item],
html.storefront-root [data-radix-dropdown-menu-label],
html.storefront-root [data-radix-context-menu-item],
html.storefront-root [data-radix-menubar-item] {
  color: var(--hb190-menu-ink) !important;
  -webkit-text-fill-color: var(--hb190-menu-ink);
}

html.storefront-root [data-radix-dropdown-menu-item][data-highlighted],
html.storefront-root [data-radix-dropdown-menu-item]:focus,
html.storefront-root [data-radix-context-menu-item][data-highlighted],
html.storefront-root [data-radix-menubar-item][data-highlighted] {
  background-color: var(--hb190-menu-hover) !important;
  color: var(--hb190-menu-ink) !important;
  -webkit-text-fill-color: var(--hb190-menu-ink);
}

/* Admin: same portal escape can leave dark SelectContent + dark item ink */
html.admin-root [data-radix-select-content],
html.admin-root [data-radix-select-viewport],
html.admin-root [data-radix-popper-content-wrapper] [role="listbox"],
html.admin-root body > [role="listbox"],
html.admin-root [role="listbox"][class*="bg-slate-"],
html.admin-root [role="listbox"][class*="bg-popover"] {
  background-color: var(--hb190-menu-bg, #ffffff) !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a;
  border-color: #e2e8f0 !important;
}

html.admin-root [data-radix-select-item],
html.admin-root [role="listbox"] [role="option"] {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a;
}

html.admin-root [data-radix-select-item][data-highlighted],
html.admin-root [data-radix-select-item][data-state="checked"],
html.admin-root [role="listbox"] [role="option"][data-highlighted],
html.admin-root [role="listbox"] [role="option"][data-state="checked"] {
  background-color: #e8fbff !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a;
}