/* RTL Mobile Fix CSS */
/* إصلاح مشكلة المساحة البيضاء على اليسار في العرض على الموبايل مع RTL */
/* هذا الملف يعمل فقط على الشاشات الصغيرة (الموبايل) وليس على شاشات الكمبيوتر */

/* إصلاح للشاشات الصغيرة */
@media (max-width: 767.98px) {
    [dir="rtl"] body {
        overflow-x: hidden;
        margin: 0;
        padding: 0;
    }
    
    [dir="rtl"] .container {
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        margin: 0 auto;
    }
    
    [dir="rtl"] .row {
        margin-left: -15px;
        margin-right: -15px;
    }
    
    /* إصلاح Header في الموبايل */
    [dir="rtl"] .header-area,
    [dir="rtl"] .nav-area {
        width: 100%;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }
    
    /* إصلاح المحتوى الرئيسي */
    [dir="rtl"] .main-content,
    [dir="rtl"] section {
        width: 100%;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        overflow-x: hidden;
    }
    
    /* إصلاح Cards */
    [dir="rtl"] .card,
    [dir="rtl"] .pricing-card {
        margin-left: 0;
        margin-right: 0;
    }
}

/* إصلاح للشاشات الصغيرة جداً */
@media (max-width: 575.98px) {
    [dir="rtl"] .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    [dir="rtl"] .row {
        margin-left: -10px;
        margin-right: -10px;
    }
    
    [dir="rtl"] .col,
    [dir="rtl"] [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* إصلاح للشاشات iPhone */
@media (max-width: 414px) {
    [dir="rtl"] html,
    [dir="rtl"] body {
        overflow-x: hidden;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    [dir="rtl"] * {
        box-sizing: border-box;
    }
    
    [dir="rtl"] .container {
        width: 100%;
        max-width: 100%;
        padding-left: 8px;
        padding-right: 8px;
        margin: 0;
    }
}

/* إصلاح للشاشات الصغيرة فقط */

@media (max-width: 767.98px) {
    /* إصلاح عام للـ RTL على الموبايل */
    [dir="rtl"] {
        direction: rtl;
        text-align: right;
    }
    
    [dir="rtl"] body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }
    
    /* إصلاح Container في RTL للموبايل */
    [dir="rtl"] .container,
    [dir="rtl"] .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }
    
    /* إصلاح Bootstrap Grid في RTL للموبايل */
    [dir="rtl"] .row {
        margin-left: -10px;
        margin-right: -10px;
    }
    
    [dir="rtl"] .col,
    [dir="rtl"] [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* إصلاح Header في RTL للموبايل */
    [dir="rtl"] .header-area {
        padding-left: 0;
        padding-right: 0;
    }
    
    [dir="rtl"] .main-content {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
    
    /* إصلاح Cards في RTL للموبايل */
    [dir="rtl"] .card,
    [dir="rtl"] .course-card {
        margin-left: 0;
        margin-right: 0;
    }
    
    [dir="rtl"] .card-body {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* إصلاح للـ offcanvas */
    [dir="rtl"] .offcanvas {
        right: 0;
        left: auto;
    }
    
    [dir="rtl"] .offcanvas-start {
        right: 0;
        left: auto;
        transform: translateX(100%);
    }
    
    [dir="rtl"] .offcanvas-start.show {
        transform: translateX(0);
    }
    
    /* إصلاح Navigation في RTL للموبايل */
    [dir="rtl"] .navbar-nav {
        text-align: right;
    }
    
    [dir="rtl"] .navbar-toggler {
        margin-left: 0;
        margin-right: auto;
    }
    
    /* إصلاح Buttons في RTL للموبايل */
    [dir="rtl"] .btn {
        text-align: center;
    }
    
    /* إصلاح Forms في RTL للموبايل */
    [dir="rtl"] .form-control,
    [dir="rtl"] .form-select {
        text-align: right;
    }
    
    /* إصلاح Footer في RTL للموبايل */
    [dir="rtl"] .footer-area {
        text-align: right;
    }
    
    /* منع الـ horizontal scroll */
    [dir="rtl"] {
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    [dir="rtl"] * {
        max-width: 100%;
    }
    
    /* إصلاح للعناصر المطلقة الموضع */
    [dir="rtl"] .position-absolute {
        right: auto;
        left: auto;
    }
    
    /* إصلاح خاص للـ pricing card */
    [dir="rtl"] .pricing-card,
    [dir="rtl"] .course-card {
        margin: 0 auto;
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
}