/**
 * Simple Ripple Classic Animation Effect
 */

.whp-contact-icon {
    position: relative;
}

.whp-contact-icon:before, 
.whp-contact-icon:after {
    content: "";
    position: absolute;
    height: 80px;
    width: 80px;
    background: #dd3333;
    opacity: 0.5;
    z-index: -1;
    left: -15px;
    top: -14px;
    border-radius: 100%;
    transform: scale(0);
    animation: mbwph-pulse 2s infinite;
}

.whp-contact-icon:after {
    opacity: 0.3;
    z-index: -2;
    animation-delay: 0.5s;
}

@keyframes mbwph-pulse {
    0% {
        transform: scale(0);
        opacity: 0.5;
    }
    50% {
        transform: scale(1);
        opacity: 0.3;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.whp-contact-icon[data-button-id="zalo"]:before,
.whp-contact-icon[data-button-id="zalo"]:after {
    background: #0068ff;
}

.whp-contact-icon[data-button-id="whatsapp"]:before,
.whp-contact-icon[data-button-id="whatsapp"]:after {
    background: #25d366;
}

/* Messenger Button (Blue) */
.whp-contact-icon[data-button-id="messenger"]:before,
.whp-contact-icon[data-button-id="messenger"]:after,
.wp-chat-ripple-classic-button[data-button-id="messenger"]:before,
.wp-chat-ripple-classic-button[data-button-id="messenger"]:after {
    background: #0084ff;
}

/* Compatibility with existing WordPress structure */
.wp-chat-button-ripple-classic::before,
.wp-chat-button-ripple-classic::after,
.wp-chat-buttons-ripple-classic .wp-chat-button-item::before,
.wp-chat-buttons-ripple-classic .wp-chat-button-item::after {
    content: "";
    position: absolute;
    height: 80px;
    width: 80px;
    background: #dd3333;
    opacity: 0.7;
    z-index: -1;
    left: -15px;
    top: -14px;
    border-radius: 100%;
    transform: scale(0);
    animation: mbwph-pulse 2s infinite;
    pointer-events: none;
}

.wp-chat-button-ripple-classic::after,
.wp-chat-buttons-ripple-classic .wp-chat-button-item::after {
    opacity: 0.5;
    z-index: -2;
    animation-delay: 0.7s;
}

/* Compatibility Colors */
.wp-chat-button-item[data-button-id="phone"].wp-chat-button-ripple-classic::before,
.wp-chat-button-item[data-button-id="phone"].wp-chat-button-ripple-classic::after,
.wp-chat-buttons-ripple-classic .wp-chat-button-item[data-button-id="phone"]::before,
.wp-chat-buttons-ripple-classic .wp-chat-button-item[data-button-id="phone"]::after {
    background: #f89414;
}

.wp-chat-button-item[data-button-id="zalo"].wp-chat-button-ripple-classic::before,
.wp-chat-button-item[data-button-id="zalo"].wp-chat-button-ripple-classic::after,
.wp-chat-buttons-ripple-classic .wp-chat-button-item[data-button-id="zalo"]::before,
.wp-chat-buttons-ripple-classic .wp-chat-button-item[data-button-id="zalo"]::after {
    background: #0068ff;
}

.wp-chat-button-item[data-button-id="whatsapp"].wp-chat-button-ripple-classic::before,
.wp-chat-button-item[data-button-id="whatsapp"].wp-chat-button-ripple-classic::after,
.wp-chat-buttons-ripple-classic .wp-chat-button-item[data-button-id="whatsapp"]::before,
.wp-chat-buttons-ripple-classic .wp-chat-button-item[data-button-id="whatsapp"]::after {
    background: #25d366;
}