Update app.py

app.py

@@ -735,7 +735,7 @@ h3 {
     line-height: 1.8 !important;
 }
 
-/* استایل برای اسلایدر استاندارد Streamlit (فلیپ‌شده) */
+/* استایل برای اسلایدر استاندارد Streamlit (فلیپ‌شده، شبیه اسلایدر سفارشی) */
 .stSlider {
     direction: ltr !important; /* حفظ ltr برای اسلایدر */
     width: 100% !important;
@@ -743,19 +743,125 @@ h3 {
     padding: 0 !important;
     position: relative !important;
     transform: scaleX(-1) !important; /* فلیپ کردن اسلایدر */
+    background: #f8f9fa !important; /* پس‌زمینه شبیه اسلایدرهای سفارشی */
+    border-radius: 8px !important;
+    padding: 10px 0 !important; /* فاصله داخلی برای حس سفارشی */
+}
+
+/* مسیر اسلایدر */
+.stSlider [role="slider"] {
+    background-color: #d8d2f3 !important; /* رنگ مسیر، بنفش خیلی روشن */
+    height: 14px !important; /* مسیر ضخیم‌تر */
+    border-radius: 7px !important;
+    width: 100% !important;
+    position: relative !important;
+    transform: scaleX(-1) !important; /* معکوس کردن مسیر */
+    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) !important; /* سایه داخلی */
+}
+
+/* دستگیره اسلایدر */
+.stSlider [role="slider"]::-webkit-slider-thumb {
+    background-color: #6a0dad !important; /* رنگ دستگیره، بنفش تیره */
+    border: 3px solid #ffffff !important; /* حاشیه سفید */
+    width: 28px !important; /* دستگیره بزرگ‌تر */
+    height: 28px !important;
+    border-radius: 50% !important; /* دایره‌ای */
+    cursor: pointer !important;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important; /* سایه قوی */
+    position: relative !important;
+    transition: all 0.3s ease !important; /* انیمیشن نرم */
+    transform: scaleX(-1) !important; /* معکوس کردن دستگیره */
+}
+
+.stSlider [role="slider"]::-webkit-slider-thumb:hover {
+    transform: scaleX(-1) scale(1.3) !important; /* بزرگ شدن موقع هاور */
+    box-shadow: 0 6px 12px rgba(0,0,0,0.4) !important; /* سایه قوی‌تر */
+}
+
+.stSlider [role="slider"]::-webkit-slider-thumb:active {
+    transform: scaleX(-1) scale(1.2) !important; /* کمی کوچک‌تر موقع کلیک */
+}
+
+.stSlider [role="slider"]::-moz-range-thumb {
+    background-color: #6a0dad !important;
+    border: 3px solid #ffffff !important;
+    width: 28px !important;
+    height: 28px !important;
+    border-radius: 50% !important;
+    cursor: pointer !important;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
+    position: relative !important;
+    transition: all 0.3s ease !important;
+    transform: scaleX(-1) !important;
+}
+
+.stSlider [role="slider"]::-moz-range-thumb:hover {
+    transform: scaleX(-1) scale(1.3) !important;
+    box-shadow: 0 6px 12px rgba(0,0,0,0.4) !important;
+}
+
+.stSlider [role="slider"]::-moz-range-thumb:active {
+    transform: scaleX(-1) scale(1.2) !important;
+}
+
+.stSlider [role="slider"]::-webkit-slider-runnable-track {
+    background-color: #d8d2f3 !important;
+    height: 14px !important;
+    border-radius: 7px !important;
+}
+
+.stSlider [role="slider"]::-moz-range-track {
+    background-color: #d8d2f3 !important;
+    height: 14px !important;
+    border-radius: 7px !important;
+}
+
+/* علامت‌های نقاط (ticks) */
+.stSlider::before {
+    content: '';
+    position: absolute;
+    top: 14px;
+    width: 100%;
+    height: 14px;
+    pointer-events: none;
+    background: repeating-linear-gradient(
+        to right,
+        #6a0dad 0,
+        #6a0dad 4px,
+        transparent 4px,
+        transparent 14.28%
+    );
+    transform: scaleX(-1) !important; /* معکوس کردن ticks */
+}
+
+/* اعداد زیر نقاط (۷ تا ۱) */
+.stSlider::after {
+    content: '7 6 5 4 3 2 1';
+    position: absolute;
+    top: 32px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px !important; /* اعداد بزرگ‌تر */
+    color: #6a0dad !important; /* رنگ بنفش */
+    font-family: 'B Nazanin' !important;
+    font-weight: bold !important;
+    direction: ltr !important;
+    transform: scaleX(-1) !important; /* معکوس کردن اعداد */
 }
 
-/* استایل برای لیبل‌های اسلایدر (هماهنگ با فلیپ) */
+/* لیبل‌های اسلایدر */
 .slider-labels {
     display: flex !important;
     justify-content: space-between !important;
-    font-size: 12px !important;
+    font-size: 16px !important; /* لیبل‌ها بزرگ‌تر */
     font-weight: bold !important;
-    margin-bottom: 8px !important;
+    margin-bottom: 12px !important;
     color: #333333 !important;
     font-family: 'B Nazanin' !important;
-    direction: ltr !important; /* هماهنگی با اسلایدر فلیپ‌شده */
+    direction: ltr !important; /* هماهنگی با فلیپ */
     width: 100% !important;
+    transform: scaleX(-1) !important; /* فلیپ کردن لیبل‌ها */
 }
 
 /* استایل برای متن پاسخ انتخاب‌شده */
@@ -763,10 +869,13 @@ h3 {
     text-align: center !important;
     color: #6a0dad !important;
     font-weight: bold !important;
-    font-size: 14px !important;
-    margin-top: 12px !important;
+    font-size: 18px !important; /* متن بزرگ‌تر */
+    margin-top: 15px !important;
     font-family: 'B Nazanin' !important;
     direction: rtl !important;
+    background: #f0e6ff !important; /* پس‌زمینه بنفش روشن */
+    padding: 8px !important;
+    border-radius: 6px !important;
 }
 
 /* جلوگیری از پریدن اسلایدر */