:root {
    /* Soft Peachy Beige Theme */
    --primary-color: #C9A67A;        /* Golden Tan */
    --accent-color: #B8956D;         /* Muted Gold */
    --bg-color: #D9B5A0;             /* Peachy Background */
    --text-color: #6B4842;           /* Warm Brown Text */
    --card-bg: #E8CDB8;              /* Light Peachy Cards */
    --nav-bg: linear-gradient(135deg, #C9A67A 0%, #B8956D 100%);
    --hero-bg: linear-gradient(135deg, #D9B5A0 0%, #C9A67A 100%);
    --cta-gradient: linear-gradient(135deg, #D9B5A0 0%, #C9A67A 55%, #B8956D 100%);
    --shadow: rgba(201, 166, 122, 0.2);
    --border-color: #C9A67A;

    /* Semantic colors */
    --color-success-bg: #d4edda;
    --color-success-text: #155724;
    --color-success-border: #28a745;
    --color-danger-bg: #f8d7da;
    --color-danger-text: #721c24;
    --color-danger: #dc3545;
    --color-star: #FFD700;

    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
    transition: var(--transition);
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navigation */
nav {
    background: var(--nav-bg);
    color: white;
    padding: 1rem 0;
    box-shadow: 0 2px 10px var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: var(--transition);
}

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

nav .logo {
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    transition: var(--transition);
}

nav .logo:hover {
    transform: scale(1.05);
}

nav .logo img {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.4);
    filter: drop-shadow(2px 2px 6px rgba(0,0,0,0.4));
    transition: border-color 0.3s ease, filter 0.3s ease;
    animation: nav-logo-float 3s ease-in-out infinite;
}

nav .logo:hover img {
    border-color: rgba(255,255,255,0.8);
    animation: none;
    transform: rotate(5deg);
    transition: border-color 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}

@keyframes nav-logo-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
    nav .logo img {
        animation: none;
    }
}

nav .logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

nav .logo-text .main {
    font-size: 1.3rem;
    font-weight: bold;
}

nav .logo-text .sub {
    font-size: 0.8rem;
    opacity: 0.9;
    font-weight: normal;
}

nav .nav-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.language-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 4px 6px 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.language-icon {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.language-switch-form {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 0;
}

.lang-btn {
    min-width: 34px;
    height: 28px;
    padding: 0 0.55rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: var(--transition);
    line-height: 1;
}

.lang-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.16);
    color: white;
}

.lang-btn.active {
    background: var(--card-bg);
    color: var(--text-color);
    box-shadow: 0 2px 6px rgba(107, 72, 66, 0.22);
}

.profile-meta {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.profile-meta p {
    margin-bottom: 0.5rem;
}

/* Sidebar toggle (hamburger) */
.sidebar-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    transition: var(--transition);
}

.sidebar-toggle:hover {
    background: rgba(255,255,255,0.3);
}

.sidebar-toggle .bar {
    width: 22px;
    height: 3px;
    margin: 0 auto;
    background: white;
    border-radius: 2px;
    transition: var(--transition);
}

.sidebar-toggle[aria-expanded="true"] .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.sidebar-toggle[aria-expanded="true"] .bar:nth-child(2) {
    opacity: 0;
}

.sidebar-toggle[aria-expanded="true"] .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Sidebar overlay + panel: holds every site page */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(107, 72, 66, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 998;
}

.sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.side-menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 300px;
    max-width: 85vw;
    background: var(--card-bg);
    box-shadow: -6px 0 20px var(--shadow);
    transform: translateX(100%);
    transition: transform 0.35s ease;
    z-index: 999;
    display: flex;
    flex-direction: column;
    border-left: 3px solid var(--border-color);
}

.side-menu.active {
    transform: translateX(0);
}

.side-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.5rem;
    background: var(--nav-bg);
    color: white;
}

.side-menu-header span {
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.side-menu-close {
    background: none;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    color: white;
    cursor: pointer;
    opacity: 0.85;
    transition: var(--transition);
}

.side-menu-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.side-menu-links {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    overflow-y: auto;
}

.side-menu-links li {
    border-bottom: 1px solid rgba(107, 72, 66, 0.12);
}

.side-menu-links a,
.side-menu-links .logout-btn {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 1rem 1.5rem;
    color: var(--text-color);
    text-decoration: none;
    background: none;
    border: none;
    border-radius: 0;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.side-menu-links a:hover,
.side-menu-links .logout-btn:hover {
    background: rgba(201, 166, 122, 0.3);
    padding-left: 1.8rem;
}

.side-menu-links a i,
.side-menu-links .logout-btn i {
    width: 1.2rem;
    text-align: center;
    color: var(--accent-color);
}

.side-menu-links .cart-badge {
    position: static;
    margin-left: auto;
    animation: none;
    border: none;
}

.logout-form {
    margin: 0;
}

body.sidebar-open {
    overflow: hidden;
}

nav a {
    color: white;
    text-decoration: none;
    transition: var(--transition);
    padding: 0.5rem 1rem;
    border-radius: 5px;
}

nav a:hover {
    background: rgba(255,255,255,0.2);
    transform: translateY(-2px);
}

/* Cart Icon */
.cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.15);
    padding: 0.6rem 1.2rem;
    border-radius: 25px;
    transition: var(--transition);
    font-weight: 600;
}

