@import url('https://fonts.googleapis.com/css2?family=Asap+Condensed:wght@400&family=Cormorant+Garamond:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap');
*,
*::before,
*::after {
    box-sizing: border-box;
}
/* Style BOTH html and body scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px; 
}

::-webkit-scrollbar-track {
    background: none;
    /* or try: background: rgba(0, 0, 0, 0); */
}

::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 3px; 
}

::-webkit-scrollbar-thumb:hover {
    background: #444;
}
html {
    scroll-behavior: smooth;
    scrollbar-width: thin; 
    scrollbar-color: #666 transparent;

}

body {
    min-height: 100%; 
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    
    font-family: Arial, Helvetica, sans-serif;
    background-color: #000000;
    
    /* --- REMOVE THESE TWO LINES --- */
    /* perspective: 1px; */
    /* transform-style:preserve-3d; */
    
    /* Firefox scrollbar support is fine to leave */
    scrollbar-width: thin; 
    scrollbar-color: #666 transparent;
}
body.no-scroll {
    overflow: hidden !important;
    height: 100vh; /* Locks the height to the screen size */
}

/* =========================================
   "GOLD LEAF" MODAL (Blurred Background)
   ========================================= */

/* 1. LAYOUT & BLURRED BACKDROP */
.welcome-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    
    /* Flex Center */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* THE BLUR EFFECT */
    background-color: rgba(0, 0, 0, 0.6); /* Darken the site behind */
    backdrop-filter: blur(8px); /* Blur the site behind */
    -webkit-backdrop-filter: blur(8px); /* Safari support */
    
    opacity: 1;
    transition: opacity 0.4s ease;
     perspective: 1000px;
    overflow: hidden; /* Keep confetti inside */
}

.welcome-modal.hidden {
    opacity: 0;
    pointer-events: none;
    display: none; 
}

/* 2. THE CARD (Based on your .login-container) */
.welcome-card {
    position: relative;
    width: 90%;
    max-width: 420px;
    padding: 3rem 2.5rem;
    
    /* Elegant Dark BG */
    background-color: #141414; 
    
    /* Sharp Gold Border */
    border: 1px solid #a2956b; 
    border-radius: 2px; /* Sharp corners */
    
    /* Sophisticated Shadow */
    box-shadow: 0 30px 60px rgba(0,0,0,0.8);
    text-align: center;
    
    /* Animation for entering */
    animation: scaleIn 0.4s cubic-bezier(0.2, 1, 0.3, 1) forwards;
    box-shadow: 0 30px 60px rgba(0,0,0,0.9), 0 0 40px rgba(162, 149, 107, 0.1);
}

.cursive-title {
    font-family: "Great Vibes", cursive;
    font-weight: 400;
    font-size: 4.5rem;
    
    /* FIX 1: Script fonts need breathing room. 
       Increased from 1 to 1.3 to stop the top from getting cut off. */
    line-height: 1.3;
    
    /* FIX 2: Adds invisible space above the text to catch tall swashes */
    padding-top: 10px;
    padding-bottom: 10px; /* Optional: keeps it balanced */
    
    /* Adjusted margin to account for the new padding/height */
    margin: 0 0 1rem 0;
    
    /* THE GRADIENT */
    background: linear-gradient(to right, #bfb083, #a2956b, #e6d8a7, #a2956b);
    background-size: 200% auto;
    
    /* FIX 3: Add the standard property to satisfy the IDE warning */
    background-clip: text;
    -webkit-background-clip: text;
    
    /* Ensure the text color is transparent so the gold shows through */
    -webkit-text-fill-color: transparent;
    color: transparent;
    
    /* Subtle glow around letters */
    filter: drop-shadow(0 0 10px rgba(162, 149, 107, 0.2));
    
    /* Shimmer animation */
    animation: shine 5s linear infinite;
    
    /* Ensures the element doesn't accidentally clip its own shadows/content */
    overflow: visible;
}


.subtitle-text {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(244, 244, 244, 0.4);
    margin-bottom: 2rem;
    position: relative;
    display: inline-block;
}


/* Add a subtle line under subtitle */
.subtitle-text::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background-color: #333;
    margin: 10px auto 0 auto;
}

.text-body p {
    font-family: 'Poppins', sans-serif;
    color: #f4f4f4; /* var(--light-text) */
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-weight: 300;
}

/* 4. THE BUTTON (Your Gold Leaf Style) */
.gold-leaf-btn {
    width: 100%;
    padding: 16px;
    margin-top: 1.5rem;
    
    background-color: #a2956b; /* Gold Background */
    color: #111; /* Dark Text */
    border: 1px solid #a2956b;
    
    border-radius: 2px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden; /* Important for the sheen */
    background-color: #a2956b; 
    color: #111; 
    z-index: 1;
}
.gold-leaf-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(255, 255, 255, 0.4), 
        transparent
    );
    transition: 0.5s;
    animation: btnShimmer 3s infinite;
}

/* 5. FALLING GOLD LEAF PARTICLES (The Confetti) */
.gold-leaf-particle {
    position: absolute;
    top: -20px;
    background: #a2956b;
    opacity: 0;
    z-index: 9998; /* Behind the card, in front of backdrop */
    pointer-events: none;
    border-radius: 0% 40% 0% 40%; /* Leaf shape */
    animation: fall linear forwards;
}

/* ANIMATIONS */
@keyframes shine {
    to { background-position: 200% center; }
}

@keyframes btnShimmer {
    0% { left: -100%; }
    20% { left: 100%; }
    100% { left: 100%; } /* Pause before restarting */
}

@keyframes fall {
    0% {
        transform: translateY(-20px) rotate(0deg) translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateY(105vh) rotate(360deg) translateX(50px);
        opacity: 0;
    }
}
.gold-leaf-btn:hover {
    background-color: transparent;
    color: #a2956b;
}

/* 5. LINKS (Based on your .bottom-text) */
.bottom-link {
    margin-top: 2rem;
}

.bottom-link a {
    color: rgba(244, 244, 244, 0.4);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    transition: color 0.3s;
}

.bottom-link a:hover {
    color: #a2956b;
}

/* 6. CLOSE BUTTON */
.close-minimal-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    color: rgba(244, 244, 244, 0.3);
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.3s;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-minimal-btn:hover {
    color: #a2956b;
}

@keyframes scaleIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

main {
    position: relative;
    z-index: 2; /* Ensures it's layered on top of the parallax background */
    background-color: #000;
    
    /* Brings the content forward in the 3D space, making it visible */
    transform: translateZ(0);
}
.main-header {
    top :  0;
    left : 0;
    right: auto;
    width: calc(100% - 10px);
    min-height : 60px; 
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
    backdrop-filter: blur(2px);
    position: fixed !important;
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    z-index: 1000;
}
.main-header a {
  color: white; 
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
}
.main-header.scrolled {
    background-color: #000000; /* Change background to black */
}
.solid-header-page .main-header {
  background-color: #000000; /* Use the same color as your .scrolled state */
  box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Also add the shadow if you want it */
}
@media (max-width: 1000px) {
    .main-header {
    top :  0;
    left : 0;
    right: auto;
    width: calc(100%);
    min-height : 60px; 
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
    backdrop-filter: blur(2px);
    position: fixed !important;
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    z-index: 100;
}
}


.main-nav {
    display: flex;
    /* This is the key property! */
    justify-content: space-between; 
    align-items: center; /* Vertically aligns logo, links, and cart */
    width: 100%;
    height: 100%;
    padding: 0 40px; /* Adds space on the sides so logo/cart aren't on the edge */
    box-sizing: border-box; /* Ensures padding is included in the width */
}

.nav-links {
    display: flex; /* This still needs to be flex to arrange the <li> items */
    list-style: none;
    padding: 0;
    margin: 0; /* Remove default margin from the <ul> */
    gap: 13vw; /* This controls the spacing BETWEEN the links */

    /* REMOVE ALL of the old positioning rules */
    /* max-width, margin-left, margin-right, flex-grow are no longer needed */
}




.nav-links a {
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-family: 'Asap Condensed', sans-serif;
  font-weight: 400;
  fill: white;
}

.nav-links a:hover {
  color: #A2956B;
  transition: color 0.3s;
}

