/* Mantém o resumo e a ação final inteiramente dentro do rodapé do modal. */
#reviewModal #reviewEventName {
  color: #292929 !important;
  display: block !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
  margin: 0 0 5px !important;
  min-height: 0 !important;
  visibility: visible !important;
}

#reviewModal #reviewEventDate {
  color: #292929 !important;
  font-size: 16px !important;
  line-height: 22px !important;
  margin: 0 0 14px !important;
}

#reviewModal .modal-body > hr {
  margin: 0 0 16px !important;
}

.cart-product-group app-product-item {
  display: block !important;
  margin-bottom: 16px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.cart-product-group .cart-product-group-item {
  background: #fff !important;
  border: 1px solid #d9d9d9 !important;
  border-left: 8px solid #e1e1e1 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  width: 100% !important;
}
#reviewModal .rv-footer {
  align-items: stretch !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  margin: 10px 0 0 !important;
  width: 100% !important;
}

#reviewModal .rv-footer > div,
#reviewModal #reviewSummary {
  min-width: 0 !important;
}

#reviewModal #reviewSummary > div {
  display: flex !important;
  height: 100% !important;
}

#reviewModal .rv-footer > div:last-child {
  align-items: center !important;
  display: flex !important;
  padding: 8px !important;
}

#reviewModal #reviewContinue,
#reviewModal #reviewReservar {
  box-sizing: border-box !important;
  min-width: 112px !important;
  padding: 12px 16px !important;
  white-space: nowrap !important;
}

#reviewModal .rv-box {
  min-width: 0 !important;
  padding: 10px !important;
}

@media (max-width: 380px) {
  #reviewModal #reviewContinue,
  #reviewModal #reviewReservar {
    min-width: 105px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Em telas maiores o modal deve ser uma janela central, não ocupar a viewport. */
@media (min-width: 768px) {
  #reviewModal .modal-dialog {
    height: auto !important;
    margin: 24px auto !important;
    max-width: 620px !important;
    padding: 0 !important;
    width: calc(100% - 48px) !important;
  }

  #reviewModal .modal-content {
    height: min(640px, calc(100vh - 48px)) !important;
    max-height: min(640px, calc(100vh - 48px)) !important;
  }
}

@media (min-width: 1200px) {
  #reviewModal .modal-dialog {
    max-width: 580px !important;
  }

  #reviewModal .modal-content {
    height: min(610px, calc(100vh - 64px)) !important;
    max-height: min(610px, calc(100vh - 64px)) !important;
  }
}