/* =========================================
   1. تنظيف الهيدر (إخفاء البار العلوي)
   ========================================= */
#store-header .top-navbar { 
    display: none !important; 
}

/* =========================================
   2. الكبسولة (Apple Pill) + الهوريزنتال بادينج
   ========================================= */
#mainnav {
    position: absolute !important; /* هنا بيبقى طايف في أول الصفحة */
    width: 100% !important;
    top: 0 !important;
    z-index: 9999 !important;
    padding-top: 24px !important; 
    background: transparent !important;
}

#mainnav .inner {
    background-color: rgba(20, 20, 20, 0.4) !important;
    border-radius: 24px !important; 
    width: 95% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    height: 75px !important;
    padding: 0 40px !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    transition: all 0.4s ease !important;
}

/* تصفير بادينج الثيم الافتراضي */
#mainnav .inner .container > div.pt-0 {
    padding-top: 0 !important;
    height: 100% !important;
}

/* =========================================
   3. الترتيب المانوال (مضاد للكسر - ديسكتوب)
   ========================================= */
@media (min-width: 1024px) {
    #mainnav .inner .container {
        height: 100% !important;
        position: relative !important;
    }

    #mainnav .inner .container > div:first-child {
        display: flex !important;
        height: 100% !important;
        align-items: center !important;
        width: 100% !important;
    }

    #mainnav .inner .container > div:last-child {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: max-content !important;
        z-index: 10 !important;
        margin: 0 !important;
    }

    #mainnav .inner .container > div:first-child > div:nth-child(2) {
        order: 1 !important;
        margin-left: auto !important; 
    }

    #mainnav .inner .container > div:first-child > div:nth-child(1) {
        order: 2 !important; 
    }
    
    #mainnav .inner .container > div:first-child > div:nth-child(3) {
        order: 3 !important;
        margin-right: 15px !important; 
    }
}

/* =========================================
   4. تأثير السكرول (حل مشكلة الأفتر سكرول!)
   ========================================= */
/* إجبار الهيدر يقلب Fixed ويثبت على الشاشة وقت السكرول */
#mainnav.fixed-pinned, 
#mainnav.animated {
    position: fixed !important;
    padding-top: 10px !important; /* تقليل المسافة من فوق شوية وقت السكرول */
}

/* تأثير الزجاج وقت السكرول */
#mainnav.fixed-pinned .inner, 
#mainnav.animated .inner {
    background-color: rgba(15, 15, 15, 0.85) !important;
    backdrop-filter: blur(25px) !important; 
    -webkit-backdrop-filter: blur(25px) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* =========================================
   5. الألوان (Brand 200 للأكتيف)
   ========================================= */
#mainnav .inner a:not(.sub-menu a), 
#mainnav .inner span:not(.sub-menu span), 
#mainnav .inner svg, 
#mainnav .inner .header-btn__icon,
#mainnav .inner .s-cart-summary-total { 
    color: #ffffff !important; 
}

#mainnav .inner a[href*="offers"] span,
#mainnav .inner .text-red-500,
#mainnav .inner .active span,
#mainnav .inner a:hover span,
#mainnav .inner a:hover svg {
    color: #aebf9f !important; 
    font-weight: 800 !important;
}

#mainnav .sub-menu {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 10px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}
#mainnav .sub-menu a, 
#mainnav .sub-menu span {
    color: #1a1a1a !important;
    font-weight: 500 !important;
}


/* =========================================
   تخصيص القائمة المنسدلة (Dropdown Glassmorphism)
   ========================================= */
#mainnav .sub-menu {
    background-color: rgba(15, 15, 15, 0.85) !important; /* نفس درجة زجاج الهيدر */
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 10px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

/* تايبوجرافي أبيض */
#mainnav .sub-menu a, 
#mainnav .sub-menu span {
    color: #ffffff !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

/* حالة الأكتيف والـ Hover بلون البراند 200 (الزيتي الفاتح) */
#mainnav .sub-menu a:hover, 
#mainnav .sub-menu a:hover span,
#mainnav .sub-menu li.active > a,
#mainnav .sub-menu li.active > a span {
    color: #aebf9f !important;
    font-weight: 800 !important;
}

/* =========================================
   إصلاح الـ Overflow والقوائم المتفرعة (Nested Menus)
   ========================================= */

/* 1. منع القص وإلغاء أي سكرول داخلي */
#mainnav .sub-menu,
#mainnav .sub-menu ul {
    overflow: visible !important;
    max-height: none !important;
}

/* 2. تحضير العناصر لاحتواء القوائم الفرعية */
#mainnav .sub-menu li {
    position: relative !important;
}

/* 3. تظبيط القوائم المتفرعة (Level 2) عشان تفتح لبره */
#mainnav .sub-menu .sub-menu {
    position: absolute !important;
    top: 0 !important;
    right: 100% !important; /* تفتح لبره (ناحية الشمال في الـ RTL) */
    margin-right: 8px !important; /* مسافة شيك بين القائمتين */
    margin-top: 0 !important;
    
    /* تأكيد الستايل الزجاجي للقائمة المتفرعة */
    background-color: rgba(15, 15, 15, 0.85) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
}

