Update templates/menu.html

templates/menu.html

@@ -7,26 +7,42 @@
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
+    
     <!-- Preload Critical Resources -->
-    <link rel="preload" href="/static/placeholder.mp4" as="video">
+    <link rel="preload" href="/static/placeholder.mp4" as="video" type="video/mp4">
     {% for section, items in ordered_menu.items() %}
         {% for item in items[:1] %}
-            <link rel="preload" href="{{ item.Video1__c | default('/static/placeholder.mp4') }}" as="video" fetchpriority="high">
+            <link rel="preload" href="{{ item.Video1__c | default('/static/placeholder.mp4') }}" as="video" type="video/mp4" fetchpriority="high" media="(min-width: 768px)">
         {% endfor %}
     {% endfor %}
+    
     <style>
+        :root {
+            --primary-color: #0FAA39;
+            --primary-hover: #0D9232;
+            --primary-active: #0B7A29;
+            --secondary-color: #FFA07A;
+            --secondary-hover: #FF8C61;
+            --background-color: #fdf4e3;
+            --text-color: #333333;
+            --card-shadow: 0 4px 8px rgba(0,0,0,0.1);
+        }
+        
         body {
-            font-family: Arial, sans-serif;
-            background-color: #fdf4e3;
+            font-family: 'Segoe UI', Arial, sans-serif;
+            background-color: var(--background-color);
             margin: 0;
             padding: 0;
             display: flex;
             flex-direction: column;
             padding-bottom: 70px;
+            color: var(--text-color);
         }
+        
         .container {
             max-width: 900px;
         }
+        
         .menu-card {
             max-width: 350px;
             border-radius: 15px;
@@ -37,55 +53,70 @@
             flex-direction: column;
             opacity: 0;
             transition: opacity 0.3s ease-in-out;
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            box-shadow: var(--card-shadow);
         }
+        
         .menu-card.visible {
             opacity: 1;
         }
+        
         .video-container {
-            transition: all 0.3s ease;
             position: relative;
-        }
-        .video-container.video-error .video-fallback {
-            opacity: 1 !important;
-        }
-        .video-container.video-error video {
-            display: none !important;
-        }
-        .video-container:focus-within {
-            outline: 2px solid #3a86ff;
-            outline-offset: 2px;
-        }
-        .menu-video {
+            width: 100%;
             height: 200px;
+            overflow: hidden;
+            border-radius: 15px 15px 0 0;
+            background-color: #000;
+            transition: all 0.3s ease;
+        }
+        
+        .video-container video {
             width: 100%;
+            height: 100%;
             object-fit: cover;
-            border-radius: 15px 15px 0 0;
             opacity: 0;
             transition: opacity 0.5s ease-in-out;
-            background-color: #000;
         }
-        .menu-video.loaded {
+        
+        .video-container.video-loaded video {
             opacity: 1;
         }
-        .menu-card:hover .menu-video {
+        
+        .video-container .video-fallback {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        
+        .video-container.video-error .video-fallback {
             opacity: 1;
-            transform: scale(1.05);
         }
+        
+        .video-container.video-error video {
+            display: none;
+        }
+        
         .menu-card .card-body .card-title {
             font-size: 1.2rem;
             font-weight: 600;
             margin: 10px 0;
-            color: #333333;
+            color: var(--text-color);
         }
+        
         .menu-card .card-body .card-text.price {
             font-size: 1rem;
             font-weight: 500;
             color: #000000;
             margin-bottom: 5px;
         }
+        
         .addbutton .btn {
-            background-color: #28a745;
+            background-color: var(--primary-color);
             color: white;
             padding: 10px 20px;
             font-size: 16px;
@@ -95,9 +126,11 @@
             transition: background-color 0.3s ease;
             margin-left: 13px;
         }
+        
         .addbutton .btn:hover {
-            background-color: #218838;
+            background-color: var(--primary-hover);
         }
+        
         .button-container {
             display: flex;
             flex-direction: column;
@@ -105,40 +138,44 @@
             justify-content: center;
             gap: 6px;
         }
+        
         .customisable-text {
-            color: #0FAA39;
+            color: var(--primary-color);
             font-size: 10px;
             font-weight: 500;
             margin: 0;
             text-align: center;
             line-height: 1;
         }
+        
         .btn-primary {
             font-size: 12px;
             font-weight: bold;
             border-radius: 8px;
             width: 70px;
             height: 35px;
-            background-color: #0FAA39;
-            border-color: #0FAA39;
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
             display: flex;
             align-items: center;
             justify-content: center;
             padding: 0;
             transition: background-color 0.3s ease, transform 0.1s ease;
         }
+        
         .btn-primary:hover {
-            background-color: #0D9232;
-            border-color: #0D9232;
-            transform: scale(1.05);
+            background-color: var(--primary-hover);
+            border-color: var(--primary-hover);
         }
+        
         .btn-primary:active,
         .btn-primary:focus {
-            background-color: #0B7A29;
-            border-color: #0B7A29;
+            background-color: var(--primary-active);
+            border-color: var(--primary-active);
             box-shadow: none;
             transform: scale(0.98);
         }
+        
         .avatar-dropdown-container {
             position: absolute;
             right: 10px;
@@ -148,6 +185,7 @@
             align-items: right;
             justify-content: center;
         }
+        
         .avatar-icon {
             width: 40px;
             height: 40px;
@@ -161,6 +199,7 @@
             font-size: 20px;
             font-weight: bold;
         }
+        
         .dropdown-menu {
             position: absolute;
             right: 0;
@@ -172,6 +211,7 @@
             display: none;
             border: 1px solid #ffd8b1;
         }
+        
         .dropdown-menu .dropdown-item {
             padding: 12px 16px;
             text-decoration: none;
@@ -181,20 +221,23 @@
             font-size: 15px;
             transition: background-color 0.2s ease;
         }
+        
         .dropdown-menu .dropdown-item:last-child {
             border-bottom: none;
         }
+        
         .dropdown-menu .dropdown-item:hover {
             background-color: #ffe4c4;
             color: #333;
         }
+        
         .fixed-top-bar {
             position: relative;
             top: 0;
             left: 0;
             width: 100%;
             height: 54px;
-            background: linear-gradient(45deg, #FFA07A, #FFB347);
+            background: linear-gradient(45deg, var(--secondary-color), #FFB347);
             color: white;
             padding: 15px;
             display: flex;
@@ -202,6 +245,7 @@
             align-items: center;
             z-index: 1000;
         }
+        
         .search-bar-container {
             position: absolute;
             left: 20px;
@@ -213,6 +257,7 @@
             max-width: 90%;
             position: relative;
         }
+        
         .search-bar-container input {
             width: 100%;
             padding: 8px 40px 8px 40px;
@@ -223,15 +268,18 @@
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
             outline: none;
         }
+        
         .search-bar-container input::placeholder {
             color: #888;
         }
+        
         .search-icon {
             position: absolute;
             left: 15px;
             font-size: 18px;
             color: #888;
         }
+        
         .mic-icon {
             position: absolute;
             right: 15px;
@@ -240,9 +288,11 @@
             cursor: pointer;
             transition: color 0.3s ease;
         }
+        
         .mic-icon.active {
             color: #007bff;
         }
+        
         .autocomplete-suggestions {
             position: absolute;
             top: 100%;
@@ -257,15 +307,18 @@
             z-index: 1000;
             display: none;
         }
+        
         .autocomplete-suggestions .suggestion-item {
             padding: 8px 15px;
             cursor: pointer;
             font-size: 14px;
             color: #333;
         }
+        
         .autocomplete-suggestions .suggestion-item:hover {
             background-color: #f1f1f1;
         }
+        
         .addon-section {
             background-color: #fff;
             border: 2px solid #ffa500;
@@ -273,18 +326,21 @@
             padding: 12px;
             margin-bottom: 10px;
         }
+        
         .addon-section h6 {
             margin-bottom: 10px;
             font-size: 1.1rem;
             font-weight: bold;
             color: #343a40;
         }
+        
         .addon-section .form-check {
             display: inline-flex;
             align-items: center;
             margin-left: 10px;
             color: #343a40;
         }
+        
         .addon-section .form-check-input {
             -webkit-appearance: none;
             -moz-appearance: none;
@@ -297,10 +353,12 @@
             position: relative;
             margin-right: 10px;
         }
+        
         .addon-section .form-check-input:checked {
             background-color: #006400;
             border-color: #006400;
         }
+        
         .addon-section .form-check-input:checked::before {
             content: '\2713';
             font-size: 14px;
@@ -309,6 +367,7 @@
             left: 4px;
             color: white;
         }
+        
         .addon-section .form-check-label {
             font-size: 16px;
             margin-left: 5px;
@@ -317,6 +376,7 @@
             display: inline-block;
             vertical-align: middle;
         }
+        
         form.text-center.mb-4 {
             display: flex;
             flex-direction: column;
@@ -324,18 +384,22 @@
             justify-content: center;
             margin-bottom: 5px;
         }
+        
         .modal-header {
             padding: 10px 15px;
         }
+        
         .modal-title {
             font-size: 16px;
             font-weight: bold;
         }
+        
         .modal-body {
             max-height: 60vh;
             overflow-y: auto;
             padding: 15px;
         }
+        
         .modal-body #modal-img {
             max-height: 200px;
             width: 100%;
@@ -343,6 +407,7 @@
             border-radius: 8px;
             margin-bottom: 10px;
         }
+        
         .modal-body #modal-name {
             font-size: 20px;
             font-weight: bold;
@@ -350,6 +415,7 @@
             margin-bottom: 5px;
             color: #333333;
         }
+        
         .modal-body #modal-price {
             font-size: 16px;
             font-weight: 500;
@@ -357,45 +423,53 @@
             text-align: center;
             margin-bottom: 10px;
         }
+        
         .modal-body #modal-description {
             font-size: 14px;
             color: #6c757d;
             margin-bottom: 10px;
         }
+        
         .modal-body .nutritional-info {
             font-size: 12px;
             color: #6c757d;
             margin-bottom: 10px;
         }
+        
         .modal-body #modal-addons h6,
         .modal-body #first-row h6 {
             font-size: 14px;
             font-weight: bold;
             margin-bottom: 10px;
         }
