Update templates/cart.html

templates/cart.html

@@ -118,28 +118,31 @@
         
         /* Make the parent container position relative */
 .cart-summary {
-    position: relative; /* Make sure dropdown is positioned relative to this container */
+    position: relative; /* Ensure 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 */
     display: none; /* Hidden by default */
     background-color: #fff;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for dropdown */
     z-index: 10; /* Ensure it's above other content */
-    margin-top: 10px; /* Add space from the link */
 }
 
 /* Show the dropdown when it's active */
 #couponDropdown.show {
-    display: block; /* Show the dropdown when active */
+    display: block; /* Make it visible */
 }
 
 /* Ensure Apply Coupon section aligns correctly */
@@ -214,11 +217,6 @@
     margin-bottom: 80px; /* Create space below the content when dropdown is visible */
 }
 
-        .total-bill .amount {
-                text-align: right;
-                font-size: 1.1rem;
-                color: #000; /* Changed from green to black */
-        }
         .checkout-button {
             background-color: #0FAA39;
             color: #fff;