/* 4. تريكّة سحرية: قائمة "المزيد" بالذات */
/* لأنها في أقصى الشمال، لو فتحت للشمال هتخرج بره الشاشة وتعمل سكرول للصفحة */
/* عشان كده هنجبرها تفتح ناحية "اليمين" (لجوة) */
#more-menu-dropdown .sub-menu .sub-menu {
    right: auto !important;
    left: 100% !important; 
    margin-left: 8px !important;
    margin-right: 0 !important;
}

/* إظهار القائمة المتفرعة بسلاسة عند الـ Hover */
#mainnav .sub-menu .sub-menu {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease !important;
    pointer-events: none;
}
#mainnav .sub-menu li:hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
}


/* =========================================
   بطاقة المنتج
   ========================================= */
/* =========================================
   1. هندسة المحاذاة (Structural Alignment)
   ========================================= */
/* إجبار الفورم اللي شايلة المحتوى إنها تاخد باقي طول الكارت */
custom-salla-product-card .product-form {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    flex: 1 !important;
}

/* تحويل الكونتينر الداخلي لـ Flex عمودي */
.s-product-card-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important; /* يتمدد لملء الفراغ */
}

/* التعديل الجديد: زق حاوية السعر هي والتقييم لتحت عشان تنزل معاها الزرار */
.s-product-card-content-sub {
    margin-top: auto !important;
    padding-top: 15px !important; /* مسافة تتنفس منها العناصر اللي فوقه */
}

/* زرار السلة هينزل طبيعي تحت السعر مع مسافة شيك */
.s-product-card-content-footer {
    margin-top: 10px !important; /* مسافة صغيرة جداً بين السعر والزرار */
    padding-top: 0 !important;
}

/* =========================================
   2. تنظيف الـ UI بتاع الأوبشنز (Options Clutter)
   ========================================= */
/* إخفاء كلمة "اختر" تماماً */
.s-product-options-option-label small {
    display: none !important;
}

/* تظبيط شكل الـ Label (تصغيره وتغيير لونه لرمادي شيك) */
.s-product-options-option-label {
    color: #6b7280 !important;
    font-size: 13px !important;
    margin-bottom: 8px !important;
}
.s-product-options-option-label b {
    font-weight: 500 !important;
}

/* النجمة الحمراء (*) هنخليها بلون البراند */
.s-product-options-option-label span {
    color: #2b3224 !important;
}

