/* WhatsApp Inquiry Button Base Styles */
.dc-wa-inquiry-by-xd-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 24px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    margin: 10px 0 !important;
    background-color: #25D366 !important;
    color: white !important;
}

.dc-wa-inquiry-by-xd-button.has-icon {
    padding-left: 50px !important;
}

/* WhatsApp Icon */
.dc-wa-inquiry-by-xd-button:before {
    content: "";
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-6.29-3.91a.524.524 0 01.262-.388.53.53 0 01.458-.043c.18.075.343.22.457.43.114.21.14.47.068.693-.075.297-.268.5-.462.5h-.008c-.066 0-.132-.02-.19-.06a.586.586 0 01-.256-.388.636.636 0 01.131-.544m3.017 3.016c.09-.091.197-.16.322-.198a.8.8 0 01.396.04c.124.06.23.16.308.28.08.12.126.26.132.403a.844.844 0 01-.12.462.863.863 0 01-.327.32.793.793 0 01-.875-.04.876.876 0 01-.29-.41.93.93 0 01.008-.496.896.896 0 01.246-.37"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    display: none;
}

.dc-wa-inquiry-by-xd-button.has-icon:before {
    display: block;
}

/* Hover States */
.dc-wa-inquiry-by-xd-button:hover {
    background-color: #128C7E !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15) !important;
}

.dc-wa-inquiry-by-xd-button:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Size Variations */
.dc-wa-inquiry-by-xd-button.size-small {
    padding: 8px 16px !important;
    font-size: 14px !important;
}

.dc-wa-inquiry-by-xd-button.size-small.has-icon {
    padding-left: 40px !important;
}

.dc-wa-inquiry-by-xd-button.size-small:before {
    width: 30px !important;
    height: 30px !important;
    background-size: 18px !important;
}

.dc-wa-inquiry-by-xd-button.size-large {
    padding: 16px 32px !important;
    font-size: 18px !important;
}

.dc-wa-inquiry-by-xd-button.size-large.has-icon {
    padding-left: 60px !important;
}

.dc-wa-inquiry-by-xd-button.size-large:before {
    width: 50px !important;
    height: 50px !important;
    background-size: 30px !important;
}

/* Color Variations */
.dc-wa-inquiry-by-xd-button.color-green {
    background-color: #25D366 !important;
}

.dc-wa-inquiry-by-xd-button.color-blue {
    background-color: #128C7E !important;
}

.dc-wa-inquiry-by-xd-button.color-purple {
    background-color: #6A45D1 !important;
}

.dc-wa-inquiry-by-xd-button.color-gradient {
    background: linear-gradient(45deg, #25D366, #128C7E) !important;
}

/* Animation Effects */
.dc-wa-inquiry-by-xd-button.animate-pulse {
    animation: pulse 2s infinite !important;
}

.dc-wa-inquiry-by-xd-button.animate-bounce {
    animation: bounce 2s infinite !important;
}

.dc-wa-inquiry-by-xd-button.animate-shake {
    animation: shake 2s infinite !important;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

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

@keyframes shake {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(-5deg); }
    20% { transform: rotate(5deg); }
    30% { transform: rotate(-5deg); }
    40% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}