/* ============================================================
   دافورك — نظام التصميم
   ============================================================

   ملف واحد يحمل الرموز (tokens) والمكوّنات المشتركة لكل صفحات
   الواجهة العامة.

   لماذا ملف مشترك؟ كانت الواجهة تحمل نحو 3100 سطر CSS مضمَّنة داخل
   تسعة ملفات PHP (690 سطراً في الهيدر وحده)، فكل صفحة تُعيد تعريف
   الأزرار والبطاقات بقيَم مختلفة قليلاً. النتيجة موقع يبدو مجمَّعاً
   من أجزاء لا مصمَّماً، وأي تعديل في الهوية يتطلّب تتبّع تسعة ملفات.

   الهوية مستخرَجة من الشعار نفسه: كحلي عميق (#002654) وأخضر ورقي
   (#46901C). الموقع كان يستعمل الكحلي وحده، فبقي الأخضر — نصف الهوية —
   معطّلاً. هنا يعود لوناً فاعلاً للتمييز والطاقة.

   RTL أصلي: تُستخدم الخصائص المنطقية (inline-start/end) لا اليسار
   واليمين، فينعكس التخطيط صحيحاً بلا قواعد مكرّرة.
   ============================================================ */

/* ============================================================
   0. الخط — Cairo محلياً
   ============================================================

   كان الهيدر يحمّل Cairo من Google Fonts بينما صفحات الحساب تحمّله
   محلياً بصيغة TTF — مصدران مختلفان لنفس الخط، فيُحمَّل مرتين لمن
   ينتقل بينهما، وتختلف مقاييس الحروف قليلاً بين الصفحتين.

   التوحيد هنا محلياً بصيغة woff2 (274KB بدل 735KB لـ TTF، أي 63%
   أقل)، فيختفي الاعتماد على نطاق خارجي ويُحمَّل الخط مرة واحدة من
   مصدر واحد. والمتصفّح لا يجلب إلا الأوزان المستعملة فعلاً.

   font-display: swap يعرض النصّ بخط بديل فوراً ثم يستبدله — فلا
   تبقى الصفحة بلا نصّ مقروء أثناء تحميل الخط.
*/

