/* Enhanced Custom Button Color Fixes */

:root {

    --waply-btn-bg-color: #25D366;

    --waply-button-color: #25D366;

    --waply-custom-color: #25D366;

    color-scheme: dark light;

}



/* Force color application for all possible custom buttons with high specificity */

.waply-btn-style-custom,

.waply-fab.waply-btn-style-custom,

.waply-animated-button,

.waply-animated-button *,

.waply-animated-fab,

.waply-animated-fab *,

#waply-custom-preview-button,

#waply-custom-pos-preview-btn,

[class*="waply-btn-style-custom"],

[data-style="custom"],

.waply-button[data-type="custom"],

.waply-fab[data-type="custom"] {

    background-color: var(--waply-btn-bg-color, #25D366) !important;

    color: #FFFFFF !important;

}



/* Extended selectors with pseudo-class coverage */

.waply-btn-style-custom::before,

.waply-fab.waply-btn-style-custom::before,

#waply-custom-preview-button::before,

#waply-custom-pos-preview-btn::before,

[class*="waply-btn-style-custom"]::before,

[data-style="custom"]::before,

.waply-button[data-type="custom"]::before,

.waply-fab[data-type="custom"]::before {

    background-color: var(--waply-btn-bg-color, #25D366) !important;

}



/* Force color inheritance on nested elements */

[class*="waply-btn-style-custom"] *,

[data-style="custom"] *,

.waply-button[data-type="custom"] *,

.waply-fab[data-type="custom"] * {

    background-color: inherit !important;

}



/* Ensure preview buttons are always visible */

#waply-custom-preview-button {

    display: inline-flex !important;

    visibility: visible !important;

    opacity: 1 !important;

    border-radius: 50% !important;

    width: 60px !important;

    height: 60px !important;

    min-width: 60px !important;

    min-height: 60px !important;

    align-items: center !important;

    justify-content: center !important;

    position: relative !important;

    margin: 10px auto !important;

}



#waply-custom-pos-preview-btn {

    display: flex !important;

    visibility: visible !important;

    opacity: 1 !important;

    border-radius: 50% !important;

    width: 60px !important;

    height: 60px !important;

    min-width: 60px !important;

    min-height: 60px !important;

    align-items: center !important;

    justify-content: center !important;

    position: absolute !important;

    z-index: 999 !important;

}



/* Enhanced hover state persistence */

.waply-btn-style-custom:hover,

.waply-fab.waply-btn-style-custom:hover,

#waply-custom-preview-button:hover,

#waply-custom-pos-preview-btn:hover,

[class*="waply-btn-style-custom"]:hover,

[data-style="custom"]:hover,

.waply-button[data-type="custom"]:hover,

.waply-fab[data-type="custom"]:hover {

    background-color: var(--waply-btn-bg-color, #25D366) !important;

    opacity: 0.9 !important;

    filter: brightness(95%);

}



/* Additional color persistence rules */

[class*="waply-btn-style-custom"],

[data-style="custom"],

.waply-button[data-type="custom"],

.waply-fab[data-type="custom"] {

    background-color: var(--waply-btn-bg-color, #25D366) !important;

}



/* Force color inheritance on nested elements */

[class*="waply-btn-style-custom"] *,

[data-style="custom"] *,

.waply-button[data-type="custom"] *,

.waply-fab[data-type="custom"] * {

    background-color: inherit !important;

}



/* Enforce color through inline styles */

.waply-btn-style-custom[style*="background-color"],

.waply-fab.waply-btn-style-custom[style*="background-color"],

#waply-custom-preview-button[style*="background-color"],

#waply-custom-pos-preview-btn[style*="background-color"] {

    background-color: var(--waply-btn-bg-color, #25D366) !important;

}