/* Add custom CSS styles below */ 


/* ==========================================
   تنسيق رأس الصفحة (Header) باللون البنفسجي
   ========================================== */

/* 1. خلفية الهيدر وشريط التنقل الرئيسي */
.main-header, 
header, 
.site-header {
    background: linear-gradient(135deg, #4A154B 0%, #6B21A8 50%, #7E22CE 100%) !important;
    box-shadow: 0 4px 20px rgba(107, 33, 168, 0.25) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 2. لون النصوص والروابط القائمة */
.main-header a, 
.main-header .nav-link,
header a {
    color: #FFFFFF !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

/* تأثير عند إمرار الماوس على روابط القائمة */
.main-header a:hover, 
.main-header .nav-link:hover {
    color: #E9D5FF !important; /* بنفسجي فاتح ناعم */
    transform: translateY(-1px) !important;
}

/* 3. تحسين صندوق البحث (Search Bar) */
.header-search input, 
.search-input {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    border-radius: 25px !important;
    backdrop-filter: blur(5px) !important;
}

/* نص البحث الافتراضي (Placeholder) */
.header-search input::placeholder {
    color: #D8B4FE !important;
}

/* عند الضغط على صندوق البحث */
.header-search input:focus {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: #C084FC !important;
    box-shadow: 0 0 10px rgba(192, 132, 252, 0.4) !important;
    outline: none !important;
}

/* 4. أيقونات الحساب والسلة والبحث */
.header-icon, 
.header-btn, 
.site-header .icon {
    color: #FFFFFF !important;
    transition: transform 0.3s ease !important;
}

.header-icon:hover, 
.header-btn:hover {
    color: #F3E8FF !important;
    transform: scale(1.1) !important;
}

/* 5. شارات العداد على السلة أو الإشعارات (Cart Badge) */
.badge-count, 
.cart-badge, 
.cart-count {
    background-color: #EC4899 !important; /* لون وردي حاد للتمييز لفت الانتباه */
    color: #FFFFFF !important;
    font-weight: bold !important;
    border: 2px solid #4A154B !important;
}

/* 6. الشريط العلوي للإعلانات (Top Banner/Bar) إن وجد */
.top-header, 
.announcement-bar {
    background-color: #3B0764 !important; /* بنفسجي داكن جداً للتدرج */
    color: #F3E8FF !important;
    font-size: 0.85rem !important;
}

.top-header a, 
.announcement-bar a {
    color: #E9D5FF !important;
    text-decoration: underline !important;
}
/* ==========================================
   تنسيق وتطوير التصنيفات (Categories)
   ========================================== */

/* 1. تنسيق بطاقة التصنيف العامة */
.category-item, 
.categories-slider .swiper-slide, 
.category-card {
    background: #FFFFFF !important;
    border-radius: 18px !important;
    padding: 15px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    border: 1px solid #F3E8FF !important;
    box-shadow: 0 4px 15px rgba(107, 33, 168, 0.06) !important;
    overflow: hidden !important;
    position: relative !important;
}

/* تأثير التكبير والبروز الجذاب عند الوقوف بالماوس */
.category-item:hover, 
.categories-slider .swiper-slide:hover, 
.category-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 12px 25px rgba(126, 34, 206, 0.18) !important;
    border-color: #C084FC !important;
}

/* 2. تحسين صورة التصنيف */
.category-item img, 
.category-card img,
.category-image {
    border-radius: 14px !important;
    transition: transform 0.5s ease !important;
    object-fit: cover !important;
}

/* تأثير التكبير المنساب للصورة داخل البطاقة */
.category-item:hover img, 
.category-card:hover img {
    transform: scale(1.08) !important;
}

/* 3. عناوين أسماء التصنيفات */
.category-title, 
.category-item h3, 
.category-card .title {
    color: #3B0764 !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    margin-top: 12px !important;
    text-align: center !important;
    transition: color 0.3s ease !important;
}

/* تغيير لون العنوان عند الوقوف عليه */
.category-item:hover .category-title, 
.category-card:hover .title {
    color: #7E22CE !important;
}

/* 4. إطار مضيء ناعم حول التصنيفات الدائرية (إذا كان الثيم يعتمد الشكل الدائري) */
.category-item.rounded-full img, 
.category-circle img {
    border: 3px solid #E9D5FF !important;
    padding: 3px !important;
    background-color: #FFFFFF !important;
}

.category-item.rounded-full:hover img, 
.category-circle:hover img {
    border-color: #7E22CE !important;
    box-shadow: 0 0 12px rgba(126, 34, 206, 0.4) !important;
}

/* 5. شريط القائمة الأفقي للتصنيفات (شريط الأقسام السريع أسفل الهيدر) */
.sub-header-menu, 
.categories-nav {
    background-color: #F3E8FF !important;
    border-radius: 12px !important;
    padding: 8px 15px !important;
    margin-bottom: 20px !important;
}

.sub-header-menu a, 
.categories-nav a {
    color: #4A154B !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

/* تغيير لون القسم النشط أو المختار في القائمة الأفقية */
.sub-header-menu a:hover, 
.sub-header-menu a.active,
.categories-nav a:hover {
    background-color: #7E22CE !important;
    color: #FFFFFF !important;
}
/* ==========================================
   تحسين شبكة الروابط السريعة للتصنيفات (Grid)
   ========================================== */

/* 1. ضبط وتنسيق شبكة الحاوي العام للتصنيفات */
.categories-grid, 
.quick-categories-wrapper, 
.categories-section .grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; /* توزيع تلقائي ومتناسق */
    gap: 15px !important; /* مسافة متناسقة بين البطاقات */
    padding: 10px 0 !important;
}

/* 2. تصميم بطاقة الرابط السريع للتصنيف */
.categories-grid a, 
.quick-category-card, 
.category-quick-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(145deg, #FFFFFF, #F9F5FF) !important;
    border: 1px solid #E9D5FF !important;
    border-radius: 16px !important;
    padding: 15px 10px !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 2px 8px rgba(126, 34, 206, 0.05) !important;
}

/* 3. تأثير التفاعل عند مرور الماوس (Hover Effect) */
.categories-grid a:hover, 
.quick-category-card:hover, 
.category-quick-link:hover {
    transform: translateY(-5px) !important;
    background: linear-gradient(145deg, #7E22CE, #6B21A8) !important; /* تحول الخلفية للبنفسجي */
    border-color: #A855F7 !important;
    box-shadow: 0 8px 20px rgba(126, 34, 206, 0.25) !important;
}

/* 4. تنسيق أيقونة أو صورة التصنيف داخل الشبكة */
.categories-grid img, 
.quick-category-card img, 
.category-quick-link img {
    width: 55px !important;
    height: 55px !important;
    object-fit: cover !important;
    border-radius: 50% !important; /* جعل الصورة دائرية أنيقة */
    border: 2px solid #C084FC !important;
    margin-bottom: 10px !important;
    transition: all 0.3s ease !important;
    background-color: #FFFFFF !important;
    padding: 2px !important;
}

/* تغيير شكل إطار الصورة عند التفاعل */
.categories-grid a:hover img, 
.quick-category-card:hover img, 
.category-quick-link:hover img {
    border-color: #FFFFFF !important;
    transform: scale(1.1) rotate(3deg) !important;
}

/* 5. تنسيق اسم التصنيف (النص) */
.categories-grid span, 
.quick-category-card .title, 
.category-quick-link span {
    color: #3B0764 !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    transition: color 0.3s ease !important;
}

/* تغيير لون النص إلى الأبيض عند الوقوف بالماوس */
.categories-grid a:hover span, 
.quick-category-card:hover .title, 
.category-quick-link:hover span {
    color: #FFFFFF !important;
}

/* ==========================================
   تحسين العرض والتجاوب على الشاشات الصغيرة (الجوال)
   ========================================== */
@media (max-width: 768px) {
    .categories-grid, 
    .quick-categories-wrapper, 
    .categories-section .grid {
        grid-template-columns: repeat(3, 1fr) !important; /* عرض 3 تصنيفات في الصف بالجوال */
        gap: 10px !important;
    }

    .categories-grid a, 
    .quick-category-card {
        padding: 10px 5px !important;
        border-radius: 12px !important;
    }

    .categories-grid img, 
    .quick-category-card img {
        width: 45px !important;
        height: 45px !important;
    }

    .categories-grid span, 
    .quick-category-card .title {
        font-size: 0.8rem !important;
    }
}
/* ==========================================
   تحديث الفوتر: خلفية فاتحة ونصوص غامقة واضحة
   ========================================== */

/* 1. خلفية الفوتر فاتحة ونظيفة مع إطار أخضر علوي */
.main-footer, 
footer, 
.site-footer {
    background-color: #F8F5FF !important; /* خلفية ناعمة مائلة للبنفسجي الفاتح جداً */
    border-top: 4px solid #10B981 !important; /* خط علوي بارز باللون الأخضر */
    color: #2D064E !important; /* لون النص الأساسي بنفسجي غامق جداً وواضح */
    padding-top: 40px !important;
    padding-bottom: 20px !important;
}

/* 2. العناوين الرئيسية داخل الفوتر */
.main-footer h1, .main-footer h2, .main-footer h3, .main-footer h4, 
.main-footer .footer-title, 
footer .title {
    color: #21033A !important; /* بنفسجي حبري داكن جداً لقراءة مريحة */
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    margin-bottom: 18px !important;
    position: relative !important;
    padding-bottom: 8px !important;
}

/* خط فاصل أخضر تحت كل عنوان */
.main-footer h3::after, 
.main-footer .footer-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 35px !important;
    height: 3px !important;
    background-color: #059669 !important; /* درجة أخضر واضحة */
    border-radius: 2px !important;
}

/* 3. الروابط والقوائم داخل الفوتر */
.main-footer a, 
footer a {
    color: #3B0764 !important; /* بنفسجي غامق */
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    transition: all 0.3s ease !important;
}

/* تحول لون الرابط عند إمرار الماوس إلى الأخضر */
.main-footer a:hover, 
footer a:hover {
    color: #059669 !important; /* أخضر زاهي عند التفاعل */
    transform: translateX(-4px) !important;
}

/* 4. أيقونات التواصل الاجتماعي */
.social-icons a, 
.footer-social a, 
.social-link {
    background-color: #FFFFFF !important;
    color: #2D064E !important;
    border: 1px solid #D8B4FE !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 8px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
}

.social-icons a:hover, 
.footer-social a:hover, 
.social-link:hover {
    background-color: #10B981 !important; /* تحول الأيقونة للون الأخضر عند التفاعل */
    color: #FFFFFF !important;
    border-color: #10B981 !important;
    transform: translateY(-3px) !important;
}

/* 5. شريط الحقوق السفلي */
.footer-sub, 
.copyright-bar, 
.footer-bottom {
    background-color: #ECE4F7 !important; /* درجة بنفسجية متوسطة للتحديد */
    color: #2D064E !important;
    font-weight: 600 !important;
    padding: 15px 0 !important;
    margin-top: 35px !important;
    border-top: 1px solid #E9D5FF !important;
}

.footer-sub a, 
.copyright-bar a {
    color: #059669 !important;
    font-weight: 700 !important;
}
/* ==========================================
   تطوير قسم آراء وتقييمات العملاء
   ========================================== */

/* 1. تصميم بطاقة الرأي */
.reviews-slider .swiper-slide, 
.review-item, 
.testimonial-card {
    background: #FFFFFF !important;
    border-radius: 18px !important;
    padding: 20px !important;
    border: 1px solid #E9D5FF !important;
    box-shadow: 0 4px 15px rgba(91, 33, 182, 0.05) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

/* بروز البطاقة عند الوقوف عليها */
.reviews-slider .swiper-slide:hover, 
.review-item:hover, 
.testimonial-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.15) !important;
    border-color: #10B981 !important; /* تحديد أخضر من هويتك */
}

/* 2. تحسين مظهر النجوم (Rating Stars) */
.stars, 
.review-rating, 
.salla-rating {
    color: #F59E0B !important; /* أصفر ذهبي ساطع للنجوم */
    font-size: 1.1rem !important;
    margin-bottom: 10px !important;
}

/* 3. تنسيق اسم العميل والتعليق */
.review-author, 
.reviewer-name {
    color: #21033A !important; /* بنفسجي داكن جداً وواضح */
    font-weight: 700 !important;
    font-size: 1rem !important;
    margin-top: 10px !important;
}

.review-text, 
.review-content {
    color: #4B5563 !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}

/* 4. إشارة شارة "عميل موثق" أو "شراء مؤكد" */
.verified-buyer, 
.review-badge {
    background-color: #D1FAE5 !important;
    color: #059669 !important; /* بنفس درجات الأخضر الخاصة بالمتجر */
    font-size: 0.75rem !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    display: inline-block !important;
    margin-top: 5px !important;
}/* ==========================================
   تنسيق الشريط العلوي الترويجي (Announcement Bar)
   ========================================== */

.custom-announcement-bar {
    background: linear-gradient(90deg, #1E0038 0%, #3B0764 50%, #064E3B 100%) !important;
    color: #FFFFFF !important;
    text-align: center !important;
    padding: 10px 15px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    position: relative !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* تنسيق النص البارز أو كود الخصم داخل الشريط */
.custom-announcement-bar .highlight-code {
    background-color: #10B981 !important; /* أخضر زمردي بارز */
    color: #FFFFFF !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
}

/* تنسيق رابط الإعلان (إن وجد) */
.custom-announcement-bar a {
    color: #34D399 !important;
    text-decoration: underline !important;
    transition: color 0.2s ease !important;
}

.custom-announcement-bar a:hover {
    color: #A7F3D0 !important;
}

/* زر إغلاق الشريط */
.custom-announcement-bar .close-announcement {
    position: absolute !important;
    left: 15px !important; /* في الجهة اليسرى للواجهة العربية */
    background: none !important;
    border: none !important;
    color: #D8B4FE !important;
    font-size: 1.2rem !important;
    cursor: pointer !important;
    line-height: 1 !important;
    padding: 0 5px !important;
}

.custom-announcement-bar .close-announcement:hover {
    color: #FFFFFF !important;
}

/* التجاوب مع الجوال */
@media (max-width: 768px) {
    .custom-announcement-bar {
        font-size: 0.8rem !important;
        padding: 8px 30px !important; /* مسافة لعدم تغطية زر الإغلاق */
    }
}/* ==========================================
   تنسيق التنبيهات الذكية (Social Proof Popups)
   ========================================== */

.smart-notification-box {
    position: fixed !important;
    bottom: 25px !important;
    right: 25px !important; /* يظهر في أسفل اليمين للواجهة العربية */
    background: #FFFFFF !important;
    border: 1px solid #E9D5FF !important;
    border-right: 5px solid #10B981 !important; /* شريط جانبي أخضر بارز */
    border-radius: 16px !important;
    padding: 12px 18px !important;
    box-shadow: 0 10px 25px rgba(59, 7, 100, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    z-index: 99999 !important;
    max-width: 320px !important;
    animation: slideUpFade 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* حركة ظهور التنبيه انسيابية من الأسفل */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* أيقونة التنبيه الدائرية */
.smart-notification-icon {
    background: linear-gradient(135deg, #10B981, #059669) !important;
    color: #FFFFFF !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
}

/* محتوى النص */
.smart-notification-content p {
    margin: 0 !important;
    font-size: 0.85rem !important;
    color: #2D064E !important;
    line-height: 1.4 !important;
}

.smart-notification-content strong {
    color: #059669 !important;
    font-weight: 700 !important;
}

.smart-notification-time {
    font-size: 0.75rem !important;
    color: #6B7280 !important;
    display: block !important;
    margin-top: 2px !important;
}

/* التجاوب مع الجوال */
@media (max-width: 768px) {
    .smart-notification-box {
        bottom: 15px !important;
        right: 15px !important;
        left: 15px !important;
        max-width: none !important;
    }
}/* ==========================================
   تنسيق قسم المميزات السريعة (Features Section)
   ========================================== */

.custom-features-section {
    background: #FFFFFF !important;
    border: 1px solid #E9D5FF !important;
    border-radius: 20px !important;
    padding: 25px 20px !important;
    margin: 30px auto !important;
    max-width: 1200px !important;
    box-shadow: 0 4px 20px rgba(91, 33, 182, 0.06) !important;
}

/* شبكة توزيع الميزات الـ 4 */
.features-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    align-items: center !important;
}

/* بطاقة الميزة الفردية */
.feature-item {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 10px !important;
    transition: transform 0.3s ease !important;
}

.feature-item:hover {
    transform: translateY(-3px) !important;
}

/* دائرية الأيقونة خلفيتها زهرية/أخضر */
.feature-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #F3E8FF 0%, #D1FAE5 100%) !important;
    border: 1px solid #10B981 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.4rem !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.15) !important;
}

/* النصوص العناوين والتفاصيل */
.feature-info h4 {
    color: #21033A !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    margin: 0 0 4px 0 !important;
}

.feature-info p {
    color: #6B7280 !important;
    font-size: 0.8rem !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* التوافق مع شاشات الجوال */
@media (max-width: 992px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* خيارين في كل صف للتابلت والجوال */
        gap: 15px !important;
    }
}

@media (max-width: 480px) {
    .custom-features-section {
        margin: 15px !important;
        padding: 15px 10px !important;
    }
    
    .feature-item {
        gap: 10px !important;
    }
    
    .feature-icon {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.1rem !important;
    }
    
    .feature-info h4 {
        font-size: 0.85rem !important;
    }
}/* ==========================================
   تعديل الثيم الشامل (البنفسجي + الأخضر)
   ========================================== */

/* 1. المتغيرات العامة للألوان والخطوط */
:root {
    --brand-purple-dark: #2D064E;
    --brand-purple-main: #5B21B6;
    --brand-purple-light: #F8F5FF;
    --brand-green-main: #10B981;
    --brand-green-hover: #059669;
    --brand-text-dark: #21033A;
    --brand-border: #E9D5FF;
}

/* 2. الخلفية العامة والخطوط */
body {
    background-color: #FAFAFC !important;
    color: var(--brand-text-dark) !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* 3. رأس الصفحة (Header) */
.main-header, header, .site-header {
    background: linear-gradient(135deg, var(--brand-purple-dark) 0%, var(--brand-purple-main) 100%) !important;
    border-bottom: 3px solid var(--brand-green-main) !important;
}

.main-header a, header a, .header-icon {
    color: #FFFFFF !important;
}

/* 4. أزرار الشراء والتفاعل (Primary Buttons) */
.btn-primary, .add-to-cart-btn, .salla-button-primary {
    background: linear-gradient(135deg, var(--brand-green-main) 0%, var(--brand-green-hover) 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 25px !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover, .add-to-cart-btn:hover {
    background: linear-gradient(135deg, var(--brand-green-hover) 0%, #047857 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45) !important;
}

/* 5. شارات العداد ورسائل التنبيه */
.badge-count, .cart-badge, .cart-count {
    background-color: var(--brand-green-main) !important;
    color: #FFFFFF !important;
    border: 2px solid var(--brand-purple-dark) !important;
}

/* 6. بطاقات المنتجات (Product Cards) */
.product-box, .product-card {
    background-color: #FFFFFF !important;
    border-radius: 18px !important;
    border: 1px solid var(--brand-border) !important;
    box-shadow: 0 4px 15px rgba(91, 33, 182, 0.05) !important;
    transition: all 0.3s ease !important;
}

.product-box:hover, .product-card:hover {
    border-color: var(--brand-green-main) !important;
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.15) !important;
    transform: translateY(-5px) !important;
}

/* ألوان الأسعار */
.product-price, .price {
    color: var(--brand-green-hover) !important;
    font-weight: 800 !important;
}

/* 7. العناوين الرئيسية في الصفحات */
.section-title, h1, h2, h3 {
    color: var(--brand-text-dark) !important;
    font-weight: 800 !important;
}

/* 8. ذيل الصفحة (Footer) */
.main-footer, footer, .site-footer {
    background-color: var(--brand-purple-light) !important;
    border-top: 4px solid var(--brand-green-main) !important;
    color: var(--brand-text-dark) !important;
}

.main-footer h3, .main-footer .footer-title {
    color: var(--brand-purple-dark) !important;
    font-weight: 800 !important;
}

.main-footer a, footer a {
    color: var(--brand-purple-dark) !important;
    font-weight: 600 !important;
}

.main-footer a:hover, footer a:hover {
    color: var(--brand-green-hover) !important;
}

/* شريط الحقوق السفلي */
.footer-sub, .copyright-bar {
    background-color: #ECE4F7 !important;
    color: var(--brand-purple-dark) !important;
    font-weight: 700 !important;
}/* ==========================================
   تغيير إجباري لخلفية الصفحة كاملة والحاويات
   ========================================== */

/* 1. إجبار خلفية الصفحة والحاوية الرئيسية */
html, 
body, 
#app, 
.page-wrapper, 
main, 
.main-content, 
.content-wrapper,
.salla-theme-container {
    background-color: #F8F5FF !important; /* لون خلفية ناعم متناسق مع هويتك */
    background-image: none !important;    /* إزالة أي صور خلفية افتراضية للثيم */
}

/* 2. جعل أقسام الصفحة الرئيسية شفافة لتظهر الخلفية الجديدة */
.store-home, 
.home-sections, 
.section, 
.container-fluid {
    background-color: transparent !important;
}

/* 3. الإبقاء على البطاقات بيضاء لتباين مريح مع الخلفية الفاتحة */
.product-box, 
.product-card, 
.category-card, 
.custom-features-section, 
.testimonial-card {
    background-color: #FFFFFF !important;
}/* ==========================================
   تطوير وتخصيص ثيم رائد (Raed Theme)
   ========================================== */

/* 1. تغيير خلفية المتجر كاملة في ثيم رائد */
html, 
body, 
.site-wrapper, 
.content-wrapper, 
main, 
section, 
.page-container {
    background-color: #F8F5FF !important; /* خلفية ناعمة بنفسجية فاتحة */
    background-image: none !important;
}

/* 2. الهيدر ورأس الصفحة في ثيم رائد */
.site-header, 
salla-header, 
.header-wrapper {
    background: linear-gradient(135deg, #2D064E 0%, #5B21B6 100%) !important;
    border-bottom: 3px solid #10B981 !important;
}

.site-header a, 
.site-header span, 
.site-header i {
    color: #FFFFFF !important;
}

/* 3. خلفية بطاقات المنتجات والأقسام */
salla-product-card, 
.product-entry, 
.category-item, 
.home-block {
    background-color: #FFFFFF !important;
    border-radius: 16px !important;
    border: 1px solid #E9D5FF !important;
    box-shadow: 0 4px 15px rgba(91, 33, 182, 0.05) !important;
}

/* 4. تغيير ألوان أزرار الشراء والتفاعل لـ ثيم رائد */
salla-add-product-button, 
.s-button-element, 
.btn-submit {
    --salla-primary-color: #10B981 !important;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    color: #FFFFFF !important;
    border-radius: 25px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

/* 5. تعديل الفوتر (ذيل الصفحة) في ثيم رائد */
salla-footer, 
.site-footer, 
.footer-main {
    background-color: #F8F5FF !important;
    border-top: 4px solid #10B981 !important;
    color: #2D064E !important;
}

salla-footer a, 
.site-footer a {
    color: #21033A !important;
    font-weight: 700 !important;
}

salla-footer a:hover, 
.site-footer a:hover {
    color: #059669 !important;
}

/* 6. شريط أسعار المنتجات والعناوين */
.s-product-card-price, 
.product-price {
    color: #059669 !important;
    font-weight: 800 !important;
}/* ==========================================
   تعديل مظهر أيقونات الهيدر (السلة، الدخول، المفضلة)
   ========================================== */

/* 1. الحاوية العامة للأيقونات العلويّة */
.header-actions, 
.site-header__actions, 
salla-header .header-icons {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* 2. تصميم أيقونات (السلة - تسجيل الدخول - المفضلة) كدوائر أنيقة */
salla-cart-summary, 
salla-user-menu, 
.header-btn, 
.header-icon-wrapper, 
a[href*="wishlist"], 
a[href*="login"], 
a[href*="cart"] {
    background-color: rgba(255, 255, 255, 0.15) !important; /* خلفية شفافة ناعمة */
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important; /* جعل الإطار دائرياً بالكامل */
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    color: #FFFFFF !important;
    position: relative !important;
}

/* 3. تأثير الماوس عند الوقوف على الأيقونات (التحول للأخضر الزمردي) */
salla-cart-summary:hover, 
salla-user-menu:hover, 
a[href*="wishlist"]:hover, 
a[href*="login"]:hover, 
a[href*="cart"]:hover {
    background-color: #10B981 !important; /* لون أخضر زمردي جذاب */
    border-color: #34D399 !important;
    transform: translateY(-3px) scale(1.08) !important; /* بروز خفيف لأعلى */
    box-shadow: 0 6px 15px rgba(16, 185, 129, 0.4) !important; /* توهج ضوئي أخضر */
}

/* 4. تعديل أيقونة القلب (المفضلة) لإبرازها */
a[href*="wishlist"] i, 
.icon-heart {
    color: #FFFFFF !important;
    transition: transform 0.3s ease !important;
}

a[href*="wishlist"]:hover i, 
a[href*="wishlist"]:hover .icon-heart {
    transform: scale(1.2) !important; /* تكبير القلب عند التفاعل */
}

/* 5. تعديل عداد المنتجات في السلة (Cart Badge) */
.cart-badge, 
salla-cart-summary .badge, 
.s-cart-summary-count {
    background-color: #10B981 !important; /* أخضر زاهي بارز */
    color: #FFFFFF !important;
    font-weight: 800 !important;
    border: 2px solid #2D064E !important; /* تحديد بشرائط البنفسجي الداكن */
    font-size: 0.75rem !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}/* ==========================================
   تنسيق العداد التنازلي للعروض (Countdown Timer)
   ========================================== */

.custom-countdown-banner {
    background: linear-gradient(135deg, #2D064E 0%, #3B0764 60%, #064E3B 100%) !important;
    color: #FFFFFF !important;
    padding: 15px 20px !important;
    margin: 20px auto !important;
    max-width: 1200px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0 8px 25px rgba(59, 7, 100, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.countdown-text {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
}

.countdown-text span {
    color: #34D399 !important; /* أخضر زاهي */
}

/* صَناديق الأرقام */
.countdown-timer-boxes {
    display: flex !important;
    gap: 10px !important;
    direction: ltr !important; /* لترتيب الوقت بشكل صحيح */
}

.timer-box {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid #10B981 !important; /* تحديد أخضر زمردي */
    border-radius: 10px !important;
    padding: 6px 12px !important;
    text-align: center !important;
    min-width: 50px !important;
}

.timer-number {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    display: block !important;
    line-height: 1 !important;
}

.timer-label {
    font-size: 0.65rem !important;
    color: #D1FAE5 !important;
    margin-top: 4px !important;
    display: block !important;
}

/* التوافق مع الجوال */
@media (max-width: 768px) {
    .custom-countdown-banner {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
        padding: 15px !important;
        margin: 10px !important;
    }
    
    .countdown-text {
        font-size: 0.9rem !important;
    }
    
    .timer-box {
        min-width: 42px !important;
        padding: 5px 8px !important;
    }
    
    .timer-number {
        font-size: 1rem !important;
    }
}/* ==========================================
   تنسيق صفحة المنتج في ثيم رائد
   ========================================== */

/* 1. عنوان المنتج */
.product-details__title, 
salla-product-card .title,
h1.product-title {
    color: #21033A !important;
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
}

/* 2. ابرز السعر باللون الأخضر */
.product-details__price, 
.price-wrapper, 
salla-price {
    color: #059669 !important; /* أخضر زمردي داكن وواضح */
    font-size: 1.5rem !important;
    font-weight: 800 !important;
}

/* السعر القديم بعد الخصم */
.price-before, 
.s-price-before {
    color: #9CA3AF !important;
    text-decoration: line-through !important;
    font-size: 1.1rem !important;
    margin-right: 8px !important;
}

/* 3. زر "إضافة للسلة" وزر "شراء الآن" */
salla-add-product-button .s-button-element, 
.add-to-cart-btn,
.btn-buy-now {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    color: #FFFFFF !important;
    border-radius: 30px !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    height: 52px !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35) !important;
    transition: all 0.3s ease !important;
}

salla-add-product-button .s-button-element:hover, 
.add-to-cart-btn:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(16, 185, 129, 0.45) !important;
}

/* 4. خيارات المنتج (الألوان، المقاسات، الكمية) */
.product-option-selector, 
salla-quantity-input {
    border: 1px solid #E9D5FF !important;
    border-radius: 12px !important;
    background-color: #FFFFFF !important;
}

/* 5. المعرض وصور المنتج */
.product-images-slider, 
salla-slider {
    border-radius: 20px !important;
    border: 1px solid #E9D5FF !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(91, 33, 182, 0.05) !important;
}

/* 6. صندوق ضمان ومميزات الشراء المباشرة */
.product-trust-badges {
    background: #F8F5FF !important;
    border: 1px dashed #10B981 !important;
    border-radius: 14px !important;
    padding: 15px !important;
    margin-top: 20px !important;
    display: flex !important;
    justify-content: space-around !important;
    text-align: center !important;
}

.trust-badge-item {
    color: #2D064E !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
}
.cart-recommendations, 
.s-cart-summary-suggestions,
[class*="suggestion"] {
    display: none !important;
}
/* ==========================================
   تحسينات السيو والتنسيق الهيكلي (SEO & Accessibility)
   ========================================== */

/* 1. إبراز العناوين الرئيسية H1, H2 محرك البحث */
h1, .product-title, .page-title {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    color: #2D064E !important; /* لون بنفسجي داكن وواضح */
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
}

h2, .section-title {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #21033A !important;
}

/* 2. تحسين مظهر روابط التنقل لتسهيل زحف محركات البحث (Internal Links) */
a {
    color: #5B21B6 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

a:hover {
    color: #10B981 !important; /* أخضر زمردي عند الوقوف */
    text-decoration: underline !important;
}

/* 3. إظهار نصوص الوصول الميسر للروابط ذات الأيقونات فقط */
.aria-only, .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}/* ==========================================
   تخصيص الفوتر في ثيم رائد (البنفسجي والأخضر الغامق)
   ========================================== */

/* 1. تغيير خلفية الفوتر الرئيسي والشريط السفلي */
salla-footer, 
.site-footer, 
.footer-main, 
.footer-sub, 
.copyright-bar {
    background-color: #2D064E !important; /* بنفسجي داكن غني */
    background-image: none !important;
    border-top: 3px solid #10B981 !important; /* خط فاصل أخضر زاهي */
}

/* 2. تغيير لون كافة النصوص والعناوين إلى الأخضر الغامق الزمردي */
salla-footer, 
.site-footer, 
.site-footer p, 
.site-footer span, 
.site-footer div, 
.main-footer h1, 
.main-footer h2, 
.main-footer h3, 
.main-footer h4, 
.footer-title {
    color: #059669 !important; /* أخضر غامق زمردي بارز وواضح */
    font-weight: 700 !important;
}

/* 3. تغيير ألوان الروابط والقوائم داخل الفوتر */
salla-footer a, 
.site-footer a, 
.footer-list a {
    color: #059669 !important; /* أخضر غامق */
    transition: all 0.2s ease !important;
}

/* 4. تأثير الوقوف على الروابط (يتغير إلى أخضر زاهي عند مرور الماوس) */
salla-footer a:hover, 
.site-footer a:hover, 
.footer-list a:hover {
    color: #34D399 !important; /* أخضر زاهي ومضيء */
    text-decoration: underline !important;
}

/* 5. أيقونات التواصل الاجتماعي والدفع في الفوتر */
.footer-social a, 
.footer-icons i {
    color: #059669 !important;
}
/* تغطية الحاوية الخارجية لـ salla-footer */
salla-footer, 
.site-footer, 
footer {
    background-color: #2D064E !important;
    border-top: 3px solid #10B981 !important;
    display: block !important;
}/* ==========================================
   تنسيق أزرار الشراء والإضافة للسلة
   ========================================== */

/* زر أضف للسلة - الأخضر الزمردي الزاهي */
.custom-add-to-cart-btn,
salla-add-product-button .s-button-element {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 30px !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    padding: 12px 24px !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    cursor: pointer !important;
}

.custom-add-to-cart-btn:hover,
salla-add-product-button .s-button-element:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.45) !important;
}

/* زر اشتري الآن - البنفسجي الفاخر بإطار أخضر */
.custom-buy-now-btn,
.s-button-buy-now {
    background: linear-gradient(135deg, #3B0764 0%, #2D064E 100%) !important;
    color: #FFFFFF !important;
    border: 2px solid #10B981 !important;
    border-radius: 30px !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    padding: 10px 24px !important;
    box-shadow: 0 4px 15px rgba(45, 6, 78, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    cursor: pointer !important;
}

.custom-buy-now-btn:hover,
.s-button-buy-now:hover {
    background: linear-gradient(135deg, #2D064E 0%, #1E0336 100%) !important;
    border-color: #34D399 !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3) !important;
}
/* ==========================================
   تنسيق أزرار صفحة المنتج (البنفسجي والأخضر)
   ========================================== */

/* حاوية الأزرار الرئيسية في صفحة المنتج */
.product-single-add-to-cart,
.s-product-card-content-sub,
.add-to-cart-wrapper {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
}

/* زر أضف للسلة - تصميم الأخضر الزمردي الزاهي */
salla-add-product-button[product-status="out_of_stock"] {
    opacity: 0.6 !important;
}

/* زر الشراء المباشر */
salla-buy-now-button {
    flex-grow: 1 !important;
}