/*/* تغيير لون خلفية الفوتر السفلي إلى الأسود */
footer, 
.site-footer, 
.footer-bottom, 
.footer-copyrights, 
.copyrights-wrapper {
    background-color: #000000 !important;
    border-top: none !important; /* لإزالة أي خط علوي إن وجد */
}

/* تغيير لون النصوص والروابط داخل الفوتر لتصبح بيضاء */
footer *, 
.site-footer *, 
.footer-bottom *, 
.footer-copyrights *, 
.copyrights-wrapper *,
.copyrights-wrapper p,
.copyrights-wrapper span {
    color: #ffffff !important;
}

/* تعديل لون خلفية منطقة طرق الدفع إن كانت منفصلة */
.payment-methods-wrapper,
.foote/* تخصيص زر إضافة للسلة */
.product-card .add-to-cart-btn, 
button[data-product-id] { 
    background-color: #27ae60 !important; /* لون أخضر جذاب */
    color: #ffffff !important; /* لون النص أبيض */
    border-radius: 8px !important; /* زوايا منحنية قليلاً */
    font-weight: bold !important;
    font-size: 14px !important;
    padding: 10px 20px !important;
    transition: all 0.3s ease !important;
    border: none !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
}

/* إضافة نص داخل الزر إذا كان فارغاً (اختياري) */
.product-card .add-to-cart-btn::before {
    content: "أضف للسلة ";
}

/* تأثير عند تمرير الماوس فوق الزر */
.product-card .add-to-cart-btn:hover {
    background-color: #2ecc71 !important; /* درجة أخضر أفتح عند اللمس */
    transform: translateY(-2px); /* رفعة بسيطة للزر */
    box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
}r-payments {
    background-color: #000000 !important;
}/* إخفاء أيقونة القلب في منصة زد */
.s-product-card__wishlist-btn,
.wishlist-btn,
.wishlist-button,
.btn-wishlist,
.add-to-wishlist {
    display: none !important;
}header, .header, .site-header {
    background-color: transparent !important;
    position: absolute !important; /* جعل الهيدر يطفو فوق المحتوى */
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999 !important; /* ضمان بقاء الهيدر في الطبقة العلوية دائماً */
    box-shadow: none !important;
    border: none !important;
}header, .header, .site-header {
    background-color: transparent !important;
    position: absolute !important; /* جعل الهيدر يطفو فوق المحتوى */
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999 !important; /* ضمان بقاء الهيدر في الطبقة العلوية دائماً */
  .store-logo,
.navbar-brand,
.header-logo {
    display: none !important;
} box-shadow: none !important;.store-logo,
.navbar-brand,
.header-logo {
    display: none !important;
}/* 1. توسيط قسم "من نحن" والعناوين الرئيسية في الفوتر */
.footer-widget, 
.footer-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

.footer-widget .widget-title,
.footer-title,
footer h3,
footer h4 {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 20px !important;
}

/* 2. تقسيم قائمة الروابط والنصوص إلى 3 أقسام متساوية */
.footer-widget ul,
.footer-links,
.footer-menu {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* تقسيم لـ 3 أعمدة */
    gap: 15px !important; /* المسافة بين الأقسام */
    width: 100% !important;
    text-align: center !important; /* توسيط النص داخل كل قسم */
    padding: 0 !important;
    list-style: none !important;
    direction: rtl !important;
}

/* توسيط عناصر القائمة نفسها */
.footer-widget ul li,
.footer-links li {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 3. توافق التصميم مع شاشات الجوال (مهم جداً) */
@media (max-width: 768px) {
    /* تحويلها إلى قسمين في شاشات الجوال المتوسطة والآيباد */
    .footer-widget ul,
    .footer-links,
    .footer-menu {
        grid-template-columns: repeat(2, 1fr) !important; 
    }
}

@media (max-width: 480px) {
    /* تحويلها إلى قسم واحد في شاشات الجوال الصغيرة جداً لتجنب تداخل الكلام */
    .footer-widget ul,
    .footer-links,
    .footer-menu {
        grid-template-columns: 1fr !important; 
    /* توسيط العناوين مثل "من نحن" في الفوتر */
footer .widget-title,
footer h2,
footer h3,
footer h4,
.footer-title {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

/* تقسيم الروابط إلى 3 أقسام وتوسيطها */
footer ul,
footer .menu,
.footer-menu {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    direction: rtl !important;
}

/* تحديد عرض كل رابط ليكون الثلث (3 أقسام) */
footer ul li,
footer .menu li,
.footer-menu li {
    width: 33.33% !important; 
    text-align: center !important;
    box-sizing: border-box !important;
    padding: 8px 5px !important;
    display: block !important;
}

/* توافق التصميم مع شاشات الجوال */
@media (max-width: 768px) {
    footer ul li,
    footer .menu li,
    .footer-menu li {
        width: 50% !important; /* قسمين في الشاشات المتوسطة */
    }
}

@media (max-width: 480px) {
    footer ul li,
    footer .menu li,
    .footer-menu li {
        width: 100% !important; /* قسم واحد في الجوال لتجنب التداخل */
    }
}
}/* 1. إجبار أعمدة الفوتر على أخذ العرض بالكامل لتسهيل التوسيط */
footer .row, 
footer .container .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

footer [class*="col-"], 
footer .widget, 
footer .footer-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin-bottom: 30px !important;
}

/* 2. توسيط عنوان "من نحن" أو أي عنوان في الفوتر */
footer h1, footer h2, footer h3, footer h4, 
.footer-title, .widget-title, .theme-footer-title {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin-bottom: 25px !important;
}

/* 3. تقسيم الكلام (الروابط) تحت "من نحن" إلى 3 أقسام باستخدام Grid */
footer ul, 
footer .list-unstyled, 
.footer-links, 
.footer-menu-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    direction: rtl !important;
}

/* 4. توسيط النصوص داخل كل قسم من الأقسام الثلاثة */
footer ul li, 
footer .list-unstyled li, 
.footer-links li {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
}

/* 5. توسيط أيقونات الدفع وتواصل معنا حتى لا يتشوه التصميم */
footer .social-links, 
footer .payment-icons, 
footer img {
    display: flex !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- توافق شاشات الجوال --- */
@media (max-width: 767px) {
    /* في الجوال، 3 أقسام ستكون ضيقة جداً وتتداخل الكلمات، الأفضل قسمين */
    footer ul, 
    footer .list-unstyled, 
    .footer-links {
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 10px !important;
    }
}