/* =========================================================
   ZNILATHOSS SPORTS
   PREDICTION AI FIX
   الإصدار الجديد
   إصلاح اتجاه نتيجة تحليل ChatGPT
   ========================================================= */


/* =========================================================
   1. الحاوية الرئيسية
   ========================================================= */

#predictionResult {

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 20px 0 0 0 !important;
    padding: 0 !important;

    display: block !important;

    position: relative !important;

    box-sizing: border-box !important;

    direction: rtl !important;

    overflow: visible !important;
}


/* =========================================================
   2. بطاقة تحليل ChatGPT
   ========================================================= */

#predictionResult .prediction-ai-result {

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    display: block !important;

    position: relative !important;

    box-sizing: border-box !important;

    direction: rtl !important;

    overflow: visible !important;
}


/* =========================================================
   3. رأس التحليل
   ========================================================= */

#predictionResult .prediction-ai-header {

    width: 100% !important;
    max-width: 100% !important;

    display: block !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    direction: rtl !important;

    text-align: right !important;
}


/* =========================================================
   4. العناصر المباشرة لرأس التحليل
   ========================================================= */

#predictionResult .prediction-ai-header > div {

    width: 100% !important;
    max-width: 100% !important;

    display: block !important;

    box-sizing: border-box !important;

    direction: rtl !important;
}


/* =========================================================
   5. معلومات المباراة
   ========================================================= */

#predictionResult .prediction-ai-meta {

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: wrap !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    margin: 0 !important;

    padding: 10px !important;

    box-sizing: border-box !important;

    direction: rtl !important;
}


/* =========================================================
   6. عناصر معلومات المباراة
   ========================================================= */

#predictionResult .prediction-ai-meta > span {

    display: inline-flex !important;

    flex: 0 1 auto !important;

    width: auto !important;

    min-width: 0 !important;

    max-width: 100% !important;

    align-items: center !important;

    justify-content: center !important;

    box-sizing: border-box !important;

    white-space: nowrap !important;

    direction: rtl !important;
}


/* =========================================================
   7. منطقة الفريقين
   ========================================================= */

#predictionResult .prediction-selected-teams {

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    align-items: center !important;

    justify-content: center !important;

    gap: clamp(10px, 4vw, 40px) !important;

    margin: 0 !important;

    padding: 20px 10px !important;

    box-sizing: border-box !important;

    direction: ltr !important;

    overflow: visible !important;
}


/* =========================================================
   8. منع أي عنصر داخل الفريقين من تغيير الاتجاه
   ========================================================= */

#predictionResult .prediction-selected-teams > * {

    box-sizing: border-box !important;

    flex-shrink: 1 !important;
}


/* =========================================================
   9. بطاقة الفريق
   ========================================================= */

#predictionResult .prediction-selected-team {

    display: flex !important;

    flex-direction: column !important;

    flex-wrap: nowrap !important;

    align-items: center !important;

    justify-content: center !important;

    flex: 1 1 0 !important;

    width: auto !important;

    min-width: 0 !important;

    max-width: 280px !important;

    margin: 0 !important;

    padding: 5px !important;

    box-sizing: border-box !important;

    direction: rtl !important;

    text-align: center !important;
}


/* =========================================================
   10. شعار الفريق
   ========================================================= */

#predictionResult .prediction-selected-team img {

    display: block !important;

    flex: 0 0 auto !important;

    width: 70px !important;

    height: 70px !important;

    min-width: 70px !important;

    min-height: 70px !important;

    max-width: 70px !important;

    max-height: 70px !important;

    margin: 0 auto !important;

    padding: 0 !important;

    object-fit: contain !important;

    box-sizing: border-box !important;
}


/* =========================================================
   11. اسم الفريق
   ========================================================= */

#predictionResult .prediction-selected-team strong {

    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    margin: 8px 0 0 0 !important;

    padding: 0 !important;

    text-align: center !important;

    white-space: normal !important;

    overflow-wrap: break-word !important;

    word-break: normal !important;

    box-sizing: border-box !important;
}


/* =========================================================
   12. VS
   ========================================================= */

#predictionResult .prediction-selected-vs {

    display: flex !important;

    flex: 0 0 50px !important;

    width: 50px !important;

    height: 50px !important;

    min-width: 50px !important;

    min-height: 50px !important;

    max-width: 50px !important;

    max-height: 50px !important;

    align-items: center !important;

    justify-content: center !important;

    margin: 0 !important;

    padding: 0 !important;

    border-radius: 50% !important;

    box-sizing: border-box !important;

    direction: ltr !important;
}


/* =========================================================
   13. معلومات المباراة الإضافية
   ========================================================= */

#predictionResult .prediction-selected-info {

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: wrap !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    margin: 0 !important;

    padding: 10px !important;

    box-sizing: border-box !important;

    direction: rtl !important;
}


