Update templates/menu.html

templates/menu.html

@@ -240,7 +240,7 @@ h1.text-center {
     margin-bottom: 10px;
     font-size: 1.1rem;
     font-weight: bold;
-    color: #4a4848;
+    color: #333333;
 }
 
 /* Style for add-on checkboxes */
@@ -261,6 +261,7 @@ form.text-center.mb-4 {
     display: inline-block;
     margin-right: 5px; /* Reduced space between radio button and label */
     margin-bottom: 0; /* Remove bottom margin */
+    margin-top: 10px; /* Adds space between categories and Customized Dish */
     vertical-align: middle; /* Align radio buttons vertically */
 }
 
@@ -270,8 +271,9 @@ form.text-center.mb-4 {
 }
 
 .form-check-label {
+    display: inline-block;
     font-size: 16px;
-    margin-left: 8px; /* Spacing between radio button and label */
+    margin-left: 5px; /* Spacing between radio button and label */
     vertical-align: middle; /* Align label vertically */
 }
 
@@ -288,6 +290,7 @@ form.text-center.mb-4 {
     cursor: pointer;
     position: relative;
     display: inline-block;
+    vertical-align: middle; /* Align vertically with text */
 }
 
 .custom-radio:checked {
@@ -408,6 +411,9 @@ form.text-center.mb-4 {
                 {% if selected_category == category %}checked{% endif %} onchange="this.form.submit()">
             <label class="form-check-label" for="category-{{ category }}">{{ category }}</label>
         {% endfor %}
+  </div>
+   <!-- Separate Customized Dish radio button in a new div to align it properly -->
+    <div class="form-check">
         <input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish" class="custom-radio"
             {% if selected_category == "Customized Dish" %}checked{% endif %} onchange="this.form.submit()">
         <label class="form-check-label" for="category-CustomizedDish">Customized Dish</label>