/* =========================================
   VARIABLES & RESET
   ========================================= */
:root {
    --color-bg-dark: #0a0a0a;
    --color-bg-light: #1f1f1f;
    /* Slightly lighter for cards */
    --color-accent: #f26622;
    --color-text-main: #e0e0e0;
    --color-text-muted: #a0a0a0;
    --color-gold: #d4af37;
    /* For title accents if needed */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Montserrat', sans-serif;
    --glass-bg: rgba(20, 20, 20, 0.85);
    /* Increased opacity for readability */
    --glass-border: rgba(255, 255, 255, 0.1);
    --gradient-main: linear-gradient(180deg, #0a0a0a 0%, #1c1c1c 100%);
}

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

body {
    font-family: var(--font-body);
    /* Global Background Image - Corrected Path */
    background: url('img/bucegi.jpeg') center/cover no-repeat fixed;
    color: var(--color-text-main);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

/* Dark overlay for readability over the image */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    /* Significant darkening */
    z-index: -1;
    pointer-events: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

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

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

.text-gold {
    color: var(--color-accent);
}

/* Buttons */
.btn {
    display: inline-block;
    background: var(--color-accent);
    color: #fff;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(242, 102, 34, 0.4);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(242, 102, 34, 0.6);
}

.section-padding {
    padding: 80px 0;
}

/* =========================================
   TOP BAR SECTION (NEW)
   ========================================= */
.top-bar {
    background: #000;
    color: #ccc;
    font-size: 0.85rem;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 1001;
    /* Above header if needed, but header is below */
}

.top-bar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.top-bar-left a,
.top-bar-right a {
    color: #ccc;
    font-weight: 500;
    transition: 0.3s;
}

.top-bar-left a:hover,
.top-bar-right a:hover {
    color: var(--color-accent);
}

.top-bar-right {
    display: flex;
    gap: 15px;
    align-items: center;
}

.top-bar .sep {
    color: #555;
    margin: 0 5px;
}

/* =========================================
   HEADER & NAV
   ========================================= */
#header {
    background: rgba(10, 10, 10, 0.40);
    /* Transparency 0.40 */
    backdrop-filter: blur(10px);
    position: absolute;
    /* Header scrolls away */
    width: 100%;
    top: 45px;
    /* Offset to sit below Top Bar (approx height) */
    left: 0;
    z-index: 1100;
    /* Higher than Top Bar (1001) so logo can overflow on top */
    padding: 45px 0;
    /* Increased padding for bigger logo */
    border-bottom: 1px solid var(--glass-border);
    transition: 0.3s;
}

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

/* LOGO - Desktop */
.logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* Center vertically and horizontally */
    z-index: 1002;
    /* Ensure it floats above Top Bar if overlapping */
}

.logo img {
    height: 100px;
    /* Slightly bigger as per preview */
    width: auto;
    transition: 0.3s;
}

/* Navigation - Desktop */
nav {
    margin-left: auto;
    /* Push nav to the far right */
}

nav ul {
    display: flex;
    gap: 30px;
    align-items: center;
    /* Ensure nav doesn't collapse header too much, add height to header instead */
}

nav ul li a {
    color: var(--color-text-main);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.9rem;
    position: relative;
}

nav ul li a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: 0.3s;
}

nav ul li a:hover,
nav ul li a.active {
    color: var(--color-accent);
}

nav ul li a:hover::after,
nav ul li a.active::after {
    width: 100%;
}

/* Language Switcher */
.lang-switch {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--color-text-muted);
}

.lang-btn {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 2px;
}

.lang-btn.active {
    color: var(--color-accent);
}

.sep {
    font-size: 0.8rem;
}

/* Hamburger */
.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.hamburger span {
    width: 30px;
    height: 3px;
    background: var(--color-accent);
    border-radius: 2px;
    transition: 0.3s;
}

/* Manual Hours Display */
.header-schedule {
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.4;
    margin-left: 20px;
    /* Space from lang switch */
}

/* =========================================
   HERO SECTION
   ========================================= */
.banner {
    position: relative;
    width: 100%;
    min-height: 60vh;
    /* Reduced height as global bg handles it */
    display: flex;
    align-items: center;
    justify-content: center;
    /* No bg here, using global */
}

/* No overlay needed on banner specifically */

.banner .content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    padding: 20px;
    margin-top: 100px;
    /* Offset for fixed header */
}

.banner-title {
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 20px;

    /* Sun Ray Shine Effect - Intensified */
    background: linear-gradient(110deg, #ffffff 35%, #ff4500 48%, #ff8c42 52%, #ffffff 65%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Fallback */

    animation: shine 5s infinite linear;
    text-shadow: none;
    /* Shadow conflicts with clip */
}

/* Shine Animation */
@keyframes shine {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -150% 0;
    }
}

/* Removed separate span color since it's unified now */

.banner-subtitle {
    font-size: 1.1rem;
    /* Matched to likely body size/menu subtitle */
    color: #e0e0e0;
    margin: 0 auto 40px;
    /* Center with margin */
    font-style: italic;
    /* Match menu subtitle */
    max-width: 600px;
    /* Match menu subtitle width constraint */
    line-height: 1.6;
}

