/* Responsive Design for Cart Page */

/* Medium Screens (Tablets) */
@media (max-width: 768px) {
    #cart {
        padding-top: 0;
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* Small Screens (Mobile) */
@media (max-width: 480px) {
    #cart {
        padding-top: 0;
        padding-left: 5px;
        padding-right: 5px;
    }

    #cart-items {
        margin-bottom: 0px;
    }

    .cart-item {
        display: flex;
        flex-direction: column; /* Stack everything vertically */
        align-items: flex-start;
        padding: 10px 0;
        border-bottom: 1px solid #ccc; /* Split line under each item */
        position: relative; /* Enable absolute positioning for child elements */
    }

    .cart-item img {
        width: 100%; /* Make the image take full width */
        max-width: 200px; /* Limit the image size */
        height: auto;
        object-fit: cover;
        margin-bottom: 10px; /* Space between the image and details */
    }

    .cart-item-details {
        width: 100%; /* Make the details take full width */
        text-align: left;
        font-size: 14px;
        margin-bottom: 10px; /* Space between the details and controls */
        margin-left: 0px;
    }

    .cart-item-details h3 {
        font-size: 16px;
        margin: 0;
        text-align: left; /* Align text to the left edge */
    }

    .cart-item-details p {
        font-size: 14px;
        margin: 5px 0;
        text-align: left; /* Align text to the left edge */
    }

    .cart-item-controls {
        display: flex;
        justify-content: flex-start; /* Align controls to the left */
        align-items: center;
        width: 100%; /* Make the controls take full width */
    }

    .quantity-btn {
        height: 30px;
        font-size: 14px;
        width: 40px;
    }

    .quantity-input {
        height: 30px;
        font-size: 14px;
        width: 50px;
        text-align: center;
        margin: 0 5px;
    }

    /* Restore and position the remove button */
    .cart-item-remove {
        position: absolute;
        top: 5px;
        right: 25px;
        font-size: 28px;
        color: rgb(161, 161, 161);
        cursor: pointer;
    }

    #cart-summary {
        margin-top: 0px;
        padding: 15px 10px;
    }

    #cart-summary p {
        font-size: 16px;
    }

    .cart-buttons {
        margin-top: 0px;
    }

    #proceed-to-checkout, #back-to-shop {
        padding: 8px 16px; /* Adjust padding to make buttons smaller */
        font-size: 14px;
        width: auto; /* Allow the button width to adjust based on content */
        display: inline-block; /* Make buttons inline-block so they adjust to content */
    }

    #proceed-to-checkout {
        margin-left: auto; /* Align the proceed to checkout button to the right */
    }
}