+        
         .modal-footer {
             display: flex;
             align-items: center;
             justify-content: space-between;
             padding: 10px;
         }
+        
         .modal-footer .d-flex {
             display: flex;
             align-items: center;
             gap: 10px;
         }
+        
         .modal-footer .btn {
             height: 40px;
             padding: 0 15px;
         }
+        
         .modal-footer .form-control {
             width: 50px;
             height: 40px;
             text-align: center;
         }
+        
         .modal-footer .btn-primary {
-            background-color: #0FAA39;
-            border-color: #0FAA39;
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
             font-weight: bold;
             padding: 10px 20px;
             height: 40px;
@@ -404,10 +478,12 @@
             align-items: center;
             width: auto;
         }
+        
         .modal-footer .btn-outline-secondary {
             height: 40px;
             width: 40px;
         }
+        
         .item-details {
             background-color: #f8f9fa;
             border-radius: 8px;
@@ -415,20 +491,24 @@
             margin: 10px 15px;
             display: none;
         }
+        
         .item-details.show {
             display: block;
         }
+        
         .item-details h6 {
             font-size: 0.9rem;
             font-weight: bold;
             margin-bottom: 5px;
             color: #333333;
         }
+        
         .item-details p {
             font-size: 0.85rem;
             margin-bottom: 5px;
             color: #333;
         }
+        
         .item-details .nutritional-info {
             display: grid;
             grid-template-columns: 1fr 1fr;
@@ -439,17 +519,20 @@
             font-size: 0.85rem;
             line-height: 1.5;
         }
+        
         .toggle-details {
             cursor: pointer;
-            color: #0FAA39;
+            color: var(--primary-color);
             font-size: 0.9rem;
             margin-left: 15px;
             margin-bottom: 10px;
             display: inline-block;
         }
+        
         .toggle-details:hover {
             text-decoration: underline;
         }
+        
         .category-buttons {
             display: flex;
             flex-wrap: wrap;
@@ -457,29 +540,34 @@
             justify-content: center;
             margin-top: 10px;
         }
+        
         .category-button {
             background-color: #fff;
-            border: 2px solid #0FAA39;
-            color: #0FAA39;
+            border: 2px solid var(--primary-color);
+            color: var(--primary-color);
             padding: 5px 15px;
             border-radius: 20px;
             font-size: 0.9rem;
             cursor: pointer;
             transition: background-color 0.3s, color 0.3s;
         }
+        
         .category-button.selected {
-            background-color: #0FAA39;
+            background-color: var(--primary-color);
             color: #fff;
-            border-color: #0FAA39;
+            border-color: var(--primary-color);
         }
+        
         .category-button:hover {
             background-color: #e6f4ea;
         }
+        
         .quantity-selector {
             display: flex;
             align-items: center;
             gap: 5px;
         }
+        
         .quantity-selector .btn {
             width: 25px;
             height: 25px;
@@ -488,6 +576,7 @@
             line-height: 25px;
             text-align: center;
         }
+        
         .quantity-selector .quantity-display {
             width: 25px;
             text-align: center;
@@ -495,6 +584,7 @@
             font-weight: bold;
             line-height: 25px;
         }
+        
         .quantity-selector .quantity-to-add,
         .quantity-selector .quantity-to-remove {
             width: 45px;
@@ -502,27 +592,34 @@
             font-size: 12px;
             padding: 0 5px;
         }
+        
         .modal-dialog {
             max-height: 90vh;
         }
+        
         .modal-body::-webkit-scrollbar {
             width: 8px;
         }
+        
         .modal-body::-webkit-scrollbar-track {
             background: #f1f1f1;
             border-radius: 10px;
         }
+        
         .modal-body::-webkit-scrollbar-thumb {
-            background: #0FAA39;
+            background: var(--primary-color);
             border-radius: 10px;
         }
+        
         .modal-body::-webkit-scrollbar-thumb:hover {
-            background: #0D9232;
+            background: var(--primary-hover);
         }
+        
         .btn-primary:disabled {
             opacity: 0.65;
             cursor: not-allowed;
         }
