/* ═══════════════════════════════════════════════════════════════
   front-noncritical.css — تنسيقات غير حرجة (تحت الطية / تظهر بتفاعل)
   نُقلت حرفياً من كتل <style> إنلاين (PERF stage 1، 2026-07-01) لتقليل
   حجم HTML وتحليل CSS على المسار الحرج. تُحمَّل async (preload→stylesheet)
   وتأخذ Brotli + كاش immutable تلقائياً كأصل ثابت. لا تعديل على أي قاعدة.
   ═══════════════════════════════════════════════════════════════ */

/* ============== Bot Trigger Button (زر البوت العائم) ============== */
    /* ============== Bot Trigger Button (right-side floating) ============== */
    .bot-assistant {
        --bot-primary: #6366f1;
        --bot-accent: #06b6d4;
        --bot-gradient: linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
        --bot-surface: #020617;
        --bot-surface-glass: rgba(15, 23, 42, 0.85);
        --bot-card: rgba(30, 41, 59, 0.55);
        --bot-card-hover: rgba(51, 65, 85, 0.75);
        --bot-border: rgba(255, 255, 255, 0.08);
        --bot-border-glow: rgba(6, 182, 212, 0.4);
        --bot-text-main: #ffffff;
        --bot-text-muted: #94a3b8;
    }

    .bot-trigger {
        position: fixed;
        /* Respect iOS safe-area (home indicator) and Android edge gestures.
           `max()` ensures we never go below the user's clamp value, but lift
           the button further when the device reports a safe-area inset. */
        bottom: max(clamp(20px, 3vw, 28px), env(safe-area-inset-bottom, 0px));
        inset-inline-start: max(clamp(20px, 3vw, 28px), env(safe-area-inset-left, 0px));
        width: clamp(52px, 9vw, 58px);
        height: clamp(52px, 9vw, 58px);
        border-radius: 50%;
        background: var(--bot-gradient);
        color: #fff;
        border: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(1.25rem, 2.4vw, 1.4rem);
        cursor: pointer;
        /* HIGH-A1-02 + Refactor #4: token bot-trigger من design-system. */
        z-index: var(--z-bot-trigger, 9996);
        box-shadow: 0 14px 32px -8px rgba(6, 182, 212, 0.55),
                    0 6px 14px -4px rgba(0, 0, 0, 0.4);
        transition: transform .35s cubic-bezier(.16, 1, .3, 1),
                    box-shadow .35s ease,
                    bottom .25s ease;
    }
    /* AUDIT #14: عند تفعيل البوت، ارفع زر «العودة للأعلى» فوق زر البوت (كلاهما في الركن السفلي
       يميناً بـ RTL) لتفادي تراكبهما بعد إصلاح AUDIT #1. هذه الكتلة لا تُصيَّر إلا عند active_bot
       فلا إزاحة حين لا بوت. القيمة تتتبّع حجم/موضع الزر العائم تلقائياً (نفس clamp/safe-area). */
    .progress-wrap {
        bottom: calc(max(clamp(20px, 3vw, 28px), env(safe-area-inset-bottom, 0px)) + clamp(52px, 9vw, 58px) + 16px);
    }
    .bot-trigger:hover {
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 18px 40px -8px rgba(6, 182, 212, 0.7),
                    0 8px 20px -4px rgba(0, 0, 0, 0.5);
        color: #fff;
    }
    .bot-trigger:focus-visible {
        outline: 3px solid rgba(34, 211, 238, 0.8);
        outline-offset: 3px;
    }
    .bot-trigger.is-open {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid var(--bot-border);
        color: #ef4444;
    }
    .bot-trigger.is-open:hover {
        background: rgba(239, 68, 68, 0.12);
        transform: rotate(90deg);
    }

    /* Subtle attention pulse */
    .bot-trigger::before {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        background: var(--bot-gradient);
        opacity: .35;
        z-index: -1;
        animation: bot-pulse 2.4s ease-in-out infinite;
    }
    .bot-trigger.is-open::before { display: none; }
    @keyframes bot-pulse {
        0%, 100% { transform: scale(1); opacity: .35; }
        50%      { transform: scale(1.18); opacity: 0; }
    }

    /* ============== Bot Panel (popup floating from bottom-end) ============== */
    .bot-panel {
        position: fixed;
        /* Sits ~20px above the trigger; respects iOS safe-area on home-indicator devices */
        bottom: calc(max(clamp(20px, 3vw, 28px), env(safe-area-inset-bottom, 0px)) + clamp(70px, 11vw, 80px));
        inset-inline-start: max(clamp(20px, 3vw, 28px), env(safe-area-inset-left, 0px));
        width: min(400px, calc(100vw - 28px));
        max-height: min(620px, calc(100dvh - 140px));
        background: var(--bot-surface-glass);
        border: 1px solid var(--bot-border);
        border-radius: 22px;
        box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7),
                    0 12px 28px -10px rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(28px);
        -webkit-backdrop-filter: blur(28px);
        z-index: var(--z-bot-panel, 9997); /* Refactor #4 */
        overflow: hidden;
        display: flex;
        flex-direction: column;
        font-family: 'Cairo', 'Tajawal', sans-serif; /* HIGH-A1-03: Cairo قبل Tajawal (PREF-FONT-001) */
        color: var(--bot-text-main);
        transform-origin: bottom left;
        animation: bot-panel-in .35s cubic-bezier(.16, 1, .3, 1);
    }
    .bot-panel[hidden] { display: none !important; }

    [dir="rtl"] .bot-panel { transform-origin: bottom right; }

    @keyframes bot-panel-in {
        from { opacity: 0; transform: scale(.92) translateY(12px); }
        to   { opacity: 1; transform: scale(1) translateY(0); }
    }

    .bot-panel::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 80% 0%, rgba(6, 182, 212, 0.12), transparent 60%),
            radial-gradient(circle at 0% 100%, rgba(99, 102, 241, 0.08), transparent 60%);
        pointer-events: none;
        z-index: 0;
    }
    .bot-panel > * { position: relative; z-index: 1; }

    /* Header */
    .bot-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: clamp(.875rem, 2.5vw, 1.125rem) clamp(1rem, 3vw, 1.375rem);
        border-block-end: 1px solid var(--bot-border);
        background: linear-gradient(180deg, rgba(6, 182, 212, 0.06), transparent);
    }
    .bot-panel-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--bot-gradient);
        color: #fff;
        font-size: 1.0625rem;
        box-shadow: 0 8px 20px -6px rgba(6, 182, 212, 0.55);
    }
    .bot-panel-title {
        color: var(--bot-text-main);
        font-weight: 800;
        font-size: clamp(1rem, 2vw, 1.125rem);
        letter-spacing: -0.2px;
        line-height: 1.3;
        margin: 0;
    }
    .bot-panel-subtitle {
        color: var(--bot-text-muted);
        font-size: clamp(.7rem, 1.4vw, .8125rem);
        font-weight: 600;
        line-height: 1.4;
    }
    .bot-close-btn {
        /* HIGH-A1-05: 44×44px min target (WCAG 2.5.5). */
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid var(--bot-border);
        color: var(--bot-text-muted);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background .25s, color .25s, border-color .25s, transform .25s;
        font-size: .875rem;
        flex-shrink: 0;
    }
    .bot-close-btn:hover {
        background: rgba(239, 68, 68, 0.12);
        border-color: rgba(239, 68, 68, 0.35);
        color: #ef4444;
        transform: rotate(90deg);
    }
    .bot-close-btn:focus-visible {
        outline: 2px solid rgba(34, 211, 238, .8);
        outline-offset: 2px;
    }

    /* Body */
    .bot-panel-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* Search input */
    .bot-search-wrap {
        position: relative;
        padding: clamp(.75rem, 2vw, 1rem) clamp(1rem, 3vw, 1.375rem);
        border-block-end: 1px solid var(--bot-border);
    }
    .bot-search-icon {
        position: absolute;
        inset-inline-start: clamp(1.625rem, 3.8vw, 2rem);
        inset-block-start: 50%;
        transform: translateY(-50%);
        color: var(--bot-text-muted);
        font-size: .9375rem;
        pointer-events: none;
    }
    .bot-search-input {
        /* اللوحة محدودة بـ min(400px,…) فلا حاجة لـ max-width على الحقل (كان يُزيح أيقونة المسح عن حافته). */
        width: 100%;
        /* PREF-RTL-001: padding منطقي — المساحة الأكبر دائماً جهة أيقونة البحث (inset-inline-start). */
        padding-block: .75rem;
        padding-inline-start: .75rem;
        padding-inline-end: 2.625rem;
        background: rgba(2, 6, 23, 0.55);
        border: 1.5px solid var(--bot-border);
        border-radius: 12px;
        color: var(--bot-text-main);
        font-family: 'Cairo', 'Tajawal', sans-serif; /* HIGH-A1-03: Cairo قبل Tajawal (PREF-FONT-001) */
        font-size: .9375rem;
        font-weight: 500;
        transition: border-color .25s, background .25s, box-shadow .25s;
        outline: 0;
    }
    /* Phase V4 (PL-V4-06) — placeholder contrast */
    .bot-search-input::placeholder { color: rgba(148, 163, 184, .85); }
    .bot-search-input:focus {
        border-color: rgba(6, 182, 212, 0.5);
        background: rgba(2, 6, 23, 0.75);
        box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
    }
    .bot-search-clear {
        position: absolute;
        inset-inline-end: clamp(1.625rem, 3.8vw, 2rem);
        inset-block-start: 50%;
        transform: translateY(-50%);
        /* WCAG 2.5.8: حجم هدف لا يقل عن 24×24 دون تكبير الأيقونة بصرياً. */
        min-width: 24px;
        min-height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--bot-text-muted);
        cursor: pointer;
        font-size: 1rem;
        line-height: 1;
        transition: color .2s;
    }
    .bot-search-clear:hover { color: #ef4444; }

    /* Results area */
    .bot-results {
        flex: 1;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--bot-accent) transparent;
        padding: clamp(.75rem, 2vw, 1rem);
    }
    .bot-results::-webkit-scrollbar { width: 6px; }
    .bot-results::-webkit-scrollbar-track { background: transparent; }
    .bot-results::-webkit-scrollbar-thumb {
        background: rgba(6, 182, 212, 0.4);
        border-radius: 6px;
    }

    /* States */
    .bot-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 3vw, 1.5rem);
        min-height: 280px;
    }
    .bot-state-icon {
        width: clamp(64px, 12vw, 84px);
        height: clamp(64px, 12vw, 84px);
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(6, 182, 212, 0.12);
        border: 1px solid rgba(6, 182, 212, 0.25);
        color: var(--bot-accent);
        font-size: clamp(1.5rem, 4vw, 2rem);
        margin-block-end: 1rem;
    }
    .bot-state-welcome .bot-state-icon {
        background: var(--bot-gradient);
        border-color: transparent;
        color: #fff;
        box-shadow: 0 12px 28px -8px rgba(6, 182, 212, 0.55);
    }
    .bot-state-title {
        color: var(--bot-text-main);
        font-weight: 800;
        font-size: clamp(1rem, 2vw, 1.125rem);
        margin: 0 0 .5rem;
    }
    .bot-state-msg {
        color: var(--bot-text-muted);
        font-size: clamp(.85rem, 1.4vw, .9375rem);
        line-height: 1.7;
        margin: 0;
        max-width: 280px;
    }
    .bot-state-msg a {
        color: var(--bot-accent);
        font-weight: 700;
        text-decoration: none;
        border-block-end: 1px dashed rgba(6, 182, 212, .5);
    }
    .bot-state-msg a:hover {
        color: #fff;
        border-block-end-color: #fff;
    }

    /* Spinner */
    .bot-spinner {
        width: 44px;
        height: 44px;
        border: 3px solid rgba(6, 182, 212, .15);
        border-top-color: var(--bot-accent);
        border-bottom-color: var(--bot-primary);
        border-radius: 50%;
        animation: bot-spin 1s cubic-bezier(.68, -.55, .265, 1.55) infinite;
        margin-block-end: 1rem;
    }
    @keyframes bot-spin { to { transform: rotate(360deg); } }

    /* Suggestions list */
    .bot-suggestions {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: .625rem;
    }
    .bot-suggestion {
        background: var(--bot-card);
        border: 1px solid var(--bot-border);
        border-radius: 14px;
        padding: clamp(.75rem, 2vw, .9375rem) clamp(.875rem, 2.2vw, 1.125rem);
        transition: background .25s, border-color .25s, transform .25s;
        cursor: default;
    }
    .bot-suggestion:hover {
        background: var(--bot-card-hover);
        border-color: var(--bot-border-glow);
        transform: translateY(-1px);
    }
    .bot-suggestion-q {
        display: flex;
        align-items: flex-start;
        gap: .5rem;
        color: var(--bot-text-main);
        font-weight: 800;
        font-size: clamp(.875rem, 1.5vw, .9375rem);
        line-height: 1.5;
        margin: 0 0 .5rem;
    }
    .bot-suggestion-q::before {
        content: '\F4D2'; /* bi-question-circle-fill */
        font-family: 'bootstrap-icons';
        color: var(--bot-accent);
        font-size: 1rem;
        flex-shrink: 0;
        line-height: 1.4;
    }
    .bot-suggestion-a {
        color: var(--bot-text-muted);
        font-size: clamp(.8125rem, 1.4vw, .875rem);
        line-height: 1.75;
        margin: 0;
        padding-inline-start: 1.5rem;
    }

    /* Mobile tweaks — keep button thumb-reachable, panel full-width with safe-area */
    @media (max-width: 575.98px) {
        .bot-trigger {
            width: 50px;
            height: 50px;
            font-size: 1.125rem;
            /* Lift further up on phones to clear browser address bars / nav gestures */
            bottom: max(clamp(18px, 4vw, 24px), env(safe-area-inset-bottom, 0px));
            inset-inline-start: max(clamp(16px, 4vw, 22px), env(safe-area-inset-left, 0px));
        }
        .bot-panel {
            bottom: calc(max(clamp(18px, 4vw, 24px), env(safe-area-inset-bottom, 0px)) + 64px);
            inset-inline-start: 12px;
            inset-inline-end: 12px;
            width: auto;
            max-height: 75dvh;
            max-height: 75vh; /* fallback */
        }
    }
    /* IOS-25: raise FAQ bot search input to 16px on touch only (stops iOS focus auto-zoom); desktop unchanged. */
    @media (pointer: coarse) {
        .bot-search-input { font-size: 16px; }
    }

