Update templates/cart.html

templates/cart.html

@@ -126,17 +126,39 @@
     box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
 }
 
+/* Coupon Section styling */
+.coupon-selection {
+    display: flex; /* Use flexbox to align items */
+    justify-content: space-between; /* Space between the label and the link */
+    align-items: center;
+    font-size: 1rem;
+    margin-bottom: 20px; /* Add space below Apply Coupon section */
+    position: relative; /* Ensure dropdown is within this container */
+}
+
+/* Ensure the Apply Coupon label and link are aligned correctly */
+.coupon-selection label {
+    font-weight: bold;
+    color: black;
+}
+
+.coupon-selection a {
+    color: #007bff; /* Blue for the link */
+    font-size: 1rem;
+    text-decoration: none;
+    text-align: right;
+}
+
 /* Coupon Dropdown styling */
 #couponDropdown {
     width: 30%; /* Set dropdown to 30% of the width */
-    position: absolute; /* Position it absolutely within the parent container */
-    right: 0; /* Align it to the right side of the container */
-    top: 40px; /* Adjust dropdown position to be just below the Apply Coupon link */
     display: none; /* Hidden by default */
     background-color: #fff;
     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 */
+    margin-left: auto; /* Push it to the right side */
+    margin-right: 0; /* Ensure it doesn't overflow outside */
 }
 
 /* Show the dropdown when it's active */
@@ -144,6 +166,7 @@
     display: block;
 }
 
+
 /* Ensure Apply Coupon section aligns correctly */
 .coupon-selection {
     display: flex;