:root {
    --bg-dark: #04160e;
    --royal-green: #0a3d29;
    --gold-gradient: linear-gradient(145deg, #f9e27d, #d4af37, #b8860b);
    --gold-text: #d4af37;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(212, 175, 55, 0.2);
    --red-gradient: linear-gradient(145deg, #ff4d4d, #b30000);
    --white: #ffffff;
}

* {
    font-family: 'Montserrat', sans-serif !important;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

body {
    font-family: 'Montserrat', sans-serif;
    background: radial-gradient(circle at center, var(--royal-green) 0%, var(--bg-dark) 100%);
    color: var(--white);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 100px; /* لترك مساحة للهيدر الثابت */
    overflow-x: hidden;
}
/* ==========================================================================
   2. الهيدر والقائمة (Header & Navigation)
   ========================================================================== */
header {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1000;
    background: var(--bg-dark);
}
.top-bar {
    background: var(--gold-gradient);
    color: #000;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
    padding: 8px 0;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.nav-container {
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
}
.logo span {
    color: var(--gold-text);
}
.nav-links {
    display: flex;
    gap: 25px;
}
.nav-links a {
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    transition: 0.3s ease;
}
.nav-links a:hover {
    color: var(--gold-text);
}
.header-logo {
    height: 50px;       /* هذا هو الارتفاع الأساسي، يمكنك تغييره حسب رغبتك */
    width: auto;        /* يحافظ على تناسق العرض مع الارتفاع تلقائياً */
    max-width: 180px;   /* يمنع الصورة من التمدد بشكل عرضي مشوه */
    object-fit: contain; /* يضمن عدم قص أي جزء من الصورة */
    display: block;
}
/* تعديل المربع الزجاجي ليتناسب مع الصورة */
.glass-card {
    position: relative;
    z-index: 5;
    margin: 30px auto; 
}
@media (max-width: 600px) {
    .hero-banner {
        height: 120px;
        margin-bottom: -35px;
    }
}
/* ==========================================================================
   3. الحاوية الزجاجية الرئيسية (Glass Card)
   ========================================================================== */
main {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 10px 20px;
}
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    padding: 50px 30px;
    border-radius: 30px;
    text-align: center;
    max-width: 850px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.imagq {
    /* التوسيط داخل الصفحة (حتى لو صغر حجم الحاوية) */
    width: fit-content;      /* يجعل عرض الحاوية على قد الصور فقط */
    max-width: 100%;          /* لضمان عدم خروجها عن الشاشة في الموبايل */
    margin-left: auto;       /* سنتر الحاوية من اليسار */
    margin-right: auto;      /* سنتر الحاوية من اليمين */
    margin-bottom: 30px;     /* المسافة تحت الحاوية */

    /* التوسيط للصور بالداخل والفراغات */
    display: flex;
    justify-content: center; 
    align-items: center;
    gap: 20px;               /* الفارق بين الصور */
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.05); 
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px 25px;      /* زيادة بسيطة في الحواف لتناسق أجمل */
}
    .imagq img {
    width: 60px;            /* يمكنك تغيير الرقم (مثلاً 50px) لتصغيرها أكثر */
    height: auto;           /* الحفاظ على تناسق الطول مع العرض */
    object-fit: contain;    /* لضمان عدم تشوه الصورة */
    transition: transform 0.3s ease; /* لمسة جمالية عند مرور الماوس */
}
/* تأثير بسيط عند مرور الماوس (اختياري) */
.imagq img:hover {
    transform: scale(1.1);
}

.date {
    color: var(--gold-text);
    font-size: 14px;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.title {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.divider {
    height: 2px;           /* سمك الخط (رقيق وأنيق) */
    width: 400px;           /* تقليل الطول من 400px إلى 80px ليصبح صغيراً في الوسط */
    background: var(--gold-gradient);
    margin: 15px auto;     /* تقليل المسافات حوله */
    border-radius: 2px;    /* حواف مستقيمة وبسيطة */
    opacity: 0.8;          /* شفافية بسيطة ليعطي لمسة جمالية */
}

@media (max-width: 600px) {
    .divider {
        width: 200px; /* أصغر أكثر على شاشات الجوال */
    }
    .title {
        font-size: 1rem;
    }
}
.description {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 30px;
}
/* ==========================================================================
   11. جدول الإحصائيات المرتب (Structured Mini Table)
   ========================================================================== */
.stats-table-card {
    padding: 15px !important;
    margin: 20px auto;
    max-width: 400px; /* حجم ملموم ومرتب */
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(212, 175, 55, 0.1) !important;
    border-radius: 12px !important;
    margin-bottom: 80px;
}
.performance-title {
    color: #d4af37;
    font-size: 20px;
    margin-bottom: 10px;
}

.performance-table {
    width: 100%;
    border-collapse: collapse; /* لإزالة الفراغات غير المرتبة */
    margin-top: 10px;
}

.performance-table th {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.performance-table td {
    padding: 12px 10px; /* مسافة موحدة لكل الأسطر */
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    vertical-align: middle;
}

/* ترتيب النصوص لليسار والأرقام لليمين */
.performance-table .badge-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #d4af37;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px; /* مسافة ثابتة بين النقطة والنص */
}
.performance-table .badge-value {
    font-size: 1.1rem;
    font-weight: 800;
    text-align: right; /* محاذاة الأرقام لليمين لترتيبها تحت بعضها */
    font-family: 'Montserrat', sans-serif;
}
.dot {
    height: 6px;
    width: 6px;
    flex-shrink: 0; /* لمنع النقطة من التمدد */
}

/* إزالة الخط السفلي من آخر سطر لجمالية أفضل */
.performance-table tr:last-child td {
    border-bottom: none;
}

.stats-table-card .divider {
    width: 200px !important;    /* تقليل الطول ليكون صغيراً جداً وموسطاً */
    height: 2px !important;    /* تقليل السمك ليكون رقيقاً */
    background: var(--gold-gradient);
    margin: 5px auto 15px auto !important; /* تقليل المسافات حوله ليكون مرتباً */
    border: none !important;   /* إلغاء أي حدود إضافية */
}

.medals-grid {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
}

.medal {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-dark);
}
.medal.gold { background: var(--gold-gradient); }
.medal.red-np { background: var(--red-gradient); }

.medal span {
    color: #000;
    font-weight: 900;
    font-size: 1.4rem;
}

/* حاوية حصان الحذر للتوسط الكامل */
.attention-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* توسيط أفقي */
    justify-content: center;
    width: 100%;
    margin: 40px 0; /* مسافة عمودية واضحة */
    clear: both;
}
/* كلمة Attention */
.attention-label {
    color: #fff;
    font-size: 1.0rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 2px;
    text-align: center;
}

/* الدائرة البرتقالية (الحصان) */
.medal.attention {
    background: linear-gradient(135deg, #FF8C00, #FF4500) !important;
    border: 3px solid #fff;
    box-shadow: 0 4px 20px rgba(255, 69, 0, 0.5);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    font-size: 1.5rem;
    font-weight: 800;
}
/* التنسيق الزجاجي لجدول الأرباح */
.payout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 40px;
}
.payout-item {
    background: rgba(255, 255, 255, 0.05); /* تأثير Glassmorphism */
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px 10px;
    text-align: center;
}
.payout-item span {
    display: block;
    color: var(--gold-text, #d4af37);
    font-size: 13px;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-weight: 550;
}
.payout-item strong {
    display: block;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}
.nav-btn {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--gold-text);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.nav-btn:hover {
    background: var(--gold-gradient);
    color: #000;
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
    border-color: transparent;
}
.nav-btn:active {
    transform: scale(0.9);
}
/* تحسين شكل حاوية التاريخ والأزرار */
.result-nav-container {
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 20px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: inline-flex !important; /* لضمان بقائها في الوسط */
}
#result-date {
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    letter-spacing: 1px;
}
/* الحاوية الأساسية */
#courses-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 15px 0;
}

/* بطاقة السباق بتأثير زجاجي */
.race-item {
    background: rgba(255, 255, 255, 0.03); /* شفافية زجاجية */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
/* الشريط الذهبي الجانبي لتمييز السباق */
.race-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: linear-gradient(to bottom, #d4af37, #8a6d3b);
}
.race-item:hover {
    transform: translateY(-5px);
    border-color: rgba(212, 175, 55, 0.4);
}
/* رأس البطاقة (رقم السباق والاسم) */
.race-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.race-number {
    background: #d4af37;
    color: #000;
    padding: 2px 10px;
    border-radius: 4px;
    font-weight: 900;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

.race-code {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
}
/* منطقة التوقعات والأرقام */
.race-predictions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 15px;
}
/* تنسيق الدوائر للأرقام المتوقعة */
.pred-number {
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
/* تحسين العرض للهواتف */
@media (max-width: 480px) {
    .race-item {
        padding: 15px;
    }
    .race-code {
        font-size: 0.9rem;
    }
    .pred-number {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }
}
/* تنسيق الدائرة الخضراء عند الفوز */
.winner-match {
    background: linear-gradient(145deg, #28a745, #1e7e34) !important; /* لون أخضر */
    border-color: #29f158 !important;
    transform: scale(1.1); /* تكبير بسيط للتمييز */
}
.winner-match span {
    color: #121212 !important;
   
}
/* تحسين العرض للهواتف */
@media (max-width: 480px) {
    .payout-grid {
        grid-template-columns: 1fr 1fr; /* عرض عنصرين في كل صف */
        gap: 10px;
    }
    .payout-item strong {
        font-size: 0.95rem;
    }
}

#timer {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
}
/* تنسيق صندوق التحليل */
.analysis-box {
    margin-top: 30px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-left: 4px solid var(--gold-text);
    border-radius: 8px;
    text-align: left; /* لأن التحليل بالفرنسية */
}
.analysis-title {
    color: var(--gold-text);
    font-size: 1.1rem;
    margin-bottom: 10px;
    font-family: 'Playfair Display', serif;
}
.analysis-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    line-height: 1.6;
    font-style: italic;
}
/* هذا هو الكلاس الذي استدعيناه في كود الجافا سكريبت أعلاه */
.horse-gold {
    color: var(--gold-text);
    font-weight: bold;
    font-size: 1.1em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* لجعله واضحاً جداً */
}
/* ==========================================================================
   تنسيق حاوية SEO لضمان تطابق الأبعاد مع حاوية التحليل
   ========================================================================== */
.container .analysis-section {
    margin-top: 20px;
    margin-bottom: 40px;
}
/* التأكد من أن النصوص تتبع التنسيق الأصلي للموقع */
.analysis-text {
    line-height: 1.6;
    margin-bottom: 15px;
}

.analysis-title {
    margin-bottom: 10px;
    color: var(--gold-text);
}
/* ==========================================================================
   6. قسم SEO المدمج (Inner SEO Section)
   ========================================================================== */
.inner-seo-section {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    text-align: left;
}
.inner-seo-title {
    color: var(--gold-text);
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    margin-bottom: 20px;
}
.inner-seo-subtitle {
    color: var(--white);
    font-size: 1.1rem;
    margin: 20px 0 10px 0;
    font-weight: 600;
}
.inner-seo-p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 15px;
    font-weight: 300;
}
/* تنسيقات صفحة الكورس */
.course-info-bar {
    background: rgba(255, 255, 255, 0.05);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px auto;
    max-width: 500px;
}
.info-item { color: #d4af37; font-weight: 600; font-size: 0.85rem; }

/* تنسيق حاوية الأزرار لتكون مرتبة */
.filter-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 15px auto 25px auto;
    flex-wrap: wrap;
    padding: 0 10px;
    max-width: 100%;
}
/* التنسيق الجديد للأزرار (صغير ومناسب للهاتف) */
.filter-btn {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(212, 175, 55, 0.4);
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    font-size: 0.75rem; /* حجم خط صغير */
    font-family: 'Montserrat', sans-serif;
    transition: all 0.3s ease;
    white-space: nowrap;
}
/* شكل الزر عند الضغط عليه (Active) */
.filter-btn.active {
    background: #d4af37;
    color: #000000;
    border-color: #d4af37;
    font-weight: 600;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.filter-btn:hover {
    border-color: #d4af37;
    background: rgba(212, 175, 55, 0.1);
}
/* حالة الزر النشط */
.filter-btn.active {
    background: #d4af37;
    color: #000;
    font-weight: 600;
    border-color: #d4af37;
}

/* لمسة إضافية خاصة بالهواتف فقط */
@media (max-width: 480px) {
    .filter-btn {
        padding: 5px 10px;
        font-size: 0.7rem;
        letter-spacing: 0px;
    }
    .filter-tabs {
        gap: 4px;
    }
}
.course-seo-section { margin-top: 40px; padding: 20px; border-top: 1px solid rgba(255,255,255,0.1); }
.seo-title { color: #d4af37; font-size: 1.1rem; }
.seo-text { color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; }

/* تصغير خانات أرقام التوقعات */
.pred-number {
    width: 30px;          /* العرض الأصغر */
    height: 30px;         /* الطول الأصغر */
    line-height: 30px;    /* لضمان توسط الرقم داخل الدائرة */
    font-size: 0.85rem;   /* حجم خط أصغر للرقم */
    margin: 3px;          /* تقليل المسافات بين الخانات */
    display: inline-block;
    text-align: center;
    border-radius: 50%;   /* لجعلها دائرية */
    background: rgba(212, 175, 55, 0.1); /* لون الخلفية الذهبي الخفيف */
    border: 1px solid #d4af37;           /* الإطار الذهبي */
    color: #fff;
    font-weight: bold;
}

/* تصغير المسافات في حاوية السباق بالكامل لتناسب الأحجام الجديدة */
.race-item {
    padding: 10px;        /* تقليل الحشو الداخلي */
    margin-bottom: 10px;
}

.race-header {
    font-size: 0.9rem;    /* تصغير خط عنوان السباق (R1 C1) */
    margin-bottom: 8px;
}
/* ==========================================================================
   7. الفوتر (Footer)
   ========================================================================== */
footer {
    padding: 40px 20px;
    text-align: center;
    background: rgba(0,0,0,0.2);
    color: #666;
    font-size: 11px;
}

footer a:hover {
    color: var(--gold-text) !important;
    text-decoration: underline !important;
}

@media (max-width: 600px) {
    body { padding-top: 180px; }
    .nav-container { flex-direction: column; gap: 15px; }
    .glass-card { padding: 30px 15px; }
    .inner-seo-section { text-align: center; }
    .inner-seo-title { font-size: 1.3rem; }
}

/* تنسيق الفوتر الاحترافي */
.main-footer {
    margin-top: 50px;
    padding: 30px 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
}
.footer-content {
    max-width: 800px;
    margin: 0 auto;
}
/* حاوية التحذير القانوني */
.legal-warning-box {
    background: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    margin-bottom: 25px;
}

.legal-warning-box h4 {
    color: #d4af37;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.legal-warning-box p {
    color: #ccc;
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
}

/* منع انكسار رقم الهاتف */
.phone-number {
    color: #fff;
    font-weight: bold;
    white-space: nowrap; /* يمنع نزول الرقم لسطر جديد */
    display: inline-block;
    background: rgba(212, 175, 55, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

/* روابط الفوتر */
.footer-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.footer-links a {
    color: #888;
    text-decoration: none;
    font-size: 11px;
    transition: 0.3s ease;
}

.footer-links a:hover {
    color: #d4af37;
}
/* تحسينات للهواتف */
@media (max-width: 480px) {
    .legal-warning-box p {
        font-size: 11px;
    }
}
/* نسخة مصغرة واحترافية */
#countdown-container {
    background: #1a1a1a;
    color: white;
    padding: 10px 15px;
    text-align: center;
    border-radius: 10px;
    margin: 10px auto;
    max-width: 280px; /* تقليل العرض */
    border: 1px solid rgba(251, 192, 45, 0.4);
    font-family: sans-serif;
}
.timer-label-top {
    font-size: 0.65rem;
    color: #fbc02d;
    margin-bottom: 5px;
    display: block;
    font-weight: bold;
}
.timer-display {
    display: flex;
    justify-content: center;
    gap: 8px; /* تقليل المسافات */
    align-items: center;
}

.time-unit {
    display: flex;
    align-items: center; /* جعل الرقم والكلمة بجانب بعض أو فوق بعض بشكل مضغوط */
    flex-direction: column;
}
.time-unit span:first-child {
    font-size: 1.2rem; /* تصغير الخط */
    font-weight: bold;
    background: #333;
    padding: 4px 8px;
    border-radius: 5px;
    min-width: 35px;
    border-bottom: 2px solid #fbc02d;
}
.unit-label {
    font-size: 0.5rem; /* تصغير الكلمات التوضيحية */
    margin-top: 3px;
    color: #777;
}

.separator {
    font-size: 1rem;
    color: #fbc02d;
    padding-bottom: 12px; /* لضبط ميزان النقطتين */
}

/* تنسيق قسم SEO المتناسق مع TOU CALL */
.course-seo-container {
    max-width: 850px;
    width: 100%;
    margin: 40px auto;
    padding: 0 20px;
}
.seo-glass-content {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    padding: 30px;
    border-radius: 20px;
    text-align: left;
}
.seo-main-title {
    color: var(--gold-text);
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    padding-bottom: 10px;
}

.seo-intro {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

.seo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.seo-card h3 {
    color: var(--gold-text);
    font-size: 1.1rem;
    margin-bottom: 12px;
}
.seo-card ul li {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    margin-bottom: 8px;
    position: relative;
    padding-left: 15px;
}
.seo-card ul li::before {
    content: '•';
    color: var(--gold-text);
    position: absolute;
    left: 0;
}
.seo-quote {
    margin-top: 30px;
    background: rgba(212, 175, 55, 0.05);
    border-left: 4px solid var(--gold-text);
    padding: 15px;
    font-style: italic;
    color: #fff;
    font-size: 0.9rem;
}

/* توافق مع الجوال */
@media (max-width: 600px) {
    .seo-grid {
        grid-template-columns: 1fr;
    }
    .seo-main-title {
        font-size: 1.3rem;
    }
}
/* --- التصميم الاحترافي الشامل (Pro Glass Design) --- */
.pro-race-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 15px;
    margin-bottom: 15px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    backdrop-filter: blur(5px);
    transition: transform 0.3s ease;
}
.pro-race-card:hover {
    transform: translateY(-3px);
    border-color: #d4af37;
}
.pro-header {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.2);
}
.r-num { color: #d4af37; font-weight: 900; font-size: 1rem; margin-right: 10px; }
.r-venue { color: #fff; font-size: 0.8rem; letter-spacing: 1px; font-weight: 500; }

.status-badge {
    font-size: 0.6rem;
    padding: 3px 8px;
    border-radius: 20px;
    font-weight: 800;
}
.status-badge.live { background: #f39c12; color: #000; animation: blink 1.5s infinite; }
.status-badge.final { background: #27ae60; color: #fff; }

.pro-content {
    display: flex;
    padding: 15px;
    align-items: center;
}

.split-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.split-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: #7f8c8d;
    margin-bottom: 10px;
}
.split-label.red { color: #ff4d4d; text-shadow: 0 0 10px rgba(255,77,77,0.3); }

.split-divider {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, rgba(212,175,55,0.3), transparent);
    margin: 0 10px;
}

.ball-group { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }

.ball-p, .ball-r {
    width: 30px;
    height: 30px;
    border-radius: 8px; /* شكل مربع بزوايا مستديرة (أرقى من الدائرة) */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.ball-p { background: var(--gold-gradient); color: #000; box-shadow: 0 4px 10px rgba(212,175,55,0.2); }
.ball-r { background: #1a1a1a; color: #fff; border: 1px solid #d4af37; }

.wait-shimmer {
    font-size: 0.7rem;
    color: #555;
    font-style: italic;
}
/* أنيميشن بسيط للتنبيه */
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

@media (max-width: 500px) {
    .pro-content { flex-direction: column; gap: 20px; }
    .split-divider { width: 80%; height: 1px; margin: 0 auto; }
}
@media (max-width: 600px) {
    .share-text { display: none; } /* في الموبايل نظهر الأيقونة فقط لتوفير المساحة */
    .whatsapp-share-btn { padding: 12px; border-radius: 50%; }
}
/* --- التصميم الاحترافي الشامل (Pro Glass Design) --- */
.pro-race-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 15px;
    margin-bottom: 15px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    backdrop-filter: blur(5px);
    transition: transform 0.3s ease;
}
.pro-race-card:hover {
    transform: translateY(-3px);
    border-color: #d4af37;
}

.pro-header {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.2);
}
.r-num { color: #d4af37; font-weight: 900; font-size: 1rem; margin-right: 10px; }
.r-venue { color: #fff; font-size: 0.8rem; letter-spacing: 1px; font-weight: 500; }

.status-badge {
    font-size: 0.6rem;
    padding: 3px 8px;
    border-radius: 20px;
    font-weight: 800;
}
.status-badge.live { background: #f39c12; color: #000; animation: blink 1.5s infinite; }
.status-badge.final { background: #27ae60; color: #fff; }

.pro-content {
    display: flex;
    padding: 15px;
    align-items: center;
}
.split-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.split-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: #7f8c8d;
    margin-bottom: 10px;
}
.split-label.red { color: #27ae60; text-shadow: 0 0 10px rgba(255,77,77,0.3); }

.split-divider {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, rgba(212,175,55,0.3), transparent);
    margin: 0 10px;
}

.ball-group { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }

.ball-p, .ball-r {
    width: 30px;
    height: 30px;
    border-radius: 8px; /* شكل مربع بزوايا مستديرة (أرقى من الدائرة) */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    transition: all 0.3s;
}
.ball-p { background: var(--gold-gradient); color: #000; box-shadow: 0 4px 10px rgba(212,175,55,0.2); }
.ball-r { background: #1a1a1a; color: #fff; border: 1px solid #d4af37; }

.wait-shimmer {
    font-size: 0.7rem;
    color: #555;
    font-style: italic;
}
/* أنيميشن بسيط للتنبيه */
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

@media (max-width: 500px) {
    .pro-content { flex-direction: column; gap: 20px; }
    .split-divider { width: 80%; height: 1px; margin: 0 auto; }
}
.main-text {
    font-size: 1.2rem;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.sub-text {
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 4px;
    opacity: 0.85;
}

.site-layout {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px; /* المسافة بين الإعلانات والمحتوى */
    max-width: 1400px;
    margin: 0 auto;
}

/* تنسيق الأعمدة الجانبية للإعلانات */
.side-ad {
    flex: 0 0 160px; /* عرض الإعلان الجانبي ثابت 160 بكسل */
    position: sticky;
    top: 20px; /* يجعل الإعلان يتبع الزائر عند النزول لأسفل */
    text-align: center;
    z-index: 10;
}
/* تنسيق الصور داخل الإعلانات الجانبية */
.side-ad img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* نص التحذير القانوني أسفل الإعلان */
.ad-warning {
    font-size: 8px;
    color: #999;
    margin-top: 5px;
    line-height: 1.1;
    text-transform: uppercase;
}
/* إخفاء الإعلانات الجانبية في الهواتف والأجهزة اللوحية */
@media (max-width: 1200px) {
    .side-ad {
        display: none !important;
    }
    
    .site-layout {
        display: block; /* العودة للوضع الطبيعي في الموبايل */
    }
}
/* الحاوية الخاصة بالبنر الجديد */
.banner-container-fixed {
    width: 100%;
    max-width: 100%;
    margin: 20px auto;
    text-align: center;
    overflow: hidden; /* لمنع أي جزء من الخروج عن الشاشة */
}

/* استهداف محتوى السكريبت وتصغيره في الهاتف */
@media (max-width: 768px) {
    .banner-container-fixed iframe, 
    .banner-container-fixed img, 
    .banner-container-fixed object {
        /* تقليص الحجم ليتناسب مع عرض الموبايل */
        max-width: 100% !important; 
        height: auto !important;
        /* إضافة خاصية التحجيم لضمان عدم التقطع */
        transform: scale(0.9); 
        transform-origin: center top;
    }
}
/* في الحاسوب يظهر بحجمه الطبيعي الكبر */
@media (min-width: 769px) {
    .banner-container-fixed iframe, 
    .banner-container-fixed img {
        width: 728px !important; /* أو العرض الأصلي للبنر */
        height: 90px !important;
    }
}

/* إخفاء إعلان العداد في الحاسوب بشكل افتراضي */
.mobile-only-ad {
    display: none; 
    width: 100%;
    margin: 15px auto;
    text-align: center;
    overflow: hidden;
}

/* إظهاره فقط في الهواتف (أقل من 768 بكسل) */
@media (max-width: 768px) {
    .mobile-only-ad {
        display: block !important; /* يظهر فقط في الموبايل */
    }
    
    /* تصغير محتوى السكريبت ليتناسب مع عرض الهاتف */
    .mobile-only-ad iframe, 
    .mobile-only-ad img {
        max-width: 100% !important;
        height: auto !important;
        transform: scale(0.95); /* تصغير بسيط ليناسب الشاشات الضيقة جداً */
        transform-origin: center top;
    }
}
/* تنسيق زر المراهنة الدائم */
.permanent-bet-container {
    text-align: center;
    margin: 25px auto;
    padding: 0 15px;
    clear: both;
}

.btn-main-affiliate {
    display: inline-block;
    background: linear-gradient(180deg, #0056b3 0%, #0045ad 100%);
    color: #ffffff !important;
    padding: 16px 45px;
    font-size: 19px;
    font-weight: 800;
    text-decoration: none !important;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 69, 173, 0.3);
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}

.btn-main-affiliate:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(0, 69, 173, 0.4);
    filter: brightness(1.1);
}

/* تعديل للهاتف فقط لضمان عدم التقطع */
@media (max-width: 768px) {
    .btn-main-affiliate {
        width: 100%; /* يأخذ عرض الشاشة بالكامل في الهاتف */
        box-sizing: border-box;
        font-size: 17px;
        padding: 15px 10px;
    }
}

/* إصلاح حجم البنرات الجديدة لتناسب الهاتف تلقائياً */
.results-new-banner {
    width: 100%;
    text-align: center;
    margin: 15px 0;
    overflow: hidden;
}

.ga-responsive-container {
    display: inline-block;
    max-width: 100%;
}

/* استهداف محتوى السكريبت (iframe أو img) داخل الموبايل */
@media (max-width: 768px) {
    .ga-responsive-container iframe, 
    .ga-responsive-container img,
    .ga-responsive-container ins {
        max-width: 100% !important;
        height: auto !important;
        /* تصغير الحجم بنسبة بسيطة لضمان التوسط الكامل */
        transform: scale(0.92);
        transform-origin: center top;
    }
}
/* تنسيق خاص بالإعلانات الجانبية للصفحة الأخرى */
.sidebar-ad {
    position: fixed;
    top: 150px; /* المسافة من الأعلى */
    width: 160px; /* عرض بنر Skyscraper المعتاد */
    z-index: 1000;
}

.ad-left {
    left: 10px; /* مسافة من اليسار */
}

.ad-right {
    right: 10px; /* مسافة من اليمين */
}

/* إخفاء الإعلانات في الجوال والتابلت تماماً */
@media (max-width: 1300px) {
    .sidebar-ad {
        display: none !important;
    }
}

/* لضمان عدم تداخل المحتوى مع الإعلانات في الصفحة الأخرى */
.content-container {
    max-width: 1000px;
    margin: 0 auto;
}