/* =========================================================
   14. محتوى تحليل ChatGPT
   ========================================================= */

#predictionResult .prediction-ai-content {

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    display: block !important;

    margin: 0 !important;

    padding: 15px !important;

    box-sizing: border-box !important;

    direction: rtl !important;

    text-align: right !important;

    white-space: normal !important;

    overflow-wrap: anywhere !important;

    word-break: normal !important;

    line-height: 1.8 !important;
}


/* =========================================================
   15. النصوص داخل التحليل
   ========================================================= */

#predictionResult .prediction-ai-content p {

    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 0 12px 0 !important;

    box-sizing: border-box !important;

    direction: rtl !important;

    text-align: right !important;
}


/* =========================================================
   16. العناوين
   ========================================================= */

#predictionResult .prediction-ai-content h1,
#predictionResult .prediction-ai-content h2,
#predictionResult .prediction-ai-content h3,
#predictionResult .prediction-ai-content h4,
#predictionResult .prediction-ai-content h5,
#predictionResult .prediction-ai-content h6 {

    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

    direction: rtl !important;

    text-align: right !important;

    white-space: normal !important;
}


/* =========================================================
   17. القوائم
   ========================================================= */

#predictionResult .prediction-ai-content ul,
#predictionResult .prediction-ai-content ol {

    display: block !important;

    width: auto !important;

    max-width: 100% !important;

    margin-top: 10px !important;

    margin-bottom: 15px !important;

    padding-right: 28px !important;

    box-sizing: border-box !important;

    direction: rtl !important;

    text-align: right !important;
}


/* =========================================================
   18. عناصر القوائم
   ========================================================= */

#predictionResult .prediction-ai-content li {

    display: list-item !important;

    width: auto !important;

    max-width: 100% !important;

    margin-bottom: 6px !important;

    box-sizing: border-box !important;

    direction: rtl !important;
}


/* =========================================================
   19. الجداول
   ========================================================= */

#predictionResult .prediction-ai-content table {

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    display: table !important;

    table-layout: auto !important;

    border-collapse: collapse !important;

    box-sizing: border-box !important;

    direction: rtl !important;

    overflow: hidden !important;
}


/* =========================================================
   20. صفوف الجدول
   ========================================================= */

#predictionResult .prediction-ai-content thead {

    display: table-header-group !important;
}


#predictionResult .prediction-ai-content tbody {

    display: table-row-group !important;
}


#predictionResult .prediction-ai-content tr {

    display: table-row !important;
}


/* =========================================================
   21. خلايا الجدول
   ========================================================= */

#predictionResult .prediction-ai-content th,
#predictionResult .prediction-ai-content td {

    display: table-cell !important;

    box-sizing: border-box !important;

    vertical-align: middle !important;

    text-align: center !important;

    white-space: normal !important;

    overflow-wrap: break-word !important;
}


/* =========================================================
   22. الروابط
   ========================================================= */

#predictionResult .prediction-ai-content a {

    max-width: 100% !important;

    overflow-wrap: anywhere !important;
}


/* =========================================================
   23. الصور داخل التحليل
   ========================================================= */

#predictionResult .prediction-ai-content img {

    max-width: 100% !important;

    height: auto !important;

    object-fit: contain !important;
}


/* =========================================================
   24. التنبيه
   ========================================================= */

#predictionResult .prediction-ai-disclaimer {

    width: 100% !important;

    max-width: 100% !important;

    display: block !important;

    margin: 15px 0 0 0 !important;

    padding: 10px !important;

    box-sizing: border-box !important;

    direction: rtl !important;

    text-align: right !important;

    white-space: normal !important;
}


/* =========================================================
   25. شاشة التحميل
   ========================================================= */

#predictionResult .prediction-loading {

    width: 100% !important;

    max-width: 100% !important;

    display: block !important;

    margin: 0 !important;

    padding: 30px 10px !important;

    box-sizing: border-box !important;

    text-align: center !important;

    direction: rtl !important;
}


/* =========================================================
   26. الحالة الفارغة
   ========================================================= */

#predictionResult .prediction-empty {

    width: 100% !important;

    max-width: 100% !important;

    display: block !important;

    margin: 0 !important;

    padding: 30px 15px !important;

    box-sizing: border-box !important;

    text-align: center !important;

    direction: rtl !important;
}


/* =========================================================
   27. الخطأ
   ========================================================= */

#predictionResult .prediction-error {

    width: 100% !important;

    max-width: 100% !important;

    display: block !important;

    margin: 0 !important;

    padding: 20px !important;

    box-sizing: border-box !important;

    text-align: center !important;

    direction: rtl !important;
}


/* =========================================================
   28. DESKTOP
   ========================================================= */

