/* Add custom CSS styles below */ 








.navbar-brand img {
    max-height: 3rem;
    max-width: 174px;
    width: auto;
}





.main-nav-container {
    margin-bottom: -36px;
}

.s-user-menu-trigger {
    border-radius: 50%;
    padding: 0;
    margin: 0px;
}








.bg-inherit {
    background-color: #00629f;
}

flex items-stretch justify-between relative 


.main-nav-container {
    min-height: 60px;
    margin-bottom: -37px;
}


@media (max-width: 1024px) {
    salla-slider.photos-slider .swiper:where([dir=rtl],[dir=rtl] *) {
        padding: 0rem;
    }





.gap-3 {
dispaly:;
flex-direction:raw;
justify-content:center;
flex-wrap:wrap;

}



.side-panel .store-about img{
content: url(https://cdn.salla.sa/EQwWD/uqqhlU5y21SJq78sT9oyCps6rk3fFkEPxKQZRphM.png);}


.banner--square {

background-color:transparent;
}

.banner-entry square-photos  {
margin-left: -10px!important;
margin-right: -10px!important;
margin-bottom: -20px!important;
}





/*header*/

header .site-header .theme-logo a img {
    height: 30px;
}








/*تعدييييييييييييييييييييييييييييييييييييييييل جددددددددددددديددددددد*/

.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px!important;
    padding-right: 15px!important;
    width: 100%;
    max-width: 1351px;

}

.bg-inherit {
    background-color: #00629f;
}

.sicon-menu:before {
    content: "\ed7f";
    color: #fff;
}
.banner--fixed img, .banner-entry {
    --tw-bg-opacity: 1;
    background-color: transparent;
}


@media (max-width: 1024px) {
    salla-slider.photos-slider .swiper-slide {
        padding: 0 0 20px 0!important;
    }
}


/*header .site-header*/
.items-stretch {

background: #00629f;

}

 .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0px;
    padding-right: 0px;
    width: 100%;
}


header#site-header-outer {
    background: #00629f;
    
    }


@media only screen and (min-width: 1024px) {
    .main-menu li.root-level>a {
        font-weight: 700;
        padding-bottom: 2rem;
        padding-top: 0;
        color: white;
    }
}

.top-navbar {
  display: none;
}


.main-nav-container {
    min-height: 60px;
}

.header-btn__icon{
    border: none;
    color: white;
}

.s-cart-summary-total {

  color: white;
  
}

.s-cart-summary-icon svg {
    height: 1.25rem;
    width: 1.25rem;
    fill: #7c8082;
    fill: #fff;
}
    
.sicon-search:before {
    content: "\ef09";
    color: #fff;
}
    
  
  
  .header-side-panel-trigger {
    width: 30px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-xlg);
    color: #ffffff;
}
  
  
  
  header.fixed-header .site-header {
    background: #00629f;
    opacity: 1;
    transform: translate3d(0,0,0);
}
  
  
    header .site-header__wrapper .theme-logo span {
    display: block;
    margin-top: 0;
    font-size: var(--font-sm);
    color: #ffffff;
}
 
 
 
 
 
 /*  ناف بار*/
 
 .nav-mobile .main-nav{
 background-image: url("https://cdn.salla.sa/EQwWD/lVPB9n6EgJgx181AwucTH4s9wDKM3Uq7DQFFeDJy.png"); 
 background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  
 }
 
 
 .nav-mobile .main-nav li a{
 color: #000;
 }
 
 
 
 .store-feature__icon {
 
 
 color: #00629f;
 
 }
 
 
 
 
 
 
 
 
 
 
    
/* الفـــــوتر */




/*
.footer-is-light .store-footer {
    background: linear-gradient(165deg, rgba(0,98,159,1) 0%, rgba(115,190,236,1) 100%);
    border-radius: 20px 20px 0 0;
}

.footer__mid {
    border:none;
}


.footer .footer-list li a{
color:#fff;
}


.footer__block p {
    color: #fff;
}


.footer__bottom {
background: linear-gradient(165deg, rgba(0,98,159,1) 0%, rgba(115,190,236,1) 100%);
}



.footer__bottom .container>*:last-child {
    color: #fff;
    }


.footer__bottom a {
    color: #05e896;
}


 */







.title--has-dash {
    padding-right: 0px;
    position: relative;
    display: inline-block;
    line-height: 1.2;
}

