/* ==========================================================================
   SRA DESIGN SYSTEM — "Maroon & Gold"
   الرابطة السعودية للحكام
   --------------------------------------------------------------------------
   نظام تصميم عصري بهوية "مارون عنابي + ذهبي" مستوحاة من شاشة الدخول الرسمية.
   يدعم الوضعين الفاتح والداكن (عبر html.dark) والاتجاهين RTL/LTR.
   ملاحظة مهمة: هذا الملف لا يُعيد تعريف أي من Tailwind utilities،
   بل يضيف فقط مكوّنات بطبقة `.sra-*` وأساسيات هوية بصرية.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) متغيرات التصميم — Design Tokens
   -------------------------------------------------------------------------- */
:root {
    /* الألوان الأساسية — عائلة المارون/الطوبي الرسمية */
    --sra-primary:      #6E2B2B;
    --sra-primary-deep: #401919;
    --sra-accent:       #B54141;
    --sra-accent-soft:  #C06B6B;
    --sra-rose:         #A85454;
    --sra-gold:         #DAA520;
    --sra-gold-soft:    #F5C84C;
    --sra-gold-deep:    #B8860B;

    /* الخلفيات والنصوص (الوضع الفاتح) */
    --sra-bg:           #FAF6F5;
    --sra-bg-elevated:  #FFFFFF;
    --sra-bg-subtle:    #F3EAE8;
    --sra-text:         #2B1A1A;
    --sra-text-muted:   #6E5A5A;
    --sra-border:       rgba(110, 43, 43, 0.14);

    /* الظلال والزوايا */
    --sra-radius:       1.25rem;
    --sra-shadow-sm:    0 2px 8px rgba(64, 25, 25, 0.06);
    --sra-shadow-md:    0 10px 30px rgba(64, 25, 25, 0.10);
    --sra-shadow-lg:    0 24px 60px rgba(64, 25, 25, 0.16);
    --sra-shadow-gold:  0 10px 30px rgba(218, 165, 32, 0.28);

    /* التدرجات */
    --sra-grad-primary: linear-gradient(135deg, #B54141 0%, #6E2B2B 55%, #401919 100%);
    --sra-grad-gold:    linear-gradient(135deg, #F5C84C 0%, #DAA520 60%, #B8860B 100%);
    --sra-grad-hero:    linear-gradient(160deg, #8C404066 0%, #5A262699 45%, #1D0F0FF2 100%);
    --sra-grad-ring:    linear-gradient(135deg, #F5C84C, #B54141 55%, #6E2B2B);

    /* زجاجية الهيدر */
    --sra-glass-bg:     rgba(255, 255, 255, 0.78);
    --sra-glass-border: rgba(110, 43, 43, 0.10);
}

/* الوضع الداكن */
html.dark {
    --sra-bg:           #1D0F0F;
    --sra-bg-elevated:  #2A1414;
    --sra-bg-subtle:    #241111;
    --sra-text:         #F2EAE8;
    --sra-text-muted:   #B39C9C;
    --sra-border:       rgba(218, 165, 32, 0.16);

    --sra-shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.45);
    --sra-shadow-md:    0 12px 34px rgba(0, 0, 0, 0.55);
    --sra-shadow-lg:    0 28px 70px rgba(0, 0, 0, 0.65);

    --sra-grad-hero:    linear-gradient(160deg, #3A1717 0%, #2A1414 55%, #1D0F0F 100%);
    --sra-glass-bg:     rgba(29, 15, 15, 0.78);
    --sra-glass-border: rgba(181, 65, 65, 0.18);
}

/* --------------------------------------------------------------------------
   2) الخطوط والأساسيات
   -------------------------------------------------------------------------- */
body {
    font-family: 'Cairo', sans-serif;
    background-color: var(--sra-bg);
    color: var(--sra-text);
}

.en-font {
    font-family: 'Poppins', sans-serif;
}

html {
    scroll-behavior: smooth;
}

::selection {
    background-color: var(--sra-gold);
    color: var(--sra-primary-deep);
}

/* --------------------------------------------------------------------------
   3) الهيدر — .sra-header
   شفاف فوق الـ hero، ويتحول إلى زجاجي عند .scrolled
   -------------------------------------------------------------------------- */
.sra-header {
    background-color: transparent;
}

/* ألوان الهيدر وهو شفاف (فوق الـ hero الداكن) */
.sra-header #header-logo-text,
.sra-header #header-nav-links,
.sra-header #header-action-buttons {
    color: #ffffff;
}

/* الهيدر الزجاجي عند التمرير */
.sra-header.scrolled {
    background-color: var(--sra-glass-bg);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--sra-glass-border);
    box-shadow: var(--sra-shadow-md);
}

.sra-header.scrolled #header-logo-text,
.sra-header.scrolled #header-action-buttons {
    color: var(--sra-text);
}

.sra-header.scrolled #header-nav-links {
    color: var(--sra-text-muted);
}