@font-face {
    font-family: 'Cairo';
    src: url('../fonts/Cairo-Light.woff2') format('woff2'),
         url('../fonts/Cairo-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('../fonts/Cairo-Regular.woff2') format('woff2'),
         url('../fonts/Cairo-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('../fonts/Cairo-Medium.woff2') format('woff2'),
         url('../fonts/Cairo-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('../fonts/Cairo-SemiBold.woff2') format('woff2'),
         url('../fonts/Cairo-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('../fonts/Cairo-Bold.woff2') format('woff2'),
         url('../fonts/Cairo-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('../fonts/Cairo-ExtraBold.woff2') format('woff2'),
         url('../fonts/Cairo-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('../fonts/Cairo-Black.woff2') format('woff2'),
         url('../fonts/Cairo-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   1. الرموز
   ============================================================ */

:root {
    /* ── الهوية
       --brand يحقنه PHP من لوحة الإدارة (primary_color)، والقيمة هنا
       احتياطية تطابق الإعداد الحالي. بقية التدرّج مشتق منه بصرياً. */
    --brand:            #002654;
    --brand-900:        #001A3D;
    --brand-700:        #013A7A;
    --brand-500:        #0B5BAD;
    --brand-100:        #E8EFF7;
    --brand-050:        #F4F8FC;

    /* ── الأخضر: من ورقة الشعار */
    --leaf:             #46901C;
    --leaf-700:         #357015;
    --leaf-400:         #6CBE3A;
    --leaf-100:         #EDF7E6;

    /* ── المحايد */
    --ink:              #0F172A;
    --ink-2:            #334155;
    --ink-3:            #64748B;
    --ink-4:            #94A3B8;
    --line:             #E2E8F0;
    --line-soft:        #F1F5F9;
    --surface:          #FFFFFF;
    --canvas:           #F8FAFC;

    /* ── دلالية */
    --ok:               #16A34A;
    --warn:             #D97706;
    --danger:           #DC2626;

    /* ── المسافات: سلّم من 4px
       سلّم ثابت بدل أرقام عشوائية — هو ما يجعل الإيقاع البصري منتظماً
       عبر الصفحات دون أن ينتبه المستخدم للسبب. */
    --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
    --s5: 20px;  --s6: 24px;  --s8: 32px;  --s10: 40px;
    --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px;

    /* ── الحواف */
    --r-sm: 10px;  --r-md: 14px;  --r-lg: 20px;
    --r-xl: 28px;  --r-pill: 999px;

    /* ── الظلال: خفيفة وملوّنة بالكحلي لا بالأسود
       الظل الأسود يُسخّم الألوان؛ ظلٌّ بلون العلامة يبقى نظيفاً. */
    --sh-1: 0 1px 2px rgba(2, 20, 48, .06);
    --sh-2: 0 4px 16px -4px rgba(2, 20, 48, .10);
    --sh-3: 0 12px 32px -8px rgba(2, 20, 48, .14);
    --sh-4: 0 24px 56px -16px rgba(2, 20, 48, .20);

    /* ── الخط */
    --font: 'Cairo', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;

    /* سلّم متجاوب بـ clamp: يتدرّج مع عرض الشاشة بلا نقاط توقّف،
       فيُحذف عشرات أسطر media query للأحجام. */
    --t-display: clamp(2rem, 1.2rem + 3.2vw, 3.6rem);
    --t-h1:      clamp(1.7rem, 1.2rem + 2.1vw, 2.7rem);
    --t-h2:      clamp(1.4rem, 1.1rem + 1.3vw, 2rem);
    --t-h3:      clamp(1.15rem, 1rem + .6vw, 1.4rem);
    --t-lead:    clamp(1rem, .95rem + .4vw, 1.18rem);
    --t-body:    .975rem;
    --t-sm:      .875rem;
    --t-xs:      .78rem;

    /* ── التخطيط */
    --container: 1200px;
    --header-h:  74px;

    /* ── الحركة */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --dur:  .28s;
}

/* ============================================================
   2. الأساس
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    /* الهيدر ثابت، فالتمرير إلى مرساة يخفي العنوان تحته بدون هذا */
    scroll-padding-top: calc(var(--header-h) + var(--s6));
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font);
    font-size: var(--t-body);
    line-height: 1.85;
    color: var(--ink-2);
    background: var(--surface);
    direction: rtl;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    color: var(--ink);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.015em;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 700; }

p { line-height: 1.95; }

a { color: inherit; text-decoration: none; }

img, svg, video { display: block; max-width: 100%; height: auto; }

ul, ol { list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

/* حلقة تركيز واحدة للكل — لا تُلغى أبداً: إزالتها تقطع التنقّل
   بلوحة المفاتيح عن كل من لا يستخدم الفأرة. */
:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

::selection { background: var(--brand); color: #fff; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ============================================================
   3. التخطيط
   ============================================================ */

.dk-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--s5);
}

.dk-section { padding-block: clamp(var(--s16), 9vw, var(--s24)); }
.dk-section--tight { padding-block: clamp(var(--s12), 6vw, var(--s16)); }
.dk-section--canvas { background: var(--canvas); }

/* شبكة تلقائية: تملأ العرض بأعمدة لا تقلّ عن حدٍّ أدنى، فتتجاوب
   بلا نقاط توقّف. --min يُضبط لكل استعمال. */
.dk-grid {
    display: grid;
    gap: var(--s5);
    grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 280px), 100%), 1fr));
}

/* ترويسة قسم */
.dk-head { margin-bottom: var(--s10); max-width: 62ch; }
.dk-head--center { margin-inline: auto; text-align: center; }

.dk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--leaf-700);
    background: var(--leaf-100);
    padding: 6px var(--s3);
    border-radius: var(--r-pill);
    margin-bottom: var(--s4);
}

.dk-head h2 { margin-bottom: var(--s3); }

.dk-head p {
    color: var(--ink-3);
    font-size: var(--t-lead);
}

/* ============================================================
   4. الأزرار
   ============================================================ */

.dk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: 13px var(--s6);
    border-radius: var(--r-md);
    font-size: var(--t-sm);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}

.dk-btn:active { transform: translateY(1px); }

.dk-btn i, .dk-btn svg { font-size: 1em; width: 1.05em; height: 1.05em; }

