/* ══ تخطيطُ الزوّار layouts/app — نُقلت من وسم نمطٍ مضمَّن في الرأس (القاعدة 1 · 2026-09-03) ══
   ⚖ نقلٌ حرفيّ (صفرُ hex/rgba)؛ 25 !important موروثةٌ نُقلت لا أُضيفت. تُحمَّل في الموضع نفسِه من الرأس فيبقى التتالي كما كان. */

/* ── GLOBAL MOBILE OVERFLOW FIX (RTL) ── */
body {
    background-color: var(--fnv-surface);
    color: var(--fnv-ink);
    font-family: 'Readex Pro', sans-serif !important;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.8;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative;
}

/* نسيج ورقيّ محسوس — **نسخة طبق الأصل** ممّا في `layouts/master` (طلب المالك 2026-07-20).
   كان على `master` وحده، فيرى الزائر سطحاً مسطّحاً ويرى المشترك ملمس الورق: الصفحة
   نفسها (`/options-greeks` مثلاً) تتبدّل بمجرّد تسجيل الدخول لأنّها تبدّل تخطيطها.
   z-index 500 دون ترويسة هذا التخطيط (1020) فتبقى نظيفة — كما هي دون 1030 هناك.
   ⚠️ أيّ تعديلٍ على القيم يُطبَّق على التخطيطَين معاً وإلّا عاد الانفصام. */
body::before {
/* ⛔ **أُطفئت 2026-08-21 بطلب المالك — خامتان على السطح نفسِه.**
   ⚖ **العلّةُ مقيسةٌ حيّاً**: هذه الطبقةُ `fixed · inset:0` عند الطبقة 500
     بمزجٍ `multiply` ⇒ **تمرّ فوق البطاقات نفسِها** فتمنعها أن تكون بيضاءَ نقيّة،
     وأرضيّةُ `body` تحمل شبكةَ المخطّط ⇒ فقرةُ الافتتاحيّة (‏`.fnv-mast__what`
     على الأرضيّة مباشرةً) تُظهر **الشبكةَ والحبيباتِ معاً**، والموديلُ تحتها
     يُظهر الحبيباتِ وحدَها ⇒ **عدمُ تناسقٍ بيّن**.
   ⚖ **وحكمُ المالك**: «خلفيّةُ الموديلات تبقى بيضاء · وخلفيّةُ الصفحة العامّة
     بخامة» ⇒ **خامةٌ واحدةٌ على الأرضيّة وحدَها**، وهي شبكةُ المخطّط المختارةُ
     اليومَ في استشارة التصميم.
   ⛔ **ولم تُحذَف الكتلةُ** (قاعدة 10): `display:none` **كلمةٌ واحدةٌ تُعيدها**
     إن أردتَ الحبيباتِ بدل الشبكة — وحينها تُطفأ الشبكةُ في `finviro-base.css`.
   ⚠ **وتُطبَّق على التخطيطَين معاً** كما ينبّه التعليقُ أعلاه. */
    display: none;
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.85'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    pointer-events: none;
    z-index: 500;
    opacity: 0.16;
    mix-blend-mode: multiply;
}

/* Prevent any element from breaking the viewport width */
* { box-sizing: border-box !important; }

/* Container max-width، respect Bootstrap's responsive breakpoints */
.container { max-width: 1280px; }
.container-fluid { max-width: 100%; }

img, video, canvas, svg, iframe, table {
    max-width: 100% !important;
}