.sra-header.scrolled #header-nav-links a:hover {
    color: var(--sra-gold);
}

/* --------------------------------------------------------------------------
   4) روابط التنقل — .sra-nav-link
   -------------------------------------------------------------------------- */
.sra-nav-link {
    position: relative;
    padding: 0.25rem 0;
    color: inherit;
    transition: color 0.25s ease;
}

.sra-nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    inset-inline-start: 0;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sra-gold-soft), var(--sra-gold));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.sra-nav-link:hover {
    color: var(--sra-gold);
}

.sra-nav-link:hover::after,
.sra-nav-link.active::after {
    transform: scaleX(1);
}

.sra-nav-link.active {
    color: var(--sra-gold);
}

/* --------------------------------------------------------------------------
   5) أزرار الهيدر — اللغة / القائمة / مفتاح الثيم
   -------------------------------------------------------------------------- */
.sra-lang-btn {
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: inherit;
    transition: all 0.25s ease;
    min-width: 2.75rem;
}

.sra-lang-btn:hover {
    background-color: rgba(218, 165, 32, 0.25);
    border-color: var(--sra-gold);
    color: var(--sra-gold-soft);
}

.sra-header.scrolled .sra-lang-btn {
    border-color: var(--sra-border);
}

.sra-menu-btn {
    color: inherit;
    border-radius: 0.75rem;
    transition: all 0.25s ease;
}

.sra-menu-btn:hover {
    color: var(--sra-gold);
    background-color: rgba(218, 165, 32, 0.18);
}

/* مسار مفتاح الثيم — بنفس أبعاد المفتاح القديم (w-11 h-6) */
.sra-theme-track {
    position: relative;
    width: 2.75rem;      /* w-11 */
    height: 1.5rem;       /* h-6 */
    border-radius: 999px;
    background-color: #4B5563; /* gray-600 */
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* الدائرة المتحركة داخل المسار */
.sra-theme-track::after {
    content: '';
    position: absolute;
    top: 0.125rem;
    inset-inline-start: 0.125rem;
    width: 1.25rem;       /* h-5 w-5 */
    height: 1.25rem;
    border-radius: 999px;
    background-color: #ffffff;
    border: 1px solid #D1D5DB;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease;
}

/* عند التفعيل (الوضع الداكن) — تحريك الدائرة حسب الاتجاه */
#theme-switch:checked + .sra-theme-track {
    background-color: var(--sra-gold);
    border-color: var(--sra-gold-soft);
}

#theme-switch:checked + .sra-theme-track::after {
    transform: translateX(1.25rem); /* LTR: لليمين */
}

html[dir="rtl"] #theme-switch:checked + .sra-theme-track::after {
    transform: translateX(-1.25rem); /* RTL: لليسار */
}

/* --------------------------------------------------------------------------
   6) قائمة الجوال الزجاجية — .sra-mobile-menu
   -------------------------------------------------------------------------- */
