/* أساس فاتح مضمون + كشف الطبقة خلف الجسم على كل اللايوتات.
       نكرر الكلاس (light-style ×3) لرفع الأولوية فوق قواعد قوالب الصفحات
       التي تفرض خلفية معتمة على body/.layout-page بـ !important وبأولوية أعلى. */
    /* كسر الأبيض البارد: أرضية عاجية دافئة موحدة — إعادة تعريف --pt-bg تسري على
       كل استخداماته (أرضية premium، صفحات الرخصة، أسطح الوسائط...) في وضع النهار فقط */
    html.light-style.light-style.light-style { --pt-bg: #FDFCFA; background-color: var(--pt-bg, #FDFCFA) !important; }
    html.light-style.light-style.light-style body { background-color: transparent !important; }
    /* طبقة أساس premium (body::before): نفس هالاتها لكن بقمة دافئة بدل #FDFEFF الباردة */
    html.light-style.light-style.light-style body::before {
        background:
            radial-gradient(30rem 30rem at 18% 22%,  rgba(255, 255, 255, .65), transparent 60%),
            radial-gradient(40rem 40rem at 88% -6%,  rgba(212, 110, 42, .05), transparent 62%),
            radial-gradient(36rem 36rem at -8% 12%,  rgba(39, 76, 119, .045), transparent 62%),
            radial-gradient(32rem 32rem at 50% 118%, rgba(78, 168, 222, .04), transparent 62%),
            linear-gradient(180deg, #FEFEFD 0%, var(--pt-bg, #FDFCFA) 100%) !important;
    }
    /* حاويات Vuexy شفافة لتظهر الطبقة خلف المحتوى */
    html.light-style.light-style.light-style .layout-wrapper,
    html.light-style.light-style.light-style .layout-page,
    html.light-style.light-style.light-style .content-wrapper { background: transparent !important; }

    /* ═ الوضع الداكن الموحد: أسود محايد حقيقي — لا كحلي Vuexy ولا رمادي premium المزرق ═
       نعمق --pt-bg الداكن ونعيد رسم أساس body::before بلا اللمسات الزرقاء (جمرة نحاسية فقط) */
    html.dark-style.dark-style.dark-style {
        /* أسود محايد + تحييد زرقة عائلة البطاقات/الزجاج (نفس الإضاءة، بلا صبغة كحلية) */
        --pt-bg: #101114;
        --pt-card: #1B1C20;
        --pt-border: #2A2B30;
        --glass-bg: rgba(27, 28, 32, .68);
        --glass-bg-2: rgba(27, 28, 32, .55);
        background-color: #101114 !important;
    }
    html.dark-style.dark-style.dark-style body { background-color: transparent !important; }
    html.dark-style.dark-style.dark-style body::before {
        background:
            radial-gradient(38rem 38rem at 88% -6%, rgba(212, 110, 42, .07), transparent 60%),
            radial-gradient(34rem 34rem at -8% 12%, rgba(217, 148, 74, .05), transparent 60%),
            linear-gradient(180deg, #131418 0%, #101114 100%) !important;
    }
    html.dark-style.dark-style.dark-style .layout-wrapper,
    html.dark-style.dark-style.dark-style .layout-page,
    html.dark-style.dark-style.dark-style .content-wrapper { background: transparent !important; }
    /* بطاقة محتوى الصفحات الثابتة: page-premium يفرض زجاجا أزرق rgba(28,31,38) حرفيا — نحيده */
    html.dark-style.dark-style.dark-style .page-static .page-prose {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 24%),
            var(--glass-bg-2, rgba(27, 28, 32, .55)) !important;
    }
    /* قائمة الجوال المنسدلة في الداكن: كحلي Vuexy #2f3349 → داكن محايد
       (محصورة بمقاس الجوال — على سطح المكتب القائمة شفافة داخل حبة الشريط) */
    @media (max-width: 991.98px) {
        html.dark-style.dark-style.dark-style .layout-navbar .landing-nav-menu { background-color: #17181C !important; }
    }
    /* صفحة رخصة الحاسب في الداكن: أسطح بيضاء صلبة (بطاقات/أزرار/شارات) → داكن محايد
       — نصوصها رموز pt-text تنقلب وحدها، فقط الأسطح تحتاج القلب */
    html.dark-style.dark-style.dark-style .lh-card {
        background: var(--pt-card, #1B1C20) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .35) !important;
    }
    html.dark-style.dark-style.dark-style .lh-card--glass {
        background: linear-gradient(160deg, rgba(27, 28, 32, .72) 0%, rgba(27, 28, 32, .5) 100%) !important;
        border-color: rgba(255, 255, 255, .08) !important;
        box-shadow: 0 14px 36px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
    }
    html.dark-style.dark-style.dark-style .lh-btn-ghost { background: transparent !important; }
    html.dark-style.dark-style.dark-style .lh-chip { background: rgba(27, 28, 32, .6) !important; }
    /* رأس جدول المعايير: تدرجه الفاتح مع نص pt-text المنقلب أبيض = تباين رديء — نقلب الرأس داكنا */
    html.dark-style.dark-style.dark-style .table-custom thead th {
        background: linear-gradient(135deg, #23252B, #1B1C20) !important;
    }
    /* مركز الخدمات /hub: يعيد تعريف رموز البطاقات داخل نطاق .svch بكحلي Vuexy — نحيدها */
    html.dark-style.dark-style.dark-style .svch {
        --pt-card: #1B1C20;
        --pt-border: rgba(255, 255, 255, .08);
    }
    /* أقسام تفرض كحليا خاصا في الداكن (مثل صفحة الخطط) — نشففها ليصل الأساس العميق */
    html.dark-style.dark-style.dark-style .section-py.bg-body,
    html.dark-style.dark-style.dark-style .section-py.svch,
    html.dark-style.dark-style.dark-style .pl-wrap,
    html.dark-style.dark-style.dark-style .lh-hero { background: transparent !important; }
    /* بعض اللايوتات (front-end) تغلف الصفحة كاملة في بطاقة عليا معتمة — نجعلها شفافة فقط */
    html.light-style.light-style.light-style body > .card { background: transparent !important; box-shadow: none !important; }

    /* ═══ نمط علوي موحد: مصدر واحد لكل الموقع ═══
       كل وهج علوي في الموقع يشتق من --fc-glow و--fc-h، فلا تختلف صفحة عن أخرى.
       الصفحات الثابتة (page-static) ترسمه على غلافها لأسباب z-index لكن بنفس القيم.
       تعديل هذين المتغيرين وحدهما يعيد ضبط الوهج في كل الصفحات دفعة واحدة. */
    :root {
        --fc-glow:
            radial-gradient(1000px 620px at 100% 40px, rgba(212, 110, 42, .28) 0%, rgba(212, 110, 42, .10) 45%, transparent 73%),
            radial-gradient(1000px 620px at 0%   40px, rgba(217, 148, 74, .26) 0%, rgba(217, 148, 74, .10) 45%, transparent 73%),
            radial-gradient(1500px 520px at 50%  10px, rgba(212, 110, 42, .13) 0%, rgba(212, 110, 42, .06) 46%, transparent 73%);
    }
    /* ═ الوضع الداكن: وصفة وهج خاصة به — لا تخفيت لوصفة النهار ═
       تخفيت وصفة النهار بـopacity كان يبقي سهلها العريض ممتدا على كامل أعلى
       الصفحة، فيقرأ ضبابا بنيا راكدا بدل ضوء ينزل من الأعلى. هنا جمرة
       مركزة عند الحافة تنطفئ سريعا نزولا: ذروة أعلى، وتوقف أوسط أخفض،
       ونهاية أبكر — فتعود أرضية الهيرو سوداء محايدة قبل منتصفه. */
    html.dark-style {
        --fc-h: 660px;
        --fc-glow:
            radial-gradient(880px 480px at 100% -20px, rgba(224, 128, 52, .17) 0%, rgba(212, 110, 42, .05) 36%, transparent 66%),
            radial-gradient(880px 480px at 0%   -20px, rgba(217, 148, 74, .14) 0%, rgba(217, 148, 74, .04) 36%, transparent 66%),
            radial-gradient(1400px 380px at 50% -50px, rgba(212, 110, 42, .07) 0%, rgba(212, 110, 42, .02) 40%, transparent 68%);
    }
    .fc-stage {
        position: absolute; inset-inline: 0; top: 0; height: var(--fc-h, 880px);
        z-index: -1; pointer-events: none; overflow: hidden;
        background: var(--fc-glow);
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 44%, transparent 100%);
                mask-image: linear-gradient(180deg, #000 0%, #000 44%, transparent 100%);
    }
    .fc-stage .fc-grid {
        position: absolute; inset: 0;
        background-image:
            linear-gradient(rgba(31, 41, 55, .035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(31, 41, 55, .035) 1px, transparent 1px);
        background-size: 44px 44px;
        -webkit-mask-image: radial-gradient(70% 60% at 50% 12%, #000 0%, transparent 78%);
                mask-image: radial-gradient(70% 60% at 50% 12%, #000 0%, transparent 78%);
    }

    /* تفريغ خلفيات الأقسام الخاصة لتظهر الطبقة المشتركة */
    .section-py.bg-body,
    .section-py.svch,
    .lh-hero { background: transparent !important; }
    .svch::before,
    .svch .svch-orb { display: none !important; }

    /* الصفحة الرئيسية وحدها لها مسرحها الخاص — نستثني الصفحات الثابتة (/page/* عليها .page-static) */
    body:has(.hp-hero):not(:has(.page-static)) .fc-stage { display: none; }
    /* الرئيسية v3: هيروها يرسم خلفية paper بيضاء معتمة تحجب الطبقة الموحدة —
       نشففها (وضع النهار فقط) فيصل وهج القمة من أقصى أعلى الصفحة كبقية الصفحات */
    html.light-style:not([data-theme='theme-default-dark']) .h2-body.h2-v3 .hero { background: transparent !important; }
    /* وبنسخة مخففة (نصف الشدة — نفس درجة اللياوتات المخففة) لأن للهيرو زخارفه الخاصة */
    body:has(.h2-body.h2-v3) .fc-stage { opacity: .5; }
    /* الصفحات الثابتة تخفي زخارف الهيرو الخاصة بها لتظهر الطبقة الموحدة بلا ازدواج */
    .page-static .hp-orb,
    .page-static .hp-grid-lines { display: none !important; }
    /* وزخارف هيرو Vuexy الأصلية أيضا: في الداكن ترسم صورة بنفسجية (hero-bg-dark.png)
       وكحليا #2f3349 عبر ::before/::after على كامل الصفحة — وهي مصدر «البنفسجي» */
    .page-static .landing-hero::before,
    .page-static .landing-hero::after { display: none !important; content: none !important; }
    html.dark-style.dark-style.dark-style .page-static .landing-hero { background: transparent !important; }
    /* شارة الهيرو في الصفحات الثابتة: النقطة النابضة وحدها بلا نص «معلم الحاسب»
       (النص عقدة نصية داخل الشارة — نصفر الخط فيختفي، والنقطة مقاسها بالبكسل فلا تتأثر) */
    .page-static .hp-eyebrow { font-size: 0 !important; gap: 0 !important; }
    /* الصفحات الثابتة: هيكلها (.scrollspy-example) يحجب الطبقة المشتركة ذات الـ z السالب،
       لذا نخفيها ونرسم نفس الوهج مباشرة على غلاف الصفحة (مضمون الظهور خلف المحتوى). */
    body:has(.page-static) .fc-stage { display: none; }
    /* نفس قيم الوهج الافتراضي (صفحة الخدمات) حرفيا — لا نسخة مقواة هنا.
       الشبكة الخفيفة مرسومة ضمن نفس الرزمة (طبقات z السالبة محجوبة في هذا الهيكل):
       فوق الشبكة طبقة تغطية متدرجة بلون الأرضية تحاكي تلاشي fc-grid نزولا. */
    html.light-style .page-static {
        background:
            var(--fc-glow),
            radial-gradient(70% 430px at 50% 90px, rgba(253, 252, 250, 0) 0%, rgba(253, 252, 250, 0) 40%, rgba(253, 252, 250, .85) 64%, rgb(253, 252, 250) 78%),
            linear-gradient(rgba(31, 41, 55, .024) 1px, transparent 1px),
            linear-gradient(90deg, rgba(31, 41, 55, .024) 1px, transparent 1px);
        background-size: auto, auto, auto, auto, 44px 44px, 44px 44px;
        background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
    }
    /* الوضع الداكن للصفحات الثابتة: نفس وصفة الوهج الداكنة حرفيا (مصدر واحد) —
       بلا غطاء فاتح ولا شبكة (الغطاء الفاتح كان يغسل الأرضية الداكنة) */
    html.dark-style .page-static {
        background: var(--fc-glow);
        background-repeat: no-repeat;
    }
    /* ═ سبب «الوهج لا يصل إلى الزاويتين» في الداكن ═
       custom-overrides يرسم على الشريط الخارجي (.layout-navbar) لونا معتما
       rgb(19,20,23) بعرض الصفحة وارتفاع ~97px، فيحجب قمة التدرج حيث ذروتها
       عند الزاويتين تماما — فيبدأ الوهج ضعيفا من تحت الشريط. في وضع النهار
       الشريط الخارجي شفاف أصلا (الحبة الداخلية .landing-navbar وحدها ملونة)،
       فنمنح الداكن التكافؤ نفسه. حالة التمرير (navbar-active) لها تدرجها أدناه. */
    html.dark-style.dark-style.dark-style .layout-navbar:not(.navbar-active) {
        background-color: transparent !important;
    }
    /* تلاش أبكر في الداكن ليكتمل النزول قبل منتصف الهيرو (وصفة الوهج أعلاه داكنة أصلا،
       فلا حاجة لتخفيت opacity — التخفيت هو ما كان ينتج الضباب الراكد) */
    html.dark-style .fc-stage {
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 24%, transparent 94%);
                mask-image: linear-gradient(180deg, #000 0%, #000 24%, transparent 94%);
    }
    /* الشبكة الخفيفة في الداكن: خطوطها رمادية داكنة فتذوب في الأرضية — نقلبها ضوءا
       خافتا جدا، فيبقى للقمة الملمس نفسه الذي لها في النهار */
    html.dark-style .fc-stage .fc-grid {
        background-image:
            linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
    }

    /* الوهج ينزل من أقصى أعلى الصفحة: checkout-premium يرسم شريطا فاتحا شبه معتم (82px)
       خلف شريط التنقل فيغسل قمة الوهج — نلغيه هنا (هذه الطبقة تحمل بعده فتغلبه). */
    body:has(.co-wrap) nav.layout-navbar { background-image: none !important; }
    /* الصفحة بعرض كامل بلا هوامش جانبية — نفسح شريطا علويا بنفس مسافة صفحة الخدمات (8rem/6rem) */
    body:has(.co-wrap) .first-section-pt { padding-top: 8rem !important; }
    /* الصفحات الثابتة: هامش .section-py العلوي 88px بينما الشريط المثبت 97px،
       فيبدأ المحتوى تحته بـ9px (تصادم، لا ضيق). نفس مسافة الخدمات/الدفع. */
    .page-static .landing-hero { padding-top: 8rem !important; }
    @media (max-width: 767.98px) {
        body:has(.co-wrap) .first-section-pt { padding-top: 6rem !important; }
        .page-static .landing-hero { padding-top: 6rem !important; }
    }

    /* شريط التنقل عند التمرير (navbar-active): كسر الأبيض الصافي #fff
       بدرجة كريمية دافئة على هوية الموقع + حدود وظل دافئين */
    html.light-style.light-style .layout-navbar.navbar-active .navbar.landing-navbar {
        background: linear-gradient(180deg, rgba(255, 254, 252, .96), rgba(254, 252, 249, .96)) !important;
        border-color: rgba(212, 110, 42, .07) !important;
        box-shadow: 0 .125rem .35rem rgba(140, 90, 40, .06) !important;
    }
    /* وفي الداكن: أسود عميق من عائلة الأرضية بدل كحلي Vuexy #2f3349 */
    html.dark-style.dark-style .layout-navbar.navbar-active .navbar.landing-navbar {
        background: linear-gradient(180deg, rgba(26, 29, 36, .96), rgba(20, 22, 27, .96)) !important;
        border-color: rgba(212, 110, 42, .16) !important;
        box-shadow: 0 .125rem .4rem rgba(0, 0, 0, .35) !important;
    }

    /* نسخة مخففة — تفعل بضبط $fcSoft = true قبل تضمين الطبقة */
    .fc-stage.fc-stage--soft { opacity: .5; }

    /* الجوال: نعيد تعريف المصدر نفسه فقط (ارتفاع + تدرجات أصغر) — نفس النمط بمقاس أصغر */
    @media (max-width: 767.98px) {
        .fc-stage { --fc-h: 560px; }
        :root {
            --fc-glow:
                radial-gradient(560px 420px at 100% 24px, rgba(212, 110, 42, .28) 0%, rgba(212, 110, 42, .10) 46%, transparent 74%),
                radial-gradient(560px 420px at 0%   24px, rgba(217, 148, 74, .26) 0%, rgba(217, 148, 74, .10) 46%, transparent 74%),
                radial-gradient(900px 320px at 50%   8px, rgba(212, 110, 42, .12) 0%, rgba(212, 110, 42, .05) 46%, transparent 74%);
        }
        /* ونفس التصغير لوصفة الداكن — قواعدها أعلى أولوية من :root فلا يكفي ضبط الفاتحة */
        html.dark-style .fc-stage { --fc-h: 460px; }
        html.dark-style {
            --fc-glow:
                radial-gradient(520px 380px at 100% -14px, rgba(224, 128, 52, .17) 0%, rgba(212, 110, 42, .05) 38%, transparent 68%),
                radial-gradient(520px 380px at 0%   -14px, rgba(217, 148, 74, .14) 0%, rgba(217, 148, 74, .04) 38%, transparent 68%),
                radial-gradient(900px 300px at 50%  -34px, rgba(212, 110, 42, .07) 0%, rgba(212, 110, 42, .02) 42%, transparent 70%);
        }
    }