/* ===== EXACT FLIPKART-STYLE CART ===== */
/* Last updated: 2026-01-20 14:42 */


/* Main Container - Two Columns */
.woocommerce-cart .woocommerce {
    display: flex !important;
    gap: 0 !important;
    /* Reduced gap as requested */
    align-items: flex-start !important;
    margin: 2rem auto !important;
    padding: 0 1rem !important;
    justify-content: space-between !important;
    /* Ensure they spread out */
}

/* Left Side - Product List */
.woocommerce-cart-form {
    flex: 1 !important;
    min-width: 0 !important;
    margin-right: 1.5rem !important;
    /* Add spacing via margin instead of gap for better control */
}

/* Right Side - Price Details */
.cart-collaterals {
    width: 35% !important;
    /* Increased width */
    min-width: 300px !important;
    flex-shrink: 0 !important;
}

/* Hide Table Headers */
.woocommerce-cart table.cart thead {
    display: none !important;
}

/* Show unit price (Real & Discount info) */
.woocommerce-cart .product-price {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 3 !important;
    /* Place below quantity */
    align-self: start !important;
    margin-top: 4px !important;
}

.woocommerce-cart .product-price .amount {
    color: #212121 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
}

/* Strikethrough for Original Price in Unit Price column */
.woocommerce-cart .product-price del {
    color: #878787 !important;
    font-size: 14px !important;
    text-decoration: line-through !important;
    margin-right: 8px !important;
}

.woocommerce-cart .product-price ins {
    text-decoration: none !important;
    font-weight: 700 !important;
    color: #212121 !important;
}

/* Quantity Selector */
.woocommerce-cart .product-quantity {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    text-align: left !important;
    justify-self: start !important;
}

.woocommerce-cart .product-quantity .quantity {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 2px !important;
}

.woocommerce-cart .product-quantity .qty {
    width: 40px !important;
    height: 28px !important;
    border: none !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #212121 !important;
    padding: 0 !important;
}

/* Show Product Images - Improved Scaling */
.woocommerce-cart .product-thumbnail {
    display: block !important;
    width: 150px !important;
    /* Slightly reduced container width for better proportion */
    margin-right: 1rem !important;
    flex-shrink: 0 !important;
}

.woocommerce-cart .product-thumbnail img {
    width: 100% !important;
    height: auto !important;
    /* Allow natural height */
    max-height: 150px !important;
    /* Limit max height */
    object-fit: contain !important;
    /* Ensure whole image is visible */
    border-radius: 4px !important;
    border: 1px solid #e0e0e0 !important;
}

