@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');

body {
    margin: 0;
    padding: 0;
    font-family: 'Vazirmatn', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* بک‌گراندهای اختصاصی هر مرحله */
body.bg-request { background-image: url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=2070&auto=format&fit=crop'); }
body.bg-verify { background-image: url('https://images.unsplash.com/photo-1526304640581-d334cdbbf45e?q=80&w=2070&auto=format&fit=crop'); }
body.bg-confirm { background-image: url('https://images.unsplash.com/photo-1614064641913-6b7140414f68?q=80&w=2070&auto=format&fit=crop'); }

.overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.65); z-index: 1;
}

.card {
    position: relative; z-index: 2; background: rgba(255, 255, 255, 0.95);
    padding: 40px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    width: 100%; max-width: 400px; text-align: center;
}

.logo { font-size: 28px; font-weight: bold; color: #333; margin-bottom: 10px; }
.logo span { color: #28a745; }

h2 { font-size: 20px; color: #444; margin-bottom: 15px; }

.subtitle { font-size: 13px; color: #666; margin-bottom: 20px; line-height: 1.6; }

.input-group { margin-bottom: 20px; text-align: right; }
.input-group input {
    width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 8px;
    font-family: 'Vazirmatn', sans-serif; font-size: 14px; box-sizing: border-box;
    transition: border-color 0.3s;
}

.input-group input:focus { border-color: #28a745; outline: none; }

/* استایل اختصاصی برای ورودی کد پیامک */
.input-group input.otp-input {
    width: 60%; margin: 0 auto; display: block; padding: 15px;
    border: 2px dashed #ccc; font-size: 24px; text-align: center; letter-spacing: 5px;
}

/* استایل اختصاصی برای رمز عبور (چپ‌چین) */
.input-group input.ltr-input { direction: ltr; text-align: left; }

.btn-submit {
    width: 100%; padding: 12px; background-color: #28a745; color: white;
    border: none; border-radius: 8px; font-size: 16px; font-family: 'Vazirmatn', sans-serif;
    cursor: pointer; transition: background 0.3s; margin-top: 10px;
}
.btn-submit:hover { background-color: #218838; }

.action-link { display: block; margin-top: 20px; color: #666; text-decoration: none; font-size: 13px; transition: color 0.3s; }
.action-link:hover { color: #28a745; }

.resend-link { color: #007bff; }
.resend-link:hover { text-decoration: underline; color: #0056b3; }

.messages {
    text-align: right; margin-bottom: 15px; color: #dc3545; font-size: 13px;
    background: #f8d7da; padding: 10px; border-radius: 8px;
}
.messages p { margin: 0; }