:root {
    /* Premium Organic Palette */
    --primary-color: #5D7B6F;
    /* Muted Sage / Matcha */
    --primary-hover: #4A6359;
    --secondary-color: #5D4037;
    /* Deep Roasted Oolong */
    --text-color: #2C3632;
    /* Soft Charcoal */
    --bg-color: #F9F9F7;
    /* Warm Rice Paper */
    --bg-light: #F0F4EF;
    /* Lighter Sage Tint */
    --surface-color: rgba(255, 255, 255, 0.7);
    /* Glassy Surface */

    --border-color: #E2E8F0;
    --font-heading: 'Fraunces', serif;
    --font-body: 'Outfit', sans-serif;
    --font-family: var(--font-body);
    --max-width: 1200px;
    --header-height: 70px;
    --banner-height: 0px;
    /* Removed construction bar */

    /* refined glass effect */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.4);

    /* softer premium shadows */
    --card-shadow: 0 10px 30px -10px rgba(93, 123, 111, 0.15);
    --card-shadow-hover: 0 20px 40px -12px rgba(93, 123, 111, 0.25);
}

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

body {
    font-family: var(--font-body);
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--bg-color);
    /* Subtle organic grain/gradient background */
    background-image: radial-gradient(circle at 10% 20%, rgba(93, 123, 111, 0.03) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(93, 64, 55, 0.03) 0%, transparent 20%);
    background-attachment: fixed;
}

html {
    scroll-behavior: smooth;
}

/* Ensure anchors land below the fixed header */
[id] {
    scroll-margin-top: calc(var(--header-height) + 20px);
}

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

ul {
    list-style: none;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* Under Construction Bar Removed */

/* Liquid Scroll Progress Bar */
.scroll-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: transparent;
    z-index: 2000;
    pointer-events: none;
}

.scroll-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary-color), #81c784);
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
    transition: width 0.1s ease-out;
}

/* Header with Glassmorphism */
.site-header {
    height: var(--header-height);
    display: flex;
    display: flex;
    align-items: center;
    position: fixed;
    top: var(--banner-height);
    width: 100%;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--glass-border);
    z-index: 1000;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .site-header {
        display: none !important;
        /* Option B: Unified Mobile Header */
    }
}

.site-header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    height: 60px;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Typography */
h1,
h2,
h3,
h4,
.logo {
    font-family: var(--font-heading);
    font-weight: 700;
}

h1 {
    letter-spacing: -0.03em;
}

h2 {
    letter-spacing: -0.02em;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.main-nav ul {
    display: flex;
    gap: 2rem;
}

.main-nav a {
    font-weight: 500;
    color: var(--secondary-color);
}

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

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background-color: var(--secondary-color);
    border-radius: 2px;
}

/* Sections */
main {
    margin-top: var(--header-height);
}

.section {
    padding: 20px 0;
    /* Reduced top padding */
}

.section-pb-0 {
    padding-bottom: 0 !important;
}

.bg-light {
    background-color: var(--bg-light);
}

.bg-light-green {
    background-color: var(--bg-light);
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: var(--secondary-color);
    background: linear-gradient(135deg, var(--secondary-color) 0%, #2e3b4e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Hero with Parallax Prep */
.hero-section {
    padding: 100px 0;
    text-align: center;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('images/overall.jpeg');
    background-size: cover;
    background-position: center;
    /* Static background */
    color: white;
    position: relative;
    overflow: hidden;
}

.hero-content h1 {
    font-size: 4rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: white;
    /* Changed to white for better contrast */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-weight: 800;
}

.hero-content p {
    font-size: 1.5rem;
    margin-bottom: 2.5rem;
    color: #f1f1f1;
    /* Light gray for readability */
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    font-weight: 500;
}

/* Feature Cards (Ingredients) */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    text-align: center;
}

.feature-card {
    background: white;
    padding: 2.5rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    border: 1px solid #eef2f6;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.feature-card .icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    background-color: var(--bg-light);
    width: 80px;
    height: 80px;
    line-height: 80px;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
}

.feature-card h3 {
    margin-bottom: 0.75rem;
    color: var(--secondary-color);
    font-size: 1.25rem;
}

.feature-card p {
    color: var(--secondary-color);
    opacity: 0.9;
}


/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

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

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(76, 175, 80, 0.4);
}

