/**
 * Ripple Animation Effect (Enhanced)
 * WordPress Chat Buttons Plugin
 * 
 * Advanced ripple effect with 3-layer animation system
 */

/* Base Ripple Styles */
.wp-chat-button-ripple {
    position: relative !important;
    overflow: visible !important;
}

/* Container Level Animation */
.wp-chat-buttons-container.wp-chat-buttons-ripple .wp-chat-button-item {
    position: relative !important;
    overflow: visible !important;
}

/* Layer 1: Outer Circle (::before) */
.wp-chat-button-ripple::before,
.wp-chat-buttons-ripple .wp-chat-button-item::before {
    content: "" !important;
    position: absolute !important;
    width: 120px !important;
    height: 120px !important;
    top: 50% !important;
    left: 50% !important;
    margin-top: -60px !important;
    margin-left: -60px !important;
    background-color: transparent !important;
    border-radius: 100% !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    opacity: 0.1 !important;
    z-index: -2 !important;
    pointer-events: none !important;
    animation: wp-chat-ripple-circle-anim 1.2s infinite ease-in-out !important;
    transform-origin: 50% 50% !important;
}

/* Layer 2: Fill Circle (::after) */
.wp-chat-button-ripple::after,
.wp-chat-buttons-ripple .wp-chat-button-item::after {
    content: "" !important;
    position: absolute !important;
    width: 80px !important;
    height: 80px !important;
    top: 50% !important;
    left: 50% !important;
    margin-top: -40px !important;
    margin-left: -40px !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 100% !important;
    border: 2px solid transparent !important;
    z-index: -1 !important;
    pointer-events: none !important;
    animation: wp-chat-ripple-fill-anim 2.3s infinite ease-in-out !important;
    transform-origin: 50% 50% !important;
}

/* Layer 3: Main Button Animation */
.wp-chat-button-ripple,
.wp-chat-buttons-ripple .wp-chat-button-item {
    animation: wp-chat-ripple-button-anim 1.5s infinite ease-in-out !important;
}

/* Size Adjustments - Small Buttons */
.wp-chat-buttons-size-small .wp-chat-button-ripple::before,
.wp-chat-buttons-ripple.wp-chat-buttons-size-small .wp-chat-button-item::before {
    width: 100px !important;
    height: 100px !important;
    margin-top: -50px !important;
    margin-left: -50px !important;
}

.wp-chat-buttons-size-small .wp-chat-button-ripple::after,
.wp-chat-buttons-ripple.wp-chat-buttons-size-small .wp-chat-button-item::after {
    width: 60px !important;
    height: 60px !important;
    margin-top: -30px !important;
    margin-left: -30px !important;
}

/* Size Adjustments - Large Buttons */
.wp-chat-buttons-size-large .wp-chat-button-ripple::before,
.wp-chat-buttons-ripple.wp-chat-buttons-size-large .wp-chat-button-item::before {
    width: 140px !important;
    height: 140px !important;
    margin-top: -70px !important;
    margin-left: -70px !important;
}

.wp-chat-buttons-size-large .wp-chat-button-ripple::after,
.wp-chat-buttons-ripple.wp-chat-buttons-size-large .wp-chat-button-item::after {
    width: 100px !important;
    height: 100px !important;
    margin-top: -50px !important;
    margin-left: -50px !important;
}

/* Hover Effects */
.wp-chat-button-ripple:hover::before,
.wp-chat-buttons-ripple .wp-chat-button-item:hover::before {
    border-color: rgba(255, 255, 255, 0.6) !important;
    opacity: 0.5 !important;
}

.wp-chat-button-ripple:hover::after,
.wp-chat-buttons-ripple .wp-chat-button-item:hover::after {
    background-color: rgba(255, 255, 255, 0.2) !important;
    opacity: 0.75 !important;
}

/* Keyframe Animations */
@keyframes wp-chat-ripple-circle-anim {
    0% {
        transform: rotate(0) scale(0.5) skew(1deg);
        opacity: 0.1;
    }
    30% {
        transform: rotate(0) scale(0.7) skew(1deg);
        opacity: 0.5;
    }
    100% {
        transform: rotate(0) scale(1) skew(1deg);
        opacity: 0.1;
    }
}

@keyframes wp-chat-ripple-fill-anim {
    0% {
        transform: rotate(0) scale(0.7) skew(1deg);
        opacity: 0.2;
    }
    50% {
        transform: rotate(0) scale(1) skew(1deg);
        opacity: 0.2;
    }
    100% {
        transform: rotate(0) scale(0.7) skew(1deg);
        opacity: 0.2;
    }
}

