/* ============================================================
   حاضر — style.css
   الهوية: فحمي #0A1410 / زمردي #1F7D44 / ذهبي #C9A84C
   خطوط: Cairo + Almarai · RTL
   ============================================================ */

:root{
  --bg:#0A1410;
  --bg2:#0f1d16;
  --card:#12241c;
  --card2:#16291f;
  --emerald:#1F7D44;
  --emerald-d:#176235;
  --gold:#C9A84C;
  --text:#eaf2ee;
  --text-dim:#9fb3a8;
  --border:#23362b;
  --danger:#e0564f;
  --radius:14px;
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:'Cairo','Almarai',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  direction:rtl;
  line-height:1.6;
}

.wrap{
  max-width:480px;
  margin:0 auto;
  padding:24px 18px 60px;
}

/* الشعار */
.brand{text-align:center;padding:24px 0 16px}
.brand-logo{
  font-size:34px;font-weight:800;color:var(--emerald);
  letter-spacing:1px;
}
.brand-sub{color:var(--text-dim);font-size:14px;margin-top:4px}

/* الشاشات */
.screen{display:none}
.screen.active{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.title{font-size:24px;font-weight:700;margin-bottom:6px;text-align:center}
.sub{color:var(--text-dim);text-align:center;margin-bottom:20px;font-size:14px}

/* نوع الحساب */
.roles{
  display:flex;gap:10px;margin:18px 0;
  background:var(--bg2);padding:6px;border-radius:var(--radius);
}
.role-tab{
  flex:1;padding:12px;border:none;border-radius:10px;
  background:transparent;color:var(--text-dim);
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;
  transition:.2s;
}
.role-tab.active{background:var(--emerald);color:#fff}

/* الحقول */
.lbl{display:block;font-size:14px;font-weight:600;margin:16px 0 7px}
.lbl .opt{color:var(--gold);font-weight:400;font-size:12px}

.inp{
  width:100%;padding:14px 16px;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--text);
  font-family:inherit;font-size:15px;outline:none;transition:.2s;
}
.inp:focus{border-color:var(--emerald);background:#0d1a14}
.inp::placeholder{color:#5d7166}
select.inp{cursor:pointer}

/* صف الهاتف */
.phone-row{display:flex;gap:8px;align-items:stretch}
.phone-row .cc{
  display:flex;align-items:center;justify-content:center;
  min-width:64px;padding:0 12px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--gold);font-weight:700;
  direction:ltr;
}
.phone-inp{flex:1;direction:ltr;text-align:left}

/* الموافقة */
.agree{display:flex;align-items:center;gap:9px;margin:18px 0;font-size:14px;color:var(--text-dim)}
.agree input{width:18px;height:18px;accent-color:var(--emerald)}
.agree a{color:var(--emerald);text-decoration:none}

/* الأزرار */
.btn-primary{
  width:100%;padding:15px;margin-top:8px;border:none;
  border-radius:var(--radius);
  background:linear-gradient(135deg,var(--emerald),var(--emerald-d));
  color:#fff;font-family:inherit;font-size:16px;font-weight:700;
  cursor:pointer;transition:.2s;
}
.btn-primary:hover{filter:brightness(1.08)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed}

.btn-ghost{
  width:100%;padding:14px;margin-top:20px;
  background:transparent;border:1px solid var(--border);
  border-radius:var(--radius);color:var(--text-dim);
  font-family:inherit;font-size:15px;cursor:pointer;transition:.2s;
}
.btn-ghost:hover{border-color:var(--danger);color:var(--danger)}

/* التبديل بين الشاشات */
.switch{text-align:center;margin-top:16px;font-size:14px;color:var(--text-dim)}
.switch a{color:var(--emerald);cursor:pointer;text-decoration:none;font-weight:600}

/* الرسائل */
.msg{margin-top:14px;padding:0;text-align:center;font-size:14px;border-radius:10px;transition:.2s}
.msg.show{padding:12px}
.msg.error{background:rgba(224,86,79,.12);color:var(--danger)}
.msg.success{background:rgba(31,125,68,.14);color:#5fd089}

/* طرق التحقق OTP */
.otp-methods{display:flex;gap:12px;margin:18px 0}
.otp-method{
  flex:1;position:relative;padding:20px 10px;
  background:var(--bg2);border:2px solid var(--border);
  border-radius:var(--radius);color:var(--text);
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:8px;transition:.2s;
}
.otp-method.active{border-color:var(--emerald);background:#0d1a14}
.otp-method .m-ico{font-size:24px}
.soon-badge{
  position:absolute;top:8px;left:8px;
  background:var(--gold);color:#1a1205;
  font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;
}

/* رمز التحقق */
.code-inp{
  text-align:center;letter-spacing:12px;font-size:24px;font-weight:700;
  direction:ltr;
}

.hidden{display:none}

/* شاشة النجاح */
.welcome-card{text-align:center;padding:40px 20px}
.welcome-ico{
  width:80px;height:80px;margin:0 auto 20px;
  background:linear-gradient(135deg,var(--emerald),var(--emerald-d));
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:40px;color:#fff;
}
.acc-info{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px;margin:20px 0;text-align:right;
}
.acc-info div{padding:6px 0;font-size:14px;color:var(--text-dim)}
.acc-info b{color:var(--text)}

/* ===== فاصل التحقق داخل صفحة التسجيل ===== */
.otp-divider{
  display:flex; align-items:center; text-align:center;
  margin:26px 0 4px; color:var(--gold); font-weight:700; font-size:14px;
}
.otp-divider::before, .otp-divider::after{
  content:""; flex:1; height:1px; background:var(--border);
}
.otp-divider span{ padding:0 14px; }

/* تنبيه إيميل/واتساب في التسجيل */
.otp-note{
  background:rgba(31,125,68,.1); border:1px solid rgba(31,125,68,.3);
  border-radius:12px; padding:11px 14px; margin:18px 0 4px;
  font-size:12.5px; font-weight:600; color:#8fd0a8; line-height:1.7;
}