.sra-mobile-menu {
    background-color: var(--sra-glass-bg);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--sra-glass-border);
    color: var(--sra-text);
}

.sra-mobile-menu a {
    color: var(--sra-text);
    border-radius: 0.75rem;
    transition: all 0.2s ease;
}

.sra-mobile-menu a:hover {
    background-color: rgba(218, 165, 32, 0.18);
    color: var(--sra-gold);
}

/* --------------------------------------------------------------------------
   7) قسم الـ Hero — .sra-hero
   خلفية داكنة بتدرج زمردي/ذهبي + blobs متحركة + نمط هندسي خفيف
   -------------------------------------------------------------------------- */
.sra-hero {
    position: relative;
    overflow: hidden;
    background: var(--sra-grad-hero);
    background-color: #1D0F0F;
    color: #ffffff;
    isolation: isolate;
}

/* النمط الهندسي الخفيف فوق الـ hero */
.sra-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.06;
    background-image:
        linear-gradient(rgba(218, 165, 32, 0.6) 1px, transparent 1px),
        linear-gradient(90deg, rgba(218, 165, 32, 0.6) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* الـ blobs المتحركة */
.sra-blob {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.22;
    z-index: 0;
    pointer-events: none;
}

/* الاسم القديم sra-blob-green مُبقًى كمُرادف متوافق حتى تحديث كل الصفحات */
.sra-blob-maroon,
.sra-blob-green {
    background: linear-gradient(135deg, #B54141 0%, #6E2B2B 100%);
    top: -160px;
    inset-inline-start: -160px;
    animation: sra-float 16s ease-in-out infinite alternate;
}

.sra-blob-gold {
    background: #DAA520;
    bottom: -160px;
    inset-inline-end: -160px;
    animation: sra-float 20s ease-in-out infinite alternate-reverse;
}

/* --------------------------------------------------------------------------
   8) عناوين الأقسام — .sra-section-title
   عنوان تحريري ضخم مع شريط ذهبي مائل/متدرج
   -------------------------------------------------------------------------- */
.sra-section-title {
    position: relative;
    display: inline-block;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: var(--sra-text);
    padding-inline-start: 1.25rem;
}

.sra-section-title::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 12%;
    bottom: 12%;
    width: 0.5rem;
    border-radius: 0.25rem;
    background: var(--sra-grad-gold);
    transform: skewX(-8deg);
    box-shadow: var(--sra-shadow-gold);
}

/* شريط ذهبي متدرج أسفل العنوان */
.sra-section-title::after {
    content: '';
    position: absolute;
    inset-inline-start: 1.25rem;
    bottom: -0.6rem;
    height: 3px;
    width: 40%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sra-gold), transparent);
}

/* --------------------------------------------------------------------------
   9) البطاقات — .sra-card
   بطاقة حديثة بزوايا كبيرة وحدود متدرجة وظلال عميقة و hover يرتفع
   -------------------------------------------------------------------------- */
.sra-card {
    position: relative;
    background-color: var(--sra-bg-elevated);
    border-radius: var(--sra-radius);
    padding: 1.75rem;
    box-shadow: var(--sra-shadow-sm);
    border: 1px solid var(--sra-border);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
}

/* حدود متدرجة عند الـ hover */
.sra-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, var(--sra-gold), transparent 40%, var(--sra-accent) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.sra-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sra-shadow-lg);
}

.sra-card:hover::before {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   10) شبكة Bento — .sra-bento
   بطاقات إحصائيات بأحجام متفاوتة
   -------------------------------------------------------------------------- */
.sra-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.sra-bento > * {
    grid-column: span 1;
}

/* عناصر كبيرة متفاوتة */
.sra-bento .sra-bento-wide  { grid-column: span 2; }
.sra-bento .sra-bento-tall  { grid-row: span 2; }
.sra-bento .sra-bento-hero  { grid-column: span 2; grid-row: span 2; }