.close-btn {
    /* 1. POSITIONING */
    position: absolute;
    top: 1%;
    right: 2%;
    z-index: 2000;

    /* 2. FORCE EXACT BOX SIZE (The Nuclear Fix) */
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important; /* Prevents squishing in flex containers */
    min-height: 40px !important;

    /* 3. CENTER THE ICON */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* 4. RESET BROWSER DEFAULTS */
    background: transparent;
    border: none;
    padding: 0 !important;
    margin: 0 !important;
    outline: none;
    box-shadow: none;

    /* 5. ICON SIZE */
    /* Use px instead of rem to guarantee exact pixel match */
    font-size: 24px !important; 
    color: var(--text-secondary, #888);
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Ensure the Icon tag itself behaves */
.close-btn i {
    font-size: 24px !important; /* Force icon size */
    line-height: 1 !important;
    display: block;
}

/* Hover Effect */
.close-btn:hover {
    color: var(--gold-accent, #c5a059);

}

@media (min-width: 1000px) {
    .close-btn-li{
        display: none; /* Hide on desktop */
    }
}
@media (max-width: 1000px) {
  .main-nav {
    display: flex;
    /* This is the key property! */
    justify-content: space-between; 
    align-items: center; /* Vertically aligns logo, links, and cart */
    width: 100%;
    height: 100%;
    padding: 0 20px; /* Adds space on the sides so logo/cart aren't on the edge */
    box-sizing: border-box; /* Ensures padding is included in the width */
}

/* 3. ADJUST NAV-LINKS PADDING */
/* Make sure the links don't overlap the X */

.nav-links {
    /* --- 1. POSITIONING (Your existing logic) --- */
    position: fixed;
    top: 0;
    right: 0; /* Fixed: Set to 0 so it touches the edge */
    height: 100vh;
    width: 60vw; /* Slightly wider for elegance */
    max-width: 400px;
    z-index: 9999; /* Must be higher than cart button */
    
    /* --- 2. THEME & BACKGROUND --- */
    background-color: var(--dark-bg, #121212); /* Deep Rich Black */
    border-left: 1px solid var(--gold-accent, #c5a059); /* Thin Gold Border on left */
    box-shadow: -15px 0 40px rgba(0,0,0,0.9); /* Deep shadow for depth */

    /* --- 3. LAYOUT --- */
    display: flex;
    flex-direction: column !important;
    align-items: center;
    justify-content: flex-start; /* Start from top */
    padding-top: 60px; /* Space for the X button */
    gap: 35px; /* Consistent spacing */

    opacity: 0;
    transform: translateX(100%); /* Move it off-screen to the right */
    transition: transform 0.4s ease-in-out, opacity 0.3s ease-in-out;
    pointer-events: none; /* Prevents clicking when invisible */
}

/* --- Active State (Visible) --- */
.nav-links.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

/* --- 5. LIST ITEMS (The Containers) --- */
.nav-links li {
    list-style: none;
    width: 80%; /* Width relative to menu, not screen */
    text-align: center;
    border-bottom: 1px solid rgba(197, 160, 89, 0.15); /* Very subtle gold divider */
    padding-bottom: 15px; /* Space between text and line */
}

/* Remove border for the last item (Phone) */
.nav-links li:last-child {
    border-bottom: none;
    margin-top: 20px;
}

/* --- 6. THE LINKS (Typography) --- */
.nav-links a {
    text-decoration: none;
    color: #ffffff; /* Clean White Text */
    font-family: 'Noto Sans Display', sans-serif;
    font-weight: 300; /* Thin and elegant */
    font-size: 1.1rem;
    text-transform: uppercase; /* High-end menus are usually uppercase */
    letter-spacing: 3px; /* Wide tracking = Expensive feel */
    transition: all 0.3s ease;
    display: block; /* Make the whole area clickable */
}

/* Hover Effect */
.nav-links a:hover {
    color: var(--gold-accent, #c5a059);
    letter-spacing: 4px; /* Subtle expansion on hover */
}

/* --- 7. PHONE NUMBER SPECIFIC STYLE --- */
/* Targeting the last link (Phone) to look like a button */
.nav-links li:last-child a {
    font-family: 'Asap Condensed', sans-serif; /* Slightly technical font for numbers */
    font-size: 1.2rem;
    color: var(--gold-accent, #c5a059);
    border: 1px solid var(--gold-accent, #c5a059);
    padding: 12px 20px;
    letter-spacing: 1px;
}

.nav-links li:last-child a:hover {
    background-color: var(--gold-accent, #c5a059);
    color: #000; /* Black text on Gold background */
    letter-spacing: 1px; /* Don't expand the button text */
}

/* Style the Phone Icon */
.nav-links i {
    margin-right: 10px;
    font-size: 0.9rem;
}
}



  .cart-button {
    position: relative; /* Stays as the anchor for the quantity display */
    background: transparent;
    color: rgb(255, 255, 255);
    border: none;
    cursor: pointer;
    font-size: 1.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Removes default button spacing */
    margin-right: 5vw; /* Adds some space from the edge of the screen */
    z-index: 100; /* Ensure it's on top */
    
  }

  .cart-button i {
    position: relative;
  }
  .cart-button:hover {
    color: #A2956B;
    transition: color 0.3s;
  }

  /* The red circular badge */
  .cart-quantity-display {
    position: absolute;
    top: -8px;    /* adjust for your icon size */
    right: -11px;
    background-color: red;
    color: white;
    font-size: 0.65rem;
    font-weight: bold;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    box-shadow: 0 0 3px rgba(0,0,0,0.6);
  }


  @media (max-width:1000px) {
    .cart-button {
      position: absolute; /* Position it relative to the nav bar */
      top: 50%; /* Center it vertically */
      transform: translateY(-50%); /* This is a trick for perfect vertical centering */
      right: 28%; /* Position it to the LEFT of the hamburger menu. Adjust as needed. */
      z-index: 1100; /* Ensure it's on top */
      margin-right: 0; /* We don't need margin when using absolute positioning */
    }
  

    
    
  }
  .menu-toggle {
    display: none; 
    font-size: 24px;
    cursor: pointer;
    margin-left: auto;
    order: 3;
  }




@media (max-width: 1000px) {
  /* Make sure your menu toggle is also positioned absolutely for alignment */
  .menu-toggle {
    display: block; /* Make sure it's visible */
    position: absolute;
    
    top: 47%;
    transform: translateY(-50%);
    left: 85%; /* Position on the far right */
    z-index: 1100;
    background: none;
    border: none;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
  }
  .menu-toggle.active {
    color: #A2956B;
    }
}
.overlay {
  position: fixed;
  top: 0; 
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none; /* BY DEFAULT, it is NOT clickable */
  transition: opacity 0.3s ease;
  z-index: 50; /* A relatively low z-index is fine for the default state */
}

/* This rule should ONLY be applied via JavaScript when the mobile menu is opened */
.overlay.active {
  opacity: 1;
  pointer-events: all; /* WHEN ACTIVE, it becomes clickable to block content */
}

.logo-link img {
    height: 50px; 
    width: auto;  
    z-index: 1000;
}
@media (max-width: 1000px) {
    .logo-link img {
        margin: 0 auto;   
        display: flex;
        height: 45px;
        z-index: 100;
    }
}




 
  .cart-preview {
    background-color: var(--dark-bg);
    color: var(--text-primary);
    border-left: 1px solid var(--gold-accent); /* Elegant gold line on the edge */
    box-shadow: -10px 0 30px rgba(0,0,0,0.8); /* Deep moody shadow */
    
    /* Ensure it has padding for the internal elements */
    display: flex;
    flex-direction: column;
    /* Existing transition/positioning styles from your original css likely exist here */
    position: fixed; 
    top: 0;
    right: 0; /* Fix to 0 to align with edge */
    height: 100dvh;
    width: 60vw;
    max-width: 400px;
    
    z-index: 1500;
    color: white; /* Make text visible on black bg */
    padding-top:20px;
  
    align-items: center;
    gap: 30px;

    /* Animation setup */
    opacity: 0;
    transform: translateX(100%); /* Move it off-screen to the right */
    transition: transform 0.4s ease-in-out, opacity 0.3s ease-in-out;
    pointer-events: none; /* Prevents clicking when invisible */
}


  /* 3. The Active State */
  .cart-preview.active {
    opacity: 1;
    transform: translateX(0); /* Slide it in */
    pointer-events: auto; /* Re-enable clicking */
    overflow-y: auto; /* Allow scrolling if content overflows */
  }

  .cart-preview h2 {
    font-family: 'Noto Sans Display', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gold-accent);
    text-align: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--gold-accent);
    margin-bottom: 0;
    font-size: 1.5rem;
}
#cart-items-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0 20px;
    /* Custom Scrollbar for Chrome/Safari/Edge */
    scrollbar-width: thin;
    scrollbar-color: var(--gold-accent) var(--dark-bg);
}

/* Custom Scrollbar Styling */
#cart-items-container::-webkit-scrollbar {
    width: 6px;
}
#cart-items-container::-webkit-scrollbar-track {
    background: var(--dark-bg);
}
#cart-items-container::-webkit-scrollbar-thumb {
    background-color: var(--gold-accent);
    border-radius: 3px;
}

/* 4. Individual Cart Item */
#cart-items-container .cart-item {
    padding: 25px 0;
    border-bottom: 1px solid var(--item-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: background 0.3s;
}

/* 5. Item Name & Details Wrapper */
#cart-items-container .cart-item-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Name (English) */
#cart-items-container .cart-item-name {
    font-family: 'Noto Sans Display', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    line-height: 1.2;
}

/* Name (Chinese) - Optional styling */
#cart-items-container .cart-item-name-chinese {
    font-family: "Noto Sans SC", sans-serif; /* Assuming you might load a chinese font, or fallback */
    font-size: 0.9rem;
    color: var(--gold-accent);
    margin-bottom: 4px;
}

/* Price Display */
#cart-items-container .cart-item-defaultPrice {
    font-family: 'Asap Condensed', sans-serif;
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 8px;
}

/* 6. Customizations (Italic, Subtle) */
#cart-items-container .cart-item-customization {
    font-size: 0.8rem;
    color: #777;
    font-style: italic;
    line-height: 1.4;
    padding-left: 10px;
    border-left: 2px solid var(--item-border);
}

/* 7. Quantity Modifiers (Elegant & Minimal) */
#cart-items-container .quantity-mod-container {
    display: flex;
    align-items: center;
    margin-top: 10px;
    width: fit-content;
    border: 1px solid var(--item-border);
    border-radius: 2px; /* Slight rounding, mostly square */
    background: #000;
}

/* Buttons (- and +) */
#cart-items-container .quantity-mod-container button {
    background: transparent;
    border: none;
    color: var(--text-primary);
    width: 30px;
    height: 30px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

#cart-items-container .quantity-mod-container button:hover {
    color: var(--gold-accent);
}

/* The Number Logic */
#cart-items-container .quantity-value {
    font-family: 'Asap Condensed', sans-serif;
    color: var(--gold-accent);
    font-weight: bold;
    font-size: 1rem;
    min-width: 25px;
    text-align: center;
}

/* Hide the per-item total in sidebar (Too cluttered for elegant view) */
#cart-items-container .cart-item-total-price {
    display: none; 
}
/* --- OPTION 2: GHOST SHRINK --- */
@keyframes ghostExit {
    0% {
        transform: scale(1);
        filter: blur(0px);
        opacity: 1;
        max-height: 120px;
        margin-bottom: 25px;
    }
    100% {
        transform: scale(0.9); /* Shrinks slightly */
        filter: blur(10px); /* Becomes blurry */
        opacity: 0;
        max-height: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        border: none;
    }
}

.cart-item.removing {
    animation: ghostExit 0.4s ease-out forwards;
    pointer-events: none;
    overflow: hidden;
}

/* 8. Empty Cart Message */
#cartEmptyMessage {
    text-align: center;
    padding: 50px 20px;
    color: var(--text-secondary);
    font-family: 'Noto Sans Display', sans-serif;
    font-weight: 300;
    letter-spacing: 1px;
    
}

/* 9. Footer Section (Totals & Button) */
.cart-preview .cart-footer {
    padding: 15px 20px;
    background-color: var(--dark-bg);
    border-top: 1px solid var(--gold-accent);
    margin-top: auto; /* Pushes to bottom */
    
   
}
@media (max-width: 789px) {
    .cart-preview .cart-footer {
      padding: 15px, 20px;
      background-color: var(--dark-bg);
      border-top: 1px solid var(--gold-accent);
      margin-top: auto; /* Pushes to bottom */
      margin-bottom:10px;
      min-height:10vh;
  }
}

/* Subtotal Row */
.cart-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Noto Sans Display', sans-serif;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.cart-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Noto Sans Display', sans-serif;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
#sidebar-cart-total {
    color: var(--gold-accent);
    font-weight: 600;
    font-size: 1.3rem;
}

.cart-preview .checkout-btn {
    display: block;
    width: 100%;
    padding: 14px ;
    margin-top: 8px;
    cursor: pointer;
    text-decoration: none;
    /* TRANSPARENT BG */
    background-color: transparent;
    
    /* GOLD BORDER */
    border: 1px solid var(--gold-accent, #c5a059);
    
    /* GOLD TEXT - No white here */
    color: var(--gold-accent, #c5a059); 
    text-align: center;
    font-family: "Noto Sans Display", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    
    /* Color change only, no movement */
    transition: all 0.3s ease;
}

.cart-preview .checkout-btn:hover {
    /* Fills with Gold */
    background-color: var(--gold-accent, #c5a059);
    
    /* Text turns Black (vital for contrast on gold bg) */
    color: #000000; 
}

@media (max-width: 789px) {
    .cart-preview .checkout-btn {
        padding: 0px 0;

    }
}


.fixed-black{
  background-color: black;
  
    position: relative; /* Establishes a positioning context for its children */
    height: 100vh;      /* Makes the splash section take up the full viewport height */
    
    /* Crucial for containing the 3D transformed children */
   z-index:1;
}

.splash-black {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Pushes it BEHIND the text, but INSIDE .fixed-background */

    /* The parallax transform */
    transform: translateZ(-1px) scale(2);
    
    /* Keep your existing background properties */
    background-color: black;
    background-size: cover;
    background-position: center;
}




.splash-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Pushes it BEHIND the text, but INSIDE .fixed-background */

    /* The parallax transform */
    transform: translateZ(-1px) scale(2);
    
    /* Keep your existing background properties */
    background-image: url('graphics/test.jpg');
    background-size: cover;
    background-position: center;
}
.splash-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Place it BEHIND the text content */

  /* The image for the specific page */
 
  
  /* Universal background settings */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* 
  ========================================================================
  THIS IS THE MAGIC KEY: It fixes the background to the browser window.
  As the .splash-image div scrolls by, the background stays in place,
  creating the parallax effect.
  ========================================================================
  */

  /*background-attachment: fixed;*/
}
.fixed-background {
    position: relative; /* Establishes a positioning context for its children */
    height: 100vh;      /* Makes the splash section take up the full viewport height */
    
    /* Crucial for containing the 3D transformed children */
    transform-style: preserve-3d;
}
.fixed-background::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 30%;
  background: linear-gradient(to top, black, transparent);
  pointer-events: none;
  z-index: 100;
}
.parallax-container {
    height: 100vh; /* Takes up the full browser window height */
    overflow-y: scroll; /* THIS is now the element that scrolls */
    overflow-x: hidden;
    
    /* --- MOVE THE PARALLAX PROPERTIES HERE --- */
    perspective: 1px;
    transform-style: preserve-3d;

    /* Add scrollbar styling for this container */
    scrollbar-width: thin;
    scrollbar-color: #666 transparent;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; 
}

