/* 
 * Waply Animation Override
 * This CSS file fixes the issue with animated button colors not matching between live site and admin page
 */

/* Force animated buttons to use the same color variable as custom buttons */
.waply-animated-button,
.waply-animated-fab,
.waply-btn-style-custom.waply-animated,
[class*="waply-btn-style-custom"].waply-animated,
[data-style="custom"].waply-animated,
.waply-button[data-type="avatar"],
.waply-fab[data-type="avatar"] {
    background-color: var(--waply-btn-bg-color, #25D366) !important;
    transition: none !important;
}

/* Force color on animated button elements */
.waply-animated-button *,
.waply-animated-fab *,
.waply-btn-style-custom.waply-animated *,
[class*="waply-btn-style-custom"].waply-animated *,
[data-style="custom"].waply-animated *,
.waply-button[data-type="avatar"] *,
.waply-fab[data-type="avatar"] * {
    background-color: var(--waply-btn-bg-color, #25D366) !important;
    transition: none !important;
}

/* Ensure pseudo-elements inherit color */
.waply-animated-button::before,
.waply-animated-button::after,
.waply-animated-fab::before,
.waply-animated-fab::after,
.waply-btn-style-custom.waply-animated::before,
.waply-btn-style-custom.waply-animated::after,
[class*="waply-btn-style-custom"].waply-animated::before,
[class*="waply-btn-style-custom"].waply-animated::after,
[data-style="custom"].waply-animated::before,
[data-style="custom"].waply-animated::after,
.waply-button[data-type="avatar"]::before,
.waply-button[data-type="avatar"]::after,
.waply-fab[data-type="avatar"]::before,
.waply-fab[data-type="avatar"]::after {
    background-color: var(--waply-btn-bg-color, #25D366) !important;
    transition: none !important;
}

/* Override animation keyframes to use the correct color */
@keyframes waplyButtonPulse {
    0% {
        box-shadow: 0 0 0 0 var(--waply-btn-bg-color, #25D366);
        background-color: var(--waply-btn-bg-color, #25D366) !important;
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
        background-color: var(--waply-btn-bg-color, #25D366) !important;
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        background-color: var(--waply-btn-bg-color, #25D366) !important;
    }
}