/* Minimal reset and modern design tokens */
:root{
  /* Core colors (dark-mode defaults) */
  --bg: #071226; /* deep navy wallpaper */
  --bg-2: linear-gradient(180deg,#071226 0%, #08182a 100%);
  --fg: #eaf4ff;
  --muted: #9fb3c8;

  /* Accent palette - brighter for ultra-modern look */
  --accent: #00a3ff; /* vivid cyan-blue */
  --accent-2: #0066ff; /* saturated blue */
  --accent-gradient: linear-gradient(90deg,var(--accent),var(--accent-2));

  /* Modal / menu tokens */
  --menu-surface: rgba(6,14,28,0.9);
  --menu-fg: var(--fg);
  /* Use a subtle navy-blue glass for menu surfaces instead of flat grey/black */
  --menu-card-fg: var(--fg);
  --menu-card-bg: rgba(8,30,64,0.12); /* slight bluish card tint */
  --menu-surface: linear-gradient(180deg, rgba(6,20,44,0.92), rgba(8,24,48,0.9));
  --menu-backdrop: rgba(2,12,32,0.46); /* softer backdrop with blue tint */

  /* Surface and glass */
  --surface: rgba(255,255,255,0.03);
  --surface-2: rgba(255,255,255,0.015);
  --glass: rgba(255,255,255,0.03);

  --radius: 14px;
  --container-width: 1200px;
  --header-bg: rgba(3,8,18,0.6);

  /* Elevation shadows tuned for modern feel */
  --shadow-1: 0 8px 30px rgba(2,14,30,0.45);
  --shadow-2: 0 18px 60px rgba(2,14,30,0.5);

  /* Buttons */
  --btn-elev: 0 8px 26px rgba(0,120,255,0.12);
}

/* Light mode token overrides - toggled by adding `body.light-mode` */
body.light-mode{
  --bg: #f6fbff;
  --bg-2: linear-gradient(180deg,#ffffff 0%, #f4f9ff 100%);
  --fg: #071629;
  --muted: #526b80;
  --accent: #0066ff;
  --accent-2: #00a3ff;
  --accent-gradient: linear-gradient(90deg,var(--accent),var(--accent-2));
  /* Menu/light-mode specific overrides: keep menus readable without bleaching content */
  --menu-surface: #ffffff; /* panel surface */
  --menu-fg: #062033; /* slightly darker text for contrast */
  --menu-card-bg: #fbfdff; /* subtle off-white for cards */
  --menu-backdrop: rgba(6,20,40,0.36); /* soft blue-gray translucent backdrop to maintain depth */
  --surface: rgba(6,22,38,0.02);
  --surface-2: rgba(6,22,38,0.01);
  --glass: rgba(255,255,255,0.6);
  --header-bg: linear-gradient(180deg,#ffffff,#f2f8ff);
  --shadow-1: 0 8px 26px rgba(9,30,63,0.06);
  --shadow-2: 0 16px 48px rgba(9,30,63,0.06);
  --btn-elev: 0 8px 20px rgba(0,102,204,0.08);
}

/* Light-mode: menu/modal specific tweaks to ensure accessible contrast and preserved depth */
body.light-mode .modal{
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,252,255,0.98));
}
body.light-mode .menu-panel{
  background: var(--menu-surface);
  color: var(--menu-fg);
  border: 1px solid rgba(6,20,40,0.06);
  box-shadow: 0 12px 30px rgba(9,30,63,0.06);
}
body.light-mode .menu-card{
  background: var(--menu-card-bg);
  border: 1px solid rgba(6,20,40,0.04);
}
body.light-mode .menu-header, body.light-mode .menu-cart-summary, body.light-mode .menu-cart-compact{
  background: transparent;
  color: var(--menu-fg);
}
body.light-mode .modal::backdrop, body.light-mode .modal{--menu-backdrop: rgba(6,20,40,0.36)}

/* Ensure modal backdrops use the menu-backdrop token for consistent dimming */
.modal[aria-hidden="false"]{
  background: var(--menu-backdrop);
}

  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: var(--bg-2);
    color:var(--fg);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.5;
    -webkit-font-feature-settings: "ss01" on;
    -webkit-font-feature-settings: "ss01" on;
    font-feature-settings: "ss01" on;
    transition:background .28s ease,color .18s ease;
  }

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

  /* Global utilities */
  .muted{color:var(--muted)}
  .visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

  /* Header - elevated, subtle glass blur */
  .site-header{
    position:sticky;
    top:0;
    left:0;
    right:0;
    background:var(--header-bg);
    z-index:70;
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    border-bottom: 1px solid rgba(255,255,255,0.03);
  }

.site-header.scrolled{box-shadow:var(--shadow-1);background:linear-gradient(180deg, rgba(2,4,10,0.6), rgba(2,4,10,0.45));}

  /* Slightly tighter header for a modern compact look */
  .header-inner{display:flex;align-items:center;justify-content:space-between;padding:.65rem 0;gap:1rem}
  .logo{font-weight:700;letter-spacing:2px;text-decoration:none;color:var(--fg);display:inline-flex;align-items:center;gap:.5rem;transition:opacity .18s;font-size:1rem}
  .logo img{max-height:36px;border-radius:8px}

  /* Navigation: compact spacing + subtle animated underline for modern UI */
  .site-nav{display:flex;align-items:center;gap:.6rem}
  .site-nav a{color:var(--fg);text-decoration:none;margin-left:0;opacity:0.98;transition:opacity .18s,transform .18s;padding:.35rem .5rem;border-radius:8px;position:relative}
  .site-nav .nav-link{color:var(--fg);font-weight:600;letter-spacing:0.2px}
  .site-nav .nav-link::after{content:'';position:absolute;left:10%;right:10%;bottom:-8px;height:3px;width:0;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .28s cubic-bezier(.2,.9,.2,1),opacity .18s;opacity:0}
  .site-nav .nav-link:hover::after{width:80%;opacity:1}
  body.light-mode .site-nav .nav-link{color:#ffffff}
  .site-nav a:hover{opacity:1;transform:translateY(-2px);background:rgba(255,255,255,0.02)}

  /* Dropdown menu (Demo) */
  .nav-dropdown{position:relative;display:inline-block;margin-left:1rem}
  .dropdown-toggle{background:transparent;border:0;color:var(--fg);cursor:pointer;padding:.35rem .6rem;border-radius:8px;font-weight:600;font-family:inherit}
  .dropdown-toggle{font-size:0.95rem;letter-spacing:0.2px;display:inline-flex;align-items:center;gap:.4rem;line-height:1}
  .dropdown-toggle:hover{transform:translateY(-2px);opacity:1;background:rgba(255,255,255,0.02)}
  /* Use a more solid surface for the dropdown so it's readable in both themes */
  .dropdown-menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);padding:.5rem;border-radius:12px;min-width:180px;display:none;box-shadow:var(--shadow-2);border:1px solid rgba(255,255,255,0.04)}
  .dropdown-menu a{display:block;padding:.5rem .75rem;color:var(--fg);text-decoration:none;border-radius:8px}
  .dropdown-menu a:hover{background:rgba(255,255,255,0.02)}
  .dropdown-menu.open{display:block}

  .header-actions{display:flex;align-items:center;gap:.5rem}
  .btn{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--fg);padding:.5rem .9rem;border-radius:12px;cursor:pointer;transition:transform .18s,box-shadow .18s}
  .btn:hover{transform:translateY(-4px);box-shadow:var(--shadow-1)}
  .btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#ffffff;border:none;font-weight:600;padding:.6rem 1rem;border-radius:14px}
  .btn-ghost{border-color:rgba(255,255,255,0.06)}
  .btn-cta{background:var(--accent);color:#ffffff;border:none;padding:.75rem 1.2rem;border-radius:999px;font-weight:700}

  .hamburger{background:transparent;border:0;padding:.5rem;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center}
  .hamburger span{display:block;width:22px;height:2px;background:var(--fg);border-radius:2px;transition:all .25s}

/* Toggle switch (Uiverse) */
.toggle-switch{position:relative;width:72px;height:36px;--light:#d8dbe0;--dark:#28292c;--link:rgb(27,129,112);--link-hover:rgb(24,94,82)}
.switch-label{position:absolute;width:100%;height:36px;background-color:var(--dark);border-radius:18px;cursor:pointer;border:2px solid var(--dark)}
.checkbox{position:absolute;display:none}
.slider{position:absolute;width:100%;height:100%;border-radius:18px;transition:0.22s}
.checkbox:checked ~ .slider{background-color:var(--light)}
.slider::before{content:"";position:absolute;top:6px;left:6px;width:22px;height:22px;border-radius:50%;box-shadow:inset 8px -3px 0px 0px var(--light);background-color:var(--dark);transition:0.22s}
.checkbox:checked ~ .slider::before{transform:translateX(36px);background-color:var(--dark);box-shadow:none}

/* Light-mode tweak: make the toggle use theme tokens */
body.light-mode .toggle-switch .switch-label{background-color:var(--menu-surface);border-color:var(--menu-surface)}
body.light-mode .toggle-switch .slider::before{box-shadow:inset 12px -4px 0px 0px var(--fg);background-color:var(--fg)}

  /* Animate hamburger into an X when the header has the .show class (toggled by JS) */
  .site-header.show .hamburger span:nth-child(1){transform-origin:center;transform:rotate(45deg) translate(3px,3px)}
  .site-header.show .hamburger span:nth-child(2){opacity:0;transform:translateX(-8px)}
  .site-header.show .hamburger span:nth-child(3){transform-origin:center;transform:rotate(-45deg) translate(3px,-3px)}

  /* Reduce header height when scrolled for a compact feel */
  .site-header.scrolled .header-inner{padding:.45rem 0}
  .site-header.scrolled{background:linear-gradient(180deg, rgba(2,4,10,0.75), rgba(2,4,10,0.6));backdrop-filter:blur(8px);box-shadow:var(--shadow-1)}

  /* Logo upload */
  #logoWrap{display:flex;align-items:center;gap:.6rem}
  #companyLogo{max-height:36px;border-radius:8px}
  #logoText{font-weight:700}

  /* Hero - roomy and modern */
  .hero{min-height:72vh;display:flex;align-items:center;padding:6rem 0 3rem;background:linear-gradient(180deg, rgba(11,11,18,0.15), transparent);}
  .hero-inner{text-align:center;padding:2rem 0;max-width:820px;margin:0 auto}
  .hero-title{font-size:clamp(2rem,6vw,3.8rem);margin:0 0 .5rem;letter-spacing:-0.02em}
  .hero-sub{color:var(--muted);margin:0 0 1.25rem;font-size:1.05rem}
  .hero-ctas{display:flex;gap:1rem;justify-content:center}

  /* Modern hero glass panel */
  .hero-inner{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));padding:3.25rem;border-radius:20px;box-shadow:0 12px 36px rgba(2,6,18,0.32);backdrop-filter: blur(8px);margin-top:1.25rem;transition:transform .28s ease}
  .hero-inner:hover{transform:translateY(-3px)}
  .hero-title{font-weight:800;letter-spacing:-0.6px;line-height:1.03}
  .hero-title::after{content:'';display:block;height:4px;width:64px;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:999px;margin-top:18px;margin-left:auto;margin-right:auto;opacity:.95;transform:translateY(6px);transition:transform .36s cubic-bezier(.2,.9,.2,1),opacity .36s}
  .hero-inner.in-view .hero-title::after{transform:translateY(0);opacity:1}
  .hero-sub{font-size:1.08rem;color:var(--muted);max-width:720px;margin-left:auto;margin-right:auto}
  .hero-ctas .btn-primary{padding:.86rem 1.35rem;border-radius:14px;font-weight:700;box-shadow:0 8px 26px rgba(95,176,230,0.08);transition:transform .18s,box-shadow .18s}
  .hero-ctas .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(95,176,230,0.12)}
  .hero-ctas .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:.7rem 1rem;border-radius:14px}

  /* Features */
  .features{padding:3.5rem 0}
  /* In dark mode the features use a two-tone treatment; add extra spacing so subsequent content doesn't overlap visually */
  body:not(.light-mode) .features{padding-top:7rem;padding-bottom:6rem}
  .section-title{text-align:center;font-size:1.5rem;margin:0 0 .25rem}
  .section-sub{text-align:center;color:var(--muted);margin:0 0 1.5rem}
  @media(min-width:740px){
    .vendors-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;align-items:start;justify-items:stretch}
    .features-grid{display:grid;grid-template-columns:repeat(2,320px);gap:1.5rem;justify-content:center;margin:0 auto}
  }

  @media(min-width:1200px){
    .features-grid{grid-template-columns:repeat(4,300px);gap:2rem}
  }

  .features-grid{display:grid;grid-template-columns:1fr;gap:1rem;justify-items:center;margin:0 auto}