@media (max-width: 900px) {
    .sra-bento { grid-template-columns: repeat(2, 1fr); }
    .sra-bento .sra-bento-hero { grid-column: span 2; }
}

@media (max-width: 560px) {
    .sra-bento { grid-template-columns: 1fr; }
    .sra-bento > *,
    .sra-bento .sra-bento-wide,
    .sra-bento .sra-bento-hero { grid-column: span 1; grid-row: auto; }
}

/* --------------------------------------------------------------------------
   11) الخط الزمني — .sra-timeline
   خط زمني عمودي بنقاط ذهبية متوهجة
   -------------------------------------------------------------------------- */
.sra-timeline {
    position: relative;
    padding-inline-start: 2rem;
}

/* الخط العمودي */
.sra-timeline::before {
    content: '';
    position: absolute;
    inset-inline-start: 0.5rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: linear-gradient(180deg, var(--sra-gold), var(--sra-accent) 70%, transparent);
    opacity: 0.5;
}

.sra-timeline-item {
    position: relative;
    padding-bottom: 2rem;
}

/* النقطة الذهبية المتوهجة */
.sra-timeline-item::before {
    content: '';
    position: absolute;
    inset-inline-start: -1.75rem;
    top: 0.35rem;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: var(--sra-grad-gold);
    box-shadow:
        0 0 0 4px rgba(218, 165, 32, 0.18),
        0 0 14px rgba(218, 165, 32, 0.6);
}

/* --------------------------------------------------------------------------
   12) صور الأعضاء — .sra-avatar / .sra-avatar-emoji
   -------------------------------------------------------------------------- */
.sra-avatar {
    position: relative;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    padding: 4px;
    background: var(--sra-grad-ring);
    box-shadow: var(--sra-shadow-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sra-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    background-color: var(--sra-bg-subtle);
}

.sra-avatar:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--sra-shadow-gold);
}

/* بديل إيموجي بخلفية متدرجة */
.sra-avatar-emoji {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.25rem;
    background: var(--sra-grad-primary);
    color: var(--sra-gold-soft);
    box-shadow: var(--sra-shadow-md);
    border: 3px solid rgba(218, 165, 32, 0.4);
}

/* أيقونة SVG الخطية داخل أفاتار العضو (بديل الإيموجي) */
.sra-avatar-emoji .sra-icon {
    width: 3.5rem;
    height: 3.5rem;
    stroke-width: 1.5;
    color: var(--sra-gold-soft);
}

/* --------------------------------------------------------------------------
   13) الأزرار — .sra-btn-primary / .sra-btn-ghost
   -------------------------------------------------------------------------- */
.sra-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--sra-grad-gold);
    color: #2B1212;
    font-weight: 700;
    padding: 0.8rem 2rem;
    border-radius: 999px;
    box-shadow: var(--sra-shadow-gold);
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.sra-btn-primary:hover {
    transform: translateY(-2px) scale(1.03);
    filter: brightness(1.05);
    box-shadow: 0 14px 38px rgba(218, 165, 32, 0.4);
}

.sra-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-weight: 700;
    padding: 0.8rem 2rem;
    border-radius: 999px;
    transition: all 0.25s ease;
}

.sra-btn-ghost:hover {
    background-color: rgba(255, 255, 255, 0.26);
    border-color: var(--sra-gold);
    color: var(--sra-gold-soft);
}

/* --------------------------------------------------------------------------
   14) الفوتر — .sra-footer
   فوتر داكن بتدرج مع أعمدة وشريط سفلي
   -------------------------------------------------------------------------- */
.sra-footer {
    position: relative;
    background: linear-gradient(180deg, var(--sra-primary-deep) 0%, #2A1414 60%, #1D0F0F 100%);
    color: #E9DAD6;
    overflow: hidden;
    isolation: isolate;
}

/* لمسة زخرفية علوية ذهبية */
.sra-footer::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 3px;
    background: var(--sra-grad-gold);
    z-index: 1;
}

