/* تنظیمات پایه برای راستچین و فونت */
body {
    direction: rtl; /* راستچین کردن کلی صفحه */
    text-align: right; /* تراز بندی متن به راست (برای متون طولانی) */
    font-family: Tahoma, 'vazir', sans-serif; /* فونت زیبا و خوانا (باید فونت فارسی مورد نظر را لینک کنید) */
    
    /* تنظیمات برای وسط چین کردن محتوا در صفحه */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* ارتفاع کامل Viewport */
    margin: 0;
    
    /* تنظیمات بصری */
    background-color: #f0f4f8; /* رنگ پس‌زمینه روشن */
    color: #333; /* رنگ متن */
}

/* کانتینر اصلی محتوا */
.coming-soon-container {
    padding: 30px;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 90%;
    width: 400px;
    text-align: center; /* وسط‌چین کردن متن داخل کانتینر */
}

/* استایل عنوان اصلی */
.main-title {
    color: #007bff; /* رنگ آبی جذاب */
    font-size: 2.5em;
    margin-bottom: 10px;
    font-family: 'vazir';
}

/* استایل زیرنویس */
.subtitle {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 30px;
    line-height: 1.6;
    font-family: 'vazir';
}

/* --- استایل انیمیشن لودینگ (سه نقطه) --- */
.loader-dots {
    display: flex;
    justify-content: center; /* وسط‌چین کردن نقاط */
    margin-top: 20px;
}

.dot {
    width: 12px;
    height: 12px;
    margin: 0 6px;
    background-color: #007bff;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both; /* اعمال انیمیشن */
}

/* تأخیر برای هر نقطه */
.dot:nth-child(1) {
    animation-delay: -0.32s;
}

.dot:nth-child(2) {
    animation-delay: -0.16s;
}

/* تعریف انیمیشن بالا و پایین رفتن */
@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1.0);
    }
}