/* ════════════════════════════════════════════════════════════════════════
   FAZAA — أوراق أنماط صفحات المحتوى (الأدلة + فهرسها + صفحات الخدمات)
   ────────────────────────────────────────────────────────────────────────
   تُحمَّل **بعد** brand-tokens.css ثم fz-shared.css ثم customers.css.

   🔑 القاعدة الحاكمة (قرار المالك 2026-08-30): **لا اجتهاد في التصميم.**
   المرجع الوحيد هو صفحة العملاء الحيّة نفسها. كل قيمة هنا منسوخة من
   `customers.css` أو `brand-tokens.css` — لا لون ولا ظل ولا حافة من عندي.
   الهدف: صفحة الدليل جنب الرئيسية = نفس الموقع، بلا فرق يُلمح.

   🔴 **الموقع فاتح. ممنوع أي خلفية غامقة.** الخلفية هي `.aurora` نفسها
   (‏`--fz-base` → `--fz-base-end` + بقع ملوّنة)، والبطاقات كلها `.glass`.
   نسخةٌ سابقة من هذي الورقة اخترعت شريطاً كحلياً وهيرو بتدرّج غامق —
   أُزيلت بالكامل، وهذا التعليق يمنع عودتها.

   ⚠️ **بلا جافاسكريبت إطلاقاً** (قائمة NO_SCRIPT + `script-src 'none'`):
   🔴 **ممنوع `class="reveal"`** — `customers.css` يضعها `opacity:0` ولا
      يكشفها إلا كلاس يضيفه `fz-shared.js`، فتختفي هنا للأبد بلا خطأ ظاهر.

   الأسماء المحلية أدناه هي أسماء ورقة الأدلة القديمة (style.css)، أُبقيت
   عمداً كي تبقى سمات `style="…var(--line)…"` المضمّنة في نص الأدلة تعمل
   **بلا لمس حرف واحد من المحتوى**.
   ════════════════════════════════════════════════════════════════════════ */

.guide {
  /* جسور الأسماء القديمة → أسماء الموقع نفسه (المعرَّفة في customers.css) */
  --cyan:      var(--teal);              /* --fz-sky */
  --cyan-deep: var(--teal-deep);         /* --fz-sky-deep — نصٌّ على فاتح */
  --ink:       var(--text);              /* --fz-navy */
  --soft:      var(--text-soft);         /* --fz-ink-dim */
  --line:      var(--border);            /* --fz-glass-border — نفس حافة الزجاج */
  --paper:     var(--glass);             /* --fz-glass — نفس سطح البطاقات */

  /* الثلاثيات الدلالية من نظام تصميم فزاع المعتمد (tokens.ts) — تُعرَّف محلياً
     لأن brand-tokens.css محروس والذهبي محجوز لبرايم. */
  --ok:      #047857;  --okbg:    #ECFDF5;  --okline:    #a7f3d0;
  --warn:    #F59E0B;  --warnbg:  #FFFBEB;  --warnline:  #fde68a;
  --warntext:#92400E;  /* 6.84:1 على --warnbg · و--warn نفسه 2.1:1 فلا يصلح نصاً */
  --alert:   #DC2626;  --alertbg: #FEF2F2;  --alertline: #fecaca;

  color: var(--ink);
  line-height: 1.85;
}

/* عمود القراءة — فوق الأورورا كما ترتفع أقسام الرئيسية فوقها */
.guide .guide-col { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; padding: 0 28px; }

/* ───────── رأس الصفحة: فاتح، بلا أي شريط غامق ─────────
   `.hero` نفسه من customers.css (padding:40px 0 60px) ولا خلفية له. */
.guide .guide-head { padding: 26px 0 30px; }
.guide .crumb { font-size: 13px; color: var(--soft); margin-bottom: 12px; font-weight: 600; }
.guide .crumb a { color: var(--cyan-deep); text-decoration: none; }
.guide .crumb a:hover { text-decoration: underline; }

/* customers.css يضع h1{font-size:80px} بلا نطاق — حجم المقال، ونفس الوزن واللون */
.guide h1 {
  font-size: clamp(28px, 5vw, 44px); font-weight: 900; line-height: 1.35;
  letter-spacing: -1px; margin: 0; padding: 0; color: var(--text);
}

/* ───────── بطاقة «الجواب باختصار» — بطاقة زجاجية، لا صندوق ملوّن ─────────
   القيم منسوخة حرفياً من `.glass` في customers.css:63 */
.guide .answer {
  background: var(--glass); border: 1px solid var(--border); border-radius: 24px;
  box-shadow: 0 20px 60px -22px rgba(0,80,95,0.22), inset 0 1px 0 rgba(255,255,255,0.6);
  padding: 26px 28px; margin: 8px 0 36px;
}
.guide .answer .lbl {
  display: inline-block; background: var(--teal-soft); color: var(--teal-deep);
  font-size: 12.5px; font-weight: 800; padding: 5px 15px; border-radius: 100px; margin-bottom: 12px;
}
.guide .answer p { font-size: 18px; font-weight: 600; color: var(--text); margin: 0; }

