/* =====================================================================
   Orbita — النسخة العربية: تعديلات RTL خاصة بصفحة index
   بيتحمّل في index.html (العربي) بس، بعد style.css و rtl.css.
   كل القواعد لازم تبدأ بـ html[dir="rtl"] عشان ماتأثرش على الإنجليزي.
   ملحوظة: صور الخلفية الديكور (bg root / effective-bg / الـglow) سايبينها
   في مكانها زي ما هي — مابنعكسش شغل الجرافيك.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1) سيكشن الـintro (العنوان الكبير اللي بيظهر سطر سطر)
   --------------------------------------------------------------------- */

/* الهالة الخفيفة ورا السيكشن تروح للناحية التانية زي ما المحتوى اتعكس */
html[dir="rtl"] .intro-section::after {
    right: auto;
    left: -10%;
}

/* line-height 1.2 بتاع الإنجليزي بيخنق الشدّة والنقط في Cairo */
html[dir="rtl"] .main-title {
    line-height: 1.5;
}

/* كل سطر inline-block وبيلف جوّاه — balance بتقسم السطر بالتساوي
   بدل ما كلمة أو كلمتين يقعوا لوحدهم في سطر */
html[dir="rtl"] .main-title span {
    text-wrap: balance;
}

/* الجرادينت معمول بـbackground-clip:text — شوية padding فوق وتحت
   عشان رؤوس الحروف والشدّة ماتتقصش من الخلفية */
html[dir="rtl"] .main-title .text-gradient-pink {
    padding-block: 0.08em;
}

/* الخط الجانبي للوصف ينتقل لليمين (بداية السطر في العربي) */
html[dir="rtl"] .intro-description {
    border-left: none;
    padding-left: 0;
    border-right: 1px solid #333;
    padding-right: 20px;
    font-size: 1.06rem;
    line-height: 1.9;
}

@media (max-width: 900px) {
    /* في الموبايل الوصف متوسّط ومن غير خط جانبي زي الإنجليزي */
    html[dir="rtl"] .intro-description {
        border-right: none;
        padding-right: 0;
    }
}

@media (max-width: 600px) {
    /* العنوان العربي أعرض من الإنجليزي — تصغير بسيط عشان السطور ماتبقاش كتير */
    html[dir="rtl"] .main-title {
        font-size: 1.75rem;
        line-height: 1.55;
    }
}


/* ---------------------------------------------------------------------
   2) كروت الخدمات (لنبنِ معاً / خدماتنا / أعمالنا)
   --------------------------------------------------------------------- */

/* الفاصل بين الكروت: الكارت الأول بقى على اليمين، فالخط يبقى على
   الشمال بتاع كل كارت والأخير (أقصى الشمال) من غير خط */
html[dir="rtl"] .service-card {
    border-right: none;
    border-left: 1px solid #333;
}

html[dir="rtl"] .service-card:last-child {
    border-left: none;
}

/* العناوين العربي محتاجة نفَس أكتر من 1.1 */
html[dir="rtl"] .service-card h2 {
    line-height: 1.4;
}

html[dir="rtl"] .service-card p {
    line-height: 1.85;
}

@media (max-width: 900px) {
    /* الموبايل: الكروت تحت بعض والفاصل خط سفلي بس (زي الإنجليزي) */
    html[dir="rtl"] .service-card {
        border-left: none;
    }
}


/* ---------------------------------------------------------------------
   3) سيكشن الشراكة (النص + الفيديو)
   --------------------------------------------------------------------- */
html[dir="rtl"] .partnership-text {
    text-align: right;
}

html[dir="rtl"] .desc-text {
    font-size: 17px;
    line-height: 1.9;
}

@media (max-width: 991px) {
    /* الموبايل متوسّط زي الإنجليزي */
    html[dir="rtl"] .partnership-text {
        text-align: center;
    }

    html[dir="rtl"] .desc-text {
        font-size: 16px;
    }
}


/* ---------------------------------------------------------------------
   4) الكروت الثابتة اللي فوق بعض (منصة ويب / تطبيق تجارة إلكترونية)
   الـp متعرّف sans-serif، فالعربي كان بيطلع بخط النظام — نرجّعه Cairo
   --------------------------------------------------------------------- */
html[dir="rtl"] .McCardTextOverlay p {
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
    line-height: 1.6;
}


/* ---------------------------------------------------------------------
   5) عملاؤنا
   --------------------------------------------------------------------- */