.delivery-info {
    list-style: none;
    background: var(--glass-bg);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    display: inline-block;
    text-align: left;
}

.delivery-info li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

.delivery-info li::before {
    content: '✓';
    color: var(--color-accent);
    position: absolute;
    left: 0;
}

/* =========================================
   MENU SECTION
   ========================================= */
#menu {
    padding-top: 20px;
    /* Reduced from default 80px to close gap */
    perspective: 2000px;
    /* Essential for 3D Flip Effect */
    overflow: hidden;
    /* Prevent scrollbar during rotation */
}

.stylish-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
}

/* Premium Glass Pill Buttons */
.menu-btn {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
    padding: 10px 25px;
    border-radius: 50px;
    /* Full Pill Shape */
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.menu-btn:hover,
.menu-btn.active {
    background: linear-gradient(135deg, var(--color-accent) 0%, #d45d1e 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 15px rgba(242, 102, 34, 0.5);
    /* Glow Effect */
    transform: translateY(-2px);
}

/* Professional List Style */
/* Professional List Style - Book Effect Test */
/* =========================================
   NEW STATIC BOOK CONTAINER
   ========================================= */
.book-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 60px;
    /* Inner padding of the book */
    position: relative;
    perspective: 2000px;
    /* Deep perspective for 3D */

    /* Book Appearance (Dark Leather/Paper) - STATIC BACKGROUND */
    background: linear-gradient(to right, #222, #2a2a2a, #222);

    /* The "Stack of Pages" Effect on Left/Right and Bottom */
    box-shadow:
        /* Left Stack */
        -2px 2px 0 #333,
        -4px 4px 0 #222,
        -6px 6px 0 #333,
        -8px 8px 0 #222,
        -10px 10px 0 #1a1a1a,

        /* Right Stack */
        2px 2px 0 #333,
        4px 4px 0 #222,
        6px 6px 0 #333,
        8px 8px 0 #222,
        10px 10px 0 #1a1a1a,

        /* Depth Shadow */
        0 20px 50px rgba(0, 0, 0, 0.8);

    border: 1px solid #333;
    /* Worn edge */
    border-radius: 5px;
    /* Slight roundness */
}

/* The Spine Line (Thread/Binding) - REMOVED */
/* .book-container::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 5px;
    bottom: 5px;
    width: 4px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8));
    transform: translateX(-50%);
    border-radius: 2px;
    z-index: 10;
} */

/* =========================================
   DYNAMIC PAGE CONTENT (Transparent)
   ========================================= */
.stylish-ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two pages */
    column-gap: 80px;
    /* Wider Space for spine */
    row-gap: 20px;

    /* Transparent - background is on container */
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;

    transform-origin: center center;
    /* Flip from Spine */
    transition: none;
    backface-visibility: hidden;
}

/* Spine separator inside the list? Remove it or Keep it? */
.stylish-ul::before {
    display: none;
    /* Moved to container */
}

.stylish-ul li {
    background: transparent;
    /* Remove card bg to look like text on paper */
    border: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
    /* Line separator like a ledger */

    margin-bottom: 0;
    padding: 15px 10px;
    border-radius: 0;
    transition: 0.3s;
}

.stylish-ul li::before {
    display: none;
    /* Remove left accent line */
}

.stylish-ul li:hover {
    transform: scale(1.02);
    /* Subtle zoom */
    background: rgba(255, 255, 255, 0.02);
    /* Highlight row */
    box-shadow: none;
    border-color: var(--color-accent);
}

.menu-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Center align items */
    margin-bottom: 12px;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /* Subtle divider */
    padding-bottom: 10px;
}

.menu-item-header strong {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--color-accent);
    /* Accent Color Title */
    background: transparent;
    z-index: 2;
    padding-right: 10px;
    letter-spacing: 0.5px;
}

.menu-weight {
    font-size: 0.9rem;
    color: #999;
    margin-top: -3px;
    margin-bottom: 5px;
    font-style: italic;
    font-weight: 500;
}

.menu-dots {
    display: none;
    /* Remove retro dots */
}

.menu-price {
    font-size: 1rem;
    /* Reduced Price Size */
    font-weight: 800;
    color: var(--color-accent);
    background: rgba(242, 102, 34, 0.15);
    /* Accent Tint */
    border: 1px solid rgba(242, 102, 34, 0.4);
    border-radius: 20px;
    padding: 3px 10px;
    /* Slightly smaller padding */
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.menu-item-details {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-style: italic;
    line-height: 1.5;
}

.menu-description {
    font-size: 0.85rem;
    color: #ddd;
    margin-bottom: 5px;
    font-style: italic;
    line-height: 1.4;
}

/* =========================================
   ABOUT SECTION
   ========================================= */
.about-card {
    background: rgba(20, 20, 20, 0.6);
    /* Slightly more transparent for blur effect */
    backdrop-filter: blur(15px);
    /* Strong blur */
    -webkit-backdrop-filter: blur(15px);
    padding: 50px;
    /* More spacing */
    border-radius: 20px;
    /* Modern curves */
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    /* Deep shadow */
    position: relative;
    overflow: hidden;
}

/* Subtle accent line at top */
.about-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent), transparent);
}

.about-subtitle-text {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: #fff;
}

