/* Glassmorphism Effect */
.sniphub-calculator.glassmorphism {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.sniphub-calculator.glassmorphism .input-group input {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Neumorphism Effects */
.sniphub-calculator.neumorphism {
    background: var(--e-global-color-background, #f0f0f0);
}

.sniphub-calculator.neumorphism.neumorphism-flat {
    box-shadow: 
        20px 20px 60px rgba(0, 0, 0, 0.1),
        -20px -20px 60px rgba(255, 255, 255, 0.5);
}

.sniphub-calculator.neumorphism.neumorphism-pressed {
    box-shadow: 
        inset 20px 20px 60px rgba(0, 0, 0, 0.1),
        inset -20px -20px 60px rgba(255, 255, 255, 0.5);
}

.sniphub-calculator.neumorphism.neumorphism-convex {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.05));
    box-shadow: 
        20px 20px 60px rgba(0, 0, 0, 0.1),
        -20px -20px 60px rgba(255, 255, 255, 0.5);
}

.sniphub-calculator.neumorphism .input-group input {
    background: var(--e-global-color-background, #f0f0f0);
    box-shadow: 
        inset 5px 5px 10px rgba(0, 0, 0, 0.1),
        inset -5px -5px 10px rgba(255, 255, 255, 0.5);
    border: none;
}

/* Hover Effects */
.sniphub-calculator .hover-effect {
    transition: all 0.3s ease;
}

/* Scale Effect */
.sniphub-calculator.hover-effect.hover-scale .calculate-btn:hover,
.sniphub-calculator.hover-effect.hover-scale .cta-btn:hover,
.sniphub-calculator.hover-effect.hover-scale .input-group input:hover {
    transform: scale(1.02);
}

/* Float Effect */
.sniphub-calculator.hover-effect.hover-float .calculate-btn:hover,
.sniphub-calculator.hover-effect.hover-float .cta-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Glow Effect */
.sniphub-calculator.hover-effect.hover-glow .calculate-btn:hover,
.sniphub-calculator.hover-effect.hover-glow .cta-btn:hover {
    box-shadow: 0 0 20px var(--e-global-color-primary, rgba(0, 123, 255, 0.5));
}

/* Input Focus Effects */
.sniphub-calculator .input-group input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--e-global-color-primary, rgba(0, 123, 255, 0.5));
}

/* Button Base Styles */
.sniphub-calculator .calculate-btn,
.sniphub-calculator .cta-btn {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Button Ripple Effect */
.sniphub-calculator .calculate-btn::after,
.sniphub-calculator .cta-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.sniphub-calculator .calculate-btn:active::after,
.sniphub-calculator .cta-btn:active::after {
    width: 200%;
    height: 200%;
}

/* Responsive Design */
@media screen and (max-width: 767px) {
    .sniphub-calculator.neumorphism {
        box-shadow: 
            10px 10px 30px rgba(0, 0, 0, 0.1),
            -10px -10px 30px rgba(255, 255, 255, 0.5);
    }

    .sniphub-calculator.hover-effect.hover-float .calculate-btn:hover,
    .sniphub-calculator.hover-effect.hover-float .cta-btn:hover {
        transform: translateY(-3px);
    }
}

/* High-performance animations */
@media (prefers-reduced-motion: no-preference) {
    .sniphub-calculator .calculate-btn,
    .sniphub-calculator .cta-btn,
    .sniphub-calculator .input-group input {
        will-change: transform;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .sniphub-calculator.glassmorphism {
        background: rgba(0, 0, 0, 0.2);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .sniphub-calculator.neumorphism {
        background: var(--e-global-color-background, #2d2d2d);
        box-shadow: 
            20px 20px 60px rgba(0, 0, 0, 0.5),
            -20px -20px 60px rgba(255, 255, 255, 0.05);
    }

    .sniphub-calculator.neumorphism .input-group input {
        background: var(--e-global-color-background, #2d2d2d);
        box-shadow: 
            inset 5px 5px 10px rgba(0, 0, 0, 0.5),
            inset -5px -5px 10px rgba(255, 255, 255, 0.05);
    }
}