/* ═══════════════════════════════════════════════════════════════════
   register_v54.css — صفحة التسجيل
   ═══════════════════════════════════════════════════════════════════
   صفحةٌ عامّة: تُبنى على رموز v35 ولا تُحمّل طبقة الإدارة. وهي أوّل ما
   يراه المتطوّع الجديد — فثقلُها يُقاس بالانطباع لا بالكيلوبايت وحده.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── ① شريط الخطوات ──────────────────────────────────────────── */
/* 29 حقلاً في شاشة واحدة تُخيف — والتقدّم المرئيّ يُبدّل «كم بقي؟»
   بـ«بقيت خطوة». */
.rg-steps{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s5)}
.rg-step{flex:1;display:flex;flex-direction:column;gap:6px;text-align:center;
  position:relative}
.rg-step-n{width:30px;height:30px;margin:0 auto;border-radius:50%;display:grid;
  place-items:center;font-size:13px;font-weight:700;background:var(--n-100);
  color:var(--n-500);transition:var(--t)}
.rg-step.is-on .rg-step-n{background:var(--em-600);color:#fff}
.rg-step.is-done .rg-step-n{background:var(--em-50);color:var(--em-700)}
.rg-step-t{font-size:11.5px;color:var(--n-500)}
.rg-step.is-on .rg-step-t{color:var(--n-900);font-weight:600}
/* الخطّ بين الخطوات — يُرسم على الزائف كي لا يُضاف عنصر لا معنى له */
.rg-step:not(:last-child)::after{content:'';position:absolute;top:15px;
  inset-inline-start:-50%;width:100%;height:2px;background:var(--n-200);z-index:-1}
.rg-step.is-done:not(:last-child)::after{background:var(--em-300)}
.rg-steps{position:relative;z-index:0}
@media(max-width:560px){
  .rg-step-t{display:none}
  .rg-steps{gap:var(--s3)}
}

/* ─── ② لوحة خطوة ─────────────────────────────────────────────── */
.rg-panel{display:none}
.rg-panel.is-on{display:block}

/* ─── ③ حالة الحقل ────────────────────────────────────────────── */
/* الرسالة بجوار حقلها تُصلَح فوراً — والمجموعة بعد الإرسال تُبحث فيها */
.rg-msg{font-size:11.5px;margin-top:4px;display:flex;align-items:center;gap:5px;
  min-height:17px}
.rg-msg.is-bad{color:var(--dang-fg)}
.rg-msg.is-good{color:var(--em-fg)}
.rg-msg.is-busy{color:var(--n-500)}
.ez-fld.has-error input,
.ez-fld.has-error select,
.ez-fld.has-error textarea{border-color:var(--dang-fg)}
.ez-fld.has-ok input{border-color:var(--em-600)}

/* ─── ④ مقياس قوّة كلمة المرور ───────────────────────────────── */
/* الشرط ثمانية أحرف — والمستخدم لا يعرف أنّ «12345678» يمرّ.

   ═══ v55: المقياس يُخفى قبل الكتابة ═══
   كانت أربعة أشرطة رمادية تظهر فوق حقلٍ فارغ — تُقرأ **عطلاً أو
   تحميلاً معلّقاً** لا مقياساً. ولا معنى لقياس ما لم يُكتب بعد.

   ويُفتح بارتفاعٍ متحرّك لا بظهورٍ مفاجئ: قفزةٌ في التخطيط تُربك
   العين وتُزيح الحقل التالي. */
.rg-strength{margin-top:0;max-height:0;overflow:hidden;opacity:0;
  transition:max-height .28s ease, opacity .2s ease, margin-top .28s ease}
.rg-strength.is-on{max-height:44px;opacity:1;margin-top:8px}
@media(prefers-reduced-motion:reduce){
  .rg-strength{transition:none}
}
.rg-bars{display:flex;gap:4px}
/* شريطٌ رفيع ملتصقٌ بالحقل: امتدادٌ له لا عنصرٌ منفصل تحته */
.rg-bars>span{flex:1;height:4px;border-radius:99px;background:var(--n-200);
  transition:background .3s ease}
.rg-strength.s-1 .rg-bars>span:nth-child(1){background:var(--dang-fg)}
.rg-strength.s-2 .rg-bars>span:nth-child(-n+2){background:var(--gd-fg)}
.rg-strength.s-3 .rg-bars>span:nth-child(-n+3){background:var(--gd-500)}
.rg-strength.s-4 .rg-bars>span{background:var(--em-600)}
.rg-strength-t{font-size:11.5px;margin-top:5px;display:block;font-weight:600}
/* اللون يقول ما يقوله الشريط — والنصّ وحده يكفي لمن لا يميّز الألوان */
.rg-strength.s-1 .rg-strength-t{color:var(--dang-fg)}
.rg-strength.s-2 .rg-strength-t{color:var(--gd-fg)}
.rg-strength.s-3 .rg-strength-t{color:var(--gd-fg)}
.rg-strength.s-4 .rg-strength-t{color:var(--em-fg)}

/* حقلا كلمة المرور: المقياس تحت الأوّل كان يُزيح الثاني ويكسر
   المحاذاة. `align-items:start` يُبقي كلاً في عموده. */
.rg-pw-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);
  align-items:start}
