/* Add custom CSS styles below */ 
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');



body::-webkit-scrollbar {
    width: 12px;
}

body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

body::-webkit-scrollbar-thumb {
    background: #004956; 
    border-radius: 3px;
    border: 3px solid #4CB0A3; 
}

body::-webkit-scrollbar-thumb:hover {
    background: #00343d; /* Darker shade for hover effect */
}

html, body {
  font-family: "Tajawal", sans-serif;
  font-weight: 800;
  font-style: normal;
  position: initial;

}

:root {
  --mainColor: #004956;
  --mainColorDark: #062930;
  --mainColorLight: #76e8cd;
  --socondColor: #CACED2;
}

 .main-menu li.root-level>a {
      font-weight: 800;
  }
  
 .sicon-shopping-bag:before {
   content: "\e901";
 }
 .sicon-user-circle:before {
   content: "تسجيل الدخول";
   text-wrap: nowrap;
     font-family: "Tajawal", sans-serif;
     font-size: 15px;
     font-weight: 800;

 }
.main-nav-container {
    background: var(--mainColorDark);
    color: var(--socondColor) !important;
        .container {
        max-width: 100%;
    }
}
.top-navbar .s-contacts-header {
  display: none;
}
.top-navbar,
 .header-btn,
 salla-cart-summary {
 i,.s-cart-summary-total {
      color: var(--socondColor) !important;
      border: 0 !important;
      padding: 0;
    }
  }
.top-navbar .container > div.flex-1 {
    flex-direction: row-reverse;
}
.store-header {
    background: var(--mainColor);
}
.s-product-card-price {
    direction: rtl !important;
}
.top-navbar .s-search-input {
  background: var(--socondColor) !important;
  border-radius: 10px !important;
  &::placeholder {
    color: var(--mainColor);
  }
}
.s-search-icon svg {
  fill: var(--mainColor);
}

.s-menu-topnav-item,
.s-contacts-topnav-link *,
.s-contacts-topnav-link {
  color: var(--socondColor);
}
.header-btn__icon.icon {
  margin-left: 0;
}
.top-navbar  .header-btn {
  width: 6.5rem;
  .header-btn__icon  {
    width: fit-content;
  }
}
.top-navbar .container .header-buttons .btn--rounded-gray {
  display: inline-block;
  position: relative;
  width: 5rem;
    padding-top: 17px;
    padding-bottom: 17px;
    line-height: 2rem;
    color: var(--mainColorLight);
    background: transparent;
    font-size: 15px;
    font-weight: 800;
  span {
    display: none;
  }
}
.s-block--fixed-banner{
  margin-top: 1rem;
}
.top-navbar .container .header-buttons .btn--rounded-gray::before {
  content: "عربي | EN";
  position: absolute;
  top:0;
  right: 0;
  left: 0;
}

.main-menu li>a:hover,
.main-menu>.has-children:hover>a{
  color: #76e8cd !important;
}
.s-block__title h2, .s-slider-block__title h2 {
  color: var(--mainColor);
  border-right: 5px solid var(--mainColor);
  padding-right: 7px;
  padding-top: 3px;
  padding-bottom: 3px;
}
.s-slider-block__title {
  max-width: 100% !important;
}
.s-product-card-image {
  background: #fff;
  border-bottom: 1.5px solid #137a8d;
}

.s-product-card-entry  {
  border: 1.5px solid #137a8d;
}
.s-product-card-content-title {
  margin-bottom: 4px;
}
.s-product-card-content-title a {
  color: var(--mainColor);
  text-align: center
}
.s-product-card-content-sub {
  justify-content: center;
  margin-bottom: 10px;

}
.s-product-card-content-subtitle {
  color: var(--mainColorLight);
  display: none;
}
.s-product-card-price,
.s-product-card-sale-price h4 {
  font-size: 16px !important;
  color: red !important;
}
.s-product-card-promotion-title {
    padding: 5px;
    font-size: 9px !important;
}
salla-add-product-button button {
  background: var(--mainColor);
  span {
  color: var(--mainColorLight);
  }
  &:hover {
    background: var(--mainColorLight) !important;
    span {
    color: var(--mainColor) !important;
   }
  }
}

