/**
 * Shopping Cart Styling
 * - Remove button as icon-only
 * - Totals alignment
 * - Action buttons styling
 */

/* Cart action buttons layout */
.commerce-cart .form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 1rem;
}

/* Update cart button - outline style */
.commerce-cart input[value="Update cart"] {
  background-color: transparent !important;
  border: 2px solid rgb(20, 83, 45) !important;
  color: rgb(20, 83, 45) !important;
}

.commerce-cart input[value="Update cart"]:hover {
  background-color: rgba(20, 83, 45, 0.1) !important;
}

/* Dark mode */
.dark .commerce-cart input[value="Update cart"] {
  border-color: rgb(34, 197, 94) !important;
  color: rgb(34, 197, 94) !important;
}

.dark .commerce-cart input[value="Update cart"]:hover {
  background-color: rgba(34, 197, 94, 0.1) !important;
}

/* Checkout button stays darker (default primary color) */

/* Remove button — icon only (trash). The control is an <input type="submit">,
   so the icon is painted via mask-image and the "Remove" value text is hidden
   visually while remaining the accessible name. */
.commerce-cart input.delete-order-item[value="Remove"],
.commerce-cart input[name^="delete-order-item"] {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: 0.375rem;
  box-shadow: none;
  background-color: rgb(239, 68, 68);
  -webkit-mask: url("../assets/icons/trash.svg") no-repeat center / 1.25rem 1.25rem;
  mask: url("../assets/icons/trash.svg") no-repeat center / 1.25rem 1.25rem;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  transition: background-color 0.2s;
}

.commerce-cart input.delete-order-item[value="Remove"]:hover,
.commerce-cart input[name^="delete-order-item"]:hover {
  background-color: rgb(220, 38, 38);
}

/* Dark mode */
.dark .commerce-cart input.delete-order-item[value="Remove"],
.dark .commerce-cart input[name^="delete-order-item"] {
  background-color: rgb(248, 113, 113);
}

.dark .commerce-cart input.delete-order-item[value="Remove"]:hover,
.dark .commerce-cart input[name^="delete-order-item"]:hover {
  background-color: rgb(239, 68, 68);
}

/* Table alignment - right-align TOTAL and ACTION columns */
.commerce-cart table th:nth-last-child(1),
.commerce-cart table th:nth-last-child(2),
.commerce-cart table td:nth-last-child(1),
.commerce-cart table td:nth-last-child(2) {
  text-align: right;
}

/* Totals section alignment */
.commerce-cart .cart-footer-in-table,
.commerce-cart .view-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 1rem;
  padding-right: 1rem;
}

.commerce-cart .order-total-line {
  display: flex;
  justify-content: flex-end;
  gap: 2rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.commerce-cart .order-total-line__total {
  font-weight: 700;
  font-size: 1rem;
  border-top: 1px solid rgba(128, 128, 128, 0.3);
  padding-top: 0.75rem;
  margin-top: 0.25rem;
}

.commerce-cart .order-total-line-label {
  font-weight: 600;
}

.commerce-cart .order-total-line-value {
  font-weight: 600;
  text-align: right;
}

/* ==========================================================================
   Mobile (<= 767px)
   ========================================================================== */

@media (max-width: 767px) {
  /* Coupon note and totals stack full width instead of sitting side by side. */
  .commerce-cart .ks-cart-summary-split > * {
    width: 100%;
  }

  /* Each totals line spans full width: label left, value right. */
  .commerce-cart .order-total-line {
    justify-content: space-between;
  }

  /* Reflow the item table into stacked cards; removes the horizontal scroll. */
  .commerce-cart .overflow-x-auto {
    overflow-x: visible;
  }

  .commerce-cart table,
  .commerce-cart caption,
  .commerce-cart tbody,
  .commerce-cart tbody tr,
  .commerce-cart tbody td {
    display: block;
    width: 100%;
  }

  .commerce-cart thead {
    display: none;
  }

  .commerce-cart tbody tr {
    border: 1px solid var(--ks-color-border-subtle);
    border-radius: var(--ks-radius-md);
    padding: var(--ks-space-3);
    margin-bottom: var(--ks-space-4);
  }

  .commerce-cart tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--ks-space-4);
    text-align: right;
    padding: var(--ks-space-2) 0;
  }

  /* Column label per cell, taken from the header via data-th. */
  .commerce-cart tbody td::before {
    content: attr(data-th);
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    color: var(--ks-color-text-muted);
    white-space: nowrap;
  }

  /* Image and event-title cells: full width, left aligned, no label prefix.
     td:first-child is the event image, td:nth-child(2) is the merged title +
     date + time + venue column (see views.view.commerce_cart_form columns). */
  .commerce-cart tbody td:first-child,
  .commerce-cart tbody td:nth-child(2) {
    display: block;
    text-align: left;
  }

  .commerce-cart tbody td:first-child::before,
  .commerce-cart tbody td:nth-child(2)::before {
    content: none;
  }
}