.cart-link:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-2px) scale(1.05);
}

.cart-icon {
    font-size: 1.2rem;
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--color-danger);
    color: white;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Messages */
.messages {
    margin: 20px auto;
    max-width: 1200px;
    padding: 0 20px;
}

.message {
    padding: 15px 50px 15px 20px;
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 5px var(--shadow);
    position: relative;
}

.message.success {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border-left: 4px solid var(--color-success-border);
}

.message.error {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
    border-left: 4px solid var(--color-danger);
}

.message.info {
    background: #d1ecf1;
    color: #0c5460;
    border-left: 4px solid #17a2b8;
}

.message.warning {
    background: #fff3cd;
    color: #856404;
    border-left: 4px solid #ffc107;
}

.close-message {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: inherit;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
    padding: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-message:hover {
    opacity: 1;
}

/* Main Content */
main {
    min-height: 60vh;
    padding: 2rem 0;
}

/* Footer */
footer {
    background: var(--nav-bg);
    color: white;
    padding: 2rem 0;
    margin-top: 4rem;
    text-align: center;
}

footer a {
    color: white;
    text-decoration: none;
    transition: var(--transition);
}

footer a:hover {
    color: #FFD700;
}

footer .footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin-bottom: 0.5rem;
}

footer .footer-logo img {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-color);
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}

footer .footer-logo h3 {
    margin: 0;
}

footer .footer-contact {
    margin: 1.5rem 0;
    line-height: 1.8;
}

footer .footer-contact div {
    margin-bottom: 0.5rem;
}

footer .footer-contact a {
    color: inherit;
    text-decoration: none;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 1rem 0;
}

.social-links a {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    transition: var(--transition);
}

.social-links a:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-3px);
}

/* ============================================================
   Shared content components
   Used by index.html, feeds.html, and future pages so they don't
   each need their own stylesheet just to repeat the same card/grid.
   ============================================================ */

/* Shared card shell — background, radius, shadow, border, hover-lift.
   Used by .news-card (below), .item-card, and .review-card (index.css).
   Add class="card" alongside the specific class when you want the shell
   without item-card's default padding (e.g. homepage featured dishes). */
.card {
    background: var(--card-bg);
    border-radius: 10px;
    box-shadow: 0 4px 6px var(--shadow);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px var(--shadow);
}

/* Shared corner-overlay badge — absolute top-right label.
   Used by .video-badge (below) and .category-tag-overlay (menu.css).
   Add class="corner-badge" alongside the specific class for color. */
.corner-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 2;
}

/* Page header (feeds, menu, and similar listing pages) */
.page-header {
    text-align: center;
    margin-bottom: 3rem;
}

.page-header h1 {
    font-size: 2.5rem;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.page-header p {
    color: var(--text-color);
    opacity: 0.8;
}

/* Admin-only affordances layered onto listing pages */
.admin-add-button {
    text-align: center;
    margin-bottom: 2rem;
}

.admin-add-button .view-reviews-btn {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.admin-controls {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    display: flex;
    gap: 0.5rem;
}

.admin-btn {
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.3s;
}

.admin-btn:hover {
    background: var(--primary-color);
}

/* Primary CTA button. Originally only used in the Google reviews section
   (index.css), now also used for admin "add" actions and section CTAs
   across pages, so it lives here rather than in a page-specific stylesheet. */
.view-reviews-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 8px;
    background: var(--nav-bg);
    color: white;
    text-decoration: none;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.view-reviews-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px var(--shadow);
    color: white;
}

/* Primary submit button — used on forms, menu, and checkout */
.add-btn {
    width: 100%;
    background: var(--primary-color);
    padding: 12px 0;
    text-align: center;
    border-radius: 8px;
    font-weight: 700;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    font-size: 1rem;
    text-decoration: none;
    display: inline-block;
}

.add-btn:hover {
    background: var(--accent-color);
    transform: translateY(-2px);
    color: #fff;
}

.add-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

/* Section headings and CTA banners used across multiple pages */
.section-title {
    font-size: 2rem;
    margin-bottom: 2rem;
    color: var(--text-color);
    text-align: center;
}

.section-cta {
    text-align: center;
}

.cta-section {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--cta-gradient);
    color: white;
    border-radius: 15px;
    margin-top: 3rem;
    border: 2px solid var(--border-color);
    box-shadow: 0 10px 30px var(--shadow);
}