/* Grid & Cards */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.menu-category {
    margin-bottom: 1.5rem;
}

.menu-category:last-child {
    margin-bottom: 0;
}

.menu-category>h3 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 2px solid var(--primary-color);
    display: inline-block;
    padding-bottom: 0.5rem;
    color: var(--primary-color);
    background: linear-gradient(135deg, var(--primary-color) 0%, #2e7d32 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


.card img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    object-position: center top;
    /* Show top of the drink */
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
    transition: transform 0.5s ease;
}

/* Coffee-specific adjustment to reduce top whitespace */
#coffee .card img {
    object-position: center 20%;
}

/* Dessert-specific adjustment for last 3 items */
#dessert .card:nth-last-child(-n+3) img {
    object-position: center 40%;
}

/* Snack-specific adjustment for Pies (Curry Beef Pie #5, Mushrooms Chicken Pie #6) */
#snacks .card:nth-child(5) img,
#snacks .card:nth-child(6) img {
    object-position: center 50%;
}

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

.card {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface-color);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* Subtle glass border */
    backdrop-filter: blur(4px);
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--card-shadow-hover);
    border-color: var(--primary-color);
}

/* Add padding back to content text */
/* Card Content Layout */
/* New Card Header Layout */
.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.75rem 0.75rem 0.25rem;
    min-height: 2.5rem;
    gap: 0.5rem;
    position: relative;
}

/* Re-add underline to the whole row instead of just H3 if desired, 
   or just keep it clean. Let's keep it clean for now or add it to the row.
   The original design had an underline under the title area. */
.card-header-row::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1.5rem;
    right: 1.5rem;
    height: 2px;
    background-color: var(--primary-color);
    opacity: 0.5;
}

.card h3 {
    margin: 0;
    padding: 0;
    font-size: 1.15rem;
    color: var(--secondary-color);
    line-height: 1.3;
    flex: 1;
}

.card .price {
    padding: 0;
    font-weight: 700;
    color: var(--primary-color);
    font-size: 1.1rem;
    white-space: nowrap;
}

.card p {
    padding: 0 0.75rem 0.75rem;
    font-size: 0.95rem;
    color: #64748b;
    flex-grow: 1;
}




/* Forms */
.contact-form {
    max-width: 600px;
    margin: 0 auto;
}

#card-container {
    min-height: 100px;
    width: 100%;
    /* Ensure it has space */
    margin-bottom: 1rem;
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #eee;
}

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

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

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: inherit;
    font-size: 1rem;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}




/* Footer */
.site-footer {
    background-color: var(--secondary-color);
    color: white;
    padding: 40px 0;
    margin-top: auto;
    text-align: center;
}

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

.social-links {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
}

.social-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.6rem 1.2rem;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.social-link:hover {
    color: white;
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.social-link svg {
    color: white;
}

/* Split Layout */
.split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.map-container {
    width: 100%;
    height: 100%;
    min-height: 350px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 5px solid white;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
    min-height: 350px;
}

/* Mobile Responsive */
/* Category Rail - Dynamic Offset for Scroll (Global) */
.category-rail-container {
    position: sticky;
    top: var(--header-height);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    margin: 0 0 1.5rem;
    padding: 0;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    /* Subtle border for tab bar feel */
    transition: top 0.3s ease;

    /* Hide scrollbar */
    scrollbar-width: none;
    /* Firefox */
}

.category-rail-container::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

/* Update rail top when header is scrolled */
/* Desktop: Keeps sticking below fixed header */
.site-header.scrolled+main .category-rail-container,
.scrolled~#menu .category-rail-container {
    top: 60px;
}

