/* Add custom CSS styles below */

/* العنوان الترويجي للمنتج */

.s-product-card-promotion-title {

background-color: rgb(150 60 42);

}

/* -------------------- */

/* الشحن */

/* إضافة تنسيق الشريط المتحرك */

/* الشريط المتحرك */

/* نضمن أن العنصر الأصلي يعمل بنظام الـ relative */

/* تنسيق الشريط المتحرك */

.infinite-slider {

width: 100%;

height: 115px; /* ارتفاع الشريط حسب التصميم */

overflow: hidden;

position: relative; /* لإسناد موضع العنصر الداخلي */

}

.infinite-slider::before {

content: "";

position: absolute;

top: 0;

left: 0;

width: 200%; /* عرض إضافي للحركة السلسة */

height: 100%;

background: url('https://i.postimg.cc/j5YBqhbF/2.png') repeat-x; /https://i.postimg.cc/gkggqm0J/image.png/

background-size: 25%;

animation: slide 15s linear infinite;

}

/* تعريف الحركة */

@keyframes slide {

from {

transform: translateX(-50%);

}

to {

transform: translateX(0);

}

}

/* -------------------- */

/* pay */

.infinite-pay-slider {

width: 100%;

height: 115px; /* ارتفاع الشريط حسب التصميم */

overflow: hidden;

position: relative; /* لإسناد موضع العنصر الداخلي */

}

.infinite-pay-slider::before {

content: "";

position: absolute;

top: 0;

left: 0;

width: 200%; /* عرض إضافي للحركة السلسة */

height: 100%;

background: url('https://i.postimg.cc/NFBbJPgt/3.png') repeat-x;

background-size: 25%;

animation: slidePay 15s linear infinite;

}

/* تعريف الحركة */

@keyframes slidePay {

from {

transform: translateX(0);

}

to {

transform: translateX(-50%);

}

}

/* -------------------- */

/* واتساب */

/* تصميم الزر */

.floating-whatsapp {

position: fixed;  /* تحديد موضع الزر على الصفحة */

bottom: 20px;     /* المسافة من الأسفل */

right: 20px;      /* المسافة من اليمين */

background-color: #25D366;  /* لون الخلفية (لون واتساب) */

border-radius: 50%; /* جعل الزر دائري */

padding: 5px;     /* المسافة الداخلية للزر */

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* إضافة ظل للزر */

cursor: pointer;  /* تغيير المؤشر عند المرور فوق الزر */

z-index: 9999;    /* التأكد من أن الزر في المقدمة */

display: flex;     /* وضع المحتوى داخل الزر */

justify-content: center;

align-items: center;

}

/* أيقونة واتساب داخل الزر */

.floating-whatsapp:before {

content: url('https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg');

width: 40px;       /* حجم الأيقونة */

height: 40px;

}

/* تغيير اللون عند المرور بالماوس */

.floating-whatsapp:hover {

background-color: #128C7E; /* تغيير اللون عند المرور بالماوس */

}

/* -----------------*/

/* مؤشر الصفحة */

.scroll-to-top {

position: fixed;

bottom: 20px;

left: 20px;

width: 50px;

height: 50px;

background: #fff;

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

cursor: pointer;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

opacity: 0;

z-index: 9999;    /* التأكد من أن الزر في المقدمة */

transition: opacity 0.3s ease, visibility 0.3s ease;

}

.scroll-to-top:hover {

background: linear-gradient(135deg, rgb(170, 70, 50), rgb(137, 53, 36));

}

.scroll-to-top.visible {

opacity: 1;

visibility: visible;

}

