/* ==========================================================================
   منصة التطوع — الواجهة العامة
   vo.alehsan.org.sa  ·  rewritten from zero 2026-09-03 (الثالثة)

   قرار فارس: «للمرة الثالثة ستايل الواجهة حق منصة التطوع كله ارمه وابنيه من
   جديد» — وفي الرسالة نفسها: «ستايل التسجيل مناسب».

   ── من أين جاء هذا الشكل ───────────────────────────────────────────────────
   من صفحة التسجيل، وهي بدورها من نظام الموارد البشرية. تلك هي اللغة الوحيدة
   التي وافق عليها فارس، فالواجهة العامة الآن **نفس الصفحة الأخرى** لا صفحة
   ثالثة باجتهادي:

     · أرضية دافئة وبطاقات بيضاء مدوّرة عليها ظلّ ناعم واسع
     · زوايا `1.35rem .7rem 1.35rem 1.35rem` — الزاوية المقصوصة الواحدة توقيع
       الجمعية في أنظمتها كلها
     · أزرار بتدرّج برتقالي، وأزرار ثانوية بيضاء بحدّ رفيع
     · بنر صور المتطوعين في الأعلى، كما في التسجيل
     · صور حقيقية داخل البطاقات، لا ألوان مسطّحة

   وما رُمي: الحبر والورق المتناوبان، القطع المائل، الأرقام المفرّغة بالحدّ،
   خطوط الحالة الشعرية، والحقول بلا إطار. لا شيء منها بقي في هذا الملف.

   ── الاشتراك مع صفحة التسجيل ───────────────────────────────────────────────
   الرموز معرّفة هنا على `:root`، وصفحة التسجيل تعيد تعريفها على `.rg` بنفس
   القيم. القيمة مكتوبة مرتين وهذا مقصود: الملفان يُحمَّلان معًا على صفحة
   التسجيل ومنفصلين في غيرها، ولا يجوز أن يعتمد أحدهما على ترتيب تحميل الآخر.

   ── ما بقي من الملف السابق ─────────────────────────────────────────────────
   ثلاثة فقط، وكلها إمّا موافَق عليها أو إصلاح عيب مثبَت:
     1. `@font-face` — خط الجمعية نفسه.
     2. `.topbar` — شريط نظام الموارد البشرية، بقرار «موحد زي hr».
     3. `.fld-hp` — إخفاء حقل المصيدة بـ `clip-path`. لا يُلمس.
   ========================================================================== */

/* ── الخط ──────────────────────────────────────────────────────────────────
   نفس الوجه الذي يستعمله نظام الموارد البشرية، فتُقرأ الجمعية منظمةً واحدة عبر
   نطاقاتها. الملف مسمّى `.ttf` وبايتاته الأولى `OTTO` — أي OpenType/CFF، ومن
   هنا `format("opentype")`.

   `font-display: swap` عمدًا: ٢٥٦ كيلوبايت انتظارٌ حقيقي على الجوال، وزائر قادم
   من رابط واتساب يقرأ العنوان بخط النظام ٢٠٠ms خيرٌ من أن يحدّق في فراغ.
   ────────────────────────────────────────────────────────────────────────── */
@font-face {
    font-family: "Foda";
    src: url("../fonts/foda.ttf") format("opentype");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}

:root {
    /* من theme.css، بالقيمة. */
    --brand-700: #a44320;
    --brand-600: #cf6028;
    --brand-500: #f18927;
    --brand-200: #ffd4af;
    --brand-100: #fff0e2;
    --ink: #242824;
    --ink-700: #505650;
    --ink-500: #7c837b;
    --line: #e8e0d7;
    --paper: #fffefa;
    --canvas: #f6f4ef;
    --success: #27734e;
    --success-bg: #e9f7ef;

    --radius: 1.35rem .7rem 1.35rem 1.35rem;
    --radius-sm: .9rem .45rem .9rem .9rem;
    --shadow: 0 14px 40px rgba(34, 31, 25, .07);
    --shadow-lift: 0 22px 55px rgba(34, 31, 25, .11);

    --wrap: 74rem;
    --gut: clamp(1rem, 4vw, 2rem);
}

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