@media (max-width: 768px) {

    /* Mobile: Header is hidden, Rail is the Unified FIXED Top Bar */
    .category-rail-container,
    .site-header.scrolled+main .category-rail-container,
    .scrolled~#menu .category-rail-container {
        position: fixed;
        /* Permanently fixed */
        top: 0 !important;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        z-index: 2000;
        padding-top: env(safe-area-inset-top);
        height: 60px;
        padding-bottom: 0px;
        margin: 0;
        /* Ensures full width */
    }

    /* Compensate for fixed header so content isn't hidden */
    body {
        padding-top: 60px;
    }

    /* Ensure the rail items are centered vertically in the new 60px height */
    .category-rail {
        height: 60px;
        align-items: center;
        padding-left: 0;
        /* Remove padding from container to allow full flush sticky */
    }

    /* Sticky Brand Label for Mobile */
    .brand-label {
        position: sticky;
        left: 0;
        z-index: 10;
        background: rgba(255, 255, 255, 1);
        padding-left: 15px;
        /* Move padding inside the sticky element */
        padding-right: 12px;
        margin-right: 5px !important;
        height: 100%;
        display: flex;
        align-items: center;
        box-shadow: 5px 0 10px -5px rgba(0, 0, 0, 0.1);
    }
}

.category-rail {
    display: flex;
    gap: 0;
    /* Remove gap, use padding */
    white-space: nowrap;
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding: 0 1rem;
    height: 54px;
    /* Fixed height for consistency */
    align-items: center;
}

.category-item {
    padding: 14px 16px;
    background: transparent;
    border-radius: 0;
    color: #64748b;
    /* Muted inactive state */
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    border: none;
    transition: all 0.2s ease;
    box-shadow: none;
    position: relative;
    margin-right: 0.5rem;
}

.category-item:hover {
    transform: none;
    box-shadow: none;
    color: var(--primary-color);
}

.category-item.active {
    background: transparent;
    color: var(--secondary-color);
    border-color: transparent;
    box-shadow: none;
    font-weight: 700;
}

/* Active Underline Indicator */
.category-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary-color);
    border-radius: 3px 3px 0 0;
}

/* Mobile Responsive Adjustments for Rail */
@media (max-width: 768px) {
    .category-rail-container {
        margin: 0 -15px 1.5rem;
        /* Bleed to edges on mobile */
        padding: 0 15px;
        /* Use side padding */
    }

    .category-item {
        padding: 14px 12px;
        /* Consistent height, smaller width padding */
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .split-layout {
        grid-template-columns: 1fr;
    }

    .main-nav {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        width: 100%;
        background: white;
        padding: 1rem 0;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    .main-nav.active {
        display: block;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 0;
        text-align: center;
    }

    .main-nav li a {
        display: block;
        padding: 1rem;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }




    /* Mobile Bottom Navigation */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: calc(65px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(15px);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
        z-index: 2005;
        justify-content: space-around;
        align-items: flex-start;
        /* Align to top to keep icons stable */
        padding-top: 10px;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: var(--secondary-color);
        text-decoration: none;
        font-size: 0.75rem;
        font-weight: 500;
        transition: color 0.3s ease;
    }

    .nav-item:active {
        color: var(--primary-color);
    }

    .nav-icon {
        font-size: 1.5rem;
        margin-bottom: 2px;
    }

    .nav-cart-wrapper {
        position: relative;
    }

    .mobile-cart-count {
        position: absolute;
        top: -5px;
        right: -10px;
        background: var(--primary-color);
        color: white;
        font-size: 0.7rem;
        padding: 2px 6px;
        border-radius: 10px;
        min-width: 18px;
        text-align: center;
    }



    /* Optimization for Mobile Buttons */
    .btn-sm,
    .add-to-cart-btn {
        min-height: 48px;
        /* High-quality touch target */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .section {
        padding: 60px 0 40px;
    }

    /* Remove redundant floating elements on mobile */
    .cart-floater {
        display: none !important;
    }

    /* Cart Modal Fixes for Mobile Scrolling */
    .cart-modal {
        z-index: 3000;
    }

    .cart-content {
        height: 90dvh;
        /* Scale down to fit comfortably in view */
        width: 94%;
        margin: 3dvh auto;
        /* Centers the 'floating' card */
        /* padding moved to children */
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
    }

    .cart-items {
        /* Reset overflow since it's on body now */
        overflow-y: visible;
    }

    .cart-footer {
        margin-bottom: 0;
        /* Reset bottom margin, using padding now */
    }
}

/* Cart & Order CSS */
.btn-sm {
    padding: 8px 16px;
    font-size: 0.9rem;
    width: 100%;
    margin-top: 10px;
    border-radius: 8px;
}

.card .btn-sm {
    margin: 15px;
    margin-top: auto;
    width: calc(100% - 30px);
}

.cart-floater {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--primary-color);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    transition: transform 0.3s ease;
}

.cart-floater:hover {
    transform: scale(1.1);
}

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

.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #e53935;
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}

/* Cart Modal */
.cart-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: flex-end;
}