.about-list {
    margin-top: 20px;
}

.about-list li {
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
}

.about-list li::before {
    content: '•';
    color: var(--color-accent);
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    top: -5px;
}

.about-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 40px;
}

.about-img {
    width: 100%;
    height: 250px;
    /* Fixed height to prevent distortion */
    object-fit: cover;
    /* Crucial */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    transition: 0.3s;
}

.about-img:hover {
    transform: scale(1.03);
}

/* =========================================
   GALLERY SECTION (NEW)
   ========================================= */
/* .gallery rule removed (empty) */

.swiper {
    width: 100%;
    margin-top: 60px;
    /* Added margin for guaranteed spacing */
    padding-top: 50px;
    padding-bottom: 50px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
    height: 300px;
    /* Square cards */
    background: var(--glass-bg);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    transition: 0.3s;
}

/* Enhancing the image inside slide */
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.swiper-slide:hover img {
    transform: scale(1.1);
}

/* Swiper Pagination/Navigation customization */
.swiper-pagination-bullet {
    background: #fff;
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    background: var(--color-accent);
    opacity: 1;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--color-accent);
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

/* =========================================
   PREMIUM CONTACT FORM
   ========================================= */
.contactForm {
    max-width: 700px;
    margin: 50px auto 0;
    background: rgba(30, 30, 30, 0.4);
    padding: 50px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* Ultra subtle border */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(15px);
}

.inputBox {
    position: relative;
    margin-bottom: 40px;
    /* More space for premium feel */
}

/* Remove default styles */
.inputBox input,
.inputBox textarea {
    width: 100%;
    padding: 10px 0;
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 0;
    border: none;
    border-bottom: 1px solid #555;
    outline: none;
    background: transparent;
    transition: 0.3s;
    font-family: var(--font-body);
}

/* Floating Label Logic */
.inputBox label {
    position: absolute;
    top: 10px;
    left: 0;
    color: #888;
    pointer-events: none;
    transition: 0.3s ease all;
    font-size: 1rem;
    background: transparent;
    /* No bg to not block glass */
}

.inputBox input:focus~label,
.inputBox input:valid~label,
.inputBox input:-webkit-autofill~label,
/* Support autofill */
.inputBox textarea:focus~label,
.inputBox textarea:valid~label,
.inputBox textarea:-webkit-autofill~label {
    /* Support autofill */
    top: -20px;
    font-size: 0.8rem;
    color: var(--color-accent);
}

.inputBox input:focus,
.inputBox textarea:focus {
    border-bottom: 1px solid var(--color-accent);
}

/* Fix Autofill Background */
.inputBox input:-webkit-autofill,
.inputBox input:-webkit-autofill:hover,
.inputBox input:-webkit-autofill:focus,
.inputBox textarea:-webkit-autofill,
.inputBox textarea:-webkit-autofill:hover,
.inputBox textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0px 1000px #1e1e1e inset;
    /* Match dark theme bg roughly or transparent hack */
    transition: background-color 5000s ease-in-out 0s;
}

/* Premium Submit Button */
.inputBox input[type="submit"] {
    background: linear-gradient(90deg, var(--color-accent), #ff8c42);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 1px;
    /* Reduced spacing */
    text-transform: uppercase;
    box-shadow: 0 10px 20px rgba(242, 102, 34, 0.3);
    padding: 10px 30px;
    /* Reduced padding (smaller button) */
    margin: 20px auto 0;
    /* Center button */
    width: auto;
    /* Fit text */
    font-size: 0.9rem;
    /* Smaller text */
    /* Or block with auto margin, table helps with centering sometimes */
    display: block;
    /* Standard centering with margin auto */
}

.inputBox input[type="submit"]:hover {
    box-shadow: 0 15px 25px rgba(242, 102, 34, 0.5);
    background: linear-gradient(90deg, #ff8c42, var(--color-accent));
    transform: translateY(-2px);
}

/* =========================================
   FOOTER
   ========================================= */
/* =========================================
   FOOTER (PROFESSIONAL REDESIGN)
   ========================================= */
.main-footer {
    background: #050505;
    color: #d0d0d0;
    /* Improved Contrast (was text-muted) */
    padding: 60px 0 20px;
    border-top: 1px solid #1a1a1a;
    font-size: 0.9rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    margin-bottom: 50px;
}

.footer-col h3 {
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.footer-col h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--color-accent);
}

.footer-brand-logo {
    width: 120px;
    height: auto;
    /* Fix: Maintain aspect ratio now that width/height attrs are present */
    margin-bottom: 15px;
}

/* Links Lists */
.footer-links,
.footer-contact {
    list-style: none;
}

.footer-links li,
.footer-contact li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #e0e0e0;
    /* High contrast links */
    transition: 0.3s;
}

.footer-links a:hover {
    color: var(--color-accent);
    padding-left: 5px;
}

