/*****************HEADER***************/
/*top-navbar*/

@media (max-width: 1023px){

  /* top-navbar */
  .topnav-is-dark .top-navbar{
    --tw-bg-opacity: 1 !important;
    background-color: #4D1572 !important; /* اللون الجديد */
  }

  /* اللون الأساسي + الهوفر */
  .topnav-is-dark .top-navbar .topnav-link-item{
    color: #ffffff !important; /* كان عندك #fffff خطأ */
    background: transparent !important;
    opacity: 1 !important;
  }

  .topnav-is-dark .top-navbar .topnav-link-item:hover{
    color: #ff741f !important;
    opacity: 1 !important;
    background: transparent !important;
  }
}



@media (min-width: 1024px){
  /* top-navbar */
  .topnav-is-dark .top-navbar{
    --tw-bg-opacity: 1 !important;
    background-color: #4D1572 !important; /* اللون الجديد */
  }

  /* الشكل الطبيعي */
  .topnav-is-dark .top-navbar .topnav-link-item{
    color: #ffffff !important;
    background: transparent !important;
    opacity: 1 !important;

    /* مستطيل بدون زوايا */
    border-radius: 0 !important;
    padding: 10px 14px !important;

    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;

    transition: background-color .2s ease, color .2s ease;
  }

  /* الهوفر: خلفية ممتلئة + النص أبيض */
  .topnav-is-dark .top-navbar .topnav-link-item:hover,
  .topnav-is-dark .top-navbar .topnav-link-item:focus-visible{
    background: #ff741f !important;
    color: #ffffff !important;
  }

  /* مهم عشان المستطيل يبان "ممتلئ" وما ينقص من الطرف */
  .topnav-is-dark .top-navbar{
    padding: 0 !important;
  }

  /* أعطِ القائمة نفسها ارتفاع وتأكد ما في فراغات */
  .topnav-is-dark .top-navbar .topnav-links,
  .topnav-is-dark .top-navbar nav,
  .topnav-is-dark .top-navbar ul{
    height: 100% !important;
  }

  /* لو أول/آخر عنصر ينقصه طرف: امنع قص الخلفية */
  .topnav-is-dark .top-navbar,
  .topnav-is-dark .top-navbar *{
    overflow: visible !important;
  }

}



.main-menu {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    text-align: center !important;

}

@media (max-width: 1023px){
  /* اجبار الروابط انها تظهر */
  .topnav-is-dark .top-navbar .topnav-link-item{
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* اجبار حاوية الروابط انها تكون ظاهرة (قد تختلف حسب الثيم، لذلك حطيت أكثر من سيلكتور) */
  .topnav-is-dark .top-navbar ul,
  .topnav-is-dark .top-navbar .topnav-links,
  .topnav-is-dark .top-navbar .topnav-menu,
  .topnav-is-dark .top-navbar nav{
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
  }


}


/*HEADER*/




body.trans_header.slider_has_overlay .store-header :not(custom-salla-product-card *) {
    color: #1f2937;
}

body.trans_header.slider_has_overlay .store-header .s-cart-summary-wrapper .sicon-cart:not(custom-salla-product-card *), body.trans_header.slider_has_overlay .store-header :not(custom-salla-product-card *) {
    color: #1f2937;
}

/*headerTest*/


/*****************HERO SECTION****************/ 
/* ✅ إعدادات سهلة التعديل */
:root{
  --hero-max: 1440px;   /* غيّرها إذا سكشن المنتجات عندك أوسع/أضيق */
  --hero-gutter: 16px;  /* المسافة من يمين ويسار الشاشة */
  --hero-radius: 22px;  /* الزوايا الدائرية */
  --hero-border: 1px;   /* سمك الحافة */
  --hero-border-color: rgba(0,0,0,.08);

  /* ✅ (جديد) ارتفاع الهيرو */
  --hero-height: 520px;        /* سطح المكتب */
  --hero-height-mobile: 320px; /* الجوال */
}

/* ✅ اجعل الهيرو بنفس عرض السكشن اللي تحته + حواف + ارتفاع ثابت */
.advanced-slider{
  width: min(calc(100% - (var(--hero-gutter) * 2)), var(--hero-max));
  margin-inline: auto;            /* توسيط */
  border-radius: var(--hero-radius);
  overflow: hidden;               /* مهم عشان الصورة تنقص مع الـ radius */
  border: var(--hero-border) solid var(--hero-border-color);
  background: #fff;               /* يعطي نظافة لو فيه فراغات */

  /* ✅ (جديد) اجبار متغيرات السلايدر في سلة */
  --sliderHeight: var(--hero-height) !important;
  --mobileSliderHeight: var(--hero-height-mobile) !important;
}

/* ✅ (جديد) تطبيق الارتفاع على سوايبر والسلايد */
.advanced-slider,
.advanced-slider .swiper,
.advanced-slider .swiper-slide{
  height: var(--hero-height) !important;
}

/* ✅ لو الهيرو داخله سوايبر/سلايدر، خلي القص مضبوط */
.advanced-slider .swiper,
.advanced-slider .swiper-wrapper,
.advanced-slider .swiper-slide{
  border-radius: inherit;
}

/* ✅ (مُعدّل) الصور/الفيديو داخل الهيرو: قص جميل بدل ما يطوّل */
.advanced-slider img,
.advanced-slider picture img,
.advanced-slider video{
  display: block;
  width: 100% !important;
  height: 100% !important;     /* بدل auto */
  object-fit: cover !important;/* أهم سطر */
  object-position: center !important;
}

/* ✅ موبايل: زوايا ومسافات وارتفاع أنعم */
@media (max-width: 640px){
  :root{
    --hero-gutter: 12px;
    --hero-radius: 14px;
    --hero-height-mobile: 300px; /* تقدر تغيّرها */
  }

  .advanced-slider,
  .advanced-slider .swiper,
  .advanced-slider .swiper-slide{
    height: var(--hero-height-mobile) !important;
  }
}




/***********BANNER_1**************/

.s-block {
        margin-top: 3rem;
    }

/*slider*/
/* خلفية السلايدر + padding داخل البلوك */
.s-block:has(.s-products-slider-wrapper){
  background: #4D1572 !important;
  padding-top: 35px !important;
  padding-bottom: 35px !important;
  border-radius: 22px !important;
}

.s-block:has(.s-products-slider-wrapper) .text-store-text-primary{
  color: #fff !important;
}


/*عرض الكل*/
/* زر "عرض الكل" داخل بلوك سلايدر المنتجات فقط */
.s-block:has(.s-products-slider-wrapper) .btn.btn--outline-primary{
  color: #ffffff !important;
  border-color: #ffffff !important;
  border-radius: 15px !important;  /* زاوية دائرية كاملة (pill) */
}

/* الهوفر */
.s-block:has(.s-products-slider-wrapper) .btn.btn--outline-primary:hover{
  color: #ff741f !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
  border-radius: 15px !important;  /* تثبيت نفس الزاوية عند الهوفر */
}

/*لون سهم السلايدر*/
/* سهم السلايدر: اللون العادي */
.s-block--best-offers .s-slider-block__title-left .s-slider-block__title-nav .s-slider-nav-arrow,
salla-products-slider .s-slider-block__title-left .s-slider-block__title-nav .s-slider-nav-arrow{
  background: #ff741f !important;     /* خلفية الزر */
  color: #ffffff !important;          /* لون الأيقونة إذا تعتمد color */
  border: 0 !important;
  border-radius: 999px !important;    /* زاوية دائرية */
  width: 40px !important;
  height: 40px !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.15) !important;
}

