/* Add custom CSS styles below */ 
/* ————————————————
   اللون الأساسي للمتجر
   ———————————————— */
:root {
  --primary-color: rgb(226, 226, 226);
  --secondary-color: rgb(226, 226, 226);
  --main-color: rgb(226, 226, 226);
}

/* خلفية الموقع */
body,
.site-wrapper,
.app-content,
.app-inner {
  background-color: rgb(226, 226, 226) !important;
}
/* العناوين */
h1, h2, h3, h4, h5, h6 {
  color: rgb(226, 133, 33) !important;
}

/* النصوص العامة */
p, span, a, label, li {
  color: rgb(226, 133, 33);
}

/* الأزرار العامة */
button,
.btn,
.btn-primary {
  background-color: transparent !important;
  color: rgb(226, 133, 33) !important;
  border-color: rgb(226, 133, 33) !important;
}


}

/* إزالة الخلفية والظل بالقوة */
#mainnav.main-nav-container {
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* لأن Tailwind حاط bg-white */
#mainnav.bg-white {
  background-color: transparent !important;
}

/* إزالة أي خلفية داخلية */
#mainnav .inner,
#mainnav .container {
  background: transparent !important;
}

/* ألوان الأيقونات والنص */
.store-header a,
.store-header i,
.store-header svg {
  color: #fff !important;
  fill: #fff !important;
}

/* عداد السلة */
.store-header .s-cart-summary-count {
  background: #fff;
  color: #000 !important;
}
.full-banner-entry:before,
.full-banner-entry:after {
    display: none !important;
}
/* CSS عام للهيدر */
.store-header .s-cart-summary-count {
    background: #fff;
    color: #000 !important;
}

/* خلفية افتراضية للهيدر على الصفحات الغير رئيسية */
body:not(.home) #mainnav {
    background-color: rgb(60,40,107) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* نصوص وأيقونات الهيدر على الصفحات الغير رئيسية */
body:not(.home) .store-header a,
body:not(.home) .store-header i,
body:not(.home) .store-header svg {
    color: #fff;
    fill: #fff;
}

/* الصفحة الرئيسية، نصوص وأيقونات باللون البرتقالي */
body.home .store-header a,
body.home .store-header i,
body.home .store-header svg {
    color: rgb(226,133,33) !important;
    fill: rgb(226,133,33) !important;
}

/* =========================
   جعل كل عناصر الهيدر برتقالية
   ========================= */

/* النصوص والروابط */
.store-header,
.store-header a,
.store-header span,
.store-header p,
.store-header b,
.store-header h1 {
  color: rgb(226, 133, 33) !important;
}

/* جميع الأيقونات (font icons) */
.store-header i {
  color: rgb(226, 133, 33) !important;
}

/* أيقونات SVG داخل الهيدر */
.store-header svg,
.store-header svg path {
  fill: rgb(226, 133, 33) !important;
}

/* أيقونة القائمة (الهامبرغر) تحديدًا */
.store-header .sicon-menu {
  color: rgb(226, 133, 33) !important;
}

/* أيقونة المستخدم */
.store-header .sicon-user-circle {
  color: rgb(226, 133, 33) !important;
}

/* أيقونة السلة */
.store-header .sicon-shopping-bag,
.store-header .s-cart-summary-icon {
  color: rgb(226, 133, 33) !important;
  fill: rgb(226, 133, 33) !important;
}

/* عداد السلة */
.store-header .s-cart-summary-count {
  background-color: rgb(226, 133, 33) !important;
  color: rgb(60, 40, 107) !important; /* عشان يكون واضح */
}

/* السعر بجانب السلة */
.store-header .s-cart-summary-content,
.store-header .s-cart-summary-total,
.store-header .sicon-sar {
  color: rgb(226, 133, 33) !important;
}

/* الشعار (الصورة) – منع تغيّر لونه بسبب الشفافية */
.store-header .navbar-brand img {
  filter: none !important;
  opacity: 1 !important;
}
/* ————————————————
   قسم المميزات (Features) مع ظل
   ———————————————— */
.s-block--features__item {
  background-color: #f3f4f6 !important;  /* بنفسجي */
  border: 1px solid #3C286B;
  color: #E28521 !important;             /* نص برتقالي */
  padding: 20px;
  border-radius: 12px;                    /* حواف ناعمة */
  text-align: center;

  /* ظل خفيف يعطي عمق للمربع */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* حركة سلسة عند hover */
}

/* تأثير عند المرور على المربع */
.s-block--features__item:hover {
  transform: translateY(-5px); /* يرفع المربع قليلًا */
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5); /* ظل أكبر عند hover */
}


/* العنوان والنص داخل الميزة */
.s-block--features__item h2,
.s-block--features__item p {
  color: #E28521 !important;
}

/* Hover ناعم (اختياري) */
.s-block--features__item:hover {
  background-color: #2F1F55 !important; /* بنفسجي أغمق عند المرور */
}
/* ————————————————
   سلايدر الصور (Swiper Slides) مع حواف وظل بدون حركة
   ———————————————— */