/* ستايل الـ Hug Content لدوائر المقاسات */
.s-product-options-grid-mode {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
.s-product-options-grid-mode label {
    width: max-content !important; /* الحاوية تلم على النص */
    min-width: 35px !important; /* أقل عرض عشان لو حرف واحد زي S */
    margin: 0 !important;
}
.s-product-options-grid-mode-span {
    width: 100% !important;
    height: auto !important;
    padding: 6px 12px !important;
    border-radius: 8px !important; /* زوايا ناعمة */
}

/* تظبيط الـ Dropdown بتاع القماش */
.s-product-options-option-content select.s-form-control {
    border-radius: 8px !important;
    padding: 8px 12px !important;
    height: auto !important;
    border: 1px solid #e5e7eb !important;
}

/* =========================================
   3. تدمير اللون الأحمر (Color Hierarchy)
   ========================================= */
/* السعر الأساسي بلون البراند الغامق */
.s-product-card-sale-price h4,
.s-product-card-starting-price h4 {
    color: #2b3224 !important; /* لون البراند الزيتي */
    font-weight: 800 !important;
}

/* السعر القديم (المشطوب) بلون رمادي بدل الأحمر */
.s-product-card-sale-price span {
    color: #9ca3af !important;
}

/* تاج الخصم (بدل الخلفية الحمراء المزعجة) */
.pc_add_discount_precent {
    background-color: #f3f4f6 !important; /* خلفية رمادي فاتح جداً */
    color: #2b3224 !important; /* نص بلون البراند */
    border: 1px solid rgba(43, 50, 36, 0.2) !important; /* إطار خفيف */
    font-weight: 700 !important;
}

/* تاج الترويج (زي: كشميري / توصيل مجاني) */
.s-product-card-promotion-title {
    background-color: #1d1d1f !important; /* اللون الغامق اللي طلبته */
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    width: max-content !important; /* عشان التاج ميمطش بعرض الكارت */
    margin-bottom: 10px !important;
}/* ستايل الـ Hug Content لدوائر المقاسات */
.s-product-options-grid-mode {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
.s-product-options-grid-mode label {
    width: max-content !important; /* الحاوية تلم على النص */
    min-width: 35px !important; /* أقل عرض عشان لو حرف واحد زي S */
    margin: 0 !important;
}
.s-product-options-grid-mode-span {
    width: 100% !important;
    height: auto !important;
    padding: 6px 12px !important;
    border-radius: 8px !important; /* زوايا ناعمة */
}

/* تظبيط الـ Dropdown بتاع القماش */
.s-product-options-option-content select.s-form-control {
    border-radius: 8px !important;
    padding: 8px 12px !important;
    height: auto !important;
    border: 1px solid #e5e7eb !important;
}

/* =========================================
   3. تدمير اللون الأحمر (Color Hierarchy)
   ========================================= */
/* السعر الأساسي بلون البراند الغامق */
.s-product-card-sale-price h4,
.s-product-card-starting-price h4 {
    color: #2b3224 !important; /* لون البراند الزيتي */
    font-weight: 800 !important;
}

/* السعر القديم (المشطوب) بلون رمادي بدل الأحمر */
.s-product-card-sale-price span {
    color: #9ca3af !important;
}

/* تاج الخصم (بدل الخلفية الحمراء المزعجة) */
.pc_add_discount_precent {
    background-color: #f3f4f6 !important; /* خلفية رمادي فاتح جداً */
    color: #2b3224 !important; /* نص بلون البراند */
    border: 1px solid rgba(43, 50, 36, 0.2) !important; /* إطار خفيف */
    font-weight: 700 !important;
}

/* تاج الترويج (زي: كشميري / توصيل مجاني) */
.s-product-card-promotion-title {
    background-color: #1d1d1f !important; /* اللون الغامق اللي طلبته */
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    width: max-content !important; /* عشان التاج ميمطش بعرض الكارت */
    margin-bottom: 10px !important;
}


/* =========================================
   تظبيط صور التصنيفات (دائرة + بوردر البراند + هوفر شادو)
   ========================================= */
.s-block--categories .slide--cat-entry img {
    aspect-ratio: 1 / 1 !important; /* إجبار الصورة تكون مربعة */
    height: auto !important; 
    border-radius: 16px !important; 
    object-fit: cover !important; 
    
    /* اللمسة الجديدة: البوردر بلون البراند 200 */
    border: 2px solid #D9E5CF !important; 
    
    /* تجهيز حركة ناعمة للهوفر */
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important; 
}

/* تأثير الهوفر (دروب شادو ناعم جداً) */
.s-block--categories .slide--cat-entry:hover img {
    /* شادو ناعم مدمج (تقدر تغمقه لو حبيت بتغيير الـ 0.12) */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12) !important; 
    
    /* رفعة خفيفة لفوق بتدي إحساس إن العنصر بيتضغط عليه */
    transform: translateY(-3px) !important; 
    
    /* لو عايز البوردر يغمق سِنة في الهوفر ممكن تزود ده (اختياري) */
    border-color: #2b3224 !important; 
}


/* =========================================
   تظبيط العداد
   ========================================= */
.s-block--mazaya-special-offer {
    background: transparent !important;
    padding-top: 0 !important;
}
.mazaya-offer-box::before,
.mazaya-offer-box::after,
.s-block--mazaya-special-offer::before,
.s-block--mazaya-special-offer::after {
    background: transparent !important;
    content: none !important;
}
/* 2- محاذاة العنوان والوصف لليمين مع مسافة قراية واضحة */
.mazaya-offer-container .flex-1.text-center {
    text-align: right !important;
    padding-inline-end: 24px;
}

.mazaya-offer-container .flex-1.text-center h3,
.mazaya-offer-container .flex-1.text-center p {
    text-align: right !important;
}

/* 3- إزالة الستروك الأبيض من صناديق العداد */
.s-count-down-boxed .s-count-down-item {
    border: none !important;
    box-shadow: none;
}

.mazaya-offer-box {
    align-items: flex-end !important;
    padding-bottom: 48px;
    padding-top: 0;
}

/* =========================================
   إصلاح الهيدر في صفحة المنتج (Solid Design)
   ========================================= */

/* استهداف صفحة المنتج بناءً على الكلاس الفعلي للثيم */
body.product-single #mainnav,
body.cart #mainnav {
    position: relative !important; 
    padding-top: 0 !important; 
    background-color: #1d1d1f !important; /* لون غامق فخم */
}

/* فك الكبسولة وإلغاء الزجاج في صفحة المنتج */
body.product-single #mainnav .inner,
body.cart #mainnav .inner {
    background: transparent !important; 
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important; 
    box-shadow: none !important;
    width: 100% !important; 
    max-width: 100% !important;
    padding: 0 5% !important; 
}

/* 1. إخفاء تاج الفئة الرمادي تحت العنوان */
.main-content .flex-1.flex.flex-row.justify-between.bg-gray-200 {
    display: none !important;
}

/* 2. إخفاء تاج الخصم الأحمر (خصم 42%) */
.main-content #custom-discount-percentage {
    display: none !important;
}

/* 3. تعديل عرض تاج التوفير الأخضر (وفر 156 ريال) ليتناسب مع المساحة بعد إخفاء التاج الأحمر */
.main-content #custom-discount-amount {
    width: auto !important; /* كان واخد width 50%، هنخليه يأخذ المساحة التي يحتاجها فقط */
    padding-left: 10px !important;
    padding-right: 10px !important;
}