/* Add custom CSS styles below */ 

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

/* Due to this, the order of the elements can be changed. */
.main-content.prod-main-content {
  display: flex;
  flex-direction: column;
}

/* New item arrangement */
form.product-form {
  order: 1;
  display: flex;
  flex-direction: column;
}

section.s-block--bundle-out-of-stock-alternative {
  order: 2;
  margin: 10px auto
}

.gomla__vd-form {
  order: 3;
} 

section.customer-reviews {
  order: 4;
  display: flex;
  justify-content: center;
  width: 100%;
}

section.customer-reviews > salla-slider {
  width: 100%;
}

.product__description {
  order: 5;
} 

.p-share {
 order: 6; 
}

section.flex.bg-white.lm-bg-sec.p-5.rounded-md.rounded-b-none.dm-bg-sec > div.center-between.w-full {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: flex-end !important;
}

section.flex.bg-white.lm-bg-sec.p-5.rounded-md.rounded-b-none.dm-bg-sec > div.center-between.w-full > label {
  margin-left: 10px;
  margin-bottom: 5px;
}


/* Inner New arrangement */

section.flex.bg-white.lm-bg-sec {
  padding-bottom: 5px
  padding-top: 10px;
  display: none;
}

.product-wght-or-size-guide {
  order: 3;
  padding: 5px auto;
  margin-bottom: 0;
}

/* Customer Reviews */

salla-slider > div.swiper.s-slider-container > div.swiper-wrapper > div.swiper-slide > .special-testimonial {
  border: 1px solid black;
}

section.s-block.s-block-special-testimonials.all.container > salla-slider {
  padding-bottom: 10px;
}

section.s-block.s-block-special-testimonials.all.container {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

/* A few adjustments */

.tax-note {
  display: block;
}

h5.free-return {
  margin: 15px 0;
}

h5.free-return::before {
  content: '\f00c';
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-size: 10px;
  color: white;
  margin-left: 15px;
  background-color: rgb(171, 199, 161);
  border-radius: 50%;
  padding: 3px;
}

h5.presure-socks::before {
  content: '\f00c';
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-size: 10px;
  color: white;
  margin-left: 15px;
  background-color: rgb(171, 199, 161);
  border-radius: 50%;
  padding: 3px;
}

/* Header Styling */

div.container.container--breadcrumbs > nav.breadcrumbs {
  padding-top: 10px
}

div.header-inner-wrapper {
  /* height: 55px !important;
  align-items: flex-start !important; */
}

i.header-menu-icon {
  padding-top: 10px;
}

salla-user-menu{
  padding-top: 10px;
}
salla-cart-summary {
  padding-top: 0px
}

/* Hide items that serve no purpose. */

#tabbyPromoWrapper {
  display: none;
}

salla-quick-order {
  display: none !important;
}

/* Offers */

div.s-blocks-wrapper.s-before-product-info {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center;
}

section.national-day-offers-description {
  margin-bottom: 0;
  margin-top: 0;
}

section.national-day-offer {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center; 
}

section.national-day-offer::after {
  content: "اليوم الوطني";
  color: rgb(0, 108, 53);
  margin-right: 5px;
  font-size: 35px;
  font-weight: bold;
}

section.free-delivery {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  width: 45% ; 
  box-sizing: border-box !important;
  margin: 10px 0 0;
}

section.free-delivery::before {
  content: "\1F69A";
  font-family: , "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
  font-size: 24px !important;
}

section.free-gifts {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  width: 45% ; 
  box-sizing: border-box !important;
  margin: 10px 0 0;
}

section.free-gifts::before {
  content: "\1F381";
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
  font-size: 24px !important;
}

@media (max-width: 639px) {
  section.free-delivery,
  section.free-gifts {
    width: 35%;
    gap: 4px;
  }
  section.free-delivery::before {
    font-size: 14px !important;
  }
  section.free-gifts::before {
    font-size: 14px !important;
  }
}

/* The New Button Style */

button.text-sm.with-arrow {
  position: relative !important;
  overflow: hidden !important;
  background-color: hsl(104, 25%, 71%) !important;
  padding: 10px 20px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 25px hsl(104, 25%, 50%, 0.45) !important;
  transition: 0.3s;
  bottom: 0;
}

button.text-sm.with-arrow:hover {
  bottom: 3px;
}

button.text-sm.with-arrow::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 30%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.1) 70%,
    transparent 100%
  );
  
  animation: shine 3s infinite;
}

@keyframes shine {
  0% {
    left: -150%;
  }
  35% {
    left: 150%;
  }
  100% {
    left: 150%;
  }
}