/* === Global Styles & Resets === */
:root {
    --primary-red: #e21e51; /* Krispy Kreme Red */
    --primary-green: #00704A; /* Krispy Kreme Green */
    --dark-text: #333333;
    --medium-text: #555555;
    --light-text: #777777;
    --border-light: #eeeeee;
    --background-light: #f8f8f8;
    --background-mid: #f0f0f0;
    --white: #ffffff;
    --shadow-subtle: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-hover: 0 5px 15px rgba(0,0,0,0.15);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, sans-serif;
    background-color: var(--white);
    color: var(--dark-text);
    line-height: 1.6;
}

main {
    min-height: calc(100vh - 250px); /* Adjust based on actual header/footer height */
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 15px;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--dark-text);
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.2;
}

h1 { font-size: 38px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }

/* General Form Group Styling */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--medium-text);
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-light);
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group input[type="number"]:focus,
.form-group input[type="date"]:focus,
.form-group input[type="time"]:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--primary-red);
    box-shadow: 0 0 0 3px rgba(226, 30, 81, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

/* Base Button Styling */
.btn {
    text-decoration: none;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    padding: 14px 30px;
    font-size: 16px;
    color: var(--white) !important; /* Ensure text is white */
}

/* Primary Red Button (for CTA like Order Now, Place Order) */
.btn-primary-red {
    background-color: var(--primary-red);
}
.btn-primary-red:hover {
    background-color: #c91b4a; /* Darker red */
    transform: translateY(-2px);
}

/* Primary Green Button (for Add to Cart, Join Rewards, Admin Save) */
.btn-primary-green {
    background-color: var(--primary-green);
}
.btn-primary-green:hover {
    background-color: #005a3a; /* Darker green */
    transform: translateY(-2px);
}

/* Dark/Neutral Buttons (e.g., Find Location) */
.btn-dark {
    background-color: #333;
}
.btn-dark:hover {
    background-color: #000;
}

/* Danger/Warning Buttons (e.g., Clear Cart) */
.btn-danger {
    background-color: #dc3545;
}
.btn-danger:hover {
    background-color: #c82333;
}

/* Disabled Buttons */
.btn:disabled {
    background-color: #cccccc !important;
    cursor: not-allowed;
    transform: none;
    opacity: 0.8;
}


/* General Alerts (Success/Error) */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
}
.alert.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.alert.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
.error {
    color: #dc3545;
    font-size: 14px;
    margin-top: 5px;
    display: block;
}


/* === Header === */
header {
    border-bottom: 1px solid var(--border-light);
    padding: 10px 0;
    position: sticky;
    top: 0;
    background-color: var(--white);
    z-index: 1000;
    box-shadow: var(--shadow-subtle);
}

.header-container {
    width: 95%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
}

.logo img {
    height: 45px;
    transition: transform 0.2s ease;
}
.logo img:hover {
    transform: scale(1.05);
}

.main-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-grow: 1; /* Allows nav to take up available space */
}

.main-nav a {
    margin: 5px 15px;
    text-decoration: none;
    color: var(--dark-text);
    font-weight: 600;
    font-size: 15px;
    padding: 5px 0;
    transition: color 0.2s ease;
}

.main-nav a:hover {
    color: var(--primary-red);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Spacing between action items */
}

.header-actions .sign-in {
    text-decoration: none;
    font-weight: 600;
    color: var(--primary-green);
    transition: color 0.2s ease;
}
.header-actions .sign-in:hover {
    color: #005a3a;
}

.header-actions .join-rewards {
    background-color: var(--primary-green);
    color: var(--white);
    padding: 8px 18px;
    border-radius: 20px;
    transition: background-color 0.2s ease;
}
.header-actions .join-rewards:hover {
    background-color: #005a3a;
}

/* Header Cart Icon Link */
.header-actions .cart-icon-link {
    position: relative;
    margin-right: 5px; /* Adjust spacing as needed */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.cart-icon {
    font-size: 26px; /* Makes the emoji bigger */
    color: var(--dark-text);
}
.cart-item-count {
    position: absolute;
    top: -8px;
    right: -12px;
    background-color: var(--primary-red);
    color: var(--white);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    border: 2px solid var(--white);
    transition: background-color 0.2s ease;
}
.cart-icon-link:hover .cart-item-count {
    background-color: #c91b4a; /* Darker red on hover */
}

/* Add to Cart Confirmation Pop-up */
.cart-popup {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #28a745; /* Green for success */
    color: var(--white);
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: var(--shadow-hover);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, bottom 0.3s ease;
    white-space: nowrap; /* Prevents text wrap */
}
.cart-popup.show {
    opacity: 1;
    visibility: visible;
    bottom: 30px;
}

/* Responsive Header */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .main-nav {
        order: 2; /* Move nav below logo/actions on mobile */
        width: 100%;
    }
    .header-actions {
        order: 1;
        width: 100%;
        justify-content: center;
        margin-bottom: 10px;
    }
    .header-actions .cart-icon-link {
        margin-right: 15px;
    }
}


