/* ==========================================================================
   webshop_theme — cart.css
   Overrides the ERPNext /cart page.
   Every selector is scoped to existing Frappe/Webshop classes and ids.
   Depends on design tokens in theme.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Page shell
   -------------------------------------------------------------------------- */
#page-cart {
  background-color: var(--bg-base) !important;
}

/* "Shopping Cart" heading */
#page-cart .shopping-cart-header {
  font-family: var(--font-heading) !important;
  font-size: var(--text-4xl) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.01em !important;
}


/* --------------------------------------------------------------------------
   2. Frappe card panels
      Both the left (items) and right (summary) columns use .frappe-card.
      webshop SCSS sets display: flex on it, we keep that and darken it.
   -------------------------------------------------------------------------- */
#page-cart .frappe-card {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-md) !important;
}


/* --------------------------------------------------------------------------
   3. Cart items panel — left column
   -------------------------------------------------------------------------- */

/* "Items" sub-heading */
#page-cart .cart-items-header {
  font-family: var(--font-heading) !important;
  font-size: var(--text-xl) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.01em !important;
  padding-bottom: var(--space-4) !important;
  border-bottom: 1px solid var(--border-subtle);
}

/* Error banner */
#cart-error {
  background-color: rgba(224, 82, 82, 0.08) !important;
  border: 1px solid rgba(224, 82, 82, 0.3) !important;
  border-radius: var(--radius-md) !important;
  color: #e05252 !important;
  font-size: var(--text-sm) !important;
}


/* --------------------------------------------------------------------------
   4. Cart table
      .cart-table > thead / tbody.cart-items / tfoot.cart-tax-items
   -------------------------------------------------------------------------- */
#page-cart .cart-table {
  color: var(--text-primary) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Column headers */
#page-cart .cart-table th {
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  border-color: var(--border-subtle) !important;
  border-top: none !important;
  padding: var(--space-3) var(--space-2) !important;
}

/* Data rows */
#page-cart .cart-table td {
  border-color: var(--border-subtle) !important;
  padding: var(--space-5) var(--space-2) !important;
  color: var(--text-primary) !important;
  vertical-align: middle !important;
}

/* Subtle row hover */
#page-cart .cart-table tbody tr {
  transition: background-color var(--duration-fast) var(--ease-default);
}

#page-cart .cart-table tbody tr:hover {
  background-color: var(--bg-elevated) !important;
}


/* --------------------------------------------------------------------------
   5. Cart item row contents
      .cart-item-image, .item-title, .item-subtitle, .item-rate,
      .item-subtotal, .sm-item-subtotal, .free-tag, notes textarea
   -------------------------------------------------------------------------- */

/* Thumbnail */
#page-cart .cart-item-image {
  width: 90px !important;
  min-width: 90px !important;
  flex-shrink: 0;
}

#page-cart .cart-item-image img {
  border-radius: var(--radius-md) !important;
  object-fit: contain;
  border: 1px solid var(--border-subtle) !important;
  background-color: var(--bg-elevated);
  max-height: 90px !important;
}

/* No-image placeholder */
.no-image-cart-item {
  background-color: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius-md) !important;
  height: 90px !important;
  font-size: var(--text-xl) !important;
}

/* Product name */
#page-cart .cart-items .item-title {
  font-family: var(--font-heading) !important;
  font-size: var(--text-base) !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  line-height: var(--leading-snug) !important;
  transition: color var(--transition-base);
}

#page-cart .cart-items .item-title:hover {
  color: var(--accent) !important;
}

/* Item code / variant subtitle */
#page-cart .cart-items .item-subtitle {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.04em !important;
}

#page-cart .cart-items .item-subtitle a {
  color: var(--accent) !important;
  transition: color var(--transition-base) !important;
}

#page-cart .cart-items .item-subtitle a:hover {
  color: var(--accent-light) !important;
}

/* Subtotal column value */
#page-cart .cart-items .item-subtotal {
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

/* Mobile-only subtotal */
#page-cart .cart-items .sm-item-subtotal {
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

/* Per-unit rate */
#page-cart .cart-items .item-rate {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  color: var(--text-muted) !important;
}

/* FREE badge */
#page-cart .cart-items .free-tag {
  background-color: rgba(111, 207, 151, 0.12) !important;
  color: #6fcf97 !important;
  border: 1px solid rgba(111, 207, 151, 0.3) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  padding: var(--space-1) var(--space-3) !important;
}

