Update templates/menu.html

templates/menu.html

@@ -36,10 +36,6 @@
             display: flex;
             flex-direction: column;
             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-            transition: transform 0.2s ease;
-        }
-        .menu-card:hover {
-            transform: translateY(-5px);
         }
         .menu-card.highlighted {
             border: 3px solid #0FAA39;
@@ -77,7 +73,6 @@
             width: 100%;
             height: 100%;
             object-fit: cover;
-            aspect-ratio: 16/9;
             opacity: 1;
             transition: opacity 0.3s ease;
         }
@@ -97,19 +92,18 @@
             margin-bottom: 5px;
         }
         .addbutton .btn {
-            background-color: #0FAA39;
+            background-color: #28a745;
             color: white;
             padding: 10px 20px;
             font-size: 16px;
             font-weight: bold;
-            border-radius: 8px;
+            border-radius: 5px;
             border: none;
-            transition: background-color 0.3s ease, transform 0.2s ease;
+            transition: background-color 0.3s ease;
             margin-left: 13px;
         }
         .addbutton .btn:hover {
-            background-color: #0D9232;
-            transform: scale(1.05);
+            background-color: #218838;
         }
         .button-container {
             display: flex;
@@ -138,12 +132,11 @@
             align-items: center;
             justify-content: center;
             padding: 0;
-            transition: background-color 0.3s ease, transform 0.2s ease;
+            transition: background-color 0.3s ease;
         }
         .btn-primary:hover {
             background-color: #0D9232;
             border-color: #0D9232;
-            transform: scale(1.05);
         }
         .btn-primary:active,
         .btn-primary:focus {
@@ -164,7 +157,7 @@
             width: 40px;
             height: 40px;
             border-radius: 50%;
-            background: linear-gradient(45deg, #FFA500, #000000, #0000FF);
+            background: linear-gradient(45deg, #FF4500, #000000, #1E90FF);
             cursor: pointer;
             display: flex;
             align-items: center;
@@ -176,22 +169,22 @@
         }
         .avatar-icon:hover {
             transform: scale(1.1);
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
         }
         .dropdown-menu {
             position: absolute;
             right: 0;
             top: 100%;
-            background: linear-gradient(180deg, #ffffff, #f8f9fa);
+            background: linear-gradient(135deg, #ffffff, #f8f9fa);
             border-radius: 12px;
             width: 240px;
             box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
             display: none;
-            border: none;
+            border: 1px solid rgba(0, 0, 0, 0.05);
             padding: 12px 0;
             animation: slideDown 0.3s ease-out;
             z-index: 1000;
-            overflow: hidden;
+            font-family: 'Segoe UI', Arial, sans-serif;
         }
         .dropdown-menu.show {
             display: block;
@@ -199,30 +192,36 @@
         .dropdown-menu .dropdown-item {
             padding: 12px 18px;
             text-decoration: none;
-            color: #333;
+            color: #2c3e50;
             display: flex;
             align-items: center;
             font-size: 15px;
             font-weight: 500;
-            transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
+            transition: all 0.2s ease;
+            border-radius: 8px;
+            margin: 0 8px;
         }
         .dropdown-menu .dropdown-item i {
             margin-right: 12px;
             font-size: 18px;
             color: #0FAA39;
+            transition: color 0.2s ease;
         }
         .dropdown-menu .dropdown-item:hover {
             background-color: #e6f4ea;
-            color: #0D9232;
+            color: #0FAA39;
             transform: translateX(5px);
         }
         .dropdown-menu .dropdown-item:hover i {
             color: #0D9232;
         }
+        .dropdown-menu .dropdown-item:active {
+            background-color: #d1e7dd;
+        }
         @keyframes slideDown {
             from {
                 opacity: 0;
-                transform: translateY(-10px);
+                transform: translateY(-15px);
             }
             to {
                 opacity: 1;
@@ -242,7 +241,6 @@
             justify-content: space-between;
             align-items: center;
             z-index: 1000;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         }
         .search-bar-container {
             position: absolute;
@@ -264,14 +262,13 @@
             background-color: #fff;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
             outline: none;
-            transition: box-shadow 0.2s ease;
-        }
-        .search-bar-container input:focus {
-            box-shadow: 0 0 0 3px rgba(255, 160, 122, 0.3);
         }
         .search-bar-container input::placeholder {
             color: #888;
         }
+        .search-bar-container input:focus {
+            border-bottom: 2px solid #FFA07A;
+        }
         .search-icon {
             position: absolute;
             left: 15px;
@@ -284,15 +281,10 @@
             font-size: 18px;
             color: #888;
             cursor: pointer;
-            transition: color 0.3s ease, transform 0.2s ease;
-        }
-        .mic-icon:hover {
-            color: #DC3545;
-            transform: scale(1.1);
+            transition: color 0.3s ease;
         }
         .mic-icon.active {
-            color: #DC3545;
-            animation: pulseMic 1.5s infinite;
+            color: #007bff;
         }
         /* Addon Section */
         .addon-section {
@@ -414,7 +406,7 @@
         #softDrinkModal .modal-content {
             border-radius: 12px;
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-            background: linear-gradient(180deg, #ffffff, #f8f9fa);
+            background-color: #fff;
             overflow: hidden;
         }
         #softDrinkModal .modal-header {
@@ -434,17 +426,12 @@
             text-align: center;
         }
         #softDrinkModal .modal-body img {
-            width: 160px;
-            height: 160px;
+            max-height: 160px;
+            width: 100%;
             object-fit: cover;
-            aspect-ratio: 1/1;
             border-radius: 8px;
             margin-bottom: 15px;
             box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s ease;
-        }
-        #softDrinkModal .modal-body img:hover {
-            transform: scale(1.05);
         }
         #softDrinkModal .modal-body h5 {
             font-size: 1.4rem;
@@ -472,27 +459,26 @@
             margin-bottom: 20px;
         }
         #softDrinkModal .quantity-controls .btn {
-            width: 48px;
-            height: 48px;
+            width: 40px;
+            height: 40px;
             border-radius: 50%;
             padding: 0;
-            font-size: 1.4rem;
-            line-height: 48px;
+            font-size: 1.2rem;
+            line-height: 40px;
             text-align: center;
             background-color: #e9ecef;
             border: none;
             color: #333;
-            transition: background-color 0.2s ease, transform 0.2s ease;
+            transition: background-color 0.2s ease;
         }
         #softDrinkModal .quantity-controls .btn:hover {
             background-color: #d1d4d7;
-            transform: scale(1.1);
         }
         #softDrinkModal .quantity-controls input {
             width: 60px;
-            height: 48px;
+            height: 40px;
             text-align: center;
-            font-size: 1.2rem;
+            font-size: 1.1rem;
             font-weight: 600;
             border: 1px solid #ced4da;
             border-radius: 6px;
@@ -507,59 +493,18 @@
         #softDrinkModal .modal-footer .btn-primary {
             background-color: #0FAA39;
             border-color: #0FAA39;
-            padding: 12px 40px;
+            padding: 10px 30px;
             text-align: center;
-            font-size: 1.1rem;
+            font-size: 1rem;
             font-weight: 600;
             border-radius: 8px;
-            transition: background-color 0.2s ease, transform 0.2s ease;
+            transition: background-color 0.2s ease;
             width: auto;
         }
         #softDrinkModal .modal-footer .btn-primary:hover {
             background-color: #0D9232;