/* === Hero Section === */
.hero-section {
    background: var(--background-light) url('/uploads/rq423asd.png') no-repeat center center;
    background-size: cover;
    text-align: center;
    padding: 100px 20px;
    color: var(--dark-text);
}

.hero-section h1 {
    font-size: 56px;
    margin-bottom: 25px;
    font-weight: 900;
    color: var(--primary-red);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
    .hero-section { padding: 60px 15px; }
    .hero-section h1 { font-size: 40px; }
}


/* === States List (Homepage Locations) === */
.states-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
    margin-top: 30px;
}

.states-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    text-decoration: none;
    color: var(--dark-text);
    background-color: var(--background-light);
    border-radius: 8px;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: var(--shadow-subtle);
}

.states-list a:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.states-list .count {
    background-color: var(--primary-red);
    color: var(--white);
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 13px;
    margin-left: 10px;
}

/* === Store Details Page === */
.store-details h1 {
    font-size: 32px;
    text-align: center;
    margin-bottom: 30px;
    color: var(--primary-red);
}
.store-hours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    border: 1px solid var(--border-light);
    padding: 25px;
    margin-top: 20px;
    border-radius: 8px;
    background-color: var(--background-light);
    box-shadow: var(--shadow-subtle);
}
.hour-section {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 10px;
}
.hour-section strong {
    margin-bottom: 8px;
    font-size: 16px;
    color: var(--primary-green);
}
.hour-section:not(:last-child) {
    border-right: 1px dashed var(--border-light);
}
@media (max-width: 768px) {
    .hour-section:not(:last-child) {
        border-right: none;
        border-bottom: 1px dashed var(--border-light);
        padding-bottom: 20px;
    }
}


/* === Menu Section (Homepage & Store Page) === */
.menu-nav {
    text-align: center;
    margin-bottom: 40px;
    border-bottom: 2px solid var(--background-mid);
    padding-bottom: 10px;
}
.menu-nav a {
    margin: 0 18px;
    text-decoration: none;
    color: var(--medium-text);
    font-weight: 600;
    font-size: 16px;
    padding-bottom: 10px;
    border-bottom: 3px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.menu-nav a:hover, .menu-nav a.active {
    color: var(--dark-text);
    border-bottom-color: var(--primary-red);
}

/* Hide/Show menu categories */
.menu-category-content {
    display: none;
}
.menu-category-content.active {
    display: block;
}
.category-title {
    text-align: center;
    font-size: 32px;
    margin: 40px 0 30px;
    font-weight: 700;
    color: var(--primary-red);
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}
.menu-item {
    border: 1px solid var(--border-light);
    border-radius: 10px;
    text-align: center;
    padding: 20px;
    background-color: var(--white);
    box-shadow: var(--shadow-subtle);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.menu-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}
.menu-item img {
    max-width: 100%;
    height: 180px; /* Consistent image height */
    object-fit: cover; /* Ensures images fill space without distortion */
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid var(--background-mid);
}
.menu-item h3 {
    font-size: 20px;
    margin: 10px 0 8px;
}
.menu-item h3 a {
    text-decoration: none;
    color: var(--dark-text);
    transition: color 0.2s ease;
}
.menu-item h3 a:hover {
    color: var(--primary-red);
}
.menu-item p {
    font-size: 14px;
    color: var(--medium-text);
    min-height: 50px; /* Ensure description has some height */
    margin-bottom: 15px;
    flex-grow: 1;
}
.menu-item .price {
    font-size: 22px;
    font-weight: bold;
    color: var(--primary-red);
    margin-top: 10px;
    margin-bottom: 20px;
}
.menu-item .btn { /* For Add to Cart button in menu grid */
    background-color: var(--primary-green);
    width: 100%;
    padding: 12px 0;
    font-size: 16px;
    border-radius: 5px;
}
.menu-item .btn:hover {
    background-color: #005a3a;
}


/* === Login/Signup Forms === */
.form-container {
    max-width: 450px;
    margin: 50px auto;
    padding: 30px;
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: var(--shadow-subtle);
    border: 1px solid var(--border-light);
}
.form-container h2 {
    text-align: center;
    color: var(--primary-red);
    margin-bottom: 30px;
    font-size: 30px;
}
.form-container .alt-option {
    text-align: center;
    margin-top: 25px;
    font-size: 15px;
}
.form-container .alt-option a {
    color: var(--primary-green);
    font-weight: bold;
    text-decoration: none;
}
.form-container .alt-option a:hover {
    text-decoration: underline;
}


/* === Footer === */
footer {
    background-color: var(--background-light);
    color: var(--medium-text);
    padding: 50px 0 25px;
    margin-top: 60px;
    border-top: 1px solid var(--border-light);
}

.footer-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Responsive columns */
    gap: 25px;
}

