Update templates/menu.html

templates/menu.html

@@ -23,9 +23,11 @@
             display: flex;
             flex-direction: column;
             padding-bottom: 70px;
+            overflow-x: hidden;
         }
         .container {
             max-width: 900px;
+            padding: 0 15px;
         }
         .menu-card {
             max-width: 350px;
@@ -49,19 +51,22 @@
             border-radius: 15px 15px 0 0;
             opacity: 0;
             transition: opacity 0.5s ease-in-out;
-            background-color: #000; /* Fallback color if video fails */
+            background-color: #000;
         }
         .menu-video.loaded {
             opacity: 1;
         }
         .menu-card:hover .menu-video {
             opacity: 1;
-            transform: scale(1.05); /* Slight zoom effect on hover */
+            transform: scale(1.05);
+        }
+        .menu-card .card-body {
+            padding: 15px;
         }
         .menu-card .card-body .card-title {
             font-size: 1.2rem;
             font-weight: 600;
-            margin: 10px 0;
+            margin: 0 0 5px 0;
             color: #333333;
         }
         .menu-card .card-body .card-text.price {
@@ -131,7 +136,7 @@
             top: 50%;
             transform: translateY(-50%);
             display: flex;
-            align-items: right;
+            align-items: center;
             justify-content: center;
         }
         .avatar-icon {
@@ -157,6 +162,7 @@
             box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
             display: none;
             border: 1px solid #ffd8b1;
+            z-index: 1001;
         }
         .dropdown-menu .dropdown-item {
             padding: 12px 16px;
@@ -175,7 +181,7 @@
             color: #333;
         }
         .fixed-top-bar {
-            position: relative;
+            position: fixed;
             top: 0;
             left: 0;
             width: 100%;
@@ -197,7 +203,6 @@
             align-items: center;
             width: 300px;
             max-width: 90%;
-            position: relative;
         }
         .search-bar-container input {
             width: 100%;
@@ -266,15 +271,12 @@
             color: #343a40;
         }
         .addon-section .form-check {
-            display: inline-flex;
+            display: flex;
             align-items: center;
             margin-left: 10px;
             color: #343a40;
         }
         .addon-section .form-check-input {
-            -webkit-appearance: none;
-            -moz-appearance: none;
-            appearance: none;
             width: 20px;
             height: 20px;
             border: 2px solid #343a40;
@@ -282,6 +284,7 @@
             background-color: #f0f0f0;
             position: relative;
             margin-right: 10px;
+            cursor: pointer;
         }
         .addon-section .form-check-input:checked {
             background-color: #006400;
@@ -297,21 +300,21 @@
         }
         .addon-section .form-check-label {
             font-size: 16px;
-            margin-left: 5px;
             margin-right: 15px;
             cursor: pointer;
-            display: inline-block;
-            vertical-align: middle;
         }
         form.text-center.mb-4 {
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            margin-bottom: 5px;
+            margin-bottom: 20px;
         }
         .modal-header {
             padding: 10px 15px;
+            background: linear-gradient(45deg, #0FAA39, #0D9232);
+            color: white;
+            border-radius: 15px 15px 0 0;
         }
         .modal-title {
             font-size: 16px;
@@ -320,14 +323,14 @@
         .modal-body {
             max-height: 60vh;
             overflow-y: auto;
-            padding: 15px;
+            padding: 20px;
         }
         .modal-body #modal-img {
             max-height: 200px;
             width: 100%;
             object-fit: cover;
             border-radius: 8px;
-            margin-bottom: 10px;
+            margin-bottom: 15px;
         }
         .modal-body #modal-name {
             font-size: 20px;
@@ -346,60 +349,61 @@
         .modal-body #modal-description {
             font-size: 14px;
             color: #6c757d;
-            margin-bottom: 10px;
+            margin-bottom: 15px;
+            text-align: center;
         }
         .modal-body .nutritional-info {
             font-size: 12px;
             color: #6c757d;
-            margin-bottom: 10px;
+            margin-bottom: 15px;
+            text-align: center;
         }
-        .modal-body #modal-addons h6,
-        .modal-body #first-row h6 {
+        .modal-body #modal-addons h6 {
             font-size: 14px;
             font-weight: bold;
             margin-bottom: 10px;
+            text-align: center;
         }
         .modal-footer {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            padding: 10px;
+            padding: 15px;
+            border-top: none;
         }
-        .modal-footer .d-flex {
+        .modal-footer .quantity-selector {
             display: flex;
             align-items: center;
-            gap: 10px;
+            background-color: #f8f9fa;
+            padding: 5px;
+            border-radius: 10px;
         }
-        .modal-footer .btn {
+        .modal-footer .btn-outline-secondary {
+            width: 40px;
             height: 40px;
-            padding: 0 15px;
+            padding: 0;
+            font-size: 16px;
+            line-height: 40px;
         }
         .modal-footer .form-control {
-            width: 50px;
+            width: 60px;
             height: 40px;
             text-align: center;
+            font-weight: bold;
+            font-size: 16px;
         }
         .modal-footer .btn-primary {
             background-color: #0FAA39;
             border-color: #0FAA39;
             font-weight: bold;
             padding: 10px 20px;
-            height: 40px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: auto;
-        }
-        .modal-footer .btn-outline-secondary {
-            height: 40px;
-            width: 40px;
+            border-radius: 8px;
         }
         .item-details {
             display: none;
             padding: 15px;
             background-color: #f8f9fa;
             border-radius: 8px;
-            margin-top: 10px;
             margin: 10px 15px;
             box-shadow: 0 2px 5px rgba(0,0,0,0.1);
         }
@@ -458,36 +462,6 @@
         .category-button:hover {
             background-color: #e6f4ea;
         }
-        .quantity-selector {
-            display: flex;
-            align-items: center;
-            gap: 5px;
-        }
-        .quantity-selector .btn {
-            width: 25px;
-            height: 25px;
-            padding: 0;
-            font-size: 12px;
-            line-height: 25px;
-            text-align: center;
-        }
-        .quantity-selector .quantity-display {
-            width: 25px;
-            text-align: center;
-            font-size: 12px;
-            font-weight: bold;
-            line-height: 25px;
-        }
-        .quantity-selector .quantity-to-add,
-        .quantity-selector .quantity-to-remove {
-            width: 45px;
-            height: 25px;
-            font-size: 12px;
-            padding: 0 5px;
-        }
-        .modal-dialog {
-            max-height: 90vh;
-        }
         .modal-body::-webkit-scrollbar {
             width: 8px;
         }
@@ -506,13 +480,6 @@
             opacity: 0.65;
             cursor: not-allowed;
         }
-        .quantity-selector select {
-            width: 60px;
-            height: 35px;
-            padding: 5px;
-            border-radius: 5px;
-            border: 1px solid #ced4da;
-        }
         #custom-dish-form {
             position: relative;
             padding-bottom: 80px;
@@ -582,8 +549,6 @@
             font-size: 12px;
             margin-left: 8px;
         }
-
-        /* Mic Popup Styles */
         .mic-popup {
             position: fixed;
             top: 50%;
@@ -600,24 +565,20 @@
             max-width: 90%;
             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
         }
-        
         .mic-popup.active {
             display: block;
         }
-        
         .mic-popup-icon {
             font-size: 48px;
             margin-bottom: 20px;
             color: #ff4444;
             animation: pulse 1.5s infinite;
         }
-        
         .mic-popup-text {
             font-size: 18px;
             margin-bottom: 15px;
             min-height: 24px;
         }