.dk-btn--primary {
    background: var(--brand);
    color: #fff;
    box-shadow: var(--sh-2);
}
.dk-btn--primary:hover {
    background: var(--brand-900);
    box-shadow: var(--sh-3);
    transform: translateY(-2px);
}

.dk-btn--leaf {
    background: var(--leaf);
    color: #fff;
    box-shadow: 0 4px 16px -4px rgba(70, 144, 28, .40);
}
.dk-btn--leaf:hover {
    background: var(--leaf-700);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px -6px rgba(70, 144, 28, .46);
}

.dk-btn--ghost {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
}
.dk-btn--ghost:hover {
    border-color: var(--brand);
    color: var(--brand);
    transform: translateY(-2px);
}

/* على الخلفيات الداكنة */
.dk-btn--onDark {
    background: rgba(255, 255, 255, .10);
    color: #fff;
    border-color: rgba(255, 255, 255, .28);
    backdrop-filter: blur(8px);
}
.dk-btn--onDark:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .5);
}

.dk-btn--lg { padding: 16px var(--s8); font-size: var(--t-body); }
.dk-btn--sm { padding: 9px var(--s4); font-size: var(--t-xs); }
.dk-btn--block { width: 100%; }

/* ============================================================
   5. البطاقات
   ============================================================ */

.dk-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    padding: var(--s6);
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}

.dk-card--hover:hover {
    transform: translateY(-4px);
    border-color: var(--line);
    box-shadow: var(--sh-3);
}

/* شريط علوي يظهر عند المرور — توقيع بصري متكرّر عبر الموقع */
.dk-card--accent::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: var(--s6);
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--brand), var(--leaf));
    transform: scaleX(0);
    transform-origin: inline-start;
    transition: transform var(--dur) var(--ease);
}
.dk-card--accent:hover::before { transform: scaleX(1); }

.dk-card__icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: var(--r-md);
    background: var(--brand-050);
    color: var(--brand);
    font-size: 1.3rem;
    margin-bottom: var(--s4);
    transition: background-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}
.dk-card--hover:hover .dk-card__icon {
    background: var(--brand);
    color: #fff;
}

.dk-card h3 { margin-bottom: var(--s2); }
.dk-card p { color: var(--ink-3); font-size: var(--t-sm); }

/* ============================================================
   6. الشارات والرقائق
   ============================================================ */

.dk-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: var(--r-pill);
    font-size: var(--t-xs);
    font-weight: 700;
    line-height: 1.6;
    background: var(--canvas);
    color: var(--ink-3);
    border: 1px solid var(--line-soft);
}

.dk-badge--verified { background: var(--brand-100); color: var(--brand-700); border-color: transparent; }
.dk-badge--leaf     { background: var(--leaf-100);  color: var(--leaf-700);  border-color: transparent; }
.dk-badge--warn     { background: #FEF3C7;          color: #92400E;          border-color: transparent; }
.dk-badge--danger   { background: #FEE2E2;          color: #991B1B;          border-color: transparent; }

.dk-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px var(--s3);
    border-radius: var(--r-pill);
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: all var(--dur) var(--ease);
}
.dk-chip:hover { border-color: var(--brand); color: var(--brand); }
.dk-chip--on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ============================================================
   7. الحقول
   ============================================================ */

.dk-field { margin-bottom: var(--s5); }

.dk-label {
    display: block;
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--ink-2);
    margin-bottom: var(--s2);
}

.dk-input {
    width: 100%;
    padding: 13px var(--s4);
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    font-size: var(--t-sm);
    color: var(--ink);
    transition: border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}
.dk-input::placeholder { color: var(--ink-4); }
.dk-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-100);
}
.dk-input[aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 4px #FEE2E2;
}

textarea.dk-input { resize: vertical; min-height: 120px; line-height: 1.9; }

.dk-hint { font-size: var(--t-xs); color: var(--ink-4); margin-top: 6px; }
.dk-error { font-size: var(--t-xs); color: var(--danger); margin-top: 6px; font-weight: 600; }

/* ============================================================
   8. الصور الرمزية
   ============================================================ */

.dk-avatar {
    width: var(--size, 48px);
    height: var(--size, 48px);
    border-radius: 50%;
    object-fit: cover;
    background: var(--brand-050);
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px var(--line);
    flex-shrink: 0;
}