.footer-contact li i {
    color: var(--color-accent);
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

/* Legal Section */
.anpc-links {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.anpc-links img {
    height: 40px;
    /* Reduced from default */
    border-radius: 4px;
    opacity: 0.8;
    transition: 0.3s;
}

.anpc-links img:hover {
    opacity: 1;
}

.legal-text-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legal-text-links a {
    font-size: 0.85rem;
    color: #666;
}

.legal-text-links a:hover {
    color: var(--color-accent);
}

/* Bottom Copyright */
.footer-bottom {
    text-align: center;
    border-top: 1px solid #1a1a1a;
    padding-top: 20px;
    font-size: 0.85rem;
    color: #555;
}

.floating-call-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: var(--color-accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(242, 102, 34, 0.5);
    z-index: 1001;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(242, 102, 34, 0.7);
    }

    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 15px rgba(242, 102, 34, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(242, 102, 34, 0);
    }
}

/* =========================================
   GALLERY SLIDESHOW STYLES
   ========================================= */
.swiper {
    max-width: 1200px;
    /* Increased per user request */
    aspect-ratio: 4 / 3;
    /* Mobile Default: Boxy 4:3 Container */
    height: auto;
    /* Let width drive height */
    margin: 40px auto;
    /* Center and space */
    padding-bottom: 40px;
    /* Space for dots */
}

/* DESKTOP/TABLET OVERRIDE: Square Slides */
@media (min-width: 768px) {
    .swiper {
        aspect-ratio: auto;
        /* Remove fixed container ratio */
    }

    .swiper-slide {
        aspect-ratio: 1 / 1;
        /* Force Square Slides */
        height: auto;
        /* Allow height to adapt to width */
    }
}

/* ========================================= */
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Crop nicely */
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* =========================================
   MEDIA QUERIES (RESPONSIVE)
   ========================================= */
/* CHANGED BREAKPOINT FROM 767px TO 991px for Mobile Menu */
@media (max-width: 991px) {

    /* Ensure body doesn't have top padding because header is now relative flow */
    body {
        padding-top: 0;
    }

    /* ==== MOBILE HEADER REDESIGN ==== */
    #header {
        position: relative;
        /* Push content down when expanding */
        top: 0;
        /* Reset top offset as top bar just pushes it down naturally in relative flow? NO, header is absolute on desktop. 
                   Wait, on mobile we want it Relative. 
                   If Relative, it sits below Top Bar naturally. */
        background: rgba(10, 10, 10, 0.40);
        /* Transparency RESTORED */
        backdrop-filter: blur(10px);
        /* Blur RESTORED */
        padding: 5px 0;
        height: auto;
    }

    .header-container {
        flex-direction: column;
        /* Stack vertically: Logo on top */
        align-items: center;
        padding-bottom: 5px;
    }

    .header-schedule {
        display: none;
        /* Hide hours on mobile */
    }

    .logo {
        position: static;
        transform: none;
        margin-bottom: 10px;
        order: 1;
    }

    .logo img {
        height: 80px;
        /* Big on mobile too, as requested */
    }

    .hamburger {
        display: flex;
        /* Show hamburger below logo */
        margin-bottom: 5px;
        order: 2;
        /* Ensure burger is below logo */
    }

    /* Move Lang Switcher top right absolute in HEADER CONTAINER */
    /* Note: Top Bar is separate above. */
    .lang-switch {
        position: absolute;
        top: 15px;
        right: 15px;
    }

    /* ==== CORRECT NAV ORDER ==== */
    nav {
        order: 3;
        width: 100%;
        position: relative;
    }

    /* ==== SUBTLE DROPDOWN MENU - ROW LAYOUT ==== */
    nav ul {
        flex-direction: row;
        /* Horizontal text */
        flex-wrap: wrap;
        /* Allow wrapping */
        justify-content: center;
        /* Center items */
        width: 100%;
        background: transparent;
        /* Transparent background */
        border: none;

        /* Animation properties */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s linear;
        /* Linear animation */
        gap: 15px;
        /* Spacing between words */

        /* Positioning */
        margin-top: 5px;
        padding: 0;
    }

    nav ul.active {
        max-height: 600px;
        /* Expand sufficiently */
        padding: 20px 0;
        /* Add padding when open */
    }

    nav ul li {
        width: auto;
        /* Natural width for row items */
        text-align: center;
        padding: 5px 0;
        border: none;
        /* No separator lines */
        opacity: 0;
        /* Fade items in */
        transform: translateY(-10px);
        transition: 0.3s;
    }

    nav ul.active li {
        opacity: 1;
        transform: translateY(0);
    }

    /* Remove hover lines for mobile */
    nav ul li a::after {
        display: none;
    }

    /* Make text bigger on mobile menu */
    nav ul li a {
        font-size: 1.1rem;
        display: block;
        width: 100%;
    }

    /* Adjust Hamburger Open State */
    .hamburger.open span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 6px);
    }

    .hamburger.open span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.open span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -6px);
    }

    /* Other Mobile Adjustments */
    .banner-title {
        font-size: 2.2rem;
    }

    /* Reset spacing for banner content */
    .banner .content {
        margin-top: 0;
    }

    .about-card {
        padding: 25px;
    }

    .contactForm {
        padding: 30px 20px;
    }

    /* Resize Delivery Info Box */
    .delivery-info {
        padding: 15px;
        /* Reduced padding */
        width: 100%;
        /* Ensure it fits nicely */
        max-width: 90%;
        /* Prevent touching edges */
        box-sizing: border-box;
    }

    .delivery-info li {
        font-size: 0.9rem;
        /* Smaller text */
        margin-bottom: 8px;
        /* Tighter spacing */
        line-height: 1.3;
    }

    /* Adjust Top Bar for Mobile if needed */
    /* Adjust Top Bar for Mobile */
    .top-bar-container {
        flex-wrap: nowrap;
        /* Force single row */
        justify-content: space-between;
        text-align: left;
        gap: 5px;
        /* Reduce gap */
    }

    .top-bar {
        font-size: 0.7rem;
        /* Smaller font for mobile to fit */
    }

    .top-bar-right {
        gap: 8px;
    }

    /* COMPACT MENU BUTTONS FOR MOBILE */
    .menu-btn {
        padding: 5px 15px;
        font-size: 0.9rem;
        border-width: 1px;
    }

    .stylish-categories {
        gap: 8px;
        margin-bottom: 25px;
    }

    /* MENU CATEGORIES */
    .menu-btn {
        font-size: 1.1rem;
        /* Restored to be larger/readable */
        padding: 8px 15px;
        /* Slightly reduced padding to fit more per row */
        flex: 1 1 auto;
        /* Allow buttons to grow/shrink nicely */
    }

    /* OPTIMIZE MENU ITEMS FOR MOBILE */
    .menu-item-header {
        align-items: center;
        /* Align vertically center */
    }

    .menu-item-header strong {
        font-size: 1.0rem;
        /* Smaller title */
        max-width: 75%;
        /* Leave room for price */
    }

    .menu-dots {
        display: none;
        /* Hide dots on mobile for cleaner look */
    }

    .menu-price {
        font-size: 1rem;
        white-space: nowrap;
        /* Prevent "33" and "lei" from stacking */
    }

    /* FOOTER MOBILE ADJUSTMENTS */
    /* FOOTER MOBILE ADJUSTMENTS */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px 10px;
        /* Keep grid layout but remove center alignment for text */
        text-align: left;
    }

    /* Brand (1st) and Legal (4th) span full width */
    .footer-col:nth-child(1),
    .footer-col:nth-child(4) {
        grid-column: 1 / -1;
        text-align: center;
        /* Brand and Legal usually look better centered or keep as is? User said "Program and Contact". Let's center Brand/Legal and left-align others. */
    }

    .footer-col h3::after {
        left: 0;
        transform: none;
        /* Left-align the underline for Program/Contact */
    }

    /* Re-center Brand/Legal title underline if needed */
    .footer-col:nth-child(1) h3::after,
    .footer-col:nth-child(4) h3::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-brand-logo {
        margin: 0 auto 15px;
        display: block;
    }

    .footer-contact li {
        font-size: 0.85rem;
        word-break: break-all;
        justify-content: flex-start;
        /* Align flex items left */
        color: #ddd;
        /* Improved contrast from default grey */
    }

    /* Accessibility: Larger touch targets for bullets */
    .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
    }

    .footer-contact li i {
        margin: 0 10px 0 0;
        /* Adjust icon margin */
    }

    .anpc-links {
        justify-content: center;
        /* Center legal logos */
    }

    /* Keep book design on mobile - only adjust text visibility */

}

