/* ═══════════════════════════════════════════════════════
 *  login.css — ورقة صفحة الدخول/التسجيل (/login).
 *  ⚠️ أُعيد بناؤها على لغة تصميم الصفحة الرئيسية (٩ سبتمبر ٢٠٢٦):
 *     الأزرق #2563EB · Alexandria · حدود رفيعة var(--line) بلا ظلال ثقيلة
 *     ولا تدرّجات ولا زوايا ≥10px · الأوزان على سلّم CLAUDE.md
 *     (800 للعنوان الرئيسي وحده · 500 للأزرار والعناوين الفرعية · 400 متن · 300 lead).
 *  ⚠️ الصفحة تبني رأسها بنفسها ولا تمرّ بـ includes/header.php، فتُحمَّل
 *     wtq-v4-base.css من ترميز الصفحة مباشرةً قبل هذه الورقة — ورموزها
 *     (var(--blue) · var(--line) · var(--muted) …) تأتي منها ولا تُعاد هنا.
 *  ⚠️ لا شيء هنا يمسّ منطق الدخول: أسماء الحقول والمعرّفات والمؤقّت والتوكن
 *     ورمز المرّة الواحدة كما هي حرفًا بحرف — تنسيق فقط.
 *  ⚠️ الورقة اتّجاهيًّا محايدة (text-align:start · inset-inline · margin-inline)،
 *     فنسخة -en المولَّدة تطابق الأصل ولا تُكتب أصلًا (tools/build-en-css.php).
 * ═══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

/* أسماء بديلة محلّية — الترميز والسكربتات لا تستعملها، لكنّ الورقة كُتبت بها
   تاريخيًّا؛ تبقى أسماءً لرموز الأساس لا قيمًا ثانية تنازعها. */
:root{ --blue-d:var(--blue-700); --mut:var(--muted); --soft:var(--panel); --grn:var(--green) }

/* ── الصفحة: لوح هادئ وبطاقة واحدة في وسطه (تناوب أسطح الرئيسية: لوح ← أبيض) ── */
body{
  margin:0; min-height:100vh; padding:64px 16px;
  font-family:'Alexandria','Segoe UI','Segoe UI Arabic',system-ui,-apple-system,'Cairo',sans-serif;
  background:var(--panel); color:var(--ink); line-height:1.75;
  /* ⚠️ `clip` لا `hidden` — ١٠ سبتمبر ٢٠٢٦ (نفس علّة الرئيسية).
     `hidden` على محور واحد يجعل الآخر `auto` فيصير `body` حاويةَ تمرير،
     فتموت `position:sticky` للترويسة. `clip` يقصّ الفائض نفسه بلا حاوية تمرير. */
  position:relative; overflow-x:clip;
}
/* ⚠️ الهالة: كانت radial-gradient بأزرق شفّاف خلف البطاقة. لغة الرئيسية بلا
   تدرّجات، فحُيِّدت بالقاعدة ولم تُحذف من الترميز (قاعدة المالك: لا حذف عناصر). */
.lc2-glow{ display:none; background:none }

.lc2-in{ position:relative; max-width:452px; margin:0 auto }

/* ── رأس نظيف: الشعار ثم سطر التعريف (بلا علامة eyebrow — لا نصّ صالح لها في الصفحة) ── */
.lc2-brand{ text-align:center; margin-bottom:22px }
.lc2-brand .bm-logo{ height:52px; width:auto; display:inline-block }
.lc2-brand a{ text-decoration:none }
.lc2-brand p{ margin:8px 0 0; font-size:13px; font-weight:300; line-height:1.9; color:var(--muted) }

/* ── البطاقة: بيضاء بحدّ 1px وزاوية var(--r) بلا ظلّ — كبطاقات الرئيسية ── */
.lc2-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px 24px }

/* ── صفّ الطمأنة تحت البطاقة: أيقونة خطّية + لصيقة ── */
.lc2-trust{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-top:20px }
.lc2-trust span{ font-size:12.5px; font-weight:400; color:var(--muted); display:inline-flex; align-items:center; gap:7px; line-height:1.7 }
.lc2-trust .ti{ width:16px; height:16px; flex:0 0 auto; color:var(--blue) }
/* وسم Font Awesome باقٍ في الترميز ومحيَّد: الرسم الخطّي حلّ محلّه بصريًّا. */
.lc2-trust i{ display:none }

.lc2-foot{ text-align:center; font-size:12px; font-weight:400; color:var(--muted); margin-top:16px }
.lc2-foot a{ color:var(--muted); text-decoration:none; margin:0 5px }
.lc2-foot a:hover{ color:var(--blue) }

/* ── التبويبتان: مبدّل مقسوم على أرضية اللوح ── */
.tabs{ display:flex; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:4px; margin-bottom:18px }
.tab-btn{ flex:1; padding:10px; border:1px solid transparent; background:transparent; border-radius:var(--r);
  font-family:inherit; font-size:14px; font-weight:500; color:var(--muted); cursor:pointer; transition:background .18s, color .18s, border-color .18s }
