/* ========================================
   ENHANCED DARK MODE - Medical Professional Theme
   Designed for Royal Blue (#1e3a8a) Brand
   ======================================== */

/* Dark Mode Color Variables - Medical Professional Palette */
.dark {
  /* Backgrounds - Deep Navy/Slate tones that complement royal blue */
  --dark-bg-primary: #0a1628;        /* Deep navy - main background */
  --dark-bg-secondary: #0f1f3a;      /* Rich navy - cards and sections */
  --dark-bg-tertiary: #1a2847;       /* Lighter navy - hover states */
  --dark-bg-elevated: #1e3152;       /* Elevated elements */
  --dark-bg-accent: #1e3a8a;         /* Brand blue for accents */
  
  /* Text colors - Optimized for readability on dark navy */
  --dark-text-primary: #f0f4f8;      /* Almost white - headings */
  --dark-text-secondary: #cbd5e1;    /* Light gray - body text */
  --dark-text-tertiary: #94a3b8;     /* Medium gray - muted text */
  --dark-text-muted: #64748b;        /* Dark gray - disabled/placeholder */
  --dark-text-inverse: #1a202c;      /* Dark text for light backgrounds */
  
  /* Borders and dividers */
  --dark-border: rgba(148, 163, 184, 0.15);
  --dark-border-strong: rgba(148, 163, 184, 0.25);
  --dark-border-accent: rgba(30, 58, 138, 0.3);
  
  /* Brand colors - Subtle adjustment for readability */
  --dark-brand-blue: #4a90e2;        /* Medium blue - professional & readable */
  --dark-brand-blue-hover: #5a9ff0;  /* Slightly lighter on hover */
  --dark-brand-blue-bg: rgba(74, 144, 226, 0.1);  /* Subtle background */
  --dark-brand-blue-light: #60a5fa;  /* Light brand blue */
  
  /* Status colors */
  --dark-success: #10b981;
  --dark-warning: #f59e0b;
  --dark-error: #ef4444;
  --dark-info: #4a90e2;
  
  /* Shadows for dark mode */
  --dark-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --dark-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --dark-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --dark-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
  --dark-shadow-brand: 0 4px 14px rgba(30, 58, 138, 0.3);
}

/* ========================================
   GLOBAL DARK MODE STYLES
   ======================================== */

.dark body {
  background-color: var(--dark-bg-primary);
  color: var(--dark-text-secondary);
}

/* Typography */
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
  color: var(--dark-text-primary);
}

.dark p {
  color: var(--dark-text-secondary);
}

/* ========================================
   LINKS - Only change when truly needed
   ======================================== */

.dark a {
  color: var(--dark-brand-blue);
}

.dark a:hover {
  color: var(--dark-brand-blue-hover);
}

/* Keep Tailwind's brand-blue classes using the original color where appropriate */
.dark .text-brand-blue {
  color: #3b82f6 !important;  /* Brighter only for text that needs it */
}

/* ========================================
   HEADER & NAVIGATION
   ======================================== */

.dark .header {
  background: rgba(10, 22, 40, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--dark-border);
  box-shadow: var(--dark-shadow);
}

.dark .header.scrolled {
  box-shadow: var(--dark-shadow-lg);
}

/* Navigation links */
.dark .nav-link-premium {
  color: var(--dark-text-secondary);
}

.dark .nav-link-premium:hover {
  color: var(--dark-brand-blue-hover);
  background: var(--dark-brand-blue-bg);
}

.dark .nav-link-premium::after {
  background: var(--dark-brand-blue);
}

/* ========================================
   MEGA MENU
   ======================================== */

.dark .mega-menu {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border);
  box-shadow: var(--dark-shadow-xl);
}

.dark .mega-menu::before {
  border-bottom-color: var(--dark-bg-secondary);
}

.dark .mega-menu-category {
  border-color: transparent;
}

.dark .mega-menu-category:hover {
  background: var(--dark-bg-tertiary);
  border-color: var(--dark-border);
}

.dark .mega-menu-category h4 {
  color: var(--dark-text-primary);
}

.dark .mega-menu-category p {
  color: var(--dark-text-tertiary);
}

.dark .mega-menu-category-icon {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
}

.dark .mega-menu-promo {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
}

/* ========================================
   FORMS & INPUTS
   ======================================== */

