/* ==========================================================
   2. تنسيق عرض المنتجات (منتجين ونصف المنتج الثالث - جوال)
   ========================================================== */
@media (max-width: 768px) {
    /* تحويل حاوية المنتجات لشبكة تمرير أفقية */
    .products-container, .s-products-grid, .products-grid, .swiper-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 10px !important;
        padding: 5px 5px 15px 5px !important;
        scrollbar-width: none !important;
    }

    .products-container::-webkit-scrollbar, 
    .s-products-grid::-webkit-scrollbar, 
    .products-grid::-webkit-scrollbar {
        display: none !important;
    }

    /* فرض عرض البطاقة ليظهر 2.5 منتج على الشاشة */
    .s-product-card, .product-item, .product-card, .swiper-slide {
        flex: 0 0 43% !important;
        min-width: 43% !important;
        max-width: 43% !important;
        scroll-snap-align: start !important;
        margin-bottom: 0 !important;
    }
}


/* =========================================
   محرر وتنسيق الواجهة تلقائياً عبر JavaScript
========================================= */
document.addEventListener("DOMContentLoaded", function() {
    console.log("تم تفعيل ثيم لفتة فاشن الفاخر بنجاح");

    // تحسين أزرار "أضف للسلة" وجعلها أنيقة وصغيرة تلقائياً
    const actionButtons = document.querySelectorAll('button, .add-to-cart, .salla-btn-add-to-cart');
    actionButtons.forEach(btn => {
        if(!btn.classList.contains('lf-styled')) {
            btn.classList.add('lf-styled');
        }
    });

    // تنظيم الروابط في الفوتر وإزالة أي خلفيات مربعة غير مرغوبة
    const footerLinks = document.querySelectorAll('footer a, .store-footer a');
    footerLinks.forEach(link => {
        link.style.background = 'transparent';
        link.style.border = 'none';
        link.style.fontSize = '13px';
        link.style.color = '#aebdb5';
    });
});
</script>

/* =========================================
   تعديل الهوية والألوان العامة لمتجر لفتة فاشن
========================================= */

:root {
    --store-bg: #06110e;             /* خلفية المتجر الرئيسية */
    --store-card-bg: #102c24;        /* خلفية البطاقات والعناصر */
    --store-text: #eadcc8;           /* لون النصوص الأساسية (عاجي فخم) */
    --store-text-muted: #aebdb5;     /* لون النصوص الثانوية */
    --store-accent: #225b49;         /* اللون الرئيسي / المميز */
    --store-border: rgba(158,198,180,0.3); /* حدود العناصر الفخمة */
}

/* تطبيق الخلفية العامة وألوان النصوص على المتجر */
body, html {
    background-color: var(--store-bg) !important;
    color: var(--store-text) !important;
    font-family: "Tahoma", "Arial", sans-serif !important;
}

