/* ==========================================================
assets/css/i18n.css
Standard Tech (ST-POS) — Language Toggle Support Styles
==========================================================
Pairs with includes/lang.php's t() dual-span output and
assets/js/i18n.js. Include this AFTER style.css / admin.css
and BEFORE rtl.css in your , e.g.:
========================================================== */
/* Hide whichever language span is inactive. JS toggles this class
instantly on click -- no reload, no flicker. */
.lang-hidden {
display: none !important;
}
/* Urdu spans use the Noto Nastaliq Urdu stack consistently with the
rest of the site's RTL content (matches rtl.css typography choices). */
.i18n-ur {
font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', Tahoma, sans-serif;
direction: rtl;
unicode-bidi: isolate;
}
.i18n-en {
direction: ltr;
unicode-bidi: isolate;
}
/* Prevent layout jump: both spans share the same inline context,
so toggling visibility doesn't reflow surrounding flex/grid items. */
.i18n {
display: inline;
}
/* If a t() call lands inside a flex/inline-flex parent (nav links,
buttons, badges), keep the visible span from breaking alignment. */
.btn .i18n,
.nav-link .i18n,
.badge .i18n {
display: inline-flex;
align-items: center;
}
/* No-JS fallback: if JavaScript is disabled, both spans would
otherwise show simultaneously. This rule hides Urdu by default;
the html[dir="rtl"] case (when PHP's cookie-based $LANG was 'ur'
on a no-JS request) flips it back via the override below. */
.i18n-ur { display: none; }
html[dir="rtl"] .i18n-ur { display: inline; }
html[dir="rtl"] .i18n-en { display: none; }
/* As soon as i18n.js runs, it adds/removes .lang-hidden directly on
spans (overriding the rules above via inline specificity through
classList), so this fallback only ever matters for the brief
pre-JS/no-JS window. */