.dark input[type="search"],
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="tel"],
.dark input[type="number"],
.dark select,
.dark textarea {
  background-color: var(--dark-bg-secondary);
  border-color: var(--dark-border);
  color: var(--dark-text-primary);
}

.dark input[type="search"]::placeholder,
.dark input[type="text"]::placeholder,
.dark input[type="email"]::placeholder,
.dark input[type="password"]::placeholder,
.dark input[type="tel"]::placeholder,
.dark textarea::placeholder {
  color: var(--dark-text-muted);
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-brand-blue);
  box-shadow: 0 0 0 3px var(--dark-brand-blue-bg);
}

/* ========================================
   CARDS & CONTAINERS
   ======================================== */

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

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

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

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

/* ========================================
   TEXT COLOR OVERRIDES
   ======================================== */

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

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

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

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

/* ========================================
   BORDERS
   ======================================== */

.dark .border,
.dark .border-gray-200,
.dark .border-gray-300 {
  border-color: var(--dark-border) !important;
}

.dark .border-t,
.dark .border-b,
.dark .border-l,
.dark .border-r {
  border-color: var(--dark-border);
}

.dark .divide-gray-200 > * + * {
  border-color: var(--dark-border);
}

/* ========================================
   BUTTONS
   ======================================== */

/* Keep button gradients vibrant */
.dark .cart-btn-premium {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  box-shadow: var(--dark-shadow);
}

.dark .cart-btn-premium:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
  box-shadow: var(--dark-shadow-lg);
}

/* Primary buttons should stay vibrant */
.dark button[class*="bg-brand-blue"],
.dark a[class*="bg-brand-blue"] {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
}

/* Fix .btn-clinical-primary SVG color inheritance in dark mode */
.dark .btn-clinical-primary svg {
  color: inherit !important;
  fill: currentColor !important;
}

/* ========================================
   DROPDOWNS
   ======================================== */

.dark .dropdown-menu {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border);
  box-shadow: var(--dark-shadow-xl);
}

.dark .dropdown-link {
  color: var(--dark-text-secondary);
}

.dark .dropdown-link:hover {
  background: var(--dark-bg-tertiary);
  color: var(--dark-brand-blue-hover);
}

/* ========================================
   MOBILE MENU
   ======================================== */

.dark .mobile-menu {
  background: var(--dark-bg-primary);
}

.dark .mobile-submenu {
  background: var(--dark-bg-secondary);
}

/* ========================================
   FOOTER
   ======================================== */

.dark .footer {
  background: var(--dark-bg-primary);
  border-top-color: var(--dark-border);
}

/* ========================================
   STATS & METRICS
   ======================================== */

.dark .stats-section,
.dark .stat-card {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border);
}

/* ========================================
   TOAST NOTIFICATIONS
   ======================================== */

.dark .toast {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border-strong);
  box-shadow: var(--dark-shadow-xl);
}

/* ========================================
   MODALS
   ======================================== */

.dark #vikingModal > div {
  background: var(--dark-bg-secondary) !important;
}

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

.dark table {
  background: var(--dark-bg-secondary);
}

.dark thead {
  background: var(--dark-bg-tertiary);
}

.dark tbody tr {
  border-bottom-color: var(--dark-border);
}

.dark tbody tr:hover {
  background: var(--dark-bg-tertiary);
}

.dark th,
.dark td {
  color: var(--dark-text-secondary);
}

/* ========================================
   BADGES & PILLS
   ======================================== */

.dark .badge,
.dark .pill {
  background: var(--dark-bg-elevated);
  color: var(--dark-text-primary);
  border-color: var(--dark-border);
}

/* ========================================
   SPECIFIC COMPONENT FIXES
   ======================================== */

/* Product cards */
.dark .product-card {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border);
}

.dark .product-card:hover {
  background: var(--dark-bg-tertiary);
  box-shadow: var(--dark-shadow-lg);
}

/* Feature sections */
.dark .feature-card {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border);
}

.dark .feature-card:hover {
  background: var(--dark-bg-tertiary);
}

/* Breadcrumbs */
.dark .breadcrumb {
  background: var(--dark-bg-secondary);
  border-bottom-color: var(--dark-border);
}

/* ========================================
   HOME PAGE SPECIFIC DARK MODE STYLES
   ======================================== */

/* Hero Section Dark Mode */
.dark .hero-split {
  background: var(--dark-bg-accent);
}

.dark .hero-content-side {
  background: linear-gradient(135deg, var(--dark-bg-accent) 0%, var(--dark-bg-accent) 100%);
}