body.fld {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: "Foda", Tahoma, Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

/*
    لا `letter-spacing` على العربية في أي موضع من هذا الملف. العربية خطّ متّصل،
    والتباعد يقطع وصلات الحروف — «تطوع» تصير أربعة أشكال مفكّكة.
*/
.fld h1,
.fld h2,
.fld h3 {
    margin: 0;
    font-weight: 400;
    line-height: 1.25;
}

.fld p {
    margin: 0;
}

.fld img {
    display: block;
    max-width: 100%;
}

.fld-wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gut);
}

/* ── تجاوز إلى المحتوى ───────────────────────────────────────────────────── */
.fld-skip {
    position: absolute;
    inset-inline-start: 1rem;
    top: .75rem;
    z-index: 60;
    padding: .6rem 1.1rem;
    border-radius: var(--radius-sm);
    background: var(--brand-700);
    color: #fff;
    text-decoration: none;
    transform: translateY(-350%);
}

.fld-skip:focus {
    transform: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   الترويسة: نفس شريط نظام الموارد البشرية
   قرار فارس: «الشريط في الاعلى ابيه موحد زي hr».

   These are `theme.css`'s class names and `theme.css`'s values, copied so that
   somebody moving between hr.alehsan.org.sa and vo.alehsan.org.sa meets the
   same bar rather than two designs of one association.

   **Copied, not shared, and that was the choice.** Loading `theme.css` here
   would bring the whole tool skin with it — `body`, `a`, every bare `input` —
   into pages styled from scratch. These are the sixty lines that matter and
   none of the three thousand that do not. If HR's bar changes, change it here
   too; the tokens are named the same on both sides so the diff reads.
   ══════════════════════════════════════════════════════════════════════════ */
.fld-chrome {
    position: relative;
    z-index: 20;
}

.topbar {
    position: sticky;
    top: .75rem;
    z-index: 10;
    display: flex;
    width: min(calc(100% - 2rem), 80rem);
    min-height: 5.2rem;
    margin: .75rem auto 0;
    padding: .85rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, .88);
    border-radius: var(--radius);
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: rgba(255, 254, 250, .82);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.topbar__brand {
    display: flex;
    align-items: center;
    gap: .9rem;
    color: inherit;
    text-decoration: none;
}

.topbar__brand strong {
    display: block;
    font-weight: 400;
}

.topbar__brand small {
    display: block;
    margin-top: .2rem;
    color: var(--ink-500);
}

.brand-logo--topbar {
    width: 9.5rem;
    height: auto;
    flex: 0 0 auto;
    object-fit: contain;
}

.topbar__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* ── الأزرار ─────────────────────────────────────────────────────────────── */
.primary-button,
.secondary-button {
    display: inline-flex;
    min-height: 3.15rem;
    padding: .75rem 1.4rem;
    border-radius: var(--radius-sm);
    align-items: center;
    justify-content: center;
    gap: .45rem;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    font: inherit;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.primary-button {
    border: 1px solid var(--brand-600);
    color: #fff;
    background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
    box-shadow: 0 10px 24px rgba(198, 90, 40, .22);
    font-weight: 700;
}

.primary-button:hover {
    color: #fff;
    box-shadow: 0 13px 30px rgba(198, 90, 40, .3);
    transform: translateY(-1px);
}

.secondary-button {
    border: 1px solid var(--line);
    color: var(--ink-700);
    background: var(--paper);
}

.secondary-button:hover {
    border-color: var(--brand-200);
    color: var(--brand-700);
    background: var(--brand-100);
}

.primary-button:focus-visible,
.secondary-button:focus-visible {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

/* فوق صورة: أبيض شفّاف بضباب، لأن حدًّا رماديًّا يختفي على صورة. */
.secondary-button--on-photo {
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
}

.secondary-button--on-photo:hover {
    border-color: rgba(255, 255, 255, .85);
    color: var(--brand-700);
    background: rgba(255, 255, 255, .92);
}

.fld-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--brand-700);
    text-decoration: none;
    border-block-end: 1px solid transparent;
}

.fld-link:hover {
    border-block-end-color: var(--brand-700);
}

/* ══════════════════════════════════════════════════════════════════════════
   البنر: صور المتطوعين
   نفس بنر صفحة التسجيل، وبنفس المصدر — الصور تُقرأ من مجلدها لا من قائمة.
   ══════════════════════════════════════════════════════════════════════════ */
.fld-banner {
    position: relative;
    display: flex;
    /*
        Measured, not chosen: at 1440 the caption stack is badge 40 + heading 108 + lede 90 +
        buttons 56 + the padding that clears the figures card = 495px, and a 480px banner clipped
        the badge off its top edge by 15px. This is that stack plus headroom.
    */
    height: clamp(20rem, 44vw, 32rem);
    margin-block-start: 1rem;
    overflow: hidden;
    background: var(--ink);
}

/* الإطار الأول أوسع: صفٌّ من شرائح متطابقة يُقرأ نسيجًا لا صورة. */
.fld-banner__photo:first-child {
    flex-grow: 1.7;
    border-inline-start: 0;
}

.fld-banner__photo {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-inline-start: 2px solid var(--canvas);
}

.fld-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    /*
        دافئ لا رمادي: الصور كلها نهارٌ وسترات برتقالية، وحجابٌ رمادي فوقها يجعل
        صور الجمعية نفسها باهتة. وثِقلُه في الأسفل حيث النصّ، لا فوق الوجوه.
    */
    background: linear-gradient(180deg,
        rgba(36, 40, 36, .20) 0%,
        rgba(36, 40, 36, .12) 28%,
        rgba(26, 20, 16, .58) 70%,
        rgba(26, 20, 16, .86) 100%);
}

