Update templates/cart.html

templates/cart.html

@@ -56,7 +56,19 @@
     margin-top: 10px; /* Space between the link and the dropdown */
 }
 
-/* Positioning the Apply Coupon link and dropdown */
+/* Ensure the dropdown takes up 30% of the page width */
+#couponDropdown {
+    width: 30%; /* Set the dropdown width to 30% */
+    position: absolute; /* Position it absolutely */
+    right: 0; /* Align it to the right of the page */
+    top: 50px; /* Position it below the Apply Coupon link */
+    display: none; /* Hidden by default */
+    background-color: #fff; /* White background for the dropdown */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for dropdown */
+    z-index: 10; /* Ensure it stays above other content */
+}
+
+/* Coupon section styles for Apply Coupon and dropdown link */
 .coupon-selection {
     display: flex;
     justify-content: space-between;
@@ -79,7 +91,7 @@
 
 /* Show the dropdown when active */
 #couponDropdown.show {
-    display: block;
+    display: block; /* Show the dropdown when active */
 }