.dark .hero-video-side {
  background: var(--dark-bg-accent);
}

/* Stats Bar Dark Mode */
.dark .stats-bar-clinical {
  background: linear-gradient(135deg, var(--dark-bg-accent) 0%, var(--dark-bg-accent) 100%);
}

.dark .stat-number-clinical {
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark .stat-label-clinical {
  color: rgba(255, 255, 255, 0.95);
}

/* Product Category Cards Dark Mode */
.dark .product-category-card {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border-accent);
  box-shadow: var(--dark-shadow);
}

.dark .product-category-card:hover {
  background: var(--dark-bg-tertiary);
  border-color: var(--dark-brand-blue);
  box-shadow: var(--dark-shadow-brand);
}

.dark .product-category-image {
  background: var(--dark-bg-primary);
}

.dark .product-category-title {
  color: var(--dark-text-primary);
}

.dark .product-category-desc {
  color: var(--dark-text-tertiary);
}

.dark .product-category-features li {
  color: var(--dark-text-secondary);
  border-bottom-color: var(--dark-border);
}

.dark .product-category-link {
  color: var(--dark-brand-blue);
}

/* Section Headers Dark Mode */
.dark .section-label-clinical {
  background: rgba(30, 58, 138, 0.2);
  color: var(--dark-brand-blue-light);
  border-color: var(--dark-border-accent);
}

.dark .section-title-clinical {
  color: var(--dark-text-primary);
}

.dark .section-subtitle-clinical {
  color: var(--dark-text-tertiary);
}

/* Testimonials Dark Mode */
.dark .testimonials-section {
  background: linear-gradient(135deg, var(--dark-bg-accent) 0%, #1e40af 100%);
}

.dark .testimonial-card {
  background: rgba(30, 58, 138, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Featured Products Dark Mode */
.dark .featured-products-section {
  background-color: var(--dark-bg-primary);
}

.dark .product-card-white {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border-accent);
  box-shadow: var(--dark-shadow);
}

.dark .product-card-white:hover {
  border-color: var(--dark-brand-blue);
  box-shadow: var(--dark-shadow-brand);
}

.dark .product-image-white {
  background: var(--dark-bg-primary);
  border-bottom-color: var(--dark-border);
}

.dark .product-badge-white {
  background: linear-gradient(135deg, var(--dark-brand-blue) 0%, var(--dark-brand-blue-light) 100%);
  box-shadow: var(--dark-shadow-brand);
}

/* Final CTA Dark Mode */
.dark .final-cta {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border);
}

.dark .final-cta-title {
  color: var(--dark-text-primary);
}

.dark .final-cta-desc {
  color: var(--dark-text-tertiary);
}

.dark .btn-clinical-cta {
  background: var(--dark-brand-blue);
  border-color: var(--dark-brand-blue);
}

.dark .btn-clinical-cta:hover {
  background: var(--dark-brand-blue-hover);
  border-color: var(--dark-brand-blue-hover);
}

/* What We Do Cards Dark Mode */
.dark .what-we-do-card {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border);
}

.dark .what-we-do-card:hover {
  border-color: var(--dark-brand-blue);
  box-shadow: var(--dark-shadow-brand);
}

.dark .what-we-do-image {
  background: var(--dark-bg-primary);
}

.dark .what-we-do-title {
  color: var(--dark-text-primary);
}

.dark .what-we-do-desc {
  color: var(--dark-text-tertiary);
}

.dark .what-we-do-link {
  color: var(--dark-brand-blue);
}

/* Capabilities Section Dark Mode */
.dark .capabilities-image-large,
.dark .capabilities-image-small {
  border-color: var(--dark-border);
}

.dark .capabilities-label {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border);
  color: var(--dark-brand-blue);
}

.dark .capabilities-stat-card {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border);
}

.dark .capabilities-stat-card:hover {
  border-color: var(--dark-brand-blue);
}

.dark .capabilities-stat-number,
.dark .capabilities-stat-title,
.dark .capabilities-stat-desc {
  color: var(--dark-text-primary);
}

/* Commitment Section Dark Mode */
.dark .commitment-section {
  background: linear-gradient(135deg, var(--dark-bg-accent) 0%, var(--dark-bg-accent) 100%);
}

.dark .commitment-badge {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
}

.dark .commitment-title {
  color: white;
}