.fld-banner__inner {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 1;
    /* Clears the figures card, which rises 4rem into the banner — and no more than that, because
       every pixel here is a pixel the caption above does not get. */
    padding-block-end: clamp(4.25rem, 7vw, 5.5rem);
    color: #fff;
    /* النصّ فوق صورة، فظلّه من عنده — لا اعتمادًا على أن الحجاب سيكفي كل صورة
       يضيفها فارس إلى ذلك المجلد لاحقًا. */
    text-shadow: 0 1px 14px rgba(20, 15, 12, .6);
}

.fld-banner h1 {
    max-width: 22ch;
    margin-block-end: .7rem;
    font-size: clamp(1.9rem, 5vw, 3.4rem);
}

.fld-banner__lede {
    max-width: 46ch;
    font-size: clamp(1rem, 2.4vw, 1.2rem);
    line-height: 1.7;
}

.fld-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-block-start: 1.6rem;
}

/* شارة الفرص المفتوحة. */
.fld-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-block-end: 1rem;
    padding: .4rem 1rem;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
    font-size: .92rem;
}

.fld-badge__dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--brand-500);
    box-shadow: 0 0 0 0 rgba(241, 137, 39, .7);
    animation: fld-pulse 2.4s ease-out infinite;
}

@keyframes fld-pulse {
    70% { box-shadow: 0 0 0 .55rem rgba(241, 137, 39, 0); }
    100% { box-shadow: 0 0 0 0 rgba(241, 137, 39, 0); }
}