+        
         .quantity-selector select {
             width: 60px;
             height: 35px;
@@ -530,10 +627,12 @@
             border-radius: 5px;
             border: 1px solid #ced4da;
         }
+        
         #custom-dish-form {
             position: relative;
             padding-bottom: 80px;
         }
+        
         #custom-dish-form .btn-primary {
             position: absolute;
             right: 15px;
@@ -541,6 +640,7 @@
             width: auto;
             padding: 10px 20px;
         }
+        
         .bottom-action-bar {
             position: fixed;
             bottom: 0;
@@ -556,6 +656,7 @@
             max-width: 900px;
             margin: 0 auto;
         }
+        
         .bottom-action-bar .btn {
             flex: 1;
             margin: 0 5px;
@@ -571,25 +672,30 @@
             min-width: 0;
             white-space: nowrap;
         }
+        
         .bottom-action-bar .btn-order-history {
-            background-color: #FFA07A;
-            border-color: #FFA07A;
+            background-color: var(--secondary-color);
+            border-color: var(--secondary-color);
         }
+        
         .bottom-action-bar .btn-order-history:hover {
-            background-color: #FF8C61;
-            border-color: #FF8C61;
+            background-color: var(--secondary-hover);
+            border-color: var(--secondary-hover);
         }
+        
         .bottom-action-bar .btn-view-cart {
-            background-color: #0FAA39;
-            border-color: #0FAA39;
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
         }
+        
         .bottom-action-bar .btn-view-cart:hover {
-            background-color: #0D9232;
-            border-color: #0D9232;
+            background-color: var(--primary-hover);
+            border-color: var(--primary-hover);
         }
+        
         .cart-icon-badge {
             background-color: white;
-            color: #0FAA39;
+            color: var(--primary-color);
             border-radius: 50%;
             width: 20px;
             height: 20px;
@@ -599,11 +705,68 @@
             font-size: 12px;
             margin-left: 8px;
         }
+        
+        /* Toast notification styles */
+        .toast-container {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            z-index: 1100;
+        }
+        
+        .toast {
+            background-color: #333;
+            color: white;
+            padding: 12px 20px;
+            border-radius: 4px;
+            margin-bottom: 10px;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            max-width: 300px;
+        }
+        
+        .toast.show {
+            opacity: 1;
+        }
+        
+        .toast.success {
+            background-color: var(--primary-color);
+        }
+        
+        .toast.error {
+            background-color: #dc3545;
+        }
+        
+        /* Accessibility focus states */
+        .video-container:focus-within {
+            outline: 2px solid #3a86ff;
+            outline-offset: 2px;
+        }
+        
+        /* Reduced motion preferences */
+        @media (prefers-reduced-motion: reduce) {
+            * {
+                animation-duration: 0.01ms !important;
+                animation-iteration-count: 1 !important;
+                transition-duration: 0.01ms !important;
+                scroll-behavior: auto !important;
+            }
+            
+            .video-container video {
+                transition: none;
+            }
+            
+            .menu-card {
+                transition: none;
+            }
+        }
+        
         @media (max-width: 576px) {
             .fixed-top-bar {
                 height: 60px;
                 padding: 10px;
             }
+            
             .search-bar-container {
                 width: 80%;
                 max-width: 100%;
@@ -611,55 +774,69 @@
                 top: 50%;
                 transform: translateY(-50%);
             }
+            
             .search-bar-container input {
                 padding: 6px 35px 6px 35px;
                 font-size: 14px;
                 border-radius: 20px;
             }
+            
             .search-icon {
                 left: 12px;
                 font-size: 16px;
             }
+            
             .mic-icon {
                 right: 12px;
                 font-size: 16px;
             }
+            
             .avatar-dropdown-container {
                 right: 10px;
             }
+            
             .avatar-icon {
                 width: 40px;
                 height: 40px;
                 font-size: 20px;
             }
+            
             .dropdown-menu {
                 width: 220px;
             }
+            
             .dropdown-menu .dropdown-item {
                 padding: 12px 16px;
                 font-size: 15px;
             }
+            
             .category-buttons {
                 gap: 8px;
             }
+            
             .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;
             }
+            
             .modal-body #modal-img {
                 max-height: 150px;
                 width: 100%;
