/**
 * Katanyu Mall - Cart Page Stylesheet
 * Aligned 100% with Checkout Design System
 * High Performance, Mobile-First, Core Web Vitals Optimized
 */

/* ==========================================================================
   1. Cart Container & Two-Column Layout (Matching Checkout 58% / 38%)
   ========================================================================== */

.woocommerce-cart {
  box-sizing: border-box !important;
  width: 100% !important;
}

.wc-block-components-main {
  padding: 0 !important;
}

.wp-block-woocommerce-cart,
.woocommerce-cart-form {
  box-sizing: border-box !important;
  width: 100% !important;
  margin-top: 16px !important;
  margin-bottom: 40px !important;
}

/* Block Cart Layout Wrapper */
.wp-block-woocommerce-filled-cart-block,
.wc-block-components-sidebar-layout,
.woocommerce-cart .woocommerce {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 32px !important;
  width: 100% !important;
}

/* Left Column: Cart Items (58% width matching #customer_details) */
.wp-block-woocommerce-cart-items-block,
.wc-block-cart__main,
.woocommerce-cart-form {
  flex: 1 1 58% !important;
  width: 58% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Right Column: Cart Totals Sidebar (38% width matching #order_review) */
.wp-block-woocommerce-cart-totals-block,
.wc-block-cart__sidebar,
.cart-collaterals {
  flex: 1 1 38% !important;
  width: 38% !important;
  min-width: 300px !important;
  max-width: 100% !important;
  position: sticky !important;
  top: 100px !important;
}

/* ==========================================================================
   2. Cart Cards & Table Styling (Matching Checkout Cards)
   ========================================================================== */

/* Main Items Card Container */
.wp-block-woocommerce-cart-line-items-block,
.wc-block-cart-items,
.woocommerce-cart-form table.shop_table {
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  margin-bottom: 24px !important;
}

/* Table Header */
.wc-block-cart-items__header,
.woocommerce-cart-form table.shop_table th {
  background-color: #f8f9fa !important;
  color: #333333 !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  padding: 16px 20px !important;
  text-align: left !important;
  border-bottom: 1px solid #eaeaea !important;
}

.wc-block-cart-items__header th , .wc-block-cart-items td {
  padding: 16px 20px !important;
}

.wc-block-components-panel__content {
	width: 100% !important;
}

/* Table Rows */
.wc-block-cart-items__row,
.woocommerce-cart-form table.shop_table td {
  border-bottom: 1px solid #f0f0f0 !important;
  vertical-align: middle !important;
  font-size: 15px !important;
  color: #222222 !important;
}

.wc-block-cart-items__row:last-child,
.woocommerce-cart-form table.shop_table tr:last-child td {
  border-bottom: none !important;
}

/* Product Thumbnail */
.wc-block-cart-item__image img,
.woocommerce-cart-form table.shop_table td.product-thumbnail img {
  width: 72px !important;
  height: 72px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Product Title */
.wc-block-cart-item__title,
.wc-block-components-product-name,
.woocommerce-cart-form table.shop_table td.product-name a {
  color: #111111 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.wc-block-cart-item__title:hover,
.wc-block-components-product-name:hover,
.woocommerce-cart-form table.shop_table td.product-name a:hover {
  color: var(--wp--preset--color--primary, #43593b) !important;
}

/* Product Price & Total */
.wc-block-cart-item__price,
.wc-block-components-product-price,
.woocommerce-cart-form table.shop_table td.product-price,
.woocommerce-cart-form table.shop_table td.product-subtotal {
  font-weight: 700 !important;
  color: var(--wp--preset--color--primary, #43593b) !important;
  font-size: 16px !important;
}

/* Remove Item Button */
.wc-block-cart-item__remove-link,
.woocommerce-cart-form table.shop_table td.product-remove a.remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 31px !important;
  height: 31px !important;
  border-radius: 5px !important;
  color: #e53935 !important;
  background-color: #fdeded !important;
  text-decoration: none !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transition:
    background-color 0.2s ease,
    transform 0.15s ease !important;
}

.wc-block-cart-item__remove-link:hover,
.woocommerce-cart-form table.shop_table td.product-remove a.remove:hover {
  background-color: #e53935 !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
}

/* Quantity Input Controls */
.wc-block-cart-item__quantity input,
.wc-block-components-quantity-selector input,
.woocommerce-cart-form .quantity input.qty {
  width: 64px !important;
  height: 26px !important;
  text-align: center !important;
  border: 1.5px solid #dcdcdc !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #111111 !important;
  background-color: #ffffff !important;
  outline: none !important;
}

.wc-block-components-quantity-selector__input {
  padding: 0 !important;
}

.wc-block-cart-item__quantity input:focus,
.woocommerce-cart-form .quantity input.qty:focus {
  border-color: var(--wp--preset--color--primary, #43593b) !important;
  box-shadow: 0 0 0 3px rgba(67, 89, 59, 0.12) !important;
}

/* ==========================================================================
   3. Cart Totals & Summary Sidebar (Matching Checkout Order Review)
   ========================================================================== */

.cart-collaterals .cart_totals,
.wp-block-woocommerce-cart-order-summary-block,
.wc-block-cart__totals {
  background: #ffffff !important;
  border-radius: 18px !important;
  padding: 24px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  box-sizing: border-box !important;
}

/* Heading Typography */
.cart-collaterals .cart_totals h2,
.wc-block-cart__totals-title,
.wp-block-woocommerce-cart-order-summary-heading-block h2,
.wp-block-woocommerce-cart-order-summary-heading-block {
  font-family: inherit !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: var(--wp--preset--color--primary, #43593b) !important;
  margin: 0 0 20px 0 !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid #f0f0f0 !important;
}

/* Summary Row Items */
.wc-block-components-totals-item,
.cart-collaterals table.shop_table tr th,
.cart-collaterals table.shop_table tr td {
  padding: 12px 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
  font-size: 15px !important;
  color: #333333 !important;
}

.wc-block-components-totals-footer-item,
.cart-collaterals table.shop_table tr.order-total th,
.cart-collaterals table.shop_table tr.order-total td {
  border-bottom: none !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--wp--preset--color--primary, #43593b) !important;
  padding-top: 16px !important;
}

/* ==========================================================================
   Primary CTA Submit Button (Proceed to Checkout / Place Order)
   ========================================================================== */
.wc-proceed-to-checkout a.checkout-button,
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block a,
.wp-block-woocommerce-proceed-to-checkout-block button,
.wc-block-components-button,
.wc-block-cart__submit-container button,
.woocommerce-cart .wc-proceed-to-checkout a,
.woocommerce-cart input.checkout-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 16px 28px !important;
  background-color: var(--wp--preset--color--light-green, #82cf61) !important;
  color: #ffffff !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  border-radius: 60px !important;
  text-decoration: none !important;
  text-align: center !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(130, 207, 97, 0.35) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-sizing: border-box !important;
  letter-spacing: 0.3px !important;
}

.wc-proceed-to-checkout a.checkout-button:hover,
.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block a:hover,
.wp-block-woocommerce-proceed-to-checkout-block button:hover,
.wc-block-components-button:hover,
.wc-block-cart__submit-container button:hover,
.woocommerce-cart .wc-proceed-to-checkout a:hover,
.woocommerce-cart input.checkout-button:hover {
  background-color: var(--wp--preset--color--primary, #43593b) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(67, 89, 59, 0.35) !important;
}

.wc-proceed-to-checkout a.checkout-button:active,
.wc-block-cart__submit-button:active,
.wp-block-woocommerce-proceed-to-checkout-block button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(67, 89, 59, 0.25) !important;
}

/* ==========================================================================
   Secondary Action Buttons (Apply Coupon, Update Cart)
   ========================================================================== */
.woocommerce-cart-form .coupon button[name="apply_coupon"],
.woocommerce-cart-form .coupon input[name="apply_coupon"],
.coupon button,
.wc-block-components-totals-coupon__button,
.woocommerce-cart-form button[name="update_cart"],
.woocommerce-cart-form input[name="update_cart"],
.woocommerce-cart-form td.actions button.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 46px !important;
  padding: 0 24px !important;
  background-color: var(--wp--preset--color--primary, #43593b) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  border-radius: 50px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 3px 10px rgba(67, 89, 59, 0.2) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.woocommerce-cart-form .coupon button[name="apply_coupon"]:hover,
.woocommerce-cart-form .coupon input[name="apply_coupon"]:hover,
.coupon button:hover,
.wc-block-components-totals-coupon__button:hover,
.woocommerce-cart-form button[name="update_cart"]:hover:not(:disabled),
.woocommerce-cart-form input[name="update_cart"]:hover:not(:disabled),
.woocommerce-cart-form td.actions button.button:hover:not(:disabled) {
  background-color: var(--wp--preset--color--light-green, #82cf61) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 15px rgba(130, 207, 97, 0.35) !important;
}

.woocommerce-cart-form button[name="update_cart"]:disabled,
.woocommerce-cart-form input[name="update_cart"]:disabled,
.woocommerce-cart-form td.actions button.button:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
  background-color: #999999 !important;
}

/* ==========================================================================
   Secondary Ghost / Return Buttons (Return to Shop, Continue Shopping)
   ========================================================================== */
.return-to-shop a.button,
.wc-backward,
.wc-block-cart__empty-cart__button a,
.wp-block-woocommerce-empty-cart-block a.wc-block-components-button,
.woocommerce-cart .return-to-shop a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 28px !important;
  background-color: transparent !important;
  color: var(--wp--preset--color--primary, #43593b) !important;
  border: 2px solid var(--wp--preset--color--primary, #43593b) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.return-to-shop a.button:hover,
.wc-backward:hover,
.wc-block-cart__empty-cart__button a:hover,
.wp-block-woocommerce-empty-cart-block a.wc-block-components-button:hover,
.woocommerce-cart .return-to-shop a:hover {
  background-color: var(--wp--preset--color--primary, #43593b) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(67, 89, 59, 0.25) !important;
}

/* ==========================================================================
   4. Coupon Form Panel (Matching Checkout Coupon Box)
   ========================================================================== */

.wc-block-components-panel,
.woocommerce-cart-form .coupon {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
  background: #ffffff !important;
  border: 1px dashed rgba(67, 89, 59, 0.4) !important;
  border-radius: 16px !important;
  padding: 16px 20px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

.woocommerce-cart-form .coupon input[name="coupon_code"],
.wc-block-components-totals-coupon__input input {
  flex: 1 1 200px !important;
  height: 46px !important;
  border-radius: 50px !important;
  border: 1.5px solid #dcdcdc !important;
  padding: 0 18px !important;
  font-size: 15px !important;
  font-family: inherit !important;
  color: #111111 !important;
  background-color: #ffffff !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.woocommerce-cart-form .coupon input[name="coupon_code"]:focus,
.wc-block-components-totals-coupon__input input:focus {
  border-color: var(--wp--preset--color--primary, #43593b) !important;
  box-shadow: 0 0 0 3px rgba(67, 89, 59, 0.12) !important;
}

/* ==========================================================================
   5. Empty Cart Block
   ========================================================================== */

.wc-empty-cart-message,
.wp-block-woocommerce-empty-cart-block {
  text-align: center !important;
  padding: 60px 20px !important;
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  margin: 30px 0 !important;
}

/* ==========================================================================
   6. Responsive Mobile Breakpoints
   ========================================================================== */

@media (max-width: 992px) {
  .wp-block-woocommerce-filled-cart-block,
  .wc-block-components-sidebar-layout,
  .woocommerce-cart .woocommerce {
    flex-direction: column !important;
  }

  .wp-block-woocommerce-cart-items-block,
  .wc-block-cart__main,
  .woocommerce-cart-form,
  .wp-block-woocommerce-cart-totals-block,
  .wc-block-cart__sidebar,
  .cart-collaterals {
    flex: 1 1 100% !important;
    width: 100% !important;
    position: static !important;
  }
}