/* ── شريط الأرقام: بطاقة ترتفع فوق حافة البنر ────────────────────────────── */
.fld-figures {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    margin-block-start: clamp(-4rem, -7vw, -2.5rem);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.fld-figure {
    padding: clamp(1.1rem, 3vw, 1.7rem) clamp(1rem, 2.5vw, 1.6rem);
    /* فاصلٌ شعري واحد بين الخلايا؛ الأولى تُنظَّف حتى لا يظهر خطّ على الحافة. */
    border-inline-start: 1px solid var(--line);
}

.fld-figure:first-child {
    border-inline-start: 0;
}

.fld-figure b {
    display: block;
    color: var(--brand-700);
    font-weight: 400;
    font-size: clamp(1.5rem, 3.6vw, 2.1rem);
    line-height: 1.2;
    /* أرقامٌ بعرض واحد، فلا يتراقص الصفّ بين ٢٢٬٢٤٨ و١٬٥٨٨. */
    font-variant-numeric: tabular-nums;
}

.fld-figure span {
    display: block;
    margin-block-start: .15rem;
    color: var(--ink-500);
    font-size: .92rem;
}

.fld-figure--label b {
    color: var(--ink);
    font-size: 1.05rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   الأقسام
   ══════════════════════════════════════════════════════════════════════════ */
.fld-section {
    padding-block: clamp(3rem, 7vw, 5rem);
}

.fld-section--paper {
    background: var(--paper);
    border-block: 1px solid var(--line);
}

.fld-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-block-end: clamp(1.6rem, 4vw, 2.5rem);
}

.fld-head h2 {
    font-size: clamp(1.5rem, 3.6vw, 2.2rem);
}

.fld-eyebrow {
    margin-block-end: .4rem;
    color: var(--brand-700);
    font-size: .92rem;
}

.fld-lede {
    max-width: 52ch;
    margin-block-start: .6rem;
    color: var(--ink-700);
    font-size: .98rem;
    line-height: 1.75;
}

/* ── بطاقات الفرص ────────────────────────────────────────────────────────── */
.fld-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: clamp(1rem, 2.5vw, 1.6rem);
}

.fld-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

.fld-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
}

.fld-card__photo {
    width: 100%;
    height: clamp(9rem, 22vw, 11rem);
    object-fit: cover;
}

.fld-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.25rem 1.35rem 1.35rem;
}

.fld-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-block-end: .7rem;
}

.fld-tag {
    padding: .25rem .7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-700);
    background: var(--canvas);
    font-size: .8rem;
}

.fld-tag--brand {
    border-color: var(--brand-200);
    color: var(--brand-700);
    background: var(--brand-100);
}

.fld-card h3 {
    font-size: 1.15rem;
}

.fld-card__desc {
    margin-block-start: .5rem;
    color: var(--ink-700);
    font-size: .94rem;
    line-height: 1.7;
}

/* المقاعد: شريطٌ ممتلئ عادي — مقروء ومألوف ولا يحتاج شرحًا. */
.fld-meter {
    margin-block: 1rem .35rem;
    height: .4rem;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}

.fld-meter span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-700), var(--brand-500));
}

.fld-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-block-start: auto;
    padding-block-start: 1rem;
}

.fld-card__seats {
    color: var(--ink-500);
    font-size: .88rem;
}

/* ── السجل السنوي ────────────────────────────────────────────────────────── */
.fld-years {
    display: grid;
    gap: 1rem;
}

.fld-year {
    display: grid;
    grid-template-columns: minmax(5rem, auto) 1fr;
    align-items: center;
    gap: 1rem clamp(1rem, 3vw, 2rem);
    padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1.2rem, 3vw, 1.8rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow);
}

/* أحدث سنة أوّلًا، وهي وحدها الملوّنة — الترتيب وحده لا يقول أيّها الأحدث. */
.fld-year--latest {
    border-color: var(--brand-200);
    background: linear-gradient(180deg, var(--brand-100) 0%, var(--paper) 100%);
}

.fld-year__no {
    color: var(--ink-500);
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-variant-numeric: tabular-nums;
}

.fld-year--latest .fld-year__no {
    color: var(--brand-700);
}

.fld-year__figs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: .9rem 1.4rem;
    margin: 0;
}

.fld-year__figs div {
    min-width: 0;
}

.fld-year__figs dt {
    color: var(--ink-500);
    font-size: .85rem;
}

.fld-year__figs dd {
    margin: 0;
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
}

.fld-year__rate {
    grid-column: 2;
    color: var(--ink-500);
    font-size: .88rem;
}

