/* WDP WhatsApp Widget Styles */

.elementor-button-wrapper .wdp-whatsapp-btn {
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Button Styles */
.elementor-button-wrapper .wdp-whatsapp-btn--solid {
    /* Style solid diatur lewat Elementor Controls (Text Color / Background Color) */
}

.elementor-button-wrapper .wdp-whatsapp-btn--outline {
    background-color: transparent !important;
    border: 2px solid var(--e-button-bg-color, currentColor);
    color: var(--e-button-bg-color, inherit);
}
.elementor-button-wrapper .wdp-whatsapp-btn--outline:hover {
    background-color: var(--e-button-bg-color, currentColor) !important;
    color: var(--e-button-text-color, #ffffff) !important;
}

.elementor-button-wrapper .wdp-whatsapp-btn--ghost {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--e-button-bg-color, inherit);
}
.elementor-button-wrapper .wdp-whatsapp-btn--ghost:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Hover Animations */
@keyframes wdpWaShake {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

@keyframes wdpWaScale {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.elementor-button-wrapper .wdp-whatsapp-btn--hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.elementor-button-wrapper .wdp-whatsapp-btn--hover-shake:hover {
    animation: wdpWaShake 0.5s ease-in-out infinite;
}

.elementor-button-wrapper .wdp-whatsapp-btn--hover-scale:hover {
    animation: wdpWaScale 0.3s ease-in-out forwards;
}

/* Missing phone warning */
.wdp-wa-warning {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 12px 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #856404;
}
