/* ======================================================================
   هوية صفحات الدخول: لوحان — النموذج على بياض، والهوية على لوحٍ مائل.
   مشتركة بين login.html و forgot-password.html كي لا تتفرّع نسختان تتباعدان.

   تُربَط بعد <style> الصفحة لا قبلها: الكتلة تغلب قواعد الصفحة القديمة بترتيب
   المصدر، وهو ما كانت تفعله حين كانت في ذيل <style>. ربطُها قبله يقلب الغلبة
   ويُفقد الهوية.
   ====================================================================== */
/* ════════════════════════════════════════════════════════════════════════
   ✦ (٢٠٢٦-١٠-٢٠ — طلب أحمد) لوحان: النموذج على بياض، والهوية على لوحٍ مائل
     فيه نسيج الخطوط الكنتورية وصورتا الشاشة والجوال وشارتا المتجرين.

     الألوان هنا ثابتة بالحرف ولا يحكمها إعداد: كل var(--rb-*) أُزيل من هذه
     الصفحة، و applyLoginLook لم تعد تمسّ خلفيةً ولا لون ترويسة. ما بقي لها
     محتوىً لا لون (شعار المستأجر واسمه وكلمة الترحيب وإظهار الروابط).

     الكتلة في الذيل عمداً: تغلب ما قبلها بترتيب المصدر، فلا نجري جراحةً في
     عشرات القواعد القديمة ويبقى الرجوع عنها حذفَ كتلةٍ واحدة.
   ════════════════════════════════════════════════════════════════════════ */
/* ميل الحافة زاويةٌ ثابتة لا نسبة من العرض (نفس قاعدة بوابة العميل):
   tan(10.2°)=0.18 ⇒ الإزاحة عبر كامل الارتفاع = 18vh، فالزاوية هي هي على كل مقاس. */
/* الأساس — منقول من login.html بقيمٍ حرفية بدل متغيّراتها، كي لا يعتمد الملف
   على :root صفحةٍ بعينها. القيم هي قيم login حرفاً، فلا يتغيّر شيء عندها. */
