/* Smooth scrollbar */
    * {
      scrollbar-width: thin;
      scrollbar-color: #0ea5e9 #f1f5f9;
    }
    
    *::-webkit-scrollbar {
      width: 8px;
    }
    
    *::-webkit-scrollbar-track {
      background: #f1f5f9;
    }
    
    *::-webkit-scrollbar-thumb {
      background: #0ea5e9;
      border-radius: 4px;
    }
    
    *::-webkit-scrollbar-thumb:hover {
      background: #0284c7;
    }

    :root {
      --primary-50: #f0f9ff;
      --primary-100: #e0f2fe;
      --primary-500: #0ea5e9;
      --primary-600: #0284c7;
      --primary-700: #0369a1;
      --gray-50: #f8fafc;
      --gray-100: #f1f5f9;
      --gray-200: #e2e8f0;
      --gray-600: #475569;
      --gray-700: #334155;
      --gray-900: #0f172a;
    }

    .nav-glass {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(226, 232, 240, 0.8);
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Wymuszenie ciemnego tekstu na białym tle (gdy nie jest scrolled) */
    .nav-glass:not(.scrolled) .nav-link,
    .nav-glass:not(.scrolled) .logo-text {
      color: #0f172a !important;
    }
    
    .nav-glass:not(.scrolled) .logo-subtitle {
      color: #475569 !important;
    }

    .nav-glass.scrolled {
      background: rgba(15, 23, 42, 1) !important;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-bottom: 1px solid rgba(51, 65, 85, 1);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    }

    .nav-glass.scrolled .nav-link,
    .nav-glass.scrolled a {
      color: #ffffff !important;
    }

    .nav-glass.scrolled .nav-link:hover,
    .nav-glass.scrolled a:hover {
      color: #0ea5e9 !important;
    }

    .nav-glass.scrolled .logo-text {
      color: #ffffff !important;
    }

    .nav-glass.scrolled .logo-subtitle {
      color: #cbd5e1 !important;
    }

    .dropdown-glass {
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(60px) saturate(220%) brightness(115%);
      -webkit-backdrop-filter: blur(60px) saturate(220%) brightness(115%);
      filter: blur(0.3px);
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 28px;
      box-shadow: 
        0 32px 64px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset,
        0 16px 32px rgba(0, 0, 0, 0.1);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Ciemny tryb dla dropdown gdy navbar scrolled */
    .nav-glass.scrolled .dropdown-glass {
      background: rgba(15, 23, 42, 1) !important;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border: 1px solid rgba(71, 85, 105, 1);
      box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
    }

    /* Biały tekst w ciemnym dropdown */
    .nav-glass.scrolled .dropdown-glass .dropdown-item {
      color: #ffffff !important;
    }

    .nav-glass.scrolled .dropdown-glass .dropdown-item:hover {
      color: #0ea5e9 !important;
      background: linear-gradient(90deg, rgba(14, 165, 233, 0.2), transparent) !important;
    }

    /* Style dla przycisku 'Dostępne kursy' w ciemnym trybie */
    .nav-glass.scrolled .dropdown-glass .text-blue-600 {
      color: #60a5fa !important;
    }

    .nav-glass.scrolled .dropdown-glass .text-blue-600:hover {
      color: #3b82f6 !important;
    }

    /* Dodatkowe style dla mobile dropdown w ciemnym trybie */
    .nav-glass.scrolled #mobile-school .text-blue-600 {
      color: #60a5fa !important;
    }

    .nav-glass.scrolled #mobile-school .text-blue-600:hover {
      color: #3b82f6 !important;
    }

    .logo-link {
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    
    .logo-link:hover {
      transform: scale(1.02);
    }

    .nav-link {
      position: relative;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border-radius: 12px;
    }

    .nav-link:hover {
      background: rgba(14, 165, 233, 0.08);
      color: var(--primary-600);
    }

    .nav-link::after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      bottom: 8px;
      left: 50%;
      background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      transform: translateX(-50%);
    }

    .nav-link:hover::after {
      width: 100%;
    }

    .gradient-btn {
      background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 4px 14px 0 rgba(14, 165, 233, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
      position: relative;
      overflow: hidden;
    }

    .gradient-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: 0.5s;
    }

    .gradient-btn:hover::before {
      left: 100%;
    }

    .gradient-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px 0 rgba(14, 165, 233, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

    .mobile-dropdown {
      animation: slideDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
      
    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .dropdown-item {
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .dropdown-item:hover {
      transform: translateX(4px);
      background: linear-gradient(90deg, var(--primary-50), transparent);
    }

    /* Enhanced Liquid Glass Classes */
    .liquid-glass-light {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(35px) saturate(200%) brightness(115%);
      -webkit-backdrop-filter: blur(35px) saturate(200%) brightness(115%);
      border: 1px solid rgba(255, 255, 255, 0.15);
    }

    .liquid-glass-medium {
      background: rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(45px) saturate(220%) brightness(118%);
      -webkit-backdrop-filter: blur(45px) saturate(220%) brightness(118%);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .liquid-glass-strong {
      background: rgba(255, 255, 255, 0.18);
      backdrop-filter: blur(55px) saturate(240%) brightness(122%);
      -webkit-backdrop-filter: blur(55px) saturate(240%) brightness(122%);
      border: 1px solid rgba(255, 255, 255, 0.25);
    }

    /* Ciemny tryb dla mega-menu */
    .nav-glass.scrolled .mega-menu-glass {
      background: rgba(15, 23, 42, 1) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border: 1px solid rgba(71, 85, 105, 1) !important;
      box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(148, 163, 184, 0.2) inset, 0 20px 40px rgba(0, 0, 0, 0.4) !important;
    }

    /* Biały tekst w ciemnym mega-menu */
    .nav-glass.scrolled #courses-mega-menu h3 {
      color: #ffffff !important;
      border-bottom-color: rgba(14, 165, 233, 0.3) !important;
    }

    .nav-glass.scrolled #courses-mega-menu .font-medium {
      color: #ffffff !important;
    }

    .nav-glass.scrolled #courses-mega-menu .text-sm {
      color: #cbd5e1 !important;
    }

    .nav-glass.scrolled #courses-mega-menu a:hover .font-medium {
      color: #0ea5e9 !important;
    }

    .nav-glass.scrolled #courses-mega-menu .text-gray-700 {
      color: #ffffff !important;
    }

    .nav-glass.scrolled #courses-mega-menu .text-gray-600 {
      color: #cbd5e1 !important;
    }

    /* Przyciski w ciemnym mega-menu */
    .nav-glass.scrolled #courses-mega-menu .bg-blue-500 {
      background: #0ea5e9 !important;
    }

    .nav-glass.scrolled #courses-mega-menu .border-gray-300 {
      border-color: rgba(71, 85, 105, 0.5) !important;
      background: rgba(15, 23, 42, 0.3) !important;
      color: #ffffff !important;
    }

    /* Ciemny tryb dla mobile menu */
    .nav-glass.scrolled .mobile-menu-glass {
      background: rgba(15, 23, 42, 1) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border-top: 1px solid rgba(71, 85, 105, 1) !important;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(148, 163, 184, 0.1) !important;
    }

    /* Biały tekst w mobile menu */
    .nav-glass.scrolled #mobile-menu .text-gray-900,
    .nav-glass.scrolled #mobile-menu .text-gray-700 {
      color: #ffffff !important;
    }

    .nav-glass.scrolled #mobile-menu .text-gray-600 {
      color: #cbd5e1 !important;
    }

    .nav-glass.scrolled #mobile-menu .text-blue-600 {
      color: #0ea5e9 !important;
    }

    .nav-glass.scrolled #mobile-menu .hover\:bg-gray-100\/80:hover,
    .nav-glass.scrolled #mobile-menu .hover\:bg-gray-100\/60:hover {
      background: rgba(71, 85, 105, 0.2) !important;
    }

    /* Style dla mobile-courses-list w ciemnym trybie */
    .nav-glass.scrolled #mobile-courses-list .text-gray-500 {
      color: #94a3b8 !important;
    }

    .nav-glass.scrolled #mobile-courses-list .text-gray-600 {
      color: #e2e8f0 !important;
    }

    .nav-glass.scrolled #mobile-courses-list .hover\:text-gray-900:hover {
      color: #0ea5e9 !important;
    }

    .nav-glass.scrolled #mobile-courses-list .hover\:bg-gray-100:hover {
      background: rgba(71, 85, 105, 0.2) !important;
    }

    /* Style dla mobile dropdown button hover */
    .nav-glass.scrolled #mobile-menu .hover\:bg-blue-50:hover {
      background: rgba(59, 130, 246, 0.1) !important;
    }

    /* Style dla wszystkich mobile-menu-item */
    .nav-glass.scrolled #mobile-menu .mobile-menu-item {
      color: #ffffff !important;
    }

    .nav-glass.scrolled #mobile-menu .mobile-menu-item:hover {
      color: #0ea5e9 !important;
      background: rgba(71, 85, 105, 0.2) !important;
    }

    /* Style dla wszystkich course-item w mobile-courses-list */
    .nav-glass.scrolled #mobile-courses-list .course-item {
      color: #e2e8f0 !important;
    }

    .nav-glass.scrolled #mobile-courses-list .course-item:hover {
      color: #0ea5e9 !important;
      background: rgba(71, 85, 105, 0.2) !important;
    }

    /* Style dla mobile dropdown button hover */
    .nav-glass.scrolled #mobile-menu .hover\:bg-blue-50:hover {
      background: rgba(59, 130, 246, 0.1) !important;
    }

    /* Ciemny tryb dla mega-menu */
    .nav-glass.scrolled .mega-menu-glass {
      background: rgba(15, 23, 42, 0.85) !important;
      backdrop-filter: blur(60px) saturate(180%) brightness(85%) !important;
      -webkit-backdrop-filter: blur(60px) saturate(180%) brightness(85%) !important;
      filter: blur(0.5px) !important;
      border: 1px solid rgba(71, 85, 105, 0.5) !important;
      box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(148, 163, 184, 0.2) inset, 0 20px 40px rgba(0, 0, 0, 0.25) !important;
    }

    /* Biały tekst w ciemnym mega-menu */
    .nav-glass.scrolled #courses-mega-menu h3 {
      color: #ffffff !important;
      border-bottom-color: rgba(14, 165, 233, 0.3) !important;
    }

    .nav-glass.scrolled #courses-mega-menu .font-medium {
      color: #ffffff !important;
    }

    .nav-glass.scrolled #courses-mega-menu .text-sm {
      color: #cbd5e1 !important;
    }

    .nav-glass.scrolled #courses-mega-menu a:hover .font-medium {
      color: #0ea5e9 !important;
    }

    .nav-glass.scrolled #courses-mega-menu .text-gray-700 {
      color: #ffffff !important;
    }

    .nav-glass.scrolled #courses-mega-menu .text-gray-600 {
      color: #cbd5e1 !important;
    }

    /* Przyciski w ciemnym mega-menu */
    .nav-glass.scrolled #courses-mega-menu .bg-blue-500 {
      background: #0ea5e9 !important;
    }

    .nav-glass.scrolled #courses-mega-menu .border-gray-300 {
      border-color: rgba(71, 85, 105, 0.5) !important;
      background: rgba(15, 23, 42, 0.3) !important;
      color: #ffffff !important;
    }


/* Login Modal Styles */
#loginPanel {
  position: relative;
  overflow: hidden;
}

#loginPanel::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.7),
    transparent
  );
  transform: skewX(-25deg);
  animation: panelShimmer 8s infinite ease-in-out;
  pointer-events: none;
  z-index: 10;
}

@keyframes panelShimmer {
  0% { left: -150%; }
  20% { left: 150%; }
  100% { left: 150%; }
}

/* Hero Animated Background */
.hero-bg-animated {
    background: linear-gradient(-45deg, #eff6ff, #dbeafe, #bfdbfe, #93c5fd);
    background-size: 400% 400%;
    animation: gradientBG 10s ease infinite;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}