/* ================================================================
   PAGES / public.css — «برونز اليرموك» public school website
   ----------------------------------------------------------------
   Loaded after identity.css in _SiteLayout. Styles the public
   header/footer and the homepage sections. Token-driven, RTL.
   ================================================================ */

/* Neutralize admin shell chrome (layout.css pads body for fixed admin header) */
body.site-body {
    padding-top: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--color-bg-page);
    background-image: var(--paper-grain);
    background-attachment: fixed;
    color: var(--color-text-primary);
}
body.site-body > main { flex: 1 0 auto; }

.skip-link {
    position: absolute; inset-inline-start: -9999px; top: 0;
    background: var(--brand-bronze-700); color: #fff; padding: 8px 14px;
    border-radius: 0 0 var(--radius-md) var(--radius-md); z-index: 9999;
}
.skip-link:focus { inset-inline-start: 8px; }

/* ── Container ───────────────────────────────────────── */
.site-wrap,
.site-header-inner,
.site-footer-inner {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--spacing-5);
}

/* ================================================================
   HEADER
   ================================================================ */
/* ارتفاعُ الرأسِ متغيّرٌ (74 ثمَّ 64 تحتَ 420px) والرأسُ sticky أي أنَّ لهُ مكانًا في التدفّق،
   فكلُّ حسابٍ لشاشةٍ كاملةٍ يخصمُهُ — لذا رقمٌ واحدٌ في متغيّرٍ لا مرّةً في كلِّ قاعدة. */
:root { --site-header-h: 74px; }
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: rgba(255, 253, 248, 0.88);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--color-border-subtle);
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.site-header.scrolled {
    box-shadow: var(--shadow-md);
    border-bottom-color: var(--color-border-default);
}
.site-header-inner {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    height: var(--site-header-h);
}

.site-brand { display: flex; align-items: center; gap: var(--spacing-3); text-decoration: none; flex-shrink: 0; }
.site-brand-mark {
    width: 46px; height: 46px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, #241D15, #14100B);
    box-shadow: inset 0 0 0 1px rgba(214, 162, 73, 0.4);
}
.site-brand-mark img { width: 34px; height: 34px; object-fit: contain; }
.site-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.site-brand-name { font-size: var(--font-size-lg); font-weight: var(--font-weight-black); color: var(--brand-ink); }
.site-brand-sub { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--brand-bronze-700); letter-spacing: .04em; }

.site-nav { margin-inline-start: auto; }
.site-nav ul { display: flex; align-items: center; gap: var(--spacing-1); list-style: none; margin: 0; padding: 0; }
.site-nav a {
    display: inline-flex; align-items: center; gap: var(--spacing-2);
    height: 40px; padding: 0 var(--spacing-3);
    white-space: nowrap; /* بلا هذا السطر يلفّ أي بند فيصير أطول من جيرانه ويكسر استقامة الصف */
    color: var(--color-text-secondary); text-decoration: none;
    font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md); position: relative;
    transition: color var(--transition-fast), background var(--transition-fast);
}
.site-nav a:hover { color: var(--brand-bronze-700); background: var(--color-accent-light); }
.site-nav a.is-active { color: var(--brand-bronze-700); }
.site-nav a.is-active::after {
    content: ""; position: absolute; inset-inline: var(--spacing-3); bottom: 6px; height: 2px;
    background: var(--gold-fill); border-radius: 2px;
}

/* «برنامج حصيل» بندٌ عادي مثل إخوته: تميُّزه كان يجعله جسمًا غريبًا في الصف.
   الكلاس باقٍ فقط ليطابق `is-active` صفحات البوابة الأربع. */

/* حساب واحد بدل زرّين كانا أطول من القائمة نفسها وأعرض */
.site-account { position: relative; }
.site-account-btn {
    display: inline-flex; align-items: center; gap: var(--spacing-2);
    height: 40px; padding: 0 var(--spacing-2) 0 var(--spacing-3);
    border: 1px solid var(--color-border-default); border-radius: var(--radius-pill);
    background: var(--color-bg-elevated); color: var(--brand-bronze-700);
    font-size: var(--font-size-sm); font-weight: var(--font-weight-bold);
    cursor: pointer; list-style: none; user-select: none;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.site-account-btn::-webkit-details-marker { display: none; }
.site-account-btn:hover { border-color: var(--brand-gold-500); background: var(--color-accent-light); }
.site-account-avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bronze-fill); color: #FFF7E8; font-size: 11px; flex-shrink: 0; }
.site-account-name { max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-account-caret { font-size: 10px; opacity: .65; transition: transform var(--transition-fast); }
.site-account[open] .site-account-caret { transform: rotate(180deg); }
.site-account-menu {
    position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: calc(var(--z-sticky) + 2);
    min-width: 210px; padding: var(--spacing-2);
    background: var(--color-bg-elevated); border: 1px solid var(--color-border-default);
    border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl);
}
.site-account-mail { display: block; padding: 6px var(--spacing-3) 8px; font-size: var(--font-size-xs); color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-account-sep { height: 1px; margin: var(--spacing-2) 0; background: var(--color-border-subtle); }
.site-account-menu a, .site-account-menu button {
    display: flex; align-items: center; gap: var(--spacing-3); width: 100%;
    padding: 10px var(--spacing-3); border: 0; background: none; cursor: pointer;
    border-radius: var(--radius-md); text-decoration: none; text-align: start;
    color: var(--color-text-primary); font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold); font-family: inherit;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.site-account-menu a:hover, .site-account-menu button:hover { background: var(--color-accent-light); color: var(--brand-bronze-700); }
.site-account-menu i { width: 16px; text-align: center; color: var(--brand-bronze-700); }

.site-header-actions { display: flex; align-items: center; gap: var(--spacing-2); flex-shrink: 0; }
/* أزرار الهيدر (تسجيل الدخول للمجهول، لوحة التحكم/الخروج قديمًا) تجلس في صف روابط النيف بار
   نفسه، فمواءمة الارتفاع على 40px تمنع القرص الأطول من إخوته. لا padding-block مع ارتفاع ثابت. */
.site-header-actions .site-btn { height: 40px; padding-inline: var(--spacing-4); font-size: var(--font-size-sm); justify-content: center; }

.site-btn {
    display: inline-flex; align-items: center; gap: var(--spacing-2);
    padding: 10px 18px; border-radius: var(--radius-pill);
    font-size: var(--font-size-base); font-weight: var(--font-weight-bold);
    text-decoration: none; cursor: pointer; border: 1px solid transparent;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}
.site-btn-solid { background: var(--bronze-fill); color: #FFF7E8; border-color: var(--brand-bronze-900); box-shadow: 0 2px 10px rgba(156,111,46,.28); }
.site-btn-solid:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 6px 18px rgba(156,111,46,.36); }
.site-btn-ghost { background: transparent; color: var(--brand-bronze-800, #866E2C); border-color: var(--brand-bronze-700); }
.site-btn-ghost:hover { background: var(--color-accent-light); }
.site-btn-light { background: #FFF7E8; color: #241C10; }
.site-btn-light:hover { filter: brightness(.97); }

.site-nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-surface); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.site-nav-toggle span { display: block; width: 18px; height: 2px; background: var(--brand-bronze-700); border-radius: 2px; transition: transform var(--transition-fast), opacity var(--transition-fast); }

.site-brand { min-width: 0; }
.site-brand-name { white-space: nowrap; }
.site-nav-toggle { transition: background var(--transition-fast), border-color var(--transition-fast); }
.site-nav-toggle.is-open { background: var(--color-accent-light); border-color: var(--brand-gold-500); }
@media (max-width: 420px) {
    :root { --site-header-h: 64px; }
    .site-header-inner { gap: var(--spacing-2); }
    .site-header-inner, .site-footer-inner { padding-inline: var(--spacing-4); }
    .site-brand-mark { width: 38px; height: 38px; }
    .site-brand-mark img { width: 28px; height: 28px; }
    .site-brand-name { font-size: var(--font-size-base); }
    .site-header-actions .site-btn { padding: 8px 12px; font-size: var(--font-size-sm); }
    .site-nav { top: 72px; }
}

/* ================================================================
   HERO
   ================================================================ */
.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(700px 420px at 88% -8%, rgba(214,162,73,.18), transparent 60%),
        radial-gradient(620px 420px at 8% 120%, rgba(156,111,46,.22), transparent 55%),
        linear-gradient(160deg, #241D15 0%, #14100B 100%);
    color: #F3E9D6;
    display: flex;
    flex-direction: column;
    min-height: 75vh;
}
.hero::before {
    content: ""; position: absolute; inset: 0;
    background-image: repeating-linear-gradient(135deg, rgba(214,162,73,.05) 0 1px, transparent 1px 22px);
    pointer-events: none;
}
.hero-inner { position: relative; flex: 1 1 auto; max-width: 1180px; margin-inline: auto; padding: clamp(56px, 9vw, 120px) var(--spacing-5); display: grid; grid-template-columns: 1.3fr .7fr; gap: var(--spacing-8); align-items: center; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: var(--spacing-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--brand-gold-300); letter-spacing: .08em; margin-bottom: var(--spacing-4); }
.hero-eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--gold-fill); }
.hero-title { margin: 0 0 var(--spacing-4); font-size: clamp(2rem, 5vw, 3.4rem); font-weight: var(--font-weight-black); line-height: 1.15; color: #FBF4E6; }
.hero-title .accent { color: var(--brand-gold-300); }
.hero-sub { margin: 0 0 var(--spacing-8); font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.9; color: rgba(243,233,214,.82); max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-3); }
.hero-emblem { justify-self: center; width: min(300px, 60vw); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(214,162,73,.16), transparent 70%); box-shadow: inset 0 0 0 1px rgba(214,162,73,.3); }
.hero-emblem img { width: 68%; height: 68%; object-fit: contain; filter: drop-shadow(0 8px 24px rgba(0,0,0,.4)); }

