:root {
      --primary: #FF6B35;
      --primary-dark: #E55A2B;
      --primary-light: #FF8C61;
      --secondary: #004E89;
      --accent: #FFD23F;
      --dark: #1A1A2E;
      --light: #F8F9FA;
      --success: #06D6A0;
      --shadow: rgba(0, 0, 0, 0.08);
      --shadow-hover: rgba(0, 0, 0, 0.15);
      --topbar-height: 64px; /* default, updated via JS */
    }

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

    body {
      font-family: 'Poppins', sans-serif;
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      min-height: 100vh; overflow-x: hidden;
    }

    /* Smooth scroll behavior */
    html { scroll-behavior: smooth; }

    /* Global scrollbar styling */
    html, body { scrollbar-width: thin; scrollbar-color: var(--primary) transparent; }
    /* WebKit-based browsers */
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); border-radius: 8px; }
    ::-webkit-scrollbar-thumb { background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 8px; border: 2px solid rgba(255,255,255,0.6); }
    ::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); }

    /* Top Bar */
    #top-bar { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); box-shadow: 0 2px 20px var(--shadow); position: sticky; top:0; z-index:1000; transition: all .3s ease; }
    #top-bar .navbar-brand { font-weight: 800; font-size: 1.2rem; letter-spacing:-.25px; color: var(--dark); }
    #top-bar .navbar-brand .brand-logo { height: 28px; width:auto; border-radius: 6px; box-shadow: 0 2px 8px var(--shadow); }
    #top-bar .nav-link { color:var(--dark); font-weight:500; transition:all .3s ease; position:relative; }
    #top-bar .nav-link:hover { color:var(--primary); transform: translateY(-2px); }

    /* Hero */
    #hero { margin-top:0; border-radius:0 0 2rem 2rem; overflow:hidden; box-shadow: 0 10px 40px var(--shadow); }
    #hero .carousel-item { height:500px; position:relative; }
    #hero .carousel-item::after{ content:''; position:absolute; inset:0; background: linear-gradient(135deg, rgba(0,78,137,.7) 0%, rgba(255,107,53,.6) 100%); }
    #hero .carousel-item img { object-fit:cover; height:100%; width:100%; }
    #hero .carousel-caption { background: rgba(255,255,255,0.15); backdrop-filter: blur(15px); padding:2rem 2.5rem; border-radius:1.5rem; border:2px solid rgba(255,255,255,0.3); box-shadow: 0 8px 32px rgba(0,0,0,.2); z-index:10; animation: slideUp .8s ease-out; }
    @keyframes slideUp { from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }
    #hero .carousel-caption h1 { font-size:2.5rem; font-weight:800; text-shadow:2px 2px 8px rgba(0,0,0,.3); margin-bottom:1rem; }
    #hero .carousel-caption p { font-size:1.2rem; font-weight:500; text-shadow:1px 1px 4px rgba(0,0,0,.3); }

    /* Search */
    #search-section { position:relative; z-index:10; background:transparent; padding:2rem 1rem; margin-top:-4rem; }
    #search-section .search-bar { max-width:700px; margin:auto; display:flex; gap:1rem; background:#fff; padding:.5rem; border-radius:2rem; box-shadow:0 10px 40px var(--shadow-hover); transition: transform .3s ease, box-shadow .3s ease; }
    #search-section .search-bar:hover { transform: translateY(-4px); box-shadow:0 15px 50px var(--shadow-hover); }
    #search-section .form-control { flex:1; border:none; padding:1rem 1.5rem; font-size:1rem; border-radius:1.5rem; }
    #search-section .form-control:focus { outline:none; box-shadow:none; }
    .btn-find { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; border:none; padding:1rem 2rem; border-radius:1.5rem; font-weight:600; transition: all .3s ease; box-shadow:0 4px 15px rgba(255,107,53,.3); }
    .btn-find:hover { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); transform: translateY(-2px); box-shadow:0 6px 20px rgba(255,107,53,.4); color:#fff; }

    #quick-filters { text-align:center; margin-top:1.5rem; animation: fadeIn 1s ease-out .3s both; }
    @keyframes fadeIn { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
    #quick-filters .filter-tag { display:inline-block; margin:.5rem; padding:.75rem 1.5rem; background:#fff; color:var(--dark); border-radius:2rem; font-size:.95rem; font-weight:600; cursor:pointer; transition:all .3s ease; box-shadow:0 4px 15px var(--shadow); border:2px solid transparent; }
    #quick-filters .filter-tag:hover { background:var(--accent); transform: translateY(-3px) scale(1.05); box-shadow:0 8px 25px var(--shadow-hover); border-color:var(--primary); }

    /* Categories */
    #categories { background:transparent; padding:2rem 0; margin-top:1rem; }
    #categories .cat-list { 
      position: sticky; 
      top: var(--topbar-height);
      z-index: 950;
      overflow-x:auto; white-space:nowrap; padding:1rem; display:flex; gap:1.5rem; scrollbar-width:thin; scrollbar-color: var(--primary) transparent; 
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    #categories .cat-list::-webkit-scrollbar{ height:8px; }
    #categories .cat-list::-webkit-scrollbar-thumb{ background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius:10px; }
    #categories .cat-item { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:120px; padding:1.5rem 1rem; background:#fff; border-radius:1.5rem; box-shadow:0 4px 15px var(--shadow); transition:all .3s ease; cursor:pointer; border:2px solid transparent; }
    #categories .cat-item:hover { transform: translateY(-8px) scale(1.05); box-shadow:0 10px 30px var(--shadow-hover); border-color:var(--primary); background: linear-gradient(135deg, #fff 0%, #fff5f2 100%); }
    #categories .cat-item .icon{ font-size:3rem; display:block; margin-bottom:.5rem; transition: transform .3s ease; }
    #categories .cat-item:hover .icon{ transform: scale(1.2) rotate(10deg); }

    /* Menu Grid */
    #menu-container { padding:2rem 1rem; max-width:1400px; margin:0 auto; }
    #menu-container h5 { font-weight:700; font-size:1.8rem; color:var(--dark); margin-bottom:1.5rem; position:relative; padding-left:1rem; }
    #menu-container h5::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:5px; height:30px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius:10px; }
    /* Smooth anchor positioning below sticky header */
    #menu-container h5 { scroll-margin-top: calc(var(--topbar-height) + 12px); }

    #menu .card { border:none; border-radius:1.5rem; overflow:hidden; box-shadow:0 4px 20px var(--shadow); transition: all .4s cubic-bezier(.175,.885,.32,1.275); background:#fff; height:100%; }
    #menu .card:hover { transform: translateY(-10px); box-shadow:0 15px 40px var(--shadow-hover); }
    #menu .card .card-img-wrapper { position:relative; aspect-ratio:4/3; overflow:hidden; }
    #menu .card .card-img-wrapper::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.3) 100%); opacity:0; transition:opacity .3s ease; }
    #menu .card:hover .card-img-wrapper::after { opacity:1; }
    #menu .card .card-img-wrapper img { width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
    #menu .card:hover .card-img-wrapper img { transform: scale(1.1); }
    #menu .card-body{ padding:1.5rem; }
    #menu .card-title{ font-size:1.2rem; font-weight:700; color:var(--dark); margin-bottom:.75rem; }
    #menu .card-text small{ color:#666; font-weight:500; }
    #menu .card-text .text-danger{ font-size:1.4rem; font-weight:800; color:var(--primary); }

    .badge{ padding:.5rem 1rem; border-radius:2rem; font-weight:600; font-size:.75rem; }
    .btn-add{ background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; border:none; padding:.75rem 1.5rem; border-radius:1rem; font-weight:600; transition: all .3s ease; box-shadow:0 4px 15px rgba(255,107,53,.3); }
    .btn-add:hover{ background: linear-gradient(135deg, var(--primary-dark), var(--primary)); transform: translateY(-2px); box-shadow:0 6px 20px rgba(255,107,53,.5); color:#fff; }

    /* Modal */
    .modal-content{ border-radius:1.5rem; border:none; box-shadow:0 20px 60px rgba(0,0,0,.3); }
    .modal-header{ background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; border-radius:1.5rem 1.5rem 0 0; padding:1.5rem; }
    .modal-title{ font-weight:700; }
    .modal-body{ padding:2rem; }
    .form-check-label{ font-weight:500; color:var(--dark); }
    .form-check-input:checked{ background-color:var(--primary); border-color:var(--primary); }

    /* Cart Offcanvas */
    .offcanvas { width:400px; border-radius:2rem 0 0 2rem; box-shadow:-10px 0 40px var(--shadow-hover); }
    .offcanvas-header{ background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; padding:1.5rem; }
    .offcanvas-title{ font-weight:700; font-size:1.3rem; }
    .navbar .brand-logo { height: 28px; width:auto; }
    .cart-item{ display:flex; align-items:center; margin-bottom:1rem; padding:1rem; background:var(--light); border-radius:1rem; transition: all .3s ease; }
    .cart-item:hover{ transform: translateX(-5px); box-shadow:0 4px 15px var(--shadow); }
    .cart-item img{ width:60px; height:60px; object-fit:cover; margin-right:1rem; border-radius:.75rem; }
    .cart-item .item-info .name{ font-weight:600; color:var(--dark); }
    .cart-item .qty input{ width:50px; text-align:center; margin:0 .5rem; border-radius:.5rem; border:2px solid var(--light); }
    #cart-totals{ background:var(--light); padding:1.5rem; border-radius:1rem; margin-top:1rem; }

    /* Bottom nav */
    #bottom-nav { display:none; }

    @media (max-width: 767.98px){
      #hero .carousel-item{ height:350px; }
      #hero .carousel-caption h1{ font-size:1.5rem; }
      #hero .carousel-caption p{ font-size:.95rem; }
      #search-section{ margin-top:-3rem; padding:1rem; }
      #search-section .search-bar{ flex-direction:column; }
      .offcanvas{ width:90%; }
      #bottom-nav{ display:flex; justify-content:space-around; align-items:center; position:fixed; bottom:0; left:0; right:0; background:#fff; box-shadow:0 -4px 20px var(--shadow); padding:.75rem 0; z-index:1000; border-radius:2rem 2rem 0 0; }
      #bottom-nav a{ position:relative; text-decoration:none; color:#666; font-size:.75rem; text-align:center; transition:all .3s ease; padding:.5rem 1rem; }
      #bottom-nav a:hover, #bottom-nav a:active{ color:var(--primary); transform: translateY(-3px); }
      #bottom-nav a .bi{ display:block; font-size:1.4rem; margin-bottom:.25rem; }
      /* Allow Bootstrap's collapse to work on mobile */
      /* Removed rule that forcibly hides navbar-collapse */
      body{ padding-bottom:80px; }
    }

    @keyframes pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.05);} }
    .position-absolute.badge{ animation: pulse 2s infinite; }

    /* Floating Scroll-To-Top Button */
    .scroll-top-btn{
      position: fixed;
      right: 16px;
      bottom: 24px;
      width: 48px;
      height: 48px;
      border: none;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      color: #fff;
      box-shadow: 0 8px 24px var(--shadow-hover);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transition: opacity .3s ease, transform .3s ease, visibility .3s;
      z-index: 1100;
    }
    .scroll-top-btn i{ font-size: 1.5rem; line-height: 1; }
    .scroll-top-btn:hover{ transform: translateY(-2px); }
    .scroll-top-btn.show{ opacity: 1; visibility: visible; }

    @media (max-width: 767.98px){
      .scroll-top-btn{ bottom: 96px; } /* keep above bottom nav */
    }

    /* Bottom nav cart badge positioning */
    #bottom-nav #cart-badge-bottom{
      position:absolute;
      top:0;
      right:18px;
      transform: translate(50%, -50%);
      display:none;
    }