/* === GENERAL PAGE STYLING === */
.cart-page-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 150px;
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.cart-container {
  width: 90%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* === HEADER === */
.cart-container h1 {
  text-align: left;
  font-size: 2rem;
  margin-bottom: 1rem;
  
}

/* === EMPTY CART MESSAGE === */ 
#empty-cart-message {
  text-align: center;
  font-size: 1.1rem;
  color: #777;
}

/* === CART ITEMS SECTION === */
.cart-items {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* === SINGLE ITEM ROW === */
.cart-item {
  display: grid;
  grid-template-columns: 150px 1.2fr 0.8fr 0.8fr 1fr 0.6fr;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: 1rem;
}

.cart-item img {
  height: 170px; /* Smaller image for the list view */
  width: auto;
  object-fit: contain;
  margin-right: 20px;
  /* Reset any previous stacking transforms */
  transform: none; 
  z-index: auto;
  filter: none;
}

.cart-item h4 {
  font-size: 1.3rem;
/*   font-weight: 600; */
  margin-bottom: 0.3rem;
}

.cart-item p {
  font-size: 1.1rem;
}

.cart-item-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}

.cart-item-name h4 {
  margin: 0;
}

.cart-item-volume {
  font-size: 0.9rem;
  color: #555;
  margin: 0;
}

/* === PRICE & SUBTOTAL === */
.cart-item-subtotal,
.cart-item-details p {
  text-align: center;
}

/* === QUANTITY CONTROL (HORIZONTAL LAYOUT) === */
.quantity-control {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;           /* space between the buttons and input */
}

.quantity-btn {
  background-color: var(--primary-color); 
  color: var(--text-color); 
  border: none;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.quantity-btn:hover {
  background-color: var(--primary-color-dark); /* Darker on hover */
  border-color: var(--primary-color-dark);
}

.quantity-btn:active {
    transform: translateY(1px); /* Slight press effect */
}

.item-quantity-input {
  width: 50px;
  text-align: center;
  padding: 0.3rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.item-quantity-input {
  -moz-appearance: textfield; /* Firefox */
}

/* Hide the number input spinner arrows (for Webkit browsers like Chrome/Safari) */
.item-quantity-input::-webkit-outer-spin-button,
.item-quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* === REMOVE BUTTON === */
.remove-item-btn {
    /* Ensure the button is visible and styled */
    display: block !important; 
    padding: 8px 15px;
    background-color: var(--bg-color); 
    color: var(--text-color);
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    justify-self: center; /* Center button in its grid column */
}

.remove-item-btn:hover {
    background-color: var(--primary-color-dark);
}

/* === CART SUMMARY (BOTTOM RIGHT) === */
.cart-summary {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.cart-summary p {
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

#cart-total-all {
  font-weight: 400;
  font-size: 1.4rem;
}

.cart-summary a {
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

.cart-summary a:hover {
  color: var(--text-color); 
  background-image: linear-gradient(var(--text-color), var(--text-color));
}

.checkout-btn {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 0.8rem 1.6rem;
  border-radius: 30px;
  font-size: 1.2rem !important;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.checkout-btn:hover {
  background-color: var(--primary-color-dark);
  transform: translateY(-2px);
/*   text-decoration: none !important; */
  background-image: none !important;
}

.checkout-btn:active {
  transform: translateY(0);
  background-color: var(--primary-color);
}

.hidden {
  display: none;
}

.checkout-btn.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

#min-quantity-message{
  color: red;
}

#recapText{
  font-size: 0.6rem
}

/* === CONDITION GENERALES DE VENTE === */

.cart-page-content h2 {
  color: var(--primary-color);
  font-weight:600;
}

.cart-page-content h3 {
  font-weight:600;
}

.cart-page-content p {
  margin-bottom: 50px;
}
/* ================ RESPONSIVE DESIGN ================  */

@media (max-width: 1100px) {

  .cart-page-content {
  
    margin-top: 110px;
    padding-top: 0rem;
    padding-bottom: 4rem;
  }
  
  .cart-page-content h1 {
    padding: 0rem;
    margin: 0rem;
  }
  

  .cart-item {
    grid-template-columns: 120px 1fr 0.8fr 0.8fr;
    grid-template-areas:
      "img name name remove"
      "img price quantity subtotal";
  }

  .cart-item img {
    grid-area: img;
  }

  .cart-item-details h4 {
    grid-area: name;
  }

  .cart-item-subtotal {
    grid-area: subtotal;
  }

  .remove-item-btn {
    grid-area: remove;
    justify-self: end;
  }
  
  #empty-cart-message {
  padding-top: 70px;
}

}

@media (max-width: 800px) {
  
    .cart-item {
    grid-template-columns: 1fr;
    grid-template-areas:
      "img"
      "name"
      "price"
      "quantity"
      "subtotal"
      "remove";
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .cart-item-name {
    display: flex;
    flex-direction: column;
    align-items: center;   /* centers horizontally */
    justify-content: center;
    text-align: center;    /* ensures text lines up too */
  }
  
    .cart-item-name h4,
  .cart-item-name p {
    margin: 0; /* optional: clean spacing on mobile */
  }

  .cart-item img {
    margin: 0 auto;
  }

  .cart-summary {
    align-items: center;
    text-align: center;
  }
}