/* Hero slider */
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }
.hero-slide.is-active img { animation: hero-kenburns 7.2s ease-out both; }
@keyframes hero-kenburns { from { transform: scale(1.1); } to { transform: scale(1); } }
.hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to left, rgba(14,11,8,.92) 0%, rgba(14,11,8,.62) 52%, rgba(14,11,8,.34) 100%); }
.hero::before { z-index: 2; }
.hero-inner { z-index: 3; }
.hero-controls { position: relative; z-index: 4; margin-top: auto; max-width: 1180px; margin-inline: auto; padding: 0 var(--spacing-5) var(--spacing-6); display: flex; align-items: center; justify-content: center; gap: var(--spacing-4); }
.hero-nav { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(214,162,73,.45); background: rgba(20,16,11,.45); color: #EAD9B8; cursor: pointer; display: grid; place-items: center; transition: background var(--transition-fast), color var(--transition-fast); backdrop-filter: blur(4px); }
.hero-nav:hover { background: var(--brand-bronze-700); color: #FFF7E8; }
.hero-dots { display: flex; align-items: center; gap: 8px; }
.hero-dot { width: 9px; height: 9px; border-radius: 999px; border: 0; padding: 0; background: rgba(243,233,214,.35); cursor: pointer; transition: width var(--transition-base), background var(--transition-base); }
.hero-dot.is-active { width: 26px; background: var(--brand-gold-300); }

/* الحزمةُ الأولى من الصفحة الرئيسية: ارتفاعُ الصورةِ كان ثابتًا (75vh) فتتدلّى البطاقاتُ تحت
   الشاشةِ الأولى وتقعدُ نقاطُ السلايدر في وسطِ الصورة. هنا العمودُ المرنُ يأخذُ ما بقيَ من
   الشاشةِ بعدَ البطاقاتِ نفسها — بلا مقاسٍ ثابتٍ لارتفاعِها لأنَّهُ يتغيّرُ عند كلِّ تحويلة.
   الطيُّ فوقَ 1100px فقط: تحتَها تصيرُ البطاقاتُ ثلاثةَ صفوفَ فتملأُ الشاشةَ على حسابِ الصورة. */
@media (min-width: 1101px) {
    .home-fold {
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - var(--site-header-h));
        min-height: calc(100svh - var(--site-header-h));
    }
    .home-fold .hero { flex: 1 1 auto; min-height: 420px; }
    .home-fold .quickbar { flex: 0 0 auto; }
}

/* تحتَ هذا العرضِ البطاقاتُ صفّانِ أو ثلاثة، فطيُّ الشاشةِ الواحدةِ يضغطُ الصورةَ إلى شريطٍ
   لا يُرى فيه شيء. هناك تُتركُ الصورةُ شاشةً كاملةً وحدَها، وتبدأُ البطاقاتُ من شاشةٍ تاليةٍ
   نظيفةٍ بدلَ أن تقفزَ من منتصفِها. */
@media (max-width: 1100px) {
    .hero {
        min-height: calc(100vh - var(--site-header-h));
        min-height: calc(100svh - var(--site-header-h));
    }
}

/* النقاطُ تُبنى واحدةً لكلِّ شريحةٍ بلا سقفٍ (public.js)، فمعَ شرائحَ كثيرةٍ يتجاوزُ صفُّها
   عرضَ الهاتف، و«hero» يقصُّ طَرَفَيهِ بـoverflow: hidden — أي أنَّ زرَّ «التالي» يصبحُ
   غيرُ قابلٍ للّمس. هنا ينكمشُ الصفُّ ويلتفُّ بدلَ أن يُبتلع. */
@media (max-width: 760px) {
    .hero-controls { gap: var(--spacing-2); padding-inline: var(--spacing-4); }
    .hero-nav { width: 36px; height: 36px; flex: 0 0 auto; }
    .hero-dots { flex-wrap: wrap; justify-content: center; min-width: 0; row-gap: 6px; }
    .hero-dot { width: 7px; height: 7px; }
    .hero-dot.is-active { width: 20px; }
}

/* ================================================================
   SECTIONS
   ================================================================ */
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section > .site-wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--spacing-5); }
.section-alt { background: var(--color-bg-surface); border-block: 1px solid var(--color-border-subtle); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto var(--spacing-10); }
.section-label { display: inline-block; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--brand-bronze-700); letter-spacing: .06em; margin-bottom: var(--spacing-3); }
.section-title { margin: 0 0 var(--spacing-3); font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: var(--font-weight-black); color: var(--brand-ink); }
.section-title::after { content: ""; display: block; width: 60px; height: 3px; border-radius: 3px; background: var(--gold-fill); margin: var(--spacing-4) auto 0; }
.section-desc { margin: 0; color: var(--text-secondary); line-height: 1.9; }

/* About */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-10); align-items: center; }
.about-text p { color: var(--text-secondary); line-height: 2; margin: 0 0 var(--spacing-4); }
.about-points { list-style: none; margin: var(--spacing-6) 0 0; padding: 0; display: grid; gap: var(--spacing-3); }
.about-points li { display: flex; align-items: flex-start; gap: var(--spacing-3); color: var(--text-primary); font-weight: var(--font-weight-semibold); }
.about-points i { color: var(--brand-bronze-700); margin-top: 3px; }
.about-visual { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-2xl); overflow: hidden; background: linear-gradient(160deg, #241D15, #14100B); box-shadow: var(--shadow-xl); display: grid; place-items: center; }
.about-visual::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(214,162,73,.35); border-radius: var(--radius-xl); }
.about-visual img { width: 46%; object-fit: contain; filter: drop-shadow(0 10px 26px rgba(0,0,0,.45)); z-index: 1; }
.about-visual img.about-photo { width: 100%; height: 100%; object-fit: cover; filter: none; position: absolute; inset: 0; z-index: 0; }
.about-visual-caption { position: absolute; inset-inline: 26px; inset-block-end: 26px; z-index: 2; padding: 6px 14px; border-radius: var(--radius-md); background: rgba(14,11,8,.74); color: #EAD9B8; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); backdrop-filter: blur(4px); }

/* Gallery */
/* — شبكة عامة: الصف الأخير الناقص يتوسّط عناصره تلقائيًا (الأعمدة عبر --cols والمسافة عبر --grid-gap) — */
.gallery-grid, .services-grid, .contact-grid, .team-grid, .news-grid, .video-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--grid-gap, var(--spacing-4)); }
.gallery-grid > *, .services-grid > *, .contact-grid > *, .team-grid > *, .news-grid > *, .video-grid > * { flex: 0 1 calc((100% - (var(--cols, 4) - 1) * var(--grid-gap, var(--spacing-4))) / var(--cols, 4)); min-width: 0; }
.gallery-item { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; cursor: zoom-in; aspect-ratio: 4/3; background: #14100B; box-shadow: var(--shadow-sm); transition: transform var(--transition-base), box-shadow var(--transition-base); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-slow); }
.gallery-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item figcaption { position: absolute; inset-inline: 0; inset-block-end: 0; padding: var(--spacing-6) var(--spacing-3) var(--spacing-3); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: #F3E9D6; background: linear-gradient(to top, rgba(14,11,8,.9), transparent); opacity: 0; transform: translateY(8px); transition: opacity var(--transition-base), transform var(--transition-base); }
.gallery-item:hover figcaption, .gallery-item:focus-visible figcaption { opacity: 1; transform: none; }
.gallery-item figcaption i { color: var(--brand-gold-300); margin-inline-end: 6px; }

/* Lightbox */
body.lightbox-open { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 999; background: rgba(10,8,6,.92); display: grid; place-items: center; backdrop-filter: blur(6px); animation: lightbox-in .25s ease; }
.lightbox[hidden] { display: none; }
.lightbox-figure { margin: 0; max-width: min(1100px, 92vw); display: flex; flex-direction: column; align-items: center; gap: var(--spacing-3); }
.lightbox-figure img { max-width: 100%; max-height: 74vh; object-fit: contain; border-radius: var(--radius-lg); box-shadow: 0 24px 80px rgba(0,0,0,.6); border: 1px solid rgba(214,162,73,.35); }
.lightbox-figure figcaption { color: #EAD9B8; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); text-align: center; }
.lightbox-close { position: absolute; top: 18px; inset-inline-end: 22px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(214,162,73,.4); background: rgba(20,16,11,.6); color: #F3E9D6; font-size: 1.1rem; cursor: pointer; transition: background var(--transition-fast); }
.lightbox-close:hover { background: var(--brand-bronze-700); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(214,162,73,.4); background: rgba(20,16,11,.6); color: #F3E9D6; cursor: pointer; display: grid; place-items: center; transition: background var(--transition-fast); }
.lightbox-nav:hover { background: var(--brand-bronze-700); }
.lightbox-prev { inset-inline-start: 22px; }
.lightbox-next { inset-inline-end: 22px; }
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }

/* Quickbar — صف الدخول السريع تحت السلايدر (مكان «support-area» في القديم) */
.quickbar { background: var(--color-bg-surface); border-block: 1px solid var(--color-border-subtle); padding: var(--spacing-8) 0; }
.quickbar > .site-wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--spacing-5); }
.quickbar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--spacing-4); }
.quick-tile {
    position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 4px; padding: var(--spacing-6) var(--spacing-4);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-default); border-radius: var(--radius-xl);
    text-decoration: none; color: var(--brand-ink);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.quick-tile::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--gold-fill); transform: scaleX(0); transition: transform var(--transition-base); }
