/* 1. اجعل الحاوية تعمل بنظام الفليكس */
[data-quantity-section] {
    display: flex !important;
    width: 100% !important;
}

/* 2. استخدم margin-left: auto لدفع العداد لليمين بغض النظر عن اللغة */
.qty-input.qty-input-full {
    margin-left: auto !important; /* هذا هو السر: يدفع العداد لليمين دائماً */
    margin-right: 0 !important;
    direction: ltr !important;    /* لضمان ثبات ترتيب أزرار الزيادة والنقصان */
    display: flex !important;
}
/* 1. جعل لوحة القائمة الداخلية زجاجية ثلجية بالكامل */
dialog#mobile-drawer .bg-background,
dialog#mobile-drawer [class*="bg-background"] {
    background-color: rgba(255, 255, 255, 0.45) !important; /* طبقة بيضاء شفافة تسمح بمرور الألوان من خلفها */
    background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)) !important;
    backdrop-filter: blur(25px) !important; /* تأثير التغبيش والضباب الثلجي الكثيف */
    -webkit-backdrop-filter: blur(25px) !important; /* لضمان عمل التأثير على الآيفون ومتصفح سفاري */
}

/* 2. تفريغ أي حاويات أو عناصر داخلية لكي لا تحجب شكل الثلج */
dialog#mobile-drawer .flex,
dialog#mobile-drawer el-dialog-panel,
dialog#mobile-drawer .overflow-y-auto {
    background-color: transparent !important;
    background: transparent !important;
}

/* 3. تنعيم خطوط الفواصل الداخلية وتخفيف حدتها لتناسب الزجاج */
dialog#mobile-drawer .border-border-light,
dialog#mobile-drawer [class*="border-t"] {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* 4. تثبيت لون النصوص والأيقونات بالأسود لتبدو فاخرة وواضحة جداً */
dialog#mobile-drawer a,
dialog#mobile-drawer button,
dialog#mobile-drawer span,
dialog#mobile-drawer svg {
    color: #ffff !important;
    stroke: #ffff !important; /* تلوين خطوط أيقونة الكرات الأرضية */
    font-weight: 500 !important;
}

/* تأثير تفاعلي خفيف بلون داكن ناعم عند الضغط أو التمرير فوق الروابط */
dialog#mobile-drawer a:hover,
dialog#mobile-drawer button:hover {
    background-color: rgba(0, 0, 0, 0.03) !important;
}
/* 1. تهيئة الحاوية الكبرى وحجز صف علوي كامل للعنوان والنص */
div#product-variants-options .product-options__group {
    position: relative !important;
    padding-top: 45px !important; /* مساحة علوية واسعة ومريحة لمنع التداخل */
    display: block !important;
}

/* 2. تثبيت عنوان الخيار الرئيسي في أعلى اليمين/اليسار تماماً */
div#product-variants-options .product-options__label {
    position: absolute !important;
    top: 0 !important;
    inset-inline-start: 0 !important;
    margin: 0 !important;
    color: #000000 !important;
    font-weight: 700 !important; /* خط عريض Bold تماماً كالصورة */
    font-size: 1rem !important;
    line-height: 24px !important;
    display: inline-block !important;
}

/* 3. الكود الفولاذي: إلغاء قفل الحاوية عن الدوائر والقائمة لمنع النص من التحرك أو الاختفاء */
div#product-variants-options .product-options__group .product-options__list,
div#product-variants-options .product-options__group .product-options__list .product-options__item,
div#product-variants-options .product-options__group .product-options__list .product-options__item.active {
    position: static !important; /* يجبر النص على التحرر والصعود للمستوى الأعلى */
    transform: none !important;  /* يمنع التداخل والحركة الجانبية المزعجة */
    will-change: auto !important;
    contain: none !important;
    filter: none !important;
}

/* 4. إخفاء نصوص الدوائر غير النشطة */
div#product-variants-options .product-options__item-text {
    display: none !important;
}