/* Search demo styles */
.search-input-wrap{display:flex;gap:.5rem;align-items:center;justify-content:center}
.demo-search{padding:.7rem .9rem;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--fg);min-width:360px}
.search-actions{display:flex;gap:.5rem}
.btn-search{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;border:none;padding:.6rem .9rem;border-radius:10px}
.search-result{color:var(--muted);margin-top:.6rem;text-align:center}

/* Vendor card improvements */
.vendors-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
  .unique-card{position:relative;overflow:hidden;border-radius:10px;padding:0;border:1px solid rgba(255,255,255,0.04);background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.008));box-shadow:0 8px 22px rgba(2,6,18,0.14);transition:transform .22s,box-shadow .22s}
.unique-card .thumbnail{width:100%;height:200px;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.9,.2,1),filter .22s}
.unique-card .card-content{padding:1rem}
  .unique-card .background-overlay{position:absolute;left:0;right:0;top:0;height:100%;pointer-events:none;background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.42));mix-blend-mode:normal}
.card-title{font-weight:800;margin-bottom:.25rem;font-size:1.02rem}
.card-description{color:var(--muted);margin-bottom:.45rem}
.vendor-meta{color:var(--muted);font-size:.95rem;margin-top:.35rem;display:flex;gap:.6rem;align-items:center}
.card-actions{margin-top:0.6rem}
.card-actions .btn{padding:.48rem .7rem;border-radius:10px}
.vendor-meta .distance{opacity:.9}
.vendor-card.highlight{outline:3px solid rgba(11,123,216,0.12);transform:scale(1.02);transition:transform .18s}
.view-menu{margin-top:.6rem;background:rgba(255,255,255,0.04);border:0;color:var(--fg)}

/* Make vendor cards appear clickable now that the action button was removed */
.vendor-card{cursor:pointer}

/* Map preview tweaks */
.map-container{width:100%;height:380px;border-radius:12px;overflow:hidden;background:linear-gradient(180deg, rgba(7,20,38,0.6), rgba(5,12,25,0.2));border:1px solid rgba(255,255,255,0.02);box-shadow:0 10px 40px rgba(2,6,18,0.3)}
.map-preview .map-pins{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.map-pin{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:.4rem .6rem;border-radius:8px;cursor:pointer;transition:transform .18s,box-shadow .18s}
.map-pin:focus{outline:3px solid rgba(11,123,216,0.14);box-shadow:0 8px 30px rgba(11,123,216,0.06)}
.map-pin:hover{transform:translateY(-4px);box-shadow:0 10px 40px rgba(2,6,18,0.18)}
.map-container.map-ready{box-shadow:0 10px 40px rgba(2,6,18,0.25)}

/* Leaflet dark theme overrides: dark blue/black/grey palette */
.leaflet-container{background:#071426}
.leaflet-popup-content-wrapper{background:#071426;color:var(--fg);border-radius:10px;box-shadow:0 12px 40px rgba(2,6,18,0.6);border:1px solid rgba(127,179,255,0.06)}
.leaflet-popup-tip{background:#071426}
.leaflet-popup-content{color:var(--fg);font-size:0.95rem}
.leaflet-control-zoom a{background:rgba(255,255,255,0.02);color:var(--fg);border:none;border-radius:6px}
.leaflet-control-attribution{color:rgba(230,242,255,0.7);font-size:11px}
.leaflet-control a{color:rgba(127,179,255,0.9)}

/* Slightly dim default marker icons if any fallback markers are used */
.leaflet-marker-icon{filter:drop-shadow(0 6px 18px rgba(2,6,18,0.6))}

/* Menu modal improvements */
#menuModal .modal-inner{max-width:820px;padding:1rem 1.25rem}
.menu-header{display:flex;gap:0.9rem;align-items:center;border-bottom:1px solid rgba(255,255,255,0.03);padding-bottom:.8rem;margin-bottom:.8rem}
.menu-thumb{width:84px;height:64px;object-fit:cover;border-radius:8px;flex-shrink:0;border:1px solid rgba(255,255,255,0.04)}
.menu-meta{display:flex;flex-direction:column;gap:0.2rem}
.menu-title{font-weight:800;font-size:1.05rem;color:var(--fg)}
.menu-sub{color:var(--muted);font-size:0.92rem}
.menu-sub .status{padding:.18rem .45rem;border-radius:999px;font-weight:700;margin-left:.5rem}
.menu-sub .status.open{background:rgba(127,179,255,0.12);color:#bfe0ff}
.menu-sub .status.closed{background:rgba(255,255,255,0.02);color:var(--muted)}
.menu-items-list{display:flex;flex-direction:column;gap:.6rem;max-height:46vh;overflow:auto;padding-right:4px}
/* Modernized menu cards layout */
.section-items{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1rem;
  align-items:start;
}

.menu-card{
  background:var(--menu-card-bg);
  color:var(--menu-card-fg);
  border-radius:12px;
  padding:0.85rem;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  border:1px solid rgba(255,255,255,0.03);
  box-shadow:var(--shadow-1);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.menu-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-2); border-color:rgba(255,255,255,0.06); }
.menu-card .image_container{ height:110px; border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)); }
.menu-card .title{ font-weight:800; font-size:1rem; line-height:1.1 }
.menu-card .desc{ color:var(--muted); font-size:.92rem; min-height:38px }
.menu-card .meta-row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:auto }
.menu-card .price{ font-weight:800; color:var(--fg) }
.menu-card .action .add-to-cart{ background:var(--accent-gradient); color:#fff; border:none; padding:.45rem .7rem; border-radius:10px; cursor:pointer; font-weight:700 }
.menu-card .action .add-to-cart:active{ transform:translateY(1px) }

@media(max-width:900px){
  .section-items{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
  .menu-card .image_container{ height:88px }
}

/* Ultra-modern button system for the menu */
:root{
  --btn-radius: 12px;
  --btn-padding-sm: .4rem .7rem;
  --btn-padding-md: .6rem 1rem;
  --btn-text-sm: .95rem;
}

.btn-modern{
  display:inline-flex;align-items:center;gap:.6rem;justify-content:center;border-radius:var(--btn-radius);padding:var(--btn-padding-md);font-weight:700;font-size:var(--btn-text-sm);cursor:pointer;border:0;transition:transform .18s ease,box-shadow .18s ease,opacity .12s ease;
}
.btn-modern:focus{outline:3px solid rgba(0,160,255,0.14);outline-offset:4px}

.btn-modern--primary{
  background:var(--accent-gradient);color:#fff;box-shadow:var(--btn-elev);padding:var(--btn-padding-md);
}
.btn-modern--primary:hover{ transform:translateY(-3px); box-shadow:0 18px 48px rgba(0,102,204,0.14) }
.btn-modern--primary:active{ transform:translateY(1px); box-shadow:var(--btn-elev) }

.btn-modern--ghost{ background:transparent;border:1px solid rgba(255,255,255,0.06); color:var(--fg);padding:var(--btn-padding-sm) }
.btn-modern--ghost:hover{ transform:translateY(-2px); background:rgba(255,255,255,0.02) }

/* Apply modern button to add-to-cart inside menu cards */
.menu-card .action .add-to-cart{ border-radius:12px;padding:.55rem .85rem;font-weight:800;background:var(--accent-gradient);color:#fff;box-shadow:0 10px 30px rgba(2,10,36,0.18);transition:transform .18s,box-shadow .18s }
.menu-card .action .add-to-cart:hover{ transform:translateY(-4px); box-shadow:0 20px 60px rgba(2,14,44,0.22) }
.menu-card .action .add-to-cart:active{ transform:translateY(0) }

/* Subtle micro-animations for cards */
.menu-card{ will-change:transform,box-shadow,opacity }
.menu-card{ transition:transform .22s cubic-bezier(.2,.9,.2,1),box-shadow .22s,opacity .22s }

/* Compact cart badge modern pill */
.cart-badge{ background:var(--accent); color:#fff; padding:.18rem .55rem; border-radius:999px; font-weight:800; font-size:.92rem; box-shadow:0 6px 18px rgba(0,120,255,0.12) }

/* Menu header accent bar */
.menu-header{ position:relative }
.menu-header::before{ content:'';position:absolute;left:0;right:0;top:-10px;height:6px;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:6px;opacity:.95 }

@media (max-width:560px){
  .btn-modern{padding:var(--btn-padding-sm);font-size:.92rem}
  .menu-card .image_container{ height:72px }
}
.menu-item{display:flex;align-items:center;justify-content:space-between;padding:.65rem;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));border:1px solid rgba(255,255,255,0.02)}
.menu-item-left{max-width:68%}
.menu-item-title{font-weight:700}
.menu-item-desc{color:var(--muted);font-size:0.92rem;margin-top:4px}
.menu-item-right{display:flex;align-items:center;gap:.6rem}
.menu-item-price{font-weight:700;color:#dbe9ff}
.order-btn, .cart-button{background:var(--accent);color:#fff;border:none;padding:.45rem .6rem;border-radius:8px;cursor:pointer}
.order-btn:focus, .cart-button:focus{outline:3px solid rgba(127,179,255,0.18);outline-offset:3px}
.menu-empty{color:var(--muted);padding:.8rem;text-align:center}

@media(max-width:720px){
  .menu-header{flex-direction:row;gap:.6rem}
  .menu-thumb{width:72px;height:56px}
  .menu-item-left{max-width:60%}
}

/* Business page specific styles */
.b2b-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem;align-items:stretch}
.parking-card{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.04);background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:0 8px 30px rgba(2,6,18,0.35);display:flex;flex-direction:column;justify-content:space-between;transition:transform .18s,box-shadow .18s}
.parking-card:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(2,6,18,0.45)}
.card-media{position:relative;width:100%;height:220px;overflow:hidden;flex:0 0 auto}
.card-media img{width:100%;height:100%;object-fit:cover;display:block}
.card-badge{position:absolute;left:12px;top:12px;background:rgba(11,123,216,0.14);color:#bfe0ff;padding:.28rem .5rem;border-radius:999px;font-weight:700;font-size:.78rem}
.parking-info{padding:1rem}
.parking-info h3{margin:0 0 .25rem;font-size:1.05rem}
.parking-info p{margin:0 0 .6rem;color:var(--muted);font-size:0.95rem}
.card-footer{display:flex;align-items:center;justify-content:space-between;padding:0.8rem 1rem;border-top:1px solid rgba(255,255,255,0.02);gap:0.5rem}
.card-actions{display:flex;gap:.5rem}
.card-actions .btn{padding:.45rem .65rem;border-radius:10px}
.price{font-weight:800;color:var(--fg)}
.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-top:.8rem}
.dash-card{padding:1rem;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);box-shadow:var(--shadow-1)}

/* Hover / focus image scale for a modern feel */
.unique-card:hover{transform:translateY(-6px);box-shadow:0 22px 60px rgba(2,6,18,0.42)}
.unique-card:hover .thumbnail{transform:scale(1.06)}
.vendor-card:focus{outline:3px solid rgba(11,123,216,0.12);outline-offset:6px;transform:translateY(-4px)}

.card-media img{transition:transform .6s cubic-bezier(.2,.9,.2,1),filter .25s}
.parking-card:hover .card-media img{transform:scale(1.06)}
.parking-card:focus-within .card-media img{transform:scale(1.04)}

/* Make card focus visible for keyboard users */
.parking-card:focus{outline:3px solid rgba(127,179,255,0.12);outline-offset:4px}
.parking-card:focus .card-media img{transform:scale(1.03)}

/* Better focus styles for action buttons */
.card-actions .btn:focus{outline:3px solid rgba(127,179,255,0.18);outline-offset:3px}

/* Modal form styles for reserve modal */
.modal-inner form{display:flex;flex-direction:column;gap:.6rem}
.modal-inner label{display:flex;flex-direction:column;font-size:.95rem;color:var(--fg)}
.modal-inner input[type="text"], .modal-inner input[type="email"], .modal-inner input[type="tel"], .modal-inner input[type="date"], .modal-inner textarea{padding:.55rem;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--fg)}
.modal-inner textarea{resize:vertical}

