/* =========================================
   SABBAR - WHITE STORE / BLACK BUTTONS
   ========================================= */

/* 1. Store background */
body,
.store-content,
.page-wrapper,
.app-inner,
main {
    background-color: #FFFFFF !important;
}


/* 2. Add to Cart buttons - BLACK */
button,
button[type="submit"],
.add-to-cart,
.product-card__add-to-cart,
.s-button-primary {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #FFFFFF !important;
}

/* Add to Cart text - WHITE */
button *,
button[type="submit"] *,
.add-to-cart *,
.product-card__add-to-cart *,
.s-button-primary * {
    color: #FFFFFF !important;
}


/* 3. Categories icon in header - WHITE */
.categories-icon,
.header-categories,
.header-categories svg,
.header-categories i,
.header-categories button svg,
.header-categories button i {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}


/* 4. Footer - BLACK background */
footer,
.footer {
    background-color: #000000 !important;
}


/* 5. Footer headings - WHITE */
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6 {
    color: #FFFFFF !important;
}


/* 6. Footer links - WHITE */
footer a,
.footer a,
footer a span,
.footer a span {
    color: #FFFFFF !important;
}


/* 7. Important footer sections
   "روابط تهمك"
   "خدمة العملاء"
   "تطبيق صبار"
*/
footer .links,
footer .footer-links,
footer .customer-service,
footer .app-links,
footer .footer-section,
.footer .links,
.footer .footer-links,
.footer .customer-service,
.footer .app-links,
.footer .footer-section {
    color: #FFFFFF !important;
}


/* 8. Text inside footer sections - WHITE */
footer .links *,
footer .footer-links *,
footer .customer-service *,
footer .app-links *,
footer .footer-section *,
.footer .links *,
.footer .footer-links *,
.footer .customer-service *,
.footer .app-links *,
.footer .footer-section * {
    color: #FFFFFF !important;
}


/* 9. Social media buttons
   WHITE circle + BLACK icon
*/
footer .social-icons a,
.footer .social-icons a,
footer .social-media a,
.footer .social-media a {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border-radius: 50% !important;
}


/* 10. Social media icons - BLACK */
footer .social-icons svg,
footer .social-icons i,
.footer .social-icons svg,
.footer .social-icons i,
footer .social-media svg,
footer .social-media i,
.footer .social-media svg,
.footer .social-media i {
    color: #000000 !important;
    fill: #000000 !important;
    stroke: #000000 !important;
}


/* 11. Customer service icon
   WHITE circle + BLACK icon
*/
.customer-service-icon,
.customer-service a,
.customer-service button {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border-radius: 50% !important;
}

.customer-service-icon svg,
.customer-service-icon i,
.customer-service svg,
.customer-service i {
    color: #000000 !important;
    fill: #000000 !important;
    stroke: #000000 !important;
}


/* 12. Category names under images - ONE LINE */
.category-title,
.category-card .category-title,
.category-item .category-title,
.categories-grid .category-title,
.category-card h3,
.category-card h4,
.category-item h3,
.category-item h4 {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}