/**
 * Smart Directory Pro - Color Scheme System
 * Multiple color themes with proper contrast handling
 * @package Smart_Directory_Pro
 */

/* ===================================================================
   CSS CUSTOM PROPERTIES - Base color system
   =================================================================== */

:root {
  /* Default theme colors */
  --primary: 221 83% 58%;
  --secondary: 210 40% 96%;
  --accent: 210 40% 60%;
  
  /* Base colors for light mode */
  --text-primary: #1a1a1a;
  --text-secondary: #4a4a4a;
  --text-muted: #6a6a6a;
  --text-inverse: #ffffff;
  
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-elevated: #ffffff;
  --bg-muted: #f5f5f5;
  
  --border-color: rgba(0, 0, 0, 0.1);
  --border-strong: rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
}

/* ===================================================================
   COLOR SCHEMES - Each with unique primary colors
   =================================================================== */

/* Default - Keep as is */
[data-color-scheme="default"] {
  --primary: 262 83% 58%;
  --secondary: 220 80% 60%;
  --accent: 190 95% 50%;
}

/* Professional */
[data-color-scheme="professional"] {
  --primary: 210 50% 40%;
  --secondary: 220 30% 30%;
  --accent: 200 70% 50%;
}


/* Soft Lavender */
[data-color-scheme="soft-lavender"] {
  --primary: 270 50% 75%;
  --secondary: 280 40% 70%;
  --accent: 260 60% 80%;
}

/* Mint Fresh */
[data-color-scheme="mint-fresh"] {
  --primary: 150 60% 70%;
  --secondary: 160 50% 65%;
  --accent: 140 70% 75%;
}

/* Peach Cream */
[data-color-scheme="peach-cream"] {
  --primary: 25 85% 75%;
  --secondary: 35 75% 70%;
  --accent: 15 90% 80%;
}

/* Sky Blue */
[data-color-scheme="sky-blue"] {
  --primary: 200 80% 70%;
  --secondary: 210 70% 65%;
  --accent: 190 85% 75%;
}

/* Warm Earth */
[data-color-scheme="warm-earth"] {
  --primary: 30 40% 50%;
  --secondary: 25 35% 45%;
  --accent: 40 50% 60%;
}

/* Forest Green */
[data-color-scheme="forest-green"] {
  --primary: 130 45% 35%;
  --secondary: 120 40% 30%;
  --accent: 140 55% 45%;
}

/* Desert Sand */
[data-color-scheme="desert-sand"] {
  --primary: 40 60% 60%;
  --secondary: 35 55% 55%;
  --accent: 45 70% 70%;
}

/* Deep Ocean */
[data-color-scheme="deep-ocean"] {
  --primary: 200 80% 35%;
  --secondary: 210 70% 30%;
  --accent: 190 85% 45%;
}

/* Turquoise */
[data-color-scheme="turquoise"] {
  --primary: 180 60% 40%;
  --secondary: 170 50% 35%;
  --accent: 190 70% 50%;
}

/* Aqua Marine */
[data-color-scheme="aqua-marine"] {
  --primary: 180 70% 50%;
  --secondary: 170 60% 45%;
  --accent: 190 80% 60%;
}

/* Golden Hour */
[data-color-scheme="golden-hour"] {
  --primary: 45 95% 55%;
  --secondary: 35 90% 50%;
  --accent: 55 100% 65%;
}

/* Sunset Blaze */
[data-color-scheme="sunset-blaze"] {
  --primary: 15 95% 60%;
  --secondary: 25 90% 55%;
  --accent: 5 100% 70%;
}

/* Aurora Purple */
[data-color-scheme="aurora-purple"] {
  --primary: 290 80% 55%;
  --secondary: 280 70% 50%;
  --accent: 300 90% 65%;
}

/* Pure Grayscale */
[data-color-scheme="pure-grayscale"] {
  --primary: 0 0% 40%;
  --secondary: 0 0% 50%;
  --accent: 0 0% 30%;
}

/* Warm Gray */
[data-color-scheme="warm-gray"] {
  --primary: 20 10% 45%;
  --secondary: 15 8% 50%;
  --accent: 25 12% 40%;
}


/* Classic Green */
[data-color-scheme="classic-green"] {
  --primary: 142 76% 36%;
  --secondary: 120 40% 45%;
  --accent: 80 60% 50%;
}

/* Classic Red */
[data-color-scheme="classic-red"] {
  --primary: 0 72% 51%;
  --secondary: 340 80% 45%;
  --accent: 15 80% 50%;
}

/* Rose Gold */
[data-color-scheme="rose-gold"] {
  --primary: 330 70% 50%;
  --secondary: 340 60% 40%;
  --accent: 320 80% 60%;
}

/* Emerald Luxury */
[data-color-scheme="emerald-luxury"] {
  --primary: 160 85% 35%;
  --secondary: 150 70% 30%;
  --accent: 170 90% 40%;
}

/* ===================================================================
   DARK MODE - Comprehensive dark theme with FULL text inversion
   =================================================================== */

[data-color-scheme="dark-mode"],
[data-color-scheme="midnight-blue"],
[data-color-scheme="charcoal"] {
  /* Dark mode specific colors */
  --text-primary: #f7f7f8 !important;
  --text-secondary: #e1e1e3 !important;
  --text-muted: #9ca3af !important;
  --text-inverse: #1a1a1a !important;
  
  --bg-primary: #1a1d26 !important;
  --bg-secondary: #242832 !important;
  --bg-elevated: #2d3142 !important;
  --bg-muted: #363a4f !important;
  
  --border-color: rgba(255, 255, 255, 0.08) !important;
  --border-strong: rgba(255, 255, 255, 0.15) !important;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

/* Modern dark mode with React-style gradients */
[data-color-scheme="dark-mode"] {
  --primary: 217 91% 60%; /* Bright blue */
  --secondary: 265 85% 70%; /* Purple */
  --accent: 142 76% 55%; /* Green accent */
  
  /* Override background colors for modern dark theme */
  --bg-primary: hsl(222 84% 4%) !important; /* Very dark navy */
  --bg-secondary: hsl(222 84% 6%) !important; /* Slightly lighter dark */
  --bg-elevated: hsl(222 84% 8%) !important; /* Card background */
  --bg-muted: hsl(215 27% 17%) !important; /* Dark muted */
  
  /* Text colors */
  --text-primary: hsl(210 40% 98%) !important; /* Almost white */
  --text-secondary: hsl(210 40% 90%) !important;
  --text-muted: hsl(217 10% 64%) !important; /* Light muted text */
  
  /* Borders */
  --border-color: hsl(215 27% 17% / 0.5) !important; /* Semi-transparent dark border */
  --border-strong: hsl(215 27% 25% / 0.7) !important;
  
  /* Enhanced shadows for dark mode */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 20px -12px hsl(var(--primary) / 0.25) !important;
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 30px -10px hsl(var(--primary) / 0.3) !important;
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 40px -8px hsl(var(--primary) / 0.4) !important;
}

[data-color-scheme="midnight-blue"] {
  --primary: 220 90% 65%; /* Bright blue */
  --secondary: 280 85% 75%; /* Purple */
  --accent: 180 70% 60%; /* Cyan accent */
  
  --bg-primary: hsl(220 50% 10%) !important;
  --bg-secondary: hsl(220 50% 13%) !important;
  --bg-elevated: hsl(220 45% 15%) !important;
  --bg-muted: hsl(220 40% 20%) !important;
}

[data-color-scheme="charcoal"] {
  --primary: 200 85% 60%; /* Light blue */
  --secondary: 340 75% 65%; /* Pink */
  --accent: 60 70% 60%; /* Yellow accent */
  
  --bg-primary: hsl(0 0% 8%) !important;
  --bg-secondary: hsl(0 0% 10%) !important;
  --bg-elevated: hsl(0 0% 12%) !important;
  --bg-muted: hsl(0 0% 15%) !important;
}

/* ===================================================================
   CONTRAST ADJUSTMENTS - Light schemes need dark text
   =================================================================== */

/* Light color schemes that need dark text for contrast */
[data-color-scheme="soft-lavender"],
[data-color-scheme="mint-fresh"],
[data-color-scheme="peach-cream"],
[data-color-scheme="sky-blue"],
[data-color-scheme="desert-sand"],
[data-color-scheme="golden-hour"],
[data-color-scheme="sunset-blaze"],
[data-color-scheme="aurora-purple"],
[data-color-scheme="rose-gold"] {
  /* Force dark text on light backgrounds */
  --text-primary: #0f0f0f;
  --text-secondary: #2a2a2a;
  --text-muted: #525252;
  
  /* Stronger borders for visibility */
  --border-color: rgba(0, 0, 0, 0.15);
  --border-strong: rgba(0, 0, 0, 0.25);
}

/* ===================================================================
   BASE STYLES - Apply to all elements
   =================================================================== */

* {
  transition: background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base);
}