.footer-column h4 {
    margin-top: 0;
    margin-bottom: 18px;
    color: var(--dark-text);
    font-size: 18px;
}

.footer-column a {
    display: block;
    text-decoration: none;
    color: var(--medium-text);
    margin-bottom: 10px;
    font-size: 15px;
    transition: color 0.2s ease;
}

.footer-column a:hover {
    color: var(--primary-red);
}

.footer-bottom {
    text-align: center;
    margin-top: 40px;
    padding-top: 25px;
    border-top: 1px solid var(--border-light);
    font-size: 14px;
    color: var(--light-text);
}


/* === Static Content Pages (About, Catering, Rewards, etc.) === */
.static-page {
    text-align: left;
}
.static-page h1 {
    font-size: 42px;
    text-align: center;
    color: var(--primary-red);
    margin-bottom: 30px;
}
.static-page-banner {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 10px;
    margin: 20px 0 30px;
    box-shadow: var(--shadow-subtle);
}
.static-page p, .static-page li {
    font-size: 17px;
    line-height: 1.7;
    color: var(--dark-text);
}
.static-page h2 {
    font-size: 30px;
    border-bottom: 2px solid var(--background-mid);
    padding-bottom: 10px;
    margin-top: 40px;
    margin-bottom: 25px;
}
.static-page ul, .static-page ol {
    padding-left: 25px;
    margin-bottom: 20px;
}
.static-page ul li, .static-page ol li {
    margin-bottom: 10px;
}


/* Two Column Layout (used on About, Fundraising, Investors, Contact) */
.two-column-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 40px;
}
.two-column-layout .column h2, .two-column-layout .column h3 {
    margin-top: 0;
    margin-bottom: 15px;
}
@media (max-width: 768px) {
    .two-column-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}


/* Careers Page */
.job-listing {
    margin-top: 30px;
}
.job-item {
    border: 1px solid var(--border-light);
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 20px;
    background-color: var(--background-light);
    box-shadow: var(--shadow-subtle);
}
.job-item h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 22px;
    color: var(--primary-green);
}
.job-item p {
    margin: 0 0 5px;
    font-size: 15px;
}


/* Contact Page & FAQ Accordion */
.faq-accordion {
    border-top: 1px solid var(--border-light);
    margin-top: 20px;
}
.faq-item {
    border-bottom: 1px solid var(--border-light);
}
.faq-question {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 20px 0;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    padding-right: 35px;
    color: var(--dark-text);
    transition: color 0.2s ease;
}
.faq-question:hover {
    color: var(--primary-red);
}
.faq-question::after {
    content: '+';
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 28px;
    font-weight: normal;
    color: var(--primary-red);
    transition: transform 0.3s ease;
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}
.faq-answer p {
    padding: 0 10px 20px;
    margin: 0;
    color: var(--medium-text);
    font-size: 15px;
}

/* Style for active/open FAQ item */
.faq-item.active .faq-question::after {
    content: '−';
    transform: translateY(-50%) rotate(180deg); /* Rotate for minus sign effect */
}
.faq-item.active .faq-answer {
    max-height: 300px; /* Generous height for content */
    transition: max-height 0.5s ease-in;
}


/* === Promotions Page === */
.promo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 30px;
}
@media(min-width: 768px) {
    .promo-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
}
.promo-item {
    border: 1px solid var(--border-light);
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    background-color: var(--white);
    box-shadow: var(--shadow-subtle);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.promo-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}
.promo-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.promo-item h3 {
    margin: 20px 20px 10px;
    font-size: 22px;
    color: var(--primary-red);
}
.promo-item p {
    padding: 0 20px 20px;
    color: var(--medium-text);
    font-size: 15px;
}


/* === Nutritional Info & Investors Pages === */
.nutrition-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 15px;
    background-color: var(--white);
    box-shadow: var(--shadow-subtle);
    border-radius: 8px;
    overflow: hidden; /* Ensures rounded corners */
}
.nutrition-table th, .nutrition-table td {
    border: 1px solid var(--background-mid);
    padding: 12px 15px;
    text-align: left;
}
.nutrition-table thead {
    background-color: var(--background-light);
}
.nutrition-table th {
    font-weight: 600;
    color: var(--dark-text);
}
.nutrition-table th.sortable {
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s ease;
}
.nutrition-table th.sortable:hover {
    background-color: var(--background-mid);
}
.nutrition-table th.sortable::after {
    content: ' \2195'; /* Up-down arrow */
    opacity: 0.3;
    position: absolute;
    right: 8px;
    font-size: 14px;
}
.nutrition-table th.sort-asc::after {
    content: ' \25B2'; /* Up triangle */
    opacity: 1;
    color: var(--primary-green);
}
.nutrition-table th.sort-desc::after {
    content: ' \25BC'; /* Down triangle */
    opacity: 1;
    color: var(--primary-red);
}
.link-list {
    list-style: none;
    padding: 0;
}
.link-list li {
    margin-bottom: 12px;
}
.link-list a {
    text-decoration: none;
    color: var(--primary-red);
    font-weight: 600;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}