.cart-modal.active {
    display: flex;
}

.cart-content {
    background-color: white;
    width: 90%;
    max-width: 440px;
    height: 90vh;
    /* Fixed height on desktop too for consistency, or auto */
    max-height: 90vh;
    /* Remove padding from container, move to children */
    padding: 0;
    display: flex;
    flex-direction: column;
    animation: slideIn 0.3s ease-out;
    border-radius: 24px;
    /* Consistent change */
    overflow: hidden;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding: 2rem 2rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    flex: none;
    background: white;
}

.cart-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 2rem;
    -webkit-overflow-scrolling: touch;
}

.cart-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--secondary-color);
}

.close-cart {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--secondary-color);
}

.cart-items {
    /* Flex parenting handled by cart-body now */
    margin-bottom: 1.5rem;
}

.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.cart-item-details h4 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.cart-item-details p {
    font-size: 0.9rem;
    color: #666;
}

.remove-item {
    color: #ef4444;
    cursor: pointer;
    font-size: 0.9rem;
    background: none;
    border: none;
}

.cart-footer {
    border-top: 1px solid var(--border-color);
    padding: 1.5rem 2rem 2rem;
    /* Add bottom padding */
    background: white;
    flex: none;
    z-index: 10;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
}

.cart-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
    padding: 15px;
    font-size: 1.1rem;
}

/* Success State UI */
.success-message {
    text-align: center;
    padding: 3rem 1rem;
    animation: fadeIn 0.5s ease-out;
}

.success-message .icon {
    font-size: 4rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    display: block;
}

.success-message h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--secondary-color);
}

.success-message p {
    color: #666;
    margin-bottom: 2rem;
}

/* Square Card Container Styling */
#payment-form-container {
    padding: 2rem;
    background: #ffffff;
    border-radius: 20px;
    margin-bottom: 2rem;
    border: 1px solid #eef2f6;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.divider {
    text-align: center;
    margin: 20px 0;
    position: relative;
}

.divider span {
    background: #fff;
    padding: 0 15px;
    position: relative;
    z-index: 1;
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.divider::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #f1f5f9;
}

/* Digital Wallet Button Heights */
#apple-pay-button,
#google-pay-button {
    height: 48px;
    margin-bottom: 12px;
}

/* Loading State */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 16px;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#card-container {
    min-height: 120px;
}

/* Contact Info in About Section */
.contact-info {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid #eef2f6;
}

.contact-info p {
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact-info p:last-child {
    margin-bottom: 0;
}

.contact-info strong {
    color: var(--primary-color);
    min-width: 80px;
}

/* Sweetness Selection Modal */
/* Sweetness Selection Modal - Premium Upgrade */
.sweetness-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.3s ease;
    opacity: 0;
}

.sweetness-modal.active {
    display: flex;
    opacity: 1;
}

.sweetness-content {
    background: #ffffff;
    padding: 0;
    /* Remove internal padding, move to children */
    border-radius: 24px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.8);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 85vh;
    /* Limit height to less than viewport */
    display: flex;
    /* Flex layout for sticky footer */
    flex-direction: column;
    overflow: hidden;
    /* Hide overflow on container */
}

