/* Add custom CSS styles below */

/* Add custom CSS styles below */

@keyframes textclip {
    to {
        background-position: 200% center;
    }
}
.angelmodal__content .banner-square {
  border: 2px solid #f97316; /* إطار برتقالي */
  border-radius: 12px;
  padding: 10px; /* تباعد داخلي */
  background-color: rgba(255, 255, 255, 0); /* خلفية شفافة */
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.15); /* ظل ناعم */
  transition: transform 0.3s ease;
}

.angelmodal__content .banner-square:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

/* نص العنوان */
.angelmodal__content .banner-square h3.da-tm {
  font-size: 1.1rem;
  color: #f97316;
  font-weight: 600;
  font-family: 'Tajawal', sans-serif;
  margin-bottom: 0.3rem;
  text-align: center;
}

/* نص الزر */
.angelmodal__content .banner-square .btn-text span {
  font-size: 0.9rem;
  font-family: 'Tajawal', sans-serif;
  font-weight: 500;
  color: #f97316;
}

/* تحسين الجوال */
@media (max-width: 480px) {
  .angelmodal__content .banner-square {
    padding: 6px;
  }
  .angelmodal__content .banner-square h3.da-tm {
    font-size: 0.85rem;
  }
  .angelmodal__content .banner-square .btn-text span {
    font-size: 0.7rem;
  }
}


.banner-square:hover {
  box-shadow: 0 0 10px rgba(255, 165, 0, 0.6); /* ظل خفيف بالبرتقالي عند المرور */
}

/* خلفية رئيسية للمتجر */
body#app {
  background: linear-gradient(90deg, #1e2633, #10151c);
  color: #ccc;
}

/* الصور بدون تدوير الزوايا */
.swiper-wrapper > div > a > img {
    border-radius: 0 !important;
}

