@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Tajawal:wght@400;500;600;700&display=swap");

/*
 * WESSAAL bilingual typography
 * - English / Latin: Inter
 * - Arabic: Tajawal
 *
 * This layer is intentionally loaded after the vendor styles and applies
 * the selected UI font with enough specificity to override legacy font
 * declarations while keeping icon-font elements untouched.
 */
:root {
    --wessaal-font-latin: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --wessaal-font-arabic: "Tajawal", "Inter", Tahoma, Arial, sans-serif;
    --wessaal-ui-font: var(--wessaal-font-latin);
    --bs-font-sans-serif: var(--wessaal-ui-font);
    --bs-body-font-family: var(--wessaal-ui-font);
}

html[lang^="ar"] {
    --wessaal-ui-font: var(--wessaal-font-arabic);
    --bs-font-sans-serif: var(--wessaal-ui-font);
    --bs-body-font-family: var(--wessaal-ui-font);
}

body {
    font-family: var(--wessaal-ui-font) !important;
}

/*
 * Vendor CSS contains component-level font declarations. Apply the WESSAAL
 * family to normal UI text, but exclude known icon-font elements so icons
 * keep rendering correctly.
 */
body *:not(i):not(.material-icons):not([class^="ti-"]):not([class*=" ti-"]):not([class^="fa-"]):not([class*=" fa-"]):not([class^="feather-"]):not([class*=" feather-"]) {
    font-family: var(--wessaal-ui-font) !important;
}

button,
input,
optgroup,
select,
textarea,
.form-control,
.form-select,
.btn,
.dropdown-menu,
.modal-content,
.popover,
.tooltip,
.table,
.nav,
.navbar,
.breadcrumb,
.pagination,
.select2-container,
.choices,
.note-editor,
.note-editable {
    font-family: var(--wessaal-ui-font) !important;
}

html[lang^="ar"] body,
html[lang^="ar"] input,
html[lang^="ar"] select,
html[lang^="ar"] textarea,
html[lang^="ar"] button {
    line-height: 1.7;
}

html[lang^="ar"] h1,
html[lang^="ar"] h2,
html[lang^="ar"] h3,
html[lang^="ar"] h4,
html[lang^="ar"] h5,
html[lang^="ar"] h6 {
    line-height: 1.45;
    letter-spacing: 0;
}