/* --- Global Resets & Base Styles --- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth; /* Smooth scrolling for anchor links */
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: #333; /* Dark grey for text */
    background-color: #f8f9fa; /* Light grey background */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure footer stays at bottom */
    font-weight: 400; /* Regular weight */
}

/* --- Layout Container --- */
.container {
    width: 90%; /* Responsive width */
    max-width: 1140px; /* Max width for large screens */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px; /* Consistent padding */
    padding-right: 15px;
}

/* --- Main Content Area --- */
.main-content {
    flex: 1; /* Allows main content to grow and push footer down */
    padding-top: 2rem;
    padding-bottom: 3rem;
}

/* --- Links --- */
a {
    color: #28a745; /* Bootstrap green */
    text-decoration: none;
    transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

a:hover {
    color: #218838; /* Darker green on hover */
    text-decoration: underline; /* Underline on hover for clarity */
}

/* --- Images --- */
img {
    max-width: 100%; /* Responsive images */
    height: auto;    /* Maintain aspect ratio */
    display: block;  /* Remove extra space below image */
    border-radius: 4px; /* Slightly rounded corners for images */
}

/* --- Headings --- */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.75rem;
    font-weight: 500; /* Medium weight for headings */
    line-height: 1.3;
    color: #212529; /* Slightly darker than body text */
}

h1 { font-size: 2.2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.5rem; }

/* --- Header & Navigation --- */
.site-header {
    background-color: #ffffff; /* White background */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    position: sticky; /* Keep header visible on scroll */
    top: 0;
    z-index: 1020; /* Ensure header is above other content */
    padding: 0.5rem 0; /* Vertical padding */
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.6rem;
    font-weight: 700; /* Bold */
    color: #343a40; /* Dark grey logo */
    text-decoration: none;
}
.logo:hover {
    text-decoration: none;
    opacity: 0.9;
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0; /* Reset default ul margin */
    padding: 0; /* Reset default ul padding */
}

.nav-links li {
    margin-left: 1.5rem; /* Spacing between nav items */
}

.nav-links a {
    font-weight: 500; /* Medium weight for nav links */
    color: #495057; /* Grey nav links */
    padding: 0.5rem 0.25rem; /* Padding for easier clicking */
    text-decoration: none;
    position: relative;
}
.nav-links a:hover {
    color: #28a745; /* Green on hover */
    text-decoration: none;
}
/* Optional: Add underline animation on hover */
.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #28a745;
    transition: width 0.3s ease;
}
.nav-links a:hover::after {
    width: 100%;
}


/* --- Footer --- */
.site-footer {
    background-color: #e9ecef; /* Light grey footer */
    color: #6c757d; /* Muted text color */
    text-align: center;
    padding: 1.5rem 0;
    margin-top: auto; /* Pushes footer to bottom */
    font-size: 0.9rem;
}

/* --- Buttons --- */
.button, button, input[type="submit"] {
    display: inline-block;
    font-weight: 500;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: #28a745; /* Green */
    border: 1px solid #28a745;
    padding: 0.6rem 1.2rem; /* Comfortable padding */
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem; /* Standard border radius */
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, transform 0.1s ease;
    text-decoration: none; /* Remove underline if it's an <a> tag */
}

.button:hover, button:hover, input[type="submit"]:hover {
    color: #fff;
    background-color: #218838; /* Darker green */
    border-color: #1e7e34;
    text-decoration: none;
}

.button:focus, button:focus, input[type="submit"]:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); /* Green focus ring */
}

.button:active, button:active, input[type="submit"]:active {
    transform: scale(0.98); /* Slight shrink on click */
    background-color: #1e7e34;
    border-color: #1c7430;
}

.button:disabled, button:disabled, input[type="submit"]:disabled {
    background-color: #28a745;
    border-color: #28a745;
    opacity: 0.65;
    cursor: not-allowed;
}

/* Secondary Button Style */
.button-secondary {
    color: #fff;
    background-color: #6c757d; /* Grey */
    border-color: #6c757d;
}
.button-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}
.button-secondary:focus {
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}
.button-secondary:active {
    background-color: #545b62;
    border-color: #4e555b;
}

