/* ✅ كود CSS محسّن لمتجر جذور - نسخة محسّنة للأداء */
/* develope By Package +201002241591  3lwaaa@gmail.com - https://wa.me/201002241591 */
/* Performance Optimization by Lovable */

/* 🎯 الخطوة 1: المتغيّرات المحسّنة */
:root {
    /* ألوان العلامة التجارية */
    --color-primary: #604e5a;
    --color-primary-dark: #43323d;
    --color-primary-light: #e0c085;
    --goldColor: #e1be58;
    --color-primary-reverse: #604e5a38;
    --ff: #ffffff12;
    
    /* ألوان النصوص */
    --main-text-color: #43323d;
    --text-gold-dark: #b8935a;
    --hoverColor: #e1be58;
    --linkHoverColor: #e0c085;
    
    /* الخطوط */
    --font-main: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-secondary: 'IBM Plex Sans Arabic', system-ui, sans-serif;
    
    /* التأثيرات المحسّنة */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* 🚀 تحسينات الأداء الأساسية */

/* تحسين تحميل الخطوط */
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-display: swap; /* تحسين عرض النصوص */
}

/* تثبيت أبعاد الصور لمنع Layout Shift */
img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* تحميل كسول للصور */
img[loading="lazy"] {
    content-visibility: auto;
}

/* تقليل الحركة للأجهزة الضعيفة */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 📱 تحسينات الموبايل */
@media (max-width: 768px) {
    /* تقليل الظلال */
    .shadow,
    [class*="shadow"] {
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
    }
    
    /* إيقاف البلور الثقيل */
    [class*="backdrop-blur"],
    .backdrop-blur {
        backdrop-filter: none !important;
    }
    
    /* Hardware Acceleration للعناصر المتحركة فقط عند الحاجة */
    .product-entry:hover,
    .banner-entry:hover {
        transform: translateZ(0);
    }
}

/* 🎨 الأنماط الأساسية */

/* الروابط */
a {
    color: var(--color-primary);
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--hoverColor);
}

/* الأزرار */
.product-entry salla-add-product-button .s-button-wrap .s-button-element,
salla-button .s-quick-buy-button.s-button-element:not(:disabled):not([loading]) {
    background-color: var(--color-primary);
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    transition: all var(--transition-base);
}

.product-entry salla-add-product-button .s-button-wrap .s-button-element:hover,
salla-button .s-quick-buy-button.s-button-element:not(:disabled):not([loading]):hover {
    background-color: var(--goldColor);
    background: var(--goldColor);
    color: var(--color-primary);
    border-color: var(--goldColor);
}

/* النصوص */
.product-entry .promo-title,
.promotion-title {
    background-color: var(--color-primary) !important;
    background: var(--goldColor);
    color: var(--color-primary-dark);
}

/* 🔧 إصلاح القائمة على سطح المكتب */
@media (min-width: 992px) {
    /* ظهور/إخفاء القوائم المنسدلة بسلاسة */
    .main-menu .has-children .sub-menu,
    .main-menu .has-children .mega-menu {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity var(--transition-fast),
                    transform var(--transition-fast),
                    visibility 0s var(--transition-fast);
        pointer-events: none;
        background: #fff; /* مهم: خلفية واضحة */
        color: var(--main-text-color);
        border: 1px solid rgba(0,0,0,.08);
        box-shadow: 0 8px 24px rgba(0,0,0,.12);
        z-index: 9999; /* منع الشفافية والتداخل */
    }

    .main-menu .has-children:hover .sub-menu,
    .main-menu .has-children:hover .mega-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity var(--transition-fast), transform var(--transition-fast);
        pointer-events: auto;
    }

    /* تباين أعلى لعناصر القائمة العلوية (حل مشكلة "القائمة" غير الظاهرة) */
    .main-menu li > a,
    #mainnav .menu > li > a,
    nav.main-navigation > ul > li > a {
        color: var(--main-text-color) !important; /* كان أبيض فأصبح داكن لتباين أعلى على الخلفية الفاتحة */
        font-weight: 600;
        text-shadow: none;
    }

    .main-menu li > a:hover,
    .main-menu > .has-children:hover > a {
        color: var(--hoverColor) !important;
    }

    /* عدم فرض لون خلفية للهيدر حتى لا نخفي النص حسب ثيم القالب */
    #mainnav > .inner {
        /* background: var(--color-primary);  تم إزالته لعدم إخفاء النص */
    }
}