.link-list a:hover {
    color: #c91b4a;
    text-decoration: underline;
}


/* === Blog Pages === */

/* Blog Grid Layout */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.blog-post-card {
    text-decoration: none;
    color: var(--dark-text);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-subtle);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    background-color: var(--white);
}
.blog-post-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-5px);
}
.blog-card-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.blog-card-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.blog-card-date {
    font-size: 13px;
    color: var(--light-text);
    margin-bottom: 10px;
}
.blog-card-content h3 {
    margin: 0 0 10px;
    font-size: 22px;
    line-height: 1.3;
}
.blog-card-content p {
    margin: 0 0 15px;
    font-size: 15px;
    flex-grow: 1;
    color: var(--medium-text);
}
.read-more {
    font-weight: bold;
    color: var(--primary-red);
    transition: color 0.2s ease;
}
.read-more:hover {
    color: #c91b4a;
}


/* Single Post Page */
.post-container {
    max-width: 850px;
    margin: 30px auto;
    background-color: var(--white);
    padding: 30px;
    border-radius: 10px;
    box-shadow: var(--shadow-subtle);
    border: 1px solid var(--border-light);
}
.post-container h1 {
    font-size: 38px;
    text-align: center;
    color: var(--primary-red);
    margin-bottom: 20px;
}
.post-meta {
    font-size: 14px;
    color: var(--medium-text);
    text-align: center;
    margin-bottom: 30px;
}
.post-featured-image {
    width: 100%;
    height: auto;
    max-height: 450px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-subtle);
}
.post-content {
    font-size: 17px;
    line-height: 1.7;
    color: var(--dark-text);
}
.post-content p {
    margin-bottom: 20px;
}
.back-to-blog {
    display: inline-block;
    margin-top: 40px;
    font-weight: 600;
    color: var(--primary-green);
    text-decoration: none;
    transition: color 0.2s ease;
}
.back-to-blog:hover {
    color: #005a3a;
    text-decoration: underline;
}


/* === Booking Page & Customer Panel === */