-            transform: scale(1.05);
-        }
-        /* Item Modal Styling */
-        #itemModal .modal-dialog {
-            max-width: 500px;
-            margin: 1.75rem auto;
-            animation: fadeInModal 0.3s ease-out;
-        }
-        #itemModal .modal-content {
-            border-radius: 12px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-            background: linear-gradient(180deg, #ffffff, #f8f9fa);
-            overflow: hidden;
-        }
-        #itemModal .modal-header {
-            background: linear-gradient(45deg, #FFA07A, #FFB347);
-            border-top-left-radius: 12px;
-            border-top-right-radius: 12px;
-            padding: 12px 15px;
-            border-bottom: none;
-        }
-        #itemModal .modal-title {
-            font-size: 1.3rem;
-            font-weight: 600;
-            color: #fff;
-        }
-        #itemModal .modal-body {
-            padding: 20px;
-        }
-        #itemModal .modal-body img {
-            width: 200px;
-            height: 200px;
-            object-fit: cover;
-            aspect-ratio: 1/1;
-            border-radius: 8px;
-            margin: 0 auto 15px;
-            display: block;
-            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s ease;
-        }
-        #itemModal .modal-body img:hover {
-            transform: scale(1.05);
         }
+        /* Item Modal Quantity Controls */
         #itemModal .quantity-controls {
             display: flex;
             justify-content: center;
@@ -568,45 +513,31 @@
             margin-bottom: 20px;
         }
         #itemModal .quantity-controls .btn {
-            width: 48px;
-            height: 48px;
+            width: 40px;
+            height: 40px;
             border-radius: 50%;
             padding: 0;
-            font-size: 1.4rem;
-            line-height: 48px;
+            font-size: 1.2rem;
+            line-height: 40px;
             text-align: center;
             background-color: #e9ecef;
             border: none;
             color: #333;
-            transition: background-color 0.2s ease, transform 0.2s ease;
+            transition: background-color 0.2s ease;
         }
         #itemModal .quantity-controls .btn:hover {
             background-color: #d1d4d7;
-            transform: scale(1.1);
         }
         #itemModal .quantity-controls input {
             width: 60px;
-            height: 48px;
+            height: 40px;
             text-align: center;
-            font-size: 1.2rem;
+            font-size: 1.1rem;
             font-weight: 600;
             border: 1px solid #ced4da;
             border-radius: 6px;
             background-color: #f8f9fa;
         }
-        #itemModal .modal-footer .btn-primary {
-            background-color: #0FAA39;
-            border-color: #0FAA39;
-            padding: 12px 40px;
-            font-size: 1.1rem;
-            font-weight: 600;
-            border-radius: 8px;
-            transition: background-color 0.2s ease, transform 0.2s ease;
-        }
-        #itemModal .modal-footer .btn-primary:hover {
-            background-color: #0D9232;
-            transform: scale(1.05);
-        }
         /* Filter Form Styling */
         #filter-form {
             display: flex;
@@ -675,7 +606,7 @@
         #micModal .modal-content {
             border-radius: 12px;
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-            background: linear-gradient(180deg, #ffffff, #f8f9fa);
+            background-color: #fff;
             text-align: center;
         }
         #micModal .modal-header {
@@ -698,47 +629,24 @@
             align-items: center;
             gap: 15px;
             min-height: 200px;
-            position: relative;
         }
         #micModal .modal-body i#mic-icon-animation {
             font-size: 2.5rem;
-            color: #DC3545;
-            position: relative;
+            color: #007bff;
             animation: pulse 2s infinite;
         }
-        #micModal .modal-body i#mic-icon-animation::before {
-            content: '';
-            position: absolute;
-            top: -10px;
-            left: -10px;
-            right: -10px;
-            bottom: -10px;
-            border: 2px solid #DC3545;
-            border-radius: 50%;
-            opacity: 0.5;
-            animation: ripple 2s infinite;
-        }
         #micModal .modal-body p#mic-status {
             font-size: 1.1rem;
             color: #333;
             margin: 0;
         }
         #micModal .modal-body #mic-item-image {
-            width: 150px;
-            height: 150px;
+            max-height: 150px;
+            width: 100%;
             object-fit: cover;
-            aspect-ratio: 1/1;
             border-radius: 8px;
             margin-bottom: 10px;
             box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-            animation: fadeIn 0.3s ease;
-        }
-        #micModal .modal-body #mic-item-name {
-            font-size: 1.2rem;
-            font-weight: 600;
-            color: #333;
-            margin-bottom: 10px;
-            animation: fadeIn 0.3s ease;
         }
         #micModal .modal-body #mic-item-details.show {
             animation: fadeIn 0.3s ease;
@@ -754,63 +662,11 @@
             padding: 10px 20px;
             font-size: 1rem;
             border-radius: 8px;
-            transition: background-color 0.2s ease, transform 0.2s ease;
         }
         #micModal .modal-footer .btn-secondary:hover {
             background-color: #5a6268;
-            transform: scale(1.05);
-        }
-        /* Search Suggestions Styling */
-        .autocomplete-suggestions {
-            position: absolute;
-            top: 100%;
-            left: 0;
-            right: 0;
-            background-color: #fff;
-            border: 1px solid #ced4da;
-            border-radius: 8px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-            max-height: 200px;
-            overflow-y: auto;
-            z-index: 1000;
-            display: none;
-            animation: slideDown 0.3s ease-out;
-        }
-        .autocomplete-suggestion {
-            display: flex;
-            align-items: center;
-            padding: 8px 12px;
-            cursor: pointer;
-            font-size: 0.9rem;
-            color: #333;
-            transition: background-color 0.2s ease, transform 0.2s ease;
-        }
-        .autocomplete-suggestion:hover {
-            background-color: #e6f4ea;
-            transform: translateX(5px);
-        }
-        .autocomplete-suggestion img {
-            width: 40px;
-            height: 40px;
-            object-fit: cover;
-            border-radius: 4px;
-            margin-right: 10px;
+            border-color: #5a6268;
         }
-        .autocomplete-suggestions::-webkit-scrollbar {
-            width: 6px;
-        }
-        .autocomplete-suggestions::-webkit-scrollbar-track {
-            background: #f1f1f1;
-            border-radius: 10px;
-        }
-        .autocomplete-suggestions::-webkit-scrollbar-thumb {
-            background: #0FAA39;
-            border-radius: 10px;
-        }
-        .autocomplete-suggestions::-webkit-scrollbar-thumb:hover {
-            background: #0D9232;
-        }
-        /* Animations */
         @keyframes checkmark {
             from { transform: scale(0); }
             to { transform: scale(1); }
@@ -832,17 +688,6 @@
             50% { transform: scale(1.2); }
             100% { transform: scale(1); }
         }
