@font-face {
    font-family: "Ampol UI";
    src: url("../fonts/estedad-variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root { --ampol-ui-font: "Ampol UI", "Vazirmatn", Tahoma, Arial, sans-serif; }

html[dir="rtl"] body,
html[dir="rtl"] body.ampol-app,
html[dir="rtl"] body.ampol-app :where(
    div, section, article, aside, header, footer, nav, main,
    h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea,
    label, span, small, b, strong, em, i, table, thead, tbody, tr, th, td,
    ul, ol, li, details, summary, code, pre
) {
    font-family: var(--ampol-ui-font) !important;
}

html[dir="rtl"] body.ampol-app :where(input, select, textarea, button)::placeholder {
    font-family: var(--ampol-ui-font) !important;
}