/* assets/css/theme.css - ADD THESE STYLES FOR CART PAGE */

/* --- Cart Page Styles --- */
.cart-container {
    /* .page-container provides base styling.
       This class can be used for cart-specific overrides if needed. */
}

.cart-header {
    /* Copied from .shop-header for consistency, can be made a global .page-section-header */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--theme-medium-gray);
}

.cart-header h1 {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--theme-dark-gray);
    margin-bottom: 0; /* Remove bottom margin if it's the only element */
}

/* Cart Content Layout (Items and Summary) */
.cart-content-grid { /* Using a more specific name for the grid */
    display: grid;
    grid-template-columns: 2fr 1fr; /* Default for larger screens */
    gap: 1.75rem;
}

.cart-items-section,
.cart-summary-section {
    background-color: var(--theme-white);
    border: 1px solid var(--theme-medium-gray);
    border-radius: 10px;
    padding: 1.5rem; /* Standard padding for these blocks */
}
.cart-summary-section h2,
.cart-items-section h2 { /* If you add an H2 to cart-items-section */
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--theme-dark-gray);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--theme-light-gray);
}


/* Cart Items Table Styling */
.cart-items-section .table-container {
    margin-bottom: 1.5rem;
    /* Uses global .table styles from theme.css */
}

.cart-items-section .table th,
.cart-items-section .table td {
    vertical-align: middle; /* Ensure content aligns nicely */
}

.cart-items-section .product-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 200px; /* Prevent squishing on smaller table views */
}

.cart-items-section .product-info img {
    width: 60px; /* Slightly larger image in cart */
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--theme-light-gray);
}
.cart-items-section .product-info .image-placeholder { /* Re-using shop placeholder style */
    width: 60px;
    height: 60px;
    background-color: var(--theme-light-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}
.cart-items-section .product-info .image-placeholder i {
    font-size: 1.8rem;
    color: var(--theme-dark-yellow);
}
.cart-items-section .product-info-name {
    font-weight: 500;
    color: var(--theme-dark-gray);
}

.cart-items-section .options-list-cart { /* More specific class for cart options */
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    font-size: 0.8rem;
    color: var(--theme-text-muted);
}
.cart-items-section .options-list-cart li {
    margin-bottom: 0.2rem;
}
.cart-items-section .options-list-cart li:last-child {
    margin-bottom: 0;
}


.cart-items-section .input-field-quantity,
.cart-items-section .form-control-quantity { /* For quantity inputs */
    width: 70px !important; /* Narrower width for quantity */
    padding: 0.4rem 0.6rem !important;
    text-align: center;
    /* Uses .input-field or .form-control styles from theme.css */
}

.cart-items-section .btn-update-cart {
    /* Uses .btn .btn-primary from theme.css */
    display: block; /* Make it block if it's the only button after table */
    width: auto; /* Or a specific width like 'max-content' or 'fit-content' */
    margin-left: auto; /* Align to the right */
}
.cart-items-section .btn-remove-item {
    color: var(--theme-text-muted) !important;
    font-size: 0.85rem !important;
    padding: 0.25rem 0.5rem !important;
}
.cart-items-section .btn-remove-item:hover {
    color: #dc3545 !important; /* Bootstrap danger color for remove hover */
    background-color: transparent !important;
    text-decoration: none !important;
}
.cart-items-section .btn-remove-item i {
    margin-right: 0.25rem;
}


/* Cart Summary Styling */
.cart-summary-section .summary-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem; /* Slightly larger text for summary */
    color: var(--theme-dark-gray);
    margin-bottom: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px dashed var(--theme-light-gray);
}
.cart-summary-section .summary-item:last-of-type { /* For the one before total */
     margin-bottom: 1.25rem;
}

.cart-summary-section .summary-item span:first-child {
    color: var(--theme-text-muted);
}
.cart-summary-section .summary-item span:last-child {
    font-weight: 500;
}

.cart-summary-section .summary-item.total {
    font-weight: 700;
    color: var(--theme-dark-gray);
    font-size: 1.2rem; /* Larger total */
    border-top: 1px solid var(--theme-medium-gray);
    border-bottom: none;
    padding-top: 1rem;
    margin-top: 0.5rem; /* Space before total */
}
.cart-summary-section .summary-item.total span:first-child {
    color: var(--theme-dark-gray); /* Ensure "Total" is also dark */
}
.cart-summary-section .summary-item.total span:last-child {
    color: var(--theme-dark-yellow); /* Total amount in theme color */
}

.cart-summary-section .form-group {
    margin-bottom: 1.25rem;
}
.cart-summary-section .form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--theme-dark-gray);
    margin-bottom: 0.4rem;
}
.cart-summary-section .select-input, /* Your existing class */
.cart-summary-section .form-select { /* Bootstrap class */
    width: 100%;
    /* Uses styles from theme.css .select-input or .form-select */
}

.cart-summary-section .btn-place-order {
    /* Uses .btn .btn-primary from theme.css */
    width: 100%;
    padding: 0.85rem 1rem !important; /* Larger padding for main action button */
    font-size: 1rem !important;
}
.cart-summary-section .btn-place-order i {
    margin-right: 0.5rem;
}


/* Responsive Adjustments for Cart */
@media (max-width: 991.98px) { /* Adjust breakpoint if needed (Bootstrap's lg) */
    .cart-content-grid {
        grid-template-columns: 1fr; /* Stack on smaller screens */
    }
    .cart-items-section .btn-update-cart {
        width: 100%;
        margin-left: 0;
        margin-top: 1rem;
    }
}

@media (max-width: 575.98px) { /* Bootstrap's sm breakpoint */
    .cart-items-section .product-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .cart-items-section .product-info img,
    .cart-items-section .product-info .image-placeholder {
        width: 80px; /* Adjust for stacked view */
        height: 80px;
    }
    .cart-items-section .table th,
    .cart-items-section .table td {
        padding: 0.75rem 0.5rem; /* Reduce padding on very small screens */
        font-size: 0.8rem;
    }
    .cart-items-section .input-field-quantity,
    .cart-items-section .form-control-quantity {
        width: 60px !important;
    }
    .cart-summary-section, .cart-items-section {
        padding: 1rem;
    }
}