@@ -667,92 +844,112 @@
                 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 {
                 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 {
                 height: 30px;
                 padding: 0 10px;
             }
+            
             .modal-footer .form-control {
                 width: 30px;
                 height: 30px;
                 font-size: 12px;
                 font-weight: bold;
             }
+            
             .modal-footer .btn-outline-secondary {
                 width: 25px;
                 height: 25px;
                 font-size: 12px;
                 line-height: 25px;
             }
+            
             .modal-footer .btn-primary {
                 font-size: 12px;
                 height: 30px;
                 padding: 0 15px;
                 border-radius: 5px;
             }
+            
             .btn-primary {
                 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;
             }
+            
             .bottom-action-bar .btn {
                 padding: 8px 10px;
                 font-size: 14px;
             }
+            
             .cart-icon-badge {
                 width: 18px;
                 height: 18px;
@@ -763,32 +960,43 @@
     </style>
 </head>
 <body>
+
+    <!-- Toast Notification Container -->
+    <div class="toast-container" id="toastContainer"></div>
+
     <div class="fixed-top-bar">
         <div class="avatar-dropdown-container">
-            <div class="avatar-icon">
+            <div class="avatar-icon" tabindex="0" aria-label="User menu">
                 <span>{{ first_letter }}</span>
             </div>
-            <div class="dropdown-menu">
-                <a href="{{ url_for('user_details.customer_details') }}" class="dropdown-item">View Profile</a>
-                <a href="{{ url_for('orderhistory.order_history') }}" class="dropdown-item">Order History</a>
-                <a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
+            <div class="dropdown-menu" role="menu">
+                <a href="{{ url_for('user_details.customer_details') }}" class="dropdown-item" role="menuitem">View Profile</a>
+                <a href="{{ url_for('orderhistory.order_history') }}" class="dropdown-item" role="menuitem">Order History</a>
+                <a href="{{ url_for('logout') }}" class="dropdown-item" role="menuitem">Logout</a>
             </div>
         </div>
         <div class="search-bar-container">
-            <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." autocomplete="off">
+            <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." 
+                   aria-label="Search menu items" autocomplete="off">
             <i class="bi bi-search search-icon"></i>
-            <i class="bi bi-mic mic-icon" id="micIcon"></i>
-            <div id="autocompleteSuggestions" class="autocomplete-suggestions"></div>
+            <i class="bi bi-mic mic-icon" id="micIcon" aria-label="Voice search"></i>
+            <div id="autocompleteSuggestions" class="autocomplete-suggestions" role="listbox"></div>
         </div>
     </div>
 
     <form method="get" action="/menu" class="text-center mb-4" id="categoryForm">
-        <label class="form-label fw-bold">Select a Category:</label>
+        <label class="form-label fw-bold" for="selectedCategoryInput">Select a Category:</label>
         <div class="category-buttons">
             {% for category in categories %}
-                <button type="button" class="category-button {% if selected_category == category %}selected{% endif %}" data-category="{{ category }}">{{ category }}</button>
+                <button type="button" class="category-button {% if selected_category == category %}selected{% endif %}" 
+                        data-category="{{ category }}" aria-pressed="{% if selected_category == category %}true{% else %}false{% endif %}">
+                    {{ category }}
+                </button>
             {% endfor %}
-            <button type="button" class="category-button {% if selected_category == 'Customized Dish' %}selected{% endif %}" data-category="Customized Dish">Customized Dish</button>
+            <button type="button" class="category-button {% if selected_category == 'Customized Dish' %}selected{% endif %}" 
+                    data-category="Customized Dish" aria-pressed="{% if selected_category == 'Customized Dish' %}true{% else %}false{% endif %}">
+                Customized Dish
+            </button>
         </div>
         <input type="hidden" name="category" id="selectedCategoryInput" value="{{ selected_category }}">
     </form>
@@ -796,79 +1004,89 @@
     <div class="container mt-4">
         {% if selected_category == "Customized Dish" %}
             <div id="custom-dish-form" class="mt-4">
-                <h3>Create Your Custom Dish</h3>
+                <h2>Create Your Custom Dish</h2>
                 <form method="POST" action="/customdish/generate_custom_dish">
                     <div class="mb-3">
                         <label for="custom-dish-name" class="form-label">Dish Name</label>
-                        <input type="text" class="form-control" id="custom-dish-name" name="name" required>
+                        <input type="text" class="form-control" id="custom-dish-name" name="name" required
+                               aria-describedby="dishNameHelp">
+                        <div id="dishNameHelp" class="form-text">Enter a name for your custom dish</div>
                     </div>
                     <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>
+                        <textarea class="form-control" id="custom-dish-description" name="description" required
+                                 aria-describedby="dishDescHelp"></textarea>
+                        <div id="dishDescHelp" class="form-text">Describe your dish and list ingredients</div>
+                        <div id="descriptionSuggestions" class="autocomplete-suggestions" role="listbox"></div>
                     </div>
                     <button type="submit" class="btn btn-primary">Submit Custom Dish</button>
                 </form>
             </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>
-                    <div class="row">
+                    <h3 id="section-{{ section|slugify }}">{{ section }}</h3>
+                    <div class="row" aria-labelledby="section-{{ section|slugify }}">
                         {% for item in items %}
                             <div class="col-md-6 mb-4">
                                 <div class="card menu-card">
-                                    <div class="video-container">
-                                        <video 
-                                            class="card-img-top menu-video" 
-                                            id="video-{{ loop.index }}"
-                                            muted 
-                                            loop 
-                                            preload="metadata"
-                                            autoplay
-                                            data-src="{{ item.Video1__c | default('/static/placeholder.mp4') }}"
-                                            poster="{{ item.Image1__c | default('/static/placeholder.jpg') }}"
-                                            width="350" 
-                                            height="200"
-                                            aria-label="Video demonstration of {{ item.Name }}"
-                                            onmouseover="handleVideoHover(this.parentElement, true)"
-                                            onmouseout="handleVideoHover(this.parentElement, false)"
-                                            onerror="this.parentElement.classList.add('video-error');">
-                                            <source src="{{ item.Video1__c | default('/static/placeholder.mp4') }}" type="video/mp4">
-                                            Your browser does not support the video tag.
+                                    <div class="video-container" 
+                                         data-video-src="{{ item.Video1__c | default('/static/placeholder.mp4') }}"
+                                         data-poster-src="{{ item.Image1__c | default('/static/placeholder.jpg') }}"
+                                         aria-label="Video demonstration of {{ item.Name | default('Item') }}"
+                                         tabindex="0">
+                                        <video class="lazy-video" 
+                                               muted 
+                                               loop 
+                                               preload="none"
+                                               width="350" 
+                                               height="200"
+                                               aria-hidden="true"
+                                               disablePictureInPicture
+                                               playsinline>
+                                            <source type="video/mp4">
                                         </video>
                                         <img class="video-fallback" 
-                                             src="{{ item.Image1__c | default('/static/placeholder.jpg') }}"
-                                             alt="{{ item.Name }}"
-                                             style="opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease;">
+                                             src="{{ item.Image1__c | default('/static/placeholder.jpg') }}" 
+                                             alt="{{ item.Name | default('Item') }}"
+                                             loading="lazy">
                                     </div>
                                     <div class="addbutton">
                                         <div class="card-body d-flex align-items-center justify-content-between">
                                             <div>
-                                                <h5 class="card-title">{{ item.Name | default('Unnamed Item') }}</h5>
+                                                <h3 class="card-title">{{ item.Name | default('Unnamed Item') }}</h3>
                                                 <p class="card-text">${{ item.Price__c | default('0.00') }}</p>
                                             </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 transcriptase__c | default('0.00') }}" 
+                                                     data-item-price="{{ item.Price__c | default('0.00') }}" 
                                                      data-item-image="{{ 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="handleSoftDrinkAdd(this)">ADD</button>
+                                                        <button class="btn btn-primary add-to-cart-btn" 
+                                                                onclick="handleSoftDrinkAdd(this)"
+                                                                aria-label="Add {{ item.Name }} to cart">
+                                                            ADD
+                                                        </button>
                                                         <div class="quantity-selector" style="display: none;">
-                                                            <button class="btn btn-outline-secondary decrease-btn" onclick="decreaseQuantity(this)">-</button>
-                                                            <span class="quantity-display">0</span>
-                                                            <button class="btn btn-outline-secondary increase-btn" onclick="increaseQuantity(this)">+</button>
+                                                            <button class="btn btn-outline-secondary decrease-btn" 
+                                                                    onclick="decreaseQuantity(this)"
+                                                                    aria-label="Decrease quantity">-</button>
+                                                            <span class="quantity-display" aria-live="polite">0</span>
+                                                            <button class="btn btn-outline-secondary increase-btn" 
+                                                                    onclick="increaseQuantity(this)"
+                                                                    aria-label="Increase quantity">+</button>
                                                         </div>
                                                     {% 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.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 }}')"
+                                                                aria-label="Customize and add {{ item.Name }} to cart">
                                                             ADD
                                                         </button>
                                                     {% endif %}
@@ -879,8 +1097,15 @@
                                             </div>
                                         </div>
                                     </div>
-                                    <div class="toggle-details" data-item-name="{{ item.Name | default('Unnamed Item') }}">Show Details</div>
-                                    <div class="item-details" id="details-{{ item.Name | default('unnamed-item') | replace(' ', '-') }}"></div>
+                                    <button class="toggle-details" 
+                                            data-item-name="{{ item.Name | default('Unnamed Item') }}"
+                                            aria-expanded="false"
+                                            aria-controls="details-{{ item.Name | default('unnamed-item') | replace(' ', '-') }}">
+                                        Show Details
+                                    </button>
+                                    <div class="item-details" 
+                                         id="details-{{ item.Name | default('unnamed-item') | replace(' ', '-') }}"
+                                         role="region"></div>
                                 </div>
                             </div>
                         {% endfor %}
@@ -891,45 +1116,59 @@
     </div>
 
     <div class="bottom-action-bar">
