/**
*   Name:       Nolix Cart / Checkout Restyle
*   Version:    1.0
*   For:        Nolix.ir — Flatsome Child Theme (WooCommerce 10.x, classic cart)
*   Source:     design_handoff_nolix_cart / NOX-Cart.html
*   Scope:      Styles only. No markup/structure changes to WooCommerce.
*               Targets the classic shortcode cart (table.shop_table.cart)
*               + Flatsome two-column layout (col large-7 / cart-collaterals large-5).
*   Notes:      The NOX header pill and the 1-2-3 checkout step indicator are
*               already rendered by header.php — not duplicated here.
**/

/* =========================================================
   Cart-local design values (mirror NOX-Cart.html reference)
   Fall back to the shared --nolix-* tokens where they match.
   ========================================================= */
body.woocommerce-cart,
body.woocommerce-checkout {
    --cart-green:        var(--nolix-brand-accent, #5EAC12);
    --cart-green-bright: #66BE0F;
    --cart-green-deep:   var(--nolix-brand-primary, #1D3A01);
    --cart-line:         #ECECEC;
    --cart-paper:        #FBFBFB;
    --cart-card-radius:  26px;
    --cart-card-shadow:  0 8px 60px -5px rgba(0, 0, 0, .12);
}

/* =========================================================
   1) The background — soft branded backdrop + two green halos
      (#wrapper is transparent, so this shows through)
   ========================================================= */
body.woocommerce-cart,
body.woocommerce-checkout {
    background:
        radial-gradient(60% 55% at 88% -8%, rgba(94, 172, 18, .10), transparent 60%),
        radial-gradient(50% 50% at 2% 4%,  rgba(29, 58, 1, .06),  transparent 55%),
        #eef1ec !important;
}

/* Keep intermediate wrappers transparent so the backdrop is visible */
body.woocommerce-cart #wrapper,
body.woocommerce-cart #main,
body.woocommerce-cart #content,
body.woocommerce-checkout #wrapper,
body.woocommerce-checkout #main,
body.woocommerce-checkout #content {
    background: transparent !important;
}

/* Drop Flatsome's vertical divider between the two columns —
   the white cards already separate the content visually. */
body.woocommerce-cart .woocommerce.row-divided > .col,
body.woocommerce-cart .row-divided > .col + .col {
    border-right: 0 !important;
    border-left: 0 !important;
}

/* Add breathing room above the columns */
body.woocommerce-cart .woocommerce.row {
    padding-top: 8px;
}

/* ---- Stacked layout: full-width cart on top, totals below ----
   The two Flatsome columns (large-7 / large-5) are forced to 100% so they
   stack. The cart gets the full width (long title now fits in 2-3 lines).
   The related-products block is moved to the very bottom by JS (see
   override_functions.php) so the totals sit directly under the cart. */
body.woocommerce-cart .woocommerce.row {
    display: flex;
    flex-direction: column;
}
body.woocommerce-cart .woocommerce.row > .col.large-7,
body.woocommerce-cart .woocommerce.row > .cart-collaterals {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}
/* Totals card: a comfortably wide, centered card under the cart — wider than
   before for balance, but not edge-to-edge (which would leave the summary rows
   stretched/empty). Centered = symmetric. Goes full-width on mobile. */
body.woocommerce-cart .cart-collaterals .cart_totals {
    max-width: 820px;
    margin: 0 auto;
}
body.woocommerce-cart .cart-collaterals .cart_totals h2 {
    text-align: start;
}
/* Related/cross-sells moved to the bottom — give it top spacing */
body.woocommerce-cart .woocommerce.row > .cross-sells {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    margin-top: 18px;
}

/* =========================================================
   2) Cart table → white rounded card
   ========================================================= */
body.woocommerce-cart table.shop_table.cart {
    background: #fff;
    border: 0;
    border-radius: var(--cart-card-radius);
    box-shadow: var(--cart-card-shadow);
    padding: 6px 26px 18px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

body.woocommerce-cart table.shop_table.cart thead th {
    font-size: 14px;
    font-weight: 600;
    color: #8a8a8a;
    border-bottom: 1px solid var(--cart-line);
    padding: 20px 8px 14px;
    background: transparent;
}
body.woocommerce-cart table.shop_table.cart thead th.product-price {
    color: var(--cart-green);
}

body.woocommerce-cart table.shop_table.cart td {
    border-top: 1px solid var(--cart-line);
    padding: 20px 8px;
    vertical-align: middle;
    background: transparent;
}
body.woocommerce-cart table.shop_table.cart tbody tr:first-child td {
    border-top: 0;
}

/* Column widths (auto layout). Cart is now full-width, so give the long
   title a wide column → it fits in ~2-3 lines instead of a tall stack. */
body.woocommerce-cart table.shop_table.cart th.product-remove,
body.woocommerce-cart table.shop_table.cart td.product-remove { width: 46px; }
body.woocommerce-cart table.shop_table.cart th.product-thumbnail,
body.woocommerce-cart table.shop_table.cart td.product-thumbnail { width: 116px; min-width: 116px; }
body.woocommerce-cart table.shop_table.cart th.product-name,
body.woocommerce-cart table.shop_table.cart td.product-name { width: 46%; }
body.woocommerce-cart table.shop_table.cart th.product-price,
body.woocommerce-cart table.shop_table.cart td.product-price,
body.woocommerce-cart table.shop_table.cart th.product-subtotal,
body.woocommerce-cart table.shop_table.cart td.product-subtotal {
    white-space: nowrap;
    font-size: 13.5px;
}
body.woocommerce-cart td.product-name {
    font-size: 14px;
    line-height: 1.85;
    white-space: normal;
    padding-inline-start: 16px; /* gap so the title never touches the thumbnail */
}

/* Product thumbnail — soft rounded tile like the reference (larger) */
body.woocommerce-cart td.product-thumbnail {
    text-align: center;
}
body.woocommerce-cart td.product-thumbnail img {
    width: 96px !important;
    height: 96px !important;
    max-width: 96px;
    object-fit: contain;
    border-radius: 18px;
    background: #f5f6f3;
    padding: 4px;
    margin: 0 auto;
    display: inline-block;
}

/* Product title */
body.woocommerce-cart td.product-name a {
    color: #2a2a2a;
    font-weight: 500;
    line-height: 1.85;
}
body.woocommerce-cart td.product-name a:hover {
    color: var(--cart-green-deep);
}

/* Prices in cart use brand-deep green */
body.woocommerce-cart td.product-price,
body.woocommerce-cart td.product-subtotal {
    color: var(--cart-green-deep);
    font-weight: 700;
}

/* =========================================================
   3) Quantity stepper — green pill (Flatsome ux-quantity)
   ========================================================= */
body.woocommerce-cart .quantity {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid rgba(94, 172, 18, .35);
    box-shadow: 0 2px 8px rgba(94, 172, 18, .10);
}
/* Ghost buttons (override the global brand-fill from nolix-tokens.css,
   which is !important — so these need !important too). Light, not bold. */
body.woocommerce-cart .quantity input.ux-quantity__button {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: transparent !important;
    color: var(--cart-green) !important;
    font-weight: 500 !important;
    font-size: 17px;
    line-height: 1;
    border: 0 !important;
    box-shadow: none !important;
    transition: background .15s, color .15s;
}
body.woocommerce-cart .quantity input.ux-quantity__button:hover {
    background: rgba(94, 172, 18, .12) !important;
    color: var(--cart-green-deep) !important;
}
body.woocommerce-cart .quantity input.qty {
    width: 38px;
    border: 0 !important;
    background: transparent !important;
    color: var(--cart-green-deep);
    font-weight: 600;
    font-size: 15px;
    box-shadow: none !important;
}

/* Remove button → soft circle with a clean thin × icon (hide the heavy glyph) */
body.woocommerce-cart td.product-remove a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f4f4f4 no-repeat center;
    background-size: 14px 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0;
    transition: .18s;
}
body.woocommerce-cart td.product-remove a.remove:hover {
    background-color: #fbe8e6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9534f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

/* =========================================================
   4) Cart footer actions (coupon + update + continue)
   ========================================================= */
body.woocommerce-cart .cart .actions {
    padding-top: 16px;
}
body.woocommerce-cart .cart .actions .coupon input#coupon_code {
    border: 1.5px solid var(--cart-line);
    border-radius: 10px;
    padding: 10px 14px;
    background: #fff;
    box-shadow: none;
}
body.woocommerce-cart .cart .actions .coupon input#coupon_code:focus {
    border-color: var(--cart-green);
}
/* Coupon "apply" + "update cart" → soft outline buttons (not loud green) */
body.woocommerce-cart .cart .actions .coupon button,
body.woocommerce-cart .cart .actions button[name="update_cart"] {
    background: transparent !important;
    color: #5a5a5a !important;
    border: 1.5px solid var(--cart-line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
body.woocommerce-cart .cart .actions .coupon button:hover,
body.woocommerce-cart .cart .actions button[name="update_cart"]:hover {
    border-color: var(--cart-green) !important;
    color: var(--cart-green-deep) !important;
    background: rgba(94, 172, 18, .05) !important;
}

/* =========================================================
   5) Totals box → white rounded card
   ========================================================= */
body.woocommerce-cart .cart_totals {
    background: #fff;
    border-radius: var(--cart-card-radius);
    box-shadow: var(--cart-card-shadow);
    padding: 8px 26px 26px;
}
body.woocommerce-cart .cart_totals h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--cart-green-deep);
    padding: 18px 0;
    margin: 0;
    border-bottom: 1px solid var(--cart-line);
}
body.woocommerce-cart .cart_totals table {
    border: 0;
    margin: 0;
}
body.woocommerce-cart .cart_totals table tr {
    border: 0;
}
body.woocommerce-cart .cart_totals table th,
body.woocommerce-cart .cart_totals table td {
    border: 0;
    border-top: 1px solid #f3f3f3;
    padding: 16px 0;
    background: transparent;
    color: #5a5a5a;
    font-size: 14px;
}
body.woocommerce-cart .cart_totals tr.cart-subtotal th {
    border-top: 0;
}
/* Grand total row — emphasised */
body.woocommerce-cart .cart_totals tr.order-total th {
    color: var(--nolix-ink, #1E1E1E);
    font-size: 15px;
    font-weight: 700;
}
body.woocommerce-cart .cart_totals tr.order-total td,
body.woocommerce-cart .cart_totals tr.order-total .amount {
    color: var(--cart-green-deep) !important;
    font-weight: 700;
    font-size: 18px;
}

/* =========================================================
   6) Shipping methods → green selectable cards + green radio
   ========================================================= */
body.woocommerce-cart #shipping_method li,
body.woocommerce-cart .woocommerce-shipping-methods li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    margin: 0 0 10px;
    border: 1px solid var(--cart-line);
    border-radius: 14px;
    cursor: pointer;
    transition: .16s;
    list-style: none;
}
body.woocommerce-cart #shipping_method li:hover {
    border-color: #cbd6bd;
    background: #fafbf8;
}
/* Selected state (modern :has) */
body.woocommerce-cart #shipping_method li:has(input.shipping_method:checked) {
    border-color: var(--cart-green);
    background: rgba(94, 172, 18, .07);
}
/* The radio itself → green */
body.woocommerce-cart input.shipping_method {
    accent-color: var(--cart-green);
    width: 18px;
    height: 18px;
    margin: 0;
    flex: none;
    cursor: pointer;
}
body.woocommerce-cart label.shipping__list_label {
    flex: 1;
    margin: 0;
    color: #3a3a3a;
    font-size: 13.5px;
    cursor: pointer;
}
/* Shipping cost / free amount accent */
body.woocommerce-cart .woocommerce-shipping-methods .amount,
body.woocommerce-cart #shipping_method .amount {
    color: var(--cart-green-deep);
    font-weight: 700;
}