.quick-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--brand-gold-500); }
.quick-tile:hover::before { transform: scaleX(1); }
.quick-icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 1.15rem; background: var(--color-accent-light); color: var(--brand-bronze-700); margin-bottom: var(--spacing-2); }
.quick-label { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); line-height: 1.5; }
.quick-sub { font-size: var(--font-size-xs); color: var(--color-text-secondary); line-height: 1.6; }
.quick-tile.is-key { background: linear-gradient(160deg, #241D15, #14100B); border-color: rgba(214,162,73,.45); color: #FBF4E6; }
.quick-tile.is-key .quick-icon { background: rgba(214,162,73,.2); color: var(--brand-gold-300); }
.quick-tile.is-key .quick-sub { color: rgba(243,233,214,.72); }
.quick-tile.is-key:hover { box-shadow: 0 10px 26px rgba(20,16,11,.3); }
/* ستةٌ كانت تقبل القسمةَ على 6/3/2/1 فلا تتيتّمُ بطاقة. السابعُ (المجلة) عددٌ أوّليٌّ لا يقبلُ
   شيئًا من ذلك، فالصفُّ العلُّ سبعةُ أعمدةٍ صريحةٍ عند عرضٍ ثابتٍ معروف، وتحتَهُ يملأُ auto-fit
   كلَّ سطرٍ ببطاقاتِه فلا يبقى فراغٌ في آخرِهِ ولا تقعدُ بطاقةٌ وحدها في صفّ. */
@media (min-width: 1101px) {
    .quickbar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .quick-tile { padding-inline: var(--spacing-3); }
}
@media (max-width: 480px) { .quickbar-grid { grid-template-columns: 1fr; } }
@media print { .quickbar { display: none; } }

/* Services */
.services-grid { --cols: 3; --grid-gap: var(--spacing-5); }
.service-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-xl);
    padding: var(--spacing-8) var(--spacing-6);
    text-decoration: none; color: inherit; display: block; position: relative; overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.service-card::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--gold-fill); transform: scaleX(0); transform-origin: center; transition: transform var(--transition-base); }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: var(--brand-gold-500); }
.service-card:hover::before { transform: scaleX(1); }
.service-icon { width: 56px; height: 56px; border-radius: var(--radius-lg); display: grid; place-items: center; font-size: 1.5rem; background: var(--color-accent-light); color: var(--brand-bronze-700); margin-bottom: var(--spacing-5); }
.service-title { margin: 0 0 var(--spacing-2); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--brand-ink); }
.service-desc { margin: 0; color: var(--text-muted); line-height: 1.8; font-size: var(--font-size-base); }
.service-card.is-soon { opacity: .72; }
.service-soon { position: absolute; top: var(--spacing-4); inset-inline-end: var(--spacing-4); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--text-muted); background: var(--bg-soft-gray); padding: 2px 10px; border-radius: var(--radius-pill); }

/* Stats band */
.stats { background: linear-gradient(160deg, #241D15, #14100B); color: #F3E9D6; position: relative; overflow: hidden; }
.stats::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(214,162,73,.05) 0 1px, transparent 1px 22px); }
.stats-grid { position: relative; max-width: 1180px; margin-inline: auto; padding: clamp(40px, 6vw, 72px) var(--spacing-5); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-6); text-align: center; }
.stat-num { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: var(--font-weight-black); color: var(--brand-gold-300); line-height: 1; }
.stat-label { margin-top: var(--spacing-3); font-size: var(--font-size-base); color: rgba(243,233,214,.8); font-weight: var(--font-weight-semibold); }

/* Hassel CTA band */
.cta-band { max-width: 1180px; margin-inline: auto; padding-inline: var(--spacing-5); }
.cta-inner {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-6); flex-wrap: wrap;
    padding: clamp(28px, 5vw, 48px) clamp(24px, 5vw, 56px);
    border-radius: var(--radius-2xl);
    background: linear-gradient(120deg, #B6953E 0%, #9C6F2E 55%, #866E2C 100%);
    color: #FFF7E8; box-shadow: var(--shadow-xl);
}
.cta-inner::after { content: ""; position: absolute; inset-block: -40%; inset-inline-end: -6%; width: 280px; background: radial-gradient(circle, rgba(255,247,232,.22), transparent 62%); }
.cta-text { position: relative; }
.cta-text h3 { margin: 0 0 var(--spacing-2); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: var(--font-weight-black); }
.cta-text p { margin: 0; opacity: .92; line-height: 1.8; max-width: 52ch; }

/* Contact strip */
.contact-grid { --cols: 3; --grid-gap: var(--spacing-5); }
.contact-card { background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); padding: var(--spacing-6); text-align: center; }
.contact-card i { font-size: 1.6rem; color: var(--brand-bronze-700); margin-bottom: var(--spacing-3); }
.contact-card h4 { margin: 0 0 var(--spacing-2); font-size: var(--font-size-lg); color: var(--brand-ink); }
.contact-card a, .contact-card p { color: var(--text-secondary); text-decoration: none; word-break: break-word; }
.contact-card a:hover { color: var(--brand-bronze-700); }

/* ================================================================
   INNER PAGES (About)
   ================================================================ */
.page-banner {
    background: linear-gradient(160deg, #241D15, #14100B);
    color: #F3E9D6;
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid;
    border-image: var(--gold-fill) 1;
}
.page-banner::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(214,162,73,.06) 0 1px, transparent 1px 24px); }
.page-banner::after { content: ""; position: absolute; inset-block: -50%; inset-inline-start: -8%; width: 320px; background: radial-gradient(circle, rgba(214,162,73,.14), transparent 62%); }
.page-banner-inner {
    position: relative;
    max-width: 1180px; margin-inline: auto;
    padding: clamp(44px, 7vw, 76px) var(--spacing-5) clamp(36px, 6vw, 60px);
    text-align: center;
}
.page-banner-title { margin: 0 0 var(--spacing-3); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: var(--font-weight-black); color: var(--brand-gold-300); }
.page-banner-crumb { display: flex; justify-content: center; align-items: center; gap: var(--spacing-2); font-size: var(--font-size-sm); }
.page-banner-crumb a { color: #C8BCA6; text-decoration: none; }
.page-banner-crumb a:hover { color: var(--brand-gold-300); }
.page-banner-crumb span { color: #7C7159; }
.page-banner-crumb em { font-style: normal; color: #EDE4D3; font-weight: var(--font-weight-semibold); }

/* About prose */
.about-doc { max-width: 820px; margin: 0 auto var(--spacing-10); }
.about-doc .section-label { text-align: center; width: 100%; }
.about-doc .section-title { text-align: center; }
.about-doc p { color: var(--text-secondary); line-height: 2.1; font-size: var(--font-size-lg); margin: 0 0 var(--spacing-5); }
.about-doc p a { color: var(--brand-bronze-700); font-weight: var(--font-weight-semibold); }

/* Vision / Mission cards */
.vm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-6); max-width: 980px; margin-inline: auto; }
.vm-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-xl);
    padding: var(--spacing-8) var(--spacing-8);
    position: relative; overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.vm-card::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 0; width: 4px; background: var(--gold-fill); }
.vm-icon { width: 52px; height: 52px; border-radius: var(--radius-lg); display: grid; place-items: center; font-size: 1.35rem; background: var(--color-accent-light); color: var(--brand-bronze-700); margin-bottom: var(--spacing-5); }
.vm-card h3 { margin: 0 0 var(--spacing-3); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--brand-ink); }
.vm-card p, .vm-card li { color: var(--text-secondary); line-height: 2; margin: 0; }
.vm-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--spacing-3); }
.vm-card li { position: relative; padding-inline-start: var(--spacing-6); }
.vm-card li::before { content: ""; position: absolute; inset-inline-start: 0; top: .75em; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-gold-500); }

