/**
 * Container Images - Replace Gray Backgrounds with Beautiful Images
 *
 * @package NEWTIV
 * @since 1.0.0
 */

/* ============================================
   Pattern Images - Base64 SVG Patterns
   ============================================ */

/* Subtle geometric pattern */
:root {
    --pattern-geometric: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAxMCAwIEwgMCAwIDAgMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjEpIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=');
    
    --pattern-dots: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImRvdHMiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMiIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjE1KSIvPjwvcGF0dGVybiA+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZG90cykiLz48L3N2Zz4=');
    
    --pattern-lines: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0ibGluZXMiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDAgMCAwIDEwMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDgpIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjbGluZXMpIi8+PC9zdmc+');
    
    --pattern-mesh: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9Im1lc2giIHdpZHRoPSI4MCIgaGVpZ2h0PSI4MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDAgTCA4MCA4MCBNIDgwIDAgTCAwIDgwIiBmaWxsPSJub25lIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4xKSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI21lc2gpIi8+PC9zdmc+');
}

/* ============================================
   Replace Gray Backgrounds with Images
   ============================================ */

/* Light gray backgrounds -> Pattern with gradient overlay */
.bg-light,
.bg-gray-50,
[class*="bg-light"],
[style*="background: #f9fafb"],
[style*="background: #f8f8f8"],
[style*="background-color: #f9fafb"],
[style*="background-color: #f8f8f8"] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 250, 250, 0.95) 100%), var(--pattern-dots) !important;
    background-size: cover, 40px 40px !important;
    background-position: center, 0 0 !important;
}

/* Lighter gray backgrounds -> Subtle pattern */
.bg-lighter,
.bg-gray-100,
[style*="background: #f3f4f6"],
[style*="background-color: #f3f4f6"] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 248, 248, 0.98) 100%), var(--pattern-geometric) !important;
    background-size: cover, 60px 60px !important;
    background-position: center, 0 0 !important;
}

/* Medium gray backgrounds -> Mesh pattern */
.bg-gray-200,
.bg-gray-300,
[style*="background: #e5e7eb"],
[style*="background: #d1d5db"],
[style*="background-color: #e5e7eb"],
[style*="background-color: #d1d5db"] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 240, 240, 0.9) 100%), var(--pattern-mesh) !important;
    background-size: cover, 80px 80px !important;
    background-position: center, 0 0 !important;
}

/* Dark gray backgrounds -> Elegant gradient with pattern */
.bg-dark,
.bg-gray-900,
.site-footer,
[style*="background: #111827"],
[style*="background-color: #111827"] {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.95) 0%, rgba(31, 41, 55, 0.95) 100%), var(--pattern-lines) !important;
    background-size: cover, 100px 100px !important;
    background-position: center, 0 0 !important;
}

/* ============================================
   Specific Container Classes
   ============================================ */

/* Content sections */
.content-area,
.main-content,
.site-main {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 250, 250, 0.98) 100%), var(--pattern-dots) !important;
    background-size: cover, 40px 40px !important;
    background-position: center, 0 0 !important;
}

/* Sidebar */
.sidebar,
.shop-sidebar {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 248, 248, 0.95) 100%), var(--pattern-geometric) !important;
    background-size: cover, 60px 60px !important;
    background-position: center, 0 0 !important;
}

/* Widgets */
.widget,
.widget-area {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, rgba(252, 252, 252, 0.97) 100%), var(--pattern-dots) !important;
    background-size: cover, 40px 40px !important;
    background-position: center, 0 0 !important;
}

/* Premium sections */
.premium-section.alt-bg {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 250, 250, 0.95) 100%), var(--pattern-mesh) !important;
    background-size: cover, 80px 80px !important;
    background-position: center, 0 0 !important;
}

/* Entry content */
.entry-content,
.entry-summary {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(252, 252, 252, 0.98) 100%), var(--pattern-dots) !important;
    background-size: cover, 40px 40px !important;
    background-position: center, 0 0 !important;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.99) 0%, rgba(250, 250, 250, 0.99) 100%), var(--pattern-geometric) !important;
    background-size: cover, 60px 60px !important;
    background-position: center, 0 0 !important;
}

/* Cards and boxes */
.card,
.box,
.product-card,
.woocommerce ul.products li.product {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(252, 252, 252, 0.98) 100%), var(--pattern-dots) !important;
    background-size: cover, 40px 40px !important;
    background-position: center, 0 0 !important;
}

/* WooCommerce containers */
.woocommerce-page-header,
.woocommerce .woocommerce-breadcrumb,
.woocommerce-page {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 250, 250, 0.95) 100%), var(--pattern-geometric) !important;
    background-size: cover, 60px 60px !important;
    background-position: center, 0 0 !important;
}

/* Mobile menu */
.mobile-menu,
.mobile-bottom-menu {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 250, 250, 0.98) 100%), var(--pattern-dots) !important;
    background-size: cover, 40px 40px !important;
    background-position: center, 0 0 !important;
}

/* ============================================
   Professional CSS Variables Override
   ============================================ */

:root {
    --color-gray-50: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 250, 250, 0.95) 100%), var(--pattern-dots);
    --color-gray-100: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 248, 248, 0.98) 100%), var(--pattern-geometric);
    --color-gray-200: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 240, 240, 0.9) 100%), var(--pattern-mesh);
    --newtiv-bg-light: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 250, 250, 0.95) 100%), var(--pattern-dots);
    --newtiv-bg-lighter: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 248, 248, 0.98) 100%), var(--pattern-geometric);
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 768px) {
    .bg-light,
    .bg-lighter,
    .content-area,
    .sidebar {
        background-size: cover, 30px 30px !important;
    }
}

/* ============================================
   Print Styles - Keep Simple
   ============================================ */

@media print {
    .bg-light,
    .bg-lighter,
    .content-area,
    .sidebar {
        background: #ffffff !important;
    }
}