/*
 * هوية ذرب: الخطوط والألوان والمقاسات، مصدر واحد لصفحات Blade واللوحة.
 * أربعة ألوان فقط: الأزرق للفعل، والعاجي للخلفيات، والحبر للنص، والزعفران للمختار وحده.
 */

/* IBM Plex Sans Arabic للعربي، وInter للاتيني والأرقام الغربية، تحت اسم عائلة واحد */
@font-face {
    font-family: 'Dharb';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/plex-arabic-regular.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+25CC;
}

@font-face {
    font-family: 'Dharb';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/plex-arabic-medium.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+25CC;
}

@font-face {
    font-family: 'Dharb';
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url('/fonts/plex-arabic-bold.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+25CC;
}

@font-face {
    font-family: 'Dharb';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --d-blue: #2B59F3;
    --d-blue-rgb: 43, 89, 243;
    --d-blue-700: #1E45D1;
    --d-blue-100: #DCE5FD;
    --d-blue-50: #EEF2FE;
    --d-ivory: #FBF8F1;
    --d-ivory-rgb: 251, 248, 241;
    --d-ivory-2: #F3EEE2;
    --d-ink: #1C1B1F;
    --d-ink-rgb: 28, 27, 31;
    --d-ink-2: #55535C;
    --d-ink-3: #8A8791;
    --d-saffron: #F2A93B;
    --d-surface: #FFFFFF;
    --d-line: rgba(28, 27, 31, 0.1);
    --d-danger: #C2372B;
    --d-danger-50: #FCEDEB;

    --d-font: 'Dharb', 'IBM Plex Sans Arabic', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* المقاسات: عنوان ٤٨، قسم ٣٢، فرعي ٢٢، نص ١٧، صغير ١٣ */
    --d-fs-display: 48px;
    --d-fs-h1: 32px;
    --d-fs-h2: 22px;
    --d-fs-body: 17px;
    --d-fs-small: 13px;

    --d-radius-card: 24px;
    --d-radius-md: 16px;
    --d-radius-sm: 12px;
    --d-radius-pill: 999px;

    --d-shadow-card: 0 1px 2px rgba(28, 27, 31, 0.04), 0 14px 36px -14px rgba(28, 27, 31, 0.16);
    --d-shadow-pop: 0 2px 4px rgba(28, 27, 31, 0.06), 0 24px 56px -18px rgba(28, 27, 31, 0.28);
    --d-shadow-blue: 0 10px 24px -10px rgba(43, 89, 243, 0.55);

    --d-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== الشعار: الأيقونة ثم «ذرب» فوق «Dharb» ===== */

.d-lockup {
    --lockup-h: 44px;

    display: inline-flex;
    align-items: center;
    gap: calc(var(--lockup-h) * 0.22);
    color: var(--d-ink);
    direction: ltr;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.d-lockup__icon {
    display: block;
    flex: none;
    block-size: var(--lockup-h);
    inline-size: var(--lockup-h);
}

.d-lockup__words {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: var(--d-font);
    font-weight: 700;
    line-height: 1;
}

.d-lockup__ar {
    direction: rtl;
    font-size: calc(var(--lockup-h) * 0.52);
    line-height: 1.02;
    margin-block-start: calc(var(--lockup-h) * -0.06);
}

.d-lockup__en {
    font-size: calc(var(--lockup-h) * 0.36);
    letter-spacing: -0.01em;
    line-height: 1;
}

.d-lockup--reverse {
    color: var(--d-ivory);
}

.d-lockup--sm {
    --lockup-h: 34px;
}

.d-lockup--lg {
    --lockup-h: 64px;
}

/* ===== شارة «ذرب معتمد» ===== */

.d-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 50%;
    background: var(--d-blue);
    block-size: 84px;
    inline-size: 84px;
    color: var(--d-ivory);
    font-family: var(--d-font);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    box-shadow: 0 0 0 4px var(--d-surface), var(--d-shadow-card);
}

.d-badge__dot {
    display: block;
    border-radius: 50%;
    background: var(--d-saffron);
    block-size: 10px;
    inline-size: 10px;
    margin-block-end: 2px;
}

/* ===== أزرار الحبة: فعل واضح على كل زر ===== */

.d-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-block-size: 52px;
    padding-inline: 28px;
    border: 0;
    border-radius: var(--d-radius-pill);
    background: var(--d-blue);
    color: #fff;
    font-family: var(--d-font);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--d-shadow-blue);
    transition: transform 0.25s var(--d-ease), background-color 0.2s ease, box-shadow 0.25s var(--d-ease);
    -webkit-tap-highlight-color: transparent;
}