.fld-year__rate b {
    color: var(--brand-700);
    font-weight: 400;
}

/* ── الأكثر مشاركة ───────────────────────────────────────────────────────── */
.fld-podium {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1rem;
}

.fld-rank {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: .3rem .9rem;
    padding: 1.2rem 1.35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow);
}

.fld-rank__no {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--canvas);
    color: var(--ink-500);
    font-variant-numeric: tabular-nums;
}

.fld-rank--first .fld-rank__no {
    border-color: var(--brand-600);
    background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
    color: #fff;
}

.fld-rank h3 {
    font-size: 1.05rem;
}

.fld-rank__hours {
    color: var(--brand-700);
    font-size: .95rem;
}

.fld-rank__note {
    grid-column: 2;
    margin-block-start: .35rem;
    color: var(--ink-500);
    font-size: .85rem;
    line-height: 1.6;
}

/* منتقي الشهر. */
.fld-monthpick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}

.fld-monthpick label {
    color: var(--ink-500);
    font-size: .9rem;
}

.fld-monthpick select {
    min-height: 2.9rem;
    padding: .5rem .9rem;
    border: 1px solid var(--line);
    border-radius: .7rem;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: .95rem;
}

.fld-monthpick select:focus {
    outline: 0;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(241, 137, 39, .22);
}

/* ── الدعوة إلى التسجيل ──────────────────────────────────────────────────── */
.fld-cta {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(1.6rem, 4vw, 2.75rem);
    border: 1px solid var(--brand-200);
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--brand-100) 0%, var(--paper) 70%);
    box-shadow: var(--shadow);
}

.fld-cta h2 {
    font-size: clamp(1.4rem, 3.4vw, 2rem);
}

.fld-cta p {
    max-width: 46ch;
    margin-block-start: .6rem;
    color: var(--ink-700);
    line-height: 1.75;
}

.fld-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-end;
}

/* ── حالات فارغة ورسائل ──────────────────────────────────────────────────── */
.fld-empty {
    padding: clamp(1.4rem, 4vw, 2.2rem);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink-500);
    text-align: center;
}

.fld-message {
    margin-block: 1rem 0;
    padding: .95rem 1.15rem;
    border: 1px solid var(--brand-200);
    border-radius: var(--radius-sm);
    background: var(--brand-100);
    color: var(--brand-700);
}

/*
    حقل المصيدة، مخفيّ.

    **لا إزاحة سالبة كبيرة أبدًا.** `left: -9999px` جُرّبت مرّة، وفي صفحة عربية
    الفائض إلى اليسار هو الاتجاه القابل للتمرير — فصار عرض كل صفحة في المنصة
    ١١٬٢٢٤px، وأمكن سحب الموقع عشرة آلاف بكسل جانبًا، ولم تنجح له لقطة شاشة.
    الإخفاء هنا `clip-path: inset(50%)` ولا شيء غيره.
*/
.fld-hp {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── صفحة «تم التسجيل» ───────────────────────────────────────────────────── */
.fld-done {
    padding-block: clamp(3rem, 8vw, 5.5rem);
}

.fld-done__card {
    max-width: 34rem;
    margin-inline: auto;
    padding: clamp(1.8rem, 5vw, 3rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow);
    text-align: center;
}

.fld-done__seal {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.2rem;
    border: 1px solid var(--success);
    border-radius: 50%;
    background: var(--success-bg);
}

.fld-done__seal svg {
    width: 1.75rem;
    height: 1.75rem;
    fill: none;
    stroke: var(--success);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fld-done h1 {
    font-size: clamp(1.5rem, 4vw, 2.1rem);
}

.fld-done__card > p {
    margin-block-start: .7rem;
    color: var(--ink-700);
    line-height: 1.75;
}

.fld-done__no {
    margin-block: 1.6rem;
    padding: 1.2rem;
    border: 1px solid var(--brand-200);
    border-radius: var(--radius-sm);
    background: var(--brand-100);
}

.fld-done__no span {
    display: block;
    color: var(--ink-500);
    font-size: .88rem;
}

.fld-done__no strong {
    display: block;
    margin-block: .3rem;
    color: var(--brand-700);
    font-weight: 400;
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    font-variant-numeric: tabular-nums;
    /* رقمٌ لاتيني داخل صفحة عربية: يُقرأ من اليسار. */
    direction: ltr;
    unicode-bidi: isolate;
}

.fld-done__no small {
    color: var(--ink-500);
    font-size: .85rem;
}

.fld-done__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

/* ── التذييل ─────────────────────────────────────────────────────────────── */
.fld-footer {
    margin-block-start: clamp(2rem, 5vw, 3.5rem);
    padding-block: 1.75rem;
    border-block-start: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink-500);
    font-size: .9rem;
}

.fld-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.5rem;
    justify-content: space-between;
}