/* =========================================
   REALISTIC PAGE TURN ANIMATIONS
   ========================================= */
.menu-list {
    transform-origin: left center;
    /* Axis of the "Spine" */
    transition: none;
    /* JS handles timing */
    backface-visibility: hidden;
    /* Hide back when flipped */
}

/* The element that is turning */
.menu-list.page-turning {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    /* Must be on top */
    pointer-events: none;
    /* No interaction while turning */
    box-shadow: -5px 10px 20px rgba(0, 0, 0, 0.5);
    /* Shadow while lifting */
}

@keyframes turnPage {
    0% {
        transform: rotateY(0deg);
        opacity: 1;
    }

    100% {
        /* Rotate -90deg (perpendicular to viewer) then vanish */
        transform: rotateY(-90deg);
        opacity: 1;
    }
}

/* New Page Coming In (Optional - usually static underneath) 
   But if we want "Right Page comes from Left", we can animate it too.
   For now, "Reveal Underneath" is sufficient as per User Request.
*/

.animate-turn-page {
    /* Anchored at center, rotating -90deg looks like left page closes or right page opens? 
       If transform-origin is center:
       0deg = Flat.
       -90deg = Perpendicular.
       If we want "Right page goes over Left":
       We actually want rotateY(-180deg)? 
       No, -180 would flip it completely upside down visible from back?
       
       Let's stick to -90deg Disappear logic, which looks like lifting the page up vertical.
       User said "come over the left". 
       So -180deg is the full turn.
    */
    animation: turnPage 0.8s forwards cubic-bezier(0.25, 1, 0.5, 1);
}

.menu-list.page-turning {
    /* Ensure it stays on top of the 'next' page */
    z-index: 100;
}

/* Ensure container handles absolute child */
#menu .container {
    position: relative;
}

/* =========================================
   MENU BUTTONS & HIDDEN CONTENT
   ========================================= */
.menu-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    margin-bottom: 5px;
}

.menu-actions .menu-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.8);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.menu-actions .menu-btn:hover,
.menu-actions .menu-btn.active {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
}

