/* ————— ریست کلی برای چیدمان عمودی و راست‌به‌چپ ————— */
.login-container { direction: rtl; text-align: right; }

/* فرم را ستونی و با فاصله یکنواخت می‌چینیم */
.login-form{
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;           /* فاصله عمودی بین کادرها */
}

/* هر گروه فیلد یک ردیف کامل باشد */
.login-form .form-group{
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  clear: both !important;
  margin: 0 !important;
}

/* اگر در CSSهای قبلی grid/inline-block/float داده شده، خنثی شود */
.login-form .form-group,
.login-form .optional-field{
  float: none !important;
  display: block !important;
}

/* عنوان‌ها در یک خط کامل بیایند */
.login-header, .optional-fields-header, .form-options, .login-footer{
  width: 100% !important;
}

/* ظرف ورودی‌ها؛ آیکون چشم کناری بدون به‌هم‌ریختن خط */
.input-container{
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* خود کنترل‌ها همیشه تمام‌عرض باشند */
.input-container input,
.input-container select,
.input-container textarea{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* چشم نمایش پسورد روی همان خط بدون تغییر عرض فیلد */
.toggle-password{
  position: absolute;
  left: 10px;           /* چون RTL است، سمت چپ */
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

/* آیکون اطلاعات کنار فیلد */
.info-icon{
  position: absolute;
  right: 10px;          /* سمت راستِ فیلد در RTL */
  top: 50%;
  transform: translateY(-50%);
}

/* پیام خطا و راهنما تمام‌عرض زیر هر کادر */
.form-error, .client-error, .password-requirements{
  width: 100% !important;
  margin-top: 6px;
}

/* دکمه‌ها تمام‌عرض و زیر هم */
.login-btn{
  width: 100% !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

/* اگر قبلاً فرم دو ستونه با grid بوده، آن را به 1 ستون تبدیل کن */
.login-form{
  grid-template-columns: 1fr !important;
}

/* جلوگیری از هر گونه نصف-عرض شدن (مثل col-6 ها) */
[class*="col-"], .half, .one-half{
  width: 100% !important;
  max-width: 100% !important;
}

/* فاصله‌های منظم برای خوانایی */
.login-header h2{ margin: 8px 0 4px; }
.login-header p{ margin: 0 0 12px; }
.optional-fields-header h4{ margin: 18px 0 6px; }
.optional-fields-header p{ margin: 0 0 8px; }

/* اطمینان از حفظ ترکیب اصلی (فرم + تصویر کناری) بدون تغییر اندازه‌ها */
.login-wrapper, .login-side-image{
  min-width: 0; /* از بروز اسکرول افقی جلوگیری می‌کند */
}

/* در صورت نیاز فقط در موبایل، تصویر برود زیر فرم (اختیاری)
@media (max-width: 768px){
  .login-container{ display: flex; flex-direction: column; gap: 20px; }
}
*/