/* Add custom CSS styles below */ 
/* =========================================
   تنسيق بطاقة المنتج (النسخة الاحترافية الشاملة - كمبيوتر + جوال)
   ========================================= */

/* 1. الإطار الخارجي للبطاقة */
custom-salla-product-card.product-entry {
    border: 1px solid #f0f0f0 !important;
    border-radius: 16px !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    position: relative !important; 
    display: flex !important;
    flex-direction: column !important;
    direction: rtl !important; 
    overflow: hidden !important;
    padding-bottom: 75px !important; 
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease !important;
}

/* تأثير حركي جمالي عند تمرير الماوس على بطاقة المنتج */
custom-salla-product-card.product-entry:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important;
    border-color: #4A5260 !important;
    z-index: 5 !important;
}

/* 2. تجريد الحاويات الداخلية من التموضع */
custom-salla-product-card .product-entry__inner,
custom-salla-product-card .product-entry__image-wrap,
custom-salla-product-card .product-entry__content,
custom-salla-product-card .border-t {
    position: static !important; 
    transform: none !important;
    padding-bottom: 0 !important;
}
-
/* 3. منطقة الصورة */
custom-salla-product-card .product-entry__image-main {
    background-color: #fcfcfc !important; 
    border-radius: 16px 16px 0 0 !important;
    padding: 15px !important;
    min-height: 200px !important; 
}

custom-salla-product-card .product-entry__image-main img {
    object-fit: contain !important;
    mix-blend-mode: multiply !important; 
}

/* 4. الشارة العلوية (يسار وتشير لليمين باللون الأخضر) */
custom-salla-product-card .promotion-badge-wrap {
    position: absolute !important;
    top: 15px !important;
    left: 0 !important; 
    right: auto !important; 
    z-index: 20 !important;
}

custom-salla-product-card .promotion-badge {
    background-color: #008C56 !important;
    color: #ffffff !important;
    padding: 4px 12px 4px 15px !important;
    border-radius: 0 4px 4px 0 !important; 
    font-size: 13px !important;
    font-weight: 700 !important;
    position: relative !important;
    display: inline-block !important;
}

custom-salla-product-card .promotion-badge::after {
    content: '';
    position: absolute;
    right: -10px; 
    left: auto; 
    top: 0;
    border-top: 13.5px solid transparent;
    border-bottom: 13.5px solid transparent;
    border-left: 10px solid #008C56;
    border-right: none;
}

/* 5. تنسيق المحتوى (ترتيب العناصر من الأعلى للأسفل) */
custom-salla-product-card .content-wrap {
    display: flex !important;
    flex-direction: column !important; 
    padding: 15px 15px 5px !important;
    text-align: right !important;
}

/* 6. ترتيب تابي وتمارا (رفعها للأعلى مع خط فاصل) */
custom-salla-product-card .free-shipping-badge {
    display: none !important;
}

custom-salla-product-card .flex-col.gap-1 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    order: -1 !important; 
    margin-bottom: 5px !important;
    margin-top: -10px !important;
}

/* حل مشكلة تداخل النصوص مع شعار تابي وتمارا */
custom-salla-product-card .flex-col.gap-1 > span:not(.installment-badge),
custom-salla-product-card .flex-col.gap-1 > a,
custom-salla-product-card .flex-col.gap-1 > div:not(.installment-badge) {
    flex-basis: 100% !important;
    text-align: center !important;
    order: 2 !important;
    margin-top: 5px !important;
}

custom-salla-product-card .installment-badge {
    display: inline-flex !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    order: 1 !important;
}

custom-salla-product-card .installment-badge:first-of-type {
    border-left: 1px solid #eaeaea !important;
    padding-left: 10px !important;
    margin-left: 0 !important;
}

custom-salla-product-card .installment-badge span {
    display: none !important; 
}

custom-salla-product-card .installment-badge img {
    height: 20px !important; 
    width: auto !important;
    object-fit: contain !important;
}