.color-scheme-transitioning * {
  transition-duration: 0s !important;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Dark mode body background with subtle pattern */
[data-color-scheme="dark-mode"] body,
[data-color-scheme="midnight-blue"] body,
[data-color-scheme="charcoal"] body {
  background-color: var(--bg-primary);
  background-image: 
    radial-gradient(circle at 10% 20%, hsl(var(--primary) / 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, hsl(var(--secondary) / 0.03) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, hsl(var(--accent) / 0.02) 0%, transparent 50%),
    linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

/* Text inheritance - COMPREHENSIVE with white text exceptions */
h1:not(.text-white), h2:not(.text-white), h3:not(.text-white), h4:not(.text-white), h5:not(.text-white), h6:not(.text-white),
p:not(.text-white), span:not(.text-white), div:not(.text-white):not([class*="text-white"]), 
section:not(.text-white), article:not(.text-white),
li:not(.text-white), td:not(.text-white), th:not(.text-white), dt:not(.text-white), dd:not(.text-white), 
label:not(.text-white), legend:not(.text-white),
blockquote:not(.text-white), cite:not(.text-white), code:not(.text-white), pre:not(.text-white), q:not(.text-white),
time:not(.text-white), address:not(.text-white), figcaption:not(.text-white), caption:not(.text-white),
em:not(.text-white), strong:not(.text-white), b:not(.text-white), i:not(.text-white), u:not(.text-white), 
s:not(.text-white), mark:not(.text-white),
abbr:not(.text-white), acronym:not(.text-white), kbd:not(.text-white), samp:not(.text-white), var:not(.text-white),
ins:not(.text-white), del:not(.text-white), sub:not(.text-white), sup:not(.text-white), 
big:not(.text-white), small:not(.text-white) {
  color: var(--text-primary) !important;
}

/* Preserve white text classes */
.text-white,
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6,
.text-white p, .text-white span, .text-white div, .text-white em, .text-white strong {
  color: #ffffff !important;
}

/* Preserve white text with opacity classes */
.text-white\/90,
.text-white\/90 h1, .text-white\/90 h2, .text-white\/90 h3, .text-white\/90 h4, .text-white\/90 h5, .text-white\/90 h6,
.text-white\/90 p, .text-white\/90 span, .text-white\/90 div, .text-white\/90 em, .text-white\/90 strong {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Secondary text elements */
.text-secondary,
.meta,
.subtitle,
.description {
  color: var(--text-secondary);
}

/* Muted text */
.text-muted,
small,
.help-text {
  color: var(--text-muted);
}

/* Links */
a:not(.btn):not(.button) {
  color: hsl(var(--accent));
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:not(.btn):not(.button):hover {
  color: hsl(var(--primary));
  text-decoration: none;
}

/* ===================================================================
   BUTTONS - Ensure contrast in all schemes
   =================================================================== */

.btn,
.button,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
  background-color: hsl(var(--primary));
  color: white;
  border: 1px solid hsl(var(--primary));
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Ensure white text on primary buttons for ALL schemes */
.btn,
.button,
button:not(.btn-ghost),
input[type="submit"],
input[type="button"],
.wp-block-button__link {
  background-color: hsl(var(--primary)) !important;
  color: white !important;
  border-color: hsl(var(--primary)) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  font-weight: 500;
  transition: all var(--transition-fast);
}

/* Modern dark mode gradient buttons */
[data-color-scheme="dark-mode"] .btn,
[data-color-scheme="dark-mode"] .button,
[data-color-scheme="dark-mode"] button:not(.btn-ghost),
[data-color-scheme="dark-mode"] input[type="submit"],
[data-color-scheme="dark-mode"] input[type="button"],
[data-color-scheme="midnight-blue"] .btn,
[data-color-scheme="midnight-blue"] .button,
[data-color-scheme="charcoal"] .btn,
[data-color-scheme="charcoal"] .button {
  background: linear-gradient(135deg, 
    hsl(var(--primary)) 0%, 
    hsl(var(--secondary)) 100%) !important;
  box-shadow: 
    0 0 20px -8px hsl(var(--primary) / 0.4),
    0 0 40px -12px hsl(var(--secondary) / 0.3),
    0 10px 25px -5px rgba(0, 0, 0, 0.3) !important;
  border: none !important;
}

.btn:hover,
.button:hover,
button:not(.btn-ghost):hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  filter: brightness(1.1);
}

/* Enhanced hover for dark mode buttons */
[data-color-scheme="dark-mode"] .btn:hover,
[data-color-scheme="dark-mode"] .button:hover,
[data-color-scheme="dark-mode"] button:not(.btn-ghost):hover,
[data-color-scheme="midnight-blue"] .btn:hover,
[data-color-scheme="charcoal"] .btn:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 0 30px -8px hsl(var(--primary) / 0.5),
    0 0 60px -12px hsl(var(--secondary) / 0.4),
    0 15px 35px -5px rgba(0, 0, 0, 0.4) !important;
  filter: brightness(1.15);
}


/* Secondary buttons */
.btn-secondary,
.button-secondary {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.btn-secondary:hover,
.button-secondary:hover {
  background-color: var(--bg-muted);
}

/* Ghost buttons */
.btn-ghost {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--border-color);
}

.btn-ghost:hover {
  background-color: var(--bg-muted);
}

/* ===================================================================
   FORMS - Proper contrast for all inputs
   =================================================================== */

input,
textarea,
select {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

/* Dark mode form fields */
[data-color-scheme="dark-mode"] input,
[data-color-scheme="midnight-blue"] input,
[data-color-scheme="charcoal"] input,
[data-color-scheme="dark-mode"] textarea,
[data-color-scheme="midnight-blue"] textarea,
[data-color-scheme="charcoal"] textarea,
[data-color-scheme="dark-mode"] select,
[data-color-scheme="midnight-blue"] select,
[data-color-scheme="charcoal"] select {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

/* Modern dark mode hero search form */
[data-color-scheme="dark-mode"] .hero-search-form,
[data-color-scheme="midnight-blue"] .hero-search-form,
[data-color-scheme="charcoal"] .hero-search-form {
  background: linear-gradient(135deg, 
    rgba(26, 29, 38, 0.95) 0%, 
    rgba(36, 40, 50, 0.95) 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Dark mode search inputs in hero */
[data-color-scheme="dark-mode"] .hero-search-form input[type="search"],
[data-color-scheme="midnight-blue"] .hero-search-form input[type="search"],
[data-color-scheme="charcoal"] .hero-search-form input[type="search"],
[data-color-scheme="dark-mode"] .hero-search-form input[type="text"],
[data-color-scheme="midnight-blue"] .hero-search-form input[type="text"],
[data-color-scheme="charcoal"] .hero-search-form input[type="text"] {
  background: linear-gradient(135deg, 
    rgba(45, 49, 66, 0.8) 0%, 
    rgba(54, 58, 79, 0.8) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--text-primary) !important;
}

/* Dark mode category select in hero */
[data-color-scheme="dark-mode"] .hero-search-form select,
[data-color-scheme="midnight-blue"] .hero-search-form select,
[data-color-scheme="charcoal"] .hero-search-form select {
  background: linear-gradient(135deg, 
    rgba(45, 49, 66, 0.8) 0%, 
    rgba(54, 58, 79, 0.8) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--text-primary) !important;
}

/* Dark mode labels in hero */
[data-color-scheme="dark-mode"] .hero-search-form label,
[data-color-scheme="midnight-blue"] .hero-search-form label,
[data-color-scheme="charcoal"] .hero-search-form label {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Focus states for dark mode hero inputs */
[data-color-scheme="dark-mode"] .hero-search-form input:focus,
[data-color-scheme="midnight-blue"] .hero-search-form input:focus,
[data-color-scheme="charcoal"] .hero-search-form input:focus,
[data-color-scheme="dark-mode"] .hero-search-form select:focus,
[data-color-scheme="midnight-blue"] .hero-search-form select:focus,
[data-color-scheme="charcoal"] .hero-search-form select:focus {
  background: linear-gradient(135deg, 
    rgba(54, 58, 79, 0.9) 0%, 
    rgba(63, 68, 94, 0.9) 100%) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 
    0 0 0 3px rgba(255, 255, 255, 0.1),
    inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}


input:focus,
textarea:focus,
select:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
  outline: none;
}

/* Placeholder text */
input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}


/* Labels */
label {
  color: var(--text-primary);
  font-weight: 500;
  display: block;
  margin-bottom: 0.25rem;
}

/* ===================================================================
   CARDS & ELEVATED SURFACES
   =================================================================== */

.card,
.business-card,
.form-card,
.widget,
.panel {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  border-radius: 0.5rem;
  padding: 1.5rem;
}

/* Modern dark mode cards with gradients and glows */
[data-color-scheme="dark-mode"] .card,
[data-color-scheme="dark-mode"] .business-card,
[data-color-scheme="dark-mode"] .form-card,
[data-color-scheme="dark-mode"] .widget,
[data-color-scheme="dark-mode"] .panel,
[data-color-scheme="midnight-blue"] .card,
[data-color-scheme="midnight-blue"] .business-card,
[data-color-scheme="midnight-blue"] .form-card,
[data-color-scheme="charcoal"] .card,
[data-color-scheme="charcoal"] .business-card,
[data-color-scheme="charcoal"] .form-card {
  background: linear-gradient(135deg, 
    var(--bg-elevated) 0%, 
    rgba(255, 255, 255, 0.02) 100%) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid hsl(var(--border-color) / 0.5) !important;
  box-shadow: 
    0 0 20px -12px hsl(var(--primary) / 0.25),
    0 25px 50px -12px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.3s ease;
}

/* Dark mode card hover effects */
[data-color-scheme="dark-mode"] .card:hover,
[data-color-scheme="dark-mode"] .business-card:hover,
[data-color-scheme="dark-mode"] .form-card:hover,
[data-color-scheme="midnight-blue"] .card:hover,
[data-color-scheme="midnight-blue"] .business-card:hover,
[data-color-scheme="charcoal"] .card:hover,
[data-color-scheme="charcoal"] .business-card:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 0 30px -10px hsl(var(--primary) / 0.3),
    0 0 60px -15px hsl(var(--secondary) / 0.2),
    0 30px 60px -12px rgba(0, 0, 0, 0.5) !important;
}

/* Business cards with enhanced dark mode effects */
[data-color-scheme="dark-mode"] .business-card,
[data-color-scheme="midnight-blue"] .business-card,
[data-color-scheme="charcoal"] .business-card {
  overflow: hidden;
  position: relative;
}

[data-color-scheme="dark-mode"] .business-card:hover,
[data-color-scheme="midnight-blue"] .business-card:hover,
[data-color-scheme="charcoal"] .business-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 0 40px -10px hsl(var(--primary) / 0.4),
    0 0 80px -20px hsl(var(--secondary) / 0.3),
    0 35px 60px -12px rgba(0, 0, 0, 0.6) !important;
}

/* Gradient border effect for dark mode cards */
[data-color-scheme="dark-mode"] .business-card::before,
[data-color-scheme="midnight-blue"] .business-card::before,
[data-color-scheme="charcoal"] .business-card::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(135deg, 
    hsl(var(--primary) / 0.3), 
    hsl(var(--secondary) / 0.3), 
    hsl(var(--accent) / 0.2)
  );
  border-radius: inherit;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  opacity: 0;
  transition: opacity 0.3s ease;
}

[data-color-scheme="dark-mode"] .business-card:hover::before,
[data-color-scheme="midnight-blue"] .business-card:hover::before,
[data-color-scheme="charcoal"] .business-card:hover::before {
  opacity: 1;
}

/* Ensure text contrast in cards */
.card *,
.business-card *,
.form-card * {
  color: var(--text-primary);
}

.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.business-card h1, .business-card h2, .business-card h3,
.form-card h1, .form-card h2, .form-card h3 {
  color: var(--text-primary);
  margin-top: 0;
}

/* ===================================================================
   NAVIGATION & MENUS
   =================================================================== */

.nav-link,
.menu-item a,
.navigation a {
  color: var(--text-primary);
  transition: color var(--transition-fast);
}

.nav-link:hover,
.menu-item a:hover,
.navigation a:hover {
  color: hsl(var(--primary));
}

.nav-link.active,
.menu-item.current a {
  color: hsl(var(--primary));
  font-weight: 500;
}

/* Dropdown menus */
.dropdown-menu {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
}

.dropdown-item {
  color: var(--text-primary);
}

.dropdown-item:hover {
  background-color: var(--bg-muted);
  color: hsl(var(--primary));
}

/* ===================================================================
   TABLES
   =================================================================== */

table {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
}

th {
  background-color: var(--bg-muted);
  color: var(--text-primary);
  font-weight: 600;
  border-bottom: 2px solid var(--border-strong);
}

td {
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

tr:hover {
  background-color: var(--bg-muted);
}

/* ===================================================================
   BADGES & TAGS
   =================================================================== */

.badge,
.tag,
.chip {
  background-color: hsl(var(--primary));
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  display: inline-block;
}

/* Light scheme badges need extra contrast */
[data-color-scheme="soft-lavender"] .badge,
[data-color-scheme="mint-fresh"] .badge,
[data-color-scheme="peach-cream"] .badge,
[data-color-scheme="sky-blue"] .badge,
[data-color-scheme="desert-sand"] .badge,
[data-color-scheme="golden-hour"] .badge,
[data-color-scheme="electric-lime"] .badge,
[data-color-scheme="orange-burst"] .badge,
[data-color-scheme="hot-pink"] .badge,
[data-color-scheme="cyber-purple"] .badge,
[data-color-scheme="magenta-pop"] .badge,
[data-color-scheme="aurora-purple"] .badge,
[data-color-scheme="sunset-blaze"] .badge {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  background-color: hsl(var(--primary)) !important;
  color: white !important;
}

/* Ensure all buttons have proper contrast for light schemes */
[data-color-scheme="soft-lavender"] .btn,
[data-color-scheme="mint-fresh"] .btn,
[data-color-scheme="peach-cream"] .btn,
[data-color-scheme="sky-blue"] .btn,
[data-color-scheme="desert-sand"] .btn,
[data-color-scheme="golden-hour"] .btn,
[data-color-scheme="electric-lime"] .btn,
[data-color-scheme="orange-burst"] .btn,
[data-color-scheme="hot-pink"] .btn,
[data-color-scheme="cyber-purple"] .btn,
[data-color-scheme="magenta-pop"] .btn,
[data-color-scheme="aurora-purple"] .btn,
[data-color-scheme="sunset-blaze"] .btn,
[data-color-scheme="soft-lavender"] button:not(.btn-ghost),
[data-color-scheme="mint-fresh"] button:not(.btn-ghost),
[data-color-scheme="peach-cream"] button:not(.btn-ghost),
[data-color-scheme="sky-blue"] button:not(.btn-ghost),
[data-color-scheme="desert-sand"] button:not(.btn-ghost),
[data-color-scheme="golden-hour"] button:not(.btn-ghost),
[data-color-scheme="electric-lime"] button:not(.btn-ghost),
[data-color-scheme="orange-burst"] button:not(.btn-ghost),
[data-color-scheme="hot-pink"] button:not(.btn-ghost),
[data-color-scheme="cyber-purple"] button:not(.btn-ghost),
[data-color-scheme="magenta-pop"] button:not(.btn-ghost),
[data-color-scheme="aurora-purple"] button:not(.btn-ghost),
[data-color-scheme="sunset-blaze"] button:not(.btn-ghost) {
  background-color: hsl(var(--primary)) !important;
  color: white !important;
  border-color: hsl(var(--primary)) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* ===================================================================
   COLOR SCHEME SWITCHER
   =================================================================== */

#color-scheme-switcher {
  position: fixed !important;
  bottom: 1.5rem !important;
  right: 1.5rem !important;
  z-index: 999;
}

.color-scheme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: hsl(var(--primary));
  color: white;
  border: none;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

.color-scheme-toggle:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
}

/* Color scheme card - always light background */
.color-scheme-card {
  background: white !important;
  color: #1a1a1a !important;
  border-radius: 0.75rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  width: 320px;
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  max-height: 80vh;
  overflow-y: auto;
}

/* Force readable text in color picker */
[data-color-scheme] .color-scheme-card {
  background-color: white !important;
  color: #1a1a1a !important;
}

[data-color-scheme] .color-scheme-card *:not(.color-preview-bars > div) {
  color: #1a1a1a !important;
}

.color-scheme-category {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280 !important;
  margin: 0.75rem 0 0.5rem 0;
  padding: 0 0.75rem;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.25rem;
}

.color-option {
  display: flex !important;
  align-items: center;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 0.5rem;
  margin: 0 0.5rem 0.25rem 0.5rem;
}

.color-option:hover {
  background-color: #f8f9fa !important;
  transform: translateX(2px);
}

.color-option.active,
.color-option.bg-muted {
  background-color: #e5e7eb !important;
}

.color-option span {
  color: #1a1a1a !important;
}

/* Color preview */
.color-preview-bars {
  display: flex !important;
  gap: 2px;
  height: 24px;
  width: 60px;
  border-radius: 0.25rem;
  overflow: hidden;
  margin-right: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.color-preview-bars > div {
  flex: 1;
  height: 100%;
  min-width: 0;
}

/* Ensure inline styles on preview bars are respected */
.color-preview-bars > div[style] {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Remove any background overrides that might hide the inline styles */
.color-scheme-card .color-preview-bars > div {
  /* Don't override background-color - let inline styles work */
}

/* Override any conflicting Tailwind utilities */
.color-scheme-card .flex {
  display: flex !important;
}

.color-scheme-card .space-x-1 > * + * {
  margin-left: 0.25rem !important;
}

/* Ensure the color preview divs are visible */
.color-preview-bars .w-3 {
  width: 0.75rem !important;
}

.color-preview-bars .h-6 {
  height: 1.5rem !important;
}

.color-preview-bars .rounded-l-sm {
  border-top-left-radius: 0.125rem !important;
  border-bottom-left-radius: 0.125rem !important;
}

.color-preview-bars .rounded-r-sm {
  border-top-right-radius: 0.125rem !important;
  border-bottom-right-radius: 0.125rem !important;
}

/* ===================================================================
   HERO SECTION CONSISTENCY
   =================================================================== */

/* Ensure hero text maintains consistent white color across all color schemes */
.hero-section .hero-title,
.hero-section .hero-subtitle {
  color: white !important;
}

.hero-section .hero-title {
  opacity: 1 !important;
}

.hero-section .hero-subtitle {
  opacity: 0.9 !important;
}

/* Override any color scheme specific text color changes for hero section */
[data-color-scheme] .hero-section .hero-title,
[data-color-scheme] .hero-section .hero-subtitle {
  color: white !important;
}

/* Dark mode hero text consistency */
[data-color-scheme="dark-mode"] .hero-section .hero-title,
[data-color-scheme="dark-mode"] .hero-section .hero-subtitle,
[data-color-scheme="midnight-blue"] .hero-section .hero-title,
[data-color-scheme="midnight-blue"] .hero-section .hero-subtitle,
[data-color-scheme="charcoal"] .hero-section .hero-title,
[data-color-scheme="charcoal"] .hero-section .hero-subtitle {
  color: white !important;
}

/* ===================================================================
   LAYOUT SECTIONS
   =================================================================== */

/* Main containers transparent to show body background */
.site,
.site-main,
.site-content,
#content,
#page,
.content-area,
main {
  background-color: transparent;
}

/* Header and footer */
header:not(.card-header),
.site-header {
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

/* Modern dark mode header with gradient */
[data-color-scheme="dark-mode"] header:not(.card-header),
[data-color-scheme="dark-mode"] .site-header,
[data-color-scheme="midnight-blue"] header:not(.card-header),
[data-color-scheme="midnight-blue"] .site-header,
[data-color-scheme="charcoal"] header:not(.card-header),
[data-color-scheme="charcoal"] .site-header {
  background: linear-gradient(to right, 
    var(--bg-primary) 0%, 
    var(--bg-secondary) 50%, 
    var(--bg-primary) 100%) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid hsl(var(--border-color) / 0.3) !important;
  box-shadow: 
    0 0 30px -10px hsl(var(--primary) / 0.15),
    0 8px 32px -8px rgba(0, 0, 0, 0.3) !important;
}

footer:not(.card-footer),
.site-footer {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  margin-top: 2rem;
}

/* Ensure header/footer text is readable */
header:not(.card-header) *,
.site-header *,
footer:not(.card-footer) *,
.site-footer * {
  color: var(--text-primary);
}

/* Sections */
.section,
.bg-gray-50,
.bg-light {
  background-color: var(--bg-secondary);
}

/* Hero sections */
.hero,
.hero-section {
  background-color: var(--bg-primary);
  position: relative;
  overflow: hidden;
}

/* Hero text must be readable */
.hero *,
.hero-section * {
  color: var(--text-primary);
}

/* Dark mode gradient overlay */
[data-color-scheme="dark-mode"] .hero::before,
[data-color-scheme="midnight-blue"] .hero::before,
[data-color-scheme="charcoal"] .hero::before,
[data-color-scheme="dark-mode"] .hero-section::before,
[data-color-scheme="midnight-blue"] .hero-section::before,
[data-color-scheme="charcoal"] .hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.02) 0%, 
    transparent 50%);
  pointer-events: none;
}

/* Dark mode hero glow effect */
[data-color-scheme="dark-mode"] .hero::after,
[data-color-scheme="dark-mode"] .hero-section::after,
[data-color-scheme="midnight-blue"] .hero::after,
[data-color-scheme="midnight-blue"] .hero-section::after,
[data-color-scheme="charcoal"] .hero::after,
[data-color-scheme="charcoal"] .hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 50%, hsl(var(--primary) / 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, hsl(var(--secondary) / 0.15) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, hsl(var(--accent) / 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}

/* ===================================================================
   DARK MODE UNIVERSAL TEXT INVERSION - NO EXCEPTIONS
   =================================================================== */

/* Force ALL text elements to light color in dark mode - except buttons, cards, styled headings, and hero section */
[data-color-scheme="dark-mode"] *:not(.color-scheme-card):not(.color-scheme-card *):not(.btn):not(.button):not(button):not(.site-title):not(.site-title *):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.hero-section):not(.hero-section *),
[data-color-scheme="midnight-blue"] *:not(.color-scheme-card):not(.color-scheme-card *):not(.btn):not(.button):not(button):not(.site-title):not(.site-title *):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.hero-section):not(.hero-section *),
[data-color-scheme="charcoal"] *:not(.color-scheme-card):not(.color-scheme-card *):not(.btn):not(.button):not(button):not(.site-title):not(.site-title *):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.hero-section):not(.hero-section *) {
  color: var(--text-primary) !important;
}

/* Headings should use their custom colors or inherit properly */
h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color, var(--text-primary));
}

