/* Dark Mode Styles */
:root {
  /* Light mode variables (default) */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f4f2f7;
  --color-bg-tertiary: #f9f9f9;
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #4B5563;
  --color-text-tertiary: #6B7280;
  --color-border: #E5E7EB;
  --color-input-bg: #F3F4F6;
  --color-shadow: rgba(0, 0, 0, 0.1);
  --color-card-bg: #ffffff;
  --color-accent: #c2418b;
  --color-accent-hover: #a93878;
}

/* Dark mode variables */
.dark-mode {
  --color-bg-primary: #121212;
  --color-bg-secondary: #1e1e1e;
  --color-bg-tertiary: #2a2a2a;
  --color-text-primary: #f3f4f6;
  --color-text-secondary: #d1d5db;
  --color-text-tertiary: #9ca3af;
  --color-border: #374151;
  --color-input-bg: #2a2a2a;
  --color-shadow: rgba(0, 0, 0, 0.5);
  --color-card-bg: #1e1e1e;
  --color-accent: #c2418b;
  --color-accent-rgb: 194, 65, 139;
  --color-accent-hover: #d04e9a;
}

/* Apply dark mode styles */
.dark-mode body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

/* Header styles */
.dark-mode header {
  background-color: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border);
}

/* Header buttons hover effect */
.dark-mode header button.hover\:bg-accent\/10:hover,
.dark-mode header a.hover\:bg-accent\/10:hover,
.dark-mode nav button.hover\:bg-accent\/10:hover,
.dark-mode nav a.hover\:bg-accent\/10:hover {
  background-color: rgba(194, 65, 139, 0.2) !important;
}

.dark-mode header button.hover\:text-accent:hover,
.dark-mode header a.hover\:text-accent:hover,
.dark-mode nav button.hover\:text-accent:hover,
.dark-mode nav a.hover\:text-accent:hover {
  color: var(--color-accent-hover) !important;
}

.dark-mode .bg-white,
.dark-mode .bg-white\/95 {
  background-color: var(--color-bg-primary) !important;
}

.dark-mode .bg-gray-100 {
  background-color: var(--color-bg-secondary) !important;
}

.dark-mode .bg-gray-200 {
  background-color: #3a3a3a !important; /* Darker background for better contrast in dark mode */
}

/* Specific style for the delete alert button to ensure text visibility */
.dark-mode .delete-alert-btn {
  color: #e5e7eb !important; /* Light gray text for better visibility */
}

/* Specific styling for unavailable variant tiles */
.dark-mode .bg-gray-100.text-gray-400 {
  background-color: rgba(30, 30, 30, 0.7) !important;
}

.dark-mode .bg-gray-50 {
  background-color: var(--color-bg-tertiary) !important;
}

/* Text colors */
.dark-mode .text-gray-900,
.dark-mode .text-gray-800,
.dark-mode .text-gray-700,
.dark-mode .text-primary,
.dark-mode .text-black {
  color: var(--color-text-primary) !important;
}

.dark-mode .text-gray-600 {
  color: var(--color-text-secondary) !important;
}

.dark-mode .text-gray-500,
.dark-mode .text-gray-400 {
  color: var(--color-text-tertiary) !important;
}

/* Border colors */
.dark-mode .border,
.dark-mode .border-gray-100,
.dark-mode .border-gray-200,
.dark-mode .border-gray-300 {
  border-color: var(--color-border) !important;
}