/* نصف الروابط — صارا رابطين منذ نزل «دخول المنسّق» من الشريط على الجوال. */
.fld-footer__inner > span:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.35rem;
}

.fld-footer a {
    color: var(--brand-700);
    text-decoration: none;
}

.fld-footer a:hover {
    text-decoration: underline;
    text-underline-offset: .25em;
}

/* ══════════════════════════════════════════════════════════════════════════
   المقاسات
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
    .fld-cta {
        grid-template-columns: 1fr;
    }

    .fld-cta__actions {
        justify-content: flex-start;
    }

    .fld-year {
        grid-template-columns: 1fr;
    }

    .fld-year__rate {
        grid-column: 1;
    }
}

@media (max-width: 640px) {
    /*
        صورة واحدة على الجوال: خمسة إطارات عبر ٣٧٥px هي خمس شظايا بعرض ٧٠px،
        وصورةٌ لا يُميَّز فيها شيء زينةٌ تتظاهر بأنها محتوى.
    */
    .fld-banner__photo:not(:first-child) {
        display: none;
    }

    .fld-banner {
        height: clamp(17rem, 60vw, 22rem);
    }

    .fld-figures {
        grid-template-columns: 1fr 1fr;
        margin-block-start: -1.5rem;
    }

    .fld-figure--label {
        grid-column: 1 / -1;
        border-inline-start: 0;
        border-block-end: 1px solid var(--line);
    }

    .fld-figure:nth-child(2n) {
        border-inline-start: 0;
    }
}

@media (max-width: 560px) {
    /*
        عند ٣٧٥px لم يكن الشريط يكفي لثلاثة عناصر.

        Measured: logo 120 + gap 14 + «منصة التطوع» 85 + two buttons 193 +
        padding 22 = 434 in a 385px bar. The name wrapped to two lines, the bar
        grew to 76px, and the row still overflowed the document by 26px — which
        in an RTL page is the *scrollable* direction, the same class of bug as
        the honeypot's `left: -9999px`. So «دخول المنسّق» goes to the footer,
        where the one person who needs it can still reach it, and the other
        three stay. That leaves 316 in 385.
    */
    .topbar {
        width: calc(100% - 1rem);
        top: .35rem;
        min-height: 0;
        margin-top: .35rem;
        padding: .55rem .7rem;
        gap: .5rem;
    }

    .topbar__brand small {
        display: none;
    }

    .topbar__brand strong {
        white-space: nowrap;
    }

    .topbar__login {
        display: none;
    }

    .brand-logo--topbar {
        width: 6.25rem;
    }

    .topbar__actions {
        gap: .5rem;
    }

    .primary-button,
    .secondary-button {
        min-height: 2.8rem;
        padding: .55rem .9rem;
        font-size: .9rem;
    }

    .fld-banner__actions .primary-button,
    .fld-banner__actions .secondary-button {
        flex: 1 1 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fld-badge__dot {
        animation: none;
    }

    .fld-card,
    .primary-button,
    .secondary-button {
        transition: none;
    }

    .fld-card:hover,
    .primary-button:hover {
        transform: none;
    }
}