/* You can also add the WebKit scrollbar styles for the new container */
.parallax-container::-webkit-scrollbar {
    width: 6px;
    height: 6px; 
}

.parallax-container::-webkit-scrollbar-track {
    background: none;
}

.parallax-container::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 3px; 
}

.parallax-container::-webkit-scrollbar-thumb:hover {
    background: #444;
}

/* === PAGE-SPECIFIC IMAGES === */
/* Add one of these for each page that needs a splash image */

.splash-index {
  background-image: url('graphics/test.jpg');
}
 

.splash-menu {
  background-image: url('graphics/menuSplash.jpg'); /* Example for menu page */
}

.splash-about {
  background-image: url('graphics/outsideRestaurant.png'); /* Example for about page */
}

@media (max-width: 1000px) {
  
  /* Disable parallax on mobile for better performance */
  .splash-image {
    background-attachment: scroll; /* Or 'initial' */
  }

  .splash-menu {
    background-position: 50% 25%; 
  }

  .splash-index {
    background-position: 40% 25%;
  }

  .splash-about {
    background-position: 72% 25%;
  }
  .fixed-background::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 70%;
  background: linear-gradient(to top, black, transparent);
  pointer-events: none;
  z-index: 100;
}
}
/* === GRADIENT OVERLAY (Stays the same) === */


.splash-text {
    position: absolute;
    top: 39%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    z-index: 100;
    width: 80%;
    background: transparent;
    border: none;
    padding: 1em;
    cursor: pointer;

    transition: transform 0.1s ease-out;
}

.splash-text h1 {
    font-family: "Great Vibes", cursive;
    font-weight: 400;
    font-style: normal;
    color: #ffffff;
    font-size: 4rem;
    margin: 0 0 -5px 0;
}
.splash-text p {
    font-family: serif;
    font-size: 1.5rem;
    line-height: 1.6;
    color: white;
    margin-top: 0;
}


.splash-text,
.minor-splash-text, 
.opening-hours-text, 
.location-text {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.splash-text {
    transform: translate(-50%, -50%) translateY(20px);
}

.minor-splash-text, 
.opening-hours-text, 
.location-text {
    transform: translateY(20px);
}

/*
  STEP 2: Define the FINAL (visible) state.
  When the .visible class is added by JavaScript, the elements
  will transition to being fully opaque and in their original position.
*/
.splash-text.visible {
    opacity: 1;
    transform: translate(-50%, -50%); /* This is the key fix! */
}

/* When .visible is added, all other text moves to its final position. */
.minor-splash-text.visible, 
.opening-hours-text.visible, 
.location-text.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Option 3: The Double Line Reveal --- */
.our-menu {
  /* --- Positioning & Structure --- */
  position: absolute; 
  top: 65%; 
  left: 50%; 
  transform: translateX(-50%);
  z-index: 1000;
  list-style-type: none;
  /* --- Visuals --- */
  background: transparent;
  border: none;
  padding: 1em;
  cursor: pointer;
  /* Optional: Add a transition for a slightly smoother start/stop */
  text-decoration: none; 
  

  /* 
    THE FIX, PART 1: 
    Define the transition for when the element becomes VISIBLE again.
    Opacity fades in over 1.5s. Visibility changes back instantly (0s delay).
  */
  
}
.our-menu-button{
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease-out, visibility 0s;
}
.our-menu-button.fade-out {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-out, visibility 0s linear 0.2s;
}

.our-menu a {
  /* --- Typography --- */
  color: #FFFFFF;
  text-decoration: none;
  font-family: "Birthstone", cursive;
  font-size: 2em;
  letter-spacing: 1px;
  position: relative;
  padding-bottom: 8px;
  transition: color 0.3s ease 0.1s; /* Slight delay on the text color change */
  
}

/* --- The "Something Extra": Two lines stacked on top of each other --- */
/* The gold line underneath (always there) */
.our-menu a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #A2956B; 
  /* It doesn't animate, it just waits to be revealed */
}

/* The white line on top (this one animates) */
.our-menu a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #FFFFFF; /* The visible default line */
  transform: scaleX(1);
  transform-origin: right; /* It will shrink towards the right */
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

/* --- The HOVER State --- */
.our-menu:hover a {
  color: #A2956B; /* Text changes to gold */
}

.our-menu:hover a::after {
  /* The top white line scales to 0, revealing the gold one underneath */
  transform: scaleX(0); 
}



/* --- Base Container & Text Grouping (.awards) --- */

.awards {
    background-color: black;
    color: white; /* Set default text color for the section */

    /* The "Full Bleed" technique to break out of the parent container */
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    text-align: center;
    /* Apply your vertical padding + safe-area padding for mobile */
    border-width:10px;
    padding-top: 120px;
    padding-left: 32%;
    padding-right: 32%;
    padding-bottom: 100px;

    /* These properties center the text content vertically */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* --- Heading Styling (.awards h2) - KEPT Asap Condensed */
.awards h2 {
    font-family: "Asap Condensed", sans-serif;
    font-weight: 200;
    font-style: normal;
    color: white; 
    font-size: 40px;
    line-height: 1.5; 
    margin-bottom: 15px; 
}

/* --- Paragraph Styling (.awards p.popular) - SWITCHED TO LORA */
.awards p.popular { 
    /* CHANGED FONT: Using Lora */
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.2;
  color: white;
    /* Lora looks good slightly smaller */
  padding: 0 10px; 
  margin-bottom: 15px; 
  /* Still keeps the line breaks nicely spaced */
  white-space: pre-line;
  
}

/* --- Signature Styling - KEPT Asap Condensed */
.signature {
    font-family: "Asap Condensed", sans-serif;
    font-size: 18px; 
    font-weight: 300; 
    font-style: italic; 
    color: rgba(255, 255, 255, 0.7); 
    margin-top: 5px; 
    display: block; 
}
@media (max-width: 1000px){
  .awards {
    background-color: black;
    color: white; /* Set default text color for the section */

    /* The "Full Bleed" technique to break out of the parent container */
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;

    /* Apply your vertical padding + safe-area padding for mobile */
    padding: 120px 1rem 100px;

    /* These properties center the text content vertically */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
}
.gallery-wrapper {
  position: relative; /* Needed to position the buttons */
  width: 100%;
}

.gallery-nav-btn {
  /* Positioning and size */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 50px;  /* Slightly larger touch area */
  height: 50px;

  /* Make the button itself invisible */
  background: transparent;
  border: none;
  
  /* Center the SVG inside */
  display: none;
  justify-content: center;
  align-items: center;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* Removes blue tap highlight on mobile */
}

/* Specific positioning for each button */
#prev-btn {
  left: 8px; /* A little closer to the edge */
}

#next-btn {
  right: 8px;
}

/* --- Style the SVG icon for a premium look --- */
.gallery-nav-btn svg {
  width: 28px;  /* Make the icon a bit larger */
  height: 28px;
  color: white;
  
  /* 
    THE KEY FOR VISIBILITY: A drop-shadow makes the icon stand out 
    on any background (light or dark). It traces the shape of the icon itself.
  */
  filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.6));
  
  /* A hint of opacity makes it feel lighter */
  opacity: 0.8;

  /* Smooth transitions for all effects */
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              opacity 0.2s ease,
              filter 0.2s ease;
}

/* --- INTERACTION STATES --- */

/* Subtle feedback on hover (for desktop) or focus (for accessibility) */
.gallery-nav-btn:hover svg,
.gallery-nav-btn:focus-visible svg {
  opacity: 1;
  transform: scale(1.15); /* Enlarge icon on hover */
  filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.8)); /* Stronger shadow */
}

/* Quick press-down effect */
.gallery-nav-btn:active svg {
  transform: scale(1.0); /* Slightly smaller than hover for a 'press' feel */
  transition-duration: 0.1s; /* Make the press feel faster */
}



.gallery {

    display: flex;
    gap: 30px;
    flex-direction: row;
    overflow: hidden;
    position: relative;
    padding-left: 10%;
    padding-right: 10%;
    min-height: 80vh;
    align-items: center; /* Vertically centers the images in the container */
}

.gallery img {
    flex: 1; 
    /* A necessary fix to prevent flex items from overflowing */
    min-width: 0; 
    
    /* Set a specific height to make them tall */
    height: 100vh; 
    /* The image will fill the width of its flex container */
    width: 100%; 
    
    /* This is the key: it makes the image fill the box without stretching. */
    /* It will crop the image (horizontally in this case) to fit the tall shape. */
    object-fit: cover; 

    /* --- Your Animation Properties (unchanged) --- */
    display: block;
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.gallery img.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1000px) { /* A slightly larger breakpoint is often better for this */

    .gallery {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start; 
        padding: 0 20px; 
        box-sizing: border-box; 
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
        scroll-snap-type: x mandatory;
    }
    .gallery::-webkit-scrollbar {
        display: none;
    }


    .gallery img {
        height: 80vh; 
        width: 60vw; 
        flex: none; /* THIS IS THE KEY FIX - prevent flex from shrinking */
        flex-shrink: 0;
        object-fit: cover; 
        scroll-snap-align: center;
    }
    .gallery-nav-btn {
    /* Now we turn them ON */
    display: flex; 
  }
}
.minor-splash-container {
  display: flex;
  flex-direction: column;
  margin-top: 100px;
  gap: 60px;
}

/* Minor splash item - container for each row */
.minor-splash-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  width: 100%;
}

/* Reverse layout for alternating rows (desktop) */
.minor-splash-item.reverse {
  flex-direction: row-reverse;
}

/* Image styling */
.minor-splash-img {
  flex: 1;
  width: 50%;
}

.minor-splash-img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Text styling */
.minor-splash-text {
  flex: 1;
  width: 50%;
  text-align: center;
  color: #A2956B;
  padding: 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.minor-splash-text.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile layout */
@media (max-width: 1000px) {
  .minor-splash-container {
    margin-top: 50px;
    gap: 40px;
  }
  
  /* All items stack vertically: text then image */
  .minor-splash-item,
  .minor-splash-item.reverse {
    flex-direction: column;
  }
  
  .minor-splash-img,
  .minor-splash-text {
    width: 100%;
  }
  
  .minor-splash-text {
    padding: 10px;
    order: 1; /* Text comes first */
  }
  
  .minor-splash-img {
    order: 2; /* Image comes second */
  }
}

.awards-plaque {
    min-width:40%;
    padding: 20px 50px;
    text-align: center;
}

/* --- Plaque Title --- */
.plaque-title {
    font-family: "Asap Condensed", sans-serif;
    font-weight: 200;
    font-style: normal;
    color: white;
    font-size: 3rem;
}

/* A simple, classic underline for the title */
.plaque-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 1px;
    background-color: rgba(201, 163, 59, 0.6); /* Solid, muted gold line */
}
.rating-source{
    font-family: "Asap Condensed", sans-serif;
    font-weight: 300;
    font-style: normal;
    color: white;
    font-size: 20px;
}

/* List of awards */
.awards-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Individual award item */
.award-item {
    padding: 25px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* A subtle separator */
}