/* Input fields */
.dark-mode input,
.dark-mode select,
.dark-mode textarea {
  background-color: var(--color-input-bg);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

.dark-mode input::placeholder {
  color: var(--color-text-tertiary);
}

/* Cards and containers */
.dark-mode .shadow-lg,
.dark-mode .shadow-md,
.dark-mode .shadow-sm {
  box-shadow: 0 4px 6px var(--color-shadow) !important;
}

/* Remove shadows from percentage indicators, price indicators, and number indicators in dark mode */
.dark-mode .bg-gradient-to-r.shadow-sm,
.dark-mode .bg-gradient-to-r.from-green-500.to-green-600.shadow-lg,
.dark-mode .bg-accent.shadow-lg,
.dark-mode .bg-white.border-2.border-accent.shadow-md {
  box-shadow: none !important;
}

/* Hero section */
.dark-mode .hero-section {
  background-image:
    linear-gradient(135deg,
      rgba(30, 30, 30, 0.98),
      rgba(30, 30, 30, 0.9) 20%,
      rgba(194, 65, 139, 0.12) 40%,
      rgba(30, 30, 30, 0.85) 60%,
      rgba(30, 30, 30, 0.95) 80%),
    repeating-linear-gradient(45deg,
      rgba(30, 30, 30, 0.05),
      rgba(30, 30, 30, 0.05) 10px,
      rgba(40, 40, 40, 0.05) 10px,
      rgba(40, 40, 40, 0.05) 20px) !important;
}

/* Footer */
.dark-mode footer {
  background-image:
    linear-gradient(135deg,
      rgba(30, 30, 30, 0.98),
      rgba(30, 30, 30, 0.9) 20%,
      rgba(194, 65, 139, 0.12) 40%,
      rgba(30, 30, 30, 0.85) 60%,
      rgba(30, 30, 30, 0.95) 80%),
    repeating-linear-gradient(45deg,
      rgba(30, 30, 30, 0.05),
      rgba(30, 30, 30, 0.05) 10px,
      rgba(40, 40, 40, 0.05) 10px,
      rgba(40, 40, 40, 0.05) 20px) !important;
}

/* Product cards */
.dark-mode .bg-white.rounded-lg {
  background-color: var(--color-card-bg) !important;
}

/* Accent color hover states */
.dark-mode .hover\:bg-accent\/10:hover {
  background-color: rgba(194, 65, 139, 0.2) !important;
}

.dark-mode .hover\:text-accent:hover {
  color: var(--color-accent-hover) !important;
}

/* Mark background in search results */
.dark-mode mark.bg-yellow-100 {
  background-color: rgba(194, 65, 139, 0.3);
  color: var(--color-text-primary);
}

/* Buttons */
.dark-mode .bg-accent {
  background-color: var(--color-accent);
}

.dark-mode .bg-accent:hover {
  background-color: var(--color-accent-hover);
}

/* Ensure text in accent buttons remains white and consistent in dark mode */
.dark-mode .bg-accent.text-white,
.dark-mode .bg-accent .text-white {
  color: #ffffff !important;
}

/* Dropdown menus */
.dark-mode .absolute.bg-white {
  background-color: var(--color-bg-secondary) !important;
}

/* Middle section with "Rekordowe Obniżki z 24h" */
.dark-mode .deals-section {
  background-color: #121212 !important;
}

/* Override any inline background styles in dark mode */
.dark-mode [style*="background-color"] {
  background-color: var(--color-bg-secondary) !important;
}

/* Specific override for deals-section to ensure it gets #121212 background */
.dark-mode .deals-section[style*="background-color"] {
  background-color: #121212 !important;
}

/* Exception for price trend bars to preserve their background colors */
.dark-mode .price-trend-bars div {
  /* Apply the same background colors as in light mode */
  background-color: var(--bar-bg-color, transparent) !important;
}

/* Preserve the original background colors based on price changes */
.dark-mode .price-trend-bars div[style*="background-color: rgba(190, 220, 205, 0.75)"] {
  --bar-bg-color: rgba(190, 220, 205, 0.75);
}

.dark-mode .price-trend-bars div[style*="background-color: #efe0ec"] {
  --bar-bg-color: #f8c4e3; /* Changed from #efe0ec to a more vibrant pink that's more distinct from gray */
  border-color: #e0a0c9 !important; /* Updated border color to match the new background color */
}

.dark-mode .price-trend-bars div[style*="background-color: #d1d5db"] {
  --bar-bg-color: #d0c8d1; /* Changed from #d1d5db to a more purplish gray that's distinct from green */
  border-color: #b8b0b9 !important; /* Updated border color to match the new background color */
}

/* Ensure time period display elements have filled backgrounds in dark mode */
.dark-mode .flex.items-center.gap-2.flex-wrap > div.bg-gray-50.rounded {
  background-color: var(--color-bg-tertiary) !important;
}

/* Override inline background-image styles in dark mode */
.dark-mode footer[style*="background-image"],
.dark-mode .hero-section[style*="background-image"] {
  background-image:
    linear-gradient(135deg,
      rgba(30, 30, 30, 0.98),
      rgba(30, 30, 30, 0.9) 20%,
      rgba(194, 65, 139, 0.12) 40%,
      rgba(30, 30, 30, 0.85) 60%,
      rgba(30, 30, 30, 0.95) 80%),
    repeating-linear-gradient(45deg,
      rgba(30, 30, 30, 0.05),
      rgba(30, 30, 30, 0.05) 10px,
      rgba(40, 40, 40, 0.05) 10px,
      rgba(40, 40, 40, 0.05) 20px) !important;
}

/* Specific override for light backgrounds */
.dark-mode [style*="background-color: #f4f2f7"],
.dark-mode [style*="background-color:#f4f2f7"] {
  background-color: var(--color-bg-secondary) !important;
}

/* Product grid cards and badges */
.dark-mode .grid .group.bg-white {
  background-color: var(--color-card-bg) !important;
}

/* Add subtle accent-colored border on hover for thumbnails in dark mode */
.dark-mode .grid .group:hover {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 1px var(--color-accent) !important;
}

/* Product name area (bottom of miniature) */
.dark-mode .grid .group .p-3.flex.flex-col.flex-grow {
  background-color: #1e1e1e !important;
}

.dark-mode .bg-white.border-2.border-accent {
  background-color: var(--color-bg-tertiary) !important;
}

/* Price text */
.dark-mode .text-green-500 {
  color: #4ade80 !important; /* Brighter green for better visibility in dark mode */
}

/* Share button and action buttons */
.dark-mode .border.border-accent.bg-white {
  background-color: var(--color-bg-tertiary) !important;
}

.dark-mode .rounded-lg.border.border-gray-200.bg-white {
  background-color: var(--color-card-bg) !important;
}

/* Background hover effects */
.dark-mode .absolute.inset-0.bg-white.opacity-0 {
  background-color: rgba(0, 0, 0, 0.2) !important;
}

.dark-mode .hover\:bg-gray-50:hover {
  background-color: var(--color-bg-tertiary) !important;
}

/* Accent background with opacity */
.dark-mode .bg-accent\/10 {
  background-color: rgba(194, 65, 139, 0.15) !important;
}

/* Discount percentage badge gradient */
.dark-mode .bg-gradient-to-r.from-green-500.to-green-600 {
  background: linear-gradient(to right, #22c55e, #16a34a) !important;
}

/* Gender badge */
.dark-mode .bg-gray-900\/80 {
  background-color: rgba(30, 30, 30, 0.9) !important;
}

/* Button hover states */
.dark-mode .hover\:bg-accent:hover {
  background-color: var(--color-accent) !important;
}

.dark-mode .group-hover\:opacity-15 {
  opacity: 0.5 !important;
}

/* Sidebar headers */
.dark-mode .text-dark {
  color: var(--color-text-primary) !important;
}

/* Range slider styles */
.dark-mode input[type="range"] {
  background-color: #ffffff !important;
  accent-color: var(--color-accent);
}

.dark-mode input[type="range"].bg-gray-200 {
  background-color: #ffffff !important;
}

/* Range slider thumbs - make them white in dark mode */
.dark-mode input[type="range"]::-webkit-slider-thumb {
  background-color: #ffffff !important;
  border: 2px solid var(--color-accent) !important;
}

.dark-mode input[type="range"]::-moz-range-thumb {
  background-color: #ffffff !important;
  border: 2px solid var(--color-accent) !important;
}

.dark-mode input[type="range"]::-ms-thumb {
  background-color: #ffffff !important;
  border: 2px solid var(--color-accent) !important;
}

/* Pagination styles */
.dark-mode .pagination span.bg-gray-200 {
  background-color: var(--color-accent) !important;
  color: white !important;
}

.dark-mode .pagination span.text-gray-800 {
  color: var(--color-text-primary) !important;
}

/* Mobile menu */
.dark-mode #mobile-menu {
  background-color: var(--color-bg-primary);
}

/* Mobile filter overlay */
.dark-mode .filter-overlay {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

.dark-mode .filter-content {
  background-color: var(--color-bg-primary) !important;
  border: 1px solid var(--color-border) !important;
}

.dark-mode .filter-content h2.text-primary {
  color: var(--color-text-primary) !important;
}

.dark-mode .filter-content #closeFilters {
  color: var(--color-text-secondary) !important;
}

.dark-mode .filter-content #closeFilters:hover {
  color: var(--color-text-primary) !important;
}