-        @keyframes pulseMic {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.15); }
-            100% { transform: scale(1); }
-        }
-        @keyframes ripple {
-            0% { transform: scale(0.8); opacity: 0.5; }
-            50% { transform: scale(1.2); opacity: 0.2; }
-            100% { transform: scale(1.6); opacity: 0; }
-        }
-        /* Modal General Styles */
         .modal-header {
             padding: 10px 15px;
         }
@@ -856,15 +701,11 @@
             padding: 15px;
         }
         .modal-body #modal-img {
-            width: 200px;
-            height: 200px;
+            max-height: 200px;
+            width: 100%;
             object-fit: cover;
-            aspect-ratio: 1/1;
             border-radius: 8px;
             margin-bottom: 10px;
-            display: block;
-            margin-left: auto;
-            margin-right: auto;
         }
         .modal-body #modal-name {
             font-size: 20px;
@@ -1063,10 +904,6 @@
             text-align: center;
             min-width: 0;
             white-space: nowrap;
-            transition: transform 0.2s ease;
-        }
-        .bottom-action-bar .btn:hover {
-            transform: scale(1.05);
         }
         .bottom-action-bar .btn-order-history {
             background: linear-gradient(45deg, #FF8C00, #32CD32);
@@ -1075,6 +912,7 @@
         }
         .bottom-action-bar .btn-order-history:hover {
             background: linear-gradient(45deg, #FF4500, #228B22);
+            border-color: transparent;
             color: #000000;
         }
         .bottom-action-bar .btn-view-cart {
@@ -1084,6 +922,7 @@
         }
         .bottom-action-bar .btn-view-cart:hover {
             background-color: #0D9232;
+            border-color: #0D9232;
             color: white;
         }
         .cart-icon-badge {
@@ -1097,7 +936,6 @@
             justify-content: center;
             font-size: 12px;
             margin-left: 8px;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
         }
         /* Mobile-Specific Styles */
         @media (max-width: 576px) {
@@ -1135,16 +973,16 @@
             }
             .dropdown-menu {
                 width: 200px;
-                border-radius: 10px;
-                padding: 10px 0;
+                border-radius: 8px;
+                padding: 8px 0;
             }
             .dropdown-menu .dropdown-item {
-                padding: 10px 15px;
-                font-size: 14px;
+                padding: 8px 12px;
+                font-size: 13px;
             }
             .dropdown-menu .dropdown-item i {
-                font-size: 16px;
-                margin-right: 10px;
+                font-size: 14px;
+                margin-right: 8px;
             }
             .modal-dialog {
                 max-width: 90%;
@@ -1161,8 +999,9 @@
                 padding: 12px;
             }
             .modal-body #modal-img {
-                width: 150px;
-                height: 150px;
+                max-height: 150px;
+                width: 100%;
+                max-width: 150px;
                 margin: 0 auto 8px;
                 display: block;
             }
@@ -1304,8 +1143,7 @@
                 padding: 15px;
             }
             #softDrinkModal .modal-body img {
-                width: 130px;
-                height: 130px;
+                max-height: 130px;
                 margin-bottom: 12px;
             }
             #softDrinkModal .modal-body h5 {
@@ -1317,45 +1155,38 @@
                 margin-bottom: 15px;
             }
             #softDrinkModal .quantity-controls .btn {
-                width: 40px;
-                height: 40px;
-                font-size: 1.2rem;
-                line-height: 40px;
+                width: 32px;
+                height: 32px;
+                font-size: 1rem;
+                line-height: 32px;
             }
             #softDrinkModal .quantity-controls input {
                 width: 50px;
-                height: 40px;
-                font-size: 1rem;
+                height: 32px;
+                font-size: 0.9rem;
             }
             #softDrinkModal .modal-footer {
                 padding: 10px;
             }
             #softDrinkModal .modal-footer .btn-primary {
-                padding: 10px 30px;
-                font-size: 1rem;
+                padding: 8px 20px;
+                font-size: 0.9rem;
             }
             /* Mobile-Specific Item Modal Styles */
-            #itemModal .modal-dialog {
-                max-width: 90%;
-            }
-            #itemModal .modal-body img {
-                width: 150px;
-                height: 150px;
-            }
             #itemModal .quantity-controls .btn {
-                width: 40px;
-                height: 40px;
-                font-size: 1.2rem;
-                line-height: 40px;
+                width: 32px;
+                height: 32px;
+                font-size: 1rem;
+                line-height: 32px;
             }
             #itemModal .quantity-controls input {
                 width: 50px;
-                height: 40px;
-                font-size: 1rem;
+                height: 32px;
+                font-size: 0.9rem;
             }
             #itemModal .modal-footer .btn-primary {
-                padding: 10px 30px;
-                font-size: 1rem;
+                padding: 8px 15px;
+                font-size: 0.9rem;
             }
             /* Mobile-Specific Filter Form Styles */
             #filter-form {
@@ -1394,8 +1225,7 @@
                 font-size: 1rem;
             }
             #micModal .modal-body #mic-item-image {
-                width: 120px;
-                height: 120px;
+                max-height: 120px;
                 margin-bottom: 8px;
             }
             #micModal .modal-body #mic-item-name {
@@ -1406,10 +1236,43 @@
                 padding: 8px 15px;
                 font-size: 0.9rem;
             }
-            .autocomplete-suggestion img {
-                width: 32px;
-                height: 32px;
-            }
+        }
+        .autocomplete-suggestions {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            background-color: #fff;
+            border: 1px solid #ced4da;
+            border-radius: 4px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            max-height: 150px;
+            overflow-y: auto;
+            z-index: 1000;
+            display: none;
+        }
+        .autocomplete-suggestion {
+            padding: 8px 12px;
+            cursor: pointer;
+            font-size: 0.9rem;
+            color: #333;
+            transition: background-color 0.2s ease;
+        }
+        .autocomplete-suggestion:hover {
+            background-color: #e6f4ea;
+        }
+        .autocomplete-suggestions::-webkit-scrollbar {
+            width: 6px;
+        }
+        .autocomplete-suggestions::-webkit-scrollbar-track {
+            background: #f1f1f1;
+        }
+        .autocomplete-suggestions::-webkit-scrollbar-thumb {
+            background: #0FAA39;
+            border-radius: 10px;
+        }
+        .autocomplete-suggestions::-webkit-scrollbar-thumb:hover {
+            background: #0D9232;
         }
     </style>
 </head>
@@ -1430,7 +1293,6 @@
             <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." autocomplete="off">
             <i class="bi bi-search search-icon"></i>
             <i class="bi bi-mic mic-icon" id="micIcon"></i>
-            <div id="searchSuggestions" class="autocomplete-suggestions"></div>
         </div>
     </div>
 
