/* assets/css/mwmb-frontend-styles.css */

.mwmessbtn-pulse-button,
.mwmessbtn-pulse-button-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    outline: none;
    z-index: 1000;
    position: fixed;
    border-radius: 50%;
}

.mwmessbtn-pulse-button {
    flex-wrap: wrap;
    box-shadow: 0 5px 35px rgba(0, 0, 0, 0.2);
}

.mwmessbtn-pulse-button__icon {
    display: block;
    background-image: url("../images/phone2.svg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.mwmessbtn-whatsapp-icon {
    width: 100%;
    height: 100%;
}

.mwmessbtn-pulse-button__text {
    display: block;
    width: 100%;
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    text-align: center;
    line-height: 1.2;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    font-weight: bold;
}

.mwmessbtn-pulse-button:hover .mwmessbtn-pulse-button__icon {
    opacity: 0;
    visibility: hidden;
    position: absolute;
}

.mwmessbtn-pulse-button:hover .mwmessbtn-pulse-button__text {
    opacity: 1;
    visibility: visible;
    position: relative;
}

/* ---------------------------------------------------------------------------
 * Pulsing rings
 * ------------------------------------------------------------------------ */
.mwmessbtn-pulse-button__rings,
.mwmessbtn-pulse-button-v2__rings {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    animation: mw_pulse var(--mwmessbtn-pulse-duration, 2s) infinite;
    z-index: -1;
    border-width: 1px;
    border-style: solid;
}

.mwmessbtn-pulse-button__rings--1,
.mwmessbtn-pulse-button-v2__rings--1 { animation-delay: 0s; }
.mwmessbtn-pulse-button__rings--2,
.mwmessbtn-pulse-button-v2__rings--2 { animation-delay: 0.3s; }
.mwmessbtn-pulse-button__rings--3,
.mwmessbtn-pulse-button-v2__rings--3 { animation-delay: 0.6s; }

.mwmessbtn-pulse-button:hover,
.mwmessbtn-pulse-button:focus {
    background-color: var(--mwmessbtn-color);
    color: #fff;
    text-decoration: none;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.mwmessbtn-pulse-button-v2:hover,
.mwmessbtn-pulse-button-v2:focus {
    background-color: transparent;
    text-decoration: none;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.mwmessbtn-pulse-button:hover .mwmessbtn-pulse-button__text,
.mwmessbtn-pulse-button:focus .mwmessbtn-pulse-button__text {
    color: #fff;
}

@keyframes mw_pulse {
    0% { transform: scale(0.9); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* ---------------------------------------------------------------------------
 * Entrance animations (added in 1.7.0)
 * The animation plays only once the .mwmessbtn-animate-in class is added by
 * the frontend script (on page load, or on scroll reveal).
 * ------------------------------------------------------------------------ */
.mwmessbtn-entrance-fade.mwmessbtn-animate-in     { animation: mwmb-in-fade 0.5s ease both; }
.mwmessbtn-entrance-slide-up.mwmessbtn-animate-in { animation: mwmb-in-slide-up 0.5s ease both; }
.mwmessbtn-entrance-zoom.mwmessbtn-animate-in     { animation: mwmb-in-zoom 0.45s ease both; }

@keyframes mwmb-in-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes mwmb-in-slide-up {
    from { transform: translateY(100px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@keyframes mwmb-in-zoom {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ---------------------------------------------------------------------------
 * Hover animations (added in 1.7.0)
 * "grow" is a pure CSS hover state; the others are one-shot keyframes that
 * the frontend script replays on each hover via .mwmessbtn-fx-run.
 * ------------------------------------------------------------------------ */
.mwmessbtn-fx-grow {
    transition: transform 0.25s ease;
}
.mwmessbtn-fx-grow:hover {
    transform: scale(1.12);
}

.mwmessbtn-fx-bounce.mwmessbtn-fx-run { animation: mwmb-fx-bounce 0.7s ease; }
.mwmessbtn-fx-pulse.mwmessbtn-fx-run  { animation: mwmb-fx-pulse 0.6s ease; }
.mwmessbtn-fx-rotate.mwmessbtn-fx-run { animation: mwmb-fx-rotate 0.6s ease; }
.mwmessbtn-fx-shake.mwmessbtn-fx-run  { animation: mwmb-fx-shake 0.6s ease; }
.mwmessbtn-fx-wobble.mwmessbtn-fx-run { animation: mwmb-fx-wobble 0.8s ease; }
.mwmessbtn-fx-tada.mwmessbtn-fx-run   { animation: mwmb-fx-tada 0.8s ease; }

@keyframes mwmb-fx-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-18px); }
    60% { transform: translateY(-9px); }
}
@keyframes mwmb-fx-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
@keyframes mwmb-fx-rotate {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}
@keyframes mwmb-fx-shake {
    0%, 100%  { transform: translateX(0); }
    20%, 60%  { transform: translateX(-8px); }
    40%, 80%  { transform: translateX(8px); }
}
@keyframes mwmb-fx-wobble {
    0%   { transform: translateX(0); }
    15%  { transform: translateX(-12px) rotate(-5deg); }
    30%  { transform: translateX(10px) rotate(4deg); }
    45%  { transform: translateX(-8px) rotate(-3deg); }
    60%  { transform: translateX(6px) rotate(2deg); }
    75%  { transform: translateX(-4px) rotate(-1deg); }
    100% { transform: translateX(0); }
}
@keyframes mwmb-fx-tada {
    0%                  { transform: scale(1) rotate(0); }
    10%, 20%            { transform: scale(0.9) rotate(-3deg); }
    30%, 50%, 70%, 90%  { transform: scale(1.1) rotate(3deg); }
    40%, 60%, 80%       { transform: scale(1.1) rotate(-3deg); }
    100%                { transform: scale(1) rotate(0); }
}

/* ---------------------------------------------------------------------------
 * Show-after-scroll (added in 1.7.0)
 * ------------------------------------------------------------------------ */
.mwmessbtn-scroll-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}

/* ---------------------------------------------------------------------------
 * Reduced motion (added in 1.7.0)
 * Applied via JS only when the visitor's system asks for reduced motion AND
 * the "Respect Reduced Motion" option is enabled.
 * ------------------------------------------------------------------------ */
.mwmessbtn-reduced-motion,
.mwmessbtn-reduced-motion .mwmessbtn-pulse-button__rings,
.mwmessbtn-reduced-motion .mwmessbtn-pulse-button-v2__rings {
    animation: none !important;
    transition: none !important;
}
.mwmessbtn-reduced-motion.mwmessbtn-fx-grow:hover {
    transform: none !important;
}