Update templates/cart.html

templates/cart.html

@@ -46,51 +46,6 @@
             border-radius: 8px;             /* Optional: rounded corners */
             transition: transform 0.3s;
         }
-/* Make the parent container position relative */
-.cart-summary {
-    position: relative; /* Make sure dropdown is positioned relative to this container */
-}
-
-/* Coupon Dropdown styling */
-#couponDropdown {
-    width: 30%; /* Set dropdown to 30% of the width */
-    position: absolute; /* Position it absolutely */
-    top: 40px; /* Adjust dropdown position to be a bit below the Apply Coupon link */
-    right: 0; /* Align it to the right of the container */
-    display: none; /* Hidden by default */
-    background-color: #fff; /* Dropdown background */
-    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 */
-}
-
-/* Show the dropdown when it's active */
-#couponDropdown.show {
-    display: block;
-}
-
-/* Ensure Apply Coupon section aligns correctly */
-.coupon-selection {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 1rem;
-    margin-bottom: 20px; /* Add space below Apply Coupon section */
-}
-
-/* Apply Coupon link and label styles */
-.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;
-}
-
 
         .cart-item img:hover {
             transform: scale(1.05);
@@ -160,43 +115,105 @@
             font-size: 1rem;
             margin: 0 5px;
         }
-        .cart-summary {
-            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);
-        }
-        .bill-details {
-            display: grid;
-            grid-template-columns: 1fr 1fr; /* Two-column layout */
-            grid-gap: 10px;
-            margin-bottom: 10px;
-        }
-        .bill-details .label {
-            font-weight: 600;
-            font-size: 1rem;
-        }
-        .bill-details .amount {
-            text-align: right;
-            font-weight: 600;
-            font-size: 1rem;
-        }
-        .dotted-line {
-            border-bottom: 2px dotted #ccc;
-            margin: 15px 0;
-        }
-        .total-bill {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            font-weight: 600;
-            font-size: 1.2rem;
-            margin-top: 10px;
-        }
-        .total-bill .label {
-            font-size: 1.1rem;
-        }
+        
+        /* Make the parent container position relative */
+.cart-summary {
+    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);
+}
+
+/* Coupon Dropdown styling */
+#couponDropdown {
+    width: 30%; /* Set dropdown to 30% of the width */
+    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 */
+}
+
+/* Show the dropdown when it's active */
+#couponDropdown.show {
+    display: block; /* Show the dropdown when active */
+}
+
+/* Ensure Apply Coupon section aligns correctly */
+.coupon-selection {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 1rem;
+    margin-bottom: 20px; /* Add space below Apply Coupon section */
+}
+
+/* Apply Coupon link and label styles */
+.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;
+}
+
+/* Bill details grid structure */
+.bill-details {
+    display: grid;
+    grid-template-columns: 1fr 1fr; /* Two-column layout */
+    grid-gap: 10px;
+    margin-bottom: 10px;
+}
+
+/* Adjust label and amount for bill details */
+.bill-details .label {
+    font-weight: 600;
+    font-size: 1rem;
+}
+
+.bill-details .amount {
+    text-align: right;
+    font-weight: 600;
+    font-size: 1rem;
+}
+
+/* Divider line between bill sections */
+.dotted-line {
+    border-bottom: 2px dotted #ccc;
+    margin: 15px 0;
+}
+
+/* Total bill grid layout */
+.total-bill {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    font-weight: 600;
+    font-size: 1.2rem;
+    margin-top: 10px;
+}
+
+.total-bill .label {
+    font-size: 1.1rem;
+}
+
+.total-bill .amount {
+    text-align: right;
+    font-size: 1.1rem;
+    color: #000; /* Changed from green to black */
+}
+
+/* Margin to add space for dropdown when visible */
+.cart-summary.has-dropdown {
+    margin-bottom: 80px; /* Create space below the content when dropdown is visible */
+}
+
         .total-bill .amount {
                 text-align: right;
                 font-size: 1.1rem;