.title--has-dash:before {
    content: "";
    position: absolute;
    top: 110%;
    width: 60%;
    left: 0;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(130deg,#18ffd9,#0082af 41.07%,#3a3197 76.05%);
}







/*product card*/

.badge--primary{
 background-image: url("https://cdn.salla.sa/EQwWD/lVPB9n6EgJgx181AwucTH4s9wDKM3Uq7DQFFeDJy.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #fff;

}



.btn--add-to-cart {
background: linear-gradient(-45deg, rgba(0,182,153,1) 0%, rgba(0,255,153,1) 100%);
    margin-bottom: -10px !important;
}



.btn--floated .s-button-element {

color: #2b2b2b;
}



/*اخفاء تسجيل الدخول اعلى المتجر*/

.top-header {
    display: none;
    }



@media only screen and (max-width: 767px) {
    .footer .footer-list--payment-methods li img {
        padding: 3px;
    }}
    
    
    
    .footer .footer-list--payment-methods li {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    width: 3.25rem;
    box-shadow: none; 
    height: 32px;
    margin: rem;
}









/* فرض تطبيق خصائص الـ Grid على الحاوية المحددة */
.grid.md\:grid-cols-3 {
    display: grid !important;
    /* الافتراضي للجوال: عمودين (جديد) */
    grid-template-columns: repeat(2, 1fr) !important;
    /* المسافات (gap) */
    gap: 1.5rem !important;
}

/* تطبيق 3 أعمدة على الشاشات المتوسطة وما فوق (الكمبيوتر والتابلت العريض) */
@media (min-width: 768px) {
    .grid.md\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important; /* 3 أعمدة متساوية */
        gap: 2rem !important;
    }
}

/* ضمان أن العناصر الأبناء داخل هذه الحاوية تأخذ المساحة المخصصة لها */
.grid.md\:grid-cols-3 > div {
    width: auto !important;
}












/* تقريب العناصر من بعضها البعض */
.grid.md\:grid-cols-3 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* عمودين للجوال */
    gap: 0.5rem !important; /* تقليل المسافة بين العناصر للجوال (هاتفية جداً) */
    align-items: stretch !important;
}

/* تطبيق 3 أعمدة على الشاشات المتوسطة وما فوق (الكمبيوتر) */
@media (min-width: 768px) {
    .grid.md\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1rem !important; /* تقليل المسافة بين العناصر للكمبيوتر */
    }
}

/* ضمان أن العناصر الأبناء داخل هذه الحاوية تأخذ المساحة المخصصة لها */
.grid.md\:grid-cols-3 > div {
    width: auto !important;
    height: 100% !important;
}

/* الأهم: استهداف المحتوى الفعلي داخل كل بنر لتوحيد الحجم */
.grid.md\:grid-cols-3 .s-banner-card,
.grid.md\:grid-cols-3 .banner-content-wrapper {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}
































/* استهداف الحاوية الرئيسية للأقسام في الثيم الجديد وتطبيق نظام Grid */
.home-block.home-block--square-images .products-list-wrapper {
    display: grid !important;
    /* الجوال: عرض عمودين */
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important; /* مسافة بين العناصر */
    align-items: stretch !important; /* لضمان تساوي ارتفاع البطاقات */
}

/* تطبيق 3 أعمدة على الشاشات المتوسطة والكبيرة (الكمبيوتر) */
@media (min-width: 768px) {
    .home-block.home-block--square-images .products-list-wrapper {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
}

/* التأكد من أن بطاقات المنتجات تمتد بكامل الارتفاع */
.home-block.home-block--square-images .product-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}














.s-button-outline {

background: linear-gradient(-45deg, rgba(0,182,153,1) 0%, rgba(0,255,153,1) 100%);

  
}

.s-button-primary-outline {
color: #fff;

  
}






.s-product-card-promotion-title {

background-image: url(https://cdn.salla.sa/EQwWD/lVPB9n6EgJgx181AwucTH4s9wDKM3Uq7DQFFeDJy.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #fff;
}

}



/* تغيير لون خلفية المتجر بالكامل إلى الأبيض */
body, #app, .app-container {
    background-color: #ffffff !important;
}





.s-product-card-fit-height .s-product-card-image
 {
    height: 11rem;
    max-height: 15rem;
    width: 231px !important;
}