@@ -1439,7 +1301,7 @@
         <div class="toggle-container">
             <!-- Veg Only Toggle -->
             <input type="checkbox" id="veg-toggle" name="veg"
-                   {% if veg == "Veg" %}checked{% endif %}
+                   {% if selected_category == "Veg" %}checked{% endif %}
                    class="custom-toggle" onchange="handleToggle('veg')"
                    aria-label="Toggle Vegetarian filter">
             <label for="veg-toggle">Veg</label>
@@ -1463,9 +1325,10 @@
                         <label for="custom-dish-name" class="form-label">Dish Name</label>
                         <input type="text" class="form-control" id="custom-dish-name" name="name" required>
                     </div>
-                    <div class="mb-3">
+                    <div class="mb-3 position-relative">
                         <label for="custom-dish-description" class="form-label">Dish Description</label>
                         <textarea class="form-control" id="custom-dish-description" name="description" required></textarea>
+                        <div id="descriptionSuggestions" class="autocomplete-suggestions"></div>
                     </div>
                     <button type="submit" class="btn btn-primary">Submit Custom Dish</button>
                 </form>
@@ -1516,14 +1379,14 @@
                                                      data-item-section="{{ item.Section__c | default(section) }}" 
                                                      data-item-category="{{ selected_category }}"
                                                      data-item-description="{{ item.Description__c | default('No description') }}"
-                                                     data-item-image2="{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}">
+                                                     data-item-image2="{{ item.Image2__c | default(item.Image1__c) }}">
                                                     {% 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 if item.Image2__c else item.Image1__c | default('/static/placeholder.jpg') }}', '{{ item.Description__c | default('No description') }}', '{{ item.Section__c | default(section) }}', '{{ selected_category }}')">