/* Danger Button Style */
.button-danger {
    color: #fff;
    background-color: #dc3545; /* Red */
    border-color: #dc3545;
}
.button-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}
.button-danger:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}
.button-danger:active {
    background-color: #bd2130;
    border-color: #b21f2d;
}

/* --- Product Grid (Homepage) --- */
.product-grid {
    display: grid;
    /* Responsive columns: 1 on small, 2 on medium, 3 on large */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem; /* Space between cards */
    margin-top: 2rem;
}

.product-card {
    background-color: #fff;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    overflow: hidden; /* Keep image corners rounded */
    display: flex;
    flex-direction: column; /* Stack image, content, footer */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.product-card:hover {
    transform: translateY(-4px); /* Lift effect on hover */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08); /* Stronger shadow on hover */
}

.product-card a {
    text-decoration: none;
    color: inherit; /* Inherit text color */
}
.product-card a:hover {
    text-decoration: none;
}

.product-card .product-image img {
    width: 100%;
    height: 220px; /* Fixed height for uniform look */
    object-fit: cover; /* Scale image nicely */
    border-top-left-radius: 8px; /* Match card radius */
    border-top-right-radius: 8px;
    border-bottom: 1px solid #eee; /* Separator line */
}

.product-card-content {
    padding: 1rem 1.2rem; /* Padding inside the card */
    flex-grow: 1; /* Allow content to take available space */
    display: flex;
    flex-direction: column;
}

.product-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}
.product-card h3 a:hover {
    color: #28a745; /* Green heading on hover */
}

.product-card .price {
    font-size: 1.15rem;
    font-weight: 700; /* Bold price */
    color: #28a745; /* Green price */
    margin-top: auto; /* Push price and button to bottom */
    margin-bottom: 1rem;
}

.product-card .button {
    width: 100%; /* Button takes full width */
    margin-top: 0.5rem;
}

/* --- Product Detail Page --- */
.product-detail-container {
    background-color: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
    margin-top: 1rem;
}

.product-detail {
    display: grid;
    /* 2 columns on medium screens and up, 1 column below */
    grid-template-columns: 1fr; /* Default to 1 column */
    gap: 2.5rem; /* Space between image and info */
    align-items: start; /* Align items to the top */
}

/* Media query for medium screens and up */
@media (min-width: 768px) {
    .product-detail {
        grid-template-columns: 1fr 1fr; /* 2 equal columns */
    }
}

.product-detail .product-image-main img {
    width: 100%;
    height: auto;
    max-height: 550px; /* Limit image height */
    object-fit: contain; /* Show full image, possibly with whitespace */
    border-radius: 6px;
    border: 1px solid #eee;
}

.product-info h1 {
    margin-bottom: 1rem;
    font-size: 2.1rem;
    font-weight: 700;
}

.product-info .price {
    font-size: 1.7rem;
    font-weight: 700; /* Bold */
    color: #28a745; /* Green */
    margin-bottom: 1.5rem;
}

.product-info .description {
    margin-bottom: 1.5rem;
    line-height: 1.7;
    color: #495057; /* Slightly lighter text for description */
}
.product-info .description p {
    margin-bottom: 1em; /* Space between paragraphs */
}

.product-info .button {
    padding: 0.8rem 1.5rem; /* Larger button */
    font-size: 1.1rem;
}

.back-link {
    display: inline-block;
    margin-top: 2rem;
    color: #6c757d;
    font-size: 0.9rem;
}
.back-link:hover {
    color: #343a40;
}


/* --- Cart Page --- */
.cart-container, .checkout-container {
    background-color: #fff;
    padding: 1.5rem 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    margin-top: 1rem;
}

.cart-items-list {
    list-style: none;
    margin-bottom: 2rem;
    padding: 0;
}

.cart-item {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #e9ecef; /* Light border */
}
.cart-item:last-child {
    border-bottom: none;
}

.cart-item-image img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    margin-right: 1.5rem;
    border-radius: 4px;
    flex-shrink: 0; /* Prevent image from shrinking */
}

