.no-orders-message {
    font-size: 5em; /* Increase the font size */
    font-weight: bold; /* Make the text bold */
    text-align: center; /* Center align the text */
    color: #0000ff70; /* Optionally, change the text color */
    margin-top: 20px; /* Add some space at the top */
}


.right-align {
    text-align: right;
}

/* Item image */
.item-image {
    width: 5rem;
    height: 5rem;
    display: block;
    margin: 0 auto;
}

.content {
    border-radius: 1vw;
    flex-grow: 1;
    padding: 0.1vw;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.tab-header {
    padding: 1px;
    margin: 0;
    top: 0;
    z-index: 1000;
}

.cart-button-container {
    position: relative;
    text-align: right;
    /* Aligns the content (button) to the right */
    padding-top: 0.1vw;
    /* Optional: Add some padding for spacing */
}

/* Add to cart button */
.add-to-cart-btn {
    margin-top: 0.5vw;
    padding: 0.5vw;
    background-color: yellow;
    color: #333;
    border: none;
    border-radius: 5rem;
    cursor: pointer;
    box-shadow: 3px 3px 6px #bebebe, -3px -3px 6px #ffffff;
    /* Neumorphic shadow */
    transition: background-color 0.3s ease;
}

.add-to-cart-btn:hover {
    background-color: yellowgreen;
    /* Slightly darker on hover */
}

#search-container {
    background-color: rgba(0, 0, 128, 0.636);
    color: white;
    z-index: 1;
}

.zidx0 {
    z-index: 0;
}

.navbar .brand-logo {
    width: 15vw;
}

.navbar .brand-name {
    flex-grow: 1;
    text-align: center;
}

.navbar .user-menu {
    cursor: pointer;
}

#searchShop {
    position: sticky;
    top: 5px;
    /* Adjust this value depending on the height of .tab-header */
    z-index: 0;
    padding: 1px;
    margin: 0;
    /* Override inline margin */
    width: 100%;
    /* Ensure it spans the width of the container */
    /* Optional: Adds a shadow for better visibility */
}

.tab-content {
    border-radius: 1vw;
    display: none;
    flex-grow: 1;
    padding: 1vw;
    overflow-y: auto;
}

.tab-content.active {
    display: block;
}

.tabs {
    display: flex;
    justify-content: space-around;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

/* Modal styling */
.itmmodal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 100;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black background with opacity */
}

/* Modal Content */
.itmmodal-content {
    background-color: #fefefe;
    /* White background */
    margin: auto;
    /* Centering the content */
    padding: 5px;
    border: 1px solid #888;
    width: 90%;
    /* Reduced width for a better fit */
    max-width: 95vw;
    /* Maximum width should be 95% of viewport width */
    max-height: 90vh;
    /* Maximum height should be 90% of viewport height */
    overflow: auto;
    /* Add scrollbars if content exceeds max-height */
    position: relative;
    /* Position relative for the close button */
    box-sizing: border-box;
    /* Include padding and border in the element's total width and height */
}


#modal-add-to-cart {
    background-color: yellow;
    /* Set the background color to yellow */
    color: navy;
    /* Set the text color to black for contrast */
    font-size: 2rem;
    /* Increase the font size for better readability */
    padding: 1px 2px;
    /* Add padding for a larger clickable area */
    border: white;
    /* Remove any default button border */
    border-radius: 5px;
    /* Rounded corners for a softer appearance */
    cursor: pointer;
    /* Change the cursor to a pointer when hovering */
    display: inline-block;
    /* Allows margin and padding adjustments */
    margin-top: 1px;
    /* Adds space above the button */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* Adds a subtle shadow for depth */
    text-align: center;
    /* Centers the button text */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    /* Smooth transition for hover effects */
}

/* Hover effect */
#modal-add-to-cart:hover {
    background-color: #ffcc00;
    /* Darker yellow for hover state */
    box-shadow: 0 4px 1px rgba(0, 0, 0, 0.3);
    /* Slightly larger shadow on hover */
}

/* Active effect */
#modal-add-to-cart:active {
    background-color: #e6b800;
    /* Even darker yellow for active state */
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
    /* Return to original shadow on click */
}

/* Focus effect */
#modal-add-to-cart:focus {
    outline: none;
    /* Remove default focus outline */
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.5);
    /* Add a focus ring */
}


/* Close button */
.close {
    color: #aaa;
    background-color: red;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    /* Positioning close button */
    top: 10px;
    /* Adjust as needed */
    right: 15px;
    /* Adjust as needed */
}

