/* Cart Page Specific Styles - from cart-reference.html */

.cart-page-wrapper {
    /* Optional wrapper */
}

/* Breadcrumbs are styled in main.css */

.cart-section {
    padding: var(--space-md) 0 var(--space-xl);
    background-color: var(--secondary-bg-color); /* Light gray background for the section */
}
body[data-theme="dark"] .cart-section {
    background-color: var(--gray-800);
}

.cart-container {
    max-width: 1100px; /* Increased max-width to accommodate new column */
    margin: 0 auto;
    /* padding is handled by .container from main.css if used directly, or add here */
}

.page-title { /* General page title, can be in main.css if consistent */
    font-size: 2rem; /* From reference */
    font-weight: 700;
    margin-bottom: var(--space-lg);
    text-align: center;
    letter-spacing: -0.02em;
}

.cart-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

@media (min-width: 768px) { /* md in Tailwind, 768px is common breakpoint */
    .cart-content {
        /* grid-template-columns: 2fr 1fr; /* No longer using sidebar model */
        /* The cart-main will now naturally take full width of the 1fr cart-content */
        gap: var(--space-xl);
    }
}

.cart-main {
    /* Container for cart items and clear cart button */
    /* This will now take the full width of its parent .cart-content */
}

.order-summary-container { /* New container for the moved summary */
    margin-top: var(--space-xl); /* Add some space above the summary */
    /* It will be full width by default as a block element within .cart-container */
}

.cart-items {
    margin-bottom: var(--space-lg);
    background-color: var(--secondary); /* White background for items list */
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    overflow: hidden; /* To contain borders and rounded corners */
}
body[data-theme="dark"] .cart-items {
    background-color: var(--gray-800); /* Darker background for items list */
    border: 1px solid var(--gray-700);
}


.cart-header {
    display: none; /* Hidden on mobile by default in reference */
    border-bottom: 1px solid var(--border-color); /* --gray-200 */
    padding: var(--space-sm) var(--space-md); /* Padding for header row */
    color: var(--secondary-text-color); /* --gray-600 */
    font-weight: 500;
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .cart-header {
        display: grid;
        /* Product, Condition, Price, Qty, Total, Remove */
        grid-template-columns: minmax(0, 2.5fr) 1fr 1fr 1fr 1fr auto; 
        gap: var(--space-md);
        align-items: center;
    }
}

.cart-header-product { text-align: left; }
.cart-header-condition { text-align: left; } /* Added */
.cart-header-price,
.cart-header-quantity,
.cart-header-total { text-align: center; }

.cart-item {
    display: grid;
    /* Mobile: Product info stacked, then quantity/total/remove below or to side */
    grid-template-areas: 
        "image details remove"
        "image condition condition" /* Added condition area */
        "image quantity total";
    grid-template-columns: auto 1fr auto; /* Image, details/condition, remove/total */
    gap: var(--space-sm) var(--space-md); /* row-gap column-gap */
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-color); /* --gray-200 */
    align-items: center;
}
.cart-item:last-child {
    border-bottom: none;
}

.cart-item-product { grid-area: details; display: flex; gap: var(--space-md); align-items: center; }
.cart-item-image { grid-area: image; }
.cart-item-condition { /* Added for mobile */
    grid-area: condition; 
    font-size: 0.875rem;
    color: var(--secondary-text-color);
    padding-left: 0; /* Aligns with details text if image is present */
    padding-top: var(--space-xs);
}
.cart-item-quantity { grid-area: quantity; }
.cart-item-total { grid-area: total; font-weight: 600; text-align: right; }
.cart-item-remove { grid-area: remove; }
.cart-item-price { display: none; } /* Price per unit hidden on mobile in this layout, shown in details */


