مباشر. * - v2 (grid): كرت .wr-projects-grid-item، والوصف في .wr-project-description، * العنوان .wr-project-title، اسم المعلِن .wr-name. (هذا ما يعمل على الإنتاج.) * - المستقلون v2: الاسم .wr-author-name، السطر التعريفي .wr-tag-line. * الإصلاح الأول استهدف كلاسات v1 فقط فلم يطل كرت v2 → هنا نغطّي الاثنين معًا * + المشروع/الخدمة المفردة + كل صفحات البحث (مشاريع/مهام/مستقلين). * * الأسلوب (منقّح): سلكتورات **محدّدة لعناصر النصّ فقط** (أوصاف/عناوين/أسماء/ * مسمّى وظيفي) لا حاويات كاملة — حتى لا يطال كسرُ الكلمة الأسعارَ أو النجومَ * أو الأزرار. + min-width:0 لعناصر flex لتنكمش. + كتلة حماية صريحة تمنع كسر * الأسعار والنجوم والأرقام (word-break:normal + white-space:nowrap). * * ⚠️ درس: نسخة سابقة استعملت «شبكة وراثية» على حاويات القوائم كاملةً، فورّثت * word-break لكل شيء بما فيه السعر (تكسّر حرفًا حرفًا في خانة ضيّقة) ونجوم * Font Awesome الخمسة (\f005×5). أُزيلت الشبكة الواسعة لصالح الدقّة. * * break-word آمن: لا يكسر الكلمات الطبيعية (عربية/إنجليزية)، يكسر فقط ما لا * فاصل فيه. (إضافة طفل بحتة — لا تمسّ الأب، لا تكسر تصميمًا، لا خطأ كونسل.) * ===================================================================== */ /* (أ) حاويات الأوصاف/المحتوى التي يكتبها المستخدم (v1 + v2 + مفردة + خدمات إضافية) * سلكتورات محدّدة للنصوص فقط — لا حاويات كاملة، حتى لا يطال الأسعار/الأزرار. */ .wr-project-description, .wr-jobdescription, .wr-text-wrapper, .wr-additionalservices-title, .wr-additionalservices-title h6, .wr-additionalservices-title p, .wr-project-box p, .wr-project-content p, .wr-servicewrap p { overflow-wrap: break-word !important; max-width: 100%; } /* (ب) العناوين والأسماء والمسمّى الوظيفي (v1 + v2) */ .wr-project-title, .wr-project-title a, .wr-name, .wr-author-name, .wr-author-name a, .wr-tag-line, .wr-tag-line a, .wr-title-wrapper h5, .wr-title-wrapper h5 a, .wr-servicedetailtitle h1, .wr-servicedetailtitle h2, .wr-servicedetailtitle h3, .wr-servicedetailtitle h4 { overflow-wrap: break-word !important; max-width: 100%; min-width: 0; } /* ⚠️ أُزيلت .wr-verified-info strong/h5/h5 a من القاعدة أعلاه (يونيو 2026): الأب يجعل .wr-verified-info h5 بـ width:100%+display:flex، و min-width:0 مع word-break كان يُنهي عرضه إلى صفر فيتكسّر الاسم حرفاً/سطر (كتلة "صاحب عمل تجريبي" المبعثرة). تتكفّل الطبقة اللطيفة [19](B) (overflow-wrap:break-word بلا min-width:0) بكسر الأسماء الطويلة دون انهيار العرض. */ /* (ج) السماح لحاويات flex بالانكماش بدل التمدّد لعرض المحتوى (v1 + v2) (أُزيلت .wr-verified-info: min-width:0 عليها ساهم في انهيار عرض h5 الداخلي إلى صفر — تُترك بـ min-width:auto الافتراضي فتأخذ عرضها الطبيعي.) */ .wr-project_head, .wr-servicedetailtitle, .wr-project-header, .wr-project-header-content, .wr-projects-grid-item, .wr-author-info, .wr-title-wrapper, .wr-freelancer-info, .wr-additionalservices-title { min-width: 0; } /* (د) حماية — الأسعار والنجوم والأرقام لا تتكسّر أبدًا. * (تصحيح ضرر النسخة السابقة: word-break كان يكسر السعر حرفًا حرفًا * والنجوم الخمسة \f005×5 في خانة ضيّقة.) */ .wr-startingprice span, .wr-startingprice-title, .wr-additionalservice-price, .wr-additionalservice-price h5, .wr-additionalservice-price h6, .wr-featureRating__stars, .wr-featureRating__stars span, .wr-featureRating h6, .wr-featureRating h6 em, .wr-selected__showmore, .wr-selected__showmore a { word-break: normal !important; overflow-wrap: normal !important; white-space: nowrap; } /* (هـ) عمود سعر الخدمة الإضافية يحافظ على عرضه؛ الوصف يأخذ الباقي ويلتفّ */ .wr-additionalservice-price { flex-shrink: 0; } /* (و) المسمّى الوظيفي (tagline) في كرت البائع: ينزل سطرًا مستقلًّا تحت الاسم * بدل أن يلتصق جنبه. الأب يجعل .wr-author-info فلكس بـflex-wrap، والاسم * والمسمّى يقعان بنفس الصف فيتشوّه المسمّى الطويل. نطبّق نفس نمط الأب * للتقييم (.wr-blogviewdates width:100%) على المسمّى. مقصور على كرت البائع * (.wr-author-info .wr-tag-line) فلا يمسّ tagline كرت بحث المستقلين. */ .wr-title-wrapper .wr-author-info .wr-tag-line { width: 100%; margin-top: 3px; } /* ===================================================================== * نهاية qudurat-phase2-fixes.css * ===================================================================== */ /* ════════════════════════════════════════════════════════════════ إصلاح شامل لترقيم الصفحات (wr-pagination) يضمن ظهور الرقم والسهم في كل الحالات: عادي + تمرير الماوس (hover/focus) + الصفحة النشطة (current) ════════════════════════════════════════════════════════════════ */ /* (1) الحالة العادية — أرقام وأسهم داكنة واضحة على خلفية فاتحة */ .wr-pagination ul.page-numbers li a.page-numbers, .wr-pagination ul.page-numbers li span.page-numbers, .wr-pagination a.page-numbers, .wr-pagination .page-numbers { color: #333333 !important; -webkit-text-fill-color: #333333 !important; opacity: 1 !important; visibility: visible !important; text-indent: 0 !important; } /* أيقونة السهم (السابق/التالي) في الحالة العادية */ .wr-pagination a.page-numbers i, .wr-pagination .prev i, .wr-pagination .next i, .wr-pagination a.page-numbers svg, .wr-pagination .prev svg, .wr-pagination .next svg { color: #333333 !important; -webkit-text-fill-color: #333333 !important; fill: #333333 !important; opacity: 1 !important; visibility: visible !important; } /* (2) تمرير الماوس + التركيز — أبيض على سماوي (الرقم والسهم) */ .wr-pagination ul.page-numbers li a.page-numbers:hover, .wr-pagination ul.page-numbers li a.page-numbers:focus, .wr-pagination a.page-numbers:hover, .wr-pagination a.page-numbers:focus, .woocommerce nav.woocommerce-pagination ul li a:hover { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: #1699ca !important; background-color: #1699ca !important; border-color: #1699ca !important; opacity: 1 !important; } .wr-pagination a.page-numbers:hover i, .wr-pagination a.page-numbers:focus i, .wr-pagination a.page-numbers:hover svg, .wr-pagination a.page-numbers:focus svg { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; fill: #ffffff !important; } /* (3) الصفحة النشطة (current) — أبيض على سماوي دائماً */ .wr-pagination ul.page-numbers li span.page-numbers.current, .wr-pagination ul.page-numbers li .page-numbers.current, .wr-pagination .current, .woocommerce nav.woocommerce-pagination ul li span.current { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: #1699ca !important; background-color: #1699ca !important; border-color: #1699ca !important; opacity: 1 !important; text-indent: 0 !important; } .wr-pagination .current i, .wr-pagination .current svg { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; fill: #ffffff !important; } /* ════════════════════════════════════════════════════════════════ أزرار صفحة استلام الطلب (.wr-go-dbbtn) «الذهاب إلى تفاصيل الخدمة» + «الذهاب إلى لوحة التحكم» المشكلة: نص الزر كان بلون سماوي يطابق خلفية الزر فلا يُرى إلا عند تمرير الماوس. الحل: نص أبيض دائماً على خلفية سماوية ثابتة، مع تغميق طفيف عند التمرير للإحساس بالتفاعل. ════════════════════════════════════════════════════════════════ */ .wr-go-dbbtn a.button, .wr-go-dbbtn a.button.wr-btn-gotask, .woocommerce .wr-go-dbbtn a.button { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: #1699ca !important; background-color: #1699ca !important; border-color: #1699ca !important; opacity: 1 !important; } .wr-go-dbbtn a.button:hover, .wr-go-dbbtn a.button:focus, .wr-go-dbbtn a.button.wr-btn-gotask:hover, .wr-go-dbbtn a.button.wr-btn-gotask:focus, .woocommerce .wr-go-dbbtn a.button:hover, .woocommerce .wr-go-dbbtn a.button:focus { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: #127ea8 !important; background-color: #127ea8 !important; border-color: #127ea8 !important; opacity: 1 !important; } /* ════════════════════════════════════════════════════════════════ [14] تعديلات تصميم — يونيو 2026 ---------------------------------------------------------------- ثلاثة إصلاحات، كلها داخل القالب الابن، متوافقة RTL وكل أحجام الشاشات: (أ) نافذة "سحب الأموال": "الحد الأقصى" كان يتراكب مع نص الإدخال. (ب) زر "إكمال العقد": كان أعلى من الزر المجاور + أخضر يتحوّل سماوي عند التمرير. التوحيد حسب الهوية: سماوي (#1699CA) ثابت ← كحلي (#0A2540) عند التمرير، مع محاذاة الزرّين على نفس المستوى. (ج) سجل الدوام (الأجر بالساعة): نص "أرسل النشاط…" كان ملاصقاً للزر. ════════════════════════════════════════════════════════════════ */ /* (أ) نافذة سحب الأموال (.wr-limit): منع تراكب "الحد الأقصى" مع placeholder. النص كان position:absolute فوق الحقل، وعند كبر المبلغ يفيض على نص الإدخال. ننقله سطراً مستقلاً أسفل الحقل (حل صامد لأي قيمة مبلغ ولأي عرض شاشة). */ .wr-limit { position: relative; } .wr-limit > .form-control { padding-right: 20px !important; padding-left: 20px !important; } .wr-limit > em { position: static !important; display: block !important; transform: none !important; margin-top: 8px !important; text-align: start !important; line-height: 1.5 !important; } /* (ب) زر "إكمال العقد" (a.wr_rating_project): سماوي ← كحلي عند التمرير. مقصور على هذا الزر تحديداً (.wr_rating_project) فلا يمسّ أي زر أخضر آخر. */ .wr-completetask .wr-formbtnlist a.wr-greenbg.wr_rating_project, .wr-completetask .wr-formbtnlist a.wr_rating_project, .wr-formbtnlist a.wr-greenbg.wr_rating_project { background-color: #1699CA !important; background: #1699CA !important; border-color: #1699CA !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .wr-completetask .wr-formbtnlist a.wr-greenbg.wr_rating_project:hover, .wr-completetask .wr-formbtnlist a.wr-greenbg.wr_rating_project:focus, .wr-completetask .wr-formbtnlist a.wr_rating_project:hover, .wr-completetask .wr-formbtnlist a.wr_rating_project:focus, .wr-formbtnlist a.wr-greenbg.wr_rating_project:hover, .wr-formbtnlist a.wr-greenbg.wr_rating_project:focus { background-color: #0A2540 !important; background: #0A2540 !important; border-color: #0A2540 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* محاذاة زرّي الإكمال على نفس المستوى وبارتفاع متساوٍ. السبب الجذري للاختلاف: قاعدة الأب (.page-template-dashboard .wr-btn) تضع margin-top:20px/margin-bottom:10px على الزر الـ plain (الذي يحمل .wr-btn)، بينما الزر الأخضر (.wr-btn-solid-lg) لا يأخذها → فرق في المستوى. الحل: تصفير الهوامش الرأسية للزرّين + align-items:stretch ليتساويا في الارتفاع. */ .wr-completetask .wr-formbtnlist { display: flex !important; align-items: stretch !important; flex-wrap: wrap !important; gap: 12px !important; } .wr-completetask .wr-formbtnlist > li { margin: 0 !important; display: flex !important; } .wr-completetask .wr-formbtnlist > li > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; min-height: 50px !important; } /* على الجوال: الزرّان يملآن العرض ويتراصّان عمودياً متساويين. */ @media (max-width: 480px) { .wr-completetask .wr-formbtnlist > li { flex: 1 1 100%; } .wr-completetask .wr-formbtnlist > li > a { width: 100% !important; } } /* (ج) سجل الدوام (.wr-timeslot_save): فاصل واضح بين نص التلميح وزر الإرسال. gap لا يعتمد على الاتجاه (آمن RTL/LTR)، ونلغي الهامش الأصلي أحادي الجهة حتى لا تتضاعف المسافة. flex-wrap يلفّ الزر تحت النص على الشاشات الضيقة. */ .wr-timeslot_save { gap: 14px !important; flex-wrap: wrap !important; } .wr-timeslot_save > span + .wr-btn-solid, .wr-timeslot_save > span + .wr-btn-solid-sm, .wr-timeslot_save > span + .wr-btn-solid-sm-lefticon, .wr-timeslot_save > span + .wr-btn-solid-lg, .wr-timeslot_save > span + .wr-btn-solid-lg-lefticon, .wr-timeslot_save > span + .wr-btn-solid-lefticon { margin-left: 0 !important; margin-right: 0 !important; } /* ════════════════════════════════════════════════════════════════ [15] تعديلات تصميم — الدفعة الثانية (يونيو 2026) ---------------------------------------------------------------- ملاحظة مرجعية: السلوك الافتراضي للهوية أن أي .wr-btn يتحول من السماوي (#1699CA) إلى الكحلي (#0A2540) عند التمرير — عبر قاعدة عامة في qudurat-master.css. الإصلاحات أدناه استثناءات مقصودة لأزرار بعينها. ════════════════════════════════════════════════════════════════ */ /* (أ) زر "إنشاء نزاع/طلب استرداد" (#taskrefundrequest) في صفحة تفاصيل المهمة: يقع داخل صندوق .wr-raisedispute بخلفية سماوية فاتحة (theme_20_light) ويحمل .wr-btn، فالـ hover الكحلي العام يجعله يختفي. نُبقيه سماويًّا ثابتًا — لكن ⚠️ **مقصورًا على هذا الصندوق فقط** (.wr-raisedispute) (تصحيح يونيو 2026). أما نفس الـid في قائمة خيارات نشاط المشروع (.wr-contract-list) فيُترك بنمط الأب العادي (أبيض/نص داكن مثل شقيقه "إكمال العقد") كما طلب صاحب الموقع — النسخة السابقة كانت تصبغه سماويًّا في القائمة أيضًا عبر سلكتور الـid المجرّد. */ .wr-raisedispute #taskrefundrequest, .wr-raisedispute #taskrefundrequest:hover, .wr-raisedispute #taskrefundrequest:focus, .wr-raisedispute #taskrefundrequest:active, .wr-raisedispute .wr-btn:hover, .wr-raisedispute .wr-btn:focus { background-color: #1699CA !important; background: #1699CA !important; border-color: #1699CA !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* (ب) أزرار تبويبات النزاع/الاسترداد: الأخضر (السماح) والأحمر (الرفض) كانا يتحولان كحلياً عند التمرير لأنهما .wr-btn. نُثبّت لون كلٍّ منهما عند التمرير. (زر "الرد" الكحلي يُترك كما هو — لونه أصلاً = لون الـ hover العام.) نضمّن .wr-btn في السلكتور لرفع الأولوية فوق .wr-btn:hover العام. */ .wr-allowtabbtn.wr-btn:hover, .wr-allowtabbtn.wr-btn:focus, .wr-allowtabbtn:hover, .wr-allowtabbtn:focus, #wr-form-refund .wr-replytabbtn:hover, #wr-form-refund .wr-replytabbtn:focus { background-color: #00cc8d !important; background: #00cc8d !important; border-color: #00cc8d !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .wr-declinetabbtn.wr-btn:hover, .wr-declinetabbtn.wr-btn:focus, .wr-declinetabbtn:hover, .wr-declinetabbtn:focus, #wr-form-decline .wr-replytabbtn:hover, #wr-form-decline .wr-replytabbtn:focus { background-color: #ff7062 !important; background: #ff7062 !important; border-color: #ff7062 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* (ج) توسيط أزرار تبويبات النزاع الثلاثة على الجوال (كانت غير متناسقة). على الشاشات الصغيرة نوسّطها أفقياً ونتيح لفّها بمسافات منتظمة. */ @media (max-width: 767px) { .wr-refunddetailttabs .nav-tabs, .wr-refunddetailttabs ul.nav-tabs { justify-content: center !important; gap: 10px !important; margin: 0 !important; } .wr-refunddetailttabs .nav-tabs > li { margin: 0 !important; } } /* (د) حقل "حالة الطلب" (select2) في صندوق العد التنازلي: select2 يضبط عرض الحاوية inline على ~90px فيطفح نص الحالة ("جاري التنفيذ") فوق سهم القائمة. نجعل الحاوية تملأ عرض .wr-select بحدّ أدنى كافٍ، ونوازن padding النص. */ .wr-taskcountdown .wr-actionselect { align-items: center !important; gap: 8px !important; } .wr-taskcountdown .wr-actionselect .wr-select { flex: 1 1 auto !important; min-width: 0 !important; } .wr-taskcountdown .wr-actionselect .select2-container { width: 100% !important; min-width: 130px !important; } .wr-taskcountdown .wr-select .select2-container .select2-selection--single .select2-selection__rendered { padding-right: 15px !important; padding-left: 42px !important; text-overflow: ellipsis !important; overflow: hidden !important; white-space: nowrap !important; } /* ════════════════════════════════════════════════════════════════ [16] تعديلات تصميم — الدفعة الثالثة (يونيو 2026) ---------------------------------------------------------------- أربعة إصلاحات دقيقة، كلها داخل القالب الابن، RTL-safe وآمنة على باقي الشاشات والمكوّنات (سلكتورات مقصورة، لا تمسّ الأب): (أ) أزرار صفحة "تم استلام الطلب" غير المغلَّفة (فرع wallet_checkout في woo-hooks.php سطر 1029-1030): نصّها سماوي على خلفية سماوية فلا يُرى. نُبيّض النص ونثبّت الخلفية (نفس معالجة .wr-go-dbbtn). (ب) "نبذة عني" (#wr-freelancer_detail): عند الطيّ (showMore) يُقصّ النص في منتصف السطر فيبدو مبتوراً. نُضيف تلاشياً سفلياً عبر mask (مستقل عن لون الخلفية) يظهر فقط في حالة الطيّ. (ج) "عرض أقل/المزيد" في وسوم المهارات (.wr-tags_links): حرف العين في ::after كان يتشكّل متّصلاً بآخر حرف من النصّ الأصلي المخفي (لام "أقل") عبر حدود العنصر. نُدرج ZWNJ (U+200C) في بداية المحتوى لكسر هذا الوصل — دون لمس زرّ "نبذة عني". (د) خيارات الملف الشخصي على الجوال (≤420px): القالب الأب يكدّس التسمية والقيمة عمودياً (flex-direction:column) فيترك فراغاً أمام التسمية. نعيدها صفّاً واحداً (تسمية يمين/قيمة يسار) كما في الشاشات الأوسع، مع السماح للقيم الطويلة بالالتفاف بأمان. ════════════════════════════════════════════════════════════════ */ /* (أ) أزرار "تم استلام الطلب" غير المغلَّفة (أبناء مباشرون لـ .woocommerce-order). استخدام «>» يقصر القاعدة على الزرّين المباشرين فقط ولا يطال أزرار .wr-go-dbbtn المُعالَجة سلفاً في القسم [13] (فهي متداخلة لا مباشرة). تحديث: إضافة هامش متماثل (رأسي + أفقي) ليفصل بينهما بوضوح في كل الحالات — متجاورين على الديسكتوب (فجوة أفقية 16px) أو متراصّين على الجوال/الآيباد (فجوة رأسية 20px) — لأنهما inline-flex بلا غلاف فلا فاصل بينهما أصلاً. */ .woocommerce-order > a.button, .woocommerce .woocommerce-order > a.button { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: #1699ca !important; background-color: #1699ca !important; border-color: #1699ca !important; opacity: 1 !important; margin: 10px 8px !important; } .woocommerce-order > a.button:hover, .woocommerce-order > a.button:focus, .woocommerce .woocommerce-order > a.button:hover, .woocommerce .woocommerce-order > a.button:focus { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: #127ea8 !important; background-color: #127ea8 !important; border-color: #127ea8 !important; opacity: 1 !important; } /* (ب) تلاشٍ سفلي لـ "نبذة عني" أثناء الطيّ فقط. عند الطيّ يضع سكربت showMore الخاصية inline (max-height) على العنصر؛ وعند التوسّع يحذفها تماماً. لذا [style*="max-height"] يطابق حالة الطيّ حصراً → يظهر التلاشي مطويّاً ويختفي موسّعاً. mask مستقل عن لون الخلفية ولا يمسّ زرّ "عرض المزيد" (شقيق خارج العنصر). */ #wr-freelancer_detail[style*="max-height"] { -webkit-mask-image: linear-gradient(to bottom, #000 72%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(to bottom, #000 72%, rgba(0, 0, 0, 0) 100%); } /* (ج) كسر وصل حرف العين في "عرض أقل/المزيد" داخل وسوم المهارات (.wr-tags_links). إضافة .wr-tags_links ترفع الأولوية فوق قاعدة master وتقصر التعديل على وسوم المهارات دون زرّ النبذة. "\200C " = ZWNJ ثم النص (المسافة تُستهلك كفاصل للهروب السداسي ولا تُطبع). */ .wr-tags_links .wr-selected__showmore a[data-type="more"]::after, .wr-tags_links .wr-showmore-li a[data-type="more"]::after { content: "\200C عرض المزيد" !important; } .wr-tags_links .wr-selected__showmore a[data-type="less"]::after, .wr-tags_links .wr-showmore-li a[data-type="less"]::after { content: "\200C عرض أقل" !important; } /* (د) خيارات الملف الشخصي على الجوال (≤420px): صفّ واحد بدل التكديس العمودي. نُعيد قيم الشاشات الأوسع (row + space-between) ونحمي القيم الطويلة (اللغات) بالانكماش/الالتفاف بدل الفيض الأفقي. التسمية لا تنكمش. */ @media (max-width: 420px) { .wr-frelancer-v2 .wr-tags-list .wr-profile-options li { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; } .wr-frelancer-v2 .wr-tags-list .wr-profile-options li > em { flex-shrink: 0 !important; } .wr-frelancer-v2 .wr-tags-list .wr-profile-options li > span { min-width: 0 !important; text-align: end !important; overflow-wrap: break-word !important; } } /* ════════════════════════════════════════════════════════════════ [17] تعديلات تصميم — الدفعة الرابعة (يونيو 2026) ---------------------------------------------------------------- إصلاحان دقيقان داخل القالب الابن، RTL-safe ومقصورا النطاق: (أ) زرّا إكمال المهمة الأخضران (.wr_rating_task = "ارسال"، .wr_taskrating_task = "إكمال الآن"): القاعدة العامة .wr-btn:hover تحوّلهما للكحلي عند التمرير. نُثبّتهما أخضر (#63d594) في كل الحالات دون تحريك الزر (لون فقط، لا تخطيط). زرّ المشروع (.wr_rating_project) يبقى كما عُولج في [14](ب). (ب) حقل حالة الطلب (select2) في عدّاد التسليم: أيقونة ::before من خط workreap-icons تظهر مشوّهة خلف نص "جاري التنفيذ" (موضعها يمين النص في RTL). select2 له سهمه الخاص فالأيقونة زائدة. نُلغيها داخل العدّاد فقط (أيّاً كان العنصر الحامل لها). ════════════════════════════════════════════════════════════════ */ /* (أ) إبقاء زرّي إكمال المهمة الأخضرين أخضرَين في كل الحالات. الأولوية (0,5,1) تفوق .wr-btn:hover العامة؛ ومقصورة على .wr_rating_task و .wr_taskrating_task فلا تمسّ زرّ المشروع المُعالَج في [14](ب). */ .wr-completetask .wr-formbtnlist a.wr-greenbg.wr_rating_task, .wr-completetask .wr-formbtnlist a.wr-greenbg.wr_rating_task:hover, .wr-completetask .wr-formbtnlist a.wr-greenbg.wr_rating_task:focus, .wr-completetask .wr-formbtnlist a.wr-greenbg.wr_taskrating_task, .wr-completetask .wr-formbtnlist a.wr-greenbg.wr_taskrating_task:hover, .wr-completetask .wr-formbtnlist a.wr-greenbg.wr_taskrating_task:focus { background-color: #63d594 !important; background: #63d594 !important; border-color: #63d594 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* (ب) إزالة أيقونة ::before المشوّهة خلف نص الحالة في عدّاد التسليم. نُغطّي كل العناصر المحتمَل أن تحمل الأيقونة (.wr-select / select2-selection / --single / __rendered) ومقصورة على .wr-taskcountdown .wr-actionselect حصراً، فلا تتأثّر أي قائمة select2 أخرى تحتاج أيقونتها. سهم select2 يبقى. */ .wr-taskcountdown .wr-actionselect .wr-select::before, .wr-taskcountdown .wr-actionselect .select2-selection::before, .wr-taskcountdown .wr-actionselect .select2-selection--single::before, .wr-taskcountdown .wr-actionselect .select2-selection__rendered::before { content: none !important; display: none !important; } /* ════════════════════════════════════════════════════════════════ [18] تعديلات تصميم — الدفعة الخامسة (يونيو 2026) ---------------------------------------------------------------- إصلاحان داخل القالب الابن، لا يمسّان الأب: (أ) تداخل عناصر تفاصيل المهمة (.wr-extrascompleted) على الديسكتوب: الصفّ flex بـ nowrap + كل عنصر min-width:115px (لا ينكمش)، فإذا طالت "خطة السعر" (h6) فاضت على العمود المجاور. (ليست من تعديلاتنا السابقة — لا قاعدة لدينا تمسّ .wr-extras/.wr-tabitemextras؛ السبب طول القيمة.) الإصلاح مقصور على الديسكتوب (≥992px) — الجوال/الآيباد (≤991px) يلتفّ أصلاً عبر قاعدة الأب فلا نلمسه. نسمح للعناصر بالانكماش ولقيمها بالالتفاف داخل عمودها بدل الفيض. (ب) أيقونة "تحميل المرفقات" (a.wr_download_files): ترث ارتفاع الأفاتار (44px) بينما يضبط .wr-tabitemcrad العرض 26px فقط + object-fit:cover → تتمدّد وتُقصّ (26×44) فتبدو مشوّهة. نضبطها 26×26 بـ contain فتظهر الأيقونة سليمة (الوظيفة كما هي — رابط تحميل المرفقات). ════════════════════════════════════════════════════════════════ */ /* (أ) منع تداخل أعمدة تفاصيل المهمة على الديسكتوب/الآيباد (≥992px) — حلّ شامل. السبب الجذري: الصفّ flex بـ justify-content:space-between، وعند فيض المحتوى (قيمة "خطة السعر" الطويلة) + هامش 152px الذي يضيّق الصفّ لـ~524px → تتراكب الأعمدة. النسخة السابقة (min-width:0 فقط) لم تكفِ. الحلّ المتكامل: 1) flex-wrap:wrap → الضمان الأكيد: العناصر تلتفّ لسطر تالٍ ولا تتراكب أبداً. 2) إلغاء هامش 152px (الفراغ الأيسر غير مستغَلّ) → الصفّ يستغلّ العرض الكامل فتتّسع الأعمدة وغالباً تبقى سطراً واحداً نظيفاً. 3) min-width:0 + كسر الكلمة → القيمة الطويلة تلتفّ داخل عمودها لا على الجار. مقصور على .wr-extrascompleted فلا يمسّ أي .wr-extras آخر (النزاعات…). النطاق ≥576px: يشمل الديسكتوب + الآيباد/التابلت. السبب أن الأب في المدى 576–991px يضع width:33.33% مع min-width:auto، فالعمود يتمدّد لعرض المحتوى الطويل ويتراكب — و min-width:0 لدينا يمنع هذا التمدّد فيلتفّ النص داخل عموده. أما الهاتف (≤575px) فعمودُه min-width:100% (عنصر/صف) ويعمل، فنتركه. الأسماء القصيرة: تبقى موزّعة دون أي تخريب. */ @media (min-width: 576px) { .wr-extras.wr-extrascompleted { margin-left: 0 !important; margin-right: 0 !important; flex-wrap: wrap !important; align-items: flex-start !important; row-gap: 20px !important; } .wr-extrascompleted .wr-tabitemextras { min-width: 0 !important; } .wr-extrascompleted .wr-tabitemextrasinfo, .wr-extrascompleted .wr-taskinfo { min-width: 0 !important; } .wr-extrascompleted .wr-taskinfo h6, .wr-extrascompleted .wr-taskinfo h6 a, .wr-extrascompleted .wr-taskinfo span { white-space: normal !important; overflow-wrap: break-word !important; } } /* (ب) أيقونة تحميل المرفقات: إلغاء التمدّد/القصّ (object-fit:cover + 26×44). */ .wr-tabitemextras .wr-tabitemcrad figure img, .wr-tabitemextras a.wr_download_files img { width: 26px !important; height: 26px !important; object-fit: contain !important; border-radius: 0 !important; } /* ════════════════════════════════════════════════════════════════ [19] تحصين التجاوب الشامل ضد كسر التصميم بمحتوى المستخدم (يونيو 2026) ---------------------------------------------------------------- الهدف: جعل القالب صامداً أمام أي نصّ يكتبه المستخدم (اسم/عنوان/وصف/ رسالة/تعليق/اسم خدمة أو مشروع أو عرض…) مهما طال أو خلا من المسافات (مثل «99999999…» أو «تتتتتت…» أو رابط طويل)، على كل الأجهزة — دون أي مساس بالأسعار أو الأرقام أو النجوم أو الأيقونات أو الأزرار أو الشارات. ركيزة التجاوب الأساسية (وسم viewport) موجودة سلفاً في الأب، وهذه الطبقة تكمّلها كطبقة «أمان محتوى» تمنع الفيض الأفقي وانهيار الصفوف. البنية — 4 طبقات + وسائط، مبنية على درس القسم [13]: (A) وسائط لا تتجاوز حاويتها. (B) طبقة لطيفة عامة (overflow-wrap:break-word بلا !important) — تكسر الكلمة الفائضة فقط، لا تُصغّر عناصر flex ولا تمسّ الأسعار/الأيقونات، ولا تُلغي قصّ النصّ بالـ ellipsis (لأن الكسر لا يحدث مع white-space:nowrap). (C) محتوى المستخدم الحرّ: كسر أقوى (word-break) على عناصر النصّ المحدّدة + min-width:0 (بلا !important، أولوية منخفضة) على حاوياتها flex لتنكمش بدل التمدّد. لا نلمس white-space فلا نكسر أي قصّ ellipsis مقصود. (D) حماية صريحة (!important) للأسعار/الأرقام/النجوم/الأيقونات/الشارات/ العدّاد — تأتي أخيرة فتتفوّق على (B). ⚠️ لا «شبكة وراثية» عدوانية على الحاويات (درس [13])؛ الكسر العدواني على عناصر النصّ فقط. كل القواعد إضافية بحتة وقابلة للتراجع. ════════════════════════════════════════════════════════════════ */ /* (A) الوسائط داخل مناطق المحتوى لا تتجاوز عرض حاويتها (يمنع تمدّد أفقي). ⚠️ نستعمل :where() بأولوية صفرية عمداً (يونيو 2026): نسخة سابقة بـ!important (ثم بأولوية عادية متعادلة) كانت تتغلّب على أحجام الأب المقصودة فتتضخّم الصور (اللوكو .wr-submitreview figure img{max-width:150px}، الأفاتار .wr-verified-title img{max-width:70px}، السبينر…). بـ:where() تصبح أولويتنا (0,0,1) فتخسر أمام أي قاعدة أب تحدّد حجم الصورة (تبقى بحجمها الصحيح)، وتفوز فقط على صور المحتوى التي لا حدَّ لها أصلاً (الهدف: منع الفيض الأفقي). */ :where(.wr-main, .woocommerce, .entry-content, .wr-description-area, .wr-noti_wrap, .wr-stickynoti) :is(img, svg, video, iframe, embed, object) { max-width: 100%; } .wr-main table, .woocommerce table, .entry-content table { max-width: 100%; } /* (B) الطبقة اللطيفة العامة — التفاف الكلمات الفائضة في عناصر النصّ داخل مناطق التطبيق. بلا !important (تعاونية): لا تتغلّب على قصّ القالب المقصود، ولا تكسر الأسعار/الأيقونات (overflow-wrap:break-word لا يكسر إلا ما يفيض فعلاً ولا يغيّر min-content). */ .wr-main :is(p, h1, h2, h3, h4, h5, h6, li, dd, dt, td, th, address, blockquote, figcaption, label, span, a, strong, em, small, b), .woocommerce :is(p, h1, h2, h3, h4, h5, h6, li, td, address, strong, em), .entry-content :is(p, h1, h2, h3, h4, h5, h6, li, blockquote, figcaption) { overflow-wrap: break-word; } /* (C) محتوى المستخدم الحرّ — كسر أقوى يمنع تمدّد الصفوف بسلسلة طويلة بلا مسافات. قائمة مقصورة على عناصر النصّ التي يكتبها المستخدم عبر المكوّنات المختلفة (إشعارات/مشاريع/خدمات/عروض مخصّصة/عروض مستقلين/نزاعات/تقييمات/فواتير/سلة). لا نلمس white-space — فإن كان العنصر مقصوصاً بـ ellipsis يبقى كذلك. */ .wr-postproject-title, .wr-postproject-title a, .wr-request-user_content, .wr-request-user_content *, .wr-sectiontitle__list--title, .wr-taskinfo h6, .wr-taskinfo h6 a, .wr-taskinfo span, .wr-notification-info p, .wr-notification-info em, .wr-noti_wrap h5, .wr-feedback-slider-description, .wr-feedback-slider-content p, .wr-articletitle, .wr-articletitle h4, .wr-articlediscription, .wr-articlediscription p, .wr-disputedisc, .wr-disputedisc p, .wr-order-detail-title, .wr-ordertitle, .wr-cartservice-title, .wr-cart-title, .wr-tabletitle, .wr-singleservice-tile .wr-project-title, .wr-blogtitle, .wr-blogtitle a { overflow-wrap: break-word !important; max-width: 100%; } /* ⚠️ تليين (يونيو 2026): كان anywhere + word-break:break-word يُصغّران min-content إلى ~صفر، فتنهار أي حاوية «تتقلّص للمحتوى» (نافذة jconfirm، خلية table-cell، عنصر flex بلا عرض) إلى كلمة/سطر — كما حدث للإشعار داخل النافذة المنبثقة. overflow-wrap:break-word وحده يكسر السلسلة الطويلة في الحاويات محدّدة العرض (الكروت/القوائم) دون تصغير min-content، فلا انهيار في الحاويات المتقلّصة. */ /* (C2) حاويات flex التي تضمّ نصّ المستخدم تنكمش بدل التمدّد. بلا !important وبأولوية منخفضة (كلاس واحد) → أي قاعدة أب أكثر تحديداً (مثل عرض الهاتف min-width:100%) تبقى هي الفائزة فلا نكسر تخطيطاً قائماً. */ .wr-notification, .wr-notification-info, .wr-taskinfo, .wr-tabitemextrasinfo, .wr-request-user_content, .wr-articleinfo, .wr-articletitle, .wr-disputextrasinfo, .wr-disputrightinfo, .wr-cartservices-info, .wr-cart-info, .wr-blog-content { min-width: 0; } /* (D) حماية صريحة — قيم لا تتكسّر أبداً (أسعار/أرقام/نجوم/أيقونات/شارات/عدّاد). مقصورة على عناصر «القيمة» تحديداً (لا حاويات نصّ)، فلا تمنع التفاف نصّ. */ .wr-startingprice, .wr-startingprice span, .wr-startingprice-title, .wr-additionalservice-price, .wr-additionalservice-price h5, .wr-additionalservice-price h6, .wr-budget, .wr-amount, .wr-totalamount, .wr-price-value, .wr-featureRating__stars, .wr-featureRating__stars span, .wr-rateno, .wr-ratting-stars, .wr-ratting-stars i, .wr-countdownno, .wr-countdownno li, .wr-countdownno span, .wr-noti-counter, .wr-counter, i[class^="wr-icon"], i[class*=" wr-icon"], i[class^="fa-"], i[class*=" fa-"] { word-break: normal !important; overflow-wrap: normal !important; } .wr-startingprice span, .wr-startingprice-title, .wr-featureRating__stars, .wr-featureRating__stars span, .wr-countdownno span, .wr-noti-counter { white-space: nowrap; } /* ════════════════════════════════════════════════════════════════ [20] أمان الجداول وكتل الكود على الجوال (يونيو 2026 — تدقيق ساكن أعمق) ---------------------------------------------------------------- نتيجة تدقيق القالب بالكامل: التجاوب مبنيّ بعناية (نقاط توقف 320→1921، وجداول لوحة التحكم تتحوّل تلقائياً إلى «بطاقات» على ≤767px عبر نمط content:attr(data-label) + padding-left:200px، وكل قوالب الجداول تضع data-label فعلاً). لذا لا فجوة بنيوية كبيرة — تبقى ثلاثة احتمالات واقعية نعالجها دفاعياً، كلها مقصورة على ≤767px ومناطق المحتوى فقط: (A) خليّة
/ الطويلة داخل المحتوى الحرّ: تمرير أفقي داخلي بدل
تمدّد الصفحة.
كل القواعد إضافية وقابلة للتراجع، RTL-آمنة (بلا اعتماد على اتجاه)، ولا
تعمل إلا على ≤991px. ملاحظة دقيقة: الأب يحوّل .wr-table إلى «بطاقات»
داخل @media (max-width:991px) (style.css:38468) لا 767 — لذا نطابق 991px
هنا حتى لا تظهر فجوة الـ200px للخلايا بلا data-label في مدى 768–991. */
@media (max-width: 991px) {
/* (A) خلايا بلا تسمية: إلغاء حجز الـ200px وإخفاء التسمية الفارغة فقط. */
.wr-table td:not([data-label]),
.wr-table td[data-label=""],
.wr-timecard-table td:not([data-label]),
.wr-timecard-table td[data-label=""] {
padding-left: 14px !important;
padding-right: 14px !important;
}
.wr-table td:not([data-label])::before,
.wr-table td[data-label=""]::before,
.wr-timecard-table td:not([data-label])::before,
.wr-timecard-table td[data-label=""]::before {
display: none !important;
content: "" !important;
}
/* (B) جداول حرّة داخل أوصاف المستخدم/المقالات → تمرير أفقي بدل كسر الصفحة.
مستثنى: جداول القالب وجداول ووكومرس (لكلٍّ نمطه المتجاوب الخاص). */
.wr-request-user_content table:not(.wr-table):not(.wr-timecard-table):not(.shop_table):not(.shop_table_responsive):not(.variations),
.wr-description-area table:not(.wr-table):not(.wr-timecard-table):not(.shop_table):not(.shop_table_responsive):not(.variations),
.wr-articlediscription table:not(.wr-table):not(.wr-timecard-table):not(.shop_table):not(.shop_table_responsive):not(.variations),
.entry-content table:not(.wr-table):not(.wr-timecard-table):not(.shop_table):not(.shop_table_responsive):not(.variations) {
display: block;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* (C) كتل الكود الطويلة داخل المحتوى الحرّ → تمرير أفقي داخلي. */
.wr-request-user_content pre, .wr-description-area pre,
.wr-articlediscription pre, .entry-content pre {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.wr-request-user_content code, .wr-description-area code,
.wr-articlediscription code, .entry-content code {
overflow-wrap: break-word;
}
}
/* ════════════════════════════════════════════════════════════════
[21] إصلاحات تصميم — الدفعة السابعة (يونيو 2026)
----------------------------------------------------------------
(أ) الإشعار داخل نافذة jconfirm: الصندوق (.jconfirm-cell = table-cell)
يتقلّص إلى min-content. بعد تليين الكسر ([19]C) لم يعد ينهار لكلمة/سطر،
ونفرض هنا عرضاً مقروءاً للإشعار داخل أي نافذة jconfirm فقط (عبر :has)
فلا نمسّ بقية النوافذ. min(340px,82vw) آمن حتى على أضيق الهواتف.
(ب) زرّ "عرض" في كرت المشروع (.wr-projects-grid-footer): كان نصّه الطويل
يلتفّ لسطرين («متبعثر») أو يهبط أسفل الاسم. نُبقيه سطراً واحداً دائماً
(white-space:nowrap) فلا يتبعثر، ونجعل الاسم يُقصّ بـ ellipsis عند الضيق
فيجلس الزرّ بجانب الاسم. نُبقي flex-wrap كأمان على الكروت البالغة الضيق
(يهبط الزرّ كحبّة نظيفة بدل أي فيض أفقي). مناسب لمئات القوائم. */
/* (أ) كرت الإشعار داخل نافذة jconfirm — عرض متجاوب يلائم كل الشاشات.
⚠️ تصحيح (يونيو 2026): النسخة السابقة فرضت min-width:340px على .jconfirm-content،
لكنّ jconfirm يحدّد عرض الصندوق نفسه أضيق (~310px على md عبر أعمدته)، و
.jconfirm-content-pane لديه overflow-x:hidden → المحتوى الأعرض من الصندوق كان
يُقصّ أفقيًّا فيختفي جزء من النص. الحل: نمنح **الصندوق** عرضًا متجاوبًا لا
يتجاوز الشاشة أبدًا (min(360px, 100vw-32)) ونترك المحتوى يملأه ويلتفّ بلا
فرض عرض يتخطّى الصندوق. آمن على كل المقاسات (حتى أضيق الهواتف). */
.jconfirm-box:has(.wr-notification) {
width: min(360px, calc(100vw - 32px)) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.jconfirm-box .jconfirm-content:has(.wr-notification),
.jconfirm-content:has(.wr-notification) {
min-width: 0;
}
.jconfirm-content .wr-notification {
width: 100%;
}
/* (ب) زرّ الكرت بجانب الاسم بسطر واحد، بانكماش تفاضلي آمن:
- الصفّ nowrap → الزرّ يبقى بجانب الاسم لا يهبط ولا يتبعثر.
- الاسم ينكمش أولاً ويُقصّ بـ ellipsis (flex-shrink كبير) فيُفسح للزرّ.
- الزرّ يبقى كاملاً (flex-shrink:1 صغير) ولا ينكمش إلا كملاذ أخير على كرت
بالغ الضيق (عندها يُقصّ نصّه بـ ellipsis) — فلا فيض أفقي إطلاقاً. */
.wr-projects-grid-item .wr-projects-grid-footer {
flex-wrap: nowrap !important;
}
.wr-projects-grid-item .wr-projects-grid-footer .wr-author-info {
flex: 1 100 auto;
min-width: 0;
}
.wr-projects-grid-item .wr-projects-grid-footer .wr-author-info .wr-name {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wr-projects-grid-item .wr-projects-grid-footer .wr-secondary-btn {
flex: 0 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 16px !important;
padding-right: 16px !important;
}
/* ════════════════════════════════════════════════════════════════
[22] إصلاحات تصميم — الدفعة الثامنة (يونيو 2026)
----------------------------------------------------------------
أربعة إصلاحات داخل القالب الابن، RTL-آمنة ومقصورة النطاق، لا تمسّ الأب:
(أ) لوحة حالة المشروع (نشاط المشروع) على الجوال/التابلت (≤991px):
قاعدة الأب تجعل قائمة الخيارات (⋮) position:absolute في زاوية الكرت
(_responsive.scss:2115,2827) فتطفو فوق صورة الطرف الآخر والاسم →
يبدو النصّ متراكبًا على الصورة. وقائمتها المنسدلة (.wr-contract-list)
لها min-width:349px/270px مثبَّتة عند حافة، فتفيض خارج الشاشة الضيّقة
ويقصّها overflow:hidden على .wr-main → زرّ النزاع/الاسترداد لا يظهر.
الحل: نعيد (⋮) إلى التدفّق الطبيعي (static — تمامًا كما يظهر على
الديسكتوب حيث الزرّ relative) فلا يطفو ولا يتراكب، ونثبّت القائمة
داخل عرض الكرت كاملًا فتظهر بكل خياراتها. (زرّ النزاع #taskrefundrequest
يبقى سماويًّا أصلًا عبر القسم [15]أ — كان مخفيًّا فقط لا مفقود اللون.)
(ب) فلاتر البحث (المهارات/الوسوم/اللغات): عند التفاف اسم مهارة لسطرين
كان مربّع الاختيار يُتوسَّط رأسيًّا (align-items:center —
_freelancer-list.scss:847) فيهبط عن مستوى مربّع جاره ذي السطر الواحد.
نحاذي المربّعات لأعلى (flex-start) فتستوي كلها على مستوى واحد مهما طال
الاسم. آمن على كل العروض (السطر الواحد يبدو كما هو).
(ج) عنوان "فواتير سحب الأرباح": كان ملاصقًا لجدول الفواتير أعلاه. نضيف
هامشًا علويًّا يفصله (مقصور على كلاس الابن .qdr-withdraw-invoices-heading).
(د) كرت الإشعار اللحظي داخل نافذة jconfirm/الإشعار الثابت: حاوية المعلومات
flex+wrap (_notifications.scss:208) لكن .wr-viewtask وحده width:100%،
فكانت الفقرة (p) وصفّ الحالة (.wr-noti-status) يتقاسمان سطرًا واحدًا →
تُضغَط الفقرة فتبدو مشوّهة ولا يظهر كل النص (ديسكتوب + آيباد). نُجبر كلًّا
منهما على عرض كامل فينتظمان رأسيًّا (الفقرة، فالحالة، فزرّ العرض).
════════════════════════════════════════════════════════════════ */
/* (أ) لوحة حالة المشروع على الجوال/التابلت (≤991px) */
@media (max-width: 991px) {
/* (⋮) يعود للتدفّق الطبيعي (كما في الديسكتوب) فلا يطفو فوق الصورة/الاسم */
.wr-projectsstatus_budget .wr-projectsstatus_option {
position: static !important;
top: auto !important;
right: auto !important;
left: auto !important;
margin: 0 !important;
}
/* margin:0 أعلاه أزال فاصل الأب (30px) بين السعر و(⋮) فتلاصقا —
space-between يعيد (⋮) للطرف المقابل (محاذياً موضعه في الديسكتوب)
والسعر يبقى على حافة البداية متناسقاً مع الصورة/الاسم فوقه،
وgap يضمن فاصلاً أدنى على الشاشات الضيّقة جداً */
.wr-projectsstatus_budget {
justify-content: space-between;
gap: 12px;
}
/* القائمة المنسدلة تُثبَّت داخل عرض الكرت فتظهر كاملة (زرّ النزاع/الاسترداد مرئي) */
.wr-projectsstatus_head .wr-contract-list {
top: auto !important;
right: 12px !important;
left: 12px !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
}
}
/* (ب) محاذاة مربّعات اختيار فلاتر البحث لأعلى السطر الأول (تستوي مع الأسماء ذات السطرين) */
.wr-advancefilter .wr-form-checkbox {
align-items: flex-start;
}
/* (ج) فصل عنوان "فواتير سحب الأرباح" عن جدول الفواتير أعلاه */
.qdr-withdraw-invoices-heading {
margin-top: 40px;
}
/* (د) كرت الإشعار اللحظي (jconfirm/sticky): تكديس عناصر المعلومات رأسيًّا
(الفقرة، فصفّ الحالة، فزرّ العرض) بدل تقاسمها سطر flex واحد يضغط الفقرة.
flex-direction:column أبسط وأمتن من فرض عرض كل طفل، وتنكمش بأمان في الصناديق
الضيّقة (تصحيح يونيو 2026 — استبدل فرض flex:0 0 100% على كل طفل). + سقف عرض
متجاوب للإشعار الثابت كي لا يتجاوز الشاشات الصغيرة. */
.jconfirm-content .wr-notification-info,
.wr-stickynoti .wr-notification-info {
flex-direction: column;
align-items: stretch;
}
.wr-stickynoti {
max-width: min(350px, calc(100vw - 32px));
}
/* ════════════════════════════════════════════════════════════════
[23] أمان الشاشات فائقة الضيق ≤360px (هدف 320px) — يونيو 2026
----------------------------------------------------------------
لماذا هذا القسم؟ تدقيق ثابت لكل ملفات تجاوب الأب أظهر أن أصغر نقطة
توقّف فيها هي 360px (css/responsive.css) و420px (dbresponsive /
responsive-style)، وأن ملفّي الابن (master 480 / phase2 420) يقفان
عند 420px. لا توجد أي قاعدة موجّهة لمدى 320–360px رغم أنه عرض اختبار
مطلوب (iPhone SE الأول، الواجهة الأمامية لـ Galaxy Fold…).
عمليًّا الصفحة تَرِث معالجة الـ360 عند 320 (استعلامات max-width تنزل
لكل ما دونها)، والطبقات اللاإتجاهية [13]/[19]/[20] + سقوف العرض
النسبية min(…,100vw-32px) في [21]/[22] تحمي الأسماء/النصوص/الإشعارات
عند أي عرض. لذا هذا القسم **دفاعي بحت** يسدّ آخر فجوات الفيض الأفقي
في الـ40px الإضافية، بلا أي إعادة تصميم.
مبادئ صارمة (حفاظًا على التصميم 100%):
• كل القواعد داخل @media (max-width:360px) فقط → لا تمسّ 375/414/768/
1024/1440/1920 إطلاقًا.
• لا قصّ للجسم (overflow:hidden على body) — احترامًا لاختيار القالب
الكسرَ على مستوى المحتوى لا حجبه.
• لا سقف صور بـ!important — [19](A) يتكفّل بها عبر :where() حتى لا
نُصغّر اللوكو/الأفاتار (درس موثّق في [19] و«مزالق إصلاح الفيض»).
• كل سطر مبنيّ على قيمة فعلية رُصدت في الأب، لا تخمين.
════════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
/* (أ) قائمة select2 وحاويتها لا تتجاوز عرض الشاشة. select2 يُلحق قائمته
بـ ويحسب عرضها من الحقل؛ على شاشة 320px قد تدفع الصفحة أفقيًّا
إن جلس الحقل في عمود أوسع. سقف نسبيّ آمن (304px عند 320) أكبر من
min-width:200px الذي يفرضه بلوك RTL على القوائم (لا تعارض). */
.select2-container,
.select2-dropdown {
max-width: calc(100vw - 16px) !important;
}
/* (ب) أشرطة الفلترة/البحث (عناصر flex) تنكمش بدل دفع الصفحة. min-width:0
بأولوية منخفضة (بلا !important) — أي قاعدة أب أكثر تحديدًا تبقى الفائزة. */
.wr-searchbar .form-group-wrap,
.wr-filterselect,
.wr-advancecheck,
.wr-advancefilter {
min-width: 0;
}
/* (ج) تحييد min-width الثابت (500px) على fieldset بانر البحث القديم
(.wt-formbannervtwo — مخطّط الهيدر v4/v5). قيمة فعلية في الأب
(responsive.css:486) تتجاوز عرض 320 بـ180px فتكسر الصفحة لو استُخدم
هذا المخطّط. القاعدة آمنة تمامًا إن لم يكن المخطّط مُفعَّلًا (لا عنصر
يطابقها). RTL-آمنة (لا اعتماد على اتجاه). */
.wt-search-have.show-sform .wt-formbannervtwo fieldset .form-group {
min-width: 0 !important;
max-width: 100% !important;
}
}
/* ════════════════════════════════════════════════════════════════
[24] إصلاح عاجل: رسالة "لا توجد نتائج" المبعثرة (.wr-submitreview h4)
----------------------------------------------------------------
العَرَض: في كل قائمة فارغة (الخدمات/المشاريع/…) تظهر ترويسة الرسالة
ككتلة حروف متراكبة فوق بعضها، وعقدة النصّ تُقاس 0×0 في DevTools.
السبب الجذري (ليس من القسم [23] ولا من تعديلات اليوم — [23] محصور
بـ≤360px ولا يمسّ هذا العنصر): حيلة الترجمة القديمة في
qudurat-master.css:122 تُخفي نصّ h4 الأصلي بـfont-size:0 وتعرض
الرسالة العربية عبر ::after. لكنّ .wr-submitreview حاوية flex
(من إضافة workreap — لا قاعدة لها في الأب)، وبما أن محتوى h4 بحجم 0
فإن عنصر الـflex ينكمش (align-items:center) إلى عرض ~0، فيُحشَر
محتوى ::after (display:block) في صندوق صفري العرض وتتراكب حروفه.
الحل (مقصور على رسالة "لا توجد نتائج"، يُحمَّل بعد master فيتغلّب عليه):
نُعيد للـ h4 عرضه الكامل داخل الحاوية فيأخذ ::after مساحته ويُرسَم
سطراً واحداً طبيعياً. لا نلغي حيلة الترجمة (تبقى احتياطاً)، فقط نمنع
انهيار العرض. RTL-آمن، لا يمسّ الأب، قابل للتراجع. */
.wr-submitreview h4 {
width: 100% !important;
align-self: stretch !important;
text-align: center !important;
font-size: 0 !important; /* يبقى الأصل مخفيًّا كما في master */
}
.wr-submitreview h4::after {
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
/* ════════════════════════════════════════════════════════════════
[25] إكمال إصلاح رسالة "لا توجد نتائج" — line-height المنهار (يونيو 2026)
----------------------------------------------------------------
العَرَض المتبقّي بعد [24]: رسالة ::after ("عذراً! لا توجد نتائج مطابقة")
تظهر بأسطر متراكبة فوق بعضها (كلمات «لا توجد… مطابقة» مكدّسة) على كل
الأحجام — أوضح ما يكون على الجوال حيث يلتفّ النصّ لسطرين/ثلاثة.
السبب الجذري (قياس حيّ عبر getComputedStyle): الـ h4 له
line-height بقيمة لاوحدية (unitless) موروثة، ومع font-size:0 (حيلة
إخفاء النصّ الأصلي) يحسبها المتصفّح = 0 × المضاعِف = 0px. وبما أن
line-height يُورَّث كقيمة محسوبة، يَرِث الـ::after السطرَ 0px فتنطبق
أسطره فوق بعضها (ارتفاع صندوق السطر = صفر) → تراكب الحروف/الكلمات.
[24] أصلح العرض (width) لكنه لم يلمس line-height.
الإصلاح: نُبقي line-height:0 على الـh4 (يضمن بقاء النصّ الأصلي المخفيّ
بلا ارتفاع) ونمنح الـ::after سطراً حقيقياً فتنتظم الأسطر طبيعياً.
مكمّل لـ[24]، RTL-آمن، لا يمسّ الأب، قابل للتراجع. */
.wr-submitreview h4 {
line-height: 0 !important;
}
.wr-submitreview h4::after {
line-height: 1.5 !important;
}
/* ════════════════════════════════════════════════════════════════
[26] فيض حقول الفلترة (select2) في لوحة التحكم على الشاشات الضيّقة
(يونيو 2026 — رُصد بصريًّا + قياسًا عبر Playwright/Chrome الحيّ)
----------------------------------------------------------------
حقلا فلترة في لوحة التحكم لهما عرض شبه ثابت لا ينكمش، فيفيضان خارج
عمودهما على الشاشات الضيّقة ويُقصّان (الأب يحجبهما بـoverflow فلا يظهر
فيض الصفحة لكن جزءًا من الحقل يختفي خلف حافة الشاشة):
(أ) فلتر سجل الدوام (.wr-timecards .wr-calendar): عرضه 200px ثابت داخل
صفّ .wr-actionselect مع شقيق (نوع الطلب/التاريخ) فيُدفَع خارج حدّ
الكرت يسارًا — رُصد حيًّا: 85px@320، و26px@768، و81px@1024/1180،
و23px@1366 (يسوء في 992–1366 لأن الشريط الجانبي للوحة يضيّق المحتوى)،
فيُقصّ صندوق التاريخ عند حافة الشاشة @1024. ⚠️ تصحيح يونيو 2026:
النسخة الأولى حصرت الإصلاح بـ≤767px فبقي الفيض ظاهرًا على الآيباد/
اللابتوب. الآن الإصلاح **لا-مشروط بالعرض**: نسمح لصفّ العنوان وصفّ
الفلاتر بالالتفاف ولعناصرهما بالانكماش، فلا يتجاوز الفلتر حدود الكرت
عند أيّ عرض (لا يلتفّ إلا عند الحاجة فالشاشات الواسعة تبقى كما هي).
وعلى الهاتف (≤767) يأخذ الفلتر عرضًا كاملًا لمظهر أنظف.
(ب) فلتر "الفرز حسب" (.wr-dhb-mainheading .wr-actionselect2): القائمة
(min-width:190px) + التسمية (104px) تتجاوزان عرض 296px عند 320px
فتُقصّ التسمية 36px. نسمح للقائمة بالانكماش/الالتفاف فتتّسع التسمية.
كلاهما إضافة طفل بحتة مقصورة على .wr-timecards / .wr-sortby تحديدًا
(لا تمسّ أيّ .wr-actionselect أخرى)، RTL-آمنة، قابلة للتراجع. */
.wr-timecards .wr-timecards_head {
flex-wrap: wrap !important;
row-gap: 12px !important;
}
.wr-timecards .wr-timecards_head > h5 {
min-width: 0 !important;
}
.wr-timecards .wr-actionselect {
flex-wrap: wrap !important;
row-gap: 10px !important;
min-width: 0 !important;
}
.wr-timecards .wr-actionselect .wr-timecards_total {
min-width: 0 !important;
}
.wr-timecards .wr-actionselect .wr-calendar {
min-width: 0 !important;
max-width: 100% !important;
}
.wr-timecards .wr-actionselect .wr-calendar .select2-container {
max-width: 100% !important;
}
@media (max-width: 767px) {
.wr-timecards .wr-actionselect {
width: 100% !important;
}
.wr-timecards .wr-actionselect .wr-calendar {
width: 100% !important;
flex: 1 1 100% !important;
}
.wr-timecards .wr-actionselect .wr-calendar .select2-container {
width: 100% !important;
}
}
@media (max-width: 360px) {
.wr-dhb-mainheading .wr-sortby .wr-actionselect2 {
flex-wrap: wrap !important;
row-gap: 8px !important;
}
.wr-dhb-mainheading .wr-sortby .wr-actionselect2 .wr-select {
flex: 1 1 100% !important;
min-width: 0 !important;
}
.wr-dhb-mainheading .wr-sortby .wr-actionselect2 .select2-container {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
}
.wr-dhb-mainheading .wr-sortby .wr-actionselect2 > span {
flex: 0 0 auto !important;
}
}
/* ════════════════════════════════════════════════════════════════
[27] كرت المشروع: تفكّك التذييل وفيض أفقي (column-flex-wrap) — يونيو 2026
----------------------------------------------------------------
العَرَض: على صفحات البحث/المنتجات بتخطيط 3 أعمدة (≈1024px، iPad أفقي)
كان تذييل الكرت (.wr-projects-grid-footer: «صاحب العمل» + زرّ «عرض
المشروع») ينفصل خارج الكرت أسفل-يسار ويتمدّد أعرض منه → تمرير أفقي
للصفحة كاملة (scrollWidth 1037 على 1024، رُصد قياسًا وبصريًّا).
السبب الجذري (style.css:34129): .wr-projects-grid-item هو
display:flex; flex-direction:column; flex-wrap:wrap; height:100%.
صفّ Bootstrap يُسوّي ارتفاع الأعمدة (stretch)، وحين يطول محتوى الكرت في
عمود ضيّق (296px) يتجاوز الارتفاع المتاح فيلتفّ عنصرٌ إلى «عمود flex
ثانٍ» جانبيّ → يفقد العناصر تمدّدها للعرض (تصبح 352px بعرض محتواها)
وتخرج عن الكرت أفقيًّا.
الإصلاح: flex-wrap:nowrap — كرت رأسيّ يجب أن يبقى عمودًا واحدًا. تعود
العناصر للتكدّس الرأسيّ وتتمدّد لعرض الكرت (100%) فلا فيض ولا تفكّك.
سلوك صحيح دلاليًّا، لا يغيّر شيئًا على الأحجام التي لا تلتفّ أصلاً،
إضافة طفل بحتة لا تمسّ الأب. تكمّل [13]ج (min-width:0) و[21]ب (تذييل). */
.wr-projects-grid-item {
flex-wrap: nowrap !important;
}
/* ════════════════════════════════════════════════════════════════
[28] توسيط عبارات بطاقات إحصاء المشروع تحت أيقونتها على الهاتف (يونيو 2026)
----------------------------------------------------------------
العَرَض: في بطاقات الإحصاء بصفحة نشاط المشروع (المبلغ المُرحّل/المعلق/
المدفوع…) الأيقونة متوسّطة أفقيًّا، لكن نصّ العبارة والقيمة (0 د.ع)
يظهران **محاذَيين لليمين** على الهاتف (≤767px) فيبدوان منفصلين عن
أيقونتهما المتوسّطة — مظهر غير متناسق. (الآيباد/الديسكتوب ≥768px متوسّط
أصلاً عبر .wr-counterinfo_list li{text-align:center} في الأب.)
السبب الجذري (قياس حيّ): قاعدة عامّة في طبقة جوال الأب تُحاذي نصّ
لوحة التحكم لليمين، فتتغلّب على text-align:center الموروث على هذين
العنصرين تحديدًا عند ≤767px.
الإصلاح: فرض text-align:center على عبارة العنوان (span) والقيمة (h5)
داخل .wr-counterinfo_list حصرًا — مطابق لنيّة الأب على الشاشات الأوسع،
فلا يغيّر شيئًا ≥768px (متوسّط أصلاً) ويُصلح الهاتف فقط. إضافة طفل
مقصورة، RTL-آمنة، لا تمسّ الأب ولا الأيقونة. */
.wr-counterinfo_list li span,
.wr-counterinfo_list li h5 {
text-align: center !important;
}
/* ════════════════════════════════════════════════════════════════
[29] أعمدة باقات «تسعير الخدمة» (add-task/?…&step=2): ملء الحاوية + سلايدر الهاتف (يونيو 2026)
----------------------------------------------------------------
الصفحة: لوحة المستقل ← إضافة/تعديل خدمة ← الخطوة 2 «تسعير الخدمة».
العَرَض: ثلاثة أعمدة باقات داخل صفّ flex واحد (.wr-pricingitems__content)
تتقدّمها خانة عناوين (.wr-pricingtitle) **فارغة تمامًا** (0 حقول، 0 محتوى)
موروثة من قالب الأب (add-service-pricing.php:98) — لأن هذا الموقع يعرض
عناوين الحقول داخل كل عمود باقة (اسم الباقة/الوصف/السعر…) فتصبح خانة
العناوين المنفصلة بلا فائدة. هذه الخانة تأخذ عرضًا ثابتًا (flex:0 0 auto،
~229px) فتنكمش الأعمدة الثلاث (flex:1 1 0) إلى ~220px وتتزاحم في جهة
وتترك فراغًا كبيرًا على الديسكتوب (رُصد حيًّا: 3×220 + خانة فارغة 229px).
وعلى الهاتف الأسوأ: الصفّ flex-wrap:nowrap والخانة الفارغة الثابتة تدفعان
الأعمدة خارج الشاشة فتُقصّ (كل عمود ~17px@375) وتصبح غير قابلة للاستخدام.
الإصلاح (مقصور على صفّ الباقات فقط):
(أ) إخفاء خانة العناوين الفارغة [.wr-pricingtitle:not(.wr-package-active)]
— مؤكَّد فراغها برمجيًّا (0 input/textarea/select) فلا يكسر الإرسال —
فتتمدّد الأعمدة الثلاث (flex:1) لملء الحاوية بالتساوي على الشاشات
الكبيرة (299px@1440، 285px@1024، 205px@768، بلا فيض، بلا فراغ).
(ب) على ≤767px نحوّل صفّ الأعمدة إلى «سلايدر» أفقي بالسحب (scroll-snap):
كل عمود 86% من العرض ويُتنقّل بينها بالسحب فيظهر كل عمود كاملًا
قابلًا للاستخدام. التمرير داخليّ بحت (الحاوية تبقى 100%) فلا فيض
للصفحة (pageOverflowX=0 على 320/375 قياسًا). + شريط تمرير رفيع
بهوية المنصّة وتلميح «اسحب أفقياً» للاكتشاف.
النطاق محصور بـ .wr-pricingplan > .wr-pricingitems__content فقط — لا يمسّ
قسم «الحقول المخصصة» (.wr-custom-fields .wr-pricingitems__content) ولا أيّ
صفحة أخرى. إضافة طفل بحتة، RTL-آمنة، قابلة للتراجع. */
.wr-pricingitems .wr-pricingplan > .wr-pricingitems__content > .wr-pricingtitle:not(.wr-package-active) {
display: none !important;
}
.wr-pricingitems .wr-pricingplan > .wr-pricingitems__content > .wr-pricingtitle.wr-package-active {
flex: 1 1 0 !important;
min-width: 0 !important;
}
@media (max-width: 767px) {
.wr-pricingitems .wr-pricingplan > .wr-pricingitems__content {
flex-wrap: nowrap !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
gap: 12px !important;
padding-bottom: 10px !important;
scrollbar-width: thin;
scrollbar-color: #1699CA #e8eef3;
}
.wr-pricingitems .wr-pricingplan > .wr-pricingitems__content > .wr-pricingtitle.wr-package-active {
flex: 0 0 86% !important;
max-width: 86% !important;
min-width: 86% !important;
scroll-snap-align: center !important;
}
.wr-pricingitems .wr-pricingplan > .wr-pricingitems__content::-webkit-scrollbar {
height: 6px;
}
.wr-pricingitems .wr-pricingplan > .wr-pricingitems__content::-webkit-scrollbar-thumb {
background: #1699CA;
border-radius: 10px;
}
.wr-pricingitems .wr-pricingplan > .wr-pricingitems__content::-webkit-scrollbar-track {
background: #e8eef3;
border-radius: 10px;
}
.wr-pricingitems .wr-pricingplan::after {
content: "اسحب أفقياً لعرض باقي الباقات ⟷";
display: block;
text-align: center;
font-size: 12px;
font-weight: 600;
color: #1699CA;
padding: 8px 0 2px;
}
}
/* ════════════════════════════════════════════════════════════════
[30] أيقونة حذف الدفعة (milestone) تتراكب مع «الشريط» على الهاتف (يونيو 2026)
----------------------------------------------------------------
الصفحة: «تقديم عرض» للمستقل + «إضافة مشروع» لصاحب العمل، عند اختيار الدفع
بنظام الدُّفعات (milestones). البنية واحدة في الموضعين (تأكيد بقراءة القالبين):
.wr-milestones-prices (flex، RTL) = [مقبض السحب ::before على اليمين بارتفاع
كامل = «الشريط»] + [.wr-grapinput يسارَه]، وداخله صفّ .wr-milestones-input
(السعر/العنوان/أيقونة الحذف الحمراء).
العَرَض: قاعدة الأب (_responsive.scss @max-width:480px) تجعل .wr-removeicon
position:absolute; right:-10px — في RTL يدفع هذا الأيقونة 10px خارج الحافة
اليمنى للصفّ، فوق «الشريط» (مقبض السحب) مباشرةً → تراكب الأيقونة الحمراء مع
الشريط على الهاتف فقط (≤480px). (لا يظهر على الأوسع لأن الصفّ هناك أفقيّ
والأيقونة في طرفه الأيسر بعيدًا عن المقبض.)
الإصلاح (≤480px فقط، مقصور على صفّ الدُّفعات): نُبعد أيقونة الحذف إلى يسار
الصفّ (بعيدًا عن المقبض على اليمين) عند الفراغ الطبيعي الناتج عن أن حقل
السعر عرضه 80% محاذًى للبداية (يمين) فيبقى ~20% فارغًا على اليسار — تجلس فيه
الأيقونة دون تراكب مع المقبض ولا الحقول. نُصغّر حشوتها قليلًا لتسع أضيق هاتف
(320px). يغطّي الموضعين لتطابق البنية. إضافة طفل بحتة، RTL-آمنة، لا تمسّ
الأب، قابلة للتراجع. */
@media (max-width: 480px) {
.wr-milestones-prices .wr-milestones-input .wr-removeicon {
right: auto !important;
left: 0 !important;
top: 8px !important;
margin: 0 !important;
padding: 0 6px !important;
}
}
/* ════════════════════════════════════════════════════════════════
[31] توسيع كرت الإشعار اللحظي (jconfirm/sticky) فلا يبدو مضغوطًا (يونيو 2026)
----------------------------------------------------------------
مكمّل/مصحّح لـ[21]أ و[22]د. العَرَض: كرت الإشعار المنبثق («أخبار رائعة! تمّت
الموافقة على مشروعك…») عرضه 360px (المحدَّد في [21]أ) فيُحشَر النصّ في عمود
ضيّق بجانب الأيقونة ويلتفّ لأسطر كثيرة قصيرة (يبدو صغيرًا/مضغوطًا) على كل
الشاشات.
الإصلاح: نرفع عرض الصندوق إلى min(460px, 100vw-32px) — يتّسع على الشاشات
المتوسطة/الكبيرة ويبقى داخل أضيق هاتف عبر min() (لا فيض أفقي إطلاقًا) —
ونحاذي نصّ الإشعار للبداية (يمين في RTL) بدل التوسيط فيُقرأ مريحًا بأسطر
أطول وأقلّ. الإشعار الثابت (.wr-stickynoti) يرتفع سقفه إلى
min(420px, 100vw-32px). يأتي بعد [21]/[22] فيتغلّب على عرض 360/350 السابق
(نفس التخصيص، الأحدث يفوز). إضافة طفل بحتة، RTL-آمنة، قابلة للتراجع. */
.jconfirm-box:has(.wr-notification) {
width: min(460px, calc(100vw - 32px)) !important;
}
.wr-stickynoti {
max-width: min(420px, calc(100vw - 32px));
}
.jconfirm-content .wr-notification-info p,
.wr-stickynoti .wr-notification-info p {
text-align: start;
}
/* ════════════════════════════════════════════════════════════════
[32] أزرار تبويبات النزاع/الاسترداد: قصّ النصّ على الشاشات المتوسطة (يونيو 2026)
----------------------------------------------------------------
الصفحة: تفاصيل النزاع/الاسترداد (dashboard-disputes-detail.php) — ثلاثة
أزرار تبويب: «الرد على طلب الاسترداد» / «السماح باسترداد الأموال» /
«رفض استرداد الأموال» داخل .wr-refunddetailttabs .nav-tabs، كلٌّ 33.33%
في صفّ واحد على ≥768px (تتكدّس 100% على ≤767px عبر الأب).
العَرَض (مؤكَّد قياسًا+بصريًّا عبر محاكاة Playwright بالـCSS الحقيقي): الأزرار
تحمل .wr-btn، و.wr-btn في الأب (style.css:3573 / المتجاوب :35995) لها
height:48–50px ثابت + overflow:hidden. حين تضيق منطقة المحتوى (آيباد/تابلت
768–991px أو لوحة بشريط جانبي) يصبح عرض الزرّ ~160–230px فيلتفّ النصّ
العربيّ لسطرين، فيتجاوز ارتفاعَ الـ48px ويُقصّ السطرُ الثاني (scrollH>clientH)
→ نصّ مشوَّه/مبتور. (اللابتوب/الشاشات الأوسع: النصّ يسع سطرًا واحدًا فلا
مشكلة — لذا لا نغيّر شيئًا هناك.)
الإصلاح (مقصور على أزرار النزاع فقط — لا يمسّ .wr-btn عمومًا): نسمح للزرّ
بالنموّ رأسيًّا (height:auto + min-height:50px) ونلغي القصّ (overflow:visible
+ white-space:normal + line-height:1.4 + حشوة رأسية)، ونجعل الأزرار الثلاثة
متساوية الارتفاع (align-items:stretch على الصفّ + li فلكس + الزرّ width:100%).
min-width:0 يتيح للزرّ الانكماش في الصفّ الضيّق فلا فيض. غير مشروط بالعرض
لأنه آمن: على الشاشات الواسعة يسع النصّ سطرًا واحدًا فيبقى الزرّ 50px كما هو
(رُصد: 50px@≥696px، و62px@≤600px بلا قصّ). إضافة طفل بحتة، RTL-آمنة. */
.wr-refunddetailttabs .nav-tabs {
align-items: stretch !important;
}
.wr-refunddetailttabs .nav-tabs > li {
display: flex !important;
}
.wr-refunddetailttabs .nav-tabs > li > a.wr-btn {
width: 100% !important;
height: auto !important;
min-height: 50px !important;
overflow: visible !important;
white-space: normal !important;
line-height: 1.4 !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
min-width: 0 !important;
}
/* ════════════════════════════════════════════════════════════════
[33] إصلاح صفحة 404 — سطر "ابدأ من جديد" على الجوال (يونيو 2026)
----------------------------------------------------------------
قاعدة إضافة Workreap (public/css/rtl.css:235) تضع
.rtl .wr-errorpage .wr-description p { display:flex; gap:5px }
فيصير النصّ والرابط عنصرَي فلكس في صفّ واحد لا يلتفّ → على الهاتف
يفيض/يتشوّه (وتنعكس «الصفحة الرئيسية» بجانب «بدلاً من ذلك»). نعيد
الفقرة إلى تدفّقها الطبيعي (block) فيلتفّ النصّ ورابطه معًا بشكل
سليم. الأولوية أعلى من قاعدة الإضافة (أُضيف .wr-main-section) فتفوز
مهما كان ترتيب التحميل. مقصورة على فقرة وصف 404 وحدها. */
.rtl .wr-main-section .wr-errorpage .wr-description p {
display: block;
}
/* ════════════════════════════════════════════════════════════════
[34] إصلاحات تصميم — دفعة يوليو 2026 (ملاحظات المالك بلقطات الشاشة)
----------------------------------------------------------------
ثلاثة إصلاحات مقصورة النطاق، RTL-آمنة، لا تمسّ الأب:
(أ) بطاقة المشروع في صفحة البحث (search-project): كانت الوحيدة بلا
تفاعل hover. نمنحها نفس تأثير بطاقات الخدمات حرفيًّا
(style.css:16832 — ظلّ ناعم + إخفاء الإطار) مع رفع خفيف
translateY(-4px) يوضح «الارتفاع» المطلوب. آمن: قلب الحفظ داخل
البطاقة عنصر flex لا absolute فلا يتأثر بالـtransform.
(ب) أزرار تفاصيل العرض الثلاثة (رفض/محادثة/توظيف) على الجوال:
قاعدتنا في [2] (flex-wrap) صحيحة للديسكتوب، لكن على ≤767px كان
كل زرّ يلتفّ لسطره بعرض محتواه فتبدو الأزرار متفاوتة. نجعل كل
زرّ يملأ صفّه (نفس العرض، ونفس الارتفاع عبر min-height:46px
القائم في [2]) دون المساس بسلوك الديسكتوب.
(ج) عدّاد الإشعارات في قائمة الجوال (≤1199px): قاعدة الأب
(style.css — media 1199) تضع العدّاد absolute عند left:35px
— تصميم LTR بلا مرآة في rtl.css (على عكس نظيرَيه
.wr-headerchatbtn و.wr-navbarnav المُمرآين في rtl.css:2590,2608)
فيهبط العدّاد بعيدًا عن الجرس في أقصى يسار الرابط. الرابط هنا
display:flex + align-items:center (قاعدة الأب نفسها)، فنعيد
العدّاد للتدفّق كعنصر flex بين الجرس والتسمية — نفس نمط الأب
(style.css:29133 يفعلها بـposition:unset في الشريط الجانبي) —
فيستوي على مستوى الجرس والنصّ مهما كان الاتجاه. */
/* (أ) رفع بطاقة المشروع مع ظلّ عند hover — مطابق لبطاقات الخدمات */
.wr-projects-grid-item {
transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
.wr-projects-grid-item:hover {
border-color: #fff;
box-shadow: 0px 32px 64px -12px rgba(16, 24, 40, 0.06);
transform: translateY(-4px);
}
/* (ب) أزرار تفاصيل العرض بعرض موحّد على الهاتف.
تصفير الهوامش الجانبية: قاعدة الأب .wr-proposals-btn button + button
{ margin-left:20px } (style.css:28514) فاصلٌ لصفٍّ أفقي، وفي التكديس
العمودي تُزيح الزرّين الثاني والثالث 20px عن الأول (قياس حيّ). الفاصل
الرأسي يظلّ مضمونًا بـgap:10px من القسم [2]. */
@media (max-width: 767px) {
.wr-bidbtn.wr-proposals-btn > button,
.wr-bidbtn.wr-proposals-btn > a {
flex: 1 1 100% !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* (ج) عدّاد الإشعارات على مستوى الجرس والتسمية في قائمة الجوال */
@media (max-width: 1199px) {
.wr-main-notiwrap .wr-notidropdowns > a .wr-remaining-notification {
position: static !important;
margin: 0 6px !important;
line-height: 18px !important;
min-width: 22px;
flex: none;
}
}