/* Remove the border from the very last item */
.award-item:last-child {
    border-bottom: none;
    padding-bottom: 10px; /* Adjust padding for the last item */
}
.award-item:first-child {
    padding-top: 10px;
}

/* --- Style for the new Material Symbols stars --- */

.star-rating .material-symbols-outlined {
    font-size: 2rem; /* Or whatever size you prefer */
    color: #a2956b;     /* A nice modern gold/yellow */
    
    /* This is a helpful property to ensure icons align perfectly with text */
    vertical-align: middle; 
}

/* 
  A small trick: The "filled" style in Material Symbols is controlled by a font setting.
  This makes the star icon solid.
*/
.star-rating .material-symbols-outlined {
  font-variation-settings: 'FILL' 1;
}
.star-rating .empty-star { 
    font-variation-settings: 'FILL' 0 !important; /* Override: Make it outlined */
    color: #a2956b !important; /* Give the empty star a more muted color */
}

.star-rating .material-symbols-outlined:is([innerHTML="star_border"]) {
  font-variation-settings: 'FILL' 0;
  color: #d1d5db; /* Give the empty star a more muted color */
}

/* The half star already looks great, but you could target it if needed */
.star-rating .material-symbols-outlined:is([innerHTML="star_half"]) {
  /* No special styles needed unless you want a different color */
}

/* Clarification text */
.rating-clarification {
    font-size: 0.8rem;
    font-style: italic;
    color: #888;
    margin: 5px 0 0 0;
}
.info{
    display: flex;
    flex-direction: row;
    margin-top: 150px;
    margin-left: 40px;
    margin-bottom: 100px;
    gap: 130px;
    flex-wrap: wrap;
    color: white;
}
.info p{
    font-family: "Asap Condensed", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 18px;
    max-width: 600px;
    line-height: 1.6;
}
.site-footer {
  background-color: #000000; /* A modern dark blue-gray */
  color: #ecf0f1; /* A soft white */
  padding-top:200px;
  padding-bottom:40px;
  padding-left:20px;
  padding-right:20px;
  overflow-x: none;
  font-family: "Asap Condensed", sans-serif;
  
}

.footer-container {
  display: flex;
  flex-wrap: wrap; 
  justify-content: space-between; 
  gap: 4%; 
  max-width: 1200px;
  margin: 0 auto; 
  padding-bottom: 30px;
  border-bottom: 1px solid #202325; /* Subtle separator line */
  
}

/* Individual column styling */
.footer-column {
  flex: 1; /* Allows columns to grow and shrink as needed */
  min-width: 200px; /* Prevents columns from getting too narrow */
  
}


.footer-column h5 {
  color: #ffffff;
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 15px;
  letter-spacing: 1px;
}

.footer-column p,
.footer-column address,
.footer-column .footer-nav {
  font-size: 14px;
  line-height: 1.8;
  color: #bdc3c7; /* A slightly dimmer white for content */
  text-decoration: none;
  list-style-type: none 
}

/* Styling for links */
.footer-column a {
  color: #bdc3c7;
  text-decoration: none;
  transition: color 0.3s ease;
  display: inline-block; /* Helps with spacing */
  margin-bottom: 5px;
}

.footer-column a:hover {
  color: #3498db; /* A bright blue for hover effect */
  text-decoration: underline;
}

/* Bottom copyright bar */
.footer-bottom {
  text-align: center;
  padding-top: 20px;
  font-size: 12px;
  color: #7f8c8d;
}

/* --- Responsive Design for Mobile --- */
@media (max-width: 1000px) {
  .footer-container {
    flex-direction: column; /* Stack columns vertically */
    align-items: center; /* Center-align the columns */
    text-align: center;
  }
  
  .footer-column {
    min-width: 100%; /* Each column takes full width */
    margin-bottom: 20px;
  }
  .footer-column img{
    max-width: 40%;
}
}

.footer-location{
  width:100%;
  height:auto;
}


p{  
    border-top: 100px;
    font-family: "Asap Condensed", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 18px;
    line-height: 1.6;
    color:white;
}
.scroll-down-indicator {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%); /* Only centering is needed now */
    z-index: 15;
    
    /* Set the color for the SVG inside */
    color: white; 

    /* Remove link underline */
    text-decoration: none; 
    opacity: 1;
    visibility: visible;

    /* Add the animation */
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
    animation: bounce-svg 2s infinite;
}

@media (max-width:796px){
  .scroll-down-indicator {
    position: absolute;
    bottom: 17%;
    left: 50%;
    transform: translateX(-50%); /* Only centering is needed now */
    z-index: 200;
    
    /* Set the color for the SVG inside */
    color: white; 

    /* Remove link underline */
    text-decoration: none; 
    opacity: 1;
    visibility: visible;

    /* Add the animation */
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
    animation: bounce-svg 2s infinite;
  }

}

.scroll-down-indicator.fade-out {
    /* Fade it out */
    opacity: 0;
    /* Hide it from view and from screen readers */
    visibility: hidden;
}


/* Style the SVG itself */
.scroll-down-indicator svg {
    /* Control the size here */
    width: 2.5rem;
    height: 2.5rem;
    
}

/* A simpler animation for the new SVG setup */
@keyframes bounce-svg {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}



.menu-splash-text {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    z-index: 10;
    width: 80%;
    
}
.menu-splash-text h1 {
    font-family: "Great Vibes", cursive;
    font-weight: 400;
    font-style: normal;
    color: #ffffff;
    font-size: 4rem;
    margin: 0 0 -5px 0;
}
hr.divider {
  width: 35px; /* Adjust the width of the line */
  margin: 10px auto; /* Adds 30px space above/below and centers the line */
  border: 0;
  border-top: 2px solid white;
  border-width: 1px 0 0 0;
}

/* You might need to add a class to your subtitle for specific spacing */
.menu-splash-text p.subtitle {
  font-family: serif;
  font-size: 1.1rem;
  line-height: 1.6;
  color: white;
  margin-bottom: 0; /* Remove default bottom margin from the paragraph */
}
.menu-nav-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 72px; /* Adjust this if your header is a different height */
    z-index: 1000;
    width: 100%;
    scrollbar-width: thin;
    scrollbar-color: #A2956B black; /* thumb-color track-color */
    will-change: background-color;
    
}


/* 2. Keep the visual styles on the MENU-NAV */
.menu-nav {
    /* position: sticky;  <--- DELETED */
    /* top: 74px;         <--- DELETED */
    background-color: #000000;
    width: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    padding-top: 5vh;
    border-bottom: 2px solid transparent; /* Start with a transparent border */
    transition: border-color 0.3s ease;    /* Animate the color change smoothly */
    padding-bottom: 20px;
    
}
@media (min-width: 796px){


  .menu-nav-wrapper.scrolled .menu-nav {
   border-bottom-color: rgb(132, 132, 132);

  }
}
.menu-nav-wrapper.scrolled {
    background-color: #000000; /* Dark background example */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    /* Add any other changes you want (e.g., smaller padding) */
}
.menu-nav ul {
  display: flex;
  justify-content: space-between; /* This spreads items across available space */
  width: 100%; /* Takes full width */
  max-width: 1800px; /* Prevents it from getting too wide - adjust as needed */
  margin: 0;
  padding: 0 40px; /* Side padding */
  list-style: none;
  white-space: nowrap; 
  padding-bottom: 20px;
}
@media (max-width: 796px){
  .menu-nav ul {
  padding-bottom:  0;;

  }
}


.menu-nav li {
  flex: 0 0 auto;
}

.menu-nav a {
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-family: "Noto Sans Display", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: thin 100;
  font-variation-settings: "wdth" 100;
  /* Remove margin-right since gap handles spacing now */
}

.menu-nav a {
  /* Add a smooth transition for the color change */
  transition: color 0.2s ease-in-out; 
}

/* Your styles for hover, focus, and active states */
.menu-nav a:hover,
.menu-nav a.active {
  color: #A2956B; 
}

/* Accessibility Improvement: 
   Instead of "outline: none", we provide a custom, non-intrusive focus style.
   This is crucial for users who navigate with a keyboard. */
.menu-nav a:focus {
  color: #A2956B; 
  outline: 2px solid transparent; /* Remove the default ugly outline */
  outline-offset: 2px;
  /* Add a subtle underline as a clear focus indicator */
  text-decoration: underline; 
  text-decoration-color: #A2956B;
}


/* --- WebKit (Chrome, Safari, Edge) Scrollbar Styles --- */

/* Set the height of the scrollbar */
.menu-nav-wrapper::-webkit-scrollbar {
  height: 8px; /* A little thicker than 6px for easier grabbing, but still thin */
}

/* Style the track (the bar the thumb slides in) */
.menu-nav-wrapper::-webkit-scrollbar-track {
  background: #2c2c2c; /* Dark background to make the gold pop */
  border-radius: 20px;
}

/* Your style for the thumb (the draggable part) */
.menu-nav-wrapper::-webkit-scrollbar-thumb {  
  background-color: #A2956B;
  border-radius: 20px;
}

/* Add a nice hover effect for better user experience */
.menu-nav-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #bfae78; /* A slightly brighter version of your gold */
}
@media (max-width: 1000px){
  
  .menu-nav ul {
  display: flex;
  
  gap: 30px; 
  padding: 0 20px;
  margin: 0;
  list-style: none;
  white-space: nowrap; 
  padding-bottom: 20px;
  }
}




@media (max-width: 1000px) {
  .menu-nav.fixed {
    position: fixed;
    top: 10%;
    left: 0;
    right: 0;
    background-color: #000000;
    z-index: 20;
    padding-top:15px;
    padding-bottom: 15px; 
    border-bottom: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  }
  .menu-nav-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 6vh; /* Adjust this if your header is a different height */
    z-index: 1000;
    width: 100%;
    overflow-x: scroll;
    background-color: black;
    scrollbar-width: thin;          /* "auto" or "thin" */
    padding-left:5px;
    padding-right:5px;
}

}
.menu-placeholder {
  display: none;
}

.menu-placeholder.active {
  display: block;
}
.menu-item a{
    color: rgb(255, 255, 255);
    margin-right:20px;
    text-decoration: none;
    font-family: "Noto Sans Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: thin 100;
    font-variation-settings:
    "wdth" 100;
}
.menu-group{
    color: #A2956B;
    margin-right:20px;
    text-decoration: none;
    font-family: "Noto Sans Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: thin 100;
    font-variation-settings:
    "wdth" 100;
}

.menu-item a:hover{
  background-color: #A2956B; 
  cursor: pointer;
}

.menu-grid {
  max-width: 1600px; /* Exactly fits 4 items: (255px × 4) + (25px × 3 gaps) + 40px padding */
  margin: 0 auto; /* Centers the menu */
  padding-right: 20px;
  padding-left: 20px;
  padding-top:5vh;
}

/* 2. Style each category section */
.menu-group {
  margin-bottom: 60px; /* Creates vertical space between "Popular", "Specials", etc. */
}

/* 3. Style the category titles (the H2 elements) */
.menu-group h2 {
  font-family: 'Noto Sans Display', sans-serif;
  font-size: 2.5rem;
  font-weight: 300;
  border-bottom: 1px solid #ddd;
  padding-bottom: 15px;
  margin-bottom: 30px;
}

@media (min-width: 1000px) {
  .menu-item {
    flex-basis: calc(33.3333% - 16.67px);
  }
}