/* Admin team — general supervisor first */
.team-lead { text-align: center; max-width: 480px; margin: 0 auto clamp(40px, 6vw, 64px); position: relative; }
.team-lead::before {
    content: ""; position: absolute; top: 92px; inset-inline: 6%;
    height: 1px; background: linear-gradient(90deg, transparent, rgba(214,162,73,.45), transparent); z-index: 0;
}
.team-lead-photo {
    position: relative; z-index: 1;
    width: 190px; height: 190px; margin: 0 auto var(--spacing-5);
    border-radius: 50%; padding: 6px;
    background: var(--gold-fill);
    box-shadow: 0 0 0 10px rgba(214,162,73,.12), 0 18px 42px rgba(122,90,51,.35);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.team-lead:hover .team-lead-photo { transform: translateY(-5px); box-shadow: 0 0 0 14px rgba(214,162,73,.18), 0 24px 52px rgba(122,90,51,.4); }
.team-lead-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; border: 4px solid var(--color-bg-surface); }
.team-lead-name {
    margin: 0 0 var(--spacing-2);
    font-size: clamp(1.3rem, 2.6vw, 1.65rem); font-weight: var(--font-weight-black);
    background: linear-gradient(120deg, #8A6423, #B6953E 45%, #D6A249 60%, #8A6423);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.team-lead-role { display: flex; align-items: center; justify-content: center; gap: var(--spacing-3); margin: 0; color: var(--text-secondary); font-weight: var(--font-weight-semibold); }
.team-lead-role span { width: 34px; height: 2px; background: var(--gold-fill); border-radius: 2px; }

.team-grid { --cols: 4; --grid-gap: var(--spacing-7); max-width: 1080px; margin-inline: auto; }
.team-card { text-align: center; }
.team-photo {
    width: 150px; height: 150px; margin: 0 auto var(--spacing-5);
    border-radius: 50%; overflow: hidden;
    border: 3px solid var(--brand-gold-500);
    box-shadow: 0 0 0 6px rgba(214,162,73,.14), var(--shadow-md);
    background: var(--color-bg-surface);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.team-card:hover .team-photo { transform: translateY(-4px); box-shadow: 0 0 0 8px rgba(214,162,73,.2), var(--shadow-lg); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-name { margin: 0 0 var(--spacing-1); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--brand-ink); }
.team-role { margin: 0; font-size: var(--font-size-sm); color: var(--text-muted); }

/* Contact page */
.contact-rows { max-width: 1080px; display: grid; gap: clamp(36px, 6vw, 64px); }
.contact-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--spacing-7); align-items: center; }
.contact-address { color: var(--text-secondary); line-height: 2; font-size: var(--font-size-lg); }
.contact-address p { margin: 0 0 var(--spacing-3); }
.contact-address a { color: var(--brand-bronze-700); }
.contact-wa a { display: inline-flex; align-items: center; gap: var(--spacing-2); font-weight: var(--font-weight-bold); color: #1FA855; }
.contact-map { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-border-default); box-shadow: var(--shadow-lg); background: var(--color-bg-surface); padding: 6px; }
.contact-map iframe { width: 100%; height: 380px; border: 0; display: block; border-radius: var(--radius-lg); }

.contact-form { max-width: 860px; margin-inline: auto; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-2xl); padding: clamp(22px, 4vw, 42px); box-shadow: var(--shadow-lg); }
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-5); }
.cf-full { grid-column: 1 / -1; }
.cf-field label { display: block; margin-bottom: var(--spacing-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--brand-ink); }
.cf-field label b { color: var(--brand-bronze-700); }
.cf-field input, .cf-field select, .cf-field textarea {
    width: 100%; padding: 12px 14px;
    background: var(--color-bg-base);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus {
    outline: none; border-color: var(--brand-gold-500);
    box-shadow: 0 0 0 3px rgba(214,162,73,.18);
}
.cf-field textarea { resize: vertical; min-height: 120px; }
.cf-field small { display: block; margin-top: var(--spacing-2); font-size: var(--font-size-sm); color: var(--text-secondary, #8a7a5e); }
.cf-field input[type="file"] { padding: 10px 12px; background: var(--color-bg-surface); }
.cf-captcha { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-5); flex-wrap: wrap; }
.cf-captcha > div { flex: 1 1 200px; }
#img-captcha {
    height: 58px; width: 200px; border-radius: var(--radius-md);
    border: 1px solid var(--color-border-default); cursor: pointer;
    background: #FBF6EC;
}
.cf-submit { min-width: 140px; justify-content: center; padding-inline: var(--spacing-8); }
.cf-submit:disabled { opacity: .6; cursor: wait; }

/* — استمارة التسجيل الإلكترونية (دفعة D) — */
.reg-form { display: flex; flex-direction: column; gap: var(--spacing-6); }
.reg-card { margin: 0; padding: var(--spacing-6); background: var(--color-bg-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.reg-card legend { padding: 0 var(--spacing-3); font-size: var(--font-size-lg); font-weight: var(--font-weight-black); color: var(--brand-bronze-700); }
.reg-note { margin: 0 0 var(--spacing-4); padding: var(--spacing-3) var(--spacing-4); background: rgba(198,147,67,.08); border: 1px dashed var(--brand-gold-500); border-radius: var(--radius-md); font-size: var(--font-size-sm); color: var(--color-text-primary); }
.cf-grid-4 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-5); }
.reg-submit { align-self: flex-start; padding-inline: var(--spacing-8); }
.reg-submit:disabled { opacity: .6; cursor: wait; }

/* — صفحة القبول والتسجيل — */
.reg-consent { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-5); margin-top: var(--spacing-6); padding: var(--spacing-5) var(--spacing-6); background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); }
.reg-consent h3 { margin: 0; }
.reg-consent-check input { width: 34px; height: 34px; accent-color: var(--brand-gold-500); cursor: pointer; }
.reg-continue { text-align: center; margin-top: var(--spacing-6); }
.reg-docs-link { margin-top: var(--spacing-6); color: var(--color-text-primary); }
.reg-docs-link a { color: var(--brand-bronze-700); font-weight: var(--font-weight-bold); }

/* — جدول الوثائق المطلوبة — */
.docs-table { width: 100%; margin-top: var(--spacing-5); border-collapse: collapse; background: var(--color-bg-elevated); box-shadow: var(--shadow-sm); }
.docs-table th { padding: var(--spacing-3); background: linear-gradient(135deg, var(--brand-gold-500), var(--brand-bronze-700)); color: #1A1611; font-weight: var(--font-weight-bold); }
.docs-table td { padding: var(--spacing-3) var(--spacing-4); border: 1px solid var(--color-border-default); }
.docs-table .docs-num { width: 48px; text-align: center; background: var(--color-bg-light); font-weight: var(--font-weight-bold); color: var(--brand-bronze-700); }

/* Legal pages */
.legal-box {
    max-width: 860px; margin-inline: auto;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-2xl);
    padding: clamp(26px, 5vw, 48px);
    box-shadow: var(--shadow-lg);
    line-height: 2;
    color: var(--text-secondary);
}
.legal-box h2 { margin: 0 0 var(--spacing-2); font-size: var(--font-size-2xl); font-weight: var(--font-weight-black); color: var(--brand-ink); }
.legal-box h3 { margin: var(--spacing-6) 0 var(--spacing-3); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--brand-bronze-700); }
.legal-box h4 { margin: var(--spacing-6) 0 var(--spacing-2); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--brand-ink); }
.legal-box p { margin: 0 0 var(--spacing-4); }
.legal-box ul { margin: 0 0 var(--spacing-4); padding-inline-start: var(--spacing-7); display: grid; gap: var(--spacing-2); }
.legal-box a { color: var(--brand-bronze-700); font-weight: var(--font-weight-semibold); }
.legal-update { color: var(--text-muted); font-size: var(--font-size-sm); }
.legal-rule { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--brand-gold-500), transparent); margin-block: var(--spacing-8); }

/* Error page */
.err-box { max-width: 640px; margin-inline: auto; text-align: center; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-2xl); padding: clamp(32px, 6vw, 56px); box-shadow: var(--shadow-lg); }
.err-msg { color: var(--text-secondary); font-size: var(--font-size-lg); line-height: 1.9; margin: 0 0 var(--spacing-6); }
.err-actions { display: flex; justify-content: center; gap: var(--spacing-4); flex-wrap: wrap; }

/* ================================================================
   BATCH B — News / Activities / Videos / Infographic / Aword / Library
   ================================================================ */
.site-wrap-narrow { max-width: 900px; margin-inline: auto; }
.empty-note { text-align: center; color: var(--text-muted); padding-block: var(--spacing-8); }

/* Category tabs */
.cat-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-2); margin-bottom: var(--spacing-8); }
.cat-tab {
    padding: 8px 18px; border-radius: var(--radius-pill); text-decoration: none;
    border: 1px solid var(--color-border-default); background: var(--color-bg-surface);
    color: var(--text-secondary); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold);
    transition: all var(--transition-fast);
}
.cat-tab:hover { border-color: var(--brand-gold-500); color: var(--brand-bronze-700); }
.cat-tab.is-active { background: var(--gold-fill); border-color: transparent; color: #FFF7E8; box-shadow: var(--shadow-sm); }

/* News grid */
.news-grid { --cols: 3; --grid-gap: var(--spacing-5); }
.news-card {
    background: var(--color-bg-surface); border: 1px solid var(--color-border-default);
    border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: var(--brand-gold-500); }
.news-card-image { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; background: #14100B; }
.news-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-slow); }
.news-card:hover .news-card-image img { transform: scale(1.05); }
.news-date {
    position: absolute; inset-block-start: 12px; inset-inline-start: 12px;
    display: flex; flex-direction: column; align-items: center; line-height: 1;
    background: linear-gradient(150deg, #FBF6EC, #F0E2C4); color: var(--brand-bronze-700);
    border-radius: var(--radius-md); padding: 8px 12px; box-shadow: var(--shadow-md);
}
.news-date-day { font-size: var(--font-size-xl); font-weight: var(--font-weight-black); }
.news-date-month { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); margin-top: 2px; }
.news-card-body { padding: var(--spacing-5) var(--spacing-5) var(--spacing-6); display: flex; flex-direction: column; gap: var(--spacing-3); flex: 1; }
.news-card-body h3 { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--brand-ink); line-height: 1.6; }
.news-card-body h3 a { color: inherit; text-decoration: none; }
.news-card-body h3 a:hover { color: var(--brand-bronze-700); }
.news-card-body p { margin: 0; color: var(--text-muted); font-size: var(--font-size-sm); line-height: 1.9; }
.news-more { margin-top: auto; color: var(--brand-bronze-700); font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); text-decoration: none; }
.news-more i { transition: transform var(--transition-fast); }
.news-more:hover i { transform: translateX(-4px); }

