/* ═══════════════════════════════════════════════════════
 *  pricing.css — ورقة صفحة /pricing
 *  ⚠️ نُقلت إلى لغة تصميم الصفحة الرئيسية (٥ سبتمبر ٢٠٢٦): الرموز المحلّية
 *     بقيت أسماءً بديلة لرموز wtq-v4-base.css (الصفحة تستعملها).
 *  ⚠️ إعادة بناء قويّة (٦ سبتمبر ٢٠٢٦) — لم يعد الأمر تلوينًا:
 *       · الصفحة صارت تسعة أقسام بقشرة الرئيسية نفسها بحشو 96px وحاوية
 *         var(--maxw)، وأرضيّاتها تتناوب #fff / var(--panel).
 *       · لكل قسم رأس مركزي ثم مكوّن واحد واضح: شبكة بطاقات · بيان بعلامة
 *         زرقاء جانبية · قائمة مقارنة · نافذة محاكاة.
 *       · الأيقونات صارت SVG خطّيًّا مضمَّنًا بأسلوب الرئيسية (stroke 1.8)،
 *         ووسوم <i class="fas …"> باقية في الترميز ومحيَّدة هنا (لا حذف).
 *  ⚠️ جولة الإصلاح بعد المراجعة (٦ سبتمبر ٢٠٢٦) — أهمّ ما تغيّر:
 *       · **الصفحة صارت تستعمل أوليّات الأساس نفسها لا نسخًا محلّية منها:**
 *         .v4-sec / .v4-wrap / .v4-hd.c / .v4-lead / .v4-card / .v4-itile /
 *         .v4-win / .v4-btn / .v4-tag / .v4-ico / .v4-rv — وحُذفت من هنا كل
 *         قاعدة كانت تعيد كتابتها حرفًا بحرف (.pr-sec · .pr-wrap · .pr-hd ·
 *         .pr-sub · .pr-h2 · .rc-t · .pi · ظلّ .calc-box · .pr-page .ico ·
 *         ثلاث قواعد h4). ما بقي هنا **فروق الصفحة وحدها**، فأيّ تعديل لاحق
 *         على الأساس يصل هذه الصفحة كما يصل بقيّة الصفحات المنقولة.
 *       · إيقاع 96px صار بلا استثناء: حُذف حشو الهيرو والباقات المقلَّم
 *         (26/20 ثم 20/96) فورثا حشو .v4-sec — كان الفاصل بين سطر العملة
 *         والبطاقات 40px بينما هو 192px بين كل زوج آخر، ومبرّره المعلن
 *         (أوّل زرّ أزرق فوق الطيّة) لا يتحقّق: قِيس فظهر 10px من 47px.
 *       · المرساة #compare انتقلت من العنوان إلى القسم نفسه (كما في الرئيسية)
 *         فصار scroll-margin-top:96px الآتي من .v4-sec يعمل فعلًا؛ كان على
 *         العنصر الخطأ فقيمته المحسوبة 0px والعنوان يختفي تحت الترويسة اللاصقة.
 *       · رأس عمود «الاستراتيجية» في جدول المقارنة: #15803D على --green-50
 *         يقيس 4.49 (دون العتبة بـ0.01) ⇐ #166534 = 6.38، وهو الأخضر نفسه
 *         أغمق درجة وله سابقة مقيسة في features-ai-assistant.css.
 *  ⚠️ الأرقام والعملة (الجنيه المصري) لم تُمسّ. وعلامتا الجدول ✓/✗ باقيتان
 *     على قرارهما السابق: ‎#15803D‎ و‎var(--muted)‎ — لا يُعكس.
 * ═══════════════════════════════════════════════════════ */
/* جسر الرموز: الأسماء المحلّية تُسنَد إلى رموز الأساس. وحُذف --blue و--ink
   و--line و--faint المحلّية عمدًا كي ترث قيم الأساس نفسها بلا ازدواج. */
