Update app.py

app.py

@@ -31,6 +31,8 @@ st.markdown("""
         --border: #dddddd;
         --input-bg: #ffffff;
         --secondary-bg: #f8f9fa;
+        --green: #f0ff0;
+        --dgreen: #006400
     }
 
     * {
@@ -39,61 +41,159 @@ st.markdown("""
         direction: rtl !important;
     }
 
+    /* تنظیمات اصلی */
     body, .stApp, [data-testid="stAppViewContainer"] {
         background-color: var(--background) !important;
         color: var(--text) !important;
     }
 
-    /* استایل فرم‌ها و کارت‌ها */
-    .stForm, .stCard {
-        border: 1px solid var(--primary) !important;
-        border-radius: 10px !important;
-        padding: 20px !important;
-        margin-bottom: 20px !important;
+    /* هدر راهیار */
+    .rahyar-title {
+        color: var(--primary) !important;
+        margin: 0 !important;
+    }
+    
+    .rahyar-subtitle {
+        color: var(--primary) !important;
+        margin: 0 !important;
+        font-size: 14px !important;
+    }
+
+        /* توضیحات */
+    .explanation-title {
+        color: var(--primary) !important;
+        font-weight: bold !important;
+        margin: 20px 0 10px 0 !important;
+        font-size: 18px !important;
+    }
+
+    .explanation-item {
         background-color: var(--secondary-bg) !important;
+        border-radius: 8px !important;
+        padding: 12px 15px !important;
+        margin: 8px 0 !important;
+        border-right: 3px solid var(--primary) !important;
     }
 
-    /* استایل ورودی‌ها */
+    /* ========== استایل‌های ورودی یکپارچه ========== */
+    /* استایل پایه برای تمام عناصر ورودی */
     .stTextInput input, 
     .stNumberInput input, 
     .stSelectbox select,
-    .stTextArea textarea {
-        border: 1px solid var(--primary) !important;
+    .stTextArea textarea,
+    .stDateInput input,
+    .stTimeInput input,
+    .stMultiSelect div[role="combobox"],
+    div[data-testid="stVerticalBlock"] > div[data-testid="stHorizontalBlock"] > div > div > div > div > input,
+    div[data-baseweb="select"] > div:first-child {
+        color: var(--text) !important;
+        background-color: var(--input-bg) !important;
+        border: 1px solid var(--primary) !important;  /* استفاده از رنگ primary برای حاشیه */
         border-radius: 5px !important;
         padding: 8px 12px !important;
-        background-color: var(--input-bg) !important;
+        min-height: 40px !important;
     }
-
+    
+    /* استایل برای حالت hover و focus */
+    .stTextInput input:hover,
+    .stNumberInput input:hover,
+    .stSelectbox select:hover,
+    .stTextArea textarea:hover,
+    .stDateInput input:hover,
+    .stTimeInput input:hover {
+        border-color: var(--primary) !important;
+        box-shadow: 0 0 0 2px rgba(106, 13, 173, 0.2) !important;
+    }  
+    
     /* استایل لیبل‌ها */
     .stTextInput > label,
     .stNumberInput > label,
     .stSelectbox > label,
-    .stRadio > label {
+    .stRadio > label,
+    .stSlider > label {
         color: var(--text) !important;
         font-weight: bold !important;
-        margin-bottom: 8px !important;
+        margin-bottom: 4px !important;
+    }
+    
+    /* استایل placeholder */
+    ::placeholder {
+        color: var(--text) !important;
+        opacity: 0.7 !important;
+    }
+    
+    /* ========== استایل‌های خاص Selectbox ========== */
+    
+    /* ایجاد فلش سفارشی */
+    div[data-baseweb="select"] {
+        position: relative;
     }
 
-    /* استایل رادیو باتن‌ها */
-    .stRadio input[type="radio"] + span {
-        border-color: var(--primary) !important;
+    div[data-baseweb="select"]::after {
+        content: "▼";
+        position: absolute;
+        left: 8px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: var(--primary);
+        background-color: white !important; /* پسزمینه سفید برای پوشاندن فلش پیشفرض */
+        font-size: 14px;
+        pointer-events: none;
+    }
+          
+
+    /* ===== راه حل تضمینی برای استایل dropdown ===== */
+    
+    /* آیتم‌های لیست */
+    div[data-baseweb="popover"] [role="option"] {
+        color: var(--text) !important;
         background-color: white !important;
+        border: 1px var(--primary) !important;
+    }
+    
+    /* آیتم انتخاب شده */
+    div[data-baseweb="popover"] [role="option"][aria-selected="true"] {
+        background-color: #f0e6ff !important;
+        color: black !important;
+    }
+    
+    /* ========== استایل‌های Number Input ========== */
+    .stNumberInput button {
+        color: var(--primary) !important;
+        background-color: transparent !important;
+        border: none !important;
+        width: 30px !important;
+        font-weight: bold !important;
+    }
+    
+    .stNumberInput button:hover {
+        background-color: #f0e6ff !important;
     }
+    
 
-    .stRadio input[type="radio"]:checked + span {
+    /* کامپوننت‌های سفارشی */
+    .rahyar-header {
         background-color: var(--primary) !important;
-        border-color: var(--primary) !important;
-        box-shadow: inset 0 0 0 2px white !important;
+        color: white !important;
+        padding: 15px !important;
+        border-radius: 10px !important;
+        margin-bottom: 20px !important;
+        text-align: center !important;
     }
 
-    .stRadio input[type="radio"]:checked + span + span {
-        color: var(--primary) !important;
-        font-weight: bold !important;
+    .price-container {
+        background-color: var(--secondary-bg) !important;
+        border-radius: 10px !important;
+        padding: 15px !important;
+        margin: 15px 0 !important;
+        border-right: 5px solid var(--primary) !important;
     }
 
-    /* استایل دکمه‌ها */
-    .stButton > button,
-    [data-testid="baseButton-primary"] {
+    /* دکمه اصلی (بنفش با متن سفید) */
+    .stButton>button, 
+    [data-testid="baseButton-primary"],
+    .accept-btn,
+    div[data-testid="stVerticalBlock"] > div[data-testid="stHorizontalBlock"] > div > div > button {
         background-color: var(--primary) !important;
         color: white !important;
         border: none !important;
@@ -102,32 +202,95 @@ st.markdown("""
         font-weight: bold !important;
     }
 
-    /* استایل selectbox */
-    div[data-baseweb="select"] {
-        position: relative;
+    /* دکمه ثانویه (سفید با حاشیه بنفش) */
+    .stFormSubmitButton>button,
+    [data-testid="baseButton-secondary"],
+    .reject-btn {
+        background-color: var(--primary) !important;
+        color: var(--input-bg) !important;
+        border: 1px solid var(--primary) !important;
+        border-radius: 8px !important;
+        padding: 10px 20px !important;
+        font-weight: bold !important;
     }
 
-    div[data-baseweb="select"]::after {
-        content: "▼";
-        position: absolute;
-        left: 8px;
-        top: 50%;
-        transform: translateY(-50%);
-        color: var(--primary);
-        font-size: 14px;
-        pointer-events: none;
+    
+     /* ========== استایل تضمینی برای گزینه‌های رادیویی ========== */
+    /* تمام سطوح لیبل‌ها */
+    .stRadio > label,
+    .stRadio > div > label,
+    .stRadio > div > div > label,
+    .stRadio > div > div > div > label {
+        color: #000000 !important; /* مشکی خالص */
+        font-weight: normal !important;
+        margin-right: 8px !important; /* فاصله از دکمه رادیویی */
+    }
+    
+    /* دایره رادیویی */
+    .stRadio input[type="radio"] + span {
+        border-color: #000000 !important; /* حاشیه مشکی */
+    }
+    
+    /* دایره رادیویی هنگام انتخاب */
+    .stRadio input[type="radio"]:checked + span {
+        background-color: #000000 !important; /* پس‌زمینه مشکی */
+        border-color: #000000 !important;
+    }
+    
+    /* متن گزینه‌ها */
+    .stRadio span {
+        color: #000000 !important; /* مشکی خالص */
+        font-size: 14px !important;
+        padding-right: 5px !important;
+    }
+    
+    /* حالت hover */
+    .stRadio label:hover span {
+        color: #333333 !important; /* مشکی کمی روشن‌تر */
+    }
+    
+    /* کانتینر اصلی */
+    .stRadio > div {
+        margin-bottom: 10px !important;
     }
 
-    /* استایل‌های مخصوص موبایل */
+
+    /* تنظیمات مخصوص موبایل */
     @media (max-width: 768px) {
-        .stForm, .stCard {
-            padding: 15px !important;
+        .folium-map {
+            height: 300px !important;
+        }
+        
+        /* فرم‌ها در موبایل */
+        .stTextInput>label,
+        .stNumberInput>label,
+        .stSelectbox>label {
+            font-size: 14px !important;
+            padding: 4px 0 !important;
         }
         
         .stTextInput input,
         .stNumberInput input,
         .stSelectbox select {
-            padding: 10px !important;
+            font-size: 16px !important;
+            padding: 12px !important;
+            height: auto !important;
+        }
+        
+        .stButton>button {
+            font-size: 14px !important;
+            padding: 8px 16px !important;
+        }
+        
+        .stMarkdown h3 {
+            font-size: 16px !important;
+        }
+        
+        .stMarkdown p {
+            font-size: 13px !important;
+        }
+        
+        .stSelectbox [role="listbox"] {
             font-size: 16px !important;
         }
     }