/* Add custom CSS styles below */ 
/* تنسيق زر "أضف" مع تحديد أبعاد واضحة للعرض والارتفاع */
custom-salla-product-card button, 
custom-salla-product-card .s-product-card-button,
custom-salla-product-card .btn-add-to-cart {
    background-color: #00000 !important;
    color: #fffff !important;
    border-radius: 5px !important;
    border: none !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    
    /* 1. التحكم في الارتفاع (من الأعلى والأسفل): 
       كلما زاد الرقم الأول (مثلاً 16px) أصبح الزر أرفع من الأعلى والأسفل */
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    
    /* 2. التحكم في العرض من الجانبين الأيمن والأيسر:
       تستطيع التحكم بالعرض الإجمالي للزر من خلال خاصية width أو max-width */
    width: 90% !important; /* تقليل العرض قليلاً ليكون أصغر من أطراف البطاقة */
    max-width: 90% !important;
    
    /* 3. توسيط الزر داخل بطاقة المنتج مع ترك مسافة سفلية */
    margin: 0 auto 0px auto !important; 
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease !important;
}
/* 1. تحويل حاوية صورة المنتج إلى مرجع أساسي للتثبيت */
custom-salla-product-card .s-product-card-image {
    position: relative !important;
}

/* 2. تثبيت زر الأمنيات بأبعاد مرنة تتكيف مع جميع الأجهزة (ويب وجوال) */
custom-salla-product-card .btn-wishlist,
custom-salla-product-card salla-button[data-id],
custom-salla-product-card .s-product-card-fixed-btn {
    position: absolute !important;
    top: 3.5% !important;       /* نسبة مئوية تتناسب مع ارتفاع الصورة مهما تغير المقاس */
    right: 3.5% !important;     /* نسبة مئوية تتناسب مع عرض الصورة */
    left: auto !important;
    bottom: auto !important;
    
    /* استخدام قياس مرن يتغير بسلاسة حسب حجم الشاشة */
    width: clamp(0px, 8vw, 42px) !important;
    height: clamp(-150px, 8vw, -500px) !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    background-color: transparent !important; /* بدون خلفية */
    border: none !important;                  /* بدون إطار */
    box-shadow: none !important;
    
    z-index: 9999 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

/* 3. إخفاء الزر الداخلي والنص تماماً */
custom-salla-product-card .btn-wishlist button,
custom-salla-product-card salla-button[data-id] button {
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
    cursor: pointer !important;
}

/* 4. إخفاء النصوص المجاورة مثل كلمة أضف */
custom-salla-product-card .btn-wishlist span,
custom-salla-product-card salla-button[data-id] span {
    display: none !important;
}

/* 5. إظهار قلب مجوف بحجم مرن ومتناسق تلقائياً */
custom-salla-product-card .btn-wishlist::after,
custom-salla-product-card salla-button[data-id]::after {
    content: "♡" !important;
    font-size: clamp(18px, 4.5vw, 24px) !important; /* حجم قلب يتكيف بسلاسة مع الشاشة */
    color: #000000 !important; /* لون القلب أسود (غيره إلى #ffffff إذا كانت صور المنتجات غامقة) */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    right: 0 !important;
}
/* ==========================================
   إصدار شارة نسبة الخصم في أعلى اليسار مع الإطار
   ========================================== */

custom-salla-product-card .s-product-card-image [class*="discount"],
custom-salla-product-card .s-product-card-badge,
custom-salla-product-card [class*="badge"] {
    position: absolute !important; 
    top: 5px !important;          /* المسافة من الأعلى */
    left: 5px !important;         /* المسافة من اليسار (لتكون في الزاوية اليسرى) */
    right: auto !important;        /* إلغاء أي محاذاة لليمين */
    z-index: 10 !important;        /* ضمان الظهور فوق الصورة */

    /* --- التحكم في الإطار والتصميم --- */
    border: 0.5px solid #000000 !important; /* سمك ونوع ولون الإطار */
    background-color: #FFFFFF !important; /* لون الخلفية */
    color: #000000 !important;             /* لون النص */
    border-radius: 10px !important;         /* انحناء الزوايا */
    padding: 0px 0px !important;           /* المساحة الداخلية */
    font-weight: 500 !important;           /* سماكة الخط */
    font-size: 10px !important;            /* حجم الخط */
    box-shadow: 0 2px 6px rgba(0,0,0,0.0) !important; /* ظل خفيف للإبراز */
}
/* ==========================================================
   إخفاء حاوية الماركة وعبارة أصلي المحددة فقط
   ========================================================== */
.s-block-product-details > div.flex.items-center.gap-4.border.border-gray-200,
.product-single > div.flex.items-center.gap-4.border.border-gray-200,
div.flex.items-center.gap-4.border.border-gray-200.dark\:border-opacity-20.rounded-md.p-2 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}
/* ==========================================================
   إخفاء وسائل الدفع (تابي وتمارا) تماماً من صفحة المنتج
   ========================================================== */
.s-block-product-details [data-installment="tabby"],
.s-block-product-details [data-installment="tamara"],
.s-block-product-details .tabby-promo,
.s-block-product-details .tamara-product-widget,
.s-block-product-details [class*="tabby"],
.s-block-product-details [class*="tabby-"],
.s-block-product-details [class*="tamara"],
.s-block-product-details [class*="tamara-"],
salla-installment {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}
/* ==========================================================
   إخفاء وصف المنتج وقسم التقييمات تماماً
   ========================================================== */
.product-description,
.s-block-product-details .description,
#product-description,
[class*="description"],

    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================
   تخصيص ألوان تبويب الخيارات وفصله عن ألوان الثيم الأساسية
   ========================================================== */
button.tab-trigger[data-target*="options"],
.tab-trigger.relative.p-product.options-tab {
    background-color: #ffffff !important; /* لون الخلفية (أسود مثلاً) */
    color: #f9f9f9 !important; /* لون النص والأيقونة بداخله */
    border-color: #f9f9f9 !important;
}
button.tab-trigger[data-target*="options"],
.tab-trigger.relative.p-product.options-tab {
    display: none !important;
}
/* لون الأيقونة والنص عند التفاعل أو الحالة النشطة */
button.tab-trigger[data-target*="options"] i,
button.tab-trigger[data-target*="options"] span {
    color: #f9f9f9 !important;
}
/* ==========================================================
   تخصيص صندوق السعر الإجمالي في صفحة المنتج وتجاوز ألوان الثيم
   ========================================================== */
section.total.details,
section.total.details.mb-5 {
    background-color: #f9f9f9 !important; /* لون الخلفية (استبدله باللون الذي تريده، أو اجعله transparent لإلغاء الخلفية) */
    background-color: #f9f9f9 !important;
    border: 2px solid #f9f9f9 !important; /* إطار الصندوق (اختياري) */
    border-radius: 8px !important; /* انحناء حواف الصندوق */
    padding: 10px !important; /* المسافات الداخلية للصندوق */
    box-shadow: none !important;
   /* --- 📏 التحكم في المسافات هنا --- */
    margin-top: -28px !important;    /* المسافة العلوية (فوق الشريط) - قم بتكبير أو تصغير الرقم */
    margin-bottom: 0px !important; /* المسافة السفلية (تحت الشريط) - قم بتكبير أو تصغير الرقم */
    /* --------------------------------- */
}

/* التأكد من أن النصوص والأرقام داخل الصندوق تأخذ الألوان المناسبة */
section.total.details * {
    background-color: transparent !important;
}


.custom-feature-item {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    color: #555555 !important;
    background-color: #f9f9f9 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    border: 1px solid #eaeaea !important;
}

.custom-feature-item i {
    font-size: 14px !important;
    color: #000000 !important; /* لون الأيقونات */
}
/* تنسيق حاوية تفاصيل المنتج بتصميم قولدن سنت */
.gs-product-custom-box {
    display: flex;
    flex-direction: column;
    font-family: inherit;
    text-align: right;
    direction: rtl;
    margin-bottom: 15px;
}

/* العلامة التجارية */
.gs-brand-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
}
.gs-brand-row a {
    color: #6c757d;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

/* عنوان المنتج */
.gs-title-row h1 {
    font-size: 20px;
    font-weight: 500;
    color: #212529;
    line-height: 1.4;
    margin: 0 0 10px 0;
}

/* الأسعار والخصم */
.gs-price-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 10px 0;
}
.gs-current-price {
    color: #dc3545;
    font-size: 25px;
    font-weight: 600;
}
.gs-old-price {
    color: #6c757d;
    font-size: 18px;
    text-decoration: line-through;
}

/* شريط الخصم والتوصيل */
.gs-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}
.gs-badge-item {
    height: 25px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}
.gs-badge-save {
    background-color: rgba(101, 67, 245, 0.1);
    color: #6543f5;
}
.gs-badge-shipping {
    background-color: rgba(254, 80, 0, 0.05);
    color: #fe5000;
}

/* أزرار خيارات الأحجام (المللي) */
.gs-options-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}
.gs-option-btn {
    flex: 1;
    min-width: 80px;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 12px;
    border: 1px solid #dee2e6;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}
.gs-option-btn.active {
    border-color: #6543f5;
    background-color: #f8f9fa;
}
.gs-option-btn .opt-name {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
}
.gs-option-btn .opt-price {
    font-size: 12px;
    color: #6c757d;
}
/* تنسيقات واجهة قولدن سنت المخصصة لمتجر Mon Paris */
.gs-custom-product-wrapper {
    display: flex;
    flex-direction: column;
    text-align: right;
    direction: rtl;
    background: #ffffff;
    padding: 15px 5px;
    margin-bottom: 15px;
    font-family: inherit;
}

.gs-brand-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.gs-brand-name {
    color: #6c757d;
    font-size: 13px;
    font-weight: 500;
}

.gs-verified-icon {
    color: #0d6efd;
    font-size: 12px;
    background: rgba(13, 110, 253, 0.1);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gs-title-row .gs-main-title {
    font-size: 19px;
    font-weight: 600;
    color: #212529;
    line-height: 1.4;
    margin: 0 0 12px 0;
}

.gs-price-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

.gs-current-price {
    color: #e63946;
    font-size: 24px;
    font-weight: 700;
}

.gs-old-price {
    color: #adb5bd;
    font-size: 16px;
    text-decoration: line-through;
    font-weight: 400;
}

.gs-badges-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.gs-badge {
    height: 26px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
}

.gs-save-badge {
    background-color: rgba(101, 67, 245, 0.08);
    color: #6543f5;
}

.gs-original-badge {
    background-color: rgba(40, 167, 69, 0.08);
    color: #28a745;
}
/* رفع حاوية السعر بمقدار 2 بكسل للأعلى */
.gs-price-container-slot {
    margin-top: -10px;
}
function syncElementsFromSalla() {
        // نقل السعر الأصلي إلى صندوقنا العلوي
        const originalPriceEl = document.querySelector('div.price, [class*="price my-1"], form.product-form .price');
        const priceSlot = document.getElementById('gs-price-slot');
        
        if (originalPriceEl && priceSlot && !priceSlot.contains(originalPriceEl)) {
            // أخذ نسخة أو نقل السعر
            priceSlot.appendChild(originalPriceEl);
            
            // البحث عن أي عناصر سعر مكررة أخرى في الصفحة وإخفاؤها
            const duplicatePrices = document.querySelectorAll('form.form.product-form div.price, [class*="price my-1"]');
            duplicatePrices.forEach(price => {
                if (!priceSlot.contains(price)) {
                    price.style.display = 'none';
                }
            });
        }

        // نقل خيارات المنتج
        const originalOptionsEl = document.querySelector('salla-product-options, .product-options, [class*="options-wrapper"]');
        const optionsSlot = document.getElementById('gs-options-slot');
        if (originalOptionsEl && optionsSlot && !optionsSlot.contains(originalOptionsEl)) {
            optionsSlot.appendChild(originalOptionsEl);
        }
    }
/* إخفاء وحذف التبويبات ومنطقة الخيارات القديمة بالأسفل نهائياً */
.s-product-tabs, 
#product-tabs, 
.tabs-wrapper.tabs-wrapper__product,
#product-tabs-options {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}
/* إخفاء عنوان الخيار (مثل الحجم وكلمة اختر) بالكامل */
.s-product-options-option-label,
label.s-product-options-option-label {
    display: none !important;
}
/* 1. جعل صندوق خياراتنا العلوي وحاوية سلة يعملان بنظام التمركز */
#gs-options-slot,
#gs-options-slot salla-product-options,
#gs-options-slot .s-product-options-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
}

/* 2. ضبط حاوية الأزرار لتكون في المنتصف تماماً وبجانب بعضها */
.gs-options-container-slot .s-product-options-grid-mode,
.gs-options-container-slot div[class*="grid-mode"],
.gs-options-container-slot [class*="option-content"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important; /* التمركز الوسطي التام */
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 8px !important;
    width: 100% !important;
}

/* 3. تثبيت حجم المربعات وأناقتها */
.gs-options-container-slot .s-product-options-grid-mode > div,
.gs-options-container-slot div[class*="grid-mode"] > div,
.gs-options-container-slot label {
    flex: 0 0 117px !important; /* عرض ثابت لكل مربع */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: -10px -10px !important;  /* تكبير الحجم والارتفاع */
    font-size: 0px !important;      /* حجم الخط */
    font-weight: 500 !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    text-align: center !important;
  
}/* تخصيص لون الخلفية وانحناء الزوايا للصندوق العام */
.gs-custom-product-wrapper {
    background-color: #fAfAfA !important; /* لون الخلفية (يمكنك تغليفه لأي لون تفضله مثل #f9f9f9) */
    border-radius: 16px !important;       /* انحناء الزوايا (كلما زادت القيمة زاد الاستدارة) */
    padding: 20px !important;             /* المسافة الداخلية لترتيب العناصر بداخل الصندوق */
    box-shadow: 0 0px 15px rgba(0, 0, 0, 0.00) !important; /* ظل خفيف وراقي للصندوق (اختياري) */
    border: 0px solid #eaeaea !important; /* لون الإطار الخارجي (اختياري) */
    margin-bottom: 15px !important;
}
/* ==========================================
   1. التحكم في المسافات الخارجية (العلوية والسفلية) للصندوق ككل
   ========================================== */
.gs-custom-product-wrapper {
    margin-top: -28px !important;    /* المسافة العلوية فوق القسم */
    margin-bottom: -10px !important; /* المسافة السفلية تحت القسم */
}

/* ==========================================
   2. التحكم في المسافات بين العناصر الداخلية للصندوق
   ========================================== */

/* مسافة سفلية تحت سطر العلامة التجارية (البراند) */
.gs-custom-product-wrapper .gs-brand-row {
    margin-bottom: 3px !important; 
}

/* مسافة سفلية تحت عنوان المنتج الرئيسي */
.gs-custom-product-wrapper .gs-title-row {
    margin-bottom: 5px !important; 
}

/* مسافة سفلية تحت قسم السعر العلوي */
.gs-custom-product-wrapper #gs-price-slot {
    margin-bottom: 5px !important; 
}