-        <a href="{{ url_for('orderhistory.order_history') }}" class="btn btn-order-history">
-            <i class="bi bi-clock-history"></i> Order History
+        <a href="{{ url_for('orderhistory.order_history') }}" class="btn btn-order-history" aria-label="View order history">
+            <i class="bi bi-clock-history" aria-hidden="true"></i> Order History
         </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">0</span>
+        <a href="{{ url_for('cart.cart') }}" class="btn btn-view-cart" aria-label="View shopping cart">
+            <i class="bi bi-cart" aria-hidden="true"></i> View Cart
+            <span class="cart-icon-badge" id="cart-item-count" aria-live="polite">0</span>
         </a>
     </div>
 
     <!-- Modal for Item Details -->
-    <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered">
+    <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true" role="dialog">
+        <div class="modal-dialog modal-dialog-centered" role="document">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title" id="itemModalLabel">Item Details</h5>
+                    <h2 id="itemModalLabel" class="modal-title">Item Details</h2>
                     <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" style="max-height: 200px; object-fit: cover;">
-                    <h5 id="modal-name" class="fw-bold text-center"></h5>
-                    <p id="modal-price" class="text-muted text-center"></p>
+                    <div aria-live="polite" aria-atomic="true">
+                        <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="" role="presentation">
+                        <h3 id="modal-name"></h3>
+                        <p id="modal-price" aria-label="Price"></p>
+                    </div>
+                    
                     <p id="modal-description" class="text-secondary"></p>
-                    <div id="modal-addons" class="modal-addons mt-4">
-                        <h6>Customization Options</h6>
+                    
+                    <div id="modal-addons" role="group" aria-labelledby="addons-heading">
+                        <h4 id="addons-heading">Customization Options</h4>
                         <div id="addons-list" class="addons-container">Loading customization options...</div>
                     </div>
-                    <div class="mt-4">
-                        <h6>Custom Request</h6>
-                        <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
+                    
+                    <div role="group" aria-labelledby="instructions-heading">
+                        <h4 id="instructions-heading">Special Instructions</h4>
+                        <textarea id="modal-instructions" class="form-control" 
+                                  aria-label="Enter any special instructions here..."></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">
-                        <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;"/>
-                        <button type="button" class="btn btn-outline-secondary" id="increaseQuantity">+</button>
+                        <button type="button" class="btn btn-outline-secondary" id="decreaseQuantity"
+                                aria-label="Decrease quantity">-</button>
+                        <span id="quantityValue" class="form-control text-center" aria-live="polite">1</span>
+                        <button type="button" class="btn btn-outline-secondary" id="increaseQuantity"
+                                aria-label="Increase quantity">+</button>
                     </div>
-                    <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
+                    
+                    <button type="button" class="btn btn-primary" onclick="addToCartFromModal()"
+                            aria-label="Add to cart">
+                        Add to Cart
+                    </button>
                 </div>
             </div>
         </div>
@@ -937,8 +1176,7 @@
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script>
-        let isProcessingRequest = false;
-
+        // Global variables
         const menuItems = [
             {% for section, items in ordered_menu.items() %}
                 {% for item in items %}
@@ -1056,49 +1294,92 @@
             }
         };
 
-        function getValidVideoUrl(videoUrl) {
-            if (!videoUrl) return null;
-            const sfDomain = window.SF_DOMAIN || 'https://yourdomain.my.salesforce.com';
-            if (videoUrl.startsWith('http')) return videoUrl;
-            if (videoUrl.startsWith('/')) return videoUrl;
-            if (videoUrl.startsWith('069')) return `${sfDomain}/sfc/servlet.shepherd/version/download/${videoUrl}`;
-            return null;
+        // Cart operations queue
+        const cartQueue = [];
+        let isProcessingCart = false;
+
+        // Toast notification system
+        function showToast(message, type = 'success', duration = 3000) {
+            const toastContainer = document.getElementById('toastContainer');
+            const toast = document.createElement('div');
+            toast.className = `toast ${type}`;
+            toast.textContent = message;
+            toast.setAttribute('role', 'alert');
+            toast.setAttribute('aria-live', 'assertive');
+            toastContainer.appendChild(toast);
+            
+            // Trigger reflow to enable transition
+            setTimeout(() => toast.classList.add('show'), 10);
+            
+            // Auto-dismiss after duration
+            setTimeout(() => {
+                toast.classList.remove('show');
+                setTimeout(() => toast.remove(), 300);
+            }, duration);
+        }
+
+        // Video handling functions
+        function initializeVideoObservers() {
+            const videoObserver = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        const container = entry.target;
+                        const video = container.querySelector('.lazy-video');
+                        const videoSrc = container.getAttribute('data-video-src');
+                        const posterSrc = container.getAttribute('data-poster-src');
+                        
+                        if (!video.src && videoSrc) {
+                            video.poster = posterSrc;
+                            video.querySelector('source').src = videoSrc;
+                            video.load();
+                            
+                            video.addEventListener('loadeddata', () => {
+                                container.classList.add('video-loaded');
+                            }, { once: true });
+                            
+                            video.addEventListener('error', () => {
+                                handleVideoError(container);
+                            });
+                        }
+                        
+                        videoObserver.unobserve(container);
+                    }
+                });
+            }, { 
+                rootMargin: '200px',
+                threshold: 0.01 
+            });
+
+            document.querySelectorAll('.video-container').forEach(container => {
+                videoObserver.observe(container);
+            });
         }
 
-        async function handleVideoHover(container, isHovering) {
+        function handleVideoHover(container, shouldPlay) {
             const video = container.querySelector('video');
-            if (!video) return;
+            if (!video.src) return;
             
             try {
-                if (isHovering) {
-                    if (!video.src && video.dataset.src) {
-                        video.src = getValidVideoUrl(video.dataset.src);
-                        await video.load();
-                    }
-                    try {
-                        await video.play();
-                        video.classList.add('visible');
-                        if (video.controls !== true) video.controls = true;
-                    } catch (e) {
-                        console.warn('Autoplay blocked:', e);
-                        video.controls = true;
-                    }
+                if (shouldPlay) {
+                    video.currentTime = 0;
+                    video.play().catch(e => console.debug('Autoplay prevented:', e));
                 } else {
                     video.pause();
-                    video.currentTime = 0;
-                    video.controls = false;
-                    video.classList.remove('visible');
                 }
             } catch (e) {
-                console.error('Video handling error:', e);
-                const fallbackImg = container.querySelector('.video-fallback');
-                if (fallbackImg) {
-                    video.style.display = 'none';
-                    fallbackImg.style.opacity = '1';
-                }
+                console.error('Video control error:', e);
             }
         }
 
+        function handleVideoError(container) {
+            container.classList.add('video-error');
+            const fallback = container.querySelector('.video-fallback');
+            if (fallback) {
+                fallback.style.opacity = '1';
+            }
+        }
+
+        // Cart management functions
         function addToCartLocalStorage(payload) {
             let cart = JSON.parse(localStorage.getItem('cart')) || [];
             const existingItem = cart.find(item => 
@@ -1106,11 +1387,13 @@
                 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);
             }
+            
             localStorage.setItem('cart', JSON.stringify(cart));
             return cart;
         }
@@ -1122,6 +1405,7 @@
                 item.instructions === instructions && 
                 JSON.stringify(item.addons) === JSON.stringify(addons)
             );