/* تنسيق الهيدر (رأس المتجر) والفوتر (أسفل المتجر) */
header, footer, .footer-section, .store-header {
    background: linear-gradient(135deg, #020605, #0b211b, #020605) !important;
    color: var(--store-text) !important;
    border-color: var(--store-border) !important;
}

/* تنسيق كاردات المنتجات والأقسام لتأخذ الطابع الزجاجي الفاخر */
.product-item, .card, .salla-product-card, .category-block {
    background: linear-gradient(145deg, rgba(24, 66, 54, 0.55), rgba(5, 18, 14, 0.75)) !important;
    border: 1px solid var(--store-border) !important;
    border-radius: 20px !important;
    color: var(--store-text) !important;
    backdrop-filter: blur(10px);
}

/* تنسيق الأزرار الرئيسية في المتجر (أزرار الشراء والإضافة للسلة) */
button, .btn, .salla-btn, input[type="submit"], .add-to-cart {
    background: linear-gradient(145deg, #184236, #0e2f25) !important;
    color: var(--store-text) !important;
    border: 1px solid rgba(221,207,184,0.4) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

button:hover, .btn:hover, .salla-btn:hover {
    background: #225b49 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
    transform: translateY(-2px);
}

/* تنسيق العناوين داخل المتجر */
h1, h2, h3, h4, h5, h6 {
    color: var(--store-text) !important;
}

/* تنسيق حقول الإدخال والبحث */
input, select, textarea {
    background-color: rgba(5, 18, 14, 0.8) !important;
    color: var(--store-text) !important;
    border: 1px solid var(--store-border) !important;
    border-radius: 10px !important;
}

input:focus, select:focus, textarea:focus {
    border-color: rgba(180, 211, 195, 0.8) !important;
    outline: none !important;
}
/* =========================================
   تعديل الفوتر - إزالة خلفية الخيارات وجعلها نصية صغيرة
========================================= */

/* جعل الروابط والخيارات صغيرة ونصوص بدون خلفية مربعة */
footer a, .store-footer a, footer .footer-links a, div[class*="footer"] a {
    display: inline-block !important;
    font-size: 13px !important;
    padding: 4px 8px !important;
    margin: 4px 0 !important;
    background: transparent !important;
    border: none !important;
    color: #aebdb5 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

footer a:hover, .store-footer a:hover {
    color: #eadcc8 !important;
    text-decoration: underline !important;
}

/* تنسيق أيقونات السوشيال ميديا لتظهر بشكل دائرى متناسق وواضح */
footer svg, footer i, .store-footer svg, .store-footer i, 
footer img[class*="social"], .social-icons svg, .social-icons i {
    width: 20px !important;
    height: 20px !important;
    font-size: 16px !important;
    color: #eadcc8 !important;
    fill: #eadcc8 !important;
}

/* حاوية أيقونات التواصل الاجتماعي */
footer .social-icons, .store-footer .social-icons, div[class*="social"] {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 15px !important;
}

/* تصميم دائري أنيق لأيقونات السوشيال ميديا */
footer .social-icons a, .store-footer a[href*="snapchat"], 
.store-footer a[href*="instagram"], .store-footer a[href*="tiktok"], 
.store-footer a[href*="youtube"] {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, rgba(24, 66, 54, 0.8), rgba(5, 18, 14, 0.9)) !important;
    border: 1px solid rgba(221, 207, 184, 0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

footer .social-icons a:hover {
    transform: translateY(-3px) !important;
    background: #225b49 !important;
}
/* =========================================
   تنسيق خلفية ووصف أسفل الصفحة (الفوتر) لمتجر لفتة فاشن
========================================= */

/* توحيد خلفية القسم المحدد لتكون باللون الزيتي الفاخر المتناسق مع المتجر */
footer, .store-footer, div[class*="footer"], .footer-section {
    background: linear-gradient(135deg, #020605, #0b211b, #020605) !important;
    background-color: #06110e !important;
    color: #eadcc8 !important;
}

/* ضبط لون عنوان المتجر ووصفه داخل الفوتر ليصبح واضحاً وفخماً */
footer h3, footer h4, .footer-title, .store-footer h3 {
    color: #eadcc8 !important;
}

footer p, .store-footer p, .footer-description {
    color: #aebdb5 !important;
}

/* تنسيق الروابط والخيارات (مثل سياسة الاستبدال) لتكون نصاً صغيراً بدون خلفية مربعة */
footer a, .store-footer a, footer .footer-links a, div[class*="footer"] a {
    background: transparent !important;
    border: none !important;
    color: #aebdb5 !important;
    font-size: 13px !important;
    padding: 2px 0 !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: color 0.3s ease !important;
}

footer a:hover, .store-footer a:hover {
    color: #eadcc8 !important;
    text-decoration: underline !important;
}
/* =========================================
   تنسيق القائمة الجانبية (المنيو) بتأثير زجاجي فاخر
========================================= */

/* استهداف حاوية القائمة الجانبيه أو القائمة المنسدلة في سلة */
.salla-sidebar, div[class*="sidebar"], div[class*="drawer"], 
div[class*="menu-mobile"], aside, .mobile-menu {
    background: linear-gradient(135deg, rgba(16, 44, 36, 0.75), rgba(6, 17, 14, 0.85)) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-left: 1px solid rgba(158, 198, 180, 0.25) !important;
    border-right: 1px solid rgba(158, 198, 180, 0.25) !important;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5) !important;
}

/* تنسيق النصوص والروابط داخل القائمة الجانبية لتكون واضحة باللون العاجي */
.salla-sidebar a, div[class*="sidebar"] a, div[class*="drawer"] a, 
aside a, .mobile-menu a {
    color: #eadcc8 !important;
    font-size: 15px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(221, 207, 184, 0.08) !important;
    transition: all 0.3s ease !important;
}

/* تأثير التمرير على خيارات القائمة الجانبية */
.salla-sidebar a:hover, div[class*="sidebar"] a:hover, 
div[class*="drawer"] a:hover, aside a:hover {
    background: rgba(34, 91, 73, 0.4) !important;
    color: #ffffff !important;
    padding-right: 22px !important;
}

/* تنسيق أيقونات القائمة الجانبية إن وجدت */
.salla-sidebar i, div[class*="sidebar"] i, div[class*="drawer"] i {
    color: # !important;
}