/* Notes textarea */
#page-cart .cart-items textarea {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  resize: none;
  width: 100% !important;
  transition: border-color var(--transition-base) !important;
}

#page-cart .cart-items textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-muted) !important;
  outline: none !important;
}

#page-cart .cart-items textarea::placeholder {
  color: var(--text-muted) !important;
}


/* --------------------------------------------------------------------------
   6. Quantity spinner
      .number-spinner > .input-group-prepend/.input-group-append > .cart-btn
                       > .cart-qty (input)
   -------------------------------------------------------------------------- */
#page-cart .number-spinner {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 36px;
  display: flex !important;
  align-items: stretch;
  min-width: 110px !important;
}

/* Decrement / Increment buttons */
#page-cart .cart-btn {
  background-color: var(--bg-elevated) !important;
  border: none !important;
  color: var(--text-secondary) !important;
  font-size: var(--text-lg) !important;
  font-weight: 300 !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: none !important;
  flex-shrink: 0;
  transition: background-color var(--duration-fast) var(--ease-default),
              color             var(--duration-fast) var(--ease-default);
}

#page-cart .cart-btn:hover:not(:disabled) {
  background-color: var(--accent-muted) !important;
  color: var(--accent) !important;
}

#page-cart .cart-btn:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed;
}

/* Quantity input */
#page-cart .cart-qty {
  background-color: var(--bg-surface) !important;
  border: none !important;
  border-left: 1px solid var(--border-default) !important;
  border-right: 1px solid var(--border-default) !important;
  border-radius: 0 !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  text-align: center !important;
  height: 36px !important;
  padding: 0 var(--space-2) !important;
  max-width: 56px !important;
  box-shadow: none !important;
}

#page-cart .cart-qty:focus {
  border-color: var(--accent) !important;
  box-shadow: none !important;
  outline: none !important;
  background-color: var(--bg-elevated) !important;
}

#page-cart .cart-qty:disabled {
  background-color: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
  opacity: 0.65 !important;
}


/* --------------------------------------------------------------------------
   7. Remove item button
      .remove-cart-item (circle) > .remove-cart-item-logo (SVG fill)
   -------------------------------------------------------------------------- */
#page-cart .remove-cart-item {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-muted) !important;
  width: 28px !important;
  height: 28px !important;
  cursor: pointer;
  transition: background-color var(--transition-base),
              border-color     var(--transition-base) !important;
}

#page-cart .remove-cart-item:hover {
  background-color: rgba(224, 82, 82, 0.1) !important;
  border-color: rgba(224, 82, 82, 0.5) !important;
}

#page-cart .remove-cart-item:hover .remove-cart-item-logo {
  fill: #e05252 !important;
}

#page-cart .remove-cart-item-logo {
  fill: var(--text-muted) !important;
  transition: fill var(--transition-base) !important;
}


/* --------------------------------------------------------------------------
   8. Cart table footer — totals row
      tfoot.cart-tax-items > tr > th.item-grand-total
   -------------------------------------------------------------------------- */
#page-cart .cart-tax-items {
  border-top: 1px solid var(--border-subtle) !important;
}

#page-cart .cart-tax-items .item-grand-total {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-secondary) !important;
  padding: var(--space-4) var(--space-2) !important;
  border-top: none !important;
}

/* The actual total value (.totals) */
#page-cart .cart-tax-items .item-grand-total.totals {
  font-family: var(--font-heading) !important;
  font-size: var(--text-xl) !important;
  color: var(--accent) !important;
  letter-spacing: -0.01em !important;
}


/* --------------------------------------------------------------------------
   9. Bottom action row — "Past Orders" / "Continue Shopping"
      .btn-primary-light used for these secondary actions
   -------------------------------------------------------------------------- */
#page-cart .btn-primary-light,
#page-cart .place-order-container .btn-primary-light {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-3) var(--space-5) !important;
  box-shadow: none !important;
  transition: border-color var(--transition-base),
              color         var(--transition-base),
              background-color var(--transition-base) !important;
}

#page-cart .btn-primary-light:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background-color: var(--accent-muted) !important;
}


/* --------------------------------------------------------------------------
   10. Terms & Conditions block
   -------------------------------------------------------------------------- */