/* Alerts for forms */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
}
.alert.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.alert.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Customer Panel (Reused from previous step, ensure consistent design) */
.customer-panel-v2 h1 {
    text-align: center;
    color: var(--primary-red);
    margin-bottom: 20px;
}
.customer-panel-v2 .welcome-msg {
    text-align: center;
    font-size: 1.1em;
    margin-bottom: 40px;
    color: var(--medium-text);
}
.panel-section {
    background-color: var(--background-light);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-subtle);
}
.panel-section h2 {
    margin-top: 0;
    border-bottom: 2px solid var(--background-mid);
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 24px;
}
.minimal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}
.minimal-table th, .minimal-table td {
    text-align: left;
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: top; /* Align content to top */
}
.minimal-table thead th {
    font-weight: 600;
    background-color: var(--background-mid);
}
.status-badge {
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: bold;
    color: var(--white);
    display: inline-block; /* Allows padding and margin */
    min-width: 80px; /* Consistent width */
    text-align: center;
}
.status-pending { background-color: #ffc107; color: var(--dark-text); } /* Yellow */
.status-confirmed { background-color: #28a745; } /* Green */
.status-cancelled { background-color: #dc3545; } /* Red */
.status-completed { background-color: #17a2b8; } /* Info blue */


/* === New Footer Pages (Online Ordering, Legal, Sitemap) === */

/* Online Ordering Page */
.order-start-container {
    background-color: var(--background-light);
    border: 1px solid var(--border-light);
    padding: 30px;
    border-radius: 10px;
    margin-top: 30px;
    box-shadow: var(--shadow-subtle);
}
.order-start-container h2 {
    margin-top: 0;
    text-align: center;
    font-size: 28px;
    color: var(--primary-green);
}
.location-finder-form select {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
}
.location-finder-form .btn { /* For 'View Menu & Order' button */
    width: 100%;
}
.promo-link-section {
    text-align: center;
    margin-top: 50px;
    padding: 25px;
    background-color: #e6f7ff; /* Light blue background */
    border-radius: 10px;
    border: 1px solid #cce7ff;
}
.promo-link-section h2 {
    color: #0056b3; /* Darker blue */
    font-size: 26px;
    margin-bottom: 15px;
}
.promo-link-section p {
    font-size: 16px;
    margin-bottom: 20px;
}
.promo-link-section .btn { /* For 'View Current Deals' button */
    background-color: #007bff; /* Bootstrap primary blue */
}
.promo-link-section .btn:hover {
    background-color: #0056b3;
}


/* Legal Pages */
.legal-page h1 {
    font-size: 42px;
    color: var(--primary-red);
    text-align: center;
}
.legal-page p strong {
    color: var(--primary-green);
}
.legal-page h2 {
    font-size: 28px;
    margin-top: 40px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 10px;
    color: var(--dark-text);
}
.legal-page ul {
    list-style: disc; /* Ensure disc bullet points */
    padding-left: 25px;
}
.legal-page li {
    margin-bottom: 8px;
}
.legal-page a {
    color: var(--primary-red);
    text-decoration: none;
    font-weight: 600;
}
.legal-page a:hover {
    text-decoration: underline;
}


/* Sitemap Page */
.sitemap-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    margin-top: 30px;
}
.sitemap-column h2, .sitemap-column h3 {
    border-bottom: 2px solid var(--background-mid);
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 22px;
}
.sitemap-column h3 a {
    text-decoration: none;
    color: var(--dark-text);
    transition: color 0.2s ease;
}
.sitemap-column h3 a:hover {
    color: var(--primary-red);
}
.sitemap-list {
    list-style: none;
    padding: 0;
}
.sitemap-list li {
    margin-bottom: 8px;
}
.sitemap-list a {
    text-decoration: none;
    color: var(--medium-text);
    transition: color 0.2s ease;
}
.sitemap-list a:hover {
    color: var(--primary-red);
}


/* === Product Page === */
.product-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 30px;
    padding-bottom: 30px;
}
@media (min-width: 768px) {
    .product-page { grid-template-columns: 1fr 1.5fr; } /* Adjust ratio */
}
.product-image-column {
    text-align: center;
}
.product-image-column img {
    max-width: 100%;
    height: auto;
    max-height: 450px;
    object-fit: contain; /* Use contain to prevent cropping on tall images */
    border-radius: 10px;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-subtle);
}
.product-details-column {
    display: flex;
    flex-direction: column;
}
.product-details-column h1 {
    font-size: 40px;
    color: var(--primary-red);
    margin-bottom: 10px;
    text-align: left;
}
.product-price {
    font-size: 32px;
    font-weight: bold;
    color: var(--primary-green);
    margin-bottom: 20px;
}
.product-description {
    line-height: 1.7;
    font-size: 17px;
    color: var(--dark-text);
    margin-bottom: 30px;
}
.add-to-cart-form {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 20px 0;
    flex-wrap: wrap; /* Allow wrapping on small screens */
}
.add-to-cart-form .form-group {
    margin-bottom: 0; /* Override default form-group margin */
}
.add-to-cart-form input[type="number"] {
    width: 80px;
    padding: 10px 12px;
    font-size: 18px;
    text-align: center;
}
.add-to-cart-form .btn { /* For 'Add to Cart' button on product page */
    padding: 12px 25px;
    font-size: 18px;
    background-color: var(--primary-green);
}
.add-to-cart-form .btn:hover {
    background-color: #005a3a;
}
.nutritional-info, .contact-store-info {
    margin-top: 40px;
    padding-top: 25px;
    border-top: 1px solid var(--border-light);
    font-size: 15px;
    color: var(--medium-text);
}
.nutritional-info h3, .contact-store-info h3 {
    font-size: 20px;
    color: var(--dark-text);
    margin-bottom: 10px;
}
.contact-store-info .btn { /* For 'Find a Location' button */
    background-color: #333; /* Darker neutral button */
}
.contact-store-info .btn:hover {
    background-color: #000;
}

/* Cart Page */
.cart-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-subtle);
}
.cart-table th, .cart-table td {
    padding: 15px;
    border-bottom: 1px solid var(--background-mid);
    text-align: left;
    vertical-align: middle;
    font-size: 15px;
}
.cart-table th {
    background-color: var(--background-light);
    font-weight: 600;
}
.cart-table img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    margin-right: 10px;
    border: 1px solid var(--border-light);
}
.cart-table input[type="number"] {
    width: 70px;
    padding: 8px;
    text-align: center;
    font-size: 16px;
}
.remove-link {
    font-size: 28px;
    text-decoration: none;
    color: #dc3545;
    transition: color 0.2s ease;
}
.remove-link:hover {
    color: #a71d2a;
}
.cart-actions {
    margin-top: 25px;
    display: flex;
    justify-content: flex-end; /* Align to the right */
    gap: 15px;
}
.cart-actions .btn { /* For 'Update Cart' button */
    padding: 10px 20px;
    font-size: 16px;
    background-color: var(--primary-green);
}
.cart-actions .btn:hover {
    background-color: #005a3a;
}