/* =========================================================
   7) The checkout button — green instead of Flatsome blue
   ========================================================= */
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.woocommerce .checkout-button,
body.woocommerce a.button.alt,
body.woocommerce button.button.alt,
body.woocommerce-checkout #place_order {
    background: var(--cart-green) !important;
    border-color: var(--cart-green) !important;
    color: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 22px rgba(94, 172, 18, .30) !important;
    font-weight: 700;
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    padding: 16px;
    font-size: 16px;
    text-align: center;
}
body.woocommerce .checkout-button:hover,
body.woocommerce a.button.alt:hover,
body.woocommerce button.button.alt:hover,
body.woocommerce-checkout #place_order:hover {
    background: var(--cart-green-bright) !important;
    border-color: var(--cart-green-bright) !important;
}

/* =========================================================
   8) Responsive
   ========================================================= */
@media (max-width: 849px) {
    body.woocommerce-cart table.shop_table.cart {
        padding: 6px 14px 12px;
    }
    body.woocommerce-cart .cart_totals {
        padding: 8px 18px 22px;
        margin-top: 22px;
    }
}

/* ---- Mobile: collapse the cart table into ONE white card (like desktop),
   with each product as a divided section inside it. The actions row (continue
   shopping) therefore stays INSIDE the card. The remove (×) FLOATS top-left so
   the title text wraps around it instead of overlapping it. */