.tab-btn:hover{ color:var(--ink) }
.tab-btn.act{ background:#fff; border-color:var(--line); color:var(--ink) }
.tab-btn:focus-visible{ outline:2px solid var(--blue); outline-offset:2px }

/* ── مؤشّر الخطوات الثلاث ── */
.dots{ display:flex; gap:6px; justify-content:center; margin-bottom:18px }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--line-2); transition:.3s }
.dot.act{ background:var(--blue); width:24px; border-radius:999px }

/* ── الخطوة الواحدة ── */
.stp{ display:none }
.stp.act{ display:block }
/* العنوان الرئيسي وحده تقيل (800): h1 للخطوة الأولى وh2 لبقيّة الخطوات. */
.stp h1, .stp h2{ font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1.7; margin:0 0 4px; text-align:center }
.stp .sub{ font-size:13px; font-weight:300; line-height:1.9; color:var(--muted); margin:0 0 20px; text-align:center }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:11px }

/* ── الحقول ── */
.form-group{ margin-bottom:14px; text-align:start }
.form-group label{ display:block; font-size:12.5px; font-weight:500; color:var(--ink); margin-bottom:6px; line-height:1.7 }
.form-group label .lbl-hint{ font-size:12px; font-weight:400; color:var(--muted) }
.form-control{ width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:var(--r);
  font-family:inherit; font-size:14px; font-weight:400; background:#fff; color:var(--ink); outline:none;
  transition:border-color .16s, box-shadow .16s }
.form-control::placeholder{ color:var(--muted); opacity:1 }
.form-control:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.12) }
/* رسالة البريد المهني: 12px حدًّا أدنى للعربية (كانت .72rem = 11.5px). */
#c-em-err{ font-size:12px; font-weight:400; line-height:1.7; color:var(--red); margin-top:4px }

/* ── اختيار نوع الحساب: بطاقتان بحدّ رفيع، والمختارة بحدّ أزرق وأرضية زرقاء فاتحة ── */
.acct-toggle{ display:flex; gap:9px; margin-bottom:16px }
.acct-btn{ flex:1; border:1px solid var(--line); border-radius:var(--r); padding:12px 10px; cursor:pointer;
  font-family:inherit; background:#fff; color:var(--ink); text-align:center; transition:border-color .16s, background .16s, color .16s }
.acct-btn:hover{ border-color:var(--line-2) }
.acct-btn.active{ border-color:var(--blue); background:var(--blue-50); color:var(--blue) }
.acct-btn:focus-visible{ outline:2px solid var(--blue); outline-offset:2px }
.acct-btn .icon{ display:block; margin-bottom:5px; line-height:0 }
.acct-btn .icon svg{ width:22px; height:22px; display:inline-block; vertical-align:middle; color:var(--muted) }
.acct-btn.active .icon svg{ color:var(--blue) }
.acct-btn .lbl{ font-size:13px; font-weight:500; display:block; line-height:1.7 }

/* ── قائمة البحث (المسمّى الوظيفي · الدولة) ── */
.search-select-wrap{ position:relative }
.search-select-wrap input.search-inp{ width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:var(--r);
  font-family:inherit; font-size:14px; font-weight:400; background:#fff; color:var(--ink); outline:none; transition:border-color .16s, box-shadow .16s }
.search-select-wrap input.search-inp:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.12) }
.search-select-wrap .opts{ display:none; position:absolute; top:calc(100% + 4px); inset-inline:0; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); max-height:200px; overflow-y:auto; z-index:99;
  box-shadow:0 18px 34px -22px rgba(11,11,11,.35) }
.search-select-wrap .opts.open{ display:block }
.search-select-wrap .opts div{ padding:9px 14px; font-size:13.5px; font-weight:400; line-height:1.7; color:var(--ink); cursor:pointer }
.search-select-wrap .opts div:hover{ background:var(--panel) }
.search-select-wrap .opts div.selected{ background:var(--blue-50); color:var(--blue); font-weight:500 }

/* ── الموافقة على الشروط (بند ٠‑٧) — فوق الزرّ مباشرةً: تُقرأ قبل الفعل لا بعده ── */
.wtq-agree{ display:flex; align-items:flex-start; gap:9px; cursor:pointer;
  font-size:12.5px; font-weight:400; line-height:1.8; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:11px 13px; margin:4px 0 14px }
.wtq-agree input{ margin-top:3px; accent-color:var(--blue); flex:0 0 auto; width:16px; height:16px }
.wtq-agree a{ color:var(--blue); font-weight:500; text-decoration:none }
.wtq-agree a:hover{ text-decoration:underline }
.wtq-agree:focus-within{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.12) }

/* ── الزرّ الممتلئ الواحد ── */
.btn-block{ width:100%; padding:13px; border:1px solid transparent; border-radius:var(--r);
  font-family:inherit; font-weight:500; font-size:15px; line-height:1.7; cursor:pointer; margin-top:8px;
  transition:background .16s, border-color .16s, transform .15s }
