/* ==============================================
   ملف التنسيقات المخصصة لنسخة الهاتف فقط - نسخة نهائية ومصححة
   ============================================== */

/* كل الأكواد هنا لن تعمل إلا على الشاشات الصغيرة (أقل من 768px) */
@media (max-width: 768px) {

    /* --- 1. إصلاح الهيدر العلوي ومنع اختفاء الأيقونة --- */

    .header-top .header-live-match {
        display: none;
    }
    
    .header-top .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap; /* منع العناصر من النزول لسطر جديد */
    }

    .header-top .header-logo,
    .header-top .header-actions {
        flex-shrink: 0;
    }

    .mobile-header-calendar {
        flex-grow: 1;
        display: flex !important;
        justify-content: center;
        align-items: center;
        margin: 0 8px; /* تقليل الهامش لترك مساحة أكبر */
        min-width: 0;
        margin-left: 60px;
    }

    .mobile-header-calendar-inner {
        display: flex;
        background-color: #f0f2f5;
        border-radius: 20px;
        padding: 3px; /* تقليل الحشو */
    }

    .mobile-header-calendar .calendar-link {
        padding: 5px 9px; /* تقليل الحشو ليتناسب مع أصغر الشاشات */
        font-size: 11px;   /* تصغير الخط أكثر */
        font-weight: 700;
        color: #555;
        text-decoration: none;
        border-radius: 16px;
        transition: all 0.25s ease-in-out;
        white-space: nowrap;
    }

    .mobile-header-calendar .calendar-link.is-active {
        background-color: var(--theme-accent);
        color: #fff;
        box-shadow: 0 2px 6px rgba(240, 85, 85, 0.4);
    }

    /* --- 2. إصلاح القائمة المنبثقة (كاملة، RTL، وتصميم أفضل) --- */

    #primary-menu-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        visibility: hidden;
        z-index: 10000;
        transition: background-color 0.4s ease, visibility 0.4s;
    }

    #primary-menu-container.open {
        background-color: rgba(29, 31, 41, 0.7);
        visibility: visible;
        transition: background-color 0.4s ease, visibility 0s 0s;
        display: flex;
    }

    /* إصلاح: ضمان ظهور القائمة كاملة ودعم RTL */
    #primary-menu-container .main-menu {
        display: table !important; /* مهم لضمان ظهور المحتوى */
        flex-direction: column;
        width: 100%;
        max-width: 320px;
        height: 100%;
        background: #fff; /* خلفية بيضاء للقائمة */
        position: absolute;
        top: 0;
        right: -100%; /* تبدأ خارج الشاشة من اليمين (صحيح لـ RTL) */
        margin: 0; /* إزالة أي هوامش افتراضية */
        padding: 60px 0 20px 0; /* ترك مساحة في الأعلى لزر الإغلاق */
        box-shadow: -5px 0 25px rgba(0,0,0,0.2);
        overflow-y: auto;
        transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    #primary-menu-container.open .main-menu {
        right: 0;
    }

    /* إصلاح: تصميم عناصر القائمة مع دعم كامل لـ RTL */
    #primary-menu-container .main-menu > li {
        list-style: none;
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
        margin: 0;
    }

    #primary-menu-container .main-menu > li > a {
        padding: 15px 20px;
        font-size: 16px;
        font-weight: 700;
        color: #333;
        display: flex;
        align-items: center; /* محاذاة الأيقونة مع النص */
        text-align: right; /* محاذاة النص لليمين */
        text-decoration: none;
        transition: background-color 0.2s, color 0.2s;
    }

    #primary-menu-container .main-menu > li > a:hover {
        background-color: var(--theme-accent);
        color: #fff;
    }

    /* إصلاح: إضافة أيقونة بعد النص (مناسب لـ RTL) */
    #primary-menu-container .main-menu > li > a::after {
        content: '\f104'; /* أيقونة سهم لليسار */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 14px;
        margin-right: auto; /* تدفع الأيقونة لأقصى اليسار */
        padding-right: 15px;
    }

    /* إصلاح: تعديل مكان زر الإغلاق ليكون ثابتاً وواضحاً */
    .mobile-menu-toggle {
        z-index: 10001;
    }
    
    .mobile-menu-toggle.is-active {
        position: fixed;
        top: 15px;
        left: 15px; /* تغيير للجهة اليسرى ليكون فوق القائمة */
        color: var(--theme-accent);
    }

    .mobile-menu-toggle.is-active .fa-bars::before {
        content: '\f00d';
    }
}