.d-pill:hover { background: var(--d-blue-700); transform: translateY(-1px); }
.d-pill:active { transform: scale(0.98); }
.d-pill:focus-visible { outline: 3px solid rgba(var(--d-blue-rgb), 0.35); outline-offset: 3px; }

.d-pill--lg { min-block-size: 60px; padding-inline: 34px; font-size: 18px; }
.d-pill--sm { min-block-size: 40px; padding-inline: 18px; font-size: 15px; box-shadow: none; }

.d-pill.d-pill--ghost {
    background: transparent;
    color: var(--d-blue);
    box-shadow: inset 0 0 0 1.5px rgba(var(--d-blue-rgb), 0.35);
}

.d-pill--ghost:hover { background: var(--d-blue-50); }

/* ===== البطاقة: ٢٤ بكسل وظل ناعم على العاجي ===== */

.d-card {
    border-radius: var(--d-radius-card);
    background: var(--d-surface);
    box-shadow: var(--d-shadow-card);
}

/* أيقونات خطية بقناع، لونها من currentColor */
.ic {
    display: inline-block;
    flex: none;
    block-size: 1.15em;
    inline-size: 1.15em;
    background: currentColor;
    -webkit-mask: var(--ic) center / contain no-repeat;
    mask: var(--ic) center / contain no-repeat;
    vertical-align: -0.2em;
}

.ic-x { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 6 6 18M6 6l12 12%22/%3E%3C/svg%3E"); }
.ic-bookmark { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 21l-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z%22/%3E%3C/svg%3E"); }
.ic-heart { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2-1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7z%22/%3E%3C/svg%3E"); }
.ic-video { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m16 13 5.2 3.1a.5.5 0 0 0 .8-.4V8.3a.5.5 0 0 0-.8-.4L16 11%22/%3E%3Crect x=%222%22 y=%226%22 width=%2214%22 height=%2212%22 rx=%222%22/%3E%3C/svg%3E"); }
.ic-play { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 4.5v15a1 1 0 0 0 1.5.9l12-7.5a1 1 0 0 0 0-1.8l-12-7.5A1 1 0 0 0 7 4.5z%22 fill=%22%23000%22/%3E%3C/svg%3E"); }
.ic-arrow { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 12H5M12 19l-7-7 7-7%22/%3E%3C/svg%3E"); }
.ic-arrow-down { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 5v14M19 12l-7 7-7-7%22/%3E%3C/svg%3E"); }
.ic-check { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 6 9 17l-5-5%22/%3E%3C/svg%3E"); }
.ic-link { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7%22/%3E%3Cpath d=%22M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7%22/%3E%3C/svg%3E"); }
.ic-copy { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%229%22 y=%229%22 width=%2213%22 height=%2213%22 rx=%222%22/%3E%3Cpath d=%22M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1%22/%3E%3C/svg%3E"); }
.ic-mic { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z%22/%3E%3Cpath d=%22M19 10v2a7 7 0 0 1-14 0v-2M12 19v3%22/%3E%3C/svg%3E"); }
.ic-user { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%228%22 r=%224%22/%3E%3Cpath d=%22M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6%22/%3E%3C/svg%3E"); }
.ic-doc { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z%22/%3E%3Cpath d=%22M14 2v6h6M16 13H8M16 17H8M10 9H8%22/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}