.login-card{position:relative;z-index:1;background:#fff;border-radius:22px;width:100%;max-width:420px;box-shadow:0 25px 80px rgba(0,15,20,.4);overflow:hidden}
.login-body{padding:28px 30px 24px}
.fg{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.finp:focus{outline:none;border-color:#008E7B;background:#fff;box-shadow:0 0 0 4px rgba(0,142,123,.1)}
.btn-login{width:100%;padding:13px;background:#008E7B;color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s;margin-top:4px}
.btn-login:hover{background:#006d5e;transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,142,123,.3)}
.btn-login:active{transform:translateY(0)}
/* ✦ (٢٠٢٦-١٠-٢١ — ملف التصميم) حالة «الحقول فارغة»: #0A8E7C4D. كانت opacity:.6
   تُبهت الزرّ ونصّه معاً؛ الآن اللون وحده يبهت والنصّ يبقى أبيض (قرار أحمد).
   ⚠ مسجَّل: الأبيض على هذا اللون فوق البياض تباينه 1.47:1 والحدّ الأدنى 4.5،
   فالتسمية تُقرأ بصعوبة ما دام الحقلان فارغين — وهي حالةٌ عابرة تزول بالكتابة.
   و is-empty لمن لا يُعطَّل زرّه أصلاً (صفحة الدخول): مظهرٌ لا منع، فلا يُحبس
   أحدٌ خارج حسابه لو لم يصل الحدث (الملء التلقائي لا يُطلق input دائماً). ✦ */
.btn-login:disabled,.btn-login.is-empty{background:#0A8E7C4D;opacity:1;box-shadow:none;transform:none}
.btn-login:disabled{cursor:not-allowed}
.btn-login.is-empty:hover,.btn-login:disabled:hover{background:#0A8E7C4D;transform:none;box-shadow:none}
.link{color:#008E7B;font-size:10px;font-weight:600;cursor:pointer;text-decoration:none;transition:color .15s}
.link:hover{color:#013A42}
.tenant-brand{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:6px}
.tenant-brand img{height:68px;max-width:220px;object-fit:contain;background:#fff;border-radius:14px;padding:6px 10px;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.tenant-brand-name{color:#fff;font-size:20px;font-weight:800;line-height:1.5}
:root{--lg-slant:18vh}
body{background:#fff;display:block;align-items:stretch;justify-content:flex-start}
.login-bg{display:none}
.lg-split{min-height:100vh;display:flex;flex-direction:row-reverse;align-items:stretch}
/* ✦ (٢٠٢٦-١٠-٢١ — قرار أحمد) التخطيط ثابت لا ينعكس مع اللغة: اللوح يمين والنموذج
   يسار في العربية والإنجليزية معاً. النموذج أولٌ في الـDOM لترتيب التنقّل بالمفاتيح،
   و row-reverse يضعه يساراً في العربية بينما row يفعلها في الإنجليزية.
   i18n:keep-physical — الجهة هنا قرار تصميم لا اتجاه قراءة. ✦ */
.lg-form{flex:1 1 44%;min-width:0;position:relative;display:grid;place-items:center;padding:30px 26px}
/* «الخارج» هو الجهة البعيدة عن اللوح: يسارٌ في العربية ويمينٌ في الإنجليزية */
/* خارج التدفّق كي لا تأخذ صفّاً يزيح البطاقة عن وسط اللوح — وكانت تزيحها ٢٥px
   على مضيف شركة. i18n:keep-physical — التخطيط ثابت لا ينعكس، فالركن الخارجي
   هو اليسار في اللغتين. */
/* ✦ (٢٠٢٦-١٠-٢٩ — ملف التصميم) الصندوق بالحرف: 141×32 · استدارة 8 · حدٌّ 0.5px بـ#013B41
   · خلفيةٌ من اللون نفسه بشفافية 8٪ (#013B4114) · حشوة 8/24 · فجوة 8. والحشوة متناظرة
   فلا جهةَ لها تنعكس مع اللغة. والعرض ثابتٌ كما في الملف مع `nowrap`، وقد قيست
   التسميتان في كروم داخله: العربية 64.1px والإنجليزية 65.3px في 91px متاحة — فلا
   تُقصّ إحداهما، وما بقي من فرجة يحتمل تسميةً أطول بنحو 25px.
   ⚠ الحدّ 0.5px يُرسمه كروم 1px عند كثافة 1 (لا نصف بكسل في شاشةٍ عادية)، فالمتاح
     91 لا 92. التصريح كما في الملف، والتقريب من المتصفّح لا منّا. ✦ */
.lg-mark{position:absolute;top:26px;left:26px;display:inline-flex;align-items:center;text-decoration:none}
.lg-mark img{height:40px;width:auto;display:block}
/* ✦ (٢٠٢٦-١١-٠٤ — تصميم أحمد) «زيارة الموقع» في الركن الأيسر أسفل اللوح، تحاذي
   الشعارَ الذي يعلوه ويقود الموقعَ نفسه — حافةٌ واحدة تجمعهما.
   ⚠ الجهة فيزيائية (left) عمداً كالشعار فوقها: التصميم يضعهما يساراً في اللغتين،
     فلا تنعكس مع الاتجاه. i18n:keep-physical
   ⚠ السهم ::after لا نصّ — في RTL يقع بعد الكلمة أي يسارَها (طلب أحمد
     ٢٠٢٦-١١-٠٢)، وdata-i18n يكتب textContent فلا يحتمل ابناً. ✦ */
.lg-visit{position:absolute;bottom:26px;left:26px;
  display:inline-flex;align-items:center;gap:8px;
  font-family:Tajawal,sans-serif;font-weight:700;font-size:12px;line-height:1;letter-spacing:0;
  color:#0A8E7C;text-decoration:none;white-space:nowrap;transition:color .15s}
.lg-visit::after{content:"←";font-size:14px;line-height:1}
/* في الإنجليزية ::after يقع يمين الكلمة، فالسهم يُقلب ليبقى على موضعه المنطقيّ نفسه */
html[dir=ltr] .lg-visit::after{content:"→"}
.lg-visit:hover{color:#013B41}
.lg-art{flex:1 1 56%;min-width:0;position:relative;overflow:hidden;
  /* ✦ (٢٠٢٦-١٠-٢١ — ملف التصميم) التدرّج بالحرف: 136.99deg · #018776 عند 10.78%
     · #013A42 عند 100.28%. كان ١٦٠deg من الغامق إلى الفاتح — أي معاكساً لاتجاه
     التدرّج المخبوز داخل صورة النسيج نفسها، فكان الاثنان يتنازعان. ✦ */
  background:linear-gradient(136.99deg,#018776 10.78%,#013A42 100.28%);
  clip-path:polygon(var(--lg-slant) 0,100% 0,100% 100%,0 100%)}
/* الميل والجهات تُثبَّت بالقلب المضادّ في الإنجليزية — فالمشهد واحد في اللغتين */
html[dir=ltr] .lg-split{flex-direction:row}
html[dir=ltr] .lg-stores{flex-direction:row-reverse}
.lg-art-bg{position:absolute;inset:0;background:url(/brand/cp-panel.webp) center/cover no-repeat;opacity:.5;pointer-events:none}
.lg-art-inner{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:64px;padding:44px 6%}
/* ✦ إحداثيات ملف التصميم داخل إطار عرضه 698.90 (الشاشة 435.90×443.38 عند 263.00،
   والجوال 297.65 عند 0.00 ويتدلّى 27.58 تحت قاع الشاشة). كلّها نِسَبٌ من عرض
   التركيب فيصغر كاملاً على الشاشة الضيّقة بلا أن تنفصل القطعتان.
   ⚠ ارتفاع الجوال من نسبة صورتنا (1.73) لا من صندوق التصميم (1.28): الصندوق هناك
     لقصّةٍ أخرى، وفرضُ ارتفاعه يهرس صورتنا. فالمأخوذ منه العرض والموضع وحدهما.
   ⚠ والتركيب فيزيائيّ لا منطقيّ: انعكاسه مع اللغة يقلب المشهد ويخرج الجوال. ✦ */
.lg-devices{position:relative;width:min(699px,100%);filter:drop-shadow(0 26px 46px rgba(0,20,24,.34))}
.lg-devices img{display:block;height:auto}
.lg-devices .lg-display{width:62.37%;margin-left:37.63%}
/* ✦ (٢٠٢٦-١٠-٢١ — طلب أحمد) الجوال يمينُه ليجاور الشاشة. الإزاحة محسوبة على
   المرئيّ لا على الصندوق: يمين صورة الجوال فيه ٢٤٣px من ٩٠٠ ظلٌّ شبه شفاف، فحافّته
   الصلبة تقف عند ٧٢.٩٪ من عرضه — ومن دون حسابه كانت تبدو فجوةً ٤٦px بلا سبب ظاهر.
   وbottom محسوبة بالقاعدة نفسها ليقف الجهازان على أرضية واحدة: قاع جسم الشاشة
   الصلب عند ٩٥.٢٪ من إطارها وقاع الجوال عند ٩٥.٨٪ من إطاره، والباقي ظلٌّ ناعم
   يُسقِطه كلٌّ من الحسبة، ثم خُفِضت 21px بالعين (طلب أحمد). ✦ */
.lg-devices .lg-phones{position:absolute;width:42.59%;left:11.3%;bottom:-1.25%}
.lg-stores{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
/* ✦ (٢٠٢٦-١٠-٢١) مقاسات الشارة من ملف التصميم: 194×56، حدٌّ 1px #A6A6A6، زوايا 8،
   حشوة 8/12، وفاصل 8 بين الأيقونة والنصّ. النصّ لاتينيّ دائماً (اسم متجر لا يُترجَم)
   فيبقى LTR وبخطّ النظام. ✦ */
.lg-badge{display:inline-flex;align-items:center;gap:8px;direction:ltr;background:#000;color:#fff;
  width:194px;height:56px;border:1px solid #A6A6A6;border-radius:8px;padding:8px 12px;
  text-decoration:none;transition:transform .15s,border-color .15s}
.lg-badge:hover{transform:translateY(-2px);border-color:#fff}
.lg-badge img{height:30px;width:auto;display:block;flex:none}
.lg-badge span{display:flex;flex-direction:column;gap:3px;text-align:left;
  font-family:Arial,"Liberation Sans","Helvetica Neue",Helvetica,sans-serif;white-space:nowrap}
.lg-badge small{font-size:13px;font-weight:400;line-height:1;letter-spacing:0;color:rgba(255,255,255,.72)}
.lg-badge b{font-size:22px;font-weight:700;line-height:1;letter-spacing:0;color:#fff}
/* ✦ البطاقة بمقاسات ملف التصميم: عرض 474، حشوة 24، زوايا 24، وحدٌّ 0.5px بلون
   #013B41 بشفافية 14 ست عشرية (≈8٪). الارتفاع متروك للمحتوى: 688 في الملف لشاشةٍ
   واحدة، وشاشات «نسيت» و«إعادة التعيين» و«اختيار الشركة» أقصر وأطول منها. ✦ */
.login-card{background:#fff;border:0.5px solid #013B4114;border-radius:24px;max-width:474px;
  padding:24px;box-shadow:none;overflow:visible;animation:none}
.login-header{background:transparent;padding:0 0 20px;text-align:center}
.login-header::after{display:none}
.login-title{font-family:Tajawal,sans-serif;font-size:24px;font-weight:700;line-height:18px;letter-spacing:-0.17px;color:#013B41;text-align:center;margin-bottom:10px}
.login-subtitle{font-family:Tajawal,sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:-0.17px;color:#013B41;text-align:center}
.login-body{padding:0}
.login-head-ico{width:46px;height:46px;margin:0 auto 14px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(135deg,#013A42,#008E7B);color:#fff}
.login-head-ico svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* هوية المستأجر على نطاقه الفرعي — على بياضٍ الآن لا على داكن */
.tenant-brand-name{color:#013B41}
.login-welcome{color:#7A9298}
/* ✦ (٢٠٢٦-١٠-٢١ — تصميم أحمد) مربّع ٨٠×٨٠. والخلفية والظلّ والحشوة كانت
   لترويسةٍ داكنة زالت؛ على البياض تصير إطاراً حول الشعار بلا داعٍ.
   و contain لا cover: الشعار العريض يصغر ويبقى كاملاً بدل أن يُقَصّ من طرفيه —
   القصّ يمسّ شعار عميل لا عنصر تصميم. ✦ */
.tenant-brand img{box-shadow:none;border:0;background:none;padding:0;width:80px;height:80px;max-width:none;object-fit:contain;border-radius:20px}
.brand-sep{background:rgba(1,58,66,.18)}
.login-info{background:transparent;border-top:0;padding:18px 0 0;margin-top:0}
/* ✦ زرّا الدخول بحساب خارجي من ملف التصميم: ارتفاع 40، زوايا 8، حدّ 0.5px
   #1E1E1E بشفافية 4D (30٪)، خلفية #FCFDFD، فاصل 8 بين الأيقونة والنصّ،
   والنصّ Tajawal 500 · 14px · ارتفاع سطر 150٪ · تباعد -1.9٪ (= -0.266px) · #013A42.
   ⚠ حشوة الجانبين 73/74 في الملف هي توسيطُ محتوىً في عرضٍ ثابت — هنا
     justify-content:center يفعلها وحده ويصمد مع أي طول نصّ أو لغة. ✦ */
.lg-oauth{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:40px;
  padding:8px 16px;border:0.5px solid #1E1E1E4D;border-radius:8px;background:#FCFDFD;color:#013A42;
  font-family:Tajawal,sans-serif;font-weight:700;font-size:14px;line-height:1.5;letter-spacing:-0.266px;
  text-decoration:none;transition:background .15s,border-color .15s}
.lg-oauth:hover{background:#F2F6F6}
.lg-oauth.is-soon{cursor:not-allowed;position:relative}
.lg-oauth.is-soon:hover{background:#FCFDFD}
/* ✦ حرف الفصل من ملف التصميم: Cairo 700 · 12px · ارتفاع سطر 150٪ · تباعد -1.9٪
   (= -0.228px عند 12) · #000. الوسم يحمل حجماً ولوناً داخليّين على الحاوية،
   فالقاعدة على الـspan نفسه كي تصل. ✦ */
#oauth-divider > span{font-family:Cairo,Tajawal,sans-serif;font-weight:700;font-size:12px;
  line-height:1.5;letter-spacing:-0.228px;color:#000;text-align:center}
/* ✦ الحقول بمقاسات ملف التصميم: ارتفاع 48، حشوة 14/16، زوايا 8، حدّ 1px #013B41
   بشفافية 1A ست عشرية (≈10٪)، وخلفية بيضاء. العرض 426 يأتي وحده = 474 ناقص حشوة
   البطاقة. وحشوة اليسار في حقل كلمة المرور تبقى 42 من الوسم ليتّسع زرّ العين. ✦ */
.finp{background:#fff;border:1px solid #013B411A;border-radius:8px;padding:14px 16px;height:48px}
.finp:focus{border-color:#008E7B;background:#fff;box-shadow:0 0 0 4px rgba(0,142,123,.1)}
/* ✦ التسمية من ملف التصميم: Tajawal 700 · 14px · ارتفاع سطر 100٪ · تباعد 0 · #013B41.
   المحاذاة start لا right: في العربية هي اليمين نفسه كما في الملف، وفي الإنجليزية
   تتبع التخطيط المنعكس — والفيزيائية كانت ستترك التسمية معلّقة في الجهة الخطأ. ✦ */
.flbl{font-family:Tajawal,sans-serif;font-size:14px;font-weight:700;line-height:1;letter-spacing:0;color:#013B41;text-align:start}
/* ✦ النصّ التوضيحي من ملف التصميم: Tajawal 500 · 14px · ارتفاع سطر 100٪ · #013B41.
   ويبدأ من اليمين كبقية الفورم: حقلا البريد كانا مُجبَرين على اليسار بوسمٍ داخليّ،
   وقد رُفع — و dir="ltr" باقٍ عليهما فترتيب حروف البريد لاتينيّ كما يجب. ✦ */
.finp{text-align:right}
html[dir=ltr] .finp{text-align:left}
.finp::placeholder{font-family:Tajawal,sans-serif;font-weight:500;font-size:14px;line-height:1;
  letter-spacing:0;color:#013B418C;direction:inherit;opacity:1}
/* ✦ (٢٠٢٦-١٠-٢١ — تصميم أحمد) ترويسة البطاقة: على النطاق الرئيسي شعار رَبْع داخلها
   ولا شيء في الركن، وعلى مضيف شركة شعارُها داخلها وفي الركن زرّ «زيارة الموقع» إلى
   موقع رَبْع (٢٠٢٦-١٠-٢٩؛ كان شعار رَبْع) — فلا يتكرّر رمزٌ مرّتين في أيّ حال. الصنف is-tenant يُضاف من المضيف قبل أيّ طلب شبكة، فلا
   يلمح أحدٌ شعار رَبْع ثمّ يراه يُستبدَل. والأيقونة احتياطُ مضيف الشركة وحده:
   تظهر معه افتراضاً وتنسحب إن وصل شعار — حتى لو فشل الطلب تبقى ترويسةٌ ما. ✦ */
#rabaLogo{display:block;height:54px;width:auto;margin:0 auto 14px}
html.is-tenant #rabaLogo{display:none}
html:not(.is-tenant) .lg-visit,
html:not(.is-tenant) .lg-mark{display:none}
/* الأيقونة خطيّة بلا خلفية، ولا تظهر إلا على مضيف شركة */
/* الأيقونة بمقاس الملف 32 وسُمك 1.33 ولونه #003942 — والـCSS هنا لا يفرض نهايات
   الخطوط فتبقى لكل مسار كما في الملف. */
/* ✦ عيب قائم: [hidden] يسقط أمام أي قاعدة display، و .powered-by{display:flex} كانت
   تُظهر شعاراً صغيراً فوق الأيقونة رغم أنّ الوسم مخفيّ. يسري على .tenant-brand كذلك. ✦ */
.login-card [hidden]{display:none}
.login-head-ico{width:auto;height:auto;margin:0 auto 16px;background:none;border-radius:0;color:#003942}
.login-head-ico svg{width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:1.33;stroke-linecap:butt;stroke-linejoin:miter}
.login-head-ico{display:none}
html.is-tenant .login-head-ico{display:grid}
/* صفّ «تذكّرني / نسيت كلمة المرور؟» */
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 16px;flex-wrap:wrap}
.auth-remember{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:#7A9298;cursor:pointer;user-select:none}
.auth-remember input{width:16px;height:16px;margin:0;accent-color:#008E7B;cursor:pointer}
.auth-row .link{font-size:12.5px;font-weight:700}
/* «سجّل الآن» رابطٌ نصّي لا زرّ ممتلئ */
/* ✦ سطر «ليس لديك حساب؟» من ملف التصميم: Tajawal 500 · 12px · ارتفاع سطر 150٪ ·
   تباعد -1.9٪ (= -0.228px) · #013B41 · توسيط. والرابط نفسه 700 ومسطَّر وبنفس اللون —
   يتميّز بالوزن والتسطير لا بلونٍ آخر.
   ⚠ سُمك التسطير 0٪ في الملف قيمةٌ لا تَرسم خطّاً؛ تُركت للمتصفّح (auto). ✦ */
.login-info-text{font-family:Tajawal,sans-serif;font-weight:500;font-size:12px;line-height:1.5;
  letter-spacing:-0.228px;color:#013B41;text-align:center}
.login-info-text .signup-cta{display:inline;background:none;box-shadow:none;padding:0;border-radius:0;
  margin-inline-start:4px;font-family:Tajawal,sans-serif;font-weight:700;font-size:12px;line-height:1.5;
  letter-spacing:-0.228px;color:#013B41;text-decoration:underline;text-decoration-style:solid;text-underline-offset:3px}
.login-info-text .signup-cta:hover{background:none;box-shadow:none;transform:none;color:#008E7B}
/* تحت ٩٦٠ لا يتّسع اللوحان: اللوح يسقط ويبقى النموذج وحده بعرض الشاشة */
@media(max-width:960px){
  .lg-split{flex-direction:column}
  .lg-art{display:none}
  .lg-form{flex:1 1 auto;padding:22px 18px 30px}
  .lg-mark{position:static;margin-bottom:6px}
  .lg-visit{position:static;margin-top:14px}
}