/* Custom component classes using Tailwind @apply */

@layer components {
    /* Logo color */
    .text-logo {
        color: #0673ef;
    }
    
    /* Glass morphism effects */
    .glass {
        @apply bg-white/70 dark:bg-[#0f1820]/70 backdrop-blur-[20px] border border-primary-500/15 dark:border-accent-400/25;
    }
    
    .glass-dark {
        @apply bg-[#0f1820]/90 backdrop-blur-[20px] border border-white/8;
    }
    
    .input-glass {
        @apply bg-white/85 dark:bg-[#0f1820]/85 backdrop-blur-[20px] border-2 border-primary-500/25 dark:border-accent-400/35;
    }
    
    .input-glass:focus {
        @apply border-primary-500 shadow-[0_0_0_3px_rgba(29,99,133,0.15)] outline-none;
    }
    
    /* Buttons */
    .btn-glass {
        @apply bg-primary-500/90 text-white backdrop-blur-[10px] border border-primary-500/25 transition-all duration-300;
    }
    
    .btn-glass:hover {
        @apply bg-primary-500 -translate-y-0.5 shadow-[0_10px_25px_rgba(29,99,133,0.3)];
    }
    
    .btn-primary {
        @apply flex items-center justify-center rounded-2xl bg-primary-500 px-6 py-3 text-lg font-bold text-white shadow-xl shadow-primary-500/30 hover:bg-primary-500/90 transition-all hover:-translate-y-1;
    }
    
    .btn-outline {
        @apply flex items-center justify-center rounded-2xl border-2 border-primary-500 px-6 py-3 text-lg font-bold text-primary-500 hover:bg-primary-500/10 transition-all;
    }
    
    /* Navigation */
    .nav-menu {
        @apply bg-white/75 dark:bg-[#0f1820]/75 backdrop-blur-[20px] border border-primary-500/15 dark:border-accent-400/25;
    }
    
    .nav-blur {
        @apply bg-transparent;
    }
    
    /* Cards */
    .card {
        @apply rounded-2xl p-6 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800;
    }
    
    .card-glass {
        @apply glass rounded-2xl p-6;
    }
    
    .card-event {
        @apply glass rounded-2xl overflow-hidden hover:glow transition-all duration-300 transform hover:-translate-y-1 flex flex-col h-full;
    }
    
    .ticket-card {
        @apply relative bg-gradient-to-br from-white/95 to-white/80 dark:from-[#0f1820]/95 dark:to-[#182028]/90 backdrop-blur-[20px] border border-primary-500/15 dark:border-accent-400/25;
    }
    
    .ticket-card::before,
    .ticket-card::after {
        content: '';
        @apply absolute top-1/2 w-5 h-5 bg-gray-100 dark:bg-[#09090b] rounded-full -translate-y-1/2;
    }
    
    .ticket-card::before {
        @apply -left-[10px];
    }
    
    .ticket-card::after {
        @apply -right-[10px];
    }
    
    .stat-card {
        @apply rounded-2xl p-6 bg-white/60 dark:bg-white/5;
    }
    
    /* Mobile menu */
    .main-mobile-item {
        @apply transition-all duration-300;
    }
    
    .main-mobile-item:hover {
        @apply bg-white/10 translate-x-1;
    }
    
    .main-mobile-item.main-mobile-active {
        @apply bg-primary-500/20 border-l-4 border-primary-500 text-primary-500;
    }
    
    .dark .main-mobile-item.main-mobile-active {
        @apply bg-accent-400/20 border-accent-400 text-white;
    }

    /* Desktop menu responsive */
    .desktop-menu {
        @apply items-center gap-2;
    }

    @media (max-width: 1023px) {
        .desktop-menu, .desktop-divider {
            display: none !important;
        }
        .mobile-menu-btn {
            display: flex !important;
        }
    }

    @media (min-width: 1024px) {
        .desktop-menu {
            display: flex !important;
        }
        .desktop-divider {
            display: block !important;
        }
        .mobile-menu-btn {
            display: none !important;
        }
    }
    
    /* Glow Menu Container */
    .glow-menu-container {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.5rem;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(12px);
        border-radius: 1.5rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08),
                    0 0 1px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.6);
    }

    .dark .glow-menu-container {
        background: rgba(17, 24, 39, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3),
                    0 0 1px rgba(255, 255, 255, 0.1);
    }

    /* Menu Item */
    .menu-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem 1rem;
        border-radius: 1rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: #111827;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        cursor: pointer;
    }

    body.dark .menu-item,
    .dark .menu-item {
        color: #ffffff !important;
    }

    .menu-item:hover {
        background: rgba(0, 0, 0, 0.04);
        color: #111827;
    }

    body.dark .menu-item:hover,
    .dark .menu-item:hover {
        background: rgba(255, 255, 255, 0.05);
        color: #ffffff !important;
    }

    /* Active Menu Item with Glow */
    .menu-item.active {
        background: linear-gradient(135deg, var(--glow-from), var(--glow-to));
        color: white;
        box-shadow: 0 4px 12px var(--glow-shadow),
                    0 0 20px var(--glow-ambient);
    }

    /* Icon Only Items */
    .menu-item.icon-only {
        padding: 0.625rem 1rem;
        position: relative;
    }

    /* Cart Badge */
    .cart-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        background: #ef4444;
        color: white;
        font-size: 10px;
        border-radius: 9999px;
        height: 1.25rem;
        width: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
    }

    /* Cart Badge in Mobile Menu (positioned like chevron) */
    .mobile-menu-item .cart-badge {
        position: static;
        margin-left: auto;
        margin-right: 0;
        top: auto;
        right: auto;
        height: 1.25rem;
        min-width: 1.25rem;
        padding: 0 0.375rem;
        width: auto;
    }

    /* Menu Divider */
    .menu-divider {
        width: 1px;
        height: 1.5rem;
        background: rgba(0, 0, 0, 0.1);
        margin: 0 0.25rem;
    }

    .dark .menu-divider {
        background: rgba(255, 255, 255, 0.1);
    }

    /* Dropdown Button */
    .dropdown-btn {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: none;
        border: none;
        color: inherit;
        font: inherit;
        cursor: pointer;
        padding: 0;
    }

    .dropdown-trigger {
        position: relative;
    }
    
    .dropdown-trigger > div[x-show] {
        top: 100% !important;
    }
    
    /* Mobile Glow Menu */
    .mobile-glow-menu {
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(12px);
        border-radius: 1.5rem;
        padding: 0.75rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    .dark .mobile-glow-menu {
        background: rgba(17, 24, 39, 0.6);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

    .mobile-menu-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.875rem 1rem;
        border-radius: 1rem;
        color: #111827;
        transition: all 0.3s ease;
        cursor: pointer;
        text-decoration: none;
        margin-bottom: 0.5rem;
        border: none;
        background: none;
        width: 100%;
        text-align: left;
        font-family: inherit;
        font-size: inherit;
    }
    
    .mobile-menu-item:last-child {
        margin-bottom: 0;
    }
    
    /* Icon wrapper for mobile menu items */
    .mobile-menu-item .icon-wrapper {
        width: 1.5rem;
        min-width: 1.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body.dark .mobile-menu-item,
    .dark .mobile-menu-item {
        color: #ffffff !important;
    }

    .mobile-menu-item:hover {
        background: rgba(0, 0, 0, 0.04);
        color: #111827;
    }

    body.dark .mobile-menu-item:hover,
    .dark .mobile-menu-item:hover {
        background: rgba(255, 255, 255, 0.05);
        color: #ffffff !important;
    }

    .mobile-menu-item.active {
        background: linear-gradient(135deg, var(--glow-from), var(--glow-to)) !important;
        color: white !important;
        box-shadow: 0 4px 12px var(--glow-shadow),
                    0 2px 8px var(--glow-ambient) !important;
    }
    
    .mobile-menu-item.active * {
        color: white !important;
    }

    .mobile-submenu {
        margin-left: 2.5rem;
        margin-top: 0.5rem;
    }

    .mobile-submenu a {
        display: block;
        padding: 0.5rem 1rem;
        border-radius: 0.75rem;
        font-size: 0.875rem;
        color: #111827;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .mobile-submenu a:hover {
        background: rgba(0, 0, 0, 0.04);
        color: #111827;
    }

    body.dark .mobile-submenu a,
    .dark .mobile-submenu a {
        color: #ffffff !important;
    }

    body.dark .mobile-submenu a:hover,
    .dark .mobile-submenu a:hover {
        background: rgba(255, 255, 255, 0.05);
        color: #ffffff !important;
    }

    /* Color Variants for Active Items */
    .menu-item[data-color="blue"].active {
        --glow-from: #3b82f6;
        --glow-to: #06b6d4;
        --glow-shadow: rgba(59, 130, 246, 0.4);
        --glow-ambient: rgba(59, 130, 246, 0.2);
    }

    .menu-item[data-color="purple"].active {
        --glow-from: #8b5cf6;
        --glow-to: #d946ef;
        --glow-shadow: rgba(139, 92, 246, 0.4);
        --glow-ambient: rgba(139, 92, 246, 0.2);
    }

    .menu-item[data-color="orange"].active {
        --glow-from: #f59e0b;
        --glow-to: #f97316;
        --glow-shadow: rgba(245, 158, 11, 0.4);
        --glow-ambient: rgba(245, 158, 11, 0.2);
    }

    .menu-item[data-color="red"].active {
        --glow-from: #ef4444;
        --glow-to: #ec4899;
        --glow-shadow: rgba(239, 68, 68, 0.4);
        --glow-ambient: rgba(239, 68, 68, 0.2);
    }
    
    .menu-item[data-color="green"].active {
        --glow-from: #10b981;
        --glow-to: #34d399;
        --glow-shadow: rgba(16, 185, 129, 0.4);
        --glow-ambient: rgba(16, 185, 129, 0.2);
    }

    .menu-item[data-color="yellow"].active {
        --glow-from: #f59e0b;
        --glow-to: #fbbf24;
        --glow-shadow: rgba(245, 158, 11, 0.4);
        --glow-ambient: rgba(245, 158, 11, 0.2);
    }

    /* Apply data-color CSS variables to all menu items */
    .menu-item[data-color="blue"], .mobile-menu-item[data-color="blue"] {
        --glow-from: #3b82f6;
        --glow-to: #06b6d4;
        --glow-shadow: rgba(59, 130, 246, 0.4);
        --glow-ambient: rgba(59, 130, 246, 0.2);
    }

    .menu-item[data-color="purple"], .mobile-menu-item[data-color="purple"] {
        --glow-from: #8b5cf6;
        --glow-to: #d946ef;
        --glow-shadow: rgba(139, 92, 246, 0.4);
        --glow-ambient: rgba(139, 92, 246, 0.2);
    }

    .menu-item[data-color="orange"], .mobile-menu-item[data-color="orange"] {
        --glow-from: #f59e0b;
        --glow-to: #f97316;
        --glow-shadow: rgba(245, 158, 11, 0.4);
        --glow-ambient: rgba(245, 158, 11, 0.2);
    }

    .menu-item[data-color="red"], .mobile-menu-item[data-color="red"] {
        --glow-from: #ef4444;
        --glow-to: #ec4899;
        --glow-shadow: rgba(239, 68, 68, 0.4);
        --glow-ambient: rgba(239, 68, 68, 0.2);
    }
    
    .menu-item[data-color="green"], .mobile-menu-item[data-color="green"] {
        --glow-from: #10b981;
        --glow-to: #34d399;
        --glow-shadow: rgba(16, 185, 129, 0.4);
        --glow-ambient: rgba(16, 185, 129, 0.2);
    }

    .menu-item[data-color="yellow"], .mobile-menu-item[data-color="yellow"] {
        --glow-from: #f59e0b;
        --glow-to: #fbbf24;
        --glow-shadow: rgba(245, 158, 11, 0.4);
        --glow-ambient: rgba(245, 158, 11, 0.2);
    }
    
    /* Default CSS variables for menu items */
    .menu-item, .mobile-menu-item {
        --glow-from: #3b82f6;
        --glow-to: #06b6d4;
        --glow-shadow: rgba(59, 130, 246, 0.4);
        --glow-ambient: rgba(59, 130, 246, 0.2);
    }
}

@layer utilities {
    /* Effects */
    .glow {
        @apply shadow-[0_0_20px_rgba(29,99,133,0.3)];
    }
    
    .floating-element {
        animation: float 6s ease-in-out infinite;
    }
    
    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
    }
    
    /* Decorative shapes */
    .organic-shape {
        @apply rounded-[60%_40%_30%_70%_/_60%_30%_70%_40%];
    }
    
    .bent-perspective {
        perspective: 2000px;
    }
    
    .bent-card-left {
        transform: rotateY(25deg) rotateX(10deg) rotateZ(-2deg);
    }
    
    .bent-card-right {
        transform: rotateY(-15deg) rotateX(15deg) rotateZ(2deg);
    }
    
    /* Gradients */
    .mesh-gradient {
        background: radial-gradient(circle at 50% 50%, rgba(29, 99, 133, 0.1) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(80, 157, 194, 0.1) 0%, transparent 50%);
    }
    
    .dark .mesh-gradient {
        background: radial-gradient(circle at 50% 50%, rgba(29, 99, 133, 0.2) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(80, 157, 194, 0.2) 0%, transparent 50%);
    }
    
    /* Dividers */
    .section-divider {
        @apply h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent dark:via-white/10;
    }
    
    .dashed-divider {
        background-image: repeating-linear-gradient(
            90deg,
            transparent,
            transparent 5px,
            rgba(29, 99, 133, 0.35) 5px,
            rgba(29, 99, 133, 0.35) 10px
        );
        @apply h-0.5;
    }
    
    /* Data stream neon effect */
    .data-stream-neon {
        filter: drop-shadow(0 0 12px rgba(29, 99, 133, 0.6));
    }
    
    .dark .data-stream-neon {
        filter: drop-shadow(0 0 12px rgba(80, 157, 194, 0.6));
    }
    
    /* Glass panel */
    .glass-panel {
        @apply bg-white/85 dark:bg-[#0f1820]/85 backdrop-blur-[12px] border border-white/60 dark:border-white/10;
    }
    
    /* Primary green gradient */
    .primary-green {
        @apply bg-gradient-to-br from-lime-400 to-lime-500;
    }
}

/* Global input styles */
@layer base {
    input:not(.auth-input), select:not(.auth-input), textarea:not(.auth-input) {
        @apply border-2 border-primary-500/25;
    }
    
    .dark input:not(.auth-input), .dark select:not(.auth-input), .dark textarea:not(.auth-input) {
        @apply border-accent-400/35 text-white;
    }
    
    input:not(.auth-input):focus, select:not(.auth-input):focus, textarea:not(.auth-input):focus {
        @apply outline-none border-primary-500 shadow-[0_0_0_3px_rgba(29,99,133,0.15)];
    }
    
    .dark .quantity-display {
        @apply text-white;
    }
}

/* Alpine.js cloak */
[x-cloak] {
    @apply hidden;
}

/* Auth Pages Styles */
@layer components {
    /* Auth split background gradient (используем split-bg-top как в макете) */
    .split-bg-top {
        background: linear-gradient(135deg, #0673ef 0%, #3b82f6 50%, #8b5cf6 100%) !important;
        height: 50vh !important;
        min-height: 50vh !important;
    }
    
    .dark .split-bg-top {
        background: linear-gradient(135deg, #0a5fd4 0%, #2563eb 50%, #7c3aed 100%) !important;
    }
    
    /* Auth mesh gradient */
    .auth-mesh-gradient {
        background: radial-gradient(circle at 50% 50%, rgba(6, 115, 239, 0.25) 0%, transparent 60%),
                    radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.2) 0%, transparent 50%);
    }
    
    .dark .auth-mesh-gradient {
        background: radial-gradient(circle at 50% 50%, rgba(6, 115, 239, 0.15) 0%, transparent 60%),
                    radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 50%);
    }
    
    /* Auth card - форма регистрации/входа */
    .auth-card {
        background-color: #ffffff !important;
        border: 1px solid #ffffff !important;
        border-radius: 2.5rem !important; /* rounded-[2.5rem] как в макете */
        box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.15) !important;
        padding: 2rem !important; /* p-8 на mobile */
        width: 100%;
        max-width: 600px;
    }
    
    @media (min-width: 768px) {
        .auth-card {
            padding: 3rem !important; /* p-12 на desktop (md:p-12) */
        }
    }
    
    .dark .auth-card {
        background-color: #ffffff !important; /* На auth страницах всегда белый фон */
        border: 1px solid #ffffff !important;
    }
    
    /* Auth pages responsive */
    @media (max-width: 767px) {
        .auth-card {
            border-radius: 2.5rem !important; /* Оставляем как в макете rounded-[2.5rem] */
            padding: 2rem !important; /* p-8 как в макете */
            /* margin убираем - его нет в макете */
        }
        
        .split-bg-top {
            height: 40vh;
        }
        
        /* Уменьшить размер декоративных элементов на mobile */
        .auth-mesh-gradient {
            width: 400px !important;
            height: 400px !important;
            top: 30% !important;
            left: -20% !important;
        }
        
        .auth-floating-element {
            width: 80px !important;
            height: 80px !important;
            top: 20% !important;
            right: 10% !important;
        }
    }
    
    @media (min-width: 768px) and (max-width: 1023px) {
        .auth-card {
            max-width: 550px;
        }
        
        .split-bg-top {
            height: 45vh;
        }
    }
    
    @media (min-width: 1024px) {
        .auth-card {
            max-width: 600px;
        }
    }
    
    /* Auth input fields - универсальный компонент для использования везде */
    input.auth-input,
    .auth-input,
    input[class*="auth-input"] {
        width: 100% !important;
        height: 3.5rem !important; /* h-14 = 56px = 3.5rem */
        min-height: 3.5rem !important;
        padding-left: 1rem !important; /* px-4 слева для текста и placeholder - отступ слева */
        padding-right: 1rem !important; /* px-4 справа */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border-radius: 0.75rem !important; /* rounded-xl */
        /* Видимая граница как в макете border-gray-200 - обязательно видимая */
        border: 1px solid #e5e7eb !important; /* border-gray-200 - видимая серая граница */
        border-width: 1px !important;
        border-style: solid !important;
        border-color: #e5e7eb !important; /* #e5e7eb = border-gray-200 - видимый серый цвет */
        /* Подложка под текст - белый фон */
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
        color: #111418 !important; /* text-[#111418] как в макете */
        transition: all 0.3s ease;
        box-sizing: border-box !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }
    
    .auth-input::placeholder {
        color: #9ca3af !important; /* placeholder:text-gray-400 */
        opacity: 1 !important;
    }
    
    .auth-input::-webkit-input-placeholder {
        color: #9ca3af !important;
        opacity: 1 !important;
    }
    
    .auth-input::-moz-placeholder {
        color: #9ca3af !important;
        opacity: 1 !important;
    }
    
    .auth-input:-ms-input-placeholder {
        color: #9ca3af !important;
        opacity: 1 !important;
    }
    
    .auth-input:focus {
        border-color: #0673ef !important; /* focus:border-primary как в макете */
        outline: none !important;
        box-shadow: 0 0 0 4px rgba(6, 115, 239, 0.1) !important; /* focus:ring-4 focus:ring-primary/10 */
    }
    
    /* Убеждаемся что border видимый даже если есть другие стили - переопределяем все возможные селекторы */
    input.auth-input,
    input[class*="auth-input"],
    input[type="text"].auth-input,
    input[type="email"].auth-input,
    input[type="tel"].auth-input,
    input[type="password"].auth-input,
    .auth-input[type="text"],
    .auth-input[type="email"],
    .auth-input[type="tel"],
    .auth-input[type="password"] {
        border-width: 1px !important;
        border-style: solid !important;
        border-color: #e5e7eb !important; /* border-gray-200 - видимая серая граница как в макете */
    }
    
    input.auth-input:focus,
    input[class*="auth-input"]:focus,
    input[type="text"].auth-input:focus,
    input[type="email"].auth-input:focus,
    input[type="tel"].auth-input:focus,
    input[type="password"].auth-input:focus,
    .auth-input[type="text"]:focus,
    .auth-input[type="email"]:focus,
    .auth-input[type="tel"]:focus,
    .auth-input[type="password"]:focus {
        border-color: #0673ef !important; /* focus:border-primary как в макете */
        border-width: 1px !important;
        border-style: solid !important;
    }
    
    /* Для auth страниц всегда белый фон */
    .auth-input {
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
    }
    
    /* В dark mode на auth страницах тоже белый фон для читаемости, но border остается серым */
    .dark .auth-input {
        border-color: #e5e7eb !important; /* border-gray-200 - оставляем видимый серый border даже в dark mode */
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
        color: #111418 !important;
    }
    
    .dark .auth-input:focus {
        border-color: #0673ef !important; /* focus:border-primary */
    }
    
    .dark .auth-input::placeholder {
        color: #6b7280 !important; /* placeholder:text-gray-500 */
    }
    
    .dark .auth-input:focus {
        border-color: #0673ef !important; /* border-primary */
        box-shadow: 0 0 0 4px rgba(6, 115, 239, 0.2) !important;
    }
    
    /* Auth label */
    .auth-label {
        @apply block text-sm font-bold text-[#111418] dark:text-white mb-2;
    }
    
    /* Button size lg для auth страниц - фиксированная высота */
    button[type="submit"].h-14,
    .h-14 button[type="submit"],
    button.h-14,
    button[type="submit"][class*="h-14"] {
        height: 3.5rem !important; /* 56px */
        min-height: 3.5rem !important;
        box-sizing: border-box !important;
    }
    
    /* Убеждаемся что кнопка с size="lg" имеет правильную высоту */
    button.size-lg,
    .size-lg,
    button[class*="text-lg"][class*="px-10"] {
        height: 3.5rem !important;
        min-height: 3.5rem !important;
    }
    
    /* Специфичное правило для кнопок на auth страницах */
    main[class*="auth"] button[type="submit"],
    form button[type="submit"][class*="h-14"] {
        height: 3.5rem !important;
        min-height: 3.5rem !important;
    }
}

@layer utilities {
    /* Auth floating element with drop shadow */
    .auth-floating-element {
        filter: drop-shadow(0 20px 30px rgba(6, 115, 239, 0.2));
    }
    
    .dark .auth-floating-element {
        filter: drop-shadow(0 20px 30px rgba(6, 115, 239, 0.1));
    }
    
    /* Auth data stream neon */
    .auth-data-stream-neon {
        filter: drop-shadow(0 0 15px rgba(6, 115, 239, 0.4));
    }
    
    .dark .auth-data-stream-neon {
        filter: drop-shadow(0 0 15px rgba(139, 92, 246, 0.3));
    }
}

/* Home page specific styles */
@layer components {
    /* Container with max-width */
    .container-max-width {
        max-width: 1200px;
    }
    
    /* Main content container */
    .main-container {
        max-width: 1200px;
        gap: 5rem;
    }
    
    /* Hero grid */
    .hero-grid {
        gap: 3rem;
        min-height: 650px;
    }
    
    @media (min-width: 768px) {
        .hero-grid {
            display: grid;
            grid-template-columns: 5fr 7fr;
            align-items: center;
        }
    }
    
    @media (max-width: 767px) {
        .hero-grid {
            display: flex;
            flex-direction: column;
        }
    }
    
    /* Hero badge */
    .hero-badge {
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
        width: fit-content;
    }
    
    /* Hero title */
    .hero-title {
        line-height: 1.05;
        font-size: 4.5rem;
    }
    
    /* Gradient text */
    .gradient-text-primary {
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-image: linear-gradient(to right, #0673ef, #8b5cf6);
    }
    
    /* Hero description */
    .hero-description {
        max-width: 500px;
    }
    
    /* Hero CTA button */
    .btn-hero-cta {
        height: 3.5rem;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
    
    /* Hero visual container */
    .hero-visual {
        height: 650px;
    }
    
    /* Blur filter */
    .blur-3rem {
        filter: blur(3rem);
    }
    
    .blur-2rem {
        filter: blur(2rem);
    }
    
    .blur-120px {
        filter: blur(120px);
    }
    
    .blur-80px {
        filter: blur(80px);
    }
    
    /* Sales live card */
    .sales-live-card {
        width: 340px;
        height: 240px;
        z-index: 20;
    }
    
    /* Chart bars container */
    .chart-bars-container {
        height: 6rem;
    }
    
    /* Chart bar heights */
    .chart-bar-40 {
        height: 40%;
    }
    
    .chart-bar-60 {
        height: 60%;
    }
    
    .chart-bar-35 {
        height: 35%;
    }
    
    .chart-bar-80 {
        height: 80%;
    }
    
    .chart-bar-95 {
        height: 95%;
    }
    
    .chart-bar-55 {
        height: 55%;
    }
    
    /* Chart bar shadow */
    .chart-bar-shadow {
        box-shadow: 0 -8px 15px rgba(139, 92, 246, 0.3);
    }
    
    /* Conversion card */
    .conversion-card {
        top: 15%;
        right: 5%;
        width: 280px;
        height: 200px;
        z-index: 30;
    }
    
    /* Progress bar */
    .progress-bar-88 {
        width: 88%;
        box-shadow: 0 0 8px rgba(6, 115, 239, 0.5);
    }
    
    /* SVG data stream */
    .svg-data-stream {
        z-index: 5;
    }
    
    /* Decorative blurs */
    .decorative-blur-primary {
        bottom: 20%;
        left: 10%;
        width: 5rem;
        height: 5rem;
        filter: blur(2rem);
    }
    
    .decorative-blur-purple {
        top: 10%;
        right: 20%;
        width: 8rem;
        height: 8rem;
        filter: blur(3rem);
    }
    
    .decorative-blur-center {
        width: 16rem;
        height: 16rem;
        filter: blur(80px);
    }
    
    /* QR code card */
    .qr-code-card {
        bottom: 10%;
        right: 15%;
        width: 12rem;
        height: 6rem;
        z-index: 10;
        transform: rotate(-12deg);
    }
    
    /* Feature card transition */
    .feature-card {
        transition-duration: 500ms;
    }
    
    /* Decorative circle */
    .decorative-circle {
        top: 0;
        right: 0;
        width: 6rem;
        height: 6rem;
        margin-right: -3rem;
        margin-top: -3rem;
        transition-duration: 700ms;
    }
    
    /* Icon container */
    .icon-container {
        width: 3.5rem;
        height: 3.5rem;
    }
    
    /* Feature card hover animations */
    .feature-card:hover .decorative-circle {
        transform: scale(1.5);
    }
    
    .feature-card:hover .icon-container {
        transform: scale(1.1);
    }
    
    /* CTA section */
    .cta-section {
        background: #111418;
        border-radius: 3rem;
    }
    
    /* CTA button primary */
    .btn-cta-primary {
        padding: 1.25rem 2.5rem;
    }
    
    /* CTA button outline */
    .btn-cta-outline {
        padding: 1.25rem 2.5rem;
    }
    
    /* Mobile menu overlay */
    .mobile-menu-overlay {
        position: fixed;
        z-index: 9999;
        height: 100vh;
    }
    
    /* Mobile menu backdrop */
    .mobile-menu-backdrop {
        height: 100vh;
    }
    
    /* Mobile menu panel */
    .mobile-menu-panel {
        z-index: 10000;
        height: 100vh;
    }
}