.item-list-grid {
  display: grid;
  /* KEY CHANGE 1: Define explicit columns. 
     This creates a 3-column layout on large screens. 
     '1fr' means each column takes up an equal fraction of the available space. 
     This forces the items to grow and fill the container, solving the "condensed" look. */
  grid-template-columns: repeat(3, 1fr); 
  
  gap: 25px;
  list-style-type: none;
  padding: 0;

  /* The .menu-grid parent already centers and adds padding, 
     so these can be removed to avoid conflicts. */
  /* max-width: 1400px; */ 
  /* margin: 0 auto; */
}

@media (max-width: 1000px) {
  .item-list-grid {
    grid-template-columns: 1fr !important;
    gap: 15px;
  }
  
  .menu-grid {
    padding-right: 15px;
    padding-left: 15px;
  }

  .menu-group h2 {
    font-size: 1.5rem;
  }
  

  .item-container {
    width: 100%;

  }
  .item-name {
    font-size: 0.9rem; /* Reduces font size from the default (likely 1rem or 16px) */
    line-height: 1.3;  /* Improves readability for wrapped text */

  }

  /* Target the item price */
  .item-price {
    font-size: 0.85rem; /* Make the price slightly smaller than the name */
  }
  .modifier-icon {
    width: 1rem;   /* Make icons a little smaller to match the new text size */
    height: 1rem;
  }
}

.item-container {
  display: flex;
  flex-direction: row;
  
  /* --- KEY CHANGES --- */
  width: 100%;           /* Still fill the available space... */
  height: 150px; /* The height belongs on the element with the background/border */
  background-color: rgb(20, 20, 20);
  border-radius: 20px;
  border: 1px solid #434343;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); 
  transition: all 0.3s ease;
  overflow: hidden;
}


.item-container:hover {
  /* --- KEY CHANGE: HOVER Shadow --- */
  /* Make the shadow larger and slightly more opaque to simulate lift */
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6), /* Deeper bottom shadow */
              0 0 10px rgba(255, 255, 255, 0.1); /* Optional: Very subtle 'glow' on top */
  
  /* Slight upward movement for a dramatic lift */
  transform: translateY(-8px); 
}

.item-container-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.item-info {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #434343;
  padding: 12px;
  /* KEY CHANGE: Use flex to fill available space */
  flex: 1; /* This makes it grow to fill remaining space */
  min-width: 0; /* Prevents flex item from overflowing */
}
.modifier-container {
  display: flex;
  flex-direction: row; /* This is the default, but good to be explicit */
  align-items: center; /* Vertically aligns icons if they have different heights */
  gap: 6px;            /* Creates space between each icon */
  margin-top: auto;    /* Pushes the icon row to the bottom of the card */
  padding-top: 5px;    /* Adds a little space above the icons */
}
.modifier-icon {
    width: 1.2em;      /* Makes the icon size relative to the text size */
    height: 1.2em;     /* Keeps it square */

    vertical-align: middle; /* Aligns the icon nicely with the line of text */
}
.popular-badge {
    display: inline-block;
    background-color: transparent; /* No solid block background */
    color: #D4AF37;                /* Matches a metallic gold */
    border: 1px solid #D4AF37;     /* Thin gold border */
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 2px;            /* Sharper corners look more elegant */
    margin-right: 8px;
    vertical-align: middle;
    text-transform: uppercase;     /* ALL CAPS looks more professional */
    letter-spacing: 1px;           /* Spacing out letters adds elegance */
}


.modal-content h2,
.modal-content h3 {
  margin-top: 0;
  margin-bottom: 5px; /* Adjust this value for the spacing you want */
}
.icon-indicator{
  display: flex;
  align-content: start;
}

.item-name {
  color: #a5a5a5;
  display: flex;
  align-items: center;
  transition: color 0.3s ease;
}

.spicy-indicator {
  font-size: 1rem;
}
.item-price{
  color: lightgray;
  transition: color 0.3s ease;
}
.item-container:hover .item-name,
.item-container:hover .item-price {
  
  color: #A2956B;
}

.item-img {
  
  flex: 0 0 130px;
  height: 100%;  
  object-fit: cover; 
  object-position: center; 
  overflow: hidden; 
}


#customize {
  /* Keep your existing positioning/z-index */
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 1;
  visibility: visible;
 

}

#customize.closing {
  opacity: 0;
  visibility: hidden; /* Prevents clicks during fade out */
  pointer-events: none;
}

#customize.closing .modal-content {
  /* Shrink to 90% size */
  transform: scale(0.9);
  opacity: 0;
}
/* 4. ENSURE: The Hidden State */
/* This must remain to actually remove it from the layout after animation */
#customize.hidden {
  display: none !important;
}
.toast {
  position: fixed;
  bottom: 30px; /* Final resting spot */
  left: 50%;
  /* Start position: Centered horizontally, but pushed DOWN by 100px */
  transform: translateX(-50%) translateY(100px); 
  background-color: #333;
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 3000; /* Ensure it's on top of everything */
  opacity: 0;
  visibility: hidden; /* Prevents clicking it when invisible */
  /* Smooth easing for the slide */
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
  pointer-events: none;
}

.toast.show {
  /* End position: Centered horizontally, reset vertical slide */
  transform: translateX(-50%) translateY(0); 
  opacity: 1;
  visibility: visible;
}



.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}
.customOptionsContainer {
  display: flex;
  flex-direction: row;
}
.price-modifier {
  color: #888; /* A nice light grey */
  margin-left: 4px; /* Optional: Adds a little space */
}
#modal-scroll-area {
  /* This is the magic property you are missing. */
  /* It tells the browser: "If the content is too tall, add a scrollbar!" */
  overflow-y: auto;

  /* You probably already have a rule like this, which is correct. */
  /* This prevents the modal itself from getting too tall. */
  /* Make sure you have one, e.g., max-height: 60vh; or max-height: 450px; */
  max-height: 60vh; /* Adjust this value as needed */
}
.closeModalBttn {
  
  position: absolute;  
  top: 10px;            
  left: 15px;          
  z-index: 10;          

 
  background: rgba(0, 0, 0, 0.5); 
  color: white;                   /* White 'X' */
  border: none;
  border-radius: 50%;             
  cursor: pointer;
  
  /* --- Sizing and Centering the 'X' --- */
  width: 32px;
  height: 32px;
  font-size: 1rem;
  font-weight: bold;
  line-height: 32px; /* Vertically centers the text */
  text-align: center; /* Horizontally centers the text */
  padding: 0;

  /* --- Smooth Hover Effect --- */
  transition: background-color 0.2s ease-in-out;
}
.modal-content {
  position:relative;
  background: white;
  border-radius: 8px;
  max-height: 80vh;
  min-height: 80vh;      
  display: flex;
  flex-direction: column;  /* stack scroll-area + bottom bar */
  max-width: 35%;     /* never goes beyond this on desktop */
  min-width: 35%;
  overflow: hidden; 
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  transform: scale(1);
  opacity: 1;
}

.modal-image {
  width: calc(100% + 4rem); 
  height: 400px;
  display: block;
  object-fit: cover;
  object-position: center;
  margin: -2rem -2rem 1.5rem -2rem; /* Top | L/R | Bottom | L/R */
}
@media (max-width: 1000px){
  .modal-content {
  background: white;
  border-radius: 8px;
  max-height: 80vh;
  min-height: 80vh;      
  display: flex;
  flex-direction: column;  /* stack scroll-area + bottom bar */
  max-width: 80%;     /* never goes beyond this on desktop */
  min-width: 80%;
  }
  .modal-image {
  width: calc(100% + 4rem); 
  height: 250px;
  display: block;
  object-fit: cover;
  object-position: center;
  margin: -2rem -2rem 1.5rem -2rem; /* Top | L/R | Bottom | L/R */
  }
}
.modal-image-wrapper {
    position: relative; /* This makes the absolute child stick to this box */
    width: 100%;        /* Ensure it takes full width of the modal area */
    display: block;
}

/* 2. The Indicator itself */
.scroll-customizations-indicator {
    position: absolute; /* Floating on top of the wrapper */
    
    /* Center perfectly */
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    z-index: 15;
    
    /* Appearance */
    color: rgb(255, 255, 255); /* White usually looks best over photos */
    filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.5)); /* Adds a shadow so it's visible on bright images */
    
    /* Animation */
    animation: bounce-svg 2s infinite;
}

.scroll-customizations-indicator svg {
    width: 2rem; /* Made slightly larger for visibility */
    height: 2rem;
}
@media (max-width: 1000px){
  .scroll-customizations-indicator {
    display:none;
  }
}
.order-notes-textarea {
  width: 100%;
  min-height: 80px; /* Give it a decent starting height */
  border: 1px solid #ccc;
  border-radius: 6px;
  font-family: inherit; /* Use the same font as the rest of the site */
  font-size: 1rem;
  resize: vertical; 
  box-sizing: border-box; 
}

/* Add a nice focus effect for better user experience */
.order-notes-textarea:focus {
  outline: none;
  border-color: #A2956B; /* Use one of your brand colors */
  box-shadow: 0 0 0 2px rgba(162, 149, 107, 0.3); /* A subtle glow */
}


.modal:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
}

.scroll-area {
  overflow-y: auto;        /* scrollable content */
  padding-bottom: 2rem;
  padding-left: 2rem;
  scroll-behavior: smooth;
  padding-right: 2rem;
  flex: 1;                 /* takes remaining space above bottom bar */
}

.itemName{
  color:rgb(0, 0, 0)
}
.extra-cost-display {
  font-size: 0.9em;
  color: #a1a1a1; /* A reddish warning color */
  font-weight: medium;
  height: 1.2em; /* Prevents layout shift when text appears */
  margin-top: -5px;
  margin-bottom: 5px;
  font-style: italic;
}
#extaCostHighlight{
  color: #661414;
}

.defaultPrice{
  display: flex;
  color:black;
  border-bottom: 2px solid #A2956B;
}
.hidden {
  display: none;
}

.submitBttn {
  display: inline-flex; /* More flexible than flex for a single button */
  align-items: center;
  justify-content: center;
  
  background-color: #A2956B; /* Start with the richer gold */
  color: #ffffff;
  
  border: none; /* Remove the white border for a cleaner look */
  border-radius: 4px; /* A subtle, sophisticated curve */
  cursor: pointer;

  padding: 12px 30px; /* Generous padding for a premium feel */
  min-width: 200px;
  height: 48px;

  /* Refined Typography */
  font-family: sans-serif; /* Use your site's main font */
  font-size: 15px; /* Slightly larger and no !important */
  font-weight: 400; /* Normal weight is often more elegant than bold */
  letter-spacing: 0.5px; /* Adds breathing room to the text */
  text-transform: uppercase; /* An elegant touch for short text */

  /* Smooth transition and subtle shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.submitBttn:hover {
  background-color: #c8b883; /* Lightens on hover */
  color: #ffffff;
  transform: translateY(-2px); /* Lifts the button slightly */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Enhances the lift effect */
}
.quantity-display {
  font-size: 1.2rem;
  font-weight: bold;
  color: #000;
  width: 30px;
  text-align: center;
  margin: 0;
}

.quantity-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.4rem 1rem;
  border-top: 1px solid #ddd;
  background: white;
  flex-shrink: 0;          /* prevents it from shrinking */
  gap: 2rem;
}



.quantity-controls button {
  padding: 0.3rem 0.6rem;  
  font-size: 1rem;
}

@media (max-width: 1000px) {
  .quantity-controls {
    flex-wrap: wrap;
    justify-content: center;
    /* Add a small vertical gap between the rows */
    row-gap: 10px; 
    /* Adjust padding to be more compact */
    padding-left:  1rem; 
    padding-right:  1rem; 
  }

  .quantity-controls .submitBttn {
    flex-basis: 100%;
  }
}




.quantityBttn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1.5rem;
  color: #000;
  transition: transform 0.2s, color 0.2s;
}
.quantityBttn:hover {
  transform: scale(1.2);
  color: #a2956b;
}