.btn-primary{ background:var(--blue); border-color:var(--blue); color:#fff }
.btn-primary:hover{ background:var(--blue-700); border-color:var(--blue-700); transform:translateY(-1px) }
.btn-primary:disabled{ transform:none; cursor:default }
.btn-block:focus-visible{ outline:2px solid var(--blue); outline-offset:2px }

/* ── التنبيه: حالة دلالية بالأحمر المعتمد (var(--red) 4.83:1 على الأبيض) ── */
.alert{ padding:11px 13px; border-radius:var(--r); font-size:13px; font-weight:400; line-height:1.8; text-align:start }
/* ⚠️ لون النصّ داخل التنبيه أغمق درجةً من var(--red): الأحمر #DC2626 على أرضية
   ‏--red-50 ‏#FEF2F2 = 4.41:1 (قِيس) — دون حدّ 4.5 الذي تفرضه لغة التصميم،
   وتباين 4.83 المذكور في الأساس محسوب على الأبيض لا على أرضية التنبيه.
   ‏#B91C1C هو الأحمر نفسه أغمق درجة: 5.91:1 على الأرضية ذاتها. */
.alert-error{ background:var(--red-50); color:#B91C1C; border:1px solid var(--red-line) }
#r-err, #l-err{ margin-top:12px }
#otp-err{ margin-bottom:15px }

/* ── رمز التحقّق: ستّ خانات ── */
.otp-wrap{ display:flex; gap:8px; justify-content:center; margin:20px 0 }
.otp-inp{ width:46px; height:52px; text-align:center; font-size:22px; font-weight:500; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:var(--r); font-family:inherit; outline:none;
  font-variant-numeric:tabular-nums; transition:border-color .16s, box-shadow .16s, background .16s }
.otp-inp:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.12) }
.otp-inp.filled{ border-color:var(--blue); background:var(--blue-50) }
.timer{ text-align:center; font-size:12.5px; font-weight:400; line-height:1.7; color:var(--muted); margin-top:12px }
.timer a{ color:var(--blue); font-weight:500; cursor:pointer; text-decoration:none }
.timer a:hover{ text-decoration:underline }

/* ── النجاح ── */
/* ⚠️ أخضر الأيقونة #166534 لا var(--green): ‏#16A34A على --green-50 = 2.95:1 (قِيس)
   وهو دون حدّ 3:1 للرسوم، و#15803D يعطي 4.49:1 — نفس فارق المئة الذي وُثّق في
   features-custom-contracts.css. ‏#166534 على الأرضية ذاتها = 6.31:1. */
.suc-ico{ width:72px; height:72px; border-radius:50%; background:var(--green-50); color:#166534;
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px }
.suc-ico .ico{ width:34px; height:34px }
/* وسم Font Awesome باقٍ ومحيَّد — الرسم الخطّي حلّ محلّه. */
.suc-ico i, #wel i{ display:none }
.suc-note{ text-align:center; font-size:13px; font-weight:300; line-height:1.9; color:var(--muted); margin-top:6px }
.prog{ height:4px; background:var(--line); border-radius:999px; margin-top:20px; overflow:hidden }
.prog-fill{ height:100%; background:var(--blue); border-radius:999px; width:0; transition:width 1.5s ease }

@media (max-width:520px){
  body{ padding:36px 12px }
  .lc2-card{ padding:22px 18px }
  .lc2-trust{ gap:16px }
  .otp-inp{ width:42px; height:50px }
}

/* WTQ-IOS-ZOOM — الهاتف: خطّ الحقول 16px يمنع تكبير سفاري التلقائي
   عند التركيز (سلوك iOS لأي حقل خطّه أصغر من 16px، ولا يتراجع).

   ⚠️ المحدِّد بالوسم وحده (‎input,select,textarea‎ = أسبقية 0,0,1) **لا
   يكفي هنا**: كل حقل في هذه الصفحة يحمل ‎class="form-control"‎، والقاعدة
   ‎.form-control{font-size:14px}‎ أسبقيتها 0,1,0 فتغلبه،
   و‎.search-select-wrap input.search-inp‎ أسبقيتها 0,2,1 فتغلبه بفارق أكبر.
   قيس: بقيت ثلاثة عشر حقلًا على ‎14px‎ رغم القاعدة — أي أن الإصلاح لم يكن
   يعمل في الصفحة التي يمرّ بها كل عميل جديد.

   وخانات رمز التحقّق مستثناة صراحةً: ‎.otp-inp‎ خطّها ‎22px‎ (أكبر من
   الحدّ أصلًا فلا تسبّب تكبيرًا)، ولولا الاستثناء لصغّرتها هذه القاعدة. */
@media(max-width:768px){
  input:not(.otp-inp),select,textarea,
  .form-control,
  .search-select-wrap input.search-inp{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  .btn-primary:hover{ transform:none }
  .prog-fill{ transition:none }
}