/* Toast */
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #222;
  color: #fff;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  opacity: 0.95;
  z-index: 9999;
  transition: all .3s ease;
}
.toast.success { background: #0b8f3f; }
.toast.error { background: #d93025; }
.toast.info { background: #0b63ff; }
.toast.hidden { opacity: 0; pointer-events: none; }

/* دکمه برگشت */
.back-btn {
  position: fixed;
  top: 18px;
  right: 18px;
  background: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 20px;
  font-weight: bold;
  color: #0b63ff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: .3s ease;
  z-index: 999;
}
.back-btn:hover {
  transform: scale(1.1);
  background: #e8f0ff;
}

/* انیمیشن‌ها */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}




/* Toast */
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #222;
  color: #fff;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  opacity: 0.95;
  z-index: 9999;
  transition: all .3s ease;
}
.toast.success { background: #0b8f3f; }
.toast.error { background: #d93025; }
.toast.info { background: #0b63ff; }
.toast.hidden { opacity: 0; pointer-events: none; }

/* دکمه برگشت */
.back-btn {
  position: fixed;
  top: 18px;
  right: 18px;
  background: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 20px;
  font-weight: bold;
  color: #0b63ff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: .3s ease;
  z-index: 999;
}
.back-btn:hover {
  transform: scale(1.1);
  background: #e8f0ff;
}

/* انیمیشن‌ها */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* کلاس عمومی hidden برای همه‌جا */
.hidden {
  display: none !important;
}

:root{
  --blue:#0b63ff;
  --blue-light:#4da3ff;
  --gold:#f7c76a;
  --gold-light:#ffe7b3;
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#1a1a1a;
  --muted:#6f7a8a;
  --radius:18px;
  --shadow:0 12px 40px rgba(0,0,0,0.12);
  --transition:260ms cubic-bezier(.2,.9,.3,1);
  direction: rtl;
  font-family: "Vazirmatn", sans-serif;
}

/* صفحه */
body{
  margin:0;
  background: var(--bg);
  padding:20px;
}

/* کانتینر */
.login-container{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* کارت اصلی */
.login-card{
  width:100%;
  max-width:480px;
  background: var(--card);
  border-radius: var(--radius);
  padding:28px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
  animation: cardEnter .7s ease;
}

/* اگر خواستی برای همه مراحل استایل مشترک */
.step-card{
  /* فعلاً خالی، فقط برای انتخاب در JS استفاده می‌شود */
}

/* انیمیشن ورود کارت */
@keyframes cardEnter{
  from{ transform: translateY(40px) scale(.95); opacity:0; }
  to{ transform: translateY(0) scale(1); opacity:1; }
}

/* نوار طلایی بالای کارت */
.login-card::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%;
  height:6px;
  background: linear-gradient(90deg,var(--gold),var(--gold-light));
}

/* عنوان */
.login-title{
  font-size:1.4rem;
  font-weight:800;
  color:var(--blue);
  margin-bottom:20px;
}

/* فیلدها */
.field{
  margin-bottom:16px;
}
.field label{
  display:block;
  font-size:.9rem;
  color:var(--muted);
  margin-bottom:6px;
}
.input{
  width:100%;
  padding:14px;
  border-radius:14px;
  border:1px solid #d9d9d9;
  font-size:1rem;
  transition: var(--transition);
}
.input:focus{
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(11,99,255,0.15);
}

/* انتخاب نقش */
.role-box{
  display:flex;
  gap:12px;
  margin:18px 0;
}
.role-item{
  flex:1;
  background:#fdfdfd;
  border:1px solid #e6e6e6;
  border-radius:14px;
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  transition: var(--transition);
}
.role-item:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.role-item input{ display:none; }

/* دایره انتخاب */
.fake-radio{
  width:20px;
  height:20px;
  border-radius:50%;
  border:2px solid var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  transition: var(--transition);
}
.fake-radio::after{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:transparent;
  transition: var(--transition);
}
.role-item input:checked + .fake-radio{
  background: var(--blue);
}
.role-item input:checked + .fake-radio::after{
  background:white;
}

/* دکمه اصلی */
.login-btn{
  width:100%;
  padding:16px;
  border:none;
  border-radius:14px;
  background: linear-gradient(90deg,var(--blue),var(--blue-light));
  color:white;
  font-size:1.1rem;
  font-weight:700;
  cursor:pointer;
  transition: var(--transition);
}
.login-btn:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

/* مودال (اگر بعداً دوباره استفاده کنی) */
.modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal.hidden{ display:none; }

.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  animation: fadeIn .3s forwards;
}
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

.modal-content{
  position:relative;
  width:90%;
  max-width:480px;
  background:white;
  border-radius: var(--radius);
  padding:24px;
  box-shadow: var(--shadow);
  animation: modalEnter .5s ease;
}
@keyframes modalEnter{
  from{ transform: scale(.8); opacity:0; }
  to{ transform: scale(1); opacity:1; }
}

/* دکمه بستن */
.modal-close{
  position:absolute;
  top:12px;
  left:12px;
  background:none;
  border:none;
  font-size:1.6rem;
  cursor:pointer;
  color:var(--muted);
}

/* دکمه ارسال OTP */
#send-otp{
  background: linear-gradient(90deg,var(--gold),var(--gold-light));
  color:#333;
  font-weight:800;
}

/* انیمیشن رفتن به صفحه بعد */
@keyframes pageSlide{
  from{ transform: translateX(100%); }
  to{ transform: translateX(0); }
}