/* =========================
   Global Variables
   ========================= */
:root {
  /* Photos Slider */
  --photo-size: 110px;
  --photo-radius: 40px;
  --photo-gap: 12px;
  --photo-border-width: 2px;
  --photo-border-color: #4c1c72;
  --photo-hover-scale: 1.1;
  --photo-transition: 0.3s;
  --photo-width-extra: 40px;

  /* Colors */
  --main-color: #4c1c72;
  --secondary-color: #271b43;
  --light-color: #f9f7f1;
  --white: #ffffff;

  /* Buttons */
  --btn-radius: 12px;

  /* Header */
  --header-radius: 50px;
  --header-padding-x: 5px;

 

  /* Shadows */
  --shadow-light: 0 8px 25px rgba(0,0,0,0.15);
  --shadow-hover: 0 12px 30px rgba(0,0,0,0.25);
  --shadow-click: 0 8px 20px rgba(0,0,0,0.2);
}

/* =========================
   Photos Slider Variables
   ========================= */
.s-block--photos-slider {}

/* =========================
   Layout Adjustments
   ========================= */
.s-block--photos-slider .swiper-slide {
  width: auto !important;
}

.s-block--photos-slider .swiper-wrapper {
  display: flex;
  align-items: center;
  gap: var(--photo-gap);
  transition-duration: 1s !important;
}

/* =========================
   Image Styling
   ========================= */
.s-block--photos-slider .swiper-slide img {
  width: calc(var(--photo-size) + var(--photo-width-extra));
  height: var(--photo-size);
  border-radius: var(--photo-radius);
  object-fit: cover;
  border: var(--photo-border-width) solid var(--photo-border-color);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* =========================
   Hover Effect
   ========================= */
.s-block--photos-slider .swiper-slide:hover img {
  transform: scale(var(--photo-hover-scale));
}

/* =========================
   Click Animation
   ========================= */
.s-block--photos-slider .swiper-slide:active img {
  transform: scale(0.9);
  box-shadow: var(--shadow-click);
}

/* =========================
   Hide Pagination Dots
   ========================= */
.swiper-pagination {
  display: none !important;
}

/* =========================
   Existing Code
   ========================= */
#mobile-nav,
.mobile-nav-inner {
  display: none !important;
}

.s-trust-badges-wrapper {
  display: none !important;
}

/* =========================
   Buttons General Styling
   ========================= */
salla-button .s-button-element {
  background-color: var(--main-color) !important;
  border-color: var(--main-color) !important;
}
salla-button .s-button-text {
  color: var(--white) !important;
}

.dm-btn-in-dark-outline.s-button-element,
.dm-btn-in-dark.s-button-element {
 
}

/* =========================
   Mobile Header
   ========================= */
@media (max-width: 768px) {

  #mainnav {
    padding: 0 var(--header-padding-x);
    overflow: hidden !important;
    background: var(--main-color) !important;
  }

  body,
  .store-header {
    background: var(--main-color) !important;
  }



  .top-navbar {
    background: var(--light-color) !important;
  }

  .header-innerRight,
  .header-innerLeft,
  .header-logo-wrapper {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .store-header.is-hidden {
    transform: translateY(-120%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .top-navbar .container {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .top-navbar .header-contacts {
    display: none !important;
  }

  .header-innerLeft button.hdr-srch {
    display: flex !important;
  }

  salla-button .s-button-element {
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
  }

  salla-button .s-button-text {
    color: var(--white) !important;
  }


}

/* =========================
   Testimonials
   ========================= */
.s-block--testimonials {
  --bg-color: var(--secondary-color);
  --text-color: var(--light-color);
  padding: 2rem 1rem;
}

.s-block--testimonials .testimonials-slider .testimonial {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  background: var(--main-color);

  padding: 1.5rem;
  gap: 1.5rem;
  box-shadow: var(--shadow-light);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.s-block--testimonials .testimonial:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

.s-block--testimonials .testimonial__avatar {
  flex-shrink: 0;
  width: 80px;
  height: 80px;

  overflow: hidden;
  border: 2px solid var(--light-color);
}

.s-block--testimonials .testimonial__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s-block--testimonials .testimonial__text {
  flex: 1;
  color: var(--text-color);
  font-size: 0.95rem;
  line-height: 1.6;
}

.s-block--testimonials .testimonial__text p {
  margin-bottom: 0.5rem;
}

.s-block--testimonials .testimonial__info h4 {
  font-size: 1rem;
  color: var(--light-color);
  font-weight: bold;
  margin: 0;
}

.s-block--testimonials .testimonial__rating {
  margin-top: 0.25rem;
}

.s-block--testimonials .testimonial__icon {
  color: var(--light-color);
  font-size: 2rem;
  margin-left: auto;
}

/* إجبار كل نص الكومنت يبقى أبيض */
.s-block--testimonials .testimonial .dm-text-main {
  color: #ffffff !important;
}
/* تأكد أن الحاوية الأساسية للبنر هي المرجع */
.swiper-slide {
    position: relative !important;
    overflow: hidden !important;
}

/* تحويل الزر إلى طبقة تغطي كامل مساحة السلايد/البنر */
a.fs_banners_btn::before {
    content: "" !important;
    position: absolute !important;
    /* هذه القيم تتمدد لتغطية أبعد نقطة في حاوية البنر */
    top: -1000px !important; 
    left: -1000px !important;
    right: -1000px !important;
    bottom: -1000px !important;
    width: 3000px !important;
    height: 3000px !important;
    z-index: 9999 !important;
    cursor: pointer !important;
    display: block !important;
}

/* إخفاء الزر الأصلي ونصوصه تماماً مع بقائه فعالاً */
a.fs_banners_btn {
    opacity: 0 !important;
    position: absolute !important;
    z-index: 9999 !important;
}