/* Magazine gate: فرقعةٌ تحريريةٌ — بطلةٌ للباب ثم متوسطتان ثم قائمةٌ مضغوطة (§13-2/أ المحسوم
   شكليًا هنا، والقرارُ بصريٌّ لا مخطّطي: لا عمودَ حجم، الرتبةُ هي مصدرُ الحجم) */
.mag-mosaic { display: grid; grid-template-columns: 2fr 1fr; gap: var(--spacing-5); align-items: start; }
.mag-mosaic-solo { grid-template-columns: 1fr; }
.mag-side { display: flex; flex-direction: column; gap: var(--spacing-5); min-width: 0; }

.mag-hero { grid-template-columns: 1fr; }
.mag-hero .activity-card-image { aspect-ratio: 21/9; }
.mag-hero .activity-card-body { padding: var(--spacing-6); gap: var(--spacing-3); }
.mag-hero .activity-card-body > p:not(.activity-date) { font-size: var(--font-size-base); line-height: 2; }

.mag-lead .news-card-image { aspect-ratio: 16/9; }
.mag-lead .news-card-body { gap: var(--spacing-4); padding: var(--spacing-6); }
.mag-lead .news-card-body h3 { font-size: clamp(1.15rem, 2.4vw, 1.65rem); }
.mag-lead .news-card-body p { font-size: var(--font-size-base); }

.mag-mid .news-card-body { padding: var(--spacing-4) var(--spacing-5) var(--spacing-5); }
.mag-mid .news-card-body h3 { font-size: var(--font-size-base); }

.mag-list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--spacing-6); }
.mag-row {
    display: flex; align-items: center; gap: var(--spacing-4);
    padding: var(--spacing-3) 0; border-bottom: 1px solid var(--color-border-default);
    color: var(--brand-ink); text-decoration: none; transition: color var(--transition-fast);
}
.mag-row:hover { color: var(--brand-bronze-700); }
.mag-row-thumb { flex: 0 0 84px; width: 84px; height: 58px; border-radius: var(--radius-md); overflow: hidden; background: #14100B; }
.mag-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mag-row-title { flex: 1; min-width: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); line-height: 1.7; }
.mag-row-date { flex: 0 0 auto; color: var(--text-muted); font-size: var(--font-size-xs); white-space: nowrap; }

/* Article (NewsID) */
.article-box {
    background: var(--color-bg-surface); border: 1px solid var(--color-border-default);
    border-radius: var(--radius-2xl); padding: clamp(26px, 5vw, 48px);
    box-shadow: var(--shadow-lg);
}
.article-title { margin: 0 0 var(--spacing-3); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: var(--font-weight-black); color: var(--brand-ink); }
.article-title::after { content: ""; display: block; width: 60px; height: 3px; border-radius: 3px; background: var(--gold-fill); margin-top: var(--spacing-4); }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--spacing-5); color: var(--text-muted); font-size: var(--font-size-sm); margin: 0 0 var(--spacing-5); }
.article-meta i { color: var(--brand-gold-500); margin-inline-end: 6px; }
.article-image { margin: 0 0 var(--spacing-6); border-radius: var(--radius-xl); overflow: hidden; border: 1px solid rgba(214,162,73,.35); box-shadow: var(--shadow-md); }
.article-image img { width: 100%; height: auto; display: block; }
.article-body { color: var(--text-secondary); line-height: 2.1; font-size: var(--font-size-lg); white-space: pre-line; }
.article-body img { max-width: 100%; height: auto; border-radius: var(--radius-lg); }
.article-body table { max-width: 100%; }
.article-back { text-align: center; margin-top: var(--spacing-8); }

/* Activities */
.activity-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-5); }
.activity-card {
    display: grid; grid-template-columns: 200px 1fr;
    background: var(--color-bg-surface); border: 1px solid var(--color-border-default);
    border-radius: var(--radius-xl); overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.activity-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-xl); border-color: var(--brand-gold-500); }
.activity-card-image { display: block; overflow: hidden; background: #14100B; }
.activity-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-slow); }
.activity-card:hover .activity-card-image img { transform: scale(1.05); }
.activity-card-body { padding: var(--spacing-5); display: flex; flex-direction: column; gap: var(--spacing-2); }
.activity-card-body h3 { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
.activity-card-body h3 a { color: var(--brand-ink); text-decoration: none; }
.activity-card-body h3 a:hover { color: var(--brand-bronze-700); }
.activity-date { margin: 0; color: var(--text-muted); font-size: var(--font-size-sm); }
.activity-date i { color: var(--brand-gold-500); margin-inline-end: 6px; }
.activity-card-body > p:not(.activity-date) { margin: 0; color: var(--text-secondary); font-size: var(--font-size-sm); line-height: 1.9; }

/* Videos */
.video-grid { --cols: 3; --grid-gap: var(--spacing-5); }
.video-featured { margin: 0 0 var(--spacing-5); }
.video-featured .video-cell { max-width: 860px; margin-inline: auto; }
.video-cell { background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm); }
.video-embed { position: relative; aspect-ratio: 16/9; background: #14100B; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed + .video-embed, .article-box + .video-embed, .gallery-grid + .video-embed { margin-top: var(--spacing-5); }
.video-caption { margin: 0; padding: var(--spacing-3) var(--spacing-4); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--brand-ink); }

/* Pager (Infographic) */
.pager { display: flex; justify-content: center; gap: var(--spacing-2); margin-top: var(--spacing-8); }
.pager-page {
    min-width: 40px; height: 40px; display: grid; place-items: center; text-decoration: none;
    border: 1px solid var(--color-border-default); border-radius: var(--radius-md);
    background: var(--color-bg-surface); color: var(--text-secondary); font-weight: var(--font-weight-bold);
    transition: all var(--transition-fast);
}
.pager-page:hover { border-color: var(--brand-gold-500); color: var(--brand-bronze-700); }
.pager-page.is-active { background: var(--gold-fill); border-color: transparent; color: #FFF7E8; }
.infographic-grid .gallery-item { aspect-ratio: 3/4; }
.infographic-grid .gallery-item img { object-fit: cover; }

/* Aword timeline */
.aword-timeline { position: relative; padding-inline-start: 34px; }
.aword-timeline::before { content: ""; position: absolute; inset-inline-start: 12px; inset-block: 8px; width: 2px; background: linear-gradient(180deg, var(--brand-gold-300), rgba(214,162,73,.15)); }
.aword-item { position: relative; margin-bottom: var(--spacing-6); }
.aword-dot {
    position: absolute; inset-inline-start: -29px; top: 26px; width: 14px; height: 14px;
    border-radius: 50%; background: var(--gold-fill); box-shadow: 0 0 0 4px rgba(214,162,73,.18);
}
.aword-card {
    display: flex; gap: var(--spacing-5); align-items: flex-start;
    background: var(--color-bg-surface); border: 1px solid var(--color-border-default);
    border-radius: var(--radius-xl); padding: var(--spacing-5);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.aword-card:hover { transform: translateX(-4px); box-shadow: var(--shadow-lg); }
.aword-photo { flex: 0 0 92px; width: 92px; height: 92px; border-radius: 50%; padding: 3px; background: var(--gold-fill); }
.aword-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid var(--color-bg-surface); display: block; }
.aword-body { flex: 1; }
.aword-body h3 { margin: 0 0 var(--spacing-1); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--brand-ink); }
.aword-date { margin: 0 0 var(--spacing-2); color: var(--text-muted); font-size: var(--font-size-sm); }
.aword-date i { color: var(--brand-gold-500); margin-inline-end: 6px; }
.aword-text { margin: 0; color: var(--text-secondary); line-height: 1.9; font-size: var(--font-size-base); white-space: pre-line; }