.swiper-slide a {
  display: block;
  border-radius: 12px;                    /* حواف ناعمة */
  overflow: hidden;                       /* يمنع تجاوز الصورة للحواف */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* ظل خفيف */
  transition: box-shadow 0.3s ease, background-color 0.3s ease; /* حركة سلسة للظل فقط */
}

/* Hover بدون أي حركة */
.swiper-slide a:hover {
  transform: none !important;             /* يمنع رفع الصورة */
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5); /* ظل أكبر فقط */
}

/* الصورة نفسها داخل الرابط */
.swiper-slide img {
  border-radius: 12px;                    /* حواف ناعمة للصورة */
  width: 100%;
  height: auto;
  display: block;
}
/* تغيير خلفية بطاقة المنتج */
.s-product-card-content {
    background-color: rgb(243, 244, 246); /* اللون المطلوب */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* ظل خفيف */
    border-radius: 8px; /* حواف دائرية بسيطة لتجميل الشكل */
    padding: 10px; /* مسافة داخلية */
}

/* يمكن تعديل التباعد الداخلي للعناصر داخل البطاقة */
.s-product-card-content-main,
.s-product-card-content-sub,
.s-product-card-content-footer {
    margin-bottom: 8px;
}
/* ————————————————
   كروت السلايدر مع ظل بدون أي حركة
   ———————————————— */
.slide--cat-entry {
  background-color: #f3f4f6 !important;
  border: 1px solid #3C286B;
  color: #E28521 !important;
  border-radius: 12px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

/* العنوان والأيقونة داخل البطاقة */
.slide--cat-entry h2,
.slide--cat-entry i {
  color: #E28521 !important;
}

/* Hover بدون أي حركة */
.slide--cat-entry:hover {
  background-color: #2F1F55 !important;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
  transform: none !important;  /* يمنع أي رفع أو حركة */
}
/* تغيير خلفية بطاقة المنتج */
.s-product-card-content {
    background-color: #f3f4f6; /* اللون المطلوب */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* ظل خفيف */
    border-radius: 8px; /* حواف دائرية */
    padding: 10px; /* مسافة داخلية للبطاقة */
}
custom-salla-product-card {
    border: 1px solid #3C286B;
    border-radius: 8px;
    display: block; /* لازم يكون block عشان الحدود تظهر صح */
}
.s-product-card-content-title a {
    color: rgb(226, 133, 33);
}
.store-footer__inner {
    border: 1.5px solid #3C286B;
    padding: 10px; /* اختياري: يعطي مساحة داخلية للفوتر */
  box-sizing: border-box; /* عشان البُعد يشمل الحدود */
}
  .md\:flex.items-center.justify-between.py-4.container.text-center {
    background-color: #3C286B;
}
.text-gray-400 {
    color: rgb(226, 133, 33) !important;
}
/* خلفية القسم */
.mm-spn.mm-spn--navbar:after {
    background-color: rgb(60, 40, 107); /* الخلفية */
    color: rgb(226, 133, 33); /* لون النص */
}

/* لو في نصوص داخل القائمة */
.mm-spn.mm-spn--navbar * {
    color: rgb(226, 133, 33) !important; /* يضمن تغيير كل النصوص الداخلية */
}
/* خلفية القائمة */
ul.main-menu.mm-spn--open {
    background-color: rgb(60, 40, 107); /* لون الخلفية المطلوب */
}

/* لون الخط للعناصر */
ul.main-menu.mm-spn--open li,
ul.main-menu.mm-spn--open a {
    color: rgb(226, 133, 33); /* لون النص المطلوب */
}
/* خلفية المودال */
.s-modal-body {
    background-color: rgb(60, 40, 107) !important;
    color: rgb(226, 133, 33); /* اللون الافتراضي للنصوص */
}

/* النصوص المحددة */
.s-verify-message,
.s-login-modal-title,
.s-verify-current {
    color: rgb(226, 133, 33) !important;
}

/* زر الإغلاق */
.s-modal-close button,
.s-modal-close {
    color: rgb(226, 133, 33) !important;
}

/* iframe داخل المودال */
.s-modal-body iframe {
    background-color: rgb(60, 40, 107);
}
salla-add-product-toast::part(toast) {
    background-color: rgb(60, 40, 107) !important;
}
salla-add-product-toast::part(text) {
    color: rgb(226, 133, 33);
}
.cart-item {
    background-color: #f3f4f6;
  border: 1px solid #3C286B;
}
.s-quantity-input-input {
    background-color: #f3f4f6; /* الخلفية */
    color: rgb(226, 133, 33); /* لون النص */
}

.s-user-menu-trigger {
    background-color: transparent !important;
}
.s-product-card a,
.s-cart-summary-wrapper a,
a[href*="/p"] {
    text-decoration: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}