/* START OF FILE css/cart.css */

/* Main Page Title */
main > h1 { /* Target only the main h1 on the page */
    color: var(--text-light); /* White title */
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.8rem; /* Adjust size */
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* Empty Cart State - Uses component styling */
/* #empty-cart-message {} */ /* Styles provided by components.css */

/* Cart Layout Grid */
.cart-layout {
    display: grid;
    /* Adjust ratio - more space for items maybe? */
    grid-template-columns: 1.8fr 1fr;
    gap: 30px; /* Good gap */
    margin-top: 20px;
}

/* Cart Items Container - White Card */
#cart-items-container {
    background-color: var(--card-bg); /* White */
    color: var(--text-dark); /* Dark text inside */
    padding: 20px 25px; /* Adjust padding */
    border-radius: 12px; /* Consistent rounding */
    box-shadow: var(--shadow-light);
    min-height: 200px; /* Prevent collapsing when empty initially */
}
/* Loading state within items container - Uses component styling */
/* #cart-items-container .loading-placeholder {} */


/* Individual Cart Item */
.cart-item {
    display: grid;
    /* Columns: Image (auto width), Details (fill space), Controls (auto width) */
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px; /* Gap between columns */
    padding: 20px 0; /* Vertical padding */
    border-bottom: 1px solid var(--border-color-light); /* Light border */
}
.cart-item:last-child {
    border-bottom: none; /* No border on last item */
}

/* Cart Item Image */
.cart-item-image img {
    width: 85px; /* Slightly smaller image */
    height: 85px;
    object-fit: cover;
    border-radius: 8px; /* Rounded corners */
    border: 1px solid var(--border-color-light);
    display: block;
}

/* Cart Item Details */
.cart-item-details {
    padding-right: 15px; /* Add some space before controls */
}
.cart-item-details h3 { /* Product Name */
    margin-bottom: 6px;
    color: var(--text-dark);
    font-size: 1.1em; /* Clear font size */
    font-weight: 600; /* Semi-bold */
    line-height: 1.4;
}
.cart-item-price, .cart-item-subtotal { /* Unit Price & Subtotal */
    font-size: 0.9em;
    color: var(--secondary-color); /* Muted gray */
    margin-bottom: 4px;
    line-height: 1.3;
}
.cart-item-subtotal strong { /* Make subtotal value stand out */
    font-weight: 600;
    color: var(--text-dark); /* Darker subtotal value */
}

/* Cart Item Controls */
.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 8px; /* Gap between buttons/display */
}

/* Reuse quantity styles from product page for consistency */
.cart-item-controls .quantity-btn {
    background-color: var(--white);
    border: 1px solid var(--border-color-light);
    color: var(--text-dark);
    width: 30px; /* Adjust size */
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8em; /* Icon size */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.cart-item-controls .quantity-btn:hover {
    background-color: #f9fafb;
    border-color: #d1d5db;
}

.cart-item-controls .quantity-display {
    min-width: 35px; /* Ensure space for quantity */
    text-align: center;
    font-weight: 600; /* Bold quantity */
    font-size: 1.05em;
    color: var(--text-dark);
    padding: 0 5px; /* Horizontal padding */
}

.cart-item-controls .remove-btn {
    background: none;
    border: none;
    color: var(--text-muted); /* Muted gray icon */
    font-size: 1.1em; /* Icon size */
    cursor: pointer;
    padding: 8px; /* Increase clickable area */
    margin-left: 5px; /* Space after quantity */
    transition: color 0.2s ease, transform 0.1s ease;
    border-radius: 50%; /* Optional: round hover bg */
}
.cart-item-controls .remove-btn:hover {
    color: var(--error-color); /* Red on hover */
    background-color: rgba(239, 68, 68, 0.05); /* Subtle red background */
    transform: scale(1.1);
}

/* --- Cart Summary Section --- */
#cart-summary {
    background-color: var(--transparent-dark-bg); /* Dark transparent */
    padding: 30px; /* Generous padding */
    border-radius: 12px; /* Match item container */
    position: sticky;
    top: calc(var(--header-height) + 30px); /* Adjust sticky offset */
    height: fit-content; /* Prevent stretching */
}

#cart-summary h2 { /* Summary Title */
    text-align: left;
    margin-bottom: 25px; /* Space below title */
    font-size: 1.4em; /* Title size */
    font-weight: 700;
    border-bottom: 1px solid var(--border-color-subtle); /* Subtle border */
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-light); /* White text */
}

.summary-line { /* Styling for each line (Items, etc.) */
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 1rem;
    color: var(--text-light); /* White text */
}
.summary-line span:last-child {
    font-weight: 600; /* Bolder value */
}

.summary-line.total { /* Styling for the Total line */
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed var(--border-color-subtle); /* Dashed separator */
    font-size: 1.2em; /* Larger total */
    font-weight: 700; /* Bold total text */
}
.summary-line.total strong { /* Styling for the total price value */
    color: var(--primary-color); /* Yellow price */
}