.cta-section h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(107, 72, 66, 0.25);
}

.cta-section p {
    opacity: 0.95;
    text-shadow: 1px 1px 2px rgba(107, 72, 66, 0.15);
}

.cta-section .view-reviews-btn {
    display: inline-flex;
    width: auto;
    min-width: 220px;
    margin-top: 1rem;
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-color);
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 10px rgba(107, 72, 66, 0.15);
}

.cta-section .view-reviews-btn:hover {
    background: white;
    color: var(--accent-color);
    box-shadow: 0 6px 14px rgba(107, 72, 66, 0.2);
}

/* Info panel — order summary, review overview, profile blocks */
.review-summary {
    background: var(--card-bg);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 12px var(--shadow);
    border: 2px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 700px;
    margin: 0 auto 2rem;
}

.detail-panel {
    max-width: 700px;
    margin: 0 auto 2rem;
}

/* Item/order line cards — self-contained when used without .card */
.item-card {
    background: var(--card-bg);
    border-radius: 10px;
    box-shadow: 0 4px 6px var(--shadow);
    border: 1px solid var(--border-color);
    transition: var(--transition);
    text-align: center;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px var(--shadow);
}

.item-card:has(.item-card-link) {
    padding: 0;
}

.item-card > .view-reviews-btn,
.item-card > a.view-reviews-btn,
.item-card > form:has(.view-reviews-btn),
.item-card > .item-card-footer {
    margin-top: auto;
}

.item-card-footer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1rem;
    width: 100%;
}

.item-card h3,
.item-card-link h3 {
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.item-card p,
.item-card-link p {
    color: var(--text-color);
    opacity: 0.8;
}

.price,
.price-tag {
    color: var(--primary-color);
    font-weight: bold;
}

.price {
    font-size: 1.5rem;
    margin-top: 1rem;
}

.price-tag {
    font-size: 1.7rem;
    margin-bottom: 1rem;
    margin-top: 0;
}

.stars {
    color: var(--color-star);
    font-size: 1.5rem;
    margin: 0.5rem 0;
}

.stars-sm {
    font-size: 0.9rem;
    margin: 0;
}

/* Generic responsive grid, with a "large" variant for bigger cards */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.grid.grid-lg {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* News card shell: media area, hover overlay, badges, placeholder icon.
   Content typography (title/date/text) is intentionally left to each page,
   since a homepage preview and a full listing want different emphasis. */
.news-card-wrapper {
    position: relative;
}

/* Shared shell (bg/radius/shadow/border/hover) now comes from .card —
   pair as class="card news-card" in markup. Only the news-specific
   bits (clipping, link behavior) stay here. */
.news-card {
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 560px; /* fixed total card height */
    cursor: pointer;
    position: relative;
}

.news-card-media {
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: var(--border-color);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-card-media img,
.news-card-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-card:hover .news-card-media img {
    transform: scale(1.05);
}

/* Shared position/shape now comes from .corner-badge —
   pair as class="corner-badge video-badge" in markup. Only the
   color stays here since that's what's actually distinct. */
.video-badge {
    background: rgba(0, 0, 0, 0.7);
}

.news-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    padding: 1rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    gap: 0.5rem;
}

.news-card:hover .news-overlay {
    transform: translateY(0);
}

.no-media-icon {
    font-size: 3rem;
    opacity: 0.3;
}

.news-card-content {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Listing-page card content variant (feeds.html): prominent date-first
   layout with a larger title. The homepage's compact variant is styled
   separately in index.css since it's only used there. */
.news-date {
    color: var(--primary-color);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.news-title {
    font-size: 1.5rem;
    color: var(--text-color);
    margin-bottom: 1rem;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card:hover .news-title {
    color: var(--primary-color);
}

.news-text {
    color: var(--text-color);
    opacity: 0.8;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Empty-list state (no news, no menu items, etc.) */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-color);
    opacity: 0.7;
}

/* Responsive Design */
@media (max-width: 768px) {
    nav .logo img {
        height: 50px;
        width: 50px;
    }

    nav .logo-text .main {
        font-size: 1.1rem;
    }

    .side-menu {
        width: 100%;
        max-width: 100%;
    }

    .grid.grid-lg {
        grid-template-columns: 1fr;
    }

    .cta-section h2 {
        font-size: 1.8rem;
    }
}