/* تعريف خط سومار الأصلي والمطور للموقع */
        @font-face {
            font-family: 'Somar';
            src: url('../fonts/somar/ArbFONTS-Somar-Regular.otf') format('opentype'),
                url('../fonts/somar/Somar-Regular.woff2') format('woff2');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Somar';
            src: url('../fonts/somar/ArbFONTS-Somar-Medium.otf') format('opentype'),
                url('../fonts/somar/Somar-Medium.woff2') format('woff2');
            font-weight: 500;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Somar';
            src: url('../fonts/somar/ArbFONTS-Somar-SemiBold.otf') format('opentype'),
                url('../fonts/somar/Somar-SemiBold.woff2') format('woff2');
            font-weight: 600;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Somar';
            src: url('../fonts/somar/ArbFONTS-Somar-Bold.otf') format('opentype'),
                url('../fonts/somar/Somar-Bold.woff2') format('woff2');
            font-weight: 700;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Somar';
            src: url('../fonts/somar/ArbFONTS-Somar-ExtraBold.otf') format('opentype');
            font-weight: 800;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Somar';
            src: url('../fonts/somar/ArbFONTS-Somar-Black.otf') format('opentype');
            font-weight: 900;
            font-style: normal;
            font-display: swap;
        }


        /* ==========================================================================
           1. نظام الألوان والمتغيرات المحدثة (Premium HSL Design Tokens)
           ========================================================================== */
        :root {
            /* لوحة الهوية الأصلية v7 — تيل غامق + ذهبي */
            --primary-dark-teal: #0A4D44;
            --primary-teal: #107062;
            --primary-teal-light: #168D7C;
            --accent-gold: #C59B27;
            --accent-gold-hover: #A37E1C;
            --bg-mint-light: #E8F6F3;
            /* خلفية نعناعية فاتحة معتمدة */
            --bg-mint-ultra-light: #F6FCFA;
            /* خلفية ناصعة مائلة للنعناعي */
            --mint-accent: #D8F0E9;
            /* نعناعي أكثر تشبعًا للعناصر البارزة */
            --mint-accent-hover: #C4E8DC;
            --mint-accent-border: #CDEAE0;
            --bg-white: #ffffff;
            --bg-page-gradient: linear-gradient(180deg, #FFFFFF 0%, #EAF7F2 30%, #D8F0E9 70%, #FFFFFF 100%);

            --text-dark: #1A1A1A;
            --text-muted: #5E6B69;
            --text-white: #ffffff;



            /* الظلال الفاخرة */
            --shadow-sm: 0 5px 15px rgba(10, 77, 68, 0.03);
            --shadow-md: 0 10px 30px rgba(10, 77, 68, 0.06);
            --shadow-lg: 0 20px 40px rgba(10, 77, 68, 0.1);
            --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.06);

            /* الحواف والانحناءات المبتكرة */
            --radius-sm: 8px;
            --radius-md: 16px;
            --radius-lg: 24px;
            --radius-xl: 40px;
            --radius-pill: 100px;

            /* الخطوط والسرعة */
            --font-ar: 'Somar', sans-serif;
            --font-en: 'Somar', sans-serif;
            --transition-base: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            --transition-smooth: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

            /* الارتفاع الفعلي للهيدر بصفّيه — قيمة افتراضية، تُضبط بدقة عبر JS
               (measureHeaderHeight في home.blade.php) فور تحميل الصفحة، حتى لا نعتمد
               على تخمين ثابت بالبكسل لموضع قائمة الجوال المنسدلة. */
            --header-h: 138px;
        }

        /* إعدادات الصفحة الأساسية */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            outline: none;
        }

        body {
            font-family: 'Somar', sans-serif;
            background: var(--bg-page-gradient);
            color: var(--text-dark);
            line-height: 1.8;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* إعدادات الخط الإنجليزي — استخدام Outfit للغة الإنجليزية واللغات اللاتينية لمنع خط سومار المصغر */
        html[lang="en"] body,
        html[dir="ltr"] body,
        html[lang="en"] button,
        html[lang="en"] input,
        html[lang="en"] select,
        html[lang="en"] textarea,
        html[lang="en"] h1,
        html[lang="en"] h2,
        html[lang="en"] h3,
        html[lang="en"] h4,
        html[lang="en"] h5,
        html[lang="en"] h6,
        html[lang="en"] p,
        html[lang="en"] span,
        html[lang="en"] a {
            font-family: var(--font-en) !important;
        }

        a {
            text-decoration: none;
            color: inherit;
            transition: var(--transition-base);
        }

        ul {
            list-style: none;
        }

        .container {
            width: 90%;
            max-width: 1240px;
            margin: 0 auto;
            position: relative;
        }

        .section-padding {
            padding: 100px 0;
        }

        /* العناوين والترويسات الفرعية */
        .section-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .section-header .sub-badge {
            display: inline-block;
            background: rgba(20, 112, 98, 0.08);
            color: var(--primary-teal);
            font-size: 0.85rem;
            font-weight: 800;
            padding: 6px 18px;
            border-radius: var(--radius-pill);
            margin-bottom: 15px;
            border: 1px solid rgba(20, 112, 98, 0.12);
        }

        .section-header h2 {
            font-size: 2.2rem;
            font-weight: 800;
            color: var(--primary-dark-teal);
            margin-bottom: 15px;
        }

        .section-header p {
            color: var(--text-muted);
            max-width: 650px;
            margin: 0 auto;
            font-size: 1rem;
        }

        /* الأزرار المطورة */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12px 32px;
            border-radius: var(--radius-pill);
            font-weight: 700;
            font-size: 0.95rem;
            cursor: pointer;
            border: none;
            transition: var(--transition-base);
            gap: 10px;
            font-family: var(--font-ar);
            box-shadow: var(--shadow-sm);
        }

        .btn-teal {
            background: var(--primary-teal);
            color: var(--text-white);
        }

        .btn-teal:hover {
            background: var(--primary-dark-teal);
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
        }

        .btn-gold {
            background: var(--accent-gold);
            color: var(--text-white);
        }

        .btn-gold:hover {
            background: var(--accent-gold-hover);
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
        }

        .btn-outline {
            background: transparent;
            color: var(--primary-teal);
            border: 2px solid var(--primary-teal);
        }

        .btn-outline:hover {
            background: var(--primary-teal);
            color: var(--text-white);
            transform: translateY(-3px);
        }

        .btn-white {
            background: var(--bg-white);
            color: var(--primary-teal);
        }

        .btn-white:hover {
            background: var(--bg-mint-light);
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
        }

        /* ==========================================================================
           2. شريط التنقل المتطابق بالقصة المائلة (Luxury Slanted Slanted Nav)
           ========================================================================== */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            padding: 0;
            background: transparent;
            transition: background 0.3s ease, box-shadow 0.3s ease;
        }

        header.header-scrolled {
            background: rgba(10, 77, 68, 0.96) !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
        }

        /* الهيدر الآن صفّان مكدّسان عمودياً: صف الشعار+الأزرار، ثم صف القائمة
           الأفقية أسفله — بدل الصف الواحد القديم (الشعار يسار + شريط القائمة يمين). */
        .header-container {
            display: flex;
            flex-direction: column;
        }

        /* الصف الأول: الشعار + أزرار الإجراءات (أخضر داكن متناسق) */
        .voc-header-row1 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 84px;
            padding: 0 40px;
            background: var(--primary-dark-teal);
            position: relative;
            z-index: 10;
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        }

        .logo-box {
            display: flex;
            align-items: center;
            padding: 0;
            background: transparent;
            box-shadow: none;
            border-bottom: 0;
            flex-shrink: 1;
            min-width: 0;
        }

        .logo-box a {
            display: flex;
            align-items: center;
            max-width: 100%;
        }

        .logo-box img {
            height: 46px;
            max-width: 100%;
            object-fit: contain;
            display: block;
        }

        /* الصف الأول أخضر داكن — اللوجو الأبيض هو الأنسب له */
        .logo-box .logo-white {
            display: block;
        }

        .logo-box .logo-color {
            display: none;
        }

        /* الصف الثاني: شريط القائمة الأفقية — داكن بفاصل رفيع عن الصف الأول */
        .nav-slanted-bar {
            width: 100%;
            background: transparent;
            display: flex;
            align-items: center;
            padding: 0 40px;
            position: relative;
            z-index: 1;
        }

        /* full-width dark-teal background layer, no clip-path (no more cut corner) */
        .nav-slanted-bar::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--primary-dark-teal);
            box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
            z-index: -1;
        }

        /* ——— أزرار الصف الأول (على خلفية خضراء داكنة) ——— */
        .voc-header-row1 .nav-actions {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-shrink: 0;
        }

        .voc-header-row1 .nav-actions .lang-btn,
        .voc-header-row1 .nav-actions .nav-link-plain {
            color: #ffffff !important;
            border: 1px solid rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.08);
            border-radius: var(--radius-pill);
            font-weight: 700;
            font-size: 0.85rem;
            padding: 0 16px;
            height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            white-space: nowrap;
            transition: var(--transition-base);
            opacity: 1;
        }

        .voc-header-row1 .nav-actions .lang-btn:hover,
        .voc-header-row1 .nav-actions .nav-link-plain:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: #ffffff;
            color: #ffffff !important;
        }

        .voc-header-row1 .voc-nav-cart {
            color: #ffffff;
            opacity: 1;
            font-size: 1.25rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 38px;
            width: 38px;
            border-radius: 50%;
            transition: var(--transition-base);
        }

        .voc-header-row1 .voc-nav-cart:hover {
            color: var(--accent-gold);
            background: rgba(255, 255, 255, 0.15);
        }

        .voc-header-row1 .menu-toggle {
            color: #ffffff !important;
            font-size: 1.4rem;
            display: none;
            align-items: center;
            justify-content: center;
            height: 38px;
            width: 38px;
            border-radius: 8px;
            cursor: pointer;
            transition: var(--transition-base);
            line-height: 1;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.25);
        }

        .voc-header-row1 .menu-toggle:hover {
            background: rgba(255, 255, 255, 0.2);
            color: #ffffff !important;
            border-color: #ffffff;
        }

        .nav-links-menu {
            display: flex;
            flex-wrap: nowrap;
            gap: 4px;
            align-items: center;
        }

        .nav-links-menu > li {
            flex-shrink: 0;
        }

        /* عناصر "المزيد" مُفكّكة إلى صفوف مستقلة مخصّصة للجوال فقط (انظر
           media query أدناه اللي تُظهرها + تُخفي زر "المزيد" نفسه هناك) */
        .mobile-only-nav-item {
            display: none;
        }

        /* أزرار الحساب/انضم الآن المكررة أسفل لوحة القائمة المنسدلة — مخفية دائماً
           على الشاشات الكبيرة، تُظهر فقط ضمن media query الجوال (≤1024px) أدناه؛
           النسخة الأصلية تبقى في .voc-header-row1 .nav-actions هناك */
        .nav-collapse-actions {
            display: none;
        }

        /* رابط الشريط العلوي — شكل "كبسولة" (pill) بخلفية تظهر عند hover/active
           بدل الخط الذهبي تحت النص، لإحساس أنعم وأقرب لتصميم الموقع المرجعي.
           محدد "li>a" (لا "li a") عمداً — يقتصر على رابط الشريط المباشر فقط،
           وإلا يتسرّب هذا التنسيق (خلفية/display) لأي رابط متداخل داخل
           القوائم المنسدلة لأنها أيضاً من نسل .nav-links-menu. */
        .nav-links-menu li>a {
            color: rgba(255, 255, 255, 0.82);
            font-size: 0.92rem;
            font-weight: 600;
            position: relative;
            padding: 9px 14px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            transition: background-color 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        .nav-links-menu li>a:hover {
            color: var(--text-white);
            background: rgba(255, 255, 255, 0.12);
        }

        .nav-links-menu li>a.active {
            color: var(--accent-gold);
            background: rgba(255, 255, 255, 0.14);
        }

        /* أيقونة العنصر في الشريط (من حقل icon بقاعدة البيانات) */
        .nav-links-menu li>a .nav-link-icon {
            font-size: 0.9rem;
            margin-inline-end: 7px;
            opacity: 0.85;
            flex-shrink: 0;
        }

        .nav-links-menu li>a:hover .nav-link-icon,
        .nav-links-menu li>a.active .nav-link-icon {
            opacity: 1;
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 20px;
            color: var(--text-white);
            flex-shrink: 0;
        }

        /* LTR / English layout adjustments to prevent menu wrapping & crowding */
        html[dir="ltr"] .nav-links-menu {
            gap: 17px;
        }

        html[dir="ltr"] .nav-actions {
            gap: 13px;
        }

        html[dir="ltr"] .btn-nav-join {
            padding: 8px 16px;
            white-space: nowrap;
        }

        .nav-actions .lang-btn {
            font-family: var(--font-en);
            font-weight: 700;
            font-size: 0.9rem;
            opacity: 0.9;
            cursor: pointer;
            border: 1px solid rgba(255, 255, 255, 0.25);
            padding: 6px 14px;
            border-radius: var(--radius-pill);
            transition: var(--transition-base);
        }

        .nav-actions .lang-btn:hover {
            background: var(--primary-teal);
            border-color: var(--primary-teal);
        }

        .nav-actions .search-btn {
            font-size: 1.1rem;
            opacity: 0.9;
            cursor: pointer;
        }

        .nav-actions .search-btn:hover {
            color: var(--accent-gold);
        }

        /* زر تواصل معنا */
        .btn-nav-contact {
            background: var(--accent-gold);
            color: var(--text-white);
            padding: 8px 22px;
            border-radius: var(--radius-pill);
            font-size: 0.88rem;
            font-weight: 700;
        }

        .btn-nav-contact:hover {
            background: var(--text-white);
            color: var(--primary-dark-teal);
            transform: translateY(-2px);
        }

        /* الموبايل نيفاغيتور */
        .menu-toggle {
            display: none;
            color: var(--text-white);
            font-size: 1.5rem;
            cursor: pointer;
        }

        /* ==========================================================================
           2b. القوائم المنسدلة (Dropdown Menus)
           ========================================================================== */

        .nav-links-menu li.has-dropdown {
            position: relative;
        }

        .nav-links-menu li.has-dropdown>a .caret {
            font-size: 0.68rem;
            margin-inline-start: 5px;
            transition: transform 0.25s ease;
            vertical-align: middle;
            display: inline-block;
        }

        /* القائمة المنسدلة الأساسية */
        .nav-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            min-width: 230px;
            background: #fff;
            border-radius: 14px;
            box-shadow: 0 20px 50px rgba(10, 77, 68, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
            padding: 8px 0;
            opacity: 0;
            visibility: hidden;
            transform: translateY(8px);
            transition: opacity 0.28s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.28s;
            z-index: 500;
            border: 1px solid rgba(16, 112, 98, 0.1);
            /* overflow-y:auto — قوائم طويلة (البرامج مثلاً 11 عنصراً) تتمدد بلا حدود
               بدون هذا (position:absolute بارتفاع تلقائي)، فتخرج عن الشاشة على نوافذ
               قصيرة الارتفاع بلا أي وسيلة للنزول إليها. overflow-x يبقى hidden لقصّ
               الزوايا المدوّرة كما كان. */
            max-height: min(75vh, 520px);
            overflow: hidden auto;
        }

        /* ملاحظة: القائمة تلامس الرابط مباشرة (top: 100%، بدون فجوة) عمداً —
           أي فجوة فارغة هنا تُخرج الفأرة من نطاق <li> أثناء النزول المائل
           الطبيعي نحو القائمة فتُغلق قبل الوصول لها. الظل الكبير هو ما
           يعطي إحساس "البطاقة العائمة" بدل الاعتماد على فجوة فعلية. */

        html[dir="ltr"] .nav-dropdown {
            right: auto;
            left: 0;
        }

        .nav-dropdown.edge-anchor {
            overflow: visible;
        }

        /* عنصر أقصى الشريط (مثل "المزيد") — تُفتح قائمته نحو داخل الشريط بدل خارج
           حدود الشاشة، بصرف النظر عن اتجاه اللغة، لأنه آخر عنصر في تدفّق الهيدر */
        .nav-dropdown.edge-anchor {
            right: auto !important;
            left: 0 !important;
        }

        html[dir="ltr"] .nav-dropdown.edge-anchor {
            left: auto !important;
            right: 0 !important;
        }

        /* روابط القائمة المنسدلة — نص + أيقونة */
        .nav-dropdown a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 18px;
            color: var(--text-dark) !important;
            font-size: 0.88rem;
            font-weight: 600;
            white-space: nowrap;
            transition: background 0.18s, color 0.18s;
            text-decoration: none;
        }

        /* تسطير الشريط العلوي الذهبي (.nav-links-menu li a::after) يتسرّب افتراضياً لأي
           رابط متداخل داخل القوائم المنسدلة (محدد وصفي عام) — يُلغى صراحةً هنا */
        .nav-dropdown a::after,
        .nav-subitem-trigger::after {
            display: none !important;
        }

        html[dir="rtl"] .nav-dropdown a {
            flex-direction: row-reverse;
            justify-content: flex-end;
        }

        .nav-dropdown a:hover {
            background: var(--bg-mint-ultra-light);
            color: var(--primary-teal) !important;
        }

        /* أيقونة السهم داخل كل رابط */
        .nav-dropdown a .nav-item-icon {
            font-size: 0.65rem;
            color: var(--primary-teal);
            flex-shrink: 0;
            opacity: 0.7;
        }

        .nav-dropdown a:hover .nav-item-icon {
            opacity: 1;
        }

        /* ——— عنصر داخل قائمة منسدلة له فروع خاصة به (مثل "التطوع"/"الرعايات" ضمن
           "المزيد") — فرعه (.nav-subdropdown) بنفس تنسيق وسلوك .nav-dropdown
           تماماً (نفس الصندوق/الظل/التقويس/المحاذاة)، فرقه الوحيد أنه يفتح أسفل
           صف فرعي بدل عنصر الشريط الرئيسي مباشرة. ——— */
        .nav-subitem {
            position: relative;
            display: block;
        }

        .nav-sub-caret {
            font-size: 0.68rem;
            margin-inline-start: 5px;
            transition: transform 0.25s ease;
            vertical-align: middle;
            display: inline-block;
            color: var(--primary-teal);
        }

        /* القائمة الفرعية (Flyout): تفتح في الجهة اليسرى في RTL بجانب السهم المُشير لليسار */
        /* تلامس القائمة الفرعية العنصر الأب مباشرة (right: 100%، بدون فجوة)
           لنفس سبب .nav-dropdown أعلاه — أي فجوة فعلية بين العنصر وفرعه
           الجانبي تُفلت الفأرة من نطاق <li> فتُغلق القائمة قبل الوصول إليها؛
           الجسر الوهمي القديم (::before) كان عديم الفائدة أصلاً بسبب
           overflow: hidden على هذا العنصر (يقصّ أي محتوى خارج حدوده). */
        .nav-subdropdown {
            position: absolute;
            top: -6px;
            right: 100%;
            left: auto;
            min-width: 220px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 15px 40px rgba(10, 77, 68, 0.16), 0 2px 10px rgba(0, 0, 0, 0.08);
            padding: 8px 0;
            opacity: 0;
            visibility: hidden;
            transform: translateX(8px);
            transition: opacity 0.28s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.28s;
            z-index: 510;
            border: 1px solid rgba(16, 112, 98, 0.12);
            overflow: hidden;
        }

        html[dir="ltr"] .nav-subdropdown {
            right: auto;
            left: 100%;
            transform: translateX(-8px);
        }

        .nav-subitem.open>.nav-subdropdown {
            opacity: 1;
            visibility: visible;
            transform: translateX(0);
        }

        .nav-subitem.open>.nav-subitem-trigger .nav-sub-caret {
            transform: rotate(-180deg);
        }

        html[dir="ltr"] .nav-subitem.open>.nav-subitem-trigger .nav-sub-caret {
            transform: rotate(180deg);
        }

        /* ——— Mega dropdown (أعمدة متعددة) ——— */
        .nav-dropdown.mega {
            display: flex;
            flex-direction: row;
            padding: 0;
        }



        .nav-col {
            flex: 1;
            padding: 14px 0 18px;
            border-inline-start: 1px solid rgba(16, 112, 98, 0.08);
            min-width: 0;
        }

        .nav-col:first-child {
            border-inline-start: none;
        }

        /* عنوان العمود — مستقل تماماً عن .nav-dropdown a */
        .nav-col>.nav-col-title {
            display: block;
            padding: 8px 18px 10px;
            font-size: 0.75rem;
            font-weight: 800;
            color: var(--primary-teal);
            letter-spacing: 0.04em;
            border-bottom: 1px solid rgba(16, 112, 98, 0.1);
            margin-bottom: 6px;
            background: rgba(196, 236, 213, 0.25);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* ——— Mega dropdown: right tab list + left active panel ——— */
        .nav-tab-radio {
            display: none;
        }

        .nav-tab-list {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 170px;
            padding: 12px 8px 12px 14px;
            max-height: min(70vh, 460px);
            overflow-y: auto;
        }

        .nav-tab-label,
        .nav-tab-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 11px 14px;
            border-radius: 10px;
            font-weight: 800;
            font-size: 0.85rem;
            color: var(--text-dark) !important;
            cursor: pointer;
            transition: var(--transition-base);
            text-decoration: none;
        }

        .nav-tab-label i {
            font-size: 0.68rem;
            opacity: 0.55;
        }

        .nav-tab-label:hover,
        .nav-tab-link:hover {
            background: var(--bg-mint-ultra-light);
            color: var(--primary-teal) !important;
        }

        /* لا توجد لوحة ظاهرة افتراضيًا — القائمة تبدأ ضيقة بعمود واحد فقط
   (قائمة الأقسام)، وتتّسع لتكشف عمود الروابط فقط عند تمرير الفأرة
   على قسم محدد */
        .nav-tab-panels {
            flex: 0 0 auto;
            width: 0;
            max-width: 0;
            padding: 12px 0;
            border-inline-start: 0 solid transparent;
            overflow: hidden;
            display: flex;
            transition: width 0.2s ease, max-width 0.2s ease, padding 0.2s ease, border-color 0.2s ease;
        }

        .nav-tab-panel {
            display: none;
            flex-direction: column;
            gap: 2px;
            width: 220px;
            max-height: min(70vh, 460px);
            overflow-y: auto;
            padding-inline-end: 4px;
        }

        /* شريط التمرير الناعم للقوائم الكبيرة */
        .nav-tab-list::-webkit-scrollbar,
        .nav-tab-panels::-webkit-scrollbar,
        .nav-tab-panel::-webkit-scrollbar {
            width: 4px;
        }
        .nav-tab-list::-webkit-scrollbar-thumb,
        .nav-tab-panels::-webkit-scrollbar-thumb,
        .nav-tab-panel::-webkit-scrollbar-thumb {
            background: rgba(10, 77, 68, 0.25);
            border-radius: 99px;
        }
        .nav-tab-list::-webkit-scrollbar-track,
        .nav-tab-panels::-webkit-scrollbar-track,
        .nav-tab-panel::-webkit-scrollbar-track {
            background: transparent;
        }

        /* عنوان القسم الأب داخل لوحته — مفيد فقط على الجوال حيث .nav-tab-label
           (التبويب) مخفي؛ على الديسكتوب التبويب نفسه هو العنوان فيبقى هذا مخفياً */
        .nav-tab-panel-title {
            display: none;
        }

        .nav-tab-radio:nth-of-type(1):checked~.nav-tab-list .nav-tab-label:nth-child(1),
        .nav-tab-radio:nth-of-type(2):checked~.nav-tab-list .nav-tab-label:nth-child(2),
        .nav-tab-radio:nth-of-type(3):checked~.nav-tab-list .nav-tab-label:nth-child(3),
        .nav-tab-radio:nth-of-type(4):checked~.nav-tab-list .nav-tab-label:nth-child(4),
        .nav-tab-radio:nth-of-type(5):checked~.nav-tab-list .nav-tab-label:nth-child(5),
        .nav-tab-radio:nth-of-type(6):checked~.nav-tab-list .nav-tab-label:nth-child(6),
        .nav-tab-radio:nth-of-type(7):checked~.nav-tab-list .nav-tab-label:nth-child(7),
        .nav-tab-radio:nth-of-type(8):checked~.nav-tab-list .nav-tab-label:nth-child(8),
        #tab-overflow-0:checked~.nav-tab-list label[for="tab-overflow-0"],
        #tab-overflow-1:checked~.nav-tab-list label[for="tab-overflow-1"],
        #tab-overflow-2:checked~.nav-tab-list label[for="tab-overflow-2"],
        #tab-overflow-3:checked~.nav-tab-list label[for="tab-overflow-3"],
        #tab-overflow-4:checked~.nav-tab-list label[for="tab-overflow-4"] {
            background: var(--primary-dark-teal) !important;
            color: var(--text-white) !important;
        }

        .nav-tab-radio:nth-of-type(1):checked~.nav-tab-panels,
        .nav-tab-radio:nth-of-type(2):checked~.nav-tab-panels,
        .nav-tab-radio:nth-of-type(3):checked~.nav-tab-panels,
        .nav-tab-radio:nth-of-type(4):checked~.nav-tab-panels,
        .nav-tab-radio:nth-of-type(5):checked~.nav-tab-panels,
        .nav-tab-radio:nth-of-type(6):checked~.nav-tab-panels,
        .nav-tab-radio:nth-of-type(7):checked~.nav-tab-panels,
        .nav-tab-radio:nth-of-type(8):checked~.nav-tab-panels,
        .nav-dropdown input[id^="tab-overflow-"]:checked~.nav-tab-panels {
            width: 220px;
            max-width: 220px;
            padding: 12px 14px 12px 10px;
            border-inline-start: 1px solid rgba(16, 112, 98, 0.12);
            max-height: min(70vh, 460px);
            overflow-y: auto;
        }

        .nav-tab-radio:nth-of-type(1):checked~.nav-tab-panels .nav-tab-panel:nth-child(1),
        .nav-tab-radio:nth-of-type(2):checked~.nav-tab-panels .nav-tab-panel:nth-child(2),
        .nav-tab-radio:nth-of-type(3):checked~.nav-tab-panels .nav-tab-panel:nth-child(3),
        .nav-tab-radio:nth-of-type(4):checked~.nav-tab-panels .nav-tab-panel:nth-child(4),
        .nav-tab-radio:nth-of-type(5):checked~.nav-tab-panels .nav-tab-panel:nth-child(5),
        .nav-tab-radio:nth-of-type(6):checked~.nav-tab-panels .nav-tab-panel:nth-child(6),
        .nav-tab-radio:nth-of-type(7):checked~.nav-tab-panels .nav-tab-panel:nth-child(7),
        .nav-tab-radio:nth-of-type(8):checked~.nav-tab-panels .nav-tab-panel:nth-child(8),
        #tab-overflow-0:checked~.nav-tab-panels #panel-overflow-0,
        #tab-overflow-1:checked~.nav-tab-panels #panel-overflow-1,
        #tab-overflow-2:checked~.nav-tab-panels #panel-overflow-2,
        #tab-overflow-3:checked~.nav-tab-panels #panel-overflow-3,
        #tab-overflow-4:checked~.nav-tab-panels #panel-overflow-4 {
            display: flex;
        }

        @media (max-width: 1024px) {
            /* أقسام "المزيد" التي بلا فروع (روابط مباشرة) تعيش داخل .nav-tab-list
               وحدها — إخفاء القائمة بالكامل كان يُسقطها من الشاشة، فنُخفي فقط
               تبويبات الفئات (.nav-tab-label) ونُبقي الروابط المباشرة ظاهرة */
            .nav-tab-list {
                display: flex;
                flex-direction: column;
                gap: 0;
                min-width: 0;
                padding: 0;
            }

            .nav-tab-label {
                display: none;
            }

            .nav-tab-link {
                color: rgba(255, 255, 255, 0.82) !important;
                padding: 12px 16px;
                border-radius: 0;
            }

            .nav-tab-link:hover {
                background: rgba(255, 255, 255, 0.06);
                color: #fff !important;
            }

            .nav-tab-panels {
                /* القاعدة الأصلية (display:flex بدون flex-direction) تصطف أفقياً
                   افتراضياً — كانت تضع لوحات الأقسام (مثل "التطوع"/"الرعايات")
                   جنباً إلى جنب كأعمدة بدل تكديسها، فتُفرض هنا عمودية صريحة */
                flex-direction: column;
                width: auto;
                max-width: none;
                overflow: visible;
                border-inline-start: none;
                padding: 6px 0 6px 16px;
            }

            .nav-tab-panel {
                display: flex !important;
                width: auto;
            }

            .nav-tab-panel+.nav-tab-panel {
                margin-top: 8px;
                padding-top: 8px;
                border-top: 1px solid rgba(255, 255, 255, 0.08);
            }

            .nav-tab-panel-title {
                display: block;
                color: rgba(255, 255, 255, 0.55);
                font-size: 0.72rem;
                font-weight: 800;
                letter-spacing: 0.04em;
                padding: 0 16px 6px;
            }
        }

        /* إظهار/إخفاء مضبوط بالكامل عبر JS (class .open) — لا اعتماد على :hover لتفادي
   بقاء القائمة مفتوحة بسبب اختلاف سلوك :hover عبر المتصفحات مع العناصر
   ذات position:absolute */
        .nav-links-menu li.has-dropdown.open>.nav-dropdown {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .nav-links-menu li.has-dropdown.open>a .caret {
            transform: rotate(180deg);
        }

        /* ——— أزرار الإجراءات ——— */

        .btn-nav-join {
            background: var(--accent-gold);
            color: #fff !important;
            padding: 8px 20px;
            border-radius: var(--radius-pill);
            font-size: 0.88rem;
            font-weight: 700;
            white-space: nowrap;
            transition: var(--transition-base);
            display: inline-flex;
            align-items: center;
        }

        .btn-nav-join:hover {
            background: #fff;
            color: var(--accent-gold) !important;
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(197, 155, 39, 0.3);
        }

        .nav-link-plain {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            color: rgba(255, 255, 255, 0.88) !important;
            font-size: 0.88rem;
            font-weight: 600;
            padding: 6px 12px;
            border-radius: var(--radius-pill);
            border: 1px solid rgba(255, 255, 255, 0.22);
            transition: var(--transition-base);
            white-space: nowrap;
        }

        .nav-link-plain:hover {
            background: rgba(255, 255, 255, 0.12);
            color: #fff !important;
        }

        .voc-nav-cart {
            position: relative;
            color: rgba(255, 255, 255, 0.88);
            font-size: 1.15rem;
            transition: color 0.25s;
            display: inline-flex;
            align-items: center;
        }

        .voc-nav-cart:hover {
            color: var(--accent-gold);
        }

        .voc-cart-badge {
            position: absolute;
            top: -7px;
            inset-inline-end: -9px;
            background: var(--accent-gold);
            color: #fff;
            font-size: 0.65rem;
            font-weight: 800;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* ——— Mobile ——— */
        @media (max-width: 1024px) {
            .mobile-only-nav-item {
                display: block;
            }

            .menu-toggle {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                border-radius: var(--radius-sm);
                background: rgba(255, 255, 255, 0.1);
            }

            /* الصفحة الحالية على الجوال — كبسولة ذهبية عائمة داخل القائمة
               (نفس فكرة الكبسولة بالشريط العلوي) بدل خط سفلي عادي */
            .nav-links-menu li>a.active {
                background: rgba(197, 155, 39, 0.16) !important;
                color: var(--accent-gold) !important;
                border-radius: 10px !important;
                border-bottom-color: transparent;
                margin: 2px 0;
                padding-inline: 12px;
            }

            /* على الجوال: تُعرض كل عناصر "المزيد" كصفوف مستقلة بنفس مستوى
               القائمة الرئيسية (بدون زر "المزيد" نفسه) — لكن على الشاشات
               الكبيرة تبقى مجمّعة تحت "المزيد" كالمعتاد لضيق المساحة. */
            .desktop-only-more {
                display: none;
            }

            /* ملاحظة: تخطيط اللوحة نفسها (.nav-collapse/.nav-collapse.open) وفتح/إغلاق
               القوائم الفرعية (.nav-dropdown) على الجوال معرّفان لاحقاً في هذا الملف
               ("Nav v2: faster dropdowns, mega tuning, real mobile accordion") عبر
               متغيّر --header-h المقاس من JS — كانت هناك نسخة أقدم مكرّرة هنا (top:90px
               ثابت) تتعارض معها وتم حذفها؛ أبقينا فقط ما لا بديل له لاحقاً (الفرع
               الجانبي nav-subdropdown وألوان روابط القائمة على الخلفية الداكنة). */

            /* الفرع الجانبي (flyout) لا معنى له على الجوال — يتحول لقائمة منسدلة عادية
               تتمدد داخل التدفق (نفس أسلوب العنصر الرئيسي) عند النقر */
            .nav-subdropdown {
                position: static;
                opacity: 1;
                visibility: hidden;
                max-height: 0;
                overflow: hidden;
                transform: none;
                box-shadow: none;
                border-top: none;
                background: rgba(255, 255, 255, 0.05);
                padding: 0;
                margin-inline-start: 14px;
                transition: max-height 0.3s ease, visibility 0.3s;
            }

            .nav-subitem.open>.nav-subdropdown {
                visibility: visible;
                max-height: 400px;
                padding: 4px 0;
            }

            .nav-sub-caret {
                transition: transform 0.2s ease;
            }

            .nav-subitem.open .nav-sub-caret {
                transform: rotate(-90deg);
            }

            .nav-dropdown a {
                color: rgba(255, 255, 255, 0.82) !important;
                padding: 10px 16px;
            }

            html[dir="rtl"] .nav-dropdown a {
                flex-direction: row;
                justify-content: flex-start;
            }

            .nav-dropdown a:hover {
                background: rgba(255, 255, 255, 0.06);
                color: #fff !important;
                padding-inline-start: 10px;
            }

            /* ملاحظة: .nav-actions أصبح دائماً داخل .voc-header-row1 (الصف الأبيض الثابت
               الظهور)، وليس داخل لوحة .nav-collapse — تنسيقه معرّف مع تلك الحاوية لاحقاً
               في هذا الملف. .logo-box (إظهار اللوجو الأبيض بدل الملوّن) معرّف أيضاً هناك؛
               حُذفت النسخة المكررة هنا التي كانت تعطيه خلفية داكنة من تصميم الصف الواحد
               القديم (قبل أن يصبح الهيدر صفّين مكدّسين، الصف الأول أبيض دائماً). */
        }

        /* ==========================================================================
           3. قسم البطل المطور (Hero Section with Prince & Curved Accents)
           ========================================================================== */
        .hero-section {
            background: linear-gradient(180deg, #FFFFFF 0%, #F8FCFB 30%, #F3F9F7 70%, #FFFFFF 100%);
            padding-top: 170px;
            padding-bottom: 120px;
            position: relative;
            overflow: hidden;
        }

        /* الخطوط والزخارف المتموجة في الخلفية */
        .hero-background-shapes {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;
        }

        .hero-shape-wave1 {
            position: absolute;
            top: 20%;
            left: -10%;
            width: 50%;
            height: 70%;
            background: radial-gradient(circle, rgba(16, 112, 98, 0.04) 0%, transparent 70%);
            border-radius: 50%;
        }

        .hero-shape-wave2 {
            position: absolute;
            bottom: -10%;
            right: 10%;
            width: 600px;
            height: 300px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23107062" fill-opacity="0.03" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,218.7C672,203,768,149,864,138.7C960,128,1056,160,1152,176C1248,192,1344,192,1392,192L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
            background-size: cover;
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 40px;
            align-items: center;
            z-index: 2;
        }

        /* نصوص البطل */
        .hero-info-side {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .hero-badge-top {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 0.95rem;
            color: var(--primary-teal);
            font-weight: 800;
            margin-bottom: 25px;
        }

        .hero-badge-top i {
            color: var(--accent-gold);
            font-size: 1.2rem;
        }

        .hero-info-side h1 {
            font-size: 2.8rem;
            font-weight: 800;
            line-height: 1.4;
            color: var(--primary-dark-teal);
            margin-bottom: 24px;
        }

        .hero-info-side p {
            font-size: 1.1rem;
            color: var(--text-muted);
            margin-bottom: 35px;
            max-width: 540px;
            line-height: 1.8;
        }

        /* كارت المقولة الوطنية الفاخرة */
        .hero-quote-card {
            background: rgba(255, 255, 255, 0.9);
            padding: 28px 35px;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-md);
            margin-top: 10px;
            max-width: 500px;
            backdrop-filter: blur(10px);
            position: relative;
            border: none;
        }

        /* القوس الذهبي الأنيق على حافة المربع المتطابق مع الصورة */
        .hero-quote-card::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            width: 25px;
            border-right: 5.5px solid var(--accent-gold);
            border-top: 5.5px solid var(--accent-gold);
            border-bottom: 5.5px solid var(--accent-gold);
            border-top-right-radius: var(--radius-md);
            border-bottom-right-radius: var(--radius-md);
            pointer-events: none;
        }

        .hero-quote-card p {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--primary-dark-teal);
            margin-bottom: 12px;
            line-height: 1.6;
        }

        .hero-quote-card .quote-author {
            font-size: 0.85rem;
            color: var(--text-muted);
            font-weight: 700;
            display: block;
            margin-bottom: 4px;
        }

        .hero-quote-card .quote-sign {
            display: flex;
            justify-content: flex-end;
            margin-top: -10px;
        }

        .hero-quote-card .quote-sign img {
            height: 35px;
            opacity: 0.85;
        }

        /* أيقونة الاقتباس الزخرفية السماوية أسفل اليسار */
        .hero-quote-card .quote-decor-icon {
            position: absolute;
            bottom: 15px;
            left: 20px;
            font-size: 3.2rem;
            color: rgba(153, 178, 255, 0.45);
            pointer-events: none;
            line-height: 1;
        }

        /* صورة البطل وإطارات المنحنيات */
        .hero-visual-side {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .hero-prince-frame {
            position: relative;
            width: 440px;
            height: 480px;
            z-index: 5;
        }

        /* الصورة نفسها بقص منحني أورجانيك */
        .hero-prince-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 45% 55% 50% 50% / 40% 45% 55% 60%;
            box-shadow: var(--shadow-lg);
            z-index: 5;
            position: relative;
        }

        /* المنحنيات المتداخلة الذهبية والخضراء خلف الصورة */
        .hero-vector-curve-1 {
            position: absolute;
            top: -10px;
            right: -10px;
            bottom: -10px;
            left: -10px;
            border: 2px solid var(--accent-gold);
            border-radius: 43% 57% 48% 52% / 43% 48% 52% 57%;
            z-index: 2;
            animation: rotateCurve1 15s infinite linear;
            pointer-events: none;
        }

        .hero-vector-curve-2 {
            position: absolute;
            top: -20px;
            right: -20px;
            bottom: -20px;
            left: -20px;
            border: 2.5px dashed var(--primary-teal);
            border-radius: 52% 48% 55% 45% / 48% 52% 45% 55%;
            z-index: 1;
            opacity: 0.4;
            animation: rotateCurve2 25s infinite linear;
            pointer-events: none;
        }

        @keyframes rotateCurve1 {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes rotateCurve2 {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(-360deg);
            }
        }

        /* تفاصيل دائرية إضافية مثل الرياض والدمام */
        .city-pulse-node {
            position: absolute;
            background: var(--bg-white);
            padding: 8px 16px;
            border-radius: var(--radius-pill);
            box-shadow: var(--shadow-md);
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 10;
            font-size: 0.85rem;
            font-weight: 700;
            border: 1px solid rgba(16, 112, 98, 0.1);
        }

        .city-pulse-node::before {
            content: '';
            width: 8px;
            height: 8px;
            background: #2ecc71;
            border-radius: 50%;
            display: inline-block;
            box-shadow: 0 0 8px #2ecc71;
            animation: pulse-green 1.5s infinite;
        }

        @keyframes pulse-green {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
            }

            70% {
                transform: scale(1);
                box-shadow: 0 0 0 8px rgba(46, 204, 113, 0);
            }

            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
            }
        }

        .node-riyadh {
            top: 15%;
            right: -20px;
        }

        .node-jeddah {
            bottom: 25%;
            right: -40px;
        }

        .node-dammam {
            bottom: 10%;
            left: -20px;
        }

        /* ==========================================================================
           4. قسم من نحن (About Section with Arched Frame)
           ========================================================================== */
        .about-section {
            background-color: var(--bg-white);
        }

        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1.1fr;
            gap: 60px;
            align-items: center;
        }

        /* اليسار: صورة برج المملكة المنحنية المتطابقة */
        .about-image-block {
            position: relative;
            display: flex;
            justify-content: center;
        }

        .about-frame-wrapper {
            position: relative;
            width: 100%;
            max-width: 440px;
            height: 520px;
        }

        /* إطار ذهبي خلفي بازاحة */
        .about-gold-offset {
            position: absolute;
            inset: 0;
            border: 2px solid var(--accent-gold);
            /* انحناء متطابق: زاوية عليا يمنى ويسرى سفلى حادتين، والباقي ناعم جداً */
            border-radius: var(--radius-xl) var(--radius-xl) 0 var(--radius-xl);
            transform: translate(-15px, 15px);
            z-index: 1;
        }

        .about-img-actual {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: var(--radius-xl) var(--radius-xl) 0 var(--radius-xl);
            z-index: 2;
            position: relative;
            box-shadow: var(--shadow-md);
        }

        /* كرت الخبرة العائم الداكن المتقاطع مع الصورة */
        .floating-exp-card {
            position: absolute;
            bottom: 25px;
            left: -30px;
            background: var(--primary-dark-teal);
            color: var(--text-white);
            padding: 20px 30px;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            border-right: 4px solid var(--accent-gold);
        }

        .floating-exp-card h3 {
            font-size: 2.2rem;
            font-weight: 800;
            font-family: var(--font-en);
            color: var(--accent-gold);
            line-height: 1;
            margin-bottom: 5px;
        }

        .floating-exp-card span {
            font-size: 0.9rem;
            font-weight: 700;
            opacity: 0.95;
            white-space: nowrap;
        }

        /* اليمين: معلومات من نحن وقائمة المزايا الأربعة */
        .about-content-block {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .badge-about-sub {
            display: inline-block;
            background: rgba(197, 155, 39, 0.08);
            color: var(--accent-gold-hover);
            font-size: 0.85rem;
            font-weight: 800;
            padding: 5px 16px;
            border-radius: var(--radius-pill);
            margin-bottom: 15px;
            border: 1px solid rgba(197, 155, 39, 0.12);
        }

        .about-content-block h2 {
            font-size: 2.2rem;
            font-weight: 800;
            color: var(--primary-dark-teal);
            margin-bottom: 20px;
        }

        .about-content-block p {
            color: var(--text-muted);
            font-size: 1rem;
            line-height: 1.8;
            margin-bottom: 30px;
        }

        /* شبكة المزايا الأربعة المتطابقة بالصورة */
        .about-values-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            width: 100%;
            margin-bottom: 35px;
        }

        .value-item-row {
            display: flex;
            align-items: flex-start;
            gap: 15px;
        }

        .value-item-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: rgba(16, 112, 98, 0.06);
            color: var(--primary-teal);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            flex-shrink: 0;
            transition: var(--transition-base);
            border: 1px solid rgba(16, 112, 98, 0.1);
        }

        .value-item-row:hover .value-item-icon {
            background: var(--primary-teal);
            color: var(--text-white);
            transform: scale(1.1);
            box-shadow: 0 4px 10px rgba(16, 112, 98, 0.15);
        }

        .value-item-text h4 {
            font-size: 1rem;
            font-weight: 800;
            color: var(--primary-dark-teal);
            margin-bottom: 5px;
        }

        .value-item-text p {
            font-size: 0.85rem;
            color: var(--text-muted);
            margin: 0;
            line-height: 1.5;
        }

        /* ==========================================================================
           5. مجالات عملنا (Fields of Work Cards & Bottom Dark Counter Strip)
           ========================================================================== */
        .fields-section {
            background-color: var(--bg-mint-light);
        }

        .fields-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
            margin-bottom: 60px;
        }

        /* كروت مجالات عملنا */
        .field-card {
            background: var(--bg-white);
            border-radius: var(--radius-md);
            padding: 35px 25px;
            text-align: center;
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(16, 112, 98, 0.05);
            transition: var(--transition-smooth);
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .field-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: var(--primary-teal);
            transform: scaleX(0);
            transition: var(--transition-base);
        }

        .field-card:hover::before {
            transform: scaleX(1);
        }

        .field-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-lg);
            border-color: rgba(16, 112, 98, 0.12);
        }

        .field-card-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--primary-dark-teal);
            color: var(--text-white);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            margin-bottom: 24px;
            box-shadow: 0 5px 15px rgba(10, 77, 68, 0.15);
            transition: var(--transition-base);
        }

        .field-card:hover .field-card-icon {
            background: var(--accent-gold);
            transform: rotateY(180deg);
        }

        .field-card h3 {
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--primary-dark-teal);
            margin-bottom: 12px;
        }

        .field-card p {
            font-size: 0.9rem;
            color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 20px;
            flex-grow: 1;
        }

        .field-card-link {
            font-size: 0.88rem;
            font-weight: 800;
            color: var(--accent-gold);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: var(--transition-base);
        }

        .field-card-link:hover {
            color: var(--primary-teal);
            padding-left: 5px;
        }

        /* شريط العدادات والأرقام الداكن المتطابق بالصورة */
        .stats-dark-strip {
            background: var(--primary-dark-teal);
            color: var(--text-white);
            border-radius: var(--radius-md);
            padding: 40px 50px;
            box-shadow: var(--shadow-lg);
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            overflow: hidden;
            border-bottom: 4px solid var(--accent-gold);
        }

        /* زخارف متموجة خلفية للشريط */
        .stats-strip-wave {
            position: absolute;
            inset: 0;
            opacity: 0.05;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23FFFFFF" d="M0,224L60,202.7C120,181,240,139,360,138.7C480,139,600,181,720,186.7C840,192,960,160,1080,138.7C1200,117,1320,107,1380,101.3L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>');
            background-size: cover;
            pointer-events: none;
        }

        .stats-strip-slogan {
            font-size: 1.4rem;
            font-weight: 800;
            z-index: 2;
        }

        .stats-strip-slogan span {
            color: var(--accent-gold);
        }

        .stats-strip-row {
            display: flex;
            gap: 40px;
            z-index: 2;
        }

        .stats-strip-item {
            text-align: center;
            border-right: 1px solid rgba(255, 255, 255, 0.15);
            padding-right: 40px;
        }

        .stats-strip-item:first-child {
            border-right: none;
            padding-right: 0;
        }

        .stats-item-num {
            font-family: var(--font-en);
            font-size: 2.2rem;
            font-weight: 800;
            color: var(--accent-gold);
            display: block;
            line-height: 1.2;
            margin-bottom: 5px;
        }

        .stats-item-lbl {
            font-size: 0.9rem;
            font-weight: 700;
            opacity: 0.9;
        }

        /* ==========================================================================
           6. برامج ومبادرات مميزة (Featured Programs Slider & Hijri Dates)
           ========================================================================== */
        .programs-section {
            background-color: var(--bg-white);
        }

        .programs-carousel-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 45px;
        }

        .carousel-arrows {
            display: flex;
            gap: 12px;
        }

        .arrow-btn {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 2px solid rgba(16, 112, 98, 0.15);
            background: transparent;
            color: var(--primary-teal);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1rem;
            transition: var(--transition-base);
        }

        .arrow-btn:hover {
            background: var(--primary-teal);
            color: var(--text-white);
            border-color: var(--primary-teal);
            transform: scale(1.05);
        }

        .programs-slider-container {
            overflow: hidden;
            width: 100%;
        }

        .programs-track {
            display: flex;
            gap: 30px;
            transition: transform 0.5s ease-in-out;
        }

        /* كارت البرنامج المطور */
        .program-slider-card {
            min-width: calc((100% - 90px) / 4);
            max-width: calc((100% - 90px) / 4);
            background: var(--bg-white);
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(16, 112, 98, 0.05);
            display: flex;
            flex-direction: column;
            transition: var(--transition-smooth);
        }

        .program-slider-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-lg);
            border-color: rgba(16, 112, 98, 0.12);
        }

        .program-card-img-wrap {
            position: relative;
            height: 200px;
            overflow: hidden;
        }

        .program-card-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition-smooth);
        }

        .program-slider-card:hover .program-card-img-wrap img {
            transform: scale(1.08);
        }

        /* تاريخ هجري عائم */
        .hijri-date-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(10, 77, 68, 0.9);
            color: var(--text-white);
            font-size: 0.78rem;
            font-weight: 700;
            padding: 5px 12px;
            border-radius: var(--radius-pill);
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.15);
        }

        .program-card-body {
            padding: 24px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .program-card-meta {
            display: flex;
            gap: 15px;
            font-size: 0.82rem;
            color: var(--text-muted);
            margin-bottom: 12px;
        }

        .program-card-meta span i {
            color: var(--accent-gold);
            margin-left: 4px;
        }

        .program-card-body h4 {
            font-size: 1.05rem;
            font-weight: 800;
            color: var(--primary-dark-teal);
            margin-bottom: 24px;
            line-height: 1.5;
            flex-grow: 1;
        }

        .program-card-btn-action {
            display: block;
            text-align: center;
            background: var(--bg-mint-light);
            color: var(--primary-teal);
            font-weight: 800;
            font-size: 0.88rem;
            padding: 10px 0;
            border-radius: var(--radius-sm);
            transition: var(--transition-base);
            border: 1px dashed rgba(16, 112, 98, 0.15);
        }

        .program-slider-card:hover .program-card-btn-action {
            background: var(--primary-teal);
            color: var(--text-white);
            border-style: solid;
        }

        /* ==========================================================================
           7. شركاء النجاح (Sponsors Logos Marquee)
           ========================================================================== */
        .sponsors-section {
            background-color: var(--bg-mint-ultra-light);
            padding: 60px 0;
            border-top: 1px solid rgba(16, 112, 98, 0.05);
            border-bottom: 1px solid rgba(16, 112, 98, 0.05);
        }

        .sponsors-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .sponsors-header h4 {
            font-size: 1.1rem;
            font-weight: 800;
            color: var(--primary-dark-teal);
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .sponsors-header h4::before,
        .sponsors-header h4::after {
            content: '';
            display: inline-block;
            width: 25px;
            height: 2px;
            background: var(--accent-gold);
        }

        .sponsors-wrapper {
            overflow: hidden;
            white-space: nowrap;
            position: relative;
        }

        .sponsors-track {
            display: inline-flex;
            gap: 50px;
            animation: marquee 25s linear infinite;
        }

        .sponsors-track img {
            height: 48px;
            opacity: 1;
            filter: none;
        }

        @keyframes marquee {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(50%);
            }
        }

        /* ==========================================================================
           8. قسم تواصل معنا المطور (Slanted Contact Us Block with Arched Lobby View)
           ========================================================================== */
        .contact-section {
            background-color: var(--bg-white);
        }

        /* المربع المتكامل التيل الداكن */
        .contact-box-wrapper {
            background: var(--primary-dark-teal);
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: stretch;
            border-bottom: 5px solid var(--accent-gold);
        }

        /* اليمين (RTL): تفاصيل ونموذج الارسال */
        .contact-details-side {
            padding: 60px 50px;
            color: var(--text-white);
        }

        .contact-details-side h3 {
            font-size: 1.8rem;
            font-weight: 800;
            margin-bottom: 12px;
        }

        .contact-details-side p {
            font-size: 0.95rem;
            opacity: 0.85;
            margin-bottom: 30px;
        }

        .contact-form-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 15px;
        }

        .form-group-input {
            width: 100%;
            position: relative;
        }

        .form-group-input input,
        .form-group-input textarea {
            width: 100%;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            padding: 12px 20px;
            border-radius: var(--radius-sm);
            color: var(--text-white);
            font-family: var(--font-ar);
            font-size: 0.9rem;
            transition: var(--transition-base);
        }

        .form-group-input input::placeholder,
        .form-group-input textarea::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }

        .form-group-input input:focus,
        .form-group-input textarea:focus {
            background: rgba(255, 255, 255, 0.15);
            border-color: var(--accent-gold);
        }

        .contact-info-list {
            margin-top: 35px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 25px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .contact-info-item {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 0.88rem;
            opacity: 0.9;
        }

        .contact-info-item i {
            color: var(--accent-gold);
            font-size: 1.1rem;
        }

        /* اليسار (RTL): شباك بهو الفندق أو المكتب الفاخر */
        .contact-visual-side {
            position: relative;
            background: linear-gradient(135deg, rgba(16, 112, 98, 0.1) 0%, rgba(10, 77, 68, 0.3) 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 40px;
        }

        /* شباك مقوس متطابق بالصورة */
        .lobby-arched-window {
            width: 100%;
            height: 100%;
            min-height: 400px;
            background-image: url('visionofculture/public/assets/images/about/homeabout.webp');
            background-size: cover;
            background-position: center;
            /* شكل مقوس إسلامي/سعودي ناعم من الأعلى ومربع من الأسفل */
            border-radius: 200px 200px 20px 20px;
            box-shadow: var(--shadow-lg);
            border: 3px solid rgba(255, 255, 255, 0.1);
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: flex-end;
        }

        .lobby-arched-window::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(10, 77, 68, 0.85) 15%, transparent 60%);
        }

        /* كارت "نحو مجتمع مزدهر" متطابق أسفل المقوس */
        .lobby-overlay-card {
            position: relative;
            z-index: 5;
            padding: 30px;
            width: 100%;
            text-align: center;
            color: var(--text-white);
        }

        .lobby-overlay-card h4 {
            font-size: 1.4rem;
            font-weight: 800;
            margin-bottom: 5px;
            color: var(--accent-gold);
            letter-spacing: 0.5px;
        }

        .lobby-overlay-card p {
            font-size: 0.88rem;
            opacity: 0.9;
        }

        /* ==========================================================================
           9. قالوا عنا (Luxury Testimonials Grid)
           ========================================================================== */
        .testimonials-section {
            background-color: var(--bg-mint-light);
        }

        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        .testimonial-card {
            background: var(--bg-white);
            border-radius: var(--radius-md);
            padding: 35px;
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(16, 112, 98, 0.05);
            position: relative;
            transition: var(--transition-smooth);
        }

        .testimonial-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
            border-color: rgba(16, 112, 98, 0.12);
        }

        .testimonial-quote-icon {
            position: absolute;
            top: 25px;
            left: 25px;
            font-size: 1.8rem;
            color: rgba(197, 155, 39, 0.15);
        }

        .testimonial-card p {
            font-size: 0.95rem;
            color: var(--text-muted);
            line-height: 1.7;
            margin-bottom: 25px;
            position: relative;
            z-index: 2;
        }

        .testimonial-profile {
            display: flex;
            align-items: center;
            gap: 15px;
            border-top: 1px solid rgba(16, 112, 98, 0.08);
            padding-top: 20px;
        }

        .testimonial-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--bg-mint-light);
            border: 2px solid var(--accent-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            color: var(--primary-teal);
            font-weight: bold;
        }

        .testimonial-info h5 {
            font-size: 0.95rem;
            font-weight: 800;
            color: var(--primary-dark-teal);
            margin-bottom: 3px;
        }

        .testimonial-info span {
            font-size: 0.8rem;
            color: var(--accent-gold-hover);
            font-weight: 700;
        }

        /* ==========================================================================
           10. التذييل المطور (Elegant Dark Charcoal / Teal Footer)
           ========================================================================== */
        footer {
            background-color: var(--primary-dark-teal);
            /* نفس لون الهيدر — من متغير الجذر الموحّد */
            color: var(--mint-accent);
            padding-top: 80px;
            padding-bottom: 30px;
            border-top: 3px solid var(--primary-teal);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1.2fr;
            gap: 40px;
            padding-bottom: 50px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .footer-about h5 {
            font-size: 1.3rem;
            font-weight: 800;
            color: var(--mint-accent);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .footer-about p {
            font-size: 0.9rem;
            color: var(--mint-accent);
            opacity: 0.8;
            line-height: 1.8;
            margin-bottom: 20px;
        }

        .footer-social-row {
            display: flex;
            gap: 12px;
        }

        .footer-social-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.10);
            color: var(--mint-accent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.95rem;
            transition: var(--transition-base);
        }

        .footer-social-btn:hover {
            background: var(--mint-accent);
            color: var(--primary-dark-teal);
            transform: translateY(-3px);
        }

        .footer-column h5 {
            font-size: 1.05rem;
            font-weight: 800;
            color: var(--mint-accent);
            margin-bottom: 25px;
            position: relative;
            padding-bottom: 8px;
        }

        .footer-column h5::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 35px;
            height: 2px;
            background: var(--mint-accent);
        }

        .footer-column ul li {
            margin-bottom: 12px;
        }

        .footer-column ul li a {
            font-size: 0.88rem;
            opacity: 0.8;
            transition: var(--transition-base);
        }

        .footer-column ul li a:hover {
            opacity: 1;
            color: var(--mint-accent);
            padding-right: 5px;
        }

        .footer-contact-list li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 0.88rem;
            opacity: 0.8;
            margin-bottom: 15px;
        }

        .footer-contact-list li i {
            color: var(--mint-accent);
            margin-top: 4px;
        }

        /* شريط "بإشراف الهيئة العامة للترفيه" (GEA) — يظهر في جميع الصفحات */
        .footer-supervision {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 24px 0 6px;
            margin-top: 24px;
            border-top: 1px solid rgba(216, 240, 233, 0.15);
            text-align: center;
        }

        .footer-supervision-label {
            font-size: 0.88rem;
            font-weight: 700;
            letter-spacing: .3px;
            opacity: 0.88;
            color: var(--text-white, #ffffff);
        }

        .footer-gea-logo {
            height: 74px;
            width: auto;
            background: #fff;
            padding: 9px 14px;
            border-radius: 12px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
            transition: transform .25s ease, box-shadow .25s ease;
        }

        .footer-gea-logo:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 30px;
            font-size: 0.82rem;
            color: var(--mint-accent);
            opacity: 0.9;
        }

        .footer-bottom p {
            color: var(--mint-accent);
        }

        .footer-bottom-links {
            display: flex;
            gap: 20px;
        }

        .footer-bottom-links a:hover {
            color: var(--mint-accent);
        }

        /* زر واتساب عائم مستقل ظاهر دائماً في كل صفحات الموقع (المواصفات) */
        .whatsapp-float-btn {
            position: fixed;
            bottom: 88px;
            right: 30px;
            width: 54px;
            height: 54px;
            border-radius: 50%;
            background: #25D366;
            border: 2px solid var(--text-white);
            color: var(--text-white);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.7rem;
            box-shadow: 0 8px 22px rgba(37, 211, 102, 0.35);
            z-index: 1000;
            text-decoration: none;
            transition: var(--transition-base);
        }

        .whatsapp-float-btn:hover {
            transform: translateY(-3px) scale(1.06);
            box-shadow: 0 12px 28px rgba(37, 211, 102, 0.45);
            color: var(--text-white);
        }

        /* زر الصعود لأعلى */
        .back-to-top-btn {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: var(--primary-teal);
            color: var(--text-white);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            box-shadow: 0 4px 10px rgba(10, 77, 68, 0.2);
            z-index: 99;
            cursor: pointer;
            transition: var(--transition-base);
            opacity: 0;
            visibility: hidden;
        }

        .back-to-top-btn.visible {
            opacity: 1;
            visibility: visible;
        }

        .back-to-top-btn:hover {
            background: var(--accent-gold);
            transform: translateY(-3px);
        }

        /* ==========================================================================
           11. شاشات التجاوب والتحسين (Responsive Layout styling)
           ========================================================================== */
        @media (max-width: 1024px) {
            .hero-grid {
                grid-template-columns: 1fr;
                text-align: center;
                gap: 50px;
            }

            .hero-info-side {
                align-items: center;
            }

            .hero-info-side p {
                margin-left: auto;
                margin-right: auto;
            }

            .hero-quote-card {
                margin: 20px auto 0;
            }

            .about-grid {
                grid-template-columns: 1fr;
                gap: 50px;
            }

            .about-image-block {
                order: 2;
            }

            .about-content-block {
                order: 1;
                align-items: center;
                text-align: center;
            }

            .about-values-grid {
                text-align: right;
            }

            .fields-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .stats-dark-strip {
                flex-direction: column;
                gap: 30px;
                text-align: center;
            }

            .stats-strip-row {
                flex-direction: column;
                gap: 20px;
            }

            .stats-strip-item {
                border-right: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                padding-right: 0;
                padding-bottom: 20px;
            }

            .stats-strip-item:last-child {
                border-bottom: none;
                padding-bottom: 0;
            }

            .program-slider-card {
                min-width: calc((100% - 30px) / 2);
                max-width: calc((100% - 30px) / 2);
            }

            .contact-box-wrapper {
                grid-template-columns: 1fr;
            }

            .contact-visual-side {
                min-height: 350px;
            }

            .testimonials-grid {
                grid-template-columns: 1fr;
            }

            .footer-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 768px) {
            /* ملاحظة: .logo-box / .nav-slanted-bar / .nav-links-menu / .nav-actions /
               .menu-toggle كانت معرّفة هنا من تصميم الهيدر القديم (صف واحد مائل)، وكانت
               تُخفي .nav-actions بالكامل — أي تُخفي زر الهامبرغر نفسه معها لأنه بداخله —
               وهو سبب اختفاء أزرار الهيدر على الجوال. الهيدر الحالي صفّان مكدّسان (راجعي
               .voc-header-row1 و.nav-collapse أعلاه) وله تنسيقه الخاص، فحُذفت هذه القواعد
               القديمة المتعارضة معه بدل تركها تتحكّم بالعرض عشوائياً حسب ترتيب الملف. */

            .hero-info-side h1 {
                font-size: 2.1rem;
            }

            .hero-prince-frame {
                width: 320px;
                height: 350px;
            }

            .floating-exp-card {
                left: 10px;
                padding: 15px 20px;
            }

            .fields-grid {
                grid-template-columns: 1fr;
            }

            .program-slider-card {
                min-width: 100%;
                max-width: 100%;
            }

            .contact-details-side {
                padding: 30px 20px !important;
            }

            .contact-info-list {
                grid-template-columns: 1fr !important;
                gap: 15px !important;
            }

            .contact-info-item {
                word-break: break-all !important;
                font-size: 0.85rem !important;
            }

            .footer-grid {
                grid-template-columns: 1fr;
            }

            .footer-bottom {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }
        }

        /* ==========================================================================
           11. شريط شبكات التواصل العائم المطور القابل للتمدد (Expandable Floating Social Dock)
           ========================================================================== */
        .social-float-container {
            position: fixed;
            bottom: 30px;
            left: 30px;
            z-index: 1000;
            display: flex;
            align-items: center;
            gap: 12px;
            direction: ltr;
            /* يمتد لليمين باتجاه الصفحة */
        }

        /* الزر الرئيسي الدائري التفاعلي */
        .social-main-trigger {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-dark-teal) 0%, var(--primary-teal) 100%);
            border: 2px solid var(--accent-gold);
            color: var(--text-white);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            cursor: pointer;
            box-shadow: 0 8px 25px rgba(10, 77, 68, 0.25);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            z-index: 1002;
        }

        .social-main-trigger i {
            transition: transform 0.4s ease;
        }

        /* حركات التفاعل للزر الرئيسي */
        .social-float-container:hover .social-main-trigger {
            transform: scale(1.05);
            background: var(--accent-gold);
            border-color: var(--primary-dark-teal);
            color: var(--primary-dark-teal);
            box-shadow: 0 8px 25px rgba(197, 155, 39, 0.35);
        }

        .social-float-container:hover .social-main-trigger i {
            transform: rotate(180deg);
        }

        /* شريط الأيقونات المنبثق الدائري */
        .social-expanded-bar {
            display: flex;
            align-items: center;
            background: rgba(10, 77, 68, 0.95);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1.5px solid rgba(197, 155, 39, 0.3);
            padding: 0;
            height: 48px;
            border-radius: 100px;
            opacity: 0;
            visibility: hidden;
            width: 0;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
            box-shadow: 0 8px 25px rgba(10, 77, 68, 0.2);
            z-index: 1001;
        }

        /* تمدد الشريط عند التحويم */
        .social-float-container:hover .social-expanded-bar {
            opacity: 1;
            visibility: visible;
            width: 320px;
            /* يتسع لكافة الأيقونات بارتياح */
            padding: 0 12px;
        }

        .social-expanded-item {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 34px;
            height: 34px;
            margin: 0 3px;
            position: relative;
            cursor: pointer;
            z-index: 1;
        }

        /* خلفية العلامة التجارية تنبثق بشكل دائري */
        .social-expanded-item .brand-bg {
            position: absolute;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            transform: scale(0);
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: -1;
        }

        /* ألوان الخلفيات عند التحويم */
        .social-expanded-item.snapchat:hover .brand-bg {
            background: #FFFC00;
            transform: scale(1);
        }

        .social-expanded-item.tiktok:hover .brand-bg {
            background: #000000;
            transform: scale(1);
        }

        .social-expanded-item.instagram:hover .brand-bg {
            background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
            transform: scale(1);
        }

        .social-expanded-item.facebook:hover .brand-bg {
            background: #1877F2;
            transform: scale(1);
        }

        .social-expanded-item.x-twitter:hover .brand-bg {
            background: #000000;
            transform: scale(1);
        }

        .social-expanded-item.youtube:hover .brand-bg {
            background: #FF0000;
            transform: scale(1);
        }

        .social-expanded-item.whatsapp:hover .brand-bg {
            background: #25D366;
            transform: scale(1);
        }

        .social-expanded-item a {
            color: rgba(255, 255, 255, 0.85);
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            transition: var(--transition-base);
        }

        .social-expanded-item.snapchat:hover a {
            color: #000000;
        }

        .social-expanded-item:hover a {
            color: #FFFFFF;
            transform: scale(1.1);
        }

        /* التلميحات الفوقية الأنيقة */
        .social-expanded-item .social-tooltip {
            position: absolute;
            bottom: 48px;
            left: 50%;
            transform: translateX(-50%) translateY(8px);
            background: rgba(255, 255, 255, 0.98);
            color: var(--primary-dark-teal);
            font-size: 0.72rem;
            font-weight: 800;
            padding: 4px 10px;
            border-radius: var(--radius-sm);
            white-space: nowrap;
            box-shadow: var(--shadow-md);
            opacity: 0;
            visibility: hidden;
            transition: var(--transition-base);
            border: 1px solid rgba(197, 155, 39, 0.3);
            pointer-events: none;
        }

        .social-expanded-item .social-tooltip::before {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border-width: 4px;
            border-style: solid;
            border-color: rgba(255, 255, 255, 0.98) transparent transparent transparent;
        }

        /* ==========================================================================
           12. الخدمات المقدمة (Services Section)
           ========================================================================== */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-top: 50px;
        }

        .service-card {
            background: var(--bg-white);
            border-radius: var(--radius-md);
            padding: 35px 30px;
            box-shadow: var(--shadow-md);
            border: 1px solid rgba(10, 77, 68, 0.05);
            transition: var(--transition-base);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: var(--accent-gold);
            transform: scaleX(0);
            transform-origin: right;
            transition: var(--transition-base);
        }

        .service-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-lg);
            border-color: rgba(197, 155, 39, 0.2);
        }

        .service-card:hover::before {
            transform: scaleX(1);
        }

        .service-card-icon {
            width: 60px;
            height: 60px;
            border-radius: var(--radius-sm);
            background: var(--bg-mint-light);
            color: var(--primary-teal);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            margin-bottom: 25px;
            transition: var(--transition-base);
        }

        .service-card:hover .service-card-icon {
            background: var(--primary-teal);
            color: var(--text-white);
            transform: rotateY(180deg);
        }

        .service-card h3 {
            font-size: 1.25rem;
            color: var(--primary-dark-teal);
            margin-bottom: 15px;
            font-weight: 700;
        }

        .service-card p {
            color: var(--text-muted);
            font-size: 0.9rem;
            line-height: 1.7;
        }

        /* ==========================================================================
           13. الفرق التطوعية والتطوع (Volunteer Section)
           ========================================================================== */
        .volunteer-section {
            background: var(--bg-mint-light);
            position: relative;
            overflow: hidden;
        }

        .volunteer-grid {
            display: grid;
            grid-template-columns: 1.2fr 0.8fr;
            gap: 50px;
            align-items: center;
        }

        .volunteer-content h2 {
            font-size: 2.2rem;
            color: var(--primary-dark-teal);
            margin-bottom: 20px;
            font-weight: 800;
        }

        .volunteer-content p {
            color: var(--text-muted);
            margin-bottom: 30px;
            line-height: 1.8;
        }

        .volunteer-teams-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-bottom: 35px;
        }

        .volunteer-team-item {
            display: flex;
            align-items: center;
            gap: 20px;
            background: var(--bg-white);
            padding: 20px;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            border-right: 4px solid var(--accent-gold);
            transition: var(--transition-base);
        }

        .volunteer-team-item:hover {
            transform: translateX(-5px);
            box-shadow: var(--shadow-md);
        }

        .volunteer-team-icon {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: var(--bg-mint-light);
            color: var(--primary-teal);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
        }

        .volunteer-team-info h4 {
            color: var(--primary-dark-teal);
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .volunteer-team-info p {
            color: var(--text-muted);
            font-size: 0.85rem;
            margin: 0;
        }

        .volunteer-stats-card {
            background: linear-gradient(135deg, var(--primary-dark-teal) 0%, var(--primary-teal) 100%);
            border: 2px solid var(--accent-gold);
            border-radius: var(--radius-lg);
            padding: 40px;
            color: var(--text-white);
            box-shadow: var(--shadow-lg);
            position: relative;
            z-index: 1;
        }

        .volunteer-stats-card::after {
            content: '';
            position: absolute;
            top: -20%;
            left: -20%;
            width: 60%;
            height: 60%;
            background: rgba(197, 155, 39, 0.15);
            filter: blur(50px);
            border-radius: 50%;
            z-index: -1;
        }

        .volunteer-stats-card h3 {
            color: var(--accent-gold);
            font-size: 1.8rem;
            margin-bottom: 25px;
            font-weight: 800;
            text-align: center;
            border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
            padding-bottom: 15px;
        }

        .volunteer-stat-row {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .volunteer-stat-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .volunteer-stat-item:last-child {
            border-bottom: none;
        }

        .volunteer-stat-val {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--accent-gold);
        }

        .volunteer-stat-lbl {
            font-size: 0.95rem;
            color: rgba(255, 255, 255, 0.85);
        }

        /* ==========================================================================
           14. العضويات الأهلية (Membership Section)
           ========================================================================== */
        .membership-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-top: 50px;
            align-items: stretch;
        }

        .membership-card {
            background: var(--bg-white);
            border-radius: var(--radius-lg);
            padding: 45px 35px;
            box-shadow: var(--shadow-md);
            border: 1.5px solid rgba(10, 77, 68, 0.05);
            display: flex;
            flex-direction: column;
            position: relative;
            transition: var(--transition-base);
            z-index: 1;
        }

        .membership-card.featured {
            border-color: var(--accent-gold);
            transform: scale(1.03);
            box-shadow: var(--shadow-lg);
        }

        .membership-card.featured::after {
            content: 'الأكثر طلباً';
            position: absolute;
            top: 20px;
            left: 20px;
            background: var(--accent-gold);
            color: var(--primary-dark-teal);
            font-size: 0.72rem;
            font-weight: 800;
            padding: 4px 12px;
            border-radius: var(--radius-pill);
        }

        .membership-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-lg);
        }

        .membership-card.featured:hover {
            transform: scale(1.03) translateY(-10px);
        }

        .membership-type {
            font-size: 1.3rem;
            color: var(--primary-dark-teal);
            font-weight: 800;
            margin-bottom: 15px;
        }

        .membership-price {
            margin-bottom: 30px;
        }

        .membership-price .amount {
            font-size: 2.2rem;
            font-weight: 800;
            color: var(--primary-teal);
        }

        .membership-card.featured .membership-price .amount {
            color: var(--accent-gold);
        }

        .membership-price .period {
            font-size: 0.9rem;
            color: var(--text-muted);
        }

        .membership-benefits {
            list-style: none;
            padding: 0;
            margin: 0 0 35px 0;
            display: flex;
            flex-direction: column;
            gap: 15px;
            flex-grow: 1;
        }

        .membership-benefits li {
            font-size: 0.9rem;
            color: var(--text-dark);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .membership-benefits li i {
            color: var(--primary-teal);
            font-size: 1rem;
        }

        .membership-card.featured .membership-benefits li i {
            color: var(--accent-gold);
        }

        /* ==========================================================================
           15. مركز الحوكمة والامتثال (Governance Section)
           ========================================================================== */
        .governance-section {
            background: var(--bg-mint-light);
        }

        .governance-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
            margin-top: 50px;
        }

        .doc-download-card {
            background: var(--bg-white);
            border-radius: var(--radius-md);
            padding: 25px;
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(10, 77, 68, 0.04);
            display: flex;
            flex-direction: column;
            gap: 18px;
            transition: var(--transition-base);
            position: relative;
        }

        .doc-download-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-md);
            border-color: rgba(197, 155, 39, 0.2);
        }

        .doc-icon-wrap {
            width: 50px;
            height: 50px;
            border-radius: var(--radius-sm);
            background: rgba(197, 155, 39, 0.1);
            color: var(--accent-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
        }

        .doc-download-card h4 {
            font-size: 0.95rem;
            color: var(--primary-dark-teal);
            font-weight: 700;
            line-height: 1.5;
            min-height: 44px;
        }

        .doc-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.78rem;
            color: var(--text-muted);
            border-top: 1px solid rgba(10, 77, 68, 0.05);
            padding-top: 12px;
        }

        .btn-doc-download {
            color: var(--primary-teal);
            text-decoration: none;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: var(--transition-base);
        }

        .btn-doc-download:hover {
            color: var(--accent-gold);
        }

        /* ==========================================================================
           16. باقات الرعاية الاستثمارية (Sponsorship Section)
           ========================================================================== */
        .sponsorship-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 25px;
            margin-top: 50px;
        }

        .sponsor-tier-card {
            background: var(--bg-white);
            border-radius: var(--radius-md);
            padding: 35px 25px;
            box-shadow: var(--shadow-md);
            border: 1px solid rgba(10, 77, 68, 0.05);
            text-align: center;
            position: relative;
            transition: var(--transition-base);
            z-index: 1;
        }

        .sponsor-tier-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: var(--radius-md);
            padding: 1.5px;
            background: linear-gradient(135deg, transparent 0%, transparent 100%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            z-index: -1;
            transition: var(--transition-base);
        }

        .sponsor-tier-card.strategic::before {
            background: linear-gradient(135deg, var(--accent-gold) 0%, var(--primary-teal) 100%);
        }

        .sponsor-tier-card.gold::before {
            background: linear-gradient(135deg, #f39c12 0%, #f1c40f 100%);
        }

        .sponsor-tier-card.silver::before {
            background: linear-gradient(135deg, #bdc3c7 0%, #95a5a6 100%);
        }

        .sponsor-tier-card.bronze::before {
            background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
        }

        .sponsor-tier-card.participant::before {
            background: linear-gradient(135deg, #16a085 0%, #6ec6b5 100%);
        }

        .sponsor-tier-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-lg);
        }

        .sponsor-tier-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin: 0 auto 20px auto;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: var(--text-white);
        }

        .sponsor-tier-card.strategic .sponsor-tier-icon {
            background: linear-gradient(135deg, var(--accent-gold) 0%, var(--primary-teal) 100%);
        }

        .sponsor-tier-card.gold .sponsor-tier-icon {
            background: #f1c40f;
            color: var(--primary-dark-teal);
        }

        .sponsor-tier-card.silver .sponsor-tier-icon {
            background: #bdc3c7;
            color: var(--primary-dark-teal);
        }

        .sponsor-tier-card.bronze .sponsor-tier-icon {
            background: #e67e22;
        }

        .sponsor-tier-card.participant .sponsor-tier-icon {
            background: #16a085;
        }

        .sponsor-tier-name {
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--primary-dark-teal);
            margin-bottom: 8px;
        }

        .sponsor-tier-price {
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--primary-teal);
            margin-bottom: 20px;
        }

        .sponsor-tier-card.strategic .sponsor-tier-price {
            color: var(--accent-gold);
        }

        .sponsor-tier-desc {
            font-size: 0.85rem;
            color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 25px;
            min-height: 50px;
        }

        /* ==========================================================================
           17. المركز الإعلامي والبث المباشر (Media Center & Live Stream)
           ========================================================================== */
        .media-live-section {
            background: var(--bg-mint-light);
        }

        .media-live-grid {
            display: grid;
            grid-template-columns: 1.2fr 0.8fr;
            gap: 40px;
            margin-top: 50px;
        }

        .news-columns {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 25px;
        }

        .news-card-mini {
            background: var(--bg-white);
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(10, 77, 68, 0.03);
            transition: var(--transition-base);
        }

        .news-card-mini:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-md);
            border-color: rgba(197, 155, 39, 0.15);
        }

        .news-img-wrap {
            height: 140px;
            overflow: hidden;
            position: relative;
        }

        .news-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition-smooth);
        }

        .news-card-mini:hover .news-img-wrap img {
            transform: scale(1.08);
        }

        .news-body-mini {
            padding: 20px;
        }

        .news-date {
            font-size: 0.75rem;
            color: var(--accent-gold);
            font-weight: 700;
            display: block;
            margin-bottom: 8px;
        }

        .news-body-mini h4 {
            font-size: 0.95rem;
            color: var(--primary-dark-teal);
            font-weight: 700;
            line-height: 1.5;
            margin-bottom: 10px;
        }

        .news-body-mini p {
            font-size: 0.8rem;
            color: var(--text-muted);
            line-height: 1.6;
            margin: 0;
        }

        .live-stream-widget {
            background: var(--bg-white);
            border-radius: var(--radius-lg);
            padding: 30px;
            box-shadow: var(--shadow-md);
            border: 1.5px solid rgba(197, 155, 39, 0.25);
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .live-badge-red {
            position: absolute;
            top: 25px;
            right: 25px;
            background: #e74c3c;
            color: var(--text-white);
            font-size: 0.72rem;
            font-weight: 800;
            padding: 4px 10px;
            border-radius: var(--radius-pill);
            display: flex;
            align-items: center;
            gap: 6px;
            animation: pulse-live 1.5s infinite;
        }

        @keyframes pulse-live {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(0.95);
                opacity: 0.6;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .live-badge-red i {
            font-size: 0.5rem;
        }

        .live-frame-placeholder {
            width: 100%;
            height: 180px;
            border-radius: var(--radius-md);
            background: var(--primary-dark-teal);
            margin: 25px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .live-frame-placeholder img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.35;
        }

        .btn-play-live {
            position: absolute;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--accent-gold);
            color: var(--primary-dark-teal);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            cursor: pointer;
            box-shadow: 0 5px 15px rgba(197, 155, 39, 0.4);
            transition: var(--transition-base);
        }

        .btn-play-live:hover {
            transform: scale(1.1);
            background: var(--text-white);
            color: var(--primary-teal);
        }

        .live-stream-widget h4 {
            color: var(--primary-dark-teal);
            font-size: 1.1rem;
            font-weight: 800;
            margin-bottom: 10px;
            line-height: 1.5;
        }

        .live-details {
            font-size: 0.85rem;
            color: var(--text-muted);
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 25px;
        }

        .live-details span i {
            color: var(--primary-teal);
            width: 20px;
        }

        .countdown-timer-wrap {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 25px;
            direction: ltr;
            /* ليكون الوقت من اليسار لليمين */
        }

        .time-box {
            background: var(--bg-mint-light);
            border-radius: var(--radius-sm);
            padding: 10px;
            min-width: 55px;
            text-align: center;
            border: 1px solid rgba(10, 77, 68, 0.05);
        }

        .time-num {
            display: block;
            font-size: 1.25rem;
            font-weight: 800;
            color: var(--primary-dark-teal);
        }

        .time-lbl {
            font-size: 0.65rem;
            color: var(--text-muted);
            display: block;
            margin-top: 2px;
        }

        /* استجابة شاشات التابلت والجوال للأقسام المضافة */
        @media (max-width: 992px) {
            .services-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .membership-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .governance-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .sponsorship-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .volunteer-grid {
                grid-template-columns: 1fr;
            }

            .media-live-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .services-grid {
                grid-template-columns: 1fr;
            }

            .membership-grid {
                grid-template-columns: 1fr;
            }

            .governance-grid {
                grid-template-columns: 1fr;
            }

            .sponsorship-grid {
                grid-template-columns: 1fr;
            }

            .news-columns {
                grid-template-columns: 1fr;
            }
        }

        /* إخفاء الشريط بالكامل في الجوال لراحة تصفح المستخدم */
        @media (max-width: 768px) {
            .social-float-container {
                display: none !important;
            }
        }

        /* ========================================================================== */

        /* ==========================================================================
   V7 ADDITIONS (Laravel dynamic build) — dropdowns, nav actions, event/store
   cards, jobs band, flash, chairman card + LTR mirror overrides
   ========================================================================== */

        /* ---- Header: action cluster (cart / join / account) ---- */
        .nav-actions a.lang-btn {
            text-decoration: none;
        }

        .voc-nav-cart {
            position: relative;
            font-size: 1.05rem;
            color: var(--text-white);
            opacity: 0.9;
        }

        .voc-nav-cart:hover {
            color: var(--accent-gold);
        }

        .voc-nav-cart .voc-cart-badge {
            position: absolute;
            top: -8px;
            inset-inline-end: -10px;
            background: var(--accent-gold);
            color: var(--primary-dark-teal);
            font-family: var(--font-en);
            font-size: 0.65rem;
            font-weight: 800;
            min-width: 17px;
            height: 17px;
            line-height: 17px;
            text-align: center;
            border-radius: 50%;
            padding: 0 4px;
        }

        .btn-nav-join {
            background: var(--accent-gold);
            color: var(--text-white);
            padding: 8px 20px;
            border-radius: var(--radius-pill);
            font-size: 0.85rem;
            font-weight: 800;
        }

        .btn-nav-join:hover {
            background: var(--text-white);
            color: var(--primary-dark-teal);
            transform: translateY(-2px);
        }

        .nav-actions .nav-link-plain {
            color: rgba(255, 255, 255, 0.85);
            font-size: 0.85rem;
            font-weight: 700;
        }

        .nav-actions .nav-link-plain:hover {
            color: var(--accent-gold);
        }

        /* ---- Chairman word card (about section) ---- */
        .chairman-card {
            display: flex;
            align-items: center;
            gap: 16px;
            background: linear-gradient(180deg, #FFFFFF 0%, #F8FCFB 30%, #F3F9F7 70%, #FFFFFF 100%);
            border: 1px solid rgba(16, 112, 98, 0.1);
            border-inline-start: 4px solid var(--accent-gold);
            border-radius: var(--radius-md);
            padding: 16px 20px;
            margin-top: 6px;
            margin-bottom: 30px;
            width: 100%;
        }

        .chairman-card img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--accent-gold);
            flex-shrink: 0;
        }

        .chairman-card .cc-role {
            font-size: 0.78rem;
            color: var(--accent-gold-hover);
            font-weight: 800;
        }

        .chairman-card .cc-name {
            font-size: 1rem;
            color: var(--primary-dark-teal);
            font-weight: 800;
        }

        .chairman-card .cc-quote {
            font-size: 0.85rem;
            color: var(--text-muted);
            margin: 0;
        }

        /* ---- Events & exhibitions grid ---- */
        .events-section {
            background: var(--bg-mint-ultra-light);
        }

        .events-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        .event-card {
            background: var(--bg-white);
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(16, 112, 98, 0.05);
            display: flex;
            flex-direction: column;
            transition: var(--transition-smooth);
        }

        .event-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-lg);
            border-color: rgba(16, 112, 98, 0.12);
        }

        .event-card .event-img {
            position: relative;
            height: 200px;
            overflow: hidden;
        }

        .event-card .event-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition-smooth);
        }

        .event-card:hover .event-img img {
            transform: scale(1.08);
        }

        .event-status-badge {
            position: absolute;
            top: 15px;
            inset-inline-start: 15px;
            background: var(--accent-gold);
            color: var(--primary-dark-teal);
            font-size: 0.72rem;
            font-weight: 800;
            padding: 5px 12px;
            border-radius: var(--radius-pill);
        }

        .event-status-badge.is-open {
            background: #2ecc71;
            color: #fff;
        }

        .event-type-chip {
            position: absolute;
            top: 15px;
            inset-inline-end: 15px;
            background: rgba(10, 77, 68, 0.9);
            color: #fff;
            font-size: 0.72rem;
            font-weight: 700;
            padding: 5px 12px;
            border-radius: var(--radius-pill);
            backdrop-filter: blur(5px);
        }

        /* Structured event program schedule (event details) */
        .event-schedule {
            margin: 8px 0 22px;
            border-inline-start: 3px solid var(--accent-gold, #C9A24B);
            padding-inline-start: 16px;
        }

        .event-schedule-row {
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 10px;
            padding: 8px 0;
            border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
        }

        .event-schedule-row .es-time {
            font-weight: 800;
            color: var(--primary-dark-teal, #0A4D44);
            min-width: 62px;
        }

        .event-schedule-row .es-type {
            font-size: 0.75rem;
            background: rgba(10, 77, 68, 0.08);
            color: var(--primary-teal, #2C6E64);
            padding: 2px 10px;
            border-radius: var(--radius-pill, 999px);
        }

        .event-schedule-row .es-title {
            color: var(--text-muted, #444);
        }

        /* Services provided with an exhibition booth (exhibitor registration) */
        .booth-services-list {
            list-style: none;
            margin: 8px 0 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 8px 18px;
        }

        .booth-services-list li {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--text-muted, #555);
            font-size: 0.92rem;
        }

        .booth-services-list li i {
            color: var(--primary-teal, #2C6E64);
            font-size: 0.85rem;
        }

        /* Exhibition logo overlaid on the card image (spec: show logo on the card, not only the details page) */
        .event-card .event-img img.event-logo-chip {
            position: absolute;
            bottom: 12px;
            inset-inline-end: 12px;
            width: 54px;
            height: 54px;
            object-fit: contain;
            background: #fff;
            border-radius: 10px;
            padding: 5px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
            transition: none;
        }

        .event-card:hover .event-img img.event-logo-chip {
            transform: none;
        }

        .event-body {
            padding: 24px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .event-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            font-size: 0.82rem;
            color: var(--text-muted);
            margin-bottom: 12px;
        }

        .event-meta span i {
            color: var(--accent-gold);
            margin-inline-end: 5px;
        }

        .event-body h4 {
            font-size: 1.05rem;
            font-weight: 800;
            color: var(--primary-dark-teal);
            margin-bottom: 16px;
            line-height: 1.5;
            flex-grow: 1;
        }

        .event-mini-countdown {
            display: flex;
            gap: 8px;
            direction: ltr;
            margin-bottom: 16px;
        }

        .event-mini-countdown .mc-box {
            flex: 1;
            background: var(--bg-mint-light);
            border: 1px solid rgba(10, 77, 68, 0.05);
            border-radius: var(--radius-sm);
            padding: 8px 4px;
            text-align: center;
        }

        .event-mini-countdown .mc-num {
            display: block;
            font-family: var(--font-en);
            font-size: 1.1rem;
            font-weight: 800;
            color: var(--primary-dark-teal);
        }

        .event-mini-countdown .mc-lbl {
            font-size: 0.6rem;
            color: var(--text-muted);
        }

        .booths-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--primary-teal);
            background: rgba(16, 112, 98, 0.07);
            border-radius: var(--radius-pill);
            padding: 5px 12px;
            margin-bottom: 16px;
            align-self: flex-start;
        }

        .booths-chip i {
            color: var(--accent-gold);
        }

        .event-btn {
            display: block;
            text-align: center;
            background: var(--primary-teal);
            color: var(--text-white);
            font-weight: 800;
            font-size: 0.88rem;
            padding: 11px 0;
            border-radius: var(--radius-sm);
            transition: var(--transition-base);
        }

        .event-btn:hover {
            background: var(--primary-dark-teal);
        }

        /* ---- Digital store ---- */
        .store-section {
            background: var(--bg-white);
        }

        .store-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
            margin-top: 50px;
        }

        .product-card {
            background: var(--bg-white);
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(16, 112, 98, 0.06);
            display: flex;
            flex-direction: column;
            transition: var(--transition-smooth);
        }

        .product-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-lg);
        }

        .product-card .product-img {
            height: 180px;
            overflow: hidden;
            background: var(--bg-mint-light);
        }

        .product-card .product-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition-smooth);
        }

        .product-card:hover .product-img img {
            transform: scale(1.06);
        }

        .product-body {
            padding: 20px;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

        .product-body h4 {
            font-size: 0.98rem;
            font-weight: 800;
            color: var(--primary-dark-teal);
            margin-bottom: 10px;
            line-height: 1.5;
            flex-grow: 1;
        }

        .product-price {
            font-family: var(--font-en);
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--primary-teal);
            margin-bottom: 14px;
        }

        .product-price small {
            font-family: var(--font-ar);
            font-size: 0.75rem;
            color: var(--text-muted);
            font-weight: 700;
        }

        .product-actions {
            display: flex;
            gap: 8px;
        }

        .product-actions form {
            flex: 1;
        }

        .btn-add-cart {
            width: 100%;
            background: var(--primary-teal);
            color: #fff;
            border: none;
            font-family: var(--font-ar);
            font-weight: 800;
            font-size: 0.85rem;
            padding: 10px 0;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: var(--transition-base);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .btn-add-cart:hover {
            background: var(--accent-gold);
        }

        .btn-prod-view {
            width: 46px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(16, 112, 98, 0.15);
            border-radius: var(--radius-sm);
            color: var(--primary-teal);
            transition: var(--transition-base);
        }

        .btn-prod-view:hover {
            background: var(--primary-teal);
            color: #fff;
        }

        /* ---- Jobs / co-op CTA band ---- */
        .jobs-band-section {
            background: var(--bg-mint-ultra-light);
            padding: 40px 0;
        }

        .jobs-band {
            background: linear-gradient(120deg, var(--primary-dark-teal) 0%, var(--primary-teal) 100%);
            border-radius: var(--radius-lg);
            border-bottom: 4px solid var(--accent-gold);
            padding: 45px 50px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
            color: #fff;
            position: relative;
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            flex-wrap: wrap;
        }

        .jobs-band-text h3 {
            font-size: 1.6rem;
            font-weight: 800;
            margin-bottom: 8px;
        }

        .jobs-band-text h3 span {
            color: var(--accent-gold);
        }

        .jobs-band-text p {
            font-size: 0.95rem;
            opacity: 0.9;
            max-width: 620px;
        }

        .jobs-band-actions {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
        }

        /* ---- Membership QR note ---- */
        .membership-qr-note {
            text-align: center;
            margin-top: 35px;
            font-size: 0.9rem;
            color: var(--text-muted);
        }

        .membership-qr-note i {
            color: var(--accent-gold);
            margin-inline-end: 6px;
        }

        .membership-qr-note a {
            color: var(--primary-teal);
            font-weight: 800;
        }

        /* ---- Flash / success alert ---- */
        .voc-flash {
            max-width: 1240px;
            width: 90%;
            margin: 20px auto 0;
            background: #eafaf4;
            border: 1px solid #2ecc71;
            border-inline-start: 4px solid #2ecc71;
            color: #1c7a4e;
            padding: 14px 22px;
            border-radius: var(--radius-sm);
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .voc-flash i {
            color: #2ecc71;
        }

        .section-header .sub-badge i {
            margin-inline-end: 6px;
        }

        .voc-empty {
            text-align: center;
            color: var(--text-muted);
            padding: 30px;
            font-weight: 700;
            grid-column: 1 / -1;
        }

        /* ==========================================================================
   LTR mirror overrides (English)
   ========================================================================== */
        html[dir="ltr"] .hero-info-side,
        html[dir="ltr"] .about-content-block,
        html[dir="ltr"] .volunteer-content {
            text-align: left;
        }

        html[dir="ltr"] .hero-quote-card::after {
            right: auto;
            left: 0;
            border-right: none;
            border-left: 5.5px solid var(--accent-gold);
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-top-left-radius: var(--radius-md);
            border-bottom-left-radius: var(--radius-md);
        }

        html[dir="ltr"] .hero-quote-card .quote-decor-icon {
            left: auto;
            right: 20px;
        }

        html[dir="ltr"] .floating-exp-card {
            left: auto;
            right: -30px;
            border-right: none;
            border-left: 4px solid var(--accent-gold);
        }

        html[dir="ltr"] .about-gold-offset {
            border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xl) 0;
            transform: translate(15px, 15px);
        }

        html[dir="ltr"] .about-img-actual {
            border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xl) 0;
        }

        html[dir="ltr"] .footer-column h5::after {
            right: auto;
            left: 0;
        }

        html[dir="ltr"] .stats-strip-item {
            border-right: none;
            border-left: 1px solid rgba(255, 255, 255, 0.15);
            padding-right: 0;
            padding-left: 40px;
        }

        html[dir="ltr"] .stats-strip-item:first-child {
            border-left: none;
            padding-left: 0;
        }

        html[dir="ltr"] .volunteer-team-item {
            border-right: none;
            border-left: 4px solid var(--accent-gold);
        }

        html[dir="ltr"] .node-riyadh {
            right: auto;
            left: -20px;
        }

        html[dir="ltr"] .node-jeddah {
            right: auto;
            left: -40px;
        }

        html[dir="ltr"] .node-dammam {
            left: auto;
            right: -20px;
        }

        html[dir="ltr"] body {
            line-height: 1.7;
        }

        /* ==========================================================================
   Extra responsive for new grids
   ========================================================================== */
        @media (max-width: 1024px) {
            .events-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .store-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .jobs-band {
                flex-direction: column;
                text-align: center;
            }

            .nav-dropdown {
                position: static;
                opacity: 1;
                visibility: visible;
                transform: none;
                box-shadow: none;
                background: transparent;
                border: none;
                padding: 6px 0 6px 16px;
            }
        }

        @media (max-width: 768px) {
            .events-grid {
                grid-template-columns: 1fr;
            }

            .store-grid {
                grid-template-columns: 1fr 1fr;
            }

            .chairman-card {
                flex-direction: column;
                text-align: center;
            }
        }

        @media (max-width: 520px) {
            .store-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ---- Membership rich description ---- */
        .membership-rich {
            font-size: 0.9rem;
            color: var(--text-dark);
            line-height: 1.8;
            margin-bottom: 30px;
            flex-grow: 1;
        }

        .membership-rich ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .membership-rich ul li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .membership-rich ul li::before {
            content: "\f058";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            color: var(--primary-teal);
        }

        .membership-card.featured .membership-rich ul li::before {
            color: var(--accent-gold);
        }

        /* ---- Service icon image ---- */
        .service-card-icon img {
            width: 30px;
            height: 30px;
            object-fit: contain;
        }

        /* ---- Programs section reuse ---- */
        .programs-plain-section {
            background: var(--bg-white);
        }

        .about-content-block .about-values-grid+.chairman-card {
            margin-top: 0;
        }

        /* ---- Localized featured membership tag (replaces hardcoded ::after) ---- */
        .membership-card.featured::after {
            content: none !important;
        }

        .membership-featured-tag {
            position: absolute;
            top: 20px;
            inset-inline-start: 20px;
            background: var(--accent-gold);
            color: var(--primary-dark-teal);
            font-size: 0.72rem;
            font-weight: 800;
            padding: 4px 12px;
            border-radius: var(--radius-pill);
        }



        /* ==========================================================================
   Nav v2: faster dropdowns, mega tuning, real mobile accordion (<=1024)
   ========================================================================== */
        /* لا تضع overflow هنا مطلقاً — القوائم المنسدلة (position:absolute) تخرج
           خارج حدود الشريط، وأي overflow غير visible يقصّها فتظهر مبتورة/مختفية.
           تزاحم العناصر يُعالَج بزر "المزيد" لا بتمرير أفقي. */
        .nav-collapse {
            display: flex;
            flex: 1;
            justify-content: flex-start;
            align-items: center;
            gap: 18px;
            min-height: 50px;
        }

        @media (max-width: 1024px) {

            /* clean full-width solid teal header bar on mobile (no slant) */
            header {
                background: var(--primary-dark-teal);
                box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
            }

            .voc-header-row1 {
                height: 66px;
                padding: 0 18px;
                gap: 10px;
            }

            .nav-slanted-bar::before,
            .nav-slanted-bar::after {
                display: none;
            }

            .nav-slanted-bar {
                margin: 0;
                padding: 0;
                justify-content: flex-end;
                background: transparent;
                box-shadow: none;
            }

            .menu-toggle {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                font-size: 1.4rem;
                height: 38px;
                width: 38px;
                line-height: 1;
                margin: 0;
            }

            .logo-box {
                background: transparent;
                box-shadow: none;
                border: none;
                padding: 0;
                min-width: 0;
                flex-shrink: 1;
            }

            .logo-box a {
                display: flex;
                align-items: center;
                max-width: 100%;
            }

            .nav-actions {
                display: flex;
                align-items: center;
                gap: 8px;
                flex-shrink: 0;
            }

            .logo-box img {
                height: 38px;
                max-width: 100%;
                object-fit: contain;
            }

            .logo-box .logo-color {
                display: none;
            }

            .logo-box .logo-white {
                display: block;
            }

            .nav-collapse {
                display: none;
            }

            .nav-collapse.open {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                position: fixed;
                /* يطابق ارتفاع .voc-header-row1 الفعلي (متغيّر --header-h يُضبط بدقة
                   عبر JS — انظر measureHeaderHeight في home.blade.php — بدل تخمين
                   ثابت بالبكسل قد يترك فراغاً أو تراكباً حسب حجم الخط/الشاشة) */
                top: var(--header-h);
                inset-inline-start: 0;
                width: 100%;
                max-height: calc(100vh - var(--header-h));
                overflow-y: auto;
                background: var(--primary-dark-teal);
                box-shadow: var(--shadow-lg);
                padding: 8px 0 16px;
                z-index: 1300;
            }

            .nav-collapse.open .nav-links-menu {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                width: 100%;
            }

            .nav-collapse.open .nav-links-menu>li {
                width: 100%;
                border-bottom: 1px solid rgba(255, 255, 255, 0.07);
            }

            .nav-collapse.open .nav-links-menu>li>a {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                padding: 14px 22px;
                font-size: 1rem;
            }

            /* محاذاة موحّدة سواء كان للعنصر سهم فرعي (caret) أم لا: النص يبدأ
               دائماً بعد الأيقونة مباشرة (justify-content: flex-start أعلاه)،
               والسهم إن وُجد يُدفع للطرف الآخر بهامش تلقائي بدل الاعتماد على
               space-between التي كانت تدفع النص بالكامل للطرف الآخر في العناصر
               بلا فروع (لا يوجد caret يوازن التوزيع) */
            .nav-collapse.open .nav-links-menu>li>a .caret {
                margin-inline-start: auto;
            }

            .nav-collapse.open .nav-links-menu>li>a::after {
                display: none;
            }

            .nav-collapse.open .caret {
                transition: transform 0.2s ease;
                opacity: 0.9;
            }

            .nav-collapse.open .has-dropdown.open>a .caret {
                transform: rotate(180deg);
            }

            /* submenus collapsed by default, expand on .open */
            .nav-collapse.open .nav-dropdown,
            .nav-collapse.open .nav-dropdown.mega {
                display: none;
                position: static;
                opacity: 1;
                visibility: visible;
                transform: none;
                flex-direction: column;
                min-width: 0;
                width: 100%;
                background: rgba(0, 0, 0, 0.16);
                border: none;
                border-top: none;
                box-shadow: none;
                padding: 4px 0 10px;
            }

            .nav-collapse.open .has-dropdown.open>.nav-dropdown {
                display: flex;
                /* يلغي سقف الـ800px وقصّ overflow:hidden الموروثين من قاعدة الجوال
                   القديمة (.nav-links-menu li.has-dropdown .nav-dropdown) — قائمة
                   "المزيد" أطول من ذلك بكثير، فتحتاج للتمدد الحر والسماح لحاوية
                   .nav-collapse.open نفسها (overflow-y:auto) بالتمرير عوضاً عنها */
                max-height: none;
                overflow: visible;
            }

            .nav-collapse.open .nav-dropdown a {
                padding: 12px 38px;
            }

            .nav-collapse.open .nav-dropdown.mega .nav-col {
                min-width: 0;
            }

            .nav-collapse.open .nav-dropdown.mega .nav-col+.nav-col {
                border-inline-start: none;
                padding-inline-start: 0;
                margin-top: 2px;
            }

            .nav-collapse.open .nav-col-title {
                padding: 10px 30px 4px;
                border-bottom: none;
            }

            /* ملاحظة: "أزرار مثبّتة أسفل اللوحة" — كانت هنا قاعدة قديمة تستهدف
               .nav-collapse.open .nav-actions، لكن .nav-actions لم يعد يظهر داخل
               اللوحة إطلاقاً (نُقل .nav-actions بالكامل لصف علوي ثابت الظهور،
               والحساب/انضم الآن لهما الآن كتلتهما الخاصة .nav-collapse-actions
               أعلاه) فحُذفت كقاعدة ميتة بدل تركها تتراكم فوق التنسيق الجديد.

               nav-actions الآن دائماً داخل .voc-header-row1 (صف ثابت الظهور) وليس
               داخل اللوحة المنسدلة — تجاوز صريح لأي تنسيق "مثبّت أسفل اللوحة" قديم
               (هامش/فاصل علوي) ورثته من قواعد جوال أقدم لم تعد تنطبق هنا. */
            .voc-header-row1 .nav-actions {
                flex-wrap: nowrap;
                gap: 8px;
                margin-top: 0;
                padding-top: 0;
                border-top: 0;
            }

            .voc-header-row1 .btn-nav-join {
                padding: 6px 14px;
                font-size: 0.8rem;
                white-space: nowrap;
            }

            .voc-header-row1 .nav-actions .nav-link-plain,
            .voc-header-row1 .nav-actions .lang-btn {
                font-size: 0.78rem;
                padding: 6px 10px;
            }

            /* الصف العلوي على الجوال يحتفظ فقط بـ: الشعار + زر اللغة + السلة + ☰ —
               تسجيل الدخول/انضم الآن ينتقلان لأسفل لوحة القائمة (.nav-collapse-actions) */
            .voc-header-row1 .nav-actions .row1-auth-links {
                display: none;
            }

            .nav-collapse.open .nav-collapse-actions {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                gap: 10px;
                width: 100%;
                padding: 16px 22px 6px;
                margin-top: 6px;
                border-top: 1px solid rgba(255, 255, 255, 0.12);
            }

            .nav-collapse.open .nav-collapse-actions .nav-link-plain {
                justify-content: center;
            }

            .nav-collapse.open .nav-collapse-actions .btn-nav-join {
                justify-content: center;
                width: 100%;
                padding: 12px 20px;
                font-size: 0.95rem;
            }
        }

        @media (max-width: 480px) {
            .voc-header-row1 {
                padding: 0 10px;
                gap: 6px;
            }
            .voc-header-row1 .nav-actions {
                gap: 6px;
            }
            .voc-header-row1 .nav-actions .lang-btn {
                padding: 0 10px;
                font-size: 0.78rem;
                height: 34px;
            }
            .voc-header-row1 .voc-nav-cart,
            .voc-header-row1 .menu-toggle {
                height: 34px;
                width: 34px;
                font-size: 1.15rem;
            }
            .logo-box img {
                height: 32px;
            }
        }



        /* ==========================================================================
   INNER PAGES — shared page hero (breadcrumb banner) + content helpers
   ========================================================================== */
        .page-hero {
            position: relative;
            /* lighter teal at the top so the dark header bar reads clearly against it,
       deepening toward the bottom for depth */
            background: linear-gradient(158deg, #199985 0%, var(--primary-teal) 48%, var(--primary-dark-teal) 100%);
            color: var(--text-white);
            padding: 150px 0 60px;
            overflow: hidden;
            border-bottom: 4px solid var(--accent-gold);
        }

        .page-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            opacity: 0.06;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23FFFFFF" d="M0,224L60,202.7C120,181,240,139,360,138.7C480,139,600,181,720,186.7C840,192,960,160,1080,138.7C1200,117,1320,107,1380,101.3L1440,96L1440,320L0,320Z"></path></svg>') no-repeat bottom / cover;
            pointer-events: none;
        }

        .page-hero .container {
            position: relative;
            z-index: 2;
        }

        .page-hero .page-eyebrow {
            display: inline-block;
            background: rgba(197, 155, 39, 0.18);
            color: var(--accent-gold);
            font-size: 0.8rem;
            font-weight: 800;
            padding: 5px 16px;
            border-radius: var(--radius-pill);
            margin-bottom: 14px;
            border: 1px solid rgba(197, 155, 39, 0.3);
        }

        .page-hero h1 {
            font-size: 2.4rem;
            font-weight: 800;
            margin-bottom: 14px;
            line-height: 1.3;
        }

        .page-hero .page-breadcrumb {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
            opacity: 0.9;
        }

        .page-hero .page-breadcrumb a {
            color: var(--text-white);
            font-weight: 700;
            transition: var(--transition-base);
        }

        .page-hero .page-breadcrumb a:hover {
            color: var(--accent-gold);
        }

        .page-hero .page-breadcrumb .sep {
            opacity: 0.5;
        }

        .page-hero .page-breadcrumb .current {
            color: var(--accent-gold);
            font-weight: 700;
        }

        /* image-backed hero variant (per-page content photo) */
        .page-hero.has-image {
            background-color: var(--primary-dark-teal);
        }

        .page-hero-img-layer {
            position: absolute;
            inset: 0;
            z-index: 0;
            background-image: linear-gradient(180deg, rgba(15, 56, 50, .74) 0%, rgba(15, 56, 50, .88) 100%), var(--page-hero-img);
            background-size: cover;
            background-position: center;
            animation: voc-hero-img-zoom 16s ease-in-out infinite alternate;
            will-change: transform;
        }

        @keyframes voc-hero-img-zoom {
            from {
                transform: scale(1);
            }

            to {
                transform: scale(1.08);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .page-hero-img-layer {
                animation: none;
            }
        }

        .page-hero.has-image::before {
            opacity: 0.10;
            z-index: 1;
        }

        .page-hero.has-image::after {
            content: '';
            position: absolute;
            inset: 14px;
            border: 1px solid rgba(197, 155, 39, .35);
            border-radius: var(--radius-lg);
            pointer-events: none;
            z-index: 1;
        }

        .page-hero.has-image .container {
            z-index: 2;
        }

        /* large translucent watermark icon for photo-less pages */
        .page-hero-icon-decor {
            position: absolute;
            top: 50%;
            inset-inline-end: 6%;
            font-size: 9rem;
            color: rgba(255, 255, 255, .10);
            pointer-events: none;
            z-index: 1;
            animation: voc-hero-icon-float 5s ease-in-out infinite;
        }

        @keyframes voc-hero-icon-float {

            0%,
            100% {
                transform: translateY(-52%);
            }

            50% {
                transform: translateY(-46%);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .page-hero-icon-decor {
                animation: none;
                transform: translateY(-50%);
            }
        }

        @media (max-width: 767px) {
            .page-hero-icon-decor {
                display: none;
            }
        }

        /* accent variants so photo-less pages don't all read identical */
        .page-hero.accent-teal .page-eyebrow,
        .page-hero.accent-teal .page-breadcrumb .current {
            background: rgba(20, 107, 95, .28);
            color: #dff6ee;
            border-color: rgba(223, 246, 238, .35);
        }

        .page-hero.accent-teal {
            border-bottom-color: var(--primary-teal-light);
        }

        .page-hero.accent-mint .page-eyebrow,
        .page-hero.accent-mint .page-breadcrumb .current {
            background: rgba(196, 236, 213, .22);
            color: var(--bg-mint-light);
            border-color: rgba(196, 236, 213, .35);
        }

        .page-hero.accent-mint {
            border-bottom-color: var(--mint-accent);
        }

        /* rich HTML content coming from the DB (descriptions, articles) */
        .rich-content {
            color: var(--text-muted);
            font-size: 1rem;
            line-height: 1.9;
        }

        .rich-content>*:first-child {
            margin-top: 0;
        }

        .rich-content p {
            margin-bottom: 16px;
        }

        .rich-content h2,
        .rich-content h3,
        .rich-content h4 {
            color: var(--primary-dark-teal);
            font-weight: 800;
            margin: 24px 0 12px;
        }

        .rich-content ul,
        .rich-content ol {
            margin: 0 0 16px;
            padding-inline-start: 22px;
        }

        .rich-content li {
            margin-bottom: 8px;
        }

        .rich-content img {
            max-width: 100%;
            height: auto;
            border-radius: var(--radius-md);
            margin: 14px 0;
        }

        .rich-content a {
            color: var(--primary-teal);
            font-weight: 700;
        }

        .rich-content a:hover {
            color: var(--accent-gold);
        }

        /* generic inner two-column media/text block */
        .inner-section {
            background: var(--bg-white);
        }

        .inner-section.alt {
            background: var(--bg-mint-light);
        }

        .inner-media-grid {
            display: grid;
            grid-template-columns: 1fr 1.1fr;
            gap: 55px;
            align-items: center;
        }

        .inner-media-grid .inner-media img {
            width: 100%;
            border-radius: var(--radius-lg) var(--radius-lg) 0 var(--radius-lg);
            box-shadow: var(--shadow-lg);
            object-fit: cover;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: var(--text-muted);
        }

        .empty-state i {
            font-size: 2.4rem;
            color: rgba(16, 112, 98, 0.3);
            margin-bottom: 14px;
            display: block;
        }

        .empty-state h4 {
            color: var(--primary-dark-teal);
            font-weight: 800;
            margin-bottom: 6px;
        }

        @media (max-width: 1024px) {
            .page-hero {
                padding: 120px 0 45px;
            }

            .page-hero h1 {
                font-size: 1.9rem;
            }

            .inner-media-grid {
                grid-template-columns: 1fr;
                gap: 35px;
            }
        }

        /* ==========================================================================
   INNER PAGES — forms + contact
   ========================================================================== */
        .form-card {
            background: var(--bg-white);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-md);
            border: 1px solid rgba(16, 112, 98, 0.06);
            padding: 40px;
        }

        .form-card .form-title {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--primary-dark-teal);
            margin-bottom: 22px;
        }

        .form-grid2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
        }

        .form-field {
            margin-bottom: 16px;
            display: flex;
            flex-direction: column;
        }

        .form-field label {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--primary-dark-teal);
            margin-bottom: 7px;
        }

        .form-field input,
        .form-field select,
        .form-field textarea {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid rgba(16, 112, 98, 0.18);
            border-radius: var(--radius-sm);
            font-family: var(--font-ar);
            font-size: 0.92rem;
            color: var(--text-dark);
            background: var(--bg-mint-ultra-light);
            transition: var(--transition-base);
        }

        .form-field input:focus,
        .form-field select:focus,
        .form-field textarea:focus {
            outline: none;
            border-color: var(--primary-teal);
            background: #fff;
            box-shadow: 0 0 0 3px rgba(16, 112, 98, 0.08);
        }

        .form-field .err {
            color: #e74c3c;
            font-size: 0.78rem;
            margin-top: 5px;
        }

        .form-note {
            background: rgba(197, 155, 39, 0.08);
            border: 1px solid rgba(197, 155, 39, 0.25);
            border-inline-start: 4px solid var(--accent-gold);
            border-radius: var(--radius-sm);
            padding: 18px 22px;
            margin-bottom: 22px;
            font-size: 0.9rem;
            color: var(--text-dark);
            line-height: 1.8;
        }

        .form-note ul {
            margin: 8px 0 0;
            padding-inline-start: 20px;
        }

        .form-note li {
            margin-bottom: 4px;
        }

        /* السلة: كود الخصم وملخص الإجمالي */
        .cart-coupon {
            margin-top: 18px;
        }

        .cart-coupon-form {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .cart-coupon-form input {
            flex: 1;
            min-width: 180px;
            padding: 10px 14px;
            border: 1px solid rgba(16, 112, 98, 0.2);
            border-radius: var(--radius-sm);
            font: inherit;
        }

        .cart-coupon-applied {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            background: var(--bg-mint-light);
            border: 1px dashed var(--primary-teal);
            border-radius: var(--radius-sm);
            padding: 10px 16px;
            font-weight: 700;
            color: var(--primary-teal);
        }

        .cart-coupon-remove {
            background: none;
            border: none;
            color: #c0392b;
            font-size: 0.82rem;
            cursor: pointer;
            font-weight: 700;
        }

        .cart-coupon-err {
            color: #c0392b;
            font-size: 0.84rem;
            margin-top: 8px;
        }

        .cart-total-lines {
            margin-top: 16px;
            border-top: 1px solid rgba(0, 0, 0, 0.08);
            padding-top: 14px;
        }

        .ctl-row {
            display: flex;
            justify-content: space-between;
            padding: 5px 0;
            color: var(--text-dark);
        }

        .ctl-discount {
            color: #1e8e50;
        }

        .ctl-grand {
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--primary-teal);
            border-top: 1px solid rgba(0, 0, 0, 0.08);
            margin-top: 6px;
            padding-top: 10px;
        }

        /* حساب العضو: عناوين فرعية داخل البطاقة */
        .account-subhead {
            font-size: 1rem;
            font-weight: 800;
            color: var(--primary-teal);
            margin: 6px 0 12px;
            padding-inline-start: 10px;
            border-inline-start: 3px solid var(--accent-gold);
        }

        /* المتجر: نوع المنتج وبيانات الملف على البطاقة */
        .product-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 8px;
        }

        .product-type-chip {
            font-size: 0.7rem;
            font-weight: 700;
            background: rgba(197, 155, 39, 0.12);
            color: var(--accent-gold);
            padding: 3px 10px;
            border-radius: 999px;
        }

        .product-filemeta {
            font-size: 0.72rem;
            color: var(--text-muted);
        }

        /* المركز الإعلامي: أقسام المركز والهوية الإعلامية */
        .mc-hub {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 14px;
            margin-bottom: 24px;
        }

        .mc-hub-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 22px 12px;
            background: var(--bg-white);
            border: 1px solid rgba(16, 112, 98, 0.1);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            color: var(--primary-dark-teal);
            font-weight: 700;
            font-size: 0.9rem;
            text-align: center;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
        }

        .mc-hub-card i {
            font-size: 1.6rem;
            color: var(--primary-teal);
            transition: color .2s ease;
        }

        .mc-hub-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-md);
            background: var(--primary-teal);
            color: #fff;
        }

        .mc-hub-card:hover i {
            color: var(--accent-gold);
        }

        .mc-identity {
            display: flex;
            align-items: center;
            gap: 24px;
            flex-wrap: wrap;
            background: var(--bg-mint-light);
            border: 1px solid rgba(16, 112, 98, 0.1);
            border-radius: var(--radius-lg);
            padding: 24px 28px;
        }

        .mc-identity-logo img {
            height: 70px;
            width: auto;
        }

        .mc-identity-body {
            flex: 1;
            min-width: 240px;
        }

        .mc-identity-body h3 {
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--primary-dark-teal);
            margin-bottom: 6px;
        }

        .mc-identity-body p {
            color: var(--text-muted);
            line-height: 1.7;
            margin-bottom: 14px;
        }

        /* مراحل دراسة الطلب */
        .review-stages {
            margin-top: 24px;
            background: var(--bg-white);
            border: 1px solid rgba(16, 112, 98, 0.1);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
            padding: 24px 28px;
        }

        .review-stages-h {
            font-size: 1.1rem;
            font-weight: 800;
            color: var(--primary-dark-teal);
            margin-bottom: 14px;
        }

        .review-stages-list {
            margin: 0;
            padding-inline-start: 20px;
            counter-reset: rs;
            list-style: none;
        }

        .review-stages-list li {
            position: relative;
            padding: 8px 0 8px 8px;
            color: var(--text-dark);
            border-inline-start: 2px solid rgba(16, 112, 98, 0.15);
            padding-inline-start: 22px;
            margin-inline-start: 6px;
        }

        .review-stages-list li::before {
            counter-increment: rs;
            content: counter(rs);
            position: absolute;
            inset-inline-start: -13px;
            top: 8px;
            width: 24px;
            height: 24px;
            background: var(--primary-teal);
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.78rem;
            font-weight: 700;
        }

        /* المبادرات: قائمة المعلومات وبطاقات النتائج */
        .detail-info-list {
            list-style: none;
            padding: 0;
            margin: 0 0 10px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 10px 24px;
        }

        .detail-info-list li {
            color: var(--text-dark);
            font-size: 0.92rem;
            line-height: 1.7;
        }

        .detail-info-list li i {
            color: var(--primary-teal);
            margin-inline-end: 6px;
        }

        .init-results-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 16px;
            margin: 12px 0 6px;
        }

        .init-result-tile {
            background: var(--bg-mint-light);
            border: 1px solid rgba(16, 112, 98, 0.1);
            border-radius: var(--radius-md);
            padding: 20px 12px;
            text-align: center;
        }

        .init-result-tile .irt-num {
            display: block;
            font-size: 1.7rem;
            font-weight: 800;
            color: var(--primary-teal);
        }

        .init-result-tile .irt-lbl {
            display: block;
            font-size: 0.82rem;
            color: var(--text-muted);
            margin-top: 4px;
        }

        /* البث المباشر: مشغّل ومعلومات البث الحالي */
        .ls-live-wrap {
            display: grid;
            grid-template-columns: 1.6fr 1fr;
            gap: 24px;
            align-items: start;
            background: var(--bg-white);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-md);
            padding: 18px;
        }

        .ls-player {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
            border-radius: var(--radius-md);
            overflow: hidden;
            background: #000;
        }

        .ls-player iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        .ls-player-link {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 800;
            background: linear-gradient(135deg, var(--primary-dark-teal), var(--primary-teal));
        }

        .ls-live-info h3 {
            font-size: 1.3rem;
            font-weight: 800;
            color: var(--primary-dark-teal);
            margin-bottom: 12px;
        }

        .ls-live-info p {
            color: var(--text-muted);
            line-height: 1.8;
            margin: 12px 0;
        }

        .ls-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 8px;
        }

        .btn-sm {
            padding: 7px 14px;
            font-size: 0.82rem;
        }

        .ls-sponsors {
            font-size: 0.85rem;
            color: var(--text-muted);
            background: var(--bg-mint-light);
            border-radius: 10px;
            padding: 10px 14px;
            margin: 10px 0;
        }

        .ls-sponsors i {
            color: var(--primary-teal);
            margin-inline-end: 6px;
        }

        .ls-sponsors-sm {
            font-size: 0.78rem;
            padding: 6px 10px;
            margin: 8px 0;
        }

        .ls-qa-box {
            margin-top: 18px;
            padding-top: 16px;
            border-top: 1px solid rgba(0, 0, 0, .08);
        }

        .ls-qa-box h4 {
            font-size: 1rem;
            font-weight: 700;
            color: var(--primary-dark-teal);
            margin-bottom: 10px;
        }

        .ls-qa-form,
        .ls-notify-form {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .ls-qa-form input,
        .ls-qa-form textarea,
        .ls-notify-form input {
            width: 100%;
            border: 1px solid rgba(0, 0, 0, .12);
            border-radius: 10px;
            padding: 9px 12px;
            font-size: 0.88rem;
            font-family: inherit;
        }

        .ls-qa-form button,
        .ls-notify-form button {
            align-self: flex-start;
        }

        .ls-notify-box {
            margin-top: 10px;
        }

        .ls-notify-box summary {
            cursor: pointer;
            font-size: 0.82rem;
            font-weight: 700;
            color: var(--primary-teal);
            list-style: none;
        }

        .ls-notify-box summary::-webkit-details-marker {
            display: none;
        }

        .ls-notify-box .ls-notify-form {
            margin-top: 10px;
        }

        @media (max-width: 768px) {
            .ls-live-wrap {
                grid-template-columns: 1fr;
            }
        }

        /* الفرق التطوعية: أعضاء الفريق ومستنداته على البطاقة */
        .vt-members {
            margin: 10px 0 4px;
        }

        .vt-members-label {
            display: block;
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--primary-teal);
            margin-bottom: 6px;
        }

        .vt-members-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .vt-member-chip {
            font-size: 0.74rem;
            background: var(--bg-mint-light);
            color: var(--primary-dark-teal);
            padding: 3px 10px;
            border-radius: 999px;
            border: 1px solid rgba(16, 112, 98, 0.12);
        }

        .vt-docs {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px dashed rgba(16, 112, 98, 0.15);
        }

        .vt-doc-link {
            font-size: 0.76rem;
            font-weight: 700;
            color: var(--primary-teal);
            background: rgba(16, 112, 98, 0.06);
            padding: 5px 12px;
            border-radius: 8px;
            transition: background .2s ease, color .2s ease;
        }

        .vt-doc-link:hover {
            background: var(--primary-teal);
            color: #fff;
        }

        /* بطاقة "يلزم تسجيل الدخول" التي تحل محل النماذج للزوار غير المسجّلين */
        .auth-required-card {
            background: var(--bg-white);
            border: 1px solid rgba(16, 112, 98, 0.12);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-md);
            padding: 44px 32px;
            text-align: center;
            max-width: 560px;
            margin: 0 auto;
        }

        .auth-required-icon {
            width: 68px;
            height: 68px;
            margin: 0 auto 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(197, 155, 39, 0.12);
            color: var(--accent-gold);
            font-size: 1.6rem;
        }

        .auth-required-card h3 {
            font-size: 1.4rem;
            font-weight: 800;
            color: var(--primary-dark-teal);
            margin-bottom: 10px;
        }

        .auth-required-card p {
            color: var(--text-muted);
            line-height: 1.8;
            margin-bottom: 24px;
        }

        .auth-required-actions {
            display: flex;
            gap: 14px;
            justify-content: center;
            flex-wrap: wrap;
        }

        /* خانة الموافقة على الشروط والأحكام عند التسجيل */
        .form-terms {
            margin: 6px 0 18px;
        }

        .terms-check {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            cursor: pointer;
            font-size: 0.9rem;
            line-height: 1.6;
            color: var(--text-dark);
        }

        .terms-check input[type="checkbox"] {
            width: 18px;
            height: 18px;
            margin-top: 2px;
            accent-color: var(--primary-teal);
            flex: 0 0 auto;
        }

        .terms-check a {
            color: var(--primary-teal);
            font-weight: 700;
            text-decoration: underline;
        }

        .terms-check a:hover {
            color: var(--accent-gold);
        }

        .form-note strong {
            color: var(--primary-dark-teal);
        }

        .contact-cols {
            display: grid;
            grid-template-columns: 0.9fr 1.3fr;
            gap: 40px;
            align-items: start;
        }

        .contact-info-col .ci-item {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            margin-bottom: 22px;
        }

        .contact-info-col .ci-ic {
            width: 46px;
            height: 46px;
            border-radius: 12px;
            background: rgba(16, 112, 98, 0.08);
            color: var(--primary-teal);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.15rem;
            flex-shrink: 0;
        }

        .contact-info-col .ci-item small {
            display: block;
            font-size: 0.78rem;
            color: var(--text-muted);
            margin-bottom: 3px;
        }

        .contact-info-col .ci-item a,
        .contact-info-col .ci-item span {
            color: var(--primary-dark-teal);
            font-weight: 700;
        }

        .contact-info-col .ci-item a:hover {
            color: var(--accent-gold);
        }

        .page-map {
            margin-top: 40px;
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-md);
            border: 1px solid rgba(16, 112, 98, 0.08);
        }

        .page-map iframe {
            width: 100%;
            height: 380px;
            border: 0;
            display: block;
        }

        @media (max-width: 900px) {

            .form-grid2,
            .contact-cols {
                grid-template-columns: 1fr;
            }
        }

        /* ==========================================================================
   INNER PAGES — listing toolbar (search + filter chips) + pagination + logo grid
   ========================================================================== */
        .listing-toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 30px;
        }

        .listing-search {
            display: flex;
            flex: 1;
            min-width: 240px;
            max-width: 460px;
            border: 1px solid rgba(16, 112, 98, 0.18);
            border-radius: var(--radius-pill);
            overflow: hidden;
            background: #fff;
        }

        .listing-search input {
            flex: 1;
            border: 0;
            padding: 11px 20px;
            font-family: var(--font-ar);
            font-size: 0.9rem;
            background: transparent;
            outline: none;
            color: var(--text-dark);
        }

        .listing-search button {
            border: 0;
            background: var(--primary-teal);
            color: #fff;
            padding: 0 22px;
            cursor: pointer;
            font-weight: 700;
            transition: var(--transition-base);
        }

        .listing-search button:hover {
            background: var(--primary-dark-teal);
        }

        .filter-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .filter-chips a {
            font-size: 0.85rem;
            font-weight: 700;
            padding: 7px 16px;
            border-radius: var(--radius-pill);
            background: var(--bg-mint-light);
            color: var(--primary-dark-teal);
            border: 1px solid rgba(16, 112, 98, 0.1);
            transition: var(--transition-base);
        }

        .filter-chips a:hover,
        .filter-chips a.active {
            background: var(--primary-teal);
            color: #fff;
            border-color: var(--primary-teal);
        }

        .pagination-wrap {
            display: flex;
            justify-content: center;
            margin-top: 45px;
        }

        .pagination-wrap nav>div,
        .pagination-wrap .pagination {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            list-style: none;
            padding: 0;
        }

        .pagination-wrap a,
        .pagination-wrap span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 40px;
            height: 40px;
            padding: 0 12px;
            border-radius: var(--radius-sm);
            background: #fff;
            border: 1px solid rgba(16, 112, 98, 0.12);
            color: var(--primary-dark-teal);
            font-weight: 700;
            font-size: 0.88rem;
            text-decoration: none;
            transition: var(--transition-base);
        }

        .pagination-wrap a:hover {
            background: var(--primary-teal);
            color: #fff;
            border-color: var(--primary-teal);
        }

        .pagination-wrap .active span,
        .pagination-wrap [aria-current] span {
            background: var(--primary-teal);
            color: #fff;
            border-color: var(--primary-teal);
        }

        /* generic media/logo grids */
        .logo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 22px;
        }

        .logo-card {
            background: #fff;
            border-radius: var(--radius-md);
            border: 1px solid rgba(16, 112, 98, 0.06);
            box-shadow: var(--shadow-sm);
            height: 130px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 22px;
            transition: var(--transition-base);
        }

        .logo-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-md);
            border-color: rgba(197, 155, 39, 0.25);
        }

        .logo-card img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .media-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 22px;
        }

        .media-tile {
            position: relative;
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            aspect-ratio: 4/3;
            display: block;
        }

        .media-tile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition-smooth);
        }

        .media-tile:hover img {
            transform: scale(1.08);
        }

        .media-tile .media-play {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(to top, rgba(10, 77, 68, 0.6), transparent);
            color: #fff;
            font-size: 2.2rem;
            opacity: 0.9;
            transition: var(--transition-base);
        }

        .media-tile:hover .media-play {
            background: rgba(10, 77, 68, 0.4);
            color: var(--accent-gold);
        }

        /* INNER PAGES — jobs */
        .jobs-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
            gap: 24px;
        }

        .job-card {
            background: #fff;
            border-radius: var(--radius-md);
            border: 1px solid rgba(16, 112, 98, 0.06);
            border-inline-start: 4px solid var(--accent-gold);
            box-shadow: var(--shadow-sm);
            padding: 26px;
            transition: var(--transition-base);
            display: flex;
            flex-direction: column;
        }

        .job-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-md);
        }

        .job-card .job-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 12px;
            align-items: center;
        }

        .job-chip {
            font-size: 0.75rem;
            font-weight: 800;
            padding: 4px 12px;
            border-radius: var(--radius-pill);
            background: rgba(16, 112, 98, 0.08);
            color: var(--primary-teal);
        }

        .job-card .job-loc {
            font-size: 0.8rem;
            color: var(--text-muted);
        }

        .job-card h3 {
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--primary-dark-teal);
            margin-bottom: 10px;
        }

        .job-card .job-desc {
            font-size: 0.88rem;
            color: var(--text-muted);
            line-height: 1.7;
            margin-bottom: 14px;
            flex-grow: 1;
        }

        .job-req {
            margin-bottom: 16px;
        }

        .job-req summary {
            cursor: pointer;
            font-weight: 700;
            color: var(--primary-teal);
            font-size: 0.85rem;
        }

        .job-req .rich-content {
            margin-top: 10px;
            font-size: 0.85rem;
        }

        /* ==========================================================================
   INNER PAGES — detail (article + sidebar)
   ========================================================================== */
        .detail-layout {
            display: grid;
            grid-template-columns: 1fr 320px;
            gap: 40px;
            align-items: start;
        }

        .detail-single {
            max-width: 900px;
            margin: 0 auto;
        }

        .detail-hero-img {
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-md);
            margin-bottom: 22px;
        }

        .detail-hero-img img {
            width: 100%;
            display: block;
            object-fit: cover;
            max-height: 460px;
        }

        .detail-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            align-items: center;
            margin-bottom: 14px;
            font-size: 0.85rem;
            color: var(--text-muted);
        }

        .detail-meta i {
            color: var(--accent-gold);
            margin-inline-end: 4px;
        }

        .detail-badge {
            background: rgba(16, 112, 98, 0.08);
            color: var(--primary-teal);
            font-weight: 800;
            font-size: 0.75rem;
            padding: 4px 12px;
            border-radius: var(--radius-pill);
        }

        .detail-title {
            font-size: 2rem;
            font-weight: 800;
            color: var(--primary-dark-teal);
            margin-bottom: 20px;
            line-height: 1.4;
        }

        .detail-subtitle {
            font-size: 1.25rem;
            font-weight: 800;
            color: var(--primary-teal);
            margin: 30px 0 12px;
            padding-inline-start: 12px;
            border-inline-start: 4px solid var(--accent-gold);
        }

        .side-card {
            background: #fff;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(16, 112, 98, 0.06);
            padding: 24px;
            position: sticky;
            top: 110px;
        }

        .side-card h4 {
            font-size: 1.05rem;
            font-weight: 800;
            color: var(--primary-dark-teal);
            margin-bottom: 16px;
            padding-bottom: 10px;
            border-bottom: 2px solid rgba(197, 155, 39, 0.25);
        }

        .side-post {
            display: flex;
            gap: 12px;
            margin-bottom: 16px;
            align-items: center;
        }

        .side-post img {
            width: 64px;
            height: 64px;
            border-radius: var(--radius-sm);
            object-fit: cover;
            flex-shrink: 0;
        }

        .side-post p {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--primary-dark-teal);
            margin: 0 0 4px;
            line-height: 1.4;
        }

        .side-post span {
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        .side-post:hover p {
            color: var(--accent-gold);
        }

        @media (max-width: 900px) {
            .detail-layout {
                grid-template-columns: 1fr;
            }

            .side-card {
                position: static;
            }
        }

        /* INNER PAGES — detail sidebar list, price, rich tables */
        .side-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .side-list li {
            display: flex;
            gap: 8px;
            align-items: flex-start;
            padding: 9px 0;
            border-bottom: 1px dashed rgba(16, 112, 98, 0.1);
            font-size: 0.88rem;
        }

        .side-list li:last-child {
            border-bottom: 0;
        }

        .side-list li i {
            color: var(--accent-gold);
            margin-top: 5px;
        }

        .side-list a {
            color: var(--primary-dark-teal);
            font-weight: 700;
        }

        .side-list a:hover,
        .side-list a.active {
            color: var(--accent-gold);
        }

        .detail-price {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--primary-teal);
            margin-bottom: 18px;
        }

        .detail-price small {
            font-size: 0.9rem;
            color: var(--text-muted);
            font-weight: 700;
        }

        .table-wrapper {
            overflow-x: auto;
        }

        .rich-content table {
            width: 100%;
            border-collapse: collapse;
            margin: 14px 0;
        }

        .rich-content th,
        .rich-content td {
            border: 1px solid rgba(16, 112, 98, 0.12);
            padding: 10px 14px;
            text-align: start;
            font-size: 0.88rem;
        }

        .rich-content th {
            background: var(--bg-mint-light);
            color: var(--primary-dark-teal);
            font-weight: 800;
        }

        /* INNER PAGES — exhibition details */
        .ex-hero {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: center;
            margin-bottom: 20px;
        }

        .ex-hero__img {
            position: relative;
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-lg);
        }

        .ex-hero__img img {
            width: 100%;
            display: block;
        }

        .ex-hero__img .event-status-badge {
            position: absolute;
            top: 16px;
            inset-inline-end: 16px;
        }

        .ex-hero__info h1 {
            font-size: 2rem;
            font-weight: 800;
            color: var(--primary-dark-teal);
            margin-bottom: 8px;
        }

        .ex-logo {
            height: 54px;
            margin-bottom: 14px;
        }

        .ex-facts {
            list-style: none;
            padding: 0;
            margin: 16px 0 22px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .ex-facts li {
            display: flex;
            gap: 10px;
            align-items: center;
            color: var(--text-muted);
            font-size: 0.92rem;
        }

        .ex-facts li i {
            color: var(--accent-gold);
            width: 20px;
            text-align: center;
        }

        .ex-deadline {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 16px;
            background: var(--bg-mint-light);
            border-radius: var(--radius-md);
            padding: 18px 24px;
            margin: 10px 0 30px;
            border-inline-start: 4px solid var(--accent-gold);
        }

        .ex-deadline>span {
            font-weight: 800;
            color: var(--primary-dark-teal);
        }

        .stat-tiles {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 18px;
        }

        .stat-tile {
            background: #fff;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(16, 112, 98, 0.06);
            padding: 24px;
            text-align: center;
        }

        .stat-tile i {
            font-size: 1.6rem;
            color: var(--primary-teal);
            margin-bottom: 10px;
        }

        .stat-tile b {
            display: block;
            font-family: var(--font-en);
            font-size: 1.9rem;
            font-weight: 800;
            color: var(--primary-dark-teal);
        }

        .stat-tile span {
            font-size: 0.82rem;
            color: var(--text-muted);
            font-weight: 700;
        }

        .ex-types {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 16px;
        }

        .ex-type {
            background: #fff;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(16, 112, 98, 0.08);
            padding: 26px 16px;
            text-align: center;
            transition: var(--transition-base);
        }

        .ex-type:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-md);
            border-color: var(--accent-gold);
        }

        .ex-type i {
            font-size: 1.7rem;
            color: var(--primary-teal);
            margin-bottom: 10px;
            display: block;
        }

        .ex-type:hover i {
            color: var(--accent-gold);
        }

        .ex-type span {
            font-weight: 800;
            color: var(--primary-dark-teal);
            font-size: 0.9rem;
        }

        .booth-legend {
            display: flex;
            gap: 18px;
            font-size: 0.82rem;
            color: var(--text-muted);
            margin-top: 6px;
        }

        .booth-legend b {
            width: 12px;
            height: 12px;
            border-radius: 3px;
            display: inline-block;
            margin-inline-end: 5px;
        }

        .booth-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            gap: 14px;
        }

        .booth-chip {
            border-radius: var(--radius-sm);
            padding: 16px;
            text-align: center;
            font-weight: 800;
            border: 2px solid;
            color: var(--primary-dark-teal);
        }

        .booth-chip.available {
            background: rgba(46, 204, 113, 0.08);
            border-color: #2ecc71;
        }

        .booth-chip.reserved {
            background: rgba(231, 76, 60, 0.06);
            border-color: #e74c3c;
            opacity: 0.7;
        }

        .booth-chip small {
            display: block;
            font-weight: 600;
            font-size: 0.72rem;
            margin-top: 4px;
            color: var(--text-muted);
        }

        .voc-floorplan {
            position: relative;
            width: 100%;
            min-height: 340px;
            background: var(--bg-mint-light);
            border: 1px solid rgba(16, 112, 98, 0.15);
            border-radius: var(--radius-lg);
            margin-bottom: 22px;
        }

        .voc-floorplan .booth-chip {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2px;
            overflow: hidden;
        }

        @media (max-width: 900px) {
            .ex-hero {
                grid-template-columns: 1fr;
            }
        }

        /* INNER PAGES — team cards + org chart */
        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 24px;
        }

        .team-card {
            background: #fff;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(16, 112, 98, 0.06);
            overflow: hidden;
            text-align: center;
            transition: var(--transition-base);
        }

        .team-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-md);
        }

        .team-card__img {
            height: 240px;
            overflow: hidden;
            background: var(--bg-mint-light);
        }

        .team-card__img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition-smooth);
        }

        .team-card:hover .team-card__img img {
            transform: scale(1.05);
        }

        .team-card__body {
            padding: 20px;
        }

        .team-card__body h5 {
            font-size: 1.05rem;
            font-weight: 800;
            color: var(--primary-dark-teal);
            margin-bottom: 5px;
        }

        .team-card__body span {
            font-size: 0.85rem;
            color: var(--accent-gold-hover);
            font-weight: 700;
        }

        .team-card__term {
            display: block;
            margin-top: 6px;
            font-size: 0.78rem;
            color: var(--text-muted);
        }

        .org-tree {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .org-node {
            background: linear-gradient(135deg, var(--primary-dark-teal), var(--primary-teal));
            color: #fff;
            font-weight: 800;
            padding: 15px 34px;
            border-radius: var(--radius-pill);
            box-shadow: var(--shadow-md);
            text-align: center;
            border: 2px solid var(--accent-gold);
        }

        .org-line {
            width: 2px;
            height: 24px;
            background: rgba(16, 112, 98, 0.25);
        }

        .org-committees {
            margin: 34px 0;
            text-align: center;
        }

        .org-committees h4 {
            font-weight: 800;
            color: var(--primary-dark-teal);
            margin-bottom: 16px;
        }

        .org-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
        }

        .org-chip {
            background: rgba(197, 155, 39, 0.1);
            color: var(--accent-gold-hover);
            border: 1px solid rgba(197, 155, 39, 0.25);
            font-weight: 700;
            font-size: 0.85rem;
            padding: 8px 18px;
            border-radius: var(--radius-pill);
        }

        /* INNER PAGES — cart + timeline (events calendar) */
        .cart-table {
            background: #fff;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(16, 112, 98, 0.06);
            overflow: hidden;
        }

        .cart-row {
            display: grid;
            grid-template-columns: 70px 1fr 90px 110px 44px;
            gap: 16px;
            align-items: center;
            padding: 16px 20px;
            border-bottom: 1px solid rgba(16, 112, 98, 0.06);
        }

        .cart-row:last-of-type {
            border-bottom: 0;
        }

        .cart-img {
            width: 70px;
            height: 70px;
            border-radius: var(--radius-sm);
            object-fit: cover;
        }

        .cart-info h4 {
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--primary-dark-teal);
            margin-bottom: 4px;
        }

        .cart-info .cart-price {
            font-size: 0.82rem;
            color: var(--text-muted);
        }

        .cart-qty input {
            width: 74px;
            padding: 8px;
            border: 1px solid rgba(16, 112, 98, 0.18);
            border-radius: var(--radius-sm);
            text-align: center;
            font-family: var(--font-en);
            background: var(--bg-mint-ultra-light);
        }

        .cart-line {
            font-weight: 800;
            color: var(--primary-teal);
            font-family: var(--font-en);
        }

        .cart-remove {
            border: 0;
            background: rgba(231, 76, 60, 0.08);
            color: #e74c3c;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            cursor: pointer;
            transition: var(--transition-base);
        }

        .cart-remove:hover {
            background: #e74c3c;
            color: #fff;
        }

        .cart-total {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px;
            background: var(--bg-mint-light);
            font-weight: 700;
            color: var(--primary-dark-teal);
        }

        .cart-total b {
            font-size: 1.4rem;
            color: var(--primary-dark-teal);
            font-family: var(--font-en);
        }

        @media (max-width: 640px) {
            .cart-row {
                grid-template-columns: 60px 1fr auto;
                row-gap: 10px;
            }

            .cart-qty,
            .cart-line {
                grid-column: 2;
            }
        }

        .timeline {
            max-width: 820px;
            margin: 0 auto;
        }

        .timeline-group {
            margin-bottom: 34px;
        }

        .timeline-month {
            display: inline-block;
            background: var(--primary-dark-teal);
            color: #fff;
            font-weight: 800;
            padding: 8px 22px;
            border-radius: var(--radius-pill);
            margin-bottom: 18px;
            border: 2px solid var(--accent-gold);
        }

        .timeline-item {
            display: flex;
            align-items: center;
            gap: 16px;
            background: #fff;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(16, 112, 98, 0.06);
            border-inline-start: 4px solid var(--accent-gold);
            padding: 14px;
            margin-bottom: 14px;
            transition: var(--transition-base);
        }

        .timeline-item:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-3px);
        }

        .timeline-img {
            width: 84px;
            height: 64px;
            border-radius: var(--radius-sm);
            overflow: hidden;
            flex-shrink: 0;
        }

        .timeline-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .timeline-body {
            flex-grow: 1;
        }

        .timeline-date {
            font-size: 0.78rem;
            color: var(--accent-gold-hover);
            font-weight: 700;
        }

        .timeline-body h4 {
            font-size: 0.98rem;
            font-weight: 700;
            color: var(--primary-dark-teal);
            margin-top: 4px;
        }

        .timeline-arrow {
            color: var(--primary-teal);
            font-size: 1.1rem;
        }

        /* INNER PAGES — checkout / verify / booth pick */
        .checkout-grid {
            display: grid;
            grid-template-columns: 1fr 1.1fr;
            gap: 30px;
            align-items: start;
        }

        .summary-card {
            background: var(--bg-mint-light);
            border-radius: var(--radius-lg);
            padding: 28px;
            border: 1px solid rgba(16, 112, 98, 0.08);
        }

        .summary-card h4 {
            font-weight: 800;
            color: var(--primary-dark-teal);
            margin-bottom: 16px;
        }

        .sum-row {
            display: flex;
            justify-content: space-between;
            padding: 9px 0;
            border-bottom: 1px dashed rgba(16, 112, 98, 0.12);
            font-size: 0.9rem;
            color: var(--text-muted);
        }

        .sum-total {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 14px;
            padding-top: 14px;
            border-top: 2px solid rgba(197, 155, 39, 0.3);
            font-weight: 800;
            color: var(--primary-dark-teal);
        }

        .sum-total b {
            font-size: 1.3rem;
            font-family: var(--font-en);
        }

        .bank-note {
            margin-top: 20px;
            background: #fff;
            border-radius: var(--radius-md);
            padding: 18px;
            border-inline-start: 4px solid var(--accent-gold);
            font-size: 0.85rem;
            color: var(--text-muted);
            line-height: 1.7;
        }

        .bank-note h5 {
            font-weight: 800;
            color: var(--primary-dark-teal);
            margin-bottom: 8px;
        }

        .bank-note ul {
            list-style: none;
            padding: 0;
            margin: 10px 0 0;
        }

        .bank-note li {
            display: flex;
            justify-content: space-between;
            padding: 5px 0;
            border-bottom: 1px dashed rgba(16, 112, 98, 0.1);
        }

        .bank-note li b {
            color: var(--primary-dark-teal);
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 14px;
        }

        .data-table th,
        .data-table td {
            border: 1px solid rgba(16, 112, 98, 0.12);
            padding: 10px 14px;
            text-align: start;
            font-size: 0.9rem;
        }

        .data-table th {
            background: var(--bg-mint-light);
            color: var(--primary-dark-teal);
            font-weight: 800;
            width: 45%;
        }

        .verify-ic {
            font-size: 3.5rem;
            display: block;
            margin-bottom: 6px;
        }

        .verify-ic.ok {
            color: #27ae60;
        }

        .verify-ic.no {
            color: #e67e22;
        }

        .booth-chip.pick {
            cursor: pointer;
        }

        .booth-chip.pick:hover {
            border-color: var(--accent-gold);
        }

        .booth-chip.pick.active {
            outline: 3px solid var(--accent-gold);
            background: var(--accent-gold);
            color: #fff;
        }

        .booth-chip.pick.active small {
            color: rgba(255, 255, 255, 0.85);
        }

        .selected-info {
            background: var(--bg-mint-light);
            border-radius: var(--radius-sm);
            padding: 12px 18px;
            margin-bottom: 16px;
            font-weight: 700;
            color: var(--text-muted);
        }

        .selected-info.is-set {
            color: var(--primary-dark-teal);
            background: rgba(197, 155, 39, 0.1);
        }

        @media (max-width: 860px) {
            .checkout-grid {
                grid-template-columns: 1fr;
            }
        }

        /* INNER PAGES — account area + success */
        .account-layout {
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 30px;
            align-items: start;
        }

        .account-side {
            background: #fff;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(16, 112, 98, 0.06);
            padding: 24px;
            position: sticky;
            top: 110px;
        }

        .account-user {
            text-align: center;
            padding-bottom: 18px;
            border-bottom: 1px solid rgba(16, 112, 98, 0.08);
            margin-bottom: 16px;
        }

        .account-user img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--accent-gold);
            margin-bottom: 10px;
        }

        .account-user h4 {
            font-size: 1.05rem;
            font-weight: 800;
            color: var(--primary-dark-teal);
            margin-bottom: 3px;
        }

        .account-user span {
            font-size: 0.8rem;
            color: var(--text-muted);
            word-break: break-all;
        }

        .account-nav {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .account-nav a {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 11px 16px;
            border-radius: var(--radius-sm);
            color: var(--text-muted);
            font-weight: 700;
            font-size: 0.9rem;
            transition: var(--transition-base);
        }

        .account-nav a i {
            width: 18px;
            color: var(--primary-teal);
            text-align: center;
        }

        .account-nav a:hover,
        .account-nav a.active {
            background: var(--bg-mint-light);
            color: var(--primary-dark-teal);
        }

        .account-nav a.active i {
            color: var(--accent-gold);
        }

        .account-logout,
        .account-logout i {
            color: #e74c3c !important;
        }

        .account-welcome {
            background: linear-gradient(135deg, var(--primary-dark-teal), var(--primary-teal));
            color: #fff;
            border-radius: var(--radius-lg);
            padding: 30px;
            margin-bottom: 24px;
            border-inline-start: 4px solid var(--accent-gold);
        }

        .account-welcome h2 {
            font-size: 1.5rem;
            font-weight: 800;
            margin-bottom: 6px;
        }

        .account-welcome p {
            opacity: 0.9;
            margin: 0;
            font-size: 0.92rem;
        }

        .account-card {
            background: #fff;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(16, 112, 98, 0.06);
            padding: 26px;
            margin-bottom: 24px;
        }

        .account-card__head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }

        .account-card__head h3 {
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--primary-dark-teal);
        }

        .account-link {
            color: var(--primary-teal);
            font-weight: 700;
            font-size: 0.85rem;
        }

        .account-table {
            width: 100%;
            border-collapse: collapse;
        }

        .account-table th,
        .account-table td {
            padding: 12px 14px;
            text-align: start;
            font-size: 0.88rem;
            border-bottom: 1px solid rgba(16, 112, 98, 0.08);
        }

        .account-table th {
            color: var(--text-muted);
            font-weight: 700;
        }

        .account-table td {
            color: var(--primary-dark-teal);
        }

        .chip {
            font-size: 0.75rem;
            font-weight: 800;
            padding: 4px 12px;
            border-radius: var(--radius-pill);
            display: inline-block;
        }

        .chip--new {
            background: rgba(197, 155, 39, 0.14);
            color: var(--accent-gold-hover);
        }

        .chip--done {
            background: rgba(46, 204, 113, 0.12);
            color: #1e8449;
        }

        .account-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
            margin-bottom: 24px;
        }

        .success-card {
            max-width: 560px;
            margin: 0 auto;
            text-align: center;
            background: #fff;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-md);
            border: 1px solid rgba(16, 112, 98, 0.06);
            padding: 50px 40px;
        }

        .success-ic {
            font-size: 4rem;
            color: #27ae60;
            display: block;
            margin-bottom: 14px;
        }

        .success-card h1 {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--primary-dark-teal);
            margin-bottom: 10px;
        }

        .success-card p {
            color: var(--text-muted);
            margin-bottom: 24px;
        }

        @media (max-width: 860px) {
            .account-layout {
                grid-template-columns: 1fr;
            }

            .account-side {
                position: static;
            }

            .account-stats {
                grid-template-columns: 1fr;
            }
        }

        /* INNER PAGES — orders + digital membership card */
        .order-block {
            border: 1px solid rgba(16, 112, 98, 0.08);
            border-radius: var(--radius-md);
            margin-bottom: 18px;
            overflow: hidden;
        }

        .order-block__head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 18px;
            background: var(--bg-mint-light);
            flex-wrap: wrap;
            gap: 8px;
        }

        .order-block__head b {
            color: var(--primary-dark-teal);
            font-family: var(--font-en);
        }

        .order-date {
            font-size: 0.78rem;
            color: var(--text-muted);
            margin-inline-start: 10px;
        }

        .order-block table {
            margin: 0;
        }

        .order-block__foot {
            display: flex;
            justify-content: space-between;
            padding: 14px 18px;
            border-top: 1px solid rgba(16, 112, 98, 0.08);
            font-weight: 700;
            color: var(--primary-dark-teal);
        }

        .order-block__foot b {
            font-family: var(--font-en);
            font-size: 1.1rem;
        }

        .chip--cancel {
            background: rgba(231, 76, 60, 0.1);
            color: #c0392b;
        }

        .btn-sm {
            padding: 6px 14px;
            font-size: 0.8rem;
        }

        .mcard {
            background: linear-gradient(135deg, var(--primary-dark-teal), var(--primary-teal));
            border: 2px solid var(--accent-gold);
            border-radius: var(--radius-lg);
            color: #fff;
            padding: 26px;
            max-width: 440px;
            box-shadow: var(--shadow-lg);
        }

        .mcard.is-invalid {
            filter: grayscale(0.4);
            opacity: 0.85;
        }

        .mcard-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .mcard-logo {
            height: 36px;
        }

        .mcard-badge {
            font-size: 0.72rem;
            font-weight: 800;
            padding: 4px 12px;
            border-radius: var(--radius-pill);
        }

        .mcard-badge.ok {
            background: rgba(46, 204, 113, 0.25);
            color: #d5ffe9;
            border: 1px solid rgba(46, 204, 113, 0.5);
        }

        .mcard-badge.no {
            background: rgba(231, 76, 60, 0.2);
            color: #ffd9d4;
        }

        .mcard-body {
            display: flex;
            justify-content: space-between;
            gap: 18px;
            align-items: center;
        }

        .mcard-label {
            display: block;
            font-size: 0.68rem;
            opacity: 0.7;
            margin-bottom: 2px;
        }

        .mcard-name {
            font-size: 1.25rem;
            font-weight: 800;
            margin-bottom: 14px;
            color: var(--accent-gold);
        }

        .mcard-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .mcard-grid b {
            font-family: var(--font-en);
            font-size: 0.95rem;
        }

        .mcard-qr {
            background: #fff;
            border-radius: var(--radius-sm);
            padding: 8px;
            text-align: center;
            flex-shrink: 0;
        }

        .mcard-qr span {
            display: block;
            font-size: 0.62rem;
            color: var(--primary-dark-teal);
            margin-top: 4px;
            font-weight: 700;
        }

        .mcard-foot {
            margin-top: 18px;
            padding-top: 14px;
            border-top: 1px solid rgba(255, 255, 255, 0.15);
            text-align: center;
            font-size: 0.8rem;
            opacity: 0.85;
        }

        /* INNER PAGES — auth */
        .auth-wrap {
            max-width: 480px;
            margin: 0 auto;
        }

        .auth-alt {
            text-align: center;
            margin-top: 16px;
            font-size: 0.88rem;
            color: var(--text-muted);
        }

        .auth-alt a {
            color: var(--primary-teal);
            font-weight: 700;
        }

        .auth-alt a:hover {
            color: var(--accent-gold);
        }

        .checkbox-row {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.88rem;
            color: var(--text-muted);
            margin-bottom: 8px;
        }

        .checkbox-row input {
            width: auto;
        }

        /* ==========================================================================
   AUTH LAYOUT — standalone (no header / no footer)
   ========================================================================== */
        .auth-body {
            background: var(--primary-dark-teal);
        }

        .auth-page {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 30px 16px;
            position: relative;
            overflow: hidden;
            background: radial-gradient(circle at 15% 15%, rgba(16, 112, 98, 0.55) 0%, transparent 45%),
                radial-gradient(circle at 85% 85%, rgba(197, 155, 39, 0.18) 0%, transparent 40%),
                linear-gradient(135deg, var(--primary-dark-teal) 0%, #08342E 100%);
        }

        .auth-page::before {
            content: '';
            position: absolute;
            inset: 0;
            opacity: 0.05;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23FFFFFF" d="M0,224L60,202.7C120,181,240,139,360,138.7C480,139,600,181,720,186.7C840,192,960,160,1080,138.7C1200,117,1320,107,1380,101.3L1440,96L1440,320L0,320Z"></path></svg>') no-repeat bottom / cover;
            pointer-events: none;
        }

        .auth-shell {
            width: 100%;
            max-width: 460px;
            position: relative;
            z-index: 2;
        }

        .auth-logo {
            display: block;
            text-align: center;
            margin-bottom: 24px;
        }

        .auth-logo img {
            height: 62px;
        }

        .auth-home-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .auth-home-wrap {
            text-align: center;
            margin-top: 20px;
        }

        .auth-home-wrap a {
            color: rgba(255, 255, 255, 0.85);
            font-weight: 700;
            font-size: 0.88rem;
            transition: var(--transition-base);
        }

        .auth-home-wrap a:hover {
            color: var(--accent-gold);
        }

        /* ==========================================================================
   Responsive grid utilities (replace inline fixed columns so they collapse)
   ========================================================================== */
        html {
            overflow-x: hidden;
            /* تكبير حجم الخط الجذري لتحسين قراءة كل النصوص المعرّفة بوحدة rem */
            font-size: 112.5%;
        }

        @media (max-width: 768px) {
            html {
                font-size: 106.25%;
            }
        }

        .grid-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .grid-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        @media (max-width: 992px) {

            .grid-3,
            .grid-4 {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 560px) {

            .grid-3,
            .grid-4 {
                grid-template-columns: minmax(0, 1fr);
            }
        }

        /* Hide reCAPTCHA v3 badge (invisible flow still active); add disclosure text in forms if required */
        .grecaptcha-badge {
            visibility: hidden !important;
        }

        /* ==========================================================================
           Organizational Structure v2 Styles
           ========================================================================== */

        .org-section-v2 {
            background-color: var(--bg-mint-light, #f8fcfb);
        }

        .org-tree-v2 {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 2rem;
        }

        .org-node-v2 {
            background: linear-gradient(135deg, var(--primary-dark-teal, #1c3c4f) 0%, var(--primary-color, #2a5a77) 100%);
            color: white;
            padding: 15px 30px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 4px 15px rgba(28, 60, 79, 0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            z-index: 2;
        }

        .org-node-v2:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(28, 60, 79, 0.3);
        }

        .org-node-v2 .node-icon {
            color: var(--accent-gold, #c4a16b);
        }

        .org-line-v2 {
            height: 40px;
            width: 2px;
            background-color: var(--accent-gold, #c4a16b);
            margin: 5px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--accent-gold, #c4a16b);
        }

        .org-line-v2 i {
            background: var(--bg-mint-light, #f8fcfb);
            padding: 2px;
            font-size: 0.8rem;
        }

        .org-divider {
            border-top: 1px dashed rgba(196, 161, 107, 0.5);
            margin: 3rem auto;
            width: 80%;
        }

        .org-committees-v2 .gold-text {
            color: var(--accent-gold, #c4a16b);
        }

        .org-chips-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            justify-content: center;
        }

        .org-committee-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            padding: 25px 15px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }

        .org-committee-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            background: white;
            border-color: var(--accent-gold-hover, #a68551);
        }

        .org-committee-card .committee-icon {
            font-size: 2rem;
            color: var(--accent-gold, #c4a16b);
            margin-bottom: 15px;
        }

        .org-committee-card .committee-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--primary-dark-teal, #1c3c4f);
            margin: 0;
        }

        .depts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
        }

        .org-dept-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
            border: 1px solid rgba(0, 0, 0, 0.05);
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .org-dept-card[open] {
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
            border-color: var(--accent-gold, #c4a16b);
        }

        .dept-summary {
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            list-style: none;
            /* Hide default triangle */
            background: transparent;
            transition: background 0.3s ease;
        }

        .dept-summary::-webkit-details-marker {
            display: none;
            /* Hide default triangle in WebKit */
        }

        .dept-summary:hover {
            background: rgba(196, 161, 107, 0.05);
        }

        .dept-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .dept-info .dept-icon {
            width: 45px;
            height: 45px;
            background: var(--bg-mint-light, #f8fcfb);
            color: var(--primary-dark-teal, #1c3c4f);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            transition: all 0.3s ease;
        }

        .org-dept-card:hover .dept-icon {
            background: var(--primary-dark-teal, #1c3c4f);
            color: white;
        }

        .dept-info .dept-title {
            font-size: 1.05rem;
            font-weight: 700;
            margin: 0;
            color: var(--primary-dark-teal, #1c3c4f);
        }

        .dept-toggle {
            color: var(--accent-gold, #c4a16b);
            font-size: 1.1rem;
            transition: transform 0.3s ease;
        }

        .dept-toggle .minus-icon {
            display: none;
        }

        .org-dept-card[open] .dept-toggle .plus-icon {
            display: none;
        }

        .org-dept-card[open] .dept-toggle .minus-icon {
            display: inline-block;
        }

        .dept-subs {
            padding: 0 20px 20px;
            border-top: 1px solid rgba(0, 0, 0, 0.05);
            background: #fafafa;
        }

        .subs-list {
            list-style: none;
            padding: 15px 0 0;
            margin: 0;
        }

        .subs-list li {
            padding: 8px 0;
            font-size: 0.95rem;
            color: #555;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        html[lang="ar"] .subs-list li i {
            margin-left: 5px;
            margin-right: 0;
        }

        .subs-list li i {
            color: var(--accent-gold, #c4a16b);
            font-size: 0.8rem;
        }

        /* ==========================================================
           GLOBAL TYPOGRAPHY BOOST — Enhanced font sizes & weights for body content
           ========================================================== */
        body {
            font-size: 16px;
            font-weight: 500;
        }

        p,
        .voc-hero-excerpt,
        .voc-announcement-desc,
        .text-body,
        .text-body-lg {
            font-weight: 600 !important;
            color: #083821;
        }

        .sub-badge,
        .badge,
        .badge-gold,
        .voc-badge-gold {
            font-weight: 800 !important;
        }

/* ==========================================================================
   VOC Luxury Splash Screen Loader & Page Transition System
   ========================================================================== */
.voc-splash-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--primary-dark-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
}

.voc-splash-overlay.voc-splash-hide {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.voc-splash-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    position: relative;
    z-index: 2;
}

.voc-splash-logo-wrap {
    position: relative;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.voc-splash-glow-ring {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid rgba(201, 160, 42, 0.35);
    box-shadow: 0 0 35px rgba(201, 160, 42, 0.25), inset 0 0 20px rgba(201, 160, 42, 0.15);
    animation: vocSplashPulse 2s infinite ease-in-out;
}

@keyframes vocSplashPulse {
    0%, 100% {
        transform: scale(0.95);
        opacity: 0.6;
        border-color: rgba(201, 160, 42, 0.3);
    }
    50% {
        transform: scale(1.08);
        opacity: 1;
        border-color: rgba(232, 204, 122, 0.85);
        box-shadow: 0 0 45px rgba(201, 160, 42, 0.45), inset 0 0 25px rgba(201, 160, 42, 0.25);
    }
}

.voc-splash-logo {
    height: 65px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
    animation: vocSplashScale 2s infinite ease-in-out;
}

@keyframes vocSplashScale {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

.voc-splash-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.02em;
    margin-bottom: 0.25rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.voc-splash-subtitle {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(232, 204, 122, 0.9);
    letter-spacing: 0.05em;
    margin-bottom: 1.75rem;
}

.voc-splash-loader-bar {
    width: 180px;
    height: 4px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 99px;
    overflow: hidden;
    position: relative;
}

.voc-splash-loader-progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #c9a02a, #f7e4a1, #c9a02a);
    border-radius: 99px;
    box-shadow: 0 0 10px rgba(201, 160, 42, 0.7);
    animation: vocSplashProgress 1.2s infinite ease-in-out;
}

@keyframes vocSplashProgress {
    0% { width: 0%; transform: translateX(-100%); }
    50% { width: 70%; transform: translateX(20%); }
    100% { width: 100%; transform: translateX(100%); }
}

/* Fast Transition Splash Mode for page-to-page navigation */
.voc-splash-overlay.fast-transition {
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
.voc-splash-overlay.fast-transition .voc-splash-loader-progress {
    animation-duration: 0.45s;
}