/* General Styles */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    line-height: 1.6;
    background-color: #fdfaf6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: space-between; /* Ensure footer stays at bottom if content is small */
}

a {
    text-decoration: none;
    color: inherit;
}

h1, h2, h3 {
    margin: 0;
    font-weight: normal;
}

/* Header Styles */
header, header nav {
    background-color: #6f4e37; /* Coffee brown background */
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Navbar Links Styling */
.navbar-nav .nav-link {
    color: white; /* Set specific link color */
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: #f0a500; /* Golden hover effect */
}

.navbar-brand h1 {
    color: white;
    transition: color 0.3s ease;
}

.navbar-brand h1:hover {
    color: #f0a500; /* Golden hover effect */
}

/* Logout Button Styling */
.logout-button {
    background: transparent; /* Makes the background transparent */
    border: none; /* Removes any border */
    color: inherit; /* Inherits text color from parent, or set a specific color like white or black */
    text-decoration: none; /* Removes underline from the link */
    padding: 10px 20px; /* Adjust padding as needed */
    font-size: 16px; /* Adjust font size */
    cursor: pointer; /* Makes it look like a clickable button */
    transition: color 0.3s ease; /* Smooth color transition */
}

.logout-button:hover {
    color: #e9dfdf; /* Changes text color on hover */
}

/* Hero Section */
#hero h2 {
    font-size: 2.5em;
    margin-bottom: 10px;
    color: #f4f1f1; /* Light text color for visibility */
}

#hero p {
    font-size: 1.2em;
    margin-bottom: 20px;
}

#hero .btn {
    background-color: #f0a500; /* Golden button */
    color: #333;
    padding: 10px 20px;
    font-size: 1em;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: bold;
    transition: background-color 0.3s;
}

#hero .btn:hover {
    background-color: #d48c00; /* Darker golden */
}

/* About Section */
#about {
    padding: 40px 20px;
    text-align: center;
    background-color: #fdfaf6;
}

#about h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

#about p {
    font-size: 1.1em;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
    color: #555;
}

/* Product Section */
#products {
    padding: 40px 20px;
    background-color: #fff;
    max-width: 1200px; /* Limit the width on larger screens to avoid stretching */
    margin: 0 auto; /* Center the content horizontally */
}

#products h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.5em; /* Larger heading for better visibility */
    color: #333;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Auto-fill with a minimum column width */
    gap: 15px;
    grid-auto-rows: 1fr; /* Ensures uniform row heights */
    padding: 0 20px; /* Adds padding for better spacing */
    justify-items: center; /* Center items within their grid cells */
}

.product {
    background-color: #fdfaf6;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle default shadow */
    max-width: 300px; /* Prevents the product from becoming too wide */
    width: 100%;
}

/* Buy Now Button Styling */
.product .buy-now-btn {
    display: none; /* Hidden by default */
    margin-top: 10px;
}

.product:hover .buy-now-btn {
    display: block; /* Show on hover */
}

.buy-now-btn .btn {
    background-color: #f0a500; /* Golden button */
    color: #333;
    padding: 10px 20px;
    font-size: 1em;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s;
}

.buy-now-btn .btn:hover {
    background-color: #d48c00; /* Darker golden */
    color: #fff;
}

/* General "Buy Now" Button Styles */
.product .buy-now {
    display: none;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #6f4e37; /* Coffee brown */
    color: white;
    padding: 10px 20px;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    z-index: 10;
    transition: opacity 0.3s ease;
}

/* For Larger Screens (Hover Effect) */
@media (min-width: 769px) {
    .product {
        position: relative;
        transition: all 0.3s ease; /* Smooth transition for hover effects */
    }

    .product .buy-now {
        display: none; /* Initially hidden */
        opacity: 0; /* Start with hidden opacity */
        transition: opacity 0.3s ease; /* Smooth fade-in effect */
    }

    .product:hover .buy-now {
        display: block; /* Show on hover */
        opacity: 1; /* Fade-in effect on hover */
    }
}

/* For Smaller Screens (Click Effect) */
@media (max-width: 768px) {
    .product {
        position: relative;
        transition: all 0.3s ease; /* Smooth transition for click effects */
    }

    .product .buy-now {
        display: none; /* Initially hidden */
        opacity: 0; /* Start with hidden opacity */
        transition: opacity 0.3s ease; /* Smooth fade-in effect */
    }

    .product.clicked .buy-now {
        display: block; /* Show on click */
        opacity: 1; /* Fade-in effect on click */
    }
}