+            
             if (itemIndex !== -1) {
                 if (quantityToRemove >= cart[itemIndex].quantity) {
                     cart.splice(itemIndex, 1);
@@ -1129,6 +1413,7 @@
                     cart[itemIndex].quantity -= quantityToRemove;
                 }
             }
+            
             localStorage.setItem('cart', JSON.stringify(cart));
             return cart;
         }
@@ -1137,14 +1422,116 @@
             return JSON.parse(localStorage.getItem('cart')) || [];
         }
 
-        function debounce(func, wait) {
-            let timeout;
-            return function (...args) {
-                clearTimeout(timeout);
-                timeout = setTimeout(() => func.apply(this, args), wait);
-            };
+        async function processCartQueue() {
+            if (isProcessingCart || cartQueue.length === 0) return;
+            
+            isProcessingCart = true;
+            const operation = cartQueue.shift();
+            
+            try {
+                const response = await fetch(operation.url, {
+                    method: operation.method,
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: operation.payload ? JSON.stringify(operation.payload) : null
+                });
+                
+                const data = await response.json();
+                
+                if (data.success) {
+                    updateCartUI(data.cart);
+                    operation.resolve(data);
+                } else {
+                    console.error('Cart operation failed:', data.error);
+                    operation.reject(data.error);
+                    
+                    // Fallback to localStorage
+                    if (operation.method === 'POST') {
+                        const cart = addToCartLocalStorage(operation.payload);
+                        updateCartUI(cart);
+                    } else if (operation.method === 'DELETE') {
+                        const cart = removeFromCartLocalStorage(
+                            operation.payload.itemName,
+                            operation.payload.quantity,
+                            operation.payload.instructions,
+                            operation.payload.addons
+                        );
+                        updateCartUI(cart);
+                    }
+                }
+            } catch (err) {
+                console.error('Network error:', err);
+                operation.reject(err);
+                
+                // Fallback to localStorage
+                if (operation.method === 'POST') {
+                    const cart = addToCartLocalStorage(operation.payload);
+                    updateCartUI(cart);
+                }
+            } finally {
+                isProcessingCart = false;
+                processCartQueue();
+            }
+        }
+
+        function enqueueCartOperation(operation) {
+            return new Promise((resolve, reject) => {
+                cartQueue.push({
+                    ...operation,
+                    resolve,
+                    reject
+                });
+                processCartQueue();
+            });
+        }
+
+        // UI update functions
+        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';
+            }
+
+            const buttonContainers = document.querySelectorAll('.button-container');
+            buttonContainers.forEach(container => {
+                const itemName = container.getAttribute('data-item-name');
+                const section = container.getAttribute('data-item-section');
+                const quantityDisplay = container.querySelector('.quantity-display');
+                const addButton = container.querySelector('.add-to-cart-btn');
+                const quantitySelector = container.querySelector('.quantity-selector');
+
+                const cartItem = cart.find(item => 
+                    item.itemName === itemName && 
+                    item.section === section &&
+                    item.instructions === '' && 
+                    JSON.stringify(item.addons) === JSON.stringify([])
+                );
+
+                if (cartItem && cartItem.quantity > 0) {
+                    quantityDisplay.innerText = cartItem.quantity;
+                    addButton.style.display = 'none';
+                    quantitySelector.style.display = 'flex';
+                } else {
+                    quantityDisplay.innerText = '0';
+                    addButton.style.display = 'block';
+                    quantitySelector.style.display = 'none';
+                }
+            });
         }
 
+        // Event handlers
         function handleSoftDrinkAdd(button) {
             const buttonContainer = button.closest('.button-container');
             const quantitySelector = buttonContainer.querySelector('.quantity-selector');
@@ -1161,9 +1548,6 @@
         }
 
         function increaseQuantity(button) {
-            if (isProcessingRequest) return;
-            isProcessingRequest = true;
-
             const buttonContainer = button.closest('.button-container');
             const quantityDisplay = buttonContainer.querySelector('.quantity-display');
             let currentQuantity = parseInt(quantityDisplay.innerText) || 0;
@@ -1171,17 +1555,13 @@
             if (currentQuantity < 10) {
                 const newQuantity = currentQuantity + 1;
                 quantityDisplay.innerText = newQuantity;
-                debouncedUpdateCart(buttonContainer, newQuantity);
+                updateCartQuantity(buttonContainer, newQuantity);
             } else {
-                console.log('Maximum quantity of 10 reached for Soft Drinks');
-                isProcessingRequest = false;
+                showToast('Maximum quantity of 10 reached for Soft Drinks', 'error');
             }
         }
 
         function decreaseQuantity(button) {
-            if (isProcessingRequest) return;
-            isProcessingRequest = true;
-
             const buttonContainer = button.closest('.button-container');
             const quantityDisplay = buttonContainer.querySelector('.quantity-display');
             const addButton = buttonContainer.querySelector('.add-to-cart-btn');
@@ -1196,7 +1576,7 @@
             } else {
                 const newQuantity = currentQuantity - 1;
                 quantityDisplay.innerText = newQuantity;
-                debouncedUpdateCart(buttonContainer, newQuantity);
+                updateCartQuantity(buttonContainer, newQuantity);
             }
         }
 
@@ -1219,128 +1599,222 @@
             };
 
             if (newQuantity > 0) {
-                fetch('/cart/add', {
+                enqueueCartOperation({
+                    url: '/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);
-                    } else {
-                        console.error('Failed to update cart:', data.error);
-                        const cart = addToCartLocalStorage(cartPayload);
-                        updateCartUI(cart);
-                    }
-                })
-                .catch(err => {
-                    console.error('Error updating cart:', err);
-                    const cart = addToCartLocalStorage(cartPayload);
-                    updateCartUI(cart);
-                })
-                .finally(() => {
-                    isProcessingRequest = false;
+                    payload: cartPayload
+                }).catch(err => {
+                    console.error('Error adding to cart:', err);
+                    showToast('Failed to update cart. Please try again.', 'error');
                 });
             } else {
-                fetch(`/cart/remove?item_name=${encodeURIComponent(itemName)}&instructions=&addons=[]`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    }
-                })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        updateCartUI(data.cart);
-                    } else {
-                        console.error('Failed to remove item:', data.error);
-                        const cart = removeFromCartLocalStorage(itemName, 1, '', []);
-                        updateCartUI(cart);
-                    }
-                })
-                .catch(err => {
-                    console.error('Error removing item:', err);
-                    const cart = removeFromCartLocalStorage(itemName, 1, '', []);
-                    updateCartUI(cart);
-                })
-                .finally(() => {
-                    isProcessingRequest = false;
+                enqueueCartOperation({
+                    url: `/cart/remove?item_name=${encodeURIComponent(itemName)}&instructions=&addons=[]`,
+                    method: 'POST'
+                }).catch(err => {
+                    console.error('Error removing from cart:', err);
+                    showToast('Failed to update cart. Please try again.', 'error');
                 });
             }
         }
 