.scroll-to-top svg {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.scroll-to-top path {

stroke: #d4a94b;

stroke-width: 4;

fill: none;

}

.scroll-arrow {

position: absolute;

font-size: 24px;

font-family: "sallaicons";

color: #893625; /* لون السهم */

top: 50%;

left: 50%;

transform: translate(-50%, -50%); /* محاذاة السهم في المنتصف */

z-index: 10; /* تأكد من أن السهم في الأعلى */

}

.scroll-arrow:hover {

color: #d4a94b; /* لون السهم */

}

/* -----------------*/

/* Popup */

/* تظليل الخلفية */

#popup-overlay {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.5);

display: none;

z-index: 999;

}

/* النافذة المنبثقة */

#popup-box {

position: fixed;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

background: white;

padding: 0; /* إزالة الحواف لجعل الصورة تمتد */

border-radius: 0.75rem;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

width: 90%;

max-width: 400px;

display: none;

z-index: 1000;

overflow: hidden; /* لمنع تمدد المحتوى */

}

/* زر الإغلاق (×) فوق الصورة */

#popup-close {

position: absolute;

top: 10px;

right: 15px;

font-size: 45px;

color: white;

background: none;

border-radius: 50%;

cursor: pointer;

z-index: 1001;

}

/* صورة الخصم */

#popup-box img {

width: 100%; /* جعل الصورة تمتد بعرض النافذة */

border-radius: 0.75rem;

display: block;

}

/* تنسيق المحتوى داخل النافذة */

#popup-content {

padding: 20px;

text-align: center;

}

#popup-content input {

width: 90%;

padding: 10px;

margin: 10px 0;

border: 1px solid #ccc;

border-radius: 5px;

}

#popup-content button {

width: 95%;

padding: 10px;

background: #0056b3;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

}

#popup-content p {

color: gray;

font-size: 14px;

cursor: pointer;

}

/*

#whatsapp-btn {

position: fixed; /* تثبيت الزر في مكان محدد 

left: 50%;

top: 78%; /* تحريكه للأسفل حسب الحاجة 

transform: translate(-50%, -50%);

background-color: #412311; /* لون بني غامق مثل التصميم 

color: #f0e2c7;

padding: 13px 24px;

font-size: 16px;

border-radius: 0.75rem;

border: none;

cursor: pointer;

text-align: center;

transition: 0.3s;

z-index: 1000; /* فوق جميع العناصر

}

#whatsapp-btn:hover {

background-color: #f0e2c7; 

color: #412311;

}

*/

/* -----------------*/

/* Big banner */

salla-slider.photos-slider .swiper {

padding-bottom: 0rem;

}

/* استهداف السلايدر الرئيسي فقط باستخدام ID أو class */

#photos-0-slider .swiper-slide {

opacity: 0;

transition: opacity 1s ease-in-out;

}

/* إظهار الصورة النشطة فقط في السلايدر الرئيسي */

#photos-0-slider .swiper-slide-active {

opacity: 1;

}

/* التحكم في الصور عبر الأنيميشن في السلايدر الرئيسي */

#photos-0-slider .swiper-container {

animation: slideAnimation 10s infinite;

}

/* الأنيميشن لتبديل الصور */

@keyframes slideAnimation {

0% {

transform: translateX(0);

}

33% {

transform: translateX(-100%);

}

66% {

transform: translateX(-200%);

}

100% {

transform: translateX(0);

}

}

/* تعديل حجم الصورة في البنر الرئيسي */

#photos-0-slider .swiper-slide img {

width: 100%;

height: auto;

border-radius: 0.75rem;

object-fit: cover;

}

/* -----------------* /

/* صفحة المنتج*/

salla-slider.details-slider .s-slider-container {

border-radius: 0.75rem;

}

.rounded-md {

border-radius: 0rem;

}

#tabbyPromoWrapper {

border-radius: 0.75rem;

}

.sm:pb-0 {

border-top-left-radius: 0.75rem;

border-top-right-radius: 0.75rem;

}

.sticky-product-bar {

border-bottom-right-radius: 0.75rem;

border-bottom-left-radius: 0.75rem;

}

.py-2.5 {

border-radius: 0.75rem;

}

