/**
 * File: woo-cart.css
 * Purpose: Custom styling for the WooCommerce cart page
 * Usage: Targets elements within the Woo cart layout, coupon section, and price display
 * Dependencies: Assumes Divi theme with WooCommerce modules and cart shortcode compatibility
 *
 * Notes:
 * - Styles coupon inputs, quantity fields, and subtotal display
 * - Includes positioning for "Return to Shop" link
 * - Most button styles moved to `woo-buttons.css` for consistency across components
 * - Supports WooCommerce + Divi integration quirks
 *
 * Key Class Targets:
 * - `.return-to-shop` — positions the return link at top right
 * - `.woocommerce-cart td.product-price del/ins` — formats sale price display
 * - `.cart .coupon .input-text` — adjusts coupon input and hover behavior
 * - `.quantity input.qty` — applies shared input treatment
 *
 * TODO:
 * - If other modules use `.coupon` forms or quantity fields, consider moving those to `woo-forms.css`
 */


 /* -------------------------- */
/* ---- Scoped Variables ---- */
/* -------------------------- */

.woocommerce-cart {
    --woo-cart-form-input-border-color: var(--global-form-input-border-color);
    --woo-cart-form-input-border-hover-color: var(--global-form-input-border-hover-color);
    --woo-cart-regular-price-font-color: var(--global-regular-price-font-color);
    --woo-cart-sale-price-font-color: var(--global-sale-price-font-color);
    --woo-cart-item-border-color: var(--gray-medium);
}

/* -------------------------- */


.return-to-shop {
    position: relative;
    top: -65px;
    right: 10px;
    float: right;
}

.et_pb_wc_cart_products_0 .quantity input[name="coupon_code"].qty, 
.et_pb_wc_cart_products_0 table.cart td.actions .coupon .input-text {
    border-radius: 5px 0px 0px 5px!important;
    overflow: hidden;
    border-width: 2px 1px !important;
    border-color: var(--woo-cart-form-input-border-color) !important;
    padding:2px;
    transition: all 500ms ease;
}

.et_pb_wc_cart_products_0 .quantity input.qty 
 {
    transition: all 500ms ease;
}

.et_pb_wc_cart_products_0 .quantity input:hover.qty, 
.et_pb_wc_cart_products_0 table.cart td.actions .coupon:hover .input-text {
    overflow: hidden;
    border-width: 2px 1px !important;
    border-color: var(--woo-cart-form-input-border-hover-color) !important;
}

.woocommerce-cart td.product-price del {
  color: var(--woo-cart-regular-price-font-color);
  margin-right: 5px;
}
.woocommerce-cart td.product-price ins {
  color: var(--woo-cart-sale-price-font-color);
  text-decoration: none;
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
    width: auto;
    margin-right: 2px;
}

.product-subtotal span.woocommerce-Price-amount.amount {
    font-weight: 700;
}

.woocommerce #content .quantity, 
.woocommerce-page #content .quantity, 
.woocommerce-page .quantity, 
.woocommerce .quantity {
    width: 100%;

}

.woocommerce #content table.cart td.actions, 
.woocommerce table.cart td.actions, 
.woocommerce-page #content table.cart td.actions, 
.woocommerce-page table.cart td.actions
{
  padding-top: 1em !important;
}

/* === WooCommerce Cart Mobile Layout === */
@media all and (max-width: 768px) {
  tr.woocommerce-cart-form__cart-item.cart_item {
    display: grid !important;
    grid-template-columns: 100px auto;
    grid-template-rows: auto auto auto auto auto;
    padding: 5px 0 15px 0 !important;
    border-bottom: 1px solid var(--woo-cart-item-border-color) !important;
  }

  tr.woocommerce-cart-form__cart-item.cart_item td.product-remove {
    display: grid!important;
    grid-column-start: 1;
    grid-column-end: 3;
    padding:5px!important;
  }

  tr.woocommerce-cart-form__cart-item.cart_item td.product-quantity,
  tr.woocommerce-cart-form__cart-item.cart_item td.product-price,
  tr.woocommerce-cart-form__cart-item.cart_item td.product-name {
    display: flex !important;
    grid-column: 2 / 3;
    padding: 5px !important;
  }

  tr.woocommerce-cart-form__cart-item.cart_item td.product-name {
    grid-row: 2 / 3;
  }
  tr.woocommerce-cart-form__cart-item.cart_item td.product-price {
    grid-row: 3 / 4;
  }
  tr.woocommerce-cart-form__cart-item.cart_item td.product-quantity {
    grid-row: 4 / 5;
  }

  tr.woocommerce-cart-form__cart-item.cart_item td.product-subtotal {
    display: grid;
    grid-column: 1 / 3;
    grid-row: 5 / 5;
    padding: 5px !important;
  }

  tr.woocommerce-cart-form__cart-item.cart_item td.product-thumbnail {
    display: grid !important;
    grid-column: 1 / 2;
    grid-row: 2 / 4;
    padding: 5px !important;
  }

  .et_pb_wc_cart_products_0 a.remove {
    margin: 0 0 0 auto;
  }

  .et_pb_wc_cart_products.et_pb_row_layout_vertical table.shop_table_responsive tr:nth-child(2n):not(:last-child) td,
  .woocommerce table.shop_table_responsive tr:nth-child(2n) td,
  .woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
    background-color: transparent;
  }

  .et_pb_wc_cart_products.et_pb_row_layout_vertical table.shop_table_responsive tr td.product-name:before,
  .et_pb_wc_cart_products.et_pb_row_layout_vertical table.shop_table_responsive tr td.product-price:before,
  .et_pb_wc_cart_products.et_pb_row_layout_vertical table.shop_table_responsive tr td.product-thumbnail:before
  {
    display:none;
  }

  input#coupon_code {
    border-radius: 0 !important;
  }

  form#woocommerce-checkout-form-coupon {
    display: flex !important;
    justify-content: space-between;
    padding: 5px 10px;
  }

  .et_pb_with_border.et_pb_module.et_pb_wc_cart_notice {
    display: none;
  }

  .woocommerce-additional-fields h3 {
    font-size: 16px !important;
  }

  .et_pb_column .et_pb_module {
    margin-bottom: 0px;
  }
}