/* 7. إظهار وتنسيق اسم الماركة */
custom-salla-product-card .product-entry__subtitle,
custom-salla-product-card .product-brand,
custom-salla-product-card .s-product-card-brand {
    display: block !important;
    color: #4A5260 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-top: 15px !important;
    margin-bottom: 5px !important;
    text-align: right !important;
    order: 0 !important; 
}

/* 8. تنسيق العنوان والأسعار */
custom-salla-product-card .product-entry__title {
    font-size: 15px !important; 
    font-weight: 800 !important;
    color: #222222 !important;
    text-align: right !important;
    margin-top: 15px !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    display: block !important;
    line-height: 1.6 !important;
    order: 1 !important; 
}

custom-salla-product-card .border-t {
    border-top: none !important; 
    display: block !important;
    order: 2 !important;
}

custom-salla-product-card .price-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; 
    gap: 5px !important;
}

custom-salla-product-card .product-entry__price {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 8px !important;
}

custom-salla-product-card .sale-price {
    color: #ff4b55 !important; 
    font-size: 24px !important; 
    font-weight: 800 !important;
    margin: 0 !important;
}

custom-salla-product-card .regular-price {
    color: #000000 !important; 
    font-weight: 600 !important; 
    opacity: 1 !important; 
    font-size: 16px !important; 
    text-decoration: line-through !important; 
}

/* 9. زر المفضلة (القلب) */
custom-salla-product-card .btn--wishlist {
    position: absolute !important;
    bottom: 15px !important;
    left: 15px !important; 
    top: auto !important;
    right: auto !important;
    width: 45px !important;
    height: 45px !important;
    margin: 0 !important;
    z-index: 50 !important;
}

custom-salla-product-card .btn--wishlist button {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
}

custom-salla-product-card .btn--wishlist button i {
    color: #999999 !important;
    font-size: 18px !important;
}

custom-salla-product-card salla-button.btn--wishlist:hover .s-button-element,
custom-salla-product-card salla-button.btn--wishlist.favorited .s-button-element,
custom-salla-product-card salla-button.btn--wishlist.is-gold .s-button-element {
    border-color: #4A5260 !important;
    background-color: #f0f2f5 !important;
}

custom-salla-product-card salla-button.btn--wishlist:hover i,
custom-salla-product-card salla-button.btn--wishlist.favorited i,
custom-salla-product-card salla-button.btn--wishlist.is-gold i {
    color: #4A5260 !important;
}

/* 10. زر أضف للسلة */
custom-salla-product-card .add-to-cart-conatiner {
    position: absolute !important;
    bottom: 15px !important;
    right: 15px !important;
    left: 70px !important; 
    width: auto !important;
    margin: 0 !important;
    z-index: 50 !important;
}

custom-salla-product-card .btn--add-to-cart button {
    background-color: #f0f2f5 !important;
    border: 1px solid #4A5260 !important;
    color: #4A5260 !important;
    border-radius: 8px !important;
    height: 45px !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
}

custom-salla-product-card .btn--add-to-cart button:hover {
    background-color: #4A5260 !important;
    color: #ffffff !important;
}

custom-salla-product-card .btn--add-to-cart button i,
custom-salla-product-card .btn--add-to-cart button span {
    color: inherit !important; 
    margin-left: 5px !important;
}

/* =========================================
   تعديلات مخصصة لشاشات الجوال 
   ========================================= */