.product img {
    width: 100%;
    max-width: 250px; /* Adjust for better image size control */
    height: auto;
    border-radius: 10px;
    margin-bottom: 10px;
}

.product h3 {
    font-size: 1.6em; /* Slightly increased font size */
    margin-bottom: 10px;
    color: #6f4e37;
}

.product p {
    font-size: 1em;
    color: #555;
}

.product:hover {
    transform: translateY(-8px); /* Slightly higher movement on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
    #products h2 {
        font-size: 2em; /* Adjusted for smaller screens */
    }

    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Smaller columns for tablets */
    }

    .product img {
        max-width: 200px; /* Adjust image size for smaller devices */
    }
}

@media (max-width: 480px) {
    #products h2 {
        font-size: 1.8em; /* Even smaller font for mobile */
    }

    .product-grid {
        grid-template-columns: 1fr; /* Stack products in a single column on mobile */
    }

    .product img {
        max-width: 180px; /* Adjust image size for mobile */
    }
}

@media (min-width: 1200px) {
    #products {
        padding: 20px 20px; /* Increased padding for large screens */
    }

    .product-grid {
        grid-template-columns: repeat(4, 1fr); /* Set to 4 columns for large screens */
        gap: 15px; /* Increase space between items */
    }
}

@media (min-width: 1600px) {
    #products {
        max-width: 1400px; /* Expand the max-width for very large screens */
        padding: 20px 20px; /* Increased padding for very large screens */
    }

    .product-grid {
        grid-template-columns: repeat(5, 1fr); /* Set to 5 columns for extra-large screens */
        gap: 10px; /* Increase space between items */
    }
}

/* Form Styles */
form {
    background-color: #fff;
    padding: 20px;
    margin: 20px auto;
    width: 95%;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

form h1 {
    font-size: 2em;
    text-align: center;
    margin-bottom: 20px;
}

form label {
    font-size: 1.1em;
    display: block;
    margin-bottom: 8px;
}

form select,
form input[type="checkbox"],
form input[type="text"],
form input[type="email"],
form input[type="password"] {
    width: 95%;
    padding: 10px;
    margin-bottom: 15px;
    font-size: 1em;
    border-radius: 5px;
    border: 1px solid #ddd;
}

form select:focus,
form input[type="checkbox"]:focus,
form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus {
    border-color: #6f4e37;
    outline: none;
}

form button {
    background-color: #6f4e37; /* Coffee brown */
    color: white;
    font-size: 1.2em;
    padding: 12px 20px;
    border-radius: 5px;
    border: none;
    width: 100%;
    transition: background-color 0.3s;
}

form button:hover {
    background-color: #f0a500; /* Golden accent */
}

/* Flavouring Checkboxes */
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.checkbox-group label {
    font-size: 1em;
}

.checkbox-group input {
    margin-right: 8px;
}

/* Flavour Warning Modal */
.warning {
    color: red;
    font-weight: bold;
    font-size: 1.1em;
    margin-top: 10px;
    display: none; /* Hidden by default, shown only when needed */
    padding: 10px;
    background-color: #ffe6e6; /* Light red background */
    border: 1px solid red;
    border-radius: 5px;
    text-align: center;
}

/* Button Styling */
.btn {
    padding: 10px 20px;
    font-size: 1em;
    border-radius: 5px;
    background-color: #6f4e37;
    color: white;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #f0a500;
}

/* Order Button Section */
.order-btn-wrapper {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.order-btn {
    padding: 20px; /* Optional padding around the button */
}

.order-btn .btn {
    background-color: #6f4e37; /* Coffee brown background */
    color: white;
    padding: 12px 20px;
    font-size: 1.2em;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.order-btn .btn:hover {
    background-color: #f0a500; /* Golden accent */
}

/* Footer Styles */
footer {
    background-color: #6f4e37; /* Matching coffee brown background */
    color: white;
    padding: 20px 0;
    text-align: center; /* Centers the text */
    font-size: 1em;
}

footer .footer-links {
    list-style: none;
    display: flex;
    justify-content: center; /* Center the footer links */
    gap: 20px; /* Space between links */
    margin-bottom: 20px; /* Space between links and copyright */
}

footer .footer-links li {
    display: inline-block;
}

footer .footer-links a {
    color: white;
    font-size: 1.1em;
    transition: color 0.3s;
}

footer .footer-links a:hover {
    color: #f0a500; /* Golden hover effect */
}