Fix dark theme inconsistencies and unrelated layout bugs

css/style.css

@@ -1134,6 +1134,29 @@
       box-shadow: none;
     }
 
+    /* ===== Smart Combo Preview Section ===== */
+    section.combo-preview {
+      padding: 5rem 1rem;
+      background: #fff3e0;
+      text-align: center;
+    }
+    .combo-preview .container {
+      max-width: 700px;
+      margin: 0 auto;
+    }
+    .combo-preview-text {
+      font-size: 1.1rem;
+      line-height: 1.5;
+      color: #5d4037;
+      margin-bottom: 2rem;
+    }
+    .combo-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      text-decoration: none;
+    }
+
     /* ===== About Section ===== */
     section.about {
       padding: 5rem 1rem 7rem;
@@ -2808,10 +2831,14 @@ body.dark .card p.description {
 body.dark section.menu,
 body.dark section.specials,
 body.dark section.about,
+body.dark section.combo-preview,
 body.dark section.testimonials {
   background: #252525;
   color: #eee;
 }
+body.dark .combo-preview-text {
+  color: #ccc;
+}
 body.dark .filter-btn {
   background: transparent;
   border: 2px solid #ff5722;

index.html

@@ -96,14 +96,6 @@ <h2 id="festival-name">Festival Highlights</h2>
 
 <!-- Hero Section -->
 <section id="hero" class="hero" role="region" aria-label="Hero Section">
-<!-- ================= HERO SECTION ================= -->
-
-<section
-  id="hero"
-  class="hero"
-  role="region"
-  aria-label="Hero Section"
->
 
   <div class="hero-video-stage" aria-hidden="true">
     <video
@@ -222,23 +214,7 @@ <h2 class="section-title">Explore by State</h2>
   <h2 class="section-title">Recently Viewed</h2>
   <div class="cards" id="recently-viewed-cards">
     <!-- Recently viewed cards will be injected here -->
-<!-- ================= RECENTLY VIEWED ================= -->
-
-<section
-  id="recently-viewed"
-  class="recently-viewed"
-  role="region"
-  aria-label="Recently Viewed Items"
-  style="display:none;"
->
-<!-- Recently Viewed Section -->
-
-<section id="recently-viewed" class="recently-viewed" role="region" aria-label="Recently Viewed Items" style="display: none;">
-  <h2 class="section-title">Recently Viewed</h2>
-  <div class="cards" id="recently-viewed-cards">
-
-    <!-- Recently viewed cards will be injected here -->
-
+  </div>
 </section>
 
 <!-- Menu Section -->
@@ -397,10 +373,6 @@ <h4>
             <p>
               Founder & Head Chef
             </p>
-
-            <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Priya Sharma - Founder & Head Chef" />
-            <h4>Priya Sharma</h4>
-            <p>Founder & Head Chef - Crafting every dish with love and authenticity.</p>
           </div>
 
           <div class="team-member-back">
@@ -433,10 +405,6 @@ <h4>
             <p>
               Customer Support
             </p>
-
-            <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Anjali Verma - Customer Support" />
-            <h4>Anjali Verma</h4>
-            <p>Customer Support - Always here to assist you with your orders.</p>
           </div>
 
           <div class="team-member-back">
@@ -611,6 +579,7 @@ <h3>Contact Us</h3>
   </div>
   <div class="footer-bottom">
     <p>&copy; 2026 ChaatBazar. All rights reserved.</p>
+  </div>
 
 </footer>
 

orders.html

@@ -411,14 +411,6 @@ <h4 class="checkout-section-title" style="margin-top: 1.25rem;">Have a promo cod
   <script src="js/auth.js"></script>
   <script src="js/live-tracking.js"></script>
   <script src="js/delivery-tracker.js"></script>
-  <script src="js/geolocation.js"></script>
-  <script src="js/sanitization.js"></script>
-  <script src="js/loyalty.js"></script>
-  <script src="js/translations.js"></script>
-  <script src="js/i18n.js"></script>
-  <script src="js/live-tracking.js"></script>
-  <script src="js/main.js"></script>
-  <script src="js/auth.js"></script>
 
   <script>
     const params = new URLSearchParams(window.location.search);

recommendations.html

@@ -216,6 +216,52 @@
       color: #ffb347;
     }
 
+    /* ================= DARK MODE ================= */
+
+    body.dark{
+      background: #1e1e1e;
+    }
+
+    body.dark .combo-hero{
+      background: linear-gradient(
+        120deg,
+        #3b1f17,
+        #2c150d
+      );
+    }
+
+    body.dark .combo-hero h1,
+    body.dark .section-title,
+    body.dark .combo-card h3{
+      color: #ff5722;
+    }
+
+    body.dark .combo-hero p{
+      color: #fff3e0;
+    }
+
+    body.dark .combo-card{
+      background: #2a2a2a;
+      box-shadow: 0 8px 25px rgba(0,0,0,0.4);
+    }
+
+    body.dark .combo-card:hover{
+      box-shadow: 0 12px 30px rgba(0,0,0,0.55);
+    }
+
+    body.dark .combo-card p{
+      color: #ccc;
+    }
+
+    body.dark .pairing-item{
+      background: #333;
+      color: #f5f5f5;
+    }
+
+    body.dark .pairing-item span{
+      color: #ffab91;
+    }
+
     /* ================= RESPONSIVE ================= */
 
     @media(max-width: 768px){
@@ -266,6 +312,18 @@
         Cart
       </a>
 
+      <button id="theme-toggle" class="theme-toggle" aria-label="Toggle Theme">
+        <span class="theme-toggle-track">
+          <span class="theme-toggle-icon sun-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+          </span>
+          <span class="theme-toggle-icon moon-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+          </span>
+          <span class="theme-toggle-thumb"></span>
+        </span>
+      </button>
+
     </nav>
 
   </div>
@@ -337,6 +395,24 @@ <h2 class="section-title">
 
 <script src="js/cart-manager.js"></script>
 
+<script>
+  // Dark Mode (kept in sync with js/main.js)
+  const themeToggleBtn = document.getElementById("theme-toggle");
+
+  document.addEventListener("DOMContentLoaded", () => {
+    if (localStorage.getItem("theme") === "dark") {
+      document.body.classList.add("dark");
+    }
+  });
+
+  if (themeToggleBtn) {
+    themeToggleBtn.addEventListener("click", () => {
+      document.body.classList.toggle("dark");
+      localStorage.setItem("theme", document.body.classList.contains("dark") ? "dark" : "light");
+    });
+  }
+</script>
+
 <script>
 
   const foodPairings = {
@@ -482,7 +558,13 @@ <h3>${food}</h3>
     }
   }
 
-  // wait for DOM + cart system
-  window.addEventListener("load", renderComboCards);
+  // Render as soon as the DOM is ready — don't wait on external
+  // resources (fonts/icons) via the "load" event, since a slow or
+  // blocked CDN request would otherwise delay rendering indefinitely.
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", renderComboCards);
+  } else {
+    renderComboCards();
+  }
 
 </script>

state.html

@@ -13,6 +13,17 @@
       <nav role="navigation" aria-label="Primary Navigation">
         <a href="index.html" class="nav-link">Home</a>
         <a href="menu.html" class="nav-link">Menu</a>
+        <button id="theme-toggle" class="theme-toggle" aria-label="Toggle Theme">
+          <span class="theme-toggle-track">
+            <span class="theme-toggle-icon sun-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+            </span>
+            <span class="theme-toggle-icon moon-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+            </span>
+            <span class="theme-toggle-thumb"></span>
+          </span>
+        </button>
       </nav>
     </div>
   </header>
@@ -27,6 +38,24 @@ <h1 id="state-title">State Delicacies</h1>
     <section class="cards" id="state-items" aria-live="polite"></section>
   </main>
 
+  <script>
+    //Dark Mode(kept in sync with js/main.js)
+    const themeToggleBtn = document.getElementById("theme-toggle");
+
+    document.addEventListener("DOMContentLoaded", () => {
+      if (localStorage.getItem("theme") === "dark") {
+        document.body.classList.add("dark");
+      }
+    });
+
+    if (themeToggleBtn) {
+      themeToggleBtn.addEventListener("click", () => {
+        document.body.classList.toggle("dark");
+        localStorage.setItem("theme", document.body.classList.contains("dark") ? "dark" : "light");
+      });
+    }
+  </script>
+
   <script>
     const params = new URLSearchParams(window.location.search);
     const stateName = params.get('state') || 'Gujarat';