@media (max-width: 768px) {
    custom-salla-product-card.product-entry {
        padding-bottom: 60px !important; 
    }

    custom-salla-product-card .promotion-badge {
        font-size: 10px !important;
        padding: 3px 10px 3px 8px !important;
        white-space: nowrap !important;
    }

    /* تحسين تابي وتمارا في الجوال */
    custom-salla-product-card .flex-col.gap-1 {
        gap: 6px !important;
    }

    custom-salla-product-card .installment-badge img {
        height: 16px !important; 
    }
    
    custom-salla-product-card .installment-badge:first-of-type {
        padding-left: 6px !important;
    }

    /* تكبير وتنزيل العناوين في الجوال */
    custom-salla-product-card .product-entry__title {
        font-size: 13px !important; 
        margin-top: 15px !important;
        margin-bottom: 10px !important;
    }
    
    custom-salla-product-card .sale-price {
        font-size: 18px !important; 
    }

    custom-salla-product-card .regular-price {
        font-size: 14px !important;
    }

    custom-salla-product-card .product-entry__subtitle,
    custom-salla-product-card .product-brand,
    custom-salla-product-card .s-product-card-brand {
        font-size: 12px !important;
        margin-top: 15px !important;
    }

    custom-salla-product-card .btn--wishlist {
        width: 35px !important;
        height: 35px !important;
        bottom: 10px !important;
        left: 10px !important; 
    }
    
    custom-salla-product-card .btn--wishlist button i {
        font-size: 14px !important;
    }

    custom-salla-product-card .add-to-cart-conatiner {
        bottom: 10px !important;
        right: 10px !important;
        left: 55px !important; 
    }
    
    custom-salla-product-card .btn--add-to-cart button {
        height: 35px !important;
        font-size: 12px !important;
        padding: 0 4px !important;
    }
    
    custom-salla-product-card .btn--add-to-cart button i {
        font-size: 14px !important;
    }
    
    custom-salla-product-card .btn--add-to-cart .s-button-text {
        gap: 4px !important;
    }

    /* توسيط الشعار في الجوال */
    .navbar-brand {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
    }

    .main-nav__content {
        position: relative !important;
    }
    
    footer .container.flex {
        padding: 20px !important;
    }
}

/* جعل حواف الصورة منحنية */
img.anime-item {
    border-radius: 30px !important; 
}

h2.section-title {
    color: #000000 !important; 
}

/* =========================================
   تعديلات الهيدر (باللون الجديد)
   ========================================= */
/* خلفية الهيدر */
#main-nav,
#main-nav .inner {
    background: #4A5260 !important;
}

/* جميع النصوص */
#main-nav,
#main-nav a,
#main-nav span,
#main-nav p,
#main-nav i {
    color: #fff !important;
}

/* أيقونات SVG */
#main-nav svg,
#main-nav svg path {
    fill: #fff !important;
}

/* خطوط زر القائمة (الهامبرغر) */
#main-nav .mburger span {
    background-color: #fff !important;
}

/* زر جميع الفئات */
#main-nav #all-cats-trigger {
    color: #fff !important;
    border-color: rgba(255,255,255,.4) !important;
    background: transparent !important;
}
/* حقل البحث */
#main-nav .s-search-input {
    color: #333 !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
}

/* النص قبل الكتابة */
#main-nav .s-search-input::placeholder {
    color: #777 !important;
}

/* أيقونة البحث داخل الحقل */
#main-nav .s-search-input-wrapper svg,
#main-nav .s-search-input-wrapper svg path {
    fill: #333 !important;
}

/* =========================================
   تعديلات الفوتر (باللون الجديد)
   ========================================= */
/* خلفية الفوتر بدون كسر المحاذاة */
footer {
    background-color: #4A5260 !important;
}

footer .container.flex {
    padding: 25px 60px !important;
    width: 100% !important;
    max-width: 100% !important;
    background-color: #4A5260 !important;
}