/* ───────── النص ───────── */
.guide h2 {
  font-size: 28px; font-weight: 900; margin: 44px 0 15px; color: var(--text);
  letter-spacing: -.6px; line-height: 1.45;
  border-inline-start: 5px solid var(--teal); padding-inline-start: 14px;
}
.guide h3 { font-size: 19px; margin: 28px 0 8px; font-weight: 800; color: var(--text); line-height: 1.6; }
.guide p  { margin: 0 0 14px; color: var(--text-soft); font-size: 16px; }
.guide strong { font-weight: 800; color: var(--text); }
.guide a { color: var(--teal-deep); }
.guide ul, .guide ol { padding-inline-start: 22px; margin: 0 0 14px; }
.guide li { margin-bottom: 9px; color: var(--text-soft); }

/* ───────── الجداول — سطح زجاجي، ورأسٌ بتدرّج الموقع نفسه (نفس .nav-cta) ───────── */
.guide table {
  width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px;
  background: var(--glass); border: 1px solid var(--border); border-radius: 20px;
  overflow: hidden; box-shadow: 0 20px 60px -26px rgba(0,80,95,0.20);
}
.guide th {
  background: linear-gradient(135deg, var(--teal-deep), var(--teal-strong));
  color: #fff; padding: 13px 14px; text-align: right; font-weight: 800;
}
.guide td { padding: 13px 14px; border-bottom: 1px solid var(--fz-sky-a12); vertical-align: top; color: var(--text-soft); }
.guide tr:last-child td { border-bottom: 0; }
.guide tr:nth-child(even) td { background: var(--fz-sky-a05); }

/* ───────── الوسوم ───────── */
.guide .tag { display: inline-block; font-size: 12.5px; font-weight: 800; padding: 4px 12px; border-radius: 100px; white-space: nowrap; }
.guide .t-self { background: var(--okbg);    color: var(--ok); }
.guide .t-pro  { background: var(--warnbg);  color: var(--warntext); }
.guide .t-stop { background: var(--alertbg); color: var(--alert); }

