/* ============================================================================ AMAADOR FINANCE — Tools RTL + language-switcher styling. Loads after amaador-design-system.css + amaador-finance-overrides.css so it can use the monochrome chrome tokens. Paired with i18n-tools-common.js. ============================================================================ */ /* Arabic gets Tajawal everywhere it applies, matching the rest of the suite. */ html[lang="ar"], [dir="rtl"] { --font-body: 'Tajawal', 'Poppins', system-ui, sans-serif; --font-display: 'Tajawal', 'Lora', Georgia, serif; } html[lang="ar"] body { font-family: var(--font-body); line-height: 1.9; } /* Numeric entry stays LTR even inside an RTL page — digits must not reverse. */ [dir="rtl"] input[type="number"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"] { direction: ltr; text-align: right; } /* Field labels/hints/results flip naturally via dir="rtl" on ; only fix icon-then-text ordering where an icon precedes a label visually. */ [dir="rtl"] .field label, [dir="rtl"] .hint { text-align: right; } /* Language switcher — small chrome pill pair, mirrors the suite's nav-pill style. */ .lang-switch { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid var(--border-default, rgba(255,255,255,.09)); background: var(--surface-sm, rgba(255,255,255,.035)); } .lang-switch button { font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 6px 12px; border-radius: 999px; border: none; cursor: pointer; background: transparent; color: var(--text-tertiary, #6E7090); transition: background 160ms ease, color 160ms ease; } .lang-switch button.on { background: var(--cta-bg, #FFFFFF); color: var(--cta-text, #04050A); } .lang-switch button:not(.on):hover { color: var(--text-primary, #F2F3FA); } @media print { .lang-switch { display: none !important; } }