Updated css.

app.py

@@ -1,4 +1,4 @@
-# app.py - Enhanced Professional UI
+# app.py - Enhanced Professional UI with Fixed Dropdowns
 import gradio as gr
 import requests
 import json
@@ -200,7 +200,7 @@ def test_service():
     except Exception as e:
         return f"❌ **Test Error**: {str(e)}"
 
-# Enhanced professional CSS styling
+# Fixed CSS - Removed problematic dropdown overrides
 custom_css = """
 /* Global container styling */
 .gradio-container {
@@ -289,7 +289,7 @@ custom_css = """
 }
 
 .form-section h3 {
-    color: #ffffff !important;
+    color: #1e3c72 !important;
     font-weight: 700 !important;
     font-size: 1.5rem !important;
     margin-bottom: 1.5rem !important;
@@ -298,8 +298,8 @@ custom_css = """
     gap: 0.75rem !important;
 }
 
-/* Input styling */
-.gradio-textbox, .gradio-number {
+/* Input styling - only for textboxes and numbers, NOT dropdowns */
+input[type="text"], input[type="number"], textarea {
     border-radius: 12px !important;
     border: 2px solid #e5e7eb !important;
     transition: all 0.3s ease !important;
@@ -307,35 +307,15 @@ custom_css = """
     padding: 0.75rem 1rem !important;
 }
 
-.gradio-textbox:focus, .gradio-number:focus {
+input[type="text"]:focus, input[type="number"]:focus, textarea:focus {
     border-color: #667eea !important;
     box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
     outline: none !important;
 }
 
-/* Dropdown styling - more specific selectors */
-.gradio-dropdown .wrap {
-    border-radius: 12px !important;
-    border: 2px solid #e5e7eb !important;
-    transition: all 0.3s ease !important;
-}
-
-.gradio-dropdown .wrap:focus-within {
-    border-color: #667eea !important;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
-}
-
-.gradio-dropdown select, .gradio-dropdown input {
-    font-size: 1rem !important;
-    padding: 0.75rem 1rem !important;
-    border: none !important;
-    background: transparent !important;
-}
-
-.gradio-dropdown .dropdown {
-    border-radius: 12px !important;
-    border: 2px solid #e5e7eb !important;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
+/* Minimal dropdown styling - let Gradio handle the functionality */
+.gradio-dropdown {
+    margin-bottom: 1rem !important;
 }
 
 /* Button styling */
@@ -396,7 +376,7 @@ custom_css = """
 }
 
 .tips-section h4 {
-    color: #ffffff !important;
+    color: #1e3c72 !important;
     font-weight: 700 !important;
     margin-bottom: 1rem !important;
 }
@@ -505,7 +485,9 @@ with gr.Blocks(
                         choices=["20s", "30s", "40s", "50s+"], 
                         label="📅 Age Group",
                         value="30s",
-                        info="Your current life stage affects investment timeline"
+                        info="Your current life stage affects investment timeline",
+                        interactive=True,
+                        show_label=True
                     )
                     
                     country = gr.Dropdown(
@@ -515,7 +497,9 @@ with gr.Blocks(
                         ],
                         label="🌍 Country of Residence",
                         value="United States",
-                        info="Tax jurisdiction for investment recommendations"
+                        info="Tax jurisdiction for investment recommendations",
+                        interactive=True,
+                        show_label=True
                     )
             
             # Financial Information Section