.customization-header {
    flex: none;
    padding: 2rem 2rem 0.5rem;
    /* Copied top padding */
    background: white;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.customization-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 2rem;
    -webkit-overflow-scrolling: touch;
}

.customization-footer {
    flex: none;
    padding: 1rem 2rem 2rem;
    background: white;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
    z-index: 10;
}

.sweetness-modal.active .sweetness-content {
    transform: scale(1);
    animation: modalPop 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalPop {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.sweetness-content h3 {
    margin-bottom: 0.5rem;
    color: var(--secondary-color);
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
}

.sweetness-content p#sweetnessItemName {
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 600;
}

.selection-group {
    margin-bottom: 1.5rem;
}

.selection-group:last-child {
    margin-bottom: 0.5rem;
}

.selection-group h4 {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.selection-group h4::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

/* Specific Grid Layouts */
.sweetness-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

/* Optimization for Toppings Grid */
#toppings-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}

/* Universal Button Style */
.sweetness-btn,
.topping-btn {
    padding: 0.7rem 1.2rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 9999px;
    /* Pill shape */
    background: white;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--secondary-color);
    width: 100%;
    /* For grid items */
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sweetness-btn:hover,
.topping-btn:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    transform: translateY(-1px);
}

.sweetness-btn.selected,
.topping-btn.selected {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 4px 6px rgba(76, 175, 80, 0.25), 0 0 0 3px rgba(76, 175, 80, 0.15);
    /* Ring effect */
    transform: translateY(-1px);
}

/* Confirm Button Floating Effect */
#confirmCustomization {
    width: 100%;
    margin-top: 0;
    /* Reset margin */
    padding: 1rem;
    font-size: 1rem;
    border-radius: 16px;
    box-shadow: 0 10px 15px -3px rgba(76, 175, 80, 0.3);
    transition: transform 0.2s;
}

#confirmCustomization:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 20px -3px rgba(76, 175, 80, 0.4);
}

.cart-item-sweetness {
    display: block;
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 4px;
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

.cart-item-toppings {
    font-size: 0.8rem !important;
    color: var(--primary-color) !important;
    margin-top: 2px;
    padding-left: 4px;
}

/* Interior Section */
.section-no-padding {
    padding: 0;
    overflow: hidden;
}

.interior-banner {
    position: relative;
    height: 400px;
    width: 100%;
    overflow: hidden;
}

.interior-img {
    width: 100%;
    height: 115%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: -7.5%;
    left: 0;
    transition: transform 0.1s ease-out;
}

.interior-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.7), transparent);
    color: white;
    padding: 3rem 0;
}

.interior-overlay h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.interior-overlay p {
    font-size: 1.1rem;
    opacity: 0.9;
}

@media (max-width: 768px) {
    .interior-banner {
        height: 250px;
    }

    .interior-overlay h2 {
        font-size: 1.5rem;
    }

    .sweetness-content {
        padding: 1.5rem;
        width: 95%;
    }
}

/* Reveal Animations */

/* Boba Icon List Component */
.boba-list {
    list-style: none;
    padding: 0;
}

.boba-list li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: 0.75rem;
}

.boba-list li::before {
    content: '🧋';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.1rem;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

/* Background Tea Leaf Pattern (Subtle) */
.leaf-pattern {
    background-image: radial-gradient(var(--primary-color) 0.5px, transparent 0.5px);
    background-size: 30px 30px;
    opacity: 0.03;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Frosted Glass Cart Summary Preview */
.cart-preview {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 280px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    z-index: 2000;
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.cart-preview.active {
    transform: translateX(0);
    opacity: 1;
}

.cart-preview:hover {
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(-5px);
}

.cart-preview-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cart-preview-icon {
    font-size: 1.5rem;
    background: white;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.cart-preview-info {
    flex: 1;
}

.cart-preview-info h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 2px;
    color: var(--secondary-color);
}

.cart-preview-info p {
    font-size: 0.8rem;
    color: #64748b;
}

.cart-preview-arrow {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.2rem;
}

/* Ordering Toggle Utilities */
.hidden-ordering {
    display: none !important;
}