/* Saudi nav: matches USA exactly — gray inactive, black active — 2026-10-08.
 * Uses the same CSS variables as the USA default so they always match.
 * White/transparent bar. Only targets html.country-sa. Does not touch /usa. */
html.country-sa .bottom-nav {
  background: rgba(255, 255, 255, 0.95) !important;
  border-block-start: 1px solid #e5e5ea !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html.country-sa .bottom-nav button {
  color: #8e8e93 !important;
  background: transparent !important;
  opacity: 1 !important;
}
html.country-sa .bottom-nav button.active {
  color: #111111 !important;
  opacity: 1 !important;
}
html.country-sa .bottom-nav button.active .nav-icon {
  background: transparent !important;
}
html.country-sa .bottom-nav button svg,
html.country-sa .bottom-nav button svg * {
  fill: none !important;
  stroke: currentColor !important;
}
html.country-sa .bottom-nav button span {
  color: inherit !important;
}

/* Dark mode: dark background, light icons — ONLY when the APP itself renders
   dark (its own theme class), NEVER on system dark-mode alone. The old rule
   used @media (prefers-color-scheme: dark), which painted the bar black on
   phones in system dark mode while the app renders light — wrong.
   (2026-10-19) */
html.country-sa .app-shell.dark-theme .bottom-nav,
html.country-sa .dark-theme .bottom-nav {
  background: rgba(10, 10, 12, 0.98) !important;
  border-block-start: 1px solid #38383a !important;
}
html.country-sa .app-shell.dark-theme .bottom-nav button,
html.country-sa .dark-theme .bottom-nav button {
  color: #8e8e93 !important;
}
html.country-sa .app-shell.dark-theme .bottom-nav button.active,
html.country-sa .dark-theme .bottom-nav button.active {
  color: #ffffff !important;
}
/* Also handle class-based dark mode */
html.dark.country-sa .bottom-nav,
html.country-sa.dark .bottom-nav,
html[data-theme="dark"].country-sa .bottom-nav {
  background: rgba(10, 10, 12, 0.98) !important;
  border-block-start: 1px solid #38383a !important;
}
html.dark.country-sa .bottom-nav button,
html.country-sa.dark .bottom-nav button,
html[data-theme="dark"].country-sa .bottom-nav button {
  color: #8e8e93 !important;
}
html.dark.country-sa .bottom-nav button.active,
html.country-sa.dark .bottom-nav button.active,
html[data-theme="dark"].country-sa .bottom-nav button.active {
  color: #ffffff !important;
}