/* Specific Mobile Overrides for Ingredient/Allergen buttons */
@media (max-width: 767px) {
    .menu-actions .menu-btn {
        font-size: 0.6rem !important;
        /* Smaller text */
        padding: 2px 5px !important;
        /* Reduce padding */
        border-radius: 6px;
    }

    /* Reduce menu subtitle size on mobile */
    .title p {
        font-size: 0.9rem !important;
        margin-bottom: 20px !important;
        /* Reduce margin too */
    }
}

.details-content {
    display: none;
    font-size: 0.85rem;
    color: #ddd;
    margin-top: 5px;
    padding: 5px 0;
    font-style: italic;
    border-top: 1px dotted rgba(255, 255, 255, 0.1);
}

.details-content.show {
    display: block;
    animation: fadeIn 0.3s ease;
}

.menu-price-mobile {
    display: none;
    /* Hidden by default on Desktop */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fix for mobile text color override */
@media (max-width: 991px) {

    /* Tablet Gallery Resize */
    .swiper {
        max-width: 95%;
        /* Keep Width limits but inherit Aspect Ratio (16/9) */
        height: auto;
    }

    .details-content {
        color: #cccccc !important;
    }

    .menu-btn {
        font-size: 0.55rem;
        padding: 1px 6px;
        letter-spacing: 0.2px;
    }

    /* Tablet Menu Adjustments (767px - 991px) */
    .menu-categories {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        /* Comfortable gap for tablet */
        width: 100%;
    }

    .menu-btn {
        font-size: 0.9rem;
        /* Standard tablet size */
        padding: 8px 15px;
        /* Comfortable padding */
        flex: 0 1 auto;
        width: auto;
        margin: 0;
    }

    .book-container {
        width: 100%;
        overflow-x: hidden;
        /* Prevent horizontal scroll */
        padding: 10px 0;
    }

    .stylish-ul {
        padding: 15px;
    }



    .menu-description {
        font-size: 0.8rem;
    }

    .menu-dots {
        display: none;
        /* Hide dots on mobile if they cause issues or on wrap */
    }

    .menu-price {
        margin-left: auto;
        /* Push price to right */
        font-size: 0.8rem;
        /* Explicitly smaller for Tablet < 991px */
    }

    /* Shift entire list item (including bullet) right */
    .stylish-ul li {
        margin-left: 10px;
    }

    /* REVERT: Remove the individual shift */
    .menu-item-header strong {
        padding-left: 0;
    }
}

/* Specific Mobile Layout (< 767px) */
@media (max-width: 767px) {

    /* Mobile Gallery Resize */
    .swiper {
        max-width: 100%;
        /* Keep 16/9 consistency */
        height: auto;
    }

    /* Compact Menu for Mobile */
    .menu-categories {
        gap: 5px;
        /* Slightly more gap */
    }

    .menu-btn {
        font-size: 0.85rem !important;
        /* Increased from 0.72rem */
        padding: 6px 10px !important;
        /* Increased padding */
        border-width: 1px;
    }

    .menu-price {
        display: none;
        /* Hide default price in header on mobile */
    }

    .menu-price-mobile {
        display: block;
        width: fit-content;
        margin: 10px auto 0;
        /* Center it */
        font-weight: 800;
        color: var(--color-accent);
        font-size: 0.8rem;
        /* Reduced Mobile Price */
        background: rgba(242, 102, 34, 0.15);
        border: 1px solid rgba(242, 102, 34, 0.4);
        border-radius: 20px;
        padding: 4px 15px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        text-shadow: none;
        /* Shadow on box, not text */
    }

    /* Wrap header items only on mobile */
    .menu-item-header {
        flex-wrap: wrap;
        gap: 5px;
    }

    .menu-item-header strong {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* =========================================
   SHOPPING CART STYLES (RESTORED)
   ========================================= */

/* Floating Cart Button */
.cart-fab {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: var(--color-accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(242, 102, 34, 0.4);
    cursor: pointer;
    z-index: 1000;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cart-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(242, 102, 34, 0.6);
}

.cart-fab i {
    font-size: 1.5rem;
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #fff;
    color: var(--color-accent);
    font-size: 0.8rem;
    font-weight: 800;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-accent);
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cart-badge.visible {
    opacity: 1;
    transform: scale(1);
}

/* Add to Cart Button (In Menu) */
/* Cart Item Layout Updates */
/* Cart Item Layout Updates - Unified Mobile Style */
/* Cart Item Layout Updates - V3 (User Request) */
.cart-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap: 8px;
}

.cart-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    gap: 10px;
}

.cart-item-right-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    /* Don't shrink price/trash */
}

.cart-item-bottom {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.cart-item-title {
    font-weight: bold;
    color: var(--color-text);
    font-size: 0.9rem;
    white-space: normal;
    line-height: 1.3;
    flex: 1;
    /* Take available width */
}

.cart-item-total {
    font-weight: bold;
    color: var(--color-accent);
    font-size: 0.9rem;
    white-space: nowrap;
}



/* Quantity Controls */
.cart-quantity-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    /* Mobile gap */
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    /* Mobile padding */
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-qty {
    width: 16px;
    /* Mobile size */
    height: 16px;
    /* Mobile size */
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.5rem;
    /* Mobile font size */
}

.btn-qty:hover {
    background: var(--color-accent);
    color: #fff;
    transform: scale(1.1);
}

.qty-display {
    font-weight: bold;
    min-width: 12px;
    /* Mobile width */
    text-align: center;
    font-size: 0.8rem;
    /* Mobile font size */
}

/* btn-remove is now in header */
.btn-remove {
    background: transparent;
    border: none;
    color: #ff4757;
    cursor: pointer;
    font-size: 1rem;
    padding: 2px 5px;
    transition: transform 0.2s ease;
}

.btn-remove:hover {
    transform: scale(1.2) rotate(10deg);
}

.btn-add-cart {
    margin-left: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 5px 12px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-add-cart:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Cart Modal & Phone Modal Shared Styles */
.cart-modal,
.phone-modal {
    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(15px);
    width: 90%;
    max-width: 400px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    padding: 20px;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}

.modal-overlay.active .cart-modal,
.modal-overlay.active .phone-modal {
    transform: translateY(0);
}

/* Cart Specifics */
.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.cart-header h3 {
    font-family: var(--font-heading);
    color: var(--color-accent);
    margin: 0;
}

.close-modal {
    background: none;
    border: none;
    color: #888;
    font-size: 1.2rem;
    cursor: pointer;
    transition: 0.3s;
}

.close-modal:hover {
    color: #fff;
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 20px;
}

.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.cart-item-info {
    display: flex;
    flex-direction: column;
}

.cart-item-title {
    font-weight: 600;
    color: #fff;
    font-size: 0.9rem;
}

.cart-item-price {
    font-size: 0.8rem;
    color: #aaa;
}

.btn-remove {
    background: none;
    border: none;
    color: #ff4d4d;
    cursor: pointer;
    padding: 5px;
    opacity: 0.7;
    transition: 0.3s;
}

.btn-remove:hover {
    opacity: 1;
    transform: scale(1.1);
}

.cart-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 15px;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: #fff;
}

.btn-order {
    width: fit-content;
    min-width: 200px;
    margin: 0 auto;
    display: block;
    background: var(--color-accent);
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(242, 102, 34, 0.3);
}

.btn-order:hover {
    background: #d45d1e;
    transform: translateY(-2px);
}

/* Phone Modal */
.phone-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.btn-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    padding: 15px;
    border-radius: 15px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.3s;
    font-size: 1.1rem;
    font-weight: 600;
}

.btn-phone:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

/* Mobile Cart Adjustments */
/* Mobile Cart Adjustments (Now mostly global, just container tweaks) */
@media (max-width: 767px) {
    .cart-modal {
        width: 95%;
        padding: 15px;
    }

    .btn-add-cart {
        padding: 4px 10px;
        font-size: 0.75rem;
    }
}

/* =========================================
   SPECIAL MENU ITEM (BURGER)
   ========================================= */
.special-offer-section {
    margin-bottom: 20px;
    padding: 0;
}

.special-card {
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(242, 102, 34, 0.3);
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;

    /* SCALING FIX: Limit width so it isn't huge */
    width: 100%;
    /* max-width removed to match standard items */
    margin: 0;
}

.special-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(242, 102, 34, 0.2);
}