+                                                                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.Section__c | default(section) }}', '{{ selected_category }}')">
                                                             ADD
                                                         </button>
                                                         {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' %}
@@ -1575,7 +1438,7 @@
                     <button type="button" class="btn-close" 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" loading="lazy" decoding="async">
+                    <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;" loading="lazy" decoding="async">
                     <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>
@@ -1662,15 +1525,26 @@
                     {
                         name: "{{ item.Name | default('Unnamed Item') }}",
                         section: "{{ item.Section__c | default(section) }}",
-                        image: "{{ item.Image1__c | default('/static/placeholder.jpg') }}",
-                        price: "{{ item.Price__c | default('0.00') }}",
-                        image2: "{{ item.Image2__c if item.Image2__c else item.Image1__c | default('/static/placeholder.jpg') }}",
-                        description: "{{ item.Description__c | default('No description') }}",
-                        category: "{{ selected_category }}"
+                        image: "{{ item.Image1__c | default('/static/placeholder.jpg') }}"
                     },
                 {% 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",
+            "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)"
+        ];
         function addToCartLocalStorage(payload) {
             let cart = JSON.parse(localStorage.getItem('cart')) || [];
             const existingItem = cart.find(item => 
@@ -1825,426 +1699,473 @@
             modalSectionEl.setAttribute('data-section', section);
             modalSectionEl.setAttribute('data-category', selectedCategory);
             document.getElementById('quantityInput').value = 1;
-            const isVegFilter = document.getElementById('veg-toggle').checked;
-            const vegParam = isVegFilter ? '&veg=Veg' : '';
-            fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}${vegParam}`)
+            fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
                 .then(response => response.json())
                 .then(data => {
                     const addonsList = document.getElementById('addons-list');
                     addonsList.classList.remove('addon-loading');
                     addonsList.innerHTML = '';
                     if (!data.success || !data.addons || data.addons.length === 0) {
-                        const noAddonsMessage = document.createElement('p');
-                        noAddonsMessage.textContent = 'No add-ons available for this item.';
-                        noAddonsMessage.className = 'text-muted';
-                        addonsList.appendChild(noAddonsMessage);
-                    } else {
-                        data.addons.forEach(addon => {
-                            const addonSection = document.createElement('div');
-                            addonSection.className = 'addon-section';
-                            const addonHeader = document.createElement('h6');
-                            addonHeader.textContent = addon.section;
-                            addonHeader.setAttribute('data-bs-toggle', 'collapse');
-                            addonHeader.setAttribute('data-bs-target', `#addon-collapse-${addon.section.replace(/\s+/g, '-')}`);
-                            addonHeader.setAttribute('aria-expanded', 'true');
-                            addonHeader.setAttribute('aria-controls', `addon-collapse-${addon.section.replace(/\s+/g, '-')}`);
-                            addonSection.appendChild(addonHeader);
-                            const addonCollapse = document.createElement('div');
-                            addonCollapse.id = `addon-collapse-${addon.section.replace(/\s+/g, '-')}`;
-                            addonCollapse.className = 'addon-options collapse show';
-                            addon.items.forEach(item => {
-                                const addonItem = document.createElement('div');
-                                addonItem.className = 'form-check';
-                                const input = document.createElement('input');
-                                input.type = 'checkbox';
-                                input.className = 'form-check-input';
-input.id = `addon-${item.name.replace(/\s+/g, '-')}`;
-input.setAttribute('data-price', item.price || 0);
-input.setAttribute('data-name', item.name);
-input.setAttribute('data-section', addon.section);
-input.addEventListener('change', updateModalPrice);
-const label = document.createElement('label');
-label.className = 'form-check-label';
-label.htmlFor = `addon-${item.name.replace(/\s+/g, '-')}`;
-label.textContent = item.name;
-if (item.price > 0) {
-    const priceSpan = document.createElement('span');
-    priceSpan.className = 'extra-charge';
-    priceSpan.textContent = `+$${parseFloat(item.price).toFixed(2)}`;
-    label.appendChild(priceSpan);
-}
-addonItem.appendChild(input);
-addonItem.appendChild(label);
-addonCollapse.appendChild(addonItem);
-});
-addonSection.appendChild(addonCollapse);
-addonsList.appendChild(addonSection);
-});
-}
-})
-.catch(err => {
-    console.error('Error fetching addons:', err);
-    const addonsList = document.getElementById('addons-list');
-    addonsList.classList.remove('addon-loading');
-    addonsList.innerHTML = '<p class="text-muted">Failed to load add-ons.</p>';
-});
-}
-function addToCartFromModal() {
-    if (isProcessingRequest) return;
-    isProcessingRequest = true;
-    const itemName = document.getElementById('modal-name').innerText;
-    const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
-    const instructions = document.getElementById('modal-instructions').value;
-    const selectedAddOns = Array.from(
-        document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
-    ).map(addon => ({
-        section: addon.getAttribute('data-section'),
-        name: addon.getAttribute('data-name'),
-        price: parseFloat(addon.getAttribute('data-price')) || 0
-    }));
-    const modalSectionEl = document.getElementById('modal-section');
-    const section = modalSectionEl.getAttribute('data-section');
-    const selectedCategory = modalSectionEl.getAttribute('data-category');
-    const totalAddOnPrice = selectedAddOns.reduce((sum, addon) => sum + addon.price, 0);
-    const totalPrice = (baseItemPrice + totalAddOnPrice);
-    const modalImg = document.getElementById('modal-img').src;
-    const cartPayload = {
-        itemName: itemName,
-        itemPrice: totalPrice,
-        itemImage: modalImg,
-        section: section,
-        category: selectedCategory,
-        addons: selectedAddOns,
-        instructions: instructions,
-        quantity: quantity
-    };
-    fetch('/cart/add', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(cartPayload)
-    })
-    .then(response => response.json())
-    .then(data => {
-        isProcessingRequest = false;
-        if (data.success) {
-            updateCartUI(data.cart);
-            const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
-            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('itemModal'));
-            modal.hide();
-        }
-    })
-    .catch(err => {
-        isProcessingRequest = false;
-        console.error('Error adding item to cart:', err);
-        const cart = addToCartLocalStorage(cartPayload);
-        updateCartUI(cart);
-        const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
-        modal.hide();
-    });
-}
-function resetMicModal() {
-    const micStatus = document.getElementById('mic-status');
-    const micItemDetails = document.getElementById('mic-item-details');
-    const micItemName = document.getElementById('mic-item-name');
-    const micItemImage = document.getElementById('mic-item-image');
-    micStatus.textContent = 'Say the name of a menu item...';
-    micStatus.style.display = 'block';
-    micItemDetails.style.display = 'none';
-    micItemName.textContent = '';
-    micItemImage.src = '/static/placeholder.jpg';
-}
-function stopSpeechRecognition() {
-    if (recognition) {
-        recognition.stop();
-        const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
-        if (micModal) {
-            micModal.hide();
-            resetMicModal();
-        }
-    }
-}
-function handleToggle(toggleType) {
-    const vegToggle = document.getElementById('veg-toggle');
-    const customToggle = document.getElementById('category-CustomizedDish');
-    let url = '/menu?';
-    const params = [];
-    if (toggleType === 'veg' && vegToggle.checked) {
-        params.push('veg=Veg');
-        customToggle.checked = false;
-    } else if (toggleType === 'custom' && customToggle.checked) {
-        params.push('category=Customized+Dish');
-        vegToggle.checked = false;
-    }
-    url += params.join('&');
-    window.location.href = url;
-}
-document.addEventListener('DOMContentLoaded', function () {
-    const avatarIcon = document.querySelector('.avatar-icon');
-    const dropdownMenu = document.querySelector('.dropdown-menu');
-    avatarIcon.addEventListener('click', function () {
-        dropdownMenu.classList.toggle('show');
-    });
-    document.addEventListener('click', function (event) {
-        if (!avatarIcon.contains(event.target) && !dropdownMenu.contains(event.target)) {
-            dropdownMenu.classList.remove('show');
-        }
-    });
-    const searchBar = document.getElementById('searchBar');
-    const searchSuggestions = document.getElementById('searchSuggestions');
-    searchBar.addEventListener('input', debounce(function () {
-        const query = searchBar.value.trim().toLowerCase();
-        searchSuggestions.innerHTML = '';
-        if (query.length < 2) {
-            searchSuggestions.style.display = 'none';
-            return;
-        }
-        const filteredItems = menuItems.filter(item =>
-            item.name.toLowerCase().includes(query) || item.section.toLowerCase().includes(query)
-        );
-        if (filteredItems.length === 0) {
-            searchSuggestions.style.display = 'none';
-            return;
-        }
-        filteredItems.forEach(item => {
-            const suggestion = document.createElement('div');
-            suggestion.classList.add('autocomplete-suggestion');
-            const img = document.createElement('img');
-            img.src = item.image || '/static/placeholder.jpg';
-            img.alt = item.name;
-            suggestion.appendChild(img);
-            const text = document.createElement('span');
-            text.textContent = item.name;
-            suggestion.appendChild(text);
-            suggestion.addEventListener('click', () => {
-                const card = document.querySelector(`.menu-card[data-item-name="${item.name}"]`);
-                if (card) {
-                    card.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                    card.classList.add('highlighted');
-                    setTimeout(() => card.classList.remove('highlighted'), 2000);
-                    const buttonContainer = card.querySelector('.button-container');
-                    if (item.section === 'Soft Drinks') {
-                        showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
-                    } else {
-                        showItemDetails(
-                            item.name,
-                            item.price,
-                            item.image2 || item.image,
-                            item.description,
-                            item.section,
-                            item.category
-                        );
-                        const modal = new bootstrap.Modal(document.getElementById('itemModal'));
-                        modal.show();
+                        addonsList.innerHTML = '<p>No customization options available.</p>';
+                        return;
                     }
-                    searchBar.value = '';
-                    searchSuggestions.innerHTML = '';
-                    searchSuggestions.style.display = 'none';
+                    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');
+                        optionsContainer.classList.add('addon-options');
+                        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}"
+                                       aria-label="Select ${option} for ${addon.name}">
+                                <label class="form-check-label" for="${optionId}">
+                                    ${option} ${addon.extra_charge ? `<span class="extra-charge">($${addon.extra_charge_amount.toFixed(2)})</span>` : ''}
+                                </label>
+                            `;
+                            optionsContainer.appendChild(listItem);
+                        });
+                        sectionDiv.appendChild(optionsContainer);
+                        addonsList.appendChild(sectionDiv);
+                    });
+                    const addonSections = addonsList.querySelectorAll('.addon-section');
+                    addonSections.forEach(section => {
+                        const title = section.querySelector('h6');
+                        const options = section.querySelector('.addon-options');
+                        title.addEventListener('click', () => {
+                            section.classList.toggle('collapsed');
+                            options.classList.toggle('collapsed');
+                        });
+                    });
+                    document.querySelectorAll('.addon-option').forEach(checkbox => {
+                        checkbox.addEventListener('change', updateModalPrice);
+                    });
+                    document.querySelectorAll('.addon-option').forEach(checkbox => {
+                        checkbox.addEventListener('change', function () {
+                            const groupName = this.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 && this.checked) {
+                                document.querySelectorAll(`.addon-option[data-group="${groupName}"]`).forEach(otherCheckbox => {
+                                    if (otherCheckbox !== this) {
+                                        otherCheckbox.checked = false;
+                                    }
+                                });
+                            }
+                        });
+                    });
+                    if (window.most_common_addons && window.most_common_addons.length > 0) {
+                        const checkboxes = document.querySelectorAll('.addon-option');
+                        const categorySelection = {
+                            "Select Spice Level": null,
+                            "Choose Spice Level": null,
+                            "Raita/Sides": [],
+                        };
+                        for (let spice of window.most_common_addons) {
+                            const isSpiceLevel = ["Mild", "Medium", "Spicy", "Extra Spicy"].includes(spice);
+                            if (isSpiceLevel) {
+                                checkboxes.forEach(checkbox => {
+                                    const checkboxName = checkbox.getAttribute('data-name').trim();
+                                    const checkboxGroup = checkbox.getAttribute('data-group');
+                                    if ((checkboxGroup === "Select Spice Level" || checkboxGroup === "Choose Spice Level") &&
+                                        checkboxName === spice && categorySelection[checkboxGroup] === null) {
+                                        console.log(`Pre-selecting highest-count spice level: ${checkboxName}`);
+                                        checkbox.checked = true;
+                                        categorySelection[checkboxGroup] = checkboxName;
+                                    }
+                                });
+                                if (categorySelection["Select Spice Level"] || categorySelection["Choose Spice Level"]) break;
+                            }
+                        }
+                        checkboxes.forEach(checkbox => {
+                            const checkboxName = checkbox.getAttribute('data-name').trim();
+                            const checkboxGroup = checkbox.getAttribute('data-group');
+                            if (checkboxGroup === "Raita/Sides" && window.most_common_addons.includes(checkboxName)) {
+                                console.log(`Pre-selecting add-on: ${checkboxName}`);
+                                checkbox.checked = true;
+                                categorySelection["Raita/Sides"].push(checkboxName);
+                            }
+                        });
+                    }
+                })
+                .catch(err => {
+                    console.error('Error fetching add-ons:', err);
+                    document.getElementById('addons-list').classList.remove('addon-loading');
+                    document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
+                });
+        }
+        function addToCartFromModal() {
+            if (isProcessingRequest) return;
+            isProcessingRequest = true;
+            const modalSectionEl = document.getElementById('modal-section');
+            const section = modalSectionEl.getAttribute('data-section');
+            const selectedCategory = modalSectionEl.getAttribute('data-category');
+            const itemName = document.getElementById('modal-name').innerText;
+            const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', '')) || 0;
+            const itemImage = document.getElementById('modal-img').src;
+            const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
+            const instructions = document.getElementById('modal-instructions').value;
+            const selectedAddOns = Array.from(
+                document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
+            ).map(addon => ({
+                name: addon.getAttribute('data-name'),
+                price: parseFloat(addon.getAttribute('data-price')) || 0
+            }));
+            if (!itemName || isNaN(itemPrice) || !section || !itemImage || quantity < 1) {
+                console.error('Invalid cart item data:', { itemName, itemPrice, section, itemImage, quantity });
+                alert('Invalid item data. Please try again.');
+                isProcessingRequest = false;
+                return;
+            }
+            const cartPayload = {
+                itemName: itemName,
+                itemPrice: itemPrice,
+                itemImage: itemImage,
+                section: section,
+                category: selectedCategory,
+                addons: selectedAddOns,
+                instructions: instructions,
+                quantity: quantity
+            };
+            fetch('/cart/add', {
+                method: 'POST',
+                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('itemModal'));
+                    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('itemModal'));
+                    modal.hide();
                 }
+            })
+            .catch(err => {
+                console.error('Error adding item to cart:', err);
+                const cart = addToCartLocalStorage(cartPayload);
+                updateCartUI(cart);
+                const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
+                modal.hide();
+            })
+            .finally(() => {
+                isProcessingRequest = false;
             });
-            searchSuggestions.appendChild(suggestion);
-        });
-        searchSuggestions.style.display = 'block';
-    }, 300));
-    document.addEventListener('click', function (event) {
-        if (!searchBar.contains(event.target) && !searchSuggestions.contains(event.target)) {
-            searchSuggestions.style.display = 'none';
-        }
-    });
-    if (localStorage.getItem('selectedItem')) {
-        try {
-            const selectedItem = JSON.parse(localStorage.getItem('selectedItem'));
-            const card = document.querySelector(`.menu-card[data-item-name="${selectedItem.name}"]`);
-            if (card) {
-                card.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                card.classList.add('highlighted');
-                setTimeout(() => card.classList.remove('highlighted'), 2000);
-                const buttonContainer = card.querySelector('.button-container');
-                if (selectedItem.section === 'Soft Drinks') {
-                    showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
-                } else {
-                    showItemDetails(
-                        selectedItem.name,
-                        selectedItem.price,
-                        selectedItem.image2 || selectedItem.image,
-                        selectedItem.description,
-                        selectedItem.section,
-                        selectedItem.category
-                    );
-                    const modal = new bootstrap.Modal(document.getElementById('itemModal'));
-                    modal.show();
+        }
+        function handleToggle(source) {
+            const form = document.getElementById("filter-form");
+            const veg = document.getElementById("veg-toggle");
+            const custom = document.getElementById("category-CustomizedDish");
+            if (source === 'veg') {
+                if (veg.checked) {
+                    custom.checked = false;
+                }
+            } else if (source === 'custom') {
+                if (custom.checked) {
+                    veg.checked = false;
                 }
             }
-            localStorage.removeItem('selectedItem');
-        } catch (err) {
-            console.error('Error processing selected item:', err);
-            localStorage.removeItem('selectedItem');
-        }
-    }
-    document.querySelectorAll('.media-wrapper').forEach(wrapper => {
-        const video = wrapper.querySelector('.menu-video');
-        const image = wrapper.querySelector('.menu-image');
-        wrapper.addEventListener('mouseenter', () => {
-            image.classList.add('hidden');
-            video.classList.add('active');
-            video.play().catch(err => {
-                console.error('Video playback failed:', err);
-                image.classList.remove('hidden');
-                video.classList.remove('active');
-            });
-        });
-        wrapper.addEventListener('mouseleave', () => {
-            video.classList.remove('active');
-            video.pause();
-            video.currentTime = 0;
-            image.classList.remove('hidden');
-        });
-        let touchTimeout;
-        wrapper.addEventListener('touchstart', (e) => {
-            e.preventDefault();
-            clearTimeout(touchTimeout);
-            wrapper.classList.add('touched');
-            image.classList.add('hidden');
-            video.classList.add('active');
-            video.play().catch(err => {
-                console.error('Video playback failed:', err);
-                image.classList.remove('hidden');
-                video.classList.remove('active');
-                wrapper.classList.remove('touched');
-            });
-        });
-        wrapper.addEventListener('touchend', () => {
-            touchTimeout = setTimeout(() => {
-                video.pause();
-                video.classList.remove('active');
-                image.classList.remove('hidden');
-                wrapper.classList.remove('touched');
-            }, 500);
-        });
-    });
-    const decreaseBtn = document.getElementById('decreaseQuantity');
-    const increaseBtn = document.getElementById('increaseQuantity');
-    const quantityInput = document.getElementById('quantityInput');
-    decreaseBtn.addEventListener('click', () => {
-        let value = parseInt(quantityInput.value) || 1;
-        if (value > 1) {
-            quantityInput.value = value - 1;
-        }
-    });
-    increaseBtn.addEventListener('click', () => {
-        let value = parseInt(quantityInput.value) || 1;
-        quantityInput.value = value + 1;
-    });
-    document.querySelectorAll('.toggle-details').forEach(link => {
-        link.addEventListener('click', () => {
-            const details = link.nextElementSibling;
-            if (details.classList.contains('show')) {
-                details.classList.remove('show');
-                link.textContent = 'Show Details';
-            } else {
-                details.classList.add('show');
-                link.textContent = 'Hide Details';
+            if (!custom.checked && !veg.checked) {
+                custom.checked = false;
             }
-        });
-    });
-    fetch('/cart')
-        .then(response => response.json())
-        .then(data => {
-            if (data.success) {
-                updateCartUI(data.cart);
-            } else {
-                updateCartUI(getCartLocalStorage());
+            form.submit();
+        }
+        function stopSpeechRecognition() {
+            if (recognition) {
+                recognition.stop();
+                document.getElementById('micIcon').classList.remove('active');
+                const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
+                if (micModal) {
+                    micModal.hide();
+                    resetMicModal();
+                }
             }
-        })
-        .catch(err => {
-            console.error('Error fetching cart:', err);
-            updateCartUI(getCartLocalStorage());
-        });
-    if ('webkitSpeechRecognition' in window) {
-        recognition = new webkitSpeechRecognition();
-        recognition.continuous = false;
-        recognition.interimResults = false;
-        recognition.lang = 'en-US';
-        recognition.onstart = () => {
-            document.getElementById('mic-icon-animation').classList.add('active');
-            document.getElementById('mic-status').textContent = 'Listening...';
-        };
-        recognition.onresult = (event) => {
-            const transcript = event.results[0][0].transcript.trim().toLowerCase();
-            console.log('Recognized speech:', transcript);
-            const matchedItem = menuItems.find(item => 
-                item.name.toLowerCase().includes(transcript)
-            );
-            if (matchedItem) {
-                const micStatus = document.getElementById('mic-status');
-                const micItemDetails = document.getElementById('mic-item-details');
-                const micItemName = document.getElementById('mic-item-name');
-                const micItemImage = document.getElementById('mic-item-image');
-                micStatus.style.display = 'none';
-                micItemDetails.style.display = 'block';
-                micItemName.textContent = matchedItem.name;
-                micItemImage.src = matchedItem.image || '/static/placeholder.jpg';
-                setTimeout(() => {
-                    recognition.stop();
-                    const card = document.querySelector(`.menu-card[data-item-name="${matchedItem.name}"]`);
-                    if (card) {
-                        card.classList.add('highlighted');
-                        card.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                        setTimeout(() => card.classList.remove('highlighted'), 2000);
-                        const buttonContainer = card.querySelector('.button-container');
-                        if (buttonContainer) {
-                            if (matchedItem.section === 'Soft Drinks') {
-                                showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
-                            } else {
-                                showItemDetails(
-                                    matchedItem.name,
-                                    matchedItem.price,
-                                    matchedItem.image2 || matchedItem.image,
-                                    matchedItem.description,
-                                    matchedItem.section,
-                                    matchedItem.category
-                                );
-                                const modal = new bootstrap.Modal(document.getElementById('itemModal'));
-                                modal.show();
-                            }
-                        }
-                        const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
-                        if (micModal) {
+        }
+        function resetMicModal() {
+            document.getElementById('mic-status').textContent = 'Say the name of a menu item...';
+            document.getElementById('mic-status').style.display = 'block';
+            document.getElementById('mic-item-details').style.display = 'none';
+            document.getElementById('mic-item-image').src = '';
+            document.getElementById('mic-item-name').textContent = '';
+        }
+        document.addEventListener('DOMContentLoaded', function () {
+            const avatarContainer = document.querySelector('.avatar-dropdown-container');
+            const dropdownMenu = document.querySelector('.dropdown-menu');
+            avatarContainer.addEventListener('click', function (event) {
+                event.stopPropagation();
+                dropdownMenu.classList.toggle('show');
+            });
+            document.addEventListener('click', function (event) {
+                if (!avatarContainer.contains(event.target)) {
+                    dropdownMenu.classList.remove('show');
+                }
+            });
+            const dropdownItems = document.querySelectorAll('.dropdown-item');
+            dropdownItems.forEach(item => {
+                item.addEventListener('click', function () {
+                    dropdownMenu.classList.remove('show');
+                                  });
+            });
+
+            // Search functionality
+            const searchBar = document.getElementById('searchBar');
+            searchBar.addEventListener('input', debounce(() => {
+                const query = searchBar.value.toLowerCase();
+                document.querySelectorAll('.menu-card').forEach(card => {
+                    const itemName = card.getAttribute('data-item-name').toLowerCase();
+                    const section = card.getAttribute('data-item-section').toLowerCase();
+                    if (itemName.includes(query) || section.includes(query)) {
+                        card.style.display = 'block';
+                    } else {
+                        card.style.display = 'none';
+                    }
+                });
+            }, 300));
+
+            // Enhanced video hover handling for desktop and touch for mobile
+            document.querySelectorAll('.media-wrapper').forEach(wrapper => {
+                const video = wrapper.querySelector('.menu-video');
+                const image = wrapper.querySelector('.menu-image');
+
+                // Desktop hover events
+                wrapper.addEventListener('mouseenter', () => {
+                    image.classList.add('hidden');
+                    video.classList.add('active');
+                    video.play().catch(err => {
+                        console.error('Video playback failed:', err);
+                        image.classList.remove('hidden');
+                        video.classList.remove('active');
+                    });
+                });
+                wrapper.addEventListener('mouseleave', () => {
+                    video.classList.remove('active');
+                    video.pause();
+                    video.currentTime = 0;
+                    image.classList.remove('hidden');
+                });
+
+                // Mobile touch events
+                let touchTimeout;
+                wrapper.addEventListener('touchstart', (e) => {
+                    e.preventDefault();
+                    wrapper.classList.add('touched');
+                    image.classList.add('hidden');
+                    video.classList.add('active');
+                    video.play().catch(err => {
+                        console.error('Video playback failed:', err);
+                        image.classList.remove('hidden');
+                        video.classList.remove('active');
+                    });
+                    touchTimeout = setTimeout(() => {
+                        video.pause();
+                        video.classList.remove('active');
+                        image.classList.remove('hidden');
+                        wrapper.classList.remove('touched');
+                    }, 3000);
+                });
+                wrapper.addEventListener('touchend', () => {
+                    clearTimeout(touchTimeout);
+                    setTimeout(() => {
+                        video.pause();
+                        video.classList.remove('active');
+                        image.classList.remove('hidden');
+                        wrapper.classList.remove('touched');
+                    }, 500);
+                });
+            });
+
+            // Quantity controls for item modal
+            const decreaseBtn = document.getElementById('decreaseQuantity');
+            const increaseBtn = document.getElementById('increaseQuantity');
+            const quantityInput = document.getElementById('quantityInput');
+
+            decreaseBtn.addEventListener('click', () => {
+                let value = parseInt(quantityInput.value) || 1;
+                if (value > 1) {
+                    quantityInput.value = value - 1;
+                }
+            });
+
+            increaseBtn.addEventListener('click', () => {
+                let value = parseInt(quantityInput.value) || 1;
+                quantityInput.value = value + 1;
+            });
+
+            // Toggle item details
+            document.querySelectorAll('.toggle-details').forEach(link => {
+                link.addEventListener('click', () => {
+                    const details = link.nextElementSibling;
+                    if (details.classList.contains('show')) {
+                        details.classList.remove('show');
+                        link.textContent = 'Show Details';
+                    } else {
+                        details.classList.add('show');
+                        link.textContent = 'Hide Details';
+                    }
+                });
+            });
+
+            // Initialize cart UI
+            fetch('/cart')
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        updateCartUI(data.cart);
+                    } else {
+                        updateCartUI(getCartLocalStorage());
+                    }
+                })
+                .catch(err => {
+                    console.error('Error fetching cart:', err);
+                    updateCartUI(getCartLocalStorage());
+                });
+
+            // Enhanced speech recognition setup
+            if ('webkitSpeechRecognition' in window) {
+                recognition = new webkitSpeechRecognition();
+                recognition.continuous = false;
+                recognition.interimResults = false;
+                recognition.lang = 'en-US';
+
+                recognition.onstart = () => {
+                    document.getElementById('micIcon').classList.add('active');
+                    document.getElementById('mic-status').textContent = 'Listening...';
+                };
+
+                recognition.onresult = (event) => {
+                    const transcript = event.results[0][0].transcript.trim().toLowerCase();
+                    console.log('Recognized speech:', transcript);
+                    const matchedItem = menuItems.find(item => 
+                        item.name.toLowerCase().includes(transcript)
+                    );
+
+                    if (matchedItem) {
+                        // Show item details in mic modal
+                        document.getElementById('mic-status').style.display = 'none';
+                        document.getElementById('mic-item-details').style.display = 'block';
+                        document.getElementById('mic-item-name').textContent = matchedItem.name;
+                        document.getElementById('mic-item-image').src = matchedItem.image;
+
+                        // Stop recognition and hide modal after 2 seconds
+                        recognition.stop();
+                        setTimeout(() => {
+                            const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
                             micModal.hide();
                             resetMicModal();
-                        }
+
+                            // Navigate to the matched item
+                            const card = document.querySelector(`.menu-card[data-item-name="${matchedItem.name}"]`);
+                            if (card) {
+                                card.classList.add('highlighted');
+                                card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                                setTimeout(() => card.classList.remove('highlighted'), 3000);
+                                const buttonContainer = card.querySelector('.button-container');
+                                if (buttonContainer) {
+                                    if (matchedItem.section === 'Soft Drinks') {
+                                        showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
+                                    } else {
+                                        showItemDetails(
+                                            buttonContainer.getAttribute('data-item-name'),
+                                            buttonContainer.getAttribute('data-item-price'),
+                                            buttonContainer.getAttribute('data-item-image2'),
+                                            buttonContainer.getAttribute('data-item-description'),
+                                            matchedItem.section,
+                                            buttonContainer.getAttribute('data-item-category')
+                                        );
+                                        const modal = new bootstrap.Modal(document.getElementById('itemModal'));
+                                        modal.show();
+                                    }
+                                }
+                            }
+                        }, 2000);
+                    } else {
+                        document.getElementById('mic-status').textContent = 'Item not found. Try again.';
                     }
-                }, 2000);
+                };
+
+                recognition.onerror = (event) => {
+                    console.error('Speech recognition error:', event.error);
+                    document.getElementById('mic-status').textContent = 'Error occurred. Please try again.';
+                    document.getElementById('micIcon').classList.remove('active');
+                };
+
+                recognition.onend = () => {
+                    document.getElementById('micIcon').classList.remove('active');
+                };
+
+                document.getElementById('micIcon').addEventListener('click', () => {
+                    if (!recognition) return;
+                    const micModal = new bootstrap.Modal(document.getElementById('micModal'));
+                    micModal.show();
+                    resetMicModal();
+                    recognition.start();
+                });
             } else {
-                document.getElementById('mic-status').textContent = 'Item not found. Try again.';
-            }
-        };
-        recognition.onerror = (event) => {
-            console.error('Speech recognition error:', event.error);
-            document.getElementById('mic-status').textContent = 'Error occurred. Please try again.';
-            document.getElementById('mic-icon-animation').classList.remove('active');
-        };
-        recognition.onend = () => {
-            document.getElementById('mic-icon-animation').classList.remove('active');
-        };
-        document.getElementById('micIcon').addEventListener('click', () => {
-            if (!recognition) return;
-            const micModal = new bootstrap.Modal(document.getElementById('micModal'));
-            micModal.show();
-            resetMicModal();
-            recognition.start();
+                document.getElementById('micIcon').style.display = 'none';
+            }
+
+            // Autocomplete for custom dish description
+            const descriptionInput = document.getElementById('custom-dish-description');
+            const suggestionsContainer = document.getElementById('descriptionSuggestions');
+
+            if (descriptionInput && suggestionsContainer) {
+                descriptionInput.addEventListener('input', debounce(() => {
+                    const query = descriptionInput.value.toLowerCase();
+                    suggestionsContainer.innerHTML = '';
+
+                    if (query.length < 2) {
+                        suggestionsContainer.style.display = 'none';
+                        return;
+                    }
+
+                    const filteredIngredients = ingredientsList.filter(ingredient =>
+                        ingredient.toLowerCase().includes(query)
+                    );
+
+                    if (filteredIngredients.length === 0) {
+                        suggestionsContainer.style.display = 'none';
+                        return;
+                    }
+
+                    filteredIngredients.forEach(ingredient => {
+                        const suggestionItem = document.createElement('div');
+                        suggestionItem.classList.add('autocomplete-suggestion');
+                        suggestionItem.textContent = ingredient;
+                        suggestionItem.addEventListener('click', () => {
+                            const currentValue = descriptionInput.value;
+                            const words = currentValue.split(' ');
+                            words[words.length - 1] = ingredient;
+                            descriptionInput.value = words.join(' ') + ' ';
+                            suggestionsContainer.innerHTML = '';
+                            suggestionsContainer.style.display = 'none';
+                            descriptionInput.focus();
+                        });
+                        suggestionsContainer.appendChild(suggestionItem);
+                    });
+
+                    suggestionsContainer.style.display = 'block';
+                }, 300));
+
+                document.addEventListener('click', (event) => {
+                    if (!descriptionInput.contains(event.target) && !suggestionsContainer.contains(event.target)) {
+                        suggestionsContainer.style.display = 'none';
+                    }
+                });
+            }
         });
-        document.getElementById('stopMicBtn').addEventListener('click', stopSpeechRecognition);
-    } else {
-        document.getElementById('micIcon').style.display = 'none';
-    }
-});
-</script>
+    </script>
 </body>
-</html>
+</html>
+</xaiArtifact>