.validation-error {
    background-color: #ffebe6; /* A light red background */
    color: #c00;             /* A dark red text color */
    border: 1px solid #c00;   /* A dark red border */
    border-radius: 4px;       /* Slightly rounded corners */
    padding: 8px 12px;        /* Some space inside the box */
    margin-top: 5px;          /* A little space below the title */
    margin-bottom: 10px;      /* A little space above the options */
    font-size: 0.9em;         /* Slightly smaller font */
    font-weight: bold;
}
.limit-error {
  background-color: #ffebe6; /* A light red background */
    color: #c00;             /* A dark red text color */
    border: 1px solid #c00;   /* A dark red border */
    border-radius: 4px;       /* Slightly rounded corners */
    padding: 8px 12px;        /* Some space inside the box */
    margin-top: 5px;          /* A little space below the title */
    margin-bottom: 10px;      /* A little space above the options */
    font-size: 0.9em;         /* Slightly smaller font */
    font-weight: bold;
}
.pickup-time-trigger-error {
    background-color: #ffebe6 !important;
    color: #c00 !important;
    border: 2px solid #c00 !important;
}
.custom-options {
  flex: 1;                       /* takes up remaining space */
  overflow-y: auto;        /* ensures content doesn’t hide behind bottom bar */
}

/* Hide the default radio button */
.option-group input[type="radio"],
.option-group input[type="checkbox"] {
  display: none;
}

/* Create custom radio button box */
.option-group label {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  margin: 10px 0;
  cursor: pointer;
  position: relative;
  border-top: 1px solid #e0e0e0;
  transition: all 0.25s ease;
  background-color: #fff;
  font-size: 15px;
}



/* Create the custom checkbox square */
.option-group label::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 14px;
  border: 1.5px solid #c0c0c0;
  border-radius: 3px;
  background-color: #fff;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

/* Checkmark - properly centered */
.option-group label::after {
  content: '✓';
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  transition: transform 0.2s ease;
  line-height: 1;
}

/* When radio is checked - elegant color scheme */
.option-group label:has(input[type="radio"]:checked)::before,
.option-group label:has(input[type="checkbox"]:checked)::before  {
  background-color: #2c3e50;
  border-color: #2c3e50;
}

.option-group label:has(input[type="radio"]:checked)::after,
.option-group label:has(input[type="checkbox"]:checked)::after  {
  transform: translateY(-50%) scale(1);
}



.option-group h4 {
  margin-bottom: 12px;
  font-weight: 500;
  color: #2c3e50;
  font-size: 16px;
  letter-spacing: 0.5px;
}
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 8px 4px; /* Optional: give it some spacing */
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
  overflow-x: hidden; 
}

/* The content area that will be hidden/shown */
.accordion-content {
  max-height: 0; /* Start collapsed */
  overflow: hidden;
  transition: max-height 0.3s ease-out; /* Smooth transition */
  padding-left: 10px; /* Indent content slightly */
  
}
.accordion-title-group {
  display: flex;
  flex-direction: column; /* Stack the title and subtitle vertically */
  gap: 10px;              /* A small space between the title and subtitle */
}

/* Adjust the h4 inside the new group to have no extra margin */
.accordion-title-group h4 {
  margin: 0;
}
.accordion-content label {
  margin-top: -5px;
 
}

/* The "open" state for the accordion */
.option-group.is-accordion.is-open .accordion-content {
  max-height: 5000px; /* A large enough value to show all content */
  transition: max-height 0.4s ease-in;
}

/* The toggle icon (+) */
.accordion-toggle-icon {
  font-size: 1.5em;
  font-weight: bold;
  transition: transform 0.3s ease;
}
.accordion-toggle-icon::before {
    content: '+';
    display: inline-block;
    color: #555;

}

/* Change the icon to (-) when open */
.option-group.is-accordion.is-open .accordion-toggle-icon {
    transform: rotate(45deg);
}

/* Remove default margin from the h4 inside the accordion header */
.accordion-header h4 {
    margin: 0;
}
.site-header {
  position: relative;
}
.is-accordion .accordion-header {
  padding-bottom: 10px; /* Explicitly remove any bottom margin from the header */
  padding-top: 10px;
}

.is-accordion .accordion-content {
  margin-top: 0;    /* Explicitly remove any top margin from the content */
}

.checkout-background {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-body);
    overflow-x: hidden; /* Prevent horizontal scroll */
    padding: 1rem;

    /* --- REFINED RESTAURANT-STYLE BACKGROUND --- */

    /* Layered background for a sophisticated look */
    background-image:
        /* 1. Cinematic Spotlight: Darkens top/bottom, leaves sides clear */
        radial-gradient(ellipse 150% 85% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.75) 100%),
        
        /* 2. Subtle Texture: A faint shimmer instead of a hard grid */
        linear-gradient(45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.02) 75%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.02) 75%);

    background-size: 
        100% 100%,     /* Spotlight covers the full viewport */
        25px 25px,     /* A smaller, more detailed texture size */
        25px 25px;
    

    background-position: 
        0 0,           /* Position for spotlight */
        0 0,           /* Positions for the two lattice layers to create a cross-hatch */
        12px 12px;
}

.checkout-bar-container {
    background-color: white;
    width: 75%;
    /* Use max-width to ensure it doesn't get too wide on large screens */
    max-width: 1200px; 
    /* Use a min-height that's less than the viewport to avoid stretching */
    min-height: 80vh; 
    display: flex;
    flex-direction: column;
    padding: 20px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* Slightly enhanced shadow */
    color: black;
    z-index: 1;
}


.checkout-logo-container {
    display: flex;
    justify-content: center;
}

.checkout-logo {
    background-image: url('graphics/Star-Chef-Logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 150px;
    height: 160px;
    
    margin-top: 30px;

}

.top-container {
    color: black;
    min-height: 20vh;
    display: flex;
    flex-direction: column;
    align-items: left;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 70%;
}

.checkout-item-list {
    width: 100%;
    max-width: 100%;
    min-height: auto;
    padding: 0 20px;
}

.checkout-content-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    position: relative;
}

.checkout-details {
    flex-grow: 1;
    min-width: 0;
    
}

.form-group {
    width: 100%;
    max-width: 500px;
    margin: 20px 0 40px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.input-group {
    display: flex;
    gap: 15px;
}


.form-group input {
    width: 100%;
    padding: 12px 15px;
    font-size: 1rem;
    font-family: "Noto Sans Display", sans-serif;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus {
    outline: none;
    border-color: #A2956B;
    box-shadow: 0 0 5px rgba(162, 149, 107, 0.5);
}

.checkout-title {
    position: relative;
    margin-top: 0;
    color: black;
    border-bottom: 2px solid lightgrey;
    font-family: "Noto Sans Display", sans-serif;
    font-size: 1.5em;
    text-align: center;
    width: 100%;
    padding-bottom: 10px;
    
}

input.input-error {
  border-color: #e74c3c !important; /* Make the border red */
  background-color: #fff2f2; /* A very light pink background */
}

/* Style for the placeholder text in an invalid field */
input.input-error::placeholder {
    color: #c0392b; /* A darker red for placeholder text */
}
.cart-item {
    display: flex;
    justify-content: space-between;
    gap: 2vw;
    padding-top: 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}
.cart-item-details {
  display: flex;          /* <-- Add this to make it a flex container */
  flex-direction: column; /* <-- Add this to stack items vertically */
  gap: 10px;              /* <-- Now this will create the vertical space you want */
  flex: 2;                /* <-- Gives this column more width in the main layout */
}

.cart-item-name {
    flex: 2;
    font-weight: bold;
}

.cart-item-subinfo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
    max-width: 12em;
}

.cart-item-defaultPrice {
    font-weight: normal;
}

.cart-item-customization {
    flex: 1;
    text-align: center;
    color: #838383;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 5px;
    word-break: break-word;  /* Break long words */
    overflow-wrap: break-word;  /* Ensure wrapping */
    max-width: 100%;  /* Prevent overflow */
}
.cart-item-customization span:not(:last-child)::after {
    content: ', ';
    }
.cart-item-customization span {
    word-break: break-word;  /* Also apply to individual spans */
    overflow-wrap: break-word;
}

.cart-item-price {
    flex: 1;
    text-align: right;
}

.quantity-mod-container {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10;
}

.increase-buttn, .decrease-buttn {
    background-color: transparent;
    color: #A2956B;
    border: none;
    border-radius: 30%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 18px;
    position: relative;
}

.increase-buttn:hover, .decrease-buttn:hover {
    background-color: #eadec1;
}

.quantity-value {
    min-width: 30px;
    text-align: center;
    font-weight: 500;
}

.cart-total-summary {
    width: 100%; /* <-- Make it fill the .summary-column */
    box-sizing: border-box; /* <-- Important! Ensures padding is inside the width */
    
    /* REMOVE the fixed widths */
    /* max-width: 200px; */ /* REMOVE THIS */
    /* min-width: 200px; */ /* REMOVE THIS */

    /* Keep all your other styles */
    position: relative;
    top: 30px;
    padding: 20px;
    background-color: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    z-index: 10;
}

.cart-total-summary.is-sticky {
    position: fixed;
    top: 230px;
    width: 80%;
}

.cart-total-summary.is-at-bottom {
    position: absolute;
    bottom: 0;
    top: auto;
}

.summary-column {
    /* Use a percentage that works for your layout. 30-35% is common. */
    width: 40%; 
    flex-shrink: 0;
    
    /* Add guardrails for responsiveness */
    min-width: 200px; /* Prevents it from getting too squished on medium screens */
    max-width: 280px; /* Prevents it from getting too wide on very large screens */
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 1em;
    font-family: "Noto Sans Display", sans-serif;
}

.summary-title {
    color: #555;
}

.summary-price {
    color: #111;
    font-weight: 600;
}

.summary-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 15px 0;
}

.total-row {
    font-size: 1.2em;
    margin-top: 15px;
}

.total-row .summary-title,
.total-row .summary-price {
    font-weight: 700;
    color: #000;
}

.button-container {
  display: flex;
  justify-content: center; /* This is the magic for horizontal centering */
  margin-top: 20px; /* Adds some space above the button */
}

/*
 *  Modify your existing button CSS.
*/
#place-order-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 24px;

  /* Typography */
  font-family: "Noto Sans Display", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff; /* White text for a clean look */

  /* Visuals: Flat Muted Gold */
  background-color: #A2956B; 
  border: none;
  border-radius: 4px; /* Softly rounded square */
  
  /* A very subtle, modern shadow (diffused, not sharp) */
  box-shadow: 0 10px 20px -10px rgba(197, 160, 89, 0.5); 
  
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

#place-order-button:hover {
  background-color: #a6914c; /* Slightly darker/richer on hover */
  transform: translateY(-2px); /* Subtle lift */
  box-shadow: 0 15px 30px -10px rgba(197, 160, 89, 0.7);
}

#place-order-button:disabled {
  background-color: #ddd;
  box-shadow: none;
  cursor: not-allowed;
}

/* Main container for the order details section */
.order-details-box {
    /* Adds space below the "YOUR INFORMATION" form */
    margin-bottom: 2rem;
}

/* The "ORDER DETAILS" heading */
.order-details-title {
    position: relative;
    margin-top: 0;
    color: black;
    border-bottom: 2px solid lightgrey;
    font-family: "Noto Sans Display", sans-serif;
    font-size: 1.5em;
    text-align: center;
    width: 100%;
    padding-bottom: 10px;
    font-weight: 400;
}

/* Container for all the detail rows (Pickup, Address, Time) */
.order-details-content {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Creates consistent spacing between each detail item */
    padding: 0 20px;
    margin-top: 3vh;
}