.special-content-wrapper {
    display: flex;
    flex-direction: row;
    /* FORCE ROW GLOBALLY (Mobile & Desktop) */
    align-items: center;
    /* Center vertically */
    gap: 0;
}

.special-image {
    width: 30%;
    /* Slightly larger on mobile for visibility */
    /* Removed aspect-ratio to allow stretching */
    height: auto;
    min-height: 180px;
    /* INCREASED HEIGHT FOR DESKTOP */
    align-self: stretch;
    /* Stretch to fill full height */
    flex-shrink: 0;
    position: relative;
    /* CRITICAL: Contain the absolute image */
}

/* Ensure image covers area */
.special-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.special-info {
    width: 75%;
    /* Remainder */
    padding: 5px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Remove desktop override since we want row globally now */
@media (min-width: 768px) {
    .special-image {
        width: 25%;
        /* Even smaller on desktop if desired, or keep 25 */
    }

    .special-content-wrapper {
        align-items: stretch;
        /* Stretch children so info takes full height */
    }

    .special-info {
        width: 75%;
        justify-content: flex-start;
        /* Move content to top */
        padding-top: 15px;
        /* Add some space from top edge */
    }
}

/* Mobile specific tweaks if needed */
@media (max-width: 767px) {
    .special-info h3 {
        font-size: 1rem;
        /* Smaller title on mobile */
    }

    .special-price-tag {
        font-size: 0.9rem;
        padding: 1px 6px;
    }

    .special-details {
        font-size: 0.75rem;
        line-height: 1.2;
    }
}

.special-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2px;
    /* Minimal gap */
    width: 100%;
}

.special-info h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    /* Slightly smaller to match standard item */
    color: var(--color-accent);
    margin: 0;
    text-transform: uppercase;
    flex: 1;
    padding-right: 10px;
}