/* إضافة ظل خارجي خفيف إلى بطاقة المنتج */
.s-product-card-entry {
  
    /* التأكد من وجود خلفية بيضاء لكي يظهر الظل بشكل جيد */
    background-color: #ffffff !important;
    border-radius: 10px !important; /* حواف ناعمة */
    overflow: hidden !important; /* مهم جداً لضمان أن الظل لا يتجاوز الحواف */

    /* الكود الأساسي للظل الخفيف */
    /* القيم تعني: إزاحة أفقية 0، إزاحة عمودية 4px، ضبابية 15px، انتشار 0، اللون مع شفافية 8% */
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    /* إضافة انتقال سلس عند التفاعل (اختياري) */
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;

margin-top : 1rem;

}

/* (اختياري) تأثير بسيط عند مرور الماوس لزيادة جمالية الظل */
.s-product-card-entry:hover {
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.12) !important; /* ظل أقوى قليلاً عند التحويم */
    transform: translateY(-2px) !important; /* رفع بسيط جداً للبطاقة */


     

}


.carousel-slider .swiper, salla-slider[type]:not(.hydrated) .swiper>div>div, salla-slider[type]:not(.hydrated)>div
 {
    display: flex;
    margin-left: -.625rem;
    margin-right: -.625rem;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 2.5rem;
}










.s-slider-block__title h2 {
  color: #0082af !important;
  font-weight: 400 !important;

  /* إضافة مسافة داخلية سفلية لرفع النص عن خط الحدود */
  padding-bottom: 2px !important; 
  /* يمكنك زيادة القيمة (مثلاً 15px) لرفعه أكثر، أو تقليلها (مثلاً 5px) لتقريبه أكثر */

  /* أكواد الحدود */
  border-bottom: 3px solid transparent !important;
  border-image: linear-gradient(130deg, #18ffd9, #0082af 41.07%, #3a3197 76.05%) 1 !important;
}


.s-reviews-header {

  color: #0082af !important;
  font-weight: 400 !important;

  /* إضافة مسافة داخلية سفلية لرفع النص عن خط الحدود */
  padding-bottom: 2px !important; 
  /* يمكنك زيادة القيمة (مثلاً 15px) لرفعه أكثر، أو تقليلها (مثلاً 5px) لتقريبه أكثر */

  /* أكواد الحدود */
  border-bottom: 3px solid transparent !important;
  border-image: linear-gradient(130deg, #18ffd9, #0082af 41.07%, #3a3197 76.05%) 1 !important;

  
}


.s-reviews-container .swiper-slide-active .s-reviews-testimonial {

    /* التأكد من وجود خلفية بيضاء لكي يظهر الظل بشكل جيد */
    background-color: #ffffff !important;
    border-radius: 10px !important; /* حواف ناعمة */
    overflow: hidden !important; /* مهم جداً لضمان أن الظل لا يتجاوز الحواف */

    /* الكود الأساسي للظل الخفيف */
    /* القيم تعني: إزاحة أفقية 0، إزاحة عمودية 4px، ضبابية 15px، انتشار 0، اللون مع شفافية 8% */
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    /* إضافة انتقال سلس عند التفاعل (اختياري) */
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;

margin-top : 1rem;


  
}









.footer-is-light .store-footer .store-footer__inner{



    background: linear-gradient(165deg, rgba(0, 98, 159, 1) 0%, rgba(115, 190, 236, 1) 100%);
    border-radius: 20px 20px 0 0!important;



  
}

.store-footer {
 background: linear-gradient(165deg, rgba(0, 98, 159, 1) 0%, rgba(115, 190, 236, 1) 100%);
 border: :none;
  border-radius: 20px 20px 0 0!important;
  
}








.footer-is-light .store-footer .store-footer__inner{


  border: none;
}








.store-footer h3 {


  color: #fff !important;
  font-weight: 400 !important;

  /* إضافة مسافة داخلية سفلية لرفع النص عن خط الحدود */
  padding-bottom: 2px !important; 
  /* يمكنك زيادة القيمة (مثلاً 15px) لرفعه أكثر، أو تقليلها (مثلاً 5px) لتقريبه أكثر */

  /* أكواد الحدود */
  border-bottom: 3px solid transparent !important;
  border-image: linear-gradient(130deg, #18ffd9, #0082af 41.07%, #3a3197 76.05%) 1 !important;

  
}




.leading-6 {

color:#fff;
  
}





 .s-menu-footer-list {

   color:#fff;
 }

.s-trust-badges-content {
 color:#fff;
  
}

.s-contacts-icon {

 color:#fff;
}

.unicode {
   color:#fff;
} 






@media (max-width: 1024px) {
    .grid.md\:grid-cols-3 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        align-items: stretch !important;
      margin-right: 3rem;
      margin-left: 3rem;
      gap:   0.5rem !important;
    }
}