Update templates/cart.html

templates/cart.html

@@ -260,31 +260,18 @@
     align-items: center;
     text-align: center;
 }
-.suggestion-section {
-    margin-top: 20px;
-    padding: 15px;
-    background-color: #f8f9fa;
-    border-radius: 10px;
-}
-
-.suggestion-items-container {
-    display: flex; /* Align the items in a row */
-    overflow-x: auto; /* Make the container scrollable horizontally */
-    gap: 15px; /* Add space between items */
-    padding-bottom: 10px; /* Add padding at the bottom for scrollbar */
-}
-
 .suggestion-item {
     display: flex;
     align-items: center;
     justify-content: center;
-    flex-shrink: 0; /* Prevent items from shrinking */
+    flex-shrink: 0;
     width: 150px; /* Set a 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 */
 }
 
 .suggestion-item:hover {
@@ -300,36 +287,58 @@
 }
 
 .suggestion-item div {
-    flex-grow: 1; /* Allow text to take up available space */
+    flex-grow: 1;
+    margin-right: 10px; /* Add space between the image and the text */
 }
 
+/* Adjust the Add button styles */
 .add-back-button {
     padding: 6px 20px;
     font-size: 0.9rem;
     border-radius: 20px;
-    border: 1px solid #fff;
-    background-color: #fff;
-    color: #0FAA39;
+    border: 1px solid #0FAA39; /* Green border */
+    background-color: #fff; /* White background */
+    color: #0FAA39; /* Green text */
     cursor: pointer;
-    transition: background-color 0.3s, color 0.3s;
+    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: #0FAA39;
-    color: #fff;
-    border-color: #0FAA39;
+    background-color: #fff;
+    color: #0FAA39; /* Green color stays on hover */
+    border-color: #0FAA39; /* Green border on hover */
 }
 
-.bi-cart-plus {
-    font-size: 1.2rem;
-    margin-right: 5px; /* Space between icon and text */
+/* The "+" symbol should be green */
+.add-back-button i {
+    color: #0FAA39; /* Green color for the icon */
 }
 
+/* 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 */
+}
 
-        
-        
+/* Styling for the scrolling section */
+.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 */
+    border-radius: 4px;
+}
+
+.suggestion-items-container::-webkit-scrollbar-track {
+    background-color: #f1f1f1;
+}
 
-        
         .remove-icon {
             border: none;
             background: none;