@media (min-width: 768px) {
    .cart-item {
        /* Product, Condition, Price, Qty, Total, Remove */
        grid-template-columns: minmax(0, 2.5fr) 1fr 1fr 1fr 1fr auto; 
        grid-template-areas: unset; /* Reset grid areas */
        gap: var(--space-md);
    }
    .cart-item-product { grid-area: unset; }
    .cart-item-image { grid-area: unset; }
    .cart-item-condition { /* Added for desktop */
        grid-area: unset;
        display: flex;
        align-items: center;
        justify-content: left;
        font-size: 0.875rem;
        color: var(--secondary-text-color);
        padding-left: 0;
        padding-top: 0;
    }
    .cart-item-quantity { grid-area: unset; display: flex; justify-content: center; } /* Added display flex */
    .cart-item-total { grid-area: unset; text-align: center; }
    .cart-item-remove { grid-area: unset; }
    .cart-item-price { display: flex; justify-content: center; font-weight: 500; align-items: center;} /* Added display flex, align-items */
}


.cart-item-image img {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    object-fit: cover; /* Changed from contain for better fill */
    background-color: var(--gray-100); /* For images with transparency */
}
body[data-theme="dark"] .cart-item-image img {
    background-color: var(--gray-700);
}


.cart-item-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0; /* For text overflow */
}

.cart-item-name {
    font-weight: 600;
    color: var(--primary-text-color);
    text-decoration: none;
    white-space: normal; /* Allow wrapping */
}
.cart-item-name:hover { color: var(--accent-color); }

.cart-item-variant {
    font-size: 0.875rem;
    color: var(--secondary-text-color); /* --gray-600 */
}

.quantity-form {
    display: flex;
    align-items: center;
    justify-content: center; /* Center form content like input */
}

.quantity-control {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color); /* --gray-300 */
    border-radius: 4px;
    overflow: hidden;
    height: 38px; /* From reference */
}

.quantity-btn {
    border: none;
    background: var(--secondary);
    width: 32px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    color: var(--secondary-text-color); /* --gray-700 */
    cursor: pointer;
    transition: var(--transition);
}
.quantity-btn:hover { background-color: var(--gray-100); }
body[data-theme="dark"] .quantity-btn {
    background: var(--gray-700);
    color: var(--gray-200);
    border-color: var(--gray-600);
}
body[data-theme="dark"] .quantity-btn:hover {
    background-color: var(--gray-600);
}


.quantity-input {
    width: 40px;
    height: 100%;
    border: none;
    text-align: center;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--primary-text-color);
    -moz-appearance: textfield;
    background-color: var(--secondary);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}
.quantity-input::-webkit-inner-spin-button,
.quantity-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
body[data-theme="dark"] .quantity-input {
    background-color: var(--gray-700);
    color: var(--gray-100);
    border-color: var(--gray-600);
}


.update-cart-btn { /* For the hidden submit button, or a visible small update button */
    /* Example if made visible: */
    /* padding: var(--space-xs) var(--space-sm); */
    /* font-size: 0.8rem; */
    /* margin-left: var(--space-sm); */
}


.cart-item-remove {
    background: none;
    border: none;
    color: var(--gray-500);
    cursor: pointer;
    transition: var(--transition);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-left: auto; /* Push to the right on mobile */
}
.cart-item-remove:hover { color: var(--primary); }

.cart-actions {
    margin-top: var(--space-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: var(--space-sm);
}

.cart-actions-flex {
    display: flex;
    justify-content: space-between; /* Pushes "Continue Shopping" to left, others to right */
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md); /* Increased gap for better spacing */
}

.cart-actions-flex .continue-shopping-link {
    margin-right: auto; /* Pushes this button to the far left */
}

.cart-actions-flex .clear-cart-form,
.cart-actions-flex .update-quantities-btn {
    margin-left: var(--space-sm); /* Add some space between right-aligned buttons */
}


.continue-shopping-link {
    /* Uses .btn .btn-secondary from main.css */
}
.clear-cart-btn {
    /* Uses .btn from main.css, add .btn-outline-danger or similar */
    color: #ef4444; /* Red */
    border-color: #ef4444;
}
.clear-cart-btn:hover {
    background-color: rgba(239, 68, 68, 0.1);
    color: #dc2626; /* Darker red */
}