@media(max-width:720px){
  .dashboard-grid{grid-template-columns:1fr}
}

/* Reserve modal controls */
.form-row{display:flex;gap:0.75rem}
.form-row label{flex:1}
.reserve-controls{display:flex;flex-direction:column;gap:0.75rem;align-items:stretch}
/* Top banner photo in reserve modal */
.reserve-spot-top{width:100%}
.reserve-spot-photo{width:100%;height:200px;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,0.03);position:relative;display:block}
.reserve-spot-top{position:relative;overflow:hidden;border-radius:10px}
/* overlay gradient to make photo feel immersive and keep text readable */
.reserve-spot-top::after{content:'';position:absolute;left:0;right:0;top:0;height:100%;background:linear-gradient(180deg, rgba(2,6,18,0.15), rgba(2,6,18,0.6));pointer-events:none}
.reserve-spot-title{position:absolute;left:16px;top:12px;color:#fff;font-weight:700;text-shadow:0 6px 18px rgba(2,6,18,0.6);z-index:4}

/* notice at top of reserve modal for per-spot limits */
.reserve-notice{background:linear-gradient(90deg, rgba(11,123,216,0.06), rgba(11,123,216,0.04));border:1px solid rgba(11,123,216,0.08);padding:.6rem .8rem;border-radius:10px;color:var(--fg);font-size:0.95rem;margin-bottom:.6rem}
.reserve-notice.important{background:linear-gradient(90deg, rgba(220,80,80,0.06), rgba(220,80,80,0.04));border-color:rgba(220,80,80,0.12)}

/* toast inside modal */
  .unique-card:hover{transform:translateY(-6px);box-shadow:0 14px 44px rgba(2,6,18,0.18)}

/* Light-mode card treatment: flatter, brighter, subtle border */
body.light-mode .unique-card{background:linear-gradient(180deg,#ffffff,#fbfdff);color:#0b1622;border:1px solid rgba(6,22,36,0.06);box-shadow:0 10px 30px rgba(6,22,36,0.06)}
body.light-mode .unique-card .background-overlay{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.08));mix-blend-mode:screen}
body.light-mode .card-title{color:#071426}
body.light-mode .card-description{color:#475569}
/* Menu panel overlay (centered modal) */
/* Ensure overlay covers full viewport and the panel is centered inside it. */
#menuModal{
  position:fixed;
  inset:0;
  z-index:110;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent; /* no dark backdrop when hidden */
  pointer-events:none;
  transition:background .28s, opacity .28s;
  opacity:1;
}
/* When the modal is open, enable pointer events and show the backdrop */
#menuModal[aria-hidden="false"]{
  pointer-events:auto;
  background:var(--menu-backdrop);
}

/* Item customization modal should stack above the menu modal */
#itemModal{
  z-index:130; /* higher than #menuModal (110) */
}
#itemModal[aria-hidden="false"]{
  /* ensure a visible backdrop that sits above the menu modal */
  background: rgba(2,6,18,0.7);
  pointer-events: auto;
}

#menuModal .menu-panel{
  position:relative;
  transform:translateY(-2%) scale(.98);
  width:min(980px,96vw);
  max-height:90vh;
  /* Popup menu: use a lighter, modern panel so the menu isn't muddy/dark */
  background: linear-gradient(180deg, rgba(250,252,255,0.98), rgba(242,248,255,0.98));
  border:none !important;
  color:#071426;
  backdrop-filter:blur(10px);
  /* Softer, bluish shadow to avoid heavy black contrast */
  box-shadow:0 14px 40px rgba(2,36,90,0.18);
  border-radius:12px;
  overflow:hidden; /* keep panel itself static; scroll inside list only */
  opacity:0;
  transition:transform .36s cubic-bezier(.2,.9,.2,1),opacity .28s;
  pointer-events:none;
}
#menuModal.open .menu-panel{
  /* explicit open state keyed to the modal.open class for smoother transitions */
  transform:translateY(0) scale(1);
  opacity:1;
}
#menuModal[aria-hidden="false"] .menu-panel{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
#menuModal .modal-inner{max-width:100%;padding:1rem 1.25rem;overflow:hidden}
/* Remove inner modal background so only the panel shows a single border/shadow */
#menuModal .modal-inner{background:transparent !important;box-shadow:none !important;border:none !important}
/* Modal layout: two-column (cards + cart) */
/* Ensure children use border-box so widths don't overflow the panel */
#menuModal .menu-panel, #menuModal .menu-panel *{box-sizing:border-box}
#menuModal .menu-panel .modal-inner{display:grid;grid-template-columns: minmax(0,1fr) 260px;gap:0.9rem;align-items:start;padding:1rem 1.25rem}
 #menuModal .menu-panel .menu-item{padding:.6rem;border-bottom:1px solid rgba(255,255,255,0.02)}
 #menuModal .menu-panel .menu-thumb{width:72px;height:56px;object-fit:cover;border-radius:8px;margin-right:.6rem}
 #menuModal .menu-panel .menu-meta{display:flex;gap:.6rem;align-items:center}
 /* place list left and cart summary right regardless of DOM order */
 #menuModal .menu-panel .menu-items-list{max-height:72vh;overflow:auto;padding-right:6px;padding-left:6px;display:grid;grid-template-columns:repeat(2,minmax(200px,1fr));gap:1.25rem;grid-column:1/2;align-content:start}

/* Custom thin scrollbars for modal items (WebKit) */
#menuModal .menu-panel .menu-items-list::-webkit-scrollbar{width:12px;height:12px}
#menuModal .menu-panel .menu-items-list::-webkit-scrollbar-track{background:transparent}
#menuModal .menu-panel .menu-items-list::-webkit-scrollbar-thumb{background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.12));border-radius:999px;border:3px solid transparent;background-clip:padding-box}
#menuModal .menu-panel .menu-items-list:hover::-webkit-scrollbar-thumb{background:linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.18))}

/* Firefox scrollbar styling */
#menuModal .menu-panel .menu-items-list{scrollbar-width:thin;scrollbar-color: rgba(255,255,255,0.12) transparent}

/* Make sure panel itself doesn't show a scrollbar */
#menuModal .menu-panel::-webkit-scrollbar{display:none}