#page-cart .t-and-c-container {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-xl) !important;
}

#page-cart .t-and-c-container h5 {
  font-family: var(--font-heading) !important;
  font-size: var(--text-lg) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin-bottom: var(--space-4) !important;
}

#page-cart .t-and-c-terms {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-secondary) !important;
  line-height: var(--leading-normal) !important;
}


/* --------------------------------------------------------------------------
   11. Right column — payment summary card
       .cart-payment-addresses > .frappe-card > .payment-summary + .place-order
   -------------------------------------------------------------------------- */

/* Override the right-side .frappe-card to be more elevated */
#page-cart .cart-payment-addresses > .frappe-card {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  position: sticky;
  top: 80px; /* clears sticky navbar */
}

#page-cart .cart-payment-addresses hr {
  border-color: var(--border-subtle) !important;
  margin: var(--space-4) 0 !important;
}

/* "Payment Summary" heading */
#page-cart .payment-summary h6 {
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  padding-bottom: var(--space-4) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  margin-bottom: 0 !important;
}

/* Summary table (taxes / net total rows) */
#page-cart .payment-summary .card,
#page-cart .payment-summary .card-body {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
}

#page-cart .payment-summary table {
  font-size: var(--text-sm) !important;
  color: var(--text-primary) !important;
}

#page-cart .payment-summary table td {
  padding: var(--space-2) 0 !important;
  border: none !important;
  line-height: var(--leading-normal) !important;
}

/* Row label (e.g. "Net Total", tax names) */
#page-cart .payment-summary .bill-label {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-muted) !important;
}

/* Row value */
#page-cart .payment-summary .bill-content {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
}

/* Grand Total — the big number */
#page-cart .payment-summary table.grand-total {
  border-top: 1px solid var(--border-default) !important;
  margin-top: var(--space-3) !important;
  padding-top: var(--space-3) !important;
}

#page-cart .payment-summary table.grand-total td {
  padding-top: var(--space-4) !important;
}

#page-cart .payment-summary table.grand-total .bill-content.net-total {
  font-family: var(--font-heading) !important;
  font-size: var(--text-2xl) !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  letter-spacing: -0.01em !important;
}

/* Grand Total label */
#page-cart .payment-summary table.grand-total .bill-content:not(.net-total) {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-secondary) !important;
}


/* --------------------------------------------------------------------------
   12. Coupon code input
   -------------------------------------------------------------------------- */
#page-cart .txtcoupon {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  transition: border-color var(--transition-base) !important;
}

#page-cart .txtcoupon:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-muted) !important;
  outline: none !important;
}

#page-cart .txtcoupon::placeholder {
  color: var(--text-muted) !important;
}

#page-cart .bt-coupon {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-sm) !important;
  transition: border-color var(--transition-base),
              color         var(--transition-base),
              background-color var(--transition-base) !important;
}

#page-cart .bt-coupon:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background-color: var(--accent-muted) !important;
}


/* --------------------------------------------------------------------------
   13. Place Order / Request for Quote CTA
       .btn-place-order, .btn-request-for-quotation
       Both are .btn.btn-primary — we override btn-primary inside #page-cart.
   -------------------------------------------------------------------------- */
#page-cart .place-order .card,
#page-cart .place-order .card-body {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
}

#page-cart .btn-place-order,
#page-cart .btn-request-for-quotation {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background-color: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: var(--text-inverse) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-4) var(--space-6) !important;
  width: 100% !important;
  margin-top: var(--space-5) !important;
  box-shadow: none !important;
  transition: background-color var(--transition-base),
              box-shadow      var(--transition-base),
              transform       var(--duration-fast) var(--ease-out) !important;
}

#page-cart .btn-place-order:hover:not(:disabled),
#page-cart .btn-request-for-quotation:hover:not(:disabled) {
  background-color: var(--accent-light) !important;
  border-color: var(--accent-light) !important;
  box-shadow: 0 6px 28px rgba(201, 168, 76, 0.4) !important;
  transform: translateY(-2px);
  color: var(--text-inverse) !important;
}

#page-cart .btn-place-order:active,
#page-cart .btn-request-for-quotation:active {
  background-color: var(--accent-dark) !important;
  transform: translateY(0) !important;
  box-shadow: none !important;
}

