/* =========================================
   FIX Header: إزالة التكرار + تكبير الشعار/الأيقونات + تكبير نص القائمة بشكل متزن
   ========================================= */

/* 1) الديسكتوب: اخفِ عناصر الموبايل التي تسبب التكرار */
@media (min-width: 1024px){
  .main-menu .lg\:hidden,
  .main-menu li.lg\:hidden{
    display: none !important;
  }
}

/* 2) تكبير الشعار (السيلكتور الصحيح في سلة) */
.navbar-brand img,
img.logo-normal {
  max-height: 70px !important;
  width: auto !important;
}

@media (min-width: 1024px){
  .navbar-brand img,
  img.logo-normal{
    max-height: 70px !important;
  }
}

/* 3) تكبير أيقونات الهيدر (سلة/حساب/بحث/قائمة) */
header .top-navbar svg,
header .top-navbar i,
header .top-navbar button svg,
header .top-navbar a svg,
header .top-navbar a i{
  width: 24px !important;
  height: 24px !important;
  font-size: 24px !important;
}

@media (min-width: 1024px){
  header .top-navbar svg,
  header .top-navbar i,
  header .top-navbar button svg,
  header .top-navbar a svg,
  header .top-navbar a i{
    width: 28px !important;
    height: 28px !important;
    font-size: 28px !important;
  }
}

/* 4) تكبير نص القائمة "الديسكتوب فقط" بدون مبالغة */
@media (min-width: 1024px){
  .main-menu li.root-level > a{
    font-size: 1rem !important;      /* حجم متزن */
    font-weight: 700 !important;
    line-height: 1.3 !important;
    padding: 0.75rem 0.9rem !important;
    white-space: nowrap !important;
  }
}

/* 5) تثبيت محاذاة الهيدر حتى لا ينزل */
@media (min-width: 1024px){
  header .flex.items-center.justify-between.relative{
    align-items: center !important;
  }
}




/* =========================================
   تكبير الشعار + أيقونات الهيدر (سلة)
   ضع الكود آخر CSS
   ========================================= */

/* 1) اسمح للهيدر يستوعب الشعار */
@media (min-width: 1024px){
  header .header-main,
  header .top-navbar,
  header .navbar,
  header .main-menu-main-container{
    min-height: 90px !important;
    align-items: center !important;
  }
}

/* 2) تكبير الشعار (كل الاحتمالات) */
.navbar-brand img,
.navbar-brand > img,
img.logo-normal,
header img.logo-normal,
header .navbar-brand img {
  height: 60px !important;        /* ← غيّرها إذا تبي أكبر */
  max-height: 60px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
}

/* كمبيوتر أكبر */
@media (min-width: 1024px){
  .navbar-brand img,
  img.logo-normal,
  header .navbar-brand img{
    height: 75px !important;
    max-height: 75px !important;
    max-width: 320px !important;
  }
}

/* جوال */
@media (max-width: 1023px){
  .navbar-brand img,
  img.logo-normal{
    height: 60px !important;
    max-height: 60px !important;
    max-width: 240px !important;
  }
}

/* 3) لو الحاوية نفسها تحدد الارتفاع */
.navbar-brand{
  height: auto !important;
  max-height: none !important;
  display: flex !important;
  align-items: center !important;
}

/* 4) تكبير الأيقونات في الهيدر (بحث/سلة/حساب/قائمة) */
header .top-navbar svg,
header .top-navbar svg *,
header .top-navbar i,
header .top-navbar a i,
header .top-navbar button i,
header .top-navbar a svg,
header .top-navbar button svg,
header salla-icon,
header salla-icon svg,
header salla-icon svg *{
  width: 26px !important;
  height: 26px !important;
  font-size: 26px !important;
}

/* كمبيوتر أكبر */
@media (min-width: 1024px){
  header .top-navbar svg,
  header .top-navbar i,
  header salla-icon,
  header salla-icon svg{
    width: 30px !important;
    height: 30px !important;
    font-size: 30px !important;
  }
}


header svg, header i {
  width: 28px !important;
  height: 28px !important;
  font-size: 28px !important;
}




/* ===============================
   قصة متجر SmartEra – اجعل النص أبيض فقط
   =============================== */

html body section#about-6,
html body section#about-6 * {
  color: #ffffff !important;
}

/* كسر ألوان الثيم الافتراضية */
html body section#about-6 .text-store-text-primary,
html body section#about-6 .text-store-text-secondary,
html body section#about-6 p,
html body section#about-6 span,
html body section#about-6 h1,
html body section#about-6 h2,
html body section#about-6 h3,
html body section#about-6 h4,
html body section#about-6 h5,
html body section#about-6 h6 {
  color: #ffffff !important;
}


/* تثبيت الفوتر كمرجع */
footer .footer-bottom {
  position: relative !important;
}

/* أيقونات وسائل الدفع – يسار ومرفوعة داخل الفوتر */
footer .footer-bottom salla-payments {
  position: absolute !important;
  left: 12px !important;     /* مسافة خفيفة من اليسار */
  bottom: 20px !important;   /* مرفوعة شوي وداخل الفوتر */
  margin: 0 !important;
}

/* ترتيب الأيقونات نفسها */
footer .footer-bottom .s-payments-list {
  justify-content: flex-start !important;
}



/* تحريك صورة قسم "من نحن" لليسار */
#about-6 img {
  transform: translateX(-100px); /* 👈 حرّكها لليسار */
}


/* الجوال فقط: توسيط صورة قسم "من نحن" */
@media (max-width: 768px) {
  #about-6 img {
    transform: translateX(0) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
  }
}







/* توسيط أيقونات التواصل الاجتماعي في الفوتر */
footer .footer-bottom salla-social {
  display: flex !important;
  justify-content: center !important;
}