/* Digital library */
.lib-box { background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.lib-head {
    display: grid; grid-template-columns: 1fr 64px; gap: var(--spacing-4);
    background: linear-gradient(160deg, #241D15, #14100B); color: #EAD9B8;
    padding: var(--spacing-4) var(--spacing-6); font-weight: var(--font-weight-bold);
}
.lib-head span:last-child { text-align: center; }
.lib-row { display: grid; grid-template-columns: 1fr 64px; gap: var(--spacing-4); align-items: center; padding: var(--spacing-4) var(--spacing-6); border-top: 1px solid var(--color-border-subtle); transition: background var(--transition-fast); }
.lib-row:hover { background: var(--color-accent-light); }
.lib-name { color: var(--text-primary); font-weight: var(--font-weight-semibold); line-height: 1.7; }
.lib-name i { color: var(--brand-bronze-700); margin-inline-end: var(--spacing-3); }
.lib-dl { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); border: 1px solid rgba(214,162,73,.4); color: var(--brand-bronze-700); text-decoration: none; transition: all var(--transition-fast); }
.lib-dl:hover { background: var(--gold-fill); color: #FFF7E8; border-color: transparent; }

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer { background: linear-gradient(180deg, #171310, #0E0B08); color: #C8BCA6; margin-top: 0; }
.site-footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--spacing-8); padding-block: clamp(40px, 6vw, 64px); }
.site-footer-brand .site-brand-mark.on-dark { width: 52px; height: 52px; }
.site-footer-name { margin: var(--spacing-4) 0 var(--spacing-1); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: #F3E9D6; }
.site-footer-tag { margin: 0; font-size: var(--font-size-sm); color: #9C8F78; }
.site-footer-title { margin: 0 0 var(--spacing-4); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); color: #EDE4D3; position: relative; padding-bottom: var(--spacing-2); }
.site-footer-title::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 26px; height: 2px; background: var(--gold-fill); }
.site-footer-links, .site-footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-2); }
.site-footer-links a, .site-footer-contact a, .site-footer-contact li { color: #B7A88E; text-decoration: none; font-size: var(--font-size-sm); }
.site-footer-links a:hover { color: var(--brand-gold-300); }
.site-footer-contact i { color: var(--brand-gold-500); width: 16px; }
.site-footer-social { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.site-footer-social a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--radius-md); border: 1px solid rgba(214,162,73,.3); color: #D6A249; text-decoration: none; transition: all var(--transition-fast); }
.site-footer-social a:hover { background: var(--brand-gold-300); color: #1A1611; border-color: var(--brand-gold-300); transform: translateY(-2px); }
.site-footer-bottom { border-top: 1px solid rgba(214,162,73,.18); }
.site-footer-bottom p { max-width: 1180px; margin-inline: auto; padding: var(--spacing-5); text-align: center; font-size: var(--font-size-sm); color: #8F8371; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
/* ══════════════════════ BATCH C — الرسوم (Offer / Fees / Result / FOffer) ══════════════════════ */

/* — صفحة Offer — */
.offer-body { line-height: 1.9; color: var(--color-text-secondary); font-size: 1.08rem; }
.offer-intro { margin: var(--spacing-5) 0 var(--spacing-8); padding-inline-start: var(--spacing-4); }
.offer-intro p { margin: 0 0 var(--spacing-2); }
.offer-head { max-width: 640px; margin: var(--spacing-6) auto; padding: var(--spacing-3) var(--spacing-5); text-align: center; color: #fff; background: var(--brand-bronze-900); border-radius: var(--radius-lg) var(--radius-lg) 0 0; font-weight: var(--font-weight-bold); }
.offer-img { text-align: center; margin-bottom: var(--spacing-8); }
.offer-img img { max-width: 100%; height: auto; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.offer-sub { margin-bottom: var(--spacing-8); }
.offer-richtext { padding: var(--spacing-4); background: var(--color-bg-light); border-radius: var(--radius-md); }
.offer-richtext img { max-width: 100%; height: auto; }
.offer-tools { margin-bottom: var(--spacing-8); }
.offer-divider { margin: var(--spacing-8) 0; border: 0; border-top: 1px dashed var(--color-border-default); }
.btn-gold { display: inline-flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-3) var(--spacing-6); border: 0; font: inherit; cursor: pointer; border-radius: 999px; background: linear-gradient(135deg, var(--brand-gold-500), var(--brand-bronze-700)); color: #1A1611; font-weight: var(--font-weight-bold); text-decoration: none; box-shadow: var(--shadow-md); transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-gold img { width: 26px; }
.offer-tools .btn-gold { font-size: .95rem; padding: var(--spacing-2) var(--spacing-5); }
.offer-body .fa-whatsapp { color: #25D366; font-size: 1.6rem; vertical-align: middle; }
.offer-body .fa-map-marker-alt { color: #2d8a4e; font-size: 1.5rem; vertical-align: middle; }

/* — نموذج الاستعلام — */
.inquiry-form { display: flex; flex-direction: column; gap: var(--spacing-4); margin: var(--spacing-5) 0; padding: var(--spacing-6); background: var(--color-bg-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.inquiry-form.inquiry-inline { flex-direction: row; align-items: flex-end; flex-wrap: wrap; --inquiry-control-h: 52px; }
.inquiry-form.inquiry-inline .inquiry-field input { height: var(--inquiry-control-h); box-sizing: border-box; padding: 0 var(--spacing-4); font-size: 1rem; }
.inquiry-form.inquiry-inline .btn-gold { align-self: flex-end; height: var(--inquiry-control-h); padding: 0 var(--spacing-5); font-size: .95rem; }
.inquiry-field { flex: 1 1 320px; display: flex; flex-direction: column; gap: var(--spacing-2); }
.inquiry-field label { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.inquiry-field input { padding: var(--spacing-3) var(--spacing-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: #fff; color: var(--color-text-dark); font-size: 1.05rem; text-align: right; }
.inquiry-field input:focus { outline: none; border-color: var(--brand-gold-500); box-shadow: 0 0 0 3px rgba(214,162,73,.2); }
.inquiry-error { color: var(--color-danger); font-weight: var(--font-weight-bold); white-space: pre-line; }
/* شريط النجاح بعد إضافة البطاقة (#71) — نفس موضع رسالة الخطأ فوق البطاقات */
.inquiry-notice { margin: var(--spacing-4) 0 0; padding: var(--spacing-3) var(--spacing-4); text-align: center;
    color: #4a7a2f; background: rgba(112,178,64,.14); border: 1px solid rgba(112,178,64,.4); border-radius: var(--radius-md);
    font-weight: var(--font-weight-bold); white-space: pre-line; }
.inquiry-wa { margin: calc(var(--spacing-2) * -1) 0 0; }
.inquiry-wa a { display: inline-flex; align-items: center; gap: 6px; color: #1faa44; font-weight: var(--font-weight-bold); }

/* — معالج الحاسبة Fees: شريط تقدم ذهبي + بطاقات — */
.fees-intro { margin-bottom: var(--spacing-8); }
.fees-form { display: flex; flex-direction: column; gap: var(--spacing-6); }

.fees-stepper { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; }
.fees-stepper::before { content: ""; position: absolute; top: 21px; inset-inline: 16%; height: 2px; background: linear-gradient(90deg, rgba(214,162,73,.15), rgba(214,162,73,.55), rgba(214,162,73,.15)); }
.fees-stepper li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-2); }
.fees-stepper-num { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--color-bg-elevated); border: 2px solid var(--brand-gold-500); color: var(--brand-bronze-700); font-weight: var(--font-weight-black); font-family: var(--font-family-alt), var(--font-family-base); transition: all var(--transition-fast); }
.fees-stepper-label { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: var(--font-weight-semibold); transition: color var(--transition-fast); }
.fees-stepper li.is-done .fees-stepper-num { background: var(--brand-gold-500); color: #1A1611; }
.fees-stepper li.is-done .fees-stepper-label { color: var(--brand-bronze-700); }
.fees-stepper li.is-active .fees-stepper-num { background: linear-gradient(135deg, #E4B968 0%, #D6A249 45%, #B6953E 100%); border-color: transparent; color: #1A1611; transform: scale(1.1); box-shadow: 0 8px 22px rgba(214,162,73,.45); }
.fees-stepper li.is-active .fees-stepper-label { color: var(--brand-ink); font-weight: var(--font-weight-bold); }

.fees-step { position: relative; overflow: hidden; padding: var(--spacing-6); background: var(--color-bg-elevated); border: 1px solid rgba(214,162,73,.25); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.fees-step::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; background: linear-gradient(90deg, #E4B968, #D6A249 45%, #B6953E); }
.fees-step:not([hidden]) { animation: feesRise .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes feesRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.fees-step-head { display: flex; align-items: center; gap: var(--spacing-4); margin-bottom: var(--spacing-5); }
.fees-step-icon { flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--radius-lg); background: rgba(214,162,73,.14); border: 1px solid rgba(214,162,73,.35); color: var(--brand-bronze-700); font-size: 1.35rem; }
.fees-step-head h3 { margin: 0; font-size: var(--font-size-xl); font-weight: var(--font-weight-black); color: var(--brand-ink); }
.fees-step-head p { margin: 4px 0 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); }

.fees-note { padding: var(--spacing-4); margin-bottom: var(--spacing-5); background: rgba(214,162,73,.12); border-inline-start: 4px solid var(--brand-gold-500); border-radius: var(--radius-sm); color: var(--color-text-primary); }
.fees-field { display: flex; flex-direction: column; gap: var(--spacing-2); margin-bottom: var(--spacing-4); }
.fees-field label { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.fees-field select, .fees-field input { padding: var(--spacing-3) var(--spacing-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: #fff; color: var(--color-text-dark); font-size: 1rem; width: 100%; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.fees-field select:focus, .fees-field input:focus { outline: none; border-color: var(--brand-gold-500); box-shadow: 0 0 0 3px rgba(214,162,73,.2); }
.fees-field select.is-error, .fees-field input.is-error { border-color: var(--color-danger); background: rgba(220,53,69,.06); }
.fees-hint { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.fees-warn { color: var(--color-danger); font-weight: var(--font-weight-normal); }
.fees-error-text { color: var(--color-danger); font-size: var(--font-size-sm); }
.fees-errors { color: var(--color-danger); margin-bottom: var(--spacing-4); }
.fees-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--spacing-4); }

.fees-count { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-3); margin: var(--spacing-6) 0 var(--spacing-3); }
.fees-count-pill { position: relative; cursor: pointer; }
.fees-count-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.fees-count-pill span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-lg); border: 1.5px solid var(--color-border-default); background: var(--color-bg-light); color: var(--brand-bronze-700); font-size: 1.45rem; font-weight: var(--font-weight-black); font-family: var(--font-family-alt), var(--font-family-base); transition: all var(--transition-fast); }
.fees-count-pill:hover span { border-color: var(--brand-gold-500); transform: translateY(-2px); }
.fees-count-pill input:checked + span { background: linear-gradient(135deg, #E4B968 0%, #D6A249 45%, #B6953E 100%); border-color: transparent; color: #1A1611; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(198,149,71,.4); }
.fees-count-pill input:focus-visible + span { outline: 3px solid rgba(214,162,73,.5); outline-offset: 2px; }
.fees-count-hint { text-align: center; }

.fees-student { position: relative; margin-bottom: var(--spacing-4); padding: var(--spacing-5); border: 1px solid rgba(214,162,73,.22); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(214,162,73,.06), transparent 72px), var(--color-bg-elevated); }
.fees-student-head { display: flex; align-items: center; gap: var(--spacing-3); margin-bottom: var(--spacing-4); }
.fees-student-badge { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #E4B968, #B6953E); color: #1A1611; font-weight: var(--font-weight-black); font-family: var(--font-family-alt), var(--font-family-base); box-shadow: 0 4px 12px rgba(198,149,71,.35); }
.fees-student h3 { margin: 0; color: var(--brand-bronze-700); font-size: var(--font-size-lg); }
.fees-empty { display: flex; align-items: center; gap: var(--spacing-2); margin: var(--spacing-2) 0 0; padding: var(--spacing-3) var(--spacing-4); border: 1px dashed rgba(198,149,71,.55); border-radius: var(--radius-md); background: rgba(214,162,73,.07); color: var(--brand-bronze-700); font-size: var(--font-size-sm); }
.fees-empty::before { content: "✦"; color: var(--brand-gold-500); }

.fees-actions { display: flex; gap: var(--spacing-3); margin-top: var(--spacing-5); }
.fees-btn { display: inline-flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-3) var(--spacing-6); border: 0; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--brand-gold-500), var(--brand-bronze-700)); color: #1A1611; font-weight: var(--font-weight-bold); font-size: 1rem; cursor: pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.fees-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.fees-btn-ghost { background: transparent; color: var(--brand-bronze-700); border: 1px solid var(--brand-bronze-700); }
.fees-btn-ghost:hover { background: rgba(214,162,73,.1); }
.fees-btn-submit { padding-inline: var(--spacing-8); }

/* — صفحة نتيجة الحاسبة FeesResult: بطاقة ذهبية للناتج + جداول مفصلة — */
.feesr-wrap { max-width: 1100px; margin-inline: auto; }
.feesr-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); text-align: center; padding-bottom: var(--spacing-5); border-bottom: 2px solid var(--brand-gold-500); }
.feesr-org h5, .feesr-date h5 { margin: 0; color: var(--brand-bronze-700); font-size: var(--font-size-base); }
.feesr-logo img { max-width: 120px; }
.feesr-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-6); margin: var(--spacing-5) 0; color: var(--brand-gold-600); font-weight: var(--font-weight-bold); }

.feesr-tabs { display: flex; justify-content: center; gap: var(--spacing-2); margin-bottom: var(--spacing-5); }
.feesr-tabs a { padding: var(--spacing-2) var(--spacing-5); border-radius: var(--radius-pill); border: 1px solid rgba(198,149,71,.5); background: var(--color-bg-elevated); color: var(--brand-bronze-700); text-decoration: none; font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); transition: all var(--transition-fast); }
.feesr-tabs a:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.feesr-tabs a.is-on { background: linear-gradient(135deg, #E4B968, #D6A249 45%, #B6953E); border-color: transparent; color: #1A1611; box-shadow: var(--shadow-md); }

.feesr-hero { position: relative; overflow: hidden; margin: 0 0 var(--spacing-8); padding: clamp(22px, 4.5vw, 40px) var(--spacing-6); text-align: center; border: 1px solid rgba(214,162,73,.5); border-radius: var(--radius-xl);
    background: radial-gradient(130% 150% at 50% -20%, rgba(230,185,104,.32), transparent 62%), linear-gradient(150deg, #241B10 0%, #171310 55%, #211A0F 100%);
    box-shadow: 0 24px 60px rgba(28,24,20,.35); }
.feesr-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, rgba(214,162,73,.05) 0 2px, transparent 2px 9px); }
.feesr-hero-label { position: relative; z-index: 1; margin: 0; color: #C9A86A; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); letter-spacing: .06em; }
.feesr-hero-amount { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: center; gap: var(--spacing-3); margin: var(--spacing-4) 0 var(--spacing-6); font-family: 'JetBrains Mono', var(--font-family-base); font-weight: var(--font-weight-black); font-size: clamp(2.4rem, 7vw, 4rem); line-height: 1;
    background: linear-gradient(135deg, #F0CE8F 0%, #D6A249 55%, #B6953E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.feesr-hero-amount img { width: clamp(22px, 3.5vw, 34px); }
.feesr-hero-stats { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-3); }
.feesr-stat { min-width: 150px; padding: var(--spacing-3) var(--spacing-5); border-radius: var(--radius-md); border: 1px solid rgba(214,162,73,.35); background: rgba(255,255,255,.04); }
.feesr-stat span { display: block; margin-bottom: 4px; color: #B7A88E; font-size: .8rem; }
.feesr-stat b { font-family: 'JetBrains Mono', var(--font-family-base); color: #F3E3C2; font-size: 1.05rem; }

.feesr-sections { display: flex; flex-wrap: wrap; gap: var(--spacing-5); }
.feesr-col { flex: 1 1 100%; }
.feesr-col-full { flex: 1 1 100%; }
.feesr-table-title { text-align: center; margin-top: var(--spacing-4); }
.feesr-table-title h5 { color: var(--brand-bronze-700); font-size: var(--font-size-base); }
.feesr-table-wrap { overflow-x: auto; margin-top: var(--spacing-3); border: 1px solid rgba(214,162,73,.25); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-md); }
.feesr-table { width: 100%; border-collapse: collapse; }
.feesr-table th, .feesr-table td { border: 1px solid rgba(190,148,64,.35); padding: var(--spacing-2) var(--spacing-3); text-align: center; color: #2B2113; font-variant-numeric: tabular-nums; }
.feesr-table thead th { background: linear-gradient(180deg, #F3E3C2, #E9D2A3); color: #5C4517; font-weight: var(--font-weight-black); }
.feesr-table tbody tr:nth-child(even) td { background: rgba(214,162,73,.05); }
.feesr-table tfoot td { font-weight: var(--font-weight-bold); background: #FBF4E4; }
.feesr-table img { width: 15px; vertical-align: middle; }
.feesr-footer-text { margin: 0; padding: var(--spacing-3) var(--spacing-4); color: var(--color-text-secondary); font-size: var(--font-size-sm); text-align: center; }
.feesr-print { text-align: left; margin-top: var(--spacing-5); }

/* — بيان ولي الأمر Result — */
.statement-head { text-align: center; margin-bottom: var(--spacing-4); }
.statement-title { color: var(--color-danger); font-weight: var(--font-weight-black); font-size: var(--font-size-lg); margin: 0 0 var(--spacing-2); }
.statement-father { color: var(--brand-bronze-700); font-weight: var(--font-weight-bold); margin: 0; }
.statement-table-wrap { overflow-x: auto; }
.statement-table { width: 100%; border-collapse: collapse; }
.statement-table th, .statement-table td { border: 1px solid rgba(190,148,64,.55); padding: var(--spacing-2) var(--spacing-3); text-align: center; }
.statement-table thead th { background: var(--brand-bronze-900); color: #fff; }
.statement-sum th { background: rgba(214,162,73,.22); font-weight: var(--font-weight-bold); }
.statement-request th { background: var(--color-bg-light); }
.statement-discount th { background: rgb(45,62,80); color: #fff; }
.statement-remaining th { background: var(--color-bg-light); font-weight: var(--font-weight-bold); }
.statement-wa { margin-top: var(--spacing-5); color: var(--color-text-secondary); }
.statement-wa .fa-whatsapp { color: #25D366; font-size: 1.5rem; vertical-align: middle; }
.statement-print { text-align: left; margin-top: var(--spacing-4); }

/* — عارض PDF — */
.pdf-box { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.pdf-bar { display: flex; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-4); background: var(--color-bg-light); }
.pdf-box iframe { display: block; width: 100%; height: 800px; border: 0; }

@media print {
    .site-header, .site-footer, .skip-link, .page-banner, .feesr-print, .statement-print, .inquiry-form, .fees-btn, .fees-stepper, .feesr-tabs { display: none !important; }
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .feesr-table thead th, .statement-table thead th { background-color: rgba(190,148,64,.4) !important; }
    .feesr-hero { box-shadow: none; }
    .feesr-hero-amount { -webkit-text-fill-color: #8a6a1f; color: #8a6a1f; background: none; }
    .feesr-stat b { color: #2B2113; }
    .feesr-hero, .feesr-hero-label { color: #2B2113; }
    .feesr-hero { background: #fff !important; }
}

@media (max-width: 760px) {
    .feesr-head { flex-direction: column; text-align: center; }
    .inquiry-form.inquiry-inline { flex-direction: column; align-items: stretch; }
    .fees-stepper-label { font-size: .72rem; }
    .fees-count-pill span { width: 50px; height: 50px; font-size: 1.2rem; }
    .fees-step { padding: var(--spacing-4); }
    .fees-step-head { align-items: flex-start; }
}

@media (max-width: 980px) {
    .hero-inner { grid-template-columns: 1fr; text-align: center; }
    .hero-emblem { order: -1; width: min(200px, 46vw); }
    .hero-sub { margin-inline: auto; }
    .hero-actions { justify-content: center; }
    .about-grid { grid-template-columns: 1fr; }
    .team-grid, .gallery-grid { --cols: 2; }
    .services-grid, .contact-grid { --cols: 2; }
    .news-grid { --cols: 2; }
    .video-grid { --cols: 2; }
    .mag-mosaic { grid-template-columns: 1fr; }
    .mag-side { flex-direction: row; }
    .site-footer-inner { grid-template-columns: 1fr 1fr; }
}
/* الحدّ 1100 لا 900: مقيس حيًا — عرض المحتوى الأدنى للهيدر 1010px، فبين 901 و1100 كانت
   الأزرار تُدفع خارج الحافة. تحت 1100 القائمة تصير لوحة منسدلة بزرّ الهمبرغر. */
@media (max-width: 1100px) {
    .site-nav {
        position: fixed; inset-inline: 12px; top: 82px;
        background: rgba(255, 253, 248, 0.97);
        backdrop-filter: saturate(140%) blur(10px);
        border: 1px solid var(--color-border-default);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-xl);
        padding: var(--spacing-3);
        margin-inline-start: 0;
        max-height: calc(100dvh - 104px); overflow-y: auto;
        transform: translateY(-12px); opacity: 0; visibility: hidden;
        transition: all var(--transition-base);
        z-index: calc(var(--z-sticky) - 1);
    }
    .site-nav.open { transform: translateY(0); opacity: 1; visibility: visible; }
    .site-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
    .site-nav a { height: auto; padding: var(--spacing-3); font-size: var(--font-size-lg); }
    .site-nav a.is-active { background: var(--color-accent-light); color: var(--brand-bronze-700); }
    .site-nav a.is-active::after { display: none; }
    .site-nav-toggle { display: flex; margin-inline-start: auto; }
    .site-nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .site-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
    .site-nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
    .site-header-inner { gap: var(--spacing-3); }
    .site-header-actions .site-btn { padding: 9px 14px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    /* اسم الحساب أطول من أن يسع جوار الشعار والهمبرغر على شاشة ضيقة: القرص يكفي */
    .site-account-name { display: none; }
    .site-account-btn { padding-inline: 6px; }
    .vm-grid { grid-template-columns: 1fr; }
    .team-grid { --grid-gap: var(--spacing-6); }
    .contact-row { grid-template-columns: 1fr; }
    .cf-grid { grid-template-columns: 1fr; }
    .news-grid { --cols: 1; }
    .activity-list { grid-template-columns: 1fr; }
    .video-grid { --cols: 1; }
    .activity-card { grid-template-columns: 1fr; }
    .activity-card-image { aspect-ratio: 16/9; }
    .mag-side { flex-direction: column; }
    .mag-list { grid-template-columns: 1fr; }
    .aword-card { flex-direction: column; align-items: center; text-align: center; }
    .aword-card:hover { transform: translateY(-3px); }
    .lib-head, .lib-row { grid-template-columns: 1fr 52px; }
}
@media (max-width: 560px) {
    .services-grid, .contact-grid { --cols: 1; }
    .cf-grid-4 { grid-template-columns: 1fr; }
    .site-footer-inner { grid-template-columns: 1fr; }
    .cta-inner { flex-direction: column; align-items: flex-start; }
    .site-brand-sub { display: none; }
    .infographic-grid .gallery-item { aspect-ratio: 3/4; }
}

@media (prefers-reduced-motion: reduce) {
    .site-nav, .service-card, .site-btn, .site-header { transition: none; }
    .hero-slide { transition: none; }
    .hero-slide.is-active img { animation: none; }
    .gallery-item, .gallery-item img { transition: none; }
    .lightbox { animation: none; }
    .news-card, .activity-card, .aword-card, .cat-tab, .pager-page, .lib-dl { transition: none; }
}

/* ─── بوابة حصيل العامة ─── */
.hassel-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-5); margin-top: var(--spacing-6); }
.hassel-tile { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-3); text-align: center;
    padding: var(--spacing-6) var(--spacing-5); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg);
    background: var(--color-bg-elevated); box-shadow: var(--shadow-sm); }
.hassel-tile h4 { margin: 0; color: var(--color-text-primary); font-size: var(--font-size-lg); }
.hassel-tile p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.hassel-tile .inquiry-field { width: 100%; text-align: right; flex: 0 0 auto; }
.hassel-tile .inquiry-field input { width: 100%; box-sizing: border-box; height: 48px; padding: 0 var(--spacing-4); }
.hassel-tile-ico { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; font-size: 1.5rem;
    color: #F3E3C2; background: linear-gradient(140deg, #D6A249, #8a6a1f); box-shadow: 0 10px 24px rgba(214,162,73,.35); }
.hassel-tile-live { border-color: rgba(214,162,73,.45); }
.hassel-tile-soon { opacity: .75; border-style: dashed; }
.hassel-gifts-title { margin: var(--spacing-6) 0 var(--spacing-4); color: var(--color-text-primary); text-align: center; }
.hassel-gifts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--spacing-4); }
.hassel-gift { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--spacing-4);
    border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: #fff; text-align: center; }
.hassel-gift img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius-sm); }
.hassel-gift b { font-family: 'JetBrains Mono', var(--font-family-base); color: #8a6a1f; font-size: 1.1rem; }
.hassel-gift span { font-size: .78rem; color: var(--color-text-muted); }
.hassel-alert { position: relative; z-index: 1; margin: var(--spacing-3) 0 0; color: #ff8a7a; font-weight: var(--font-weight-bold); }

.hassel-r-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); margin-bottom: var(--spacing-5); }
.hassel-r-org h5 { margin: 0 0 4px; color: var(--color-text-primary); font-size: var(--font-size-lg); }
.hassel-r-org p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.hassel-r-logo img { height: 64px; width: auto; }
.hassel-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: var(--font-weight-bold);
    color: var(--color-text-muted); background: rgba(28,24,20,.06); }
.hassel-pill.is-on { color: #6a4f12; background: rgba(214,162,73,.22); }
.hassel-empty { text-align: center; color: var(--color-text-muted); padding: var(--spacing-6); border: 1px dashed var(--color-border-subtle); border-radius: var(--radius-md); }
.hassel-totals { width: 100%; margin: var(--spacing-5) 0; border-collapse: collapse; }
.hassel-totals th, .hassel-totals td { padding: var(--spacing-3) var(--spacing-4); border: 1px solid var(--color-border-subtle); text-align: right; }
.hassel-totals th { background: rgba(214,162,73,.12); color: var(--color-text-primary); font-weight: var(--font-weight-bold); width: 60%; }
.hassel-totals td { font-family: 'JetBrains Mono', var(--font-family-base); color: var(--color-text-dark); }
.hassel-totals-net th, .hassel-totals-net td { background: rgba(214,162,73,.2); font-weight: var(--font-weight-black); }
.hassel-open { color: var(--color-danger); margin: var(--spacing-4) 0; }
.hassel-r-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--spacing-3); margin-top: var(--spacing-5); }
@media (max-width: 720px) { .hassel-tiles { grid-template-columns: 1fr; } }
@media print { .hassel-tiles, .hassel-gifts, .hassel-gifts-title, .hassel-r-actions, .hassel-totals-wrap, .hassel-details, .hassel-details-empty { display: none !important; } }

/* — بوابة المعلم: كارت الدخول + كارت تنقل — */
a.hassel-tile { text-decoration: none; color: inherit; transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
a.hassel-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.hassel-tile-open { pointer-events: none; }
.hassel-login-card { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-3); text-align: center;
    padding: var(--spacing-8) var(--spacing-6); border: 1px solid rgba(214,162,73,.45); border-radius: var(--radius-lg);
    background: var(--color-bg-elevated); box-shadow: var(--shadow-sm); max-width: 520px; margin: var(--spacing-6) auto; }
.hassel-login-card .section-title, .hassel-login-card .section-desc { margin: 0; }
.hassel-login-form { display: flex; flex-direction: column; gap: var(--spacing-4); width: 100%; text-align: right; }
.hassel-login-form .inquiry-field { flex: 0 0 auto; }
.hassel-login-form .inquiry-field input { width: 100%; box-sizing: border-box; height: 48px; padding: 0 var(--spacing-4); }
.hassel-login-form .fees-btn { align-self: center; min-width: 180px; justify-content: center; }
.hassel-login-note { margin: 0; font-size: .8rem; color: var(--color-text-muted); }
.hassel-totals-wrap { margin-top: var(--spacing-5); }

/* — تفاصيل لوحة المعلم: شبكة DevExtreme (الترقيع الذهبي من identity.css) + الإجمالي — */
.hassel-details { margin-top: var(--spacing-5); }
.hassel-details .dx-datagrid { max-width: 100%; }
.hassel-details-total { margin: var(--spacing-3) 0 0; text-align: right; font-weight: var(--font-weight-bold); color: #8a6a1f; }
.hassel-details-empty { margin-top: var(--spacing-5); text-align: center; color: var(--color-text-muted); }

/* — شاشة الاستبدال (#54): شبكة الهدايا + الفورم داخل صف الأزرار — */
.hassel-rep-lead { margin: 0 0 var(--spacing-6); text-align: center; color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); }
.hassel-rep-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-4); }
@media (max-width: 900px) { .hassel-rep-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hassel-rep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hassel-rep-card { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-2);
    padding: var(--spacing-4); background: var(--color-bg-elevated); border: 1px solid rgba(214,162,73,.35);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.hassel-rep-card form { margin: 0; }
.hassel-rep-btn { display: grid; place-items: center; width: 100%; padding: 8px; cursor: pointer;
    background: #fff; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); }
.hassel-rep-btn img { width: 112px; height: 112px; object-fit: contain; }
.hassel-rep-btn:hover:not(:disabled) { border-color: var(--brand-gold-500); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.hassel-rep-btn:disabled { cursor: not-allowed; opacity: .55; filter: grayscale(.6); }
.hassel-rep-name { display: