/* =========================================
   الملف: custom-styles.css
   الهوية البصرية لقالب "رائد" - بيت القافلة للتجارة
   تم التعديل والتصحيح بواسطة فريق التطوير
   ========================================= */

/* =========================================
   1. المتغيرات الأساسية (Custom Properties)
   ========================================= */
:root {
  --color-primary: #A41D22;            /* أحمر أساسي */
  --color-primary-dark: #6B1E2D;       /* أحمر غامق */
  --color-secondary: #FEDE00;          /* أصفر ساطع */
  --color-secondary-gold: #D4A017;     /* ذهبي أهدأ */
  --color-beige: #f6f3ee;              /* بيج فاتح */
  --color-brown: #6b4423;              /* بني طبيعي */
  --color-white: #ffffff;
  --color-primary-beige: #fff;
    --color-beige-tow: #f8f4ec;
   --color-beige-f: #fdfbf7;


  /* ===== المتغيرات المضافة حديثاً (لإصلاح الأخطاء) ===== */
  --dark-red: #6B1E2D;                 /* مرادف للـ primary-dark */
  --calm-gold: #D4A017;                /* مرادف للـ secondary-gold */
}
body{
  background-color: var(--color-beige-f) !important;
}

/* =========================================
   2. تنسيقات الشريط العلوي (Top Navbar)
   ========================================= */
.store-header .top-navbar {
    background-color: var(--color-primary) !important;
    border-bottom: 2px solid var(--color-secondary-gold);
    padding: 8px 0;
}

.s-menu-topnav-item {
    color: var(--color-beige) !important;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
    position: relative;
    text-decoration: none;
}

.s-menu-topnav-item:hover {
    color: var(--color-secondary) !important;
}
.s-menu-topnav-item::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    right: 0;
    background-color: var(--color-secondary-gold);
    transition: width 0.3s ease-in-out;
}
.s-menu-topnav-item:hover::after {
    width: 100%;
}

.s-contacts-topnav-link {
    color: var(--color-beige) !important;
    font-weight: 500;
    transition: color 0.3s ease;
}
.s-contacts-topnav-link:hover {
    color: var(--color-secondary) !important;
}

/* =========================================
   3. تنسيق شريط البحث
   ========================================= */
.header-search .s-search-input {
    background-color: var(--color-white) !important;
    border: 1.5px solid var(--color-secondary-gold) !important;
    color: var(--color-primary-dark) !important;
    transition: all 0.3s ease;
}

.header-search .s-search-input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 8px rgba(164, 29, 34, 0.2) !important;
    outline: none;
}

.header-search .s-search-icon svg {
    fill: var(--color-primary) !important;
    transition: fill 0.3s ease;
}
.header-search:hover .s-search-icon svg {
    fill: var(--color-primary-dark) !important;
}
.main-nav-container{
   background-color: var(--color-beige-f) !important;
}

custom-main-menu .main-menu > li > a{
    color: #6B1E2D !important;
}
/* =========================================
   أيقونات السلة والمستخدم بخطوط خارجية فقط (Muted / Outline Icons)
   ========================================= */

/* 1. ضبط الحاوية المجمعة لضمان محاذاة الأيقونات عمودياً */
.store-header .flex.items-center.justify-end,
.main-nav-container .flex.items-center {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

/* 2. إخفاء جميع الأيقونات الافتراضية القديمة */
.s-cart-summary-icon svg,
.s-cart-summary-wrapper .sicon-shopping-bag,
.s-user-menu-login-btn svg {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 3. تفريغ غلاف السلة والمستخدم */
.s-cart-summary-wrapper,
header .s-cart-summary-wrapper,
.main-nav-container .s-cart-summary-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    position: relative !important;
    vertical-align: middle !important;
}

/* 4. حاوية أيقونة السلة */
#s-cart-icon,
.s-cart-summary-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 5. أيقونة السلة المفرغة (Outline Shopping Bag / Cart) */
#s-cart-icon::before {
    content: '' !important;
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    background-color: var(--color-primary, #A41D22) !important;
    /* مسار SVG خطي مفرغ بحدود صريحة */
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" 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>') no-repeat center / contain !important;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" 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>') no-repeat center / contain !important;
    transition: transform 0.3s ease, background-color 0.3s ease !important;
}

/* 6. عداد السلة العائم */
.s-cart-summary-count {
    position: absolute !important;
    top: -8px !important;
    right: -10px !important;
      background-color: var(--color-secondary-gold, #A41D22) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    min-width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2px !important;
    border: 2px solid var(--color-beige-f, #fff) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12) !important;
    line-height: 1 !important;
    z-index: 10 !important;
}

/* 7. حاوية زر المستخدم */
.s-user-menu-login-btn,
salla-user-menu {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

/* 8. أيقونة المستخدم المفرغة (Outline User Circle) */
.s-user-menu-login-btn::before {
    content: '' !important;
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    background-color: var(--color-primary, #A41D22) !important;
    /* مسار SVG خطي للمستخدم غير مطموس من الداخل */
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>') no-repeat center / contain !important;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>') no-repeat center / contain !important;
    transition: transform 0.3s ease, background-color 0.3s ease !important;
}

/* 9. محاذاة السعر المالي بجانب الأيقونة */
.s-cart-summary-total {
    color: var(--color-primary-dark) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* 10. تأثير التمرير (Hover) */
.s-cart-summary-wrapper:hover #s-cart-icon::before,
.s-user-menu-login-btn:hover::before {
    background-color: var(--color-primary-dark, #6B1E2D) !important;
    transform: scale(1.08) !important;
}
/* =========================================
   5. التذييل (Footer) - مُصحح
   ========================================= */
.store-footer {
    background-color: var(--color-primary-dark) !important;
    border-top: 4px solid var(--color-secondary-gold);
}

.store-footer__inner{
  background-color: var(--color-beige) !important;
}

.store-footer h3,
.s-contacts-title {
    color: var(--color-primary) !important;
    font-weight: 800;
    margin-bottom: 1.2rem;
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
}

.store-footer p.ql-align-right,
.store-footer .text-sm {
    color: var(--color-brown) !important;
    line-height: 1.8;
    font-weight: 500;
}

.s-menu-footer-item {
    display: block !important;
    color: var(--color-brown) !important;
    padding: 8px 0;
    transition: all .3s ease;
    font-weight: 500;
}

.s-menu-footer-item:hover {
    color: var(--color-primary) !important;
    transform: translateX(-6px);
}

.s-social-link a {
    background-color: var(--color-white);
    border: 1px solid var(--color-secondary-gold);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.s-social-link a svg {
    fill: var(--color-primary);
    transition: fill 0.3s ease;
    width: 20px;
    height: 20px;
}

.s-social-link a:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-4px);
    box-shadow: 0 4px 10px rgba(164, 29, 34, 0.25);
}

.s-social-link a:hover svg {
    fill: var(--color-white);
}

.s-contacts-item {
    color: var(--color-brown) !important;
    transition: color 0.3s ease;
    margin-bottom: 10px;
}

.s-contacts-icon svg {
    fill: var(--color-primary) !important;
}

.s-contacts-item:hover {
    color: var(--color-primary) !important;
}

.s-trust-badges-wrapper,
.tax-badge {
    background-color: var(--color-white);
    border: 1.5px solid var(--color-secondary-gold);
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.s-trust-badges-label,
.tax-badge p,
.tax-badge b,
.s-trust-badges-number {
    color: var(--color-primary-dark) !important;
}
div.tax-badge > div > p,
div.tax-badge > div > b {
    color: #3A1F0F !important;
}

/* ===== الشريط السفلي من الفوتر (مُصحح) ===== */
/* استخدمنا محدداً أكثر مرونة بدلاً من العنصر المباشر */
.store-footer .flex.items-center.container {
    max-width: 100% !important;
    background: var(--color-primary) !important;
    border-radius: 0 !important;
}

.copyright-text p,
.copyright-text a {
    color: var(--color-beige) !important;
}

.copyright-text a:hover {
    color: var(--color-secondary) !important;
}

.s-payments-list-item {
    background-color: var(--color-white);
    border-radius: 4px;
    padding: 3px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* بطاقة الوثائق */
.official-documents {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-right: 30px;
}

.official-documents-title {
    color: var(--color-primary-dark);
    font-size: 20px;
    font-weight: 700;
    position: relative;
    margin-bottom: 8px;
}

.official-documents .flex.gap-4 {
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.official-documents .s-trust-badges-wrapper,
.official-documents .tax-badge {
    width: 230px;
}

/* =========================================
   توسيط احترافي ومُحسّن للفوتر في شاشات الجوال
   ========================================= */
@media (max-width: 768px) {
    /* 1. التوسيط العام وتحويل الشبكة إلى عمود مرتب */
    .store-footer {
        text-align: center !important;
    }
    
    .store-footer > .container > .grid,
    .store-footer__inner > .container > .grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 35px !important;
    }

    /* 2. توسيط العناوين الرئيسية للأقسام */
    .store-footer h3,
    .s-contacts-title,
    .official-documents-title {
        text-align: center !important;
        display: inline-block !important;
        width: auto !important;
        margin: 0 auto 15px auto !important;
    }

    /* 3. القوائم والروابط النصية (الآن تعمل بشكل سليم دون إفساد أيقونات السوشيال) */
    .s-menu-footer-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .s-menu-footer-item {
        display: block !important;
        text-align: center !important;
        margin: 0 !important;
    }

    /* 4. تواصل معنا (الأيقونة بجوار النص) */
    .s-contacts-list-vertical {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .s-contacts-item {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }

    /* 5. الوثائق الرسمية والشارات (أفقي) */
    .official-documents {
        margin: 0 auto !important;
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    .official-documents .flex.gap-4 {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: row !important; /* إجبار أفقي */
        width: 100% !important;
    }

    /* 6. أيقونات التواصل الاجتماعي (إجبار أفقي سليم) */
    .contact-social,
    salla-social,
    ul.s-social-list {
        display: flex !important;
        flex-direction: row !important; /* الترتيب الأفقي */
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 15px !important; /* مسافة بين الأيقونات */
        width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    li.s-social-link {
        display: inline-flex !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 7. شريط الحقوق والدفع */
    .store-footer .flex.items-center.container {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding-bottom: 25px !important;
    }

    /* أيقونات وسائل الدفع (أفقي سليم) */
    salla-payments,
    ul.s-payments-list {
        display: flex !important;
        flex-direction: row !important; /* الترتيب الأفقي */
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    li.s-payments-list-item {
        display: inline-flex !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* =========================================
   فاصل مميز بين تواصل معنا والتواصل الاجتماعي (للجوال)
   ========================================= */
.contact-social {
    position: relative !important;
    margin-top: 30px !important;
    padding-top: 30px !important;
    width: 100% !important;
}

/* رسم الخط المتدرج الذهبي والأحمر */
.contact-social::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 65%; /* عرض الخط */
    height: 3px;
    background: linear-gradient(
        90deg, 
        transparent, 
        var(--color-secondary-gold), 
        var(--color-primary), 
        var(--color-secondary-gold), 
        transparent
    );
    border-radius: 5px;
}

/* الزخرفة (النجمة) في منتصف الخط */
.contact-social::after {
    content: "✦";
    position: absolute;
    top: -11px; /* لضبط النجمة في منتصف الخط تماماً */
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-primary);
    background-color: var(--color-beige); /* نفس لون خلفية الفوتر الداخلي لتبدو كأنها تقطع الخط */
    padding: 0 15px;
    font-size: 18px;
}
/* =========================================
   6. بطاقات المنتجات (مُحدث - بتوسيط احترافي)
   ========================================= */
custom-salla-product-card {
    background-color: var(--color-primary-beige) !important;
    border: 1px solid var(--color-secondary-gold) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease-in-out !important;
    text-align: center !important; /* توسيط عام للنصوص */
}

/* 1. توسيط المحتوى الداخلي بالكامل */
custom-salla-product-card .s-product-card-content{

    display:flex !important;
    flex-direction:column !important;

    align-items:stretch !important;

    width:100% !important;

    padding:16px !important;

    box-sizing:border-box !important;
}

/* توسيط العنوان */
custom-salla-product-card .s-product-card-title {
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto 8px auto !important;
}

/* توسيط نجوم التقييم إن وجدت */
custom-salla-product-card .s-product-card-rating-wrapper,
custom-salla-product-card .s-rating-stars {
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto 10px auto !important;
}

/* 2. إعادة ترتيب الفوتر (السعر وزر الإضافة) ليكونا تحت بعضهما في المنتصف */
custom-salla-product-card .s-product-card-content-footer{

    width:100% !important;

    display:flex !important;

    justify-content:stretch !important;

    margin-top:14px !important;
}

/* تنسيق وتوسيط السعر */
custom-salla-product-card .s-product-card-price {
    display: flex !important;
    justify-content: center !important;
    color: var(--color-primary) !important;
    font-weight: 800 !important;
    font-size: 1.15rem !important;
    width: 100% !important;
    margin: 0 !important;
}
/* ======================================
   زر إضافة للسلة - ثيم رائد
====================================== */



custom-salla-product-card .s-product-card-content-footer salla-add-product-button{
    width:100% !important;
    display:block !important;
}

custom-salla-product-card .s-product-card-content-footer salla-add-product-button>.w-full{
    width:100% !important;
}

custom-salla-product-card .s-product-card-content-footer salla-button{
    display:block !important;
    width:100% !important;
}

custom-salla-product-card .s-product-card-content-footer .s-button-element{

    width:100% !important;
    min-width:100% !important;
    max-width:none !important;

    height:42px !important;      /* كان 50px */
    padding:0 12px !important;   /* تقليل الحشوة */

    border-radius:14px !important;

    font-size:13px !important;   /* تصغير الخط */
    font-weight:600 !important;  /* تخفيف سماكة الخط */
}

custom-salla-product-card .s-product-card-content-footer .s-button-text{

    width:100% !important;

    display:flex !important;
    justify-content:center !important;
    align-items:center !important;

    gap:5px !important;          /* تقليل المسافة بين الأيقونة والنص */
    font-size:13px !important;
    line-height:1 !important;
}

custom-salla-product-card .s-product-card-content-footer .s-button-element:hover{

    background:var(--color-primary) !important;
    color:#fff !important;
    border-color:var(--color-primary) !important;

    transform:translateY(-2px);
}

/* زر المفضلة */
custom-salla-product-card .s-product-card-wishlist-btn {
    border-color: var(--color-beige) !important;
    background-color: var(--color-white) !important;
}

custom-salla-product-card .s-product-card-wishlist-btn i {
    color: var(--color-primary) !important;
}


/* =========================================
   11. آراء العملاء - Premium Testimonials
========================================= */

/* خلفية القسم */
.s-reviews-container{
    padding:40px 20px !important;
    position:relative;
  
}


/* عنوان القسم */
.s-reviews-header-wrapper{
    text-align:center;
    margin-bottom:45px;
}

.s-reviews-header{
    color:var(--color-primary-dark)!important;
    font-size:32px!important;
    font-weight:800!important;
    position:relative;
    display:inline-block;
}



/* بطاقة التقييم */
.s-reviews-testimonial__inner{

    background:#ffffff !important;

    border:1px solid rgba(212,160,23,.18)!important;

    border-radius:24px!important;

    padding:35px 35px 30px!important;

    min-height:240px;

    box-shadow:
    0 10px 30px rgba(107,30,45,.08)!important;

    transition:.35s ease;

    position:relative;

    overflow:hidden;

}


/* تأثير عند المرور */

.s-reviews-testimonial__inner:hover{

    transform:translateY(-6px);

    box-shadow:
    0 18px 40px rgba(107,30,45,.14)!important;

}


/* خط ذهبي أعلى البطاقة */

.s-reviews-testimonial__inner::before{

    content:"";

    position:absolute;

    top:0;
    right:0;
    left:0;

    height:4px;

    background:linear-gradient(
    90deg,
    var(--color-secondary-gold),
    var(--color-secondary)
    );

}


/* صورة العميل */

.s-reviews-testimonial__avatar{

    margin-bottom:18px;

}


.s-reviews-testimonial__avatar img{

    width:75px!important;
    height:75px!important;

    border-radius:50%!important;

    object-fit:cover;

    border:3px solid var(--color-secondary-gold)!important;

    padding:3px;

    background:white;

    box-shadow:
    0 5px 15px rgba(0,0,0,.08);

}


/* نص العميل */

.s-reviews-testimonial__text p{

    color:#555!important;

    font-size:15px!important;

    line-height:2!important;

    margin-bottom:20px!important;

    font-weight:500;

}


/* اسم العميل */

.s-reviews-testimonial__info h2{

    color:var(--color-primary-dark)!important;

    font-size:16px!important;

    font-weight:700!important;

}


/* النجوم */

.s-rating-stars-selected svg{

    fill:var(--color-secondary-gold)!important;

    width:18px!important;

    height:18px!important;

}


/* ترتيب الاسم والنجوم */

.s-reviews-testimonial__name_wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-top:1px solid #f3eee5;

    padding-top:15px;

}


/* علامة الاقتباس */

.s-reviews-testimonial__icon{

    position:absolute;

    bottom:20px;

    left:25px;

    opacity:.12;

}


.s-reviews-testimonial__icon svg{

    width:55px!important;

    height:55px!important;

    fill:var(--color-primary)!important;

}



/* أزرار السلايدر */

.s-reviews-container .s-slider-nav-arrow{

    background:white!important;

    border:1px solid #eee!important;

    width:42px!important;

    height:42px!important;

    border-radius:50%!important;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}


.s-reviews-container .s-slider-nav-arrow svg{

    fill:var(--color-primary)!important;

}



/* موبايل */

@media(max-width:768px){

.s-reviews-container{

    padding:50px 15px;

}


.s-reviews-header{

    font-size:26px!important;

}


.s-reviews-testimonial__inner{

    padding:28px 22px!important;

}

}
/* =========================================
   7. عناوين الأقسام - مُوحَّد ومُصحَّح (توسيط دقيق 100%)
   ========================================= */

/* 1. إجبار حاوية العنوان الرئيسية على التوسيط المطلق */
.s-block__header,
.s-slider-block__header,
.s-slider-block__title-right,
.s-reviews-header-wrapper,
.bq-section-header {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    text-align: center !important;
}

/* 2. فصل الأزرار الجانبية (مثل: عرض الكل) حتى لا تدفع العنوان لليمين */
.s-block__header-actions,
.s-slider-block__header-actions {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10;
}

/* 3. إعطاء مساحة كاملة لحاوية النص الداخلي */
.s-slider-block__title,
.s-block__title {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

/* 4. تنسيق العنوان الأساسي (h2) لكل الأقسام */
.s-slider-block__title h2,
.s-reviews-header h1,
.s-block--reviews .s-block__title h2,
.s-block__title h2,
.bq-section-title {
    position: relative;
    display: inline-block !important;
    text-align: center;
    color: var(--color-primary-dark) !important;
    font-size: 26px !important; 
    font-weight: 800 !important;
    padding: 0 15px 22px !important; 
    letter-spacing: .5px;
    margin: 0 auto 20px auto !important;
    white-space: nowrap !important; 
}

/* تصغير إضافي للعناوين في الجوال لضمان بقائها في سطر واحد */
@media (max-width: 768px) {
    .s-slider-block__title h2,
    .s-reviews-header h1,
    .s-block--reviews .s-block__title h2,
    .s-block__title h2,
    .bq-section-title {
        font-size: 18px !important; 
        padding: 0 5px 20px !important;
    }
    
    .bq-section-header {
        margin: 0 auto 40px !important; 
    }
}

/* الخط الذهبي أسفل العنوان (بنفس تصميم فاصل التواصل) */
.s-slider-block__title h2::before,
.s-reviews-header h1::before,
.s-block--reviews .s-block__title h2::before,
.s-block__title h2::before,
.bq-section-title::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 55vw; /* يأخذ 65% من عرض الشاشة بالكامل ليكون مطابقاً للفوتر */
    max-width: 350px; /* حد أقصى حتى لا يصبح مبالغاً بالطول في شاشات الكمبيوتر */
    height: 3px; /* سماكة الخط */
    background: linear-gradient(
        90deg, 
        transparent, 
        var(--color-secondary-gold), 
        var(--color-primary), 
        var(--color-secondary-gold), 
        transparent
    );
    border-radius: 5px;
}

/* الزخرفة (النجمة) في منتصف الخط (بنفس تصميم فاصل التواصل) */
.s-slider-block__title h2::after,
.s-reviews-header h1::after,
.s-block--reviews .s-block__title h2::after,
.s-block__title h2::after,
.bq-section-title::after {
    content: "✦";
    position: absolute;
    bottom: -8px; /* تم الضبط بدقة لتتوسط الخط السفلي */
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-primary); /* اللون الأحمر للنجمة */
    background-color: var(--color-beige-f); /* لون خلفية الموقع لتقطع الخط بشكل نظيف ومخفي */
    padding: 0 15px; /* نفس الحشوة المطلوبة */
    font-size: 18px; /* نفس الحجم المطلوب */
    line-height: 1;
}

/* =========================================
   إضافة هامة: إخفاء الفاصل القديم لقسم لماذا بيت قافلة
   ========================================= */


/* =========================================
   8. أسهم التنقل في السلايدر
   ========================================= */
.s-slider-nav-arrow {
    position: absolute !important;
    top: 60% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background-color: var(--color-white) !important;
    border: 1.5px solid var(--color-secondary-gold) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.s-slider-prev {
    right: -15px !important;
}

.s-slider-next {
    left: -15px !important;
}

.s-slider-nav-arrow .s-slider-button-icon svg {
    fill: var(--color-brown) !important;
    width: 22px !important;
    height: 22px !important;
    transition: fill 0.3s ease !important;
}

.s-slider-nav-arrow:hover:not(:disabled) {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    transform: translateY(-50%) scale(1.1) !important;
    box-shadow: 0 6px 15px rgba(164, 29, 34, 0.25) !important;
}

.s-slider-nav-arrow:hover:not(:disabled) .s-slider-button-icon svg {
    fill: var(--color-white) !important;
}

.s-slider-nav-arrow:disabled {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* استجابة للجوال */
@media (max-width: 768px) {
    .s-slider-nav-arrow {
        width: 36px !important;
        height: 36px !important;
        top: 55% !important;
    }
    .s-slider-prev {
        right: 8px !important;
    }
    .s-slider-next {
        left: 8px !important;
    }
    .s-slider-nav-arrow .s-slider-button-icon svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* =========================================
   9. التبويبات (Tabs)
   ========================================= */
.s-block-tabs.bg-gray-100 {
    background-color: #fdfaf5 !important;
}

.tab-trigger .s-button-element {
    color: var(--color-primary-dark) !important;
    border-color: var(--color-secondary-gold) !important;
    background-color: var(--color-white) !important;
    border-radius: 30px !important;
    transition: all 0.3s ease !important;
}

.tab-trigger.is-active .s-button-element {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 4px 10px rgba(164, 29, 34, 0.2);
}

/* =========================================
   10. قسم ميزات المتجر
   ========================================= */
.s-block--features__item {
    background-color: var(--color-white) !important;
    border: 1px solid var(--color-beige) !important;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.s-block--features__item:hover {
    transform: translateY(-5px);
    border-color: var(--color-secondary-gold) !important;
}

/* استهداف SVG بدلاً من i لضمان التوافق */
.s-block--features__item .feature-icon svg {
    fill: var(--color-secondary-gold) !important;
    width: 2.5rem;
    height: 2.5rem;
}

.s-block--features__item h2 {
    color: var(--color-primary-dark) !important;
}
.s-block--features__item p {
    color: var(--color-brown) !important;
}


/* =========================================
   12. التصنيفات الدائرية - إصلاح إظهار الأسماء
   ========================================= */

/* 1. إلغاء إخفاء العناصر الزائدة عن الحدود لجميع الحاويات الحاضنة */
.s-block--main-links,
#main-links-9,
#main-links-9 .swiper,
#main-links-9 .swiper-container,
#main-links-9 .swiper-wrapper,
#main-links-9 .swiper-slide {
    overflow: visible !important;
    padding-bottom: 25px !important; /* مساحة كافية لظهور النص أسفل الدائرة */
}

/* 2. ضبط بطاقة التصنيف لتعرض الدائرة والنص بشكل عمودي */
.slide--cat-entry {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 5px !important;
    text-decoration: none !important;
    height: auto !important;
}

/* 3. تنسيق شكل الصورة/الأيقونة الدائرية */
.slide--cat-entry img,
.slide--cat-entry i,
.slide--cat-entry .s-main-link-icon {
    width: 110px !important;  /* تم تحسين الحجم ليتناسب مع الجوال والشاشات */
    height: 110px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    padding: 4px !important;
    background-color: #ffffff !important;
    border: 2px solid var(--color-secondary-gold) !important;
    margin: 0 auto 12px auto !important;
    transition: transform 0.3s ease, border-color 0.3s ease !important;
}

.slide--cat-entry i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 45px !important;
    color: var(--color-primary) !important;
}

/* تأثير التمرير (Hover) على الدائرة */
.slide--cat-entry:hover img,
.slide--cat-entry:hover i,
.slide--cat-entry:hover .s-main-link-icon {
    transform: translateY(-5px) scale(1.03) !important;
    border-color: var(--color-primary) !important;
}

/* 4. إظهار وتنسيق اسم التصنيف (شامل جميع الفئات المحتملة في سلة) */
.slide--cat-entry h2,
.slide--cat-entry span,
.slide--cat-entry .s-main-link-title {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--color-primary-dark) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    white-space: normal !important; /* السماح بالتفاف النص إذا كان الاسم طويلاً */
    word-break: break-word !important;
    transition: color 0.3s ease !important;
}

/* تغيير لون النص عند حوم الماوس */
.slide--cat-entry:hover h2,
.slide--cat-entry:hover span,
.slide--cat-entry:hover .s-main-link-title {
    color: var(--color-primary) !important;
}

/* 5. تحسين العرض على شاشات الجوال */
@media (max-width: 768px) {
    .slide--cat-entry img,
    .slide--cat-entry i,
    .slide--cat-entry .s-main-link-icon {
        width: 85px !important;
        height: 85px !important;
    }
    
    .slide--cat-entry h2,
    .slide--cat-entry span,
    .slide--cat-entry .s-main-link-title {
        font-size: 13px !important;
    }
}
/* =========================================
   13. سلة المشتريات وإتمام الطلب
   ========================================= */
salla-cart-item {
    background-color: var(--color-white) !important;
    border: 1px solid var(--color-beige) !important;
    border-radius: 12px !important;
    margin-bottom: 15px !important;
    transition: all 0.3s ease !important;
    display: block !important;
}

salla-cart-item:hover {
    border-color: var(--color-secondary-gold) !important;
    box-shadow: 0 4px 12px rgba(107, 30, 45, 0.05) !important;
}

salla-cart-item .s-cart-item-title {
    color: var(--color-primary-dark) !important;
    font-weight: 700 !important;
    transition: color 0.3s ease;
}
salla-cart-item .s-cart-item-title:hover {
    color: var(--color-primary) !important;
}

salla-cart-item .s-cart-item-total {
    color: var(--color-primary) !important;
    font-weight: 800 !important;
    font-size: 1.15rem !important;
}

salla-quantity-input .s-quantity-input-button {
    background-color: var(--color-white) !important;
    color: var(--color-primary-dark) !important;
    border: 1px solid var(--color-secondary-gold) !important;
    transition: all 0.3s ease !important;
}

salla-quantity-input .s-quantity-input-button:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-color: var(--color-primary) !important;
}

salla-quantity-input input {
    color: var(--color-primary-dark) !important;
    font-weight: bold !important;
}

salla-cart-item .s-cart-item-delete-btn {
    color: var(--color-brown) !important;
    transition: all 0.3s ease !important;
}
salla-cart-item .s-cart-item-delete-btn:hover {
    color: var(--color-primary) !important;
    background-color: #fff5f5 !important;
    border-radius: 50%;
}

.s-cart-summary-wrapper {
    background-color: var(--color-beige) !important;
    border: 1px solid var(--color-secondary-gold) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03) !important;
}

.s-cart-summary-label {
    color: var(--color-primary-dark) !important;
    font-weight: 600 !important;
}

.s-cart-summary-amount.total {
    color: var(--color-primary) !important;
    font-weight: 900 !important;
    font-size: 1.3rem !important;
}

/* ===== زر إتمام الطلب (مُصحَّح) ===== */
.s-cart-summary-wrapper .btn--checkout .s-button-element,
.s-cart-summary-wrapper .s-button-element[type="submit"] {
    background-color: var(--color-secondary) !important;
    color: var(--color-primary-dark) !important;
    font-weight: 800 !important;
    border: 1px solid var(--color-secondary-gold) !important;
    border-radius: 8px !important;
    font-size: 1.15rem !important;
    padding: 12px 0 !important;
    transition: all 0.3s ease !important;
}

.s-cart-summary-wrapper .btn--checkout .s-button-element:hover,
.s-cart-summary-wrapper .s-button-element[type="submit"]:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-color: var(--color-primary) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 15px rgba(164, 29, 34, 0.2) !important;
}

/* =========================================
   14. القائمة الجانبية للجوال
   ========================================= */
.mm-ocd__content,
.mm-spn {
    background-color: var(--color-beige-f) !important;
}

.mm-spn a,
.mm-spn span {
    color: var(--color-primary-dark) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid rgba(212, 160, 23, 0.2) !important;
}

.mm-spn a:hover,
.mm-spn li.mm-spn--open > a,
.mm-spn li.mm-spn--open > span {
    color: var(--color-primary) !important;
    background-color: rgba(164, 29, 34, 0.05) !important;
}

.close-mobile-menu {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 10px rgba(164, 29, 34, 0.3) !important;
    transition: all 0.3s ease !important;
}

.close-mobile-menu:hover {
    background-color: var(--color-secondary-gold) !important;
}

/* =========================================
   15. صفحات المحتوى (من نحن، سياسات...)
   ========================================= */
.s-page-container,
.store-page {
    background-color: var(--color-white) !important;
    border: 1px solid var(--color-secondary-gold) !important;
    border-radius: 12px !important;
    padding: 30px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03) !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
}

.page-title,
.store-page__title {
    color: var(--color-primary-dark) !important;
    font-weight: 800 !important;
    font-size: 1.8rem !important;
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 30px;
}

.page-title::after,
.store-page__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60px;
    height: 4px;
    background-color: var(--color-primary);
    border-radius: 4px;
}

.page-content p,
.ql-editor p,
.ql-align-right {
    color: var(--color-brown) !important;
    line-height: 2 !important;
    font-size: 1.1rem !important;
}

.page-content a,
.ql-editor a {
    color: var(--color-primary) !important;
    font-weight: bold;
    text-decoration: underline;
    text-decoration-color: var(--color-secondary-gold);
    text-underline-offset: 4px;
    transition: all 0.3s ease;
}

.page-content a:hover,
.ql-editor a:hover {
    color: var(--color-secondary-gold) !important;
    text-decoration-color: var(--color-primary);
}

/* =========================================
   16. صفحة تفاصيل المنتج
   ========================================= */
.main-content h1 {
    
    font-weight: 700 !important;
    position: relative;
    padding-bottom: 12px;
}

.price-wrapper .total-price {
    color: var(--color-primary) !important;
    font-weight: 500 !important;
    
}

.price-wrapper .before-price {
    color: var(--color-brown) !important;
    opacity: 0.6;
}

.product__description {
    background-color: #f3f4f6 !important;
    border-right: 4px solid var(--color-secondary-gold) !important;
    border-radius: 8px;
    padding: 20px !important;
    margin-top: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.product__description p,
.product__description li {
    color: #000000 !important;
    line-height: 2 !important;
  
}

salla-product-options .s-product-options-option-label b {
    color: var(--color-primary-dark) !important;
}

salla-product-options select.s-form-control {
    border: 1.5px solid var(--color-secondary-gold) !important;
    color: var(--color-primary-dark) !important;
    border-radius: 8px !important;
    background-color: var(--color-white) !important;
    font-weight: 600;
}

salla-product-options select.s-form-control:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 5px rgba(164, 29, 34, 0.2) !important;
    outline: none;
}



/* 2. شريط الكمية والشراء (الجزء السفلي من الإطار الموحد) */
.sticky-product-bar {
    background-color: var(--color-white) !important;
    border: 1px solid var(--color-secondary-gold) !important;
    border-top: none !important; /* إزالة الحد العلوي ليلتحم مع السعر تماماً */
    border-radius: 0 0 12px 12px !important; /* حواف دائرية من الأسفل فقط */
    padding: 5px 20px 20px 20px !important;
    margin-top: 0 !important;
    box-shadow: 0 8px 15px rgba(0,0,0,0.03) !important; /* ظل خفيف يعطي بروزاً للإطار بالكامل */
}

/* زر إضافة للسلة في صفحة المنتج */
salla-add-product-button .s-button-element {
    background-color: var(--color-secondary) !important;
    color: var(--color-primary-dark) !important;
    font-weight: 800 !important;
    font-size: 1.15rem !important;
    border: 1px solid var(--color-secondary-gold) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    transition: all 0.3s ease !important;
    height: 90%;
}

salla-add-product-button .s-button-element:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-color: var(--color-primary) !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(164, 29, 34, 0.25) !important;
}

.btn--wishlist .s-button-element {
    background-color: var(--color-white) !important;
    border-color: var(--color-secondary-gold) !important;
    transition: all 0.3s ease !important;
}

.btn--wishlist .s-button-element i {
    color: var(--color-primary) !important;
}

.btn--wishlist .s-button-element:hover {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.btn--wishlist .s-button-element:hover i {
    color: var(--color-white) !important;
}

.bg-white.py-2\.5.mb-5.rounded-md {
    background-color: var(--color-primary-beige) !important;
    border: 1px solid var(--color-secondary-gold) !important;
    color: var(--color-primary-dark) !important;
    font-weight: bold;
}
.bg-white.py-2\.5.mb-5.rounded-md i {
    color: var(--color-primary) !important;
}



/* =========================================
   17. البانرات الرئيسية والمسافات العامة (مُعدّل لتباعد احترافي)
   ========================================= */

/* 1. ضبط التباعد العام لكافة أقسام الصفحة الرئيسية */
.s-block {
    margin-top: 0 !important;
    margin-bottom: 60px !important; /* مسافة متناسقة ومريحة بين كل قسم والآخر */
}

/* 2. تباعد أقسام الصفحة الرئيسية المتتالية */
.home-sections {
    display: flex !important;
    flex-direction: column !important;
    gap: 50px !important; /* مسافة موحدة وثابتة بين العناصر الداخلية */
}

/* 3. إلغاء تصغير الحشوات الداخلية للحاويات */
.home-sections .container,
.s-block-container {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

/* 4. تباعد السلايدرات والبنرات الرئيسية */
.s-slider-block,
.s-block--hero-slider {
    margin-bottom: 50px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* 5. ضبط البانر الثابت العلوي (Hero Banner) */
.s-block--fixed-banner:first-of-type {
    margin-bottom: 40px !important;
}

.s-block--fixed-banner:first-of-type .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.s-block--fixed-banner:first-of-type .banner,
.s-block--fixed-banner:first-of-type img {
    width: 100% !important;
    max-width: 100% !important;
    display: block;
    height: auto !important;
    object-fit: cover !important;
}

/* 6. استجابة التباعد على شاشات الجوال (Mobile Spacing) */
@media (max-width: 768px) {
    .s-block {
        margin-bottom: 35px !important; /* تقليل المسافة قليلاً للجوال لتناسب الشاشات الصغيرة */
    }

    .home-sections {
        gap: 30px !important;
    }

    .s-slider-block,
    .s-block--hero-slider {
        margin-bottom: 30px !important;
    }
}
/* =========================================
   18. تنسيقات إضافية للتعليقات والتقييمات
   ========================================= */
.s-comments-header-title {
    color: var(--color-primary-dark) !important;
    font-weight: bold;
}

.s-comment-card {
    background-color: var(--color-beige) !important;
    border: 1px solid rgba(212, 160, 23, 0.3) !important;
    border-radius: 12px !important;
    margin-bottom: 15px;
}

.s-comment-card-name {
    color: var(--color-primary-dark) !important;
    font-weight: bold !important;
}

.s-comment-card-content {
    color: var(--color-brown) !important;
}

/* =========================================
   19. تصحيح أزرار الكمية (منع تغير الخلفية)
   ========================================= */
salla-quantity-input .s-quantity-input-button:hover {
    background-color: transparent !important;
    color: var(--color-primary-dark) !important;
    border-color: var(--color-secondary-gold) !important;
}

/* =========================================
   20. نهاية الملف
   ========================================= */
/* =========================================================
   WHY CHOOSE BAIT QAFILAH | Premium Features Section
========================================================= */
.s-reviews-testimonial{
    background:transparent !important;
}

.s-reviews-testimonial__inner{
    background:#fff !important;
    border-radius:24px !important;
}
.bq-features-section{
    position:relative;
    padding:10px 20px !important;
    background:transparent;
}

.bq-container{
    max-width:1320px;
    margin:auto;
}

/*==========================
Title
==========================*/

.bq-section-header{

    width:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    margin:0 auto 60px;

}

.bq-section-title{

    position:relative;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    margin:0 auto;

    padding-bottom:18px;

    font-size:34px;

    font-weight:800;

    color:var(--color-primary-dark);

    text-align:center;

}

.bq-section-title::before{

    content:"";

    position:absolute;

    bottom:0;

    left:50%;

    transform:translateX(-50%);

    width:120px;

    height:4px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--color-secondary-gold),
        transparent
    );

}

.bq-section-subtitle{

    width:100%;

    max-width:650px;

    margin:18px auto 0;

    text-align:center;

    color:var(--color-brown);

    font-size:17px;

    line-height:1.9;

}

/*==========================
Grid
==========================*/

.bq-features-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;
}

/*==========================
Card
==========================*/

.bq-feature-item{

    background:#fff;

    border:1px solid rgba(212,160,23,.18);

    border-radius:24px;

    padding:36px 28px;

    text-align:center;

    transition:.35s ease;

    box-shadow:
    0 10px 30px rgba(0,0,0,.04);

    overflow:hidden;

    position:relative;
}

.bq-feature-item::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(
    90deg,
    var(--color-secondary-gold),
    var(--color-primary));

    transform:scaleX(0);

    transition:.35s;
}

.bq-feature-item:hover{

    transform:translateY(-8px);

    box-shadow:
    0 20px 45px rgba(107,30,45,.12);

    border-color:rgba(164,29,34,.25);
}

.bq-feature-item:hover::before{

    transform:scaleX(1);
}

/*==========================
Icon
==========================*/

.bq-icon{

    width:82px;

    height:82px;

    margin:auto auto 24px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
    135deg,
    #fff,
    #f8f1e5);

    border:2px solid rgba(212,160,23,.30);

    transition:.35s;
}

.bq-icon svg{

    width:38px;

    height:38px;

    stroke:var(--color-primary);

    stroke-width:1.8;

    fill:none;

    transition:.35s;
}

.bq-feature-item:hover .bq-icon{

    background:var(--color-primary);

    border-color:var(--color-primary);

    transform:scale(1.08);
}

.bq-feature-item:hover .bq-icon svg{

    stroke:#fff;
}

/*==========================
Typography
==========================*/

.bq-feature-title{

    font-size:21px;

    font-weight:800;

    color:var(--color-primary-dark);

    margin-bottom:14px;
}

.bq-feature-desc{

    font-size:15px;

    line-height:1.9;

    color:var(--color-brown);

    margin:0;
}

/*==========================
Responsive
==========================*/

@media(max-width:992px){

.bq-features-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:640px){

.bq-features-grid{

grid-template-columns:1fr;

gap:18px;

}

.bq-section-title{

font-size:28px;

}

.bq-section-subtitle{

font-size:15px;

}

.bq-feature-item{

padding:30px 22px;

}

.bq-icon{

width:72px;
height:72px;

}

}


/* =========================================================
   وصف المنتج الموحّد | بيت القافلة للتجارة
   استبدل به قسم "تنسيق وصف المنتجات التلقائي" الحالي بالكامل
========================================================= */

.product__description {
  margin-top: 24px !important;
  padding: 24px !important;
  background: #ffffff !important;
  border: 1px solid rgba(212, 160, 23, 0.35) !important;
  border-right: 4px solid var(--color-secondary-gold) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 18px rgba(107, 30, 45, 0.05) !important;
}

.product__description .article {
  color: #3f342c !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
}

/* الفقرات */
.product__description .article p {
  margin: 0 0 12px !important;
  color: #3f342c !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
}

/* حذف الأسطر الفارغة الناتجة عن المحرر */
.product__description .article p:empty,
.product__description .article p:has(> br:only-child) {
  display: none !important;
}

/* عناوين أقسام الوصف */
.product__description .article h2,
.product__description .article h3,
.product__description .article h4 {
  position: relative !important;
  margin: 22px 0 10px !important;
  padding: 0 14px 8px 0 !important;
  color: var(--color-primary-dark) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  border-bottom: 1px solid #eee7dd !important;
}

.product__description .article h2:first-child,
.product__description .article h3:first-child,
.product__description .article h4:first-child {
  margin-top: 0 !important;
}

.product__description .article h2::before,
.product__description .article h3::before,
.product__description .article h4::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 0;
  width: 4px;
  height: 18px;
  border-radius: 4px;
  background: var(--color-secondary-gold);
}

/* القوائم */
.product__description .article ul,
.product__description .article ol {
  margin: 0 0 16px !important;
  padding-right: 22px !important;
}

.product__description .article ul {
  list-style: none !important;
}

.product__description .article ul li {
  position: relative !important;
  padding-right: 16px !important;
}

.product__description .article ul li::before {
  content: "✓";
  position: absolute;
  right: 0;
  color: var(--color-primary) !important;
  font-weight: 800;
}

.product__description .article li {
  margin-bottom: 7px !important;
  color: #3f342c !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}



/* تحسين العرض على الجوال */
@media (max-width: 768px) {
  .product__description {
    padding: 18px 16px !important;
    border-radius: 12px !important;
  }

  .product__description .article,
  .product__description .article p,
  .product__description .article li {
    font-size: 13.5px !important;
  }

  .product__description .article h2,
  .product__description .article h3,
  .product__description .article h4 {
    font-size: 15.5px !important;
  }
}

/*================ التنسيق والألوان الواتس =================*/
.wa-widget-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  font-family: inherit;
}

.wa-float-btn {
  width: 60px;
  height: 60px;
  background-color: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.wa-float-btn:hover {
  transform: scale(1.1);
}

.wa-float-btn img {
  width: 35px;
  height: 35px;
}

/* النافذة المنبثقة */
.wa-chat-box {
  display: none; /* مخفية افتراضياً */
  width: 300px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.15);
  margin-bottom: 15px;
  overflow: hidden;
  direction: rtl;
}

.wa-header {
  background: #075e54;
  color: #fff;
  padding: 12px 15px;
  position: relative;
}

.wa-title {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
}

.wa-close {
  position: absolute;
  left: 12px;
  top: 8px;
  cursor: pointer;
  font-size: 18px;
}

.wa-body {
  padding: 15px;
  background: #e5ddd5;
}

.wa-msg-bubble {
  background: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 10px;
  display: inline-block;
}

#waUserMessage {
  width: 100%;
  height: 60px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 8px;
  font-size: 13px;
  resize: none;
  box-sizing: border-box;
}

.wa-send-btn {
  width: 100%;
  background: #25d366;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 8px;
  margin-top: 8px;
  cursor: pointer;
  font-weight: bold;
}