/* ===================================================================
   BUTTON COLOR CONTRAST FIXES
   =================================================================== */

/* Ensure all primary buttons have white text across all color schemes */
.btn-primary,
.button-primary,
.header-btn-primary,
.bg-primary,
.bg-gradient-to-r,
[class*="bg-gradient"],
button[type="submit"],
input[type="submit"],
.wp-block-button__link,
a.btn:not(.btn-secondary):not(.btn-ghost),
.btn:not(.btn-secondary):not(.btn-ghost) {
  color: white !important;
}

/* Icon colors in primary buttons */
.btn-primary svg,
.button-primary svg,
.header-btn-primary svg,
.bg-primary svg,
.bg-gradient-to-r svg,
button[type="submit"] svg,
input[type="submit"] svg,
.wp-block-button__link svg {
  color: white !important;
  fill: white !important;
}

/* Override any color scheme specific button text colors */
[data-color-scheme] .btn-primary,
[data-color-scheme] .button-primary,
[data-color-scheme] .header-btn-primary,
[data-color-scheme] .bg-primary,
[data-color-scheme] .bg-gradient-to-r,
[data-color-scheme] button[type="submit"],
[data-color-scheme] input[type="submit"],
[data-color-scheme] .wp-block-button__link {
  color: white !important;
}

/* Ensure secondary buttons have proper contrast */
.btn-secondary,
.button-secondary,
.header-btn-secondary,
.bg-secondary {
  color: white !important;
  background-color: var(--secondary) !important;
  border-radius: 6px !important;
  padding: 0.5rem 1rem !important;
}

/* Secondary button icons */
.btn-secondary svg,
.button-secondary svg,
.header-btn-secondary svg,
.bg-secondary svg {
  color: white !important;
  fill: white !important;
}

/* Claim business link specific styling - context-aware */

/* Inline claim link in warning notice - should be a prominent inline button */
.bg-yellow-50 .claim-business-link {
  display: inline-flex !important;
  align-items: center !important;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: white !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 0.5rem 1rem !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3) !important;
  transition: all 0.2s ease !important;
  margin-left: 0.5rem !important;
  border: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Sidebar claim button - FORCE proper contrast on ALL themes */
.claim-business-link.w-full {
  background: #374151 !important; /* Force a dark background that works on all themes */
  color: white !important;
  padding: 1.5rem !important; /* Match py-6 px-6 from View All Reviews */
  font-weight: 500 !important;
  text-decoration: none !important;
  border-radius: 0 !important; /* Match rounded-none */
  box-shadow: none !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: background-color 0.2s ease !important;
}

.claim-business-link.w-full:hover {
  background: #1f2937 !important; /* Darker on hover */
  color: white !important;
}