@media(max-width:640px){.rg-pw-row{grid-template-columns:1fr}}

/* ─── ⑤ اختيار نوع الحساب ────────────────────────────────────── */
/* «متطوّع» و«عضو» — والفرق لم يكن مشروحاً، فيُختار عشوائياً */
.rg-types{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media(max-width:560px){.rg-types{grid-template-columns:1fr}}
.rg-type{display:block;padding:var(--s4);background:var(--white);
  border:2px solid var(--n-200);border-radius:var(--r-lg);cursor:pointer;
  transition:var(--t)}
.rg-type:hover{border-color:var(--em-300)}
.rg-type.is-on{border-color:var(--em-600);background:var(--em-50)}
.rg-type input{position:absolute;opacity:0;pointer-events:none}
.rg-type-h{display:flex;align-items:center;gap:var(--s2);font-size:14.5px;
  font-weight:600;color:var(--n-900)}
.rg-type-h i{font-size:20px;color:var(--em-600)}
.rg-type-d{font-size:12px;color:var(--n-500);display:block;margin-top:6px;
  line-height:1.75}

/* ─── ⑥ ماذا بعد التسجيل ─────────────────────────────────────── */
/* انتظارٌ بلا مدّة معلومة يُقرأ إهمالاً */
.rg-after{background:var(--em-50);border:1px solid var(--em-100);
  border-radius:var(--r-lg);padding:var(--s5)}
.rg-after h3{font-size:14.5px;font-weight:600;color:var(--em-900);
  margin-bottom:var(--s3);display:flex;align-items:center;gap:8px}
.rg-after ol{margin:0;padding-inline-start:20px;font-size:13px;color:var(--n-700)}
.rg-after li{margin-bottom:8px}
.rg-after li:last-child{margin-bottom:0}
.rg-after b{color:var(--n-900)}

/* ─── ⑦ أزرار التنقّل ────────────────────────────────────────── */
.rg-nav{display:flex;gap:var(--s3);align-items:center;margin-top:var(--s5);
  flex-wrap:wrap}
.rg-nav .spacer{margin-inline-start:auto}

/* ─── ⑧ الوضع الداكن ────────────────────────────────────────── */
html.dark-mode .rg-type{background:var(--n-100);border-color:var(--n-200)}
html.dark-mode .rg-type.is-on{background:rgba(42,148,105,.10)}
html.dark-mode .rg-after{background:rgba(42,148,105,.08);
  border-color:rgba(42,148,105,.22)}
html.dark-mode .rg-bars>span{background:var(--n-200)}


/* ─── ⑨ الحقول الاختيارية ────────────────────────────────────
   ثلاثة عشر حقلاً اختيارياً كانت مبثوثةً بين الإجبارية — والمسجّل
   يقرأ كلّاً منها ليقرّر تخطّيه. وذلك عملٌ ذهنيّ في كلّ سطر.

   جُمعت في قسمٍ واحد مطويّ: من يريد إكمال ملفّه يفتحه، ومن يريد
   التسجيل بسرعة لا يراه أصلاً. */
.rg-more{border:1px dashed var(--n-300);border-radius:var(--r-md);
  margin-top:var(--s4);background:var(--n-50)}
.rg-more>summary{padding:var(--s3) var(--s4);cursor:pointer;font-size:13px;
  font-weight:600;color:var(--n-700);display:flex;align-items:center;gap:8px;
  list-style:none;min-height:44px}
.rg-more>summary::-webkit-details-marker{display:none}
.rg-more>summary i{transition:transform .25s ease}
.rg-more[open]>summary i.rg-more-caret{transform:rotate(-90deg)}
.rg-more>summary .hint{font-weight:400;color:var(--n-500);margin-inline-start:auto}
.rg-more-b{padding:0 var(--s4) var(--s4)}
html.dark-mode .rg-more{background:rgba(255,255,255,.03);border-color:var(--n-300)}

/* ─── ⑩ حقل كلمة المرور ──────────────────────────────────────
   كلمة المرور تُكتب بلا رؤية على لوحة مفاتيح عربية — والخطأ لا
   يُكتشف إلّا عند التأكيد، فيُعاد الحقلان معاً. */
.rg-pw-wrap{position:relative}
.rg-pw-wrap input{padding-inline-end:44px}
.rg-eye{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border:0;background:transparent;border-radius:9px;
  color:var(--n-500);cursor:pointer;display:grid;place-items:center;font-size:17px;
  transition:var(--t)}
.rg-eye:hover{background:var(--n-100);color:var(--n-900)}
.rg-eye:focus-visible{outline:2px solid var(--em-600);outline-offset:1px}
.rg-eye[aria-pressed="true"]{color:var(--em-700)}

/* ─── ⑪ شروط كلمة المرور ────────────────────────────────────
   قائمةٌ تُعلَّم بدل نصٍّ يُقرأ مرّةً ثمّ يُنسى. والعلامة تسبق النصّ
   فتُقرأ الحالة قبل الشرط. */
.rg-rules{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;
  flex-direction:column;gap:5px}
.rg-rules li{font-size:11.5px;color:var(--n-500);display:flex;align-items:center;
  gap:6px;transition:color .2s ease}
.rg-rules li i{font-size:13px;flex:0 0 auto}
.rg-rules li.is-met{color:var(--em-fg)}
/* الأيقونة تُبدَّل في JS لا بـ`content`: الرمز الداخليّ لخطّ
   Phosphor قد يتغيّر مع أيّ ترقية، والفشل صامتٌ — مربّع فارغ. */

/* ─── ⑫ معاينة الصورة ───────────────────────────────────────
   الصورة صارت إجبارية — ومن يرفع ملفّاً يريد أن يرى أنّه الصحيح قبل
   أن يُرسل. */
.rg-preview{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3);
  padding:var(--s3);background:var(--n-50);border:1px solid var(--n-200);
  border-radius:var(--r-md)}