@media (max-width: 768px) {
    body.woocommerce-cart table.shop_table.cart,
    body.woocommerce-cart table.shop_table.cart tbody,
    body.woocommerce-cart table.shop_table.cart tr,
    body.woocommerce-cart table.shop_table.cart td {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }
    body.woocommerce-cart table.shop_table.cart thead {
        display: none;
    }
    /* The TABLE is the single card (keeps white bg / radius / shadow from the
       desktop rule); everything (products + actions) lives inside it. */
    body.woocommerce-cart table.shop_table.cart {
        padding: 4px 16px 14px;
        overflow: hidden;
    }
    /* Each product = a section separated by a divider line (not its own card) */
    body.woocommerce-cart table.shop_table.cart tr.cart_item {
        position: relative;
        overflow: hidden; /* contain the floats */
        padding: 16px 0 14px;
        border-bottom: 1px solid var(--cart-line);
    }
    body.woocommerce-cart table.shop_table.cart tr.cart_item td {
        border: 0 !important;
        padding: 5px 0 !important;
        text-align: right;
    }
    /* Remove (×): floats to the top-left so the title flows AROUND it (no
       overlap). In-flow float also avoids the off-screen/scroll bug. */
    body.woocommerce-cart table.shop_table.cart td.product-remove {
        float: left;
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        margin: 2px 10px 4px 0;
        padding: 0 !important;
        text-align: left !important;
    }
    body.woocommerce-cart table.shop_table.cart td.product-remove a.remove {
        margin: 0 !important;
    }
    /* Thumbnail: neat tile floated to the right */
    body.woocommerce-cart table.shop_table.cart td.product-thumbnail {
        float: right;
        width: 92px !important;
        margin: 2px 0 6px 14px;
        text-align: center;
    }
    body.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
        width: 92px !important;
        height: 92px !important;
        max-width: 92px;
        padding: 4px;
    }
    /* Title: flows in the column between the × (left) and the image (right) */
    body.woocommerce-cart table.shop_table.cart td.product-name {
        padding-inline-start: 0 !important;
        text-align: right;
        font-size: 13.5px;
        overflow: visible;
    }
    /* Price / qty / subtotal: label (right) + value (left); clear the floats */
    body.woocommerce-cart table.shop_table.cart td.product-price,
    body.woocommerce-cart table.shop_table.cart td.product-quantity,
    body.woocommerce-cart table.shop_table.cart td.product-subtotal {
        clear: both;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid var(--cart-line) !important;
        padding: 12px 0 !important;
        white-space: normal !important;
    }
    body.woocommerce-cart table.shop_table.cart td.product-price {
        margin-top: 6px;
    }
    body.woocommerce-cart td.product-price::before,
    body.woocommerce-cart td.product-quantity::before,
    body.woocommerce-cart td.product-subtotal::before {
        content: attr(data-title);
        font-weight: 600;
        color: #8a8a8a;
        font-size: 13px;
    }
    /* Actions (coupon + continue) — INSIDE the card, stacked full width */
    body.woocommerce-cart table.shop_table.cart td.actions {
        clear: both;
        padding: 16px 0 6px !important;
        text-align: center;
    }
    body.woocommerce-cart .cart .actions .coupon {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;
    }
    body.woocommerce-cart .cart .actions .coupon input#coupon_code {
        flex: 1;
        min-width: 0;
    }

    /* Related products grid: Flatsome's .row uses negative side margins that
       overflow the viewport on phones → kill them and clip any residue. */
    body.woocommerce-cart .cross-sells {
        overflow: hidden;
    }
    body.woocommerce-cart .cross-sells .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Safety net: never allow horizontal scroll on the cart page on mobile. */
    body.woocommerce-cart,
    body.woocommerce-cart #wrapper,
    body.woocommerce-cart #main {
        overflow-x: hidden !important;
    }
    /* Totals card full width on mobile */
    body.woocommerce-cart .cart-collaterals .cart_totals {
        max-width: 100%;
    }
}