Update app.py

app.py

@@ -18,370 +18,657 @@ SHEET_NAME = "Condition1"
 
 # ========== استایل‌های سفارشی یکپارچه ==========
 st.markdown("""
-<style>
-    @font-face {
-        font-family: 'B Nazanin';
-        src: url('https://cdn.jsdelivr.net/gh/rastikerdar/fonts@master/fonts/B%20Nazanin/B%20Nazanin.woff') format('woff');
-    }
+<style>    
+/* تنظیمات کلی استایل‌ها */
+@font-face {
+    font-family: 'B Nazanin';
+    src: url('https://cdn.jsdelivr.net/gh/rastikerdar/fonts@master/fonts/B%20Nazanin/B%20Nazanin.woff') format('woff');
+}
 
-    :root {
-        --primary: #6a0dad;
-        --text: #333333;
-        --background: #ffffff;
-        --border: #dddddd;
-        --input-bg: #ffffff;
-        --secondary-bg: #f8f9fa;
-        --green: #f0ff0;
-        --dgreen: #006400
-    }
+:root {
+    --primary: #6a0dad;
+    --text: #333333;
+    --background: #ffffff;
+    --border: #dddddd;
+    --input-bg: #ffffff;
+    --secondary-bg: #f8f9fa;
+    --green: #f0ff0;
+    --dgreen: #006400;
+}
 
-    * {
-        font-family: 'B Nazanin', 'B Nazanin Bold', sans-serif !important;
-        text-align: right !important;
-        direction: rtl !important;
-    }
+* {
+    font-family: 'B Nazanin', 'B Nazanin Bold', sans-serif !important;
+    text-align: right !important;
+    direction: rtl !important;
+}
 
-    /* تنظیمات اصلی */
-    body, .stApp, [data-testid="stAppViewContainer"] {
-        background-color: var(--background) !important;
-        color: var(--text) !important;
-    }
+/* ======== تنظیمات پایه ======== */
+* {
+    font-family: 'B Nazanin', 'B Nazanin Bold', sans-serif !important;
+    text-align: right !important;
+    direction: rtl !important;
+    box-sizing: border-box !important;
+}
+
+/* تنظیمات برای موبایل و نمایش موبایل در تمام دستگاه‌ها */
+html, body, .stApp {
+    max-width: 768px !important; /* حداکثر عرض صفحه */
+    margin: 0 auto; /* وسط‌چین کردن محتوا */
+    width: 100% !important
+    background-color: var(--background) !important;
+    color: var(--text) !important;
+}
 
-    /* هدر راهیار */
-    .rahyar-title {
-        color: var(--primary) !important;
-        margin: 0 !important;
+@media (min-width: 768px) {    
+    /* Container for the mobile frame */
+    body {
+        background: #f0f0f0 !important;
+        display: flex !important;
+        justify-content: center !important;
+        align-items: center !important;
+        height: 100vh !important;
+        overflow: hidden !important;
     }
     
-    .rahyar-subtitle {
-        color: var(--primary) !important;
-        margin: 0 !important;
-        font-size: 14px !important;
+    /* Mobile frame styling */
+    [data-testid="stAppViewContainer"] {
+        width: 475px !important;
+        height: 667px !important;
+        margin: 0 auto !important;  
+        border: 12px solid #000 !important;
+        border-radius: 40px !important;
+        box-shadow: 
+            0 0 0 6px #666, 
+            0 0 30px rgba(0,0,0,0.5) !important;
+        background-color: var(--background) !important;
+        color: var(--text) !important;
+        overflow-y: auto !important;
+        overflow-x: hidden !important;
+        scrollbar-width: thin !important;
+        scrollbar-color: #6a0dad #f0f0f0 !important;
+        direction: rtl !important;
     }
 
-        /* توضیحات */
-    .explanation-title {
-        color: var(--primary) !important;
-        font-weight: bold !important;
-        margin: 20px 0 10px 0 !important;
-        font-size: 18px !important;
+    /* Remove any potential dark background from parent elements */
+    #root, .stApp {
+        background: transparent !important;
+        margin: 0 auto;
     }
 
-    .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;
+    /* Ensure Streamlit's main container doesn't add extra space */
+    [data-testid="stAppViewContainer"] > div {
+        max-width: 100% !important;
+        margin: 0 auto;
     }
 
-    /* ========== استایل‌های ورودی یکپارچه ========== */
-    /* استایل پایه برای تمام عناصر ورودی */
-    .stTextInput input, 
-    .stNumberInput input, 
-    .stSelectbox select,
-    .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;
-        border-radius: 6px !important;
-        min-height: 40px !important;
-        transition: all 0.2s ease !important;
-    }
-    
-    /* استایل برای حالت hover و focus */
-    .stTextInput input:hover,
-    .stNumberInput input:hover,
-    .stSelectbox select:hover,
-    .stTextArea textarea:hover,
-    .stDateInput input:hover,
-    .stTimeInput input:hover,
-    .stMultiSelect div[role="combobox"]:hover,
-    .stTextInput input:focus,
-    .stNumberInput input:focus,
-    .stSelectbox select:focus,
-    .stTextArea textarea:focus,
-    .stDateInput input:focus,
-    .stTimeInput input:focus {
-        border-color: var(--primary) !important;
-        box-shadow: 0 0 0 3px rgba(106, 13, 173, 0.15) !important;
-        outline: none !important;
-    }  
-    
-    /* استایل لیبل‌ها */
-    .stTextInput > label,
-    .stNumberInput > label,
-    .stSelectbox > label,
-    .stRadio > label,
-    .stSlider > label {
-        color: var(--text) !important;
-        font-weight: bold !important;
-        margin-bottom: 8px !important;
-        font-size: 14px !important;
+    /* Webkit scrollbar styles */
+    [data-testid="stAppViewContainer"]::-webkit-scrollbar {
+        width: 6px !important;
+        right: 0 !important;
+        left: auto !important;
     }
     
-    /* استایل placeholder */
-    ::placeholder {
-        color: var(--text) !important;
-        opacity: 0.5 !important;
+    [data-testid="stAppViewContainer"]::-webkit-scrollbar-track {
+        background: #f0f0f0 !important;
+        border-radius: 3px !important;
+        margin: 10px 0 !important;
     }
     
-    /* ========== استایل‌های خاص Selectbox ========== */
-    div[data-baseweb="select"] > div:first-child {
-        -webkit-appearance: none !important;
-        -moz-appearance: none !important;
-        appearance: none !important;
-        background-image: none !important;
+    [data-testid="stAppViewContainer"]::-webkit-scrollbar-thumb {
+        background-color: #6a0dad !important;
+        border-radius: 3px !important;
+        margin-left: 10px !important;
     }
     
-    /* برای اینترنت اکسپلورر */
-    div[data-baseweb="select"] > div:first-child::-ms-expand {
-        display: none !important;
+    /* Reset direction for content */
+    [data-testid="stAppViewContainer"] > * {
+        direction: ltr !important;
+        text-align: right !important;
     }
     
-    div[data-baseweb="select"] {
-        position: relative !important;
-    }
-
-    div[data-baseweb="select"]::after {
-        content: "▼";
+    /* Virtual home button */
+    [data-testid="stAppViewContainer"]::after {
+        content: "";
         position: absolute;
-        left: 8px;
-        top: 50%;
-        transform: translateY(-50%);
-        color: var(--primary);
-        background-color: white !important; /* پسزمینه سفید برای پوشاندن فلش پیشفرض */
-        font-size: 14px;
-        pointer-events: none;
+        bottom: 15px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 100px;
+        height: 4px;
+        background: #333;
+        border-radius: 2px;
     }
-          
-
-    /* ===== راه حل تضمینی برای استایل dropdown ===== */
-    
-    /* آیتم‌های لیست */
-    div[data-baseweb="popover"] [role="option"] {
-        color: var(--text) !important;
-        background-color: white !important;
-        border: 1px var(--primary) !important;
+    /* تنظیم پدینگ عمومی با * */
+    [data-testid="stAppViewContainer"] * {
+        padding-right: 5px !important;
+        padding-left: 8px !important;
+        box-sizing: border-box !important;
     }
     
-    /* آیتم انتخاب شده */
-    div[data-baseweb="popover"] [role="option"][aria-selected="true"] {
-        background-color: #f0e6ff !important;
-        color: black !important;
+    /* استثناهای اصلی */
+    [data-testid="stAppViewContainer"]::after,
+    [data-testid="stAppViewContainer"]::-webkit-scrollbar,
+    [data-testid="stAppViewContainer"] .stButton>button,
+    [data-testid="stAppViewContainer"] .stTextInput>div>div>input,
+    [data-testid="stAppViewContainer"] .stNumberInput>div>div>input,
+    [data-testid="stAppViewContainer"] .stSelectbox>div>div>select,
+    [data-testid="stAppViewContainer"] .stTextArea>div>textarea,
+    [data-testid="stAppViewContainer"] .stDateInput>div>div>input,
+    [data-testid="stAppViewContainer"] .stTimeInput>div>div>input,
+    [data-testid="stAppViewContainer"] .price-container,
+    [data-testid="stAppViewContainer"] .explanation-item,
+    [data-testid="stAppViewContainer"] .stAlert,
+    [data-testid="stAppViewContainer"] .stMarkdown,
+    [data-testid="stAppViewContainer"] .folium-map,
+    [data-testid="stAppViewContainer"] .stRadio>div>div>div>label,
+    [data-testid="stAppViewContainer"] .stCheckbox>div>div>label,
+    [data-testid="stAppViewContainer"] .stSlider>div>div>div>div,
+    [data-testid="stAppViewContainer"] .stMultiSelect>div>div>div {
+        padding-right: 0 !important;
+        padding-left: 0 !important;
     }
     
-    /* ========== استایل‌های Number Input ========== */
-    .stNumberInput button {
-        color: var(--primary) !important;
-        background-color: transparent !important;
-        border: none !important;
-        width: 30px !important;
-        font-weight: bold !important;
+    /* تنظیمات خاص برای کانتینرهای Streamlit */
+    [data-testid="stAppViewContainer"] [data-testid="stVerticalBlock"]>div,
+    [data-testid="stAppViewContainer"] [data-testid="stHorizontalBlock"]>div {
+        padding-right: 5px !important;
+        padding-left: 8px !important;
     }
     
-    .stNumberInput button:hover {
-        background-color: #f0e6ff !important;
+    /* بازنشانی پدینگ برای المان‌های داخلی خاص */
+    [data-testid="stAppViewContainer"] .stTextInput>div,
+    [data-testid="stAppViewContainer"] .stNumberInput>div,
+    [data-testid="stAppViewContainer"] .stSelectbox>div,
+    [data-testid="stAppViewContainer"] .stTextArea>div,
+    [data-testid="stAppViewContainer"] .stDateInput>div,
+    [data-testid="stAppViewContainer"] .stTimeInput>div {
+        padding-right: 0 !important;
+        padding-left: 0 !important;
     }
-    
+}
 
-    /* کامپوننت‌های سفارشی */
-    .rahyar-header {
-        background-color: var(--primary) !important;
-        color: white !important;
-        padding: 15px !important;
-        border-radius: 10px !important;
-        margin-bottom: 20px !important;
-        text-align: center !important;
-    }
+/* هدر راهیار */
+.rahyar-title {
+    color: var(--primary) !important;
+    margin: 0 !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;
-    }
+.rahyar-subtitle {
+    color: var(--primary) !important;
+    margin: 0 !important;
+    font-size: 14px !important;
+}
 
-    /* دکمه اصلی (بنفش با متن سفید) */
-    .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;
-        border-radius: 8px !important;
-        padding: 10px 20px !important;
-        font-weight: bold !important;
-        transition: all 0.3s ease !important; /* افزودن transition برای انیمیشن نرم */
-    }
-    
-    /* افکت hover برای دکمه اصلی */
-    .stButton>button:hover, 
-    [data-testid="baseButton-primary"]:hover,
-    .accept-btn:hover,
-    div[data-testid="stVerticalBlock"] > div[data-testid="stHorizontalBlock"] > div > div > button:hover {
-        background-color: #5a0a96 !important; /* بنفش تیره‌تر */
-        transform: translateY(-1px) !important; /* حرکت جزئی به بالا */
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* سایه بیشتر */
-    }
-    
-    /* دکمه ثانویه (سفید با حاشیه بنفش) */
-    .stFormSubmitButton>button,
-    [data-testid="baseButton-secondary"],
-    .reject-btn {
-        background-color: var(--primary) !important;
-        color: white !important;
-        border: none !important;
-        border-radius: 8px !important;
-        padding: 10px 20px !important;
-        font-weight: bold !important;
-        transition: all 0.3s ease !important; /* افزودن transition برای انیمیشن نرم */
-    }
-    
-    /* افکت hover برای دکمه ثانویه */
-    .stFormSubmitButton>button:hover,
-    [data-testid="baseButton-secondary"]:hover,
-    .reject-btn:hover {
-        background-color: #5a0a96 !important; /* بنفش تیره‌تر */
-        transform: translateY(-1px) !important; /* حرکت جزئی به بالا */
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* سایه بیشتر */
-    }
+    /* توضیحات */
+.explanation-title {
+    color: var(--primary) !important;
+    font-weight: bold !important;
+    margin: 20px 0 10px 0 !important;
+    font-size: 18px !important;
+}
 
-        /* استایل تضمینی برای رادیو باتن‌ها - نسخه نهایی */
-    .stRadio > div > div > div > div > div > label,
-    .stRadio > div > div > div > div > label,
-    .stRadio > div > div > div > label,
-    .stRadio > div > div > label,
-    .stRadio > div > label,
-    .stRadio > label {
-        color: #000000 !important;
-        -webkit-text-fill-color: #000000 !important; /* برای مرورگرهای وبکیت */
-    }
-    
-    .stRadio span {
-        color: #000000 !important;
-        -webkit-text-fill-color: #000000 !important;
-    }
-    
-    /* اگر باز هم مشکل داشت این را اضافه کنید */
-    .stRadio > div > div > div > div > div > label > div:first-child,
-    .stRadio > div > div > div > div > label > div:first-child,
-    .stRadio > div > div > div > label > div:first-child,
-    .stRadio > div > div > label > div:first-child,
-    .stRadio > div > label > div:first-child,
-    .stRadio > label > div:first-child {
-        color: #000000 !important;
-        -webkit-text-fill-color: #000000 !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;
+}
+
+
+/* ========== استایل‌های ورودی یکپارچه ========== */
+/* استایل پایه برای تمام کانتینرهای ورودی */
+div[data-baseweb="select"] > div:first-child,
+div[data-baseweb="input"] > div:first-child,
+div[data-baseweb="textarea"] > div:first-child {
+    color: var(--text) !important;
+    border-radius: 6px !important;
+    border: 1px solid var(--primary) !important;
+    background-color: white !important;
+}
+
+/* استایل داخلی برای المان‌های ورودی */
+div[data-baseweb="select"] input,
+div[data-baseweb="input"] input,
+div[data-baseweb="textarea"] textarea {
+    color: var(--text) !important;
+    background-color: white !important;
+    border: none !important;
+    min-height: 40px !important;
+    font-family: 'B Nazanin' !important;
+    direction: rtl !important;
+}
+
+/* استایل خاص برای سلکت باکس */
+div[data-baseweb="select"] > div:first-child {
+    -webkit-appearance: none !important;
+    -moz-appearance: none !important;
+    appearance: none !important;
+    background-image: none !important;
+    padding-right: 30px !important; /* فضای برای فلش */
+}
+
+/* فلش سفارشی برای سلکت باکس */
+div[data-baseweb="select"]::after {
+    content: "▼";
+    position: absolute;
+    left: 7px !important;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--primary) !important;
+    background-color: white !important; /* پسزمینه سفید برای پوشاندن فلش پیشفرض */
+    font-size: 14px !important;
+    pointer-events: none;
+}
+
+/* استایل dropdown */
+div[data-baseweb="popover"] {
+    border: 1px solid var(--primary) !important;
+    border-radius: 6px !important;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
+}
+
+/* آیتم‌های dropdown */
+div[data-baseweb="popover"] [role="option"] {
+    color: var(--text) !important;
+    background-color: white !important;
+    padding: 10px 12px !important;
+    font-family: 'B Nazanin' !important;
+    direction: rtl !important;
+}
+
+/* آیتم انتخاب شده در dropdown */
+div[data-baseweb="popover"] [role="option"][aria-selected="true"] {
+    background-color: #f0e6ff !important;
+}
+
+/* استایل hover برای تمام المان‌های ورودی */
+div[data-baseweb="select"] > div:first-child:hover,
+div[data-baseweb="input"] > div:first-child:hover,
+div[data-baseweb="textarea"] > div:first-child:hover {
+    border-color: var(--primary) !important;
+    box-shadow: 0 0 0 3px rgba(106, 13, 173, 0.15) !important;
+}
+
+/* استایل focus */
+div[data-baseweb="select"] > div:first-child:focus-within,
+div[data-baseweb="input"] > div:first-child:focus-within,
+div[data-baseweb="textarea"] > div:first-child:focus-within {
+    border-color: var(--primary) !important;
+    box-shadow: 0 0 0 3px rgba(106, 13, 173, 0.15) !important;
+    outline: none !important;
+}
+
+/* استایل لیبل‌ها */
+.stTextInput > label,
+.stNumberInput > label,
+.stSelectbox > label,
+.stRadio > label,
+.stSlider > label {
+    color: var(--text) !important;
+    font-weight: bold !important;
+    margin-bottom: 8px !important;
+    font-size: 14px !important;
+    display: block !important;
+}
+
+/* استایل placeholder */
+::placeholder {
+    color: var(--text) !important;
+    opacity: 0.5 !important;
+    font-family: 'B Nazanin' !important;
+}
+
+/* پاکسازی عناصر سیاه رنگ ناخواسته */
+div[data-testid="stNumberInput"] > div > div:first-child,
+div[data-testid="stNumberInput"] > div > div:last-child {
+    background-color: transparent !important;
+    border: none !important;
+}
+
+/* حذف عناصر سیاه پس‌زمینه */
+div[data-testid="stNumberInput"] button > div {
+    display: none !important;
+}
+
+/* حذف کامل عناصر داخلی ناخواسته */
+div[data-testid="stNumberInput"] button > div,
+div[data-testid="stNumberInput"] button > svg {
+    display: none !important;
+    visibility: hidden !important;
+}
+
+/* ایجاد آیکون‌های سفارشی با رنگ بنفش */
+div[data-testid="stNumberInput"] button {
+    position: relative !important;
+    color: transparent !important; /* مخفی کردن متن پیش‌فرض */
+}
+
+/* دکمه سمت راست (کاهش) */
+div[data-testid="stNumberInput"] button:first-child::after {
+    content: "-" !important;
+    position: absolute !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    color: var(--primary) !important;
+    font-size: 1.2rem !important;
+    font-weight: bold !important;
+}
+
+/* دکمه سمت چپ (افزایش) */
+div[data-testid="stNumberInput"] button:last-child::after {
+    content: "+" !important;
+    position: absolute !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    color: var(--primary) !important;
+    font-size: 1.2rem !important;
+    font-weight: bold !important;
+}
+
+/* بازنشانی کامل استایل‌های Streamlit */
+div[data-testid="stNumberInput"] button {
+    all: unset !important;
+    width: 36px !important;
+    height: 100% !important;
+    position: relative !important;
+    cursor: pointer !important;
+    z-index: 10 !important;
+}
 
-        /* استایل پایه برای هشدارها */
+/* تضمین رنگ در حالت‌های مختلف */
+div[data-testid="stNumberInput"] button:hover::after,
+div[data-testid="stNumberInput"] button:focus::after {
+    color: var(--primary) !important;
+}
+
+/* استایل hover برای دکمه‌ها */
+div[data-testid="stNumberInput"] button:hover {
+    background-color: #f0e6ff !important;
+}
+
+/* استایل focus */
+div[data-testid="stNumberInput"] > div:focus-within {
+    border-color: var(--primary) !important;
+    box-shadow: 0 0 0 3px rgba(106, 13, 173, 0.15) !important;
+    outline: none !important;
+}
+
+
+/* کامپوننت‌های سفارشی */
+.rahyar-header {
+    background-color: var(--primary) !important;
+    color: white !important;
+    padding: 15px !important;
+    border-radius: 10px !important;
+    margin-bottom: 20px !important;
+    text-align: center !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"],
+.accept-btn,
+div[data-testid="stVerticalBlock"] > div[data-testid="stHorizontalBlock"] > div > div > button {
+    background-color: var(--primary) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 8px !important;
+    padding: 10px 20px !important;
+    font-weight: bold !important;
+    transition: all 0.3s ease !important; /* افزودن transition برای انیمیشن نرم */
+}
+
+/* افکت hover برای دکمه اصلی */
+.stButton>button:hover, 
+[data-testid="baseButton-primary"]:hover,
+.accept-btn:hover,
+div[data-testid="stVerticalBlock"] > div[data-testid="stHorizontalBlock"] > div > div > button:hover {
+    background-color: #5a0a96 !important; /* بنفش تیره‌تر */
+    transform: translateY(-1px) !important; /* حرکت جزئی به بالا */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* سایه بیشتر */
+}
+
+/* دکمه ثانویه (سفید با حاشیه بنفش) */
+.stFormSubmitButton>button,
+[data-testid="baseButton-secondary"],
+.reject-btn {
+    background-color: var(--primary) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 8px !important;
+    padding: 10px 20px !important;
+    font-weight: bold !important;
+    transition: all 0.3s ease !important; /* افزودن transition برای انیمیشن نرم */
+}
+
+/* افکت hover برای دکمه ثانویه */
+.stFormSubmitButton>button:hover,
+[data-testid="baseButton-secondary"]:hover,
+.reject-btn:hover {
+    background-color: #5a0a96 !important; /* بنفش تیره‌تر */
+    transform: translateY(-1px) !important; /* حرکت جزئی به بالا */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* سایه بیشتر */
+}
+
+    /* استایل تضمینی برای رادیو باتن‌ها - نسخه نهایی */
+.stRadio > div > div > div > div > div > label,
+.stRadio > div > div > div > div > label,
+.stRadio > div > div > div > label,
+.stRadio > div > div > label,
+.stRadio > div > label,
+.stRadio > label {
+    color: #000000 !important;
+    -webkit-text-fill-color: #000000 !important; /* برای مرورگرهای وبکیت */
+}
+
+.stRadio span {
+    color: #000000 !important;
+    -webkit-text-fill-color: #000000 !important;
+}
+
+/* اگر باز هم مشکل داشت این را اضافه کنید */
+.stRadio > div > div > div > div > div > label > div:first-child,
+.stRadio > div > div > div > div > label > div:first-child,
+.stRadio > div > div > div > label > div:first-child,
+.stRadio > div > div > label > div:first-child,
+.stRadio > div > label > div:first-child,
+.stRadio > label > div:first-child {
+    color: #000000 !important;
+    -webkit-text-fill-color: #000000 !important;
+}
+
+    /* استایل پایه برای هشدارها */
+.stAlert .st-ae {
+    border-right: 4px solid #ffc107 !important;
+    background-color: #fff3cd !important;
+    border-radius: 8px !important;
+    padding: 16px !important;
+    color: #856404 !important;
+}
+
+/* آیکون هشدار */
+.stAlert .st-af {
+    color: #ffc107 !important;
+    font-size: 20px !important;
+}
+
+/* متن هشدار */
+.stAlert .st-ag {
+    color: #856404 !important;
+    font-family: 'B Nazanin' !important;
+    font-size: 14px !important;
+    margin-right: 8px !important;
+}
+
+/* حالت hover برای هشدار */
+.stAlert .st-ae:hover {
+    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2) !important;
+    transform: translateX(2px);
+    transition: all 0.3s ease;
+}
+
+/* استایل برای دکمه بستن هشدار */
+.stAlert .st-ah {
+    color: #856404 !important;
+}
+
+/* استایل مخصوص موبایل */
+@media (max-width: 768px) {
     .stAlert .st-ae {
-        border-right: 4px solid #ffc107 !important;
-        background-color: #fff3cd !important;
-        border-radius: 8px !important;
-        padding: 16px !important;
-        color: #856404 !important;
+        padding: 12px !important;
+        font-size: 13px !important;
     }
-    
-    /* آیکون هشدار */
-    .stAlert .st-af {
-        color: #ffc107 !important;
-        font-size: 20px !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) {
+    .folium-map {
+        height: 300px !important;
     }
     
-    /* متن هشدار */
-    .stAlert .st-ag {
-        color: #856404 !important;
-        font-family: 'B Nazanin' !important;
+    /* فرم‌ها در موبایل */
+    .stTextInput>label,
+    .stNumberInput>label,
+    .stSelectbox>label {
         font-size: 14px !important;
-        margin-right: 8px !important;
-    }
-    
-    /* حالت hover برای هشدار */
-    .stAlert .st-ae:hover {
-        box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2) !important;
-        transform: translateX(2px);
-        transition: all 0.3s ease;
+        padding: 4px 0 !important;
     }
     
-    /* استایل برای دکمه بستن هشدار */
-    .stAlert .st-ah {
-        color: #856404 !important;
+    .stTextInput input,
+    .stNumberInput input,
+    .stSelectbox select {
+        font-size: 16px !important;
+        padding: 12px !important;
+        height: auto !important;
     }
     
-    /* استایل مخصوص موبایل */
-    @media (max-width: 768px) {
-        .stAlert .st-ae {
-            padding: 12px !important;
-            font-size: 13px !important;
-        }
+    .stButton>button {
+        font-size: 14px !important;
+        padding: 8px 16px !important;
     }
     
-
-    /* متن گزینه‌ها */
-    .stRadio span {
-        color: #000000 !important; /* مشکی خالص */
-        font-size: 14px !important;
-        padding-right: 5px !important;
+    .stMarkdown h3 {
+        font-size: 16px !important;
     }
     
-    /* حالت hover */
-    .stRadio label:hover span {
-        color: #333333 !important; /* مشکی کمی روشن‌تر */
+    .stMarkdown p {
+        font-size: 13px !important;
     }
     
-    /* کانتینر اصلی */
-    .stRadio > div {
-        margin-bottom: 10px !important;
+    .stSelectbox [role="listbox"] {
+        font-size: 16px !important;
     }
+}
 
+/* ======== تنظیمات پایه واکنش‌گرا ======== */
+:root {
+    /* اندازه‌های پایه بر اساس عرض 375px (آیفون X) */
+    --base-font-size: 14px;
+    --base-heading1-size: 24px;
+    --base-heading2-size: 20px;
+    --base-heading3-size: 18px;
+    --base-input-font: 16px;
+    --base-button-font: 16px;
+}
 
-    /* تنظیمات مخصوص موبایل */
-    @media (max-width: 768px) {
-        .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 {
-            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;
-        }
+/* ======== تنظیمات پویا بر اساس عرض دستگاه ======== */
+@media (max-width: 400px) {
+    :root {
+        --base-font-size: 13px;
+        --base-heading1-size: 22px;
+        --base-heading2-size: 18px;
+        --base-heading3-size: 16px;
+        --base-input-font: 14px;
+        --base-button-font: 14px;
     }
+}
+
+@media (min-width: 401px) and (max-width: 768px) {
+    :root {
+        --base-font-size: 14px;
+        --base-heading1-size: 24px;
+        --base-heading2-size: 20px;
+        --base-heading3-size: 18px;
+        --base-input-font: 16px;
+        --base-button-font: 16px;
+    }
+}
+
+/* ======== اعمال اندازه‌های پویا ======== */
+* {
+    font-size: var(--base-font-size) !important;
+}
+
+h1 {
+    font-size: var(--base-heading1-size) !important;
+}
+
+h2 {
+    font-size: var(--base-heading2-size) !important;
+}
+
+h3 {
+    font-size: var(--base-heading3-size) !important;
+}
+
+.stTextInput input,
+.stNumberInput input,
+.stSelectbox select,
+.stTextArea textarea {
+    font-size: var(--base-input-font) !important;
+}
+
+.stButton>button {
+    font-size: var(--base-button-font) !important;
+}
+
+/* ======== تنظیمات نقشه واکنش‌گرا ======== */
+.folium-map {
+    height: calc(100vw * 0.8) !important; /* ارتفاع متناسب با عرض */
+    max-height: 400px !important;
+}
+
+/* ======== تنظیمات کانتینرها ======== */
+.price-container,
+.explanation-item {
+    padding: calc(var(--base-font-size) * 0.8) !important;
+    margin: calc(var(--base-font-size) * 0.5) 0 !important;
+}
+
+/* ======== تنظیمات دکمه‌ها ======== */
+.stButton>button {
+    padding: calc(var(--base-font-size) * 0.7) calc(var(--base-font-size) * 1.2) !important;
+}
 </style>
 """, unsafe_allow_html=True)
 
@@ -1035,16 +1322,18 @@ def thank_you_page():
     ✉ ایمیل: maryam.ilka2000@gmail.com
     """)
     st.balloons()
-    
-    if st.button("بازگشت به ابتدا"):
-        st.session_state.clear()
-        st.rerun()
 
 # ========== مدیریت وضعیت و صفحه‌بندی ==========
 def main():
     # تشخیص دستگاه
     user_agent = st.query_params.get("user_agent", [""])[0]
     st.session_state.is_desktop = "mobile" not in user_agent.lower()
+
+
+    # اینجا می‌توانید از is_desktop برای تعیین اینکه نمایشگر موبایل اعمال شود، استفاده کنید
+    if st.session_state.is_desktop:
+        # اطمینان از نمایش همان حالت موبایل برای همه دستگاه‌ها
+        st.session_state.is_desktop = False
     
     if 'current_page' not in st.session_state:
         st.session_state.current_page = "welcome"