/* مسافة سفلية تحت قسم خيارات الأحجام والمربعات */
.gs-custom-product-wrapper #gs-options-slot {
    margin-bottom: -50px !important; 
}
/* التحكم في مسافة القسم من اليمين واليسار */
.gs-custom-product-wrapper {
    margin-right: -18px !important;  /* مسافة القسم من جهة اليمين */
    margin-left: 0px !important;   /* مسافة القسم من جهة اليسار */
    
    /* ملاحظة: إذا كنت تفضل أن يكون القسم منكمشاً للداخل مع هوامش متساوية، 
       يمكنك استخدام الهامش التلقائي هكذا: 
       margin: 0 auto !important; 
       مع تحديد عرض معين مثل width: 95% !important; */
}
/* ==========================================
   1. الحالة العادية للأزرار (قبل التمرير أو الاختيار)
   ========================================== */
.gs-options-container-slot .s-product-options-grid-mode label,
.gs-options-container-slot div[class*="grid-mode"] label {
    background-color: #fafafa !important; /* لون خلفية الزر العادي */
    color: #333333 !important;             /* لون النص العادي */
    border: 1px solid #ffffff !important;  /* لون إطار الزر العادي */
    transition: all 0.0s ease !important;  /* حركة سلسة عند التغيير */
}

