/* Custom CSS overrides for lighter dark mode background */
/* High specificity to override Hextra theme defaults */

/* Force override Hextra's dark mode backgrounds with maximum specificity */
html.dark,
html.dark body,
html[data-theme="dark"],
html[data-theme="dark"] body,
.dark,
.dark body {
  background-color: rgb(30, 41, 59) !important; /* slate-800 - much lighter than rgb(17, 17, 17) */
  background-image: none !important;
}

/* Override CSS custom properties that Hextra might use for dark backgrounds */
html.dark,
html[data-theme="dark"],
.dark {
  --tw-bg-opacity: 1;
  --tw-bg-neutral-950: 30 41 59;
  --tw-bg-gray-950: 30 41 59;
  --tw-bg-zinc-950: 30 41 59;
  --tw-bg-slate-950: 30 41 59;
  --nextra-bg: rgb(30, 41, 59);
  --nextra-primary-hue: 213deg;
  --nextra-primary-saturation: 55%;
  --nextra-navbar-height: 4rem;
  --shiki-color-background: rgb(30, 41, 59) !important;
}

/* Force override for CSS variables on the root element */
:root.dark,
:root[data-theme="dark"] {
  --tw-bg-neutral-950: 30 41 59 !important;
  --tw-bg-gray-950: 30 41 59 !important;
  --tw-bg-zinc-950: 30 41 59 !important;
  --nextra-bg: rgb(30, 41, 59) !important;
}