/* A single detail row (icon + text) */
.order-detail-item {
    display: flex;
    align-items: flex-start; /* Aligns icon to the top of the text block */
    gap: 0.8rem; /* Space between the icon and the text */
}

/* Styling for the SVG icons */
.order-icon-wrapper svg {
    width: 24px;
    height: 24px;
    stroke: #333;
    /* The `stroke-width` is set in the SVG, but you could override it here if needed */
}

/* The text block next to the icon */
.detail-text {
    line-height: 1.4;
}

/* The label for each detail, e.g., "Store Address" */
.detail-title {
    font-size: 0.9rem;
    color: #555; /* A slightly lighter gray for the label */
}

/* The actual information, e.g., the address or time */
.detail-info {
    font-size: 1rem;
    color: #1c1c1c;
}

/* Specific styling for the address link to match the image */
.detail-info-link {
    font-size: 1rem;
    color: black;
    text-decoration: none;
}

.detail-info-link:hover {
    text-decoration: none; /* A common UX touch for links */
}

.hidden {
    display: none !important;
}

/* --- STYLES FOR THE EMPTY CART MESSAGE --- */
.hidden {
    display: none !important;
}

#time-box.store-closed {
    background-color: #f8d7da; /* Light red/pink highlight */
    padding: 10px;
    border-radius: 6px;
}

/* This styles the text message inside the box when it's closed */
#time-box.store-closed .detail-info {
    color: #721c24; /* Darker red for good contrast */
    font-weight: bold;
}
/* --- Elegant Custom Dropdown Styling --- */

/* The main container */
.pickup-time-dropdown-container {
    position: relative; /* CRUCIAL for positioning the options */
    margin-top: 8px;
}

/* The visible box that the user clicks */
.custom-select-trigger {
    padding: 12px 15px;
    font-size: 1rem;
    font-weight: 500;
    color: #333333;
    background-color: #fcfcfc;
    border: 1px solid #d1cdc1;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    user-select: none; /* Prevents text from being highlighted on click */
}

/* Add the custom arrow to the trigger */
.custom-select-trigger::after {
    content: '▼';
    font-size: 1rem;
    color: #6b6351;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s ease; /* For rotating the arrow */
}

/* Style the trigger when the dropdown is open */
.pickup-time-dropdown-container.open .custom-select-trigger {
    border-color: #aa8c2c;
    box-shadow: 0 0 0 3px rgba(170, 140, 44, 0.15);
}

/* Rotate the arrow when open */
.pickup-time-dropdown-container.open .custom-select-trigger::after {
    transform: translateY(-50%) rotate(180deg);
}

/* The container for all the options */
.dropdown-options {
    position: absolute;
    top: 100%; /* This is the key to making it drop DOWN */
    left: 0;
    right: 0;
    background-color: #ffffff;
    border: 1px solid #d1cdc1;
    border-top: none; /* Avoids double border */
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    z-index: 10; /* Make sure it appears above other content */
    max-height: 200px; /* Prevent super long lists */
    overflow-y: auto; /* Add a scrollbar if needed */

    /* Hide it by default */
    display: none;
}

/* Show the options when the 'open' class is added */
.pickup-time-dropdown-container.open .dropdown-options {
    display: block;
}

/* THIS IS WHERE YOU STYLE THE INDIVIDUAL OPTIONS */
.custom-option {
    padding: 12px 15px;
    color: #333333;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* The elegant hover effect you couldn't do before */
.custom-option:hover {
    background-color: #aa8c2c; /* The classy gold accent */
    color: #ffffff; /* White text on hover */
}

.payment-options-row {
    display: flex;
    gap: 15px;
    margin-top: 5px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #333;
}

.radio-label input[type="radio"] {
    accent-color: #000; /* Matches your black/white theme */
    transform: scale(1.1);
}

/* Add a smooth fade in effect for the pop-out */
#online-payment-container {
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* The main container - now a "card" */
.cart-empty-message {
    text-align: center;
    padding: 48px 24px; /* Use multiples of 8 for spacing */
    margin-top: 24px;
    background-color: #f8f9fa; /* A very light, clean gray */
    border: 1px solid #e9ecef; /* A subtle border */
    border-radius: 8px; /* Soft rounded corners */
    
    /* A gentle animation for when it appears */
    animation: fadeIn 0.5s ease-out; 
}

/* The SVG icon - now a design element */

/* The main heading */
.cart-empty-message h2 {
    margin: 0 0 8px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.75em; /* Slightly larger for more impact */
    font-weight: 600;
    color: #212529; /* A strong, near-black for high contrast */
    letter-spacing: -0.5px; /* A pro typography trick */
}

/* The descriptive paragraph */
.cart-empty-message p {
    margin: 0 auto 32px auto;
    max-width: 350px; /* Constrains line length for readability */
    color: #6c757d; /* A secondary text color */
    font-size: 1.1em;
    line-height: 1.6; /* Improves readability */
}



/* The animation keyframes */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* MOBILE STYLES - EVERYTHING BELOW 768px */
@media (max-width: 1000px) {
    .checkout-bar-container {
        width: 100%;
        font-size: 1em;
        font-family: "Noto Sans Display", sans-serif;
        font-weight: 400;
    }

    .form-group {
        width: 100%;
    }

    .input-group {
        flex-direction: column;
    }

    .checkout-title {
        width: 100%;
    }

    .cart-item {
        display: flex; /* Ensure it's a flex container */
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .cart-item-details {
        display: contents;
    }

   .cart-item-name,
    .cart-item-name_chinese,
    .cart-item-defaultPrice,
    .cart-item-customization { 
        order: 1; 
    }
    .cart-item-customization {
        display: flex;
        flex-direction: row !important;  /* Added !important to override base style */
        gap: 5px;  /* Remove gap since we're using commas */
        flex-wrap: wrap;  /* Allow wrapping if needed */
    }
    

    /* Group 2: Interactive controls and final price. */
    .quantity-mod-container {
        order: 2;
        /* Optional: Add a little space to separate from the info block */
        margin-top: 8px; 
    }

    .cart-item-total-price {
        order: 3; 
        font-weight: 600;
    }
    .cart-item-price {
        font-weight: 600;
        margin-top: 8px;
    }

    .checkout-content-wrapper {
        flex-direction: column;
    }

    .cart-item-subinfo,
    .cart-item-customization,
    .cart-item-price {
        text-align: left;
        width: 100%;
        flex: none;
    }

    .summary-column {
        width: 100%;
    }

    .checkout-item-list,
    .cart-total-summary {
        width: 100%;
        box-sizing: border-box;
    }

    .cart-total-summary {
        opacity: 1;
        position: static !important;
        max-width: none;
        box-shadow: none;
        border-top: 1px solid #e0e0e0;
        padding-top: 20px;
        border-radius: 0;
        width: 100% !important;
        left: auto !important;
        top: auto !important;
    }
    .checkout-content-wrapper {
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative;
}
}
/* File: style.css */
/* ========================================= 
   1. Variables & Reset 
========================================= */
:root {
    --gold-accent: #a2956b; /* A muted, elegant metallic gold */
    --gold-hover: #aa8c2c;
    --dark-bg: #121212;      /* Deep matte black */
    --item-border: #2a2a2a;  /* Subtle separator */
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
}

:root {
	--gold-primary: #d4af37;
	--gold-light: #f3e5ab;
	--gold-dark: #aa8c2c;
	--bg-dark: #0b0c10;
	--bg-card: #131418;
	--text-main: #e0e0e0;
	--text-muted: #888888;

	/* Simplified font system - only what's needed */
	--font-display: 'Great Vibes', cursive;
	--font-chinese: 'Yuji Mai', serif;
	--font-body: "Asap Condensed", sans-serif;
}

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

/* ========================================= 
   Background & Atmosphere 
========================================= */
body.thank-you-page-background {
	min-height: 100vh;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--bg-dark);
	color: var(--text-main);
	font-family: var(--font-body);
	overflow-x: hidden;
	padding: 1rem;

	/* Cinematic Lighting & Subtle Lattice Pattern */
	background-image:
		radial-gradient(circle at center, rgba(0, 0, 0, 0.2) 0%, #000000 100%),
		linear-gradient(45deg, rgba(20, 20, 20, 1) 25%, transparent 25%, transparent 75%, rgba(20, 20, 20, 1) 75%, rgba(20, 20, 20, 1)),
		linear-gradient(45deg, rgba(20, 20, 20, 1) 25%, transparent 25%, transparent 75%, rgba(20, 20, 20, 1) 75%, rgba(20, 20, 20, 1));
	background-size: 100% 100%, 30px 30px, 30px 30px;
	background-position: 0 0, 0 0, 15px 15px;
}

/* ========================================= 
   The Card (Main Container) 
========================================= */
.card {
	background: rgba(19, 20, 24, 0.85);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(212, 175, 55, 0.2);
	padding: clamp(2rem, 1rem + 4vw, 3rem) clamp(1.5rem, 1rem + 6vw, 4rem);
	max-width: 500px;
	width: 100%;
	text-align: center;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
	position: relative;
	animation: fadeUp 1.2s ease-out forwards;
}

.card::before,
.card::after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
}

.card::before {
	top: 0;
}

.card::after {
	bottom: 0;
}

/* ========================================= 
   Header & Branding 
========================================= */
.header {
	margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.restaurant-name {
	font-family: var(--font-display);
	font-weight: 400;
	font-style: normal;
	font-size: 4rem;
	letter-spacing: 4px;
	color: rgb(173, 171, 171);
	margin-bottom: 0.5rem;
}

.chinese-chars {
	font-family: var(--font-chinese);
	font-weight: 100;
	font-size: clamp(1.5rem, 2rem + 1vw, 3rem);
	color: rgb(142, 142, 142);
	opacity: 0.8;
}

/* ========================================= 
   Content Typography 
========================================= */
.card h1 {
	font-family: var(--font-body);
	color: var(--gold-light);
	font-size: clamp(1.6rem, 1.4rem + 1vw, 1.8rem);
	font-weight: 200; /* Slightly bolder for hierarchy */
	margin-bottom: 1rem;
	letter-spacing: 0.5px; /* Subtle spacing for elegance */
	
	/* Gold gradient text effect */
	background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa8c2c);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	background-size: 200% auto;
	animation: shine 3s linear infinite;
  text-transform: uppercase;
}

.message {
	font-family: var(--font-body);
	color: var(--text-muted);
	font-size: 0.95rem;
	line-height: 1.6;
	font-weight: 300;
	margin-bottom: 2rem;
}

.pickup-section {
	margin: clamp(1rem, 5rem + 1.5vw, 1.25rem) 0;
	padding: 1.5rem;
	border-radius: 6px;
	background-color: rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(224, 224, 224, 0.1);
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

.pickup-label {
	font-family: var(--font-body);
	font-size: 0.75rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 0.5rem;
	font-weight: 500;
}

.pickup-time {
	font-family: var(--font-body);
	font-size: clamp(2.2rem, 1.5rem + 3.5vw, 2.8rem);
	color: var(--text-main);
	font-weight: 700;
	letter-spacing: 1px;
	text-shadow: none;
}

/* Container Spacing */
.action-container {
	margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	padding-bottom: 0.5rem;
}
/* BUTTON STYLE: Underline Draw */
.btn-keep-shopping {
display: inline-block;
position: relative;
text-decoration: none;
font-family: var(--font-header);
background-color: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.185);
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-main);
padding: 0.5rem 0.5rem; /* Minimal padding */
margin: 0 1rem;

}

