/* استایل‌های کلی (حفظ شده از قالب اصلی) */
* { margin:0; padding:0; box-sizing:border-box; }
:root{
    --primary-color:#2c3e50; --secondary-color:#3498db; --accent-color:#1abc9c;
    --light-color:#ecf0f1; --dark-color:#2c3e50; --text-color:#333; --light-text:#fff;
    --error-color:#e74c3c; --success-color:#2ecc71;
}
body{
    background: linear-gradient(135deg, #195ae7 0%, #183cb3 100%);
    color:var(--text-color);
    line-height:1.6;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:20px;
}
.container{ width:100%; max-width:1200px; margin:0 auto; padding:0 15px; }
.btn{
    display:inline-block; background:var(--secondary-color); color:var(--light-text);
    padding:12px 25px; border:none; border-radius:5px; cursor:pointer;
    text-decoration:none; font-size:16px; font-weight:500; transition:all .3s ease;
    width:100%; text-align:center;
}
.btn:hover{ background:var(--accent-color); transform:translateY(-3px); box-shadow:0 5px 15px rgba(0,0,0,0.1); }
.btn-accent{ background:var(--accent-color); }
.btn-accent:hover{ background:var(--secondary-color); }
.btn-outline{ background:transparent; border:2px solid var(--secondary-color); color:var(--secondary-color); }
.btn-outline:hover{ background:var(--secondary-color); color:var(--light-text); }

.card-container{ display:flex; flex-wrap:wrap; justify-content:center; gap:30px; width:100%; margin-top:30px; }
.card{
    background:white; border-radius:15px; box-shadow:0 10px 30px rgba(0,0,0,0.1);
    overflow:hidden; width:100%; max-width:450px; transition:transform .3s, box-shadow .3s;
}
.card:hover{ transform:translateY(-10px); box-shadow:0 15px 40px rgba(0,0,0,0.15); }
.card-header{ background:var(--primary-color); color:white; padding:25px; text-align:center; }
.card-header h2{ font-size:24px; margin-bottom:10px; }
.card-header p{ opacity:.8; font-size:14px; }
.card-body{ padding:30px; }

.form-group{ margin-bottom:20px; text-align:right; }
.form-group label{ display:block; margin-bottom:8px; font-weight:500; color:var(--dark-color); }
.input-with-icon{ position:relative; }
.input-with-icon i{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:#777; }
.form-control{
    width:100%; padding:12px 15px 12px 45px; border:1px solid #ddd; border-radius:5px;
    font-size:16px; transition:all .3s; direction:rtl;
}
.form-control:focus{ border-color:var(--secondary-color); box-shadow:0 0 0 2px rgba(52,152,219,0.2); outline:none; }

.form-footer{ margin-top:25px; text-align:center; }
.form-footer p{ margin-top:15px; font-size:14px; }
.form-footer a{ color:var(--secondary-color); text-decoration:none; font-weight:500; }
.form-footer a:hover{ text-decoration:underline; }

header{ width:100%; text-align:center; margin-bottom:20px; }
.logo{ display:inline-flex; align-items:center; color:white; font-size:28px; font-weight:bold; margin-bottom:10px; }
.logo i{ margin-left:10px; font-size:32px; }
.tagline{ color:rgba(255,255,255,0.8); font-size:18px; max-width:600px; margin:0 auto; }

footer{ margin-top:40px; text-align:center; color:rgba(255,255,255,0.7); font-size:14px; width:100%; }

.password-toggle{ position:absolute; right:15px; top:50%; transform:translateY(-50%); background:none; border:none; color:#777; cursor:pointer; }

/* Responsive */
@media (max-width:768px){
    .card-container{ flex-direction:column; align-items:center; }
    .card{ max-width:100%; }
    .logo{ font-size:24px; }
    .tagline{ font-size:16px; }
}
 .alert {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999999;
}

.alert-content {
    background: white;
    margin: 100px auto;
    padding: 20px;
    width: 400px;
    border-radius: 5px;
    text-align: center;
}
.alert-content p{
    padding: 5px 0px;
    font-size: 15px;
    text-align: right;
}

@media (max-width:480px){
    .alert-content{
        width: 90%;
    }
}

.password-requirements {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
    font-size: 0.9rem;
}

.password-requirements h4 {
    margin-bottom: 10px;
    color: #2c3e50;
}

.requirement {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    color: #7f8c8d;
}

.requirement i {
    margin-left: 8px;
    font-size: 0.8rem;
}

.requirement.valid {
    color: #27ae60;
}

.requirement.invalid {
    color: #e74c3c;
}
.error-message {
    color: #e74c3c;
    font-size: 0.9rem;
    margin-top: 5px;
    display: none;
}
 .password-strength {
    margin-top: 10px;
    height: 6px;
    background-color: #eee;
    border-radius: 3px;
    overflow: hidden;
}

.strength-bar {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.strength-text {
    font-size: 0.85rem;
    margin-top: 5px;
    color: #7f8c8d;
}


.captcha-box {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
}

.captcha-box img {
    height: 44px;
    border-radius: 5px;
    border: 1px solid #444;
    background: #fff;
}

.captcha-box input {
    margin-bottom: 0;
    flex: 1;
    padding:12px 15px 12px 45px; border:1px solid #ddd; border-radius:5px;
    font-size:16px; transition:all .3s; direction:rtl;
}