/* Override for light themes - use dark text on light background for sidebar claim button */
[data-color-scheme="soft-lavender"] .claim-business-link.w-full,
[data-color-scheme="mint-fresh"] .claim-business-link.w-full,
[data-color-scheme="peach-cream"] .claim-business-link.w-full,
[data-color-scheme="sky-blue"] .claim-business-link.w-full,
[data-color-scheme="golden-hour"] .claim-business-link.w-full,
[data-color-scheme="warm-gray"] .claim-business-link.w-full,
[data-color-scheme="desert-sand"] .claim-business-link.w-full,
[data-color-scheme="electric-lime"] .claim-business-link.w-full,
[data-color-scheme="neon-green"] .claim-business-link.w-full {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #1a1a1a !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-color-scheme="soft-lavender"] .claim-business-link.w-full:hover,
[data-color-scheme="mint-fresh"] .claim-business-link.w-full:hover,
[data-color-scheme="peach-cream"] .claim-business-link.w-full:hover,
[data-color-scheme="sky-blue"] .claim-business-link.w-full:hover,
[data-color-scheme="golden-hour"] .claim-business-link.w-full:hover,
[data-color-scheme="warm-gray"] .claim-business-link.w-full:hover,
[data-color-scheme="desert-sand"] .claim-business-link.w-full:hover,
[data-color-scheme="electric-lime"] .claim-business-link.w-full:hover,
[data-color-scheme="neon-green"] .claim-business-link.w-full:hover {
  background: rgba(255, 255, 255, 1) !important;
  color: #1a1a1a !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.claim-business-link:hover {
  background: linear-gradient(135deg, #d97706, #b45309) !important; /* yellow-600 to yellow-700 gradient */
  color: white !important;
  text-decoration: none !important;
  transform: translateY(-2px) !important; /* More pronounced lift */
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4) !important; /* Larger, more prominent shadow */
  font-size: 1.1rem !important; /* Maintain larger size */
}

.claim-business-link:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Force proper styling for claim business link on ALL themes */
:not([data-color-scheme="dark-mode"]):not([data-color-scheme="midnight-blue"]):not([data-color-scheme="charcoal"]) .claim-business-link {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: white !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

:not([data-color-scheme="dark-mode"]):not([data-color-scheme="midnight-blue"]):not([data-color-scheme="charcoal"]) .claim-business-link:hover {
  background: linear-gradient(135deg, #d97706, #b45309) !important;
  color: white !important;
}

/* Comprehensive fix for header secondary buttons on ALL non-dark themes */
:not([data-color-scheme="dark-mode"]):not([data-color-scheme="midnight-blue"]):not([data-color-scheme="charcoal"]) .header-btn-secondary {
  background-color: transparent !important;
  color: var(--header-text, #1f2937) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  padding: 0.5rem 1rem !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

:not([data-color-scheme="dark-mode"]):not([data-color-scheme="midnight-blue"]):not([data-color-scheme="charcoal"]) .header-btn-secondary:hover {
  background-color: hsla(var(--primary), 0.05) !important;
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary)) !important;
  opacity: 1 !important;
}

/* For dark color schemes, ensure proper contrast */
[data-color-scheme="dark-mode"] .header-btn-secondary,
[data-color-scheme="midnight-blue"] .header-btn-secondary,
[data-color-scheme="charcoal"] .header-btn-secondary {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

[data-color-scheme="dark-mode"] .header-btn-secondary:hover,
[data-color-scheme="midnight-blue"] .header-btn-secondary:hover,
[data-color-scheme="charcoal"] .header-btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: white !important;
}

/* Pagination contrast fixes */
.reviews-pagination .bg-primary,
.reviews-pagination [class*="bg-primary"],
.pagination .bg-primary,
.pagination [class*="bg-primary"] {
  color: white !important;
  background-color: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
}

/* Override pagination colors for light schemes that need dark text */
[data-color-scheme="soft-lavender"] .reviews-pagination .bg-primary,
[data-color-scheme="soft-lavender"] .reviews-pagination [class*="bg-primary"],
[data-color-scheme="soft-lavender"] .pagination .bg-primary,
[data-color-scheme="soft-lavender"] .pagination [class*="bg-primary"],
[data-color-scheme="mint-fresh"] .reviews-pagination .bg-primary,
[data-color-scheme="mint-fresh"] .reviews-pagination [class*="bg-primary"],
[data-color-scheme="mint-fresh"] .pagination .bg-primary,
[data-color-scheme="mint-fresh"] .pagination [class*="bg-primary"],
[data-color-scheme="peach-cream"] .reviews-pagination .bg-primary,
[data-color-scheme="peach-cream"] .reviews-pagination [class*="bg-primary"],
[data-color-scheme="peach-cream"] .pagination .bg-primary,
[data-color-scheme="peach-cream"] .pagination [class*="bg-primary"],
[data-color-scheme="sky-blue"] .reviews-pagination .bg-primary,
[data-color-scheme="sky-blue"] .reviews-pagination [class*="bg-primary"],
[data-color-scheme="sky-blue"] .pagination .bg-primary,
[data-color-scheme="sky-blue"] .pagination [class*="bg-primary"] {
  color: #1a1a1a !important;
  background-color: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
  font-weight: 600 !important;
}

/* Enhanced pagination current page highlighting */
.reviews-pagination .bg-primary,
.pagination .bg-primary {
  box-shadow: 0 2px 4px hsla(var(--primary), 0.3) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Ghost buttons should use primary color */
.btn-ghost,
.button-ghost {
  color: hsl(var(--primary)) !important;
  background-color: transparent !important;
}

/* Hover states maintain contrast */
.btn-primary:hover,
.button-primary:hover,
.header-btn-primary:hover {
  color: white !important;
}

/* Special handling for color schemes with light primary colors */
[data-color-scheme="soft-lavender"] .btn-primary,
[data-color-scheme="soft-lavender"] .header-btn-primary,
[data-color-scheme="soft-lavender"] button[type="submit"],
[data-color-scheme="mint-fresh"] .btn-primary,
[data-color-scheme="mint-fresh"] .header-btn-primary,
[data-color-scheme="mint-fresh"] button[type="submit"],
[data-color-scheme="peach-cream"] .btn-primary,
[data-color-scheme="peach-cream"] .header-btn-primary,
[data-color-scheme="peach-cream"] button[type="submit"],
[data-color-scheme="sky-blue"] .btn-primary,
[data-color-scheme="sky-blue"] .header-btn-primary,
[data-color-scheme="sky-blue"] button[type="submit"],
[data-color-scheme="golden-hour"] .btn-primary,
[data-color-scheme="golden-hour"] .header-btn-primary,
[data-color-scheme="golden-hour"] button[type="submit"],
[data-color-scheme="warm-gray"] .btn-primary,
[data-color-scheme="warm-gray"] .header-btn-primary,
[data-color-scheme="warm-gray"] button[type="submit"],
[data-color-scheme="desert-sand"] .btn-primary,
[data-color-scheme="desert-sand"] .header-btn-primary,
[data-color-scheme="desert-sand"] button[type="submit"],
[data-color-scheme="electric-lime"] .btn-primary,
[data-color-scheme="electric-lime"] .header-btn-primary,
[data-color-scheme="electric-lime"] button[type="submit"],
[data-color-scheme="neon-green"] .btn-primary,
[data-color-scheme="neon-green"] .header-btn-primary,
[data-color-scheme="neon-green"] button[type="submit"] {
  color: #1a1a1a !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

/* Icons in light color scheme buttons */
[data-color-scheme="soft-lavender"] .btn-primary svg,
[data-color-scheme="soft-lavender"] .header-btn-primary svg,
[data-color-scheme="soft-lavender"] button[type="submit"] svg,
[data-color-scheme="mint-fresh"] .btn-primary svg,
[data-color-scheme="mint-fresh"] .header-btn-primary svg,
[data-color-scheme="mint-fresh"] button[type="submit"] svg,
[data-color-scheme="peach-cream"] .btn-primary svg,
[data-color-scheme="peach-cream"] .header-btn-primary svg,
[data-color-scheme="peach-cream"] button[type="submit"] svg,
[data-color-scheme="sky-blue"] .btn-primary svg,
[data-color-scheme="sky-blue"] .header-btn-primary svg,
[data-color-scheme="sky-blue"] button[type="submit"] svg,
[data-color-scheme="golden-hour"] .btn-primary svg,
[data-color-scheme="golden-hour"] .header-btn-primary svg,
[data-color-scheme="golden-hour"] button[type="submit"] svg,
[data-color-scheme="warm-gray"] .btn-primary svg,
[data-color-scheme="warm-gray"] .header-btn-primary svg,
[data-color-scheme="warm-gray"] button[type="submit"] svg,
[data-color-scheme="desert-sand"] .btn-primary svg,
[data-color-scheme="desert-sand"] .header-btn-primary svg,
[data-color-scheme="desert-sand"] button[type="submit"] svg,
[data-color-scheme="electric-lime"] .btn-primary svg,
[data-color-scheme="electric-lime"] .header-btn-primary svg,
[data-color-scheme="electric-lime"] button[type="submit"] svg,
[data-color-scheme="neon-green"] .btn-primary svg,
[data-color-scheme="neon-green"] .header-btn-primary svg,
[data-color-scheme="neon-green"] button[type="submit"] svg {
  color: #1a1a1a !important;
  fill: #1a1a1a !important;
}

/* =================================================================== 
   COMPREHENSIVE CONTRAST FIXES FOR ALL NON-DARK THEMES
   =================================================================== */

/* Force visibility for critical UI elements across ALL light themes */

/* Inline claim button in warning notice */
body:not([data-color-scheme="dark-mode"]):not([data-color-scheme="midnight-blue"]):not([data-color-scheme="charcoal"]) .bg-yellow-50 .claim-business-link {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: white !important;
  text-decoration: none !important;
}

/* Sidebar claim button - should match sidebar styling */
body:not([data-color-scheme="dark-mode"]):not([data-color-scheme="midnight-blue"]):not([data-color-scheme="charcoal"]) .claim-business-link.w-full {
  background: #374151 !important; /* Force dark background for contrast */
  color: white !important;
  text-decoration: none !important;
}

/* Override for very light themes - use proper contrast */
[data-color-scheme="soft-lavender"] .claim-business-link.w-full,
[data-color-scheme="mint-fresh"] .claim-business-link.w-full,
[data-color-scheme="peach-cream"] .claim-business-link.w-full,
[data-color-scheme="sky-blue"] .claim-business-link.w-full,
[data-color-scheme="golden-hour"] .claim-business-link.w-full,
[data-color-scheme="warm-gray"] .claim-business-link.w-full,
[data-color-scheme="desert-sand"] .claim-business-link.w-full,
[data-color-scheme="electric-lime"] .claim-business-link.w-full,
[data-color-scheme="neon-green"] .claim-business-link.w-full {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #1a1a1a !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body:not([data-color-scheme="dark-mode"]):not([data-color-scheme="midnight-blue"]):not([data-color-scheme="charcoal"]) .header-btn-secondary {
  background-color: var(--secondary) !important;
  color: white !important;
  border: 1px solid var(--secondary) !important;
  padding: 0.5rem 1rem !important;
  border-radius: 6px !important;
  text-decoration: none !important;
}

/* Special handling for very light themes */
[data-color-scheme="soft-lavender"] .header-btn-secondary,
[data-color-scheme="mint-fresh"] .header-btn-secondary,
[data-color-scheme="peach-cream"] .header-btn-secondary,
[data-color-scheme="sky-blue"] .header-btn-secondary,
[data-color-scheme="golden-hour"] .header-btn-secondary,
[data-color-scheme="warm-gray"] .header-btn-secondary,
[data-color-scheme="desert-sand"] .header-btn-secondary,
[data-color-scheme="electric-lime"] .header-btn-secondary,
[data-color-scheme="neon-green"] .header-btn-secondary {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: #1a1a1a !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Exception for buttons - keep white text on colored background */
[data-color-scheme="dark-mode"] .btn,
[data-color-scheme="midnight-blue"] .btn,
[data-color-scheme="charcoal"] .btn,
[data-color-scheme="dark-mode"] .button,
[data-color-scheme="midnight-blue"] .button,
[data-color-scheme="charcoal"] .button,
[data-color-scheme="dark-mode"] button:not(.btn-ghost),
[data-color-scheme="midnight-blue"] button:not(.btn-ghost),
[data-color-scheme="charcoal"] button:not(.btn-ghost),
[data-color-scheme="dark-mode"] input[type="submit"],
[data-color-scheme="midnight-blue"] input[type="submit"],
[data-color-scheme="charcoal"] input[type="submit"],
[data-color-scheme="dark-mode"] input[type="button"],
[data-color-scheme="midnight-blue"] input[type="button"],
[data-color-scheme="charcoal"] input[type="button"] {
  background-color: hsl(var(--primary)) !important;
  color: white !important;
  border-color: hsl(var(--primary)) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Ghost buttons in dark mode */
[data-color-scheme="dark-mode"] .btn-ghost,
[data-color-scheme="midnight-blue"] .btn-ghost,
[data-color-scheme="charcoal"] .btn-ghost,
[data-color-scheme="dark-mode"] button.btn-ghost,
[data-color-scheme="midnight-blue"] button.btn-ghost,
[data-color-scheme="charcoal"] button.btn-ghost {
  background-color: transparent !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}

/* Exception for cards that should have dark text on light background */
[data-color-scheme="dark-mode"] .card:not(.dark-card),
[data-color-scheme="midnight-blue"] .card:not(.dark-card),
[data-color-scheme="charcoal"] .card:not(.dark-card),
[data-color-scheme="dark-mode"] .business-card:not(.dark-card),
[data-color-scheme="midnight-blue"] .business-card:not(.dark-card),
[data-color-scheme="charcoal"] .business-card:not(.dark-card),
[data-color-scheme="dark-mode"] .form-card:not(.dark-card),
[data-color-scheme="midnight-blue"] .form-card:not(.dark-card),
[data-color-scheme="charcoal"] .form-card:not(.dark-card) {
  background-color: var(--bg-elevated) !important;
}

[data-color-scheme="dark-mode"] .card:not(.dark-card) *,
[data-color-scheme="midnight-blue"] .card:not(.dark-card) *,
[data-color-scheme="charcoal"] .card:not(.dark-card) *,
[data-color-scheme="dark-mode"] .business-card:not(.dark-card) *,
[data-color-scheme="midnight-blue"] .business-card:not(.dark-card) *,
[data-color-scheme="charcoal"] .business-card:not(.dark-card) *,
[data-color-scheme="dark-mode"] .form-card:not(.dark-card) *,
[data-color-scheme="midnight-blue"] .form-card:not(.dark-card) *,
[data-color-scheme="charcoal"] .form-card:not(.dark-card) * {
  color: var(--text-primary) !important;
}

/* Tailwind utility overrides for dark mode */
[data-color-scheme="dark-mode"] .text-gray-600,
[data-color-scheme="midnight-blue"] .text-gray-600,
[data-color-scheme="charcoal"] .text-gray-600,
[data-color-scheme="dark-mode"] .text-gray-700,
[data-color-scheme="midnight-blue"] .text-gray-700,
[data-color-scheme="charcoal"] .text-gray-700,
[data-color-scheme="dark-mode"] .text-gray-800,
[data-color-scheme="midnight-blue"] .text-gray-800,
[data-color-scheme="charcoal"] .text-gray-800,
[data-color-scheme="dark-mode"] .text-gray-900,
[data-color-scheme="midnight-blue"] .text-gray-900,
[data-color-scheme="charcoal"] .text-gray-900,
[data-color-scheme="dark-mode"] .text-black,
[data-color-scheme="midnight-blue"] .text-black,
[data-color-scheme="charcoal"] .text-black {
  color: var(--text-primary) !important;
}

/* Background utility overrides */
[data-color-scheme="dark-mode"] .bg-white:not(.card):not(.business-card):not(.form-card),
[data-color-scheme="midnight-blue"] .bg-white:not(.card):not(.business-card):not(.form-card),
[data-color-scheme="charcoal"] .bg-white:not(.card):not(.business-card):not(.form-card),
[data-color-scheme="dark-mode"] .bg-gray-50:not(.card):not(.business-card):not(.form-card),
[data-color-scheme="midnight-blue"] .bg-gray-50:not(.card):not(.business-card):not(.form-card),
[data-color-scheme="charcoal"] .bg-gray-50:not(.card):not(.business-card):not(.form-card),
[data-color-scheme="dark-mode"] .bg-gray-100:not(.card):not(.business-card):not(.form-card),
[data-color-scheme="midnight-blue"] .bg-gray-100:not(.card):not(.business-card):not(.form-card),
[data-color-scheme="charcoal"] .bg-gray-100:not(.card):not(.business-card):not(.form-card) {
  background-color: var(--bg-primary) !important;
}

/* ===================================================================
   WORDPRESS SPECIFIC
   =================================================================== */

.wp-block-paragraph,
.wp-block-heading,
.wp-block-list,
.wp-block-quote,
.entry-content,
.entry-content *,
.entry-title,
.entry-meta,
.widget-title {
  color: var(--text-primary);
}

/* WordPress buttons */
.wp-block-button__link {
  color: white !important;
}

/* ===================================================================
   STATS SECTION - Modern dark mode cards with glows
   =================================================================== */

/* Dark mode stats cards */
[data-color-scheme="dark-mode"] .stat-item,
[data-color-scheme="midnight-blue"] .stat-item,
[data-color-scheme="charcoal"] .stat-item {
  background: linear-gradient(135deg, 
    var(--bg-elevated) 0%, 
    rgba(255, 255, 255, 0.02) 100%) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 
    0 0 25px -10px hsl(var(--primary) / 0.3),
    0 0 50px -15px hsl(var(--secondary) / 0.2),
    0 20px 40px -10px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.4s ease;
}

/* Stats card hover effect */
[data-color-scheme="dark-mode"] .stat-item:hover,
[data-color-scheme="midnight-blue"] .stat-item:hover,
[data-color-scheme="charcoal"] .stat-item:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 
    0 0 40px -8px hsl(var(--primary) / 0.5),
    0 0 80px -15px hsl(var(--secondary) / 0.4),
    0 0 120px -20px hsl(var(--accent) / 0.3),
    0 30px 60px -10px rgba(0, 0, 0, 0.6) !important;
}

/* Dark mode stat value with gradient text */
[data-color-scheme="dark-mode"] .stat-value,
[data-color-scheme="midnight-blue"] .stat-value,
[data-color-scheme="charcoal"] .stat-value {
  background: linear-gradient(135deg, 
    hsl(var(--primary)) 0%, 
    hsl(var(--secondary)) 50%,
    hsl(var(--accent)) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: 0 0 30px hsl(var(--primary) / 0.3) !important;
  filter: drop-shadow(0 0 10px hsl(var(--primary) / 0.5));
}

/* Dark mode stat icons with glow */
[data-color-scheme="dark-mode"] .stat-item .w-12,
[data-color-scheme="midnight-blue"] .stat-item .w-12,
[data-color-scheme="charcoal"] .stat-item .w-12 {
  background: linear-gradient(135deg, 
    hsl(var(--primary) / 0.2) 0%, 
    hsl(var(--secondary) / 0.2) 100%) !important;
  border: 1px solid hsl(var(--primary) / 0.3);
  box-shadow: 
    0 0 20px -5px hsl(var(--primary) / 0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

/* Icon color in dark mode */
[data-color-scheme="dark-mode"] .stat-item .text-primary,
[data-color-scheme="midnight-blue"] .stat-item .text-primary,
[data-color-scheme="charcoal"] .stat-item .text-primary {
  color: hsl(var(--primary)) !important;
  filter: drop-shadow(0 0 8px hsl(var(--primary) / 0.5));
}

/* "Live data" indicator styling for dark mode */
[data-color-scheme="dark-mode"] .stat-item .text-green-600,
[data-color-scheme="midnight-blue"] .stat-item .text-green-600,
[data-color-scheme="charcoal"] .stat-item .text-green-600 {
  color: hsl(var(--accent)) !important;
  text-shadow: 0 0 10px hsl(var(--accent) / 0.5);
}

/* Stats section background for dark mode */
[data-color-scheme="dark-mode"] .stats-section,
[data-color-scheme="midnight-blue"] .stats-section,
[data-color-scheme="charcoal"] .stats-section {
  background: 
    radial-gradient(circle at 20% 80%, hsl(var(--primary) / 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, hsl(var(--secondary) / 0.05) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, hsl(var(--accent) / 0.03) 0%, transparent 50%),
    var(--bg-primary) !important;
}

/* Card gradient class for compatibility */
[data-color-scheme="dark-mode"] .card-gradient,
[data-color-scheme="midnight-blue"] .card-gradient,
[data-color-scheme="charcoal"] .card-gradient {
  background: linear-gradient(135deg, 
    var(--bg-elevated) 0%, 
    rgba(255, 255, 255, 0.02) 100%) !important;
}

/* Gradient text class */
[data-color-scheme="dark-mode"] .gradient-text,
[data-color-scheme="midnight-blue"] .gradient-text,
[data-color-scheme="charcoal"] .gradient-text {
  background: linear-gradient(135deg, 
    hsl(var(--primary)) 0%, 
    hsl(var(--secondary)) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ===================================================================
   POPULAR CATEGORIES CARDS - Modern dark mode with gradients
   =================================================================== */

/* Dark mode category cards */
[data-color-scheme="dark-mode"] .category-card,
[data-color-scheme="midnight-blue"] .category-card,
[data-color-scheme="charcoal"] .category-card {
  background: linear-gradient(135deg, 
    var(--bg-elevated) 0%, 
    rgba(255, 255, 255, 0.03) 100%) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 
    0 0 20px -8px hsl(var(--primary) / 0.2),
    0 0 40px -12px hsl(var(--secondary) / 0.15),
    0 15px 35px -8px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Category card hover effects */
[data-color-scheme="dark-mode"] .category-card:hover,
[data-color-scheme="midnight-blue"] .category-card:hover,
[data-color-scheme="charcoal"] .category-card:hover {
  transform: translateY(-12px) scale(1.05);
  background: linear-gradient(135deg, 
    var(--bg-elevated) 0%, 
    rgba(255, 255, 255, 0.05) 100%) !important;
  border: 1px solid hsl(var(--primary) / 0.3) !important;
  box-shadow: 
    0 0 30px -5px hsl(var(--primary) / 0.4),
    0 0 60px -10px hsl(var(--secondary) / 0.3),
    0 0 100px -15px hsl(var(--accent) / 0.2),
    0 25px 50px -8px rgba(0, 0, 0, 0.5) !important;
}

/* Category card icon containers */
[data-color-scheme="dark-mode"] .category-card .bg-primary\/10,
[data-color-scheme="midnight-blue"] .category-card .bg-primary\/10,
[data-color-scheme="charcoal"] .category-card .bg-primary\/10 {
  background: linear-gradient(135deg, 
    hsl(var(--primary) / 0.15) 0%, 
    hsl(var(--secondary) / 0.15) 100%) !important;
  border: 1px solid hsl(var(--primary) / 0.2);
  box-shadow: 
    0 0 15px -3px hsl(var(--primary) / 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

/* Category card icon hover state */
[data-color-scheme="dark-mode"] .category-card:hover .bg-primary\/10,
[data-color-scheme="midnight-blue"] .category-card:hover .bg-primary\/10,
[data-color-scheme="charcoal"] .category-card:hover .bg-primary\/10 {
  background: linear-gradient(135deg, 
    hsl(var(--primary)) 0%, 
    hsl(var(--secondary)) 100%) !important;
  border: 1px solid hsl(var(--primary) / 0.5);
  box-shadow: 
    0 0 25px -3px hsl(var(--primary) / 0.6),
    0 0 50px -8px hsl(var(--secondary) / 0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

/* Category card icons */
[data-color-scheme="dark-mode"] .category-card .text-primary,
[data-color-scheme="midnight-blue"] .category-card .text-primary,
[data-color-scheme="charcoal"] .category-card .text-primary {
  color: hsl(var(--primary)) !important;
  filter: drop-shadow(0 0 8px hsl(var(--primary) / 0.4));
  transition: all 0.3s ease;
}

/* Category card icon hover */
[data-color-scheme="dark-mode"] .category-card:hover .text-primary,
[data-color-scheme="midnight-blue"] .category-card:hover .text-primary,
[data-color-scheme="charcoal"] .category-card:hover .text-primary {
  color: white !important;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.6));
}

/* Category titles */
[data-color-scheme="dark-mode"] .category-card h3,
[data-color-scheme="midnight-blue"] .category-card h3,
[data-color-scheme="charcoal"] .category-card h3 {
  color: var(--text-primary) !important;
  font-weight: 600;
  transition: all 0.3s ease;
}

/* Category title hover with gradient */
[data-color-scheme="dark-mode"] .category-card:hover h3,
[data-color-scheme="midnight-blue"] .category-card:hover h3,
[data-color-scheme="charcoal"] .category-card:hover h3 {
  background: linear-gradient(135deg, 
    hsl(var(--primary)) 0%, 
    hsl(var(--secondary)) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: 0 0 20px hsl(var(--primary) / 0.3);
}

/* Category listing counts */
[data-color-scheme="dark-mode"] .category-card p,
[data-color-scheme="midnight-blue"] .category-card p,
[data-color-scheme="charcoal"] .category-card p {
  color: var(--text-secondary) !important;
  transition: all 0.3s ease;
}

/* Category listing count hover */
[data-color-scheme="dark-mode"] .category-card:hover p,
[data-color-scheme="midnight-blue"] .category-card:hover p,
[data-color-scheme="charcoal"] .category-card:hover p {
  color: hsl(var(--accent)) !important;
  text-shadow: 0 0 8px hsl(var(--accent) / 0.4);
}

/* Categories section background */
[data-color-scheme="dark-mode"] #category-section,
[data-color-scheme="midnight-blue"] #category-section,
[data-color-scheme="charcoal"] #category-section {
  background: 
    radial-gradient(circle at 25% 25%, hsl(var(--primary) / 0.03) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, hsl(var(--secondary) / 0.03) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, hsl(var(--accent) / 0.02) 0%, transparent 50%),
    var(--bg-primary) !important;
}

/* Categories section headings */
[data-color-scheme="dark-mode"] #category-section h2,
[data-color-scheme="midnight-blue"] #category-section h2,
[data-color-scheme="charcoal"] #category-section h2 {
  background: linear-gradient(135deg, 
    var(--text-primary) 0%, 
    hsl(var(--primary)) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: 0 0 30px hsl(var(--primary) / 0.2);
}

/* View All Categories button */
[data-color-scheme="dark-mode"] #category-section .btn-gradient,
[data-color-scheme="midnight-blue"] #category-section .btn-gradient,
[data-color-scheme="charcoal"] #category-section .btn-gradient {
  background: linear-gradient(135deg, 
    hsl(var(--primary)) 0%, 
    hsl(var(--secondary)) 50%,
    hsl(var(--accent)) 100%) !important;
  border: 1px solid hsl(var(--primary) / 0.3);
  box-shadow: 
    0 0 20px -5px hsl(var(--primary) / 0.4),
    0 0 40px -10px hsl(var(--secondary) / 0.3),
    0 10px 30px -5px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

/* View All Categories button hover */
[data-color-scheme="dark-mode"] #category-section .btn-gradient:hover,
[data-color-scheme="midnight-blue"] #category-section .btn-gradient:hover,
[data-color-scheme="charcoal"] #category-section .btn-gradient:hover {
  background: linear-gradient(135deg, 
    hsl(var(--primary) / 1.1) 0%, 
    hsl(var(--secondary) / 1.1) 50%,
    hsl(var(--accent) / 1.1) 100%) !important;
  box-shadow: 
    0 0 30px -3px hsl(var(--primary) / 0.6),
    0 0 60px -8px hsl(var(--secondary) / 0.4),
    0 0 100px -12px hsl(var(--accent) / 0.3),
    0 15px 40px -5px rgba(0, 0, 0, 0.4);
  transform: translateY(-3px) scale(1.05);
}

/* Grid enhancement for dark mode */
[data-color-scheme="dark-mode"] .category-card + .category-card,
[data-color-scheme="midnight-blue"] .category-card + .category-card,
[data-color-scheme="charcoal"] .category-card + .category-card {
  animation-delay: 0.1s;
}

/* Staggered animation for category cards */
[data-color-scheme="dark-mode"] .category-card:nth-child(1),
[data-color-scheme="midnight-blue"] .category-card:nth-child(1),
[data-color-scheme="charcoal"] .category-card:nth-child(1) { animation-delay: 0.1s; }

[data-color-scheme="dark-mode"] .category-card:nth-child(2),
[data-color-scheme="midnight-blue"] .category-card:nth-child(2),
[data-color-scheme="charcoal"] .category-card:nth-child(2) { animation-delay: 0.2s; }

[data-color-scheme="dark-mode"] .category-card:nth-child(3),
[data-color-scheme="midnight-blue"] .category-card:nth-child(3),
[data-color-scheme="charcoal"] .category-card:nth-child(3) { animation-delay: 0.3s; }

[data-color-scheme="dark-mode"] .category-card:nth-child(4),
[data-color-scheme="midnight-blue"] .category-card:nth-child(4),
[data-color-scheme="charcoal"] .category-card:nth-child(4) { animation-delay: 0.4s; }

[data-color-scheme="dark-mode"] .category-card:nth-child(5),
[data-color-scheme="midnight-blue"] .category-card:nth-child(5),
[data-color-scheme="charcoal"] .category-card:nth-child(5) { animation-delay: 0.5s; }

[data-color-scheme="dark-mode"] .category-card:nth-child(6),
[data-color-scheme="midnight-blue"] .category-card:nth-child(6),
[data-color-scheme="charcoal"] .category-card:nth-child(6) { animation-delay: 0.6s; }

/* ===================================================================
   LATEST BUSINESSES SECTION - Modern dark mode styling
   =================================================================== */

/* Latest businesses section background */
[data-color-scheme="dark-mode"] .businesses-section,
[data-color-scheme="midnight-blue"] .businesses-section,
[data-color-scheme="charcoal"] .businesses-section {
  background: 
    radial-gradient(circle at 20% 20%, hsl(var(--primary) / 0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, hsl(var(--secondary) / 0.04) 0%, transparent 50%),
    radial-gradient(circle at 40% 60%, hsl(var(--accent) / 0.02) 0%, transparent 50%),
    var(--bg-primary) !important;
}

/* Latest businesses section headings */
[data-color-scheme="dark-mode"] .businesses-section h2,
[data-color-scheme="midnight-blue"] .businesses-section h2,
[data-color-scheme="charcoal"] .businesses-section h2 {
  background: linear-gradient(135deg, 
    var(--text-primary) 0%, 
    hsl(var(--primary)) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: 0 0 30px hsl(var(--primary) / 0.2);
}

/* Latest businesses subtitle */
[data-color-scheme="dark-mode"] .businesses-section p,
[data-color-scheme="midnight-blue"] .businesses-section p,
[data-color-scheme="charcoal"] .businesses-section p {
  color: var(--text-secondary) !important;
}

/* View All button styling */
[data-color-scheme="dark-mode"] .businesses-section .border-primary,
[data-color-scheme="midnight-blue"] .businesses-section .border-primary,
[data-color-scheme="charcoal"] .businesses-section .border-primary {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.02) 0%, 
    rgba(255, 255, 255, 0.05) 100%) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid hsl(var(--primary) / 0.3) !important;
  color: hsl(var(--primary)) !important;
  box-shadow: 
    0 0 15px -5px hsl(var(--primary) / 0.3),
    0 0 30px -8px hsl(var(--secondary) / 0.2),
    0 8px 25px -6px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* View All button hover state */
[data-color-scheme="dark-mode"] .businesses-section .border-primary:hover,
[data-color-scheme="midnight-blue"] .businesses-section .border-primary:hover,
[data-color-scheme="charcoal"] .businesses-section .border-primary:hover {
  background: linear-gradient(135deg, 
    hsl(var(--primary)) 0%, 
    hsl(var(--secondary)) 100%) !important;
  border: 1px solid hsl(var(--primary) / 0.6) !important;
  color: white !important;
  box-shadow: 
    0 0 25px -3px hsl(var(--primary) / 0.5),
    0 0 50px -8px hsl(var(--secondary) / 0.4),
    0 0 80px -12px hsl(var(--accent) / 0.3),
    0 12px 35px -6px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px) scale(1.05);
}

/* Business cards in dark mode (enhance existing styling) */
[data-color-scheme="dark-mode"] .business-card,
[data-color-scheme="midnight-blue"] .business-card,
[data-color-scheme="charcoal"] .business-card {
  background: linear-gradient(135deg, 
    var(--bg-elevated) 0%, 
    rgba(255, 255, 255, 0.02) 100%) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 
    0 0 20px -8px hsl(var(--primary) / 0.15),
    0 0 40px -12px hsl(var(--secondary) / 0.1),
    0 15px 35px -8px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Business card hover effects */
[data-color-scheme="dark-mode"] .business-card:hover,
[data-color-scheme="midnight-blue"] .business-card:hover,
[data-color-scheme="charcoal"] .business-card:hover {
  transform: translateY(-8px) scale(1.03);
  background: linear-gradient(135deg, 
    var(--bg-elevated) 0%, 
    rgba(255, 255, 255, 0.04) 100%) !important;
  border: 1px solid hsl(var(--primary) / 0.2) !important;
  box-shadow: 
    0 0 30px -5px hsl(var(--primary) / 0.3),
    0 0 60px -10px hsl(var(--secondary) / 0.2),
    0 0 100px -15px hsl(var(--accent) / 0.15),
    0 25px 50px -8px rgba(0, 0, 0, 0.4) !important;
}

/* Business card titles */
[data-color-scheme="dark-mode"] .business-card h3,
[data-color-scheme="midnight-blue"] .business-card h3,
[data-color-scheme="charcoal"] .business-card h3 {
  color: var(--text-primary) !important;
}

/* Business card title links hover */
[data-color-scheme="dark-mode"] .business-card h3 a:hover,
[data-color-scheme="midnight-blue"] .business-card h3 a:hover,
[data-color-scheme="charcoal"] .business-card h3 a:hover {
  background: linear-gradient(135deg, 
    hsl(var(--primary)) 0%, 
    hsl(var(--secondary)) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: 0 0 15px hsl(var(--primary) / 0.3);
}

/* Business card category text */
[data-color-scheme="dark-mode"] .business-card .text-primary,
[data-color-scheme="midnight-blue"] .business-card .text-primary,
[data-color-scheme="charcoal"] .business-card .text-primary {
  color: hsl(var(--primary)) !important;
  text-shadow: 0 0 8px hsl(var(--primary) / 0.3);
}

/* Business card body text */
[data-color-scheme="dark-mode"] .business-card .text-foreground\/80,
[data-color-scheme="midnight-blue"] .business-card .text-foreground\/80,
[data-color-scheme="charcoal"] .business-card .text-foreground\/80 {
  color: var(--text-secondary) !important;
}

/* Business card address text */
[data-color-scheme="dark-mode"] .business-card .text-muted-foreground,
[data-color-scheme="midnight-blue"] .business-card .text-muted-foreground,
[data-color-scheme="charcoal"] .business-card .text-muted-foreground {
  color: var(--text-muted) !important;
}

/* Featured badge enhancement */
[data-color-scheme="dark-mode"] .business-card .bg-primary,
[data-color-scheme="midnight-blue"] .business-card .bg-primary,
[data-color-scheme="charcoal"] .business-card .bg-primary {
  background: linear-gradient(135deg, 
    hsl(var(--primary)) 0%, 
    hsl(var(--secondary)) 100%) !important;
  box-shadow: 0 0 15px -3px hsl(var(--primary) / 0.5);
}

/* Star ratings enhancement */
[data-color-scheme="dark-mode"] .business-card .fill-yellow-400,
[data-color-scheme="midnight-blue"] .business-card .fill-yellow-400,
[data-color-scheme="charcoal"] .business-card .fill-yellow-400 {
  filter: drop-shadow(0 0 6px rgba(255, 193, 7, 0.4));
}

/* ===================================================================
   GROW YOUR BUSINESS SECTION - Modern dark mode CTA styling
   =================================================================== */

/* Business signup section background */
[data-color-scheme="dark-mode"] .section-business-signup,
[data-color-scheme="midnight-blue"] .section-business-signup,
[data-color-scheme="charcoal"] .section-business-signup {
  background: 
    radial-gradient(circle at 30% 20%, hsl(var(--primary) / 0.06) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, hsl(var(--secondary) / 0.06) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, hsl(var(--accent) / 0.03) 0%, transparent 50%),
    var(--bg-primary) !important;
}

/* Business signup background blobs enhancement - scheme-specific */
[data-color-scheme="dark-mode"] .bg-primary\/10 {
  background: hsl(217 91% 60% / 0.08) !important;
  filter: blur(80px) !important;
}

[data-color-scheme="midnight-blue"] .bg-primary\/10 {
  background: hsl(220 90% 65% / 0.08) !important;
  filter: blur(80px) !important;
}

[data-color-scheme="charcoal"] .bg-primary\/10 {
  background: hsl(200 85% 60% / 0.08) !important;
  filter: blur(80px) !important;
}

[data-color-scheme="dark-mode"] .bg-secondary\/10 {
  background: hsl(265 85% 70% / 0.08) !important;
  filter: blur(80px) !important;
}

[data-color-scheme="midnight-blue"] .bg-secondary\/10 {
  background: hsl(280 85% 75% / 0.08) !important;
  filter: blur(80px) !important;
}

[data-color-scheme="charcoal"] .bg-secondary\/10 {
  background: hsl(340 75% 65% / 0.08) !important;
  filter: blur(80px) !important;
}

/* Business signup main heading - scheme-specific gradient text */
[data-color-scheme="dark-mode"] .gradient-text {
  background: linear-gradient(135deg, 
    hsl(217 91% 60%) 0%, 
    hsl(265 85% 70%) 50%,
    hsl(142 76% 55%) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: 0 0 40px hsl(217 91% 60% / 0.3);
}

[data-color-scheme="midnight-blue"] .gradient-text {
  background: linear-gradient(135deg, 
    hsl(220 90% 65%) 0%, 
    hsl(280 85% 75%) 50%,
    hsl(180 70% 60%) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: 0 0 40px hsl(220 90% 65% / 0.3);
}

[data-color-scheme="charcoal"] .gradient-text {
  background: linear-gradient(135deg, 
    hsl(200 85% 60%) 0%, 
    hsl(340 75% 65%) 50%,
    hsl(60 70% 60%) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: 0 0 40px hsl(200 85% 60% / 0.3);
}

/* Business signup subtitle and description */
[data-color-scheme="dark-mode"] .section-business-signup p,
[data-color-scheme="midnight-blue"] .section-business-signup p,
[data-color-scheme="charcoal"] .section-business-signup p {
  color: var(--text-secondary) !important;
}

[data-color-scheme="dark-mode"] .section-business-signup .text-xl,
[data-color-scheme="midnight-blue"] .section-business-signup .text-xl,
[data-color-scheme="charcoal"] .section-business-signup .text-xl {
  color: var(--text-primary) !important;
  font-weight: 500;
}

/* Add Your Business button enhancement - scheme-specific gradients */
[data-color-scheme="dark-mode"] .btn-gradient {
  background: linear-gradient(135deg, 
    hsl(217 91% 60%) 0%, 
    hsl(265 85% 70%) 50%,
    hsl(142 76% 55%) 100%) !important;
  border: 1px solid hsl(217 91% 60% / 0.4);
  box-shadow: 
    0 0 25px -5px hsl(217 91% 60% / 0.4),
    0 0 50px -10px hsl(265 85% 70% / 0.3),
    0 0 80px -15px hsl(142 76% 55% / 0.2),
    0 15px 40px -8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

[data-color-scheme="midnight-blue"] .btn-gradient {
  background: linear-gradient(135deg, 
    hsl(220 90% 65%) 0%, 
    hsl(280 85% 75%) 50%,
    hsl(180 70% 60%) 100%) !important;
  border: 1px solid hsl(220 90% 65% / 0.4);
  box-shadow: 
    0 0 25px -5px hsl(220 90% 65% / 0.4),
    0 0 50px -10px hsl(280 85% 75% / 0.3),
    0 0 80px -15px hsl(180 70% 60% / 0.2),
    0 15px 40px -8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

[data-color-scheme="charcoal"] .btn-gradient {
  background: linear-gradient(135deg, 
    hsl(200 85% 60%) 0%, 
    hsl(340 75% 65%) 50%,
    hsl(60 70% 60%) 100%) !important;
  border: 1px solid hsl(200 85% 60% / 0.4);
  box-shadow: 
    0 0 25px -5px hsl(200 85% 60% / 0.4),
    0 0 50px -10px hsl(340 75% 65% / 0.3),
    0 0 80px -15px hsl(60 70% 60% / 0.2),
    0 15px 40px -8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Add Your Business button hover - scheme-specific */
[data-color-scheme="dark-mode"] .btn-gradient:hover {
  background: linear-gradient(135deg, 
    hsl(217 91% 70%) 0%, 
    hsl(265 85% 80%) 50%,
    hsl(142 76% 65%) 100%) !important;
  box-shadow: 
    0 0 35px -3px hsl(217 91% 60% / 0.6),
    0 0 70px -8px hsl(265 85% 70% / 0.5),
    0 0 120px -12px hsl(142 76% 55% / 0.4),
    0 20px 50px -8px rgba(0, 0, 0, 0.4);
  transform: translateY(-4px) scale(1.05);
}

[data-color-scheme="midnight-blue"] .btn-gradient:hover {
  background: linear-gradient(135deg, 
    hsl(220 90% 75%) 0%, 
    hsl(280 85% 85%) 50%,
    hsl(180 70% 70%) 100%) !important;
  box-shadow: 
    0 0 35px -3px hsl(220 90% 65% / 0.6),
    0 0 70px -8px hsl(280 85% 75% / 0.5),
    0 0 120px -12px hsl(180 70% 60% / 0.4),
    0 20px 50px -8px rgba(0, 0, 0, 0.4);
  transform: translateY(-4px) scale(1.05);
}

[data-color-scheme="charcoal"] .btn-gradient:hover {
  background: linear-gradient(135deg, 
    hsl(200 85% 70%) 0%, 
    hsl(340 75% 75%) 50%,
    hsl(60 70% 70%) 100%) !important;
  box-shadow: 
    0 0 35px -3px hsl(200 85% 60% / 0.6),
    0 0 70px -8px hsl(340 75% 65% / 0.5),
    0 0 120px -12px hsl(60 70% 60% / 0.4),
    0 20px 50px -8px rgba(0, 0, 0, 0.4);
  transform: translateY(-4px) scale(1.05);
}

/* Feature cards in dark mode */
[data-color-scheme="dark-mode"] .card-hover,
[data-color-scheme="midnight-blue"] .card-hover,
[data-color-scheme="charcoal"] .card-hover {
  background: linear-gradient(135deg, 
    var(--bg-elevated) 0%, 
    rgba(255, 255, 255, 0.02) 100%) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 
    0 0 25px -10px hsl(var(--primary) / 0.15),
    0 0 50px -15px hsl(var(--secondary) / 0.1),
    0 20px 40px -10px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Feature cards hover effects */
[data-color-scheme="dark-mode"] .card-hover:hover,
[data-color-scheme="midnight-blue"] .card-hover:hover,
[data-color-scheme="charcoal"] .card-hover:hover {
  transform: translateY(-10px) scale(1.03);
  background: linear-gradient(135deg, 
    var(--bg-elevated) 0%, 
    rgba(255, 255, 255, 0.04) 100%) !important;
  border: 1px solid hsl(var(--primary) / 0.2) !important;
  box-shadow: 
    0 0 35px -5px hsl(var(--primary) / 0.3),
    0 0 70px -10px hsl(var(--secondary) / 0.2),
    0 0 110px -15px hsl(var(--accent) / 0.15),
    0 30px 60px -10px rgba(0, 0, 0, 0.4) !important;
}

/* Feature card icon containers */
[data-color-scheme="dark-mode"] .card-hover .bg-primary\/10,
[data-color-scheme="midnight-blue"] .card-hover .bg-primary\/10,
[data-color-scheme="charcoal"] .card-hover .bg-primary\/10 {
  background: linear-gradient(135deg, 
    hsl(var(--primary) / 0.15) 0%, 
    hsl(var(--primary) / 0.25) 100%) !important;
  border: 1px solid hsl(var(--primary) / 0.3);
  box-shadow: 
    0 0 20px -5px hsl(var(--primary) / 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.1);
}

[data-color-scheme="dark-mode"] .card-hover .bg-secondary\/10,
[data-color-scheme="midnight-blue"] .card-hover .bg-secondary\/10,
[data-color-scheme="charcoal"] .card-hover .bg-secondary\/10 {
  background: linear-gradient(135deg, 
    hsl(var(--secondary) / 0.15) 0%, 
    hsl(var(--secondary) / 0.25) 100%) !important;
  border: 1px solid hsl(var(--secondary) / 0.3);
  box-shadow: 
    0 0 20px -5px hsl(var(--secondary) / 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.1);
}

[data-color-scheme="dark-mode"] .card-hover .bg-accent\/10,
[data-color-scheme="midnight-blue"] .card-hover .bg-accent\/10,
[data-color-scheme="charcoal"] .card-hover .bg-accent\/10 {
  background: linear-gradient(135deg, 
    hsl(var(--accent) / 0.15) 0%, 
    hsl(var(--accent) / 0.25) 100%) !important;
  border: 1px solid hsl(var(--accent) / 0.3);
  box-shadow: 
    0 0 20px -5px hsl(var(--accent) / 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.1);
}

/* Feature card icons */
[data-color-scheme="dark-mode"] .card-hover .text-primary,
[data-color-scheme="midnight-blue"] .card-hover .text-primary,
[data-color-scheme="charcoal"] .card-hover .text-primary {
  color: hsl(var(--primary)) !important;
  filter: drop-shadow(0 0 8px hsl(var(--primary) / 0.4));
}

[data-color-scheme="dark-mode"] .card-hover .text-secondary,
[data-color-scheme="midnight-blue"] .card-hover .text-secondary,
[data-color-scheme="charcoal"] .card-hover .text-secondary {
  color: hsl(var(--secondary)) !important;
  filter: drop-shadow(0 0 8px hsl(var(--secondary) / 0.4));
}

[data-color-scheme="dark-mode"] .card-hover .text-accent,
[data-color-scheme="midnight-blue"] .card-hover .text-accent,
[data-color-scheme="charcoal"] .card-hover .text-accent {
  color: hsl(var(--accent)) !important;
  filter: drop-shadow(0 0 8px hsl(var(--accent) / 0.4));
}

/* Feature card titles */
[data-color-scheme="dark-mode"] .card-hover h3,
[data-color-scheme="midnight-blue"] .card-hover h3,
[data-color-scheme="charcoal"] .card-hover h3 {
  color: var(--text-primary) !important;
  transition: all 0.3s ease;
}

/* Feature card title hover effect */
[data-color-scheme="dark-mode"] .card-hover:hover h3,
[data-color-scheme="midnight-blue"] .card-hover:hover h3,
[data-color-scheme="charcoal"] .card-hover:hover h3 {
  background: linear-gradient(135deg, 
    hsl(var(--primary)) 0%, 
    hsl(var(--secondary)) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: 0 0 20px hsl(var(--primary) / 0.3);
}

/* Feature card description text */
[data-color-scheme="dark-mode"] .card-hover .text-foreground\/70,
[data-color-scheme="midnight-blue"] .card-hover .text-foreground\/70,
[data-color-scheme="charcoal"] .card-hover .text-foreground\/70 {
  color: var(--text-secondary) !important;
  transition: all 0.3s ease;
}

/* Feature card description hover */
[data-color-scheme="dark-mode"] .card-hover:hover .text-foreground\/70,
[data-color-scheme="midnight-blue"] .card-hover:hover .text-foreground\/70,
[data-color-scheme="charcoal"] .card-hover:hover .text-foreground\/70 {
  color: var(--text-primary) !important;
}

/* ===================================================================
   BUSINESS PAGE SIDEBAR - Dark mode styling for all sidebar components
   =================================================================== */

/* Sidebar white cards in dark mode */
[data-color-scheme="dark-mode"] .bg-white,
[data-color-scheme="midnight-blue"] .bg-white,
[data-color-scheme="charcoal"] .bg-white {
  background: linear-gradient(135deg, 
    var(--bg-elevated) 0%, 
    rgba(255, 255, 255, 0.02) 100%) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 
    0 0 20px -8px hsl(var(--primary) / 0.1),
    0 0 40px -12px hsl(var(--secondary) / 0.08),
    0 15px 35px -8px rgba(0, 0, 0, 0.25) !important;
}

/* "Own a Business?" CTA cards - Tailwind override for scheme-specific gradients */
[data-color-scheme="dark-mode"] .bg-gradient-to-br.from-accent.to-accent\/70,
[data-color-scheme="dark-mode"] .bg-gradient-to-br.from-accent {
  background: linear-gradient(135deg, 
    hsl(142 76% 55%) 0%, 
    hsl(142 76% 45%) 50%,
    hsl(217 91% 60%) 100%) !important;
  border: 1px solid hsl(142 76% 55% / 0.3);
  box-shadow: 
    0 0 25px -5px hsl(142 76% 55% / 0.4),
    0 0 50px -10px hsl(217 91% 60% / 0.3),
    0 15px 40px -8px rgba(0, 0, 0, 0.3);
}

[data-color-scheme="midnight-blue"] .bg-gradient-to-br.from-accent.to-accent\/70,
[data-color-scheme="midnight-blue"] .bg-gradient-to-br.from-accent {
  background: linear-gradient(135deg, 
    hsl(180 70% 60%) 0%, 
    hsl(180 70% 50%) 50%,
    hsl(220 90% 65%) 100%) !important;
  border: 1px solid hsl(180 70% 60% / 0.3);
  box-shadow: 
    0 0 25px -5px hsl(180 70% 60% / 0.4),
    0 0 50px -10px hsl(220 90% 65% / 0.3),
    0 15px 40px -8px rgba(0, 0, 0, 0.3);
}

[data-color-scheme="charcoal"] .bg-gradient-to-br.from-accent.to-accent\/70,
[data-color-scheme="charcoal"] .bg-gradient-to-br.from-accent {
  background: linear-gradient(135deg, 
    hsl(60 70% 60%) 0%, 
    hsl(60 70% 50%) 50%,
    hsl(200 85% 60%) 100%) !important;
  border: 1px solid hsl(60 70% 60% / 0.3);
  box-shadow: 
    0 0 25px -5px hsl(60 70% 60% / 0.4),
    0 0 50px -10px hsl(200 85% 60% / 0.3),
    0 15px 40px -8px rgba(0, 0, 0, 0.3);
}

/* Business action buttons (View Reviews, Claim Business) - scheme-specific */
[data-color-scheme="dark-mode"] .bg-primary {
  background: linear-gradient(135deg, 
    hsl(217 91% 60%) 0%, 
    hsl(217 91% 50%) 100%) !important;
  border: 1px solid hsl(217 91% 60% / 0.3);
  box-shadow: 
    0 0 20px -5px hsl(217 91% 60% / 0.4),
    0 8px 25px -6px rgba(0, 0, 0, 0.3);
}

[data-color-scheme="midnight-blue"] .bg-primary {
  background: linear-gradient(135deg, 
    hsl(220 90% 65%) 0%, 
    hsl(220 90% 55%) 100%) !important;
  border: 1px solid hsl(220 90% 65% / 0.3);
  box-shadow: 
    0 0 20px -5px hsl(220 90% 65% / 0.4),
    0 8px 25px -6px rgba(0, 0, 0, 0.3);
}

[data-color-scheme="charcoal"] .bg-primary {
  background: linear-gradient(135deg, 
    hsl(200 85% 60%) 0%, 
    hsl(200 85% 50%) 100%) !important;
  border: 1px solid hsl(200 85% 60% / 0.3);
  box-shadow: 
    0 0 20px -5px hsl(200 85% 60% / 0.4),
    0 8px 25px -6px rgba(0, 0, 0, 0.3);
}

[data-color-scheme="dark-mode"] .bg-secondary {
  background: linear-gradient(135deg, 
    hsl(265 85% 70%) 0%, 
    hsl(265 85% 60%) 100%) !important;
  border: 1px solid hsl(265 85% 70% / 0.3);
  box-shadow: 
    0 0 20px -5px hsl(265 85% 70% / 0.4),
    0 8px 25px -6px rgba(0, 0, 0, 0.3);
}

[data-color-scheme="midnight-blue"] .bg-secondary {
  background: linear-gradient(135deg, 
    hsl(280 85% 75%) 0%, 
    hsl(280 85% 65%) 100%) !important;
  border: 1px solid hsl(280 85% 75% / 0.3);
  box-shadow: 
    0 0 20px -5px hsl(280 85% 75% / 0.4),
    0 8px 25px -6px rgba(0, 0, 0, 0.3);
}

[data-color-scheme="charcoal"] .bg-secondary {
  background: linear-gradient(135deg, 
    hsl(340 75% 65%) 0%, 
    hsl(340 75% 55%) 100%) !important;
  border: 1px solid hsl(340 75% 65% / 0.3);
  box-shadow: 
    0 0 20px -5px hsl(340 75% 65% / 0.4),
    0 8px 25px -6px rgba(0, 0, 0, 0.3);
}

/* Business action button hover effects - scheme-specific */
[data-color-scheme="dark-mode"] .bg-primary:hover {
  background: linear-gradient(135deg, 
    hsl(217 91% 70%) 0%, 
    hsl(217 91% 60%) 100%) !important;
  box-shadow: 
    0 0 30px -3px hsl(217 91% 60% / 0.6),
    0 12px 35px -6px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

[data-color-scheme="midnight-blue"] .bg-primary:hover {
  background: linear-gradient(135deg, 
    hsl(220 90% 75%) 0%, 
    hsl(220 90% 65%) 100%) !important;
  box-shadow: 
    0 0 30px -3px hsl(220 90% 65% / 0.6),
    0 12px 35px -6px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

[data-color-scheme="charcoal"] .bg-primary:hover {
  background: linear-gradient(135deg, 
    hsl(200 85% 70%) 0%, 
    hsl(200 85% 60%) 100%) !important;
  box-shadow: 
    0 0 30px -3px hsl(200 85% 60% / 0.6),
    0 12px 35px -6px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

[data-color-scheme="dark-mode"] .bg-secondary:hover {
  background: linear-gradient(135deg, 
    hsl(265 85% 80%) 0%, 
    hsl(265 85% 70%) 100%) !important;
  box-shadow: 
    0 0 30px -3px hsl(265 85% 70% / 0.6),
    0 12px 35px -6px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

[data-color-scheme="midnight-blue"] .bg-secondary:hover {
  background: linear-gradient(135deg, 
    hsl(280 85% 85%) 0%, 
    hsl(280 85% 75%) 100%) !important;
  box-shadow: 
    0 0 30px -3px hsl(280 85% 75% / 0.6),
    0 12px 35px -6px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

[data-color-scheme="charcoal"] .bg-secondary:hover {
  background: linear-gradient(135deg, 
    hsl(340 75% 75%) 0%, 
    hsl(340 75% 65%) 100%) !important;
  box-shadow: 
    0 0 30px -3px hsl(340 75% 65% / 0.6),
    0 12px 35px -6px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

/* Sidebar headings */
[data-color-scheme="dark-mode"] .bg-white h3,
[data-color-scheme="midnight-blue"] .bg-white h3,
[data-color-scheme="charcoal"] .bg-white h3 {
  color: var(--text-primary) !important;
}

/* Category links and hover states */
[data-color-scheme="dark-mode"] .hover\\:bg-secondary\\/10:hover,
[data-color-scheme="midnight-blue"] .hover\\:bg-secondary\\/10:hover,
[data-color-scheme="charcoal"] .hover\\:bg-secondary\\/10:hover {
  background: hsl(var(--secondary) / 0.15) !important;
}

[data-color-scheme="dark-mode"] .bg-primary\\/10,
[data-color-scheme="midnight-blue"] .bg-primary\\/10,
[data-color-scheme="charcoal"] .bg-primary\\/10 {
  background: hsl(var(--primary) / 0.15) !important;
  border: 1px solid hsl(var(--primary) / 0.2);
}

/* Text colors in sidebar */
[data-color-scheme="dark-mode"] .text-muted-foreground,
[data-color-scheme="midnight-blue"] .text-muted-foreground,
[data-color-scheme="charcoal"] .text-muted-foreground {
  color: var(--text-muted) !important;
}

[data-color-scheme="dark-mode"] .text-primary,
[data-color-scheme="midnight-blue"] .text-primary,
[data-color-scheme="charcoal"] .text-primary {
  color: hsl(var(--primary)) !important;
}

/* Category badges */
[data-color-scheme="dark-mode"] .border-input,
[data-color-scheme="midnight-blue"] .border-input,
[data-color-scheme="charcoal"] .border-input {
  background: linear-gradient(135deg, 
    var(--bg-elevated) 0%, 
    rgba(255, 255, 255, 0.03) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--text-primary) !important;
}

[data-color-scheme="dark-mode"] .border-input:hover,
[data-color-scheme="midnight-blue"] .border-input:hover,
[data-color-scheme="charcoal"] .border-input:hover {
  background: hsl(var(--accent) / 0.15) !important;
  border: 1px solid hsl(var(--accent) / 0.3) !important;
  color: hsl(var(--accent)) !important;
}

/* Quick actions buttons */
[data-color-scheme="dark-mode"] .bg-accent\\/10,
[data-color-scheme="midnight-blue"] .bg-accent\\/10,
[data-color-scheme="charcoal"] .bg-accent\\/10 {
  background: linear-gradient(135deg, 
    hsl(var(--accent) / 0.1) 0%, 
    hsl(var(--accent) / 0.15) 100%) !important;
  border: 1px solid hsl(var(--accent) / 0.2);
  box-shadow: 0 0 15px -5px hsl(var(--accent) / 0.2);
}

[data-color-scheme="dark-mode"] .bg-accent\\/10:hover,
[data-color-scheme="midnight-blue"] .bg-accent\\/10:hover,
[data-color-scheme="charcoal"] .bg-accent\\/10:hover {
  background: linear-gradient(135deg, 
    hsl(var(--accent) / 0.2) 0%, 
    hsl(var(--accent) / 0.25) 100%) !important;
  border: 1px solid hsl(var(--accent) / 0.4);
  box-shadow: 
    0 0 20px -3px hsl(var(--accent) / 0.4),
    0 8px 25px -6px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

/* Submit business button in sidebar CTA */
[data-color-scheme="dark-mode"] .bg-white.text-accent,
[data-color-scheme="midnight-blue"] .bg-white.text-accent,
[data-color-scheme="charcoal"] .bg-white.text-accent {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(255, 255, 255, 0.9) 100%) !important;
  color: hsl(var(--accent)) !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 0 15px -3px rgba(255, 255, 255, 0.3),
    0 8px 25px -6px rgba(0, 0, 0, 0.2);
}

[data-color-scheme="dark-mode"] .bg-white.text-accent:hover,
[data-color-scheme="midnight-blue"] .bg-white.text-accent:hover,
[data-color-scheme="charcoal"] .bg-white.text-accent:hover {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(255, 255, 255, 0.95) 100%) !important;
  box-shadow: 
    0 0 20px -3px rgba(255, 255, 255, 0.5),
    0 12px 35px -6px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px) scale(1.02);
}

/* Border dividers */
[data-color-scheme="dark-mode"] .border-border,
[data-color-scheme="midnight-blue"] .border-border,
[data-color-scheme="charcoal"] .border-border {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Contact info links */
[data-color-scheme="dark-mode"] .text-primary.hover\\:underline:hover,
[data-color-scheme="midnight-blue"] .text-primary.hover\\:underline:hover,
[data-color-scheme="charcoal"] .text-primary.hover\\:underline:hover {
  color: hsl(var(--primary) / 1.2) !important;
  text-shadow: 0 0 8px hsl(var(--primary) / 0.3);
}

/* ===================================================================
   BUSINESS FEATURES & AMENITIES SECTION - Dark mode icons and styling
   =================================================================== */

/* Business features cards - scheme-specific styling */
[data-color-scheme="dark-mode"] .bg-card {
  background: linear-gradient(135deg, 
    var(--bg-elevated) 0%, 
    rgba(255, 255, 255, 0.02) 100%) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 
    0 0 20px -8px hsl(217 91% 60% / 0.1),
    0 0 40px -12px hsl(265 85% 70% / 0.08),
    0 15px 35px -8px rgba(0, 0, 0, 0.25) !important;
}

[data-color-scheme="midnight-blue"] .bg-card {
  background: linear-gradient(135deg, 
    var(--bg-elevated) 0%, 
    rgba(255, 255, 255, 0.02) 100%) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 
    0 0 20px -8px hsl(220 90% 65% / 0.1),
    0 0 40px -12px hsl(280 85% 75% / 0.08),
    0 15px 35px -8px rgba(0, 0, 0, 0.25) !important;
}

[data-color-scheme="charcoal"] .bg-card {
  background: linear-gradient(135deg, 
    var(--bg-elevated) 0%, 
    rgba(255, 255, 255, 0.02) 100%) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 
    0 0 20px -8px hsl(200 85% 60% / 0.1),
    0 0 40px -12px hsl(340 75% 65% / 0.08),
    0 15px 35px -8px rgba(0, 0, 0, 0.25) !important;
}

/* Features & Amenities checkmark icons - scheme-specific styling */
[data-color-scheme="dark-mode"] .text-primary svg,
[data-color-scheme="dark-mode"] .bg-card .text-primary svg,
[data-color-scheme="dark-mode"] svg.text-primary {
  color: hsl(217 91% 60%) !important;
  filter: drop-shadow(0 0 6px hsl(217 91% 60% / 0.3));
}

[data-color-scheme="midnight-blue"] .text-primary svg,
[data-color-scheme="midnight-blue"] .bg-card .text-primary svg,
[data-color-scheme="midnight-blue"] svg.text-primary {
  color: hsl(220 90% 65%) !important;
  filter: drop-shadow(0 0 6px hsl(220 90% 65% / 0.3));
}

[data-color-scheme="charcoal"] .text-primary svg,
[data-color-scheme="charcoal"] .bg-card .text-primary svg,
[data-color-scheme="charcoal"] svg.text-primary {
  color: hsl(200 85% 60%) !important;
  filter: drop-shadow(0 0 6px hsl(200 85% 60% / 0.3));
}

/* Business features headings */
[data-color-scheme="dark-mode"] .bg-card h2,
[data-color-scheme="midnight-blue"] .bg-card h2,
[data-color-scheme="charcoal"] .bg-card h2 {
  color: var(--text-primary) !important;
}

[data-color-scheme="dark-mode"] .bg-card h3,
[data-color-scheme="midnight-blue"] .bg-card h3,
[data-color-scheme="charcoal"] .bg-card h3 {
  color: var(--text-primary) !important;
}

/* Business features list items */
[data-color-scheme="dark-mode"] .bg-card li,
[data-color-scheme="midnight-blue"] .bg-card li,
[data-color-scheme="charcoal"] .bg-card li {
  color: var(--text-secondary) !important;
}

/* Business hours styling */
[data-color-scheme="dark-mode"] .text-red-600,
[data-color-scheme="midnight-blue"] .text-red-600,
[data-color-scheme="charcoal"] .text-red-600 {
  color: #ef4444 !important;
}

[data-color-scheme="dark-mode"] .text-green-600,
[data-color-scheme="midnight-blue"] .text-green-600,
[data-color-scheme="charcoal"] .text-green-600 {
  color: #22c55e !important;
}

/* ===================================================================
   SIMILAR BUSINESSES CARDS - Dark mode styling with enhanced icons
   =================================================================== */

/* Similar business cards background */
[data-color-scheme="dark-mode"] .similar-business-card .bg-background,
[data-color-scheme="midnight-blue"] .similar-business-card .bg-background,
[data-color-scheme="charcoal"] .similar-business-card .bg-background {
  background: linear-gradient(135deg, 
    var(--bg-elevated) 0%, 
    rgba(255, 255, 255, 0.02) 100%) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 
    0 0 20px -8px hsl(var(--primary) / 0.15),
    0 0 40px -12px hsl(var(--secondary) / 0.1),
    0 15px 35px -8px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Similar business cards hover effects */
[data-color-scheme="dark-mode"] .similar-business-card:hover .bg-background,
[data-color-scheme="midnight-blue"] .similar-business-card:hover .bg-background,
[data-color-scheme="charcoal"] .similar-business-card:hover .bg-background {
  background: linear-gradient(135deg, 
    var(--bg-elevated) 0%, 
    rgba(255, 255, 255, 0.04) 100%) !important;
  border: 1px solid hsl(var(--primary) / 0.2) !important;
  box-shadow: 
    0 0 30px -5px hsl(var(--primary) / 0.3),
    0 0 60px -10px hsl(var(--secondary) / 0.2),
    0 0 100px -15px hsl(var(--accent) / 0.15),
    0 25px 50px -8px rgba(0, 0, 0, 0.4) !important;
}

/* Similar business card titles */
[data-color-scheme="dark-mode"] .similar-business-card h3,
[data-color-scheme="midnight-blue"] .similar-business-card h3,
[data-color-scheme="charcoal"] .similar-business-card h3 {
  color: var(--text-primary) !important;
}

/* Similar business card title hover */
[data-color-scheme="dark-mode"] .similar-business-card:hover h3,
[data-color-scheme="midnight-blue"] .similar-business-card:hover h3,
[data-color-scheme="charcoal"] .similar-business-card:hover h3 {
  background: linear-gradient(135deg, 
    hsl(var(--primary)) 0%, 
    hsl(var(--secondary)) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Rating badges in similar business cards */
[data-color-scheme="dark-mode"] .similar-business-card .bg-white\\/90,
[data-color-scheme="midnight-blue"] .similar-business-card .bg-white\\/90,
[data-color-scheme="charcoal"] .similar-business-card .bg-white\\/90 {
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-color-scheme="dark-mode"] .similar-business-card .text-gray-900,
[data-color-scheme="midnight-blue"] .similar-business-card .text-gray-900,
[data-color-scheme="charcoal"] .similar-business-card .text-gray-900 {
  color: white !important;
}

/* Category badges in similar business cards */
[data-color-scheme="dark-mode"] .similar-business-card .bg-primary\\/90,
[data-color-scheme="midnight-blue"] .similar-business-card .bg-primary\\/90,
[data-color-scheme="charcoal"] .similar-business-card .bg-primary\\/90 {
  background: linear-gradient(135deg, 
    hsl(var(--primary)) 0%, 
    hsl(var(--secondary)) 100%) !important;
  border: 1px solid hsl(var(--primary) / 0.3);
  box-shadow: 0 0 15px -3px hsl(var(--primary) / 0.4);
}

/* Star icons in rating badges */
[data-color-scheme="dark-mode"] .similar-business-card .text-yellow-500,
[data-color-scheme="midnight-blue"] .similar-business-card .text-yellow-500,
[data-color-scheme="charcoal"] .similar-business-card .text-yellow-500 {
  color: #fbbf24 !important;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.4));
}

/* Location icons and text */
[data-color-scheme="dark-mode"] .similar-business-card .text-muted-foreground,
[data-color-scheme="midnight-blue"] .similar-business-card .text-muted-foreground,
[data-color-scheme="charcoal"] .similar-business-card .text-muted-foreground {
  color: var(--text-muted) !important;
}

/* Map and location section icons */
[data-color-scheme="dark-mode"] .text-gray-400,
[data-color-scheme="midnight-blue"] .text-gray-400,
[data-color-scheme="charcoal"] .text-gray-400 {
  color: var(--text-muted) !important;
}

[data-color-scheme="dark-mode"] .text-gray-600,
[data-color-scheme="midnight-blue"] .text-gray-600,
[data-color-scheme="charcoal"] .text-gray-600 {
  color: var(--text-secondary) !important;
}

[data-color-scheme="dark-mode"] .bg-gray-50,
[data-color-scheme="midnight-blue"] .bg-gray-50,
[data-color-scheme="charcoal"] .bg-gray-50 {
  background: linear-gradient(135deg, 
    var(--bg-elevated) 0%, 
    rgba(255, 255, 255, 0.02) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-color-scheme="dark-mode"] .bg-gray-100,
[data-color-scheme="midnight-blue"] .bg-gray-100,
[data-color-scheme="charcoal"] .bg-gray-100 {
  background: linear-gradient(135deg, 
    var(--bg-elevated) 0%, 
    rgba(255, 255, 255, 0.03) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Section headings with icons */
[data-color-scheme="dark-mode"] .similar-business-card h2,
[data-color-scheme="midnight-blue"] .similar-business-card h2,
[data-color-scheme="charcoal"] .similar-business-card h2 {
  background: linear-gradient(135deg, 
    var(--text-primary) 0%, 
    hsl(var(--primary)) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Review stars enhancement */
[data-color-scheme="dark-mode"] .text-yellow-400,
[data-color-scheme="midnight-blue"] .text-yellow-400,
[data-color-scheme="charcoal"] .text-yellow-400 {
  filter: drop-shadow(0 0 6px rgba(255, 193, 7, 0.4));
}

/* "View All" buttons enhancement */
[data-color-scheme="dark-mode"] .bg-primary.text-primary-foreground,
[data-color-scheme="midnight-blue"] .bg-primary.text-primary-foreground,
[data-color-scheme="charcoal"] .bg-primary.text-primary-foreground {
  background: linear-gradient(135deg, 
    hsl(var(--primary)) 0%, 
    hsl(var(--secondary)) 100%) !important;
  border: 1px solid hsl(var(--primary) / 0.3);
  box-shadow: 
    0 0 20px -5px hsl(var(--primary) / 0.4),
    0 8px 25px -6px rgba(0, 0, 0, 0.3);
}

[data-color-scheme="dark-mode"] .bg-primary.text-primary-foreground:hover,
[data-color-scheme="midnight-blue"] .bg-primary.text-primary-foreground:hover,
[data-color-scheme="charcoal"] .bg-primary.text-primary-foreground:hover {
  background: linear-gradient(135deg, 
    hsl(var(--primary) / 1.1) 0%, 
    hsl(var(--secondary) / 1.1) 100%) !important;
  box-shadow: 
    0 0 30px -3px hsl(var(--primary) / 0.6),
    0 12px 35px -6px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

/* ===================================================================
   BUSINESS DIRECTORY SPECIFIC
   =================================================================== */

.business-name,
.business-title {
  color: var(--text-primary);
  font-weight: 600;
}

.business-category,
.business-meta {
  color: var(--text-secondary);
}

.business-description {
  color: var(--text-primary);
}

.business-rating {
  color: hsl(var(--accent));
}

.business-price {
  color: hsl(var(--primary));
  font-weight: 600;
}

/* Business cards need proper contrast */
.business-card .business-name,
.business-card .business-title {
  color: var(--text-primary);
}

.business-card .business-category {
  color: var(--text-secondary);
}

/* ===================================================================
   FOOTER STYLING - Color scheme-specific gradients for default and light modes
   =================================================================== */

/* Default/Light color schemes - footer with darker gradients */
[data-color-scheme="default"] .site-footer,
[data-color-scheme="professional"] .site-footer,
[data-color-scheme="electric-blue"] .site-footer,
[data-color-scheme="cyber-purple"] .site-footer,
[data-color-scheme="neon-green"] .site-footer,
[data-color-scheme="hot-pink"] .site-footer,
[data-color-scheme="soft-lavender"] .site-footer,
[data-color-scheme="mint-fresh"] .site-footer,
[data-color-scheme="peach-cream"] .site-footer,
[data-color-scheme="sky-blue"] .site-footer,
[data-color-scheme="warm-earth"] .site-footer,
[data-color-scheme="forest-green"] .site-footer,
[data-color-scheme="desert-sand"] .site-footer,
[data-color-scheme="deep-ocean"] .site-footer,
[data-color-scheme="turquoise"] .site-footer,
[data-color-scheme="aqua-marine"] .site-footer,
[data-color-scheme="golden-hour"] .site-footer,
[data-color-scheme="sunset-blaze"] .site-footer,
[data-color-scheme="aurora-purple"] .site-footer,
[data-color-scheme="pure-grayscale"] .site-footer,
[data-color-scheme="warm-gray"] .site-footer,
[data-color-scheme="electric-lime"] .site-footer,
[data-color-scheme="magenta-pop"] .site-footer,
[data-color-scheme="orange-burst"] .site-footer,
[data-color-scheme="classic-green"] .site-footer,
[data-color-scheme="classic-red"] .site-footer,
[data-color-scheme="rose-gold"] .site-footer,
[data-color-scheme="emerald-luxury"] .site-footer {
  background: linear-gradient(135deg, 
    hsl(var(--primary) / 0.95) 0%, 
    hsl(var(--primary) / 0.85) 25%,
    hsl(var(--secondary) / 0.9) 50%,
    hsl(var(--secondary) / 0.95) 75%,
    hsl(var(--accent) / 0.9) 100%) !important;
  position: relative;
  overflow: hidden;
}

/* Footer overlay for enhanced darkness */
[data-color-scheme="default"] .site-footer::before,
[data-color-scheme="professional"] .site-footer::before,
[data-color-scheme="electric-blue"] .site-footer::before,
[data-color-scheme="cyber-purple"] .site-footer::before,
[data-color-scheme="neon-green"] .site-footer::before,
[data-color-scheme="hot-pink"] .site-footer::before,
[data-color-scheme="soft-lavender"] .site-footer::before,
[data-color-scheme="mint-fresh"] .site-footer::before,
[data-color-scheme="peach-cream"] .site-footer::before,
[data-color-scheme="sky-blue"] .site-footer::before,
[data-color-scheme="warm-earth"] .site-footer::before,
[data-color-scheme="forest-green"] .site-footer::before,
[data-color-scheme="desert-sand"] .site-footer::before,
[data-color-scheme="deep-ocean"] .site-footer::before,
[data-color-scheme="turquoise"] .site-footer::before,
[data-color-scheme="aqua-marine"] .site-footer::before,
[data-color-scheme="golden-hour"] .site-footer::before,
[data-color-scheme="sunset-blaze"] .site-footer::before,
[data-color-scheme="aurora-purple"] .site-footer::before,
[data-color-scheme="pure-grayscale"] .site-footer::before,
[data-color-scheme="warm-gray"] .site-footer::before,
[data-color-scheme="electric-lime"] .site-footer::before,
[data-color-scheme="magenta-pop"] .site-footer::before,
[data-color-scheme="orange-burst"] .site-footer::before,
[data-color-scheme="classic-green"] .site-footer::before,
[data-color-scheme="classic-red"] .site-footer::before,
[data-color-scheme="rose-gold"] .site-footer::before,
[data-color-scheme="emerald-luxury"] .site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.7) 0%, 
    rgba(0, 0, 0, 0.6) 25%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0.6) 75%,
    rgba(0, 0, 0, 0.7) 100%);
  z-index: 1;
}

/* Footer content positioning */
[data-color-scheme="default"] .site-footer > .container,
[data-color-scheme="professional"] .site-footer > .container,
[data-color-scheme="electric-blue"] .site-footer > .container,
[data-color-scheme="cyber-purple"] .site-footer > .container,
[data-color-scheme="neon-green"] .site-footer > .container,
[data-color-scheme="hot-pink"] .site-footer > .container,
[data-color-scheme="soft-lavender"] .site-footer > .container,
[data-color-scheme="mint-fresh"] .site-footer > .container,
[data-color-scheme="peach-cream"] .site-footer > .container,
[data-color-scheme="sky-blue"] .site-footer > .container,
[data-color-scheme="warm-earth"] .site-footer > .container,
[data-color-scheme="forest-green"] .site-footer > .container,
[data-color-scheme="desert-sand"] .site-footer > .container,
[data-color-scheme="deep-ocean"] .site-footer > .container,
[data-color-scheme="turquoise"] .site-footer > .container,
[data-color-scheme="aqua-marine"] .site-footer > .container,
[data-color-scheme="golden-hour"] .site-footer > .container,
[data-color-scheme="sunset-blaze"] .site-footer > .container,
[data-color-scheme="aurora-purple"] .site-footer > .container,
[data-color-scheme="pure-grayscale"] .site-footer > .container,
[data-color-scheme="warm-gray"] .site-footer > .container,
[data-color-scheme="electric-lime"] .site-footer > .container,
[data-color-scheme="magenta-pop"] .site-footer > .container,
[data-color-scheme="orange-burst"] .site-footer > .container,
[data-color-scheme="classic-green"] .site-footer > .container,
[data-color-scheme="classic-red"] .site-footer > .container,
[data-color-scheme="rose-gold"] .site-footer > .container,
[data-color-scheme="emerald-luxury"] .site-footer > .container {
  position: relative;
  z-index: 2;
}

/* Footer gradient text for site title */
[data-color-scheme="default"] .site-footer .gradient-text,
[data-color-scheme="professional"] .site-footer .gradient-text,
[data-color-scheme="electric-blue"] .site-footer .gradient-text,
[data-color-scheme="cyber-purple"] .site-footer .gradient-text,
[data-color-scheme="neon-green"] .site-footer .gradient-text,
[data-color-scheme="hot-pink"] .site-footer .gradient-text,
[data-color-scheme="soft-lavender"] .site-footer .gradient-text,
[data-color-scheme="mint-fresh"] .site-footer .gradient-text,
[data-color-scheme="peach-cream"] .site-footer .gradient-text,
[data-color-scheme="sky-blue"] .site-footer .gradient-text,
[data-color-scheme="warm-earth"] .site-footer .gradient-text,
[data-color-scheme="forest-green"] .site-footer .gradient-text,
[data-color-scheme="desert-sand"] .site-footer .gradient-text,
[data-color-scheme="deep-ocean"] .site-footer .gradient-text,
[data-color-scheme="turquoise"] .site-footer .gradient-text,
[data-color-scheme="aqua-marine"] .site-footer .gradient-text,
[data-color-scheme="golden-hour"] .site-footer .gradient-text,
[data-color-scheme="sunset-blaze"] .site-footer .gradient-text,
[data-color-scheme="aurora-purple"] .site-footer .gradient-text,
[data-color-scheme="pure-grayscale"] .site-footer .gradient-text,
[data-color-scheme="warm-gray"] .site-footer .gradient-text,
[data-color-scheme="electric-lime"] .site-footer .gradient-text,
[data-color-scheme="magenta-pop"] .site-footer .gradient-text,
[data-color-scheme="orange-burst"] .site-footer .gradient-text,
[data-color-scheme="classic-green"] .site-footer .gradient-text,
[data-color-scheme="classic-red"] .site-footer .gradient-text,
[data-color-scheme="rose-gold"] .site-footer .gradient-text,
[data-color-scheme="emerald-luxury"] .site-footer .gradient-text {
  background: linear-gradient(135deg, 
    hsl(var(--primary)) 0%, 
    hsl(var(--secondary)) 50%,
    hsl(var(--accent)) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: none;
  position: relative;
}

/* Footer link hover effects */
[data-color-scheme="default"] .site-footer a:hover,
[data-color-scheme="professional"] .site-footer a:hover,
[data-color-scheme="electric-blue"] .site-footer a:hover,
[data-color-scheme="cyber-purple"] .site-footer a:hover,
[data-color-scheme="neon-green"] .site-footer a:hover,
[data-color-scheme="hot-pink"] .site-footer a:hover,
[data-color-scheme="soft-lavender"] .site-footer a:hover,
[data-color-scheme="mint-fresh"] .site-footer a:hover,
[data-color-scheme="peach-cream"] .site-footer a:hover,
[data-color-scheme="sky-blue"] .site-footer a:hover,
[data-color-scheme="warm-earth"] .site-footer a:hover,
[data-color-scheme="forest-green"] .site-footer a:hover,
[data-color-scheme="desert-sand"] .site-footer a:hover,
[data-color-scheme="deep-ocean"] .site-footer a:hover,
[data-color-scheme="turquoise"] .site-footer a:hover,
[data-color-scheme="aqua-marine"] .site-footer a:hover,
[data-color-scheme="golden-hour"] .site-footer a:hover,
[data-color-scheme="sunset-blaze"] .site-footer a:hover,
[data-color-scheme="aurora-purple"] .site-footer a:hover,
[data-color-scheme="pure-grayscale"] .site-footer a:hover,
[data-color-scheme="warm-gray"] .site-footer a:hover,
[data-color-scheme="electric-lime"] .site-footer a:hover,
[data-color-scheme="magenta-pop"] .site-footer a:hover,
[data-color-scheme="orange-burst"] .site-footer a:hover,
[data-color-scheme="classic-green"] .site-footer a:hover,
[data-color-scheme="classic-red"] .site-footer a:hover,
[data-color-scheme="rose-gold"] .site-footer a:hover,
[data-color-scheme="emerald-luxury"] .site-footer a:hover {
  color: hsl(var(--primary)) !important;
  text-shadow: 0 0 8px hsl(var(--primary) / 0.4);
  transition: all 0.3s ease;
}

/* Footer icons with scheme colors */
[data-color-scheme="default"] .site-footer .text-primary,
[data-color-scheme="professional"] .site-footer .text-primary,
[data-color-scheme="electric-blue"] .site-footer .text-primary,
[data-color-scheme="cyber-purple"] .site-footer .text-primary,
[data-color-scheme="neon-green"] .site-footer .text-primary,
[data-color-scheme="hot-pink"] .site-footer .text-primary,
[data-color-scheme="soft-lavender"] .site-footer .text-primary,
[data-color-scheme="mint-fresh"] .site-footer .text-primary,
[data-color-scheme="peach-cream"] .site-footer .text-primary,
[data-color-scheme="sky-blue"] .site-footer .text-primary,
[data-color-scheme="warm-earth"] .site-footer .text-primary,
[data-color-scheme="forest-green"] .site-footer .text-primary,
[data-color-scheme="desert-sand"] .site-footer .text-primary,
[data-color-scheme="deep-ocean"] .site-footer .text-primary,
[data-color-scheme="turquoise"] .site-footer .text-primary,
[data-color-scheme="aqua-marine"] .site-footer .text-primary,
[data-color-scheme="golden-hour"] .site-footer .text-primary,
[data-color-scheme="sunset-blaze"] .site-footer .text-primary,
[data-color-scheme="aurora-purple"] .site-footer .text-primary,
[data-color-scheme="pure-grayscale"] .site-footer .text-primary,
[data-color-scheme="warm-gray"] .site-footer .text-primary,
[data-color-scheme="electric-lime"] .site-footer .text-primary,
[data-color-scheme="magenta-pop"] .site-footer .text-primary,
[data-color-scheme="orange-burst"] .site-footer .text-primary,
[data-color-scheme="classic-green"] .site-footer .text-primary,
[data-color-scheme="classic-red"] .site-footer .text-primary,
[data-color-scheme="rose-gold"] .site-footer .text-primary,
[data-color-scheme="emerald-luxury"] .site-footer .text-primary {
  color: hsl(var(--primary)) !important;
  filter: drop-shadow(0 0 6px hsl(var(--primary) / 0.3));
}


/* Dark modes keep existing simple dark footer */
[data-color-scheme="dark-mode"] .site-footer,
[data-color-scheme="midnight-blue"] .site-footer,
[data-color-scheme="charcoal"] .site-footer {
  background: var(--bg-primary) !important;
}

/* ===================================================================
   ACCESSIBILITY
   =================================================================== */

/* Focus states */
:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

/* Skip links */
.skip-link {
  background-color: hsl(var(--primary));
  color: white;
  padding: 0.5rem 1rem;
  text-decoration: none;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  :root {
    --text-primary: #000000;
    --bg-primary: #ffffff;
    --border-strong: #000000;
  }
  
  [data-color-scheme="dark-mode"],
  [data-color-scheme="midnight-blue"],
  [data-color-scheme="charcoal"] {
    --text-primary: #ffffff;
    --bg-primary: #000000;
    --border-strong: #ffffff;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===================================================================
   UTILITY CLASSES
   =================================================================== */

.hidden { display: none; }
.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.bg-muted { background-color: var(--bg-muted); }
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Flex utilities */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.space-x-1 > * + * { margin-left: 0.25rem; }

/* Force consistent styling for specific buttons to avoid color clashing */
.header-btn-secondary,
.inline-flex.items-center.px-4.py-2.bg-primary {
  background-color: white !important;
  color: #1a1a1a !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.header-btn-secondary:hover,
.inline-flex.items-center.px-4.py-2.bg-primary:hover {
  background-color: #f9f9f9 !important;
  color: #000000 !important;
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

.header-btn-secondary svg,
.inline-flex.items-center.px-4.py-2.bg-primary svg {
  color: #1a1a1a !important;
  fill: #1a1a1a !important;
}

/* Spacing */
.p-4 { padding: 1rem; }
.p-2 { padding: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mr-3 { margin-right: 0.75rem; }

/* Typography */
.text-sm { font-size: 0.875rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }

/* Dimensions */
.h-6 { height: 1.5rem; }
.h-7 { height: 1.75rem; }
.w-3 { width: 0.75rem; }
.w-7 { width: 1.75rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }

/* Border radius */
.rounded-full { border-radius: 9999px; }
.rounded-md { border-radius: 0.375rem; }
.rounded-l-sm { border-top-left-radius: 0.125rem; border-bottom-left-radius: 0.125rem; }
.rounded-r-sm { border-top-right-radius: 0.125rem; border-bottom-right-radius: 0.125rem; }

/* Cursor */
.cursor-pointer { cursor: pointer; }

/* Transitions */
.transition-colors { transition-property: background-color, border-color, color; }

/* ===================================================================
   MOBILE OPTIMIZATIONS
   =================================================================== */

@media (max-width: 768px) {
  #color-scheme-switcher {
    bottom: 1rem !important;
    right: 1rem !important;
    z-index: 1000 !important;
  }
  
  .color-scheme-card {
    position: fixed !important;
    bottom: 4.5rem !important;
    right: 1rem !important;
    left: 1rem !important;
    max-width: calc(100% - 2rem) !important;
    width: auto !important;
    z-index: 1001 !important;
    max-height: 60vh !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25) !important;
  }
  
  .color-scheme-toggle {
    width: 3rem !important;
    height: 3rem !important;
    touch-action: manipulation;
  }
  
  .color-option {
    padding: 0.75rem !important;
    margin: 0 0.25rem 0.25rem 0.25rem !important;
    min-height: 44px; /* Better touch target */
  }
  
  .color-preview-bars {
    width: 48px !important;
    height: 20px !important;
  }

  /* Mobile overlay when color picker is open */
  body.color-scheme-open {
    overflow: hidden;
  }
  
  .color-scheme-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
}

/* ===================================================================
   PRINT STYLES
   =================================================================== */

@media print {
  #color-scheme-switcher {
    display: none !important;
  }
  
  * {
    background-color: white !important;
    color: black !important;
  }
}