Update templates/cart.html

templates/cart.html

@@ -46,6 +46,37 @@
             border-radius: 8px;             /* Optional: rounded corners */
             transition: transform 0.3s;
         }
+         /* Ensure the dropdown expands to the full width of the container */
+#couponDropdown {
+    width: 100%;  /* Make the dropdown fill the parent container */
+    display: none;  /* Hidden by default */
+    margin-top: 10px;
+}
+
+/* Make the Apply Coupon link and label aligned properly */
+.coupon-selection {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 1rem;
+}
+
+.coupon-selection label {
+    font-weight: bold;  /* Ensures the label text is bold */
+    color: black;       /* Ensures the label text is black */
+}
+
+.coupon-selection a {
+    color: #007bff;      /* Make the '+ Apply Coupon' link blue */
+    font-size: 1rem;      /* Adjust the size of the link */
+    text-decoration: none;
+}
+
+/* When the dropdown is visible, ensure it matches the width of the parent container */
+#couponDropdown.show {
+    display: block;
+}
+
         .cart-item img:hover {
             transform: scale(1.05);
         }
@@ -381,10 +412,16 @@
         }
         function toggleCouponDropdown() {
             let couponDropdown = document.getElementById('couponDropdown');
+    
             // Toggle the visibility of the coupon dropdown
-            couponDropdown.style.display = couponDropdown.style.display === "none" ? "block" : "none";
+            if (couponDropdown.style.display === "none" || couponDropdown.style.display === "") {
+                couponDropdown.style.display = "block";
+            } else {
+                couponDropdown.style.display = "none";
+            }
         }
 
+
         function calculateDiscount() {
             let couponDropdown = document.getElementById('couponDropdown'); // Get coupon dropdown
             let selectedCoupon = couponDropdown.value.trim(); // Get the selected coupon value