/* CRITICAL: Dynamic Colors Override - Ultra-High Priority CSS */

/* CRITICAL: Prevent flashing by ensuring smooth transitions */
* {
    transition: background-color 0.2s ease, background 0.2s ease !important;
}

/* CRITICAL: Force Section Background Colors with ultra-high specificity */
html body.colors-applied .popular-stores-section,
html body.colors-applied section.popular-stores-section,
html body.colors-applied section[class*="popular-stores"],
html body .popular-stores-section,
html body section.popular-stores-section,
html body section[class*="popular-stores"] {
    background-color: var(--dynamic-popular-stores-bg, #F9FAFB) !important;
}

html body.colors-applied .featured-coupons-section,
html body.colors-applied section.featured-coupons-section,
html body.colors-applied section[class*="featured-coupons"],
html body .featured-coupons-section,
html body section.featured-coupons-section,
html body section[class*="featured-coupons"] {
    background-color: var(--dynamic-featured-coupons-bg, #FFFFFF) !important;
}

html body.colors-applied .latest-coupons-section,
html body.colors-applied section.latest-coupons-section,
html body.colors-applied section[class*="latest-coupons"],
html body .latest-coupons-section,
html body section.latest-coupons-section,
html body section[class*="latest-coupons"] {
    background-color: var(--dynamic-latest-coupons-bg, #F3F4F6) !important;
}

html body.colors-applied .featured-stores-section,
html body.colors-applied section.featured-stores-section,
html body.colors-applied section[class*="featured-stores"],
html body .featured-stores-section,
html body section.featured-stores-section,
html body section[class*="featured-stores"] {
    background-color: var(--dynamic-featured-stores-bg, #EFF6FF) !important;
}

html body.colors-applied .blog-section,
html body.colors-applied section.blog-section,
html body.colors-applied section[class*="blog"],
html body .blog-section,
html body section.blog-section,
html body section[class*="blog"] {
    background-color: var(--dynamic-blog-section-bg, #FEFEFE) !important;
}

/* CRITICAL: Force Header Colors with ultra-high specificity */
html body.colors-applied header,
html body.colors-applied .header-gradient,
html body.colors-applied .dynamic-header-bg,
html body header,
.header-gradient,
.dynamic-header-bg {
    background: linear-gradient(135deg, var(--dynamic-header-primary, #1E40AF) 0%, var(--dynamic-header-secondary, #F97316) 50%, var(--dynamic-header-tertiary, #10B981) 100%) !important;
}

/* CRITICAL: Force Bottom Navigation Colors with ultra-high specificity */
html body.colors-applied .bottom-nav-dynamic,
html body.colors-applied .bottom-nav,
html body.colors-applied .mobile-bottom-nav,
html body .bottom-nav-dynamic,
.bottom-nav,
.mobile-bottom-nav {
    background: linear-gradient(135deg, var(--dynamic-bottom-nav-primary, #f97316) 0%, var(--dynamic-bottom-nav-secondary, #dc2626) 100%) !important;
}

html body.colors-applied .bottom-nav-center-btn,
html body.colors-applied .home-btn,
html body .bottom-nav-center-btn,
.home-btn {
    background: linear-gradient(135deg, var(--dynamic-bottom-nav-center, #f59e0b) 0%, var(--dynamic-bottom-nav-secondary, #dc2626) 100%) !important;
}

/* CRITICAL: Force Button Colors with ultra-high specificity */
html body.colors-applied .btn-primary,
html body.colors-applied .btn.btn-primary,
html body .btn-primary,
.btn.btn-primary {
    background-color: var(--dynamic-button-primary, #dc2626) !important;
    border-color: var(--dynamic-button-primary, #dc2626) !important;
}

html body.colors-applied .btn-secondary,
html body.colors-applied .btn.btn-secondary,
html body .btn-secondary,
.btn.btn-secondary {
    background-color: var(--dynamic-button-secondary, #2563eb) !important;
    border-color: var(--dynamic-button-secondary, #2563eb) !important;
}

html body.colors-applied .btn-hot-deal,
html body.colors-applied .btn.btn-hot-deal,
html body .btn-hot-deal,
.btn.btn-hot-deal {
    background-color: var(--dynamic-button-hot-deal, #f59e0b) !important;
    border-color: var(--dynamic-button-hot-deal, #f59e0b) !important;
}

/* CRITICAL: Force Card Colors with ultra-high specificity */
html body.colors-applied .coupon-card,
html body.colors-applied .coupon-item,
html body .coupon-card,
.coupon-item {
    background-color: var(--dynamic-coupon-card-bg, #FFFFFF) !important;
}

html body.colors-applied .store-card,
html body.colors-applied .store-item,
html body .store-card,
.store-item {
    background-color: var(--dynamic-store-card-bg, #FFFFFF) !important;
}

/* CRITICAL: Force Site Background with ultra-high specificity */
html body.colors-applied,
html body {
    background-color: var(--dynamic-site-background, #F8FAFC) !important;
}

/* CRITICAL: Override any conflicting inline styles */
html body.colors-applied [style*="background-color"]:not([data-preserve-style]),
html body [style*="background-color"]:not([data-preserve-style]) {
    background-color: inherit !important;
}

/* CRITICAL: Specific overrides for sections with inline styles */
html body.colors-applied section[style*="background-color"].popular-stores-section,
html body section[style*="background-color"].popular-stores-section {
    background-color: var(--dynamic-popular-stores-bg, #F9FAFB) !important;
}

html body.colors-applied section[style*="background-color"].featured-coupons-section,
html body section[style*="background-color"].featured-coupons-section {
    background-color: var(--dynamic-featured-coupons-bg, #FFFFFF) !important;
}

html body.colors-applied section[style*="background-color"].latest-coupons-section,
html body section[style*="background-color"].latest-coupons-section {
    background-color: var(--dynamic-latest-coupons-bg, #F3F4F6) !important;
}

html body.colors-applied section[style*="background-color"].featured-stores-section,
html body section[style*="background-color"].featured-stores-section {
    background-color: var(--dynamic-featured-stores-bg, #EFF6FF) !important;
}

html body.colors-applied section[style*="background-color"].blog-section,
html body section[style*="background-color"].blog-section {
    background-color: var(--dynamic-blog-section-bg, #FEFEFE) !important;
}

/* CRITICAL: Ensure colors persist during page transitions */
html body.colors-applied * {
    color-scheme: light !important;
}

/* CRITICAL: Force visibility after colors are applied */
html body.colors-applied {
    visibility: visible !important;
    opacity: 1 !important;
}