.dark .commitment-text {
  color: rgba(255, 255, 255, 0.95);
}

/* Carousel Controls Dark Mode */
.dark .carousel-control {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border);
  color: var(--dark-brand-blue);
  box-shadow: var(--dark-shadow);
}

.dark .carousel-control:hover {
  background: linear-gradient(135deg, var(--dark-brand-blue) 0%, var(--dark-brand-blue-light) 100%);
  border-color: var(--dark-brand-blue);
  color: white;
  box-shadow: var(--dark-shadow-brand);
}

/* Gradient Orbs Dark Mode - Make them more subtle */
.dark .gradient-orb {
  opacity: 0.3;
}

/* Alert Messages Dark Mode */
.dark .alert {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border);
  color: var(--dark-text-secondary);
}

.dark .alert-success {
  background: rgba(16, 185, 129, 0.1);
  border-color: var(--dark-success);
  color: var(--dark-success);
}

.dark .alert-error {
  background: rgba(239, 68, 68, 0.1);
  border-color: var(--dark-error);
  color: var(--dark-error);
}

.dark .alert-info {
  background: rgba(74, 144, 226, 0.1);
  border-color: var(--dark-info);
  color: var(--dark-info);
}

/* ========================================
   SMOOTH TRANSITIONS
   ======================================== */

* {
  transition: background-color 0.2s ease, 
              border-color 0.2s ease, 
              color 0.2s ease,
              box-shadow 0.2s ease;
}

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

.dark :focus-visible {
  outline: 2px solid var(--dark-brand-blue);
  outline-offset: 2px;
}

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

@media print {
  .dark {
    background: white !important;
    color: black !important;
  }
}

/* ========================================
   ENHANCED FORM STYLING - DARK MODE
   Comprehensive input, select, and button fixes
   ======================================== */

/* All form inputs - comprehensive dark mode */
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.dark textarea,
.dark select {
  background-color: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

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

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
  border-color: var(--dark-brand-blue) !important;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2) !important;
  outline: none !important;
}

/* Select dropdown options */
.dark select option {
  background-color: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
}

/* Labels */
.dark label {
  color: var(--dark-text-secondary);
}

/* ========================================
   MOBILE-SPECIFIC DARK MODE FIXES
   ======================================== */

@media (max-width: 768px) {
  .dark .mobile-menu {
    background: var(--dark-bg-primary) !important;
  }

  .dark .mobile-menu a,
  .dark .mobile-menu button {
    color: var(--dark-text-secondary) !important;
  }

  .dark .mobile-menu a:hover,
  .dark .mobile-menu button:hover {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
  }
}

/* ========================================
   CART PAGE DARK MODE ENHANCEMENTS
   ======================================== */

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

/* Price display with gradient text - ensure visibility */
.dark .bg-clip-text {
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* Remove item button */
.dark button[class*="text-red-600"],
.dark .text-red-600 {
  color: #f87171 !important;
}

.dark button[class*="border-red-600"],
.dark .border-red-600 {
  border-color: #f87171 !important;
}

/* ========================================
   DROPDOWN AND SELECT IMPROVEMENTS
   ======================================== */

.dark .dropdown-menu,
.dark [class*="dropdown"] > div {
  background: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

/* ========================================
   SHADOW ADJUSTMENTS FOR DARK MODE
   Darker, more visible shadows
   ======================================== */

.dark .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4) !important;
}

.dark .shadow,
.dark .shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
}

.dark .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
}

.dark .shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3) !important;
}

/* ========================================
   HERO SECTIONS DARK MODE
   Ensure gradient backgrounds look good
   ======================================== */

.dark [class*="from-[#1e3a8a]"],
.dark [class*="to-[#1e3a8a]"] {
  /* Keep the brand blue gradient in dark mode */
}

