Update components/styles.py

components/styles.py

@@ -22,28 +22,25 @@ button:hover {
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
-/* Styling for the popup */
-#popup-card {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+/* Popup container styling */
+#popup-container {
+    display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background-color: rgba(0, 0, 0, 0.5);
-    visibility: hidden;
-    opacity: 0;
-    transition: visibility 0s, opacity 0.3s;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
 }
 
-#popup-card.visible {
-    visibility: visible;
-    opacity: 1;
+#popup-container.active {
+    display: flex;
 }
 
-.food-card {
+#popup-content {
     width: 400px;
     max-width: 90%;
     background-color: #fff;
@@ -54,25 +51,25 @@ button:hover {
     position: relative;
 }
 
-.food-card img {
+#popup-content img {
     width: 100%;
     max-height: 200px;
     object-fit: cover;
     border-radius: 12px 12px 0 0;
 }
 
-.food-card h3 {
+#popup-content h3 {
     margin-top: 20px;
     font-size: 24px;
 }
 
-.food-card table {
+#popup-content table {
     width: 100%;
     margin-top: 10px;
     border-collapse: collapse;
 }
 
-.food-card table td {
+#popup-content table td {
     padding: 10px;
     border: 1px solid #ddd;
 }