.py-2 {

border-radius: 0.75rem;

}

/* -----------------*/

/* Text tital */

/* تنسيق العنوان الرئيسي */

.s-slider-block__title-right h2 {

font-size: 16px;

font-weight: bold;

color: #333;

margin-bottom: 5px;

text-align: right;

position: relative;

display: inline-block;

margin-top: 40%;

}

.s-slider-block__title-right {

display: none !important;

}

/* إضافة نص فرعي لكل العناوين */

#best-offers-2-slider h2::after {

content: "شيء فاخر يعدل المود ✨";

font-size: 12px;

color: #777;

display: block;

margin-top: 5%;

}

/*

#best-offers-2-slider h2::after {

content: "في كل كسرة عود حكاية 🎞️";

font-size: 12px;

color: #777;

display: block;

margin-top: 5%;

}

#best-offers-3-slider h2::after {

content: "محسّن وموزون 🤩";

font-size: 12px;

color: #777;

display: block;

margin-top: 5%;

}

#best-offers-4-slider h2::after {

content: "بخور أنيق بطابع فريد 🎗️";

font-size: 12px;

color: #777;

display: block;

margin-top: 5%;

}

*/

/* -----------------*/

/* -----------------*/

/*.s-slider-block {

display: grid;

grid-template-rows: auto auto; /* صفين

}*/

#best-offers-2-slider .s-slider-wrapper {

display: grid;

grid-template-rows: auto auto; /* صفين */

}

#best-offers-4-slider .s-slider-wrapper {

display: grid;

grid-template-rows: auto auto; /* صفين */

}

#best-offers-6-slider .s-slider-wrapper {

display: grid;

grid-template-rows: auto auto; /* صفين */

}

#best-offers-8-slider .s-slider-wrapper {

display: grid;

grid-template-rows: auto auto; /* صفين */

}

#best-offers-10-slider .s-slider-wrapper {

display: grid;

grid-template-rows: auto auto; /* صفين */

}

/*#best-offers-12-slider .s-slider-wrapper {

display: grid;

grid-template-rows: auto auto;/* /* صفين */

/}/

.s-slider-block__title {

grid-row: 2; /* جعل العنوان في الصف الثاني */

margin-top: 20px;

}

.s-slider-container {

grid-row: 1; /* جعل كروت المنتجات في الصف الأول */

}

/* Button */

/* تحسين زر "عرض الكل" */

.s-slider-block__display-all {

display: inline-block;

margin-top: 15%;

/*background: linear-gradient(135deg, rgb(137, 53, 36), rgb(170, 70, 50));  تدرج جميل */

color: rgb(137, 53, 36); /* لون النص #d4a94b*/

padding: 6px 18px; /* حجم مناسب */

font-size: 10px;

font-weight: bold;

border-radius: .75rem; /* زوايا دائرية */

text-decoration: none; /* إزالة التسطير إذا كان رابط */

transition: all 0.3s ease-in-out; /* انتقال سلس */

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* ظل خفيف */

border: 2px solid #d4a94b; /* إضافة إطار بلون الخط */

}

/* تأثير عند تمرير الماوس */

.s-slider-block__display-all:hover {

background: linear-gradient(135deg, rgb(170, 70, 50), rgb(137, 53, 36));

color: #d4a94b;

transform: scale(1.05); /* تكبير خفيف */

box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);

}

/* تأثير عند الضغط */

.s-slider-block__display-all:active {

transform: scale(0.95); /* تصغير خفيف */

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

}

/* -----------------*/

/* -----------------*/

.s-reviews-testimonial__text {

flex: 1 1 0%;

margin-top: 5%;

}

