Update templates/cart.html

templates/cart.html

@@ -115,34 +115,33 @@
             font-size: 1rem;
             margin: 0 5px;
         }
-        
-        /* Make the parent container position relative */
+        /* Ensure the parent container is relative for absolute positioning */
 .cart-summary {
-    position: relative; /* Ensure dropdown is positioned relative to this container */
+    position: relative; /* Make sure dropdown is positioned relative to this container */
     text-align: left;
     margin-top: 15px;
     padding: 20px;
     background-color: #fff;
     border-radius: 12px;
     box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
-    transition: margin-bottom 0.3s ease-in-out; /* Smooth transition when adding space for dropdown */
 }
 
 /* Coupon Dropdown styling */
 #couponDropdown {
-    width: 30%; /* Set dropdown to 30% of the width */
-    position: absolute; /* Position it absolutely within the parent container */
-    top: 50px; /* Ensure it appears just below the Apply Coupon link */
-    right: 0; /* Align it to the right side of the container */
+    width: 30%; /* Set dropdown width to 30% */
     display: none; /* Hidden by default */
     background-color: #fff;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for dropdown */
-    z-index: 10; /* Ensure it's above other content */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow */
+    z-index: 10; /* Ensure it stays above other content */
+    margin-top: 10px; /* Add space from the link */
+    position: absolute; /* Position it absolutely */
+    top: 40px; /* Adjust dropdown position to be below the Apply Coupon link */
+    right: 0; /* Align it to the right of the container */
 }
 
 /* Show the dropdown when it's active */
 #couponDropdown.show {
-    display: block; /* Make it visible */
+    display: block; /* Show the dropdown when active */
 }
 
 /* Ensure Apply Coupon section aligns correctly */