@import url(main.css);

/* * {
  outline: 1px dotted lime;
} */

.story-section,
.favorites-section {
  padding: var(--ws-4) 0px;
}

.story-header,
.fav-header,
.stories-container,
.fav-container {
  padding: 0px var(--ws-auto);
}

/*=== stories classes ===*/

.story-section {
  background: var(--clr-background);
}

.story {
  width: fit-content;
}

.stories-content {
  margin-top: var(--ws-2);
}

.story-img {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: var(--clr-white);
  border: 2px solid var(--clr-accent);
}

.story-img img {
  padding: var(--ws-1);
}

/*==== favorites classes ====*/
.fav-content {
  padding: var(--ws-3) 0px;
}

.fav {
  box-shadow: var(--shadow);
}

/*=== order classes ===*/
.order {
  border-radius: 8px;
  border: 1px solid #fff;
  background: #f6f6f6;
  box-shadow: 5px 5px 25px 0px #cdcdcd;
  width: 270px;
}

.order-container {
  padding: var(--ws-3) 0px;
}

.order-details {
  padding: 0px var(--ws-3) var(--ws-3);
}

.order-img img {
  width: 100%;
}

.order-link {
  padding-top: var(--ws-2);
}

/*=== restaurant classes ===*/
.restaurant-section {
  padding-bottom: var(--ws-4);
}

.restaurant-container {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.restaurant-header {
  padding: var(--ws-4) 0px;
}

/*=== restaurant category classes ===*/
.restaurant-sort-category {
  position: relative;
  width: fit-content;
}

.restaurant-sort-clear {
  padding: var(--ws-2) 0px;
  border-top: 1px solid var(--clr-white);
}

.restaurant-sort-category.active {
  z-index: var(--z-1);
}

.restaurant-sort-category.active .rect-sec {
  border-bottom: none;
  border-radius: 12px 12px 0px 0px;
  /* background: #f6f6f6; */
}

.restaurant-sort-category.active .rect-sec .pointer {
  rotate: 180deg;
}

.restaurant-sort-pricing {
  position: absolute;
  top: 100%;
  width: 100%;
  display: none;
}

.pricing-filter {
  padding: var(--ws-2) var(--ws-3);
}

.restaurant-sort-category.active .restaurant-sort-pricing {
  z-index: var(--z-1);
  border: 1px solid #fff;
  background: #f6f6f6;
  border-top: none;
  border-radius: 0px 0px 12px 12px;
  display: block;
}

/*=== restaurant content classes ===*/
.restaurant-content {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr));
  gap: var(--ws-3);
}

.restaurant-tag {
  width: minmax(357px, fit-content);
  border-radius: 15px;
  border: 1px solid #fff;
}

.restaurant-img {
  position: relative;
}

.restaurant-img img {
  width: 100%;
}

.discount-stamp {
  position: absolute;
  right: var(--ws-3);
  bottom: var(--ws-large);
}

.restaurant-banner {
  background: var(--clr-white);
  padding: var(--ws-2) var(--ws-3);
  overflow: hidden;
}

.delivery-discount p {
  animation: slidein 0.3s alternate;
  animation-delay: 5s;
}

.restaurant-details {
  display: flex;
  flex-direction: column;
  gap: var(--ws-2);
}

.red-heart, .hollow-heart {
  display: none;
}

.red-heart.active, .hollow-heart.active {
  display: flex;
}

@keyframes slidein {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}

.restaurant-details {
  padding: var(--ws-3);
}

.cuisine-category {
  flex-wrap: wrap;
}

@media (max-width: 1120px) {
  /*=== restaurant classes ===*/
  .restaurant-container {
    flex-direction: column;
  }

  .restaurant-sort {
    flex-direction: row;
    padding-bottom: var(--ws-3);
  }
}

@media (max-width: 1115px) {
  .restaurant-section {
    padding-bottom: 0px;
  }
}

@media (max-width: 1060px) {
  /*=== restaurant classs ===*/
  .restaurant-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 885px) {
  .fav-content {
    padding: var(--ws-3) 0;
  }
}

@media (max-width: 828px) {
  /*=== stories classes ===*/
  .story-section {
    padding: 0px;
    background: transparent;
  }

  .story-header {
    display: none;
  }

  .stories-content {
    margin-top: 0px;
  }
}

@media (max-width: 686px) {
  /*=== restaurant classs ===*/
  .restaurant-sort {
    width: 100vw;
  }
  .rating {
    display: none;
  }

  .restaurant-content {
    grid-template-columns: repeat(1, 1fr);
  }
}