/* 5. إجبار اسم الدرجة النشطة على الظهور في الأعلى بشكل ثابت بجانب العنوان */
div#product-variants-options .product-options__item.active .product-options__item-text {
    display: inline-block !important;
    position: absolute !important;
    top: 0 !important; /* يضع النص على نفس خط العنوان تماماً */
    
    /* 💡 مسافة ابتعاد النص عن العنوان:
       تم ضبطها على 85px لتظهر مباشرة بعد كلمة Lipstick. 
       إذا تحولت الواجهة للعربي (الروج)، سيتناسق تلقائياً بفضل خاصية inset-inline-start */
    inset-inline-start: 85px !important; 
    
    z-index: 9999 !important; /* يمنع النص نهائياً من الاختفاء (ورا الألوان) */
    white-space: nowrap !important;
    color: #111111 !important;
    font-weight: 400 !important; /* خط عادي Regular ليميزه عن العنوان كالصورة */
    font-size: 1rem !important;
    line-height: 24px !important;
}

/* إضافة شرطة الفصل ( - ) تلقائياً قبل اسم اللون المختار */
div#product-variants-options .product-options__item.active .product-options__item-text::before {
    content: "-  " !important;
    color: #111111 !important;
    font-weight: 400 !important;
}

/* 6. إعادة ترتيب وتنسيق دوائر الألوان في الأسفل بعد تحريرها */
div#product-variants-options .product-options__list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important; /* المسافة بين الدوائر */
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

div#product-variants-options .product-options__item {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    border: 1px solid #e0e0e0 !important; /* إطار ناعم للدوائر */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 7. تأثير الحلقة المزدوجة الاحترافي للدائرة النشطة (فراغ أبيض ثم حلقة زرقاء ناصعة) */
div#product-variants-options .product-options__item.active {
    border: 1px solid transparent !important;
    /* الظل الداخلي يصنع الحلقة البيضاء، والخارجي يصنع الحلقة الزرقاء المحيطة */
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0066cc !important; 
}

/* إخفاء زر خيارات المنتج الافتراضي القديم للمنصة */
button[commandfor="product-options"] {
    display: none !important;
}
/* --- 8. ألوان الدرجات المعتمدة لمتجرك (يدعم العربي والإنجليزي) --- */

