Create components/styles.py

components/styles.py

@@ -0,0 +1,68 @@
+.food-card {
+    border: 2px solid #ccc;
+    border-radius: 12px;
+    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
+    width: 350px;
+    background-color: #fff;
+    overflow: hidden;
+    font-family: 'Arial', sans-serif;
+    margin: auto;
+    position: relative;
+}
+
+.card-header {
+    position: relative;
+    height: 150px;
+    background: #f0f0f0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.food-image {
+    max-height: 100%;
+    width: auto;
+    object-fit: contain;
+}
+
+.close-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: #ff3333;
+    border: none;
+    color: white;
+    border-radius: 50%;
+    width: 25px;
+    height: 25px;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+.card-content {
+    padding: 16px;
+}
+
+.nutrition-details h3 {
+    margin-bottom: 12px;
+    text-align: center;
+    font-size: 18px;
+}
+
+.nutrition-details table {
+    width: 100%;
+    border-spacing: 0;
+    font-size: 14px;
+}
+
+.nutrition-details td {
+    padding: 8px 0;
+    border-bottom: 1px solid #eee;
+}
+
+.portion-details {
+    text-align: right;
+    font-size: 14px;
+    margin-top: 12px;
+    color: #555;
+}