/* لو الأيقونة SVG وتستخدم fill/stroke */
.s-block--best-offers .s-slider-nav-arrow svg,
salla-products-slider .s-slider-nav-arrow svg{
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* الهوفر */
.s-block--best-offers .s-slider-block__title-left .s-slider-block__title-nav .s-slider-nav-arrow:hover,
salla-products-slider .s-slider-block__title-left .s-slider-block__title-nav .s-slider-nav-arrow:hover{
  background: #ffffff !important;     /* خلفية عند الهوفر */
  color: #ffffff !important;          /* لون الأيقونة عند الهوفر */
}

/* هوفر للأيقونة SVG */
.s-block--best-offers .s-slider-nav-arrow:hover svg,
salla-products-slider .s-slider-nav-arrow:hover svg{
  fill: #ff741f !important;
  stroke: #ff741f !important;
}


/*CARD-HEIGHT*/ 
/* ===== تصغير بطاقات سلايدر المنتجات (Desktop فقط) + منع الصور الطويلة ===== */
@media (min-width: 1024px){

  /* 1) إجبار مكوّن البطاقة (web component) على ارتفاع ثابت */
  .fit-slider-products .swiper-slide custom-salla-product-card{
    height: 420px !important;      /* عدّلها: 380 / 400 / 450 */
    min-height: 420px !important;
    display: flex !important;
  }

  /* 2) كسر قاعدة الثيم اللي تخلي height = max-content */
  body:not(.free-images-height) .fit-slider-products .swiper-slide .product-card:not(.product-card--fit-height):not(.product-card__full-image):not(.product-card--minimal):not(.product-card--horizontal){
    height: 100% !important;
    min-height: 100% !important;
  }

  /* 3) جعل الكرت Flex عشان نثبت الزر تحت */
  .fit-slider-products .swiper-slide .product-card{
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden;
  }

  /* 4) تحديد ارتفاع ثابت لمنطقة الصورة */
  .fit-slider-products .product-card .product-card__image,
  .fit-slider-products .product-card .product-card__image a{
    height: 250px !important;      /* عدّلها: 160 / 180 / 210 */
    display: block !important;
  }

  /* 5) إجبار الصورة تنضغط داخل المساحة بدون ما تطوّل الكرت */
  .fit-slider-products .product-card .product-card__image img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;  /* مهم جداً */
    object-position: center !important;
    transform: none !important;      /* يلغي zoom حق lazy */
  }

  /* 6) (اختياري) قص عنوان المنتج لسطرين عشان ما يزيد الطول */
  .fit-slider-products .product-card .product-card__title,
  .fit-slider-products .product-card .product-card__name{
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 44px;
  }

  /* 7) تثبيت زر الإضافة أسفل البطاقة */
  .fit-slider-products .product-card .product-card__actions,
  .fit-slider-products .product-card .product-card__footer{
    margin-top: auto !important;
  }
}






