/* ----------------------------------------------------------------
   1. تنظیمات پایه و ریست (Global)
------------------------------------------------------------------- */
body { 
    font-family: 'Vazirmatn', sans-serif !important; 
    background-color: #f4f7fa; 
    direction: rtl; 
    margin: 0; 
    padding: 0; 
    color: #1e293b;
    scroll-behavior: smooth; 
    overflow-x: hidden; /* جلوگیری از اسکرول افقی ناخواسته در موبایل */
}

/* اجبار فونت روی تمام اجزا */
button, input, select, textarea, span, div, h1, h2, h3, h4, h5, h6 {
    font-family: 'Vazirmatn', sans-serif !important;
}

/* ----------------------------------------------------------------
   2. استایل‌های پس‌زمینه و گرادینت
------------------------------------------------------------------- */
.gradient-bg { 
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); 
}

/* ----------------------------------------------------------------
   3. جداول و خروجی هوش مصنوعی (Prose & Tables)
------------------------------------------------------------------- */
/* کانتینر اصلی گزارش برای هندل کردن اسکرول */
.prose {
    width: 100%;
    overflow-x: auto; /* اسکرول افقی برای جداول بزرگ */
    -webkit-overflow-scrolling: touch; /* اسکرول نرم در iOS */
}

.prose table { 
    width: 100%; 
    min-width: 600px; /* حداقل عرض برای حفظ ساختار */
    border-collapse: separate; 
    border-spacing: 0; 
    margin: 25px 0; 
    background-color: #ffffff; 
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.prose th, .prose td { 
    padding: 16px; 
    text-align: center; 
    font-size: 0.95rem; 
    border-bottom: 1px solid #f1f5f9;
    white-space: nowrap; /* جلوگیری از شکستن متن */
}

.prose th { 
    background-color: #4f46e5; 
    color: #ffffff; 
    font-weight: 800;
}

.prose tr:last-child td { border-bottom: none; }
.prose tr:nth-child(even) { background-color: #f8fafc; }

/* تایپوگرافی متن گزارش */
.prose p, .prose ul, .prose li {
    font-size: 1.1rem;
    line-height: 2.2;
    color: #334155;
    text-align: justify;
}
.prose strong { color: #1e40af; font-weight: 900; }
.prose h1, .prose h2, .prose h3 { color: #1e293b; font-weight: 900; margin-top: 1.5em; margin-bottom: 0.8em; }

/* ----------------------------------------------------------------
   4. سیستم احراز هویت (Auth)
------------------------------------------------------------------- */
.auth-card { 
    background: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(20px); 
    border-radius: 2.5rem; 
    box-shadow: 0 30px 60px -15px rgba(79, 70, 229, 0.2); 
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.auth-input { 
    width: 100%; 
    padding: 16px 24px; 
    border: 2px solid #e2e8f0; 
    border-radius: 1.2rem; 
    outline: none; 
    transition: all 0.3s ease; 
    margin-bottom: 15px; 
    font-weight: 600; 
    background-color: #fcfcfc;
}

.auth-input:focus { 
    border-color: #4f46e5; 
    background-color: #ffffff; 
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1); 
    transform: translateY(-2px);
}

/* ----------------------------------------------------------------
   5. المان‌های شناور و ناوبری (Floating Elements)
------------------------------------------------------------------- */
.credit-badge { 
    position: fixed; 
    top: 25px; 
    left: 25px; 
    background: rgba(255, 255, 255, 0.95); 
    padding: 10px 20px; 
    border-radius: 1.2rem; 
    box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.15); 
    z-index: 1000; 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    border: 1px solid #e2e8f0; 
    backdrop-filter: blur(10px);
}

.logout-btn { 
    background-color: #fee2e2; 
    color: #dc2626; 
    padding: 8px 14px; 
    border-radius: 0.8rem; 
    font-size: 12px; 
    font-weight: 800; 
    cursor: pointer; 
    transition: 0.2s;
    border: none;
}
.logout-btn:hover { background-color: #fca5a5; transform: scale(1.05); }

/* دکمه خانه شناور - فیکس شده */
.floating-home { 
    position: fixed; 
    bottom: 30px; 
    right: 30px; 
    width: 60px; 
    height: 60px; 
    background-color: #000000; 
    color: #ffffff; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.4); 
    cursor: pointer; 
    transition: all 0.3s ease; 
    z-index: 2000 !important; /* اولویت بالا برای دیده شدن روی همه چیز */
    border: 2px solid white;
}
.floating-home:hover { transform: scale(1.1) rotate(10deg); background-color: #1e1e1e; }

/* ----------------------------------------------------------------
   6. مودال پرداخت و کارت‌ها
------------------------------------------------------------------- */
.modal-overlay { 
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.85); 
    display: flex; align-items: center; justify-content: center; 
    z-index: 3000; backdrop-filter: blur(12px); padding: 20px;
}

.pricing-card { 
    border: 2px solid #f1f5f9; 
    cursor: pointer; 
    transition: all 0.4s ease; 
    background: #ffffff; 
    border-radius: 2rem; 
    position: relative;
}
.pricing-card:hover { transform: translateY(-5px); border-color: #818cf8; }
.pricing-card.selected { border-color: #4f46e5; background-color: #f5f3ff; box-shadow: 0 20px 40px -10px rgba(79, 70, 229, 0.25); transform: scale(1.05); }

.card-active { 
    border: 3px solid #4f46e5 !important; 
    background-color: #eef2ff !important; 
    color: #4338ca; 
    transform: scale(1.02); 
    box-shadow: 0 15px 30px -10px rgba(79, 70, 229, 0.2); 
}

/* ----------------------------------------------------------------
   7. انیمیشن‌ها و اسلایدر
------------------------------------------------------------------- */
.animate-in { animation: fadeIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

input[type="range"] { 
    accent-color: #4f46e5; 
    height: 6px; 
    border-radius: 10px; 
    cursor: pointer; 
    width: 100%;
}

/* ----------------------------------------------------------------
   8. تنظیمات ریسپانسیو (موبایل) - بسیار مهم
------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* تغییر چیدمان فرم به ستونی */
    .flex-col-mobile { flex-direction: column !important; }
    
    /* تغییر سایز و مکان سایدبار */
    .sidebar-mobile { 
        width: 100% !important; 
        padding: 20px !important; 
        flex-direction: row !important; 
        align-items: center; 
        justify-content: space-between;
    }
    
    /* مخفی کردن عناصر اضافی در موبایل */
    .hide-on-mobile { display: none !important; }
    
    /* تنظیم عرض محتوا */
    .w-full-mobile { width: 100% !important; padding: 20px !important; }
    
    /* جابجایی بج اعتبار برای تداخل نداشتن با هدر */
    .credit-badge { 
        top: 15px; 
        left: 15px; 
        padding: 8px 12px; 
        font-size: 0.8rem;
    }
    
    /* کوچک کردن دکمه شناور */
    .floating-home { width: 50px; height: 50px; bottom: 20px; right: 20px; }
}