/*!
 * Waves v0.7.6 - Enhanced UI/UX
 * http://fian.my.id/Waves 
 * 
 * Copyright 2014-2018 Alfiana E. Sibuea and other contributors 
 * Released under the MIT license 
 * https://github.com/fians/Waves/blob/master/LICENSE
 * 
 * ⚠️ Functional properties preserved - Visual enhancements only
 */

/* =========================================
   1. Theme Variables (Easy Customization)
   ========================================= */
:root {
    /* Ripple Colors */
    --waves-ripple-bg: rgba(0, 0, 0, 0.2);
    --waves-ripple-bg-light: rgba(255, 255, 255, 0.4);
    --waves-ripple-gradient-dark: radial-gradient(
        rgba(0, 0, 0, 0.2) 0, 
        rgba(0, 0, 0, 0.3) 40%, 
        rgba(0, 0, 0, 0.4) 50%, 
        rgba(0, 0, 0, 0.5) 60%, 
        rgba(255, 255, 255, 0) 70%
    );
    --waves-ripple-gradient-light: radial-gradient(
        rgba(255, 255, 255, 0.2) 0, 
        rgba(255, 255, 255, 0.3) 40%, 
        rgba(255, 255, 255, 0.4) 50%, 
        rgba(255, 255, 255, 0.5) 60%, 
        rgba(255, 255, 255, 0) 70%
    );
    
    /* Animation Timing */
    --waves-transition-duration: 500ms;
    --waves-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --waves-float-duration: 300ms;
    
    /* Sizing */
    --waves-ripple-size: 100px;
    --waves-ripple-margin: -50px;
    --waves-button-padding: 0.85em 1.1em;
    --waves-circle-size: 2.5em;
    --waves-border-radius: 0.2em;
    
    /* Shadows & Depth */
    --waves-shadow-rest: 0 1px 1.5px 1px rgba(0, 0, 0, 0.12);
    --waves-shadow-active: 0 8px 20px 1px rgba(0, 0, 0, 0.3);
    
    /* Accessibility */
    --waves-focus-ring: 0 0 0 3px rgba(0, 0, 0, 0.15);
}

/* Dark mode automatic adaptation */
@media (prefers-color-scheme: dark) {
    :root {
        --waves-ripple-bg: rgba(255, 255, 255, 0.3);
        --waves-focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.3);
    }
}

/* =========================================
   2. Core Effect Container (Preserved Functionality)
   ========================================= */
.waves-effect {
    position: relative;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    
    /* Enhanced: Smooth rendering & performance */
    will-change: transform;
    contain: layout style;
    transition: background-color var(--waves-transition-duration) var(--waves-transition-easing);
}

/* Hover/Active feedback for parent element (subtle enhancement) */
.waves-effect:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.waves-effect:active {
    background-color: rgba(0, 0, 0, 0.06);
}

/* =========================================
   3. Ripple Element (Core Animation - DO NOT MODIFY FUNCTIONAL PROPERTIES)
   ========================================= */
.waves-effect .waves-ripple {
    /* Required positioning & sizing - DO NOT CHANGE */
    position: absolute;
    border-radius: 50%;
    width: var(--waves-ripple-size);
    height: var(--waves-ripple-size);
    margin-top: var(--waves-ripple-margin);
    margin-left: var(--waves-ripple-margin);
    opacity: 0;
    
    /* Background gradient - core visual effect */
    background: var(--waves-ripple-bg);
    background: -webkit-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
    background: -o-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
    background: -moz-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
    background: var(--waves-ripple-gradient-dark);
    
    /* Animation properties - critical for JS functionality */
    -webkit-transition: all var(--waves-transition-duration) var(--waves-transition-easing);
    -moz-transition: all var(--waves-transition-duration) var(--waves-transition-easing);
    -o-transition: all var(--waves-transition-duration) var(--waves-transition-easing);
    transition: all var(--waves-transition-duration) var(--waves-transition-easing);
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -o-transition-property: -o-transform, opacity;
    transition-property: transform, opacity;
    -webkit-transform: scale(0) translate(0, 0);
    -moz-transform: scale(0) translate(0, 0);
    -ms-transform: scale(0) translate(0, 0);
    -o-transform: scale(0) translate(0, 0);
    transform: scale(0) translate(0, 0);
    
    /* Essential: Allow clicks to pass through ripple */
    pointer-events: none;
    
    /* Enhanced: Performance optimization */
    will-change: transform, opacity;
    contain: strict;
}

/* Animation state when ripple is active (JS adds this class) */
.waves-effect .waves-ripple.waves-ripple-animate {
    opacity: 1;
    -webkit-transform: scale(1) translate(0, 0);
    -moz-transform: scale(1) translate(0, 0);
    -ms-transform: scale(1) translate(0, 0);
    -o-transform: scale(1) translate(0, 0);
    transform: scale(1) translate(0, 0);
}

/* =========================================
   4. Light Variant (White Ripple)
   ========================================= */
.waves-effect.waves-light .waves-ripple {
    background: var(--waves-ripple-bg-light);
    background: -webkit-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
    background: -o-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
    background: -moz-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
    background: var(--waves-ripple-gradient-light);
}

/* =========================================
   5. Classic Variant (Solid Color, No Gradient)
   ========================================= */
.waves-effect.waves-classic .waves-ripple {
    background: var(--waves-ripple-bg);
    /* Simplified: No gradient for classic flat look */
}

.waves-effect.waves-classic.waves-light .waves-ripple {
    background: var(--waves-ripple-bg-light);
}

/* =========================================
   6. Transition Override Utility
   ========================================= */
