Update templates/cart.html

templates/cart.html

@@ -48,19 +48,20 @@
         }
 /* Make the parent container position relative */
 .cart-summary {
-    position: relative; /* Makes sure the dropdown is positioned relative to this container */
+    position: relative; /* Make sure dropdown is positioned relative to this container */
 }
 
-/* Ensure the dropdown is within the card and 30% width */
+/* Coupon Dropdown styling */
 #couponDropdown {
-    width: 30%; /* Dropdown takes 30% of the width */
-    position: absolute; /* Position it absolutely within the container */
-    top: 40px; /* Ensure it appears below the Apply Coupon link */
-    right: 0; /* Position it on the right side of the container */
+    width: 30%; /* Set dropdown to 30% of the width */
+    position: absolute; /* Position it absolutely */
+    top: 40px; /* Adjust dropdown position to be a bit below the Apply Coupon link */
+    right: 0; /* Align it to the right of the container */
     display: none; /* Hidden by default */
-    background-color: #fff; /* White background for dropdown */
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow to dropdown */
-    z-index: 10; /* Ensure it stays above other content */
+    background-color: #fff; /* Dropdown background */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow */
+    z-index: 10; /* Ensure it's above other content */
+    margin-top: 10px; /* Add space from the link */
 }
 
 /* Show the dropdown when it's active */
@@ -68,30 +69,29 @@
     display: block;
 }
 
-/* Coupon Section Alignment */
+/* Ensure Apply Coupon section aligns correctly */
 .coupon-selection {
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 1rem;
+    margin-bottom: 20px; /* Add space below Apply Coupon section */
 }
 
-/* Apply Coupon label style */
+/* Apply Coupon link and label styles */
 .coupon-selection label {
     font-weight: bold;
     color: black;
 }
 
-/* Apply Coupon link style */
 .coupon-selection a {
-    color: #007bff; /* Blue color for the + Apply Coupon link */
+    color: #007bff; /* Blue for the link */
     font-size: 1rem;
     text-decoration: none;
     text-align: right;
 }
 
 
-
         .cart-item img:hover {
             transform: scale(1.05);
         }