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


/* ---------------------------------------------------------------------
   1) الهيرو — العنوان المفرّغ «تواصل»
   --------------------------------------------------------------------- */

/* الـ -webkit-text-stroke بيرسم حدود كل حرف لوحده، وفي العربي الحروف متصلة
   فكانت بتظهر خطوط ومربعات صغيرة عند الوصلات. بنملا الكلمة أبيض ونرسم حدودها
   بفلتر SVG (#ar-outline في الصفحة) كشكل واحد نضيف. الـ text-shadow اللي GSAP
   بيحركه مع السكرول بيعدّي من الفلتر كتوهّج زي الإنجليزي بالظبط.
   الوزن 700 عشان الحرف العربي يبان مليان جوه الحدود، والمقاس أكبر سنة لأن
   الكلمة العربي أقصر بكتير من CONNECT. margin-top بالسالب بيرفع الكلمة شوية
   عشان العربي له ذيول تحت السطر (ل، و) وكانت بتنزل قريب من آخر الشاشة. */
html[dir="rtl"] .HeadlineTextWrapper h1 {
    font-weight: 700;
    font-size: 240px;
    margin-top: -0.12em;
    color: #fff !important;
    -webkit-text-stroke: 0 !important;
    filter: url(#ar-outline);
}

@media only screen and (max-width: 1440px) {
    html[dir="rtl"] .HeadlineTextWrapper h1 {
        font-size: 230px;
    }
}

@media only screen and (max-width: 1300px) {
    html[dir="rtl"] .HeadlineTextWrapper h1 {
        font-size: 150px;
    }
}

@media only screen and (max-width: 1024px) {
    html[dir="rtl"] .HeadlineTextWrapper h1 {
        font-size: 135px;
        line-height: 150px;
    }
}

/* من 820 وتحت الإنجليزي بيتثبت من تحت (bottom: 16%)، فالـ margin-top مالوش لازمة.
   line-height أقل سنة عشان راس الألف واللام ماتلزقش في الحلقة بعد السكرول */
@media only screen and (max-width: 820px) {
    html[dir="rtl"] .HeadlineTextWrapper h1 {
        font-size: 115px;
        line-height: 130px;
        margin-top: 0;
    }
}

/* موبايل: 50px كانت صغيرة ومش مقروءة في العربي، والحدود أرفع (زي الـ 1px بتاع الإنجليزي) */
@media only screen and (max-width: 600px) {
    html[dir="rtl"] .HeadlineTextWrapper h1 {
        font-size: 72px;
        line-height: 90px;
        filter: url(#ar-outline-sm);
    }
}


/* ---------------------------------------------------------------------
   2) سيكشن التواصل — الإضاءات الخلفية
   الإضاءة البنفسجي كانت فوق على اليمين والوردي تحت على الشمال؛ بنعكسهم
   عشان يفضلوا ورا نفس العمود (الوردي ورا النص، البنفسجي ورا الفورم).
   --------------------------------------------------------------------- */
html[dir="rtl"] .contact-section::before {
    right: auto;
    left: -10%;
}

html[dir="rtl"] .contact-section::after {
    left: auto;
    right: -10%;
}


/* ---------------------------------------------------------------------
   3) العنوان والوصف
   --------------------------------------------------------------------- */

/* التدرّج كان من الشمال لليمين (أحمر ← أبيض ← أزرق)، والنص العربي واقف
   على اليمين فكان بياخد الأبيض والأزرق بس. بنعكس الاتجاه عشان أول الكلمة
   يبدأ بالأحمر زي الإنجليزي. line-height 1.1 كان بيقص نقط وذيول الحروف
   مع background-clip، فبنكبّره ونزود padding صغير. */
html[dir="rtl"] .contact-section .headline {
    background: linear-gradient(270deg, #ff5a54 0%, #ffffff 50%, #8a9eff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    line-height: 1.4;
    padding-block: 0.06em;
    margin-bottom: 14px;
}

/* الوصف: سطر مريح للعربي، وtext-wrap: balance بيمنع كلمة لوحدها في السطر التاني على الموبايل */
html[dir="rtl"] .contact-section .sub-headline {
    font-size: 1.15rem;
    line-height: 1.8;
    text-wrap: balance;
}

@media (max-width: 768px) {
    /* style.css بيحط text-align: left للعمود ده في الموبايل */
    html[dir="rtl"] .contact-section .text-column {
        text-align: right;
    }
}

@media (max-width: 480px) {
    /* 2rem بتبان صغيرة في العربي جنب الإنجليزي */
    html[dir="rtl"] .contact-section .headline {
        font-size: 2.3rem;
    }
}


/* ---------------------------------------------------------------------
   4) الفورم
   --------------------------------------------------------------------- */

/* الخانات بتاخد خط النظام، والـ textarea بالذات بياخد خط monospace فكان
   العربي بيتكتب حروف متفرقة. بنوحّدهم على Cairo بنفس روح باقي الموقع. */
html[dir="rtl"] .contact-section input,
html[dir="rtl"] .contact-section textarea,
html[dir="rtl"] .contact-section .submit-btn {
    font-family: 'Cairo', sans-serif;
}

/* Cairo أطول من خط النظام، فبنظبط الـ line-height والـ padding عشان الخانات
   تفضل بنفس ارتفاع الإنجليزي وماتطولش الفورم */
html[dir="rtl"] .contact-section input,
html[dir="rtl"] .contact-section textarea {
    text-align: right;
    line-height: 1.6;
    padding-top: 10px;
    padding-bottom: 10px;
}

html[dir="rtl"] .contact-section textarea {
    line-height: 1.8;
    padding-top: 12px;
}

@media (max-width: 480px) {
    html[dir="rtl"] .contact-section input,
    html[dir="rtl"] .contact-section textarea {
        padding-top: 9px;
        padding-bottom: 9px;
    }

    html[dir="rtl"] .contact-section textarea {
        padding-top: 11px;
    }
}

/* الإيميل والتليفون: الـ placeholder عربي على اليمين، لكن اللي الزائر بيكتبه
   (أرقام/إيميل) لازم يتعرض من الشمال لليمين عشان + والـ @ يبانوا صح —
   ومحاذي لليمين عشان يفضل على نفس خط باقي الخانات. */
html[dir="rtl"] .contact-section input[type="email"],
html[dir="rtl"] .contact-section input[type="tel"],
html[dir="rtl"] .contact-section input[type="tel"]:focus {
    direction: ltr;
    text-align: right;
}

html[dir="rtl"] .contact-section input[type="email"]:placeholder-shown,
html[dir="rtl"] .contact-section input[type="tel"]:placeholder-shown {
    direction: rtl;
}

/* زرار الإرسال: العربي محتاج حجم أكبر سنة، والملو الأبيض في الهوفر يبدأ من اليمين */
html[dir="rtl"] .contact-section .submit-btn {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.5;
    padding: 6px 30px;
}

html[dir="rtl"] .contact-section .submit-btn::before {
    left: auto;
    right: 0;
}