@keyframes wp-chat-ripple-button-anim {
    0% {
        transform: rotate(0) scale(1) skew(1deg);
    }
    10% {
        transform: rotate(-15deg) scale(1) skew(1deg);
    }
    20% {
        transform: rotate(15deg) scale(1) skew(1deg);
    }
    30% {
        transform: rotate(-15deg) scale(1) skew(1deg);
    }
    40% {
        transform: rotate(15deg) scale(1) skew(1deg);
    }
    50% {
        transform: rotate(0) scale(1) skew(1deg);
    }
    100% {
        transform: rotate(0) scale(1) skew(1deg);
    }
}

/* Alternative Enhanced Ripple Effect */
@keyframes enhanced-ripple {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
        opacity: 0.8;
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
        opacity: 0.2;
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        opacity: 0;
    }
}

/* Style Compatibility */
.wp-chat-buttons-style-rounded .wp-chat-button-ripple::before,
.wp-chat-buttons-style-rounded .wp-chat-button-ripple::after,
.wp-chat-buttons-style-rounded-with-text .wp-chat-button-ripple::before,
.wp-chat-buttons-style-rounded-with-text .wp-chat-button-ripple::after,
.wp-chat-buttons-style-circle-with-text .wp-chat-button-ripple::before,
.wp-chat-buttons-style-circle-with-text .wp-chat-button-ripple::after {
    border-radius: 100% !important;
}

/* Color-specific Ripple Effects */

/* Phone Button (Orange) */
.wp-chat-button-item[data-button-id="phone"].wp-chat-button-ripple::before,
.wp-chat-buttons-ripple .wp-chat-button-item[data-button-id="phone"]::before {
    border-color: rgba(248, 148, 20, 0.5) !important;
}

.wp-chat-button-item[data-button-id="phone"].wp-chat-button-ripple::after,
.wp-chat-buttons-ripple .wp-chat-button-item[data-button-id="phone"]::after {
    background-color: rgba(248, 148, 20, 0.3) !important;
}

/* Zalo Button (Blue) */
.wp-chat-button-item[data-button-id="zalo"].wp-chat-button-ripple::before,
.wp-chat-buttons-ripple .wp-chat-button-item[data-button-id="zalo"]::before {
    border-color: rgba(0, 104, 255, 0.5) !important;
}

.wp-chat-button-item[data-button-id="zalo"].wp-chat-button-ripple::after,
.wp-chat-buttons-ripple .wp-chat-button-item[data-button-id="zalo"]::after {
    background-color: rgba(0, 104, 255, 0.3) !important;
}

/* WhatsApp Button (Green) */
.wp-chat-button-item[data-button-id="whatsapp"].wp-chat-button-ripple::before,
.wp-chat-buttons-ripple .wp-chat-button-item[data-button-id="whatsapp"]::before {
    border-color: rgba(37, 211, 102, 0.5) !important;
}

.wp-chat-button-item[data-button-id="whatsapp"].wp-chat-button-ripple::after,
.wp-chat-buttons-ripple .wp-chat-button-item[data-button-id="whatsapp"]::after {
    background-color: rgba(37, 211, 102, 0.3) !important;
}

/* Messenger Button (Blue) */
.wp-chat-button-item[data-button-id="messenger"].wp-chat-button-ripple::before,
.wp-chat-buttons-ripple .wp-chat-button-item[data-button-id="messenger"]::before {
    border-color: rgba(0, 132, 255, 0.5) !important;
}

.wp-chat-button-item[data-button-id="messenger"].wp-chat-button-ripple::after,
.wp-chat-buttons-ripple .wp-chat-button-item[data-button-id="messenger"]::after {
    background-color: rgba(0, 132, 255, 0.3) !important;
}

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
    .wp-chat-button-ripple::before,
    .wp-chat-buttons-ripple .wp-chat-button-item::before {
        width: 100px !important;
        height: 100px !important;
        margin-top: -50px !important;
        margin-left: -50px !important;
    }
    
    .wp-chat-button-ripple::after,
    .wp-chat-buttons-ripple .wp-chat-button-item::after {
        width: 70px !important;
        height: 70px !important;
        margin-top: -35px !important;
        margin-left: -35px !important;
    }
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .wp-chat-button-ripple,
    .wp-chat-buttons-ripple .wp-chat-button-item,
    .wp-chat-button-ripple::before,
    .wp-chat-button-ripple::after,
    .wp-chat-buttons-ripple .wp-chat-button-item::before,
    .wp-chat-buttons-ripple .wp-chat-button-item::after {
        animation: none !important;
    }
}