-        const debouncedUpdateCart = debounce(updateCartQuantity, 300);
-
-        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';
-            }
-
-            const buttonContainers = document.querySelectorAll('.button-container');
-            buttonContainers.forEach(container => {
-                const itemName = container.getAttribute('data-item-name');
-                const section = container.getAttribute('data-item-section');
-                const quantityDisplay = container.querySelector('.quantity-display');
-                const addButton = container.querySelector('.add-to-cart-btn');
-                const quantitySelector = container.querySelector('.quantity-selector');
+        function showItemDetails(name, price, image, description, section, selectedCategory) {
+            document.getElementById('modal-name').innerText = name;
+            document.getElementById('modal-price').innerText = `$${price}`;
+            const modalImg = document.getElementById('modal-img');
+            modalImg.src = image || '/static/placeholder.jpg';
+            modalImg.alt = name;
+            document.getElementById('modal-description').innerText = description || 'No description available.';
+            document.getElementById('addons-list').innerHTML = 'Loading customization options...';
+            document.getElementById('modal-instructions').value = '';
+            const modalSectionEl = document.getElementById('modal-section');
+            modalSectionEl.setAttribute('data-section', section);
+            modalSectionEl.setAttribute('data-category', selectedCategory);
+            document.getElementById('quantityValue').innerText = '1';
 
-                const cartItem = cart.find(item => 
-                    item.itemName === itemName && 
-                    item.section === section &&
-                    item.instructions === '' && 
-                    JSON.stringify(item.addons) === JSON.stringify([])
-                );
+            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) {
+                        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);
+                    });
+                })
+                .catch(err => {
+                    console.error('Error fetching add-ons:', err);
+                    document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
+                });
+        }
 
-                if (cartItem && cartItem.quantity > 0) {
-                    quantityDisplay.innerText = cartItem.quantity;
-                    addButton.style.display = 'none';
-                    quantitySelector.style.display = 'flex';
+        function addToCartFromModal() {
+            const itemName = document.getElementById('modal-name').innerText;
+            let itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
+            
+            if (isNaN(itemPrice)) {
+                showToast('Invalid price for the item. Please check the item details.', 'error');
+                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 });
+                showToast('Missing item data. Please try again.', 'error');
+                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('quantityValue').innerText) || 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
+            };
+            
+            enqueueCartOperation({
+                url: '/cart/add',
+                method: 'POST',
+                payload: cartPayload
+            })
+            .then(() => {
+                showToast('Item added to cart successfully!');
+                const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
+                modal.hide();
+            })
+            .catch(err => {
+                console.error('Error adding to cart:', err);
+                showToast('Failed to add item to cart. Please try again.', 'error');
+            });
+        }
+
+        // Search and filter functions
+        function filterMenu() {
+            const input = document.getElementById('searchBar').value.trim().toLowerCase();
+            const sections = document.querySelectorAll('h3');
+            const items = document.querySelectorAll('.menu-card');
+            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))) {
+                    item.style.display = 'block';
+                    item.classList.add('visible');
+                    matchedSections.add(item.closest('.row'));
                 } else {
-                    quantityDisplay.innerText = '0';
-                    addButton.style.display = 'block';
-                    quantitySelector.style.display = 'none';
+                    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';
+                }
+            });
+            
+            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');
+                });
+            }
         }
 
+        // Initialize the page
         document.addEventListener('DOMContentLoaded', function () {
+            // Initialize video observers
+            initializeVideoObservers();
+            
+            // Setup avatar dropdown
             const avatarContainer = document.querySelector('.avatar-dropdown-container');
             const dropdownMenu = document.querySelector('.dropdown-menu');
+            
             avatarContainer.addEventListener('click', function (event) {
                 event.stopPropagation();
                 dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
             });
+            
             document.addEventListener('click', function (event) {
                 if (!avatarContainer.contains(event.target)) {
                     dropdownMenu.style.display = 'none';
                 }
             });
+            
+            // Setup dropdown items
             const dropdownItems = document.querySelectorAll('.dropdown-item');
             dropdownItems.forEach(item => {
                 item.addEventListener('click', function () {
                     dropdownMenu.style.display = 'none';
                 });
             });
+            
+            // Setup menu card details
             const menuCards = document.querySelectorAll('.menu-card');
             menuCards.forEach(card => {
                 const itemName = card.querySelector('.card-title').innerText;
                 const detailsDiv = card.querySelector('.item-details');
                 const detailsData = menuItemDetails[itemName];
+                
                 if (detailsData) {
                     detailsDiv.innerHTML = `
                         <h6>Ingredients</h6>
@@ -1359,6 +1833,8 @@
                     detailsDiv.innerHTML = '<p>No details available for this item.</p>';
                 }
             });
+            
+            // Setup card visibility observer
             const cardObserver = new IntersectionObserver((entries, observer) => {
                 entries.forEach(entry => {
                     if (entry.isIntersecting) {
@@ -1371,95 +1847,100 @@
                 rootMargin: '0px',
                 threshold: 0.1
             });
-            const videoObserver = new IntersectionObserver((entries, observer) => {
-                entries.forEach(entry => {
-                    if (entry.isIntersecting) {
-                        const video = entry.target;
-                        const container = video.closest('.video-container');
-                        const src = getValidVideoUrl(video.getAttribute('data-src'));
-                        if (src && !video.querySelector('source[src="' + src + '"]')) {
-                            const source = video.querySelector('source');
-                            source.src = src;
-                            video.load().then(() => {
-                                video.classList.add('loaded');
-                            }).catch(err => {
-                                console.error('Video load error:', err);
-                                container.classList.add('video-error');
-                            });
-                        }
-                        observer.unobserve(video);
-                    }
-                });
-            }, {
-                root: null,
-                rootMargin: '200px',
-                threshold: 0.01
-            });
+            
             menuCards.forEach(card => cardObserver.observe(card));
-            document.querySelectorAll('.menu-video').forEach(video => videoObserver.observe(video));
+            
+            // Setup toggle details buttons
             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}`);
-                    detailsDiv.classList.toggle('show');
-                    this.innerText = detailsDiv.classList.contains('show') ? 'Hide Details' : 'Show Details';
+                    const isExpanded = detailsDiv.classList.toggle('show');
+                    
+                    this.innerText = isExpanded ? 'Hide Details' : 'Show Details';
+                    this.setAttribute('aria-expanded', isExpanded);
                 });
             });
+            
+            // Setup category buttons
             const categoryButtons = document.querySelectorAll('.category-button');
             const categoryForm = document.getElementById('categoryForm');
             const selectedCategoryInput = document.getElementById('selectedCategoryInput');
+            
             if (!selectedCategoryInput.value) {
                 selectedCategoryInput.value = "All";
                 document.querySelector('.category-button[data-category="All"]').classList.add('selected');
             }
+            
             categoryButtons.forEach(button => {
                 button.addEventListener('click', function () {
-                    categoryButtons.forEach(btn => btn.classList.remove('selected'));
+                    categoryButtons.forEach(btn => {
+                        btn.classList.remove('selected');
+                        btn.setAttribute('aria-pressed', 'false');
+                    });
+                    
                     this.classList.add('selected');
+                    this.setAttribute('aria-pressed', 'true');
                     selectedCategoryInput.value = this.getAttribute('data-category');
                     categoryForm.submit();
                 });
             });
