/* Glass Effects Module - Reusable Glassmorphism Components */

.glass-card {
    /* Semi-transparent background with glassmorphism effect */
    background: rgba(255, 255, 255, 0.08);
    
    /* Backdrop blur for glass effect */
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    
    /* Subtle border with gradient */
    border: 1px solid rgba(255, 255, 255, 0.15);
    
    /* Soft shadow for depth */
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    
    /* Smooth transitions */
    transition: all 0.3s ease;
    
    /* Slight border radius for modern look */
    border-radius: 20px;
    
    /* Mobile optimization */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.glass-card:hover {
    /* Enhanced glass effect on hover */
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Mobile-specific glass card improvements */
@media (max-width: 768px) {
    .glass-card {
        border-radius: 16px;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
    
    .glass-card:hover {
        transform: none;
        box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
}

.glass-badge {
    /* Glassmorphism for badges */
    background: rgba(59, 130, 246, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

.glass-trial-badge {
    /* Glassmorphism for trial badge */
    background: rgba(34, 197, 94, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(34, 197, 94, 0.3);
    box-shadow: 
        0 4px 16px rgba(34, 197, 94, 0.2),
        inset 0 1px 0 rgba(34, 197, 94, 0.1);
}

.glass-button {
    /* Glassmorphism button effect */
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.9) 0%, 
        rgba(37, 99, 235, 0.9) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 
        0 8px 24px rgba(59, 130, 246, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.glass-button:hover {
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 1) 0%, 
        rgba(37, 99, 235, 1) 100%);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        0 5px 25px rgba(59, 130, 246, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Enhanced text readability on glass */
.glass-card .text-white {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.glass-card .text-gray-300 {
    color: rgba(209, 213, 219, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.glass-card .text-gray-400 {
    color: rgba(156, 163, 175, 0.85);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Special pricing text enhancement */
.glass-price {
    background: linear-gradient(135deg, #ffffff 0%, #e5e7eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    font-weight: 800;
}

/* Green checkmarks with subtle glow */
.glass-card .text-green-400 {
    color: #4ade80;
}

/* Input fields with glass effect */
.glass-input {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.glass-input:focus {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.5);
    box-shadow: 
        0 4px 16px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Background pattern for additional depth */
.glass-background {
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
}