/* Force CMS Text Elements to not push outside bounds (fixes CMS pasted margins) */
.editorial-article p, .editorial-article span, .editorial-article h1, 
.editorial-article h2, .editorial-article h3, .editorial-article h4, 
.editorial-article h5, .editorial-article h6, .editorial-article div,
.content-section p, .content-section span, .content-section div {
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

/* Guarantee minimum safety margin from screen edges on mobile */
@media (max-width: 767px) {
    .blog-details-content, .content-section, .editorial-article {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }
}

body p, body span, body h1, body h2, body h3, body h4, body h5, body h6,
body li, body td, body th, body div, body a {
    font-family: 'Readex Pro', sans-serif;
}
.content-section h1,.content-section h2,.content-section h3,
.content-section h4,.content-section h5,.content-section h6 { color: var(--fnv-ink); }
.content-section p,.content-section span,.content-section li { color: var(--fnv-ink-2); }
.editorial-subtitle { color: var(--fnv-ink-muted); }
.editorial-title    { color: var(--fnv-ink); }
.scroll-to-top      { display: none !important; }
/* bug-084 شبكة أمان (تُنشَر عبر resources): «.pv3 a{color:inherit}» في academy_editorial.css يجعل
   نصّ أزرار CTA السوداء يرث الأسود = غير مرئيّ. نُجبر اللون الصحيح في الوضع الساكن فقط.
   ⚠ bug-085: نستثني :hover/:focus/:active — وإلا غلبت الشبكةُ (خصوصية أعلى) قلبَ الزرّ عند
   الضغط/اللمس فيبقى النصّ بلون الخلفية الجديدة = مختفٍ (أسود→أبيض والنصّ أبيض، والعكس). */
.pv3 a.fv-btn--primary:not(:hover):not(:focus):not(:active),
.pv3 a.fnv-dash-cta:not(:hover):not(:focus):not(:active),
.pv3 a.fnv-trk__cta:not(:hover):not(:focus):not(:active),
.pv3 a.fnv-exit-cta:not(:hover):not(:focus):not(:active),
.pv3 a.pkg-cta:not(:hover):not(:focus):not(:active),
.pv3 a.fv-btn-institutional:not(:hover):not(:focus):not(:active) { color: var(--fnv-dark-text) !important; }
/* ⛔ `fnv-sticky-cta` أُخرج من القائمة (2026-07-27، bug-262): زرُّه **أبيض**
   (`background:#fff;color:#000`) — فإجباره على الأبيض جعله أبيضَ على أبيض،
   أي الخطأ ذاته الذي بُنيت الشبكة لمنعه، معكوساً. الشبكة تخصّ الأزرار الداكنة
   وحدها؛ إضافة صنفٍ إليها تستلزم التحقّق من خلفيّته أوّلاً. --- `fnv-retro__cta`
   تحوّل إلى `fnv-trk__cta` مع سجلّ الأداء الخوارزميّ. */
.pv3 a.fnv-dash-cta--ghost:not(:hover):not(:focus):not(:active),
.pv3 a.fv-btn--outline:not(:hover):not(:focus):not(:active),
.pv3 a.fnv-svc-cta:not(:hover):not(:focus):not(:active) { color: var(--fnv-ink) !important; }

/* ── Editorial Typography System ── */
/* Readex Pro: الخط الرسمي لجميع عناصر الموقع — عناوين + نصوص */
h1, h2, h3, h4, h5, h6,
.pd-hero-h1, .pd-sec-title, .pd-confirm-pill,
.pd-signal-tag, .pd-view-all, .pd-sbl-name,
.main-menu a, .header .main-menu li a {
    font-family: 'Readex Pro', sans-serif !important;
    line-height: 1.6 !important;
}
/* Readex Pro: نص الجسم والفقرات */
body p, body span, body li, body td {
    font-family: 'Readex Pro', sans-serif;
    line-height: 1.7 !important;
}
/* JetBrains Mono: أرقام وبيانات وكود */
.pd-spec-val:not(.ar), .pd-hero-num,
.pd-step-num::before, .pd-qstat-val {
    font-family:'Readex Pro', sans-serif;
}
/* منع letter-spacing على النصوص العربية */
[lang="ar"] *:not([class*="mono"]):not([class*="Mono"]):not([class*="en"]) {
    letter-spacing: 0 !important;
}
/* NEW PROFESSIONAL PRELOADER */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--fnv-surface);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.preloader.loaded {
    opacity: 0;
    visibility: hidden;
}
.preloader__logo {
    width: 160px;
    height: auto;
    margin-bottom: 35px;
    animation: pulse-elegant 2s infinite ease-in-out;
}
.preloader__text {
    font-family: 'Readex Pro', sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--fnv-ink);
    letter-spacing: 0; /* لا letter-spacing على النص العربي */
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    animation: slide-up-fade 0.8s forwards 0.3s;
    max-width: 80%;
    line-height: 1.4;
}
@keyframes pulse-elegant {
    0% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.03); opacity: 1; }
    100% { transform: scale(1); opacity: 0.85; }
}
@keyframes slide-up-fade {
    to { opacity: 1; transform: translateY(0); }
}
/* احترام تفضيل تقليل الحركة: يوقف كل الأنيميشن المستمر (الشريط/النقاط) لمن يطلبه نظامه — أخف على البطارية وأجهزة الضعيفة */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}