.loader-init::after{

position: relative;

width: 120px; /* عرض العنصر */

height: 120px; /* ارتفاع العنصر */

background-image: url('https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/NAQBG/QVyluX39KsOaRpvr3592mpoq9Hk17m9ogD6IdCrA.png'); /* وضع صورة المتجر كخلفية */

background-size: cover; /* لتناسب الصورة داخل العنصر */

background-repeat: no-repeat;

background-position: center;

border-radius: 0%; /* إذا كنت تريد الصورة دائرية */

border: 0px solid #f3f4f6; /* لون حدود أحمر */

animation: pulse 1.5s ease-in-out infinite;

}

/* تأثير الدائرة النابضة */

@keyframes pulse {

0% {

transform: scale(1);

}

50% {

transform: scale(1.2); /* تكبير العنصر */

}

100% {

transform: scale(1); /* العودة للحجم الطبيعي */

}

}

/-------------------/

/*.s-block--best-offers {

margin-top: -100px;

} */

/-------------------/

.s-product-card-entry {

width: 100%;  /* عرض 100% من العنصر الأب */

/height: auto;/ /* الحفاظ على الأبعاد الأصلية للصورة */

display: flex;

flex-direction: column;

height: 100%; /* تأكد من أن كل البطاقات بنفس الطول */

}

.s-products-slider-card {

max-width: 275px;

box-sizing: border-box;

}

.flex-col {

flex-direction: column;

background-color: #f3f4f6;

}

.s-product-card-image {

position: relative;

overflow: hidden;

width: 100%;

object-fit: cover;

}

.s-button-outline {

border-width: 2px;

background: linear-gradient(135deg, rgb(137, 53, 36), rgb(170, 70, 50)); /* تدرج جميل */

color: #d4a94b; /* لون النص */

}

.s-button-outline:hover {

background: linear-gradient(135deg, rgb(170, 70, 50), rgb(137, 53, 36));

color: #d4a94b;

transform: scale(1.05); /* تكبير خفيف */

box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);

}

.s-button-outline:active {

transform: scale(0.95); /* تصغير خفيف */

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

}

.s-button-text i.sicon-shopping-bag {

display: none !important;

}

/*.s-slider-block__title {

display: none !important;

}*/

.s-slider-block__title-nav {

display: none !important;

}

.s-product-card-image img {

width: 100%;

height: 100%;

object-fit: cover; /* تأكد من أن الصورة تملأ المساحة دون تشويه */

}

.s-product-card-entry  {

border-width: 0px;

border-color: #d4a94b;

border-style: soild;

border-radius: .76rem;

box-sizing: border-box;

}

.copyright-text p {

--tw-text-opacity: 1;

color: rgb(55, 65, 81);

color: rgb(255, 255, 255);

}

.store-footer h3 {

margin-bottom: 0.75rem;

font-size: 1.125rem;

line-height: 1.75rem;

font-weight: 700;

color: #d4a94b;

}

#i0k6b {

text-align: center;

padding: 20px 20px 20px 20px;

font-family: 'Montserrat', sans-serif;

width: 397px;

height: 459px;

}

salla-slider.photos-slider .swiper:where([dir="rtl"], [dir="rtl"] *) {

padding-top: -1rem;

padding-left: 1rem;

padding-right: 1rem;

margin-bottom: 0px;

}

.store-footer__inner {

border-bottom-color: rgb(212, 169, 75);

--tw-bg-opacity: 1;

border-style: solid;

background-color: rgb(144, 57, 39);

border-top-left-radius: 3rem;

border-top-right-radius: 3rem;

}

.store-footer {

border-top-left-radius: 3rem;

border-top-right-radius: 3rem;

}

.s-social-link {

border-style: none;

}

.lg:col-span-2 a{

content: none;

background-image: url('https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/NAQBG/QVyluX39KsOaRpvr3592mpoq9Hk17m9ogD6IdCrA.png');

}

/-------------------/

/-------------------/

/* التقييم */

/-------------------/

/* التقييم */

