/* Add custom CSS styles below */ 


body{
background:white !important;}

/** header ***/
.top-navbar {
    background: black;
    color: white;
}

input.s-search-input {
    background: white !important;
}

body > div.app-inner.flex.flex-col.min-h-full > salla-advertisement > div{
    background-color: #174b03  !important;
}

.s-cart-summary-total {
    color: rgb(216 187 95);
}
.header-btn__icon {
    border-color: rgb(213 181 83);
    color: rgb(213 181 83);}

/** silder block ***/
section.s-block.s-block--photos-slider {
    margin-top: 0;
}
section.s-block.s-block--photos-slider .swiper-slide {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}
section.s-block.s-block--photos-slider .swiper-slide,
section.s-block.s-block--photos-slider .swiper-slide img {
    border-radius: 0 !important;
}
section.s-block.s-block--photos-slider .swiper.s-slider-container {
    padding: 0 !important;
}
.home-slider.photos-slider .s-slider-block__title-nav {
    display:none !important;
}
/** End silder block ***/
/** banners blocks ***/
section#IRT__photos-slider-0
{
    margin-bottom: 0 !important;
}
#app > div.app-inner.flex.flex-col.min-h-full > section:nth-child(7)> .container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: unset !important;
}
#app > div.app-inner.flex.flex-col.min-h-full > section:nth-child(7) img {
    border-radius: 0 !important;
}
/** End banners ***/
/** قائمة عناصر ***/
a.banner-entry.square-photos {
    background-color: transparent;
}

#app > div.app-inner.flex.flex-col.min-h-full > section:nth-child(5) > div , #app > div.app-inner.flex.flex-col.min-h-full > section:nth-child(12) > div{
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.two-row .banner-entry:first-child {
    height: 200px;
}


@media (max-width:767px){
.banner-entry {
    height: 70px;
}

.two-row .banner-entry:first-child {
    height: 69px;
}
}/** قائمة عناصر ***/

/** products***/
.s-product-card-vertical {
    border: 1px solid #355f4c;
}



.s-button-element:not(:disabled):not([loading]) {
    background: #d2b457;
    color: #000 !important;
    border: 1px solid #355f4c;
    font-size: 1rem !important;
}

.s-slider-nav-arrow {
    border-color: rgb(213 181 82);
}
.s-slider-nav-arrow svg {

    fill: #d5b552;
}


/** products***/

/** footer ***/
.store-footer h3 {
    color: #ecce6f;
    font-weight: 800;
    font-size: 25px;
}

#app > div.app-inner.flex.flex-col.min-h-full > footer > div.store-footer__inner > div > div.lg\:col-span-2.rtl\:lg\:pl-20.ltr\:lg\:pr-20 > p:nth-child(3){
color:black !important;}



.store-footer a {
    color: black;
    font-weight: 600;
    line-height: normal;
}

.footer.store-footer,.footer-is-light .store-footer .store-footer__inner {
    background: white !important;
}


#app > div.app-inner.flex.flex-col.min-h-full > footer > div.store-footer__inner > div{
border-bottom:3px solid #ecce6f;
padding-bottom:25px}

.s-contacts-icon {
 border-color: #eedaab !important;
}

.s-contacts-icon svg {
    fill: rgb(213 181 83);
        border-color: #eedaab;
}
footer a[href*=instagram] {
    background: linear-gradient(45deg, #f09433 0, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
color:white;

}
footer a[href*=tiktok] {
   background:black;
    color:white;
}
footer a[href*=snapchat] {
    background:yellow;
    color:black;} 
 .s-social-list {
    padding-top: 20px;}
    
@media (max-width: 767px) {
  #app > div.app-inner.flex.flex-col.min-h-full > footer > div.store-footer__inner > div > div.lg\:col-span-2.rtl\:lg\:pl-20.ltr\:lg\:pr-20 {
    text-align: center;
  }
  .store-footer a {
    text-align: center !important;
    justify-content: center;
  }
  .store-footer h3 {
    text-align: center !important;
  }

  .s-menu-footer-list {
    text-align: center;
  }
  .s-contacts-list-vertical {
    flex-direction: column;
    align-items: center;
  }
  .s-social-list {
    justify-content: center;
}
}





