/* صفحه سفید و مرکزچین */
body{
  margin:0;padding:0;
  font-family: 'Vazirmatn', system-ui, sans-serif;
  /* font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif; */
  background:#fff;height:100vh;display:flex;align-items:center;justify-content:center;
}

/* کارت */
.auth-wrapper{
  background:#efefef;border:1px solid #d6d6d6;border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  padding:24px 22px;width:100%;max-width:400px;overflow:hidden;
}

/* تب‌ها */
.auth-tabs{display:flex;margin-bottom:16px;gap:6px}
.auth-tab{
  flex:1;background:transparent;border:1px solid transparent;
  padding:10px 0;cursor:pointer;font-size:1.05rem;color:#2a2a2a;
  border-radius:10px;transition:all .25s ease;
}
.auth-tab:hover{background:#f5f7ff;border-color:#d7e9ff}
.auth-tab.active{background:#f0f8ff;border-color:#d7e9ff;color:#474747;font-weight:700}

/* فرم‌ها */
.auth-forms form{display:flex;flex-direction:column}
.auth-forms h2{text-align:center;margin:8px 0 16px;color:#474747;font-size:1.25rem}
.auth-forms input,.auth-forms select{
  margin-bottom:12px;padding:10px 12px;border:1px solid #ccc;border-radius:8px;
  font-size:1rem;outline:none;transition:border-color .2s, box-shadow .2s;background:#fff;
  width:100%;box-sizing:border-box;
}
.auth-forms input:focus,.auth-forms select:focus{
  border-color:#7bb0ff;box-shadow:0 0 0 3px rgba(123,176,255,.25)
}

/* دکمه */
.auth-forms button{
  padding:10px 12px;background:#7bb0ff;border:1px solid #6aa2fb;color:#fff;
  font-size:1rem;border-radius:8px;cursor:pointer;
  transition:background-color .25s, transform .05s, box-shadow .25s;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.auth-forms button:hover{background:#474747}
.auth-forms button:active{transform:translateY(1px)}

/* گروه موبایل */
.mobile-group{
  display:grid;grid-template-columns:1fr 1.2fr;gap:8px;
}
.mobile-group select,.mobile-group input{min-width:0}

@media (max-width:420px){
  .mobile-group{grid-template-columns:1fr}
}

/* فاصله‌ی خطا از باکس خیلی کم */
.error{
  display:block;
  color:#d32f2f;
  font-size:.85rem;
  margin: 2px 4px 0;   /* فقط 2px از بالا */
  line-height:1.1;
}

/* کنترل فاصله‌ی هر ردیف فیلد */
.field-row{
  margin-bottom: 10px; /* فاصله کلی هر فیلد تا بعدی */
}

/* مارجین خود input/select داخل field-row رو کم کن که خطا بچسبه زیرش */
.field-row > input,
.field-row > select{
  margin-bottom: 4px !important;  /* قبلاً 12px بود */
}

/* برای گروه موبایل هم خطاها نزدیک باشن */
.mobile-group .error{
  margin-top: 0px;
}
/* فاصله‌ی زیر خود input/select رو صفر کن؛ کنترل فاصله فقط با field-row و error */
.auth-forms input,
.auth-forms select {
  margin: 0 !important;
}

/* هر ردیف فیلد چقدر از بعدی فاصله داشته باشه */
.field-row {
  margin-bottom: 10px;   /* می‌تونی 6-8 هم بذاری، سلیقه‌ایه */
}

/* پیام خطا نزدیکِ باکس */
.error {
  display: block;
  color: #d32f2f;
  font-size: .85rem;
  margin: 2px 4px 0;     /* فقط 2px از بالا */
  line-height: 1.15;
}

/* برای موبایل‌گروپ: خود آیتم‌ها مارجین نداشته باشن */
.mobile-group select,
.mobile-group input {
  margin: 0 !important;
  min-width: 0;
}

/* خطای موبایل‌گروپ هم بچسبه */
.mobile-group .error {
  margin-top: 2px;
}