.dark .bg-gradient-to-br.from-\[\#1e3a8a\] {
  background: linear-gradient(to bottom right, #1e3a8a, #1e40af) !important;
}

/* ========================================
   BADGE AND TAG IMPROVEMENTS
   ======================================== */

.dark .bg-green-100 {
  background-color: rgba(16, 185, 129, 0.15) !important;
}

.dark .text-green-700 {
  color: #34d399 !important;
}

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

.dark .text-blue-700,
.dark .text-\[\#1e3a8a\] {
  color: #60a5fa !important;
}

/* ========================================
   ACCOUNT PAGE SIDEBAR DARK MODE
   ======================================== */

.dark aside a,
.dark .sidebar a {
  color: var(--dark-text-secondary);
}

.dark aside a:hover,
.dark .sidebar a:hover {
  background: var(--dark-bg-tertiary);
  color: var(--dark-brand-blue-hover);
}

.dark aside a.active,
.dark .sidebar a.active {
  background: var(--dark-brand-blue-bg);
  color: var(--dark-brand-blue);
  border-color: var(--dark-brand-blue);
}

/* ========================================
   SKELETON LOADING STATES DARK MODE
   ======================================== */

.dark .animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes dark-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ========================================
   ADMIN PORTAL DARK MODE
   Custom admin styling
   ======================================== */

.dark #admin-portal,
.dark [class*="admin"] {
  background: var(--dark-bg-primary);
  color: var(--dark-text-secondary);
}

/* Admin tables */
.dark .admin-table th {
  background: var(--dark-bg-tertiary);
  color: var(--dark-text-primary);
}

.dark .admin-table td {
  border-color: var(--dark-border);
  color: var(--dark-text-secondary);
}

.dark .admin-table tr:hover {
  background: var(--dark-bg-tertiary);
}

/* ========================================
   SCROLLBAR DARK MODE
   Custom scrollbar for better visibility
   ======================================== */

.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark ::-webkit-scrollbar-track {
  background: var(--dark-bg-secondary);
}

.dark ::-webkit-scrollbar-thumb {
  background: var(--dark-bg-elevated);
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--dark-text-muted);
}

/* Firefox scrollbar */
.dark * {
  scrollbar-width: thin;
  scrollbar-color: var(--dark-bg-elevated) var(--dark-bg-secondary);
}

/* ========================================
   FOCUS STATES - ACCESSIBILITY
   Clear, visible focus indicators
   ======================================== */

.dark *:focus-visible {
  outline: 2px solid var(--dark-brand-blue) !important;
  outline-offset: 2px !important;
}

.dark button:focus-visible,
.dark a:focus-visible {
  outline: 2px solid var(--dark-brand-blue) !important;
  outline-offset: 2px !important;
}

/* ========================================
   SEARCH SUGGESTIONS DROPDOWN - DARK MODE
   Override inline styles for proper dark mode
   ======================================== */

.dark #searchSuggestions,
.dark .search-suggestions-2035 {
  background: rgba(15, 23, 42, 0.98) !important;
  border-color: rgba(51, 65, 85, 0.8) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* Popular SKUs / Popular Searches headers */
.dark #searchSuggestions .text-gray-500,
.dark .search-suggestions-2035 .text-gray-500 {
  color: #94a3b8 !important;
}

/* Suggestion items */
.dark #searchSuggestions .suggestion-item,
.dark .search-suggestions-2035 .suggestion-item {
  color: #e2e8f0 !important;
}

.dark #searchSuggestions .suggestion-item:hover,
.dark .search-suggestions-2035 .suggestion-item:hover {
  background: rgba(51, 65, 85, 0.6) !important;
}

/* SKU/Product names in suggestions */
.dark #searchSuggestions .font-semibold,
.dark .search-suggestions-2035 .font-semibold {
  color: #f1f5f9 !important;
}

/* Description text in suggestions */
.dark #searchSuggestions .text-gray-600,
.dark .search-suggestions-2035 .text-gray-600 {
  color: #94a3b8 !important;
}

/* Icon backgrounds in suggestions */
.dark #searchSuggestions .bg-blue-50,
.dark .search-suggestions-2035 .bg-blue-50 {
  background: rgba(59, 130, 246, 0.2) !important;
}

.dark #searchSuggestions .bg-teal-50,
.dark .search-suggestions-2035 .bg-teal-50 {
  background: rgba(20, 184, 166, 0.2) !important;
}

/* SVG icons in dark mode - make them lighter */
.dark #searchSuggestions svg[fill="#1e3a8a"],
.dark .search-suggestions-2035 svg[fill="#1e3a8a"] {
  fill: #60a5fa !important;
}

.dark #searchSuggestions svg[fill="#0d9488"],
.dark .search-suggestions-2035 svg[fill="#0d9488"] {
  fill: #2dd4bf !important;
}

/* Divider line */
.dark #searchSuggestions .border-gray-200,
.dark .search-suggestions-2035 .border-gray-200 {
  border-color: #334155 !important;
}