.pr-page{--mut:var(--muted);--soft:var(--panel);--grn:var(--green);--grn-d:#15803D;--blue-d:var(--blue-700)}
.pr-page a{text-decoration:none}

/* ── الأيقونات — أسلوب الرئيسية: SVG خطّي مضمَّن ──
   كانت الصفحة Font Awesome صلبًا (١٧ وسمًا · صفر <svg>). ورسمة كل أيقونة
   الآن على أولية الأساس .v4-ico (مقاسها 1em فتكبر وتصغر مع نصّها، وداخل
   البلاطة يحكمها .v4-itile .ico = 19px) — فلا قاعدة مقاس محلّية إلا حيث
   تصغر البلاطة عن 40px. ولأن الحذف ممنوع: كل وسم <i class="fas …"> باقٍ
   في الترميز، ورسمته محيَّدة هنا — يُخرَج من التدفّق تمامًا كي لا يسهم في
   فجوة flex، ومحرف ::before ملغى فلا يبقى مربّع فارغ مكانه. */
.pr-page i.fas,.pr-page i.far,.pr-page i.fab{position:absolute;width:0;height:0;overflow:hidden;opacity:0;color:transparent;pointer-events:none}
.pr-page i.fas::before,.pr-page i.far::before,.pr-page i.fab::before{content:none}

/* ── فروق الصفحة عن الأوليّات ──
   رأس القسم: الأساس يعطي العرض والتوسيط والطباعة، والصفحة تضيف فسحة الرأس.
   ⚠️ لا eyebrow هنا: الرئيسية تضع فوق العنوان كلمةً بنقطة زرقاء، ولا يوجد
      في نصّ هذه الصفحة ما يصلح لذلك — واختراع نصّ ممنوع. (بند مفتوح للمالك) */
.pr-page .v4-hd{margin-bottom:48px}
/* ظهور الأقسام بالتمرير — الأولية .v4-rv من الأساس، لكنها تبدأ مخفيّة.
   فتُحيَّد ما لم يضف السكربت .rvon على الصفحة: بلا جافاسكربت (أو بلا مرصد)
   لا يُخفى شيء أصلًا، والحركة معلومة لا زينة. */
.pr-page:not(.rvon) .v4-rv{opacity:1;transform:none;transition:none}
/* الغلاف القديم صار حاويةً بلا عرض: الأقسام هي التي تحمل الحاوية الآن */
.pricing-wrap{max-width:none;margin:0;padding:0}

/* ═══ ١ · الهيرو ═══
   ⚠️ بلا حشو خاصّ: القسم يرث 96px/64px من .v4-sec كبقيّة الأقسام.
      المحاذاة للبداية كما في صفحات المحتوى الداخلية. */
.pr-sec-hero .pricing-hero{background:transparent;padding:0;text-align:start}
.pricing-hero h1{font-size:clamp(32px,4.2vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.28;margin:0 0 10px;color:var(--ink)}
.pricing-hero p{color:var(--mut);margin:0;font-size:15.5px;font-weight:300;line-height:1.9;max-width:62ch}
.ph-save-badge{display:inline-flex;align-items:center;gap:8px;background:var(--blue-50);border:1px solid #D6E2FB;color:var(--blue);font-size:13px;font-weight:500;padding:8px 18px;border-radius:999px;margin-top:12px;line-height:1.7}
.cur-note{background:transparent;padding:10px 0 0;text-align:start;font-size:12.5px;color:var(--mut);font-weight:400;line-height:1.9;max-width:76ch}
.cur-note .ico{color:var(--blue);margin-inline-end:7px}
.cur-note b{color:var(--ink);font-weight:500}

/* ═══ ٢ · الباقات — شبكة بطاقات ═══ */
.pr-sec-plans .plans-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;align-items:stretch}
/* البطاقة: أولية .v4-card (حدّ رفيع بلا ظلّ) وهنا فروقها وحدها.
   ⚠️ الاستثناء الوحيد للظلّ الساكن: بطاقة «الأكثر شعبية» بظلّ أزرق وله سابقة
   في الصفحة المعتمدة (.pr-c.pop). ولا ظلّ ساكن أخضر — الأقوى تتميّز بحدّها وشارتها. */
.plan-card{display:flex;flex-direction:column;padding:26px 18px;transition:border-color .2s,box-shadow .25s,transform .2s}
.plan-card:hover{border-color:#C7D7FB;box-shadow:0 26px 44px -34px rgba(11,11,11,.4);transform:translateY(-3px)}
.plan-card.pop-blue{border-color:var(--blue);box-shadow:0 30px 60px -36px rgba(37,99,235,.5)}
.plan-card.pop-green{border-color:var(--grn)}
/* فسحة الشارة العلوية — كانت سمة style مضمَّنة، ونُقلت إلى الورقة */
.plan-card.pop-blue,.plan-card.pop-green{padding-top:34px}
.plan-badge{position:absolute;top:-13px;inset-inline:0;margin-inline:auto;width:fit-content;font-size:12px;font-weight:500;padding:5px 15px;border-radius:999px;white-space:nowrap;color:#fff;line-height:1.7;display:inline-flex;align-items:center;gap:6px}
.badge-blue-bg{background:var(--blue)}
.badge-green-bg{background:var(--grn-d)}
/* ⚠️ الشارة تُوسَّط بـinset-inline+margin-inline بدل right:50%+translateX:
   الإزاحة فيزيائية فتنقلب في النسخة الإنجليزية، وهذه محايدة اتّجاهيًّا. */
/* رأس البطاقة: بلاطة أيقونة بجانب الاسم — أولية .v4-itile بمقاس أصغر
   (32px) لأن البطاقة واحدة من خمس في الصفّ */
.plan-name{display:flex;align-items:center;gap:10px;font-size:15.5px;font-weight:500;color:var(--ink);margin-bottom:8px;line-height:1.7}
.pr-page .pn-t{width:32px;height:32px}
.pr-page .pn-t .ico{width:17px;height:17px}
.plan-desc{font-size:12.5px;color:var(--mut);margin-bottom:12px;line-height:1.7;font-weight:400;min-height:43px}
.plan-price{margin-bottom:12px}
.price-amount{font-size:32px;font-weight:500;color:var(--ink);line-height:1;letter-spacing:-.03em}
.price-suffix{font-size:12px;color:var(--mut);margin-top:5px;font-weight:400;line-height:1.7}
.price-sym{font-size:15px;font-weight:500;vertical-align:top;margin-top:5px;display:inline-block;color:var(--ink)}
/* «مجاني» كقيمة سعر — كانت سمة style مضمَّنة بلون var(--green) (تباين 3.30)،
   ونُقلت إلى الورقة بأخضر النصّ ‎#15803D‎ (5.02) كما في الرئيسية. */
.price-free{font-size:24px;font-weight:500;color:var(--grn-d);padding:6px 0;letter-spacing:-.01em;line-height:1.2}
.plan-features{list-style:none;padding:0;margin:0 0 16px}
.plan-features li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:#3A3A38;margin-bottom:6px;line-height:1.7;font-weight:400}
.plan-features li.off{color:var(--mut)}
.chk{color:var(--grn-d);flex-shrink:0;font-size:12px;font-weight:500}
.xmk{color:var(--muted);flex-shrink:0;font-size:12px}
/* الأزرار: ممتلئ أزرق للفعل الأوّل · مخطَّط للثانوي · لا زرّ أخضر.
   margin-top:auto يصفّ أزرار البطاقات الخمس على سطر واحد مهما اختلف طولها. */
.btn-block{display:block;width:100%;margin-top:auto;text-align:center;padding:11px;border-radius:var(--r);font-weight:500;font-size:14px;text-decoration:none;transition:background .16s,border-color .16s;font-family:inherit;border:1px solid transparent;cursor:pointer;box-sizing:border-box;line-height:1.7}
.btn-prim{background:var(--blue);border-color:var(--blue);color:#fff}.btn-prim:hover{background:var(--blue-d);border-color:var(--blue-d);color:#fff}
.btn-outl{background:#fff;border-color:#C7D7FB;color:var(--blue)}.btn-outl:hover{background:var(--blue-50);border-color:var(--blue)}
.btn-contact{background:var(--blue);border-color:var(--blue);color:#fff}.btn-contact:hover{background:var(--blue-d);border-color:var(--blue-d);color:#fff}
/* حدّ الأعضاء: أولية .v4-tag بمقاس الصفحة (12px).
   ⚠️ align-self:flex-start لازم: البطاقة عمود flex، وابنٌ inline-flex فيها
      يُحوَّل إلى flex فيمتدّ بعرض البطاقة (قِيس 182px من 219) — واللصيقة
      تُقاس بمحتواها لا بحاويتها. */
.pr-page .plan-limit{font-size:12px;color:var(--mut);padding:4px 10px;margin-bottom:10px;align-self:flex-start}
/* أُضيف 7 أغسطس 2026: عرض الحدّ الشهري (تحميل/توقيع) داخل كل كرت.
   سطح فرعي داخل بطاقة بيضاء: #FBFBFA بحدّ #EFEFEC — لا var(--panel). */
.plan-usage{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 12px;padding:8px 12px;background:#FBFBFA;border:1px solid #EFEFEC;border-radius:var(--r)}
.plan-usage .pu-item{display:flex;align-items:baseline;gap:5px;font-size:12px;color:var(--mut);font-weight:400}
.plan-usage .pu-per{font-weight:500}
.plan-usage .pu-num{font-size:17px;font-weight:500;color:var(--blue);line-height:1}
.plan-card.pop-green .plan-usage .pu-num{color:var(--grn-d)}

/* ═══ ٣ · بيان الـAPI ═══
   مكوّن «بيان»: جملة موقف واحدة بمحاذاة البداية، وزن 300، ارتفاع 1.9،
   وعلامة واحدة جانبية (خطّ أزرق 2px) — لا صندوق ولا أيقونة ثانية معها،
   فأيقونة Font Awesome بقيت في الترميز ومحيَّدة كي لا تجتمع علامتان.
   ⚠️ القسم بلا رأس: لا يوجد في نصّه ما يصلح عنوانًا واختراع النصّ ممنوع
      — بند مفتوح للمالك مثل الحواجب. */
.pr-sec-api .api-note{max-width:900px;margin:0 auto;background:transparent;border:0;border-inline-start:2px solid var(--blue);border-radius:0;padding:4px 26px;font-size:16px;color:var(--mut);line-height:1.9;font-weight:300}
.api-note b{color:var(--ink);font-weight:500}
.api-note a{color:var(--blue);font-weight:500}
.api-note a:hover{text-decoration:underline}

/* ═══ ٤ · قواعد الحدود — شبكة بطاقات ═══
   كان القسم صندوقًا رماديًّا بزوايا داخل صفحة بيضاء؛ صار الرمادي أرضيةَ
   القسم نفسه (تناوب السطحين)، والصندوق حاويةً بلا تنسيق. */
.rules-section{background:transparent;border-radius:0;padding:0;margin:0}
.rules-sub{display:block}
.pr-sec-rules .rules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rule-card{padding:22px}
.rc-h{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
/* العنوان داخل صفّ البلاطة: بلا الهامش السفلي الذي تعطيه .v4-card h4 */
.rule-card h4{margin:0}

/* ═══ ٥ · جدول المقارنة — قائمة مقارنة ═══
   الجدول بطاقة بيضاء فوق أرضية القسم الرمادية (كما تُوضع بطاقات الرئيسية
   على الأقسام البديلة). ✓ ‎#15803D‎ و✗ ‎var(--muted)‎ — قرار سابق لا يُعكس. */
.pr-sec-cmp .compare-wrap{background:#fff;overflow-x:auto;border-radius:var(--r);border:1px solid var(--line);margin:0}
.compare-table{width:100%;border-collapse:collapse;font-size:13px;min-width:760px}
.compare-table th{background:#fff;color:var(--ink);padding:15px 14px;text-align:center;font-weight:500;font-size:13px;border-bottom:1px solid var(--line);line-height:1.7}
/* اتّجاهيًّا محايد: ‎right‎ كانت تحاذي يمينًا في النسخة الإنجليزية أيضًا */
.compare-table th:first-child{text-align:start;min-width:250px}
.compare-table th.th-pop-blue{background:var(--blue-50);color:var(--blue)}
/* أخضر على أخضر: #15803D يقيس 4.49 على ‎--green-50 (دون 4.5 بهامش)،
   و#166534 يقيس 6.38 وهو الأخضر نفسه أغمق درجة (سابقته المقيسة في
   features-ai-assistant.css). لون علامتَي ✓/✗ في المتن لم يُمسّ. */
.compare-table th.th-pop-green{background:var(--green-50);color:#166534}
.compare-table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:center;color:var(--mut);font-weight:400;line-height:1.7}
.compare-table td:first-child{text-align:start;font-weight:500;color:var(--ink)}
.compare-table tr:hover td{background:#FBFBFA}
.compare-table .cat-row td{background:var(--panel);font-size:12px;font-weight:500;color:var(--mut);letter-spacing:0;padding:9px 14px}
.compare-table .cmp-note{background:var(--panel);color:var(--ink);font-weight:500}
.yes{color:#15803D;font-size:15px}.no{color:var(--muted);font-size:15px}.val{font-weight:500;color:var(--ink)}

/* ═══ ٦ · أي باقة تناسبك — شبكة بطاقات ═══ */
.pr-sec-pick .pick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pick-card{padding:22px 20px}
.pick-card .pi{margin-bottom:14px}
.pick-card p{margin:0 0 14px}
/* لصيقة الباقة: أولية .v4-tag.b بمقاس الصفحة وحوافّ كبسولة */
.pr-page .pick-card .pk{font-size:12px;padding:4px 12px;border-radius:999px}

/* ═══ ٧ · الحاسبة — نافذة محاكاة ═══
   الإطار والظلّ من أولية .v4-win؛ هنا القياس والقصّ وحدهما. */
.pr-sec-calc .calc-box{max-width:900px;margin:0 auto;overflow:hidden;padding:0}
.calc-bar{height:36px;display:flex;align-items:center;padding:0 14px;background:#F6F6F4;border-bottom:1px solid #E6E6E2}
.calc-bar i{width:9px;height:9px;border-radius:50%;background:#DCDCD8;margin-inline-end:6px;flex:none}
.calc-body{padding:26px 26px 24px}
.calc-row{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end}
.calc-fld{flex:1;min-width:190px}
.calc-fld label{display:block;font-size:12.5px;font-weight:500;color:var(--ink);margin-bottom:7px;line-height:1.7}
.calc-fld input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);font-family:inherit;font-size:14px;font-weight:400;box-sizing:border-box;color:var(--ink);background:#fff}
.calc-fld input:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-color:var(--blue)}
.calc-out{background:#FBFBFA;border:1px solid #EFEFEC;border-radius:var(--r);padding:16px 18px;margin-top:20px;font-size:13.5px;color:var(--ink);line-height:1.9;font-weight:400}
.calc-out b{color:var(--blue);font-weight:500}
.calc-note{font-size:12px;color:var(--mut);margin:12px 0 0;font-weight:400;line-height:1.85}

/* ═══ ٨ · الأسئلة — شبكة بطاقات ═══
   ⚠️ رأس القسم بعنوان بلا سطر شرح: لا يوجد في نصّ الصفحة سطر يصلح له
      واختراعه ممنوع — بند مفتوح للمالك. */
.pr-sec-faq .pfaq-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0}
.pfaq-item{padding:20px 22px}
.pfq-h{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px}
.pr-page .pfq-t{width:30px;height:30px}
.pr-page .pfq-t .ico{width:16px;height:16px}
.pfaq-item h4{margin:0}

/* ═══ ٩ · النداء الختامي ═══
   قسم بعرض الشاشة بأرضية var(--panel) وحشو 96px بلا زاوية ولا صندوق داخلي.
   ⚠️ أُلغي هامش .pr-cta السالب (calc(50% - 50cqi) و50vw احتياطًا): كان يلزم
      حين كان العنصر ابنَ حاوية ضيّقة؛ والآن القسم نفسه بعرض الشاشة. */
.pr-sec-cta .pr-cta{background:transparent;border-radius:0;padding:0;text-align:center;margin:0}
/* رأس النداء الختامي يلتصق بأزراره: فسحة الرأس (48px) تخصّ الأقسام
   التي يليها مكوّن، لا القسم الذي يليه فعلٌ مباشر */
.pr-sec-cta .v4-hd{margin-bottom:0}
.pr-cta h2{font-size:clamp(32px,4.2vw,54px);font-weight:800;letter-spacing:-.03em;line-height:1.7;margin:0 0 12px;color:var(--ink);text-wrap:balance}
.pr-cta p{color:var(--mut);margin:0 auto 28px;max-width:62ch;font-size:15.5px;font-weight:300;line-height:1.9}
.pr-acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ═══ نقاط الكسر — تتبع المكوّن لا الجهاز ═══ */
@media(max-width:1050px){.pr-sec-plans .plans-grid{grid-template-columns:repeat(3,1fr)}.pr-sec-pick .pick-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){
  .pr-page .v4-hd{margin-bottom:34px}
  .pr-sec-plans .plans-grid{grid-template-columns:repeat(2,1fr)}
  .pr-sec-api .api-note{font-size:15px}
}
@media(max-width:767.98px){
  .pr-sec-rules .rules-grid{grid-template-columns:1fr}
  .pr-sec-faq .pfaq-grid{grid-template-columns:1fr}
  .pr-sec-plans .plans-grid{grid-template-columns:1fr}
  .pr-sec-pick .pick-grid{grid-template-columns:1fr}
  .plan-desc{min-height:0}
  .calc-body{padding:20px}
}
@media(max-width:640px){
  /* أزرار النداء الختامي تنزل كاملة العرض تحت 640 — لا عرضان يلتفّان (درس الدفعة A) */
  .pr-acts{flex-direction:column}
  .pr-acts .v4-btn{display:flex;width:100%}
}

/* WTQ-IOS-ZOOM — الهاتف: خطّ الحقول 16px يمنع تكبير سفاري التلقائي
   عند التركيز (سلوك iOS لأي حقل خطّه أصغر من 16px، ولا يتراجع). */
@media(max-width:768px){
  .calc-fld input,.calc-fld select,.calc-box input,.calc-box select{font-size:16px}
}