/**************** salla-photo-slider****************/

/* متغيرات خاصة بسلايدر الصور فقط (لا تؤثر على الهيرو) */
salla-slider.photos-slider{
  --photo-max: 1460px;     /* عرض سلايدر الصور */
  --photo-gutter: 16px;    /* مسافة يمين/يسار */
  --photo-radius: 22px;    /* الزوايا */
}

/* 1) تقليص عرض سلايدر الصور وتوسيطه */
salla-slider.photos-slider{
  display: block;
  width: min(calc(100% - (var(--photo-gutter) * 2)), var(--photo-max));
  margin-inline: auto;
  border-radius: var(--photo-radius);
  overflow: hidden;
}

/* 2) منع ظهور جزء من السلايد التالي + إزالة الـ padding اللي يسبب peek */
salla-slider.photos-slider .swiper{
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;

  padding-left: 0 !important;
  padding-right: 0 !important;

  overflow: hidden !important; /* مهم لمنع ظهور اللي بعده */
}

/* 3) تأكيد أن كل سلايد يأخذ كامل العرض */
salla-slider.photos-slider .swiper-slide{
  width: 100% !important;
  margin: 0 !important;
}

/* 4) توحيد القص مع الزوايا داخل السلايدر */
salla-slider.photos-slider .swiper,
salla-slider.photos-slider .swiper-wrapper,
salla-slider.photos-slider .swiper-slide{
  border-radius: inherit;
}

/* موبايل: مسافات وزوايا أنعم (بدون :root) */
@media (max-width: 640px){
  salla-slider.photos-slider{
    --photo-gutter: 12px;
    --photo-radius: 14px;
  }
}


/*arrow slider*/ 
/* 🎯 لون أسهم السلايدر (عادي + هوفر) */
:root{
  --slider-arrow: #ff741f;
}

/* الحالة العادية: خلفية برتقالي + السهم أبيض */
.s-slider-v-centered .s-slider-block__title-nav button.s-slider-nav-arrow,
.s-slider-v-centered .s-slider-block__title-nav button.s-slider-nav-arrow:hover{
  box-shadow: none !important; /* إذا تبغى بدون ظل */
}

.s-slider-v-centered .s-slider-block__title-nav button.s-slider-nav-arrow{
  background: var(--slider-arrow) !important;
  border: 1px solid var(--slider-arrow) !important;
  color: #fff !important; /* هذا يلوّن أيقونة السهم إذا كانت font/svg تعتمد currentColor */
}

/* لو الأيقونة SVG داخل الزر */
.s-slider-v-centered .s-slider-block__title-nav button.s-slider-nav-arrow svg{
  fill: #fff !important;
  stroke: #fff !important;
}

/* Hover: خلفية أبيض + السهم برتقالي */
.s-slider-v-centered .s-slider-block__title-nav button.s-slider-nav-arrow:hover{
  background: #fff !important;
  border: 1px solid var(--slider-arrow) !important;
  color: var(--slider-arrow) !important;
}

.s-slider-v-centered .s-slider-block__title-nav button.s-slider-nav-arrow:hover svg{
  fill: var(--slider-arrow) !important;
  stroke: var(--slider-arrow) !important;
}

/*****************wide-banner*************/
/* ✅ بانر ثابت: عرض يعتمد على الشاشة + بوردير + زوايا (يدعم RTL/LTR) */
:root{
  --fixed-banner-max: 1440px;   /* غيّر هنا */
  --fixed-banner-gutter: 16px;  /* مسافة يمين/يسار من الشاشة */
  --fixed-banner-radius: 22px;
  --fixed-banner-border: 2px;
  --fixed-banner-color: #ff741f;
}

.banner--fixed{
  display: block !important;

  /* ✅ لا يتقيد بعرض الـ container */
  width: min(
    calc(100vw - (var(--fixed-banner-gutter) * 2)),
    var(--fixed-banner-max)
  ) !important;

  /* ✅ توسيط (افتراضي LTR) */
  position: relative !important;
  left: 50% !important;
  right: auto !important;
  transform: translate3d(-50%, 0, 0) !important;

  margin: 0 !important;
  border: var(--fixed-banner-border) solid var(--fixed-banner-color) !important;
  border-radius: var(--fixed-banner-radius) !important;
  overflow: hidden !important;
  background: #fff;
  box-sizing: border-box !important;
  line-height: 0;
}

/* ✅ RTL: عكس التوسيط عشان ما يزيد من طرف واحد */
html[dir="rtl"] .banner--fixed,
[dir="rtl"] .banner--fixed{
  left: auto !important;
  right: 50% !important;
  transform: translate3d(50%, 0, 0) !important;
}

.banner--fixed img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: inherit !important;
}

/* موبايل */
@media (max-width: 640px){
  :root{
    --fixed-banner-gutter: 12px;
    --fixed-banner-radius: 16px;
  }
}