/* =======================================================
   إصلاح نهائي ومُحسَّن للشريط السفلي في نسخة الهاتف
   ======================================================= */
   
.kora-article-content h2 {
  font-size: 22px;
  color: var(--theme-accent) !important;
}

.footer-widget ul li a {
  color: #fff !important;
}

.footer-bottom {
  border-top: 1px solid #fff;
  padding-top: 20px;
  text-align: center;
  color: #fff !important;
}

.footer-bottom a {
  color: #fff !important;
}

.kora-article-content h3 span {
  color: var(--theme-accent) !important;
  font-size: 20px;
}

.kora-article-content h3 {
  color: var(--theme-accent) !important;
  font-size: 20px;
}

.kora-article-content h4 {
  color: var(--theme-accent) !important;
  font-size: 19px;
}

.kora-article-content h4 span {
  color: var(--theme-accent) !important;
  font-size: 19px;
}


/* تنسيقات شريط أدوات المقال */
.article-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    padding: 10px 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid #eee;
    background-color: #f9f9f9;
    border-radius: 6px;
}
.article-tools > div {
    display: flex;
    align-items: center;
    gap: 8px;
}
.article-tools span {
    font-size: 14px;
    font-weight: 600;
    color: #555;
}
.tool-btn {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #444;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}
.tool-btn:hover {
    background-color: #e9e9e9;
    border-color: #aaa;
}
#text-to-speech-btn.is-playing {
    background-color: #FF5722;
    color: #fff;
    border-color: #FF5722;
}

@media (max-width: 768px) {
    #mobile-sticky-nav {
        background-color: var(--theme-primary) !important;
        display: block !important;
        transform: translateY(0) !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
    }
    
    .kora-article-title {
  font-size: 18px !important;
}

.kora-article-content h2 {
  font-size: 18px;
  color: var(--theme-accent) !important;
}

    #mobile-sticky-nav .mobile-sticky-nav-inner {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 5px !important;
        gap: 10px !important;
    }

    /* الجزء الأيمن: أيقونات الدوريات (ثابتة في مكانها) */
    #mobile-sticky-nav .sticky-league-icons {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        flex-shrink: 0 !important; /* مهم جداً لمنع الانكماش */
    }
    
    #mobile-sticky-nav .sticky-league-icons a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0.1) !important;
        border-radius: 6px !important;
        width: 36px !important;
        height: 36px !important;
        transition: background-color 0.2s;
    }

    #mobile-sticky-nav .sticky-league-icons img {
        width: 22px !important;
        height: 22px !important;
        border-radius: 50% !important;
    }

    /* الجزء الأيسر: روابط القائمة (تأخذ المساحة المتبقية وقابلة للتمرير) */
    #mobile-sticky-nav .sticky-menu-links {
        flex-grow: 1 !important; /* يأخذ كل المساحة المتاحة */
        min-width: 0; /* ضروري لعمل flex-grow مع overflow */
        overflow-x: auto !important;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    #mobile-sticky-nav .sticky-menu-links::-webkit-scrollbar {
        display: none;
    }

    #mobile-sticky-nav .mobile-sticky-menu {
        display: flex !important;
        justify-content: flex-start !important; /* تبدأ الروابط من اليسار */
        flex-wrap: nowrap !important;
        gap: 5px !important;
        padding: 0 5px !important;
    }
    
    #mobile-sticky-nav .mobile-sticky-menu a {
        color: #fff !important;
        background-color: transparent !important;
        padding: 8px 12px !important;
        border-radius: 6px !important;
    }

    #mobile-sticky-nav .mobile-sticky-menu li.current-menu-item > a {
        background-color: rgba(255, 255, 255, 0.2) !important;
    }
}

