/**
 * Waply Simple Fix - BUTTON VISIBILITY FIX
 * This CSS file ensures buttons are always visible on the website
 */

/* Make sure all button containers are visible */
.waply-floating-btns {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    z-index: 2147483647 !important; /* Maximum z-index */
}

/* Make sure all buttons are visible */
.waply-fab {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Make sure all button icons are visible */
.waply-btn-icon {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Make sure all avatar containers are visible */
.waply-avatar-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Make sure all avatars are visible */
.waply-avatar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Fix for standard button styles */
.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 {
    background-image: url('../img/whatsapp-button.png') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

/* Fix for custom button style */
.waply-btn-style-custom {
    border-radius: 30px !important;
    background-color: var(--waply-btn-bg-color, #25D366) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 60px !important;
    height: 60px !important;
}

/* Force custom button to be visible when body has the custom button type attribute */
body[data-active-button-type="custom"] .waply-fab.waply-btn-style-custom {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force standard button to be hidden when custom button is active */
body[data-active-button-type="custom"] .waply-fab:not(.waply-btn-style-custom) {
    display: none !important;
}

/* Force avatar to be hidden when custom button is active */
body[data-active-button-type="custom"] .waply-avatar-container {
    display: none !important;
}

/* Standard button type rules */
/* Force standard button to be visible when body has the standard button type attribute */
body[data-active-button-type="standard"] .waply-fab:not(.waply-btn-style-custom) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force custom button to be hidden when standard button is active */
body[data-active-button-type="standard"] .waply-fab.waply-btn-style-custom {
    display: none !important;
}

/* Force avatar to be hidden when standard button is active */
body[data-active-button-type="standard"] .waply-avatar-container {
    display: none !important;
}

/* Avatar button type rules */
/* Force avatar to be visible when body has the avatar button type attribute */
body[data-active-button-type="avatar"] .waply-avatar-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2147483647 !important; /* Maximum z-index */
}

/* Force standard button to be hidden when avatar is active */
body[data-active-button-type="avatar"] .waply-fab:not(.waply-btn-style-custom) {
    display: none !important;
}

/* Force custom button to be hidden when avatar is active */
body[data-active-button-type="avatar"] .waply-fab.waply-btn-style-custom {
    display: none !important;
}

/* Special rule to ensure avatar is always visible when it's the active button type */
html body[data-active-button-type="avatar"] .waply-avatar-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2147483647 !important; /* Maximum z-index */
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
}

/* Special rule to ensure avatar is properly styled */
html body[data-active-button-type="avatar"] .waply-avatar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background-color: #25d366 !important;
}