.sra-footer-title {
    color: var(--sra-gold-soft);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.9rem;
    position: relative;
    padding-inline-start: 0.9rem;
}

.sra-footer-title::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.3rem;
    height: 1rem;
    border-radius: 0.2rem;
    background: var(--sra-gold);
}

.sra-footer-text {
    color: #C9AEAA;
    font-size: 0.9rem;
    line-height: 1.8;
}

.sra-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sra-footer-links li {
    margin-bottom: 0.5rem;
}

.sra-footer-links a {
    color: #C9AEAA;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.sra-footer-links a::before {
    content: '';
    width: 0;
    height: 2px;
    background: var(--sra-gold);
    transition: width 0.25s ease;
}

.sra-footer-links a:hover {
    color: var(--sra-gold-soft);
}

.sra-footer-links a:hover::before {
    width: 0.9rem;
}

.sra-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    padding: 1.1rem 1rem;
    color: #9C807C;
    font-size: 0.85rem;
    background-color: rgba(0, 0, 0, 0.25);
}

/* --------------------------------------------------------------------------
   15) أزرار السوشل — .sra-social-btn
   أزرار دائرية بـ hover ذهبي
   -------------------------------------------------------------------------- */
.sra-social-btn {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #E9DAD6;
    font-weight: 700;
    font-size: 0.95rem;
    transition: all 0.25s ease;
}

.sra-social-btn .sra-icon {
    width: 1.1rem;
    height: 1.1rem;
    stroke-width: 1.8;
}

.sra-social-btn:hover {
    background-color: var(--sra-gold);
    border-color: var(--sra-gold-soft);
    color: var(--sra-primary-deep);
    transform: translateY(-3px);
    box-shadow: var(--sra-shadow-gold);
}

/* --------------------------------------------------------------------------
   16) الحركات — Keyframes + Reveal
   -------------------------------------------------------------------------- */
@keyframes sra-fade-up {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes sra-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes sra-float {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(60px, 50px) scale(1.18); }
}

/* عناصر الإظهار عند التمرير — يضيف site.js كلاس is-visible */
.sra-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.sra-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* تأخير اختياري لتتابع الظهور */
.sra-reveal-delay-1 { transition-delay: 0.1s; }
.sra-reveal-delay-2 { transition-delay: 0.2s; }
.sra-reveal-delay-3 { transition-delay: 0.3s; }
.sra-reveal-delay-4 { transition-delay: 0.4s; }

/* تخفيف الحركة لمن يفضّل تقليلها */
@media (prefers-reduced-motion: reduce) {
    .sra-reveal { opacity: 1; transform: none; transition: none; }
    .sra-blob, .sra-hero::before { animation: none; }
    .sra-sport-badge, .animate-ticker, .animate-spin-slow, .animate-float-y, .animate-pulse { animation: none !important; }
    html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   17) أرقام الإحصائيات — .sra-stat-number
   -------------------------------------------------------------------------- */
.sra-stat-number {
    font-weight: 900;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    line-height: 1;
    background: var(--sra-grad-gold);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   18) عارض صفحات الرياضات
   .sra-sport-hero / .sra-sport-content / .sra-stats-sidebar
   -------------------------------------------------------------------------- */
.sra-sport-hero {
    position: relative;
    overflow: hidden;
    background: var(--sra-grad-hero);
    background-color: #1D0F0F;
    color: #ffffff;
    padding: 8rem 1rem 4.5rem;
    text-align: center;
    isolation: isolate;
}

