/*
 * Global language direction helpers.
 * Goal: Arabic content aligns right, English content aligns left
 * without breaking existing RTL/LTR page layout.
 */

/* Explicit language helpers for mixed-content UIs */
.lang-ar,
.ar-text,
[data-lang='ar'] {
    direction: rtl !important;
    text-align: right !important;
    unicode-bidi: isolate;
}

.lang-en,
.en-text,
[data-lang='en'],
.lang-ltr,
.ltr-text {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: isolate;
}

/* Keep technical values consistently LTR */
code,
pre,
kbd,
samp,
.number,
.numeric,
.code,
.email,
.url {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
}

/*
 * When user types Arabic/English in text fields, JS will toggle these classes.
 * This guarantees visual alignment matches language direction.
 */
input.dir-ar,
textarea.dir-ar,
[contenteditable='true'].dir-ar {
    direction: rtl !important;
    text-align: right !important;
}

input.dir-en,
textarea.dir-en,
[contenteditable='true'].dir-en {
    direction: ltr !important;
    text-align: left !important;
}

/* Auto-start text alignment applied by JS when no fixed alignment is defined */
[dir='rtl'].dir-auto-start {
    text-align: right !important;
}

[dir='ltr'].dir-auto-start {
    text-align: left !important;
}