/* cart.css - Styles for shopping cart pages */

/* Default table styles for desktop */
.cart-table-container {
    width: 100%;
}

/* Mobile styles - transform table to cards */
@media (max-width: 767.98px) {
    /* Hide the table header on mobile */
    .cart-table-container thead {
        display: none;
    }
    
    /* Convert rows to cards */
    .cart-table-container tbody tr {
        display: block;
        margin-bottom: var(--ssc-space-md);
        border: 1px solid var(--ssc-border-light);
        border-radius: var(--ssc-radius-md);
        padding: var(--ssc-space-sm);
        box-shadow: var(--ssc-shadow-sm);
    }
    
    /* Style table cells as flex containers */
    .cart-table-container tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--ssc-space-sm) 0;
        border-bottom: 1px solid var(--ssc-border-light);
    }
    
    .cart-table-container tbody td:last-child {
        border-bottom: none;
    }
    
    /* Add labels for mobile view */
    .cart-table-container tbody td:before {
        content: attr(data-label);
        font-weight: 600;
        width: 40%;
        text-align: left;
    }
    
    /* Product cell special styling */
    .cart-table-container tbody td.product-cell {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .cart-table-container tbody td.product-cell:before {
        margin-bottom: var(--ssc-space-sm);
        width: 100%;
    }
    
    /* Adjust spacing for product info */
    .cart-table-container .product-info-container {
        display: flex;
        width: 100%;
        align-items: flex-start;
    }
    
    /* Table footer styling */
    .cart-table-container tfoot tr {
        display: flex;
        justify-content: space-between;
        padding: var(--ssc-space-sm);
        background-color: var(--ssc-light-bg);
    }
    
    .cart-table-container tfoot td {
        padding: 0;
        border: none;
    }
    
    /* Footer buttons on mobile */
    .card-footer {
        flex-direction: column;
    }
    
    .card-footer a.btn {
        margin-bottom: var(--ssc-space-sm);
    }
    
    .card-footer div {
        display: flex;
        flex-direction: column;
    }
    
    .card-footer div a.btn {
        margin-bottom: var(--ssc-space-sm);
        width: 100%;
    }
}