@import url("../packages/fonts/family.css");

@import url("../packages/swiper/build/swiper-bundle.min.css");

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style-type: none;
  text-decoration: none;
}

/* .swiper {
  padding: 2rem !important;
} */

#slider-container-bg {
  height: fit-content;
  width: 100%;
  margin: 0 auto;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 10%, rgba(179, 216, 152, 1) 90%);
}

#slider-container {
  /* max-width: 124rem; */
  /* padding: 0 1rem; */
  margin: 0 auto;
  /* background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 10%, rgba(179, 216, 152, 1) 90%); */
  width: 60%;
  /* overflow: hidden; */
  position: relative;
  transition: all 0.3s;
  padding-bottom: 8px;
}

.slider-container-transform {
  transform: translateX(calc(380px / 2 / var(--navRatio)));
}

.text-center {
  text-align: center;
}

.slider-container {
  width: 100%;
  /* margin-left: -5%; */
}

.tranding-slide {
  padding: 1.8rem;
  padding-bottom: 0;
}

.tranding-slide .tranding-slide-img {
  text-align: center;
  position: relative;
}

.tranding-slide .tranding-slide-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  /* Makes the image round */
  border: 2px solid white;
  /* Adds a white border around the image */
  overflow: hidden;
  /* Hides any overflowing content */
  padding: 6px;
}

.tranding-slide .tranding-slide-content {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.tranding-slide-content .food-price {
  position: absolute;
  top: 2px;
  right: 2px;
  color: var(--white);
}

.tranding-slide-content .tranding-slide-content-bottom {
  position: absolute;
  bottom: 2px;
  left: 2px;
  color: var(--white);
}

.swiper-slide-shadow-left,
.swiper-slide-shadow-right {
  background-image: none !important;
}

/* Optional custom styles for navigation buttons */
.swiper-button-next {
  right: -2rem;
  left: auto;
}

.swiper-button-next::after {
  content: url("../static/image/icon/next.png");
  transform: scale(.3);
}

.swiper-button-prev {
  left: -2rem;
  right: auto;
}

.swiper-button-prev::after {
  content: url("../static/image/icon/previous.png");
  transform: scale(.3);
}

.highlight {
  /* border-bottom: 3px solid red; */
  box-shadow: 0px 0px 12px 5px rgba(248, 248, 255, 1);
  filter: brightness(115%);
}

.text-album-container {
  width: 100%;
  height: calc(87px / var(--buttonRatio));
  display: flex;
  justify-content: center;
  /* margin-left: -25%; */
  transform: translate(0, -12.5%) scale(1.5);
}


@media (min-width : 769px) and (max-width : 1024px) {
  .tranding-slide {
    padding: 1.2rem;
    padding-bottom: 0;
  }

  .swiper-button-prev::after {
    transform: translate(10%, 0) scale(.2);
  }

  .swiper-button-next::after {
    transform: translate(-10%, 0) scale(.2);
  }
}

@media (min-width : 1025px) and (max-width : 1200px) {
  .tranding-slide {
    padding: 1.5rem;
    padding-bottom: 0;
  }

  .swiper-button-prev::after {
    transform: translate(10%, 0) scale(.2);
  }

  .swiper-button-next::after {
    transform: translate(-10%, 0) scale(.2);
  }
}

@media (max-width: 991px) and (max-height: 568px) {
  #slider-container {
    width: 28%;
    /* margin-left: calc(72% - 4rem); */
  }

  .tranding-slide {
    padding: 0.9rem;
    padding-bottom: 0;
  }

  .text-album-container {
    transform: translate(0, -12.5%) scale(1.5);
  }

  .swiper-button-next {
    right: -4rem;
    left: auto;
  }

  .swiper-button-prev {
    left: -4rem;
    right: auto;
  }

  .swiper-button-prev::after {
    transform: translate(10%, 0) scale(.15);
  }

  .swiper-button-next::after {
    transform: translate(-10%, 0) scale(.15);
  }

  .tranding-slide .tranding-slide-img img {
    border: 1px solid white;
    padding: 2px;
  }

  .highlight {
    /* border-bottom: 3px solid red; */
    box-shadow: 0px 0px 5px 5px rgba(248, 248, 255, 0.6);
    filter: brightness(115%);
  }
}