.btn-keep-shopping::after {
content: '';
position: absolute;
left: 0;
bottom: -5px;
width: 100%;
height: 1px;
background: var(--gold-primary);
/* Animation setup */
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}
.btn-keep-shopping:hover {
color: var(--gold-primary);
text-shadow: 0 0 15px rgba(212, 175, 55, 0.8); /* Strong glow on text */
}
.btn-keep-shopping:hover::after {
transform: scaleX(1);
transform-origin: left;
box-shadow: 0 0 10px rgba(212, 175, 55, 1); /* Glow on the line */
}

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes shine {
	to {
		background-position: 200% center;
	}
}
.opening-hours-section {
  background-color: black;
  display: flex;
  /* We add 'align-items: stretch' to make sure both columns are the same height */
  align-items: stretch; 
  width: 100%;
  /* You can add a gap here if you want space between them */
  /* gap: 30px; */ 
  margin:0 !important;
}

/* --- The Image Column (First 50%) --- */
.opening-hours-img {
  /* This is the key: 'flex: 1' tells it to take up 1 equal share of space. */
  flex: 1;
 
}

.opening-hours-img img {
  width: 100%;
  height: 100%; /* Make the image fill the entire container height */
  display: block;
  object-fit: cover; /* This is great, it prevents the image from being distorted */
}

/* --- The Text Column (Second 50%) --- */
.opening-hours-text {
  /* This is the other key: 'flex: 1' tells it to take up the OTHER equal share. */
  flex: 1;
  /* We REMOVE the 'width: 10%' which was causing the problem. */

  /* We now use flexbox AGAIN to center the text perfectly inside this column */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centers vertically */
  align-items: center;     /* Centers horizontally */
  
  padding: 40px; /* Add some padding so text isn't stuck to the edges */
  
  /* Your animation styles are perfect and stay the same */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  z-index: 10;
}

@media (max-width:796px){
  .opening-hours-text {
  background-color: black;
  /* This is the other key: 'flex: 1' tells it to take up the OTHER equal share. */
  flex: 1;
  /* We REMOVE the 'width: 10%' which was causing the problem. */

  /* We now use flexbox AGAIN to center the text perfectly inside this column */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centers vertically */
  align-items: center;     /* Centers horizontally */
  
   /* Add some padding so text isn't stuck to the edges */
  padding-left:30px !important;
  padding-right:30px !important;
  /* Your animation styles are perfect and stay the same */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  z-index: 10;
}
.opening-hours-section {
  background-color: black;
  display: flex;
  /* We add 'align-items: stretch' to make sure both columns are the same height */
  align-items: stretch; 
  width: 100%;

  /* You can add a gap here if you want space between them */
  /* gap: 30px; */ 
}

}

/* Your original h2/sub styles for font can go here */
.opening-hours-text h2 {
    font-family: "Asap Condensed", sans-serif;
    font-weight: 200; /* This should now work correctly */
    font-style: normal;
    color: white;
    font-size: 40px;
    margin-bottom: 40px;

}
/* This is the container for the list, controlling its overall width */
.hours-list {
  width: 100%;
  max-width: 450px; /* Prevents the list from becoming too wide on large screens */
  margin-left: auto;
  margin-right: auto;
}

/* This is where the magic happens: we turn the list into a grid */
.hours-list dl {
  display: grid;
  grid-template-columns: auto 1fr; /* Two columns: first is sized to its content, second takes the rest */
  row-gap: 15px; /* The vertical space between each day. SPACING IS KEY to a classy look. */
}

/* --- THIS IS THE MISSING PIECE, NOW RESTORED --- */
/* Styling for the day/title (e.g., "Monday") */
.hours-list dt {
  grid-column: 1; /* Puts this in the first column */
  font-family: "Asap Condensed", sans-serif;
  font-weight: 400; /* Regular weight to stand out slightly */
  color: rgba(255, 255, 255, 0.9); /* A slightly softer white BY DEFAULT */
  font-size: 18px;
  text-transform: uppercase; /* Makes it look clean and uniform */
  letter-spacing: 1.5px; /* Adds an airy, elegant feel */
  text-align: left; /* Aligns the day to the left */
}

/* Styling for the time (e.g., "11:00 AM — 10:00 PM") */
.hours-list dd {
  grid-column: 2; /* Puts this in the second column */
  margin: 0; /* Important: Resets browser default margin */
  font-family: "Asap Condensed", sans-serif;
  font-weight: 300; /* A lighter weight for a subtle hierarchy */
  color: rgba(255, 255, 255, 0.7); /* More subtle white BY DEFAULT */
  font-size: 18px;
  text-align: right; /* Aligns the time to the right, creating the clean columns */
}

/* --- STYLES FOR THE SPECIALS DESCRIPTION --- */
.hours-list .item-description {
  grid-column: 1 / 3; /* Makes this DD span BOTH columns */
  text-align: left;     /* Overrides the default right-align for DDs */
  font-size: 16px;      /* Slightly smaller for hierarchy */
  font-weight: 300;     /* Matches the light weight of the times */
  margin-top: 5px;      /* Adds a little space below the time */
  padding-left: 2px;    /* Aligns it nicely with the DT above */
}

.hours-list .upgrades-list {
  list-style-type: none; /* Removes the default bullet points */
  padding-left: 0;
  margin-top: 8px;
  margin-bottom: 0;
}

.hours-list .upgrades-list li {
    margin-bottom: 4px; /* A little space between list items */
}

/* --- MODIFIER FOR USE ON A LIGHT BACKGROUND --- */
/* This overrides the default white text color ONLY when .dark-text is used */
.hours-list.dark-text dt {
  color: rgba(255, 255, 255, 0.85); /* A strong, but not pure black for the day */
}

.hours-list.dark-text dd {
  color: rgba(254, 254, 254, 0.65); /* A slightly softer black for the time */
}

.deal {
        margin-bottom: 2rem; /* Adds space between the two deals */
    }
    .deal-time {
        font-weight: bold;
        color: #555;
    }
    .deal-upgrades-title {
        margin-bottom: 0.5rem;
    }

.upgrades-list li {
  display: flex;                  /* This is the magic! Activates flexbox. */
  justify-content: space-between; /* Pushes the name and price to opposite ends. */
  align-items: center;            /* Keeps them aligned vertically. */
  margin-bottom: 6px;             /* Adds a little space between each upgrade line. */
}

/* Style for the price to make it stand out */
.upgrades-list .upgrade-price {
  font-weight: 600; /* Bolder font for the price */
  color: #EAEAEA;  /* A slightly brighter white */
}


/* Keyframes animations are omitted for brevity, they don't need changes. */
/* Don't forget your .visible class for the animation */
.opening-hours-text.visible {
  opacity: 1;
  transform: translateY(0);
}
.about-spread {
  position: relative; /* REQUIRED: Traps the absolute image inside */
  height: 80vh;
  max-height: 600px;
  width: 100%;
  margin-top: 25vh;
  margin-bottom: 25vh;
  
  /* REMOVED: background-image, background-size, background-position */
  
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Ensures image doesn't spill out if corners are rounded */
}

/* ===== NEW CSS FOR THE IMAGE ===== */
/* This makes the HTML image act exactly like 'background-size: cover' */
.spread-bg img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* The Magic: Mimics background-size: cover */
  object-position: center; /* Mimics background-position: center */
  z-index: -1; /* Puts the image BEHIND the text */
}

/* Your Media Query (Just remove the background stuff here too) */
@media (max-width: 786px){
  .about-spread {
    height: 60vh;
    margin-top: 10vh;
    margin-bottom: 10vh;
    /* No need to redeclare background-image here anymore! */
  }
}

.reservation {
    position: relative; /* Ensures text sits above the image */
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    z-index: 2; /* Safety number to keep text on top */
}

.reservation h2 {
    font-family: "Asap Condensed", sans-serif;
    font-weight: 200;
    font-style: normal;
    color: white;
    font-size: 40px;

}
.reservation-button {
    text-decoration: none;
    display: block; 
    padding: 0.6em 1.5em;
    border: 2px solid #ffffff;
    cursor: pointer;
    font-size: 1.2em;
    border-radius: 0; /* Sharp, clean corners */
    margin: 20px auto; 
    color: #ffffff;
    width: 240px; /* A bit wider for presence */
    text-align: center;
    background-color: transparent; /* Explicitly transparent */

    /* Transition for the color and border change */
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.reservation-button:hover {
  border-color: #A2956B; /* Border turns to gold */
  color: #A2956B;       /* Text turns to gold */
  background-color: transparent; /* Stays transparent */
}

/* ===== ABOUT US SECTION ===== */
.location-section {
  display: flex;

  width: 100%;
  /* A dark background makes the text pop */
  color: white; /* Set a default text color for the section */
}

.location-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top:0;
  padding-top: 5vh;
  padding-bottom: 5vh;
  padding-left:5vw; /* More vertical padding gives it room to breathe */
  padding-right:5vw;
  /* Use 'gap' for consistent spacing between elements. It's cleaner than margin! */
  gap: 25px; 
  
}

.location-img {
  flex: 1;
}

.location-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  padding-bottom: 175px;
}

.location-img iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;

    /* 
       1. grayscale: removes map colors so they don't clash 
       2. invert: turns white background to dark 
       3. sepia: adds a base color filter we can rotate 
       4. hue-rotate: shifts the sepia color to blue (180deg-200deg is blue)
       5. saturate: intensities the blue
       6. brightness: ensures it isn't too washed out
    */
}

/* --- Typography Hierarchy --- */

.location-text h2 {
  font-family: "Asap Condensed", sans-serif;
  font-weight: 200; /* A bit thicker for a heading */
  font-size: 2.5rem; /* 40px is good, rem is more flexible */
  color: #EAEAEA;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0; /* Remove margin as 'gap' now handles spacing */
}

/* Style for the "MARKHAM | ONTARIO" subheading */
.location-text .location-subheading {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #a2956b; /* An accent color to make it stand out */
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0;
}

/* Style for the main description paragraph */
.location-text .location-description {
  font-family: 'Poppins', sans-serif;
  font-weight: 300; /* Lighter weight for body text is easier to read */
  font-size: 1.1rem;
  line-height: 1.7; /* Increased line-height is crucial for readability */
  text-align: center;
  color: #cccccc; /* Slightly softer than pure white */
  max-width: 500px; /* Keeps lines from getting too long */
  margin: 0;
}
.location-text .location-exact{
   font-family: "Asap Condensed", sans-serif;
    font-size: 18px; 
    font-weight: 300; 
    font-style: italic; 
    color: rgba(255, 255, 255, 0.7); 
    margin-top: 5px; 
    display: block; 
}
/* Optional: Keep your animation class */
.location-text.visible {
  opacity: 1;
  transform: translateY(0);
}
/* ===== MOBILE LAYOUT ===== */
@media (max-width: 1000px) {
  .opening-hours-section,
  .location-section {
    flex-direction: column;
    margin-top: 3vh;
  }
  
  .opening-hours-img,
  .location-img {
    width: 100%;
    order: 2; /* Image comes second */
  }
  
  .opening-hours-text,
  .location-text {
    width: 100%;
    padding: 10px;
    order: 1; /* Text comes first */
  }
  
  .location-spread {
    height: 50vh;
    margin-top: 10vh;
    margin-bottom: 10vh;
  }
  .opening-hours-text.visible{
    padding-bottom: 30px;
  }
   .location-img iframe {
    width: 100%; /* Make the iframe fill the container's width */
    height: 400px; /* Give it a reasonable height for mobile */
    border: 0;   /* Good practice to put this in CSS */
  }
  .location-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  padding-bottom: 100px;
  }
}


body h1{
    font-family: "Noto Sans Display", sans-serif;
}


@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}