.cart-item-info {
    flex-grow: 1;
    margin-right: 1rem; /* Space before price/actions */
    min-width: 150px; /* Prevent info from getting too narrow */
}

.cart-item-info h4 {
    margin-bottom: 0.25rem;
    font-weight: 500;
    font-size: 1.1rem;
}

.cart-item .price {
    font-weight: 500;
    min-width: 80px; /* Ensure price aligns somewhat */
    text-align: right;
    margin-right: 1.5rem;
}

.cart-item-actions {
    display: flex;
    align-items: center;
}

.cart-item-actions .quantity {
     margin-right: 1rem;
     color: #6c757d;
}

.cart-item-actions button.remove-btn {
    background: none;
    border: none;
    color: #dc3545; /* Red */
    cursor: pointer;
    font-size: 1.3rem; /* Make X larger */
    padding: 0.2rem 0.5rem;
    line-height: 1;
    transition: color 0.2s ease;
}
.cart-item-actions button.remove-btn:hover {
    color: #a71d2a; /* Darker red */
}

.cart-summary {
    margin-top: 2rem;
    text-align: right;
    border-top: 2px solid #dee2e6; /* Slightly darker top border */
    padding-top: 1.5rem;
}

.cart-summary h3 {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}
.cart-summary .button {
    margin-left: 1rem;
}
.cart-summary .button-secondary {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #343a40;
}
.cart-summary .button-secondary:hover {
    background-color: #e2e6ea;
    border-color: #ced4da;
}


/* --- Checkout Form --- */
.checkout-form {
    max-width: 650px;
    margin: 1rem auto; /* Center form */
    /* Styles inherited from .checkout-container */
}

.checkout-form h2 {
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 700;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.95rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #ced4da; /* Standard Bootstrap border color */
    border-radius: 0.25rem;
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-group input:focus,
.form-group textarea:focus {
    outline: 0;
    border-color: #80bdff; /* Blue focus border */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Blue focus shadow */
}
.form-group textarea {
    min-height: 80px; /* Minimum height for textarea */
    resize: vertical; /* Allow vertical resizing */
}

.checkout-actions {
    display: flex;
    justify-content: space-between; /* Align buttons */
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e9ecef;
}

/* --- Thank You Page --- */
.thank-you-message {
    text-align: center;
    padding: 3rem 1rem;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}
.thank-you-message h1 {
    color: #28a745; /* Green heading */
    margin-bottom: 1rem;
}
.thank-you-message p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: #495057;
}


/* --- Admin Styles --- */
.admin-section {
    padding-top: 1rem;
    padding-bottom: 2rem;
}
.admin-section h1, .admin-section h2 {
    margin-bottom: 1.5rem;
}

/* Admin Table */
.admin-table-wrapper {
    overflow-x: auto; /* Allow horizontal scrolling on small screens */
    margin-bottom: 2rem;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    font-size: 0.95rem;
}

.admin-table th,
.admin-table td {
    border: 1px solid #dee2e6;
    padding: 0.8rem 1rem;
    text-align: left;
    vertical-align: middle;
}

.admin-table th {
    background-color: #f8f9fa; /* Light grey header */
    font-weight: 500;
    white-space: nowrap; /* Prevent headers from wrapping */
}

.admin-table td img {
    max-width: 60px;
    height: auto;
    border-radius: 3px;
    border: 1px solid #eee;
}

.admin-table .actions {
    white-space: nowrap; /* Prevent action buttons from wrapping */
    text-align: right;
}
.admin-table .actions .button,
.admin-table .actions form {
    margin-left: 5px;
    display: inline-block; /* Keep buttons/forms inline */
}
.admin-table .actions .button {
    padding: 0.3rem 0.6rem; /* Smaller buttons for actions */
    font-size: 0.85rem;
}

