/* 1. استدعاء خط المراعي من Google Fonts */

@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');



/* 2. تطبيق الخط على كامل الموقع */

html, body, p, a, h1, h2, h3, h4, h5, h6, span, button, input {

    font-family: 'Almarai', sans-serif !important;

}

body > div.sticky.top-0.z-50 > header {
    background-color: #323200 !important;
}

/* 1. إزالة الفراغ العلوي في قائمة الجوال وتعديل مكانها */
#mobile-drawer {
    top: 10 !important; /* لجعل القائمة تبدأ من أعلى الشاشة تماماً */
    height: 100vh !important; /* التأكد من أنها تغطي كامل الارتفاع */
}

/* 2. جعل أيقونة الهامبرغر (الثلاث خطوط) باللون الأبيض */
button[aria-label="Toggle menu"] span {
    background-color: #ffffff !important;
}

/* 3. جعل أيقونة الإغلاق (X) باللون الأبيض عند فتح القائمة */
/* ملاحظة: بما أن التصميم يستخدم span متحول لشكل X */
button[aria-label="Toggle menu"][open] span,
.group[open] button span {
    background-color: #ffffff !important;
}

/* 3. تنظيف القائمة العلوية (Desktop) */

/* إخفاء العناصر الزائدة لتبقى فقط: الرئيسية - المنتجات - عجوة */

.lg\:flex li:nth-child(4), 

.lg\:flex li:nth-child(5),

.lg\:flex li:nth-child(6) {

    display: none !important;

}



.lg\:flex a {

    color: #FFF !important; /* لون التفاعل */

}

.lg\:flex a:hover {

    color: #F1F1F1 !important; /* لون التفاعل */

}







/* 6. تحسين المسافات بين عناصر الهيدر */

.lg\:flex {

    gap: 2rem !important; /* زيادة المسافة بين الروابط لراحة العين */

}


/* أيقونة البحث */

body > div.sticky.top-0.z-50 > header > nav > ul > li:nth-child(1) > button > svg > path {

      stroke: #fff !important;

}

body > div.sticky.top-0.z-50 > header > nav > ul > li:nth-child(2) > button > svg{
        stroke: #fff !important;
}
button.text-foreground.text-sm.flex.items-center.gap-1\.5.py-2.hover\:underline{
  color:#ffffff;
}

#header-login-btn > svg > path{

      stroke: #fff !important;

}







/* أيقونة السلة */

body > div.sticky.top-0.z-50 > header > nav > ul > li:nth-child(5) > a > svg > path {

      stroke: #fff !important;

      fill: #fff !important; 

}





/* تحسين الخطوط والخلفية العامة */

body {

    background-color: #F1F1F1 !important;


}

#main > section.section-gallery.bg-background.px-4.py-6.md\:p-16{

      background-color: #F1F1F1 !important;



}







/* بطاقة المنتج - جعلها تبدو كلوحة فنية */

[data-product-card] {

    background: #ffffff;

    border-radius: 12px !important;

    padding: 15px;

    transition: transform 0.3s ease, box-shadow 0.3s ease;


}



[data-product-card]:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 20px rgba(94, 63, 0, 0.05);

}



/* تصغير وتجميل صور المنتجات */

[data-product-card] img {

    border-radius: 8px !important;

}



/* أزرار "أعلمني عند التوفر" و "إضافة للسلة" */

.btn-outlined, .btn-primary, button[data-notify-me-trigger] {

    border-radius: 50px !important; /* زوايا دائرية بالكامل لشكل أنيق */

    border: 1.5px solid #323200 !important;

    color: #323200 !important;

    font-weight: 600 !important;

    transition: all 0.3s ease !important;

}



.btn-outlined:hover, button[data-notify-me-trigger]:hover {

    background-color: #323200 !important;

    color: #ffffff !important;

}



/* شارات الحالة (غير متوفر / خصم) */

.badge-filled {

    background-color: #EFE8DB !important;

    color: #323200 !important;

    font-weight: bold;

    border-radius: 4px !important;

    font-size: 11px !important;

}



/* تنسيق العناوين (مجموعة العجوة وغيرها) */

h2 { 

    color: #323200 !important;

    border-right: 4px solid #323200; /* خط جمالي بجانب العنوان */

    padding-right: 15px;

}


/* استهداف النصوص والأسعار داخل سكشن "منتجات العجوة" فقط */
[section-id="e1fe4234-8243-4519-ac55-6cfc4a746b31"] .text-foreground,
[section-id="e1fe4234-8243-4519-ac55-6cfc4a746b31"] h2,
[section-id="e1fe4234-8243-4519-ac55-6cfc4a746b31"] h3 a {
    color: #323200 !important;
}