/* --- مؤشرات السحب للمقال التالي/السابق --- */
@media (max-width: 768px) {
    body.single-post::before,
    body.single-post::after {
        content: '\f054'; /* سهم لليمين */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        color: #000;
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        z-index: 999;
        opacity: 0.2;
        pointer-events: none; /* لمنعها من إعاقة اللمس */
    }

    body.single-post::after {
        content: '\f053'; /* سهم لليسار */
        left: -10px;
    }
    
    body.single-post::before {
        right: -10px;
    }
    
    
    .slider-sidebar {
        display:none;
    }
}

/* ===================================================================
   أيقونات بطولات الهاتف (الكاروسيل)
   =================================================================== */
.mobile-tournaments-carousel-wrap {
    display: none; /* يتم إخفاؤه افتراضياً وسيتم عرضه في الميديا كويري للهاتف */
    overflow: hidden;
    position: relative; /* لتموضع الأسهم */
    margin-bottom: 15px; /* مسافة تحت الكاروسيل */
    background-color: var(--theme-content-bg); /* خلفية بيضاء مثلاً */
    padding: 10px 0; /* مسافة داخلية */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* ظل خفيف */
}

@media (max-width: 768px) { /* أو حجم الشاشة الذي يعتبره قالبك للهاتف */
    .mobile-tournaments-carousel-wrap {
        display: block; /* يظهر على شاشات الهاتف والأجهزة اللوحية الصغيرة */
    }
}

.mobile-tournaments-carousel {
    display: flex; /* لعرض الأيقونات بجانب بعضها */
    overflow-x: scroll; /* لتفعيل السكرول الأفقي */
    -webkit-overflow-scrolling: touch; /* لتحسين تجربة السكرول على iOS */
    scroll-snap-type: x mandatory; /* لجعل السكرول يتوقف عند الأيقونات */
    padding: 0px; /* مسافة داخلية من الجوانب */
    gap: 1px; /* مسافة بين الأيقونات */
    scrollbar-width: none; /* إخفاء شريط التمرير لفايرفوكس */
    -ms-overflow-style: none;  /* إخفاء شريط التمرير لـ IE و Edge */
}

.mobile-tournaments-carousel::-webkit-scrollbar {
    display: none; /* إخفاء شريط التمرير لـ Chrome, Safari, Opera */
}

.tournament-icon-item {
    flex-shrink: 0; /* لمنع الأيقونات من الانكماش */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: var(--theme-text-dark); /* لون النص من متغيرات القالب */
    font-size: 13px;
    font-weight: 600;
    width: 60px; /* عرض ثابت لكل أيقونة */
    scroll-snap-align: start; /* محاذاة الأيقونة عند التوقف */
}

.tournament-icon-item img {
    width: 35px; /* حجم الأيقونة */
    height: 35px;
    border-radius: 50%; /* لجعلها دائرية */
    object-fit: cover; /* لضمان تغطية الصورة للمنطقة */
    margin-bottom: 5px; /* مسافة بين الأيقونة والعنوان */
    border: 1px solid #eee; /* إطار خفيف */
}

.tournament-icon-item span {
    display: block;
    white-space: nowrap; /* منع النص من الالتفاف */
    overflow: hidden; /* إخفاء أي نص زائد */
    text-overflow: ellipsis; /* إضافة نقاط (...) للنص الزائد */
    max-width: 100%; /* لضمان عدم تجاوز النص للعرض */
}

/* أسهم التنقل (اختياري، يمكن التحكم بها بالكامل بـ JS) */
.mobile-tournaments-carousel-wrap .carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 5px;
    cursor: pointer;
    z-index: 10;
    border-radius: 5px;
    display: none !important; /* إخفاء افتراضياً، يمكن إظهاره بـ JS للشاشات الكبيرة */
}

.mobile-tournaments-carousel-wrap .prev-arrow {
    left: 5px;
}

.mobile-tournaments-carousel-wrap .next-arrow {
    right: 5px;
}