.store-footer__inner {
padding-top: 2rem;
  background: var(--mainColor);
  color: var(--socondColor);
  h3 {
    color: var(--mainColorLight) !important;
  }
}
.store-footer {
  background:#DD6C32;
  .copyright-text a,
   .copyright-text p {
    color: #fff;
  }
}

salla-add-product-button .s-button-disabled {  
  position: relative;
  opacity: 1;
  height:8px;
  height: 100% !important;
  background-color: var(--mainColorLight) !important;
  color: var(--mainColor);
}

salla-add-product-button .s-button-disabled .s-button-text {
    position: relative;
    overflow: initial;
    width: 128px;
    height: 35px;
   span {
      display: none;
  }
}

salla-add-product-button .s-button-disabled .s-button-text::after{  
content: "اعلمنى عند التوفر";
    position: absolute;
    top: 0;
    display: inline-block;
    bottom: 0;
    opacity: 1;
    left: 0;
    padding: 7px 0;
  
    color: #106355;
    height: 100%;
    z-index: 99;
    height: 100%;
}


.s-payments-list-item img {
  border-radius: 6px;
}
.items-center.justify-between.py-4 {
  padding-top: 8px;
  padding-bottom: 8px;
  justify-content: center;
} 
salla-advertisement {
  height: auto !important;
}

.s-product-card-content {
    padding: 5px !important;
}


@media (min-width: 480px) {
    .navbar-brand img {
        max-width: 238px;
        height: 3rem;
        object-fit: contain;
    }
    .header-search  {
      margin: 0 3rem;
    }

}
.sicon-menu {
  color: var(--mainColorLight);
}
.s-product-card-out-of-stock img.loaded {
  filter: unset;
}
@media (max-width: 500px) {
  .s-advertisement-content-main a::after {
    left: -49px;
    top: 3px;
  }
  .s-advertisement-content-main a {
      width: 80%;
     padding-right: 0 !important;
  }
  .sicon-city:before {
   position: initial;
   right: 0 !important;
  }*/
  salla-add-product-button .s-button-disabled .s-button-text::after,
  salla-add-product-button button span{
    font-size: 13px;
  }
}
@media (max-width: 767px) {
.header-btn {
  width: 3.5rem;
      padding-left: 2rem !important;

}
.main-nav-container  .bg-inherit {
  padding-top: 0.7rem;
}
  .sicon-user-circle:before {
    font-size: 13px;
  }
  .navbar-brand img {
      height: 1.8rem;
      width: auto;
      max-width: 130px;
      object-fit: cover;
  }
 
  .header-btn__icon.icon {
    font-size: 16px;
  }
  .footer-top-container {
   justify-content: center !important;  
    img {
          margin: 6px 9px !important;
        }
  }
  .s-advertisement-content-main a {
    font-size: 12px !important;
  }
 
}
.s-block--categories {
  margin-top: 2rem !important;
}
@media only screen and (min-width: 1024px) {
    .main-menu {
      margin-right: 0;
      margin-left: 0;
      padding-bottom: 0.1rem;
      padding-top: 1rem;
    }
    /*.main-nav-container{
        padding-bottom: 1rem;
     }*/
    .main-menu li.root-level>a {
        padding-bottom: 1rem;
        font-weight: 800;
        padding-right: 0.3rem;
        padding-left: 0.3rem;
        font-size: 15px;
    }
    .container {
        max-width: 1435px;
    }
    .main-menu {
      justify-content: center;
  }
  .main-menu li:hover>.sub-menu {
    background: var(--mainColor);
    color: var(--socondColor);
  }
        .lg\:grid-cols-6 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    p.max-w-sm {
    max-width: 41rem;
        text-align: justify;
    }
    .main-menu li:hover>.sub-menu {

        transform: translateY(-8px);
    }
}

.footer-top-container {
  display: flex;
   flex-direction:row-reverse;
 justify-content: space-between;
 align-items: center;
  background: #3e7681;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 3rem;
  .imgs-delivers {
    display: flex;
    img {
           max-width: 80px;
            height: 30px;
            object-fit: contain;
            margin: 6px 16px;
            background: var);
            border-radius: 8px;
            border: 1px;
        }
    }
  }
}
.s-advertisement-content-main {
  font-weight: 900 !impoertant;
  font-size: 16px; 
}
.s-advertisement-content {
  padding-top: 0;
  padding-bottom: 0;
}