/* في حال أردت استهداف كلاس text-sm فقط داخل هذا السكشن ليكون زيتي */
[section-id="e1fe4234-8243-4519-ac55-6cfc4a746b31"] .text-sm {
    color: #323200 !important;
}

/* لضمان تلوين رمز الريال (SVG) بنفس اللون الزيتي داخل هذا السكشن */
[section-id="e1fe4234-8243-4519-ac55-6cfc4a746b31"] .riyal-svg {
    color: #323200 !important;
}






/* تحسين شكل الأسعار */

.text-foreground.text-sm {


    font-size: 1.1rem !important;

    font-weight: 700 !important;

}

/* إخفاء نجوم التقييم في بطاقة المنتج */
.flex.items-center.gap-2 .flex.gap-0\.5 {
    display: none !important;
}



/* إجبار الصور على الظهور بجانب بعضها (صورتين في الصف) */



#main > section.section-gallery.bg-background.px-4.py-6.md\:p-16 > div > div > div:nth-child(1) > div.absolute.inset-0.flex.flex-col.items-center.justify-center.space-y-6 > div,

#main > section.section-gallery.bg-background.px-4.py-6.md\:p-16 > div > div > div:nth-child(2) > div.absolute.inset-0.flex.flex-col.items-center.justify-center.space-y-6 > div



{

  height: 100% !important;

  width: 100% !important;

}

#main > section.section-gallery.bg-background.px-4.py-6.md\:p-16 > div > div > div:nth-child(1) > div.absolute.inset-0.flex.flex-col.items-center.justify-center.space-y-6 > div > a,

#main > section.section-gallery.bg-background.px-4.py-6.md\:p-16 > div > div > div:nth-child(2) > div.absolute.inset-0.flex.flex-col.items-center.justify-center.space-y-6 > div > a

{

  border-color: transparent;

  background-color: transparent;

  font-size: 1.5em;

  height: 100% !important;

  width: 100% !important;

 color: #ffffff;

  font-weight: bold



}



/* 1. تغيير لون خلفية الفوتر بالكامل */

#footer {

    background-color: #323200 !important;

    color: #ffffff !important;

}



/* 2. تكبير الشعار ليصل عرضه إلى 200 بكسل وضمان وضوحه */

#footer img[alt="منصة تمور المدينة"] {

    width: 200px !important;

    height: auto !important; /* للحفاظ على أبعاد الشعار */

    max-width: 200px !important;

}



/* 3. توحيد لون جميع النصوص والعناوين والروابط إلى الأبيض */

#footer p, 

#footer h3, 

#footer a, 

#footer li, 

#footer span,

#footer svg {

    color: #ffffff !important;

}



/* 4. تعديل لون الأيقونات (SVG) لتكون بيضاء */

#footer .text-foreground, 

#footer svg {

  stroke:#ffffff !important;

    /* fill: #ffffff !important; */

    /* stroke: transparent; /* لضمان عدم ظهور حدود غريبة */ 

}



/* 5. تعديل لون الخط الفاصل السفلي ليتناسب مع الخلفية الجديدة */

#footer .border-t {

    border-color: rgba(255, 255, 255, 0.1) !important;

}



/* 6. تأثير عند تمرير الماوس على الروابط (اختياري لجعلها تفاعلية) */

#footer a:hover {

    opacity: 0.8;

    color: #f8f8f8 !important;

}





/* 7. ضبط عرض الشعار في نسخة الجوال ليكون متناسقاً */

@media (max-width: 768px) {

    #footer img.block.md\:hidden {

       display: none;

    }

}

/* صفحة المنتج */
/* تحويل زر "أضف للسلة" الممتلئ إلى أوتلاين */
button[data-add-to-cart-form="product-form"].btn-filled {
    background-color: transparent !important; /* إزالة الخلفية الممتلئة */
    border: 1px solid #323200 !important;   /* إضافة إطار زيتي */
    color: #323200 !important;              /* تلوين النص بالزيتي */
    box-shadow: none !important;            /* إزالة أي ظلال قد تكون موجودة */
}

/* تلوين الأيقونة (SVG) داخل الزر باللون الزيتي */
button[data-add-to-cart-form="product-form"].btn-filled svg {
    stroke: #323200 !important;
    fill: none !important;
}

/* تأثير عند تمرير الماوس (Hover) ليعود ممتلئاً كما في التصاميم الاحترافية */
button[data-add-to-cart-form="product-form"].btn-filled:hover {
    background-color: #323200 !important;
    color: #ffffff !important;
}

/* تلوين الأيقونة للأبيض عند تمرير الماوس */
button[data-add-to-cart-form="product-form"].btn-filled:hover svg {
    stroke: #ffffff !important;
}