@media (min-width: 769px) {

    #predictionResult .prediction-selected-teams {

        flex-direction: row !important;

        flex-wrap: nowrap !important;

        gap: 40px !important;

        padding: 25px 20px !important;
    }


    #predictionResult .prediction-selected-team {

        flex: 1 1 0 !important;

        max-width: 300px !important;
    }


    #predictionResult .prediction-selected-team img {

        width: 75px !important;

        height: 75px !important;

        min-width: 75px !important;

        min-height: 75px !important;

        max-width: 75px !important;

        max-height: 75px !important;
    }


    #predictionResult .prediction-selected-vs {

        flex: 0 0 52px !important;

        width: 52px !important;

        height: 52px !important;

        min-width: 52px !important;

        min-height: 52px !important;
    }

}


/* =========================================================
   29. TABLET
   ========================================================= */

@media (max-width: 768px) and (min-width: 481px) {

    #predictionResult .prediction-selected-teams {

        flex-direction: row !important;

        flex-wrap: nowrap !important;

        gap: 20px !important;

        padding: 20px 10px !important;
    }


    #predictionResult .prediction-selected-team {

        flex: 1 1 0 !important;

        max-width: 230px !important;
    }


    #predictionResult .prediction-selected-team img {

        width: 62px !important;

        height: 62px !important;

        min-width: 62px !important;

        min-height: 62px !important;

        max-width: 62px !important;

        max-height: 62px !important;
    }


    #predictionResult .prediction-selected-vs {

        flex: 0 0 44px !important;

        width: 44px !important;

        height: 44px !important;

        min-width: 44px !important;

        min-height: 44px !important;
    }

}


/* =========================================================
   30. الهاتف
   ========================================================= */

@media (max-width: 480px) {

    #predictionResult {

        margin-top: 15px !important;
    }


    #predictionResult .prediction-selected-teams {

        display: flex !important;

        flex-direction: row !important;

        flex-wrap: nowrap !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 6px !important;

        width: 100% !important;

        padding: 15px 5px !important;

        direction: ltr !important;
    }


    #predictionResult .prediction-selected-team {

        display: flex !important;

        flex-direction: column !important;

        flex: 1 1 0 !important;

        width: auto !important;

        min-width: 0 !important;

        max-width: none !important;

        padding: 3px !important;
    }


    #predictionResult .prediction-selected-team img {

        width: 52px !important;

        height: 52px !important;

        min-width: 52px !important;

        min-height: 52px !important;

        max-width: 52px !important;

        max-height: 52px !important;
    }


    #predictionResult .prediction-selected-team strong {

        margin-top: 6px !important;

        font-size: 13px !important;

        line-height: 1.4 !important;
    }


    #predictionResult .prediction-selected-vs {

        flex: 0 0 36px !important;

        width: 36px !important;

        height: 36px !important;

        min-width: 36px !important;

        min-height: 36px !important;
    }


    #predictionResult .prediction-ai-meta {

        flex-direction: row !important;

        flex-wrap: wrap !important;

        gap: 5px !important;

        padding: 7px !important;
    }


    #predictionResult .prediction-ai-meta > span {

        flex: 0 1 auto !important;

        width: auto !important;

        min-width: 0 !important;

        max-width: 100% !important;

        font-size: 12px !important;
    }


    #predictionResult .prediction-ai-content {

        padding: 12px !important;

        font-size: 14px !important;

        line-height: 1.8 !important;
    }


    #predictionResult .prediction-ai-content table {

        display: block !important;

        width: 100% !important;

        overflow-x: auto !important;
    }

}


/* =========================================================
   31. هاتف صغير جدًا
   ========================================================= */

@media (max-width: 360px) {

    #predictionResult .prediction-selected-teams {

        gap: 3px !important;

        padding-left: 2px !important;

        padding-right: 2px !important;
    }


    #predictionResult .prediction-selected-team img {

        width: 45px !important;

        height: 45px !important;

        min-width: 45px !important;

        min-height: 45px !important;

        max-width: 45px !important;

        max-height: 45px !important;
    }


    #predictionResult .prediction-selected-team strong {

        font-size: 11px !important;
    }


    #predictionResult .prediction-selected-vs {

        flex: 0 0 32px !important;

        width: 32px !important;

        height: 32px !important;

        min-width: 32px !important;

        min-height: 32px !important;
    }

}


/* =========================================================
   32. الحماية النهائية
   ========================================================= */

/*
   هذه القاعدة هي الأهم:
   تمنع أي قاعدة عامة في responsive.css
   من تحويل منطقة الفريقين إلى column.
*/

#predictionResult .prediction-selected-teams {

    flex-direction: row !important;

    flex-wrap: nowrap !important;
}


/* =========================================================
   النهاية
   ========================================================= */