/* #region general */

main {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  line-height: 1.6;
}

.cart-info {
  margin-top: 3em;
  margin-bottom: 3em;
  text-align: center;
  color: #a115e2;
}

/* #endregion general */

/* #region products table */

.products-table {
  margin: 0 auto;
  border-spacing: 0;
}

.products-table,
th,
td {
  text-align: center;
  padding: 1em;
}

tr:nth-child(even) {
  background-color: #c2a34d;
}

th {
  background-color: #d9ae61;
  color: #573d1c;
}

td img {
  width: 100px;
}

td .qty-btns {
  display: flex;
  align-items: center;
  gap: 0.1em;
  margin-right: 0.5em;
}

td button {
  padding: 0.2em;
  margin: 0.2em;
  cursor: pointer;
  color: #515a47;
  background: transparent;
  font-size: 2rem;
  border: none;
  cursor: pointer;
}

td button:hover {
  color: #75bb25;
}

tfoot {
  background-color: #d9ae61;
  font-size: 2rem;
  font-weight: 700;
}

/* #endregion products table */

/* #region checkout button */
button.checkout {
  display: block;
  margin: 1em auto;
  background-color: #d9ae61;
  color: #a115e2;
  padding: 1em;
  cursor: pointer;
  border-radius: 10px;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

button.checkout:hover {
  background-color: #a115e2;
  color: white;
}

button.checkout:active {
  background-color: #a115e2;
  box-shadow: 0 4px #333;
  transform: translateY(4px);
}

button.checkout.hide-checkout-btn {
  display: none;
}

/* #endregion checkout button */

/* #region feedback */
.feedback {
  visibility: hidden;
  color: #fff;
  width: 50%;
  line-height: 1.5;
  margin: 0 auto;
  font-size: 2rem;
  border-radius: 10px;
  padding: 0.5em 1em;
  background-image: linear-gradient(to right, #00b4db, #0083b0);
}

/* #endregion feedback */

/* #region media queries */
@media (max-width: 768px) {
  /* main */
  main {
    width: 95%;
    line-height: 1.2;
  }

  /* table */
  table,
  th,
  td {
    padding: 0.5em;
  }

  td.qty-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5em;
    gap: 0.1em;
    margin-right: 0.5em;
  }

  td:first-child {
    gap: 0.5em;
    font-size: 0.9rem;
  }

  td.qty-btns {
    margin: auto;
  }

  td button {
    padding: 0.5em 0;
    margin: 0.2em;
    font-size: 2rem;
  }

  tfoot {
    font-size: 1.8rem;
  }

  /* feedback */
  .feedback {
    width: 80%;
    margin: 0 auto;
  }
}
/* #endregion media queries */