/* توسيط القائمة نفسها */
footer .footer-bottom .s-social-list {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px; /* مسافة جميلة بين الأيقونات */
}


footer .footer-bottom .container > div:has(salla-social) {
  display: flex !important;
  justify-content: center !important;
}




/* صف الفوتر الأساسي */
footer .footer-bottom .container {
  display: flex !important;
  align-items: center !important;
}

/* النص (الحقوق) إلى أقصى اليمين */
footer .footer-bottom .text-sm.footer-rights {
  margin-left: auto !important;   /* يدفعه لليمين في RTL */
  text-align: right !important;
}

/* أيقونات التواصل تبقى في المنتصف */
footer .footer-bottom salla-social {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
footer .footer-bottom .text-sm.footer-rights {
  padding-right: 30px;
}


/* أيقونات التواصل – وسط السطر ومرفوعة */
footer .footer-bottom salla-social {
  position: absolute !important;
  left: 50% !important;
  bottom: 22px !important;      /* 👈 ارفعها (غيّر الرقم حسب الذوق) */
  transform: translateX(-50%) !important;
}



/* =========================
   إصلاح الفوتر في الجوال
   ========================= */
@media (max-width: 768px) {

  /* إرجاع الفوتر للوضع الطبيعي */
  footer .footer-bottom {
    padding-bottom: 20px !important;
  }

  footer .footer-bottom .container {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
  }

  /* النص (الحقوق) */
  footer .footer-bottom .text-sm.footer-rights {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    order: 3;
  }

  /* أيقونات التواصل */
  footer .footer-bottom salla-social {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    order: 2;
  }

  footer .footer-bottom .s-social-list {
    justify-content: center !important;
  }

  /* أيقونات وسائل الدفع */
  footer .footer-bottom salla-payments {
    position: static !important;
    margin: 0 !important;
    order: 1;
  }

  footer .footer-bottom .s-payments-list {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px;
  }
}





/* =========================
   إصلاح البنر الرئيسي (خلفية) في الجوال
   ========================= */
/* =========================================
   Celia Advanced Slider - Mobile Fix
   يمنع قص الخلفية ويعرضها كاملة في الجوال
   ========================================= */
@media (max-width: 768px) {

  /* 1) اجعل أي سلايدر "متقدم" يعرض الخلفية كاملة */
  .s-block-slider .swiper-slide,
  .s-block-slider .swiper-slide > div,
  .s-block-slider [style*="background-image"],
  .s-block-slider [style*="background-image"] * {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
  }

  /* 2) ضبط ارتفاع السلايدر في الجوال (اختَر قيمة مناسبة) */
  .s-block-slider,
  .s-block-slider .swiper,
  .s-block-slider .swiper-wrapper,
  .s-block-slider .swiper-slide {
    height: 420px !important;      /* غيّرها: 360 / 420 / 480 */
    min-height: 420px !important;
  }

  /* 3) تأكيد ظهور النصوص فوق الخلفية */
  .s-block-slider .container,
  .s-block-slider .swiper-slide .container {
    position: relative !important;
    z-index: 5 !important;
  }
}









/* ====== شريط القائمة السفلية (سيليا) ====== */

/* الخلفية */
.selia-bottom-nav{
  background: #5B1E8E !important;   /* بنفسجي الشعار - غيّره إذا عندك كود لون محدد */
  border-top: none !important;
}

/* النصوص */
.selia-bottom-nav a,
.selia-bottom-nav span{
  color: #fff !important;
}

/* الأيقونات (SVG) */
.selia-bottom-nav svg{
  fill: #fff !important;
  stroke: #fff !important;
}

/* الرقم/البادج (مثل عدد السلة) */
.selia-bottom-nav .badge,
.selia-bottom-nav .s-badge{
  background: #fff !important;
  color: #5B1E8E !important;
}

/* تحسين بسيط: ظل خفيف */
.selia-bottom-nav{
  box-shadow: 0 -10px 25px rgba(0,0,0,.12) !important;
}





/* ====== توحيد لون كل عناصر الشريط السفلي إلى الأبيض ====== */

/* كل النصوص داخل الشريط */
.selia-bottom-nav,
.selia-bottom-nav * {
  color: #ffffff !important;
}

/* الأيقونات SVG */
.selia-bottom-nav svg,
.selia-bottom-nav svg * {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* عداد السلة (الدائرة الصغيرة) */
.selia-bottom-nav .badge,
.selia-bottom-nav .s-badge,
.selia-bottom-nav .count,
.selia-bottom-nav .cart-count {
  background: #ffffff !important;
  color: #5B1E8E !important;   /* بنفسجي الشريط */
  border: none !important;
}

/* العنصر النشط */
.selia-bottom-nav .active,
.selia-bottom-nav .router-link-active {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* منع أي لون رمادي من الثيم */
.selia-bottom-nav a,
.selia-bottom-nav span,
.selia-bottom-nav i {
  color: #ffffff !important;
}



/* ===== إجبار كل أيقونات الشريط السفلي تكون بيضاء ===== */

/* تغيير المتغير الأساسي للون */
.selia-bottom-nav{
  --bottom-nav-text-color: #ffffff !important;
}

/* أيقونات الخط (icon font) */
.selia-bottom-nav [class^="icon-"],
.selia-bottom-nav [class*=" icon-"]{
  color: #ffffff !important;
}

/* الأيقونات داخل span أو i */
.selia-bottom-nav i,
.selia-bottom-nav span{
  color: #ffffff !important;
}

/* الأيقونات SVG احتياط */
.selia-bottom-nav svg,
.selia-bottom-nav svg *{
  fill: #ffffff !important;
  stroke: #ffffff !important;
}