-        
         .mic-popup-cancel {
             background-color: #ff4444;
             color: white;
@@ -626,14 +587,16 @@
             border-radius: 20px;
             cursor: pointer;
             font-weight: bold;
+            transition: background-color 0.3s ease;
+        }
+        .mic-popup-cancel:hover {
+            background-color: #cc3333;
         }
-        
         @keyframes pulse {
             0% { transform: scale(1); }
             50% { transform: scale(1.1); }
             100% { transform: scale(1); }
         }
-
         @media (max-width: 576px) {
             .fixed-top-bar {
                 height: 60px;
@@ -641,146 +604,66 @@
             }
             .search-bar-container {
                 width: 80%;
-                max-width: 100%;
                 left: 10px;
-                top: 50%;
-                transform: translateY(-50%);
             }
             .search-bar-container input {
-                padding: 6px 35px 6px 35px;
+                padding: 6px 35px;
                 font-size: 14px;
                 border-radius: 20px;
             }
-            .search-icon {
-                left: 12px;
+            .search-icon, .mic-icon {
                 font-size: 16px;
             }
-            .mic-icon {
-                right: 12px;
-                font-size: 16px;
-            }
-            .avatar-dropdown-container {
-                right: 10px;
-            }
             .avatar-icon {
-                width: 40px;
-                height: 40px;
-                font-size: 20px;
+                width: 35px;
+                height: 35px;
+                font-size: 18px;
             }
             .dropdown-menu {
-                width: 220px;
-            }
-            .dropdown-menu .dropdown-item {
-                padding: 12px 16px;
-                font-size: 15px;
-            }
-            .category-buttons {
-                gap: 8px;
+                width: 200px;
             }
             .category-button {
                 padding: 4px 12px;
                 font-size: 0.85rem;
             }
-            .modal-dialog {
-                max-width: 96%;
-                margin: 5px auto;
-            }
-            .modal-header {
-                padding: 5px 10px;
-            }
-            .modal-title {
-                font-size: 14px;
-            }
             .modal-body {
                 max-height: 50vh;
-                padding: 8px;
+                padding: 15px;
             }
             .modal-body #modal-img {
                 max-height: 150px;
-                width: 100%;
-                max-width: 150px;
-                margin: 0 auto 5px;
-                display: block;
             }
             .modal-body #modal-name {
                 font-size: 18px;
-                margin-bottom: 3px;
             }
             .modal-body #modal-price {
                 font-size: 14px;
-                margin-bottom: 5px;
             }
-            .modal-body #modal-description {
+            .modal-body #modal-description, .modal-body .nutritional-info {
                 font-size: 12px;
-                margin-bottom: 5px;
             }
-            .modal-body .nutritional-info {
-                font-size: 10px;
-                margin-bottom: 5px;
-            }
-            .modal-body #modal-addons h6,
-            .modal-body #first-row h6 {
-                font-size: 12px;
-                margin-bottom: 5px;
-            }
-            .modal-footer {
-                padding: 5px;
-            }
-            .modal-footer .btn {
+            .modal-footer .btn-outline-secondary {
+                width: 30px;
                 height: 30px;
-                padding: 0 10px;
+                font-size: 14px;
             }
             .modal-footer .form-control {
-                width: 30px;
+                width: 50px;
                 height: 30px;
-                font-size: 12px;
-                font-weight: bold;
-            }
-            .modal-footer .btn-outline-secondary {
-                width: 25px;
-                height: 25px;
-                font-size: 12px;
-                line-height: 25px;
+                font-size: 14px;
             }
             .modal-footer .btn-primary {
-                font-size: 12px;
-                height: 30px;
-                padding: 0 15px;
-                border-radius: 5px;
+                padding: 8px 15px;
+                font-size: 14px;
             }
             .btn-primary {
+                width: 60px;
+                height: 30px;
                 font-size: 10px;
-                width: 50px;
-                height: 25px;
             }
             .customisable-text {
                 font-size: 8px;
             }
-            .button-container {
-                gap: 3px;
-            }
-            .quantity-selector .btn {
-                width: 18px;
-                height: 18px;
-                font-size: 9px;
-                line-height: 18px;
-            }
-            .quantity-selector .quantity-display {
-                width: 18px;
-                font-size: 9px;
-                line-height: 18px;
-            }
-            .quantity-selector .quantity-to-add,
-            .quantity-selector .quantity-to-remove {
-                width: 35px;
-                height: 18px;
-                font-size: 9px;
-            }
-            .quantity-selector select {
-                width: 50px;
-                height: 30px;
-                font-size: 12px;
-            }
             .bottom-action-bar {
                 padding: 8px 10px;
             }
@@ -792,46 +675,28 @@
                 width: 18px;
                 height: 18px;
                 font-size: 10px;
-                margin-left: 5px;
-            }
-            .item-details {
-                padding: 10px;
-                margin: 5px 10px;
-            }
-            .item-details h6 {
-                font-size: 0.95rem;
             }
-            .item-details p {
-                font-size: 0.8rem;
-            }
-            .toggle-details {
-                font-size: 0.8rem;
-            }
-            /* Mic Popup Mobile Styles */
             .mic-popup {
-                padding: 20px;
                 width: 280px;
+                padding: 20px;
             }
             .mic-popup-icon {
                 font-size: 36px;
-                margin-bottom: 15px;
             }
             .mic-popup-text {
                 font-size: 16px;
             }
             .mic-popup-cancel {
                 padding: 6px 16px;
-                font-size: 14px;
             }
         }
     </style>
 </head>
 <body>
-
     <div class="fixed-top-bar">
         <div class="avatar-dropdown-container">
             <div class="avatar-icon">
-                <span>{{ first_letter }}</span>
+                <span>{{ first_letter | default('U') }}</span>
             </div>
             <div class="dropdown-menu">
                 <a href="{{ url_for('user_details.customer_details') }}" class="dropdown-item">View Profile</a>
@@ -855,7 +720,7 @@
             {% endfor %}
             <button type="button" class="category-button {% if selected_category == 'Customized Dish' %}selected{% endif %}" data-category="Customized Dish">Customized Dish</button>
         </div>
-        <input type="hidden" name="category" id="selectedCategoryInput" value="{{ selected_category }}">
+        <input type="hidden" name="category" id="selectedCategoryInput" value="{{ selected_category | default('All') }}">
     </form>
 
     <div class="container mt-4">
@@ -877,7 +742,7 @@
             </div>
         {% else %}
             {% if ordered_menu.items()|length == 0 %}
-                <p>No menu items available for this category.</p>
+                <p class="text-center">No menu items available for this category.</p>
             {% else %}
                 {% for section, items in ordered_menu.items() %}
                     <h3>{{ section }}</h3>
@@ -909,27 +774,25 @@
                                                     <div class="toggle-details" data-item-name="{{ item.Name | default('Unnamed Item') }}">Show Details</div>
                                                 {% endif %}
                                             </div>