/* 🖼️ إصلاح الشعار في الفوتر */
@media (min-width: 768px) and (max-width: 1023px) {
    .store-footer .logo-footer img,
    .footer .logo img {
        max-height: 250px !important;
        max-width: 250px !important;
        width: auto;
        height: auto;
        object-fit: contain;
    }
}

@media (min-width: 1024px) {
    .store-footer .logo-footer img,
    .footer .logo img {
        max-height: 230px !important;  /* تكبير الشعار ليظهر بوضوح */
        max-width: 230px !important;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    .store-footer .footer-container .logo-footer {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px 0;
    }
}

/* 🖼️ تحسين الصور والبنرات */
.banner-entry {
    position: relative;
    overflow: hidden;
    contain: layout style paint; /* تحسين الأداء */
}

.banner-entry img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Social Links */
ul.social-links > .social-links a.social-icon {
    display: block;
    background-color: #fff;
    border: 1px solid #eee;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 2px 8px -2px rgba(0,0,0,.1);
    transition: transform var(--transition-fast);
}

ul.social-links > .social-links a.social-icon:hover {
    transform: translateY(-2px);
}

/* 📏 Grid و Layout */
@media (min-width: 768px) {
    .grid.one-row.md\:grid-cols-1.grid-flow-row,
    section.s-block.s-block--banners.container > .grid.one-row.md\:grid-cols-2 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .s-block--banners .two-row,
    .s-block--banners .one-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px; /* تقليل المسافات على الموبايل */
    }
}

@media (max-width: 480px) {
    .s-block--banners .two-row .banner-entry,
    .s-block--banners .one-row .banner-entry {
        height: 120px;
    }
}

/* 🎯 صفحة 404 */
.main.main--404 {
    background: #0d0d0d;
}

.e404-container > .landing {
    display: flex;
    max-width: 100%;
    height: 100vh;
}

h1.title.title--giant.title--404 {
    display: flex;
    flex-direction: column-reverse;
    height: auto;
    max-height: initial;
    width: 50%;
    gap: 10px;
    color: #fff;
    justify-content: center;
    margin-bottom: 0;
}

/* ⚡ تحسينات إضافية */

/* Sticky Bar */
.sticky-product-bar .s-button-primary-outline {
    border: 1px solid var(--color-primary-light);
}

/* Footer - ألوان أكثر وضوحًا على الخلفية الحالية */
.store-footer {
    color: var(--main-text-color);
}
.store-footer p,
.store-footer li,
.store-footer span {
    color: var(--main-text-color) !important;
}
.store-footer a {
    color: var(--color-primary-dark);
    transition: color var(--transition-fast);
}
.store-footer a:hover {
    color: var(--hoverColor);
    text-decoration: underline;
}
.store-footer h3,
.store-footer h3.follow {
    color: var(--goldColor) !important; /* عناوين بلون ذهبي واضح */
}

.footer-top.footer-container {
    padding-bottom: 0;
}

/* FAQ */
section.s-block.s-block--faqs {
    background-color: #ffffff !important;
}

.faq-container:hover .faq-item {
    color: #fff;
}

/* Product Cards */
.product-entry .on-sale > h4 {
    color: var(--linkHoverColor);
}

/* Product Entry Optimization */
.product-entry {
    contain: layout style; /* تحسين الأداء */
}

/* Icons Animation */
.product-entry salla-add-product-button .s-button-wrap .s-button-element i.sicon-shopping-bag2 {
    opacity: 0;
    position: absolute;
    right: -100%;
    top: 50%;
    transform: translateY(-50%) translateX(30px);
    transition: opacity var(--transition-base), transform var(--transition-base);
    visibility: hidden;
    color: #000;
}

.product-entry salla-add-product-button .s-button-wrap .s-button-element:hover i.sicon-shopping-bag2 {
    opacity: 1;
    transform: translateY(-50%) translateX(-2px);
    visibility: visible;
    right: -20px;
}

/* 🚀 تحسينات إضافية للأداء */

/* تحسين Rendering للأقسام الكبيرة */
.s-block {
    contain: layout style;
}

/* تحسين Scroll Performance */
.product-entry,
.banner-entry {
    will-change: auto; /* إزالة will-change الدائم */
}

/* إضافة will-change فقط عند التفاعل */
.product-entry:hover,
.banner-entry:hover {
    will-change: transform;
}

/* تحسين عرض المحتوى */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
}

/* 🎨 نهاية الكود المحسّن */