/* ───────── الصناديق الدلالية ───────── */
.guide .box { border-radius: 18px; padding: 17px 21px; margin: 18px 0; font-size: 15.5px; border: 1px solid; }
.guide .box.warn  { background: var(--warnbg);  border-color: var(--warnline);  color: var(--warntext); }
.guide .box.ok    { background: var(--okbg);    border-color: var(--okline);    color: #065f46; }
.guide .box.alert { background: var(--alertbg); border-color: var(--alertline); color: #7f1d1d; }
.guide .box strong { color: inherit; }

/* ───────── الخطوات ─────────
   🪤 تصادم موثّق: `customers.css:254` يعرّف `.steps` شبكةً من أربعة أعمدة
   (خطوات «كيف يعمل» في الرئيسية). و`<ol class="steps">` هنا قائمةٌ مرقّمة —
   فبلا `display:block` صريح تنقلب أعمدةً ويضيع ترتيب القراءة. أمسكها الرسم. */
.guide ol.steps {
  display: block; grid-template-columns: none; gap: 0;
  margin: 14px 0 18px; padding-inline-start: 24px; list-style: decimal;
}
.guide ol.steps li { margin-bottom: 11px; font-size: 16px; color: var(--text-soft); display: list-item; text-align: start; }

/* ───────── الصور ───────── */
.guide figure { margin: 28px 0; }
.guide figure img { width: 100%; height: auto; border: 1px solid var(--border); border-radius: 20px; background: var(--glass); }
.guide figcaption { font-size: 13.5px; color: var(--text-soft); text-align: center; margin-top: 10px; }

/* ───────── الأسئلة · ذات صلة · المصادر — كلها بطاقات زجاجية ───────── */
.guide .faq,
.guide .related,
.guide section[aria-label] {
  background: var(--glass); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 14px 44px -26px rgba(0,80,95,0.20);
  padding: 19px 22px; margin-bottom: 12px;
}
.guide .related, .guide section[aria-label] { margin-top: 30px; padding: 22px 24px; }
.guide .faq b { display: block; margin-bottom: 6px; color: var(--text); font-size: 16.5px; font-weight: 800; }
.guide .faq p { margin: 0; font-size: 15.5px; }
.guide .related h3, .guide section[aria-label] h2 { margin: 0 0 12px; border: 0; padding: 0; font-size: 19px; }
.guide .related ul, .guide section[aria-label] ul { list-style: none; margin: 0; padding: 0; }
.guide .related li, .guide section[aria-label] li { margin-bottom: 9px; }
.guide .related a, .guide section[aria-label] a { color: var(--teal-deep); text-decoration: none; font-weight: 700; font-size: 15.5px; }
.guide .related a:hover, .guide section[aria-label] a:hover { text-decoration: underline; }

/* ───────── سطر الجسر (قرار المالك 2026-09-02) ─────────
   عند مواضع «يحتاج فني» في الأدلة: جملة واحدة تجسر من «تحتاج فني» إلى
   التسجيل، بلا أي وعد خدمة قائمة. نفس بطاقة .box بلون الهوية لا لون دلالي. */
.guide .bridge {
  background: var(--fz-sky-a08); border: 1px solid var(--fz-sky-a18); border-radius: 18px;
  padding: 15px 20px; margin: 22px 0; font-size: 15.5px; color: var(--text);
}
.guide .bridge a { color: var(--teal-deep); font-weight: 800; text-decoration: none; }
.guide .bridge a:hover { text-decoration: underline; }

/* ───────── دعوة الإجراء — بطاقة زجاجية فاتحة، والزر بتدرّج الموقع ───────── */
.guide .cta {
  background: var(--glass); border: 1px solid var(--border); border-radius: 24px;
  box-shadow: 0 20px 60px -22px rgba(0,80,95,0.22), inset 0 1px 0 rgba(255,255,255,0.6);
  padding: 34px 30px; text-align: center; margin-top: 38px;
}
.guide .cta h3 { color: var(--text); font-size: 24px; font-weight: 900; margin: 0 0 8px; letter-spacing: -.5px; }
.guide .cta p  { color: var(--text-soft); margin-bottom: 22px; font-size: 15.5px; }
.guide .btn {
  display: inline-block; background: linear-gradient(135deg, var(--teal-deep), var(--teal-strong));
  color: #fff; font-weight: 800; padding: 13px 34px; border-radius: 100px;
  text-decoration: none; font-size: 16px; box-shadow: 0 8px 22px var(--fz-sky-a40);
}
.guide .cta .fine { color: var(--text-soft); font-size: 13px; margin: 16px 0 0; }
.guide .fine { font-size: 13px; color: var(--text-soft); }

/* ───────── الفهرس: بطاقات المواضيع ───────── */
.guide .intro { font-size: 16.5px; color: var(--text-soft); margin-bottom: 8px; }
.guide .hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; margin: 22px 0; }
.guide .hubcard {
  background: var(--glass); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 14px 44px -26px rgba(0,80,95,0.20);
  padding: 20px 22px; text-decoration: none; display: block;
  transition: transform .2s, box-shadow .2s;
}
.guide .hubcard:hover { transform: translateY(-2px); box-shadow: 0 20px 60px -22px rgba(0,80,95,0.28); }
.guide .hubcard h3 { font-size: 17.5px; font-weight: 800; color: var(--text); margin: 0 0 6px; }
.guide .hubcard p  { font-size: 14.3px; color: var(--text-soft); margin: 0 0 10px; }
.guide .hubcard .meta { font-size: 12.5px; font-weight: 800; }
.guide .soon {
  background: transparent; border: 1px dashed var(--fz-sky-a30); border-radius: 20px;
  padding: 20px 22px; color: var(--text-soft);
}
.guide .soon h3 { font-size: 17px; font-weight: 800; color: var(--text-dim); margin: 0 0 6px; }
.guide .soon p { font-size: 14px; margin: 0; }

/* ───────── الفوتر: `.foot` نفسه من customers.css، وهذا تذييل المقال فقط ───────── */
.guide .guide-col > footer {
  text-align: center; color: var(--text-soft); font-size: 13.5px;
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border);
}
.guide .guide-col > footer a { color: var(--teal-deep); }

/* ───────── الجوال ───────── */
@media (max-width: 640px) {
  .guide .guide-col { padding: 0 18px; }
  .guide .answer { padding: 20px 19px; border-radius: 20px; }
  .guide .answer p { font-size: 16.5px; }
  .guide h2 { font-size: 23px; margin: 34px 0 12px; }
  .guide .cta { padding: 26px 20px; }
  .guide table { font-size: 14px; }
  .guide th, .guide td { padding: 11px 9px; }
}

/* زرّا المتجرين في ذيل صفحات المحتوى — نفس .store-btn من customers.css (تُحمَّل هنا أيضاً)
   بلا data-fz-store: هذه الصفحات بلا سكربت عمداً (script-src 'none')، فلا شيء يقرؤه. */
.guide .store-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 18px 0 8px; }
@media (max-width: 520px) {
  .guide .store-ctas .store-btn { flex: 1; justify-content: center; padding: 12px 8px; gap: 8px; }
}
/* `.guide a` (0,1,1) يغلب `.store-btn` (0,1,0) فيصبغ نصّ الزرّ بلون التيل على تيل — مقيس باللقطة. */
.guide .store-ctas .store-btn, .guide .store-ctas .store-btn span { color: #fff; text-decoration: none; }
.guide .store-ctas .store-btn:hover, .guide .store-ctas .store-btn:hover span { text-decoration: none; }