.waves-notransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

/* =========================================
   7. Button & Circle Shapes (Preserved Geometry)
   ========================================= */
.waves-button,
.waves-circle {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
    
    /* Enhanced: Prevent text selection on rapid clicks */
    -webkit-touch-callout: none;
}

.waves-button,
.waves-button:hover,
.waves-button:visited,
.waves-button-input {
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: none;
    outline: none;
    color: inherit;
    background-color: rgba(0, 0, 0, 0);
    font-size: 1em;
    line-height: 1em;
    text-align: center;
    text-decoration: none;
    z-index: 1;
    
    /* Enhanced: Smooth color transitions */
    transition: color var(--waves-transition-duration) var(--waves-transition-easing),
                background-color var(--waves-transition-duration) var(--waves-transition-easing);
}

.waves-button {
    padding: var(--waves-button-padding);
    border-radius: var(--waves-border-radius);
    
    /* Enhanced: Subtle depth */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.waves-button:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.waves-button-input {
    margin: 0;
    padding: var(--waves-button-padding);
}

/* =========================================
   8. Input Wrapper
   ========================================= */
.waves-input-wrapper {
    border-radius: var(--waves-border-radius);
    vertical-align: bottom;
    display: inline-block;
    overflow: hidden;
}

.waves-input-wrapper.waves-button {
    padding: 0;
}

.waves-input-wrapper .waves-button-input {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    
    /* Enhanced: Better focus visibility */
    transition: box-shadow var(--waves-transition-duration) var(--waves-transition-easing);
}

.waves-input-wrapper .waves-button-input:focus {
    box-shadow: var(--waves-focus-ring);
}

/* =========================================
   9. Circle Variant
   ========================================= */
.waves-circle {
    text-align: center;
    width: var(--waves-circle-size);
    height: var(--waves-circle-size);
    line-height: var(--waves-circle-size);
    border-radius: 50%;
    
    /* Enhanced: Consistent sizing & hover feedback */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--waves-transition-duration) var(--waves-transition-easing),
                box-shadow var(--waves-transition-duration) var(--waves-transition-easing);
}

.waves-circle:hover {
    transform: scale(1.05);
}

/* =========================================
   10. Float Effect (Elevated Button)
   ========================================= */
.waves-float {
    -webkit-mask-image: none;
    -webkit-box-shadow: var(--waves-shadow-rest);
    box-shadow: var(--waves-shadow-rest);
    -webkit-transition: all var(--waves-float-duration) var(--waves-transition-easing);
    -moz-transition: all var(--waves-float-duration) var(--waves-transition-easing);
    -o-transition: all var(--waves-float-duration) var(--waves-transition-easing);
    transition: all var(--waves-float-duration) var(--waves-transition-easing);
    
    /* Enhanced: Smooth lift animation */
    will-change: box-shadow, transform;
}

.waves-float:active {
    -webkit-box-shadow: var(--waves-shadow-active);
    box-shadow: var(--waves-shadow-active);
    transform: translateY(1px);
}

/* =========================================
   11. Block Display Utility
   ========================================= */
.waves-block {
    display: block;
    width: 100%;
}

/* =========================================
   12. Accessibility Enhancements
   ========================================= */
/* Focus indicator for keyboard navigation */
.waves-effect:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    box-shadow: var(--waves-focus-ring);
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .waves-effect,
    .waves-effect .waves-ripple,
    .waves-float,
    .waves-button,
    .waves-circle {
        transition: none !important;
        animation: none !important;
        will-change: auto !important;
    }
    
    .waves-effect .waves-ripple.waves-ripple-animate {
        -webkit-transform: scale(1) translate(0, 0) !important;
        transform: scale(1) translate(0, 0) !important;
        opacity: 1 !important;
        transition: opacity 1ms !important;
    }
    
    .waves-float:active {
        transform: none !important;
        box-shadow: var(--waves-shadow-rest) !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .waves-effect:focus-visible {
        outline: 3px solid currentColor;
        outline-offset: 3px;
    }
    
    .waves-button,
    .waves-circle {
        border: 2px solid currentColor;
    }
}

/* =========================================
   13. Touch Device Optimizations
   ========================================= */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .waves-effect:hover,
    .waves-button:hover,
    .waves-circle:hover {
        background-color: transparent;
        box-shadow: none;
        transform: none;
    }
    
    /* Ensure tap feedback still works */
    .waves-effect:active {
        background-color: rgba(0, 0, 0, 0.08);
    }
    
    .waves-effect.waves-light:active {
        background-color: rgba(255, 255, 255, 0.15);
    }
}

/* =========================================
   14. Dark Mode Ripple Adaptation (Optional)
   ========================================= */
/* Auto-detect dark backgrounds and adjust ripple */
.waves-effect[data-waves-dark] .waves-ripple,
.dark-theme .waves-effect:not(.waves-light) .waves-ripple {
    background: var(--waves-ripple-bg-light);
    background: var(--waves-ripple-gradient-light);
}

/* =========================================
   15. Performance & Rendering Hints
   ========================================= */
/* GPU acceleration for smooth animations */
.waves-effect .waves-ripple {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
}

/* Contain layout to prevent reflows during animation */
.waves-effect {
    contain: layout style paint;
}

/* =========================================
   16. Utility: Disable Waves on Specific Elements
   ========================================= */
.waves-disabled,
.waves-effect[disabled],
.waves-effect:disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.6;
}

.waves-disabled .waves-ripple,
.waves-effect[disabled] .waves-ripple,
.waves-effect:disabled .waves-ripple {
    display: none !important;
}