/* 1. تطبيق اللون الأبيض النقي #ffffff على كامل حاويات وجسم الموقع والفوتر وإزالة أي خلفيات أخرى */
body, 
html, 
.site, 
#page, 
.site-content,
.main-content,
.woocommerce-page, 
.woocommerce-checkout,
.product-template-default,
.single-product,
.post-type-archive-product,
.site-footer,
#colophon,
.footer-wrapper,
.footer-container,
.footer,
.site-main {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
}

/* إزالة الخلفيات المخصصة للمربعات الداخلية لتبدو بيضاء متسقة مع الخلفية الرئيسية */
.products .product, 
.woocommerce ul.products li.product, 
.widget_product_categories, 
.woocommerce-sidebar,
.woocommerce-billing-fields, 
#order_review,
.product-grid-item,
.widget,
.entry-content,
.panel {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
}

/* 2. تحويل لون كافة النصوص والروابط داخل الفوتر والموقع إلى الأسود القوي والواضح */
body, 
p, 
span, 
a, 
h1, h2, h3, h4, h5, h6,
.entry-title,
.product_title,
.woocommerce-loop-product__title,
.price,
.price *,
.woocommerce-Price-amount,
.product-name,
.product-meta,
.product-categories,
.widget-title,
.widget_product_categories a,
.woocommerce-tabs,
table.shop_attributes th,
table.shop_attributes td,
.product-grid-item *,
.quantity input,
.cart-subtotal *,
.order-total *,
.site-footer *,
.site-footer a {
    color: #000000 !important; /* أسود صلب قوي */
}

/* 3. تعديل تذييل الموقع (Footer): جعل العلامات التجارية والمتجر بشكل أفقي مضغوط على الهواتف */
@media screen and (max-width: 768px) {
    .site-footer .widget_nav_menu ul,
    .site-footer .widget_pages ul,
    .site-footer ul.menu,
    #footer-brands-menu,
    #footer-shop-menu {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 10px 15px !important;
        padding: 0 !important;
        margin: 10px 0 !important;
        list-style: none !important;
    }

    .site-footer .widget_nav_menu ul li,
    .site-footer .widget_pages ul li,
    .site-footer ul.menu li {
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    .site-footer .widget_nav_menu ul li a,
    .site-footer .widget_pages ul li a,
    .site-footer ul.menu li a {
        padding: 5px 10px !important;
        white-space: nowrap !important;
        border: 1px solid #E5E7EB !important;
        border-radius: 20px !important;
        background-color: #FFFFFF !important;
        font-size: 13px !important;
    }
}