/* ============================================================
   سوق مجاز — النسخة المعتمدة (نفس تصميمك + حل نهائي للقائمة)
============================================================ */

/* 1. الإعدادات العامة والمتغيرات */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

:root {
    --background: #FDF9F5 !important;
    --primary: #3E2C24 !important;
    --accent: #A87B51 !important;
    --accent-light: #C9A07A !important;
    --accent-glow: rgba(168,123,81,0.18) !important;
    --header-bg: #6B4C3B !important;
    --category-bg: #F0E8DC !important;
    --font-family: 'IBM Plex Sans Arabic', sans-serif !important;
    --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1) !important;
    --transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    --shadow-soft: 0 4px 24px rgba(62,44,36,0.08) !important;
    --shadow-card: 0 2px 12px rgba(62,44,36,0.06) !important;
    --shadow-hover: 0 16px 40px rgba(168,123,81,0.18) !important;
    --radius-card: 16px !important;
}

html { scroll-behavior: smooth !important; }

body {
    background-color: var(--background) !important;
    color: var(--primary) !important;
    font-family: var(--font-family) !important;
    background-image:
        radial-gradient(ellipse at 20% 0%, rgba(168,123,81,0.06) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 100%, rgba(62,44,36,0.04) 0%, transparent 60) !important;
}

/* 2. الحركات المركزية */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }

/* 3. الهيدر والقوائم المنسدلة (إصلاح الغشاء الأبيض) */
header, header.bg-secondary {
    background-color: #6B4C3B !important;
    background-image: linear-gradient(135deg, rgba(168,123,81,0.15) 0%, transparent 50%), linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, transparent 100%) !important;
    border-bottom: 1px solid rgba(168,123,81,0.25) !important;
    box-shadow: 0 4px 32px rgba(0,0,0,0.28) !important;
    padding: 12px 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

/* --- حل مشكلة الغشاء الأبيض في القائمة --- */
.dropdown-menu, .el-menu[popover], [popover].bg-background, .nav-item .dropdown {
    background-color: #ffffff !important; /* خلفية بيضاء صريحة بدون شفافية مزعجة */
    border: 1.5px solid var(--accent-light) !important;
    box-shadow: 0 15px 45px rgba(62,44,36,0.2) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* إجبار العناصر الداخلية على الوضوح التام */
.dropdown-menu *, .el-menu *, [popover] *, .nav-item .dropdown * {
    background-color: transparent !important;
    opacity: 1 !important;
    color: var(--primary) !important; /* لون بني داكن */
    visibility: visible !important;
}

/* التأكيد على ظهور الروابط داخل القائمة */
.dropdown-menu a, .el-menu a, [popover] a {
    color: var(--primary) !important;
    font-weight: 700 !important;
    display: block !important;
    padding: 12px !important;
}

header > nav a, header > nav button, header > nav span, header > nav svg, header > nav p { color: #ffffff !important; }

/* 4. قسم التصنيفات (الكلمة تحت الصورة) */
.section-categories, [section-id="2c0eb03b-b015-438b-89f8-64b708780ff7"] {
    padding: 36px 0 !important; background-color: #F0E8DC !important;
    position: relative !important; display: flex !important; justify-content: center !important;
}

.section-categories .embla__container {
    display: flex !important; justify-content: center !important; flex-wrap: wrap !important; gap: 20px !important; transform: none !important;
}

.section-categories .embla__slide a {
    display: flex !important; flex-direction: column !important; align-items: center !important; text-decoration: none !important;
}

.section-categories .embla__slide .overflow-hidden {
    width: 170px !important; height: 170px !important; border-radius: 20px !important;
    box-shadow: 0 8px 24px rgba(62,44,36,0.16), 0 0 0 3px rgba(168,123,81,0.12) !important;
    transition: all 0.35s var(--transition-spring) !important;
    margin-bottom: 12px !important; 
}

.section-categories .embla__slide h3 {
    font-size: 0.95rem !important; font-weight: 700 !important; color: var(--primary) !important; text-align: center !important;
}

/* 5. بطاقات المنتجات (نفس كودك المعتمد) */
.section-products .embla__container, [section-id] .embla__container {
    display: grid !important; 
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 16px !important;
    transform: none !important;
    width: 100% !important;
}

[class*="embla__button"], .embla__dots, [class*="arrow"], .embla-nav {
    display: none !important;
}

[data-product-card] {
    background: #ffffff !important; border: 1px solid rgba(168,123,81,0.10) !important;
    border-radius: var(--radius-card) !important; box-shadow: var(--shadow-card) !important;
    transition: all 0.35s var(--transition-spring) !important; overflow: hidden !important;
    display: flex !important; flex-direction: column !important; height: 100% !important;
}

[data-product-card] .relative { aspect-ratio: 1 / 1 !important; width: 100% !important; }
[data-product-card] img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

/* 6. الأزرار والفوتر */
.btn.btn-outlined {
    background: linear-gradient(135deg, #4A342A 0%, #3E2C24 100%) !important;
    color: #fff !important; border-radius: 10px !important;
}

footer#footer {
    background-color: #3E2C24 !important;
    padding: 40px 0 !important;
}
footer#footer * { color: #f5ede4 !important; }

/* 9. التجاوب مع الجوال (Responsive) */
@media (max-width: 900px) { 
    .section-products .embla__container { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } 
    .section-categories .embla__slide .overflow-hidden { width: 100px !important; height: 100px !important; }
}

@media (max-width: 640px) {
    header img { height: 36px !important; }
    .section-categories .embla__slide .overflow-hidden { width: 86px !important; height: 86px !important; }
}