/* Royal Bloomaa Theme Overrides
   Purpose: Dark mode and theme-level variables/overrides scoped via data attributes. */
/* Dark Mode Overrides — scoped to [data-theme="dark"] only
   This keeps existing LIGHT theme CSS untouched.
   Brand Aesthetic:
   - Background: #0E0E10
   - Card: #181A1B
   - Text: #E4E4E6 (secondary #B0B0B0)
   - Accent: #00B5B8 (hover glow)
*/

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E0E10;
  --card-bg: #181A1B;
  --text: #E4E4E6;
  --text-secondary: #B0B0B0;
  --accent: #00B5B8;
  --border: #2A2D2F;
  --link-hover: #22D3D6;
  --shadow: rgba(0,0,0,0.45);
}

/* Base */
:root[data-theme="dark"] html,
:root[data-theme="dark"] body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  font-family: "Inter", "Poppins", system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

:root[data-theme="dark"] a { color: var(--text); transition: color 0.3s ease-in-out; }
:root[data-theme="dark"] a:hover { color: var(--accent); }

/* Layout surfaces */
:root[data-theme="dark"] header,
:root[data-theme="dark"] .main-header_area,
:root[data-theme="dark"] .header-sticky,
:root[data-theme="dark"] footer,
:root[data-theme="dark"] .offcanvas-menu-inner,
:root[data-theme="dark"] .offcanvas-inner_info,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .rb-search-results-container {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .product-item,
:root[data-theme="dark"] .single-product,
:root[data-theme="dark"] .newsletter-form_wrap,
:root[data-theme="dark"] .subscribe-form,
:root[data-theme="dark"] .mobile-menu_wrapper,
:root[data-theme="dark"] .offcanvas-inner_nav,
:root[data-theme="dark"] .promo-banner-top,
:root[data-theme="dark"] .royal-megamenu_wrap,
:root[data-theme="dark"] .pd-slider-nav,
:root[data-theme="dark"] .product-details_slider,
:root[data-theme="dark"] .royal-dropdown {
  background-color: var(--card-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

:root[data-theme="dark"] hr,
:root[data-theme="dark"] .border,
:root[data-theme="dark"] .line,
:root[data-theme="dark"] .divider { border-color: var(--border) !important; }

/* Links and icons */
:root[data-theme="dark"] .royal-dropdown a,
:root[data-theme="dark"] .main-nav a,
:root[data-theme="dark"] .mm-text,
:root[data-theme="dark"] .minicart-count_area i,
:root[data-theme="dark"] .lastudioicon,
:root[data-theme="dark"] .dlicon,
:root[data-theme="dark"] .promo-item,
:root[data-theme="dark"] .product-name a {
  color: var(--text) !important;
}

:root[data-theme="dark"] .main-nav a:hover,
:root[data-theme="dark"] .royal-dropdown a:hover { color: var(--accent) !important; }

/* Buttons — minimal, with glow on dark */
:root[data-theme="dark"] button,
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .newsletter-btn,
:root[data-theme="dark"] .size-btn,
:root[data-theme="dark"] .menu-btn,
:root[data-theme="dark"] .minicart-btn,
:root[data-theme="dark"] .btn-cart-icon {
  background-color: transparent;
  color: var(--text);
  border-color: var(--border);
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out,
    border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

:root[data-theme="dark"] button:hover,
:root[data-theme="dark"] .btn:hover,
:root[data-theme="dark"] .newsletter-btn:hover,
:root[data-theme="dark"] .size-btn:hover,
:root[data-theme="dark"] .menu-btn:hover,
:root[data-theme="dark"] .minicart-btn:hover,
:root[data-theme="dark"] .btn-cart-icon:hover {
  box-shadow: 0 0 12px rgba(0, 181, 184, 0.6);
}

/* Theme switcher pill */
:root[data-theme="dark"] .rb-theme-toggle {
  appearance: none;
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  line-height: 1;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
:root[data-theme="dark"] .rb-theme-toggle:hover { border-color: var(--accent); box-shadow: 0 0 12px rgba(0,181,184,0.45); }
:root[data-theme="dark"] .rb-theme-toggle .icon { font-size: 14px; }

/* Sticky header elevation */
:root[data-theme="dark"] .header-sticky.sticky { background-color: var(--bg) !important; box-shadow: 0 6px 20px var(--shadow) !important; }

/* Inputs */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background-color: var(--card-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--text-secondary); }

/* Dropdowns */
:root[data-theme="dark"] .royal-dropdown a { color: var(--text) !important; }
:root[data-theme="dark"] .royal-dropdown a:hover { color: var(--accent) !important; }

/* Links hover accent */
:root[data-theme="dark"] .link,
:root[data-theme="dark"] .button-link,
:root[data-theme="dark"] .product-name a:hover { color: var(--accent) !important; }

/* ============================================== */
/* Dark Mode — Global Scrollbar Styling */
/* Match track with dark surfaces while keeping brand blue thumb */
/* ============================================== */
:root[data-theme="dark"] * {
  scrollbar-width: thin;
  scrollbar-color: #0098da var(--border);
}
:root[data-theme="dark"] *::-webkit-scrollbar-track { background: var(--border); }
:root[data-theme="dark"] *::-webkit-scrollbar-thumb { border-color: var(--border); }
/*
Theme CSS helpers.

- Light/dark palette tokens and utility classes
- Pair with static/js/theme.js to reflect user/system theme choice
*/