/* تدرج الهيدر والفوتر بخلفيات داكنة واضحة */
#mainnav > div, 
.main-nav-container.fixed-header .inner, 
.store-footer__inner {
    background: linear-gradient(90deg, #2c3e50, #1c1c1c);
    box-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

/* أزرار إضافة المنتج مع ألوان واضحة وتأثير hover */
.dark .product-entry salla-add-product-button .s-button-wrap .s-button-element, 
.product-entry salla-add-product-button .s-button-wrap .s-button-element {
    background: linear-gradient(90deg, #E26B2E, #D86424);
    color: white !important;
    font-weight: 600;
    border-radius: 6px !important;
    transition: background 0.3s ease, transform 0.2s ease;
}

.dark .product-entry salla-add-product-button .s-button-wrap .s-button-element:hover, 
.product-entry salla-add-product-button .s-button-wrap .s-button-element:hover {
    background: #b04f1c;
    transform: scale(1.05);
    box-shadow: 0 0 10px #b04f1c;
}

/* علامة نفذت الكمية */
.product-entry.out-of-stock.sold-out:after {
    content: "نفذت الكمية";
    font-size: 2rem;
    color: #ff4c4c;
    font-weight: 700;
}

/* محاذاة روابط الفوتر */
.store-footer .store-links-items * {
    text-align: right !important;
}

/* ألوان النصوص الهامة */
.is_large .header-btn, 
#mainnav .is_large .header-btn, 
#mainnav .s-cart-summary-total, 
#mainnav [class^="sicon-"], 
#mainnav [class*=" sicon-"] {
    color: #f5f5f5;
    text-shadow: 0 0 3px rgba(0,0,0,0.6);
}

/* خلفية مميزة لعنوان الترويجي في البطاقة */
.promo-title, .promotion-title {
    background: linear-gradient(90deg, #E26B2E, #D86424);
    color: white;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 5px;
}

/* شكل البطاقة مع ظل ونص واضح */
.product-entry > div {
    background-color: #232b2f;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    padding: 0.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-entry > div:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 20px rgba(226,107,46,0.7);
}

/* لون العنوان داخل بطاقة المنتج */
.product-entry > div > div.title-wrapper > p {
    color: #E26B2E;
    font-weight: 600;
    text-shadow: 0 0 2px rgba(0,0,0,0.7);
}

/* لون السعر داخل البطاقة */
.product-entry > div > div.price-wrapper.items-center.flex.gap-1.w-full.justify-between.w-full.mb-2 > h4 {
    font-size: 1.1rem;
    color: #D86424;
    font-weight: 700;
    text-shadow: 0 0 3px rgba(0,0,0,0.7);
}

/* ازرار المفضلة */
.product-entry--vertical salla-button.btn--wishlist {
    margin-left: 9px;
    color: #E26B2E;
    transition: color 0.3s ease;
}
.product-entry--vertical salla-button.btn--wishlist:hover {
    color: #ff7b3a;
}

/* نصوص الأقسام والعناوين */
.section--title, .s-slider-block__title h2, .s-block__title h2 {
    text-transform: uppercase;
    background-image: linear-gradient( -225deg, #E26B2E 0%, #D86424 50%, #a0501b 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 900;
    animation: textclip 4s linear infinite;
}

/* تعديل حجم وأسلوب عنوان السلايدر */
.dark .s-slider-block__title h2 {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient( -225deg, #E26B2E 0%, #D86424 50%, #a0501b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 4px rgba(226, 107, 46, 0.7);
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

/* تدرج خفيف للفوتر مع تباين للنصوص */
.store-footer {
    background: linear-gradient(90deg, #1e2633, #10151c);
    color: #ccc;
    padding: 2rem 1rem;
}

.store-footer h3, 
.dark .da-cp {
    color: #E26B2E !important;
    font-weight: 700;
}

/* روابط الفوتر بخلفية شفافة وتأثير تمرير */
.store-footer .footer-container .footer-list a {
    background: transparent;
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    border-radius: 5px;
    color: #ccc;
    transition: color 0.3s ease, background-color 0.3s ease;
}
.store-footer .footer-container .footer-list a:hover {
    color: #E26B2E;
    background-color: rgba(226, 107, 46, 0.2);
}

/* تأثير تحريك بسيط على البانرات */
.banner-square {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 12px;
}
.banner-square:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(226, 107, 46, 0.5);
}

/* صورة الأفاتار في التقييم */
.testimonial__avatar > img {
    content: url(https://i.ibb.co/nrkjR00/soldier.png);
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(226,107,46,0.7);
}

/* نصوص القوائم الرئيسية */
.mm-spn.mm-spn--navbar.mm-spn--main ul.main-menu > li > a {
    color: #e26b2e;
    font-weight: 600;
    transition: color 0.3s ease;
}
.mm-spn.mm-spn--navbar.mm-spn--main ul.main-menu > li > a:hover {
    color: #d86424;
}

/* نصوص الروابط في القوائم الجانبية */
.mm-spn a {
    color: #ccc;
    transition: color 0.3s ease;
}
.mm-spn a:hover {
    color: #e26b2e;
}

/* نصوص النصوص الفرعية */
.dark .product-entry > div > div.title-wrapper > p, 
.dark .product-entry > div > div.price-wrapper > h4 {
    text-shadow: 0 0 5px rgba(0,0,0,0.6);
}

/* إخفاء بعض العناصر */
#app > div.app-inner.flex.flex-col.min-h-full > header > div.inner.nav-header > div > div.flex.items-center.justify-end.relative.w-max.items-center.md\:gap-4 {
    display: none !important;
}

/* Responsive tweaks */
@media (max-width: 667px) {
    .s-block--hero-slider .-translate-x-1\/2 {
        top: 75% !important;
    }
    .mob\:bottom-24 {
        bottom: 2rem;
    }
    .breadcrumbs {
        display: none;
    }
    .s-block--full-bg + .merge-with-top-component {
        margin-top: -4rem;
    }
    #app > div.app-inner.flex.flex-col.min-h-full > section > div > div.grid.grid-cols-3.items-baseline.gap-2.sm\:gap-6.lg\:gap-4 > div > div.flex-center.h-14.w-14.md\:h-20.md\:w-20 > i {
        margin: 1.5rem 0;
    }
}

@media (min-width: 1024px) {
    [dir="rtl"] .main-menu li:not(.menu-user-login).root-level.has-children > a {
        padding-left: 0.3em;
    }
    #app > div.app-inner.flex.flex-col.min-h-full > div.container.px-2\.5.ms\:px-5 > div > div > salla-infinite-scroll, #app > div.app-inner.flex.flex-col.min-h-full > section > div.grid.grid-cols-2.md\:grid-cols-4.lg\:grid-cols-6.gap-2.sm\:gap-6.lg\:gap-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    salla-slider .slide--one-sixth {
        width: 25% !important;
    }
}

.dark .s-block--banners .banner-square h3 {
    font-size: 1rem; /* حجم أصغر */
    font-weight: 600;
    background: linear-gradient(90deg, #E26B2E, #D86424, #a0501b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 1px 4px rgba(226, 107, 46, 0.6);
    letter-spacing: 0.6px;
    transition: text-shadow 0.3s ease;
}

.dark .s-block--banners .banner-square h3:hover {
    text-shadow: 0 2px 8px rgba(226, 107, 46, 0.9);
    cursor: pointer;
}
.dark .s-product-card-entry {
  background: linear-gradient(145deg, #1f272d, #27303a);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(226, 107, 46, 0.25);
  color: #f0c97d;
  padding: 1.2rem 1rem;
  font-weight: 600;
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

.dark .s-product-card-entry:hover {
  transform: translateY(-7px);
  box-shadow: 0 14px 32px rgba(226, 107, 46, 0.5);
  background: linear-gradient(145deg, #2f3a45, #3d4753);
  color: #ffd07a;
}

.dark .s-product-card-entry .title-wrapper > p {
  color: #e2a84c;
  font-weight: 700;
  text-shadow: 0 0 5px rgba(226, 107, 46, 0.85);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.dark .s-product-card-entry .price-wrapper > h4 {
  color: #d87e1f;
  font-weight: 700;
  font-size: 1.15rem;
  text-shadow: 0 0 6px rgba(255, 180, 50, 0.9);
}
.dark .s-product-card-category,
.dark .s-product-card-brand {
    color: #D97330;
    background: linear-gradient(135deg, rgba(217, 115, 48, 0.15), rgba(210, 100, 36, 0.1));
    padding: 4px 12px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.85rem; /* صغرنا الحجم */
    display: inline-block;
    margin-bottom: 0.5rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
    box-shadow: 0 2px 6px rgba(210, 100, 36, 0.3);
    transition: background 0.3s ease, color 0.3s ease;
}

.dark .s-product-card-category:hover,
.dark .s-product-card-brand:hover {
    color: #E26B2E;
    background: linear-gradient(135deg, rgba(226, 107, 46, 0.25), rgba(210, 100, 36, 0.15));
    box-shadow: 0 4px 12px rgba(226, 107, 46, 0.5);
    cursor: pointer;
}


.dark .s-product-card-content-footer .salla-add-product-button .s-button-outline {
  color: #c75b1e; /* لون برتقالي غني */
  border: 2px solid #c75b1e;
  background-color: transparent;
  transition: all 0.3s ease;
  font-weight: 600;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  box-shadow: 0 0 8px rgba(199, 91, 30, 0.4);
}

.dark .s-product-card-content-footer .salla-add-product-button .s-button-outline:hover {
  color: #fff;
  background-color: #c75b1e;
  border-color: #c75b1e;
  box-shadow: 0 0 15px rgba(199, 91, 30, 0.7);
  transform: scale(1.05);
}

.dark .s-product-card-content .salla-add-product-button .s-button-text {
  gap: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-shadow: 0 0 3px rgba(0,0,0,0.4);
}
.dark .s-product-card-content-title {
    color: #fff; /* نص أبيض واضح */
    font-weight: 700;
    font-size: 1.1rem;
    text-shadow: 0 0 8px rgba(226, 107, 46, 0.8); /* ظل برتقالي ناعم */
    transition: color 0.3s ease, text-shadow 0.3s ease;
    cursor: pointer;
    background: none; /* بدون تدرج */
    -webkit-text-fill-color: unset; /* تأكيد ظهور النص */
}

.dark .s-product-card-content-title:hover {
    color: #ffb96b; /* لون ذهبي فاتح عند المرور */
    text-shadow: 0 0 12px #ffb96b;
}
.opt-text strong:is(.dark *) {
    color: #fff !important; /* اللون الأبيض */
    font-weight: 600; /* جعل النص أكثر وضوحًا */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* ظل بسيط لتحسين الوضوح */
}

.text-primary {
    color: #E26B2E !important;  /* لون برتقالي زاهي */
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); /* ظل خفيف لتحسين وضوح النص */
}
/* قائمة جانبية */
.mm-spn.mm-spn--navbar ul {
    top: calc(var(--mm-spn-item-height) + 1px);
}

/* فتح القائمة */
.mm-spn ul.mm-spn--open {
    left: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: scroll;
}

/* خصائص للقائمة */
.mm-spn>ul {
    left: 0;
}

/* خصائص القائمة الجانبية عند التمرير */
.mm-spn ul {
    -webkit-overflow-scrolling: touch;
    position: fixed;
    top: 0;
    left: 100%;
    bottom: 0;
    z-index: 2;
    width: calc(100% + 30%);
    width: calc(100% + var(--mm-spn-panel-offset));
    padding-right: 30%;
    padding-right: var(--mm-spn-panel-offset);
    line-height: var(--mm-spn-line-height);
    overflow: visible;
    overflow-y: auto;
    background: linear-gradient(90deg, #2c3e50, #1c1c1c);  /* نفس تدرج الفوتر */
    transition: left .3s ease;
    cursor: pointer;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3); /* تأثير ظل القائمة */
}

/* تحسين الألوان والظلال */
.mm-spn ul a {
    color: #fff;
    font-size: 1rem;
    padding: 1rem;
    border-bottom: 1px solid #333;
    transition: all 0.3s ease;
}

.mm-spn ul a:hover {
    background-color: #E26B2E;
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
}

/* إخفاء التمرير */
.mm-spn ul::-webkit-scrollbar {
    display: none;
}

/* تدرج الخلفية لقائمة جانبية عند التمرير من اليمين إلى اليسار */
.mm-spn.mm-spn--navbar.mm-spn--main:where([dir="rtl"], [dir="rtl"] *):after {
    content: "القائمة الرئيسية";  /* عنوان للقائمة */
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    line-height: 50px;
    background: linear-gradient(135deg, #2c3e50, #1c1c1c);  /* نفس تدرج الفوتر */
    color: #fff;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    opacity: 0.8;
    z-index: 3;
    padding: 0 1rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
/* تخصيص الجسم داخل الـ modal في الوضع المظلم */
.dark .s-modal-body {
    background-color: #2c3e50;  /* خلفية مظلمة متناسقة */
    color: #ecf0f1;  /* لون النص باللون الفاتح ليكون مقروء */
    border-radius: 12px;  /* حواف دائرية ناعمة */
    padding: 25px;  /* زيادة padding لإعطاء مساحة أكبر */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);  /* تأثير الظل لجعل النافذة تطفو بشكل أقوى */
    transition: all 0.3s ease;  /* تأثير انتقال سلس */
    border: 1px solid rgba(255, 255, 255, 0.1);  /* إضافة حافة رقيقة باللون الأبيض */
}

/* تأثير عند التمرير على الجسم في الـ modal */
.dark .s-modal-body:hover {
    transform: translateY(-8px);  /* رفع النافذة قليلاً عند التمرير بشكل أكثر وضوحًا */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);  /* زيادة الظل بشكل أكبر عند التمرير */
}

/* تخصيص الأزرار داخل الـ modal */
.dark .s-modal-body .s-modal-button {
    background-color: #E26B2E;  /* زر برتقالي يتماشى مع الألوان المظلمة */
    color: #fff;  /* لون النص أبيض */
    padding: 12px 20px;  /* إضافة padding داخل الزر */
    border-radius: 8px;  /* حواف دائرية للزر */
    border: none;  /* إزالة الحدود الافتراضية للزر */
    font-size: 1.1rem;  /* تكبير حجم النص */
    cursor: pointer;  /* تغيير المؤشر عند التمرير على الزر */
    transition: background-color 0.3s ease;  /* تأثير الانتقال عند التمرير */
}

/* تأثير عند التمرير على الأزرار */
.dark .s-modal-body .s-modal-button:hover {
    background-color: #d85b1a;  /* تغيير لون الزر عند التمرير */
}

/* تخصيص عنوان الـ modal */
.dark .s-modal-body .s-modal-title {
    font-size: 1.5rem;  /* تكبير حجم الخط */
    font-weight: 600;  /* جعل النص عريض */
    color: #f39c12;  /* استخدام اللون الذهبي لتمييز العنوان */
    margin-bottom: 15px;  /* إضافة مسافة أسفل العنوان */
    text-align: center;  /* محاذاة العنوان في الوسط */
}

/* تخصيص النص داخل الـ modal */
.dark .s-modal-body p {
    font-size: 1rem;  /* حجم النص العادي */
    line-height: 1.6;  /* تحسين المسافات بين الأسطر */
    margin-bottom: 20px;  /* إضافة مسافة أسفل النص */
}

/* تحسين الحواف حول المحتوى في الـ modal */
.dark .s-modal-body .s-modal-content {
    border-radius: 10px;  /* إضافة حواف دائرية حول المحتوى */
    padding: 20px;  /* إضافة padding للمحتوى */
    background-color: rgba(255, 255, 255, 0.1);  /* خلفية شبه شفافة للمحتوى */