/* -------------------------------
   STYLES FOR THE CHECKOUT PAGE
-------------------------------- */

/* Cart items wrapper */
#cart-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  background-color: var(--main-white-color);
  border-radius: 8px;
}

/* LEFT CART SECTION FOR PRODUCT IMAGE AND TITLE */

/* Container */
.cart-item-left {
  display: flex;
  align-items: center;
  flex: 1;
}

/* Product image */
.cart-item-image {
  width: 50px;
  height: auto;
  margin-right: 10px;
}

/* Product title */
.cart-item-title {
  color: var(--main-blue-color);
  font-size: 1.2rem;
  font-weight: bold;
  padding: 0;
}

/* MIDDLE CART SECTION FOR QUANTITY BUTTONS AND NUMBER */

/* Container */
.cart-item-quantity {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  width: 80px;
  flex-shrink: 0; /* Prevent shrinking */
}

/* Quantity number */
.quantity-number {
  color: var(--main-blue-color);
  font-size: 1.2rem;
  font-weight: bold;
}

/* Quantity + and - buttons */
.quantity-button {
  width: 20px;
  height: 20px;
  font-size: 1.2rem;
  color: var(--main-white-color);
  background-color: var(--design-details-color);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: ease-in-out 200ms;
}

.quantity-button:hover {
  background-color: var(--main-blue-color);
}

/* RIGHT CART SECTION FOR PRICE AND ON SALE BADGE */

/* Container */
.cart-item-price-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  flex-shrink: 0;
  width: 50px;
}

/* Item price styling for regular priced products */
.cart-item-price {
  color: var(--main-blue-color);
  font-size: 1.2rem;
  font-weight: bold;
  white-space: nowrap; /* Prevents USD from wrapping to a new line */
}

/* On sale price */
.discounted-price {
  color: var(--discounted-price-color);
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 0;
  margin-top: 0;
}

/* Regular price when on sale */
.original-price {
  color: grey;
  text-decoration: line-through;
  font-size: 1.1rem;
  font-weight: bold;
  margin: 0;
}

/* On sale badge */
.on-sale-badge {
  background-color: var(--on-sale-badge-color);
  color: var(--main-white-color);
  font-size: 1rem;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 15px;
  margin-top: 2px;
}

/* BOTTOM SECTION OF PAGE STYLING */

/* Total price styling */
.total-price {
  font-size: 1.6rem;
  font-weight: bold;
  text-align: right;
  margin-top: 20px;
  margin-bottom: 30px;
  padding-top: 10px;
  border-top: 1.5px solid var(--design-details-color);
}

/* PROCESSING MESSAGE AND SPINNER (spinner styles in styles.css) */

.processing-message {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(10, 54, 65, 0.9);
  color: var(--main-white-color);
  font-size: 1.4rem;
  font-weight: bold;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 1000;
  flex-direction: column; /* Stack spinner and text vertically */
}

/* -------------------------------
   MEDIA QUERIES
-------------------------------- */

/* TABLET (768px - 1024px) */
@media (min-width: 768px) {
  #cart-items {
    gap: 15px;
  }

  .cart-item {
    padding: 10px 15px;
  }

  .cart-item-image {
    width: 70px;
    margin-right: 20px;
  }

  .cart-item-title,
  .quantity-number,
  .quantity-button,
  .cart-item-price,
  .discounted-price {
    font-size: 1.4rem;
  }

  .cart-item-quantity {
    gap: 4px;
  }

  .quantity-button {
    width: 25px;
    height: 25px;
  }

  .cart-item-price-wrapper {
    width: 110px;
  }

  .original-price,
  .on-sale-badge {
    font-size: 1.2rem;
  }
}

/* DESKTOP (1024px and up) */
@media screen and (min-width: 1024px) {
  #cart-items {
    gap: 20px;
  }

  .cart-item {
    padding: 10px 20px;
  }

  .cart-item-image {
    width: 90px;
    margin-right: 40px;
  }

  .cart-item-title,
  .quantity-number,
  .quantity-button,
  .cart-item-price,
  .discounted-price {
    font-size: 1.6rem;
  }

  .cart-item-quantity {
    gap: 6px;
  }

  .cart-item-price-wrapper {
    width: 150px;
  }

  .original-price,
  .on-sale-badge {
    font-size: 1.4rem;
  }

  .total-price {
    font-size: 1.8rem;
    border-top: 2px solid var(--design-details-color);
  }

  .processing-message {
    font-size: 1.6rem;
  }
}