.sicon-city:before {
    content: '';
    display: inline-block;
    width: 33px; 
    height: 45px; 
    background-image: url('https://static.vecteezy.com/system/resources/previews/016/716/478/non_2x/google-maps-icon-free-png.png');
    background-size: cover;
    background-position: center;
    position: relative;
       z-index: 1;
       right: 3rem;
}

.s-advertisement-action {
    display: none !important;
}
 .slide--cat-entry {
    padding: 0 !important;
    border-radius: 0 !important;
  }
@media (max-width: 500px) {
.s-advertisement-content-main {
  display: flex;
  align-items: center;
  font-weight: 800;
  }
 .footer-top-container  .imgs-delivers  img {
        max-width: 56px;
        height: auto;
 }
 
 .s-payments-list-item img {
    border-radius: 6px;
    max-width: 2.2rem;
}
 .s-payments-list {
    display: flex;
    flex-wrap: nowrap;
 }  
 .s-payments-list-item {
    width: auto;
 }
 .footer-top-container {
       padding: 0.5rem 6px !important;
 }
 }
.s-advertisement-content-main a {
 background-image:linear-gradient(-225deg, var(--mainColorDark) 0%, var(--mainColor) 29%, rgb(248 0 0) 50%, #ff1f1ff7 100%);

        background-size: auto auto;
        background-clip: border-box;
        background-size: 200% auto;
        color: #fff;
        background-clip: text;
        -webkit-background-clip: text;
        text-fill-color: transparent;
        -webkit-text-fill-color: transparent;
        animation: Desktoptextclip 10s linear infinite;
        -webkit-animation: Desktoptextclip 10s linear infinite;
        display: inline-block;
        font-size: 15px;
}
@keyframes Desktoptextclip {
  to {
    background-position: 200% center;
  }
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
  from {
    background-position: 100% center;
  }
}
salla-add-product-button .s-button-disabled .s-button-text:before{
     content: "\e9ad";
    position: absolute;
    font-family: sallaicons !important;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    top: 0;
    color: #126058;
    z-index: 999;
    font-size: 17px;
    top: 8px;
    right: 0;
    }
    
.s-advertisement-content-main a {
    position: relative;
    padding-right: 3rem;
    z-index: 3;
}

.s-advertisement-content-main a::after {
   content: '';
    position: absolute;
    left: 0;
    width: 2.1rem;
    height: 2.1rem;
    top: 50%;
    transform: translateY(-50%);
    background-image: url(https://cdn.icon-icons.com/icons2/1448/PNG/512/42509kaaba_99055.png);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
    left: -49px;
}

.slide--cat-entry {
  height: auto !important;
  border: 1px solid var(--color-primary-light);
  h2 {
    display: none;
  }
  img {
    object-fit: cover !important;
    height: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
  }
}
/* Facebook */
.store-footer a[aria-label="facebook"] {
    background-color: #3b5998; /* Facebook Blue */
}

/* YouTube */
.store-footer a[aria-label="youtube"] {
    background-color: #FF0000; /* YouTube Red */
}

/* TikTok */
.store-footer a[aria-label="tiktok"] {
    background-color: #000; /* TikTok Black */
}
.store-footer a[aria-label="instagram"] {
    background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D, #F56040, #F77737, #FCAF45, #FFDC80);
}

/* Snapchat */
.store-footer a[aria-label="snapchat"] {
    background-color: #FFFC00; /* Snapchat Yellow */
    svg {
      fill: black;
    }
}

.s-block-tabs  {
  padding-top: 1rem;
  margin-top: 2rem;
}

@media (max-width: 380px) {
  salla-add-product-button .s-button-disabled {
    padding-left: 6px;
    padding-right: 6px;
  }
  /* .s-advertisement-content-main a::after {
   left: -39px;
  } */
}

/* Twitter */
.store-footer a[aria-label="twitter"] {
    background-color: #1DA1F2; /* Twitter Blue */
}
.s-social-link a svg {
    fill: #fff;
    width: 1.2rem;
    height: 1.2rem;
}

salla-add-product-button div.w-full {
  height: 40px !important;
}