.s-reviews-testimonial {

/width: 270px;/ /* تحديد العرض الموحد */

height: 300px; /* تحديد الارتفاع الموحد */

display: flex;

flex-direction: column;

align-items: center;

justify-content: space-between;

padding: 20px;

border-radius: 0.75rem;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

background-color: #fff;

text-align: center;

}

.s-reviews-testimonial__inner {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

flex-grow: 1;

}

.s-reviews-testimonial__avatar img {

width: 80px; /* ضبط حجم الصورة */

height: 80px;

border-radius: 50%;

object-fit: cover;

}

.s-reviews-testimonial__text {

flex-grow: 2;

display: flex;

flex-direction: column;

justify-content: center;

}

.s-reviews-testimonial__name_wrapper {

margin-top: 10px;

}

.s-reviews-testimonial__rating {

margin-top: 5px;

}

.s-reviews-testimonial__text p {

text-align: justify;

}

/-------------------//* تحسين زر "عرض الكل" */

/* -----------------*/

/-------------------/

.s-contacts-icon svg {

height: 1.6rem;

width: 1.6rem;

fill: currentColor;

}

.s-social-link a svg {

height: 1.6rem;

width: 1.6rem;

fill: currentColor;

}

.s-contacts-icon {

border-width: 0px;

}

.s-social-link a {

border-width: 0px;

}

.mb-6 {

margin-bottom: 0px;

}

.s-social-list {

display: flex;

gap: 0.625rem;

padding-top: 1rem;

}

.s-block--features__item .feature-icon i {

font-size: 1.875rem;

line-height: 2.25rem;

color: #ff6767;

color: #d3a84b;

}

.s-block--features__item {

border-radius: 0.75rem;

}

.banner--fixed img  {

border-radius: 0.75rem;

}

.s-reviews-testimonial {

border-radius: 0.75rem;

}

salla-slider.photos-slider .swiper-slide {

position: relative;

margin-left: 0rem;

margin-right: 0rem;

height: auto;

width: 100%;

overflow: hidden;

border-radius: 0rem;

}

#photos-0-slider {

margin-top: -84px;

}

#photos-0-slider .swiper-slide img {

width: 100%;

height: auto;

border-radius: 0rem;

object-fit: cover;

}

salla-slider.photos-slider .swiper:where([dir="rtl"], [dir="rtl"] *) {

padding: 0 !important;

margin: 0 !important;

}

@media (min-width: 640px) {

salla-slider.photos-slider[type]:not(.hydrated) > div > div, 

salla-slider.photos-slider[type]:not(.hydrated) .swiper > div > div > div, 

.photos-slider .swiper-wrapper > div {

  padding-left: 0rem;

  padding-right: 0rem;

}

}

@media (max-width: 640px) {

.s-products-slider-card {

max-width: 186px;

}

}

@media (min-width: 768px) {

.md\:sticky {

  position: static;

}

}

@media (min-width: 810px) and (max-width: 1024px)  {

.infinite-slider {

height: 75px;

}

.s-block--features__item {

grid-column: span 1 / span 1;

}

/*-------------------*/

footer a{

display: flex;

  align-items: center;

  justify-content: center;

  width: 100%; /* أو عرض محدد مثل 200px */

  text-align: center;

}

.s-reviews-testimonials-slider .swiper:where([dir="rtl"], [dir="rtl"] *) {

padding-left: 3rem;

  padding-right: 3rem;

}

  .max-w-sm {

    max-width: none;

}

.store-footer__inner { 

    padding-bottom: 0rem;

}

footer {

    text-align: center;

}



.s-social-list {

    display: flex;

    justify-content: center; /* توسيط العناصر أفقياً */

    align-items: center; /* توسيط العناصر عمودياً */

    gap: 10px; /* المسافة بين الأيقونات */

    list-style: none; /* إزالة النقاط */

    padding: 0;

}

}

