/* Animated WhatsApp Chat Button — Frontend */
.awcb-button {
    --awcb-horizontal-space: 30px;
    --awcb-vertical-space: 90px;
    --awcb-background: #16b846;
    --awcb-text: #ffffff;
    --awcb-font-size: 15px;
    --awcb-radius: 999px;
    --awcb-duration: 800ms;

    position: fixed;
    z-index: 999999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 12px 20px;
    border: 0;
    border-radius: var(--awcb-radius);
    background: var(--awcb-background);
    color: var(--awcb-text);
    box-shadow: 0 12px 30px rgba(9, 91, 40, .24), 0 3px 8px rgba(0, 0, 0, .12);
    text-decoration: none !important;
    font-family: inherit;
    font-size: var(--awcb-font-size);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transform-origin: center;
    will-change: transform;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    -webkit-tap-highlight-color: transparent;
}

.awcb-button:hover,
.awcb-button:focus {
    color: var(--awcb-text);
    text-decoration: none !important;
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(9, 91, 40, .28), 0 4px 10px rgba(0, 0, 0, .14);
    filter: brightness(1.03);
    outline: none;
}

.awcb-button:focus-visible {
    outline: 3px solid rgba(22, 184, 70, .28);
    outline-offset: 4px;
}

.awcb-position-left { left: var(--awcb-horizontal-space); }
.awcb-position-right { right: var(--awcb-horizontal-space); }
.awcb-vertical-top { top: var(--awcb-vertical-space); }
.awcb-vertical-bottom { bottom: var(--awcb-vertical-space); }

.awcb-icon-wrap {
    display: inline-flex;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    color: currentColor;
}

.awcb-icon-wrap svg {
    display: block;
    width: 100%;
    height: 100%;
}

.awcb-button-label {
    display: inline-block;
}

.awcb-animating {
    animation-duration: var(--awcb-duration) !important;
    animation-fill-mode: both !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: 1 !important;
    will-change: transform;
}

.awcb-animation-pulse.awcb-animating,
.awcb-animation-pulse .awcb-animating {
    animation-name: awcb-pulse;
}

.awcb-animation-bounce.awcb-animating,
.awcb-animation-bounce .awcb-animating {
    animation-name: awcb-bounce;
}

.awcb-animation-shake.awcb-animating,
.awcb-animation-shake .awcb-animating {
    animation-name: awcb-shake;
}

.awcb-animation-swing.awcb-animating,
.awcb-animation-swing .awcb-animating {
    animation-name: awcb-swing;
    transform-origin: top center;
}

.awcb-animation-tada.awcb-animating,
.awcb-animation-tada .awcb-animating {
    animation-name: awcb-tada;
}

.awcb-animation-heartbeat.awcb-animating,
.awcb-animation-heartbeat .awcb-animating {
    animation-name: awcb-heartbeat;
}

.awcb-animation-float.awcb-animating,
.awcb-animation-float .awcb-animating {
    animation-name: awcb-float;
}

@keyframes awcb-pulse {
    0% { transform: scale(1); }
    35% { transform: scale(1.12); }
    70% { transform: scale(.98); }
    100% { transform: scale(1); }
}

@keyframes awcb-bounce {
    0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
    40%, 43% { transform: translateY(-16px); }
    70% { transform: translateY(-8px); }
    90% { transform: translateY(-3px); }
}

@keyframes awcb-shake {
    0%, 100% { transform: translateX(0); }
    15%, 45%, 75% { transform: translateX(-7px); }
    30%, 60%, 90% { transform: translateX(7px); }
}

@keyframes awcb-swing {
    20% { transform: rotate(12deg); }
    40% { transform: rotate(-9deg); }
    60% { transform: rotate(6deg); }
    80% { transform: rotate(-3deg); }
    100% { transform: rotate(0); }
}

@keyframes awcb-tada {
    0% { transform: scale(1); }
    10%, 20% { transform: scale(.92) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale(1.08) rotate(3deg); }
    40%, 60%, 80% { transform: scale(1.08) rotate(-3deg); }
    100% { transform: scale(1) rotate(0); }
}

@keyframes awcb-heartbeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.16); }
    28% { transform: scale(1); }
    42% { transform: scale(1.16); }
    70% { transform: scale(1); }
}

@keyframes awcb-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@media (min-width: 783px) {
    .awcb-button.awcb-hide-desktop {
        display: none !important;
    }
}

@media (max-width: 782px) {
    .awcb-button {
        max-width: calc(100vw - 24px);
        min-height: 50px;
        padding: 11px 16px;
        gap: 8px;
    }

    .awcb-button.awcb-hide-mobile {
        display: none !important;
    }

    .awcb-icon-wrap {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }
}