.cart-summary {
    margin-top: 30px;
    padding: 25px;
    background: var(--background-light);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    box-shadow: var(--shadow-subtle);
    max-width: 400px; /* Constrain width on larger screens */
    margin-left: auto; /* Push to right */
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .cart-summary {
        max-width: 100%; /* Full width on mobile */
        margin-left: 0;
    }
}
.cart-summary h2 {
    margin-top: 0;
    font-size: 26px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 15px;
}
.cart-summary .summary-total {
    display: flex;
    justify-content: space-between;
    font-size: 22px;
    font-weight: bold;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid var(--border-light);
}
.cart-summary .btn { /* For 'Proceed to Checkout' button */
    width: 100%;
    text-align: center;
    margin-top: 25px;
    background-color: var(--primary-red);
}
.cart-summary .btn:hover {
    background-color: #c91b4a;
}

/* Checkout Page */
.checkout-page-container {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column for mobile */
    gap: 30px;
    margin-top: 20px;
}

/* Desktop layout (2 columns) */
@media (min-width: 992px) {
    .checkout-page-container {
        grid-template-columns: 2fr 1fr; /* 2fr for details, 1fr for summary */
    }
}

/* Left side of the checkout (the form) */
.checkout-details h1 {
    margin-top: 0;
    margin-bottom: 30px;
}

/* Styling for each step in the form */
.checkout-step {
    background-color: var(--white);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: var(--shadow-subtle);
}

.step-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.step-number {
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 50%;
    background-color: var(--primary-red);
    color: var(--white);
    font-weight: bold;
    font-size: 18px;
    flex-shrink: 0; /* Prevents the circle from squishing */
}

.step-header h2 {
    margin: 0;
    font-size: 22px;
}

/* Improved Radio Buttons for Fulfillment */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.radio-option {
    border: 2px solid var(--border-light);
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: var(--background-light);
}
.radio-option input[type="radio"] {
    margin-right: 12px;
    transform: scale(1.2); /* Makes radio button slightly larger */
}
.radio-option label {
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
}
/* Style for the selected radio button's container */
.radio-option.selected {
    border-color: var(--primary-red);
    box-shadow: 0 0 0 2px rgba(226, 30, 81, 0.2);
}
.radio-option input:disabled + label {
    color: #aaa;
    cursor: not-allowed;
}

/* Order Summary Box (Right column on desktop, top on mobile) */
.order-summary-box {
    background-color: #f7f9fc;
    border-radius: 8px;
    padding: 25px;
    height: fit-content; /* Makes it so the box doesn't stretch full height */
    position: sticky;
    top: 100px; /* Sticks below the header on scroll */
    box-shadow: var(--shadow-subtle);
}

/* Hide summary box on mobile, it will be reordered by the grid */
@media (max-width: 991px) {
    .order-summary-box {
        order: -1; /* This is the magic: moves the summary to the TOP on mobile */
        margin-bottom: 30px; /* Add space below it on mobile */
    }
}

.order-summary-box h2 {
    margin-top: 0;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 15px;
}

.summary-item-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.summary-item-list li {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #eef2f7;
    font-size: 14px;
}
.item-info {
    display: flex;
    gap: 10px;
}
.item-qty {
    color: var(--medium-text);
}
.item-price {
    font-weight: 500;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    font-weight: bold;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid var(--border-light);
}

/* Final Submission section */
.final-submission {
    margin-top: 25px;
}
.final-submission p {
    font-size: 14px;
    color: var(--medium-text);
    text-align: center;
}
.final-submission .btn { /* For Place Order button */
    width: 100%;
    padding: 18px;
    font-size: 18px;
    background-color: var(--primary-red); /* Ensure it's the primary red button */
}
.final-submission .btn:hover {
    background-color: #c91b4a;
}

/* === Admin Panel Specific Styles === */

body.admin-body { /* Apply this class to <body> in admin files if needed for specific overrides */
    background-color: #f2f4f8; /* Lighter background for admin */
    padding: 0; /* Remove extra padding */
}

.admin-container {
    width: 95%; /* Wider admin panel */
    margin: 25px auto;
    background: var(--white);
    padding: 30px;
    border-radius: 8px;
    box-shadow: var(--shadow-subtle);
}

.admin-container h2 {
    text-align: left; /* Admin titles left-aligned */
    color: var(--dark-text);
    margin-bottom: 25px;
    border-bottom: 2px solid var(--background-mid);
    padding-bottom: 10px;
    font-size: 28px;
}

.admin-nav {
    margin-bottom: 30px;
    background-color: var(--background-light);
    padding: 15px;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.05);
}

