/* ====== متغيرات الألوان والشعار ====== */ :root { --color-primary: #2b89ca; --color-primary-dark: #000; --color-primary-light: #454545; --color-primary-reverse: #095990; --logo: url(https://ibb.co/Xk3NgmSn); }



/* ====== القوائم ====== */ .main-menu { margin-right: 10rem !important; } .main-menu li.root-level > a { font-weight: 700; font-size: 18px; color: var(--color-primary); } .main-menu span { font-size: 17px; } ul.hidden.lg:flex.items-center.rtl:pl-4.ltr:pr-4.whitespace-nowrap, .hidden.lg:flex.items-center { display: flex !important; }

/* ====== الخلفيات ====== */ .bg-gray-50, .s-product-card-image { background-color: #fff !important; } body { max-width: 2000px; margin: auto; background: #fdfbfbfff1f1; background-size: cover; background-repeat: repeat; background-image: url(''); }

div#mainnav.bg-white { background: transparent; }


/* ====== الأزرار ====== */ .s-button-wide { width: 100%; border-radius: 15px; } .s-button-primary-outline { fill: var(--color-primary); color: #556b2f; background: linear-gradient(to right, var(--color-primary-dark), var(--color-primary)) !important; } button.undefined.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline.s-button-loader-center { background: var(--color-primary); color: var(--infinte-color); box-shadow: 0 0 7px 0 var(--main-text-color);  }

/* ====== الفوتر ====== */ footer.store-footer { position: relative; overflow: visible; border-radius: 0 !important; margin: 0 !important; padding: 0; background: linear-gradient(to right, #0b2e3f, #164b63, #1e5e7a); width: 100vw !important; left: 0; bottom: 0; color: white; text-align: center; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; z-index: 10; }

footer.store-footer::before { content: ""; display: block; width: 100%; height: 90px; background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg"><path fill="%23ffffff" fill-opacity="1" d="M0,192L80,176C160,160,320,128,480,128C640,128,800,160,960,160C1120,160,1280,128,1360,112L1440,96L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z"/></svg>') no-repeat top center; background-size: cover; position: absolute; top: -1px; left: 0; z-index: 1; }

footer.store-footer svg.footer-wave { display: none; }

.footer-is-light .store-footer .store-footer__inner { background-color: transparent !important; } .footer-is-light .store-footer .social-link { width: 48px; height: 48px; margin: 8px; border-radius: 50%; background-color: white; color: #002366; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s ease; border: none; cursor: pointer; } .footer-is-light .store-footer .social-link:hover { background-color: var(--color-primary); color: white; transform: scale(1.1); } .footer-is-light .store-footer .contact-social { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 15px; }

footer.store-footer * { color: white !important; } footer.store-footer .footer-list, footer.store-footer .footer-logo, footer.store-footer h3, footer.store-footer p { display: none; }
/* ====== عناوين الأقسام مع حواف زيتية ====== */
.s-slider-block__title h2,
.s-block__title h2,
h2.mb-4.text-lg.font-bold.leading- {
    background: linear-gradient(to right, var(--color-primary-dark), var(--color-primary)) !important;
    border-radius: 2rem 0 0 1rem;
    font-size: 20px !important;
    font-weight: 700;
    color: #fff;
    padding: 10px 10px 10px 20px;
    margin-right: 15px;
    text-align: center;

    /* ====== إضافة الحواف الزيتية ====== */
    border: 2px solid #556b2f !important;
    box-sizing: border-box;
}
/* ====== شريط التمرير ====== */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track-piece { background-color: rgba(0, 0, 0, 0.2); } ::-webkit-scrollbar-thumb:vertical { height: 200px; background-color: var(--color-primary-reverse); } ::-webkit-scrollbar-thumb:vertical:hover { background-color: red; } ::-webkit-scrollbar-thumb:horizontal { width: 200px; background-color: rgba(125, 125, 125, 0.7); }

.product__description, .product__description * { color: #000000 !important; opacity: 1 !important; }

/* ====== زر واتساب (خدمة العملاء) ====== */
#whatsapp-button {
  position: fixed;
  bottom: 70px;
  right: 20px;
  background-color: #25d366;
  border-radius: 50px;
  padding: 0 9px;          /* مسافة داخلية مناسبة */
  height: 40px;
  display: inline-flex;      /* ✅ الحجم حسب المحتوى فقط */
/*  align-items: center;*/
  gap: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  color: white;
  font-size: 15px;
  text-decoration: none;
  font-family: inherit;      /* يستخدم نفس خط الموقع */
  width: 130px;               /* ✅ لا يمتد بعرض الصفحة */
  max-width: 200px;          /* اختياري، لمنع التوسع الزائد */
  white-space: nowrap;       /* يمنع كسر النص على سطر جديد */
}

#whatsapp-button img {
  width: 26px;
  height: 26px;
  display: block;
}

/* ====== فقاعة الترحيب ====== */
.whatsapp-bubble {
position: fixed;
bottom: 120px;
right: 20px;
background: white;
color: black;
padding: 8px 12px;
border-radius: 12px;
font-size: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
z-index: 9998;
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
.whatsapp-bubble.hide {
opacity: 0;
}

/* 🧱 الحاوية العامة التي تحتوي على الخانات */
.quick-links-container {
display: grid;
grid-template-columns: repeat(4, 1fr) !important ; /* ✳️ عدد الأعمدة في الصف (يمكنك تغييره إلى 3 أو 2 حسب رغبتك) */
gap: 10px;                             /* ✳️ المسافة بين الخانات */

width: 95%;                            /* ✳️ عرض الحاوية الكامل */
max-width: 1200px;                     /* ✳️ أقصى عرض للحاوية */
height: auto;                          /* ✳️ الارتفاع التلقائي حسب عدد الصفوف */

margin: 20px auto;                     /* ✳️ الهوامش الخارجية (أعلى وأسفل وأطراف) */
background-color: transparent;         /* ✳️ لا خلفية ولا حواف */
box-sizing: border-box;
}

/* 🟦 الخانة الواحدة (كل مربع أو مستطيل) */

/* 💎 تحسين مظهر الخانات بإضافة حواف جميلة وتأثير ظل */
.quick-link {
background-color:( #d3e61, #2b5b80);      /* ← يمكنك تغييره للون المتجر */

border-radius: 0px 15px 0px 15px;  /* ⬅️ الركن السفلي الأيمن سيكون مستقيم */
/* ← تحكم في انحناء الحواف (20-30 ممتاز) */
overflow: hidden;               /* ← يمنع تجاوز المحتوى خارج الحواف */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* ← ظل ناعم حول الخانة */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* عند تمرير الماوس */
.quick-link:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}

.quick-link img {
width: 100%;
height: 100%;
object-fit: cover;      /* ← يجعل الصورة تملأ نصف المساحة بالكامل */
object-position: center;/* ← يجعل الصورة متمركزة من المنتصف */
border-radius: 0 0px 0px 0; /* ← يعطي انحناء ناعم للزاوية اليمنى */
display: block;
}

/* 📝 النصف الخاص بالكتابة */


/* ✨ تأثير بسيط عند التمرير */
.quick-link:hover {
transform: translateY(-3px);
}

/* 📱 في الشاشات الصغيرة (الجوال) — يجعلها عمودين */
@media (max-width: 600px) {
.quick-links-container {
grid-template-columns: repeat(2, 1fr); /* ✳️ صفين فقط في الجوال */
}
.quick-link {
height: 50px;                         /* ✳️ تصغير الارتفاع للجوال */
}


.s-product-card-vertical {
border: 1px solid #556b2f !important;     /* إطار بلون التنسيق */
}


/* خانة البحث نفسها */
input[type="search"],
.search-bar,
.search-container {
background-color: #f9f6f1 !important;
border: 1px solid #ddd !important;
color: #000 !important;
border-radius: 8px !important;
padding: 10px !important;
}


/* زر أضف للسلة - تغطية كا*/
.s-product-card-content-subtitle {
display: none !important;
}

/* ======== الحاوية الرئيسية لأسفل البطاقة ======== */

.s-button-wide {
display: block !important;
width: 80% !important;
padding: 10px 0 !important;
line-height: 1.4 !important;
text-align: center !important;
box-sizing: border-box !important;
margin-right: 8px  !important;
}



.s-product-card-vertical .s-button-wide {
left: calc(+45px) !important; /* ⬅️ إزاحة بسيطة نحو اليسار */
transform: translate(-50%, -4px)!important; /* رفع الزر قليلاً */
text-align: center !important;
padding: 4px 0 !important ;
}

/* إخفاء اسم المنتج إذا تجاوز سطرين */
/* إخفاء اسم المنتج إذا تجاوز سطرين */
.s-product-card-vertical h3 {
  display: -webkit-box;            /* تفعيل صناديق WebKit */
  -webkit-box-orient: vertical;    /* اتجاه عمودي */
  -webkit-line-clamp: 2;           /* عدد الأسطر (هنا سطرين فقط) */
  overflow: hidden;                /* اخفاء النص الزائد */
  text-overflow: ellipsis;         /* إضافة (...) عند القطع */
  white-space: normal;             /* السماح بالتفاف النص */
  line-height: 1.2em;              /* ارتفاع كل سطر */
  max-height: 2.4em;               /* ارتفاع كلي لسطرين */
}



/* ===========================
CSS: بطاقات المنتجات وتحريك زر أضف للسلة
استثناء: لا تغيّر السلايدر العلوي (غير مُمَسَّح)
=========================== // 🌟 ضبط تصميم البطاقات وتوزيعها بدون HTML */


/* زر أضف للسلة */

/* الصفحة الرئيسية: 3 منتجات في الصف */
.home-page .s-product-card-vertical {
  width: calc(33.333% - 12px) !important;
  max-width: calc(33.333% - 12px) !important;
  flex: 0 0 calc(33.333% - 12px) !important;
  height: 100px !important;
  padding: 2px !important;
  margin: 2px !important;
  box-sizing: border-box !important;
}


/* تباعد المنتجات داخل السلايدر (المنتجات المتحركة) */
.slick-slide > .s-product-card-vertical,
.swiper-slide > .s-product-card-vertical {
  margin: 3px !important;
}


/* ===== subcategories bar ===== */
.subcategories-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 14px;
  background: transparent;
  z-index: 9999;
  margin-bottom: 20px;
}



.subcategory-item {
  flex: 0 0 auto;
  background: linear-gradient(to left, #2b89ca, #095990, #000); /* ← هنا لون الخلفية */
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .18s, box-shadow .18s;
}

.subcategory-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}

style.textContent = `
  .bottom-header-buttons {
    position: fixed;
    bottom: 30px; /* ← تم رفع الشريط 30px */
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    border-top: 1px solid #ddd;
    padding: 5px 0;
    z-index: 9999;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
  }
  
  
  /* امتداد الفوتر لتحت بدون تحريك الأزرار */
footer.store-footer {
  position: relative;
  overflow: visible; /* حتى يظهر أي محتوى ممتد */
  padding-bottom: 100px; /* ← هذا يضيف المسافة اللونية من تحت */
  background: linear-gradient(to right, #0b2e3f, #164b63, #1e5e7a); /* الخلفية نفسها */
}

#discount-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 35px;
  background: #808000;
  color: #fff;
  font-size: 0.85rem;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 0; /* تأكد أن المربع ليس له حشوة كبيرة */
  box-sizing: border-box;
}

#discount-close {
  position: absolute;
  left: 2px;         /* قريب جدًا من الحافة اليُسرى */
  top: 2px;          /* قريب جدًا من الحافة العلوية */
  width: 18px;       /* عرض صغير للزر */
  height: 15px;      /* ارتفاع صغير للزر */
  line-height: 18px; /* لمحاذاة النص داخل الزر */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;   /* حجم حرف أصغر */
  color: #ff0000;
  background: transparent; /* بدون خلفية إضافية */
  border: 0;
  padding: 0;
  margin: 0;
}

body {
  margin-top: 35px !important;
}

/* اجبار كل خانة أن تكون بلوك بنفس عرض الصورة فقط
  */
/* ===========================
   تصميم البطاقة الرئيسية
   =========================== */
.banner-entry.square-photos {
    display: flex !important;
    flex-direction: column;
    width: 50% !important;
    text-align: center;
    border: 2px solid #e5e5e5;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    padding: -10px;
    margin: 0;
}

/* ===========================
   حقل العنوان داخل البطاقة
   =========================== */
.banner-entry.square-photos h3.text-with-border {
    margin: 0 !important;
  color: #fff;
  padding: 10px 5px !important;
    background: #ffffff !important;
    width: 100%;
    border: 1px solid #e5e5e5;
    box-sizing: border-box;
}

/* ===========================
   تنسيق نص العنوان
   =========================== */
.banner-entry.square-photos h3.text-with-border {
    margin: 0 !important;
    padding: 10px 5px !important;
    background: transparent !important;  /* اجعل الخلفية شفافة نهائيًا */
    width: 100%;
    border-top: 1px solid #e5e5e5;
    box-sizing: border-box;
}

/* ===========================
   تنسيق الصورة داخل البطاقة
   =========================== */
.banner-entry.square-photos .lazy__bg {
    width: 100%;
    height: 200px;
   /* border-radius: 4px 4px 2px 2;*/
}

/* ===========================
   إزالة التعتيم عن الصور
   =========================== */
.banner-entry.square-photos.has-overlay::before {
    display: none !important;
}

/* ===========================
   شبكة المنتجات أفقية قابلة للتمرير بدون أي خط أو شريط
   =========================== */
.grid.one-row,
.grid.two-row {
    display: flex !important;           /* صفوف أفقية */
    gap: 10px !important;               /* مسافة بين المنتجات */
    overflow-x: auto;                   /* التمرير الأفقي */
    scroll-behavior: smooth;            /* تمرير سلس */
    -webkit-overflow-scrolling: touch;  /* تمرير سلس على الأجهزة اللمسية */

    /* إخفاء شريط التمرير */
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
}

.grid.one-row::-webkit-scrollbar,
.grid.two-row::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, Opera */
}

/* منع اختفاء العناصر عند نهاية الصف */
.grid.one-row > *,
.grid.two-row > * {
    flex: 0 0 auto;  /* اجعل كل عنصر بنفس الحجم ولا ينكمش */
}

/* ===========================
   شارة الخصم الكبيرة على زاوية البطاقة
   =========================== */
.discount-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #e60023;
    color: #fff;
    padding: 5px 8px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 6px;
    z-index: 9;
}

/* ===========================
   شارة الخصم الصغيرة أسفل الصورة
   =========================== */
.discount-badge-test {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #e60023;
    color: #fff;
    padding: 0px 2px;
    font-size: 11px;
    font-weight: bold;
    border-top-right-radius: 2px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 10;
    display: inline-block;
    white-space: nowrap;
}

/* ===========================
   زر المفضلة داخل البطاقة
   =========================== */
.s-product-card-wishlist-btn {
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}