/**
 * Centralized Button Loading Spinner Styles
 * 
 * Usage: Add class "btn-loading" to any button/link element
 * Include .btn-arrow and .btn-spinner SVGs inside the button
 */

/* Base spinner styles - works with any button */
.btn-loading .btn-arrow {
    transition: transform 0.3s ease;
}

.btn-loading .btn-spinner {
    display: none;
    animation: btn-spin 0.8s linear infinite;
}

.btn-loading.loading .btn-arrow {
    display: none;
}

.btn-loading.loading .btn-spinner {
    display: block;
}

.btn-loading:hover .btn-arrow {
    transform: translateX(4px);
}

@keyframes btn-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================
   WhatsApp Floating Button Enhancement
   ============================================ */
.wa-widget-send-button {
    position: relative !important;
}

.wa-widget-send-button::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.3);
    animation: whatsapp-pulse 2s ease-in-out infinite;
    z-index: -1;
}

.wa-widget-send-button::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.15);
    animation: whatsapp-pulse 2s ease-in-out infinite 0.5s;
    z-index: -2;
}

.wa-widget-send-button a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: transparent;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.wa-widget-send-button a:hover {
    transform: scale(1.1);
}

.wa-widget-send-button .wa-messenger-svg-whatsapp {
    width: 56px;
    height: 56px;
}

@keyframes whatsapp-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.2);
        opacity: 0;
    }
}

/* Floating button group enhancements */
.floating-btn-grp {
    gap: 16px !important;
}

.floating-btn-grp .btn-scroll-top {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: #0b3d2e !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(11, 61, 46, 0.3) !important;
    transition: all 0.3s ease !important;
}

.floating-btn-grp .btn-scroll-top:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(11, 61, 46, 0.4) !important;
}