.wfb-floating-button {
    position: fixed !important;
    z-index: var(--wfb-z-index, 999999) !important;
    transition: all 0.3s ease;
}

.wfb-position-bottom-right {
    bottom: var(--wfb-margin-bottom, 20px);
    right: var(--wfb-margin-side, 20px);
}

.wfb-position-bottom-left {
    bottom: var(--wfb-margin-bottom, 20px);
    left: var(--wfb-margin-side, 20px);
}

.wfb-position-top-right {
    top: var(--wfb-margin-bottom, 20px);
    right: var(--wfb-margin-side, 20px);
}

.wfb-position-top-left {
    top: var(--wfb-margin-bottom, 20px);
    left: var(--wfb-margin-side, 20px);
}

.wfb-position-center-right {
    top: 50%;
    right: var(--wfb-margin-side, 20px);
    transform: translateY(-50%);
}

.wfb-position-center-left {
    top: 50%;
    left: var(--wfb-margin-side, 20px);
    transform: translateY(-50%);
}

.wfb-button-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--wfb-size, 60px);
    height: var(--wfb-size, 60px);
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
    text-decoration: none;
    color: #fff;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.wfb-button-link:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}

.wfb-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55%;
    height: 55%;
}

.wfb-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

@keyframes wfb-pulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.wfb-animation-pulse .wfb-button-link {
    animation: wfb-pulse 2s infinite;
}

@keyframes wfb-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

.wfb-animation-bounce .wfb-button-link {
    animation: wfb-bounce 2s infinite;
}

@keyframes wfb-shake {
    0%, 100% { transform: rotate(0deg); }
    10%, 30%, 50%, 70%, 90% { transform: rotate(-5deg); }
    20%, 40%, 60%, 80% { transform: rotate(5deg); }
}

.wfb-animation-shake .wfb-button-link {
    animation: wfb-shake 2s infinite;
}

@keyframes wfb-fade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.wfb-animation-fade .wfb-button-link {
    animation: wfb-fade 3s infinite;
}

@media (max-width: 768px) {
    .wfb-floating-button {
        --wfb-size: var(--wfb-mobile-size, 50px) !important;
        --wfb-margin-bottom: max(var(--wfb-margin-bottom-mobile, 16px), env(safe-area-inset-bottom, 0px)) !important;
        --wfb-margin-side: var(--wfb-margin-side-mobile, 16px) !important;
    }

    .wfb-button-link {
        width: var(--wfb-size, 50px);
        height: var(--wfb-size, 50px);
    }
}