/* ==========================================
   2. حالة تمرير الماوس فوق الزر (Hover)
   ========================================== */
.gs-options-container-slot .s-product-options-grid-mode label:hover,
.gs-options-container-slot div[class*="grid-mode"] label:hover {
    background-color: #f0f0f0 !important; /* لون الخلفية عند تمرير الماوس */
    border-color: #ffffff !important;     /* لون الإطار عند تمرير الماوس (تحكم بحرية) */
    color: #111111 !important;             /* لون النص عند التمرير */
}

/* ==========================================
   3. حالة الزر المحدد أو المختار (Active / Checked)
   ========================================== */
.gs-options-container-slot .s-product-options-grid-mode input:checked + div,
.gs-options-container-slot .s-product-options-grid-mode input:checked ~ label,
.gs-options-container-slot .s-product-options-grid-mode label:has(input:checked),
.gs-options-container-slot div[class*="grid-mode"] input:checked ~ *,
.gs-options-container-slot label.is-active,
.gs-options-container-slot [class*="is-active"] {
    background-color: #fafafa !important; /* لون خلفية الزر عند اختياره */
    color: #000000 !important;             /* لون النص داخل الزر عند اختياره */
    border: 1px solid #00a98f !important;  /* لون إطار الزر عند اختياره */
}
/* التحكم في المسافة العلوية والسفلية لشريط (ستوفر + التقييم) */
custom-salla-product-card .custom-info-bar,
.s-product-card-vertical .custom-info-bar {
    /* المسافة الخارجية: الأعلى والأسفل (عدّل الأرقام حسب رغبتك) */
    margin-top: -5px !important;    /* المسافة العلوية (بين الشريط وصورة المنتج) */
    margin-bottom: -7px !important; /* المسافة السفلية (بين الشريط واسم المنتج/الماركة) */

    /* المسافة الداخلية للشريط نفسه */
    padding-top: 4px !important;   /* حشوة داخلية علوية */
    padding-bottom: 4px !important;/* حشوة داخلية سفلية */
}
/* إضافة حشوة علوية لصورة المنتج داخل البطاقة */
custom-salla-product-card .s-product-card-image,
.s-product-card-vertical .s-product-card-image {
    padding-top: 7px !important; /* يمكنك تعديل القيمة بين 8px و 15px حسب الرغبة */
    box-sizing: border-box !important;
}
:root {
    --img-size: 75px; /* الحجم الطبيعي المتناسق في سلة */
    --img-bg: #ffffff;
    --title-size: 12px;
    --card-bg: #f9f9f9;
    --badge-bg: #fee2e2;
    --badge-txt: #ef4444;
}

/* 1. إخفاء العناصر الزائدة وإلغاء الحركات (مخصص للبحث فقط) */
salla-modal[role="dialog"]:has(.s-search-panel) .s-modal-close, 
.s-search-back-btn, 
.s-search-icon-wrap, 
salla-modal[role="dialog"]:has(.s-search-panel) .s-modal-header, 
salla-modal[role="dialog"]:has(.s-search-panel) .s-modal-spacer, 
.s-search-idle-panel { display: none !important; }

