/* --- كود دمج الهيدر (البانر العلوي) بدون تكرار --- */

/* استهداف الصورة مباشرة داخل رابط البانر */
a[aria-label="banner link"] img {
    /* --- تقنية المسح السحري من الأسفل --- */
    /* التدرج يمسح أسفل الصورة بنسبة 20% لتندمج مع خلفية المتجر */
    -webkit-mask-image: linear-gradient(to top, transparent 0%, rgba(0,0,0,0.3) 10%, black 20%) !important;
    mask-image: linear-gradient(to top, transparent 0%, rgba(0,0,0,0.3) 10%, black 20%) !important;
 

-------------------------------




/* تكبير الأيقونات */
a[href*="instagram.com"] svg,
a[href*="tiktok.com"] svg {
    width: 18px !important;
    height: 18px !important;
    transform: scale(1.3);
    transition: all 0.3s ease;
}

a[href*="instagram.com"] svg path:nth-child(1),
a[href*="tiktok.com"] svg path:nth-child(1) {
    fill: none !important;        /* بدون تعبئة */
}
}

/* تأثير لما تمر الماوس */
a[href*="instagram.com"]:hover svg,
a[href*="tiktok.com"]:hover svg {
    transform: scale(1.6) !important;
    opacity: 0.8 !important;
}


---------------------------------







---------------------------------


/* --- الكود المحدث: زيادة دمج الفوتر والنعومة --- */

/* 1. ضمان النصوص البيضاء والواضحة فوق الفوتر */
footer, footer *, footer a {
    color: #ffffff !important;
}
footer svg path {
    fill: #ffffff !important;
}

/* 2. إعدادات الفوتر والصورة (تمت زيادة الـ padding-top) */
footer {
    background-image: url('https://i.postimg.cc/Sx6mVrqc/PHOTO-2026-03-03-14-28-42.jpg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center 20% !important; /* لتبدأ الصورة من الأسفل */
    padding-bottom: 70px !important;
    padding-top: 150px !important; /* مساحة أكبر فوق الكلام لبدء المسح */
    position: relative !important;

    /* --- المسح السحري المعدل: زيادة النعومة والامتداد --- */
    /* التعديل هنا: التدرج يبدأ من الشفافية الكاملة، ويزيد ببطء ليصل للأسود */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.3) 150px, black 300px) !important;
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.3) 150px, black 300px) !important;
}

/* 3. طبقة تعتيم خفيفة جداً لجعل النصوص واضحة (اختياري، تم تخفيفها) */
footer::after {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.1) !important; /* تعتيم بنسبة 10% */
    z-index: 0 !important;
}

/* ضمان بقاء المحتوى فوق التعتيم */
footer .container, footer div {
    position: relative !important;
    z-index: 1 !important;
}


----------------------------------




/* ================================================= */
/* 1. ألوان وضع النهار (اللون فقط)                */
/* ================================================= */
html:not([data-theme="dark"]) .mobile-nav-bottom a, 
html:not([data-theme="dark"]) .mobile-nav-bottom button, 
html:not([data-theme="dark"]) .mobile-nav-bottom label, 
html:not([data-theme="dark"]) .mobile-nav-bottom svg,
html:not([data-theme="dark"]) .mobile-nav-bottom [class*="text-[#676D75]"],
html:not([data-theme="dark"]) .s-cart-summary-total {
    color: #4A4A4A !important; /* حط لون النهار اللي يعجبك هنا */
}

/* ================================================= */
/* 2. ألوان الوضع الليلي (اللون فقط)                */
/* ================================================= */
html[data-theme="dark"] .mobile-nav-bottom a, 
html[data-theme="dark"] .mobile-nav-bottom button, 
html[data-theme="dark"] .mobile-nav-bottom label, 
html[data-theme="dark"] .mobile-nav-bottom svg,
html[data-theme="dark"] .mobile-nav-bottom [class*="text-[#676D75]"],
html[data-theme="dark"] .s-cart-summary-total {
    color: #dbd4c1 !important; /* لونك المعتمد */
}

/* لضمان أن الأيقونات تسحب اللون من خاصية الـ Color */
.mobile-nav-bottom svg, 
.mobile-nav-bottom svg path {
    fill: currentColor !important;
}