/* =========================================================================
   rtl.css — Arabic (RTL) support for the recharge page
   Loaded AFTER styles.css. All rules are scoped to html[dir="rtl"] /
   html[lang="ar"], so the English (LTR) view is not affected.
   ========================================================================= */

/* ---------- Arabic font (Tajawal, loaded via <link> in index.html) ---------- */
html[lang="ar"] body {
    font-family: 'Tajawal', 'VodafoneArabic', 'Segoe UI', Tahoma, Arial, sans-serif;
}

html[lang="ar"] .heading {
    font-family: 'Tajawal', 'VodafoneArabic', 'Segoe UI', Tahoma, Arial, sans-serif;
    line-height: 1.25;
}

html[lang="ar"] strong,
html[lang="ar"] .bold,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea {
    font-family: 'Tajawal', 'VodafoneArabic', 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* ---------- generic direction fixes (physical properties) ---------- */

/* media object: image right / body left  ->  mirrored */
html[dir="rtl"] .media__image {
    text-align: left;
}

html[dir="rtl"] .media__body {
    text-align: right;
}

html[dir="rtl"] .media__image--gutter {
    padding-right: 0;
    padding-left: 16px;
}

/* accordion chevron sits on the left in RTL */
html[dir="rtl"] .chevron__container {
    text-align: left;
}

/* utility class that forces LTR left alignment */
html[dir="rtl"] .align--left {
    text-align: right !important;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

/* lists: bullet padding on the right */
html[dir="rtl"] .list {
    padding-left: 0;
    padding-right: 20px;
}

/* notifications dropdown */
html[dir="rtl"] .news--body p {
    text-align: right;
}

/* plan card bullet lists (icon left -> icon right) */
html[dir="rtl"] .bundle__inclusion {
    text-align: right;
    padding-left: 0;
    padding-right: 40px;
}

@media only screen and (max-width: 639px) {
    html[dir="rtl"] .bundle__inclusion {
        padding-right: 30px;
    }
}

/* flex variant already mirrors (flexbox), just remove the fixed padding */
html[dir="rtl"] .converged-bundle__inclusion {
    padding-right: 0;
}

html[dir="rtl"] .converged-bundle__inclusion-bullet {
    margin-right: 0;
    margin-left: 20px;
}

/* ---------- footer ---------- */
html[dir="rtl"] .footerHP_stripe-content_Text {
    text-align: right;
}

html[dir="rtl"] .footerHP_social_followWrap {
    text-align: right;
}

@media (max-width: 1000px) {
    html[dir="rtl"] .footerHP_social_followWrap {
        right: auto;
        left: 0;
        text-align: left;
    }

    html[dir="rtl"] .footerHP_social-icons {
        justify-content: flex-start;
    }

    html[dir="rtl"] .footerHP_rights {
        left: auto;
        right: 3.5%;
        text-align: right;
    }
}

@media (max-width: 639px) {
    html[dir="rtl"] .footerHP_social_followWrap {
        right: auto;
        left: 0;
        text-align: right;
    }
}