/* Scoped tweaks for modal children to ensure consistent color in both themes */
#menuModal .menu-panel .menu-cart-summary{background:var(--menu-card-bg);border-radius:10px;padding:12px;border:1px solid rgba(127,179,255,0.06);color:var(--menu-fg)}
#menuModal .menu-panel .menu-cart-summary .menu-cart-row{border-bottom:1px solid rgba(255,255,255,0.02);padding:.4rem 0}
#menuModal .menu-panel .menu-cart-summary{position:sticky;top:20px;align-self:start;max-height:calc(90vh - 48px);overflow:auto;padding:16px 20px;display:flex;flex-direction:column}
#menuModal .menu-panel .menu-cart-summary .menu-cart-checkout{margin-top:10px}
#menuModal .menu-panel .menu-cart-summary .checkout-btn{width:100%;box-sizing:border-box}
#menuModal .menu-panel .menu-card{background:var(--menu-card-bg);color:var(--menu-card-fg);border:1px solid rgba(127,179,255,0.06)}
#menuModal .menu-panel .menu-card .title{color:var(--menu-card-fg)}
#menuModal .menu-panel .menu-card .size{color:rgba(255,255,255,0.65)}
#menuModal .menu-panel .menu-card .cart-button{background:var(--menu-btn-bg);color:var(--menu-btn-fg);border:none}

