/* =====================================
   CART STYLING (replace old cart CSS)
   ===================================== */

/* Outer cart container */
.cart-section {
  max-width: 1100px;
  margin: 2.5rem auto;
  padding: 0 5vw;
}

/* Card that wraps the table */
.cart-card {
  background: #ffffff;
  border-radius: 1.2rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* Table base */
.cart-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;              /* Prevents table from blowing wider than container */
}

/* Cells */
.cart-table th,
.cart-table td {
  padding: 0.75rem 0.6rem;
  font-size: 0.9rem;
  text-align: left;
  vertical-align: top;
  word-wrap: break-word;
  border-bottom: 1px solid #eee4f0;
}

.cart-table thead th {
  background: #f7f1f5;
  font-weight: 600;
  color: #3b3440;
}

/* Last row border clean-up */
.cart-table tbody tr:last-child td {
  border-bottom: none;
}

/* Column width guidance (desktop / default) */
.cart-col-item {
  width: 60%;
}
.cart-col-price {
  width: 15%;
}
.cart-col-qty {
  width: 25%;
  text-align: center;
}

/* Service cell content */
.cart-item p {
  margin: 0.15rem 0;
}

.cart-item-ref {
  font-weight: 600;
  color: #7d0a29;
}

.cart-item-desc {
  color: #615a67;
  font-size: 0.88rem;
}

/* Price column */
.cart-price {
  text-align: right;
}
.cart-price p {
  margin: 0.15rem 0;
}

/* Quantity column */
.cart-qty {
  text-align: center;
}

.qty-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  flex-wrap: nowrap;
}

.qty-control .select,
.qty-control input[type="text"] {
  width: 40px;
  padding: 0.2rem;
  font-size: 0.85rem;
  text-align: center;
}

/* +/- links styled as small round buttons */
.qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  border: 1px solid #d3c4d9;
  font-size: 0.85rem;
  text-decoration: none;
  color: #7d0a29;
  background: #fdf8fb;
}

/* Line total beneath qty */
.cart-line-total {
  margin-top: 0.25rem;
  font-size: 0.9rem;
}

/* Discount / totals area */
.cart-discount {
  text-align: right;
  padding-top: 0.75rem;
}

.cart-discount-row {
  margin-top: 0.35rem;
}

.cart-discount input.smallselect {
  max-width: 190px;
}

/* Legacy .userscarthead support (used in total row) */
.userscarthead {
  background: #f7f1f5;
  font-weight: 600;
  color: #3b3440;
}

/* Links inside cart */
.cart-section a {
  color: #7d0a29;
}
.cart-section a:hover {
  text-decoration: underline;
}

/* =====================================
   MOBILE CART TWEAKS
   ===================================== */

@media (max-width: 600px) {

  .cart-section {
    padding: 0 3vw;
  }

  .cart-card {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }

  .cart-table th,
  .cart-table td {
    padding: 0.5rem 0.3rem;
    font-size: 0.82rem;
  }

  /* Make Service column wide and readable */
  .cart-col-item {
    width: 60%;
  }

  .cart-col-price {
    width: 20%;
    text-align: right;
  }

  .cart-col-qty {
    width: 20%;
    text-align: center;
  }

  .cart-item-desc {
    font-size: 0.8rem;
  }

  .qty-control .select,
  .qty-control input[type="text"] {
    width: 36px;
    font-size: 0.78rem;
  }

  .cart-line-total {
    font-size: 0.8rem;
  }

  .cart-discount {
    text-align: left;
  }

  .cart-discount-row {
    text-align: left;
  }
}

/* Mobile: make quantity controls stack vertically and narrower */
@media (max-width: 600px) {

  /* Tweak column widths further */
  .cart-col-item {
    width: 65%;
  }

  .cart-col-price {
    width: 15%;
    text-align: right;
  }

  .cart-col-qty {
    width: 20%;
    text-align: center;
  }

  /* Stack - [input] + vertically */
  .qty-control {
    display: flex;
    flex-direction: column;   /* vertical layout */
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
  }

  /* Make the input a little narrower */
  .qty-control .select,
  .qty-control input[type="text"] {
    width: 32px;
    padding: 0.15rem;
    font-size: 0.78rem;
    text-align: center;
  }

  /* Slightly smaller +/- pills */
  .qty-btn {
    width: 1.2rem;
    height: 1.2rem;
    font-size: 0.8rem;
  }

  .cart-line-total {
    font-size: 0.8rem;
  }
}