/* Price Tag Special - Match standard pill */
.special-price-tag {
    font-size: 0.95rem;
    /* Standard size */
    font-weight: 800;
    color: var(--color-accent);
    background: rgba(242, 102, 34, 0.15);
    border: 1px solid rgba(242, 102, 34, 0.4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: inline-block;
    padding: 1px 8px;
    /* Tighter pill */
    border-radius: 20px;
    margin: 0;
    white-space: nowrap;
}

.special-details {
    color: #ccc;
    font-size: 0.8rem;
    margin-bottom: 5px;
    /* Minimal gap */
    line-height: 1.3;
    font-style: italic;
}

/* Actions Row */
.special-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    /* Tighter gap */
    align-items: center;
    margin-top: 2px;
}

/* Hidden details containers */
.special-details-content {
    display: none;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-style: italic;
    color: #bbb;
    font-size: 0.9rem;
    border-left: 3px solid var(--color-accent);
}

.special-details-content.show {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Minimize standard menu buttons inside special card */
.special-actions .menu-btn {
    padding: 2px 8px;
    font-size: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: #ccc;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
    outline: none;
    /* Remove focus outline */
    -webkit-tap-highlight-color: transparent;
    /* Remove mobile tap highlight */
}

.special-actions .menu-btn:focus {
    outline: none;
    box-shadow: none;
    transform: none;
    /* Prevent stickiness */
}

/* Ensure vertical alignment */
.special-actions .menu-btn,
.btn-special-cart {
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    /* Fixed height for alignment */
}

@media (hover: hover) {
    .special-actions .menu-btn:hover {
        border-color: var(--color-accent);
        color: #fff;
    }
}

.special-actions .menu-btn.active {
    border-color: var(--color-accent);
    color: #fff;
    background: rgba(242, 102, 34, 0.2);
    /* Optional background hint */
    transform: none;
    /* Ensure no lift persists */
}

/* Minimized Cart Button */
.btn-special-cart {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    /* Minimal padding */
    border-radius: 8px;
    /* Match menu-btn radius */
    font-weight: 600;
    font-size: 0.75rem;
    /* Minimal font */
    cursor: pointer;
    transition: 0.3s;
    cursor: pointer;
    transition: 0.3s;
    /* display: flex; REMOVED - handled above with height */
    gap: 4px;
}

.btn-special-cart:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

/* Responsive Desktop */
/* Responsive Desktop overrides if needed */
@media (min-width: 768px) {
    .special-info h3 {
        font-size: 1.4rem;
    }

    .cart-txt-mobile {
        display: none;
    }
}

/* Tablet & Mobile Scalability Updates */
@media (max-width: 1024px) {
    .special-card {
        width: 100%;
    }

    .special-info h3 {
        font-size: 1.0rem;
        /* Smaller title on tablet */
    }

    /* Tablet Button Reduction */
    .special-actions .menu-btn {
        padding: 2px 6px;
        font-size: 0.7rem;
        height: auto !important;
        /* Override fixed 24px */
    }

    /* Text Size Matching */
    .special-details-content {
        font-size: 0.8rem;
    }

    /* Smaller Price on Tablet */
    .special-price-tag {
        font-size: 0.8rem;
    }
}

@media (max-width: 767px) {
    .special-offer-section {
        padding: 0;
    }

    .special-card {
        border-radius: 10px;
        /* Small radius */
    }

    /* Small Image (handled globally now, but ensure override if needed) */
    .special-image {
        width: 30%;
        /* Slightly larger on mobile for visibility */
        min-height: 0;
        /* RESET FOR MOBILE: Keep it tight */
    }

    .special-info {
        padding: 5px 8px;
        /* Tight padding */
    }

    /* Tiny Title */
    .special-info h3 {
        font-size: 0.9rem;
        /* Very small title */
        line-height: 1.1;
        margin-bottom: 2px;
    }

    /* Tiny Price */
    .special-price-tag {
        font-size: 0.8rem;
        padding: 1px 6px;
        margin-bottom: 2px;
    }

    /* Tiny Description */
    .special-details {
        font-size: 0.7rem;
        line-height: 1.2;
        margin-bottom: 4px;
    }

    /* Tiny Buttons */
    .special-actions .menu-btn {
        padding: 1px 4px !important;
        /* Even smaller */
        font-size: 0.6rem !important;
        /* Even smaller */
        border-radius: 6px !important;
        border: 1px solid rgba(255, 255, 255, 0.3);
        height: auto !important;
        /* Override fixed 24px */
    }

    /* Reduce Toggle Content Font Size */
    .special-details-content {
        font-size: 0.7rem !important;
        /* Smaller text for ingredients/allergens */
        line-height: 1.2 !important;
        padding: 5px !important;
    }

    .special-details-content em {
        font-size: 0.7rem !important;
    }

    /* Fix Cart Button Size: Standard (inline) on mobile */
    .btn-special-cart {
        padding: 1px 5px !important;
        font-size: 0.6rem !important;
        border-radius: 6px !important;
        width: auto !important;
        /* Prevent expansion */
        flex-grow: 0 !important;
        /* Do not grow */
        justify-content: center;
        height: auto !important;
        /* Override fixed 24px */
    }

    .btn-special-cart i {
        font-size: 0.6rem !important;
    }

    .cart-txt-mobile {
        display: none !important;
        /* Hide text on mobile, icon only */
    }
}