.update-quantities-btn {
    /* Assuming .btn and .btn-success (for green) are defined in core/main.css */
    /* If .btn-success is not available, use .btn-primary or add specific green styles here */
}


.cart-empty {
    text-align: center;
    padding: var(--space-lg) 0;
    background-color: var(--secondary);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
body[data-theme="dark"] .cart-empty {
    background-color: var(--gray-800);
    border: 1px solid var(--gray-700);
}

.cart-empty-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: var(--space-sm);
}
.cart-empty-text {
    color: var(--secondary-text-color); /* --gray-600 */
    margin-bottom: var(--space-md);
}
.cart-empty .btn-primary { /* Ensure button is styled */
    /* Uses .btn .btn-primary from main.css */
}


/* Cart Summary (Sidebar) */
.cart-side {
    /* Takes 1fr in grid on larger screens */
}
.cart-summary {
    background-color: var(--secondary); /* Match cart-items background */
    border-radius: 8px;
    padding: var(--space-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Match cart-items shadow */
}
body[data-theme="dark"] .cart-summary {
    background-color: var(--gray-800); /* Match cart-items dark background */
    border: 1px solid var(--gray-700); /* Match cart-items dark border */
}

.summary-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm); /* Added from checkout reference */
    border-bottom: 1px solid var(--border-color); /* Added from checkout reference */
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.summary-label { color: var(--secondary-text-color); /* --gray-700 */ }
.summary-value { font-weight: 500; text-align: right; }

.summary-divider {
    height: 1px;
    background-color: var(--gray-300);
    margin: var(--space-md) 0; /* Adjusted from var(--space-sm) */
}
body[data-theme="dark"] .summary-divider {
    background-color: var(--gray-600);
}

.summary-total {
    display: flex;
    justify-content: space-between;
    margin: var(--space-md) 0;
    font-weight: 700;
    font-size: 1.125rem;
}

.checkout-btn { /* Extends .btn .btn-primary */
    width: 100%;
    padding: var(--space-sm); /* From reference */
    margin-bottom: var(--space-sm);
}

