/* ============================================================
   header.css — All static header styles extracted from header.php
   Loaded via <link> so the browser caches this file across pages.
   DO NOT add PHP here. Theme colours use CSS custom properties
   already set by theme-generator.php (loaded before this file).
   ============================================================ */

/* Twemoji fallback images (includes/footer.php) — size to the surrounding
   text like a native emoji glyph instead of a stray oversized image. */
img.twemoji-icon {
  height: 1em; width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
  display: inline-block;
}

/* Custom base */
.glass-header {
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.75);
  border-bottom: 1px solid rgba(209, 213, 219, 0.4);
}

/* ====== DARK MODE – Header Components ====== */
.dark .mobile-glass-header,
.dark .desktop-glass-header {
  background: #09090b !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 24px -4px rgba(0, 0, 0, 0.6) !important;
}

.dark .premium-search-container {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}
.dark .premium-search-container:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
.dark .premium-search-container:focus-within {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(var(--theme-500-rgb), 0.5) !important;
  box-shadow: 0 0 0 3px rgba(var(--theme-500-rgb), 0.12) !important;
}
.dark .premium-search-input { color: #e2e8f0 !important; background-color: transparent !important; background: transparent !important; -webkit-appearance: none !important; color-scheme: light !important; }
.dark .premium-search-input::placeholder { color: #64748b !important; }
.dark input#searchInput { background-color: transparent !important; background: transparent !important; color-scheme: light !important; }
.dark .search-icon-wrapper {
  background: rgba(255, 255, 255, 0.06) !important;
}
.dark .search-icon-wrapper svg { color: #64748b !important; }
.dark .search-shortcut-badge {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #64748b !important;
}

.dark .premium-side-menu {
  background: rgba(9, 9, 11, 0.98) !important;
  box-shadow: 4px 0 40px rgba(0, 0, 0, 0.7) !important;
}
.dark .premium-profile-header {
  background: linear-gradient(135deg, #0d0d0f 0%, #09090b 50%, #0d0d0f 100%) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}
.dark .premium-menu-item:hover {
  background: linear-gradient(90deg, rgba(var(--theme-500-rgb), 0.08), rgba(22, 27, 34, 0.6)) !important;
}
.dark .menu-section-title { color: var(--ink-soft, #8b949e) !important; }
.dark .premium-menu-item span.text-gray-800 { color: var(--ink-2, #c9d1d9) !important; }

.dark .premium-dropdown {
  background: #161b22 !important;
  border-color: rgba(240, 246, 252, 0.1) !important;
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.6) !important;
}
.dark .premium-dropdown-item:hover {
  background: linear-gradient(90deg, rgba(var(--theme-500-rgb), 0.1), rgba(22, 27, 34, 0.8)) !important;
}
.dark .premium-dropdown-item span { color: var(--ink-2, #c9d1d9) !important; }

.dark .premium-support-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}
.dark .premium-support-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
.dark .premium-support-btn span,
.dark .premium-support-btn i { color: #94a3b8 !important; }
.dark .premium-support-btn:hover span,
.dark .premium-support-btn:hover i { color: #ffffff !important; }

.dark .premium-balance-display {
  background: rgba(var(--theme-500-rgb), 0.1) !important;
  border-color: rgba(var(--theme-500-rgb), 0.2) !important;
  color: var(--theme-400) !important;
}

.dark .balance-btn {
  background: rgba(var(--theme-500-rgb), 0.1) !important;
  border-color: rgba(var(--theme-500-rgb), 0.2) !important;
  color: var(--theme-400) !important;
}

.dark .menu-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.dark .menu-btn:hover {
  background: rgba(255, 255, 255, 0.09) !important;
}

/* Desktop floating nav pill (dark mode) */
.dark .premium-nav-shell,
.dark .floating-nav-shell {
  background: rgba(9, 9, 11, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05),
              0 8px 32px -8px rgba(0, 0, 0, 0.7),
              inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
.dark .floating-nav-shell:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07),
              0 12px 40px -8px rgba(0, 0, 0, 0.75),
              inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.dark .floating-nav-shell .premium-nav-link {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}
.dark .floating-nav-shell .premium-nav-link:hover {
  background: rgba(var(--theme-500-rgb), 0.12) !important;
  color: var(--theme-300) !important;
  border-color: rgba(var(--theme-500-rgb), 0.25) !important;
  box-shadow: 0 4px 16px rgba(var(--theme-500-rgb), 0.1) !important;
  transform: translateY(-2px);
}
.dark .floating-nav-shell .premium-nav-link.active {
  background: linear-gradient(135deg, var(--theme-500), var(--theme-600)) !important;
  color: #fff !important;
  border-color: rgba(var(--theme-400-rgb), 0.5) !important;
  box-shadow: 0 8px 24px rgba(var(--theme-500-rgb), 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.dark .premium-nav-link.text-gray-700 { color: var(--ink-soft, #8b949e) !important; }

.dark .auth-btn-login {
  background: #161b22 !important;
  border-color: var(--theme-500) !important;
  color: var(--theme-400) !important;
}
.dark .desktop-auth-btn-login {
  background: #161b22 !important;
  border-color: var(--theme-500) !important;
  color: var(--theme-400) !important;
}

.dark .dark-mode-toggle {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.dark .dark-mode-toggle:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Dark mode for footer */
.dark #desktopFooter {
  background: var(--paper-2, #111113) !important;
  border-top-color: var(--rule, rgba(255, 255, 255, 0.05)) !important;
}
/* Defaults only: the id sits in :where() and nothing is !important, so a
   theme's own footer and newsletter text wins with any selector of its own. */
.dark :where(#desktopFooter) h3,
.dark :where(#desktopFooter) h4 { color: var(--ink-2, #c9d1d9); }
.dark :where(#desktopFooter) p,
.dark :where(#desktopFooter) a,
.dark :where(#desktopFooter) li { color: var(--ink-soft, #8b949e); }
.dark :where(#desktopFooter) a:hover { color: var(--theme-400); }

/* Mobile bottom nav (dark mode) */
.dark .safe-area-bottom > div.mobile-bottom-nav {
  background: rgba(9, 9, 11, 0.97) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.04),
              0 -4px 24px -4px rgba(0, 0, 0, 0.6) !important;
}
.dark .safe-area-bottom a.text-gray-600 {
  color: #8b949e !important;
}
.dark .safe-area-bottom a.text-gray-600:hover {
  color: var(--theme-300) !important;
  background: rgba(var(--theme-500-rgb), 0.1) !important;
}
.dark .safe-area-bottom button.ring-4 {
  --tw-ring-color: rgba(22, 27, 34, 0.7) !important;
  border-color: rgba(var(--theme-400-rgb), 0.5) !important;
}

/* Explore sheet (dark mode) */
.dark #mobileExploreSheet .bg-white {
  background: #09090b !important;
}
.dark #mobileExploreSheet .rounded-t-3xl {
  border-top: 1px solid rgba(48, 54, 61, 0.4);
}
.dark #mobileExploreSheet .text-gray-900 { color: var(--ink, #e6edf3) !important; }
.dark #mobileExploreSheet .text-gray-600 { color: var(--ink-soft, #8b949e) !important; }
.dark #mobileExploreSheet .text-gray-700 { color: var(--ink-2, #c9d1d9) !important; }
.dark #mobileExploreSheet .text-gray-800 { color: var(--ink-2, #c9d1d9) !important; }
.dark #mobileExploreSheet .bg-gray-100 { background: var(--paper-2, #161b22) !important; }
.dark #mobileExploreSheet .hover\:bg-gray-200:hover { background: #2d333b !important; }
.dark #mobileExploreSheet .from-white { --tw-gradient-from: var(--paper-2, #161b22) !important; }
.dark #mobileExploreSheet .to-white { --tw-gradient-to: var(--paper-2, #161b22) !important; }
.dark #mobileExploreSheet .border-theme-100\/70 { border-color: rgba(48, 54, 61, 0.4) !important; }
.dark #mobileExploreSheet .from-gray-100 { --tw-gradient-from: var(--paper-2, #161b22) !important; }
.dark #mobileExploreSheet .to-gray-50 { --tw-gradient-to: var(--paper-2, #161b22) !important; }
.dark #mobileExploreSheet .border-gray-200 { border-color: var(--rule, #30363d) !important; }
.dark #mobileExploreSheet .bg-white\/70 { background: color-mix(in srgb, var(--paper-2, #161b22) 70%, transparent) !important; }
.dark #mobileExploreSheet .text-gray-500 { color: #6e7681 !important; }
.dark #mobileExploreSheet .shadow-inner { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important; }

/* Dark mode logout modal */
.dark #logoutModal .bg-white {
  background: #161b22 !important;
}
.dark #logoutModal .text-gray-800 { color: var(--ink-2, #c9d1d9) !important; }
.dark #logoutModal .text-gray-600 { color: var(--ink-soft, #8b949e) !important; }
.dark #logoutModal .bg-gray-100 { background: var(--paper-3, #21262d) !important; }

/* Additional dark mode overrides for slate/gray classes */
.dark .text-slate-900 { color: var(--ink, #e6edf3) !important; }
.dark .text-slate-800 { color: var(--ink, #e6edf3) !important; }
.dark .text-slate-700 { color: var(--ink-2, #c9d1d9) !important; }
.dark .text-slate-600 { color: var(--ink-2, #c9d1d9) !important; }
.dark .text-slate-500 { color: var(--ink-soft, #8b949e) !important; }
.dark .bg-slate-50 { background-color: var(--paper-2, #161b22) !important; }
.dark .bg-slate-100 { background-color: var(--paper-2, #161b22) !important; }
.dark .bg-slate-200 { background-color: var(--paper-3, #21262d) !important; }
.dark .border-gray-100 { border-color: var(--rule, #30363d) !important; }
.dark .border-slate-100 { border-color: var(--rule, #30363d) !important; }
.dark .border-slate-200 { border-color: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }
.dark .border-slate-300 { border-color: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }
.dark .ring-gray-100 { --tw-ring-color: var(--rule, #30363d) !important; }
.dark .ring-gray-200 { --tw-ring-color: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }

/* Dark mode for common cards and panels */
.dark .bg-white\/80 { background-color: color-mix(in srgb, var(--paper-2, #161b22) 80%, transparent) !important; }
.dark .bg-white\/90 { background-color: color-mix(in srgb, var(--paper-2, #161b22) 90%, transparent) !important; }
.dark .bg-white\/95 { background-color: color-mix(in srgb, var(--paper-2, #161b22) 95%, transparent) !important; }
.dark .bg-gray-50\/50 { background-color: color-mix(in srgb, var(--paper-2, #161b22) 50%, transparent) !important; }
.dark .from-white { --tw-gradient-from: var(--paper, #09090b) !important; }
.dark .to-white { --tw-gradient-to: var(--paper, #09090b) !important; }
.dark .from-gray-50 { --tw-gradient-from: var(--paper, #09090b) !important; }
.dark .to-gray-50 { --tw-gradient-to: var(--paper, #09090b) !important; }
.dark .from-gray-100 { --tw-gradient-from: var(--paper-2, #111113) !important; }
.dark .to-gray-100 { --tw-gradient-to: var(--paper-2, #111113) !important; }

/* Dark mode for swiper navigation */
.dark .swiper-button-prev::after,
.dark .swiper-button-next::after { color: var(--ink-2, #c9d1d9) !important; }

.dark body { background-color: var(--paper, #09090b) !important; }

/* Dark mode for colored accent backgrounds (-50 shades). No !important: a
   theme's own tile colour wins over these. */
.dark .bg-blue-50 { background-color: rgba(30, 58, 138, 0.2); }
.dark .bg-green-50 { background-color: rgba(20, 83, 45, 0.2); }
.dark .bg-yellow-50 { background-color: rgba(113, 63, 18, 0.2); }
.dark .bg-red-50 { background-color: rgba(127, 29, 29, 0.2); }
.dark .bg-purple-50 { background-color: rgba(88, 28, 135, 0.2); }
.dark .bg-pink-50 { background-color: rgba(131, 24, 67, 0.2); }
.dark .bg-amber-50 { background-color: rgba(120, 53, 15, 0.2); }
.dark .bg-teal-50 { background-color: rgba(19, 78, 74, 0.2); }
.dark .bg-cyan-50 { background-color: rgba(22, 78, 99, 0.2); }
.dark .bg-indigo-50 { background-color: rgba(49, 46, 129, 0.2); }
.dark .bg-emerald-50 { background-color: color-mix(in srgb, var(--px-good, #10b981) 16%, var(--paper, #0b0b0f)); }
.dark .bg-rose-50 { background-color: rgba(136, 19, 55, 0.2); }
.dark .bg-violet-50 { background-color: rgba(91, 33, 182, 0.2); }
.dark .bg-orange-50 { background-color: rgba(124, 45, 18, 0.2); }
.dark .bg-sky-50 { background-color: rgba(12, 74, 110, 0.2); }
.dark .bg-sky-100 { background-color: rgba(12, 74, 110, 0.25); }
.dark .bg-blue-100 { background-color: rgba(30, 58, 138, 0.25); }
.dark .bg-green-100 { background-color: rgba(20, 83, 45, 0.25); }
.dark .bg-yellow-100 { background-color: rgba(113, 63, 18, 0.25); }
.dark .bg-red-100 { background-color: rgba(127, 29, 29, 0.25); }
.dark .bg-purple-100 { background-color: rgba(88, 28, 135, 0.25); }
.dark .bg-emerald-100 { background-color: rgba(6, 78, 59, 0.25); }

/* Dark mode colored gradient stops (-50) */
.dark .from-blue-50 { --tw-gradient-from: rgba(30, 58, 138, 0.2) !important; }
.dark .from-green-50 { --tw-gradient-from: rgba(20, 83, 45, 0.2) !important; }
.dark .from-purple-50 { --tw-gradient-from: rgba(88, 28, 135, 0.2) !important; }
.dark .from-emerald-50 { --tw-gradient-from: rgba(6, 78, 59, 0.2) !important; }
.dark .from-amber-50 { --tw-gradient-from: rgba(120, 53, 15, 0.2) !important; }
.dark .from-indigo-50 { --tw-gradient-from: rgba(49, 46, 129, 0.2) !important; }
.dark .from-teal-50 { --tw-gradient-from: rgba(19, 78, 74, 0.2) !important; }
.dark .from-pink-50 { --tw-gradient-from: rgba(131, 24, 67, 0.2) !important; }
.dark .from-orange-50 { --tw-gradient-from: rgba(124, 45, 18, 0.2) !important; }
.dark .from-sky-50 { --tw-gradient-from: rgba(12, 74, 110, 0.2) !important; }
.dark .from-rose-50 { --tw-gradient-from: rgba(136, 19, 55, 0.2) !important; }

.dark .to-blue-50 { --tw-gradient-to: rgba(30, 58, 138, 0.15) !important; }
.dark .to-blue-100 { --tw-gradient-to: rgba(30, 58, 138, 0.2) !important; }
.dark .to-green-50 { --tw-gradient-to: rgba(20, 83, 45, 0.15) !important; }
.dark .to-purple-50 { --tw-gradient-to: rgba(88, 28, 135, 0.15) !important; }
.dark .to-indigo-50 { --tw-gradient-to: rgba(49, 46, 129, 0.15) !important; }
.dark .to-pink-50 { --tw-gradient-to: rgba(131, 24, 67, 0.15) !important; }
.dark .to-cyan-50 { --tw-gradient-to: rgba(22, 78, 99, 0.15) !important; }
.dark .to-teal-50 { --tw-gradient-to: rgba(19, 78, 74, 0.15) !important; }
.dark .to-amber-50 { --tw-gradient-to: rgba(120, 53, 15, 0.15) !important; }
.dark .to-amber-100 { --tw-gradient-to: rgba(120, 53, 15, 0.2) !important; }
.dark .to-orange-50 { --tw-gradient-to: rgba(124, 45, 18, 0.15) !important; }

/* Dark mode colored gradient stops (-100) */
.dark .from-blue-100 { --tw-gradient-from: rgba(30, 58, 138, 0.25) !important; }
.dark .from-green-100 { --tw-gradient-from: rgba(20, 83, 45, 0.25) !important; }
.dark .from-purple-100 { --tw-gradient-from: rgba(88, 28, 135, 0.25) !important; }
.dark .from-indigo-100 { --tw-gradient-from: rgba(49, 46, 129, 0.25) !important; }
.dark .from-amber-100 { --tw-gradient-from: rgba(120, 53, 15, 0.25) !important; }
.dark .from-pink-100 { --tw-gradient-from: rgba(131, 24, 67, 0.25) !important; }
.dark .from-teal-100 { --tw-gradient-from: rgba(19, 78, 74, 0.25) !important; }

.dark .to-blue-200 { --tw-gradient-to: rgba(30, 58, 138, 0.3) !important; }
.dark .to-green-100 { --tw-gradient-to: rgba(20, 83, 45, 0.2) !important; }
.dark .to-purple-100 { --tw-gradient-to: rgba(88, 28, 135, 0.2) !important; }
.dark .to-indigo-100 { --tw-gradient-to: rgba(49, 46, 129, 0.2) !important; }

/* Dark mode for transparent white backgrounds */
.dark .bg-white\/60 { background-color: color-mix(in srgb, var(--paper-2, #161b22) 60%, transparent) !important; }
.dark .bg-white\/70 { background-color: color-mix(in srgb, var(--paper-2, #161b22) 70%, transparent) !important; }
.dark .bg-white\/75 { background-color: color-mix(in srgb, var(--paper-2, #161b22) 75%, transparent) !important; }
.dark .bg-white\/85 { background-color: color-mix(in srgb, var(--paper-2, #161b22) 85%, transparent) !important; }
.dark .bg-white\/92 { background-color: color-mix(in srgb, var(--paper-2, #161b22) 92%, transparent) !important; }

.dark .glass-card {
  background: rgba(22, 27, 34, 0.75) !important;
  border-color: rgba(240, 246, 252, 0.1) !important;
}

.dark .gradient-bg {
  background: linear-gradient(-45deg, #1e1b4b, #312e81, #161b22, #0c0f14) !important;
  background-size: 400% 400% !important;
}

/* Dark mode colored text */
.dark .text-blue-900 { color: #93c5fd !important; }
.dark .text-green-900 { color: #86efac !important; }
.dark .text-yellow-900 { color: #fde047 !important; }
.dark .text-yellow-800 { color: #fde047 !important; }
.dark .text-red-900 { color: #fca5a5 !important; }
.dark .text-purple-900 { color: #d8b4fe !important; }
.dark .text-orange-900 { color: #fdba74 !important; }
.dark .text-blue-800 { color: #93c5fd !important; }
.dark .text-green-800 { color: #86efac !important; }

/* Dark mode colored borders */
.dark .border-blue-100 { border-color: rgba(30, 58, 138, 0.35) !important; }
.dark .border-theme-200 { border-color: rgba(30, 58, 138, 0.4) !important; }
.dark .border-green-200 { border-color: rgba(20, 83, 45, 0.4) !important; }
.dark .border-yellow-200 { border-color: rgba(113, 63, 18, 0.4) !important; }
.dark .border-red-200 { border-color: rgba(127, 29, 29, 0.4) !important; }
.dark .border-purple-200 { border-color: rgba(88, 28, 135, 0.4) !important; }
.dark .border-orange-200 { border-color: rgba(124, 45, 18, 0.4) !important; }
.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--rule, #30363d) !important; }
.dark .text-theme-600 { color: var(--theme-400) !important; }
.dark .text-theme-700 { color: var(--theme-400) !important; }
.dark .backdrop-blur-lg { backdrop-filter: blur(16px) !important; }
.dark .search-input {
  background-color: #161b22 !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}
.dark .search-placeholder { color: var(--ink-soft, #8b949e) !important; }
.dark .hover\:bg-gray-800:hover { background-color: #2d333b !important; }
.dark .bg-white.text-gray-700 { color: var(--ink-2, #c9d1d9) !important; }
.dark .bg-gray-100.text-gray-400 { color: #6e7681 !important; }
.dark .border-dashed { border-color: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }

/* ====== GLOBAL DARK MODE OVERRIDES – Core Tailwind Utilities ====== */
.dark .bg-white { background-color: var(--paper-2, #161b22) !important; }
.dark .bg-white\/50 { background-color: color-mix(in srgb, var(--paper-2, #161b22) 50%, transparent) !important; }
.dark .bg-gray-50 { background-color: var(--paper, #09090b) !important; }
.dark .bg-gray-100 { background-color: var(--paper-2, #111113) !important; }
.dark .bg-gray-200 { background-color: var(--paper-3, #21262d) !important; }
.dark .bg-gray-300 { background-color: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }
.dark .bg-gray-50\/50 { background-color: rgba(12, 15, 20, 0.5) !important; }
.dark .bg-gray-50\/80 { background-color: rgba(12, 15, 20, 0.8) !important; }
.dark .bg-gray-100\/50 { background-color: color-mix(in srgb, var(--paper-2, #161b22) 50%, transparent) !important; }
.dark .bg-gray-100\/80 { background-color: color-mix(in srgb, var(--paper-2, #161b22) 80%, transparent) !important; }
.dark .text-gray-900 { color: var(--ink, #e6edf3) !important; }
.dark .text-gray-800 { color: var(--ink, #e6edf3) !important; }
/* Gold buttons (from-yellow-400) stay gold in dark mode, so their dark
   lettering must stay dark too; the rule above would turn it pale. */
.dark .from-yellow-400.text-gray-900 { color: #1c1300 !important; }
.dark .text-gray-700 { color: var(--ink-2, #c9d1d9) !important; }
.dark .text-gray-600 { color: var(--ink-2, #c9d1d9) !important; }
.dark .text-gray-500 { color: var(--ink-soft, #8b949e) !important; }
.dark .text-gray-400 { color: var(--ink-soft, #8b949e) !important; }
.dark .text-gray-300 { color: var(--ink-2, #c9d1d9) !important; }
.dark .text-black { color: var(--ink, #e6edf3) !important; }
.dark .border-gray-200 { border-color: var(--rule, #30363d) !important; }
.dark .border-gray-300 { border-color: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }
.dark .border-gray-400 { border-color: #6e7681 !important; }
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--rule, #30363d) !important; }
.dark .divide-gray-300 > :not([hidden]) ~ :not([hidden]) { border-color: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }
.dark .hover\:bg-gray-50:hover { background-color: color-mix(in srgb, var(--ink, #e6edf3) 8%, var(--paper, #0d1117)) !important; }
.dark .hover\:bg-gray-100:hover { background-color: color-mix(in srgb, var(--ink, #e6edf3) 8%, var(--paper, #0d1117)) !important; }
.dark .hover\:bg-gray-200:hover { background-color: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }
.dark .hover\:bg-white:hover { background-color: color-mix(in srgb, var(--ink, #e6edf3) 8%, var(--paper, #0d1117)) !important; }
.dark .hover\:text-gray-700:hover { color: var(--ink-2, #c9d1d9) !important; }
.dark .hover\:text-gray-900:hover { color: var(--ink, #e6edf3) !important; }
.dark .hover\:border-gray-300:hover { border-color: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }
.dark .hover\:border-gray-400:hover { border-color: #6e7681 !important; }
.dark .ring-gray-300 { --tw-ring-color: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }
.dark .ring-slate-200 { --tw-ring-color: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }
.dark .ring-slate-300 { --tw-ring-color: #6e7681 !important; }
.dark .focus\:ring-gray-200:focus { --tw-ring-color: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }
.dark .focus\:ring-gray-300:focus { --tw-ring-color: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }
.dark .placeholder-gray-400::placeholder { color: #6e7681 !important; }
.dark .placeholder-gray-500::placeholder { color: #6e7681 !important; }
/* The language picker's search box takes its placeholder from the picker and the theme. */
.dark input:not(.px-lang-picker__search-input)::placeholder,
.dark textarea::placeholder,
.dark select::placeholder { color: #6e7681 !important; }
.dark .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important; }
.dark .shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4) !important; }
.dark .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4) !important; }
.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4) !important; }
.dark .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4) !important; }
.dark .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important; }
/* A theme that styles its own field in dark mode marks it .no-dark. */
/* Zero specificity (:where), so a theme's own !important field colours win
   over these without .no-dark; a plain utility class still doesn't. */
:where(.dark) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], .no-dark), textarea:not(.no-dark), select:not(.no-dark)) {
  background-color: #0d1117 !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}
:where(.dark) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], .no-dark), textarea:not(.no-dark), select:not(.no-dark)):focus {
  border-color: var(--theme-500) !important;
}
.dark table { border-color: var(--rule, #30363d) !important; }
.dark thead { background-color: var(--paper-2, #161b22) !important; }
.dark thead:where(.px-thead--paper) { background-color: var(--paper, var(--paper-2, #161b22)) !important; }
.dark th { color: var(--ink-2, #c9d1d9) !important; border-color: var(--rule, #30363d) !important; }
.dark td { border-color: var(--rule, #30363d) !important; }
.dark tbody tr { border-color: var(--rule, #30363d) !important; }
.dark tbody tr:hover { background-color: color-mix(in srgb, var(--paper-2, #161b22) 50%, transparent) !important; }
.dark .even\:bg-gray-50:nth-child(even) { background-color: #0c0f14 !important; }
.dark .odd\:bg-white:nth-child(odd) { background-color: var(--paper-2, #161b22) !important; }
.dark .bg-black\/50 { background-color: rgba(0, 0, 0, 0.7) !important; }
.dark [class*="modal"] .bg-white,
.dark [x-show] .bg-white,
.dark [x-data] .bg-white { background-color: var(--paper-2, #161b22) !important; }
/* The theme's surface token, not a fixed navy, and not !important, so a
   theme's own card (seller dashboard, phone header) keeps its colour. */
.dark .bg-white.rounded-lg,
.dark .bg-white.rounded-xl,
.dark .bg-white.rounded-2xl,
.dark .bg-white.shadow,
.dark .bg-white.shadow-sm,
.dark .bg-white.shadow-md,
.dark .bg-white.shadow-lg,
.dark .bg-white.shadow-xl { background-color: var(--bg-secondary, var(--paper-2, #161b22)); }
.dark .from-gray-200 { --tw-gradient-from: var(--paper-3, #21262d) !important; }
.dark .to-gray-200 { --tw-gradient-to: var(--paper-3, #21262d) !important; }
.dark .via-white { --tw-gradient-via: var(--paper-2, #161b22) !important; }
.dark .via-gray-50 { --tw-gradient-via: #0c0f14 !important; }
/* Blue is the store's accent (dynamic-theme.css maps it to --theme-600 with
   !important), so after dark it takes the pale end of the accent. */
.dark .text-blue-600 { color: var(--theme-300, #60a5fa) !important; }
.dark .text-blue-700 { color: var(--theme-300, #60a5fa) !important; }
/* Status hues after dark. No !important, so a theme's own colour wins. */
.dark .text-green-600 { color: #4ade80; }
.dark .text-green-700 { color: #4ade80; }
.dark .text-red-600 { color: #f87171; }
.dark .text-red-700 { color: #f87171; }
.dark .text-yellow-600 { color: #facc15; }
.dark .text-yellow-700 { color: #facc15; }
.dark .text-purple-600 { color: #c084fc; }
.dark .text-purple-700 { color: #c084fc; }
.dark .text-orange-600 { color: #fb923c; }
.dark .text-orange-700 { color: #fb923c; }
.dark .text-indigo-600 { color: #818cf8; }
.dark .text-indigo-700 { color: #818cf8; }
.dark .text-pink-600 { color: #f472b6; }
.dark .text-pink-700 { color: #f472b6; }
.dark .text-teal-600 { color: #2dd4bf; }
.dark .text-teal-700 { color: #2dd4bf; }
.dark .text-emerald-600 { color: #34d399; }
.dark .text-emerald-700 { color: #34d399; }
.dark .text-amber-600 { color: #fbbf24; }
.dark .text-amber-700 { color: #fbbf24; }
.dark .text-cyan-600 { color: #22d3ee; }
.dark .text-cyan-700 { color: #22d3ee; }
.dark .text-rose-600 { color: #fb7185; }
.dark .text-rose-700 { color: #fb7185; }
.dark .border-blue-200 { border-color: rgba(30, 58, 138, 0.4) !important; }
.dark .border-green-100 { border-color: rgba(20, 83, 45, 0.35) !important; }
.dark .border-red-100 { border-color: rgba(127, 29, 29, 0.35) !important; }
.dark .border-red-200 { border-color: rgba(127, 29, 29, 0.4) !important; }
.dark .border-yellow-100 { border-color: rgba(113, 63, 18, 0.35) !important; }
.dark .border-purple-100 { border-color: rgba(88, 28, 135, 0.35) !important; }
.dark .border-indigo-200 { border-color: rgba(49, 46, 129, 0.4) !important; }
.dark .border-pink-200 { border-color: rgba(131, 24, 67, 0.4) !important; }
.dark .border-amber-200 { border-color: rgba(120, 53, 15, 0.4) !important; }
.dark .border-teal-200 { border-color: rgba(19, 78, 74, 0.4) !important; }
.dark .border-emerald-200 { border-color: rgba(6, 78, 59, 0.4) !important; }
.dark .border-cyan-200 { border-color: rgba(22, 78, 99, 0.4) !important; }
.dark .border-orange-100 { border-color: rgba(124, 45, 18, 0.35) !important; }
.dark .border-rose-200 { border-color: rgba(136, 19, 55, 0.4) !important; }
.dark .border-violet-200 { border-color: rgba(91, 33, 182, 0.4) !important; }
.dark .border-sky-200 { border-color: rgba(12, 74, 110, 0.4) !important; }
.dark .border-theme-100 { border-color: rgba(var(--theme-400-rgb, 96, 165, 250), 0.3) !important; }
.dark .bg-amber-100 { background-color: rgba(120, 53, 15, 0.25); }
.dark .bg-teal-100 { background-color: rgba(19, 78, 74, 0.25); }
.dark .bg-cyan-100 { background-color: rgba(22, 78, 99, 0.25); }
.dark .bg-indigo-100 { background-color: rgba(49, 46, 129, 0.25); }
.dark .bg-rose-100 { background-color: rgba(136, 19, 55, 0.25); }
.dark .bg-violet-100 { background-color: rgba(91, 33, 182, 0.25); }
.dark .bg-orange-100 { background-color: rgba(124, 45, 18, 0.25); }
.dark .bg-pink-100 { background-color: rgba(131, 24, 67, 0.25); }
.dark .bg-theme-50 { background-color: rgba(var(--theme-500-rgb, 99, 102, 241), 0.15) !important; }
.dark .bg-theme-100 { background-color: rgba(var(--theme-500-rgb, 99, 102, 241), 0.2) !important; }
.dark ::-webkit-scrollbar-track { background: #0c0f14 !important; }
.dark ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }
.dark ::-webkit-scrollbar-thumb:hover { background: #6e7681 !important; }
.dark hr { border-color: var(--rule, #30363d) !important; }
.dark pre { background-color: #0c0f14 !important; color: var(--ink-2, #c9d1d9) !important; }
.dark code { background-color: #0c0f14 !important; color: var(--ink-2, #c9d1d9) !important; }
.dark .breadcrumb a { color: var(--ink-soft, #8b949e) !important; }
.dark .breadcrumb a:hover { color: var(--ink-2, #c9d1d9) !important; }
.dark .swal2-popup { background-color: var(--paper-2, #161b22) !important; color: var(--ink, #e6edf3) !important; }
.dark .swal2-title { color: var(--ink, #e6edf3) !important; }
.dark .swal2-html-container { color: var(--ink-2, #c9d1d9) !important; }
.dark .swal2-input { background-color: #0d1117 !important; border-color: var(--rule, #30363d) !important; color: var(--ink, #e6edf3) !important; }
.dark [x-show][class*="bg-white"] { background-color: var(--paper-2, #161b22) !important; }
.dark [x-show][class*="border-gray"] { border-color: var(--rule, #30363d) !important; }
.dark option { background-color: var(--paper-2, #161b22) !important; color: var(--ink, #e6edf3) !important; }
.dark .from-white { --tw-gradient-from: var(--paper, #09090b) !important; }
.dark .to-white { --tw-gradient-to: var(--paper, #09090b) !important; }
.dark .via-white { --tw-gradient-via: var(--paper-2, #111113) !important; }
.dark .from-gray-50 { --tw-gradient-from: var(--paper, #09090b) !important; }
.dark .from-gray-100 { --tw-gradient-from: var(--paper-2, #111113) !important; }
.dark .to-gray-100 { --tw-gradient-to: var(--paper-2, #111113) !important; }
.dark .to-gray-50 { --tw-gradient-to: var(--paper, #09090b) !important; }
.dark .bg-\[\#f7f8fa\] { background-color: var(--paper, #09090b) !important; }
.dark .bg-\[\#f8fafc\] { background-color: var(--paper, #09090b) !important; }
.dark .bg-\[radial-gradient\(circle_at_20\%_50\%\,rgba\(255\,255\,255\,0\.1\)_0\%\,transparent_50\%\)\] {
  background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.03) 0%, transparent 50%) !important;
}
/* ====== END GLOBAL DARK MODE OVERRIDES ====== */

.nav-link {
  position: relative;
  padding-bottom: 4px;
}
.nav-link::after {
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--theme-500);
  transition: width 0.3s ease-in-out;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}
#mobileMenu.hidden { display: none; }
/* Show the focus ring only for keyboard navigation, never on mouse clicks.
   Buttons are excluded entirely — their pressed/active states already give
   enough visual feedback, and icon-only buttons (close/FAB/etc.) don't read
   well with a ring stamped over them. */
input:focus-visible, a:focus-visible {
  outline: 2px solid var(--theme-500);
  outline-offset: 2px;
}
input:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}
button:focus, button:focus-visible {
  outline: none;
}

/* ── Back bars ──
   A page's back bar (header.safe-top-header) gives its title what the back
   button and the balance chip leave. A flex item never shrinks below its
   text without min-width:0, so a long title pushed the chip off a phone's
   screen; the title is clipped across too, so a theme whose .truncate shows
   overflow still can't paint over the chip. fit-title.js then steps the
   title's font down or wraps it. */
header.safe-top-header { overflow-x: clip; }
header.safe-top-header > .flex-grow,
header.safe-top-header > .flex-1 { min-width: 0; overflow-x: clip; }
header.safe-top-header:has(> .flex-grow, > .flex-1) > :not(.flex-grow):not(.flex-1) { flex-shrink: 0; }

/* ── RTL helper utilities ──
   The page itself is dir="rtl" in Arabic, so a row already runs from the
   right: .rtl-flex-row-reverse turns it back to left-to-right. It is kept
   for theme copies that still carry it; base components no longer do. */
[dir="rtl"] .rtl-flex-row-reverse { flex-direction: row-reverse; }
[dir="rtl"] .rtl-ml-2 { margin-left: 0; margin-right: 0.5rem; }
[dir="rtl"] .rtl-ml-1 { margin-left: 0; margin-right: 0.25rem; }
[dir="rtl"] .rtl-ml-0 { margin-left: 0; }
[dir="rtl"] .rtl-mr-2 { margin-right: 0.5rem; }
[dir="rtl"] .rtl-mr-0 { margin-right: 0; }
[dir="rtl"] .rtl-text-right { text-align: right; }
[dir="rtl"] .rtl-text-left { text-align: left; }
[dir="rtl"] .rtl-flip { transform: scaleX(-1); }

/* ── Alpine cloak ── */
[x-cloak] { display: none !important; }

/* ── Navigation loader ──
   .loader-spinner is the hook every theme's loader keeps; the plain ring is
   drawn only on an empty one, so a theme's own drawing (a lantern, a cake)
   never gets a border ring around it. Every .loader-spinner turns, because
   themes' turning records, wheels and cockerels rely on it; a theme whose
   drawing must stay upright adds .loader-still (or sets its own animation). */
.loader-spinner {
  animation: loader-spin 0.85s linear infinite;
}
.loader-spinner.loader-still { animation: none; }
.loader-spinner:empty {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 2px solid var(--rule);
  border-top-color: var(--theme-500);
}
@keyframes loader-spin { to { transform: rotate(360deg); } }
.loader-bar {
  transform: translateX(-100%);
  animation: loader-bar 1.4s ease-in-out infinite;
}
@keyframes loader-bar {
  0%   { transform: translateX(-100%); opacity: 0.5; }
  50%  { opacity: 1; }
  100% { transform: translateX(220%); opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .loader-spinner, .loader-bar { animation: none !important; }
  /* Tailwind's looping utilities (live dots, low-stock and skeleton pulses)
     and the shared float and marquee: a theme or plugin page that uses them
     needs no guard of its own. */
  .animate-ping, .animate-pulse, .animate-bounce, .animate-pulse-soft,
  .animate-marquee, .float-animate { animation: none !important; }
}

/* ── Shared text overflow helpers ── */
.truncate-soft {
  min-width: 0; max-width: 11rem;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom;
}
.truncate-soft-sm {
  min-width: 0; max-width: 8.5rem;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom;
}
/* A title kept on one line and shrunk to fit by header.js's fitText(). On a
   phone it wraps instead, at its own size, so a long word in another
   language is never cut; .text-fit-line keeps one line there too, for a
   label in a fixed-height row such as the bottom tab bar. */
.text-fit { min-width: 0; overflow-wrap: break-word; padding-inline: .12em; } /* room for a display face's overhanging first and last letters, which overflow: hidden would cut */
.text-fit-line,
.text-fit-line.text-fit {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 640px) {
  .text-fit {
    white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* On a phone a title in a header row beside a button (a listing page's
   title and its "View all" link) wraps only between words: its column is
   never narrower than its longest word, and when that and the button don't
   fit side by side the button drops below. A title in an icon row inside
   that column gets the same floor, and when the icon and its longest word
   don't fit beside each other it goes under the icon (themes that keep the
   head on one row leave the title too little room for both). The html body
   prefix outranks the themes' own .text-fit rules, several of which break
   anywhere. */
@media (max-width: 639px) {
  html body h2.text-fit { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
  :is(.flex-row, .sm\:flex-row):has(> .min-w-0 h2.text-fit) { flex-wrap: wrap; }
  :is(.flex-row, .sm\:flex-row):has(> .min-w-0 h2.text-fit) > .min-w-0,
  :is(.flex-row, .sm\:flex-row) > .min-w-0 .min-w-0:has(> h2.text-fit) { min-width: min-content; }
  :is(.flex-row, .sm\:flex-row) > .min-w-0 .flex:has(> .min-w-0 > h2.text-fit) { flex-wrap: wrap; }
}

/* ── User avatar SVG dark mode ── */
.ua-bg { fill: var(--theme-100, #e2e8f0) !important; }
.ua-text { fill: var(--theme-600, #475569) !important; }
.dark .ua-bg { fill: var(--theme-900, var(--paper-2, #161b22)) !important; }
.dark .ua-text { fill: var(--theme-300, #94a3b8) !important; }

/* ── Language dropdown fade indicator ── */
:root { --lang-dd-bg: #ffffff; }
.dark { --lang-dd-bg: #121218; }

/* ── Side menu scroll ── */
/* The drawer is as tall as what the phone actually shows (100dvh; Tailwind's
   h-full/max-h-screen stay as the fallback), and its foot clears the
   home-indicator strip, where taps don't land: the sign-in/sign-out button
   there otherwise sat partly under it, and on a browser whose 100vh is taller
   than the screen it fell below the bottom edge. */
#sideMenu {
  height: 100dvh;
  max-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.side-menu-scroll {
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── Mobile glass header ── */
.mobile-glass-header {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(var(--theme-500-rgb), 0.1);
  box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.06), 0 2px 8px -1px rgba(0, 0, 0, 0.04);
}
.menu-btn {
  position: relative;
  background: linear-gradient(135deg, var(--theme-50) 0%, var(--theme-100) 100%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-btn:hover {
  background: linear-gradient(135deg, var(--theme-100) 0%, var(--theme-200) 100%);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(var(--theme-500-rgb), 0.15);
}
.menu-btn:active { transform: scale(0.98); }
.logo-container { transition: all 0.3s ease; }
.logo-container:hover { transform: translateY(-1px); }
.logo-container img {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
  transition: filter 0.3s ease;
}
.logo-container:hover img { filter: drop-shadow(0 4px 8px rgba(var(--theme-500-rgb), 0.15)); }
.balance-btn {
  background: linear-gradient(135deg, var(--theme-50) 0%, var(--theme-100) 100%);
  border: 1.5px solid rgba(var(--theme-500-rgb), 0.2);
  box-shadow: 0 2px 8px rgba(var(--theme-500-rgb), 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.balance-btn:hover {
  background: linear-gradient(135deg, var(--theme-100) 0%, var(--theme-200) 100%);
  border-color: rgba(var(--theme-500-rgb), 0.4);
  box-shadow: 0 4px 16px rgba(var(--theme-500-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}
.balance-btn:active { transform: translateY(0); }
.balance-btn .coin-icon { animation: coinFloat 2s ease-in-out infinite; }
@keyframes coinFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(5deg); }
}
.auth-btn-login {
  background: white;
  border: 2px solid var(--theme-600);
  color: var(--theme-600);
  box-shadow: 0 2px 8px rgba(var(--theme-500-rgb), 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600; letter-spacing: 0.025em;
}
.auth-btn-login:hover {
  background: linear-gradient(135deg, var(--theme-50) 0%, var(--theme-100) 100%);
  border-color: var(--theme-700);
  box-shadow: 0 4px 16px rgba(var(--theme-500-rgb), 0.2);
  transform: translateY(-1px);
}
.auth-btn-register {
  background: linear-gradient(135deg, var(--theme-500) 0%, var(--theme-700) 100%);
  color: white; border: none;
  box-shadow: 0 4px 12px rgba(var(--theme-500-rgb), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600; letter-spacing: 0.025em;
}
.auth-btn-register:hover {
  background: linear-gradient(135deg, var(--theme-700) 0%, var(--theme-800) 100%);
  box-shadow: 0 6px 20px rgba(var(--theme-500-rgb), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}
.auth-btn-register:active { transform: translateY(0); }
.auth-btn-register .arrow-icon { transition: transform 0.3s ease; }
.auth-btn-register:hover .arrow-icon { transform: translateX(2px); }
@media (max-width: 640px) {
  .mobile-glass-header { padding-left: 1rem; padding-right: 1rem; }
}
/* The phone bar is one row: when the buttons on the right don't fit beside
   the logo (a long "Register" or "Install" label in Russian or German, a
   balance in the thousands), the logo gives way instead of the page
   scrolling sideways. The buttons themselves never shrink. */
.mobile-glass-header { gap: .5rem; }
.mobile-glass-header > :first-child { min-width: 0; }
.mobile-glass-header > :last-child,
.mobile-glass-header .menu-btn { flex-shrink: 0; }
.mobile-glass-header .logo-container,
.mobile-glass-header .logo-container img { min-width: 0; }
/* Before that, on phones the App chip drops its word and keeps its icon. */
@media (max-width: 419px) {
  .mobile-glass-header .pwa-chip__label { display: none; }
  .mobile-glass-header .pwa-chip { padding-left: .6rem; padding-right: .6rem; }
}

/* ── Language bottom sheet ── */
#langSheetBackdrop { transition: opacity 0.25s ease; }
#langSheet { transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
#langSheet .lang-row:active { background: rgba(var(--theme-500-rgb), 0.08); }
.dark #langSheet { background: var(--paper, var(--paper, #09090b)) !important; border-top: 1px solid rgba(255,255,255,0.06); }
.dark #langSheet .lang-sheet-title { color: var(--ink, #e6edf3) !important; }
.dark #langSheet .lang-row { border-color: rgba(255,255,255,0.04); }
.dark #langSheet .lang-row:hover { background: rgba(255,255,255,0.04) !important; }
.dark #langSheet .lang-row-active { background: rgba(var(--theme-500-rgb), 0.1) !important; }
.dark #langSheet .lang-row span { color: var(--ink, #e6edf3) !important; }
.dark #langSheet .lang-drag-handle { background: rgba(255,255,255,0.15); }
.dark #langSheet .lang-close-btn { background: rgba(255,255,255,0.08); color: var(--ink-soft, #8b949e); }
.dark #langSheet .lang-close-btn:hover { background: rgba(255,255,255,0.13); }
.dark #langSheet .lang-sheet-header { border-bottom-color: rgba(255,255,255,0.06); }

/* ── RTL: mobile side drawer ──────────────────────────────────────────────
   The drawer is authored for LTR (anchored to the left, slides in from the
   left) and the shared openMenu()/closeMenu() JS toggles Tailwind's
   `-translate-x-full`. In RTL we mirror it to the right edge WITHOUT touching
   that JS — these `[dir="rtl"] #sideMenu…` rules outspecify the Tailwind
   utilities, so re-anchoring the panel and flipping the hidden transform to
   slide off the right (instead of the left) is enough. The inner border flips
   automatically because the markup uses the logical `border-inline-end`. */
[dir="rtl"] #sideMenu { left: auto; right: 0; }
[dir="rtl"] #sideMenu.-translate-x-full { transform: translateX(100%); }
[dir="rtl"] #sideMenu button[onclick="closeMenu()"],
[dir="rtl"] #sideMenu button[data-px-call="closeMenu"] { right: auto; left: 1rem; }
[dir="rtl"] #sideMenu .pr-8 { padding-right: 0; padding-left: 2rem; }
/* Bottom-sheet language rows read right-to-left */
[dir="rtl"] #langSheet .lang-row span { text-align: right; }

/* ── Side drawer ── */
.premium-side-menu {
  background: #ffffff;
  box-shadow: 4px 0 32px rgba(0, 0, 0, 0.10), 1px 0 0 rgba(0, 0, 0, 0.04);
}
.drawer-profile-hd {
  background: #f8fafc;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.dark .drawer-profile-hd {
  background: #121218 !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}
.drawer-section-label {
  display: block; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-soft, #64748b); padding: 0 1rem;
  margin-top: 1.5rem; margin-bottom: 0.375rem;
}
.drawer-nav-row {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.75rem 1rem; margin: 0 0.5rem;
  border-radius: 0.75rem; color: #334155;
  font-size: 0.9rem; font-weight: 500;
  transition: background-color 0.15s ease;
  cursor: pointer; width: calc(100% - 1rem); text-align: left;
}
.dark .drawer-nav-row { color: #cbd5e1 !important; }
.drawer-nav-row:hover { background-color: #f1f5f9; }
.dark .drawer-nav-row:hover { background-color: rgba(255, 255, 255, 0.05) !important; }
.drawer-nav-row:active { background-color: #e2e8f0; }
.dark .drawer-nav-row:active { background-color: rgba(255, 255, 255, 0.08) !important; }
.drawer-logout {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  /* auto, not 100%: themes give these side margins, and at 100% plus a
     margin the button stuck out of the closed drawer at the screen's edge.
     #sideMenu is a flex column, so auto still fills its width. */
  width: auto; padding: 1rem 0; color: #ef4444;
  font-weight: 600; font-size: 0.875rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  transition: background-color 0.15s ease;
  margin-top: auto; flex-shrink: 0;
}
.drawer-logout:hover { background-color: #fef2f2; }
.dark .drawer-logout { border-top-color: rgba(255, 255, 255, 0.05) !important; }
.dark .drawer-logout:hover { background-color: rgba(239, 68, 68, 0.08) !important; }
.drawer-login {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: auto; padding: 1rem 0; color: var(--theme-600);
  font-weight: 600; font-size: 0.875rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  transition: background-color 0.15s ease;
  margin-top: auto; flex-shrink: 0;
}
.drawer-login:hover { background-color: var(--theme-50, #eff6ff); }
/* Zero-specificity :where(): a theme that draws this as a filled button sets
   its own colours, which must win in dark mode too. */
:where(.dark) .drawer-login { color: var(--theme-400); border-top-color: rgba(255, 255, 255, 0.05); }
:where(.dark) .drawer-login:hover { background-color: rgba(var(--theme-500-rgb), 0.08); }

/* ── Desktop premium styles ── */
.desktop-glass-header {
  background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(var(--theme-500-rgb), 0.08);
  box-shadow: 0 4px 30px -2px rgba(0, 0, 0, 0.05), 0 2px 12px -2px rgba(var(--theme-500-rgb), 0.04);
}
.desktop-logo-container { position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.desktop-logo-container::before {
  content: ''; position: absolute; inset: -4px;
  background: linear-gradient(135deg, rgba(var(--theme-500-rgb), 0.1), rgba(var(--theme-300-rgb), 0.05));
  border-radius: 12px; opacity: 0; transition: opacity 0.3s ease;
}
.desktop-logo-container:hover::before { opacity: 1; }
.desktop-logo-container img {
  position: relative;
  filter: drop-shadow(0 2px 6px rgba(var(--theme-500-rgb), 0.08));
  transition: all 0.3s ease;
}
.desktop-logo-container:hover img {
  filter: drop-shadow(0 4px 12px rgba(var(--theme-500-rgb), 0.15));
  transform: translateY(-1px);
}
.premium-search-container {
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
  border: 1.5px solid rgba(var(--theme-500-rgb), 0.12);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px -2px rgba(var(--theme-500-rgb), 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.premium-search-container:hover {
  border-color: rgba(var(--theme-500-rgb), 0.25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px -4px rgba(var(--theme-500-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 1);
}
.premium-search-container:focus-within {
  border-color: rgba(var(--theme-500-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--theme-500-rgb), 0.12), 0 8px 24px -4px rgba(var(--theme-500-rgb), 0.14);
  background: #FFFFFF;
}
.premium-search-input {
  background: transparent; border: none; outline: none;
  color: #1F2937; font-weight: 500; letter-spacing: 0.01em; line-height: 1.5;
}
.premium-search-input::placeholder { color: #9CA3AF; font-weight: 400; }
.search-icon-wrapper {
  background: linear-gradient(135deg, var(--theme-50) 0%, var(--theme-100) 100%);
  border-radius: 10px; width: 32px; height: 32px;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.premium-search-container:hover .search-icon-wrapper {
  background: linear-gradient(135deg, var(--theme-100) 0%, var(--theme-200) 100%);
  transform: scale(1.05);
}
.premium-search-container:focus-within .search-icon-wrapper {
  background: linear-gradient(135deg, var(--theme-500) 0%, var(--theme-700) 100%);
  box-shadow: 0 2px 8px rgba(var(--theme-500-rgb), 0.3);
}
.premium-search-container:focus-within .search-icon-wrapper svg { color: white !important; }
.search-shortcut-badge {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 12px; font-weight: 600; color: #9CA3AF;
  background: linear-gradient(180deg, #F9FAFB 0%, #F3F4F6 100%);
  border: 1px solid #E5E7EB; border-radius: 6px; padding: 2px 8px; line-height: 1.4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease; align-items: center; justify-content: center;
}
.premium-nav-shell {
  background: linear-gradient(135deg, rgba(var(--theme-50-rgb), 0.85) 0%, rgba(255, 255, 255, 0.95) 100%);
  border: 1.5px solid rgba(var(--theme-500-rgb), 0.12);
  border-radius: 9999px; padding: 6px 10px;
  box-shadow: 0 8px 24px -10px rgba(var(--theme-500-rgb), 0.25), 0 2px 8px -4px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.premium-nav-link {
  position: relative; padding: 8px 12px; border-radius: 10px;
  font-weight: 600; letter-spacing: 0.01em;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.premium-nav-link::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(var(--theme-500-rgb), 0.08), rgba(var(--theme-300-rgb), 0.05));
  border-radius: 10px; opacity: 0; transition: opacity 0.3s ease;
}
.premium-nav-link:hover::before { opacity: 1; }
.premium-nav-link::after {
  content: ''; position: absolute; bottom: 2px; left: 12px; right: 12px;
  height: 2.5px;
  background: linear-gradient(90deg, var(--theme-500), var(--theme-400));
  border-radius: 2px; transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.premium-nav-link:hover::after, .premium-nav-link.active::after { transform: scaleX(1); }
.premium-nav-link.active { color: var(--theme-700); }
.premium-nav-link span { position: relative; z-index: 1; }
.premium-support-btn {
  background: linear-gradient(135deg, #FFFFFF 0%, #F3F4F6 100%);
  border: 1.5px solid rgba(var(--theme-500-rgb), 0.2);
  border-radius: 12px; box-shadow: 0 2px 10px rgba(var(--theme-500-rgb), 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.premium-support-btn:hover {
  background: linear-gradient(135deg, var(--theme-50) 0%, var(--theme-100) 100%);
  border-color: rgba(var(--theme-500-rgb), 0.4);
  box-shadow: 0 4px 16px rgba(var(--theme-500-rgb), 0.15);
  transform: translateY(-2px);
}
.premium-support-btn i { transition: all 0.3s ease; }
.premium-support-btn:hover i { color: var(--theme-700); transform: scale(1.1); }
.premium-balance-display {
  background: linear-gradient(135deg, var(--theme-50) 0%, var(--theme-100) 100%);
  border: 1.5px solid rgba(var(--theme-500-rgb), 0.25); border-radius: 9999px;
  box-shadow: 0 2px 12px rgba(var(--theme-500-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 700; letter-spacing: 0.02em;
}
.premium-balance-display:hover {
  background: linear-gradient(135deg, var(--theme-100) 0%, var(--theme-200) 100%);
  border-color: rgba(var(--theme-500-rgb), 0.4);
  box-shadow: 0 4px 20px rgba(var(--theme-500-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}
.premium-balance-display .coin-icon { animation: desktopCoinFloat 2.5s ease-in-out infinite; }
@keyframes desktopCoinFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(8deg); }
}
.premium-user-avatar {
  background: linear-gradient(135deg, var(--theme-500) 0%, var(--theme-700) 100%);
  border: 2.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 16px rgba(var(--theme-500-rgb), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.premium-user-avatar:hover {
  background: linear-gradient(135deg, var(--theme-700) 0%, var(--theme-800) 100%);
  box-shadow: 0 6px 24px rgba(var(--theme-500-rgb), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-2px) scale(1.05);
}
.premium-user-avatar:active { transform: translateY(0) scale(1); }
.premium-dropdown {
  background: white; border: 1px solid rgba(var(--theme-500-rgb), 0.12);
  border-radius: 16px;
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.15), 0 4px 16px -4px rgba(var(--theme-500-rgb), 0.1);
  overflow: hidden; min-width: 0;
}
.premium-dropdown-item { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; }
.premium-dropdown-item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--theme-500), var(--theme-400));
  transform: scaleY(0); transition: transform 0.2s ease;
}
.premium-dropdown-item:hover::before { transform: scaleY(1); }
.premium-dropdown-item:hover {
  background: linear-gradient(90deg, rgba(var(--theme-500-rgb), 0.05) 0%, rgba(255, 255, 255, 1) 100%);
}
.desktop-auth-btn-login {
  background: white; border: 2px solid var(--theme-600); color: var(--theme-600);
  border-radius: 12px; box-shadow: 0 2px 12px rgba(var(--theme-500-rgb), 0.12);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600; letter-spacing: 0.025em;
}
.desktop-auth-btn-login:hover {
  background: linear-gradient(135deg, var(--theme-50) 0%, var(--theme-100) 100%);
  border-color: var(--theme-700); box-shadow: 0 4px 20px rgba(var(--theme-500-rgb), 0.25);
  transform: translateY(-2px);
}
.desktop-auth-btn-register {
  background: linear-gradient(135deg, var(--theme-500) 0%, var(--theme-700) 100%);
  color: white; border: none; border-radius: 12px;
  box-shadow: 0 4px 16px rgba(var(--theme-500-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600; letter-spacing: 0.025em;
}
.desktop-auth-btn-register:hover {
  background: linear-gradient(135deg, var(--theme-700) 0%, var(--theme-800) 100%);
  box-shadow: 0 6px 24px rgba(var(--theme-500-rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}
.desktop-auth-btn-register:active { transform: translateY(0); }
.desktop-auth-btn-register .arrow-icon { transition: transform 0.3s ease; }
.desktop-auth-btn-register:hover .arrow-icon { transform: translateX(3px); }

/* ── Flip animation for search placeholder ── */
/* The rotating search hint fills the field; a hint too long for it (German
   and other long languages on a phone) ends in an ellipsis rather than being
   cut off mid-word. */
.flip-wrapper {
  width: 100%; min-width: 0; height: 1.5em; overflow: hidden; perspective: 1000px;
}

/* Three turns through the hints, then it rests on the first one. */
.flip { display: flex; flex-direction: column; animation: flipCube 10s cubic-bezier(0.23, 1, 0.32, 1) 3; }
.flip div {
  height: 1.5em; line-height: 1.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transform-origin: top; backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .flip { animation: none; }
}
@keyframes flipCube {
  0%, 18%   { transform: translateY(0); }
  22%, 43%  { transform: translateY(-1.5em); }
  47%, 68%  { transform: translateY(-3em); }
  72%, 93%  { transform: translateY(-4.5em); }
  97%, 100% { transform: translateY(0); }
}

/* ── Desktop header layout ── */
#desktopHeader { height: 64px; align-items: center; }
@media (min-width: 1024px) { #desktopHeader { display: flex; align-items: center; } }
#desktopHeader > a,
#desktopHeader > form,
#desktopHeader > div { align-self: center; }

/* ── Search bar — modern · theme-token driven ──
   Surfaces (--paper/--paper-2), ink (--ink/--ink-soft) and hairlines (--rule)
   come from the active storefront theme so the field, dropdown, chips, clear
   button and hint all match casino (felt+gold), classic (paper) and editorial
   out of the box — including dark mode, which flips via the same tokens.
   Grey fallbacks keep it sane if no theme stylesheet is loaded. The focus ring /
   chip-hover accent is the per-store colour from dynamic-theme.css (--theme-*).
   Themes may still ID-scope their own overrides (they load after this file). */
#desktopHeader .hdr-search {
  background: var(--paper-2, #f4f4f5); border: 1.5px solid var(--rule, transparent);
  border-radius: var(--radius, 14px); position: relative;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
#desktopHeader .hdr-search:hover {
  background: var(--paper, #f9fafb);
  border-color: rgba(var(--theme-500-rgb), 0.28);
}
#desktopHeader .hdr-search:focus-within {
  background: var(--paper, #ffffff); border-color: var(--theme-500, #6366f1);
  box-shadow: 0 0 0 3px rgba(var(--theme-500-rgb), 0.12), var(--shadow-md, 0 2px 16px -4px rgba(0,0,0,0.08));
}
#desktopHeader .hdr-search input { background: transparent; color: var(--ink, #111827); }
#desktopHeader .hdr-search input::placeholder { color: var(--ink-soft, #9ca3af); }
#desktopHeader .hdr-search #searchGlassIcon { color: var(--ink-soft, #9ca3af); transition: color 0.2s; }
#desktopHeader .hdr-search:focus-within #searchGlassIcon { color: var(--theme-500, #6366f1); }

/* Clear (×) button */
.hdr-search-clear {
  width: 20px; height: 20px; display: none;
  align-items: center; justify-content: center;
  border-radius: 50%; background: var(--rule-soft, #e5e7eb); color: var(--ink-soft, #6b7280);
  flex-shrink: 0; transition: background 0.15s, color 0.15s, transform 0.15s;
  border: none; cursor: pointer; padding: 0;
}
.hdr-search-clear:hover { background: var(--rule, #d1d5db); color: var(--ink, #111827); transform: scale(1.1); }
.hdr-search-clear.visible { display: flex; }

/* Suggestions dropdown panel */
.hdr-search-dropdown {
  display: none; position: absolute;
  top: calc(100% + 8px); left: 0; right: 0;
  background: var(--paper-2, #ffffff); border: 1px solid var(--rule, rgba(0,0,0,0.08));
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow-md, 0 8px 32px -4px rgba(0,0,0,0.12)), 0 2px 8px -2px rgba(0,0,0,0.06);
  z-index: 200; overflow: hidden;
  animation: searchDropdownIn 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.hdr-search-dropdown.visible { display: block; }
@keyframes searchDropdownIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.hdr-search-dropdown-inner { padding: 14px 14px 12px; }
.hdr-search-dropdown-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-soft, #9ca3af); margin-bottom: 10px;
}
.hdr-search-chip {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 500; color: var(--ink-2, #374151);
  background: var(--paper, #f9fafb); border: 1px solid var(--rule, #e5e7eb);
  border-radius: 8px; padding: 5px 10px; cursor: pointer;
  transition: all 0.15s ease; white-space: nowrap; line-height: 1.4;
}
.hdr-search-chip:hover {
  background: rgba(var(--theme-500-rgb), 0.10);
  border-color: rgba(var(--theme-500-rgb), 0.35);
  color: var(--theme-700, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(var(--theme-500-rgb), 0.12);
}
.dark .hdr-search-chip:hover { color: var(--theme-300, #93c5fd); }
.hdr-search-hint {
  display: none; align-items: center; gap: 6px;
  padding: 8px 14px; border-top: 1px solid var(--rule, #f3f4f6);
  font-size: 11.5px; color: var(--ink-soft, #9ca3af);
}
.hdr-search-hint.visible { display: flex; }
.hdr-search-hint kbd {
  font-family: ui-monospace, SFMono-Regular, monospace; font-size: 10.5px;
  background: var(--paper, #f3f4f6); border: 1px solid var(--rule, #e5e7eb);
  border-radius: 4px; padding: 1px 6px; color: var(--ink-soft, #6b7280); line-height: 1.5;
}

/* ── Desktop header icon/action buttons ── */
#desktopHeader .hdr-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; color: #6b7280;
  transition: background 0.15s, color 0.15s; flex-shrink: 0;
}
#desktopHeader .hdr-btn:hover { background: #f3f4f6; color: #111827; }
.dark #desktopHeader .hdr-btn { color: var(--ink-soft, #8b949e); }
.dark #desktopHeader .hdr-btn:hover { background: rgba(255,255,255,0.08); color: var(--ink, #e6edf3); }
#desktopHeader .hdr-text-btn {
  height: 36px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 10px; font-size: 0.875rem; font-weight: 600;
  color: #374151; transition: background 0.15s, color 0.15s; flex-shrink: 0;
}
#desktopHeader .hdr-text-btn:hover { background: #f3f4f6; }
.dark #desktopHeader .hdr-text-btn { color: var(--ink-2, #c9d1d9); }
.dark #desktopHeader .hdr-text-btn:hover { background: rgba(255,255,255,0.08); }
#desktopHeader .hdr-balance {
  height: 36px; padding: 0 14px;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 9999px; background: var(--theme-50, #eff6ff);
  border: 1.5px solid rgba(var(--theme-500-rgb), 0.22);
  color: var(--theme-700, #1d4ed8);
  font-size: 0.875rem; font-weight: 700;
  transition: background 0.15s, border-color 0.15s; flex-shrink: 0; min-width: 0;
}
#desktopHeader .hdr-balance:hover { background: var(--theme-100, #dbeafe); border-color: rgba(var(--theme-500-rgb), 0.4); }
.dark #desktopHeader .hdr-balance { background: rgba(var(--theme-500-rgb),.15); border-color: rgba(var(--theme-500-rgb),.3); color: var(--theme-300, #93c5fd); }
.dark #desktopHeader .hdr-balance:hover { background: rgba(var(--theme-500-rgb),.22); }
#desktopHeader .hdr-login {
  height: 36px; padding: 0 16px; border-radius: 10px;
  border: 2px solid var(--theme-500, #6366f1); color: var(--theme-600, #4f46e5);
  font-size: 0.875rem; font-weight: 600; transition: background 0.15s; white-space: nowrap;
}
#desktopHeader .hdr-login:hover { background: var(--theme-50, #eff6ff); }
.dark #desktopHeader .hdr-login { border-color: rgba(var(--theme-500-rgb),.6); color: var(--theme-400); background: transparent; }
#desktopHeader .hdr-register {
  height: 36px; padding: 0 16px; border-radius: 10px;
  background: var(--theme-600, #4f46e5); color: #fff;
  font-size: 0.875rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 1px 4px rgba(var(--theme-500-rgb),.35);
  transition: background 0.15s, box-shadow 0.15s; white-space: nowrap;
}
#desktopHeader .hdr-register:hover { background: var(--theme-700, #4338ca); box-shadow: 0 4px 12px rgba(var(--theme-500-rgb),.4); }
.dark #desktopHeader .hdr-register { background: var(--theme-500, #6366f1); }
.dark #desktopHeader .hdr-register:hover { background: var(--theme-600, #4f46e5); }

/* ──────────────────────────────────────────────────────────────────────────
   Mobile input zoom guard
   iOS Safari auto-zooms the viewport when a focused form control computes a
   font-size below 16px. Many inputs use Tailwind's text-sm/text-xs (14px/12px),
   which triggers this and forces the user to pinch back out. Enforce a 16px
   minimum on text-entry controls at phone widths only, so desktop styling and
   non-text controls are untouched. !important is required to beat single-class
   utilities like `text-sm`.
   ────────────────────────────────────────────────────────────────────────── */
/* A skipped theme moment (pxPlayThemeMoment(), header.js): hidden rather than
   emptied, so the theme's own timers finish with the overlay unseen. */
html.px-fx-skipped #pxThemeFx {
  visibility: hidden !important;
}

/* A moment played while a window is open (a prize window's 'win') runs
   beneath it: header.js puts the overlay just under the window's layer and
   names that z-index here, over each theme's own .px-fx--* stacking. A
   page-wide filter a theme puts on <html> or <body> for its switch (sepia,
   grayscale) would tint the window too, so it is left off meanwhile. */
html.px-fx-under #pxThemeFx {
  z-index: var(--px-fx-under-z, 0) !important;
}
html.px-fx-under,
html.px-fx-under body {
  filter: none !important;
}

/* ── Dark/light mode toggle transition ──
   toggleDarkMode() (header.js) briefly adds this class to <html> so the
   color-scheme swap fades instead of snapping. Scoped to a short-lived
   class (not a permanent global rule) so it never dampens unrelated
   animations/transforms elsewhere on the page. */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 260ms ease, border-color 260ms ease,
    color 260ms ease, fill 260ms ease, stroke 260ms ease,
    box-shadow 260ms ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-transition,
  html.theme-transition *,
  html.theme-transition *::before,
  html.theme-transition *::after {
    transition: none !important;
  }
}

/* ── Themed dark/light toggle effects (shared skeleton) ──
   header.js creates #pxThemeFx once and swaps its class to run a themed
   transition (see e.g. assets/themes/editorial/theme.css `.px-fx--editorial-roller`
   and assets/themes/halloween/theme.css `.px-fx--halloween-fog`) instead of the
   plain fade above. Themes without a registered effect never touch this. */
.px-fx {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* A site that uploaded a logo but no dark-mode version: on a dark page the
   logo sits on a light plate in the theme's own ink colour, so dark lettering
   stays readable. Themes add .px-logo-plate only when no dark logo exists. */
html.dark .px-logo-plate {
  background: color-mix(in srgb, var(--ink, #f4efe2) 94%, transparent);
  padding: 4px 10px;
  border-radius: 10px;
  box-sizing: content-box;
}

/* Status strip (every theme's layout/desktop-nav.php and layout/topbar.php).
   Its labels are upper-cased with PHP's strtoupper(), which leaves accented
   and non-Latin letters alone ("LEILõES", "Тёмный режим"); upper-casing in
   CSS finishes them by the page language's own rules. The language list
   that drops down from it keeps its names as written. */
.hdr-strip, .hdr-strip button { text-transform: uppercase; }
.hdr-strip .ed-dropdown { text-transform: none; }
/* The strip's menu needs room: in Russian or German it pushed the strip
   past the window at 1280px. The "/" or dot before the menu hides with it,
   so the strip doesn't end on a lone separator. */
@media (max-width: 1439.98px) {
  .hdr-strip .xl\:inline-flex,
  .hdr-strip .xl\:inline-block { display: none !important; }
}

/* A soft hover for a small text button: --px-hover-ink and --px-hover-bg
   name its hover colours (were inline onmouseover/onmouseout styles). */
.px-hover { color: var(--ink-soft); background: transparent; }
.px-hover:hover, .px-hover:focus-visible { color: var(--px-hover-ink, var(--ink-soft)); background: var(--px-hover-bg, transparent); }

/* Status tones for chips, pills and notes in base components: a hue mixed
   into the theme's own --paper and --ink, so every theme and html.dark get a
   readable version without a copy. A theme moves a hue with --px-good,
   --px-warn, --px-crit or --px-info, or restyles .px-tone--* outright. */
:root { --px-good: #15803d; --px-warn: #b45309; --px-crit: #b91c1c; --px-info: var(--theme-600, var(--theme-500, #2563eb));
  /* Text on a solid tone fill (an urgent button): a theme with a pale tone sets its own. */
  --px-good-ink: #fff; --px-warn-ink: #fff; --px-crit-ink: #fff; --px-info-ink: var(--btn-ink, #fff); }
/* Dark mode's tones are light pastels, so text on them is near-black. */
html.dark { --px-good-ink: #0b1410; --px-warn-ink: #1a1200; --px-crit-ink: #1f0a0a; --px-info-ink: #0a1020; }
.px-tone--good { background: color-mix(in srgb, var(--px-good) 14%, var(--paper)); color: color-mix(in srgb, var(--px-good) 78%, var(--ink)); }
.px-tone--warn { background: color-mix(in srgb, var(--px-warn) 16%, var(--paper)); color: color-mix(in srgb, var(--px-warn) 78%, var(--ink)); }
.px-tone--crit { background: color-mix(in srgb, var(--px-crit) 14%, var(--paper)); color: color-mix(in srgb, var(--px-crit) 78%, var(--ink)); }
.px-tone--info { background: color-mix(in srgb, var(--px-info) 13%, var(--paper)); color: color-mix(in srgb, var(--px-info) 78%, var(--ink)); }
.px-tone--mut  { background: color-mix(in srgb, var(--ink) 8%, var(--paper)); color: var(--ink-2); }
.px-tone-border--warn { border-color: color-mix(in srgb, var(--px-warn) 35%, var(--rule)); }
.px-tone-text--good { color: color-mix(in srgb, var(--px-good) 78%, var(--ink)); }
.px-tone-text--warn { color: color-mix(in srgb, var(--px-warn) 78%, var(--ink)); }
.px-tone-text--crit { color: color-mix(in srgb, var(--px-crit) 78%, var(--ink)); }
.px-tone-text--info { color: color-mix(in srgb, var(--px-info) 78%, var(--ink)); }
.px-tone-border--info { border-color: color-mix(in srgb, var(--px-info) 35%, var(--rule)); }
.px-tone-border--good { border-color: color-mix(in srgb, var(--px-good) 35%, var(--rule)); }
.px-tone-border--crit { border-color: color-mix(in srgb, var(--px-crit) 35%, var(--rule)); }
.px-hover-crit:hover { color: var(--px-crit); }
/* A table's head (or foot) in a base component. It goes on the <thead>, never
   on the <tr>: a row paints over its thead, so a row colour hides a theme's
   thead colour. :where() keeps it at no weight, so a theme's own thead or th
   background always wins. */
:where(.px-thead) { background: var(--paper-2); }
:where(.px-thead--paper) { background: var(--paper); }
.px-dot { background: currentColor; }

/* Share buttons (components/item/share-row.php, a referral's share row):
   brand colours by default, each a shade deep enough for white text
   (4.5:1); a theme restyles them with --share-* or .px-share--* outright. */
:root { --share-fb: #0866FF; --share-x: #0f1419; --share-wa: #0e7a5e; --share-tg: #1a7cb3; --share-pin: #E60023; --share-ink: #fff; }
.px-share { color: var(--share-ink); }
.px-share:hover { filter: brightness(.94); }
.px-share--fb { background: var(--share-fb); }
.px-share--x { background: var(--share-x); }
.px-share--wa { background: var(--share-wa); }
.px-share--tg { background: var(--share-tg); }
.px-share--pin { background: var(--share-pin); }
/* A pickable card (a delivery address): the picked one takes a wash of the
   accent over the theme's own paper, so it stays dark in dark mode. */
.px-pick-card:hover { border-color: color-mix(in srgb, var(--theme-500) 45%, var(--rule)) !important; }
.px-pick-card:has(:checked) { border-color: var(--theme-500) !important; background: color-mix(in srgb, var(--theme-500) 8%, var(--paper)); }

/* ── Language moment ──
   pxLanguageMoment() in header.js. The <head> holds the new page back with
   .px-lang-arriving until the words the last page showed are in place (with
   a fallback, so a page whose script never runs still shows after 1.5s);
   then each line turns into its translation, lit in the theme's accent while
   it does, and <main> slides across when the reading direction flips. */
html.px-lang-saving, html.px-lang-saving * { cursor: progress !important; }
html.px-lang-arriving body {
  opacity: 0;
  animation: px-lang-show 0s linear 1.5s forwards;
}
@keyframes px-lang-show { to { opacity: 1; } }
.px-lang-glyph {
  text-shadow: 0 0 .55em color-mix(in srgb, var(--theme-500, currentColor) 55%, transparent),
               0 0 1px color-mix(in srgb, var(--theme-500, currentColor) 70%, transparent);
  transition: text-shadow .12s linear;
}
html.px-lang-flip.px-lang-in #px-spa-content { animation: px-lang-slide-in .38s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes px-lang-slide-in { from { transform: translateX(calc(var(--px-lang-shift, 0px) * -1)); opacity: .55; } }
/* The scene layer (pxLangScene()). It fades in on the old page; on the new
   one it is there from the first frame, so the switch never shows the
   reload. A theme's own scene draws inside it and may restyle it. */
.px-lang-stage {
  position: fixed; inset: 0; z-index: 2147483000;
  display: grid; place-items: center; padding: 16px; box-sizing: border-box;
  background: color-mix(in srgb, var(--theme-900, #0b1020) 46%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  pointer-events: auto;
}
.px-lang-stage-out { animation: px-lang-stage-in .18s ease-out both; }
.px-lang-stage-leaving { opacity: 0; transition: opacity .22s ease-in; }
@keyframes px-lang-stage-in { from { opacity: 0; } }
.px-lang-card {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px;
  max-width: min(560px, 100%); padding: 22px 26px; border-radius: 18px; box-sizing: border-box;
  background: var(--paper-2, #fff); color: var(--ink, #111827);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .45);
  font: 600 clamp(15px, 3.6vw, 19px)/1.25 var(--font-display, system-ui, sans-serif);
}
.px-lang-side { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.px-lang-globe { flex: none; font-size: 1.15em; color: var(--theme-500, currentColor); opacity: .85; }
.px-lang-side b { overflow-wrap: anywhere; }
.px-lang-arrow { color: var(--theme-500, currentColor); font-size: 1.3em; }
.px-lang-stamp {
  position: absolute; right: -10px; top: -14px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px; color: #fff;
  background: var(--theme-500, #2563eb); box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .4);
  opacity: 0;
}
.px-lang-stage-out .px-lang-card { animation: px-lang-card-in .28s cubic-bezier(.2, .8, .3, 1.15) both; }
.px-lang-stage-out .px-lang-new { animation: px-lang-new-in .3s ease-out .32s both; }
.px-lang-stage-out .px-lang-arrow { animation: px-lang-new-in .25s ease-out .2s both; }
.px-lang-stage-in .px-lang-old { animation: px-lang-old-dim .3s ease .15s both; }
@keyframes px-lang-old-dim { to { opacity: .45; } }
.px-lang-stage-in .px-lang-stamp { animation: px-lang-stamp .32s cubic-bezier(.2, .9, .3, 1.3) .12s both; }
@keyframes px-lang-card-in { from { transform: translateY(14px) scale(.94); opacity: 0; } }
@keyframes px-lang-new-in { from { transform: translateX(-10px); opacity: 0; } }
@keyframes px-lang-stamp { from { transform: scale(2.2) rotate(-25deg); opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.px-lang-flip #px-spa-content { animation: none !important; }
}

/* Countdowns rewrite their digits every second; with proportional figures
   each tick changes the text's width ("1:11" is narrower than "0:58") and
   nudges whatever sits beside it. Every countdown the templates print
   carries one of these hooks; tabular figures give each digit one width. */
[data-end], [data-end-time], [data-ends], .countdown-timer, .countdown-box, [class*="-countdown-time"] {
  font-variant-numeric: tabular-nums;
}