.rg-preview img{width:52px;height:52px;border-radius:50%;object-fit:cover;
  flex:0 0 auto;background:var(--n-100)}
.rg-preview-t{font-size:12px;color:var(--n-600);word-break:break-all}
html.dark-mode .rg-preview{background:rgba(255,255,255,.03)}
html.dark-mode .rg-eye:hover{background:rgba(255,255,255,.07)}

/* ─── ⑬ الطباعة ─────────────────────────────────────────────
   نموذج تسجيل لا يُطبع عادةً — والقواعد هنا احتياطٌ رخيص: من طبعه
   لسببٍ ما لا يستحقّ ترويسةً خضراء تلتهم الحبر، ولا أزراراً لا
   تُضغط على الورق. */
@media print{
  .ez-crumb,.rg-steps,.rg-nav,.rg-eye,.rg-strength{display:none !important}
  .ez-hero{background:none !important;color:var(--n-900) !important;
    border-bottom:2px solid var(--n-900);padding:0 0 10px;margin-bottom:14px}
  .ez-hero::before,.ez-hero::after{display:none}
  .ez-hero h1,.ez-hero .ez-sub{color:var(--n-900) !important}
  /* الخطوات الثلاث تُطبع كلّها: الورق لا يتنقّل */
  .rg-panel{display:block !important;page-break-inside:avoid}
  .rg-more{border-style:solid}
  .rg-more[open] .rg-more-b,.rg-more .rg-more-b{display:block}
  @page{margin:1.4cm}
}