.reservas {
  background-color: #d7b7a482;
  margin: 10px;
  border-radius: 10px;
  margin-top: 115px;
  padding-bottom: 0.5px;
  overflow-x: hidden;
  position: relative;
}

.btn.carrinho {
  padding: 12px;
  border-radius: 30px;
  top: calc(100% - 65px);
}

.btn img {
  width: 25px;
}

#total-prods-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -35%);
  color: var(--velvet);
  font-size: 14px;
  font-weight: bold;
}

.reservas h2 {
  padding-top: 20px;
  position: relative;
}

.folha {
  width: 100px;
  position: absolute;
  margin: 0;
  margin-top: 20px;
  opacity: 0;
  transition: 0.3s ease-in-out;
}

.folha:first-of-type {
  transform: rotateY(180deg) rotateZ(-45deg);
  left: 0;
}

.folha:last-of-type {
  transform: rotateZ(-45deg);
  right: 0;
}

.reservas h4 {
  margin: 70px 10px;
}

.product {
  border: 2px solid var(--bread);
  padding: 10px;
  margin: 10px;
  margin-bottom: 20px;
}

.product h3 {
  text-transform: none;
  border-bottom: 1px solid var(--bread);
  line-height: normal;
  padding-bottom: 6px;
  margin: 0;
}

.product figure {
  margin: 10px 0 0 0;
  aspect-ratio: 1 / 1;
  line-height: 0;
}

.product img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product p {
  padding: 5px;
  margin: 0;
}

.product .valor {
  font-size: 20px;
}

.product .qt,
.product .ingred,
.calendario > div p {
  font-size: 12px;
}

.product .obs {
  font-size: 8px;
}

.product span {
  margin-left: 10px;
}

.product .ingred {
  border-top: 1px solid var(--bread);
  border-bottom: 1px solid var(--bread);
}

.calendario {
  padding: 15px 5px 5px;
  display: flex;
  column-gap: 10px;
  justify-content: center;
}

.calendario > div {
  background-color: var(--bread);
  opacity: 0.3;
  color: var(--cloud);
  text-align: center;
  padding: 3px 10px;
  width: 52px;
  height: 52px;
}

.calendario .active {
  opacity: 1 !important;
}

.container-prod-qty {
  text-align: center;
  margin-top: 20px;
}

.container-prod-qty p {
  font-size: 12px;
}

.container-prod-qty span {
  margin: 0 5px;
}

.qty-btn {
  border: 1px solid var(--bread);
  border-radius: 11px;
  padding: 0px 5px;
  font-weight: bold;
}
.buttons {
  margin-top: 20px;
}
.buttons a {
  color: #f8eeed;
  background-color: var(--velvet);
  padding: 5px 10px;
  text-transform: uppercase;
  display: block;
  width: fit-content;
  margin: auto;
}

.buttons a:nth-of-type(2) {
  background-color: transparent;
  color: var(--bread);
  font-size: 12px;
  margin-top: 10px;
}

.rules {
  margin-top: 50px;
}

.rules p {
  font-size: 12px;
}

/* pop-up reservas */

.jquery-modal .modal {
  background-color: var(--cloud);
  color: var(--bread);
  border-radius: 0;
  min-height: 90vh;
}

.page .blocker {
  z-index: 2;
}

.modal h2 {
  font-size: 40px;
  margin: 20px 0 50px;
}

.modal h3 {
  text-align: left;
  text-transform: none;
  font-size: 16px;
}

#first-step-container table {
  width: 100%;
  border: 1px solid var(--massa);
  padding: 5px;
}

.clean-basket {
  margin-bottom: 20px;
  display: block;
  opacity: 0.6;
  font-size: 11px;
  text-decoration: underline;
}
.pop-date {
  font-size: 12px;
  text-transform: lowercase;
}

.pop-product td:first-of-type {
  width: 180px;
}

.pop-product td a {
  outline: 1px solid var(--massa);
  border-radius: 11px;
  font-size: 14px;
  border-radius: 11px;
  padding: 0 3.5px;
}

.modal textarea,
.modal input {
  resize: none;
  color: var(--cloud);
  background-color: var(--massa);
  border: 0;
  border-radius: 0;
}

.modal textarea:focus,
.modal input:focus {
  outline: none !important;
  border: 0;
}

.modal .obs {
  margin-bottom: 5px;
}

.modal-spinner {
  border-radius: 0 !important;
  background-color: var(--velvet) !important;
  height: 40px !important;
}

.modal #prods_name,
.modal #prods_tel,
.modal #prods_email {
  width: 100%;
  margin: 10px 0 30px;
  height: 40px;
}

/* pop-up produtos indisponíveis */

.popup {
  opacity: 0;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.popup-content {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: auto;
  background-color: var(--bread);
  padding: 10px;
  color: var(--cloud);
  column-gap: 10px;
  margin-bottom: 50px;
}

.popup h3 {
  color: var(--massa);
  margin: 0;
  margin-bottom: 10px;
  font-weight: 200;
}

.popup p {
  font-size: 12px;
  margin: 0;
  margin-top: 10px;
  text-align: center;
}

/*========================= DESKTOP ======================*/
@media screen and (min-width: 700px) {
  .reservas {
    margin-top: 125px;
  }

  .btn.carrinho {
    right: 25px;
  }

  .reservas h2 {
    padding-top: 100px;
  }
  .folha {
    width: 250px;
    margin-top: 50px;
  }
  .folha:first-of-type {
    left: -30px;
  }
  .folha:last-of-type {
    right: -30px;
  }
  .products {
    display: flex;
    flex-wrap: wrap;
    column-gap: 40px;
    row-gap: 40px;
    margin: var(--margin);
  }

  .product {
    width: calc((100% / 3) - (80px / 3));
    margin: 0;
  }

  .product h3 {
    font-size: 18px;
  }

  .active:hover {
    cursor: pointer;
  }

  .page .blocker {
    text-align: right;
    padding: 0;
  }

  .jquery-modal .modal {
    min-height: 100vh;
    width: 400px;
  }

  .pop-product td:first-of-type {
    width: 240px;
  }

  .close-modal {
    display: none !important;
  }

  /* pop-up produtos indisponíveis */

  .popup {
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
  }

  .popup-content {
    top: 50%;
    width: 500px;
    transform: translate(-50%, -50%);
    padding-bottom: 50px;
  }

  .popup p {
    font-size: 14px;
    padding: 0 50px;
  }
}