/* Adjust specific shadow effects that use the old #111 dark background */
.dark .hx-shadow-\[0_-12px_16px_\#111\] {
  --tw-shadow: 0 -8px 12px rgba(0, 0, 0, 0.2) !important;
  --tw-shadow-color: rgba(0, 0, 0, 0.2) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

/* Override the sidebar background in dark mode with high specificity */
html.dark .sidebar-container,
html[data-theme="dark"] .sidebar-container,
.dark .sidebar-container {
  background-color: rgb(30, 41, 59) !important;
}

/* Enhanced liquid glass header/navigation styling */
.dark .nav-container-blur {
  /* Liquid glass background with texture */
  background: 
    /* Frosted glass texture layer */
    repeating-linear-gradient(
      45deg,
      rgba(30, 41, 59, 0.06) 0px,
      rgba(30, 41, 59, 0.06) 1px,
      rgba(51, 65, 85, 0.04) 1px,
      rgba(51, 65, 85, 0.04) 2px,
      transparent 2px,
      transparent 4px
    ),
    /* Primary glass layer */
    linear-gradient(135deg, 
      rgba(30, 41, 59, 0.85) 0%, 
      rgba(30, 41, 59, 0.75) 50%, 
      rgba(30, 41, 59, 0.85) 100%
    ),
    /* Glossy reflection layer */
    linear-gradient(160deg, 
      rgba(255, 255, 255, 0.12) 0%, 
      transparent 30%, 
      transparent 70%, 
      rgba(255, 255, 255, 0.06) 100%
    ),
    /* Color accent layers */
    radial-gradient(circle at 25% 25%, 
      rgba(59, 130, 246, 0.08) 0%, 
      transparent 50%
    ),
    radial-gradient(circle at 75% 75%, 
      rgba(147, 51, 234, 0.06) 0%, 
      transparent 50%
    ) !important;
  
  /* Enhanced glass properties */
  backdrop-filter: blur(20px) saturate(130%) contrast(110%) brightness(105%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(130%) contrast(110%) brightness(105%) !important;
  
  /* Subtle glass border */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  
  /* Soft glass shadows */
  box-shadow: 
    /* Gentle outer glow */
    0 0 20px rgba(59, 130, 246, 0.05),
    /* Subtle depth shadow */
    0 2px 15px rgba(0, 0, 0, 0.08),
    /* Glass highlight */
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    /* Inner glass depth */
    inset 0 -1px 0 rgba(0, 0, 0, 0.03) !important;
}

/* Enhanced liquid glass header/navigation container */
.dark .nav-container {
  /* Liquid glass background with texture */
  background: 
    /* Frosted glass texture layer */
    repeating-linear-gradient(
      45deg,
      rgba(30, 41, 59, 0.08) 0px,
      rgba(30, 41, 59, 0.08) 1px,
      rgba(51, 65, 85, 0.06) 1px,
      rgba(51, 65, 85, 0.06) 2px,
      transparent 2px,
      transparent 4px
    ),
    /* Primary glass layer */
    linear-gradient(135deg, 
      rgba(30, 41, 59, 0.9) 0%, 
      rgba(30, 41, 59, 0.8) 50%, 
      rgba(30, 41, 59, 0.9) 100%
    ),
    /* Glossy reflection layer */
    linear-gradient(160deg, 
      rgba(255, 255, 255, 0.15) 0%, 
      transparent 30%, 
      transparent 70%, 
      rgba(255, 255, 255, 0.08) 100%
    ),
    /* Color accent layers */
    radial-gradient(circle at 25% 25%, 
      rgba(59, 130, 246, 0.1) 0%, 
      transparent 50%
    ),
    radial-gradient(circle at 75% 75%, 
      rgba(147, 51, 234, 0.08) 0%, 
      transparent 50%
    ) !important;
  
  /* Enhanced glass properties */
  backdrop-filter: blur(25px) saturate(140%) contrast(115%) brightness(108%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(140%) contrast(115%) brightness(108%) !important;
  
  /* Glass borders */
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  
  /* Glass shadows with depth */
  box-shadow: 
    /* Gentle outer glow */
    0 0 25px rgba(59, 130, 246, 0.06),
    /* Visible depth shadow */
    0 4px 20px rgba(0, 0, 0, 0.1),
    /* Glass highlight */
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    /* Inner glass depth */
    inset 0 -1px 0 rgba(0, 0, 0, 0.04) !important;
}

/* Override footer background */
.dark footer {
  background-color: rgb(30, 41, 59) !important;
}

/* Override footer container background */
.dark .footer-container {
  background-color: rgb(30, 41, 59) !important;
}

/* Override other dark background elements with liquid glass */
.dark .hx-bg-dark {
  background: 
    linear-gradient(135deg, 
      rgba(30, 41, 59, 0.9) 0%, 
      rgba(30, 41, 59, 0.8) 50%, 
      rgba(30, 41, 59, 0.9) 100%
    ),
    radial-gradient(circle at 30% 30%, 
      rgba(59, 130, 246, 0.08) 0%, 
      transparent 50%
    ),
    radial-gradient(circle at 70% 70%, 
      rgba(147, 51, 234, 0.06) 0%, 
      transparent 50%
    ) !important;
  
  backdrop-filter: blur(25px) saturate(140%) contrast(115%) brightness(108%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(140%) contrast(115%) brightness(108%) !important;
}

/* Override dark background for cards and components with liquid glass */
.dark .hx-bg-dark\/50 {
  background: 
    linear-gradient(135deg, 
      rgba(30, 41, 59, 0.7) 0%, 
      rgba(30, 41, 59, 0.6) 50%, 
      rgba(30, 41, 59, 0.7) 100%
    ),
    radial-gradient(circle at 30% 30%, 
      rgba(59, 130, 246, 0.06) 0%, 
      transparent 50%
    ),
    radial-gradient(circle at 70% 70%, 
      rgba(147, 51, 234, 0.04) 0%, 
      transparent 50%
    ) !important;
  
  backdrop-filter: blur(20px) saturate(130%) contrast(110%) brightness(105%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(130%) contrast(110%) brightness(105%) !important;
}

/* Override dark background for neutral elements with liquid glass */
.dark .hx-bg-neutral-900 {
  background: 
    linear-gradient(135deg, 
      rgba(51, 65, 85, 0.9) 0%, 
      rgba(51, 65, 85, 0.8) 50%, 
      rgba(51, 65, 85, 0.9) 100%
    ),
    radial-gradient(circle at 30% 30%, 
      rgba(59, 130, 246, 0.08) 0%, 
      transparent 50%
    ),
    radial-gradient(circle at 70% 70%, 
      rgba(147, 51, 234, 0.06) 0%, 
      transparent 50%
    ) !important;
  
  backdrop-filter: blur(25px) saturate(140%) contrast(115%) brightness(108%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(140%) contrast(115%) brightness(108%) !important;
}

.dark .hx-bg-neutral-800 {
  background: 
    linear-gradient(135deg, 
      rgba(71, 85, 105, 0.9) 0%, 
      rgba(71, 85, 105, 0.8) 50%, 
      rgba(71, 85, 105, 0.9) 100%
    ),
    radial-gradient(circle at 30% 30%, 
      rgba(59, 130, 246, 0.08) 0%, 
      transparent 50%
    ),
    radial-gradient(circle at 70% 70%, 
      rgba(147, 51, 234, 0.06) 0%, 
      transparent 50%
    ) !important;
  
  backdrop-filter: blur(25px) saturate(140%) contrast(115%) brightness(108%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(140%) contrast(115%) brightness(108%) !important;
}

/* Override border colors to match the lighter background */
.dark .hx-border-neutral-800 {
  border-color: rgb(71, 85, 105) !important;
}

.dark .hx-border-neutral-700 {
  border-color: rgb(100, 116, 139) !important; /* slate-500 */
}

/* Override any remaining dark backgrounds with liquid glass */
.dark [class*="hx-bg-dark"] {
  background: 
    linear-gradient(135deg, 
      rgba(30, 41, 59, 0.9) 0%, 
      rgba(30, 41, 59, 0.8) 50%, 
      rgba(30, 41, 59, 0.9) 100%
    ),
    radial-gradient(circle at 30% 30%, 
      rgba(59, 130, 246, 0.08) 0%, 
      transparent 50%
    ),
    radial-gradient(circle at 70% 70%, 
      rgba(147, 51, 234, 0.06) 0%, 
      transparent 50%
    ) !important;
  
  backdrop-filter: blur(25px) saturate(140%) contrast(115%) brightness(108%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(140%) contrast(115%) brightness(108%) !important;
}

/* Override background for any element with dark background using liquid glass */
.dark .hx-bg-gray-900 {
  background: 
    linear-gradient(135deg, 
      rgba(30, 41, 59, 0.9) 0%, 
      rgba(30, 41, 59, 0.8) 50%, 
      rgba(30, 41, 59, 0.9) 100%
    ),
    radial-gradient(circle at 30% 30%, 
      rgba(59, 130, 246, 0.08) 0%, 
      transparent 50%
    ),
    radial-gradient(circle at 70% 70%, 
      rgba(147, 51, 234, 0.06) 0%, 
      transparent 50%
    ) !important;
  
  backdrop-filter: blur(25px) saturate(140%) contrast(115%) brightness(108%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(140%) contrast(115%) brightness(108%) !important;
}

.dark .hx-bg-slate-900 {
  background: 
    linear-gradient(135deg, 
      rgba(30, 41, 59, 0.9) 0%, 
      rgba(30, 41, 59, 0.8) 50%, 
      rgba(30, 41, 59, 0.9) 100%
    ),
    radial-gradient(circle at 30% 30%, 
      rgba(59, 130, 246, 0.08) 0%, 
      transparent 50%
    ),
    radial-gradient(circle at 70% 70%, 
      rgba(147, 51, 234, 0.06) 0%, 
      transparent 50%
    ) !important;
  
  backdrop-filter: blur(25px) saturate(140%) contrast(115%) brightness(108%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(140%) contrast(115%) brightness(108%) !important;
}

/* Shadow adjustments for lighter dark background */
/* Adjust card shadows to be more subtle and natural with the lighter background */
.dark .hx-shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2) !important;
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.dark .hx-shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.2) !important;
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.dark .hx-shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.15) !important;
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.dark .hx-shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.1) !important;
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

/* Adjust specific shadow effects that use the old #111 dark background */
.dark .hx-shadow-\[0_-12px_16px_\#111\] {
  --tw-shadow: 0 -4px 8px rgba(0, 0, 0, 0.05) !important;
  --tw-shadow-colored: 0 -4px 8px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

/* Fix for theme switcher and scroll to top sections with attribute selectors */
.dark [class*="hx-shadow-[0_-12px_16px_#111]"] {
  --tw-shadow: 0 -4px 8px rgba(0, 0, 0, 0.05) !important;
  --tw-shadow-colored: 0 -4px 8px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

/* Additional fallback for elements with the dark mode shadow class */
.dark [class*="dark:hx-shadow-[0_-12px_16px_#111]"] {
  --tw-shadow: 0 -4px 8px rgba(0, 0, 0, 0.05) !important;
  --tw-shadow-colored: 0 -4px 8px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

/* Adjust hover shadow effects */
.dark .hover\:hx-shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.15) !important;
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

/* Adjust ring shadows for form elements and interactive components */
.dark .hx-ring-white\/20 {
  --tw-ring-color: rgb(255 255 255 / 0.1) !important;
}

/* Adjust any remaining shadow colors that might clash with the lighter background */
.dark .hx-shadow-gray-100 {
  --tw-shadow-color: rgb(100, 116, 139) !important; /* slate-500 */
  --tw-shadow: var(--tw-shadow-colored) !important;
}

/* Liquid Glass effect for Hextra cards */
/* Light mode cards - semi-transparent matte glass */
.hextra-card {
  /* Highly visible matte glass background with texture */
  background: 
    /* Strong frosted glass texture for visibility */
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.08) 0px,
      rgba(255, 255, 255, 0.08) 1px,
      rgba(248, 250, 252, 0.06) 1px,
      rgba(248, 250, 252, 0.06) 2px,
      transparent 2px,
      transparent 4px
    ),
    /* Micro-pattern for matte texture */
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.04) 0px,
      rgba(255, 255, 255, 0.04) 0.5px,
      transparent 0.5px,
      transparent 1px
    ),
    /* Primary glass layer - more opaque for visibility */
    radial-gradient(circle at 30% 30%, 
      rgba(255, 255, 255, 0.75) 0%, 
      rgba(248, 250, 252, 0.65) 30%, 
      rgba(241, 245, 249, 0.55) 60%, 
      rgba(248, 250, 252, 0.65) 100%
    ),
    /* Matte reflection layer */
    linear-gradient(160deg, 
      rgba(255, 255, 255, 0.6) 0%, 
      rgba(255, 255, 255, 0.3) 25%, 
      transparent 50%, 
      rgba(255, 255, 255, 0.2) 85%, 
      rgba(255, 255, 255, 0.4) 100%
    ),
    /* Color accent layers */
    radial-gradient(circle at 25% 25%, 
      rgba(59, 130, 246, 0.12) 0%, 
      transparent 50%
    ),
    radial-gradient(circle at 75% 75%, 
      rgba(147, 51, 234, 0.09) 0%, 
      transparent 50%
    ) !important;
  
  /* Enhanced glass properties for strong matte effect */
  backdrop-filter: blur(25px) saturate(150%) contrast(110%) brightness(105%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(150%) contrast(110%) brightness(105%) !important;
  
  /* Rounded corners */
  border-radius: 16px !important;
  
  /* Highly visible matte borders with gradient */
  border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
  border-top: 2px solid rgba(255, 255, 255, 0.8) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.3) !important;
  
  /* Strong matte glass shadows with depth */
  box-shadow: 
    /* Soft outer glow */
    0 0 25px rgba(59, 130, 246, 0.06),
    /* Visible depth shadow */
    0 6px 20px rgba(0, 0, 0, 0.05),
    /* Strong matte highlight */
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    /* Inner matte depth */
    inset 0 -2px 0 rgba(0, 0, 0, 0.025),
    /* Side matte reflections */
    inset 2px 0 0 rgba(255, 255, 255, 0.25),
    inset -2px 0 0 rgba(255, 255, 255, 0.25) !important;
  
  /* Smooth transitions */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Light mode hover effect - more visible matte */
.hextra-card:hover {
  background: 
    /* Enhanced glass layer on hover */
    linear-gradient(135deg, 
      rgba(255, 255, 255, 0.9) 0%, 
      rgba(255, 255, 255, 0.8) 50%, 
      rgba(255, 255, 255, 0.9) 100%
    ),
    /* Stronger matte reflection */
    linear-gradient(160deg, 
      rgba(255, 255, 255, 0.7) 0%, 
      transparent 25%, 
      transparent 75%, 
      rgba(255, 255, 255, 0.45) 100%
    ),
    /* Enhanced color accents */
    radial-gradient(circle at 25% 25%, 
      rgba(59, 130, 246, 0.16) 0%, 
      transparent 50%
    ),
    radial-gradient(circle at 75% 75%, 
      rgba(147, 51, 234, 0.12) 0%, 
      transparent 50%
    ) !important;
  
  backdrop-filter: blur(30px) saturate(160%) contrast(115%) brightness(110%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(160%) contrast(115%) brightness(110%) !important;
  
  border-color: rgba(59, 130, 246, 0.3) !important;
  border-top-color: rgba(255, 255, 255, 0.85) !important;
  
  box-shadow: 
    /* Softer outer glow */
    0 0 30px rgba(59, 130, 246, 0.15),
    /* Gentle depth shadow */
    0 6px 24px rgba(0, 0, 0, 0.06),
    /* Glass highlight */
    inset 0 2px 0 rgba(255, 255, 255, 0.6),
    /* Inner depth */
    inset 0 -2px 0 rgba(0, 0, 0, 0.025),
    /* Side reflections */
    inset 2px 0 0 rgba(255, 255, 255, 0.25),
    inset -2px 0 0 rgba(255, 255, 255, 0.25) !important;
  
  transform: translateY(-3px) !important;
}

/* Dark mode cards - more visible matte glass with high specificity */
html.dark .hextra-card,
html[data-theme="dark"] .hextra-card,
.dark .hextra-card {
  /* Enhanced liquid glass overlay effect for dark mode with texture */
  background: 
    /* Strong frosted glass texture for visibility */
    repeating-linear-gradient(
      45deg,
      rgba(30, 41, 59, 0.06) 0px,
      rgba(30, 41, 59, 0.06) 1px,
      rgba(51, 65, 85, 0.04) 1px,
      rgba(51, 65, 85, 0.04) 2px,
      transparent 2px,
      transparent 4px
    ),
    /* Micro-pattern for matte texture */
    repeating-linear-gradient(
      135deg,
      rgba(30, 41, 59, 0.03) 0px,
      rgba(30, 41, 59, 0.03) 0.5px,
      transparent 0.5px,
      transparent 1px
    ),
    /* Primary glass layer - more opaque for visibility */
    radial-gradient(circle at 30% 30%, 
      rgba(30, 41, 59, 0.85) 0%, 
      rgba(51, 65, 85, 0.75) 30%, 
      rgba(71, 85, 105, 0.65) 60%, 
      rgba(51, 65, 85, 0.75) 100%
    ),
    /* Matte reflection layer */
    linear-gradient(160deg, 
      rgba(255, 255, 255, 0.2) 0%, 
      rgba(255, 255, 255, 0.15) 25%, 
      transparent 50%, 
      rgba(255, 255, 255, 0.08) 85%, 
      rgba(255, 255, 255, 0.12) 100%
    ),
    /* Color accent layers - more pronounced */
    radial-gradient(circle at 25% 25%, 
      rgba(59, 130, 246, 0.2) 0%, 
      transparent 50%
    ),
    radial-gradient(circle at 75% 75%, 
      rgba(147, 51, 234, 0.12) 0%, 
      transparent 50%
    ) !important;
  
  /* Enhanced glass properties for strong matte effect */
  backdrop-filter: blur(30px) saturate(140%) contrast(115%) brightness(110%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(140%) contrast(115%) brightness(110%) !important;
  
  /* Rounded corners */
  border-radius: 16px !important;
  
  /* Highly visible matte borders with gradient */
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  border-top: 2px solid rgba(255, 255, 255, 0.35) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  
  /* Strong matte glass shadows with depth */
  box-shadow: 
    /* Gentle outer glow */
    0 0 25px rgba(59, 130, 246, 0.12),
    /* Visible depth shadow */
    0 4px 20px rgba(0, 0, 0, 0.08),
    /* Strong matte highlight */
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    /* Inner matte depth */
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    /* Side matte reflections */
    inset 1px 0 0 rgba(255, 255, 255, 0.12),
    inset -1px 0 0 rgba(255, 255, 255, 0.12) !important;
  
  /* Smooth transitions */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Dark mode hover effect */
.dark .hextra-card:hover {
  background: 
    /* Enhanced glass layer on hover */
    linear-gradient(135deg, 
      rgba(30, 41, 59, 0.95) 0%, 
      rgba(30, 41, 59, 0.85) 50%, 
      rgba(30, 41, 59, 0.95) 100%
    ),
    /* Stronger glossy reflection */
    linear-gradient(160deg, 
      rgba(255, 255, 255, 0.2) 0%, 
      transparent 25%, 
      transparent 75%, 
      rgba(255, 255, 255, 0.12) 100%
    ),
    /* Enhanced color accents */
    radial-gradient(circle at 25% 25%, 
      rgba(59, 130, 246, 0.2) 0%, 
      transparent 50%
    ),
    radial-gradient(circle at 75% 75%, 
      rgba(147, 51, 234, 0.16) 0%, 
      transparent 50%
    ) !important;
  
  backdrop-filter: blur(55px) saturate(200%) contrast(125%) brightness(120%) !important;
  -webkit-backdrop-filter: blur(55px) saturate(200%) contrast(125%) brightness(120%) !important;
  
  border-color: rgba(59, 130, 246, 0.35) !important;
  border-top-color: rgba(255, 255, 255, 0.4) !important;
  
  box-shadow: 
    /* Softer outer glow */
    0 0 40px rgba(59, 130, 246, 0.15),
    /* Gentle depth shadow */
    0 6px 24px rgba(0, 0, 0, 0.06),
    /* Glass highlight */
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    /* Inner depth */
    inset 0 -2px 0 rgba(0, 0, 0, 0.04),
    /* Side reflections */
    inset 2px 0 0 rgba(255, 255, 255, 0.12),
    inset -2px 0 0 rgba(255, 255, 255, 0.12) !important;
  
  transform: translateY(-3px) !important;
}

/* Liquid Glass effect for Blog Cards - more visible matte */
.blog-card {
  /* Highly visible matte glass background with texture */
  background: 
    /* Strong frosted glass texture for visibility */
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.08) 0px,
      rgba(255, 255, 255, 0.08) 1px,
      rgba(248, 250, 252, 0.06) 1px,
      rgba(248, 250, 252, 0.06) 2px,
      transparent 2px,
      transparent 4px
    ),
    /* Micro-pattern for matte texture */
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.04) 0px,
      rgba(255, 255, 255, 0.04) 0.5px,
      transparent 0.5px,
      transparent 1px
    ),
    /* Primary glass layer - more opaque for visibility */
    radial-gradient(circle at 30% 30%, 
      rgba(255, 255, 255, 0.75) 0%, 
      rgba(248, 250, 252, 0.65) 30%, 
      rgba(241, 245, 249, 0.55) 60%, 
      rgba(248, 250, 252, 0.65) 100%
    ),
    /* Matte reflection layer */
    linear-gradient(160deg, 
      rgba(255, 255, 255, 0.6) 0%, 
      rgba(255, 255, 255, 0.3) 25%, 
      transparent 50%, 
      rgba(255, 255, 255, 0.2) 85%, 
      rgba(255, 255, 255, 0.4) 100%
    ),
    /* Color accent layers */
    radial-gradient(circle at 25% 25%, 
      rgba(59, 130, 246, 0.12) 0%, 
      transparent 50%
    ),
    radial-gradient(circle at 75% 75%, 
      rgba(147, 51, 234, 0.09) 0%, 
      transparent 50%
    ) !important;
  
  /* Enhanced glass properties for strong matte effect */
  backdrop-filter: blur(25px) saturate(150%) contrast(110%) brightness(105%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(150%) contrast(110%) brightness(105%) !important;
  
  /* Rounded corners */
  border-radius: 16px !important;
  
  /* Highly visible matte borders with gradient */
  border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
  border-top: 2px solid rgba(255, 255, 255, 0.8) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.3) !important;
  
  /* Strong matte glass shadows with depth */
  box-shadow: 
    /* Soft outer glow */
    0 0 25px rgba(59, 130, 246, 0.06),
    /* Visible depth shadow */
    0 6px 20px rgba(0, 0, 0, 0.05),
    /* Strong matte highlight */
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    /* Inner matte depth */
    inset 0 -2px 0 rgba(0, 0, 0, 0.025),
    /* Side matte reflections */
    inset 2px 0 0 rgba(255, 255, 255, 0.25),
    inset -2px 0 0 rgba(255, 255, 255, 0.25) !important;
  
  /* Smooth transitions */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Blog card hover effect */
.blog-card:hover {
  background: 
    /* Enhanced glass layer on hover */
    linear-gradient(135deg, 
      rgba(255, 255, 255, 0.98) 0%, 
      rgba(255, 255, 255, 0.9) 50%, 
      rgba(255, 255, 255, 0.98) 100%
    ),
    /* Stronger glossy reflection */
    linear-gradient(160deg, 
      rgba(255, 255, 255, 0.9) 0%, 
      transparent 25%, 
      transparent 75%, 
      rgba(255, 255, 255, 0.6) 100%
    ),
    /* Enhanced color accents */
    radial-gradient(circle at 25% 25%, 
      rgba(59, 130, 246, 0.12) 0%, 
      transparent 50%
    ),
    radial-gradient(circle at 75% 75%, 
      rgba(147, 51, 234, 0.09) 0%, 
      transparent 50%
    ) !important;
  
  backdrop-filter: blur(50px) saturate(220%) contrast(120%) brightness(115%) !important;
  -webkit-backdrop-filter: blur(50px) saturate(220%) contrast(120%) brightness(115%) !important;
  
  border-color: rgba(59, 130, 246, 0.4) !important;
  border-top-color: rgba(255, 255, 255, 0.95) !important;
  
  box-shadow: 
    /* Softer outer glow */
    0 0 30px rgba(59, 130, 246, 0.12),
    /* Gentle depth shadow */
    0 6px 24px rgba(0, 0, 0, 0.04),
    /* Glass highlight */
    inset 0 2px 0 rgba(255, 255, 255, 0.8),
    /* Inner depth */
    inset 0 -2px 0 rgba(0, 0, 0, 0.025),
    /* Side reflections */
    inset 2px 0 0 rgba(255, 255, 255, 0.25),
    inset -2px 0 0 rgba(255, 255, 255, 0.25) !important;
  
  transform: translateY(-3px) scale(1.02) !important;
}

/* Dark mode blog cards */
.dark .blog-card {
  /* Enhanced liquid glass overlay effect for dark mode with texture */
  background: 
    /* Strong frosted glass texture for visibility */
    repeating-linear-gradient(
      45deg,
      rgba(30, 41, 59, 0.06) 0px,
      rgba(30, 41, 59, 0.06) 1px,
      rgba(51, 65, 85, 0.04) 1px,
      rgba(51, 65, 85, 0.04) 2px,
      transparent 2px,
      transparent 4px
    ),
    /* Micro-pattern for matte texture */
    repeating-linear-gradient(
      135deg,
      rgba(30, 41, 59, 0.03) 0px,
      rgba(30, 41, 59, 0.03) 0.5px,
      transparent 0.5px,
      transparent 1px
    ),
    /* Primary glass layer - more opaque for visibility */
    radial-gradient(circle at 30% 30%, 
      rgba(30, 41, 59, 0.85) 0%, 
      rgba(51, 65, 85, 0.75) 30%, 
      rgba(71, 85, 105, 0.65) 60%, 
      rgba(51, 65, 85, 0.75) 100%
    ),
    /* Matte reflection layer */
    linear-gradient(160deg, 
      rgba(255, 255, 255, 0.15) 0%, 
      rgba(255, 255, 255, 0.12) 25%, 
      transparent 50%, 
      rgba(255, 255, 255, 0.06) 85%, 
      rgba(255, 255, 255, 0.08) 100%
    ),
    /* Color accent layers */
    radial-gradient(circle at 25% 25%, 
      rgba(59, 130, 246, 0.15) 0%, 
      transparent 50%
    ),
    radial-gradient(circle at 75% 75%, 
      rgba(147, 51, 234, 0.12) 0%, 
      transparent 50%
    ) !important;
  
  /* Enhanced glass properties for glossy effect */
  backdrop-filter: blur(45px) saturate(170%) contrast(120%) brightness(115%) !important;
  -webkit-backdrop-filter: blur(45px) saturate(170%) contrast(120%) brightness(115%) !important;
  
  /* Rounded corners */
  border-radius: 16px !important;
  
  /* Pronounced glossy borders */
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-top: 2px solid rgba(255, 255, 255, 0.3) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  
  /* Softer glass shadows with reflections */
  box-shadow: 
    /* Gentle outer glow */
    0 0 25px rgba(59, 130, 246, 0.08),
    /* Subtle depth shadow */
    0 4px 20px rgba(0, 0, 0, 0.06),
    /* Glass reflection highlight */
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    /* Inner glass depth */
    inset 0 -1px 0 rgba(0, 0, 0, 0.03),
    /* Side reflections */
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    inset -1px 0 0 rgba(255, 255, 255, 0.08) !important;
  
  /* Smooth transitions */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Dark mode blog card hover effect */
.dark .blog-card:hover {
  background: 
    /* Enhanced glass layer on hover */
    linear-gradient(135deg, 
      rgba(30, 41, 59, 0.95) 0%, 
      rgba(30, 41, 59, 0.85) 50%, 
      rgba(30, 41, 59, 0.95) 100%
    ),
    /* Stronger glossy reflection */
    linear-gradient(160deg, 
      rgba(255, 255, 255, 0.2) 0%, 
      transparent 25%, 
      transparent 75%, 
      rgba(255, 255, 255, 0.12) 100%
    ),
    /* Enhanced color accents */
    radial-gradient(circle at 25% 25%, 
      rgba(59, 130, 246, 0.2) 0%, 
      transparent 50%
    ),
    radial-gradient(circle at 75% 75%, 
      rgba(147, 51, 234, 0.16) 0%, 
      transparent 50%
    ) !important;
  
  backdrop-filter: blur(55px) saturate(200%) contrast(125%) brightness(120%) !important;
  -webkit-backdrop-filter: blur(55px) saturate(200%) contrast(125%) brightness(120%) !important;
  
  border-color: rgba(59, 130, 246, 0.35) !important;
  border-top-color: rgba(255, 255, 255, 0.4) !important;
  
  box-shadow: 
    /* Softer outer glow */
    0 0 40px rgba(59, 130, 246, 0.15),
    /* Gentle depth shadow */
    0 6px 24px rgba(0, 0, 0, 0.06),
    /* Glass highlight */
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    /* Inner depth */
    inset 0 -2px 0 rgba(0, 0, 0, 0.04),
    /* Side reflections */
    inset 2px 0 0 rgba(255, 255, 255, 0.12),
    inset -2px 0 0 rgba(255, 255, 255, 0.12) !important;
  
  transform: translateY(-3px) scale(1.02) !important;
}

/* Liquid Glass effect for Travel Cards */
.hx-card {
  /* Highly visible matte glass background with texture */
  background: 
    /* Strong frosted glass texture for visibility */
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.08) 0px,
      rgba(255, 255, 255, 0.08) 1px,
      rgba(248, 250, 252, 0.06) 1px,
      rgba(248, 250, 252, 0.06) 2px,
      transparent 2px,
      transparent 4px
    ),
    /* Micro-pattern for matte texture */
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.04) 0px,
      rgba(255, 255, 255, 0.04) 0.5px,
      transparent 0.5px,
      transparent 1px
    ),
    /* Primary glass layer - more opaque for visibility */
    radial-gradient(circle at 30% 30%, 
      rgba(255, 255, 255, 0.75) 0%, 
      rgba(248, 250, 252, 0.65) 30%, 
      rgba(241, 245, 249, 0.55) 60%, 
      rgba(248, 250, 252, 0.65) 100%
    ),
    /* Matte reflection layer */
    linear-gradient(160deg, 
      rgba(255, 255, 255, 0.6) 0%, 
      rgba(255, 255, 255, 0.3) 25%, 
      transparent 50%, 
      rgba(255, 255, 255, 0.2) 85%, 
      rgba(255, 255, 255, 0.4) 100%
    ),
    /* Color accent layers */
    radial-gradient(circle at 25% 25%, 
      rgba(59, 130, 246, 0.08) 0%, 
      transparent 50%
    ),
    radial-gradient(circle at 75% 75%, 
      rgba(147, 51, 234, 0.06) 0%, 
      transparent 50%
    ) !important;
  
  /* Enhanced glass properties for strong matte effect */
  backdrop-filter: blur(25px) saturate(140%) contrast(110%) brightness(105%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(140%) contrast(110%) brightness(105%) !important;
  
  /* Rounded corners */
  border-radius: 12px !important;
  
  /* Highly visible matte borders with gradient */
  border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
  border-top: 2px solid rgba(255, 255, 255, 0.8) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.3) !important;
  
  /* Strong matte glass shadows with depth */
  box-shadow: 
    /* Soft outer glow */
    0 0 25px rgba(59, 130, 246, 0.06),
    /* Visible depth shadow */
    0 6px 20px rgba(0, 0, 0, 0.05),
    /* Strong matte highlight */
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    /* Inner matte depth */
    inset 0 -2px 0 rgba(0, 0, 0, 0.025),
    /* Side matte reflections */
    inset 2px 0 0 rgba(255, 255, 255, 0.25),
    inset -2px 0 0 rgba(255, 255, 255, 0.25) !important;
  
  /* Smooth transitions */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Travel card hover effect */
.hx-card:hover {
  background: 
    /* Enhanced glass layer on hover */
    linear-gradient(135deg, 
      rgba(255, 255, 255, 0.98) 0%, 
      rgba(255, 255, 255, 0.9) 50%, 
      rgba(255, 255, 255, 0.98) 100%
    ),
    /* Stronger glossy reflection */
    linear-gradient(160deg, 
      rgba(255, 255, 255, 0.9) 0%, 
      transparent 25%, 
      transparent 75%, 
      rgba(255, 255, 255, 0.6) 100%
    ),
    /* Enhanced color accents */
    radial-gradient(circle at 25% 25%, 
      rgba(59, 130, 246, 0.12) 0%, 
      transparent 50%
    ),
    radial-gradient(circle at 75% 75%, 
      rgba(147, 51, 234, 0.09) 0%, 
      transparent 50%
    ) !important;
  
  backdrop-filter: blur(45px) saturate(220%) contrast(120%) brightness(115%) !important;
  -webkit-backdrop-filter: blur(45px) saturate(220%) contrast(120%) brightness(115%) !important;
  
  border-color: rgba(59, 130, 246, 0.4) !important;
  border-top-color: rgba(255, 255, 255, 0.95) !important;
  
  box-shadow: 
    /* Softer outer glow */
    0 0 20px rgba(59, 130, 246, 0.12),
    /* Gentle depth shadow */
    0 4px 16px rgba(0, 0, 0, 0.04),
    /* Glass highlight */
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    /* Inner depth */
    inset 0 -1px 0 rgba(0, 0, 0, 0.015),
    /* Side reflections */
    inset 1px 0 0 rgba(255, 255, 255, 0.3),
    inset -1px 0 0 rgba(255, 255, 255, 0.3) !important;
  
  transform: translateY(-2px) scale(1.05) !important;
}

/* Dark mode travel cards */
.dark .hx-card {
  /* Enhanced liquid glass overlay effect for dark mode with texture */
  background: 
    /* Strong frosted glass texture for visibility */
    repeating-linear-gradient(
      45deg,
      rgba(30, 41, 59, 0.06) 0px,
      rgba(30, 41, 59, 0.06) 1px,
      rgba(51, 65, 85, 0.04) 1px,
      rgba(51, 65, 85, 0.04) 2px,
      transparent 2px,
      transparent 4px
    ),
    /* Micro-pattern for matte texture */
    repeating-linear-gradient(
      135deg,
      rgba(30, 41, 59, 0.03) 0px,
      rgba(30, 41, 59, 0.03) 0.5px,
      transparent 0.5px,
      transparent 1px
    ),
    /* Primary glass layer - more opaque for visibility */
    radial-gradient(circle at 30% 30%, 
      rgba(30, 41, 59, 0.85) 0%, 
      rgba(51, 65, 85, 0.75) 30%, 
      rgba(71, 85, 105, 0.65) 60%, 
      rgba(51, 65, 85, 0.75) 100%
    ),
    /* Matte reflection layer */
    linear-gradient(160deg, 
      rgba(255, 255, 255, 0.15) 0%, 
      rgba(255, 255, 255, 0.12) 25%, 
      transparent 50%, 
      rgba(255, 255, 255, 0.06) 85%, 
      rgba(255, 255, 255, 0.08) 100%
    ),
    /* Color accent layers */
    radial-gradient(circle at 25% 25%, 
      rgba(59, 130, 246, 0.15) 0%, 
      transparent 50%
    ),
    radial-gradient(circle at 75% 75%, 
      rgba(147, 51, 234, 0.12) 0%, 
      transparent 50%
    ) !important;
  
  backdrop-filter: blur(40px) saturate(170%) contrast(120%) brightness(115%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(170%) contrast(120%) brightness(115%) !important;
  
  /* Rounded corners */
  border-radius: 16px !important;
  
  /* Highly visible matte borders with gradient */
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  
  box-shadow: 
    /* Gentle outer glow */
    0 0 20px rgba(59, 130, 246, 0.08),
    /* Subtle depth shadow */
    0 3px 12px rgba(0, 0, 0, 0.06),
    /* Glass reflection highlight */
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    /* Inner glass depth */
    inset 0 -1px 0 rgba(0, 0, 0, 0.03),
    /* Side reflections */
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    inset -1px 0 0 rgba(255, 255, 255, 0.08) !important;
}

/* Dark mode travel card hover effect */
.dark .hx-card:hover {
  background: 
    /* Enhanced glass layer on hover */
    linear-gradient(135deg, 
      rgba(30, 41, 59, 0.95) 0%, 
      rgba(30, 41, 59, 0.85) 50%, 
      rgba(30, 41, 59, 0.95) 100%
    ),
    /* Stronger glossy reflection */
    linear-gradient(160deg, 
      rgba(255, 255, 255, 0.2) 0%, 
      transparent 25%, 
      transparent 75%, 
      rgba(255, 255, 255, 0.12) 100%
    ),
    /* Enhanced color accents */
    radial-gradient(circle at 25% 25%, 
      rgba(59, 130, 246, 0.2) 0%, 
      transparent 50%
    ),
    radial-gradient(circle at 75% 75%, 
      rgba(147, 51, 234, 0.16) 0%, 
      transparent 50%
    ) !important;
  
  backdrop-filter: blur(50px) saturate(200%) contrast(125%) brightness(120%) !important;
  -webkit-backdrop-filter: blur(50px) saturate(200%) contrast(125%) brightness(120%) !important;
  
  border-color: rgba(59, 130, 246, 0.35) !important;
  border-top-color: rgba(255, 255, 255, 0.4) !important;
  
  box-shadow: 
    /* Softer outer glow */
    0 0 30px rgba(59, 130, 246, 0.15),
    /* Gentle depth shadow */
    0 4px 16px rgba(0, 0, 0, 0.08),
    /* Glass highlight */
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    /* Inner depth */
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    /* Side reflections */
    inset 1px 0 0 rgba(255, 255, 255, 0.12),
    inset -1px 0 0 rgba(255, 255, 255, 0.12) !important;
  
  transform: translateY(-2px) scale(1.05) !important;
}