.dk-avatar--fallback {
    display: grid;
    place-items: center;
    color: var(--brand);
    font-weight: 800;
    font-size: calc(var(--size, 48px) * .40);
}

/* ============================================================
   9. التنبيهات
   ============================================================ */

.dk-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    padding: var(--s4) var(--s5);
    border-radius: var(--r-md);
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1.85;
    margin-bottom: var(--s4);
    /* الشريط الجانبي منطقي لا يميني: ينعكس صحيحاً لو عُرّبت الصفحة LTR */
    border-inline-start: 3px solid currentColor;
}
.dk-alert--success { background: #F0FDF4; color: #15803D; }
.dk-alert--danger  { background: #FEF2F2; color: #B91C1C; }
.dk-alert--warning { background: #FFFBEB; color: #B45309; }
.dk-alert--info    { background: var(--brand-050); color: var(--brand-700); }

/* ============================================================
   10. الزخرفة — توقيع «القوس»
   ============================================================

   قوس مشتق من انحناء حرف D في الشعار. يتكرّر خلف الأقسام الرئيسية
   بحجم كبير وشفافية منخفضة، فيعطي الصفحات هوية بصرية متّصلة بدل
   أشكال هندسية عامة لا علاقة لها بالعلامة.
*/

.dk-arc {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.dk-arc--ring {
    border: 1px solid currentColor;
    opacity: .14;
}

.dk-arc--blob {
    background: currentColor;
    opacity: .05;
    filter: blur(2px);
}

/* شبكة نقطية خفيفة للخلفيات الداكنة */
.dk-dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255,255,255,.10) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 72%);
}

/* ============================================================
   11. أدوات
   ============================================================ */

.dk-stack  { display: flex; flex-direction: column; gap: var(--s4); }
.dk-row    { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.dk-center { text-align: center; }
.dk-muted  { color: var(--ink-3); }
.dk-small  { font-size: var(--t-sm); }

/* قصّ النصّ إلى عدد أسطر */
.dk-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lines, 2);
    line-clamp: var(--lines, 2);
    overflow: hidden;
}

/* للقارئات الشاشية فقط */
.dk-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* رابط تخطّي — أول ما يصله مستخدم لوحة المفاتيح */
.dk-skip {
    position: absolute;
    inset-block-start: -100px;
    inset-inline-start: var(--s4);
    z-index: 2000;
    background: var(--brand);
    color: #fff;
    padding: var(--s3) var(--s5);
    border-radius: 0 0 var(--r-md) var(--r-md);
    font-weight: 700;
    font-size: var(--t-sm);
    transition: inset-block-start var(--dur) var(--ease);
}
.dk-skip:focus { inset-block-start: 0; }

/* ============================================================
   12. ظهور تدريجي عند التمرير
   ============================================================
   يُفعّلها JS بإضافة .is-in. الحالة الابتدائية مشروطة بـ .js حتى
   لا يختفي المحتوى عمّن عطّل الجافاسكربت.
*/

.js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   13. ترويسة صفحة داخلية
   ============================================================
   كانت مكرّرة حرفياً في about/faq/contact (نحو 28 سطراً في كل ملف).
   موضعها هنا يضمن أن ترويسات الصفحات الداخلية لا تتفرّق عند تعديل
   واحدة منها لاحقاً.
*/

.pg-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(var(--s12), 7vw, var(--s20));
    background: var(--brand-050);
    border-block-end: 1px solid var(--line-soft);
}

.pg-hero__arc {
    color: var(--brand);
    width: min(820px, 130vw);
    aspect-ratio: 1;
    inset-block-start: -62%;
    inset-inline-start: 50%;
    transform: translateX(50%);
}

.pg-hero__arc--leaf {
    color: var(--leaf);
    width: min(360px, 60vw);
    inset-block-start: auto;
    inset-block-end: -42%;
    inset-inline-start: -6%;
    transform: none;
}

.pg-hero__in { position: relative; z-index: 1; max-width: 64ch; }
.pg-hero h1 { font-size: var(--t-display); margin-block-end: var(--s4); }
.pg-hero__hl { color: var(--brand); }
.pg-hero p { font-size: var(--t-lead); color: var(--ink-3); max-width: 56ch; }
.pg-hero__meta { margin-block-start: var(--s6); gap: var(--s2); }