/* Product Cards - Table Setup */
.woocommerce-cart table.cart {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Each Product as Individual Card - Grid Layout */
.woocommerce-cart table.cart tbody tr.cart_item {
    display: grid !important;
    grid-template-columns: 150px 1fr auto !important;
    /* Image Width | Content | Remove Button */
    grid-template-rows: auto auto auto auto !important;
    /* Name | Qty | Price | Subtotal(Hidden?) */
    gap: 0 16px !important;
    padding: 20px !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 2px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 6px !important;
    position: relative !important;
}

/* Hide the default table cell borders */
.woocommerce-cart table.cart tbody tr.cart_item td {
    border: none !important;
    padding: 0 !important;
}

/* Product Image - Grid placement */
.woocommerce-cart .product-thumbnail {
    grid-column: 1 !important;
    grid-row: 1 / 5 !important;
    /* Span all rows */
    align-self: start !important;
}

/* Product Name - Grid placement */
.woocommerce-cart .product-name {
    grid-column: 2 !important;
    grid-row: 1 !important;
    z-index: 1 !important;
    /* Ensure visibility */
}

.woocommerce-cart .product-name a {
    color: #212121 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: block !important;
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
}

.woocommerce-cart .product-name a:hover {
    color: #2874f0 !important;
}

/* Product meta/variation info */
.woocommerce-cart .product-name .variation,
.woocommerce-cart .product-name small {
    color: #878787 !important;
    font-size: 14px !important;
    display: block !important;
    margin-top: 4px !important;
}

/* Subtotal - Hide if redundant, or display subtly */
.woocommerce-cart .product-subtotal {
    /* If user wants unit price, maybe subtotal is confusing? 
       Typically e-commerce carts show subtotal. 
       Let's keep it but styling it distinctly or hiding it if it conflicts.
       User requested "real price and after discount". That's usually Unit Price.
       I'll hide Subtotal for now to reduce clutter, as Unit Price handles the request.
       Flipkart style usually shows the unit price clearly.
    */
    display: none !important;
}

/* Remove button - Grid placement */
.woocommerce-cart .product-remove {
    grid-column: 3 !important;
    grid-row: 1 / 5 !important;
    position: static !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
}

/* Remove Button - In grid column */
.woocommerce-cart .product-remove a {
    color: #212121 !important;
    font-size: 0 !important;
    text-decoration: none !important;
    opacity: 0.7 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
}

.woocommerce-cart .product-remove a:hover {
    opacity: 1 !important;
    color: #ff6161 !important;
}

/* Replace default × text with styled version */
.woocommerce-cart .product-remove a::before {
    content: "×" !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
}

/* Coupon Section */
.woocommerce-cart .actions {
    padding: 16px 20px !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-top: none !important;
    border-radius: 0 0 2px 2px !important;
    margin-top: -12px !important;
}

.woocommerce-cart .coupon {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.woocommerce-cart .coupon input {
    width: 250px !important;
    padding: 8px 12px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 2px !important;
    font-size: 14px !important;
}

.woocommerce-cart .coupon button {
    background: #ffffff !important;
    color: #212121 !important;
    border: 1px solid #e0e0e0 !important;
    padding: 8px 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.woocommerce-cart .coupon button:hover {
    background: #fafafa !important;
}

/* Hide Update Cart Button */
.woocommerce-cart button[name="update_cart"] {
    display: none !important;
}

/* ===== RIGHT SIDEBAR - PRICE DETAILS ===== */

.cart_totals {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 2px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    width: 100% !important;
    /* Fill container */
}

/* Clean header - show only "PRICE DETAILS" */
.cart_totals h2 {
    color: #878787 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    padding: 16px 24px !important;
    margin: 0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    letter-spacing: 1px !important;
    background: #fafafa !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Hide original text and show only our custom text */
.cart_totals h2::before {
    content: "PRICE DETAILS" !important;
}

.cart_totals h2 * {
    display: none !important;
}

/* Also hide any text nodes in h2 */
.cart_totals h2 {
    font-size: 0 !important;
}

.cart_totals h2::before {
    font-size: 12px !important;
}

/* Price Breakdown Table */
.cart_totals table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.cart_totals table tr {
    display: flex !important;
    justify-content: space-between !important;
    padding: 16px 24px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.cart_totals table th,
.cart_totals table td {
    display: inline-block !important;
    border: none !important;
    padding: 0 !important;
    font-size: 16px !important;
    text-align: left !important;
    background: transparent !important;
    color: #212121 !important;
}

.cart_totals table th {
    color: #212121 !important;
    font-weight: 400 !important;
}

.cart_totals table td {
    color: #212121 !important;
    font-weight: 500 !important;
    text-align: right !important;
}

.cart_totals table td .amount,
.cart_totals table th .amount {
    background: transparent !important;
    color: #212121 !important;
}

/* Total Amount - Highlighted */
.cart_totals .order-total {
    border-top: 1px dashed #e0e0e0 !important;
    border-bottom: none !important;
    padding: 20px 24px !important;
    background: #ffffff !important;
}

.cart_totals .order-total th,
.cart_totals .order-total td {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #212121 !important;
    background: transparent !important;
}

.cart_totals .order-total .amount {
    background: transparent !important;
    color: #212121 !important;
}

/* Checkout Button - Orange */
.wc-proceed-to-checkout {
    padding: 0 !important;
}

.checkout-button {
    display: block !important;
    width: 100% !important;
    padding: 16px !important;
    background: #fb641b !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    border: none !important;
    text-align: center !important;
    border-radius: 0 0 2px 2px !important;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.05) !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.checkout-button:hover {
    background: #f85620 !important;
    color: #ffffff !important;
}

/* Responsive */
@media (max-width: 992px) {

    /* Stack columns on tablet/mobile */
    .woocommerce-cart .woocommerce {
        flex-direction: column !important;
    }

    .woocommerce-cart-form {
        margin-right: 0 !important;
        width: 100% !important;
    }

    .cart-collaterals {
        width: 100% !important;
        min-width: 100% !important;
        margin-top: 1.5rem !important;
    }
}

@media (max-width: 768px) {
    .woocommerce-cart .product-thumbnail {
        width: 80px !important;
    }

    .woocommerce-cart .product-thumbnail img {
        width: 100% !important;
        max-height: 80px !important;
    }

    .woocommerce-cart table.cart tbody tr.cart_item {
        grid-template-columns: 80px 1fr auto !important;
        /* Adjust first column for mobile image size */
        padding: 16px !important;
    }

    .woocommerce-cart .product-name a {
        font-size: 16px !important;
    }
}