.sra-sport-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.06;
    background-image:
        linear-gradient(rgba(218, 165, 32, 0.6) 1px, transparent 1px),
        linear-gradient(90deg, rgba(218, 165, 32, 0.6) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.sra-sport-hero .sra-sport-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(7rem, 14vw, 9.5rem);
    height: clamp(7rem, 14vw, 9.5rem);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--sra-gold-soft);
    box-shadow: inset 0 0 44px rgba(218, 165, 32, 0.14), 0 20px 50px rgba(0, 0, 0, 0.35);
    animation: sra-float 6s ease-in-out infinite alternate;
}

.sra-sport-hero .sra-sport-badge .sra-icon {
    width: clamp(4rem, 8vw, 5.5rem);
    height: clamp(4rem, 8vw, 5.5rem);
    stroke-width: 1.4;
}

/* --------------------------------------------------------------------------
   نظام أيقونات SRA الخطية — .sra-icon (sprite من site.js: SRA_ICONS)
   -------------------------------------------------------------------------- */
.sra-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ضمان بقاء الرموز المحقنة عبر <use> خطيةً بلون النص المحيط (لا كتل سوداء) */
.sra-icon use {
    fill: none !important;
    stroke: currentColor !important;
}

.sra-icon-lg {
    width: 2rem;
    height: 2rem;
    stroke-width: 1.75;
}

.sra-icon-xl {
    width: 4.5rem;
    height: 4.5rem;
    stroke-width: 1.5;
}

.sra-sport-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 900px) {
    .sra-sport-content { grid-template-columns: 1fr; }
}

/* الشريط الجانبي للإحصائيات — sticky */
.sra-stats-sidebar {
    position: sticky;
    top: 6.5rem;
}

/* فواصل الإحصائيات داخل الشريط الجانبي تتبع لون حدود الهوية */
.sra-stats-sidebar .divide-y > * + * {
    border-color: var(--sra-border);
}

@media (max-width: 900px) {
    .sra-stats-sidebar { position: static; }
}

/* --------------------------------------------------------------------------
   19) كلاسات الألوان الدلالية — بديل موحد عن أي درجات خضراء سابقة
   -------------------------------------------------------------------------- */
.c-accent        { color: var(--sra-accent); }
.c-primary       { color: var(--sra-primary); }
.c-primary-deep  { color: var(--sra-primary-deep); }
.c-rose          { color: var(--sra-rose); }

html.dark .c-accent { color: var(--sra-accent-soft); }

.bg-accent-soft  { background-color: rgba(181, 65, 65, 0.10); }
.bg-grad-primary { background: var(--sra-grad-primary); }
.bg-surface      { background-color: var(--sra-bg-elevated); }

/* --------------------------------------------------------------------------
   20) موتيف شاشة الدخول — خطوط منحنية انسيابية فوق الـ hero
   -------------------------------------------------------------------------- */
.sra-hero-waves {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   21) وميض الشعار — .sra-logo-shimmer
   شريط ضوء قطري يعبر شعار الهيدر كل ~4 ثوانٍ (يلفّه site.js بـ .sra-shimmer-wrap)
   -------------------------------------------------------------------------- */
.sra-logo-shimmer {
    position: relative;
}

.sra-shimmer-wrap {
    position: relative;
    display: inline-flex;
    overflow: hidden;
    border-radius: 1rem;
    isolation: isolate;
}

.sra-shimmer-wrap::after {
    content: '';
    position: absolute;
    inset: -20%;
    z-index: 1;
    background: linear-gradient(115deg,
        transparent 42%,
        rgba(255, 255, 255, 0.28) 48%,
        rgba(255, 255, 255, 0.50) 50%,
        rgba(255, 255, 255, 0.28) 52%,
        transparent 58%);
    transform: translateX(-130%);
    animation: sra-logo-shimmer 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes sra-logo-shimmer {
    0%   { transform: translateX(-130%); }
    38%  { transform: translateX(130%); }
    100% { transform: translateX(130%); }
}

@media (prefers-reduced-motion: reduce) {
    .sra-shimmer-wrap::after { animation: none; }
    .sra-hero-waves { display: none; }
}