/* Light mode overrides for menu colors */
body.light-mode{
  --menu-surface: #ffffff;
  --menu-fg: #071426;
  --menu-card-bg: linear-gradient(180deg,#ffffff,#fbfdff);
  --menu-card-fg: #071426;
  --menu-btn-bg: linear-gradient(90deg,#0b6fbf,#0a58a0);
  --menu-btn-fg: #ffffff;
  --menu-backdrop: rgba(2,6,18,0.18);
}

/* Ensure cart summary in light mode is readable */
body.light-mode #menuModal .menu-panel .menu-cart-summary{background:#fff;border:1px solid rgba(6,22,36,0.06);color:var(--menu-fg)}

/* High-specificity overrides to ensure modal is opaque and page doesn't scroll when open */
body.modal-open{overflow:hidden !important}
#menuModal[aria-hidden="false"] .menu-panel{background:var(--menu-surface) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
#menuModal .menu-panel{background-clip:padding-box !important}
#menuModal .menu-panel{box-shadow:0 18px 48px rgba(2,36,90,0.18) !important}

/* Ensure the overlay backdrop is solid and not showing underlying content through transparency */
#menuModal[aria-hidden="false"]{background:var(--menu-backdrop) !important}

/* Fallback: if some other rules still produce a scrollbar on the page, hide it while modal open */
html.modal-open, body.modal-open{height:100% !important;overflow:hidden !important}

/* Responsive: 3 columns desktop, 2 columns tablet, 1 column mobile */
@media (max-width:1280px){
  #menuModal .menu-panel .menu-items-list{grid-template-columns:repeat(2,minmax(320px,1fr));}
}
@media (max-width:900px){
  #menuModal .menu-panel .menu-items-list{grid-template-columns:repeat(1,1fr);}
}
@media (max-width:720px){
  #menuModal .menu-panel .menu-items-list{grid-template-columns:repeat(1,1fr);}
  #menuModal .menu-panel{width:calc(100% - 32px)}
}
 /* Right column: cart summary inside modal */
 #menuModal .menu-cart-summary{position:sticky;top:18px;grid-column:2/3}

/* Align card action row: price left, actions (button) right */
.menu-card .meta-row{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.menu-card .action{display:flex;align-items:center;gap:0.6rem;margin-top:8px}

/* Make cart-button compact and readable; don't force full width inside cards */
.menu-card .cart-button{min-width:96px;padding:.45rem .65rem;width:auto;border-radius:.6rem}

/* Vendor header small info inside menu modal */
.vendor-info{display:flex;align-items:center;gap:.6rem;margin-top:8px}
.vendor-thumb{flex:0 0 auto}
.vendor-name-small{font-weight:700;font-size:1.02rem}
.vendor-meta-small-sub{color:var(--muted)}

/* Layout: treat each .menu-column as a horizontal row, with its .section-items flowing as cards */
#menuModal .menu-panel .menu-column{width:100%;padding:6px 0}
#menuModal .menu-panel .menu-column .section-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;align-items:start}
#menuModal .menu-panel .menu-column .section-title{margin:0 0 .6rem;padding-left:6px}

/* Vendor switch modal tweaks (small) */
#vendorSwitchModal .menu-panel{max-width:480px}
#vendorSwitchModal .modal-inner{padding:0.6rem}
#vendorSwitchModal .menu-header::before{display:none}

/* Light-mode overrides for cart button to ensure contrast */
body.light-mode .menu-card .cart-button{background:linear-gradient(90deg,#e6f7ff,#dff3fb);color:#071426;border:2px solid rgba(6,22,36,0.06);box-shadow:none}

/* Menu card (adapted from Uiverse example) */
.menu-card{--card-bg:rgba(255,255,255,0.02);--card-radius:12px;display:flex;flex-direction:column;gap:.6rem;padding:0.8rem;border-radius:var(--card-radius);background:var(--card-bg);border:1px solid rgba(255,255,255,0.03)}
.menu-card .image_container{width:100%;height:96px;border-radius:8px;overflow:hidden;background:linear-gradient(180deg,var(--accent-2),var(--accent));display:flex;align-items:center;justify-content:center}
.menu-card .image_container .image{width:3rem;height:3rem;fill:rgba(255,255,255,0.95)}
.menu-card .title{font-weight:700;color:var(--fg);font-size:0.98rem}
.menu-card .desc{font-size:0.88rem;color:var(--muted);margin-top:2px}
.menu-card .meta-row{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.menu-card .price{font-weight:800;color:var(--fg);font-size:1.05rem}
.menu-card .action{display:flex;gap:0.5rem;align-items:center;margin-top:8px}
.menu-card .cart-button{cursor:pointer;display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;border:none;border-radius:8px;font-weight:600}
.menu-card .cart-button .cart-icon{width:16px;height:16px;opacity:0.95}
.menu-card .cart-button:focus{outline:3px solid rgba(95,176,230,0.14);outline-offset:3px}

/* Uiverse-inspired card controls (scoped to menu-card for safety) */
.menu-card{--bg-card:#27272a;--primary:var(--accent);--primary-800:var(--accent-2);--primary-shadow:rgba(10,60,100,0.22);--light:var(--menu-card-fg);--zinc-800:#18181b;--bg-linear:linear-gradient(90deg,var(--accent),var(--accent-2))}
.menu-card{width:100%;padding:1rem;border-radius:1rem;display:flex;flex-direction:column;gap:.75rem;background:var(--bg-card)}
.menu-card .image_container{overflow:hidden;cursor:pointer;position:relative;z-index:5;width:100%;height:8rem;background:var(--primary-800);border-radius:.5rem;display:flex;align-items:center;justify-content:center}
.menu-card .image_container .image{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:3rem;fill:var(--light)}
.menu-card .title{overflow:clip;width:100%;font-size:1rem;font-weight:600;color:var(--light);text-transform:capitalize}
.menu-card .size{font-size:.75rem;color:var(--light)}
.menu-card .list-size{display:flex;align-items:center;gap:.25rem;margin-top:.25rem}
.menu-card .item-list-button{cursor:pointer;padding:.5rem;background:var(--zinc-800);font-size:.75rem;color:var(--light);border:2px solid var(--zinc-800);border-radius:.25rem;transition:all .3s}
.menu-card .item-list-button:hover{border:2px solid var(--light)}
.menu-card .item-list-button:focus{background:var(--primary);border:2px solid var(--primary-shadow);box-shadow:inset 0 1px 4px var(--primary-shadow)}
.menu-card .action{display:flex;align-items:center;gap:1rem}
.menu-card .price{font-size:1.5rem;font-weight:700;color:var(--light)}
.menu-card .cart-button{cursor:pointer;display:flex;justify-content:center;align-items:center;gap:.25rem;padding:.5rem;width:100%;background-image:var(--bg-linear);font-size:.75rem;font-weight:500;color:var(--light);border:2px solid rgba(95,176,230,0.25);border-radius:.5rem;box-shadow:inset 0 0 .25rem 1px var(--light)}
.menu-card .cart-button .cart-icon{width:1rem}

/* Cart summary inside menu panel */
.menu-cart-summary{display:flex;flex-direction:column;gap:.5rem;padding:.6rem;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03)}
.menu-cart-items{display:flex;flex-direction:column;gap:.4rem;max-height:180px;overflow:auto;padding-right:6px}
.menu-cart-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.menu-cart-row .qty{background:rgba(255,255,255,0.03);padding:.18rem .4rem;border-radius:6px;font-weight:700}
.menu-cart-empty{color:var(--muted);font-size:0.95rem}
.menu-cart-checkout{display:flex;justify-content:space-between;align-items:center;margin-top:.4rem}
.menu-cart-checkout .total{font-weight:800}
.menu-cart-checkout .checkout-btn{background:var(--accent);color:#fff;border:none;padding:.5rem .75rem;border-radius:8px}

/* Light-mode adjustments for menu cards */
body.light-mode .menu-card{background:#fff;color:#071426;border:1px solid rgba(6,22,36,0.06)}
body.light-mode .menu-card .image_container{background:linear-gradient(180deg,#e6f7ff,#dff3fb)}


/* Item editor panel inside menu slide */
.menu-item-editor{position:relative;margin-top:12px;padding:.6rem;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);display:none}
.menu-item-editor[aria-hidden="false"]{display:block}
.menu-item-editor .editor-inner{display:flex;flex-direction:column;gap:.6rem}
.menu-item-editor .editor-options{display:flex;flex-direction:column;gap:.4rem}
.menu-item-editor .editor-options label{display:flex;gap:.5rem;align-items:center}
.menu-item-editor input[type=checkbox]{accent-color:var(--accent)}

/* Preset 3x3 sets (Main / Side / Drink) */
.preset-sets{margin-top:1rem}
.preset-sets .preset-row{display:grid;grid-template-columns:64px 1fr;gap:1rem;align-items:start;margin-bottom:0.75rem}
.preset-sets .preset-label{font-weight:800;text-transform:uppercase;letter-spacing:0.6px;color:var(--muted);padding-top:6px}
.preset-sets .preset-items{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.menu-card.preset .title{font-size:0.95rem}
.menu-card.preset .size{font-size:0.8rem;color:var(--muted)}
.menu-card .image_container{width:100%;height:10rem;border-radius:8px;overflow:hidden;background:linear-gradient(180deg,var(--primary-2, rgba(75,0,130,0.8)),var(--primary));display:flex;align-items:center;justify-content:center}
.menu-card.preset .action{margin-top:0.5rem}
.menu-card.preset .cart-button{min-width:84px;padding:.35rem .55rem}

@media(max-width:1100px){
  .preset-sets .preset-items{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .preset-sets .preset-row{grid-template-columns:1fr;}
  .preset-sets .preset-items{grid-template-columns:1fr}
}

/* Coupons & checkout blocks inside menu panel */
.menu-panel .coupons-card{margin-top:12px}
.menu-panel .coupons-card .input_field{width:100%;padding:.5rem;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--fg)}
.menu-panel .checkout-card{margin-top:12px}
.menu-panel .checkout-card .details{display:grid;grid-template-columns:1fr auto;gap:8px}
.menu-panel .checkout-card .checkout--footer{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.unique-card:hover .thumbnail{transform:scale(1.06)}
.vendor-card:focus{outline:3px solid rgba(95,176,230,0.12);outline-offset:6px;transform:translateY(-3px)}

/* Cart badge (blue variant) */
.cart-badge{
  display:inline-block;
  min-width:20px;
  height:20px;
  line-height:20px;
  padding:0 6px;
  border-radius:999px;
  background:linear-gradient(180deg,#4aa3ff,#0b7be8);
  color:white;
  font-weight:700;
  font-size:.75rem;
  text-align:center;
  box-shadow:0 2px 6px rgba(11,123,216,0.18);
  margin-left:6px;
}

/* Cart modal tweaks (reuses menu-panel styles) */
#cartModal .menu-panel{max-width:540px}
#cartModal{z-index:140}

/* Ensure checkout area layout inside summary */
#menuModal .menu-panel .menu-cart-summary .menu-cart-checkout{display:flex;flex-direction:column;gap:8px;margin-top:auto}
#menuModal .menu-panel .menu-cart-summary .checkout-btn{width:100%;box-sizing:border-box;display:inline-block}

/* Responsive: stack the cart summary under items on narrow screens so it stays inside the panel */
@media (max-width: 900px){
  #menuModal .menu-panel{width:min(96vw,720px)}
  #menuModal .menu-panel .modal-inner{grid-template-columns:1fr;padding:0.8rem}
  #menuModal .menu-panel .menu-items-list{grid-template-columns:repeat(1,minmax(0,1fr));max-height:56vh}
  #menuModal .menu-panel .menu-cart-summary{position:relative;top:auto;max-height:none;margin-top:12px;padding:12px}
  #menuModal .menu-panel .menu-cart-summary .checkout-btn{position:relative}
}

/* Extra small screens: force cart summary to fit and scale typographically */
@media (max-width:480px){
  #menuModal .menu-panel{width:calc(100% - 20px)!important;padding:0}
  #menuModal .menu-panel .modal-inner{padding:0.5rem;grid-template-columns:1fr!important}
  #menuModal .menu-panel .menu-cart-summary{position:relative!important;top:auto!important;grid-column:1/2!important;margin-top:10px!important;padding:10px!important;max-height:none!important;width:100%!important}
  #menuModal .menu-panel .menu-cart-summary .menu-cart-checkout{flex-direction:column;align-items:stretch;gap:8px}
  #menuModal .menu-panel .menu-cart-summary .menu-cart-checkout .total{font-size:0.95rem}
  #menuModal .menu-panel .menu-cart-summary .menu-cart-checkout .total span{display:block}
  #menuModal .menu-panel .menu-cart-summary .checkout-btn{width:100%;padding:.65rem .75rem;font-size:1rem}
  /* Ensure subtotal text wraps and doesn't overflow */
  #cartSubtotal, #cartModalSubtotal, #cartModalTotal, #cartModalTax{white-space:normal;word-break:break-word}
}
#cartModal .menu-header{display:flex;align-items:center;justify-content:space-between;padding:0}
#cartModal .menu-title{margin:0}
#cartModal .menu-cart-items .menu-cart-row{padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.03)}
#cartModal .menu-cart-items .menu-cart-empty{padding:12px}

/* Softer reserve toast override to match new accent */
.reserve-toast{position:absolute;right:16px;top:16px;z-index:60;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;padding:.5rem .75rem;border-radius:10px;box-shadow:0 8px 24px rgba(95,176,230,0.08);transform:translateY(-6px);opacity:0;pointer-events:none}
.reserve-toast.show{animation:toast-in .4s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes toast-in{0%{transform:translateY(-10px);opacity:0}60%{transform:translateY(2px);opacity:1}100%{transform:translateY(0);opacity:1}}
.reserve-toast.hint{background:linear-gradient(90deg,rgba(0,0,0,0.12),rgba(0,0,0,0.06));color:var(--fg);box-shadow:none;border:1px solid rgba(255,255,255,0.04)}
.reserve-toast.warn{background:linear-gradient(90deg, rgba(220,80,80,0.95), rgba(200,60,60,0.95));}

/* Total emphasis */
.reserve-price{display:flex;flex-direction:column;gap:0.35rem;color:var(--muted);text-align:left}
.reserve-price .total-amount{font-size:1.35rem;font-weight:800;color:var(--fg)}

/* Buttons */
.modal-inner .btn-primary{padding:.8rem 1.1rem;border-radius:12px;box-shadow:0 12px 40px rgba(11,123,216,0.14)}
.modal-inner .btn{border-radius:10px}
.btn.secondary{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--fg)}

/* subtle modal entrance animation */
.modal[aria-hidden="false"] .modal-inner{animation:modal-in .36s cubic-bezier(.2,.9,.2,1)}
@keyframes modal-in{0%{transform:translateY(14px) scale(.995);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}

/* pill chips for blocked dates (placeholder area) */
.blocked-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.blocked-chips .chip{background:rgba(220,80,80,0.12);color:#ffd5d5;padding:.28rem .48rem;border-radius:999px;font-size:0.85rem}
.reserve-unit{display:flex;gap:0.6rem;align-items:center}
.reserve-unit input{margin-right:6px}
.reserve-quantity{display:flex;flex-direction:column;align-items:flex-start}
.reserve-slider input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-2));outline:none}
.reserve-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(2,6,18,0.3)}
.reserve-price{display:flex;flex-direction:column;gap:0.3rem;color:var(--muted);text-align:right}
.reserve-price strong{color:var(--fg);font-size:1.05rem}
@media(max-width:720px){.reserve-controls{grid-template-columns:1fr;gap:0.5rem}}

/* Simple calendar for reserve modal */
.reserve-calendar-wrap{display:flex;flex-direction:column;gap:10px;padding:8px}
.reserve-calendar-head{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.reserve-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;max-width:720px;width:100%;justify-self:center}
.reserve-calendar .rc-weekday{font-size:0.95rem;text-align:center;color:var(--muted)}
.reserve-calendar .rc-day{height:52px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:transparent;color:var(--fg);cursor:pointer;border:1px solid transparent}
.reserve-calendar .rc-day.past{opacity:0.45;cursor:not-allowed}
.reserve-calendar .rc-day.closed{background:rgba(255,255,255,0.02);color:var(--muted);cursor:not-allowed}
.reserve-calendar .rc-day.available{background:rgba(11,123,216,0.07);border:1px solid rgba(11,123,216,0.08)}
.reserve-calendar .rc-day.selected{background:var(--accent);color:#fff;box-shadow:0 8px 20px rgba(11,123,216,0.12)}
.reserve-calendar .rc-day.in-range{background:rgba(11,123,216,0.12);color:var(--fg)}
.reserve-calendar .rc-day.in-range-blocked{background:linear-gradient(90deg, rgba(220,80,80,0.12), rgba(220,80,80,0.08));color:#ffd5d5;border:1px solid rgba(220,80,80,0.18)}

/* subtle micro-animations for calendar interactions */
.reserve-calendar .rc-day{transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s,background .18s,opacity .18s}
.reserve-calendar .rc-day:not(.past):not(.closed):hover{transform:translateY(-4px) scale(1.03);box-shadow:0 8px 24px rgba(2,6,18,0.16)}
.reserve-calendar .rc-day.selected{transition:transform .22s ease,box-shadow .22s}
.reserve-calendar .rc-day.in-range{transition:background .22s ease}

/* chips and small pop animation */
.chip{animation:chip-pop .26s cubic-bezier(.2,.9,.2,1)}
@keyframes chip-pop{0%{transform:translateY(6px) scale(.96);opacity:0}60%{transform:translateY(-2px) scale(1.03);opacity:1}100%{transform:translateY(0) scale(1)}}

/* keep animations subtle on reduced motion */
@media (prefers-reduced-motion: reduce){
  .reserve-calendar .rc-day{transition:none}
  .chip{animation:none}
}
.reserve-calendar-controls{display:flex;gap:8px;align-items:center;margin-top:6px}
.reserve-calendar-controls button{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:.35rem .5rem;border-radius:8px;color:var(--fg);cursor:pointer}

/* Calendar transition / picker polish */
.reserve-calendar-wrap{transition:transform .36s cubic-bezier(.2,.9,.2,1),opacity .28s}
.reserve-calendar-enter{opacity:0;transform:translateY(8px)}
.reserve-calendar-enter-active{opacity:1;transform:translateY(0)}
.reserve-calendar-leave{opacity:1;transform:translateY(0)}
.reserve-calendar-leave-active{opacity:0;transform:translateY(-8px)}
.reserve-calendar-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.month-picker{display:flex;gap:8px;align-items:center}
.month-picker select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:var(--surface);border:1px solid rgba(255,255,255,0.06);color:var(--fg);padding:.35rem .5rem;border-radius:8px;padding-right:34px;min-width:120px}
.reserve-calendar-head button{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);padding:.36rem .5rem;border-radius:8px;color:var(--fg);cursor:pointer;min-width:38px}
.reserve-calendar-head button:hover{transform:translateY(-3px);box-shadow:0 8px 26px rgba(2,6,18,0.16)}
.reserve-calendar-head > div{font-weight:700;font-size:1.05rem;background:var(--surface);padding:.28rem .6rem;border-radius:8px;border:1px solid rgba(255,255,255,0.03)}

/* modern select appearance for month/year picker */
.month-picker select{background-image:linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.6) 50%), linear-gradient(135deg, rgba(255,255,255,0.6) 50%, transparent 50%);background-position:calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px);background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.month-picker select::-ms-expand{display:none}
/* normalize inner border for Firefox */
.month-picker select::-moz-focus-inner{border:0}
.month-picker select{padding-right:40px; background-repeat:no-repeat}
.month-picker{position:relative}
.month-picker:after{content:'';position:absolute;right:12px;top:50%;transform:translateY(-50%);width:10px;height:10px;background-image:linear-gradient(135deg,#fff 0 50%, transparent 50%),linear-gradient(45deg,#fff 0 50%, transparent 50%);background-size:6px 6px;background-position:0 0,0 0;opacity:0.85;pointer-events:none}

/* cross-theme caret color */
body.light-mode .month-picker:after{filter:none}
body:not(.light-mode) .month-picker:after{filter:brightness(0.95) invert(1) hue-rotate(180deg) saturate(0.9)}

/* Glassy day cells and smoother shadows */
.reserve-calendar .rc-day{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));box-shadow:0 8px 20px rgba(2,6,18,0.35);backdrop-filter:blur(4px)}
.reserve-calendar .rc-day.closed{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));opacity:0.7}
.reserve-calendar .rc-day.available{background:linear-gradient(180deg, rgba(11,123,216,0.06), rgba(11,123,216,0.04));border:1px solid rgba(11,123,216,0.08)}
.reserve-calendar .rc-day:hover{transform:translateY(-6px) scale(1.04);box-shadow:0 16px 36px rgba(2,6,18,0.5)}
.reserve-calendar .rc-day.selected{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 18px 40px rgba(11,123,216,0.16)}
.reserve-calendar .rc-day.in-range{background:linear-gradient(90deg, rgba(11,123,216,0.1), rgba(11,123,216,0.06));color:var(--fg)}

/* stronger weekday headers */
.reserve-calendar .rc-weekday{font-weight:700;letter-spacing:0.6px;color:var(--muted);}

/* smoother slide transitions (reduce jank) */
.reserve-calendar{will-change:transform,opacity}
.month-picker select option{background:var(--surface);color:var(--fg)}
body.light-mode .month-picker select{background:#ffffff;color:#0b0a0f;border-color:rgba(2,6,18,0.06)}
body.light-mode .month-picker select option{background:#ffffff;color:#0b0a0f}
.reserve-calendar .month-picker select option{padding:6px 10px}
/* In dark theme, many browsers render the native dropdown with a light background — ensure option text is readable */
body:not(.light-mode) .month-picker select option{color:#0b0a0f}
.month-picker select:focus{outline:3px solid rgba(11,123,216,0.12);outline-offset:2px}

/* Slide animations for month transitions */
.reserve-calendar.slide-left{animation:slide-left-in .36s cubic-bezier(.2,.9,.2,1)}
.reserve-calendar.slide-right{animation:slide-right-in .36s cubic-bezier(.2,.9,.2,1)}
@keyframes slide-left-in{0%{transform:translateX(18px);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes slide-right-in{0%{transform:translateX(-18px);opacity:0}100%{transform:translateX(0);opacity:1}}

/* Slightly larger weekday headers and modern spacing */
.reserve-calendar .rc-weekday{font-size:0.95rem;text-align:center;color:var(--muted);padding:.4rem 0}
.month-announce{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Responsive tweaks */
@media(max-width:720px){
  .demo-search{min-width:160px}
  .map-container{height:300px}
}

  /* Add icons to front of cards for quicker scanning */
  .flip-card__front-text{display:flex;align-items:center;gap:.6rem;font-size:1.05rem}
  .flip-card__front-text svg{width:18px;height:18px;flex-shrink:0}
  .flip-card__front-text span{display:inline-block}

  /* Flip Card (Uiverse rotateX adapted, modernized) */
  .flip-card{
    position:relative;
    width:300px;
    height:220px;
    border-radius:var(--radius);
    perspective:1100px;
    overflow:visible;
    -webkit-tap-highlight-color: transparent;
  }
  /* Make flip-card keyboard/touch friendly */
  .flip-card{display:block;cursor:pointer}
  .flip-card[tabindex]{outline:none}
  .flip-card:focus{box-shadow:0 6px 20px rgba(11,123,216,0.12);transform:translateY(-4px)}
  .flip-card > .flip-card__content,
  .flip-card > .flip-card__back {
    position:absolute;inset:0;border-radius:inherit;backface-visibility:hidden;transition:transform .7s cubic-bezier(.2,.9,.2,1),opacity .35s
  }
  .flip-card__content{
    transform:rotateX(0deg);
    display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.25rem;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:0 10px 30px rgba(2,6,18,0.45);border:1px solid rgba(255,255,255,0.04);z-index:2;border-radius:12px;min-height:160px;width:100%;text-align:center
  }
  .flip-card__back{transform:rotateX(180deg);background:var(--surface);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:1rem}
  /* Use direct rotations on front/back children */
  .flip-card:hover .flip-card__content{transform:rotateX(-180deg);opacity:0}
  .flip-card:hover .flip-card__back{transform:rotateX(0deg)}
  /* Support programmatic flip (tap-to-flip) */
  .flip-card.flipped .flip-card__content{transform:rotateX(-180deg);opacity:0}
  .flip-card.flipped .flip-card__back{transform:rotateX(0deg)}

  /* Modern card hover lift */
  .flip-card{transition:transform .28s cubic-bezier(.2,.9,.2,1),box-shadow .28s;will-change:transform}
  .flip-card:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(2,6,18,0.5);z-index:30}

  /* Slightly larger, subtler shadow for modern feel */
  .flip-card{transition:transform .28s ease,box-shadow .28s ease}
  .flip-card .flip-card__content{border-radius:12px}
  .flip-card__front-text{position:relative;z-index:3;margin:0;font-size:20px;color:var(--fg);font-weight:700;transition:transform .5s}

  /* Back content text */
  .flip-card__back .back-content{color:var(--fg);text-align:center}

  /* Back content CTA spacing */
  .flip-card__back .back-content .flip-cta{margin-top:.6rem}

  
  .flip-card__title{font-weight:700;margin:0 0 .25rem}
  .flip-card__description{color:var(--muted);margin:0}

  /* Floating accent circles (soft, animated) */
  .flip-card__back .circle{width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(11,123,216,0.18), rgba(11,123,216,0.08));position:absolute;filter:blur(16px);opacity:.8;animation:floating 3200ms infinite ease-in-out}
  .flip-card__back #bottom{left:40px;top:-20px;width:160px;height:160px;animation-delay:-700ms}
  .flip-card__back #right{left:170px;top:-60px;width:40px;height:40px;animation-delay:-1600ms}

  @keyframes floating{0%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(10px) rotate(12deg)}100%{transform:translateY(0) rotate(0deg)}}

  /* Vendor cards */
  .unique-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;padding:1rem;border:1px solid rgba(255,255,255,0.03);box-shadow:var(--shadow-1);transition:transform .25s,box-shadow .25s}
  .unique-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-2)}

  /* Buttons */
  .btn.small{padding:.45rem .6rem;border-radius:10px}
  .btn:focus{outline:3px solid rgba(11,123,216,0.18);outline-offset:3px}
  /* stronger focus ring for accessibility */
  .btn:focus{outline:3px solid rgba(11,123,216,0.22);outline-offset:4px}
  .site-nav a:focus{outline:2px dashed rgba(255,255,255,0.08);outline-offset:3px}
  .flip-card:focus{outline:3px solid rgba(11,123,216,0.14);outline-offset:6px;border-radius:14px}

  /* Modals */
  .modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,4,10,0.6);z-index:80}
  .modal[aria-hidden="false"]{display:flex}
  .modal-inner{background:linear-gradient(180deg,#07050a,#0b0a0f);padding:1.25rem;border-radius:14px;width:min(720px,94%);box-shadow:var(--shadow-2)}
  /* Make the reserve modal scrollable when content is tall (mobile or many months) */
  #reserveModal .modal-inner{max-height:calc(100vh - 80px);overflow:auto}
    .modal-inner form{display:flex;flex-direction:column;gap:.6rem}
    .modal-inner label{display:flex;flex-direction:column;font-size:.95rem;color:var(--fg)}
    .modal-inner input[type="text"], .modal-inner input[type="email"], .modal-inner input[type="tel"], .modal-inner textarea{padding:.6rem;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--fg)}
    .modal-inner textarea{resize:vertical}
    .modal-inner .btn{align-self:flex-start}

  /* Footer */
  .site-footer{padding:2rem 0;color:var(--muted);font-size:.95rem}

  /* Background animated blobs and scroll reveal utilities */
  .bg-animations{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
  .bg-blob{position:absolute;border-radius:50%;filter:blur(60px);mix-blend-mode:screen;opacity:.7;transform:translate3d(0,0,0);will-change:transform,opacity}
  .bg-blob--a{width:520px;height:520px;left:-8%;top:-12%;background:radial-gradient(circle at 30% 30%, rgba(11,123,216,0.28), rgba(11,123,216,0.08));}
  .bg-blob--b{width:420px;height:420px;right:-6%;top:8%;background:radial-gradient(circle at 60% 40%, rgba(139,92,246,0.22), rgba(139,92,246,0.06));}
  .bg-blob--c{width:360px;height:360px;left:20%;bottom:-10%;background:radial-gradient(circle at 40% 60%, rgba(16,185,129,0.16), rgba(16,185,129,0.04));}

  @media (prefers-reduced-motion: no-preference){
    .bg-blob{animation: blobFloat 12s ease-in-out infinite}
    .bg-blob--b{animation-delay:2s}
    .bg-blob--c{animation-delay:4s}
  }

  @keyframes blobFloat{
    0%{transform:translate3d(0,0,0) scale(1)}
    50%{transform:translate3d(0,-30px,0) scale(1.05)}
    100%{transform:translate3d(0,0,0) scale(1)}
  }

  /* Reveal on scroll helper classes */
  .reveal-on-scroll{opacity:0;transform:translateY(18px) scale(.995);transition:opacity .7s cubic-bezier(.2,.9,.2,1),transform .7s cubic-bezier(.2,.9,.2,1);will-change:opacity,transform}
  .reveal-on-scroll.in-view{opacity:1;transform:translateY(0) scale(1)}

  /* Staggered children reveal */
  .reveal-stagger > *{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  .reveal-stagger.in-view > *{opacity:1;transform:translateY(0)}
  .reveal-stagger.in-view > *:nth-child(1){transition-delay:0.06s}
  .reveal-stagger.in-view > *:nth-child(2){transition-delay:0.12s}
  .reveal-stagger.in-view > *:nth-child(3){transition-delay:0.18s}
  .reveal-stagger.in-view > *:nth-child(4){transition-delay:0.24s}

  /* subtle parallax helper for hero */
  .hero--parallax{position:relative;z-index:2}
  .hero--parallax .hero__title{transform:translateY(var(--hero-ty,0px));transition:transform .1s linear}

  /* ensure main content stacks above decorative background blobs */
  main{position:relative;z-index:2}
  .site-footer{position:relative;z-index:2}

  /* Light mode adjustments */
  body.light-mode{
    --bg:#f7fff7;
    --fg:#071026;
    --muted:#5b6a78;
    --surface:rgba(2,6,12,0.03);
    --shadow-1:0 8px 30px rgba(5,8,18,0.06);
    --shadow-2:0 16px 48px rgba(5,8,18,0.08);
    --header-bg:var(--header-bg-light);
  }

  @media (max-width: 720px){
    .site-nav{display:none}
    .header-inner{padding:.6rem 0}
    .hero{padding:4rem 0}
    .flip-card{width:92%;height:200px}
  }

  /* small utility spacing tweaks */
  .mb-1{margin-bottom:.5rem}
  .mb-2{margin-bottom:1rem}

/* Light mode comprehensive overrides */
body.light-mode{
  --bg: #f7fff7;
  --fg: #0b0b0b;
  --muted: #4b5563;
  --accent: #0b022d;
  --accent-2: #0b022d;
  --surface: rgba(11,11,11,0.04);
  background:#f7fff7;
  color:#0b0b0b}

body.light-mode {
  --header-bg: #0b022d;
}

/* ===== Menu Modal: Full reset override (high specificity) =====
   This block re-establishes a centered popup panel for `#menuModal` and
   its children using !important to avoid interference from earlier rules.
   It intentionally lives at the end of the stylesheet so it wins cascade.
*/
#menuModal{position:fixed!important;inset:0!important;z-index:1200!important;display:flex!important;align-items:center!important;justify-content:center!important;background:transparent!important;pointer-events:none!important;}
#menuModal[aria-hidden="false"]{pointer-events:auto!important;background:rgba(2,6,18,0.55)!important}
#menuModal[aria-hidden="true"]{background:transparent!important}

#menuModal .menu-panel{
  width: min(1100px, 96vw) !important;
  max-width:1100px !important;
  max-height: calc(100vh - 80px) !important;
  /* Use a slightly frosted surface for dark mode and white for light mode */
  background: linear-gradient(180deg, rgba(6,8,12,0.92), rgba(8,10,14,0.86)) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 48px rgba(2,6,18,0.35) !important;
  /* Prevent the panel itself from creating a viewport scrollbar — let inner list scroll */
  overflow: visible !important;
  padding: 8px !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
}

#menuModal[aria-hidden="true"] .menu-panel{opacity:0!important;pointer-events:none!important;transform:translateY(-2%) scale(.98)!important}

/* Ensure other floating modals (cart, item editor, vendor-switch) always stack above the menu modal */
#cartModal, #itemModal, #vendorSwitchModal, .modal.floating-top { z-index: 14000 !important; }
.modal.floating-top{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}

/* Rework menu modal layout: stable two-column panel with independent scroll regions
   and a sticky checkout section so subtotal/checkout remain visible. This block
   intentionally uses high specificity to override previous rules. */
#menuModal .menu-panel .modal-inner{display:grid !important;grid-template-columns:1fr minmax(260px,340px) !important;gap:1rem !important;align-items:start !important;padding:1rem !important}
#menuModal .menu-panel .menu-items-list{max-height:calc(100vh - 200px) !important;overflow:auto !important;padding:8px !important;box-sizing:border-box !important}
#menuModal .menu-panel .menu-cart-summary{display:flex !important;flex-direction:column !important;gap:0.8rem !important;padding:12px !important;border-radius:10px !important;background:var(--menu-card-bg) !important;border:1px solid rgba(255,255,255,0.03) !important;max-height:calc(100vh - 160px) !important;overflow:auto !important}
#menuModal .menu-panel .menu-cart-items{flex:0 1 auto;overflow:auto;max-height:calc(100vh - 320px);padding-right:6px}
#menuModal .menu-panel .menu-cart-summary .menu-cart-checkout{margin-top:auto !important;position:sticky !important;bottom:12px !important;background:transparent !important;padding-top:8px !important}
#menuModal .menu-panel .menu-cart-summary .menu-cart-checkout .checkout-btn{width:100% !important;box-sizing:border-box !important}

@media (max-width:900px){
  /* Stack on small screens: items first, cart summary below, checkout remains visible */
  #menuModal .menu-panel .modal-inner{grid-template-columns:1fr !important;padding:0.8rem !important}
  #menuModal .menu-panel .menu-items-list{max-height:calc(60vh) !important}
  #menuModal .menu-panel .menu-cart-summary{position:relative !important;max-height:none !important;margin-top:12px !important;padding:12px !important}
  #menuModal .menu-panel .menu-cart-summary .menu-cart-checkout{position:relative !important;bottom:auto !important}
}

#menuModal .menu-panel .modal-inner{display:grid!important;grid-template-columns:1fr 320px!important;gap:1rem!important;align-items:start!important;padding:1rem!important;overflow:visible!important}

/* Make the items list the single scrolling region inside the panel */
#menuModal .menu-panel .menu-items-list{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(320px,1fr))!important;
  gap:1rem!important;
  max-height: calc(92vh - 220px) !important;
  overflow:auto !important;
  padding:8px !important;
  box-sizing:border-box !important;
}
#menuModal .menu-panel .menu-cart-summary{grid-column:2/3!important}

/* Ensure only the items-list shows a visible scrollbar and it appears inside the panel */
#menuModal .menu-panel .menu-items-list::-webkit-scrollbar{width:12px}
#menuModal .menu-panel .menu-items-list::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.35);border-radius:8px;border:3px solid rgba(0,0,0,0)}
#menuModal .menu-panel .menu-items-list{scrollbar-width:thin;scrollbar-color: rgba(0,0,0,0.35) transparent}

@media (min-width:1200px){
  #menuModal .menu-panel .menu-items-list{grid-template-columns:repeat(3,minmax(260px,1fr))!important}
}
@media (max-width:900px){
  #menuModal .menu-panel{width:calc(100% - 24px)!important}
  #menuModal .menu-panel .modal-inner{grid-template-columns:1fr!important}
  #menuModal .menu-panel .menu-cart-summary{position:static!important;grid-column:1/2!important}
}

/* Small visual polish to ensure the inner cart stays readable */
#menuModal .menu-cart-summary{padding:0.6rem!important;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01))!important;border:1px solid rgba(255,255,255,0.03)!important;border-radius:10px!important}


body.light-mode .site-header{background:var(--header-bg)}
body.light-mode .site-header .logo{color:#ffffff}
body.light-mode .site-nav a{color:#ffffff}
body.light-mode .dropdown-toggle{color:#ffffff}
/* Make dropdown background fully opaque in light mode for contrast */
body.light-mode .dropdown-menu{background:#ffffff;border:1px solid rgba(11,11,11,0.06);box-shadow:0 8px 24px rgba(2,6,18,0.06)}
/* Ensure dropdown menu links are readable in light mode (override .site-nav a color) */
body.light-mode .dropdown-menu a{color:var(--fg)}
body.light-mode .hamburger span{background:var(--fg)}
body.light-mode .demo-menu{background:rgba(11,11,11,0.03)}
body.light-mode .btn{color:var(--fg);border-color:rgba(11,11,11,0.06)}
body.light-mode .btn-primary{color:#fff}
body.light-mode .site-footer{color:var(--muted)}
body.light-mode .back-content{background-color:#f5f5f5}
body.light-mode .front,.back{background-color:#f5f5f5}
body.light-mode .description{background-color:rgba(11,11,11,0.1)}

/* Utilities & responsiveness */
@media(min-width:640px){
  .site-nav{display:flex;align-items:center}
  .hamburger{display:none}
}

/* Make modal inner solid in light mode and ensure good contrast */
body.light-mode .modal-inner{background:#ffffff;color:var(--fg);box-shadow:0 12px 40px rgba(2,2,8,0.06)}

/* In dark mode some elements used the blue accent as text which becomes invisible on dark backgrounds.
   Replace those text uses with a light-toned accent for readability. */
body:not(.light-mode) .parking-info .price,
body:not(.light-mode) .unique-card:hover .card-content,
body:not(.light-mode) .unique-card .card-description{
  color:#dbe9ff; /* light, desaturated blue for contrast */
}

/* Ensure Request Access button stays blue with white text in both modes */
.btn-cta{background:var(--accent);color:#ffffff;border:none}
body.light-mode .btn-cta{background:var(--accent);color:#ffffff;border:none}

/* Make the opened menu/modal less transparent and one stable color when visible */
.modal{background:rgba(0,0,0,0.6)}
.modal[aria-hidden="false"] .modal-inner{background:rgba(11,2,45,0.98)}
body.light-mode .modal[aria-hidden="false"] .modal-inner{background:#ffffff}

@media(min-width:760px){
  .demo-stage{flex-direction:row}
  .b2b-grid{grid-template-columns:repeat(3,1fr)}
  .features-grid{grid-template-columns:repeat(4,1fr)}
}

@media(min-width:900px){
  .hero{min-height:80vh}
}

/* Mobile menu (active) */
.site-nav.open{position:fixed;inset:64px 16px auto 16px;background:rgba(0,0,0,0.9);padding:1rem;border-radius:10px;display:flex;flex-direction:column}

/* Small tweaks */
.placeholder-section{padding:2.5rem 0}

/* Smooth anchor scroll fallback spacing for fixed header */
:target{scroll-margin-top:84px}

/* Dark/Light switch (Uiverse.io adapted) */
/* From Uiverse.io by Galahhad - namespaced to avoid collision with existing .circle */
.ui-switch {
  --switch-bg: rgb(135, 150, 165);
  --switch-width: 48px;
  --switch-height: 20px;
  --circle-diameter: 32px;
  --circle-bg: rgb(0, 56, 146);
  --circle-inset: calc((var(--circle-diameter) - var(--switch-height)) / 2);
  display:inline-block;
}

.ui-switch input { display:none }

.ui-switch .slider {
  appearance:none; width:var(--switch-width); height:var(--switch-height); background:var(--switch-bg); border-radius:999px; position:relative; cursor:pointer; display:inline-block; vertical-align:middle;
}

.ui-switch .switch-circle {
  top: calc(var(--circle-inset) * -1);
  left: 0; width:var(--circle-diameter); height:var(--circle-diameter); position:absolute; border-radius:inherit; background-repeat:no-repeat; background-position:center center;
  transition: left 150ms cubic-bezier(0.4,0,0.2,1), transform 150ms cubic-bezier(0.4,0,0.2,1);
  display:flex; align-items:center; justify-content:center; box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
  /* default: no icon; color handled per theme */
  background-image: none;
}

.ui-switch .switch-circle::before { content:""; position:absolute; width:100%; height:100%; background: rgba(255,255,255,0.75); border-radius:inherit; transition: all 500ms; opacity:0 }

.ui-switch input:checked + .slider .switch-circle { left: calc(100% - var(--circle-diameter)); background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E"); }

.ui-switch input:active + .slider .switch-circle::before { transition:0s; opacity:1; width:0; height:0 }

/* Adjust switch colors for theme */
body.light-mode .ui-switch .slider { background: rgba(11,11,11,0.06) }
body.light-mode .ui-switch .switch-circle { background: var(--accent) }
body:not(.light-mode) .ui-switch .slider { background: rgba(255,255,255,0.06) }
/* In dark mode make the small switch circle white for visibility */
body:not(.light-mode) .ui-switch .switch-circle { background: #ffffff }

/* externalCart removed — cart is integrated into menu modal now */

/* Strong, scoped Uiverse-style card rules to ensure menu cards use the modern layout */
#menuModal .menu-items-list .menu-card{
  --bg-card:#27272a;
  --primary:var(--accent);
  --primary-800:var(--accent-2);
  --primary-shadow:rgba(10,60,100,0.22);
  --light:var(--menu-card-fg);
  --zinc-800:#18181b;
  --bg-linear:linear-gradient(90deg,var(--accent),var(--accent-2));

  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem !important;
  width: 100% !important;
  background-color: var(--bg-card) !important;
  border-radius: 1rem !important;
  border: 1px solid rgba(255,255,255,0.02) !important;
}

#menuModal .menu-items-list .menu-card .image_container{
  overflow: hidden;
  cursor: pointer;
  position: relative;
  z-index: 5;
  width: 100%;
  height: 8rem;
  background-color: var(--primary-800);
  border-radius: 0.5rem;
  display:flex;align-items:center;justify-content:center;
}

#menuModal .menu-items-list .menu-card .image{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:3rem;fill:var(--light)}

#menuModal .menu-items-list .menu-card .title{overflow:clip;width:100%;font-size:1rem;font-weight:600;color:var(--light);text-transform:capitalize}

#menuModal .menu-items-list .menu-card .size{font-size:.85rem;color:var(--light);opacity:0.9}

#menuModal .menu-items-list .menu-card .list-size{display:flex;align-items:center;gap:.25rem;margin-top:.25rem}

#menuModal .menu-items-list .menu-card .item-list-button{cursor:pointer;padding:.5rem;background-color:var(--zinc-800);font-size:.75rem;color:var(--light);border:2px solid var(--zinc-800);border-radius:.25rem;transition:all .3s}
#menuModal .menu-items-list .menu-card .item-list-button:hover{border:2px solid var(--light)}
#menuModal .menu-items-list .menu-card .item-list-button:focus{background-color:var(--primary);border:2px solid var(--primary-shadow);box-shadow:inset 0 1px 4px var(--primary-shadow)}

#menuModal .menu-items-list .menu-card .action{display:flex;align-items:center;gap:1rem}

#menuModal .menu-items-list .menu-card .price{font-size:1.25rem;font-weight:800;color:var(--light)}

#menuModal .menu-items-list .menu-card .cart-button{
  cursor:pointer;display:flex;justify-content:center;align-items:center;gap:.25rem;padding:.5rem .6rem;background-image:var(--bg-linear);font-size:.9rem;font-weight:600;color:var(--light);border:2px solid rgba(95,176,230,0.25);border-radius:.6rem;box-shadow:inset 0 0 .25rem 1px var(--light);min-width:100px}

/* Light mode override so button and text remain readable */
body.light-mode #menuModal .menu-items-list .menu-card{background:#fff;color:#071426;border:1px solid rgba(6,22,36,0.06)}
body.light-mode #menuModal .menu-items-list .menu-card .cart-button{background:linear-gradient(90deg,#e6f7ff,#dff3fb);color:#071426;border:2px solid rgba(6,22,36,0.06);box-shadow:none}

/* ===== Strong namespaced reset for the menu modal (APPENDED) ===== */
/* This block is intentionally appended to the stylesheet and uses !important
   and explicit layout rules to overcome any remaining cascade conflicts. */
#menuModal {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(12,15,20,0.55) !important;
  z-index: 99999 !important;
  /* Default: don't intercept pointer events when the modal is hidden */
  pointer-events: none !important;
}

/* Make the inner panel use the available modal area and scroll internally */
#menuModal .menu-panel,
#menuModal .modal-inner {
  width: min(1100px, 94vw) !important;
  max-width: 1100px !important;
  max-height: 92vh !important;
  overflow: auto !important;
  border-radius: 12px !important;
  margin: 0 !important;
  padding: 18px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55) !important;
  background: var(--menu-modal-bg, var(--surface)) !important;
}

/* Force grid inside the modal to fill panel space */
#menuModal .menu-items-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
  align-items: start !important;
  margin: 0 !important;
  padding: 12px 0 28px 0 !important;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  #menuModal .menu-panel,
  #menuModal .modal-inner {
    width: min(820px, 96vw) !important;
    max-height: 90vh !important;
  }
  #menuModal .menu-items-list { grid-template-columns: repeat(2, 1fr) !important; max-height: calc(86vh - 200px) !important; }
}

/* Modernization: polish card visuals, spacing, animation and focus states */
#menuModal .menu-panel{
  transition: transform .32s cubic-bezier(.2,.9,.2,1), opacity .28s ease, background .28s ease;
}

#menuModal .menu-header{padding-bottom:0;margin-bottom:8px}
#menuModal .menu-header .menu-title{font-size:1.15rem;font-weight:700}

#menuModal .menu-items-list .menu-card{
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s ease, border-color .2s ease;
  will-change: transform;
}
#menuModal .menu-items-list .menu-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,0.45)}
#menuModal .menu-items-list .menu-card:focus-within{transform:translateY(-6px);box-shadow:0 16px 36px rgba(0,0,0,0.42);border-color:rgba(255,255,255,0.06)}

/* Larger media area and cleaner image presentation */
#menuModal .menu-items-list .menu-card .image_container{height:10.5rem;border-radius:.75rem}
#menuModal .menu-items-list .menu-card .image{width:4rem;height:4rem}

/* Tighten card typography and spacing */
#menuModal .menu-items-list .menu-card .title{font-size:1.05rem}
#menuModal .menu-items-list .menu-card .size{font-size:0.9rem;opacity:0.85}

/* Cart summary: elevated glass card with sticky behavior */
#menuModal .menu-cart-summary{position:sticky;top:20px;padding:1rem;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));backdrop-filter: blur(6px);border-radius:12px;border:1px solid rgba(255,255,255,0.03)}

/* Subtle entrance for modal panel */
#menuModal[aria-hidden="false"] .menu-panel{opacity:1;transform:translateY(0) scale(1)}
#menuModal[aria-hidden="true"] .menu-panel{opacity:0;transform:translateY(-6%) scale(.995)}

/* Focus ring for keyboard users */
#menuModal .menu-card:focus-within, #menuModal .menu-cart-summary:focus-within {outline:3px solid rgba(127,179,255,0.08);outline-offset:4px}

/* Modal debug outlines removed during reset. */

/* Make scrollbars less obtrusive: fade until hover */
#menuModal .menu-panel .menu-items-list::-webkit-scrollbar{width:10px}
#menuModal .menu-panel .menu-items-list::-webkit-scrollbar-thumb{background:transparent;border-radius:8px;border:3px solid transparent}
#menuModal .menu-panel .menu-items-list:hover::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.28)}
#menuModal .menu-panel .menu-items-list{scrollbar-color: transparent transparent}

/* Light mode tweaks to keep look modern */
body.light-mode #menuModal .menu-panel{box-shadow:0 14px 44px rgba(6,22,36,0.06)}
body.light-mode #menuModal .menu-items-list .menu-card{background:#ffffff;border:1px solid rgba(6,22,36,0.04);color:var(--fg)}

/* Make sure menu title and close button visually balanced */
#closeMenuModal{justify-self:start}

/* Slightly increase tappable area for card actions on mobile */
@media(max-width:720px){
  #menuModal .menu-items-list .menu-card .cart-button{padding:.65rem 1rem;width:auto}
}

/* Light-mode specific adjustments for readability */
body.light-mode #menuModal .menu-panel{ background: #fff !important; color: var(--fg) !important; border:1px solid rgba(6,22,36,0.06) !important }
body.light-mode #menuModal .menu-panel .menu-items-list::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.12) }
@media (max-width: 540px) {
  #menuModal .menu-panel,
  #menuModal .modal-inner {
    width: calc(100vw - 32px) !important;
    max-height: 96vh !important;
    padding: 12px !important;
  }
  #menuModal .menu-items-list { grid-template-columns: 1fr !important; gap: 12px !important; }
}

/* Defensive body-lock class — JS should toggle this when modal opens */
body.modal-open {
  overflow: hidden !important;
  height: 100% !important;
}

/* Ensure cart column stacks beneath items on small screens */
@media (max-width: 900px) {
  #menuModal .menu-panel .modal-inner { grid-template-columns: 1fr !important; }
  #menuModal .menu-panel .menu-cart-summary { grid-column: 1/2 !important; position: static !important; }
}

/* End appended modal reset */

/* Small UI helpers for new menu modal */
.menu-card.just-added{transform:translateY(-6px) scale(1.02);box-shadow:0 18px 40px rgba(0,0,0,0.48);outline:0;transition:transform .28s,box-shadow .28s}
.menu-cart-row.item-changed{background:linear-gradient(90deg, rgba(95,176,230,0.06), rgba(95,176,230,0.02));transform:translateY(-2px);transition:all .28s}
.menu-loading{padding:1rem;color:var(--muted)}
.menu-empty{padding:1rem;color:var(--muted)}