salla-modal[role="dialog"]:has(.s-search-panel), 
.s-search-results, 
.s-search-grid-item { transform: none !important; transition: none !important; animation: none !important; }

/* 2. تثبيت النافذة في الأعلى وتفعيل الإغلاق من الفراغ (مخصص للبحث فقط) */
salla-modal[role="dialog"]:has(.s-search-panel):not(.s-hidden), 
salla-modal[role="dialog"]:has(.s-search-panel) .s-modal-container:not(.s-hidden) {
    display: flex !important; align-items: flex-start !important; justify-content: center !important;
    position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important;
    background: rgba(0,0,0,0.4) !important; backdrop-filter: blur(2px) !important;
    z-index: 999999 !important; padding: 65px 10px 0 !important; box-sizing: border-box !important;
}

salla-modal[role="dialog"]:has(.s-search-panel) .s-modal-wrapper, 
salla-modal[role="dialog"]:has(.s-search-panel) .s-modal-body { pointer-events: none !important; }

salla-modal[role="dialog"]:has(.s-search-panel) .s-search-panel, 
salla-modal[role="dialog"]:has(.s-search-panel) .s-search-results { pointer-events: auto !important; }

salla-modal[role="dialog"]:has(.s-search-panel) .s-search-panel, 
salla-modal[role="dialog"]:has(.s-search-panel) .s-search-container, 
salla-modal[role="dialog"]:has(.s-search-panel) .s-search-modal { height: auto !important; max-height: fit-content !important; }

salla-modal[role="dialog"]:has(.s-search-panel) .s-modal-wrapper, 
salla-modal[role="dialog"]:has(.s-search-panel) .s-modal-body, 
salla-modal[role="dialog"]:has(.s-search-panel) .s-search-panel, 
salla-modal[role="dialog"]:has(.s-search-panel) .s-search-container, 
salla-modal[role="dialog"]:has(.s-search-panel) .s-search-modal, 
salla-modal[role="dialog"]:has(.s-search-panel) .s-search-input-row, 
salla-modal[role="dialog"]:has(.s-search-panel) .s-search-input-wrapper {
    width: 100% !important; background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; margin: 0 !important; display: block !important;
}

/* 3. شريط البحث العلوي */
.s-search-input, salla-modal input[type="search"], salla-search input, input.s-search-input:focus {
    width: 100% !important; height: 50px !important; background-color: #fff !important; border: none !important; border-radius: 10px !important;
    padding: 0 42px 0 80px !important; font-size: 16px !important; color: #000 !important; box-sizing: border-box !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.12) !important; outline: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' y1='19' x2='12' y2='23'/%3E%3Cline x1='8' y1='23' x2='16' y2='23'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 14px center, left 46px center, left 14px center !important; background-size: 18px, 21px, 20px !important;
}

/* 4. القائمة المنسدلة والمنتجات */
.s-search-results, .s-search-results-body {
    width: 100% !important; background: #fff !important; border-radius: 12px !important; margin-top: 6px !important; padding: 8px 8px 0 !important;
    max-height: 60vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important; display: block !important;
}

.s-search-grid-item, .s-search-product-card, salla-search-product-card {
    width: 100% !important; max-width: 100% !important; background: var(--card-bg) !important; border: none !important; border-radius: 8px !important;
    padding: 6px !important; margin: 0 0 8px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; gap: 10px !important; overflow: hidden !important;
}

/* 5. ضبط المربع الأبيض وحجم الصورة الطبيعي وتوسيطها بدون فراغات */
.s-search-product-card-image {
    width: var(--img-size) !important; height: var(--img-size) !important; min-width: var(--img-size) !important;
    background-color: var(--img-bg) !important; border-radius: 6px !important; padding: 4px !important;
    box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important;
}

.s-search-grid-item img, salla-search-product-card img {
    width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important;
    background-color: var(--img-bg) !important; object-fit: contain !important; object-position: center !important;
    border-radius: 4px !important; padding: 0 !important; margin: 0 !important; display: block !important;
}