.admin-nav a {
    text-decoration: none;
    color: var(--primary-green);
    font-weight: 600;
    font-size: 15px;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.admin-nav a:hover, .admin-nav a.active {
    background-color: var(--primary-green);
    color: var(--white);
}

.admin-container h3 {
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 22px;
}

/* Admin Tables */
.admin-container table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: var(--white);
    border-radius: 8px;
    overflow: hidden; /* Ensures rounded corners on table */
    box-shadow: var(--shadow-subtle);
    font-size: 14px;
}

.admin-container th, .admin-container td {
    border: 1px solid var(--background-mid);
    padding: 12px 15px;
    text-align: left;
    vertical-align: top;
}

.admin-container th {
    background-color: var(--background-light);
    font-weight: 600;
    color: var(--dark-text);
}

.admin-container tr:nth-child(even) {
    background-color: #fcfcfc;
}
.admin-container tr:hover {
    background-color: var(--background-mid);
}


.action-links a {
    margin-right: 10px;
    color: var(--primary-red);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}
.action-links a:hover {
    color: #c91b4a;
    text-decoration: underline;
}

/* Admin form group inputs (re-defined for slight differences in admin style) */
.admin-container .form-group input[type="text"], 
.admin-container .form-group input[type="password"], 
.admin-container .form-group input[type="number"], 
.admin-container .form-group textarea, 
.admin-container .form-group select {
    padding: 10px 12px;
    font-size: 15px;
}

.admin-container .form-group input[type="submit"] {
    background-color: var(--primary-green);
    color: var(--white);
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    transition: background-color 0.2s ease;
}
.admin-container .form-group input[type="submit"]:hover {
    background-color: #005a3a;
}


/* Specific Admin Elements */
.page-header-with-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--background-mid);
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.page-header-with-action h2 {
    margin: 0;
    border-bottom: none; /* Override general h2 border */
}
.action-btn-link { /* Admin-specific action button */
    background-color: var(--primary-green);
    color: var(--white);
    padding: 8px 15px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 14px;
    transition: background-color 0.2s ease;
}
.action-btn-link:hover {
    background-color: #005a3a;
}

.add-edit-form {
    background-color: var(--background-light);
    padding: 25px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: var(--shadow-subtle);
}
.add-edit-form h3 {
    margin-top: 0;
    color: var(--primary-red);
}

.checkbox-label {
    margin-right: 20px;
    font-weight: normal; /* Override bold from form-group label */
    display: inline-flex; /* Align checkbox and label */
    align-items: center;
}
.checkbox-label input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
    transform: scale(1.1);
}

/* Admin Order & Booking Details (collapsible) */
.order-items-details, .booking-details-item {
    font-size: 13px;
    margin-top: 5px;
}
.order-items-details summary, .booking-details-item summary {
    cursor: pointer;
    font-weight: bold;
    color: var(--primary-green);
    margin-bottom: 5px;
}
.order-items-details ul, .booking-details-item p {
    margin-top: 8px;
    padding: 10px;
    background-color: #fcfdff;
    border: 1px solid #eef2f7;
    border-radius: 4px;
}
.order-items-details li {
    margin-bottom: 3px;
    color: var(--medium-text);
}
.booking-details-item p {
    white-space: pre-wrap; /* Preserve line breaks in special requests */
    color: var(--medium-text);
}

/* Admin Login Page */
.login-container {
    width: 100%;
    max-width: 450px;
    margin: 100px auto; /* Center vertically on page */
    background: var(--white);
    padding: 40px;
    border-radius: 10px;
    box-shadow: var(--shadow-hover);
    border: 1px solid var(--border-light);
}
.login-container h2 {
    font-size: 32px;
    color: var(--primary-red);
    margin-bottom: 30px;
}
.login-container .form-group input[type="submit"] {
    background-color: var(--primary-red);
}
.login-container .form-group input[type="submit"]:hover {
    background-color: #c91b4a;
}

/* === RESPONSIVE STYLES FOR SINGLE BLOG POST PAGE === */

@media (max-width: 768px) {
    .post-container {
        /* Reduce padding on smaller screens */
        padding: 20px 15px;
        margin-top: 20px;
        margin-bottom: 20px;
        /* Optional: Remove shadow and border for a flatter mobile look */
        box-shadow: none;
        border: none;
    }

    .post-container h1 {
        /* Make the main title smaller and more readable on mobile */
        font-size: 28px;
        margin-bottom: 15px;
    }

    .post-meta {
        /* Reduce margin below the date */
        margin-bottom: 25px;
    }

    .post-featured-image {
        /* Adjust image max-height to be more proportional on mobile */
        max-height: 250px;
        margin-bottom: 25px;
    }

    .post-content {
        /* Slightly smaller font for better text density on small screens */
        font-size: 16px;
        line-height: 1.6;
    }

    .back-to-blog {
        /* Add some extra space above the back link */
        margin-top: 30px;
    }
}