.dark-mode .filter-content h3 {
  color: var(--color-text-primary) !important;
}

.dark-mode .filter-content label {
  color: var(--color-text-secondary) !important;
}

/* Filter tags/tiles */
.dark-mode .active-filter-tag.bg-gray-200 {
  background-color: var(--color-bg-tertiary) !important;
  border: 1px solid var(--color-accent) !important;
  color: var(--color-text-primary) !important;
}

.dark-mode .active-filter-tag:hover {
  background-color: var(--color-accent) !important;
  color: white !important;
}

.dark-mode .active-filter-tag .text-gray-500 {
  color: var(--color-text-secondary) !important;
}

/* Reset filters button */
.dark-mode #resetFilters,
.dark-mode button.bg-gray-300.text-gray-700 {
  background-color: var(--color-bg-tertiary) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border) !important;
}

.dark-mode #resetFilters:hover,
.dark-mode button.bg-gray-300.text-gray-700:hover {
  background-color: var(--color-accent) !important;
  color: white !important;
}

/* Mobile filter toggle button */
.dark-mode .filter-toggle {
  background-color: var(--color-accent) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .filter-toggle:hover {
  background-color: var(--color-accent-hover) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Fix for "Najlepsze oferty" section */
/* Bottom panel with light gray background */
.dark-mode .bg-gray-50\/50 {
  background-color: var(--color-bg-secondary) !important;
  border-top: 1px solid var(--color-border) !important;
}

/* Links in the bottom panel */
.dark-mode .offer-panel-link {
  color: var(--color-text-secondary) !important;
  text-decoration: none;
}

/* Hover state for links */
.dark-mode a:hover .offer-panel-link,
.dark-mode button:hover .offer-panel-link {
  color: var(--color-accent) !important;
  text-decoration: none;
}

/* Background for hover state */
.dark-mode .hover\:bg-white:hover {
  background-color: var(--color-bg-tertiary) !important;
}

/* Fix for variant selection tiles - matching light mode aesthetics */
.dark-mode .bg-\[\#d2d5db\] {
  background-color: #3a3a3a !important;
  color: var(--color-text-primary) !important;
}

/* Styling for available but unselected variant tiles */
.dark-mode .bg-gray-100.text-gray-700 {
  background-color: #2a2a2a !important;
  color: var(--color-text-secondary) !important;
}

/* Fix for variant hover states */
.dark-mode .hover\:bg-gray-200:hover {
  background-color: #333333 !important;
  color: var(--color-text-primary) !important;
}

/* Specific fix for Type, Size, and Set selection tiles to ensure hover effect applies to entire tile */
.dark-mode a.hover\:bg-gray-200:hover,
.dark-mode button.hover\:bg-gray-200:hover,
.dark-mode .size-variant.hover\:bg-gray-200:hover {
  background-color: #333333 !important;
  color: var(--color-text-primary) !important;
  transition: background-color 0.2s ease;
}

/* Fix for breadcrumbs */
.dark-mode nav[aria-label="Breadcrumb"] a {
  color: var(--color-text-secondary) !important;
}

.dark-mode nav[aria-label="Breadcrumb"] a:hover {
  background-color: var(--color-bg-tertiary) !important;
  color: var(--color-text-primary) !important;
}

.dark-mode nav[aria-label="Breadcrumb"] a[aria-current="page"] {
  color: var(--color-text-primary) !important;
  font-weight: 500;
}

.dark-mode nav[aria-label="Breadcrumb"] svg {
  color: var(--color-text-tertiary) !important;
}

/* Multikoszyk page styles */
/* "Twój koszyk jest zapisany tymczasowo" background */
.dark-mode .bg-primary\/5 {
  background-color: #2a2a2a !important;
  border-left-color: var(--color-accent) !important;
}

/* "Twój koszyk jest pusty" background */
.dark-mode .bg-white.rounded-xl.shadow-sm.p-8.text-center {
  background-color: var(--color-bg-secondary) !important;
}

/* "Tymczasowy koszyk" panel header */
.dark-mode .basket-header {
  background-color: var(--color-bg-secondary) !important;
  padding: 10px;
  border-radius: 8px;
}

.dark-mode .basket-header h2 {
  color: var(--color-text-primary) !important;
}

/* Change light greenish background to dark greenish for "Najlepsza opcja" badge */
.dark-mode .flex.items-center.text-green-600 {
  color: #4ade80 !important;
}

.dark-mode .bg-green-50 {
  background-color: rgba(22, 101, 52, 0.3) !important;
}

/* Best option badge in analysis section */
.dark-mode .analysis-option.best {
  background-color: rgba(22, 101, 52, 0.15) !important;
  border: 1px solid rgba(22, 101, 52, 0.3) !important;
}

/* ============================================ */
/* Styles for all_stores.html and store_reviews.html */
/* ============================================ */

/* Main background for both pages */
.dark-mode .bg-\[\#f4f2f7\] {
  background-color: var(--color-bg-primary) !important;
}

/* Store cards and panels */
.dark-mode .bg-white {
  background-color: var(--color-bg-secondary) !important;
}

.dark-mode .shadow-sm, 
.dark-mode .shadow-md, 
.dark-mode .hover\:shadow-md:hover {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

/* Text colors */
.dark-mode .text-gray-400,
.dark-mode .text-gray-500,
.dark-mode .text-gray-600,
.dark-mode .text-gray-700,
.dark-mode .text-gray-800 {
  color: var(--color-text-secondary) !important;
}

/* Fix for the underline in all_stores.html */
.dark-mode main > header.mb-6 {
  border-bottom: none !important;
}

.dark-mode .text-primary {
  color: var(--color-text-primary) !important;
}

.dark-mode .text-dark {
  color: var(--color-text-primary) !important;
}

/* Borders */
.dark-mode .border-gray-100,
.dark-mode .border-gray-200,
.dark-mode .border-gray-300 {
  border-color: var(--color-border) !important;
}

/* Store list page specific styles */
.dark-mode .bg-gray-50 {
  background-color: var(--color-bg-tertiary) !important;
}

.dark-mode .bg-gray-100,
.dark-mode .hover\:bg-gray-100:hover {
  background-color: var(--color-bg-tertiary) !important;
}

/* Hover effect for selection tiles - excluded from the rule above to avoid conflict */

/* Store badges */
.dark-mode .bg-green-100 {
  background-color: rgba(22, 101, 52, 0.2) !important;
}

.dark-mode .text-green-800 {
  color: #4ade80 !important;
}

.dark-mode .bg-purple-50 {
  background-color: rgba(147, 51, 234, 0.2) !important;
}

.dark-mode .text-purple-500 {
  color: #a855f7 !important;
}

.dark-mode .bg-blue-50 {
  background-color: rgba(59, 130, 246, 0.2) !important;
}

.dark-mode .text-blue-500 {
  color: #3b82f6 !important;
}

.dark-mode .bg-accent\/10 {
  background-color: rgba(var(--color-accent-rgb), 0.2) !important;
}

/* Store reviews page specific styles */
.dark-mode .review-rating-bar {
  background-color: var(--color-bg-tertiary) !important;
}

.dark-mode .review-rating-bar-fill {
  background-color: #eab308 !important;
}

/* Fix for the gradient in store description section */
.dark-mode .bg-gradient-to-t.from-white.to-transparent {
  background-image: linear-gradient(to top, var(--color-bg-secondary), transparent) !important;
}

/* Fix for the long description text */
.dark-mode .markdown-content {
  color: var(--color-text-primary) !important;
}

.dark-mode .markdown-content p {
  color: var(--color-text-primary) !important;
}

/* Fix for headers in the long description */
.dark-mode .markdown-content h1,
.dark-mode .markdown-content h2,
.dark-mode .markdown-content h3,
.dark-mode .markdown-content h4,
.dark-mode .markdown-content h5,
.dark-mode .markdown-content h6 {
  color: var(--color-text-primary) !important;
}

/* Form elements */
.dark-mode input[type="text"],
.dark-mode input[type="search"],
.dark-mode select,
.dark-mode textarea {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

.dark-mode input[type="text"]:focus,
.dark-mode input[type="search"]:focus,
.dark-mode select:focus,
.dark-mode textarea:focus {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-accent) !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
  color: var(--color-text-tertiary) !important;
}

/* Pagination */
.dark-mode .bg-accent {
  background-color: var(--color-accent) !important;
}

.dark-mode button:disabled {
  opacity: 0.5 !important;
}

/* Alert boxes */
.dark-mode .bg-red-100 {
  background-color: rgba(220, 38, 38, 0.2) !important;
}

.dark-mode .text-red-700 {
  color: #ef4444 !important;
}

.dark-mode .border-red-500 {
  border-color: #ef4444 !important;
}

.dark-mode .bg-green-100 {
  background-color: rgba(22, 163, 74, 0.2) !important;
}

.dark-mode .text-green-700 {
  color: #22c55e !important;
}

.dark-mode .border-green-500 {
  border-color: #22c55e !important;
}

/* ============================================ */
/* Styles for about.html, contact.html, and updates.html */
/* ============================================ */

/* About page specific styles */
.dark-mode .bg-gradient-to-r.from-\[\#f0e5fa\].to-\[\#f7f2fc\] {
  background-image: linear-gradient(to right, #1e1e1e, #2a2a2a) !important;
}

/* Feature boxes on about page */
.dark-mode .feature-icon {
  color: var(--color-accent) !important;
}

/* Contact page specific styles */
.dark-mode .bg-yellow-50 {
  background-color: rgba(234, 179, 8, 0.15) !important;
}

.dark-mode .border-yellow-200 {
  border-color: rgba(234, 179, 8, 0.3) !important;
}

.dark-mode .text-yellow-800 {
  color: #facc15 !important;
}

.dark-mode .bg-yellow-100 {
  background-color: rgba(234, 179, 8, 0.2) !important;
}

/* Updates page specific styles */
.dark-mode section[style*="background-color: #f4f2f7"] {
  background-color: var(--color-bg-primary) !important;
}

.dark-mode .prose.prose-sm {
  color: var(--color-text-primary) !important;
}

.dark-mode .prose.prose-sm.text-yellow-800 {
  color: #facc15 !important;
}

/* Common elements across all three pages */
.dark-mode .font-serif {
  color: var(--color-text-primary) !important;
}

.dark-mode .hero-section[style*="background-image: linear-gradient(to right, rgba(244, 242, 247, 0.95), rgba(233, 213, 240, 0.35), rgba(205, 58, 140, 0.03), rgba(233, 213, 240, 0.35), rgba(244, 242, 247, 0.95))"] {
  background-image: linear-gradient(135deg,
      rgba(30, 30, 30, 0.98),
      rgba(30, 30, 30, 0.9) 20%,
      rgba(194, 65, 139, 0.12) 40%,
      rgba(30, 30, 30, 0.85) 60%,
      rgba(30, 30, 30, 0.95) 80%) !important;
}

/* ============================================ */
/* Styles for store_verification.html, register.html, profile.html, privacy_policy.html */
/* ============================================ */

/* Store verification page specific styles */
.dark-mode .bg-accent\/5 {
  background-color: rgba(var(--color-accent-rgb), 0.1) !important;
}

.dark-mode .w-10.h-10.bg-accent\/10 {
  background-color: rgba(var(--color-accent-rgb), 0.2) !important;
}

/* Register page specific styles */
.dark-mode .border-t-4.border-accent {
  border-top-color: var(--color-accent) !important;
}

.dark-mode .bg-primary\/5 {
  background-color: rgba(30, 30, 30, 0.7) !important;
}

.dark-mode .text-accent.text-xs.bg-accent\/10 {
  background-color: rgba(var(--color-accent-rgb), 0.2) !important;
  color: var(--color-accent) !important;
}

.dark-mode .inline-block.bg-accent\/10.text-accent {
  background-color: rgba(var(--color-accent-rgb), 0.2) !important;
  color: var(--color-accent) !important;
}

.dark-mode .w-12.h-12.rounded-full.bg-accent\/10 {
  background-color: rgba(var(--color-accent-rgb), 0.2) !important;
}

/* Profile page specific styles */
.dark-mode .bg-gradient-to-br.from-accent\/5.to-accent\/10 {
  background-image: linear-gradient(to bottom right, rgba(var(--color-accent-rgb), 0.1), rgba(var(--color-accent-rgb), 0.2)) !important;
}

.dark-mode .bg-gradient-to-br.from-primary\/5.to-primary\/10 {
  background-image: linear-gradient(to bottom right, rgba(30, 30, 30, 0.7), rgba(40, 40, 40, 0.7)) !important;
}

.dark-mode .bg-gradient-to-br.from-green-50.to-green-100\/50 {
  background-image: linear-gradient(to bottom right, rgba(22, 101, 52, 0.2), rgba(22, 101, 52, 0.3)) !important;
}

.dark-mode .w-12.h-12.bg-green-100 {
  background-color: rgba(22, 101, 52, 0.3) !important;
}

.dark-mode .w-12.h-12.bg-accent\/20 {
  background-color: rgba(var(--color-accent-rgb), 0.3) !important;
}

.dark-mode .w-12.h-12.bg-primary\/20 {
  background-color: rgba(30, 30, 30, 0.8) !important;
}

.dark-mode .text-primary.hover\:text-primary\/80 {
  color: var(--color-text-primary) !important;
}

.dark-mode .text-primary.hover\:text-primary\/80:hover {
  color: var(--color-accent) !important;
}

.dark-mode .bg-primary.hover\:bg-primary-dark {
  background-color: var(--color-accent) !important;
}

.dark-mode .bg-primary.hover\:bg-primary-dark:hover {
  background-color: var(--color-accent-hover) !important;
}

.dark-mode .bg-primary.text-white {
  background-color: var(--color-accent) !important;
  color: white !important;
}

.dark-mode .bg-primary\/90 {
  background-color: rgba(var(--color-accent-rgb), 0.9) !important;
}

.dark-mode .text-green-600 {
  color: #4ade80 !important;
}

.dark-mode .text-blue-700 {
  color: #3b82f6 !important;
}

.dark-mode .text-blue-800 {
  color: #60a5fa !important; /* Brighter blue for better visibility in dark mode */
}

.dark-mode .bg-blue-100 {
  background-color: rgba(59, 130, 246, 0.2) !important;
}

.dark-mode .w-16.h-16.bg-gray-100 {
  background-color: var(--color-bg-tertiary) !important;
}

.dark-mode .w-20.h-20.bg-gray-100 {
  background-color: var(--color-bg-tertiary) !important;
}

.dark-mode .text-gray-400.text-2xl {
  color: var(--color-text-tertiary) !important;
}

.dark-mode .text-gray-400.text-xl {
  color: var(--color-text-tertiary) !important;
}

.dark-mode .text-gray-400.text-3xl {
  color: var(--color-text-tertiary) !important;
}

/* Privacy policy page specific styles */
.dark-mode .content h2.text-xl.font-bold.text-primary {
  color: var(--color-text-primary) !important;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.dark-mode .content ul {
  color: var(--color-text-secondary) !important;
}

.dark-mode .content strong {
  color: var(--color-text-primary) !important;
}

/* Common elements across all four pages */
.dark-mode .text-3xl.md\:text-4xl.font-serif.font-medium.text-primary,
.dark-mode .text-3xl.md\:text-4xl.font-bold.text-primary.font-serif,
.dark-mode .text-2xl.font-serif.font-medium.text-primary,
.dark-mode .text-2xl.md\:text-3xl.font-serif.text-primary {
  color: var(--color-text-primary) !important;
}