/* الـeyebrow في الإنجليزي كابيتال ومفرود بالـletter-spacing، العربي من
   غيرهم بيبان صغير جداً — نكبّره شوية */
html[dir="rtl"] .oc-eyebrow {
    font-size: 16px;
    font-weight: 700;
}

html[dir="rtl"] .oc-title {
    line-height: 1.45;
}

html[dir="rtl"] .oc-sub {
    line-height: 1.9;
    text-wrap: balance;
}

@media (max-width: 600px) {
    /* الـ<br> بيكسر الجملة العربي عند كلمة لوحدها في الموبايل —
       نشيله ونسيب balance يوزّع السطور */
    html[dir="rtl"] .oc-sub br {
        display: none;
    }
}


/* ---------------------------------------------------------------------
   6) الأرقام (+15 / +4 / +12)
   --------------------------------------------------------------------- */
html[dir="rtl"] .stat-label {
    font-size: 19px;
    line-height: 1.6;
}

@media (max-width: 640px) {
    /* التسميات العربي أقصر، فكان رقمين بيقعدوا جنب بعض وواحد لوحده
       (شكل مش متوازن) — كل رقم في سطر لوحده زي الإنجليزي */
    html[dir="rtl"] .stat-item {
        flex: 0 0 100%;
    }
}


/* ---------------------------------------------------------------------
   7) سيكشن التقنيات (أسماء التقنيات نفسها بتفضل إنجليزي)
   مواقع الكروت left/top بالنسبة المئوية وبتتحسب من الجافاسكريبت —
   فيزيائية مش منطقية، فمش محتاجة أي تعديل في RTL
   --------------------------------------------------------------------- */
html[dir="rtl"] .tech-eyebrow {
    font-size: 15px;
    font-weight: 700;
}

html[dir="rtl"] .tech-title {
    line-height: 1.45;
}

html[dir="rtl"] .tech-sub {
    line-height: 1.9;
    text-wrap: balance;
}

@media (max-width: 600px) {
    /* الـ<br> معمول للديسكتوب (بعد "المخصّصة،")؛ في الموبايل balance أحسن */
    html[dir="rtl"] .tech-sub br {
        display: none;
    }
}


/* ---------------------------------------------------------------------
   8) سيكشن الـCTA
   --------------------------------------------------------------------- */
html[dir="rtl"] .cta-section h2 {
    line-height: 1.5;
}

/* أزرار الصفحة: العربي في 14px بيبان أصغر من الإنجليزي الكابيتال */
html[dir="rtl"] .intro-content .btn-outline,
html[dir="rtl"] .service-card .btn-outline,
html[dir="rtl"] .partnership-text .btn-primary,
html[dir="rtl"] .cta-section .btn-primary {
    font-size: 15px;
}


/* ---------------------------------------------------------------------
   9) الأسئلة الشائعة
   --------------------------------------------------------------------- */
html[dir="rtl"] .faq-title {
    text-align: right;
    line-height: 1.5;
}

/* الزرار مابيورثش الخط، فالعربي كان بيطلع بخط النظام صغير —
   Cairo + محاذاة يمين */
html[dir="rtl"] .faq-question {
    text-align: right;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.7;
}

/* السؤال الطويل مايسيبش كلمة لوحدها في سطر */
html[dir="rtl"] .faq-question > span:first-child {
    text-wrap: balance;
}

/* علامة + بقت على الشمال، فالمسافة بينها وبين السؤال تبقى على يمينها.
   والخط Arial زي الإنجليزي بالظبط (Cairo 300 بيرسم الـ+ رفيعة قوي) */
html[dir="rtl"] .faq-question .icon {
    margin-left: 0;
    margin-right: 20px;
    font-family: Arial, Helvetica, sans-serif;
}

html[dir="rtl"] .faq-answer p {
    line-height: 1.9;
}

/* الفقرات: pretty بتمنع إن آخر سطر يبقى كلمة واحدة */
html[dir="rtl"] .faq-answer p,
html[dir="rtl"] .intro-description,
html[dir="rtl"] .service-card p,
html[dir="rtl"] .desc-text {
    text-wrap: pretty;
}

@media screen and (max-width: 600px) {
    /* "الأسئلة الشائعة – أوربيتا" أطول من "FAQs – Orbita" — تصغير بسيط
       عشان يفضل في سطر واحد */
    html[dir="rtl"] .faq-title {
        font-size: 1.55rem;
    }

    html[dir="rtl"] .faq-question {
        font-size: 1rem;
    }

    html[dir="rtl"] .faq-question .icon {
        margin-right: 14px;
    }
}