/* Dynamic Colors Override for Template 13 */

/* Header Dynamic Colors - Override any hardcoded styles */
.main-header[style*="background-color"] {
    background-color: inherit !important;
    background-image: none !important;
}

.main-header[style*="background-color"] .sticky-header {
    background-color: inherit !important;
    background-image: none !important;
}

/* Footer Dynamic Colors - Remove the black overlay when dynamic color is set */
.main-footer[style*="background-color"] {
    background-color: inherit !important;
    background-image: none !important;
}

.main-footer[style*="background-color"]:before {
    display: none !important;
}

/* Banner Dynamic Colors */
.banner-section[style*="background-color"] {
    background-color: inherit !important;
    background-image: none !important;
}

.banner-section[style*="background-color"] .image-layer {
    background-color: inherit !important;
    background-image: none !important;
}

/* Homepage sections with dynamic colors */
.news-section[style*="background-color"],
.promotion-section[style*="background-color"],
.shop-section[style*="background-color"] {
    background-color: inherit !important;
    background-image: none !important;
}

/* Ensure dynamic colors have higher specificity than any hardcoded styles */
.main-header[style*="background-color"],
.main-header[style*="background-color"] .sticky-header,
.main-footer[style*="background-color"],
.banner-section[style*="background-color"],
.banner-section[style*="background-color"] .image-layer,
.news-section[style*="background-color"],
.promotion-section[style*="background-color"],
.shop-section[style*="background-color"] {
    background-image: none !important;
}

/* Remove the black overlay from footer when dynamic color is set */
.main-footer[style*="background-color"]:before {
    opacity: 0 !important;
    background: transparent !important;
    display: none !important;
}

/* Ensure text colors are visible on dynamic backgrounds */
.main-header[style*="background-color"] .navigation > li > a,
.main-header[style*="background-color"] .sticky-header .navigation > li > a {
    color: #fff !important;
}

.main-footer[style*="background-color"] .widget-title h3,
.main-footer[style*="background-color"] .widget-content,
.main-footer[style*="background-color"] .info-list li,
.main-footer[style*="background-color"] .info-list li a {
    color: #fff !important;
}

/* Override any CSS that might be setting background images */
.main-footer[style*="background-color"] {
    background-image: none !important;
}

.banner-section[style*="background-color"] {
    background-image: none !important;
}

/* Ensure the dynamic colors take precedence over any CSS rules */
.main-header[style*="background-color"] {
    background: inherit !important;
}

.main-footer[style*="background-color"] {
    background: inherit !important;
}

.banner-section[style*="background-color"] {
    background: inherit !important;
}

/* Button Dynamic Colors */
.banner-btn[style*="background-color"] {
    background-color: inherit !important;
    background-image: none !important;
}

/* Ensure button colors work properly */
.banner-btn[style*="background-color"] {
    background: inherit !important;
}