@font-face {
    font-family: "JameelNoori";
    src: url("../fonts/Jameel.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "FatwaaArabic";
    src: url("../fonts/Trad.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "HadithLight";
    src: url("../fonts/Hadith.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

:root {
    --fo-font-urdu: "JameelNoori", "Jameel Noori Nastaleeq", "Nafees", "Noto Nastaliq Urdu", serif;
    --fo-font-arabic: "Amiri", "FatwaaArabic", "Noto Naskh Arabic", serif;
    --fo-font-ui: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html[lang="ur"] body,
html[lang="ur"] body :where(div, span, p, a, label, input, textarea, select, button, table, th, td, h1, h2, h3, h4, h5, h6) {
    font-family: var(--fo-font-urdu) !important;
}

html[lang="ur"] body [lang="ar"],
html[lang="ur"] body .arabic-text,
html[lang="ur"] body .urdu-main-description blockquote,
html[lang="ur"] body .urdu-main-description blockquote :where(span, p, div, strong, em, a),
html[lang="ur"] body .fatwa-reference,
html[lang="ur"] body .fatwa-reference :where(span, p, div, strong, em, a),
html[lang="ur"] body .fatwa-meta-arabic,
html[lang="ur"] body .fatwa-meta-arabic :where(span, a, strong),
html[lang="ur"] body .duplicate-review__reference,
html[lang="ur"] body .duplicate-review__reference :where(span, strong),
html[lang="ur"] body [data-fatwa-tags] .fatwa-tag-select,
html[lang="ur"] body [data-fatwa-tags] .select2-selection__rendered,
html[lang="ur"] body .fatwa-tag-dropdown .select2-results__option,
html[lang="ur"] body select[name="book_ref"],
html[lang="ur"] body select[name="book_ref"] + .select2-container .select2-selection__rendered {
    font-family: var(--fo-font-arabic) !important;
}

.urdu-main-description,
.urdu-main-description :where(p, div, li, blockquote, h1, h2, h3, h4, h5, h6) {
    font-family: var(--fo-font-urdu) !important;
    direction: rtl;
    text-align: right !important;
    unicode-bidi: plaintext;
    line-height: 2.05;
    overflow-wrap: anywhere;
}

html[lang="ur"] body .urdu-main-description :where([lang="ar"], .arabic-text),
html[lang="ur"] body .fatwa-reference :where([lang="ar"], .arabic-text) {
    font-family: var(--fo-font-arabic) !important;
}