Update templates/cart.html

templates/cart.html

@@ -260,78 +260,83 @@
     align-items: center;
     text-align: center;
 }
+.suggestion-section {
+    margin-top: 20px;
+    padding: 15px;
+    background-color: #f8f9fa;
+    border-radius: 10px;
+}
+
+.suggestion-items-container {
+    display: flex;
+    overflow-x: auto; /* Horizontal scroll for items */
+    gap: 15px; /* Space between items */
+    padding-bottom: 10px;
+    padding-top: 5px;
+}
+
 .suggestion-item {
     display: flex;
-    align-items: center;
+    flex-direction: column; /* Stack the contents vertically */
+    align-items: center; /* Center content horizontally */
     justify-content: center;
     flex-shrink: 0;
-    width: 150px; /* Set a fixed width for each suggestion item */
+    width: 150px; /* Fixed width for each suggestion item */
     padding: 10px;
     border-radius: 10px;
     background-color: #fff;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
-    margin-right: 15px; /* Ensure there's space between the cards */
+    margin-right: 15px;
+    text-align: center;
+    position: relative; /* Position relative for positioning the + icon */
 }
 
 .suggestion-item:hover {
-    transform: scale(1.05); /* Add zoom effect on hover */
+    transform: scale(1.05); /* Zoom effect on hover */
 }
 
 .suggestion-item img {
-    width: 60px;
-    height: 60px;
-    object-fit: cover;
+    width: 100%; /* Ensure the image takes up the full width of the card */
+    height: 120px; /* Set fixed height for the image */
+    object-fit: cover; /* Ensure image fills without distortion */
     border-radius: 5px;
-    margin-right: 10px;
+    margin-bottom: 10px; /* Space below the image */
 }
 
 .suggestion-item div {
     flex-grow: 1;
-    margin-right: 10px; /* Add space between the image and the text */
+    margin-bottom: 10px; /* Space below the text */
 }
 
-/* Adjust the Add button styles */
-.add-back-button {
-    padding: 6px 20px;
-    font-size: 0.9rem;
-    border-radius: 20px;
-    border: 1px solid #0FAA39; /* Green border */
-    background-color: #fff; /* White background */
-    color: #0FAA39; /* Green text */
+/* Styling for the add icon button at the top of the card */
+.add-icon {
+    position: absolute;
+    top: 10px; /* Position it at the top */
+    right: 10px; /* Position it to the right */
+    font-size: 1.5rem;
+    padding: 8px 12px;
+    background-color: #0FAA39; /* Green background */
+    color: white; /* White color for the + symbol */
+    border: none;
+    border-radius: 50%; /* Circular button */
     cursor: pointer;
-    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
-}
-
-/* Change background to white and keep the text green on hover */
-.add-back-button:hover {
-    background-color: #fff;
-    color: #0FAA39; /* Green color stays on hover */
-    border-color: #0FAA39; /* Green border on hover */
-}
-
-/* The "+" symbol should be green */
-.add-back-button i {
-    color: #0FAA39; /* Green color for the icon */
+    transition: background-color 0.3s, color 0.3s;
+    z-index: 1; /* Make sure the button is above the content */
 }
 
-/* Ensure the scroll container works fine */
-.suggestion-items-container {
-    display: flex;
-    overflow-x: auto;
-    gap: 15px;
-    padding-bottom: 10px;
-    margin-left: 5px; /* Prevent item cards from touching the left edge */
-    padding-top: 5px; /* Add some space at the top of the scrollable container */
+.add-icon:hover {
+    background-color: #0FAA39;
+    color: #fff;
 }
 
-/* Styling for the scrolling section */
+/* Ensure the horizontal scroll container works correctly */
 .suggestion-items-container::-webkit-scrollbar {
     height: 8px; /* Height of the scrollbar */
 }
 
 .suggestion-items-container::-webkit-scrollbar-thumb {
-    background-color: #0FAA39; /* Green color for scrollbar thumb */
+    background-color: #0FAA39; /* Green scrollbar thumb */
     border-radius: 4px;
 }
 
@@ -339,6 +344,7 @@
     background-color: #f1f1f1;
 }
 
+
         .remove-icon {
             border: none;
             background: none;