+            
+            // Setup search functionality
             const searchBar = document.getElementById('searchBar');
             const suggestionsContainer = document.getElementById('autocompleteSuggestions');
+            
             searchBar.addEventListener('input', function () {
                 const input = this.value.trim().toLowerCase();
                 suggestionsContainer.innerHTML = '';
                 suggestionsContainer.style.display = '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.setAttribute('role', 'option');
+                            
                             suggestionDiv.addEventListener('click', function () {
                                 searchBar.value = item;
                                 suggestionsContainer.style.display = 'none';
                                 filterMenu();
                             });
+                            
                             suggestionsContainer.appendChild(suggestionDiv);
                         });
+                        
                         suggestionsContainer.style.display = 'block';
                     }
                 }
+                
                 filterMenu();
             });
+            
             document.addEventListener('click', function (event) {
                 if (!searchBar.contains(event.target) && !suggestionsContainer.contains(event.target)) {
                     suggestionsContainer.style.display = 'none';
                 }
             });
+            
+            // Setup description textarea 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 => {
@@ -1469,22 +1950,28 @@
                         });
                     }
                 }
+                
                 descriptionTextarea.addEventListener('input', function () {
                     const inputText = this.value.trim();
                     const words = inputText.split(/,\s*/);
                     const lastWord = words[words.length - 1].trim().toLowerCase();
+                    
                     descriptionSuggestions.innerHTML = '';
                     descriptionSuggestions.style.display = 'none';
                     updateUsedIngredients();
+                    
                     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.setAttribute('role', 'option');
+                                
                                 suggestionDiv.addEventListener('click', function () {
                                     const currentValue = descriptionTextarea.value;
                                     const lastCommaIndex = currentValue.lastIndexOf(',');
@@ -1494,18 +1981,23 @@
                                     descriptionTextarea.focus();
                                     updateUsedIngredients();
                                 });
+                                
                                 descriptionSuggestions.appendChild(suggestionDiv);
                             });
+                            
                             descriptionSuggestions.style.display = 'block';
                         }
                     }
                 });
+                
                 document.addEventListener('click', function (event) {
                     if (!descriptionTextarea.contains(event.target) && !descriptionSuggestions.contains(event.target)) {
                         descriptionSuggestions.style.display = 'none';
                     }
                 });
             }
+            
+            // Load cart data
             fetch('/cart/get')
                 .then(response => {
                     if (!response.ok) {
@@ -1527,223 +2019,91 @@
                     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';
-            });
+            
+            // Setup modal quantity controls
             const decreaseBtn = document.getElementById('decreaseQuantity');
             const increaseBtn = document.getElementById('increaseQuantity');
-            const quantityInput = document.getElementById('quantityInput');
+            const quantityValue = document.getElementById('quantityValue');
+            
             decreaseBtn.addEventListener('click', function () {
-                let currentQuantity = parseInt(quantityInput.value);
+                let currentQuantity = parseInt(quantityValue.innerText);
                 if (currentQuantity > 1) {
                     currentQuantity--;
-                    quantityInput.value = currentQuantity;
+                    quantityValue.innerText = currentQuantity;
                 }
             });
+            
             increaseBtn.addEventListener('click', function () {
-                let currentQuantity = parseInt(quantityInput.value);
+                let currentQuantity = parseInt(quantityValue.innerText);
                 currentQuantity++;
-                quantityInput.value = currentQuantity;
+                quantityValue.innerText = currentQuantity;
             });
-
+            
+            // Setup voice search
             const micIcon = document.getElementById('micIcon');
+            
             if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
                 const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
                 const recognition = new SpeechRecognition();
                 recognition.lang = 'en-US';
-                recognition.onstart = () => micIcon.classList.add('active');
+                
+                recognition.onstart = () => {
+                    micIcon.classList.add('active');
+                    showToast('Listening... Speak now', 'info');
+                };
+                
                 recognition.onresult = (event) => {
-                    searchBar.value = event.results[0][0].transcript.trim();
+                    const transcript = event.results[0][0].transcript.trim();
+                    searchBar.value = transcript;
                     filterMenu();
+                    showToast(`Searching for: ${transcript}`, 'info');
                 };
+                
                 recognition.onend = () => micIcon.classList.remove('active');
                 recognition.onerror = (event) => {
                     micIcon.classList.remove('active');
                     console.error('Speech error:', event.error);
+                    showToast('Voice recognition error. Please try again.', 'error');
                 };
+                
                 micIcon.addEventListener('click', () => {
-                    recognition.start();
+                    try {
+                        recognition.start();
+                    } catch (err) {
+                        console.error('Speech recognition error:', err);
+                        showToast('Voice search not available. Please try again.', 'error');
+                    }
                 });
             } else {
                 micIcon.style.display = 'none';
             }
-        });
-
-        function filterMenu() {
-            const input = document.getElementById('searchBar').value.trim().toLowerCase();
-            const sections = document.querySelectorAll('h3');
-            const items = document.querySelectorAll('.menu-card');
-            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))) {
-                    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';
-                }
+            
+            // Setup video hover events
+            document.querySelectorAll('.video-container').forEach(container => {
+                container.addEventListener('mouseenter', () => handleVideoHover(container, true));
+                container.addEventListener('mouseleave', () => handleVideoHover(container, false));
+                container.addEventListener('focus', () => handleVideoHover(container, true));
+                container.addEventListener('blur', () => handleVideoHover(container, false));
             });
-            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');
-                });
-            }
-        }
-
-        function showItemDetails(name, price, image, description, section, selectedCategory) {
-            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('addons-list').innerHTML = 'Loading customization options...';
-            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;
-
-            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) {
-                        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);
+            
+            // Setup addon selection handling
+            document.addEventListener('click', function(event) {
+                if (event.target.classList.contains('addon-option')) {
+                    const checkbox = event.target;
+                    const groupName = checkbox.getAttribute('data-group');
+                    const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides", "Select Dip/Sauce", "Extra Add-ons", "Make it a Combo"].includes(groupName);
+                    
+                    if (!isMultiSelectGroup) {
+                        const checkboxes = document.querySelectorAll(`.addon-option[data-group="${groupName}"]`);
+                        checkboxes.forEach(otherCheckbox => {
+                            if (otherCheckbox !== checkbox) {
+                                otherCheckbox.checked = false;
+                            }
                         });
-                        sectionDiv.appendChild(optionsContainer);
-                        addonsList.appendChild(sectionDiv);
-                    });
-                })
-                .catch(err => {
-                    console.error('Error fetching add-ons:', err);
-                    document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
-                });
-        }
-
-        document.addEventListener('click', function(event) {
-            if (event.target.classList.contains('addon-option')) {
-                handleAddonClick(event.target);
-            }
-        });
-
-        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"].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
-            };
-            
-            fetch('/cart/add', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(cartPayload)
-            })
-            .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();
-                } else {
-                    console.error('Failed to add item to cart:', data.error);
-                    alert(data.error || 'Failed to add item to cart.');
                 }
-            })
-            .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();
             });
-        }
+        });
     </script>
 </body>
 </html>