-                                            <div class="d-flex flex-column align-item-center justify-content-center">
-                                                <div class="button-container" 
-                                                     data-item-name="{{ item.Name | default('Unnamed Item') }}" 
-                                                     data-item-price="{{ item.Price__c | default('0.00') }}" 
-                                                     data-item-image="{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}"
-                                                     data-item-section="{{ item.Section__c | default(section) }}" 
-                                                     data-item-category="{{ selected_category }}">
-                                                    {% if item.Section__c == 'Soft Drinks' %}
-                                                        <button class="btn btn-primary add-to-cart-btn" onclick="showSoftDrinkModal(this)">ADD</button>
-                                                    {% else %}
-                                                        <button class="btn btn-primary" 
-                                                                data-bs-toggle="modal" 
-                                                                data-bs-target="#itemModal" 
-                                                                onclick="showItemDetails('{{ item.Name | default('Unnamed Item') }}', '{{ item.Price__c | default('0.00') }}', '{{ item.Image2__c | default(item.Image1__c) }}', '{{ item.Description__c | default('No description') }}', '{{ item.IngredientsInfo__c | default('Not specified') }}', '{{ item.NutritionalInfo__c | default('Not available') }}', '{{ item.Allergens__c | default('None listed') }}', '{{ item.Section__c | default(section) }}', '{{ selected_category }}')">
-                                                            ADD
-                                                        </button>
-                                                    {% endif %}
-                                                    {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' and item.Section__c !='Soft Drinks' %}
+                                            <div class="button-container" 
+                                                 data-item-name="{{ item.Name | default('Unnamed Item') }}" 
+                                                 data-item-price="{{ item.Price__c | default('0.00') }}" 
+                                                 data-item-image="{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}"
+                                                 data-item-section="{{ item.Section__c | default(section) }}" 
+                                                 data-item-category="{{ selected_category }}">
+                                                {% if item.Section__c == 'Soft Drinks' %}
+                                                    <button class="btn btn-primary add-to-cart-btn" onclick="showSoftDrinkModal(this)">ADD</button>
+                                                {% else %}
+                                                    <button class="btn btn-primary" 
+                                                            data-bs-toggle="modal" 
+                                                            data-bs-target="#itemModal" 
+                                                            onclick="showItemDetails('{{ item.Name | default('Unnamed Item') }}', '{{ item.Price__c | default('0.00') }}', '{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}', '{{ item.Description__c | default('No description') }}', '{{ item.IngredientsInfo__c | default('Not specified') }}', '{{ item.NutritionalInfo__c | default('Not available') }}', '{{ item.Allergens__c | default('None listed') }}', '{{ item.Section__c | default(section) }}', '{{ selected_category }}')">
+                                                        ADD
+                                                    </button>
+                                                    {% if item.Section__c not in ['Appetizer', 'Customized Dish', 'Soft Drinks'] %}
                                                         <span class="customisable-text">Customisable</span>
                                                     {% endif %}
-                                                </div>
+                                                {% endif %}
                                             </div>
                                         </div>
                                     </div>
@@ -937,8 +800,8 @@
                                         <div class="item-details" id="details-{{ item.Name | default('unnamed-item') | replace(' ', '-') }}">
                                             <h6>Description</h6>
                                             <p>{{ item.Description__c | default('No description available') }}</p>
-                                            <h6>Ingredientsinfo</h6>
-                                            <p>{{ item.Ingredientsinfo__c | default('Not specified') }}</p>
+                                            <h6>Ingredients</h6>
+                                            <p>{{ item.IngredientsInfo__c | default('Not specified') }}</p>
                                             <h6>Nutritional Info</h6>
                                             <p>{{ item.NutritionalInfo__c | default('Not available') }}</p>
                                             <h6>Allergens</h6>
@@ -960,20 +823,20 @@
         </a>
         <a href="{{ url_for('cart.cart') }}" class="btn btn-view-cart">
             <i class="bi bi-cart"></i> View Cart
-            <span class="cart-icon-badge" id="cart-item-count">{{ cart_item_count }}</span>
+            <span class="cart-icon-badge" id="cart-item-count">{{ cart_item_count | default(0) }}</span>
         </a>
     </div>
 
-    <!-- Modal for Item Details -->
+    <!-- Item Modal -->
     <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
-            <div class="modal-content">
+            <div class="modal-content" style="border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);">
                 <div class="modal-header">
                     <h5 class="modal-title" id="itemModalLabel">Item Details</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
-                    <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;">
+                    <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image">
                     <h5 id="modal-name" class="fw-bold text-center"></h5>
                     <p id="modal-price" class="text-muted text-center"></p>
                     <p id="modal-description" class="text-secondary"></p>
@@ -988,46 +851,46 @@
                     </div>
                     <div class="mt-4">
                         <h6>Custom Request</h6>
-                        <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
+                        <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..." rows="2"></textarea>
                     </div>
                     <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
                 </div>
-                <div class="modal-footer d-flex align-items-center justify-content-between">
-                    <div class="d-flex align-items-center gap-2">
+                <div class="modal-footer">
+                    <div class="quantity-selector">
                         <button type="button" class="btn btn-outline-secondary" id="decreaseQuantity">-</button>
-                        <input type="text" class="form-control text-center" id="quantityInput" value="1" readonly style="width: 50px;"/>
+                        <input type="text" class="form-control text-center" id="quantityInput" value="1" readonly>
                         <button type="button" class="btn btn-outline-secondary" id="increaseQuantity">+</button>
                     </div>
-                    <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
+                    <button type="button" class="btn btn-primary" id="addToCartBtn" onclick="addToCartFromModal()">Add to Cart</button>
                 </div>
             </div>
         </div>
     </div>
 
-    <!-- Modal for Soft Drinks Quantity Selection -->
+    <!-- Soft Drink Modal -->
     <div class="modal fade" id="softDrinkModal" tabindex="-1" aria-labelledby="softDrinkModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content" style="border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);">
-                <div class="modal-header" style="background: linear-gradient(45deg, #0FAA39, #0D9232); color: white; border-radius: 15px 15px 0 0;">
+                <div class="modal-header">
                     <h5 class="modal-title" id="softDrinkModalLabel">Select Your Drink</h5>
                     <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
-                <div class="modal-body" style="padding: 20px;">
+                <div class="modal-body">
                     <div class="text-center mb-4">
                         <img id="soft-drink-image" class="img-fluid rounded mb-3" alt="Soft Drink Image" style="max-height: 150px; width: auto; object-fit: contain;">
                         <h5 id="soft-drink-name" class="fw-bold" style="color: #333;"></h5>
                         <p id="soft-drink-price" class="text-muted" style="font-size: 1.1rem;"></p>
                     </div>
                     <div class="d-flex justify-content-center align-items-center mb-4">
-                        <div class="quantity-selector" style="background-color: #f8f9fa; padding: 10px; border-radius: 10px;">
-                            <button type="button" class="btn btn-outline-secondary" id="soft-drink-decrease" style="width: 40px; height: 40px;">-</button>
-                            <input type="text" class="form-control text-center mx-2" id="soft-drink-quantity" value="1" readonly style="width: 60px; font-weight: bold; font-size: 1.1rem;">
-                            <button type="button" class="btn btn-outline-secondary" id="soft-drink-increase" style="width: 40px; height: 40px;">+</button>
+                        <div class="quantity-selector">
+                            <button type="button" class="btn btn-outline-secondary" id="soft-drink-decrease">-</button>
+                            <input type="text" class="form-control text-center mx-2" id="soft-drink-quantity" value="1" readonly>
+                            <button type="button" class="btn btn-outline-secondary" id="soft-drink-increase">+</button>
                         </div>
                     </div>
                 </div>
-                <div class="modal-footer" style="border-top: none; padding: 0 20px 20px 20px; justify-content: center;">
-                    <button type="button" class="btn btn-primary" onclick="addSoftDrinkToCart()" style="width: 200px; padding: 12px; font-size: 1.1rem; background-color: #0FAA39; border-color: #0FAA39;">Add to Cart</button>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-primary" onclick="addSoftDrinkToCart()">Add to Cart</button>
                 </div>
             </div>
         </div>
@@ -1044,9 +907,7 @@
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script>
-        let isProcessingRequest = false;
         let currentSoftDrinkButton = null;
-
         const menuItems = [
             {% for section, items in ordered_menu.items() %}
                 {% for item in items %}
@@ -1054,18 +915,15 @@
                 {% endfor %}
             {% endfor %}
         ];
-
         const ingredientsList = [
             "Basmati Rice", "Bell Pepper", "Biryani Masala", "Butter", "Capsicum", "Cauliflower",
-            "Chickpea Flour (Besan)", "Chickpea Flour (for batter)", "Chickpeas (Channa)", "Chili Powder",
-            "Chili Sauce", "Coconut Milk", "Coriander Powder", "Cornflour", "Cream", "Cumin Powder",
-            "Cumin Seeds", "Curd (Yogurt)", "Curry Leaves", "Fish (e.g., King Fish or Salmon)",
-            "Fresh Coriander Leaves", "Garam Masala", "Garlic", "Ghee (Clarified Butter)", "Ginger",
-            "Ginger-Garlic Paste", "Goat Meat (Mutton)", "Green Chilies", "Honey",
-            "Kasuri Methi (dried fenugreek leaves)", "Lemon Juice", "Mango Puree", "Mint Leaves",
-            "Mixed Vegetables (Carrot, Peas, Potato, Cauliflower)", "Mixed Vegetables (Carrot, Peas, Potato)",
-            "Mustard Seeds", "Mutton (Goat Meat)", "Oil", "Oil (for frying)", "Onion",
-            "Paneer (Indian Cottage Cheese)", "Peas", "Potatoes", "Prawns", "Red Chili Powder",
+            "Chickpea Flour (Besan)", "Chickpeas (Channa)", "Chili Powder", "Chili Sauce", "Coconut Milk",
+            "Coriander Powder", "Cornflour", "Cream", "Cumin Powder", "Cumin Seeds", "Curd (Yogurt)",
+            "Curry Leaves", "Fish (e.g., King Fish or Salmon)", "Fresh Coriander Leaves", "Garam Masala",
+            "Garlic", "Ghee (Clarified Butter)", "Ginger", "Ginger-Garlic Paste", "Goat Meat (Mutton)",
+            "Green Chilies", "Honey", "Kasuri Methi (dried fenugreek leaves)", "Lemon Juice", "Mango Puree",
+            "Mint Leaves", "Mixed Vegetables (Carrot, Peas, Potato, Cauliflower)", "Mustard Seeds", "Oil",
+            "Onion", "Paneer (Indian Cottage Cheese)", "Peas", "Potatoes", "Prawns", "Red Chili Powder",
             "Rice Flour", "Saffron", "Salt", "Soy Sauce", "Spring Onion", "Tamarind (for sourness)",
             "Tomato Ketchup", "Tomatoes", "Turmeric Powder", "Vinegar", "Water", "Wheat Flour (for dough)",
             "Whole Wheat Flour", "Yogurt (Curd)"
@@ -1073,13 +931,13 @@
 
         function addToCartLocalStorage(payload) {
             let cart = JSON.parse(localStorage.getItem('cart')) || [];
-            const existingItem = cart.find(item => 
-                item.itemName === payload.itemName && 
-                item.instructions === payload.instructions && 
+            const existingItem = cart.find(item =>
+                item.itemName === payload.itemName &&
+                item.instructions === payload.instructions &&
                 JSON.stringify(item.addons) === JSON.stringify(payload.addons)
             );
             if (existingItem) {
-                existingItem.quantity = payload.quantity;
+                existingItem.quantity += payload.quantity;
             } else {
                 cart.push(payload);
             }
@@ -1087,450 +945,232 @@
             return cart;
         }
 
-        function removeFromCartLocalStorage(itemName, quantityToRemove, instructions, addons) {
-            let cart = JSON.parse(localStorage.getItem('cart')) || [];
-            const itemIndex = cart.findIndex(item => 
-                item.itemName === itemName && 
-                item.instructions === instructions && 
-                JSON.stringify(item.addons) === JSON.stringify(addons)
-            );
-            if (itemIndex !== -1) {
-                if (quantityToRemove >= cart[itemIndex].quantity) {
-                    cart.splice(itemIndex, 1);
-                } else {
-                    cart[itemIndex].quantity -= quantityToRemove;
-                }
+        function updateCartUI(cart) {
+            let totalQuantity = cart.reduce((sum, item) => sum + (item.quantity || 0), 0);
+            const cartItemCount = document.getElementById('cart-item-count');
+            if (cartItemCount) {
+                cartItemCount.innerText = totalQuantity;
+                cartItemCount.style.display = totalQuantity > 0 ? 'inline-flex' : 'none';
             }
-            localStorage.setItem('cart', JSON.stringify(cart));
-            return cart;
-        }
-
-        function getCartLocalStorage() {
-            return JSON.parse(localStorage.getItem('cart')) || [];
-        }
-
-        function debounce(func, wait) {
-            let timeout;
-            return function (...args) {
-                clearTimeout(timeout);
-                timeout = setTimeout(() => func.apply(this, args), wait);
-            };
         }
 
         function showSoftDrinkModal(button) {
             currentSoftDrinkButton = button;
             const buttonContainer = button.closest('.button-container');
-            const itemName = buttonContainer.getAttribute('data-item-name');
-            const itemPrice = buttonContainer.getAttribute('data-item-price');
-            const itemImage = buttonContainer.getAttribute('data-item-image');
-            
-            document.getElementById('soft-drink-name').textContent = itemName;
-            document.getElementById('soft-drink-price').textContent = `$${itemPrice}`;
+            document.getElementById('soft-drink-name').textContent = buttonContainer.getAttribute('data-item-name');
+            document.getElementById('soft-drink-price').textContent = `$${buttonContainer.getAttribute('data-item-price')}`;
             document.getElementById('soft-drink-quantity').value = '1';
-            const softDrinkImage = document.getElementById('soft-drink-image');
-            softDrinkImage.src = itemImage || '/static/placeholder.jpg';
-            
+            document.getElementById('soft-drink-image').src = buttonContainer.getAttribute('data-item-image') || '/static/placeholder.jpg';
             const modal = new bootstrap.Modal(document.getElementById('softDrinkModal'));
             modal.show();
         }
 
         function addSoftDrinkToCart() {
             if (!currentSoftDrinkButton) return;
-            
             const buttonContainer = currentSoftDrinkButton.closest('.button-container');
             const quantity = parseInt(document.getElementById('soft-drink-quantity').value) || 1;
-            
-            const itemName = buttonContainer.getAttribute('data-item-name');
-            const itemPrice = parseFloat(buttonContainer.getAttribute('data-item-price'));
-            const itemImage = buttonContainer.getAttribute('data-item-image');
-            const section = buttonContainer.getAttribute('data-item-section');
-            const selectedCategory = buttonContainer.getAttribute('data-item-category');
-            
             const cartPayload = {
-                itemName: itemName,
-                itemPrice: itemPrice,
-                itemImage: itemImage,
-                section: section,
-                category: selectedCategory,
+                itemName: buttonContainer.getAttribute('data-item-name'),
+                itemPrice: parseFloat(buttonContainer.getAttribute('data-item-price')) || 0,
+                itemImage: buttonContainer.getAttribute('data-item-image'),
+                section: buttonContainer.getAttribute('data-item-section'),
+                category: buttonContainer.getAttribute('data-item-category'),
                 addons: [],
                 instructions: '',
                 quantity: quantity
             };
-            
             fetch('/cart/add', {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
+                headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(cartPayload)
             })
             .then(response => response.json())
             .then(data => {
-                if (data.success) {
-                    updateCartUI(data.cart);
-                    const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
-                    modal.hide();
-                } else {
-                    console.error('Failed to add item to cart:', data.error);
-                    const cart = addToCartLocalStorage(cartPayload);
-                    updateCartUI(cart);
-                    const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
-                    modal.hide();
-                }
+                updateCartUI(data.success ? data.cart : addToCartLocalStorage(cartPayload));
+                bootstrap.Modal.getInstance(document.getElementById('softDrinkModal')).hide();
             })
-            .catch(err => {
-                console.error('Error adding item to cart:', err);
-                const cart = addToCartLocalStorage(cartPayload);
-                updateCartUI(cart);
-                const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
-                modal.hide();
+            .catch(() => {
+                updateCartUI(addToCartLocalStorage(cartPayload));
+                bootstrap.Modal.getInstance(document.getElementById('softDrinkModal')).hide();
             });
         }
 
-        function updateCartUI(cart) {
-            if (!Array.isArray(cart)) {
-                console.error('Invalid cart data:', cart);
-                return;
-            }
-
-            let totalQuantity = 0;
-            cart.forEach(item => {
-                totalQuantity += item.quantity;
-            });
-
-            const cartItemCount = document.getElementById('cart-item-count');
-            if (cartItemCount) {
-                cartItemCount.innerText = totalQuantity;
-                cartItemCount.style.display = totalQuantity > 0 ? 'inline-flex' : 'none';
-            }
-        }
-
-        document.addEventListener('DOMContentLoaded', function () {
+        document.addEventListener('DOMContentLoaded', () => {
+            // Avatar Dropdown
             const avatarContainer = document.querySelector('.avatar-dropdown-container');
             const dropdownMenu = document.querySelector('.dropdown-menu');
-            avatarContainer.addEventListener('click', function (event) {
-                event.stopPropagation();
+            avatarContainer.addEventListener('click', (e) => {
+                e.stopPropagation();
                 dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
             });
-            document.addEventListener('click', function (event) {
-                if (!avatarContainer.contains(event.target)) {
-                    dropdownMenu.style.display = 'none';
-                }
-            });
-            const dropdownItems = document.querySelectorAll('.dropdown-item');
-            dropdownItems.forEach(item => {
-                item.addEventListener('click', function () {
-                    dropdownMenu.style.display = 'none';
-                });
+            document.addEventListener('click', (e) => {
+                if (!avatarContainer.contains(e.target)) dropdownMenu.style.display = 'none';
             });
 
-            const menuCards = document.querySelectorAll('.menu-card');
-            const menuVideos = document.querySelectorAll('.menu-video');
-            const cardObserver = new IntersectionObserver((entries, observer) => {
+            // Lazy Loading
+            const cardObserver = new IntersectionObserver((entries) => {
                 entries.forEach(entry => {
                     if (entry.isIntersecting) {
                         entry.target.classList.add('visible');
-                        observer.unobserve(entry.target);
+                        cardObserver.unobserve(entry.target);
                     }
                 });
-            }, {
-                root: null,
-                rootMargin: '0px',
-                threshold: 0.1
-            });
-            const videoObserver = new IntersectionObserver((entries, observer) => {
+            }, { threshold: 0.1 });
+            const videoObserver = new IntersectionObserver((entries) => {
                 entries.forEach(entry => {
                     if (entry.isIntersecting) {
                         const video = entry.target;
                         const src = video.getAttribute('data-src');
-                        if (src && !video.querySelector('source[src="' + src + '"]')) {
-                            const source = video.querySelector('source');
-                            source.src = src;
-                            video.load();
-                        }
+                        if (src) video.querySelector('source').src = src;
+                        video.load();
                         video.classList.add('loaded');
-                        observer.unobserve(video);
+                        videoObserver.unobserve(video);
                     }
                 });
-            }, {
-                root: null,
-                rootMargin: '200px',
-                threshold: 0.01
-            });
-            menuCards.forEach(card => cardObserver.observe(card));
-            menuVideos.forEach(video => videoObserver.observe(video));
+            }, { rootMargin: '200px' });
+            document.querySelectorAll('.menu-card').forEach(card => cardObserver.observe(card));
+            document.querySelectorAll('.menu-video').forEach(video => videoObserver.observe(video));
 
-            const toggleLinks = document.querySelectorAll('.toggle-details');
-            toggleLinks.forEach(link => {
-                link.addEventListener('click', function () {
-                    const itemName = this.getAttribute('data-item-name').replace(/ /g, '-');
-                    const detailsDiv = document.getElementById(`details-${itemName}`);
-                    const isCurrentlyShown = detailsDiv.classList.contains('show');
-
-                    document.querySelectorAll('.item-details.show').forEach(otherDetails => {
-                        if (otherDetails !== detailsDiv) {
-                            otherDetails.classList.remove('show');
-                            const otherLink = otherDetails.previousElementSibling.querySelector('.toggle-details');
-                            if (otherLink) {
-                                otherLink.innerText = 'Show Details';
-                            }
-                        }
-                    });
-
-                    if (!isCurrentlyShown) {
-                        detailsDiv.classList.add('show');
-                        this.innerText = 'Hide Details';
-                    } else {
-                        detailsDiv.classList.remove('show');
-                        this.innerText = 'Show Details';
-                    }
+            // Toggle Details
+            document.querySelectorAll('.toggle-details').forEach(link => {
+                link.addEventListener('click', () => {
+                    const detailsDiv = document.getElementById(`details-${link.getAttribute('data-item-name').replace(/ /g, '-')}`);
+                    detailsDiv.classList.toggle('show');
+                    link.innerText = detailsDiv.classList.contains('show') ? 'Hide Details' : 'Show Details';
                 });
             });
 
+            // Category Selection
             const categoryButtons = document.querySelectorAll('.category-button');
             const categoryForm = document.getElementById('categoryForm');
             const selectedCategoryInput = document.getElementById('selectedCategoryInput');
             if (!selectedCategoryInput.value) {
-                selectedCategoryInput.value = "All";
+                selectedCategoryInput.value = 'All';
                 document.querySelector('.category-button[data-category="All"]').classList.add('selected');
             }
             categoryButtons.forEach(button => {
-                button.addEventListener('click', function () {
+                button.addEventListener('click', () => {
                     categoryButtons.forEach(btn => btn.classList.remove('selected'));
-                    this.classList.add('selected');
-                    selectedCategoryInput.value = this.getAttribute('data-category');
+                    button.classList.add('selected');
+                    selectedCategoryInput.value = button.getAttribute('data-category');
                     categoryForm.submit();
                 });
             });
+
+            // Search Functionality
             const searchBar = document.getElementById('searchBar');
             const suggestionsContainer = document.getElementById('autocompleteSuggestions');
-            searchBar.addEventListener('input', function () {
-                const input = this.value.trim().toLowerCase();
+            searchBar.addEventListener('input', () => {
+                const input = searchBar.value.trim().toLowerCase();
                 suggestionsContainer.innerHTML = '';
-                suggestionsContainer.style.display = 'none';
+                suggestionsContainer.style.display = input && menuItems.some(item => item.toLowerCase().includes(input)) ? 'block' : 'none';
                 if (input) {
-                    const filteredItems = menuItems.filter(item => 
-                        item.toLowerCase().includes(input)
-                    );
-                    if (filteredItems.length > 0) {
-                        filteredItems.forEach(item => {
-                            const suggestionDiv = document.createElement('div');
-                            suggestionDiv.classList.add('suggestion-item');
-                            suggestionDiv.innerText = item;
-                            suggestionDiv.addEventListener('click', function () {
-                                searchBar.value = item;
-                                suggestionsContainer.style.display = 'none';
-                                filterMenu();
-                            });
-                            suggestionsContainer.appendChild(suggestionDiv);
+                    menuItems.filter(item => item.toLowerCase().includes(input)).forEach(item => {
+                        const div = document.createElement('div');
+                        div.classList.add('suggestion-item');
+                        div.innerText = item;
+                        div.addEventListener('click', () => {
+                            searchBar.value = item;
+                            suggestionsContainer.style.display = 'none';
+                            filterMenu();
                         });
-                        suggestionsContainer.style.display = 'block';
-                    }
+                        suggestionsContainer.appendChild(div);
+                    });
                 }
                 filterMenu();
             });
-            document.addEventListener('click', function (event) {
-                if (!searchBar.contains(event.target) && !suggestionsContainer.contains(event.target)) {
-                    suggestionsContainer.style.display = 'none';
-                }
+            document.addEventListener('click', (e) => {
+                if (!searchBar.contains(e.target) && !suggestionsContainer.contains(e.target)) suggestionsContainer.style.display = 'none';
             });
+
+            // Custom Dish Suggestions
             const descriptionTextarea = document.getElementById('custom-dish-description');
             const descriptionSuggestions = document.getElementById('descriptionSuggestions');
-            if (descriptionTextarea && descriptionSuggestions) {
-                let usedIngredients = new Set();
-                function updateUsedIngredients() {
-                    const inputText = descriptionTextarea.value.trim();
-                    usedIngredients.clear();
-                    if (inputText) {
-                        const words = inputText.split(/,\s*/).map(word => word.trim());
-                        words.forEach(word => {
-                            if (word && ingredientsList.includes(word)) {
-                                usedIngredients.add(word);
-                            }
-                        });
-                    }
-                }
-                descriptionTextarea.addEventListener('input', function () {
-                    const inputText = this.value.trim();
-                    const words = inputText.split(/,\s*/);
+            if (descriptionTextarea) {
+                descriptionTextarea.addEventListener('input', () => {
+                    const words = descriptionTextarea.value.trim().split(/,\s*/);
                     const lastWord = words[words.length - 1].trim().toLowerCase();
                     descriptionSuggestions.innerHTML = '';
-                    descriptionSuggestions.style.display = 'none';
-                    updateUsedIngredients();
+                    descriptionSuggestions.style.display = lastWord && ingredientsList.some(ing => ing.toLowerCase().includes(lastWord)) ? 'block' : 'none';
                     if (lastWord) {
-                        const filteredIngredients = ingredientsList.filter(ingredient =>
-                            ingredient.toLowerCase().includes(lastWord) && !usedIngredients.has(ingredient)
-                        );
-                        if (filteredIngredients.length > 0) {
-                            filteredIngredients.forEach(ingredient => {
-                                const suggestionDiv = document.createElement('div');
-                                suggestionDiv.classList.add('suggestion-item');
-                                suggestionDiv.innerText = ingredient;
-                                suggestionDiv.addEventListener('click', function () {
-                                    const currentValue = descriptionTextarea.value;
-                                    const lastCommaIndex = currentValue.lastIndexOf(',');
-                                    const baseText = lastCommaIndex !== -1 ? currentValue.substring(0, lastCommaIndex + 1) : '';
-                                    descriptionTextarea.value = baseText + (baseText ? ' ' : '') + ingredient + ', ';
-                                    descriptionSuggestions.style.display = 'none';
-                                    descriptionTextarea.focus();
-                                    updateUsedIngredients();
-                                });
-                                descriptionSuggestions.appendChild(suggestionDiv);
+                        ingredientsList.filter(ing => ing.toLowerCase().includes(lastWord)).forEach(ingredient => {
+                            const div = document.createElement('div');
+                            div.classList.add('suggestion-item');
+                            div.innerText = ingredient;
+                            div.addEventListener('click', () => {
+                                const base = descriptionTextarea.value.substring(0, descriptionTextarea.value.lastIndexOf(lastWord));
+                                descriptionTextarea.value = base + ingredient + ', ';
+                                descriptionSuggestions.style.display = 'none';
                             });
-                            descriptionSuggestions.style.display = 'block';
-                        }
-                    }
-                });
-                document.addEventListener('click', function (event) {
-                    if (!descriptionTextarea.contains(event.target) && !descriptionSuggestions.contains(event.target)) {
-                        descriptionSuggestions.style.display = 'none';
+                            descriptionSuggestions.appendChild(div);
+                        });
                     }
                 });
             }
+
+            // Initial Cart Load
             fetch('/cart/get')
-                .then(response => {
-                    if (!response.ok) {
-                        throw new Error(`HTTP error! Status: ${response.status}`);
-                    }
-                    return response.json();
-                })
-                .then(data => {
-                    if (data.success) {
-                        updateCartUI(data.cart);
-                    } else {
-                        console.error('Failed to fetch cart:', data.error);
-                        const cart = getCartLocalStorage();
-                        updateCartUI(cart);
-                    }
-                })
-                .catch(err => {
-                    console.error('Error fetching cart:', err);
-                    const cart = getCartLocalStorage();
-                    updateCartUI(cart);
-                });
-            const preloadedVideos = document.querySelectorAll('link[rel="preload"][as="video"]');
-            preloadedVideos.forEach(link => {
-                const video = document.createElement('video');
-                video.src = link.href;
-                video.preload = 'auto';
-            });
-            const decreaseBtn = document.getElementById('decreaseQuantity');
-            const increaseBtn = document.getElementById('increaseQuantity');
-            const quantityInput = document.getElementById('quantityInput');
-            decreaseBtn.addEventListener('click', function () {
-                let currentQuantity = parseInt(quantityInput.value);
-                if (currentQuantity > 1) {
-                    currentQuantity--;
-                    quantityInput.value = currentQuantity;
-                }
-            });
-            increaseBtn.addEventListener('click', function () {
-                let currentQuantity = parseInt(quantityInput.value);
-                currentQuantity++;
-                quantityInput.value = currentQuantity;
-            });
+                .then(response => response.json())
+                .then(data => updateCartUI(data.success ? data.cart : JSON.parse(localStorage.getItem('cart') || '[]')))
+                .catch(() => updateCartUI(JSON.parse(localStorage.getItem('cart') || '[]')));
 
-            const softDrinkDecreaseBtn = document.getElementById('soft-drink-decrease');
-            const softDrinkIncreaseBtn = document.getElementById('soft-drink-increase');
-            const softDrinkQuantityInput = document.getElementById('soft-drink-quantity');
-            
-            softDrinkDecreaseBtn.addEventListener('click', function() {
-                let currentQuantity = parseInt(softDrinkQuantityInput.value);
-                if (currentQuantity > 1) {
-                    currentQuantity--;
-                    softDrinkQuantityInput.value = currentQuantity;
-                }
-            });
-            
-            softDrinkIncreaseBtn.addEventListener('click', function() {
-                let currentQuantity = parseInt(softDrinkQuantityInput.value);
-                if (currentQuantity < 1000) {
-                    currentQuantity++;
-                    softDrinkQuantityInput.value = currentQuantity;
-                }
+            // Quantity Controls
+            const modals = ['itemModal', 'softDrinkModal'];
+            modals.forEach(modalId => {
+                const decreaseBtn = document.getElementById(modalId === 'itemModal' ? 'decreaseQuantity' : 'soft-drink-decrease');
+                const increaseBtn = document.getElementById(modalId === 'itemModal' ? 'increaseQuantity' : 'soft-drink-increase');
+                const quantityInput = document.getElementById(modalId === 'itemModal' ? 'quantityInput' : 'soft-drink-quantity');
+                decreaseBtn.addEventListener('click', () => {
+                    let qty = parseInt(quantityInput.value);
+                    if (qty > 1) quantityInput.value = qty - 1;
+                });
+                increaseBtn.addEventListener('click', () => {
+                    let qty = parseInt(quantityInput.value);
+                    if (qty < 99) quantityInput.value = qty + 1;
+                });
             });
 
-            // Mic Popup Functionality
+            // Microphone Functionality
             const micIcon = document.getElementById('micIcon');
             const micPopup = document.getElementById('micPopup');
             const micPopupText = document.getElementById('micPopupText');
             const micPopupCancel = document.getElementById('micPopupCancel');
-            
             if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
                 const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
                 const recognition = new SpeechRecognition();
                 recognition.continuous = false;
                 recognition.interimResults = true;
                 recognition.lang = 'en-US';
-                
+
                 recognition.onstart = () => {
                     micIcon.classList.add('active');
                     micPopup.classList.add('active');
                     micPopupText.textContent = 'Listening...';
                 };
-                
                 recognition.onresult = (event) => {
-                    let interimTranscript = '';
                     let finalTranscript = '';
-                    
                     for (let i = event.resultIndex; i < event.results.length; i++) {
-                        const transcript = event.results[i][0].transcript;
-                        if (event.results[i].isFinal) {
-                            finalTranscript += transcript;
-                        } else {
-                            interimTranscript += transcript;
-                        }
+                        if (event.results[i].isFinal) finalTranscript = event.results[i][0].transcript;
+                        else micPopupText.textContent = event.results[i][0].transcript;
                     }
-                    
-                    // Display interim results
-                    if (interimTranscript) {
-                        micPopupText.textContent = interimTranscript;
-                    }
-                    
-                    // When we have a final result
                     if (finalTranscript) {
                         searchBar.value = finalTranscript.trim();
                         filterMenu();
                         micPopup.classList.remove('active');
+                        micIcon.classList.remove('active');
                     }
                 };
-                
                 recognition.onend = () => {
                     micIcon.classList.remove('active');
-                    if (micPopup.classList.contains('active')) {
-                        // If still active, it means it ended unexpectedly
-                        setTimeout(() => {
-                            micPopup.classList.remove('active');
-                        }, 1000);
-                    }
+                    micPopup.classList.remove('active');
                 };
-                
                 recognition.onerror = (event) => {
+                    micPopupText.textContent = `Error: ${event.error}`;
+                    setTimeout(() => micPopup.classList.remove('active'), 2000);
                     micIcon.classList.remove('active');
-                    micPopupText.textContent = 'Error: ' + event.error;
-                    setTimeout(() => {
-                        micPopup.classList.remove('active');
-                    }, 2000);
-                    console.error('Speech error:', event.error);
                 };
-                
-                micIcon.addEventListener('click', () => {
-                    try {
-                        recognition.start();
-                    } catch (e) {
-                        micPopupText.textContent = 'Error starting microphone';
-                        setTimeout(() => {
-                            micPopup.classList.remove('active');
-                        }, 2000);
-                        console.error('Recognition start error:', e);
-                    }
-                });
-                
-                micPopupCancel.addEventListener('click', () => {
-                    recognition.stop();
-                    micPopup.classList.remove('active');
-                    micIcon.classList.remove('active');
-                });
+                micIcon.addEventListener('click', () => recognition.start());
+                micPopupCancel.addEventListener('click', () => recognition.stop());
             } else {
                 micIcon.style.display = 'none';
             }
@@ -1543,172 +1183,122 @@
             let matchedSections = new Set();
             items.forEach(item => {
                 const itemName = item.querySelector('.card-title').innerText.toLowerCase();
-                const itemSection = item.closest('.row').previousElementSibling.innerText.toLowerCase();
-                if (itemName.includes(input) || (itemSection && itemSection.includes(input))) {
+                const sectionTitle = item.closest('.row').previousElementSibling.innerText.toLowerCase();
+                if (itemName.includes(input) || sectionTitle.includes(input)) {
                     item.style.display = 'block';
-                    item.classList.add('visible');
                     matchedSections.add(item.closest('.row'));
                 } else {
                     item.style.display = 'none';
                 }
             });
             sections.forEach(section => {
-                const sectionRow = section.nextElementSibling;
-                if (matchedSections.has(sectionRow)) {
-                    section.style.display = 'block';
-                    sectionRow.style.display = 'flex';
-                } else {
-                    section.style.display = 'none';
-                    sectionRow.style.display = 'none';
-                }
+                const row = section.nextElementSibling;
+                row.style.display = matchedSections.has(row) ? 'flex' : 'none';
+                section.style.display = matchedSections.has(row) ? 'block' : 'none';
             });
             if (!input) {
                 sections.forEach(section => {
                     section.style.display = 'block';
                     section.nextElementSibling.style.display = 'flex';
                 });
-                items.forEach(item => {
-                    item.style.display = 'block';
-                    item.classList.add('visible');
-                });
+                items.forEach(item => item.style.display = 'block');
             }
         }
 
-        function showItemDetails(name, price, image, description, ingredients, nutrition, allergens, section, selectedCategory) {
+        function showItemDetails(name, price, image, description, ingredients, nutrition, allergens, section, category) {
             document.getElementById('modal-name').innerText = name;
-            document.getElementById('modal-price').innerText = `$${price}`;
-            const modalImg = document.getElementById('modal-img');
-            modalImg.src = image || '/static/placeholder.jpg';
-            document.getElementById('modal-description').innerText = description || 'No description available.';
-            document.getElementById('modal-ingredients').innerText = ingredients || 'Not specified';
-            document.getElementById('modal-nutrition').innerText = nutrition || 'Not available';
-            document.getElementById('modal-allergens').innerText = allergens || 'None listed';
-            document.getElementById('addons-list').innerHTML = 'Loading customization options...';
+            document.getElementById('modal-price').innerText = `$${parseFloat(price).toFixed(2)}`;
+            document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
+            document.getElementById('modal-description').innerText = description;
+            document.getElementById('modal-ingredients').innerText = ingredients;
+            document.getElementById('modal-nutrition').innerText = nutrition;
+            document.getElementById('modal-allergens').innerText = allergens;
             document.getElementById('modal-instructions').value = '';
-            const modalSectionEl = document.getElementById('modal-section');
-            modalSectionEl.setAttribute('data-section', section);
-            modalSectionEl.setAttribute('data-category', selectedCategory);
-            document.getElementById('quantityInput').value = 1;
+            document.getElementById('quantityInput').value = '1';
+            document.getElementById('modal-section').setAttribute('data-section', section);
+            document.getElementById('modal-section').setAttribute('data-category', category);
+
+            const addonsList = document.getElementById('addons-list');
+            const addToCartBtn = document.getElementById('addToCartBtn');
+            addonsList.innerHTML = 'Loading customization options...';
+            addToCartBtn.disabled = true;
 
             fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
                 .then(response => response.json())
                 .then(data => {
-                    const addonsList = document.getElementById('addons-list');
                     addonsList.innerHTML = '';
-                    if (!data.success || !data.addons || data.addons.length === 0) {
+                    if (data.success && data.addons && data.addons.length > 0) {
+                        data.addons.forEach(addon => {
+                            const sectionDiv = document.createElement('div');
+                            sectionDiv.classList.add('addon-section');
+                            sectionDiv.innerHTML = `<h6>${addon.name}</h6>`;
+                            addon.options.forEach((option, index) => {
+                                const optionId = `addon-${addon.name.replace(/\s+/g, '-')}-${index}`;
+                                const div = document.createElement('div');
+                                div.classList.add('form-check');
+                                div.innerHTML = `
+                                    <input type="checkbox" class="form-check-input" id="${optionId}" value="${option}" data-name="${option}" data-group="${addon.name}" data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}">
+                                    <label class="form-check-label" for="${optionId}">${option} ${addon.extra_charge ? `($${addon.extra_charge_amount})` : ''}</label>
+                                `;
+                                sectionDiv.appendChild(div);
+                            });
+                            addonsList.appendChild(sectionDiv);
+                        });
+                    } else {
                         addonsList.innerHTML = '<p>No customization options available.</p>';
-                        return;
                     }
-                    data.addons.forEach(addon => {
-                        const sectionDiv = document.createElement('div');
-                        sectionDiv.classList.add('addon-section');
-                        const title = document.createElement('h6');
-                        title.innerText = addon.name;
-                        sectionDiv.appendChild(title);
-                        const optionsContainer = document.createElement('div');
-                        addon.options.forEach((option, index) => {
-                            const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
-                            const listItem = document.createElement('div');
-                            listItem.classList.add('form-check');
-                            listItem.innerHTML = `
-                                <input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
-                                       data-name="${option}" data-group="${addon.name}" data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}">
-                                <label class="form-check-label" for="${optionId}">
-                                    ${option} ${addon.extra_charge ? `($${addon.extra_charge_amount})` : ''}
-                                </label>
-                            `;
-                            optionsContainer.appendChild(listItem);
-                        });
-                        sectionDiv.appendChild(optionsContainer);
-                        addonsList.appendChild(sectionDiv);
-                    });
+                    addToCartBtn.disabled = false;
                 })
-                .catch(err => {
-                    console.error('Error fetching add-ons:', err);
-                    document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
+                .catch(() => {
+                    addonsList.innerHTML = '<p>Failed to load customization options.</p>';
+                    addToCartBtn.disabled = false;
                 });
         }
 
-        document.addEventListener('click', function(event) {
-            if (event.target.classList.contains('addon-option')) {
-                handleAddonClick(event.target);
+        document.addEventListener('click', (e) => {
+            if (e.target.classList.contains('form-check-input')) {
+                const group = e.target.getAttribute('data-group');
+                const multiSelectGroups = ["Extra Toppings", "Choose Raita/Sides", "Select Dip/Sauce", "Extra Add-ons", "Make it a Combo", "Beverages", "Sauces"];
+                if (!multiSelectGroups.includes(group)) {
+                    document.querySelectorAll(`.form-check-input[data-group="${group}"]`).forEach(cb => {
+                        if (cb !== e.target) cb.checked = false;
+                    });
+                }
             }
         });
 
-        function handleAddonClick(checkbox) {
-            const groupName = checkbox.getAttribute('data-group');
-            const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides", "Select Dip/Sauce", "Extra Add-ons", "Make it a Combo","Beverages","Sauces"].includes(groupName);
-            if (!isMultiSelectGroup) {
-                const checkboxes = document.querySelectorAll(`.addon-option[data-group="${groupName}"]`);
-                checkboxes.forEach(otherCheckbox => {
-                    if (otherCheckbox !== checkbox) {
-                        otherCheckbox.checked = false;
-                    }
-                });
-            }
-        }
-
         function addToCartFromModal() {
-            const itemName = document.getElementById('modal-name').innerText;
-            let itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
-            if (isNaN(itemPrice)) {
-                alert('Invalid price for the item. Please check the item details.');
-                return;
-            }
-            const itemImage = document.getElementById('modal-img').src;
-            const modalSectionEl = document.getElementById('modal-section');
-            const section = modalSectionEl.getAttribute('data-section');
-            const selectedCategory = modalSectionEl.getAttribute('data-category');
-            if (!itemName || !itemPrice || !section || !itemImage) {
-                console.error('Missing data for cart item:', { itemName, itemPrice, section, itemImage });
-                return;
-            }
-            const selectedAddOns = Array.from(
-                document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
-            ).map(addon => ({
-                name: addon.getAttribute('data-name') || 'Default Name',
-                price: parseFloat(addon.getAttribute('data-price') || 0)
-            }));
-            const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
-            const instructions = document.getElementById('modal-instructions').value;
-            const cartPayload = {
-                itemName: itemName,
-                itemPrice: itemPrice,
-                itemImage: itemImage,
-                section: section,
-                category: selectedCategory,
-                addons: selectedAddOns,
-                instructions: instructions,
-                quantity: quantity
+            const payload = {
+                itemName: document.getElementById('modal-name').innerText,
+                itemPrice: parseFloat(document.getElementById('modal-price').innerText.replace('$', '')) || 0,
+                itemImage: document.getElementById('modal-img').src,
+                section: document.getElementById('modal-section').getAttribute('data-section'),
+                category: document.getElementById('modal-section').getAttribute('data-category'),
+                addons: Array.from(document.querySelectorAll('#addons-list .form-check-input:checked')).map(cb => ({
+                    name: cb.getAttribute('data-name'),
+                    price: parseFloat(cb.getAttribute('data-price')) || 0
+                })),
+                instructions: document.getElementById('modal-instructions').value,
+                quantity: parseInt(document.getElementById('quantityInput').value) || 1
             };
-            
             fetch('/cart/add', {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(cartPayload)
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
             })
             .then(response => response.json())
             .then(data => {
                 if (data.success) {
-                    alert('Item added to cart successfully!');
                     updateCartUI(data.cart);
-                    const modal = document.getElementById('itemModal');
-                    const modalInstance = bootstrap.Modal.getInstance(modal);
-                    modalInstance.hide();
+                    bootstrap.Modal.getInstance(document.getElementById('itemModal')).hide();
                 } else {
-                    console.error('Failed to add item to cart:', data.error);
-                    alert(data.error || 'Failed to add item to cart.');
+                    updateCartUI(addToCartLocalStorage(payload));
+                    bootstrap.Modal.getInstance(document.getElementById('itemModal')).hide();
                 }
             })
-            .catch(err => {
-                console.error('Error adding item to cart:', err);
-                const cart = addToCartLocalStorage(cartPayload);
-                updateCartUI(cart);
-                const modal = document.getElementById('itemModal');
-                const modalInstance = bootstrap.Modal.getInstance(modal);
-                modalInstance.hide();
+            .catch(() => {
+                updateCartUI(addToCartLocalStorage(payload));
+                bootstrap.Modal.getInstance(document.getElementById('itemModal')).hide();
             });
         }
     </script>