/* Close button hover effect */
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Quantity control */
.quantity-control {
    display: flex;
    justify-content: center;
    align-items: center;
}

.quantity-control button {
    width: 3vw;
    height: 3vw;
    background-color: #e0e0e0;
    color: red;
    border: none;
    border-radius: 0.5vw;
    cursor: pointer;
    box-shadow: 3px 3px 6px #bebebe, -3px -3px 6px #ffffff;
    /* Neumorphic shadow */
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.1vw;
}

.quantity-control input {
    width: 10vw;
    /* Adjusted width for consistency */
    text-align: center;
    border: none;
    border-radius: 0.5vw;
    margin: 0 0.1vw;
    /* Adjusted margin for better spacing */
    box-shadow: inset 1px 1px 2px #bebebe, inset -1px -1px 2px #ffffff;
    /* Neumorphic shadow */
}

/* Footer styling */
footer {
    text-align: center;
    padding: 0.1vw 0;
    /* Increased padding for better spacing */
}

.footer-content p {
    color: navy;
    /* Text color */
    text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF,
        0 0 20px #F4A460, 0 0 30px #F4A460,
        0 0 40px #F4A460, 0 0 55px #F4A460, 0 0 75px #fb7805;
    margin: 0;
    padding: 0.5vw;
    /* Increased padding for consistency */
}

/* Product table styling */
.product-table {
    width: 100%;
    /* Set full width by default */
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    margin: 0.1vw 0.1vw;
    box-shadow: 0 0 1vw rgba(30, 4, 230, 0.379);
    color: navy;
    border-radius: 1rem;
}

.product-table td {
    padding: 0.1vw;
    text-align: center;
}

/* Product container */
.product-container {
    padding: 0.1vw;
    /* Consistent padding */
}

/* Product list */
#product-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1vw;
    align-items: stretch;
}

/* Product card */
.product-card {
    border-radius: 1rem;
    padding: 0.1vw;
    margin: 0.5vw;
    width: 42vw;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}


.cartTable {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 14px;
    margin: 0.2vw 0;
    box-shadow: 0 0 0.1vw rgba(30, 4, 230, 0.379);
    color: navy;
}


.notification {
    background-color: #555;
    color: white;
    text-decoration: none;
    padding: 15px 26px;
    position: relative;
    display: inline-block;
    border-radius: 2px;
}

.notification:hover {
    background: red;
}

.notification .badge {
    position: absolute;
    top: -10px;
    right: -1px;
    padding: 5px 10px;
    border-radius: 50%;
    background-color: rgba(255, 0, 0, 0.501);
    color: white;
}

/* Responsive styles for tablets and up */
@media screen and (min-width: 768px) {
    .product-container {
        padding: 0.1vw;
        /* Adjusted padding */
    }

    .product-card {
        width: 20vw;
        /* Adjust width to display multiple cards in a row */
        margin: 0.5vw;
    }

    .product-table {
        width: 100%;
        /* Allow the table to take full width */
        max-width: 5%;
        /* Ensure table does not grow beyond this width */
        margin: 0 auto;
        /* Center table if it shrinks */
    }

    .product-table td {
        padding: 1vw;
        /* Reduced padding for more compact layout */
    }

    .item-image {
        width: 9rem;
        /* Slightly larger image for bigger screens */
        height: 9rem;
    }

    .quantity-control button {
        width: 2vw;
        height: 2vw;
    }

    .quantity-control input {
        width: 3vw;
    }

}

/* Responsive styles for desktops and larger screens */
@media screen and (min-width: 1024px) {
    .product-card {
        width: 7vw;
        /* Smaller width for large screens to display more cards */
        margin: 0.1vw;
    }

    .product-table {
        width: 100%;
        /* Allow the table to take full width */
        max-width: 5%;
        /* Ensure table does not grow beyond this width */
        margin: 0 auto;
        /* Center table if it shrinks */
    }

    .product-table td {
        padding: 0.1vw;
        /* Compact padding for desktops */
    }

    .item-image {
        width: 5rem;
        /* Larger image for desktop */
        height: 5rem;
    }


    .quantity-control button {
        width: 1vw;
        height: 1vw;
    }

    .quantity-control input {
        width: 2vw;
    }

    /* Product list */
    #product-list {
        gap: 0.5vw;
    }

}


/* Responsive design for smaller screens */
@media (max-width: 300px) {
    .footer {
        flex-direction: column;
        align-items: center;
    }

    .footer button {
        width: 100%;
        max-width: 100px;
        /* Ensures buttons don't become too wide */
        color: navy;
    }
}