/* الكونسيلر */
[value="جمیلة | درجة 06"], [value*="Jamila"] { background-color: #E9B290 !important; }
[value="قمر | درجة 07"], [value*="Qamar"] { background-color: #FFE1D1 !important; }
[value="حسناء | درجة 02"], [value*="Hasna"] { background-color: #FFD9CA !important; }
[value="مملوحة | درجة 13"], [value*="Mamloha"] { background-color: #B97B52 !important; }
[value="فاتنة | درجة 17"], [value*="Fatina"] { background-color: #6B3619 !important; }

/* بلشر */
[value="رمّاني | درجة 10"], [value*="Rommani"], [value*="Rummani"] { background-color: #590014 !important; }
[value="مشمشي | درجة 02"], [value*="Mishmishi"] { background-color: #FF8071 !important; }
[value="بامبي | درجة 03"], [value*="Bambi"] { background-color: #FC83C0 !important; }

/* الروج */
[value="كرم | درجة 22"], [value*="Karam"] { background-color: #9E324A !important; }
[value="عِز | درجة 03"], [value*="eiz"] { background-color: #863B28 !important; }
[value="أصالة | درجة 23"], [value*="Asala"] { background-color: #A0342A !important; }
[value="سُمُوّ | درجة 06"], [value*="Sumu"] { background-color: #6B221E !important; }
[value="ذرابة | درجة 21"], [value*="Tharaba"] { background-color: #C4514C !important; }

/* تحويل نافذة النظرة السريعة (Quick View) إلى لوح ثلجي زجاجي */
el-dialog-panel {
    background-color: rgba(255, 255, 255, 0.45) !important; /* درجة شفافية متوازنة لضمان وضوح نصوص المنتج */
    background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)) !important;
    backdrop-filter: blur(25px) !important; /* قوة تأثير التغبيش الثلجي الخلفي */
    -webkit-backdrop-filter: blur(25px) !important; /* ضمان عمل التأثير على متصفحات Safari والآيفون */
    border: 1px solid rgba(255, 255, 255, 0.4) !important; /* حد زجاجي خفيف يبرز أطراف النافذة */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.07) !important; /* ظل ناعم جداً ليعطي النافذة عمقاً وبروزاً عن الخلفية */
}

/* تفريغ أي خلفيات مدمجة داخلية قد تحجب التأثير الثلجي للنافذة */
el-dialog-panel #quick-view-content,
el-dialog-panel #product-main-section,
el-dialog-panel .product-details-column {
    background-color: transparent !important;
    background: transparent !important;
}
/* تحسين مظهر زر الإغلاق X الصغير ليتناسق مع المظهر الجديد */
el-dialog-panel button[command="close"] {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #111111 !important;
    transition: all 0.2s ease;
}

el-dialog-panel button[command="close"]:hover {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

/* نقل أيقونة السلة الدائرية لجهة اليمين في النسخة الإنجليزية */

/* 1. استهداف الحاوية مباشرة وإجبارها على توجيه العناصر لليمين */
div:has(> button[data-add-to-cart]) {
    display: flex !important;
    justify-content: flex-end !important;
    text-align: right !important;
    width: 100% !important;
}

/* 2. إجبار زر الأيقونة نفسه على الانتقال لليمين وإلغاء أي محاذاة لليصار */
button[data-add-to-cart] {
    margin-left: auto !important;
    margin-right: 0 !important;
    left: auto !important;
    position: relative !important;
}
/* 1. إخفاء زر المفضلة (القلب) بشكل عام في الموقع بما يشمل صفحة المنتج */
[data-wishlist-btn], 
button[aria-label*="wishlist"], 
button[class*="wishlist"] {
    display: none !important;
}

/* 2. إجبار زر المفضلة (القلب) على الظهور فقط إذا كان داخل بطاقة المنتج */
[data-product-card] [data-wishlist-btn],
[data-product-card] button[aria-label*="wishlist"],
[data-product-card] button[class*="wishlist"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
/* كود مكثف لإخفاء أيقونة القلب والمفضلة */
button[class*="wishlist"], 
div[class*="wishlist"], 
a[class*="wishlist"],
button[class*="favorite"],
[data-wishlist-btn],
.product-single__wishlist,
.wishlist-btn,
.wishlist-icon,
button[aria-label*="wishlist"],
button[aria-label*="favorite"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
button[data-wishlist-btn] {
    position: absolute !important;
    top: 307px !important;
    left: 15px !important; /* أو استبدلي left بـ right حسب الزاوية اللي تبينها */
    z-index: 10 !important;
}
/* تطبيق التعديل فقط عندما يكون اتجاه الموقع من اليسار لليمين (الإنجليزي) */
html[dir="ltr"] button[data-open-quick-view="true"],
html[lang="en"] button[data-open-quick-view="true"] {
    margin-left: auto !important;
    margin-right: 0 !important;
    display: block !important;
}
/* تحويل زر اختر الخيارات إلى شكل كبسولة */
button[data-open-quick-view="true"] {
    border-radius: 9999999px !important; /* هذا هو السر في شكل الكبسولة */
    padding: 1px 5px !important;     /* تعديل الحشوات ليتناسب مع الشكل */
    width: auto !important;           /* ليأخذ الزر عرض النص فقط (يمكنك تغييرها لـ 100% إذا أردته بالعرض الكامل) */
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    border: 1px solid hsl(0, 0%, 93%) !important; /* تأكيد حدود الزر كونه btn-outlined */
    min-height: 30px !important;
    font-size: 16px ;
    height: 10px ;
    border-color: #e5e7eb ;
}
/* 1. تحويل القائمة إلى صف أفقي */
.product-options__list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    list-style: none !important;
    padding: 0 !important;
    margin-top: 10px !important;
}

/* 2. تنسيق الدوائر (شكل اللون) */
.product-options__item {
    width: 35px !important;
    height: 35px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    border: 2px solid #e0e0e0 !important;
    transition: transform 0.2s, border-color 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 3. تأثير عند اختيار اللون */
.product-options__item.active {
    border-color: #000 !important;
    transform: scale(1.15) !important;
    box-shadow: 0 0 5px rgba(0,0,0,0.2) !important;
}

/* 4. إخفاء النص الموجود داخل الدائرة */
.product-options__item-text {
    display: none !important;
}
/* إخفاء زر خيارات المنتج */
button[commandfor="product-options"] {
    display: none !important;
}
/* --- 5. تطبيق الألوان بناءً على اسم المنتج (Value) --- */

/* الكونسيلر */
[value="جمیلة | درجة 06"] { background-color: #E9B290 !important; }
[value="قمر | درجة 07"] { background-color: #FFE1D1 !important; }
[value="حسناء | درجة 02"] { background-color: #FFD9CA !important; }
[value="مملوحة | درجة 13"] { background-color: #B97B52 !important; }
[value="فاتنة | درجة 17"] { background-color: #6B3619 !important; }

/* بلشر */
[value="رمّاني | درجة 10"] { background-color: #590014 !important; }
[value="مشمشي | درجة 02"] { background-color: #FF8071 !important; }
[value="بامبي | درجة 03"] { background-color: #FC83C0 !important; }

/* الروج */
[value="كرم | درجة 22"] { background-color: #9E324A !important; }
[value="عِز | درجة 03"] { background-color: #863B28 !important; }
[value="أصالة | درجة 23"] { background-color: #A0342A !important; }
[value="سُمُوّ | درجة 06"] { background-color: #6B221E !important; }
[value="ذرابة | درجة 21"] { background-color: #C4514C !important; }
/* 1. التحكم في الطول الإجمالي للبطاقة */
div[data-product-card] {
    height: 350px !important; /* 👈 غيّر 380px للطول الذي يناسبك (مثلاً 350px لتصغيرها أو 450px لتكبيرها) */
    min-height: unset !important;
    max-height: unset !important;
}

/* 2. التحكم في طول الصورة لتتناسب مع البطاقة (مهم جداً) */
div[data-product-card] > a.aspect-square {
    height: 180px !important; /* 👈 غيّر 180px لطول الصورة المناسب للبطاقة */
    aspect-ratio: auto !important;
}

/* 3. ترتيب العناصر داخل البطاقة لمنع تداخلها */
div[data-product-card] > .flex-1 {
    flex: none !important;
}
div[data-product-card] > .mt-auto {
    margin-top: auto !important; /* لدفع الأزرار لأسفل البطاقة بشكل مرتب */
}

/* 1. تحويل الزر إلى ستايل شفاف وأنيق وبدون حواف دائرية */
#additional-info button[commandfor="features-details"] {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: none !important;
}

/* تنسيق خط العنوان ليصبح داكناً وفخماً */
#additional-info button[commandfor="features-details"] span:first-child {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #111827 !important;
}

/* 2. إخفاء السهم القديم وتنظيف حاوية الأيقونة */
#additional-info button[commandfor="features-details"] span:last-child {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    position: relative !important;
    display: inline-block !important;
}

#additional-info button[commandfor="features-details"] span:last-child svg {
    display: none !important;
}

/* 3. بناء علامة (+) الاحترافية باستخدام الخطوط النحيفة */
/* الخط الأفقي الثابت */
#additional-info button[commandfor="features-details"] span:last-child::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: 100% !important;
    height: 1.5px !important;
    background-color: #111827 !important;
    transform: translateY(-50%) !important;
}

/* الخط العمودي */
#additional-info button[commandfor="features-details"] span:last-child::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: 1.5px !important;
    height: 100% !important;
    background-color: #111827 !important;
    transform: translateX(-50%) !important;
    transition: transform 0.25s ease, opacity 0.25s ease !important;
}

/* 4. تحويل علامة (+) إلى (-) بنعومة فائقة عند الفتح */
button[commandfor="features-detailsdisabled"],
button[commandfor="features-detailsdisabled"],
button[commandfor="features-details"][aria-expanded="true"] span:last-child::after {
    transform: translateX(-50%) rotate(90deg) !important;
    opacity: 0 !important;
}

/* 5. تنسيق ظهور المحتوى الفعلي وحركات الفتح */
#features-details:not([open]) {
    display: none !important;
}

#features-details[open] {
    display: block !important;
    padding: 16px 4px !important;
    border-bottom: 1px solid #e5e7eb !important;
    animation: slideDownFade 0.2s ease-out !important;
}

/* تأثير ظهور انسيابي مريح للعين */
@keyframes slideDownFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* تصغير عرض صندوق الكمية الإجمالي وإلغاء التمدد */
.qty-input.qty-input-full {
    width: 100px !important;     /* تحديد عرض صغير وثابت للزر بالكامل */
    min-width: 100px !important;
    max-width: 100px !important;
    flex: none !important;       /* منع القالب من إجبار الزر على التمدد يمين ويسار */
    height: 32px !important;     /* ارتفاع متناسق وناعم */
    padding: 0 4px !important;   /* تصفير الفراغات الجانبية الزائدة */
    border-radius: 30px !important; /* زوايا دائرية ناعمة */
    
    /* محاذاة الزر لجهة اليمين لترك مساحة مريحة للقلب على اليسار */
    margin-right: 0 !important; 
    margin-left: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* تصغير أزرار التحكم الداخلية (+) و (-) وحاوية الحذف */
.qty-input-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    flex: none !important;
}

/* تصغير الرموز داخل الأزرار */
.qty-input-btn svg {
    width: 12px !important;
    height: 12px !important;
}

/* ضبط حقل الرقم بالمنتصف تماماً بدون أي مساحات */
.qty-input-field {
    width: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 13px !important;
}
//
/* 1. جعل كرت المنتج بالكامل هو المرجع الأساسي */
div.group.relative[data-product-card] {
    position: relative !important;
}

/* 2. فك قيد العناصر لكي تخرج من حدود مربع الصورة */
div.group.relative[data-product-card] > a {
    position: static !important;
}

/* 3. إنزال أيقونة المفضلة (القلب) لترتكز أسفل البطاقة عند زر السلة */
[data-wishlist-btn] {
    position: absolute !important;
    top: auto !important;
    bottom: 20px !important;   /* التحكم في الارتفاع من الأسفل (زد أو قلل الرقم ليحاذي زر السلة تماماً) */
    left: 15px !important;     /* المسافة من اليسار لكي تظهر الأيقونة فوق الزر جهة اليسار */
    right: auto !important;
    z-index: 40 !important;    /* لضمان ظهورها فوق زر السلة وتكون قابلة للضغط */
    
    /* إعدادات الشفافية الخاصة بك */
    background-color: transparent !important; 
    backdrop-filter: none !important;          
    border: none !important;                  
    box-shadow: none !important;              
}

/* 4. التحكم في حجم أيقونة القلب لتناسب مكانها الجديد */
[data-wishlist-btn] svg {
    width: 22px !important;
    height: 22px !important;
}
/* إضافة الأيقونة الجديدة للزر النصي */
button[data-add-to-cart]::before {
    content: "" !important;
    display: inline-block !important;
    width: 35px !important;  /* عرض الأيقونة */
    height: 35px !important; /* ارتفاع الأيقونة */
    margin-left: 2px !important; /* مسافة بين الأيقونة والنص */
    background-image: url('https://f.top4top.io/p_3838ja2v31.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    vertical-align: middle !important;
}

/* تنسيق إضافي لضمان محاذاة النص والأيقونة في المنتصف */
button[data-add-to-cart] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* فرض موقع جديد وإزالة الخلفية نهائياً */
[data-wishlist-btn] {
    top: auto !important;       /* إلغاء التثبيت من الأعلى لتتمكن من النزول */
    bottom: 12px !important;    /* التحكم في الارتفاع من الأسفل (زد الرقم لترتفع قليلاً، وقلله لتنزل) */
    left: 3px !important;       /* المسافة من اليسار */
    right: auto !important;     
    
    background-color: transparent !important; 
    backdrop-filter: none !important;          
    border: none !important;                  
    box-shadow: none !important;              
}

/* الكود الصحيح للتحكم في حجم الأيقونة (القلب) وتكبيرها أو تصغيرها */
[data-wishlist-btn] svg {
    width: 22px !important;  /* العرض */
    height: 22px !important; /* الارتفاع */
}
/* فرض الإطار باستخدام خصائص مفصلة */
div[data-product-card] {
    border-width: 1px !important;            /* فرض سماكة للإطار */
    border-style: solid !important;          /* فرض نمط الإطار */
    border-color: #e5e7eb !important;        /* لون الإطار */
    border-radius: 2px !important;
    padding: 12px !important;
    background: #ffffff !important;
    transition: all 0.3s ease !important;
}

/* تحديث لون الإطار عند التمرير */
div[data-product-card]:hover {
    border-color: #d1d5db !important;        /* تغيير لون الإطار عند التمرير */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}
/* 1. التنسيق العام: الهيدر شفاف ويطفو فوق المحتوى (لأي صفحة أخرى) */
header {
    background-color: transparent !important;
    border-bottom: none !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
}

/* 2. تنسيق خاص بصفحة المنتج: نلغي الشفافية ونعيد الهيدر لحالته الطبيعية */
body[data-template="product_details"] header {
    background-color: white !important; /* يمكنك تغيير الأبيض للون الذي تريده */
    border-bottom: 1px solid #e5e7eb !important;
    position: relative !important;
    z-index: 50;
}

/* 3. تنسيق النصوص والأيقونات في الحالة الشفافة فقط */
/* لضمان بقائها واضحة فوق صور الموقع في الصفحات العادية */
body:not([data-template="product_details"]) header .text-foreground,
body:not([data-template="product_details"]) header svg {
    color: white !important; /* لون النص في الهيدر الشفاف */
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); /* ظل للنص ليبرز */
}

/* 4. إرجاع الألوان الأصلية للنصوص في صفحة المنتج */
body[data-template="product_details"] header .text-foreground,
body[data-template="product_details"] header svg {
    color: #1f2937 !important; /* لون النص الافتراضي في صفحة المنتج */
    text-shadow: none !important;
}

/* 5. إزالة أي لون خلفية من الأزرار في الهيدر الشفاف */
body:not([data-template="product_details"]) header button {
    background-color: transparent !important;
}
//
/* 1. جعل زر الإضافة للسلة يبدو كزر أيقونة مربع/دائري */
[data-add-to-cart] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important; /* حجم الزر */
    height: 30px !important;
    padding: 0 !important;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 100%; /* إخفاء النص عن طريق دفعه بعيداً */
    position: relative;
}

/* 2. إضافة أيقونة السلة باستخدام خاصية Before (إذا كنت لا تريد تغيير الـ HTML) */
[data-add-to-cart]::before {
    content: "";
    text-indent: 0;
    display: block;
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
}

/* 3. تنسيق تحسين التفاعل */
[data-add-to-cart]:hover {
    opacity: 0.8;
}
/* إخفاء النص وإظهار الأيقونة فقط داخل زر الإضافة للسلة */
[data-add-to-cart] {
    font-size: 0 !important; /* إخفاء النص */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5rem !important;
}

/* التأكد من أن الأيقونة داخل الزر تأخذ الحجم المناسب */
[data-add-to-cart] svg {
    margin: 0 !important;
    width: 9px !important;
    height: 9px !important;
}
/* تخصيص زر الإضافة للسلة ليصبح مربعاً صغيراً وأنيقاً */
[data-add-to-cart] {
    font-size: 0 !important; /* إخفاء النص نهائياً */
    padding: 0 !important;
    width: 20px !important;  /* يمكنك التحكم في العرض هنا */
    height: 20px !important; /* يمكنك التحكم في الطول هنا */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important; /* لوسطنة الزر */
    border-radius: 8px !important; /* لجعل الزوايا دائرية قليلاً */
}
/
/* 1. استهداف القسم الذي يحتوي على الزر وإجباره على المحاذاة لليمين */
.mt-auto {
    display: flex !important;
    justify-content: flex-end !important; /* تحريك الزر لليمين */
    width: 100% !important;
}

/* 2. تحجيم الزر ليصبح مربعاً صغيراً في أقصى اليمين */
[data-add-to-cart] {
    font-size: 0 !important; 
    padding: 0 !important;
    width: 35px !important;  
    height: 35px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important; /* إلغاء أي هوامش تلقائية */
    border-radius: 17px !important;
}
/
/* 1. تحسين هوامش وتصميم عناوين المنتج */
.product-details-column {
    padding: 10px;
    background: #ffffff;
    border-radius: 16px;
}

/* 2. تنعيم واجهة اختيار المجموعات (Bundle) */
.dynamic-bundle-group-accordion {
    border: 1px solid #f3f4f6 !important; /* إطار خفيف جداً */
    box-shadow: none !important;
    border-radius: 12px !important;
    overflow: hidden;
    margin-bottom: 12px !important;
}

/* 3. جعل أزرار القوائم المنسدلة (Accordion) أنيقة */
.MuiAccordionSummary-root {
    background-color: #fff !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.MuiAccordionSummary-root:hover {
    background-color: #f3f4f6 !important;
}

/* 4. تجميل شكل صور المنتجات داخل المجموعات */
.dynamic-bundle-item-image img {
    border-radius: 8px !important;
    border: 1px solid #eee;
}

/* 5. ضبط مسافات حقل الكمية ليصبح متناسقاً */
.qty-input {
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 4px;
}

.qty-input-btn {
    color: #000 !important;
}
/* 1. زيادة وضوح النصوص الأساسية */
h1, .text-foreground {
    color: #111827 !important; /* لون أسود غامق وواضح */
    font-weight: 600 !important;
}



/* 3. جعل إطارات المجموعات (Accordion) أكثر وضوحاً */
.MuiPaper-root {
    border: 1px solid #d1d5db !important; /* إطار رمادي أغمق */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important; /* ظل خفيف للعمق */
}

/* 4. تحسين تباين النصوص الثانوية */
.text-muted-foreground, .MuiTypography-caption {
    color: #000 !important; /* رمادي أغمق لسهولة القراءة */
}
/
#sticky-cta {
    background-color: #ffffff !important;
}
//
/* 1. جعل الفوتر يبدو كبطاقة طافية بحواف معكوفة */
#footer {
    border-radius: 25px !important; /* انحناء الحواف */
    margin: 20px !important;        /* مسافة من الجوانب ليظهر طافياً */
    padding: 40px 20px !important;  /* مساحة داخلية مريحة */
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important; /* ظل خفيف لإعطاء عمق */
}

/* 2. توسيط المحتوى بالكامل */
#footer .theme-container, 
#footer .grid, 
#footer .border-t {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* 3. ترتيب وتوسيط أيقونات الدفع والحقوق */
#footer .flex.flex-wrap {
    justify-content: center !important;
    gap: 15px !important;
}

/* 4. إزالة الهوامش الافتراضية التي قد تسبب إزاحة */
#footer .space-y-4 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
/* إعدادات الفوتر كبطاقة لها إطار وحواف معكوفة */
#footer {
    border: 2px solid #e5e7eb !important; /* لون الإطار وسمكه */
    border-radius: 30px !important;       /* انحناء الحواف */
    margin: 20px !important;              /* مسافة حول الفوتر */
    padding: 40px 20px !important;        /* مساحة داخلية */
    background-color: #ffffff !important; /* لون الخلفية */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important; /* ظل خفيف */
    text-align: center !important;
}

/* لضمان توسيط العناصر داخل الفوتر */
#footer .theme-container, 
#footer .grid, 
#footer .border-t {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* إزالة الخط الفاصل العلوي الذي كان موجوداً سابقاً لأنه لم يعد ضرورياً مع وجود إطار */
#footer .border-t {
    border-top: none !important;
    margin-top: 20px !important;
}
//
/* تثبيت الهيدر وتطبيق تأثير الزجاج (Glass Effect) */
#site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 999 !important;
  
  /* خلفية بيضاء شبه شفافة (يمكنك تعديل درجة الشفافية بتغيير الرقم الأخير 0.85) */
  background-color: rgba(255, 255, 255, 0.85) !important;
  
  /* تأثير التمويه (Blur) للخلفية */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important; /* مهم جداً لدعم أجهزة الآيفون */
  
  /* حد سفلي خفيف جداً لترتيب الشكل */
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

/* توحيد لون النصوص والأيقونات للون الأساسي للمتجر لضمان وضوحها دائماً */
#site-header nav a,
#site-header nav p,
#site-header nav span,
#site-header nav svg,
#site-header .text-foreground,
#site-header .nav-country-text {
  color: #1a1a1a !important; /* اللون الداكن للنصوص */
}

/* الحفاظ على ألوان النوافذ المنبثقة الجانبية كما هي بدون تغيير */
#mobile-drawer *, 
#search-dialog * {
  color: inherit !important;
}
//
/* استهداف الأب الذي يحتوي على كود اللون البنفسجي للمنتج المميز */
div:has(> span[class*="bg-[#F1EFFE]"]) {
    left: auto !important;
    right: 1px !important;
    top: 1px !important;
}

/* كود إضافي كخطة بديلة بناءً على مكان الكلاسات */
div[class*="absolute"][class*="top-4"] {
    left: auto !important;
    right: 1px !important;
    top: 1px !important;
}

/* 2. التحكم في حجم الخط والخلفية البنفسجية */
.group a > div.absolute.top-4 span {
    font-size: 8px !important;    /* حجم خط كلمة (منتج مميز) */
    padding: 1px 4px !important;   /* حجم الإطار: الأول (2) للارتفاع، والثاني (6) للعرض */
}

/* 3. التحكم في حجم النجمة الداخلية */
.group a > div.absolute.top-4 svg {
    width: 8px !important;   /* عرض النجمة */
    height: 8px !important;  /* ارتفاع النجمة */
}
//

//