/*
 * i18n (docs/i18n/PLAN.md): Arabic / right-to-left fixes on top of the rtlcss copies in ./rtl/ (loaded only when the
 * shop panel is in Arabic). Keep it small: fix a screen here only when its own markup cannot use logical properties.
 */
html[dir="rtl"] body,
html[dir="rtl"] .btn,
html[dir="rtl"] .form-control,
html[dir="rtl"] .dropdown-menu,
html[dir="rtl"] .swal2-popup,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea {
    font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Roboto', Helvetica, Arial, sans-serif;
}

/* Arabic needs a little more line height to stay legible at small sizes. */
html[dir="rtl"] body { line-height: 1.6; }

/* Directional icons point the other way. */
html[dir="rtl"] [class*="icon-arrow-left"],
html[dir="rtl"] [class*="icon-arrow-right"],
html[dir="rtl"] [class*="icon-arrow-small-left"],
html[dir="rtl"] [class*="icon-arrow-small-right"],
html[dir="rtl"] .icon-circle-left2,
html[dir="rtl"] .icon-circle-right2,
html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .fa-chevron-left,
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .fa-angle-left,
html[dir="rtl"] .fa-angle-right {
    display: inline-block;
    transform: scaleX(-1);
}

/* Numbers, codes, phone numbers, emails and URLs read left to right inside Arabic text. */
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] .ltr {
    direction: ltr;
    text-align: right;
}

/* The top bar's Express switch (shop.layouts._expressToggle): the knob starts on the right. */
html[dir="rtl"] .express-switch::after { left: auto; right: .125rem; transition: right .15s; }
html[dir="rtl"] .express-toggle.is-on .express-switch::after { left: auto; right: .9375rem; }