/* === RESPONSIVE FIX FOR MENU NAVIGATION TABS === */

@media (max-width: 768px) {
    .menu-nav {
        display: flex;       /* Use flexbox for layout */
        overflow-x: auto;    /* Allow horizontal scrolling */
        white-space: nowrap; /* Prevent items from wrapping to the next line */
        padding-bottom: 15px; /* Add some space below for the scrollbar */
        margin-bottom: 25px; /* Adjust bottom margin for mobile */
        
        /* Hides the scrollbar visually on browsers that support it */
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;     /* Firefox */
    }

    /* Hides the scrollbar visually for Chrome, Safari, and Opera */
    .menu-nav::-webkit-scrollbar {
        display: none;
    }

    .menu-nav a {
        flex: 0 0 auto; /* Prevent items from shrinking, let them keep their size */
        margin: 0 12px; /* Adjust spacing for a tighter mobile feel */
        font-size: 15px; /* Slightly smaller font on mobile */
    }
}

/* === RESPONSIVE & MOBILE-FIRST CART PAGE STYLES === */

/* Default mobile styles (card view) */
.cart-table {
    border: none;
    box-shadow: none;
    background-color: transparent;
}
.cart-table thead {
    /* Hide the table header on mobile, as it's not needed for card view */
    display: none;
}
.cart-table tbody, .cart-table tr, .cart-table td {
    display: block; /* Make table elements stack vertically */
    width: 100%;
}
.cart-table tr {
    /* Each table row becomes a card */
    background-color: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: var(--shadow-subtle);
    margin-bottom: 20px;
    padding: 15px;
    position: relative; /* For positioning the remove button */
}
.cart-table td {
    border: none;
    padding: 8px 0; /* Adjust vertical padding inside the card */
    display: flex; /* Use flexbox for alignment within each "cell" */
    justify-content: space-between;
    align-items: center;
    text-align: right; /* Align text to the right by default */
}
.cart-table td:before {
    /* Add labels (e.g., "Price:", "Quantity:") for clarity */
    content: attr(data-label);
    font-weight: bold;
    text-align: left;
    margin-right: 15px;
    color: var(--dark-text);
}

/* Specific styling for each cell in the card view */
.cart-table td.product-info {
    justify-content: flex-start; /* Align product info to the left */
    font-size: 18px;
    font-weight: bold;
}
.cart-table td.product-info img {
    width: 60px;
    height: 60px;
    margin-right: 15px;
}
.cart-table td.product-info:before {
    display: none; /* The product image is self-explanatory */
}

.cart-table td.product-price, .cart-table td.product-subtotal {
    font-size: 16px;
}
.cart-table td.product-quantity input {
    width: 70px;
    padding: 8px;
    text-align: center;
}
.cart-table td.product-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0;
    border: none;
}
.cart-table td.product-remove:before {
    display: none;
}
.cart-table td.product-remove .remove-link {
    font-size: 28px;
}

/* Desktop styles (traditional table view) */
@media (min-width: 768px) {
    .cart-table {
        /* Revert to standard table display on larger screens */
        display: table;
        border-radius: 8px;
        box-shadow: var(--shadow-subtle);
        background-color: var(--white);
    }
    .cart-table thead {
        display: table-header-group;
    }
    .cart-table tr {
        display: table-row;
        margin-bottom: 0;
        padding: 0;
        box-shadow: none;
        border: none; /* Remove individual card border */
    }
    .cart-table tr:last-child td {
        border-bottom: none; /* Remove bottom border on last row */
    }
    .cart-table td {
        display: table-cell;
        padding: 15px;
        border-bottom: 1px solid var(--background-mid);
        text-align: left;
        position: static;
    }
    .cart-table td:before {
        display: none; /* Hide the data-label pseudo-elements */
    }
    .cart-table td.product-info {
        font-size: 15px;
        font-weight: normal;
    }
    .cart-table td.product-remove {
        text-align: center;
    }
    .cart-actions {
        justify-content: flex-end; /* Ensure buttons are on the right */
    }
}

/* Hides the extra table cell on desktop for proper column alignment */
@media (min-width: 768px) {
    .cart-table td.product-info {
        width: 40%; /* Give product column more space */
    }
    .hidden-on-mobile {
        display: none;
    }
}

/* Styles for Selected Store Info in Header */
.selected-store-info {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #e6f7ff;
    border: 1px solid #cce7ff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 14px;
    margin-right: 15px;
}
.selected-store-info span {
    font-weight: 600;
    color: #0056b3;
}
.selected-store-info a {
    font-size: 12px;
    font-weight: bold;
    color: var(--primary-red);
    text-decoration: none;
}
.selected-store-info a:hover {
    text-decoration: underline;
}