#app > div.app-inner.flex.flex-col.min-h-full > section:nth-child(13){padding: 0px 0px 39.25%;}




/* تحضير العنصر */
.s-product-card-entry {
  position: relative;
  overflow: visible;
  transition: all 0.3s ease;
  border-radius: 8px; /* إضافة راديوس للكارد نفسه */
  z-index: 0;
}

/* تعريف الحدود المتحركة */
.s-product-card-entry::before,
.s-product-card-entry::after {
  content: "";
  position: absolute;
  border-radius: 8px; /* راديوس للبردر */
  box-sizing: border-box;
  border: 1px solid transparent;
  width: 0;
  height: 0;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

/* الجزء الأول من الحدود */
.s-product-card-entry::before {
  border-right-color: transparent;
  border-bottom-color: transparent;
}

/* الجزء الثاني من الحدود */
.s-product-card-entry::after {
  border-top-color: transparent;
  border-left-color: transparent;
  top: auto;
  left: auto;
  bottom: 0;
  right: 0;
}

/* تفعيل التأثير عند hover */
.s-product-card-entry:hover::before {
  animation: animate1 1s linear forwards;
  border-top-color:#355f4c /* لون البوردر */
  border-left-color:#355f4c;
}

.s-product-card-entry:hover::after {
  animation: animate2 1s linear forwards;
  animation-delay: 0.5s;
  border-right-color: #355f4c; /* لون البوردر */
  border-bottom-color: #355f4c;
}

/* ضمان أن الحواف الداخلية والصور تأخذ نفس الراديوس */
.s-product-card-entry .s-product-card-image,
.s-product-card-entry .s-product-card-content {
  border-radius: 8px;
}

.s-product-card-entry .s-product-card-image img {
  border-radius: 8px 8px 0 0; /* راديوس فقط للجزء العلوي من الصورة */
}

/* تعريف حركة الجزء الأول */
@keyframes animate1 {
  0% {
    width: 0;
    height: 0;
  }
  50% {
    width: 100%;
    height: 0;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}


/* تعريف حركة الجزء الثاني */
@keyframes animate2 {
  0% {
    width: 0;
    height: 0;
    right: 0;
    bottom: 0;
    left: auto;
    top: auto;
  }
  50% {
    width: 100%;
    height: 0;
    right: 0;
    bottom: 0;
    left: auto;
    top: auto;
  }
  100% {
    width: 100%;
    height: 100%;
    right: 0;
    bottom: 0;
    left: auto;
    top: auto;
  }
}







.coupon-container {
    background-color: #ffffff;
    box-shadow: 3px 2px 3px #f2f2f2;
    width: 100%!important;
    text-align: center;
    margin: 25px auto;
    padding: 20px;
    border-radius: 15px
}

.coupon-header {
    font-size: 19px;
    font-weight: 700;
    color: #000;
    margin-bottom: 10px
}

.coupon-subheader,.coupon-subtitle {
    font-size: 19px;
    color: #660722;
    margin-bottom: 5px
}

button.apply-button {
    color: #fff;
    background: #d5b552;
    padding: 10px 40px;
    border-radius: 5px;
    margin-top: 11px;
    transition: .3s ease-in-out
}

button.apply-button:hover {
    background-color: #000;
    color: #fff
}

input.coupon-input {
    background: 0 0;
    border: 1px solid #2a476f;
    padding: 5px;
    border-radius: 5px;
    text-align: center;
    color: #000
}

.coupon-container img.logo-container {
    max-width: 163px;
    margin: 15px auto
}

h2.font-bold.text-xl.inline-block {
    color: red;
    font-size: 31px;
    margin-bottom: 14px;
}