@font-face {
    font-family: "Noto Sans Arabic";
    src: url("/fonts/NotoSansArabic.ttf") format("truetype");
    font-display: swap;
}

html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea {
    font-family: "Noto Sans Arabic", Arial, sans-serif !important;
}

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] .profile-email,
html[dir="rtl"] .code-value,
html[dir="rtl"] .user-code {
    direction: ltr;
    text-align: left;
}

html[dir="rtl"] table th,
html[dir="rtl"] table td,
html[dir="rtl"] .profile-item,
html[dir="rtl"] .logout-btn {
    text-align: right;
}

html[dir="rtl"] .profile-dropdown {
    right: auto !important;
    left: 0 !important;
}

html[dir="rtl"] .bi-arrow-left::before,
html[dir="rtl"] .bi-arrow-right::before {
    transform: scaleX(-1);
}

html[dir="rtl"] .input-with-suffix .settings-input {
    padding-right: 12px !important;
    padding-left: 78px !important;
}

html[dir="rtl"] .input-with-suffix > span {
    right: auto !important;
    left: 12px !important;
}

html[dir="rtl"] .toggle-input::after {
    left: auto !important;
    right: 3px !important;
}

html[dir="rtl"] .toggle-input:checked::after {
    transform: translateX(-19px) !important;
}

html[dir="rtl"] .validation-message,
html[dir="rtl"] .field-validation-error {
    text-align: right;
}

body:has(.header-language-selector) .public-language-selector {
    display: none;
}

@media (max-width: 700px) {
    html[dir="rtl"] .public-language-selector {
        left: 10px;
    }
}