/*
|--------------------------------------------------------------------------
| Responsive: Mobile
|--------------------------------------------------------------------------
*/
/*========== Mobile - Dọc ==========*/
@media (max-width: 768px) and (orientation: portrait) {
	body.woocommerce-cart header.entry-header:not(.related-entry-header) { margin: 2vw 0 0; }
	body.woocommerce-cart header.entry-header:not(.related-entry-header) .entry-title { margin: 2vw; }
	body.woocommerce-cart .ast-article-single { padding: 0 5vw !important; }
	
	/*---------- Reset WooCommerce/Astra table-responsive behavior ----------*/
    body.woocommerce-cart .woocommerce-cart-form,
    body.woocommerce-cart .woocommerce-cart-form__contents,
    body.woocommerce-cart .woocommerce-cart-form__contents tbody {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    body.woocommerce-cart .woocommerce-cart-form__contents thead { display: none !important; }

    /*---------- THE IMPORTANT PART: One TR = One card ----------*/
    body.woocommerce-cart
    .woocommerce-cart-form__contents
    tr.woocommerce-cart-form__cart-item {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 82px minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        column-gap: 12px !important;
        align-items: start !important;
        width: 100% !important;
        min-height: 106px !important;
        margin: 0 0 8px !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        background: #fff !important;
        border: 1px solid #e7edf1 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }

    /*---------- RESET EVERY TD WooCommerce mobile CSS often changes td to flex/row. ----------*/
    body.woocommerce-cart
    .woocommerce-cart-form__contents
    tr.woocommerce-cart-form__cart-item > td {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        float: none !important;
        clear: none !important;
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    /*---------- Kill WooCommerce's mobile "label: before" behavior ----------*/
    body.woocommerce-cart
    .woocommerce-cart-form__contents
    tr.woocommerce-cart-form__cart-item > td::before {
        display: none !important;
        content: none !important;
    }

    /*---------- THUMBNAIL - LEFT COLUMN ----------*/
    body.woocommerce-cart
    .woocommerce-cart-form__contents
    tr.woocommerce-cart-form__cart-item > .product-thumbnail {
        grid-column: 1 !important;
        grid-row: 1 / span 3 !important;
        display: block !important;
        width: 82px !important;
        height: 82px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.woocommerce-cart
    .woocommerce-cart-form__contents
    tr.woocommerce-cart-form__cart-item > .product-thumbnail a {
        display: block !important;
        width: 82px !important;
        height: 82px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.woocommerce-cart
    .woocommerce-cart-form__contents
    tr.woocommerce-cart-form__cart-item > .product-thumbnail img {
        display: block !important;
        width: 82px !important;
        height: 82px !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important;
        border-radius: 8px !important;
        background: #f7f9fa !important;
    }

    /*---------- PRODUCT NAME - RIGHT / TOP ----------*/
    body.woocommerce-cart
    .woocommerce-cart-form__contents
    tr.woocommerce-cart-form__cart-item > .product-name {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 24px 0 0 !important;
        box-sizing: border-box !important;
    }

    body.woocommerce-cart
    .woocommerce-cart-form__contents
    tr.woocommerce-cart-form__cart-item > .product-name a {
        display: -webkit-box !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: #123a5a !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        text-decoration: none !important;
        text-align: left !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    /* Variations */
    body.woocommerce-cart
    .woocommerce-cart-form__contents
    tr.woocommerce-cart-form__cart-item > .product-name dl {
        margin: 4px 0 0 !important;
        padding: 0 !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
        color: #7b858c !important;
    }

    body.woocommerce-cart
    .woocommerce-cart-form__contents
    tr.woocommerce-cart-form__cart-item > .product-name dl dt,
    body.woocommerce-cart
    .woocommerce-cart-form__contents
    tr.woocommerce-cart-form__cart-item > .product-name dl dd { margin: 0 0 1px !important; }

    /*---------- PRICE - RIGHT / MIDDLE ----------*/
    body.woocommerce-cart
    .woocommerce-cart-form__contents
    tr.woocommerce-cart-form__cart-item > .product-price {
        grid-column: 2 !important;
        grid-row: 2 !important;
        display: block !important;
        width: 100% !important;
        margin: 5px 0 0 !important;
        padding: 0 !important;
    }

    body.woocommerce-cart
    .woocommerce-cart-form__contents
    tr.woocommerce-cart-form__cart-item > .product-price .amount {
        color: #d97706 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    body.woocommerce-cart
    .woocommerce-cart-form__contents
    tr.woocommerce-cart-form__cart-item > .product-price del .amount {
        color: #939ba1 !important;
        font-size: 12px !important;
        font-weight: 400 !important;
    }

    /*---------- QUANTITY - RIGHT / BOTTOM ----------*/
    body.woocommerce-cart
    .woocommerce-cart-form__contents
    tr.woocommerce-cart-form__cart-item > .product-quantity {
        grid-column: 2 !important;
        grid-row: 3 !important;
        display: block !important;
        width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 0 !important;
    }

    body.woocommerce-cart
    .woocommerce-cart-form__contents
    tr.woocommerce-cart-form__cart-item > .product-quantity .quantity {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: 28px !important;
        min-height: 28px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #dce3e7 !important;
        border-radius: 6px !important;
        background: #fff !important;
        overflow: hidden !important;
    }

    body.woocommerce-cart
    .woocommerce-cart-form__contents
    tr.woocommerce-cart-form__cart-item > .product-quantity .quantity .qty {
        display: block !important;
        width: 34px !important;
        height: 26px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-left: 1px solid #e3e8eb !important;
        border-right: 1px solid #e3e8eb !important;
        border-radius: 0 !important;
        background: #fff !important;
        color: #123a5a !important;
        font-size: 13px !important;
        line-height: 26px !important;
        text-align: center !important;
        box-shadow: none !important;
        outline: none !important;
    }

    /*---------- SUBTOTAL - hidden visually on mobile card. The product price is already visible. This keeps the card compact like Shopee. ----------*/
    body.woocommerce-cart
    .woocommerce-cart-form__contents
    tr.woocommerce-cart-form__cart-item > .product-subtotal { display: none !important; }

    /*---------- REMOVE BUTTON - top right ----------*/
    body.woocommerce-cart
    .woocommerce-cart-form__contents
    tr.woocommerce-cart-form__cart-item > .product-remove {
        position: absolute !important;
        top: 9px !important;
        right: 9px !important;
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 10 !important;
    }

    body.woocommerce-cart
    .woocommerce-cart-form__contents
    tr.woocommerce-cart-form__cart-item > .product-remove a.remove {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #98a1a7 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 50% !important;
        font-size: 18px !important;
        font-weight: 400 !important;
        line-height: 22px !important;
        text-decoration: none !important;
    }

    /*---------- CART ACTIONS ----------*/
    body.woocommerce-cart .woocommerce-cart-form .actions {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 5px 0 8px !important;
        border: 0 !important;
    }

    body.woocommerce-cart .woocommerce-cart-form .coupon,
    body.woocommerce-cart .woocommerce-cart-form button[name="update_cart"] { display: none !important; }

    /*---------- CART TOTALS ----------*/
    body.woocommerce-cart .cart-collaterals {
        width: 100% !important;
        margin: 10px 0 0 !important;
    }

    body.woocommerce-cart .cart_totals {
        width: 100% !important;
        margin: 0 !important;
        padding: 14px !important;
        box-sizing: border-box !important;
        background: #fff !important;
        border: 1px solid #e7edf1 !important;
        border-radius: 10px !important;
    }

    body.woocommerce-cart .cart_totals h2 {
        margin: 0 0 10px !important;
        color: #123a5a !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        font-weight: 700 !important;
    }

    body.woocommerce-cart .cart_totals table.shop_table {
        display: table !important;
        width: 100% !important;
        margin: 0 !important;
        border: 0 !important;
    }

    body.woocommerce-cart .cart_totals table.shop_table tr {
        display: table-row !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    body.woocommerce-cart .cart_totals table.shop_table th,
    body.woocommerce-cart .cart_totals table.shop_table td {
        display: table-cell !important;
        width: auto !important;
        padding: 6px 0 !important;
        border: 0 !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    body.woocommerce-cart .cart_totals table.shop_table th {
        color: #68747d !important;
        font-weight: 400 !important;
        text-align: left !important;
    }

    body.woocommerce-cart .cart_totals table.shop_table td {
        color: #123a5a !important;
        font-weight: 600 !important;
        text-align: right !important;
    }

    body.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
    body.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
        padding-top: 10px !important;
        border-top: 1px solid #e7edf1 !important;
        font-weight: 700 !important;
    }

    body.woocommerce-cart .cart_totals table.shop_table tr.order-total .amount {
        color: #d97706 !important;
        font-size: 17px !important;
    }

    /*---------- CHECKOUT BUTTON ----------*/
    body.woocommerce-cart .wc-proceed-to-checkout {
        margin: 10px 0 0 !important;
        padding: 0 !important;
    }

    body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 10px 15px !important;
        box-sizing: border-box !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: 7px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        text-decoration: none !important;
    }
	
	/*---------- Quantity wrapper ----------*/
    .woocommerce-cart .product-quantity .cart-quantity-control {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        height: 30px;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #dce3e7;
        border-radius: 6px;
        background: #fff;
        overflow: hidden;
    }

    /*---------- Quantity buttons ----------*/
    .woocommerce-cart .cart-quantity-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 29px;
        width: 29px !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
        color: #123a5a !important;
        box-shadow: none !important;
        cursor: pointer;
        transition: background-color .15s ease, color .15s ease;
    }

    .woocommerce-cart .cart-quantity-btn:hover {
        background: #f3f7f9 !important;
        color: #1f5f7a !important;
    }

    .woocommerce-cart .cart-quantity-btn:active { background: #eaf3f8 !important; }

    .woocommerce-cart .cart-quantity-btn:disabled {
        color: #c5cdd2 !important;
        background: #fff !important;
        cursor: default;
        opacity: 1;
    }

    .woocommerce-cart .cart-quantity-btn svg {
        width: 14px;
        height: 14px;
        pointer-events: none;
    }

    /*---------- Quantity input ----------*/
    .woocommerce-cart .product-quantity .cart-quantity-control .quantity {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: auto !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        overflow: visible !important;
    }

    .woocommerce-cart .product-quantity .cart-quantity-control .qty {
        width: 36px !important;
        min-width: 36px !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-left: 1px solid #e6eaed !important;
        border-right: 1px solid #e6eaed !important;
        border-radius: 0 !important;
        background: #fff !important;
        color: #123a5a !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 30px !important;
        text-align: center !important;
        box-shadow: none !important;
    }

    /*---------- Chrome / Safari bỏ spinner number input ----------*/
    .woocommerce-cart .cart-quantity-control input[type="number"]::-webkit-inner-spin-button,
	.woocommerce-cart .cart-quantity-control input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .woocommerce-cart .cart-quantity-control input[type="number"] {
        -moz-appearance: textfield;
        appearance: textfield;
    }

    /*---------- Sticky bottom cart ----------*/
    .woocommerce-cart { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    
	.woocommerce-cart .cart-bottom-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 90px;
        z-index: 99999;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        width: 100%;
        min-height: 60px;
        margin: 0 !important;
        padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
        box-sizing: border-box;
        background: rgba(255,255,255,.98);
        border-top: 1px solid #e6ebee;
		border-bottom: 1px solid #e6ebee;
        box-shadow: 0 -4px 18px rgba(13,43,67,.08);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        gap: 10px;
    }

    /*---------- Đặt hàng - bên trái ----------*/
    .woocommerce-cart .cart-bottom-order {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 44px;
        margin: 0 !important;
        padding: 9px 12px !important;
        box-sizing: border-box;
        border: 0 !important;
        border-radius: 7px !important;
        background: var(--btn);
        color: #fff !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.2;
        text-align: center;
        text-decoration: none !important;
        box-shadow: none !important;
        transition: background-color .2s ease, transform .15s ease;
    }

    .woocommerce-cart .cart-bottom-order:hover {
        background: #d97706 !important;
        color: #fff !important;
    }

    .woocommerce-cart .cart-bottom-order:active { transform: scale(.98); }

    .woocommerce-cart .cart-bottom-order i {
        margin-right: 6px;
        font-size: 14px;
        line-height: 1;
    }

    /*---------- Tổng đơn hàng - bên phải ----------*/
    .woocommerce-cart .cart-bottom-total {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        min-width: 0;
        margin: 0;
        padding: 0 3px;
		border-right: 1px solid #e6ebee;
    }

    .woocommerce-cart .cart-bottom-total-label {
        display: block;
        margin: 0 0 2px;
        color: #6d7880;
        font-size: 11px;
        font-weight: 400;
        line-height: 1.2;
        white-space: nowrap;
    }

    .woocommerce-cart .cart-bottom-total-price {
        display: block;
        max-width: 100%;
        overflow: hidden;
        color: var(--price);
        font-size: 21px;
        font-weight: 700;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
	
	.woocommerce-cart .cart-bottom-bar {
        bottom: 0;
        transition: bottom .25s ease;
    }

    .woocommerce-cart .cart-bottom-bar.is-scrolled { bottom: 80px; }
}