@media (min-width: 1024px) {

body {

/* تأكد أن هذه الأنماط تطبق فقط إذا كانت الصفحة الرئيسية */

}

body.home .main-nav-container {

min-height: 84px;

margin-bottom: 0px;

}

}

@media (max-width: 1024px) {

#photos-0-slider {

margin-top: -84px;

}

}

@media (max-width: 632px) {

#photos-0-slider {

margin-top: -53px;

}

.infinite-slider {

height: 45px;

}

.infinite-slider::before {

background-size: 30%;

}

.infinite-pay-slider {

height: 45px;

}

.infinite-pay-slider::before {

background-size: 30%;

}

}

@media (max-width: 768px) {

/* البنر الرئيسي //

.home-slider img {

width: 100% !important;

  height: 100% !important;

  object-fit: cover;

}

.home-slider .swiper-slide:nth-child(1) img {

content: url("https://i.postimg.cc/gkhCsQ5t/1108-x-428-1080-1350-2.png");

}

.home-slider .swiper-slide:nth-child(2) img {

content: url("https://i.postimg.cc/Gp2m8Xf3/1108-x-428-1080-1350-1.png");

}*/

/-------------------/

/* التقييم */

.s-reviews-testimonial {

/*width: 270px;*/ /* تحديد العرض الموحد */

height: 430px; /* تحديد الارتفاع الموحد */

display: flex;

flex-direction: column;

align-items: center;

justify-content: space-between;

padding: 20px;

border-radius: 0.75rem;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

background-color: #fff;

text-align: center;

}

.s-reviews-testimonial__inner {

display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  flex-grow: 1;

}

.s-reviews-testimonial__avatar img {

width: 80px; /* ضبط حجم الصورة */

  height: 80px;

  border-radius: 50%;

  object-fit: cover;

}

.s-reviews-testimonial__text {

flex-grow: 2;

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.s-reviews-testimonial__name_wrapper {

margin-top: 10px;

}

.s-reviews-testimonial__rating {

margin-top: 5px;

}

.s-reviews-testimonial__text p {

text-align: justify;

}

/-------------------/

footer a{

display: flex;

  align-items: center;

  justify-content: center;

  width: 100%; /* أو عرض محدد مثل 200px */

  text-align: center;

}

.s-reviews-testimonials-slider .swiper:where([dir="rtl"], [dir="rtl"] *) {

padding-left: 3rem;

padding-right: 3rem;

}

.max-w-sm {

  max-width: none;

}

.store-footer__inner {

padding-bottom: 0rem;

}

footer {

text-align: center;

}

.s-social-list {

display: flex;

  justify-content: center; /* توسيط العناصر أفقياً */

  align-items: center; /* توسيط العناصر عمودياً */

  gap: 10px; /* المسافة بين الأيقونات */

  list-style: none; /* إزالة النقاط */

  padding: 0;

}

.s-block--features__item {

grid-column: span 2 / span 2;

}

.product-single scroll-to-top {

bottom: 125px;

}

.product-single .floating-whatsapp {

bottom: 125px;

}

.sm:pb-0 {

border-radius: 0.75rem;

}

.sticky-product-bar {

border-top-left-radius: 0.75rem;

  border-top-right-radius: 0.75rem;

  border-bottom-right-radius: 0rem;

  border-bottom-left-radius: 0rem;

}

}

@media (min-width: 768px) {

/* استهداف جميع الحاويات التي يبدأ معرفها بـ "product-" */

[id^="product-"] {

flex-direction: row;

}

/* تفاصيل المنتج تظهر أولاً (على اليسار) */

[id^="product-"] > .sidebar {

order: 1;

}

/* صورة المنتج تظهر بعد التفاصيل (على اليمين) */

[id^="product-"] > .main-content {

order: 2;

}

}

@media (min-width: 1024px) {

.salla-slider.photos-slider .swiper-slide {

    margin-left: 0px;

    margin-right: 0px;

    width: 100%;

}

}

@media (min-widt