/* Admin Form */
.admin-form {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    max-width: 750px; /* Limit form width */
    margin: 2rem auto;
}
.admin-form h2 {
    margin-bottom: 1.5rem;
    font-weight: 700;
}
.admin-form .form-group {
    margin-bottom: 1.25rem;
}
.admin-form label {
    font-weight: 500;
}
.admin-form textarea {
    min-height: 120px;
}
.admin-form .current-image-info img {
    max-width: 100px;
    height: auto;
    vertical-align: middle;
    margin-left: 10px;
    border: 1px solid #ddd;
    padding: 2px;
}
.admin-form .delete-image-label {
    display: inline-block;
    margin-left: 1rem;
    font-weight: normal;
    color: #dc3545;
}
.admin-form .form-actions {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

/* Login Form */
.login-form {
     max-width: 420px;
     margin: 5rem auto; /* Center vertically and horizontally */
     padding: 2.5rem;
     background: #fff;
     border-radius: 8px;
     box-shadow: 0 5px 15px rgba(0,0,0,0.1);
     border-top: 4px solid #28a745; /* Green top border */
}
.login-form h2 {
    text-align: center;
    margin-bottom: 2rem;
    font-weight: 700;
}
.login-form .button {
    width: 100%; /* Full width login button */
    padding: 0.8rem;
    font-size: 1.1rem;
}

/* --- Utility Classes --- */
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

/* --- Messages (Error/Success) --- */
.message {
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    font-size: 1rem;
}

.error-message {
    color: #721c24; /* Dark red text */
    background-color: #f8d7da; /* Light red background */
    border-color: #f5c6cb; /* Red border */
}
.error-message ul {
    margin-top: 0.5rem;
    margin-left: 1.5rem; /* Indent list items */
}

.success-message {
    color: #155724; /* Dark green text */
    background-color: #d4edda; /* Light green background */
    border-color: #c3e6cb; /* Green border */
}


/* --- Responsive Design Adjustments --- */

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .container {
        max-width: 960px;
    }
    .product-grid {
        /* Adjust minmax for potentially 2 columns */
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }

    .nav-container {
        flex-direction: column; /* Stack logo and nav */
        align-items: center;
    }
    .logo {
        margin-bottom: 0.5rem;
    }
    .nav-links {
        margin-top: 0.5rem;
        justify-content: center; /* Center nav items */
        flex-wrap: wrap; /* Allow wrapping */
    }
     .nav-links li {
        margin: 0 0.5rem 0.5rem; /* Adjust spacing */
    }

    .product-detail {
        grid-template-columns: 1fr; /* Force single column */
        gap: 1.5rem;
    }
    .product-detail-container {
        padding: 1.5rem;
    }

    .cart-item {
        flex-direction: column; /* Stack elements vertically */
        align-items: flex-start; /* Align to left */
        text-align: left;
    }
    .cart-item-image {
        margin-bottom: 1rem;
        margin-right: 0; /* Remove right margin */
        align-self: center; /* Center image */
    }
    .cart-item-info {
        margin-right: 0;
        margin-bottom: 0.5rem;
        width: 100%; /* Take full width */
    }
    .cart-item .price {
        text-align: left; /* Align price left */
        margin-bottom: 0.5rem;
        margin-right: 0;
    }
    .cart-item-actions {
        width: 100%; /* Take full width */
        justify-content: space-between; /* Space out quantity/remove */
    }
    .cart-summary {
        text-align: center; /* Center summary content */
    }
    .cart-summary .button {
        display: block; /* Stack buttons */
        width: 100%;
        margin-top: 0.5rem;
        margin-left: 0;
    }
    .checkout-actions {
        flex-direction: column;
    }
    .checkout-actions .button {
         width: 100%;
         margin-top: 0.5rem;
    }
     .checkout-actions .button:first-child {
         margin-top: 0; /* No top margin for first button */
     }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    .product-grid {
        grid-template-columns: 1fr; /* Single column */
        gap: 1rem;
    }
    .product-card-content {
        padding: 0.8rem 1rem;
    }
     .login-form {
         padding: 1.5rem;
         margin: 3rem auto;
     }
     .cart-container, .checkout-container, .admin-form {
         padding: 1rem 1.2rem;
     }
     .admin-table thead {
         /* Optionally hide table header on very small screens */
         /* display: none; */
     }
     .admin-table td {
         /* Could potentially stack table data using data attributes */
     }
}