#page-cart .btn-place-order:disabled,
#page-cart .btn-request-for-quotation:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed;
  transform: none !important;
}


/* --------------------------------------------------------------------------
   14. Address cards
       .address-card, .btn-change-address, .btn-new-address
       .address-header
   -------------------------------------------------------------------------- */
#page-cart .address-card {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-lg) !important;
  transition: border-color var(--transition-base) !important;
}

#page-cart .address-card.active {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-accent) !important;
}

#page-cart .address-card .card-body {
  background-color: transparent !important;
  border: none !important;
}

#page-cart .address-card .card-title {
  font-family: var(--font-heading) !important;
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin-bottom: var(--space-2) !important;
}

#page-cart .address-card .card-text {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-secondary) !important;
  line-height: var(--leading-normal) !important;
}

#page-cart .address-card .card-link {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  color: var(--accent) !important;
  letter-spacing: 0.06em !important;
  transition: color var(--transition-base) !important;
}

#page-cart .address-card .card-link:hover {
  color: var(--accent-light) !important;
}

#page-cart .address-card .card-link svg use {
  stroke: var(--accent) !important;
}

/* "Change" button on active address */
.btn-change-address {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  background-color: transparent !important;
  border: 1px solid var(--border-accent) !important;
  color: var(--accent) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-1) var(--space-3) !important;
  box-shadow: none !important;
  transition: background-color var(--transition-base),
              border-color     var(--transition-base) !important;
}

.btn-change-address:hover {
  background-color: var(--accent-muted) !important;
  border-color: var(--accent) !important;
  color: var(--accent-light) !important;
}

/* Address section heading ("Shipping Address") */
.address-header h6 {
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin-bottom: 0 !important;
}

/* "Add a new address" link */
.btn-new-address,
.btn-new-address:hover,
.btn-change-address:hover {
  color: var(--accent) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  text-decoration: none;
  transition: color var(--transition-base) !important;
}

.btn-new-address:hover {
  color: var(--accent-light) !important;
}

/* Address card in modal/dialog */
.modal .address-card .card-body {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
}

/* Address picker card check icon */
#page-cart .address-card .check {
  color: var(--accent) !important;
}

/* Same-billing checkbox label */
#page-cart .checkbox .label-area {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-secondary) !important;
}

#page-cart .checkbox input[type="checkbox"] {
  accent-color: var(--accent);
}


/* --------------------------------------------------------------------------
   15. Empty cart state
   -------------------------------------------------------------------------- */
.cart-empty.frappe-card {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-xl) !important;
}

.cart-empty-message {
  font-family: var(--font-heading) !important;
  font-size: var(--text-2xl) !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
}

.cart-empty .btn-outline-primary {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background-color: transparent !important;
  border: 1px solid var(--border-accent) !important;
  color: var(--accent) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-3) var(--space-6) !important;
  transition: background-color var(--transition-base),
              border-color     var(--transition-base),
              color            var(--transition-base) !important;
}

.cart-empty .btn-outline-primary:hover {
  background-color: var(--accent-muted) !important;
  border-color: var(--accent) !important;
  color: var(--accent-light) !important;
}


/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  /* column-sm-view hides subtotal/action column on mobile — keep that */
  #page-cart .column-sm-view {
    display: none !important;
  }

  /* Stack cart items + summary vertically */
  #page-cart .row > [class*="col-md-8"],
  #page-cart .row > [class*="col-md-4"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  #page-cart .cart-payment-addresses {
    margin-top: var(--space-6) !important;
  }
}

@media (max-width: 768px) {
  #page-cart .shopping-cart-header {
    font-size: var(--text-2xl) !important;
  }

  #page-cart .cart-payment-addresses > .frappe-card {
    position: static;
  }

  #page-cart .number-spinner {
    min-width: 90px !important;
  }

  #page-cart .cart-item-image {
    width: 64px !important;
    min-width: 64px !important;
  }

  #page-cart .cart-table th,
  #page-cart .cart-table td {
    padding: var(--space-3) var(--space-2) !important;
    font-size: var(--text-sm) !important;
  }
}

@media (max-width: 480px) {
  #page-cart .shopping-cart-header {
    font-size: var(--text-xl) !important;
  }

  #page-cart .cart-item-image {
    width: 52px !important;
    min-width: 52px !important;
  }

  #page-cart .btn-place-order {
    width: 100% !important;
  }
}