Update templates/cart.html

templates/cart.html

@@ -271,67 +271,64 @@
 .suggestion-items-container {
     display: flex;
     overflow-x: auto; /* Horizontal scrolling */
-    gap: 10px; /* Reduce space between items */
+    gap: 15px; /* Space between items */
     padding-bottom: 10px;
-    padding-top: 10px;
+    margin-left: 5px;
+    padding-top: 5px;
 }
 
-/* Smaller and more compact card styling */
+/* Styling for the suggestion item card */
 .suggestion-item {
-    display: flex; /* Use flexbox for horizontal layout */
-    align-items: center; /* Center content vertically */
-    justify-content: space-between; /* Space out content */
+    display: flex; /* Align items horizontally */
+    align-items: center; /* Center image and text vertically */
+    justify-content: flex-start; /* Align items to the start (left side) */
     flex-shrink: 0;
-    width: 140px; /* Reduced width for smaller cards */
-    padding: 8px; /* Reduced padding */
-    border-radius: 8px; /* Slightly smaller border radius */
+    width: 160px; /* Adjust width for compactness */
+    padding: 10px;
+    border-radius: 8px; /* Rounded corners */
     background-color: #fff;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
-    margin-right: 10px; /* Ensure there's space between the cards */
-    position: relative; /* For positioning the + icon */
+    margin-right: 15px; /* Space between the cards */
+    text-align: left; /* Align text to the left */
 }
 
 .suggestion-item:hover {
-    transform: scale(1.05); /* Add zoom effect on hover */
+    transform: scale(1.05); /* Slight zoom effect on hover */
 }
 
 .suggestion-item img {
-    width: 50px; /* Smaller image */
-    height: 50px; /* Smaller image */
-    object-fit: cover; /* Ensure image fits correctly without distortion */
-    border-radius: 5px;
-    margin-left: 8px; /* Space between the image and text */
+    width: 50px; /* Set a fixed width for the image */
+    height: 50px; /* Set a fixed height for the image */
+    object-fit: cover; /* Ensure image fits without distortion */
+    border-radius: 5px; /* Rounded corners for the image */
+    margin-right: 12px; /* Space between the image and text */
 }
 
 .suggestion-item div {
-    flex-grow: 1;
-    text-align: left; /* Align text to the left */
-    margin-right: 8px; /* Space between text and image */
+    flex-grow: 1; /* Allow the text section to expand and fill available space */
 }
 
-/* Styling for the + symbol button (with no borders) */
-.add-icon {
-    position: absolute;
-    top: 5px; /* Position at the top */
-    right: 5px; /* Position at the top-right */
-    font-size: 1.2rem; /* Adjust size of the + symbol */
-    padding: 6px 10px; /* Button padding */
+/* Adjust the + 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 color for the + symbol */
-    border: none; /* No border */
-    border-radius: 50%; /* Circular button */
+    color: #0FAA39; /* Green text */
     cursor: pointer;
-    transition: background-color 0.3s, color 0.3s;
-    z-index: 1; /* Ensure the button is above content */
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
 }
 
-.add-icon:hover {
-    background-color: #0FAA39; /* Green background on hover */
-    color: #fff; /* White color for the + symbol when hovered */
+/* On hover, keep text green and border green */
+.add-back-button:hover {
+    background-color: #fff;
+    color: #0FAA39; /* Green color stays on hover */
+    border-color: #0FAA39; /* Green border on hover */
 }
 
-/* Ensure the scroll container works fine */
+/* Styling for the scrolling section */
 .suggestion-items-container::-webkit-scrollbar {
     height: 8px; /* Height of the scrollbar */
 }