/* إزالة الخلفية الرمادية من أيقونات السوشيال */
.s-social-icon,
.s-social-link,
.s-social-link a {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* جعل أيقونات السوشيال بيضاء */
.s-social-icon svg,
.s-social-icon svg path {
    fill: #ffffff !important;
}

/* ===================================
   تعديل شعارات الدفع
=================================== */
.s-payments-list-item {
    background-color: #ffffff !important;
    border-radius: 8px !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
    padding: 4px 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.s-payments-list-item img {
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    object-fit: contain !important;
}

.store-footer p.text-gray-400 {
    color: #000000 !important;
}

.store-footer__inner {
    background-color: #ffffff !important;
}

.store-header img,
.main-header img,
.header-logo img {
    width: 115px !important;
    height: 35px !important;
    object-fit: contain !important;
}

/* إزالة الفراغ بين الهيدر والبنر */
header.store-header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* البلوك حق البنرات */
.s-block--bundle-super-banners {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* إزالة أي مسافة إضافية من أول سيكشن */
.s-block:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* أحياناً الكونتينر نفسه يسبب فراغ */
.slider-container {
    margin-top: 0 !important;
}

/* احتياط إضافي */
body .app-inner > section:first-of-type {
    margin-top: 0 !important;
}

/* =========================================
   تلوين نصوص الشريط السفلي فقط
   ========================================= */

/* 1. نص حقوق المتجر ورابط اسم المتجر (ALVE) */
span.text-sm p.text-gray-400,
span.text-sm p.text-gray-400 a {
    color: #ffffff !important;
}

/* 2. نصوص قسم الشهادات (منصة الأعمال) */
.footer-certificates p,
.footer-certificates b {
    color: #ffffff !important;
}

/* 3. نصوص السجل التجاري */
.s-trust-badges-label,
.s-trust-badges-number {
    color: #ffffff !important;
}
/* =========================================
   تعديل عرض القائمة الجانبية (لمنعها من أخذ الشاشة بالكامل)
   ========================================= */

/* تقليص عرض القائمة الجانبية الرئيسية */
aside#storemenu-panel {
    width: 85% !important; /* نسبة العرض من شاشة الجوال */
    max-width: 320px !important; /* تثبيت أقصى عرض للقائمة في الشاشات الأكبر */
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15) !important; /* إضافة ظل احترافي يفصل القائمة عن الخلفية */
}

/* ضبط موضع زر الإغلاق ليتناسب مع العرض الجديد */
aside#storemenu-panel .close-button {
    left: 15px !important; /* إبقاء الزر داخل المساحة البيضاء للقائمة */
    background-color: transparent !important;
}

/* تعديلات إضافية لترتيب العناصر الداخلية للقائمة لتتناسب مع العرض الجديد */
aside#storemenu-panel .side-panel__content {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* ضبط حجم شعار المتجر داخل القائمة إذا لزم الأمر */
aside#storemenu-panel .navbar-brand img {
    max-width: 100% !important;
    object-fit: contain !important;
}
.s-menu-footer-list {
    display: flex;
    flex-direction: column;
    gap: 4px !important; /* غيّرها إلى 0 إذا أردت بدون أي مسافة */
}
/* إزالة المسافة بين العنوان والقائمة */
#widget-footer-menu {
    margin-top: 8px !important;
    padding-top: 0 !important;
    gap: 2px !important;
}

/* إزالة أي هوامش من القائمة */
#widget-footer-menu li {
    margin: 0 !important;
    padding: 0 !important;
}
/* إزالة الهوامش بين عناصر الصفحات */
.s-menu-footer-list {
  display: flex;
  flex-direction: column;
  gap: 4px !important; /* تحكم بالمسافة هنا */
  padding: 0 !important;
  margin: 0 !important;
}

/* كل رابط */
.s-menu-footer-item {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important; /* يقلل التباعد العمودي */
  display: block;
}

/* إزالة أي مسافات من الحاوية */
#widget-footer-pages,
.collapse-content {
  margin: 0 !important;
  padding: 0 !important;
}
/* القائمة نفسها */
.s-menu-footer-list {
  display: flex;
  flex-direction: column;
  gap: 2px !important; /* مسافة خفيفة جداً */
  padding: 0 !important;
  margin: 0 !important;
}

/* الروابط */
.s-menu-footer-item {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important; /* تقليل التباعد */
  display: block;
}

/* الحاوية */
#widget-footer-pages,
.collapse-content {
  margin: 0 !important;
  padding: 0 !important;
}

/* العنوان */
.widget h3 {
  margin: 0 !important;       /* حذف الفراغ تحت العنوان */
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* أهم سطر: يلزّق العنوان مباشرة بالقائمة */
.widget h3 + .collapse-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* تقليل المسافة بين العنوان والقائمة */
.widget h3 {
  margin-bottom: 6px !important; /* قللها حسب رغبتك */
}

/* إزالة أي مسافة زيادة من الكونتينر */
.widget {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* تأكيد عدم وجود فراغ فوق القائمة */
#widget-footer-pages {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* إخفاء قسم السياسات بالكامل */
.secondary-menu-wrap {
  display: none !important;
}