/* ==========================================================================
   CUSTOM CART PAGE STYLING - ĐẦY ĐỦ 100%
   ========================================================================== */

/* 1. KHUNG THÔNG BÁO WOOCOMMERCE (ẢNH 1: MÀU NÂU) */
.woocommerce-message,
.woocommerce-info {
    background-color: var(--color-primary, #FCFAF7) !important;
    border-top: 3px solid var(--color-accent-2, #8A5038) !important;
    color: var(--text-heading, #2F2B29) !important;
    padding: 14px 20px !important;
    margin-bottom: 25px !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-family: var(--font-secondary, sans-serif) !important;
    font-size: 14px !important;
}

.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--color-accent-2, #8A5038) !important;
}

.woocommerce-message a.button,
.woocommerce-info a.button {
    background-color: var(--color-accent-2, #8A5038) !important;
    color: #FFFFFF !important;
    padding: 8px 18px !important;
    border-radius: 4px !important;
    font-family: var(--font-secondary, sans-serif) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: var(--transition-base, all 0.3s) !important;
    float: none !important;
    margin: 0 !important;
}

.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover {
    background-color: var(--color-accent-1, #E06640) !important;
}

/* 2. KHUNG CHÍNH CĂN GIỮA & TIÊU ĐỀ (MÀU ĐEN) */
.woocommerce-cart .site-main {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 40px 20px 80px 20px !important;
    box-sizing: border-box !important;
}

.custom-woocommerce-global-wrap {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.custom-cart-page-title {
    font-family: var(--ff-h2, 'Parastoo', serif);
    font-size: var(--fs-h2, 36px);
    font-weight: var(--fw-h2, 600);
    line-height: var(--lh-h2, 1.3);
    color: var(--text-heading, #2F2B29) !important; /* MÀU ĐEN */
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 10px 0 35px 0 !important;
}

/* 3. TIÊU ĐỀ CỘT (SẢN PHẨM - SỐ LƯỢNG: MÀU ĐEN) */
.custom-cart-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--color-neutral, #EFE8DF) !important;
    margin-bottom: 5px !important;
    width: 100% !important;
}

.custom-cart-col-product,
.custom-cart-col-quantity {
    font-family: var(--font-secondary, sans-serif);
    font-size: var(--fs-caption, 13px);
    font-weight: 700 !important;
    color: var(--text-heading, #2F2B29) !important; /* MÀU ĐEN */
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.custom-cart-col-quantity {
    text-align: right !important;
}

/* 4. HÀNG SẢN PHẨM & ẢNH */
.custom-cart-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid var(--color-neutral, #EFE8DF) !important;
    width: 100% !important;
    gap: 12px !important;
}

.custom-cart-item-left {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.custom-cart-item-img-wrap {
    position: relative !important;
    width: 75px !important;
    height: 75px !important;
    flex-shrink: 0 !important;
}

.custom-cart-item-img-wrap .custom-remove-btn,
.custom-remove-btn,
.woocommerce-cart table.cart a.remove,
.woocommerce-cart a.remove {
    position: absolute !important;
    top: -6px !important;
    left: -6px !important;
    width: 20px !important;
    height: 20px !important;
    background: var(--color-primary, #FCFAF7) !important;
    border: 1px solid var(--color-accent-2, #8A5038) !important;
    border-radius: 50% !important;
    color: var(--color-accent-2, #8A5038) !important;
    font-size: 13px !important;
    line-height: 18px !important;
    text-align: center !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    transition: var(--transition-base, all 0.3s) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.custom-cart-item-img-wrap .custom-remove-btn:hover,
.woocommerce-cart table.cart a.remove:hover,
.woocommerce-cart a.remove:hover {
    border-color: var(--color-accent-1, #E06640) !important;
    background-color: var(--color-accent-1, #E06640) !important;
    color: #FFFFFF !important;
}

.custom-cart-item-thumbnail {
    width: 100% !important;
    height: 100% !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: var(--color-neutral, #EFE8DF) !important;
    border: 1px solid var(--color-neutral, #EFE8DF) !important;
}

.custom-cart-item-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.custom-cart-item-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.custom-cart-item-name,
.custom-cart-item-name a {
    font-family: var(--font-primary, serif) !important;
    font-size: var(--fs-body-s, 16px) !important;
    font-weight: 600 !important;
    color: var(--text-heading, #2F2B29) !important;
    text-decoration: none !important;
    margin-bottom: 4px !important;
    display: block !important;
    transition: var(--transition-base, all 0.3s) !important;
    word-break: break-word !important;
}

.custom-cart-item-name a:hover {
    color: var(--color-accent-1, #E06640) !important;
}

.custom-cart-item-meta {
    font-family: var(--font-secondary, sans-serif) !important;
    font-size: var(--fs-caption, 13px) !important;
    color: var(--text-body, #5C5752) !important;
    font-weight: 500 !important;
}

.custom-cart-item-meta .amount {
    color: var(--color-accent-2, #8A5038) !important;
    font-weight: 700 !important;
}

/* 5. CỤM TĂNG GIẢM SỐ LƯỢNG (- 1 +) CHUẨN 100% THEO ẢNH */
.custom-cart-item-right {
    flex-shrink: 0 !important;
}

/* Khung bọc ngoài */
.custom-qty-stepper {
    display: inline-flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    border: 1.5px solid var(--color-accent-2, #8A5038) !important;
    border-radius: 4px !important;
    height: 34px !important;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hai nút (-) và (+) nền trắng */
.custom-qty-stepper .custom-qty-btn {
    width: 32px !important;
    min-width: 32px !important;
    height: 100% !important;
    border: none !important;
    outline: none !important;
    background: #FFFFFF !important;
    color: var(--text-heading, #2F2B29) !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

.custom-qty-stepper .custom-qty-btn:hover {
    background-color: var(--color-primary, #FCFAF7) !important;
    color: var(--color-accent-1, #E06640) !important;
}

/* Thẻ bọc Quantity của WooCommerce */
.custom-qty-stepper .quantity {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: 38px !important;
    height: 100% !important;
    background-color: var(--color-accent-2, #8A5038) !important;
}

/* Ô SỐ Ở GIỮA: NỀN NÂU, CHỮ TRẮNG */
.custom-qty-stepper .quantity input.qty {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 34px !important;
    border: none !important;
    outline: none !important;
    text-align: center !important;
    font-family: var(--font-secondary, sans-serif) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    background-color: var(--color-accent-2, #8A5038) !important; /* NỀN NÂU */
    color: #FFFFFF !important; /* CHỮ TRẮNG */
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -moz-appearance: textfield !important;
    -webkit-appearance: none !important;
    appearance: textfield !important;
}

/* Ẩn mũi tên mặc định của input type="number" */
.custom-qty-stepper .quantity input.qty::-webkit-outer-spin-button,
.custom-qty-stepper .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* 6. HAI NÚT HÀNH ĐỘNG DƯỚI BẢNG */
.custom-cart-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 30px !important;
    margin-bottom: 40px !important;
    width: 100% !important;
}

.custom-btn-continue {
    padding: 12px 24px !important;
    border: 1.5px solid var(--color-accent-2, #8A5038) !important;
    background: transparent !important;
    color: var(--color-accent-2, #8A5038) !important;
    font-family: var(--ff-btn-s, sans-serif) !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    transition: var(--transition-base, all 0.3s) !important;
    text-align: center !important;
}

.custom-btn-continue:hover {
    background-color: var(--color-accent-2, #8A5038) !important;
    color: #FFFFFF !important;
}

/* Nút CẬP NHẬT GIỎ HÀNG (ẢNH 3: MÀU NÂU) */
.custom-btn-update,
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart input[name="update_cart"] {
    padding: 12px 28px !important;
    background-color: var(--color-accent-2, #8A5038) !important; /* MÀU NÂU */
    color: #FFFFFF !important;
    font-family: var(--font-secondary, sans-serif) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: var(--transition-base, all 0.3s) !important;
    text-align: center !important;
    display: inline-block !important;
}

.custom-btn-update:hover,
.woocommerce-cart button[name="update_cart"]:hover,
.woocommerce-cart input[name="update_cart"]:hover {
    background-color: var(--color-accent-1, #E06640) !important;
}

/* 7. KHỐI TỔNG CỘNG & MÃ ƯU ĐÃI */
.custom-cart-collaterals,
.woocommerce-cart .cart-collaterals {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    margin-top: 10px !important;
    background: transparent !important;
}

.custom-cart-totals-box,
.woocommerce-cart .cart-collaterals .cart_totals {
    width: 100% !important;
    max-width: 480px !important;
    background-color: var(--color-primary, #FCFAF7) !important;
    border: 1px solid var(--color-neutral, #EFE8DF) !important;
    border-radius: 8px !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    float: none !important;
}

/* Tiêu đề TỔNG CỘNG GIỎ HÀNG (ẢNH 2: MÀU ĐEN) */
.custom-cart-totals-box h2,
.woocommerce-cart .cart_totals h2,
.woocommerce-cart .cart-collaterals h2 {
    font-family: var(--ff-h4, sans-serif) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: var(--text-heading, #2F2B29) !important; /* MÀU ĐEN */
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 18px 0 !important;
    padding-bottom: 10px !important;
    border: none !important;
    border-bottom: 1.5px solid var(--color-neutral, #EFE8DF) !important;
}

.custom-totals-table,
.woocommerce-cart .cart_totals table.shop_table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: none !important;
    margin: 0 0 20px 0 !important;
    background: transparent !important;
}

.custom-totals-table tr,
.woocommerce-cart .cart_totals table.shop_table tr {
    border-bottom: 1px solid var(--color-neutral, #EFE8DF) !important;
    background: transparent !important;
}

.custom-totals-table tr:last-child,
.woocommerce-cart .cart_totals table.shop_table tr:last-child {
    border-bottom: none !important;
}

.custom-totals-table th,
.woocommerce-cart .cart_totals table.shop_table th {
    padding: 12px 0 !important;
    font-family: var(--font-secondary, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-heading, #2F2B29) !important;
    text-align: left !important;
    border: none !important;
    background: transparent !important;
}

.custom-totals-table td,
.woocommerce-cart .cart_totals table.shop_table td {
    padding: 12px 0 !important;
    font-family: var(--font-secondary, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text-heading, #2F2B29) !important;
    text-align: right !important;
    border: none !important;
    background: transparent !important;
}

.custom-totals-table tr.order-total td,
.woocommerce-cart .cart_totals tr.order-total td .amount {
    color: var(--color-accent-1, #E06640) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

.woocommerce-cart .cart_totals table.shop_table tr.shipping td a.shipping-calculator-button {
    color: var(--color-accent-2, #8A5038) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

/* Nút TIẾN HÀNH THANH TOÁN (MÀU NÂU) */
.wc-proceed-to-checkout,
.woocommerce-cart .wc-proceed-to-checkout {
    padding: 0 !important;
    margin: 0 0 25px 0 !important;
    width: 100% !important;
}

.wc-proceed-to-checkout a.checkout-button,
.custom-cart-totals-box a.checkout-button,
.woocommerce-cart .cart_totals a.checkout-button,
.woocommerce-cart a.checkout-button.button.alt {
    display: block !important;
    width: 100% !important;
    padding: 14px 20px !important;
    background-color: var(--color-accent-2, #8A5038) !important;
    color: #FFFFFF !important;
    text-align: center !important;
    font-family: var(--ff-btn-m, sans-serif) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    border: none !important;
    box-sizing: border-box !important;
    transition: var(--transition-base, all 0.3s) !important;
    float: none !important;
}

.wc-proceed-to-checkout a.checkout-button:hover,
.custom-cart-totals-box a.checkout-button:hover,
.woocommerce-cart .cart_totals a.checkout-button:hover,
.woocommerce-cart a.checkout-button.button.alt:hover {
    background-color: var(--color-accent-1, #E06640) !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
}

/* 8. KHỐI MÃ ƯU ĐÃI (ẢNH 4: BỎ HOÀN TOÀN VIỀN NGOÀI) */
.custom-coupon-section,
.woocommerce-cart .cart_totals .coupon {
    margin-top: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 480px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important; /* BỎ HOÀN TOÀN VIỀN NGOÀI */
}

.custom-coupon-title {
    font-family: var(--font-secondary, sans-serif) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--color-accent-2, #8A5038) !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-transform: uppercase !important;
}

.custom-coupon-form-wrap,
.woocommerce-cart form .coupon {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.custom-coupon-input,
.woocommerce-cart .coupon input#coupon_code,
.woocommerce-cart #coupon_code {
    display: block !important;
    width: 100% !important;
    height: 42px !important;
    padding: 10px 14px !important;
    border: 1px solid var(--color-neutral, #EFE8DF) !important;
    border-radius: 4px !important;
    font-family: var(--font-secondary, sans-serif) !important;
    font-size: 13px !important;
    color: var(--text-heading, #2F2B29) !important;
    background: #FFFFFF !important;
    outline: none !important;
    box-sizing: border-box !important;
    margin: 0 0 10px 0 !important;
    transition: var(--transition-base, all 0.3s) !important;
}

.custom-coupon-input:focus,
.woocommerce-cart #coupon_code:focus {
    border-color: var(--color-accent-2, #8A5038) !important;
}

.custom-coupon-btn,
.woocommerce-cart .coupon button[name="apply_coupon"],
.woocommerce-cart button[name="apply_coupon"] {
    display: block !important;
    width: 100% !important;
    height: 40px !important;
    background-color: var(--color-accent-2, #8A5038) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 4px !important;
    font-family: var(--ff-btn-s, sans-serif) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: var(--transition-base, all 0.3s) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.custom-coupon-btn:hover,
.woocommerce-cart button[name="apply_coupon"]:hover {
    background-color: var(--color-accent-1, #E06640) !important;
}

/* 9. RESPONSIVE MOBILE (< 768px) */
@media (max-width: 767px) {
    .woocommerce-cart .site-main {
        padding: 25px 20px 60px 20px !important;
    }

    .custom-cart-page-title {
        font-size: 26px !important;
        margin: 5px 0 20px 0 !important;
    }

    .custom-cart-item {
        padding: 14px 0 !important;
    }

    .custom-cart-item-img-wrap {
        width: 65px !important;
        height: 65px !important;
    }

    .custom-cart-actions {
        flex-direction: column !important;
        gap: 10px !important;
        margin: 20px 0 30px 0 !important;
    }

    .custom-btn-continue,
    .custom-btn-update {
        width: 100% !important;
        display: block !important;
        padding: 12px 15px !important;
        text-align: center !important;
    }

    .custom-cart-collaterals,
    .woocommerce-cart .cart-collaterals {
        align-items: stretch !important;
    }

    .custom-cart-totals-box,
    .custom-coupon-section,
    .woocommerce-cart .cart-collaterals .cart_totals {
        max-width: 100% !important;
        width: 100% !important;
    }
}



/* Đảm bảo nút bấm nằm ở lớp trên cùng và nhận sự kiện click */
.custom-qty-stepper {
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
}

.custom-qty-stepper .custom-qty-btn {
    position: relative !important;
    z-index: 11 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    user-select: none !important;
}