/* ============== Mobile Sidebar (الشريط الجانبي للجوال) ============== */
    /* ================== Mobile Sidebar ================== */
    .mn-sidebar {
        background: linear-gradient(180deg, rgba(13, 17, 38, 0.98), rgba(7, 9, 26, 0.98)) !important;
        backdrop-filter: blur(28px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
        border-inline-start: 1px solid rgba(255, 255, 255, 0.08) !important;
        z-index: var(--z-drawer, 9999) !important; /* Refactor #4: token من design-system */
        width: 320px !important;
        max-width: 86vw !important;
        box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6) !important;
        color: #f8fafc !important;
        font-family: 'Cairo', 'Tajawal', system-ui, -apple-system, sans-serif; /* HIGH-A1-03: PREF-FONT-001 */
        direction: rtl;
        display: flex;
        flex-direction: column;
    }

    .mn-sidebar::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse 60% 40% at 50% -10%, rgba(99, 102, 241, 0.12), transparent),
            radial-gradient(ellipse 50% 30% at 50% 110%, rgba(236, 72, 153, 0.08), transparent);
        pointer-events: none;
        z-index: 0;
    }

    /* ===== Header: centered logo ===== */
    .mn-sidebar-header {
        position: relative;
        padding: 22px 18px 18px;
        /* P4 IOS-11: ابعد زر الإغلاق/الشعار عن النوتش على iPhone (env=0 بلا notch) */
        padding-top: max(22px, env(safe-area-inset-top, 0px));
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;
    }

    .mn-sidebar-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

    .mn-sidebar-logo img {
        height: 44px;
        width: auto;
        max-width: 180px;
        object-fit: contain;
    }

    .mn-sidebar-close {
        position: absolute;
        top: 50%;
        inset-inline-start: 14px;
        transform: translateY(-50%);
        /* HIGH-A1-05: 44×44px min target (WCAG 2.5.5). */
        width: 44px;
        height: 44px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.03);
        color: rgba(255, 255, 255, 0.7);
        border-radius: 10px;
        display: grid;
        place-items: center;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 14px;
        padding: 0;
    }

    .mn-sidebar-close:hover {
        background: rgba(239, 68, 68, 0.12);
        border-color: rgba(239, 68, 68, 0.3);
        color: #fca5a5;
    }

    /* ===== Body scroll ===== */
    .mn-sidebar-body {
        position: relative;
        z-index: 1;
        padding: 18px 16px 24px !important;
        /* P4 IOS-11: ابعد آخر عنصر (تسجيل الخروج) عن شريط الهوم على iPhone — !important لتجاوز الـ shorthand أعلاه */
        padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)) !important;
        display: flex;
        flex-direction: column;
        gap: 18px;
        overflow-y: auto;
        /* P4 AND-02: امنع تسلسل التمرير إلى الصفحة خلف الدرج (pull-to-refresh على Android) */
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(99, 102, 241, 0.4) transparent;
    }

    .mn-sidebar-body::-webkit-scrollbar { width: 5px; }
    .mn-sidebar-body::-webkit-scrollbar-track { background: transparent; }
    .mn-sidebar-body::-webkit-scrollbar-thumb {
        background: rgba(99, 102, 241, 0.35);
        border-radius: 4px;
    }

    /* ===== Navigation ===== */
    .mn-sidebar-nav-label {
        font-size: 11px;
        font-weight: 800;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        margin: 0 4px 8px;
    }

    .mn-sidebar-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .mn-sidebar-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 12px;
        border-radius: 12px;
        color: #cbd5e1;
        font-size: 14.5px;
        font-weight: 700;
        text-decoration: none;
        background: transparent;
        border: 1px solid transparent;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        font-family: inherit;
    }

    .mn-sidebar-link:hover {
        background: rgba(255, 255, 255, 0.04);
        color: #fff;
    }

    /* XA11Y-13: زر تسجيل الخروج <button> (كان <a href="#">) — يمتد بعرض الصف كالروابط. */
    button.mn-sidebar-link {
        width: 100%;
        cursor: pointer;
    }

    .mn-sidebar-link:hover .mn-sidebar-link-arrow {
        opacity: 1;
        transform: translateX(-2px) !important; /* LAYOUT-11: يوازي !important الأساس أدناه */
    }

    .mn-sidebar-link.active {
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.18) 0%, rgba(99, 102, 241, 0.08) 100%);
        border-color: rgba(99, 102, 241, 0.3);
        color: #fff;
    }

    /* أيقونات القائمة الجانبية على خلفية بيضاء — المنصّات تظهر بلونها الحقيقي (glyph عبر navIconColor)،
       وأيقونات الحساب/الرئيسية ترث البنفسجي الموحّد. ظل خفيف يفصلها عن خلفية القائمة الداكنة. */
    .mn-sidebar-link-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: #ffffff;
        color: #6366f1;
        display: grid;
        place-items: center;
        font-size: 26px;
        flex-shrink: 0;
        transition: all 0.2s;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
    }

    .mn-sidebar-link.active .mn-sidebar-link-icon {
        background: #ffffff;
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.55);
    }

    /* توحيد مقاس كل أيقونات المربع (عام/منصّة/svg/img) ومركزتها تمامًا في الوسط.
       line-height:1 يلغي الإزاحة الرأسية (كانت الرئيسية ترث line-height 39px فتبدو أطول ومنزاحة)،
       و flex داخل صندوق موحّد 26px يمركّز رمز Bootstrap (::before) أفقيًا ورأسيًا. */
    .mn-sidebar-link-icon > i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        font-size: 25px;
        line-height: 1;
    }
    .mn-sidebar-link-icon > svg,
    .mn-sidebar-link-icon > img { display: block; line-height: 1; }
    .mn-sidebar-link-icon > svg { width: 22px; height: 22px; }
    .mn-sidebar-link-icon > img { width: 23px; height: 23px; object-fit: contain; border-radius: 5px; }

    /* فاصل بصري يفصل «تسجيل الخروج» عن روابط الحساب (كقائمة الملف الشخصي في الديسكتوب). */
    .mn-sidebar-logout-li {
        margin-block-start: 7px;
        padding-block-start: 8px;
        border-block-start: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* فاصل بين قسم «الأقسام» وقسم «حسابي» — كالفاصل فوق «تسجيل الخروج».
       المحدّد + يستهدف القسم الثاني (حسابي) تلقائيًا للمسجّل والضيف بلا تعديل markup. */
    .mn-sidebar-nav + .mn-sidebar-nav {
        border-block-start: 1px solid rgba(255, 255, 255, 0.08);
        padding-block-start: 18px;
    }

    .mn-sidebar-link-text {
        flex: 1;
        line-height: 1.3;
        text-align: start;
    }

    .mn-sidebar-link-arrow {
        font-size: 11px;
        color: #475569;
        opacity: 0;
        transition: all 0.2s;
        /* LAYOUT-11: نمط المشروع المعتمد (كالـ breadcrumb) — يحيّد قاعدة قلب design-system
           العالمية ([dir="rtl"] i.bi-chevron-left → scaleX(-1)) التي كانت تعكس السهم في
           حالة active وتجعل اتجاهه يتقلب بين active/hover. */
        transform: none !important;
    }

    .mn-sidebar-link.active .mn-sidebar-link-arrow {
        opacity: 0.6;
        color: #a5b4fc;
    }

    /* ===== Backdrop ===== */
    .offcanvas-backdrop {
        z-index: var(--z-drawer-backdrop, 9998) !important; /* Refactor #4 */
        background-color: rgba(2, 6, 23, 0.7) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }

    .offcanvas-backdrop.show { opacity: 1 !important; }

    /* ===== Responsive small phones ===== */
    @media (max-width: 380px) {
        .mn-sidebar { width: 290px !important; }
        .mn-sidebar-link { font-size: 14px; padding: 10px 11px; }
        .mn-sidebar-link-icon { width: 32px; height: 32px; }
        .mn-sidebar-link-icon > i { width: 24px; height: 24px; font-size: 23px; }
        .mn-sidebar-link-icon > svg { width: 20px; height: 20px; }
        .mn-sidebar-link-icon > img { width: 21px; height: 21px; }
    }

/* ============== Toast (sa-toast) ============== */
    .toastify.sa-toast {
        /* override inline background from config — استخدم dark glass بدلاً منه */
        background: rgba(15, 23, 42, 0.92) !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px !important;
        color: #f1f5f9;
        font-family: 'Cairo', system-ui, sans-serif;
        font-size: 0.92rem;
        font-weight: 600;
        line-height: 1.5;
        /* حشو متماثل — المسافات بين العناصر يتكفّل بها gap + ترتيب flex order أدناه. */
        padding: 13px 16px;
        /* fixed (لا relative): relative كان يكسر تموضع Toastify الثابت فيظهر الإشعار
           كعنصر عادي أعلى يمين الصفحة بدل ثابتاً متمركزاً. fixed يُبقي الـ ::before
           (الشريط الجانبي) مرتبطاً به أيضاً. */
        position: fixed !important;
        overflow: hidden;
        min-height: 52px;
        max-width: min(92vw, 460px);
        display: flex;
        align-items: center;
        gap: 12px;
        box-shadow:
            0 18px 38px -10px rgba(0, 0, 0, 0.55),
            0 0 0 1px rgba(255, 255, 255, 0.03);
        direction: rtl;
        text-align: start;
    }

    /* Accent stripe (4px) — لون حسب النوع */
    .toastify.sa-toast::before {
        content: '';
        position: absolute;
        inset-inline-start: 0;
        top: 0; bottom: 0;
        width: 4px;
        background: var(--toast-accent, #6366f1);
        opacity: 0.95;
    }

    /* Icon — يظهر تلقائياً قبل النص (pseudo-element) */
    .toastify.sa-toast::after {
        content: '';
        flex-shrink: 0;
        width: 28px; height: 28px;
        border-radius: 8px;
        background: color-mix(in srgb, var(--toast-accent, #6366f1) 18%, transparent);
        border: 1px solid color-mix(in srgb, var(--toast-accent, #6366f1) 35%, transparent);
        background-image: var(--toast-icon, none);
        background-size: 16px 16px;
        background-position: center;
        background-repeat: no-repeat;
        order: -1; /* أيقونة النوع على اليمين (بداية القراءة RTL) تتصدّر النص */
    }

    /* Per-type accent + SVG icon */
    .toastify.sa-toast-success {
        --toast-accent: #10b981;
        --toast-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2334d399'%3e%3cpath d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7 7a.75.75 0 0 1-1.06 0L2.22 9.78a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6.25 11.69l6.47-6.47a.75.75 0 0 1 1.06 0z'/%3e%3c/svg%3e");
        box-shadow:
            0 18px 38px -10px rgba(16, 185, 129, 0.28),
            0 0 0 1px rgba(16, 185, 129, 0.10);
    }
    .toastify.sa-toast-error {
        --toast-accent: #ef4444;
        /* علامة تعجيب (!) بدل X — حتى لا تبدو أيقونة النوع كزر إغلاق ثانٍ.
           يبقى الإطار المربع الأحمر كمؤشّر للخطأ، وزر الإغلاق (✖) وحده هو الزر. */
        --toast-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f87171'%3e%3cpath d='M8 1.5a1.05 1.05 0 0 1 1.05 1.05v6a1.05 1.05 0 0 1-2.1 0v-6A1.05 1.05 0 0 1 8 1.5zm0 9.7a1.3 1.3 0 1 1 0 2.6 1.3 1.3 0 0 1 0-2.6z'/%3e%3c/svg%3e");
        box-shadow:
            0 18px 38px -10px rgba(239, 68, 68, 0.32),
            0 0 0 1px rgba(239, 68, 68, 0.10);
    }
    .toastify.sa-toast-info {
        --toast-accent: #06b6d4;
        --toast-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2367e8f9'%3e%3cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/%3e%3c/svg%3e");
        box-shadow:
            0 18px 38px -10px rgba(6, 182, 212, 0.30),
            0 0 0 1px rgba(6, 182, 212, 0.10);
    }
    .toastify.sa-toast-warning {
        --toast-accent: #f59e0b;
        --toast-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fbbf24'%3e%3cpath d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3e%3c/svg%3e");
        box-shadow:
            0 18px 38px -10px rgba(245, 158, 11, 0.30),
            0 0 0 1px rgba(245, 158, 11, 0.10);
    }

    /* Close button — تصميم متناسق */
    .toastify.sa-toast .toast-close {
        background: transparent !important;
        border: 0;
        color: rgba(255, 255, 255, 0.55);
        font-size: 1.05rem;
        line-height: 1;
        padding: 4px 6px;
        margin: 0;
        border-radius: 6px;
        cursor: pointer;
        flex-shrink: 0;
        transition: color .18s ease, background .18s ease;
        opacity: 1;
        order: 1; /* زر الإغلاق في أقصى اليسار (نهاية المربع RTL) */
    }
    .toastify.sa-toast .toast-close:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.08);
    }

    /* Position adjustments — top-center أسفل الهيدر العائم مباشرةً.
       الهيدر (.saas-floating-header) ثابت top:18px وارتفاعه ~66px (ينتهي عند ~84px)،
       لذا نُنزل الإشعار إلى ~100px حتى لا يتداخل/يختبئ خلف الهيدر — يظهر واضحاً أمام المستخدم. */
    .toastify.sa-toast.toastify-top { top: 100px !important; }
    /* AUDIT R1 (انحدار AUDIT #2): أثناء الانتحال يُزاح الهيدر العائم أسفل الشريط، فنُزيح التوست
       مثله حتى لا يتراكب فوق الهيدر/الشريط. مقيّد بـ is-impersonating فلا أثر على الزائر العادي. */
    body.is-impersonating .toastify.sa-toast.toastify-top { top: calc(100px + 56px) !important; }
    .toastify.sa-toast.toastify-center {
        /* LAYOUT-13: استثناء موثَّق من PREF-RTL-001 — left/right هنا تمركز أفقي متماثل
           (يقترن بـ translateX(-50%) الفيزيائي وأنيميشن saToastIn) فلا فرق بين RTL/LTR.
           لا تنسخ النمط لمواضع غير متماثلة. */
        left: 50% !important;
        right: auto !important;
        /* !important ضروري: Toastify يضع inline transform: translate(0,0) يتغلب على
           التمركز فيظهر الإشعار مُزاحاً يميناً/خارج الشاشة. هذا يضمن تمركزه أفقياً. */
        transform: translateX(-50%) !important;
    }

    /* Entry animation — slide-down + fade */
    @keyframes saToastIn {
        from { opacity: 0; transform: translate(-50%, -16px) scale(0.98); }
        to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
    }
    .toastify.sa-toast.on {
        animation: saToastIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Mobile — حجم متناسب */
    @media (max-width: 575.98px) {
        .toastify.sa-toast {
            font-size: 0.84rem;
            padding: 11px 14px;
            min-height: 46px;
            /* عرض صريح يستغل كامل العرض المتاح على الجوال (بدل shrink-to-fit الذي
               يُضيّق الصندوق فيلتفّ النص إلى 4 أسطر). الآن النص يظهر في سطرين تقريباً. */
            width: calc(100vw - 24px);
            max-width: calc(100vw - 24px);
            box-sizing: border-box;
            gap: 10px;
            border-radius: 12px;
        }
        .toastify.sa-toast::after {
            width: 24px; height: 24px;
            background-size: 14px 14px;
            border-radius: 7px;
        }
        /* الجوال: الهيدر العائم أقصر قليلاً — نُبقي الإشعار أسفله بهامش آمن وواضح. */
        .toastify.sa-toast.toastify-top { top: 88px !important; }
        /* AUDIT R1 (انحدار AUDIT #2): إزاحة مقابلة على الجوال (شريط الانتحال يحجز padding-top:96px). */
        body.is-impersonating .toastify.sa-toast.toastify-top { top: calc(88px + 96px) !important; }
    }

    @media (prefers-reduced-motion: reduce) {
        .toastify.sa-toast.on { animation: none; }
    }

/* ============== Reviews Carousel (كاروسيل التقييمات) ============== */
    /* ===== Reviews Carousel — هوية داكنة + indigo (موحَّدة عبر الصفحات) ===== */
    .rv-reviews {
        --rv-card: rgba(20, 24, 48, 0.55);
        --rv-card-hover: rgba(28, 33, 65, 0.7);
        --rv-panel: #0d1126;
        --rv-border: rgba(255, 255, 255, 0.08);
        --rv-border-strong: rgba(255, 255, 255, 0.14);
        --rv-border-glow: rgba(99, 102, 241, 0.35);
        --rv-text: #f8fafc;
        --rv-text-muted: var(--ds-text-muted);
        /* a11y (WCAG AA): كان #64748b (تباين ≈3:1 يفشل للنص الصغير — نفس درس الفوتر) → slate-400. */
        --rv-text-dim: var(--ds-text-muted);
        --rv-primary: var(--ds-primary);
        --rv-primary-light: #a5b4fc;
        --rv-warning: #f59e0b;
        --rv-radius-lg: 20px;
        --rv-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

        position: relative;
        z-index: 1;
        padding: 70px 0;
        border-top: 1px solid var(--rv-border);
        direction: rtl;
    }
    .rv-head { text-align: center; margin-bottom: 40px; }
    /* شارة القسم — مطابقة لشارات أقسام الرئيسية (.saas-section-subtitle) */
    .rv-pill {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 0.875rem;
        font-weight: 700;
        letter-spacing: 0.5px;
        color: var(--rv-primary-light);
        margin: 0 0 14px;
        padding: 0.5rem 1rem;
        background: rgba(99, 102, 241, 0.12);
        border: 1px solid rgba(99, 102, 241, 0.25);
        border-radius: 100px;
    }
    .rv-pill i { font-size: 0.95rem; color: var(--rv-warning); }
    .rv-title {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
        font-weight: 900;
        color: var(--rv-text);
        margin: 0;
        letter-spacing: -0.5px;
        font-family: 'Cairo', 'Tajawal', system-ui, sans-serif;
    }

    /* بطاقة التقييم — عمودية مركزية: صورة → اسم → نجوم → نص → تاريخ */
    .rv-card {
        background: var(--rv-card);
        border: 1px solid var(--rv-border);
        border-radius: var(--rv-radius-lg);
        padding: 28px 22px 20px;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        transition: var(--rv-transition);
    }
    /* P4 TCH-02: hover-guard — touch devices keep no sticky elevation */
    @media (hover: hover) and (pointer: fine) {
    .rv-card:hover {
        border-color: var(--rv-border-glow);
        background: var(--rv-card-hover);
        transform: translateY(-4px);
    }
    }
    .rv-avatar {
        width: 76px;
        height: 76px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(236, 72, 153, 0.18));
        border: 2px solid rgba(99, 102, 241, 0.35);
        display: grid;
        place-items: center;
        color: var(--rv-primary-light);
        font-weight: 800;
        font-size: 28px;
        flex-shrink: 0;
        overflow: hidden;
        margin-bottom: 14px;
        box-shadow: 0 8px 22px -8px rgba(99, 102, 241, 0.5);
    }
    .rv-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .rv-name {
        font-size: 16px;
        font-weight: 800;
        color: var(--rv-text);
        margin: 0 0 8px;
        /* الاسم + شارة التوثيق في صفّ واحد متمركز (RTL: الاسم يمين، الشارة يساره). */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }
    .rv-stars {
        color: var(--rv-warning);
        font-size: 13px;
        display: flex;
        gap: 3px;
        direction: ltr;
        justify-content: center;
        margin-bottom: 14px;
    }
    .rv-stars i.empty { color: rgba(255, 255, 255, 0.14); }
    .rv-body {
        font-size: 14px;
        line-height: 1.75;
        color: var(--rv-text-muted);
        font-weight: 500;
        margin-bottom: 16px;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: pre-line;
    }
    .rv-date {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: auto;
        padding-top: 14px;
        width: 100%;
        justify-content: center;
        border-top: 1px solid var(--rv-border);
        font-size: 12.5px;
        font-weight: 600;
        color: var(--rv-text-dim);
        font-variant-numeric: tabular-nums;
    }
    .rv-date i { color: var(--rv-primary-light); font-size: 13px; }

    /* الشريط + أزرار التنقّل — مطابق لأسلوب "الأكثر مبيعاً" (.swiper-nav-btn). */
    .rv-carousel { position: relative; }
    .rv-swiper { padding: 6px 2px 10px; cursor: grab; }
    .rv-swiper:active { cursor: grabbing; }
    .rv-swiper .swiper-slide { height: auto; }
    .rv-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--rv-card);
        border: 1px solid var(--rv-border-strong);
        color: var(--rv-text);
        display: grid;
        place-items: center;
        cursor: pointer;
        z-index: 20;
        transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 8px 22px -8px rgba(2, 6, 23, 0.6);
    }
    /* السهم في منتصف الدائرة تماماً: flex-center + إلغاء vertical-align(-.125em) لـ bootstrap-icons. */
    .rv-nav i {
        transform: none !important;  /* تحييد scaleX flip العالمي */
        font-size: 18px; line-height: 1;
        display: flex; align-items: center; justify-content: center;
        width: 100%; height: 100%;
    }
    .rv-nav i::before { display: block; line-height: 1; }
    /* P4 TCH-02: hover-guard — touch devices keep no sticky hover state */
    @media (hover: hover) and (pointer: fine) {
    .rv-nav:hover { background: var(--rv-primary); border-color: var(--rv-primary); color: #fff; box-shadow: 0 6px 18px rgba(99, 102, 241, 0.5); }
    }
    .rv-nav:active { transform: translateY(-50%) scale(0.92); }
    .rv-nav:focus-visible { outline: 2px solid #818cf8; outline-offset: 2px; }
    .rv-nav.swiper-button-disabled { opacity: 0.35; pointer-events: none; }
    .rv-prev { inset-inline-start: 4px; }   /* RTL: السابق على اليمين (PREF-RTL-001) */
    .rv-next { inset-inline-end: 4px; }     /* RTL: التالي على اليسار */

    /* الكمبيوتر (≥769px، الأسهم ظاهرة): احجز مساحة جانبية فتجلس الأسهم بجانب البطاقات لا فوقها. */
    @media (min-width: 769px) {
        .rv-carousel { padding-inline: 54px; }
    }
    @media (max-width: 768px) {
        .rv-reviews { padding: 50px 0; }
        .rv-nav { display: none; }
    }
    /* تقييمان جنباً إلى جنب على الجوال — حشو وصورة أصغر لمظهر مريح غير مزدحم. */
    @media (max-width: 575.98px) {
        .rv-card { padding: 18px 13px 14px; }
        .rv-avatar { width: 60px; height: 60px; font-size: 22px; margin-bottom: 10px; }
        .rv-body { font-size: 13px; }
    }

/* ============== Footer (التذييل) ============== */
    /* =====================================================================
       Footer (v14) — redesigned, RTL-first, identity-aligned
       ===================================================================== */
    .ft-footer {
        position: relative;
        background: #020617;
        color: #e2e8f0;
        font-family: 'Cairo', 'Tajawal', system-ui, sans-serif; /* HIGH-A1-03 */
        overflow: hidden;
        isolation: isolate;
        margin-block-start: clamp(2.5rem, 5vw, 4rem);
    }

    /* Decorative top glow line */
    .ft-top-glow {
        position: absolute;
        inset-block-start: 0;
        inset-inline: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.55), rgba(236, 72, 153, 0.55), transparent);
        pointer-events: none;
        z-index: 1;
    }

    /* Decorative gradient blobs */
    .ft-blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(110px);
        pointer-events: none;
        z-index: 0;
    }
    .ft-blob-1 {
        width: 540px; height: 540px;
        background: rgba(99, 102, 241, 0.10);
        inset-block-start: -180px;
        inset-inline-end: -180px;
    }
    .ft-blob-2 {
        width: 460px; height: 460px;
        background: rgba(236, 72, 153, 0.07);
        inset-block-end: -160px;
        inset-inline-start: -160px;
    }

    /* Main content wrap */
    .ft-main {
        position: relative;
        z-index: 2;
        padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
    }

    /* ===== خدماتنا — روابط الأقسام (site-wide internal links · SEO) ===== */
    .ft-services {
        position: relative;
        z-index: 2;
        border-block-start: 1px solid rgba(255, 255, 255, 0.06);
        padding-block: clamp(1.25rem, 3vw, 1.75rem);
    }
    .ft-services-title {
        color: #ffffff;
        font-size: 1.0625rem;
        font-weight: 800;
        letter-spacing: -.1px;
        margin: 0 0 1rem;
    }
    .ft-services-links {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: .55rem .65rem;
    }
    .ft-services-links li { margin: 0; }
    .ft-services-links a {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        padding: .5rem .9rem;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        color: #cbd5e1;
        text-decoration: none;
        font-size: .875rem;
        font-weight: 600;
        line-height: 1.2;
        transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
    }
    .ft-services-links a i { font-size: 1.05rem; color: #818cf8; flex-shrink: 0; }
    .ft-services-links a:hover {
        background: rgba(99, 102, 241, 0.12);
        border-color: rgba(99, 102, 241, 0.35);
        color: #ffffff;
        transform: translateY(-2px);
    }
    .ft-services-links a:focus-visible {
        outline: 2px solid rgba(165, 180, 252, .7);
        outline-offset: 2px;
    }
    /* رابط الخدمات المجانية — لمسة خضراء مميِّزة */
    .ft-services-free i { color: #34d399 !important; }
    .ft-services-free:hover {
        background: rgba(52, 211, 153, 0.12) !important;
        border-color: rgba(52, 211, 153, 0.35) !important;
    }

    /* ===== قسم «مصداقية وضمانات» — نُقل أسفل «خدماتنا» (بعرض كامل، البطاقة موسّطة) ===== */
    .ft-trust-section {
        position: relative;
        z-index: 2;
        border-block-start: 1px solid rgba(255, 255, 255, 0.06);
        padding-block: clamp(1.25rem, 3vw, 1.75rem);
    }
    .ft-trust-section .ft-trust-card {
        max-width: 720px;
        margin-inline: auto;
    }
    /* عنوان «مصداقية وضمانات» في الوسط فوق البطاقة على جميع الشاشات (طلب المالك) —
       مقصور على هذا القسم فقط فلا يتأثّر عنوان عمود «خدماتنا» (نفس الصنف ft-services-title). */
    .ft-trust-section .ft-services-title {
        text-align: center;
    }

    /* ═══ Grid: 5 columns on desktop (brand + 4 nav), smart stacking on smaller screens ═══ */
    /* Ratios: Brand=1.7 (logo+about+contact+social) · روابط هامة=1 · سياسة الموقع=1 · مساعدة=1 · خدماتنا=1 */
    .ft-grid {
        display: grid;
        grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr;
        gap: clamp(1.25rem, 2.2vw, 2.25rem);
        align-items: flex-start;
    }
    /* رابط «الخدمات المجانية» (آخر عنصر في عمود خدماتنا) — لمسة خضراء مميِّزة */
    .ft-services-col .ft-link-free i { color: #34d399; }
    .ft-services-col .ft-link-free:hover { color: #34d399; }

    /* Laptop (1200 → 1440): tighter gap */
    @media (max-width: 1399.98px) {
        .ft-grid {
            gap: clamp(1.25rem, 2vw, 2rem);
        }
    }

    /* Tablet landscape (992 → 1199): keep 4 columns but tighter ratios */
    @media (max-width: 1199.98px) {
        .ft-grid {
            grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
            gap: 1rem;
        }
    }

    /* Tablet portrait (768 → 991): 2×2 grid — العلامة بعرض كامل، ثم روابط/سياسة/مساعدة في خلايا */
    @media (max-width: 991.98px) {
        .ft-grid {
            grid-template-columns: 1fr 1fr;
            gap: 2rem 1.5rem;
        }
        .ft-brand-col {
            grid-column: 1 / -1;
        }
    }

    /* Mobile (<576): العلامة بعرض كامل، والروابط في عمودين متجاورين */
    @media (max-width: 575.98px) {
        .ft-grid {
            grid-template-columns: 1fr 1fr;
            gap: 1.75rem 1.25rem;
        }
        .ft-brand-col {
            grid-column: 1 / -1;
        }
    }

    /* الشاشات الضيقة جداً (<360px): الروابط الطويلة تتزاحم في عمودين → رجوع لعمود واحد */
    @media (max-width: 359.98px) {
        .ft-grid { grid-template-columns: 1fr; }
    }

    .ft-col { min-width: 0; }

    /* ===== Brand column ===== */
    .ft-brand-link {
        display: inline-block;
        margin-block-end: 1.25rem;
        transition: transform .3s cubic-bezier(.16, 1, .3, 1);
    }
    .ft-brand-link:hover { transform: translateY(-2px); }
    .ft-brand-logo {
        max-width: 170px;
        height: auto;
        display: block;
    }
    .ft-about {
        color: #ffffff; /* a11y: تباين كافٍ على خلفية الفوتر الداكنة (كان #cbd5e1) */
        font-size: .9375rem;
        font-weight: 400;
        line-height: 1.85;
        margin: 0 0 1.25rem;
    }
    /* HIGH-A1-04: حماية Dark Mode — لو نص إنجليزي من Jodit يحوي color/background inline
       تجاوز EditorContentSanitizer، يُجبر النص يبقى cbd5e1 على خلفية الـ footer الداكنة. */
    .ft-about.editor-content,
    .ft-about.editor-content * {
        /* WYSIWYG: أُزيل !important حتى تفوز ألوان/خلفيات المستخدم المختارة من المحرر
           (السلوك الافتراضي = inherit/transparent يبقى كما هو دون تغيير بصري). */
        color: inherit;
        background: transparent;
        max-width: 480px;
        white-space: normal; /* nl2br emits <br> tags — preserves intentional line breaks */
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    /* Accessible "visually-hidden" — invisible to sighted users, read by screen readers + bots */
    .ft-brand-col .visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    /* Contact action pills */
    /* Quick contact — أيقونات فقط في 3 أعمدة (روابط مباشرة) على كل الشاشات */
    .ft-contact-actions {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: .6rem;
        margin-block-end: 1.5rem;
    }
    .ft-contact-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        padding: 0;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        color: #e2e8f0;
        text-decoration: none;
        transition: background .25s, border-color .25s, transform .25s;
        flex-shrink: 0;
    }
    /* أيقونة فقط — يُخفى النص (يبقى في DOM لأجل aria/SEO) */
    .ft-contact-pill span {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0);
        white-space: nowrap; border: 0;
    }
    .ft-contact-pill i {
        font-size: 1.3rem;
        color: #818cf8;
        flex-shrink: 0;
    }
    .ft-contact-pill:hover {
        background: rgba(99, 102, 241, 0.12);
        border-color: rgba(99, 102, 241, 0.35);
        color: #fff;
        transform: translateY(-2px);
    }
    /* واتساب = الإجراء الأساسي: تعبئة خضراء واضحة */
    .ft-pill-wa i { color: #25d366; }
    .ft-pill-wa {
        background: rgba(37, 211, 102, 0.14);
        border-color: rgba(37, 211, 102, 0.42);
        color: #ffffff;
    }
    .ft-pill-wa:hover {
        background: rgba(37, 211, 102, 0.20);
        border-color: rgba(37, 211, 102, 0.55);
    }

    /* Eyebrow label */
    .ft-eyebrow {
        display: block;
        color: #94a3b8;
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        margin-block-end: .75rem;
    }

    /* Social buttons */
    .ft-socials-wrap { margin-block-start: .25rem; }
    .ft-socials {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
    }
    .ft-social {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: #cbd5e1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        line-height: 1;
        text-decoration: none;
        transition: transform .3s cubic-bezier(.16, 1, .3, 1),
                    background .3s ease,
                    border-color .3s ease,
                    box-shadow .3s ease,
                    color .3s ease;
    }
    .ft-social:hover {
        background: linear-gradient(135deg, #6366f1, #ec4899);
        border-color: transparent;
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 12px 24px -8px rgba(99, 102, 241, 0.55);
    }

    /* WCAG 2.4.7: حلقة تركيز واضحة للروابط/الأزرار الأيقونية على الخلفية الداكنة (outline محايد الاتجاه) */
    .ft-contact-pill:focus-visible,
    .ft-social:focus-visible,
    .ft-brand-link:focus-visible {
        outline: 2px solid rgba(165, 180, 252, .7);
        outline-offset: 2px;
        border-radius: 12px;
    }

    /* ===== ألوان المنصات (مطابقة لأيقونات لوحة التحكم، مهيَّأة للواجهة الداكنة) =====
       الوضع العادي: أيقونة بلون المنصة على رقاقة داكنة خفيفة.
       عند المرور: تعبئة الزر بلون المنصة + أيقونة بيضاء + ظل ملوّن (lift من القاعدة). */
    .ft-s-fb   i { color: #1877F2; }
    .ft-s-ig   i { color: #E4405F; }
    .ft-s-x    i { color: #e7e9ea; }   /* X: شعارها أسود → أبيض ليظهر على الداكن */
    .ft-s-snap i { color: #FFC400; }   /* أصفر أغمق قليلاً ليُقرأ على الداكن */
    .ft-s-tk   i { color: #ffffff; }   /* TikTok: أساس أبيض */
    .ft-s-yt   i { color: #FF0000; }
    .ft-s-li   i { color: #2294e0; }   /* أزرق LinkedIn مُفتَّح قليلاً للتباين */
    .ft-s-tg   i { color: #229ED9; }   /* تيليجرام */
    .ft-s-pin  i { color: #E60023; }

    .ft-s-fb:hover   { background: #1877F2; border-color: #1877F2; box-shadow: 0 12px 24px -8px rgba(24,119,242,.60); }
    .ft-s-ig:hover   { background: linear-gradient(135deg, #feda75, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5); border-color: transparent; box-shadow: 0 12px 24px -8px rgba(214,41,118,.60); }
    .ft-s-x:hover    { background: #000000; border-color: rgba(255,255,255,.28); box-shadow: 0 12px 24px -8px rgba(0,0,0,.65); }
    .ft-s-snap:hover { background: #FFFC00; border-color: #FFFC00; box-shadow: 0 12px 24px -8px rgba(255,252,0,.50); }
    .ft-s-tk:hover   { background: #010101; border-color: rgba(255,255,255,.24); box-shadow: 0 12px 24px -8px rgba(37,244,238,.45); }
    .ft-s-yt:hover   { background: #FF0000; border-color: #FF0000; box-shadow: 0 12px 24px -8px rgba(255,0,0,.55); }
    .ft-s-li:hover   { background: #0A66C2; border-color: #0A66C2; box-shadow: 0 12px 24px -8px rgba(10,102,194,.55); }
    .ft-s-tg:hover   { background: #229ED9; border-color: #229ED9; box-shadow: 0 12px 24px -8px rgba(34,158,217,.55); }
    .ft-s-pin:hover  { background: #E60023; border-color: #E60023; box-shadow: 0 12px 24px -8px rgba(230,0,35,.55); }

    /* الأيقونة بيضاء عند المرور (واستثناء سناب شات → غامقة لأن الخلفية صفراء) */
    .ft-s-fb:hover i, .ft-s-ig:hover i, .ft-s-x:hover i, .ft-s-tk:hover i,
    .ft-s-yt:hover i, .ft-s-li:hover i, .ft-s-tg:hover i, .ft-s-pin:hover i { color: #ffffff; }
    .ft-s-snap:hover i { color: #1a1a1a; }

    /* توسيط الأيقونة داخل إطارها — الـ <i> نفسه flex متمركز (يلغي إزاحة vertical-align في Bootstrap Icons). */
    .ft-social i, .ft-contact-pill i { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }

    /* ===== Section titles ===== */
    .ft-title {
        position: relative;
        color: #ffffff;
        font-size: 1.0625rem;
        font-weight: 800;
        letter-spacing: -.1px;
        margin: 0 0 1.25rem;
        padding-block-end: .75rem;
        display: inline-block;
    }
    .ft-title::after {
        content: '';
        position: absolute;
        inset-block-end: 0;
        inset-inline-start: 0;
        width: 36px;
        height: 3px;
        border-radius: 4px;
        background: linear-gradient(90deg, #6366f1, #ec4899);
    }
    /* "سياسة الموقع" column title — uses purple→cyan gradient for visual distinction */
    .ft-policy-col .ft-title::after {
        background: linear-gradient(90deg, #8b5cf6, #06b6d4);
    }

    /* ===== Links ===== */
    .ft-links {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: .375rem;
    }
    .ft-links li { margin: 0; }
    .ft-links a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        padding: .5rem .25rem;
        color: #cbd5e1;
        font-size: .9375rem;
        font-weight: 500;
        text-decoration: none;
        border-radius: 8px;
        transition: color .25s ease, background .25s ease, padding-inline-start .25s ease;
    }
    /* RSP-26: هدف لمس ≥44px لروابط أعمدة التذييل على الأجهزة اللمسية (display:flex + align-items:center موجودان أعلاه) */
    @media (max-width: 991.98px) {
        .ft-links { gap: .5rem; }
        .ft-links a { min-height: 44px; }
    }
    .ft-links a span { line-height: 1.5; }
    .ft-links a i {
        font-size: .75rem;
        color: rgba(165, 180, 252, 0.6);
        opacity: 0;
        /* LAYOUT-11: !important لتحييد قاعدة قلب design-system العالمية
           ([dir="rtl"] i.bi-chevron-left → scaleX(-1)) التي كانت تغلب هذه القاعدة
           فيتحوّل أنيميشن الانزلاق إلى انعكاس مرآة (نمط breadcrumb المعتمد). */
        transform: translateX(8px) !important;
        transition: opacity .25s ease, transform .25s ease, color .25s ease;
        flex-shrink: 0;
    }
    .ft-links a:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.03);
        padding-inline-start: .625rem;
    }
    .ft-links a:hover i {
        opacity: 1;
        transform: translateX(0) !important; /* LAYOUT-11: يوازي !important الأساس أعلاه */
        color: #a5b4fc;
    }
    .ft-links a:focus-visible {
        outline: 2px solid rgba(165, 180, 252, 0.6);
        outline-offset: 2px;
    }

    /* ===== Trust card ===== */
    .ft-trust-card {
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(236, 72, 153, 0.05));
        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 18px;
        padding: 1.125rem;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    .ft-trust-head {
        display: flex;
        align-items: center;
        gap: .875rem;
    }
    .ft-trust-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        background: linear-gradient(135deg, #6366f1, #ec4899);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        flex-shrink: 0;
        box-shadow: 0 10px 22px -6px rgba(99, 102, 241, 0.5);
    }
    .ft-trust-title {
        display: block;
        color: #ffffff;
        font-weight: 800;
        font-size: .9375rem;
        line-height: 1.3;
        margin-block-end: .15rem;
    }
    .ft-trust-sub {
        display: block;
        color: #cbd5e1;
        font-size: .75rem;
        font-weight: 500;
        line-height: 1.4;
    }
    /* ===== أرقام التوثيق داخل بطاقة الموثوقية — 3 أعمدة (شعار + اسم فوق الرقم) على كل الشاشات (طلب المالك) ===== */
    .ft-trust-legal {
        margin-block-start: 1rem;
        padding-block-start: 1rem;
        border-block-start: 1px solid rgba(255, 255, 255, 0.10);
        display: flex;
        flex-direction: row;
        gap: .4rem;
        justify-content: space-between;
    }
    .ft-trust-legal .ft-legal-item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: .3rem;
        font-size: .72rem;
        color: #cbd5e1;
        font-weight: 600;
    }
    .ft-trust-legal .ft-legal-logo { height: 30px; width: 30px; }
    /* الرقم: سطر واحد للأرقام العادية، ويلتفّ بدل الفيض للأرقام الطويلة (ضريبي 15 خانة) في العمود الضيّق. */
    .ft-trust-legal .ft-legal-num { font-size: .72rem; overflow-wrap: anywhere; }
    .ft-trust-legal .ft-legal-label { line-height: 1.3; }
    .ft-legal-item bdi { color: #cbd5e1; font-variant-numeric: tabular-nums; }
    /* رقم التوثيق رابط لشهادة المركز السعودي للأعمال (الشعار/الاسم/الرقم كلها قابلة للنقر) */
    a.ft-legal-link {
        text-decoration: none;
        cursor: pointer;
        transition: color .2s ease, transform .2s ease;
    }
    a.ft-legal-link:hover { color: #e2e8f0; transform: translateY(-1px); }
    a.ft-legal-link:hover .ft-legal-num { color: #ffffff; text-decoration: underline; }
    a.ft-legal-link:hover .ft-legal-logo { box-shadow: 0 4px 12px -2px rgba(0, 0, 0, .35); }
    a.ft-legal-link:focus-visible { outline: 2px solid rgba(99, 102, 241, .6); outline-offset: 3px; border-radius: 6px; }
    /* شعار الجهة الرسمية بدل الأيقونة — يملأ الإطار بالكامل (نفس الحجم) على كل الشاشات */
    .ft-legal-logo {
        height: 44px;
        width: 44px;
        object-fit: cover;
        background: #ffffff;
        border-radius: 9px;
        padding: 0;
        flex-shrink: 0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    }
    /* تصغير طفيف لشعار المركز السعودي للأعمال داخل إطاره (هامش داخلي خفيف) */
    .ft-legal-logo-sbc { padding: 5px; }

    /* ===== Bottom bar ===== */
    .ft-bottom {
        position: relative;
        z-index: 2;
        border-block-start: 1px solid rgba(255, 255, 255, 0.06);
        padding-block: 1.25rem;
        background: rgba(2, 6, 23, 0.55);
    }
    .ft-bottom-grid {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 1rem 1.5rem;
    }
    @media (max-width: 991.98px) {
        .ft-bottom-grid {
            grid-template-columns: 1fr;
            justify-items: center;
            text-align: center;
        }
        /* Visual order on mobile: secure badge → payments → copyright */
        .ft-bottom-grid .ft-secure { order: 1; }
        .ft-bottom-grid .ft-payments { order: 2; }
        .ft-bottom-grid .ft-copy { order: 3; }
    }

    .ft-copy {
        margin: 0;
        color: #ffffff; /* a11y: أبيض ساطع لرفع التباين (كان #94a3b8) */
        font-size: .875rem;
        font-weight: 600;
        line-height: 1.5;
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .5rem;
    }
    .ft-copy-brand {
        color: #ffffff; /* a11y: أبيض ساطع (كان #e2e8f0) */
        font-weight: 700;
    }
    .ft-copy-sep {
        color: rgba(165, 180, 252, .55);
        font-weight: 700;
    }
    .ft-copy-sub {
        color: #ffffff; /* a11y: أبيض ساطع لرفع التباين (كان #94a3b8) */
        font-weight: 500;
        font-size: .8125rem;
    }
    .ft-copy-year {
        color: #ffffff; /* a11y: أبيض ساطع — كان #64748b (يفشل AA ≈3.9:1) */
        font-weight: 600;
        font-size: .8125rem;
        letter-spacing: .3px;
    }

    /* Payment logos (Trust Badges) — صفّ متمركز يلتفّ بنظافة (نمط شريط الجهات الرسمية) */
    .ft-payments {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .45rem;
        padding: .55rem .7rem;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 16px;
        justify-content: center;
        max-width: 100%;
    }
    /* رقاقة موحَّدة الارتفاع لكل شعار + object-fit يحافظ على النسبة بلا تشويه (يُغني عن تخصيص لكل شعار) */
    .ft-pay {
        height: 30px;
        width: auto;
        max-width: 64px;
        background: #ffffff;
        padding: 4px 7px;
        border-radius: 6px;
        opacity: .97;
        transition: opacity .2s, transform .2s;
        display: block;
        object-fit: contain;
    }
    .ft-pay:hover {
        opacity: 1;
        transform: translateY(-1px);
    }

    /* Secure badge */
    .ft-secure {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .5rem 1rem;
        background: rgba(16, 185, 129, 0.10);
        border: 1px solid rgba(16, 185, 129, 0.25);
        border-radius: 100px;
        color: #34d399;
        font-size: .8125rem;
        font-weight: 700;
        white-space: nowrap;
        justify-self: end;
    }
    @media (max-width: 991.98px) {
        .ft-secure { justify-self: center; }
    }
    .ft-secure i {
        font-size: .9rem;
    }

    /* ===== Mobile tweaks ===== */
    @media (max-width: 575.98px) {
        .ft-brand-col,
        .ft-links-col,
        .ft-policy-col,
        .ft-help-col,
        .ft-services-col {
            text-align: center;
        }
        .ft-title { display: inline-block; }
        .ft-title::after {
            /* تمركز الخط تحت العنوان مضمون في RTL/LTR (نصف عرض الخط 36px) بدل translateX الفيزيائي. */
            inset-inline-start: calc(50% - 18px);
            transform: none;
        }
        .ft-about,
        .ft-contact-actions,
        .ft-socials,
        .ft-links {
            align-items: center;
        }
        /* النص الوصفي أسفل الشعار: متمركز على الشاشات الصغيرة (طلب المالك). */
        .ft-about { text-align: center; }
        /* Quick contact — على الجوال: تمركز صفّ الأيقونات الثلاث */
        .ft-contact-actions { justify-content: center; }
        .ft-socials { justify-content: center; }
        .ft-links a { justify-content: center; }

        /* Payment logos — صفّ متمركز يلتفّ (يدعم 8 شعارات بلا ضغط) */
        .ft-payments {
            display: flex;
            flex-wrap: wrap;
            gap: .4rem;
            padding: .5rem .6rem;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.08);
            max-width: 100%;
            margin-inline: auto;
            justify-content: center;
            align-items: center;
        }
        .ft-pay {
            height: 26px;
            width: auto;
            max-width: 56px;
            padding: 3px 5px;
            background: #ffffff;
            border-radius: 5px;
            object-fit: contain;
            opacity: 1;
        }
    }