/* Checkout Options Area */
#checkout-options {
    margin-top: 30px;
}
#checkout-options h3 { /* Checkout Heading */
    font-size: 1.2em;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-light); /* White text */
    font-weight: 600;
}

/* Login Prompt in Checkout */
#checkout-login-prompt {
    background-color: rgba(59, 130, 246, 0.1); /* Info blue background */
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.95em;
    color: var(--info-color); /* Info blue text */
    border: 1px solid rgba(59, 130, 246, 0.3);
    display: flex;
    align-items: center;
    gap: 10px;
}
#checkout-login-prompt a {
    color: var(--primary-color); /* Yellow link */
    font-weight: 600;
}
#checkout-login-prompt a:hover {
    color: var(--primary-color-dark);
}

/* Checkout Buttons Container */
#checkout-buttons-container {
    display: none; /* Shown by JS */
}
#checkout-buttons-container .btn {
    width: 100%;
    margin-bottom: 12px; /* Space between buttons */
    /* Inherits global .btn styles (pill shape, etc.) */
}
#checkout-buttons-container .btn:last-child {
    margin-bottom: 0;
}

/* START: Add Address Section Styling */

/* Container for the address field in checkout */
#shipping-address-section {
    margin-top: 25px; /* Space above the address section */
    border-top: 1px dashed var(--border-color-subtle); /* Separator */
    padding-top: 25px; /* Space below separator */
}

#shipping-address-section h4 {
    font-size: 1.1em; /* Slightly smaller than summary H3 */
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-light); /* White text */
    font-weight: 600;
}

/* Styling for the address textarea */
#shipping-address {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color-subtle); /* Subtle border on dark bg */
    background-color: rgba(255, 255, 255, 0.05); /* Very subtle light background */
    color: var(--text-light); /* White text */
    border-radius: 6px;
    font-size: 0.95em;
    font-family: var(--font-main);
    transition: border-color 0.3s ease, background-color 0.3s ease;
    min-height: 80px; /* Minimum height for ~4 rows */
    resize: vertical; /* Allow user to resize vertically */
}

#shipping-address::placeholder {
    color: var(--text-muted); /* Muted placeholder text */
    opacity: 0.8;
}

#shipping-address:focus {
    outline: none;
    border-color: var(--primary-color); /* Yellow focus border */
    background-color: rgba(255, 255, 255, 0.08);
    /* Optional focus shadow if needed */
    /* box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.3); */
}

/* Helper text below the textarea */
#shipping-address-section .form-group small {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    color: var(--text-muted); /* Muted gray */
    font-size: 0.85em;
}

/* END: Add Address Section Styling */

/* --- Adjustments for Responsive --- */
@media (max-width: 480px) {
    #shipping-address-section h4 {
        font-size: 1em;
    }
    #shipping-address {
        font-size: 0.9em;
        min-height: 70px;
    }
}

/* Checkout Message Area - Uses component styling */
/* #checkout-message {} */


/* --- Cart Responsive Adjustments --- */
@media (max-width: 992px) {
    .cart-layout {
        grid-template-columns: 1fr; /* Stack columns */
    }
    #cart-summary {
        position: static; /* Summary is no longer sticky */
        margin-top: 30px; /* Add space when stacked */
    }
}

@media (max-width: 768px) {
    #cart-items-container {
        padding: 15px 20px; /* Reduce padding */
    }
    .cart-item {
        /* Adjust grid for smaller screens if needed, or keep */
        grid-template-columns: auto 1fr; /* Image, Details+Controls */
        grid-template-rows: auto auto; /* Allow details/controls to wrap */
        gap: 10px 15px; /* Row gap, Column gap */
        padding: 15px 0;
    }
     .cart-item-image { grid-row: 1 / 3; } /* Image spans both rows */
     .cart-item-image img { width: 75px; height: 75px;}
     .cart-item-details { grid-column: 2; grid-row: 1; text-align: left; padding-right: 0;}
     .cart-item-controls { grid-column: 2; grid-row: 2; justify-self: start; }
}

@media (max-width: 480px) {
    main > h1 {
        font-size: 1.6rem;
        margin-bottom: 20px;
    }
    #cart-items-container {
        padding: 10px 15px;
        border-radius: 8px;
    }
    .cart-item {
        display: flex; /* Switch back to flex for simpler stacking */
        flex-direction: column;
        align-items: center; /* Center items */
        text-align: center;
        gap: 15px;
        padding: 15px 0;
    }
      .cart-item-image img { width: 100px; height: 100px; }
     .cart-item-details { text-align: center; padding-right: 0;}
     .cart-item-controls { justify-content: center; width: 100%; }
     .cart-item-details h3 { font-size: 1em;}

     #cart-summary {
         padding: 20px;
         border-radius: 8px;
     }
     #cart-summary h2 { font-size: 1.3em; margin-bottom: 20px; padding-bottom: 10px;}
     .summary-line { font-size: 0.95rem; }
     .summary-line.total { font-size: 1.1em; }
      #checkout-options h3 { font-size: 1.1em;}
      #checkout-login-prompt { font-size: 0.9em; padding: 10px 12px;}
}

/* END OF FILE css/cart.css */