/* 6. النصوص وشارة نفاذ الكمية */
.s-search-grid-item > div, .s-search-product-card-content, .s-search-product-details {
    display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; flex: 1 !important;
}

.s-search-grid-item h3, .s-search-grid-item h4, .s-search-grid-item .s-search-product-title, .s-search-grid-item a {
    font-size: var(--title-size) !important; color: #1f2937 !important; margin: 0 0 4px !important; line-height: 1.4 !important; text-align: right !important;
}

.s-search-grid-item .out-of-stock-label, .s-search-grid-item [class*="stock"], .s-search-grid-item [class*="badge"], .s-search-grid-item .text-danger {
    display: inline-block !important; background: var(--badge-bg) !important; color: var(--badge-txt) !important;
    font-size: 10px !important; font-weight: bold !important; padding: 3px 8px !important; border-radius: 4px !important; margin-top: 4px !important;
}
/* 1. التحكم في الإطار، اللون، والموقع لحاوية التقييم */
salla-rating-stars, 
.s-rating-stars, 
.product-rating {
    /* --- التحكم في اللون والإطار --- */
    background-color: #f9f9f9 !important; /* لون خلفية صندوق التقييم */
    border: 0px solid #e5e7eb !important; /* سُمك ولون الإطار */
    border-radius: 8px !important; /* درجة انحناء زوايا الإطار */
    padding: 8px 12px !important; /* المسافة الداخلية بين الإطار والمحتوى */
    
    /* --- التحكم في الموقع (المسافات الخارجية) --- */
    margin-top: 10px !important; /* المسافة من الأعلى لتنزيل القسم */
    margin-bottom: 10px !important; /* المسافة من الأسفل */
    
    /* إذا أردت توسيط القسم */
    display: inline-flex !important; 
    align-items: center !important;
    justify-content: center !important;
}

/* 2. التحكم في لون النجوم والنص داخل التقييم */
salla-rating-stars, 
.s-rating-stars {
    color: #ffc107 !important; /* لون النجوم (أصفر مثلاً) */
}

/* 3. التحكم في موقع القسم إذا كان داخل حاوية مرنة (Flexbox) */
/* قم بإزالة علامات التعليق وتغيير الرقم إذا أردت رفع أو تنزيل ترتيب القسم بالكامل بين العناصر الأخرى */
/*
.product-details-wrapper salla-rating-stars {
    order: -1 !important; 
}
*/
/* 1. تفعيل نظام الترتيب المرن للحاوية الرئيسية لصفحة المنتج */
.app-inner, 
.product-details, 
.product-detail-container {
    display: flex !important;
    flex-direction: column !important;
}

/* 2. التحكم في موقع قسم الوصف وقسم التقييمات (نقل التقييم أسفل الوصف) */
/* اعطاء الوصف ترتيب يسبق التقييم */
.product__description, 
.s-product-detail__description, 
[class*="product-description"] {
    order: 4 !important; 
}

/* اعطاء صندوق التقييمات ترتيب يجعله أسفل الوصف */
salla-reviews, 
.product-reviews, 
.s-comments-wrapper,
#product-reviews {
    order: 5 !important; /* رقم أكبر يعني أنه سيظهر في الأسفل */
    
    /* 3. التحكم في لون وإطار صندوق التقييمات بالكامل */
    background-color: #fcfcfc !important; /* لون خلفية القسم (تستطيع تغييره) */
    border: 0px solid #d1d5db !important; /* سُمك ولون الإطار */
    border-radius: 12px !important; /* درجة انحناء زوايا الإطار */
    padding: 20px !important; /* المسافة الداخلية لتوسيع الصندوق */
    margin-top: 25px !important; /* مسافة فاصلة بينه وبين الوصف أعلاه */
    margin-bottom: 25px !important;
    width: 100% !important; /* لضمان أخذ العرض بالكامل */
    box-sizing: border-box !important;
}