/* ═══════════════════════════════════════════════════════
 *  document-single-2.css — أُستخرِج آليًا من pages/document-single.php
 *  المقطع 2 من 2 · سطور 854–1091 في الأصل.
 *  ⚠️ الترتيب بين المقاطع مقصود: بينها كتل <style> مشروطة
 *     باقية في الصفحة، والتتالي يعتمد على تسلسلها.
 * ═══════════════════════════════════════════════════════ */
/* ⚠️ ٢٩ أغسطس ٢٠٢٦ (البند 18) — align-items:center كان يقصّ من الطرفين.
   توسيط flex يوزّع الفائض على الأعلى والأسفل معًا، والفائض من **أعلى**
   صندوق تمرير لا يدخل منطقة التمرير أبدًا: على شاشة قصيرة (هاتف أفقي،
   نافذة متصفّح مصغَّرة) كانت ترويسة النافذة تختفي خلف حافة الشاشة بلا
   حيلة. flex-start مع margin-block:auto على .wm يتوسّط ما دامت هناك
   فسحة ويلتصق بالأعلى إن ضاقت — فيبقى كل شيء قابلًا للوصول. */
.wm-ov{position:fixed;inset:0;background:rgba(13,27,62,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10000;display:none;align-items:flex-start;justify-content:center;padding:18px;overflow-y:auto}
/* ⚠️ 13 أغسطس 2026 — عرض موحّد لكل نوافذ المسار.
   كانت الأعرض 740px والأضيق 470px فتقفز الواجهة بين خطوة وأخرى. المتغيّر
   أدناه هو المصدر الوحيد للعرض؛ أُزيلت قيم max-width المضمّنة من الـHTML
   حتى لا تتغلّب عليه (المضمّن أقوى من الملف الخارجي). */
/* ⚠️ 17 أغسطس 2026 (البند 1) — 580px ← 800px. نافذة «بيانات المُوقِّع» كانت
   تُمرَّر رأسيًا، والسبب قياسٌ لا ذوق: صفّ الطرف (.wtq-prow) لا يقبل الالتفاف
   على سطح المكتب — كل أبنائه flex-shrink:0 عدا .wtq-sp (حدّه 6px). مجموع
   عرضه الثابت = 29 (الرقم) + 29 (النجمة) + 76 (دائرتا البريد والواتساب)
   + ~190 (زرّ نوع التوقيع، nowrap) + 14 (الحذف) + 54 (الفجوات) + 6 = 398،
   ويُضاف إليه .wtq-namecap بنسبة 30% من عرض الصف. فالشرط: 398 + 0.30C ≤ C
   أي C ≥ 569px من عرض المحتوى. وعند 580px لا يتجاوز C الـ506px، فيفيض الصف
   أفقيًا؛ ولأن #signReqBox يضبط overflow-y:auto فإن overflow-x المحسوب يصير
   auto تلقائيًا (قاعدة CSS: visible + غير-visible ⇒ auto) فيظهر شريط تمرير
   أفقي يبتلع ~15px من الارتفاع فوق التمرير الرأسي أصلًا.
   والإنجليزية أعرض: «An authenticated signature» تُصعِّد زرّ النوع إلى ~272px
   فيصير الحدّ الأدنى C ≥ 679px ⇒ 679 + 48 (حشو #signReqBox) ≈ 727px.
   اخترنا 800px: هامش ~33px فوق الحدّ الإنجليزي، ويكسب المحتوى 220px عرضًا
   إضافيًا فتنزل أسطر الالتفاف (سطر النجمة · الإقراران · تلميح نمط التوقيع ·
   ملاحظة «ما الذي سيُخصم») من سطرين إلى سطر ⇒ ~95px أقل ارتفاعًا، فيدخل
   المحتوى كاملًا في 94vh عند 1440×900 بلا تمرير.
   الاستجابة سليمة: العرض max-width فوق width:100%، فعند 380px تصير النافذة
   344px (380 - 36 حشو الغطاء) وعند 1024px تصير 800px داخل 988px متاحة —
   لا فيضان في الحالتين، والارتفاع يبقى محكومًا بـmax-height 94/95vh. */
:root{--wm-w:800px}
.wm{background:#fff;border-radius:28px;box-shadow:0 30px 80px rgba(13,27,62,.35);width:100%;max-width:var(--wm-w);display:flex;flex-direction:column;max-height:95vh;overflow:hidden;text-align:right;margin-block:auto}
/* ═══ البندان 17 و18 — النوافذ الصغيرة تأخذ مقاسها بصنف مُعدِّل ══════════
   🔴 --wm-w أعلاه **لم يُمسّ**: الحساب الموثّق فوقه أثبت أن أي رقم دونه
   يُعيد شريط التمرير الأفقي داخل «بيانات المُوقّع» — وفي **الإنجليزية
   أولًا** لأن نصوصها أعرض. فالنوافذ الثلاث الصغيرة تُعلَّم بصنف بدل أن
   يُصغَّر المتغيّر على الجميع.
   و«بمقاس المحتوى» هنا **بين حدّين** لا بلا حدّ:
     · سقف الارتفاع (max-height على .wm) موروث كما هو،
     · والتمرير داخلي في .wm-b وحده (flex:1 + min-height:0)،
     · و.wm-h و.wm-f بـflex-shrink:0 فلا ينكمش زرّ الحفظ ولا يخرج.
   بدون ذلك يسقط زرّ الحفظ خارج الشاشة على هاتف أفقي فلا تُنهى النافذة
   أصلًا. min-width يمنع الانكماش إلى شريط، و100% داخل min() يمنع الفيضان
   على شاشة أضيق من الحدّ نفسه. */
:root{--wm-w-sm:560px;--wm-w-xs:430px}
.wm.wm-sm{max-width:min(var(--wm-w-sm),100%)}
.wm.wm-xs{max-width:min(var(--wm-w-xs),100%)}
.wm.wm-sm,.wm.wm-xs{min-width:min(300px,100%)}
.wm.wm-sm>.wm-b,.wm.wm-xs>.wm-b{overflow-y:auto;flex:1;min-height:0}
.wm.wm-sm>.wm-h,.wm.wm-sm>.wm-f,.wm.wm-xs>.wm-h,.wm.wm-xs>.wm-f{flex-shrink:0}
.wm-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid #F1F3F8;flex-shrink:0}
.wm-ht{display:flex;align-items:center;gap:11px;min-width:0}
.wm-ic{width:38px;height:38px;border-radius:12px;background:#eaf2fe;color:#2563EB;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.wm-h h3{font-size:.95rem;font-weight:800;color:#0D1B3E;margin:0;line-height:1.4}
.wm-h .wm-sub{font-size:.74rem;color:#64748B;margin-top:2px;line-height:1.5}
.wm-nav{display:flex;align-items:center;gap:7px;flex-shrink:0}
.wm-i{width:32px;height:32px;border-radius:50%;background:#F1F5F9;border:none;color:#475569;display:flex;align-items:center;justify-content:center;font-size:.8rem;cursor:pointer;font-family:inherit;transition:.15s}
.wm-i:hover{background:#e4eaf2;color:#0D1B3E}
.wm-b{overflow-y:auto;padding:16px 20px;flex:1;min-height:0}
.wm-f{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;border-top:1px solid #F1F3F8;background:#FCFDFE;flex-shrink:0}
.wm-lbl{display:block;font-size:.73rem;font-weight:700;color:#475569;margin-bottom:4px}
.wm-lbl em{font-style:normal;color:#64748B;font-weight:600}

/* ═══ صفوف الأطراف — أُضيفت 7 أغسطس 2026 (كل طرف سطر واحد) ═══ */
.wtq-prow{display:flex;align-items:center;gap:9px;background:#F8FAFC;border:1px solid #E6EBF2;border-radius:999px;
  padding:8px 10px 8px 14px;margin-bottom:9px;position:relative}
.wtq-prow.done{background:#F4FBF7;border-color:#CFEBDD}
.wtq-pnum{width:29px;height:29px;border-radius:50%;background:#fff;border:1px solid #E2E8F0;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:.79rem;color:#64748B;flex-shrink:0}
.wtq-prow.done .wtq-pnum{background:#10B981;border-color:#10B981;color:#fff;font-size:.7rem}
.wtq-pmain{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wtq-pname{font-weight:800;font-size:.85rem}
.wtq-psep{color:#CBD5E1}
.wtq-pmeta{font-size:.77rem;color:#64748B}
.wtq-badge{background:#DCFCE7;color:#047857;font-size:.71rem;font-weight:800;padding:5px 12px;border-radius:999px;
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0}
.wtq-star{width:29px;height:29px;border-radius:50%;border:1px solid #E2E8F0;background:#fff;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:#CBD5E1;font-size:.8rem;transition:.18s;padding:0}
.wtq-star.on{background:#FFFBEB;border-color:#FCD34D;color:#D97706}
.wtq-star:hover{border-color:#FCD34D;color:#D97706}
.wtq-namecap{width:30%;min-width:140px;flex-shrink:0}
/* box-sizing ضروري: بدونه يتجاوز الحقل حدود الحاوية بمقدار الحشو والحدّ
   ويخرج من الشاشة على الموبايل (الصفحة لا تضبط box-sizing عامًّا). */
.wtq-cap{width:100%;box-sizing:border-box;border:1px solid #E2E8F0;background:#fff;border-radius:999px;padding:9px 14px;font-family:inherit;
  font-size:.82rem;outline:none;transition:.18s;color:#0D1B3E}
.wtq-cap:focus{border-color:#2563EB;box-shadow:0 0 0 3px rgba(37,99,235,.10)}
.wtq-dots{display:flex;align-items:center;gap:6px;flex-shrink:0}
.wtq-dot{width:35px;height:35px;border-radius:50%;border:1px solid #E2E8F0;background:#F8FAFC;color:#94A3B8;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:.88rem;transition:.18s;position:relative;padding:0}
.wtq-dot:hover{background:#EEF2F7;color:#64748B;border-color:#CBD5E1}
.wtq-dot.filled{background:#EFF4FF;border-color:#BFD4FA;color:#2563EB}
.wtq-dot.filled.wa{background:#EAF9F1;border-color:#BFE7D2;color:#128C7E}
.wtq-dot .tk{position:absolute;bottom:-2px;left:-2px;width:15px;height:15px;border-radius:50%;background:#10B981;color:#fff;
  font-size:.5rem;display:none;align-items:center;justify-content:center;border:2px solid #fff}
.wtq-dot.filled .tk{display:flex}
.wtq-sp{flex:1;min-width:6px}
.wtq-sigsel{position:relative;flex-shrink:0}
.wtq-sigbtn{display:flex;align-items:center;gap:8px;border:1px solid #E2E8F0;background:#fff;border-radius:999px;
  padding:8px 14px;cursor:pointer;font-family:inherit;font-size:.79rem;font-weight:700;color:#0D1B3E;transition:.18s;white-space:nowrap}
.wtq-sigbtn:hover{border-color:#2563EB}
.wtq-lvl{font-size:.64rem;font-weight:800;padding:2px 8px;border-radius:999px}
.wtq-l1{background:#F1F5F9;color:#64748B}.wtq-l2{background:#EFF4FF;color:#2563EB}.wtq-l3{background:#F5F0FF;color:#7C3AED}
.wtq-del{background:none;border:none;color:#CBD5E1;cursor:pointer;font-size:1rem;padding:0 3px;flex-shrink:0;line-height:1}
.wtq-del:hover{color:#DC2626}
.wtq-pop{position:absolute;z-index:90;background:#fff;border:1px solid #E2E8F0;border-radius:15px;
  box-shadow:0 18px 48px rgba(13,27,62,.16);padding:7px;display:none;box-sizing:border-box;max-width:calc(100vw - 34px)}
.wtq-pop.open{display:block}
.wtq-popt{padding:10px 12px;border-radius:10px;cursor:pointer;transition:.15s}
.wtq-popt:hover{background:#F5F8FC}.wtq-popt.sel{background:#EFF4FF}
/* خيار محجوز لطرف آخر — ظاهر ليُفهم سبب المنع، لكنه غير قابل للنقر */
.wtq-popt.off{opacity:.45;cursor:not-allowed;pointer-events:none}
.wtq-popt.off:hover{background:transparent}
.wtq-popt .t{font-weight:800;font-size:.81rem;display:flex;align-items:center;gap:7px}
.wtq-popt .d{font-size:.72rem;color:#64748B;margin-top:3px;line-height:1.6}
.wtq-addrow{display:flex;align-items:center;gap:8px;color:#2563EB;font-weight:800;font-size:.81rem;cursor:pointer;
  padding:11px 15px;border:1.5px dashed #C7DBF6;border-radius:999px;margin-top:3px;transition:.18s;background:#fff}
.wtq-addrow:hover{background:#F5F8FF;border-color:#2563EB}
.wtq-addhint{color:#94A3B8;font-weight:600;font-size:.76rem}
/* ═══ البند 20 — كبسولتا الخيار الاختياري ═════════════════════════════════
   «كود سرّي» و«موقّعون إضافيون» خياران لا يحتاجهما أكثر الإرسالات، وكانا
   يشغلان صندوقًا مطويًّا وصفًّا منقّطًا بعرض النافذة كاملًا في شاشة طويلة
   أصلًا. كبسولتان صغيرتان جنبًا إلى جنب تقولان «متاح» بلا أن تُثقلا.
   ⚠️ الحالة المضبوطة (.set) ليست ترفًا بصريًّا: الكود السرّي **لا يُعرَض
   بعد الإرسال ولا مرّة أخرى** — فالكبسولة هي الدليل الوحيد الباقي على أنه
   مضبوط فعلًا. لذلك الفرق مصمت + إطار أزرق + علامة صحّ، لا لون نصّ وحده. */
/* ⚠️ البند ٢٧ — الصفّ صار يحمل **ثلاث** كبسولات لا اثنتين (أُضيفت «إجبار
   الطرف الثاني على تقديم هويته»). لا رقم أعمدة هنا: flex-wrap يقرّر بمقاس
   المحتوى، فتنزل الثالثة سطرًا بمفردها متى ضاق الصفّ. */
.wtq-optrow{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0 4px}
/* min-width:0 يمنع الفيضان: بدونها الحدّ الأدنى للكبسولة هو min-content،
   ونصّها الثانوي white-space:nowrap ⇒ كبسولة أطول من الصفّ تخرج منه بدل
   أن تنكمش. معها تنكمش ويُقصّ النصّ الثانوي بالنقاط الثلاث كما صُمّم. */
.wtq-optcap{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-width:0;border:1.5px dashed #C7DBF6;background:#fff;border-radius:999px;padding:9px 15px;
  font-family:inherit;font-size:.8rem;font-weight:700;color:#475569;cursor:pointer;transition:.18s;text-align:start}
.wtq-optcap>i,.wtq-optcap>svg{color:#94A3B8;font-size:.82rem;flex-shrink:0;transition:color .18s}
/* الاسم نفسه لا يُقصّ أبدًا — الانكماش يقع على النصّ الثانوي وحده */
.wtq-optcap>span:not(.n){flex-shrink:0;white-space:nowrap}
/* النصّ الثانوي يُقرأ كثانوي بالوزن والمقاس (600 مقابل 700 · .75 مقابل .8)
   لا بلون باهت: #94A3B8 على أبيض ≈ 2.6:1 وهو دون حدّ القراءة، و#64748B
   ≈ 4.8:1 فوقه — والنصّ الجديد «إجبار الطرف الثاني على تقديم هويته» جملة
   تُقرأ لا زخرفة. */
.wtq-optcap .n{font-weight:600;color:#64748B;font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.wtq-optcap:hover{border-color:#2563EB;color:#2563EB;background:#F5F8FF}
.wtq-optcap:hover>i,.wtq-optcap:hover>svg{color:#2563EB}
.wtq-optcap:focus-visible{outline:none;border-color:#2563EB;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
/* مضبوط: خطّ متّصل لا متقطّع — المتقطّع يقول «فارغ/مقترح» */
.wtq-optcap.set{border-style:solid;border-color:#2563EB;background:#EFF4FF;color:#1D4ED8}
.wtq-optcap.set>i,.wtq-optcap.set>svg,.wtq-optcap.set .n{color:#2563EB}
.wtq-optcap .tick{display:none;width:16px;height:16px;border-radius:50%;background:#2563EB;color:#fff;align-items:center;justify-content:center;font-size:.55rem;flex-shrink:0}
.wtq-optcap.set .tick{display:inline-flex}
/* على الضيّق تأخذ كل كبسولة سطرها كاملًا بدل أن تُقصّ نصوصها.
   ⚠️ 480px ← 520px (البند ٢٧): الكبسولة الثالثة تحمل أطول نصّ ثانوي في
   الصفّ، فيبدأ قصّه قبل الحدّ القديم — رُفع الحدّ ليطابق غرض القاعدة نفسه. */
@media(max-width:520px){.wtq-optcap{flex:1 1 100%;justify-content:center}}
/* البند 19 — حُذفت قاعدتا .wtq-mdesc في ٢٩ أغسطس ٢٠٢٦ مع حذف الوسم الذي
   كان يبنيه (سطر شرح طريقة التوقيع تحت قائمة كل طرف). لا موضع آخر في
   المشروع يستعمل الصنف. */
/* تنبيه نصّي رفيع بلا خلفية ولا إطار — طُلب صراحةً 8 أغسطس 2026 */
.wtq-warn{color:#DC2626;font-size:.72rem;font-weight:500;line-height:1.7;margin-top:9px;display:none}
.wtq-warn.show{display:block}
.wtq-warn b{font-weight:700}
.wtq-warn i{margin-left:5px}
/* النوافذ المنبثقة للاتصال */
/* ⚠️ ٢٩ أغسطس ٢٠٢٦ (البند 18) — الورقة لم يكن لها سقف ولا للغطاء تمرير.
   ورقتا البريد والواتساب تنتهيان بزرَّي «إلغاء» و«حفظ»، وكانتا تُتوسَّطان
   في غطاء بلا overflow: على شاشة قصيرة يفيض أسفلها خارج النافذة فلا
   يُرى الزرّان ولا يُوصل إليهما بتمرير — أي أن الورقة تُفتح ولا تُغلق
   بحفظ. الآن الغطاء هو الذي يمرّر، والورقة تتوسّط بهوامش auto وتلتصق
   بالأعلى إن ضاقت الفسحة.
   🔴 التمرير على **الغطاء** لا على الورقة عمدًا: #wtqCcPop (قائمة
   الدول) عنصر مطلق داخل الورقة، وأي overflow غير visible عليها يقصّه —
   وهو الفخّ الموثّق في هذا المشروع. */
.wtq-ovl{position:fixed;inset:0;background:rgba(13,27,62,.45);display:none;align-items:flex-start;justify-content:center;z-index:10050;padding:16px;overflow-y:auto}
.wtq-ovl.open{display:flex}
.wtq-sheet{background:#fff;border-radius:19px;width:100%;max-width:420px;padding:21px;box-shadow:0 24px 70px rgba(0,0,0,.3);margin-block:auto}
.wtq-sheet h4{font-size:.95rem;font-weight:800;margin-bottom:5px;display:flex;align-items:center;gap:8px}
.wtq-sheet .sb{font-size:.76rem;color:#64748B;margin-bottom:15px;line-height:1.7}
.wtq-prow-ph{display:flex;gap:7px;align-items:stretch}
.wtq-ccwrap{position:relative;flex-shrink:0;z-index:5}
.wtq-ccbtn{display:flex;align-items:center;gap:6px;border:1px solid #E2E8F0;background:#fff;border-radius:999px;padding:9px 12px;
  cursor:pointer;font-family:inherit;font-size:.81rem;font-weight:700;white-space:nowrap;height:100%}
.wtq-ccbtn:hover{border-color:#2563EB}
.wtq-numwrap{position:relative;flex:1}
.wtq-numwrap .wtq-cap{padding-left:36px}
.wtq-vtick{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#D1D5DB;transition:.2s;display:flex}
.wtq-vtick.ok{color:#10B981}
.wtq-hint{font-size:.72rem;color:#64748B;margin-top:8px;line-height:1.7;display:flex;gap:6px;align-items:flex-start}
.wtq-hint.bad{color:#B45309}
.wtq-csearch{width:100%;border:1px solid #E2E8F0;border-radius:10px;padding:9px 12px;font-family:inherit;font-size:.81rem;outline:none;margin-bottom:6px}
.wtq-csearch:focus{border-color:#2563EB}
.wtq-clist{max-height:220px;overflow-y:auto}
.wtq-citem{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:.81rem}
.wtq-citem:hover{background:#F5F8FC}
.wtq-citem .dial{color:#64748B;font-weight:700;direction:ltr;margin-right:auto}
.wtq-citem .z{font-size:.66rem;padding:2px 7px;border-radius:999px;background:#F1F5F9;color:#64748B;font-weight:700}
.wtq-sact{display:flex;gap:8px;margin-top:17px}
.wtq-sact .wm-btn{flex:1}
@media(max-width:820px){
  .wtq-prow{flex-wrap:wrap;border-radius:17px;padding:11px}
  .wtq-namecap{width:100%;order:2}.wtq-dots{order:3}
  .wtq-sigsel{order:4;width:100%}.wtq-sigbtn{width:100%;justify-content:space-between}
  .wtq-sp{display:none}
}
.wm-lbl b{color:#DC2626}
.wm-inp{width:100%;box-sizing:border-box;background:#F7F8FB;border:1.5px solid #E8EAEF;border-radius:13px;padding:9px 13px;font-size:.85rem;font-family:inherit;color:#1d1d1f;outline:none;transition:.15s}
.wm-inp::placeholder{color:#AFB8C6}
.wm-inp:focus{background:#fff;border-color:#2563EB;box-shadow:0 0 0 4px rgba(37,99,235,.1)}
.wm-hint{font-size:.71rem;color:#64748B;margin-top:6px;line-height:1.6}
.wm-g2{display:grid;grid-template-columns:1fr 1fr;gap:9px 11px}
.own-t{font-size:.72rem;font-weight:800;color:#64748B;letter-spacing:.02em;margin:11px 0 8px;padding-top:11px;border-top:1px solid #F1F3F8}
.wm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:11px 22px;font-size:.86rem;font-weight:700;font-family:inherit;cursor:pointer;border:1.5px solid transparent;transition:.15s}
.wm-p{background:#2563EB;color:#fff}
.wm-p:hover{background:#1D4ED8}
.wm-n{background:#0D1B3E;color:#fff}
.wm-n:hover{background:#152a5c}
.wm-o{background:#fff;border-color:#DDE3EE;color:#475569}
.wm-o:hover{border-color:#cfe0f7;color:#2563EB}
.wm-gh{background:none;border:none;color:#64748B;font-size:.8rem;font-weight:600;padding:9px;font-family:inherit;cursor:pointer}
.wm-gh:hover{color:#475569}
.wm-note{display:flex;align-items:flex-start;gap:9px;background:#F8FAFD;border:1px solid #EEF1F7;border-radius:14px;padding:11px 13px;font-size:.76rem;color:#475569;line-height:1.7;margin-top:14px}
.wm-note i{color:#2563EB;margin-top:2px}
.wm-err{display:none;background:#FEE2E2;color:#991B1B;border-radius:12px;padding:10px 13px;font-size:.79rem;margin-bottom:13px;line-height:1.6}
/* بطاقة اختيار (radio)
   ⚠️ أُعيد تصميمها 13 أغسطس 2026 — كانت **صفوفًا** ممتدة بعرض النافذة بينما
   نافذة «عقدك جاهز» السابقة لها مباشرةً تعرض **بطاقتين** جنب بعض، فيبدو
   المساران وكأنهما من منتجَين. الآن نفس شبكة .wm-opts ونفس مقاييسها
   (أيقونة فوق · عنوان · وصف · مؤشّر الاختيار في الزاوية). */
/* ═══ البندان 17 و24 — صفّ خيارات «وقّع العقد أولًا» بأعمدة متساوية ═══════
   ⚠️ minmax(0,1fr) لا 1fr المجرّدة: الحدّ الأدنى الضمني لعمود الشبكة هو
   auto (أي min-content)، فالبطاقة ذات النصّ الأطول ترفض الانكماش وتسرق
   عرضًا من جارتيها ⇒ أعمدة متفاوتة وصفّ يفيض — والفرق يظهر في الإنجليزية
   قبل العربية لأن كلماتها لا تنكسر مثل العربية.
   🔴 عدد الأعمدة **لا يُكتب**: grid-auto-flow:column يصنع عمودًا لكل ابن،
   وgrid-auto-columns يعطيه نفس المقاس. بطاقتان ⇒ عمودان، ثلاث ⇒ ثلاثة،
   بلا صنف عدد ولا متغيّر ولا سطر جافاسكربت. وهذا مقصود لا اختصار: عدد
   البطاقات هنا متغيّر فعلًا («وقّع بتوكنك» قد تغيب، والتوقيع المحفوظ قد
   يكون للفرد وللشركة معًا) — فأي رقم ثابت يترك فجوة مكان الغائب.
   grid-template-columns:none صريحة حتى لا تبقى أعمدة صريحة من قاعدة أعلى
   فتختلط بالضمنية.
   يتراصّ في عمود واحد عند 760px، نفس نقطة الكسر المستعملة في هذا الملف
   لباقي الشبكات — لا نخترع نقطة جديدة. */
#owner-saved-cards{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:11px;margin-bottom:4px;text-align:center}
.wm-optrow{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:11px;align-items:stretch;text-align:center}
#owner-saved-cards.wm-optrow{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
/* البطاقة داخل الصفّ تملأ ارتفاع عمودها فتستوي القواعد السفلية */
.wm-optrow>.wm-opt,.wm-optrow>.wm-pick{height:100%;box-sizing:border-box;margin:0}
#owner-saved-cards>.wm-pick{height:100%;box-sizing:border-box;margin:0}
/* البند ٢٤ — محتوى البطاقة متوسَّط: text-align:center (منطقية، لا تنقلب
   في الإنجليزية) والأيقونة صندوق flex بعرض ثابت ⇒ لا يوسّطها text-align
   بل margin-inline:auto. */
.wm-pick{display:block;position:relative;width:100%;border:1.5px solid #E8EAEF;background:#fff;border-radius:20px;padding:16px;margin:0;cursor:pointer;font-family:inherit;text-align:center;transition:.15s}
/* بعد التوسّع: البطاقة غير المفعّلة تتقلّص ليفسح مساحة فتظهر النافذة كاملة */
#owner-saved-cards.slim .wm-pick:not(.on){padding:11px 13px}
#owner-saved-cards.slim .wm-pick:not(.on) .av{width:28px;height:28px;font-size:.72rem;border-radius:9px;margin-bottom:7px}
#owner-saved-cards.slim .wm-pick:not(.on) p{display:none}
.wm-pick:hover{border-color:#cfe0f7;box-shadow:0 10px 26px rgba(13,27,62,.08)}
.wm-pick.on{border-color:#2563EB;background:#FAFCFF}
.wm-pick .l{display:block;min-width:0}
.wm-pick .av{width:36px;height:36px;border-radius:12px;background:#F1F5F9;color:#64748B;display:flex;align-items:center;justify-content:center;font-size:.9rem;margin-bottom:10px;margin-inline:auto}
.wm-pick.on .av{background:#2563EB;color:#fff}
/* الحشو على الجهتين لا على جهة واحدة: مؤشّر الاختيار في زاوية واحدة، لكن
   حشوًا من طرف واحد يزيح العنوان المتوسَّط عن مركزه بنصف مقداره. */
.wm-pick h5{font-size:.85rem;font-weight:800;color:#0D1B3E;margin:0 0 4px;padding-inline:24px}
/* الوصف يلتفّ على سطرين متوازنين بدل سطر طويل وآخر بكلمة — والالتفاف هو
   ما يمنعه من شدّ عرض البطاقة (minmax(0,1fr) على العمود يمنعه أصلًا). */
.wm-pick p{font-size:.72rem;color:#64748B;margin:0;line-height:1.7;text-wrap:balance;overflow-wrap:break-word}
.wm-rd{position:absolute;top:14px;inset-inline-end:14px;width:19px;height:19px;border-radius:50%;border:2px solid #CBD5E1;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box}
.wm-pick.on .wm-rd{border-color:#2563EB}
.wm-pick.on .wm-rd:after{content:"";width:10px;height:10px;border-radius:50%;background:#2563EB}
.wm-or{display:flex;align-items:center;gap:12px;margin:15px 0;color:#64748B;font-size:.72rem}
.wm-or:before,.wm-or:after{content:"";flex:1;height:1px;background:#EEF1F7}
/* شرائح فرد/شركة */
.wm-seg{display:flex;background:#F1F5F9;border-radius:999px;padding:3px;margin-bottom:10px}
.wm-seg button{flex:1;border:none;background:transparent;border-radius:999px;padding:8px;font-family:inherit;font-size:.82rem;font-weight:700;color:#64748B;cursor:pointer;transition:.15s}
.wm-seg button.on{background:#fff;color:#2563EB;box-shadow:0 2px 6px rgba(13,27,62,.07)}
/* لوحة التوقيع */
.wm-sig{position:relative;border:1.5px dashed #CBD5E1;background:#FCFDFE;border-radius:16px;overflow:hidden;margin-top:6px}
.wm-sig .base{position:absolute;right:22px;left:22px;bottom:22px;border-bottom:1px dashed #CBD5E1;pointer-events:none}
.wm-sig .clr{position:absolute;top:9px;left:9px;background:#fff;border:1px solid #E8EAEF;border-radius:999px;padding:4px 11px;font-size:.68rem;font-weight:700;color:#64748B;font-family:inherit;cursor:pointer;z-index:2}
.wm-ck{display:flex;align-items:flex-start;gap:9px;font-size:.76rem;color:#475569;line-height:1.6;margin-top:9px;cursor:pointer}
.wm-ck input{margin-top:2px;accent-color:#2563EB;flex-shrink:0;width:16px;height:16px}
/* نجاح */
.wm-ring{width:64px;height:64px;border-radius:50%;background:#E7F6EE;color:#10B981;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin:0 auto 13px;position:relative;animation:wmPulse 2.1s ease-in-out infinite}
@keyframes wmPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes wmHalo{0%{transform:scale(.95);opacity:.85}70%{transform:scale(1.45);opacity:0}100%{transform:scale(1.45);opacity:0}}
/* من يفضّل تقليل الحركة لا تتحرك عنده */
@media (prefers-reduced-motion: reduce){.wm-ring,.wm-ring:before{animation:none !important}}
.wm-ring:before{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid #D1FAE5;animation:wmHalo 2.1s ease-out infinite}
.wm-file{display:inline-flex;align-items:center;gap:8px;background:#F8FAFD;border:1px solid #EEF1F7;border-radius:999px;padding:7px 15px;font-size:.76rem;font-weight:700;color:#334155;margin-bottom:18px}
.wm-file i{color:#2563EB}
/* ═══ البند ٢٤ — صناديق «عقدك جاهز» في صفّ واحد بأعمدة متساوية ══════════
   نفس آلية صفّ «وقّع العقد أولًا» بالضبط: عمود لكل ابن بلا رقم مكتوب.
   وهي هنا **شرط** لا تحسين: «توقيع ذاتي حضوري» قد يختفي إن تعذّر التحقّق،
   فيبقى الصندوقان الباقيان متوازنَين بلا فجوة مكان الغائب. */
.wm-opts{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:11px;align-items:stretch;text-align:center}
.wm-opt{border:1.5px solid #E8EAEF;background:#fff;border-radius:20px;padding:16px;cursor:pointer;font-family:inherit;text-align:center;transition:.15s;position:relative}
.wm-opt:hover{border-color:#cfe0f7;box-shadow:0 10px 26px rgba(13,27,62,.08)}
.wm-opt.rec{border-color:#2563EB;background:#FAFCFF}
.wm-opt .oi{width:36px;height:36px;border-radius:12px;background:#eaf2fe;color:#2563EB;display:flex;align-items:center;justify-content:center;font-size:.9rem;margin-bottom:10px;margin-inline:auto}
.wm-opt.rec .oi{background:#2563EB;color:#fff}
.wm-opt h5{font-size:.85rem;font-weight:800;color:#0D1B3E;margin:0 0 4px}
/* سطران متوازنان بدل سطر طويل وآخر بكلمة واحدة */
.wm-opt p{font-size:.72rem;color:#64748B;margin:0;line-height:1.7;text-wrap:balance;overflow-wrap:break-word}
/* شارة «مقترح»: inset-inline-end لا left — منطقية فلا تنقلب في الإنجليزية.
   ⚠️ لا تصطدم بالتوسيط: الأيقونة متوسَّطة أفقيًّا (تشغل ~36px حول المنتصف)
   والشارة في زاوية النهاية (~46px عند الحافة)، وأضيق حالة قياسها هي ثلاثة
   أعمدة داخل نافذة 725px ⇒ محتوى العمود ~196px، فبين الاثنتين ~34px فراغًا.
   والعنوان يبدأ تحت الأيقونة (16+36+10 = 66px) والشارة تنتهي عند ~33px. */
.wm-rib{position:absolute;top:13px;inset-inline-end:13px;background:#EAF2FE;color:#2563EB;border-radius:999px;padding:3px 9px;font-size:.62rem;font-weight:800}
.wm-draft{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.75rem;color:#64748B;margin-top:15px;padding-top:13px;border-top:1px solid #F1F3F8}
.wm-draft i{color:#10B981}
.wm-draft a{color:#2563EB;font-weight:700;text-decoration:none}
/* صفوف الموقّعين + طرق التوقيع (نفس أصناف JS القديمة) */
/* ⚠️ 13 أغسطس 2026 — صفّ الطرف الأول: سطر واحد وبلون أغمق.
   كان الاسم في سطر والحالة في سطر تحته فيبدو الصف «حيًّا» قابلًا للتعديل،
   وهو في الحقيقة **مقفول** (وقّعت بالفعل). اللون الأغمق والنص الأهدأ
   يقولان ذلك بصريًا قبل قراءة كلمة «مكتمل». */
.wm-srow{display:flex;align-items:center;gap:10px;background:#EDF1F7;border:1px solid #DCE3ED;border-radius:16px;padding:10px 13px;margin-bottom:9px}
.wm-srow .n{width:26px;height:26px;border-radius:50%;background:#DCE4EF;color:#5A6B7B;display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:800;flex-shrink:0}
.wm-srow .t{flex:1;min-width:0;font-size:.78rem;display:flex;align-items:center;gap:7px;flex-wrap:wrap;line-height:1.5}
.wm-srow .t b{display:inline;font-weight:800;color:#334155}
.wm-srow .t .sep{color:#AEB9C9;font-size:.7rem}
.wm-srow .t span{color:#78859A;font-size:.71rem}
.wm-srow .dn{font-size:.66rem;font-weight:800;color:#047857;background:#E7F6EE;border-radius:999px;padding:4px 10px;white-space:nowrap}
.wm-sect{font-size:.78rem;font-weight:800;color:#0D1B3E;margin:17px 0 10px;display:flex;align-items:center;gap:8px}
.wm-sect:first-child{margin-top:0}
.wm-sect i{color:#64748B;font-size:.72rem}
.wtq-mth{border-radius:16px !important;padding:11px 13px !important;margin-bottom:8px !important}
/* نافذة الإرسال: عمودان حتى يظهر كل شيء بلا سكرول */
.sr-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.sr-col{min-width:0}
/* ⚠️ 13 أغسطس 2026 — الإقراران صارا سطرَي نصّ صغيرين بلا كبسولات.
   الكبسولتان (خلفية + إطار + حشو) كانتا تمنحان نصًّا قانونيًا ثانويًا وزنًا
   بصريًا يوازي حقول البيانات نفسها. */
.sr-cks{display:block;margin-top:12px}
.sr-cks label{display:flex;align-items:flex-start;gap:8px;cursor:pointer;font-size:.72rem;color:#64748B;background:none;border:0;border-radius:0;padding:3px 0;line-height:1.65}
.sr-cks label input{margin-top:3px;accent-color:#2563EB;flex-shrink:0}
.sr-cks label a{color:#2563EB}
@media(max-width:720px){.sr-grid,.sr-cks{grid-template-columns:1fr;gap:12px}}
.sign-type-btn{border-radius:16px !important;padding:12px 10px !important}
.sign-type-btn > div:first-child{width:32px !important;height:32px !important;border-radius:9px !important;margin:0 auto 6px !important}
.sign-type-btn > div:first-child i{font-size:.8rem !important}
.sign-type-btn > div:nth-child(2){font-size:.84rem !important}
.sign-type-btn > div:nth-child(3){font-size:.68rem !important}
/* شريط خطوات الويزارد الجانبي */
.wz-split{display:grid;grid-template-columns:224px 1fr;flex:1;min-height:0}
.wz-rail{background:#FAFBFD;border-inline-end:1px solid #F1F3F8;padding:16px 13px;overflow-y:auto}
.wz-main{display:flex;flex-direction:column;min-height:0;min-width:0}
.wz-rail .rt{font-size:.66rem;font-weight:800;color:#64748B;letter-spacing:.03em;margin-bottom:11px}
.wz-st{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:11px;font-size:.77rem;color:#64748B;font-weight:600;margin-bottom:2px;border:none;background:none;width:100%;text-align:right;font-family:inherit}
.wz-st .d{width:20px;height:20px;border-radius:50%;background:#E8EDF5;color:#64748B;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:800;flex-shrink:0}
.wz-st.done{color:#334155;cursor:pointer}
.wz-st.done:hover{background:#EEF2F8}
.wz-st.done .d{background:#D1FAE5;color:#059669}
.wz-st.cur{background:#EAF2FE;color:#2563EB;font-weight:800}
.wz-st.cur .d{background:#2563EB;color:#fff}
.wz-st span.tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wm .form-control{border:1.5px solid #E8EAEF !important;border-radius:14px !important;background:#F7F8FB !important;padding:11px 14px !important}
@media(max-width:760px){
  .wz-split{grid-template-columns:1fr}
  .wz-rail{display:none}
  .wm{border-radius:22px}
  .wm-g2{grid-template-columns:1fr}
  /* البند ٢٤ — الصفّ الأفقي يتراصّ عمودًا واحدًا هنا (760px): ثلاثة أعمدة
     لا تسع شاشة ضيّقة. ولا يكفي grid-template-columns وحدها بعد اليوم —
     الأعمدة صارت **ضمنية**، فلا بدّ من ردّ grid-auto-flow إلى row وإلغاء
     grid-auto-columns وإلّا بقيت البطاقات جنبًا إلى جنب. */
  .wm-opts,.wm-optrow,#owner-saved-cards,#owner-saved-cards.wm-optrow{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════
   بوب-اب التحذير — أُضيف 13 أغسطس 2026
   بديل صندوق «قاعدة هذه الدولة» الذي كان مفتوحًا دائمًا في نافذة الواتساب:
   القاعدة تُشرح فقط عند الحاجة إليها فعلًا (رقم مكتوب بشكل خاطئ).
   ═══════════════════════════════════════════════════════════════════════ */
/* نفس علاج البند 18 المطبَّق على .wtq-ovl: الغطاء يمرّر والصندوق يتوسّط
   بهوامش auto — نافذة الشحن (.wtq-idpay) أطول من هذه وتحمل زرّ دفع في
   قاعها، فسقوطه خارج الشاشة كان يعني تعذّر إتمام الشحن أصلًا. */
.wtq-wpop{position:fixed;inset:0;background:rgba(13,27,62,.55);z-index:10090;display:none;align-items:flex-start;justify-content:center;padding:18px;overflow-y:auto}
.wtq-wpop.open{display:flex}
.wtq-wpop .bx{background:#fff;border-radius:18px;width:100%;max-width:380px;padding:22px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.3);margin-block:auto}
.wtq-wpop .ic{width:46px;height:46px;border-radius:50%;background:#FEF3C7;color:#D97706;display:flex;align-items:center;justify-content:center;font-size:1.15rem;margin:0 auto 12px}
.wtq-wpop h4{font-size:.95rem;font-weight:800;color:#0D1B3E;margin:0 0 7px}
.wtq-wpop p{font-size:.8rem;color:#475569;line-height:1.8;margin:0 0 16px}
.wtq-wpop p b{color:#0D1B3E}

/* ═══════════════════════════════════════════════════════════════════════
   تأكيد الهوية: السعر والرصيد والشحن الفوري — أُضيف 13 أغسطس 2026
   الشحن يتم **داخل** نافذة الإرسال بلا مغادرتها، فلا يضيع ما مُلئ.
   ═══════════════════════════════════════════════════════════════════════ */
.wtq-idbox{background:#F7FAFF;border:1px solid #DBEAFE;border-radius:13px;padding:10px 12px;margin-top:10px;font-size:.74rem;color:#334155}
.wtq-idbox .r{display:flex;align-items:center;justify-content:space-between;gap:10px;line-height:1.9}
.wtq-idbox .r + .r{margin-top:2px}
.wtq-idbox b{color:#0D1B3E;font-weight:800}
.wtq-idbox .was{color:#94A3B8;text-decoration:line-through;font-weight:600;margin-inline-end:6px}
.wtq-idbox .low{color:#B45309;font-weight:800}
.wtq-idbox .ok{color:#047857;font-weight:800}
.wtq-topup{margin-top:9px;width:100%;border:none;background:#2563EB;color:#fff;border-radius:11px;padding:9px 14px;font-family:inherit;font-size:.76rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px}
.wtq-topup:hover{background:#1D4ED8}

/* ═══ البند ٢٨ — سطر الفاتورة المطويّ ════════════════════════════════════
   سطر واحد يجلس في مجرى النافذة بهدوء: بلا خلفية ولا إطار ولا حشو ولا زرّ
   بعرض النافذة. ملخّص «ما الذي سيُخصم» معلومة مؤكِّدة لا تنبيه، فأي صندوق
   حولها يعطيها وزن الحقول التي فوقها ويطيل شاشةً طويلة أصلًا.
   🔴 display:block لا flex عن قصد ومقيسًا: wtqBill() تكتب
   ‎box.style.display='block'‎ **مضمَّنًا**، والمضمَّن يتغلّب على الملف — فأي
   تخطيط flex هنا يموت صامتًا ومعه الـgap. فالمباعدة بهوامش على الأبناء،
   وهي تعمل في الحالتين. والمحتوى نصّ سطريّ أصلًا فالكتلة تكفيه. */
.wtq-billline{display:block;margin-top:10px;padding:0;border:0;background:none;
  font-size:.74rem;font-weight:600;color:#475569;line-height:1.9}
.wtq-billline b{color:#0D1B3E;font-weight:800}
.wtq-billline>i,.wtq-billline>svg{color:#94A3B8;font-size:.72rem;margin-inline-end:4px}
.wtq-billline .low{color:#B45309;font-weight:800}
.wtq-billline .ok{color:#047857;font-weight:800}
/* أي زرّ أو رابط شحن داخل السطر المطويّ يبقى كبسولة بمقاس محتواها — يتغلّب
   على width:100% في .wtq-topup بمحدِّد أعلى بلا !important. */
.wtq-billline button,.wtq-billline a.wtq-topup{display:inline-flex;align-items:center;gap:6px;width:auto;margin:0;margin-inline-start:8px;
  border:none;border-radius:999px;background:#2563EB;color:#fff;font-family:inherit;font-size:.72rem;font-weight:800;
  padding:6px 13px;cursor:pointer;vertical-align:middle;text-decoration:none}
.wtq-billline button:hover,.wtq-billline a.wtq-topup:hover{background:#1D4ED8}
/* الحالة الوحيدة التي تستحقّ صندوقًا: الرصيد لا يكفي ⇒ الإرسال متوقّف حتى
   يُشحن. هنا التنبيه حقيقي، فيصير كتلة تحذير كاملة تحمل زرّ الشحن بعرضها. */
.wtq-billline.short{background:#FFFBEB;border:1px solid #FDE68A;border-radius:12px;padding:10px 12px;color:#78350F}
.wtq-billline.short b{color:#7C2D12}
.wtq-billline.short>i,.wtq-billline.short>svg{color:#D97706}
.wtq-billline.short .low{color:#B45309}
.wtq-billline.short button,.wtq-billline.short a.wtq-topup{display:flex;justify-content:center;width:100%;margin:9px 0 0;
  border-radius:11px;font-size:.76rem;padding:9px 14px}

.wtq-idpay .bx{max-width:420px;text-align:right}
.wtq-idpay .qty{display:flex;align-items:center;gap:9px;margin:12px 0}
.wtq-idpay .qty input{flex:1;border:1.5px solid #E8EAEF;border-radius:12px;background:#F7F8FB;padding:10px 13px;font-family:inherit;font-size:.85rem;text-align:center}
.wtq-idpay .tot{background:#F7FAFF;border:1px solid #DBEAFE;border-radius:11px;padding:9px 12px;font-size:.76rem;color:#334155;display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.wtq-idpay .msg{font-size:.76rem;font-weight:700;margin-top:10px;min-height:18px;text-align:center}

:root{color-scheme:light}

/* WTQ-IOS-ZOOM — الهاتف: خطّ الحقول 16px يمنع تكبير سفاري التلقائي
   عند التركيز (سلوك iOS لأي حقل خطّه أصغر من 16px، ولا يتراجع). */
@media(max-width:768px){
  .wm-inp,.wtq-cap,.wtq-csearch,#customNameModal input,#customNameModal select,#customNameModal textarea,.modal-box-custom input,
  #wtqIdQty,.qty input{font-size:16px}
  /* خطّ خانة المحادثة مكتوب في سمة style داخلية ⇒ !important */
  #chat-input{font-size:16px !important}
}