/**
 * Waply Button Fix CSS
 * This stylesheet fixes issues with overlapping WhatsApp buttons
 */

/* Fix for overlapping WhatsApp icons */
.waply-fab .waply-btn-icon {
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Ensure only one icon is visible */
.waply-fab:before,
.waply-fab:after {
    display: none !important;
    content: none !important;
}

/* Fix for button container */
.waply-fab {
    display: block !important;
    position: fixed !important;
    width: 173px !important;
    height: 60px !important;
    overflow: hidden !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    z-index: 999999 !important;
}

/* Fix for button positioning */
.waply-floating-btns {
    position: fixed !important;
    z-index: 999999 !important;
}

/* Fix for avatar buttons */
.waply-avatar {
    display: block !important;
    position: relative !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    margin: 0 auto !important;
}

/* Fix for avatar container */
.waply-avatar-container {
    display: block !important;
    position: relative !important;
    width: 60px !important;
    height: 60px !important;
    margin: 0 auto !important;
}

/* Fix for button styles */
.waply-btn-style-default,
.waply-btn-style-rounded,
.waply-btn-style-square,
.waply-btn-style-circle,
.waply-btn-style-outline,
.waply-btn-style-style6,
.waply-btn-style-style7,
.waply-btn-style-style8,
.waply-btn-style-style9,
.waply-btn-style-style10,
.waply-btn-style-style11,
.waply-btn-style-style12,
.waply-btn-style-style13,
.waply-btn-style-style14,
.waply-btn-style-style15 {
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    width: 173px !important;
    height: 60px !important;
    display: block !important;
    position: relative !important;
}

/* Fix for button icon positioning */
.waply-btn-style-default .waply-btn-icon,
.waply-btn-style-rounded .waply-btn-icon,
.waply-btn-style-square .waply-btn-icon,
.waply-btn-style-circle .waply-btn-icon,
.waply-btn-style-outline .waply-btn-icon,
.waply-btn-style-style6 .waply-btn-icon,
.waply-btn-style-style7 .waply-btn-icon,
.waply-btn-style-style8 .waply-btn-icon,
.waply-btn-style-style9 .waply-btn-icon,
.waply-btn-style-style10 .waply-btn-icon,
.waply-btn-style-style11 .waply-btn-icon,
.waply-btn-style-style12 .waply-btn-icon,
.waply-btn-style-style13 .waply-btn-icon,
.waply-btn-style-style14 .waply-btn-icon,
.waply-btn-style-style15 .waply-btn-icon {
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: auto !important;
}

/* Fix for multiple buttons */
.waply-fab + .waply-fab {
    display: none !important;
}

/* Fix for duplicate elements */
.waply-btn-icon + .waply-btn-icon {
    display: none !important;
}

/* Fix for button text */
.waply-btn-text {
    position: relative !important;
    z-index: 2 !important;
}

/* Fix for custom button styles */
.waply-btn-style-custom {
    background-color: #25D366 !important;
    color: #ffffff !important;
    border-radius: 25px !important;
    padding: 10px 20px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-align: center !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Fix for WhatsApp icon in custom button */
.waply-btn-style-custom:before {
    content: "" !important;
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    background-image: url('../img/whatsapp-icon.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    margin-right: 8px !important;
}