/* Sticky Header Styles - Always with background */
header.fixed.top-0.left-0.right-0.z-50 {
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease, border-bottom 0.3s ease;
  background-color: rgba(12, 12, 30, 0.85) !important;
  backdrop-filter: saturate(180%) blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* When header has intensified background applied via JavaScript */
header.fixed.top-0.left-0.right-0.z-50[style*="background-color: rgba(12, 12, 30, 0.95)"] {
  background-color: rgba(12, 12, 30, 0.95) !important;
  backdrop-filter: saturate(180%) blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* When header has normal background applied via JavaScript */
header.fixed.top-0.left-0.right-0.z-50[style*="background-color: rgba(12, 12, 30, 0.85)"] {
  background-color: rgba(12, 12, 30, 0.85) !important;
  backdrop-filter: saturate(180%) blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Force background when scrolled (fallback) */
header.fixed.top-0.left-0.right-0.z-50.scrolled {
  background-color: rgba(12, 12, 30, 0.95) !important;
  backdrop-filter: saturate(180%) blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}