.promo-code {
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
}
.promo-title {
    font-weight: 600;
    margin-bottom: var(--space-xs);
    font-size: 0.875rem;
}
.promo-form {
    display: flex;
    gap: var(--space-xs);
}
.promo-input {
    flex: 1;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--border-color); /* --gray-300 */
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.875rem;
}
.promo-btn { /* Extends .btn */
    background-color: var(--gray-200);
    border: none;
    padding: var(--space-xs) var(--space-sm);
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--transition);
    color: var(--primary-text-color);
}
.promo-btn:hover { background-color: var(--gray-300); }
body[data-theme="dark"] .promo-btn {
    background-color: var(--gray-700);
    color: var(--gray-100);
}
body[data-theme="dark"] .promo-btn:hover {
    background-color: var(--gray-600);
}
.promo-message {
    font-size: 0.875rem;
    margin-top: var(--space-xs);
}
.promo-message.success { color: #10b981; }
.promo-message.error { color: #ef4444; }


.shipping-note {
    font-size: 0.875rem;
    color: var(--secondary-text-color); /* --gray-600 */
    margin-top: var(--space-md);
    text-align: center;
}

.payment-methods {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    color: var(--gray-500);
    font-size: 0.75rem;
}

/* Recommended Products */
.recommended-products {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
    /* max-width: 900px; from reference, adjust if needed */
    /* margin-left: auto; */
    /* margin-right: auto; */
}
.recommended-products .section-title { /* General section title from main.css or landingpage.css */
    text-align: center;
}
/* .products-grid and .product-card are styled in product_list.css or main.css */

/* Cart Sharing Section Styles */
.cart-sharing-section {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    background-color: var(--secondary); /* Consistent with .cart-summary */
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Consistent with .cart-summary */
}
body[data-theme="dark"] .cart-sharing-section {
    background-color: var(--gray-800); /* Consistent with .cart-summary dark */
    border: 1px solid var(--gray-700); /* Consistent with .cart-summary dark */
}

.cart-sharing-section .section-title {
    font-size: 1.25rem; /* Match .summary-title */
    font-weight: 600;
    margin-top: 0;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-color);
    text-align: left; /* Override general .page-title center align if it's too broad */
}

.cart-sharing-section .messages {
    list-style: none;
    padding: 0;
    margin-bottom: var(--space-md);
}
.cart-sharing-section .messages .alert {
    padding: var(--space-sm);
    margin-bottom: var(--space-sm);
    border-radius: 4px;
    border: 1px solid transparent;
}
.cart-sharing-section .messages .alert-success {
    color: var(--success-text-color, #0f5132);
    background-color: var(--success-bg-color, #d1e7dd);
    border-color: var(--success-border-color, #badbcc);
}
.cart-sharing-section .messages .alert-error {
    color: var(--danger-text-color, #842029);
    background-color: var(--danger-bg-color, #f8d7da);
    border-color: var(--danger-border-color, #f5c2c7);
}
/* Add other alert types (info, warning) if used by Django messages framework */

.share-form, .share-active {
    margin-top: var(--space-md);
}

.share-form .form-group {
    margin-bottom: var(--space-md);
}

.share-form label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--space-xs);
    color: var(--primary-text-color);
}

/* Assuming .form-control styles are defined in core/main.css */
/* If not, add basic styling here: */
.share-form .form-control {
    display: block;
    width: 100%;
    padding: var(--input-padding-y, 0.5rem) var(--input-padding-x, 0.75rem);
    font-size: var(--input-font-size, 1rem);
    font-weight: 400;
    line-height: var(--input-line-height, 1.5);
    color: var(--input-color, #212529);
    background-color: var(--input-bg, #fff);
    background-clip: padding-box;
    border: 1px solid var(--input-border-color, #ced4da);
    appearance: none; /* For select */
    border-radius: var(--input-border-radius, 0.25rem);
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.share-form .form-control:focus {
    border-color: var(--accent-color);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--accent-color-rgb), 0.25); /* Adjust focus shadow as per theme */
}
body[data-theme="dark"] .share-form .form-control {
    color: var(--gray-100);
    background-color: var(--gray-700);
    border-color: var(--gray-600);
}
body[data-theme="dark"] .share-form .form-control:focus {
    border-color: var(--accent-color-dark); /* Assuming a dark theme accent */
    box-shadow: 0 0 0 0.25rem rgba(var(--accent-color-dark-rgb), 0.25);
}


.share-form select.form-control {
    /* Add custom arrow for select if needed, or rely on browser default */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--input-padding-x, 0.75rem) center;
    background-size: 16px 12px;
    padding-right: calc(var(--input-padding-x, 0.75rem) * 2.5); /* Make space for arrow */
}
body[data-theme="dark"] .share-form select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}


.share-form .btn {
    /* Assuming .btn and .btn-primary are styled in core/main.css */
    /* Example: */
    /* padding: var(--btn-padding-y, 0.5rem) var(--btn-padding-x, 1rem); */
    /* font-size: var(--btn-font-size, 1rem); */
    /* border-radius: var(--btn-border-radius, 0.25rem); */
}

.share-active p {
    margin-bottom: var(--space-sm);
    color: var(--primary-text-color);
}
.share-active p.success-message {
    color: var(--success-text-color, #0f5132); /* Or a general positive color from theme */
    font-weight: 500;
}
.share-active code {
    background-color: var(--code-bg-color, #f8f9fa);
    padding: var(--space-xxs) var(--space-xs);
    border-radius: 4px;
    font-family: var(--font-family-monospace);
    color: var(--code-color, #d63384);
    word-break: break-all;
}
body[data-theme="dark"] .share-active code {
    background-color: var(--gray-700);
    color: var(--pink-300); /* Example dark theme code color */
}

.share-active .btn {
    margin-right: var(--space-sm);
    margin-top: var(--space-xs); /* Add some top margin if buttons wrap */
}
.share-active .btn:last-child {
    margin-right: 0;
}