/* ===================================================================== HOMEROOM — RTL support Activated via [dir="rtl"] on , toggled by script.js IMPORTANT: CSS Flexbox's default `flex-direction: row` is already direction-aware — it automatically mirrors to flow right-to-left when the inherited `direction`/`dir` is rtl, with no extra CSS needed. So this file deliberately does NOT add flex-direction: row-reverse to plain flex rows; doing so would cancel the automatic mirroring and make them look un-mirrored again. What flexbox does NOT do automatically — absolute/fixed positioning (left/right), physical margin/padding/border (-left/-right), float, and transforms — still needs the explicit overrides below. ===================================================================== */ [dir="rtl"]{ text-align:right; } [dir="rtl"] body{ font-family:'Plus Jakarta Sans', Tahoma, Arial, sans-serif; } /* header */ [dir="rtl"] .nav-link .caret{ transform:rotate(135deg); margin-top:2px; } [dir="rtl"] .has-dropdown:hover .caret{ transform:rotate(315deg); margin-top:-3px; } [dir="rtl"] .dropdown-panel{ left:auto; right:0; text-align:right; } [dir="rtl"] .eyebrow::before{ order:2; } /* mobile nav — dropdown panel, same vertical animation in both directions */ [dir="rtl"] .mobile-nav .mobile-sub{ padding-left:0; padding-right:16px; } /* skip link */ [dir="rtl"] .skip-link{ left:auto; right:-999px; border-radius:0 0 0 8px; } [dir="rtl"] .skip-link:focus{ right:0; } /* hero */ [dir="rtl"] .avatar-stack img{ margin-left:0; margin-right:-12px; } [dir="rtl"] .avatar-stack img:first-child{ margin-right:0; } [dir="rtl"] .hero-badge{ text-align:right; } /* generic icon mirroring for directional arrows */ [dir="rtl"] .icon-flip{ transform:scaleX(-1); } /* cards / tags — absolute-positioned badges need a physical swap */ [dir="rtl"] .verified-pill{ left:auto; right:12px; } [dir="rtl"] .rate-pill{ right:auto; left:12px; } /* forms */ [dir="rtl"] .input-group svg{ left:auto; right:16px; } [dir="rtl"] .input-group input{ padding-left:16px; padding-right:44px; } [dir="rtl"] .field label{ text-align:right; } /* dashboard */ [dir="rtl"] .dash-sidebar{ border-right:0; border-left:1px solid var(--line); } @media (max-width:960px){ [dir="rtl"] .dash-sidebar{ left:auto; right:0; transform:translateX(100%); border-left:0; border-right:1px solid var(--line); } [dir="rtl"] .dash-sidebar.is-open{ transform:translateX(0) !important; } } [dir="rtl"] .kpi-card{ text-align:right; } [dir="rtl"] .data-table th, [dir="rtl"] .data-table td{ text-align:right; } /* modal / toast — float and fixed positioning are physical, not logical */ [dir="rtl"] .modal-close{ float:left; } [dir="rtl"] .toast-stack{ right:auto; left:24px; } /* scroll-reveal animation direction feels more natural mirrored */ [dir="rtl"] [data-reveal="left"]{ transform:translateX(32px); } [dir="rtl"] [data-reveal="right"]{ transform:translateX(-32px); } /* misc alignment */ [dir="rtl"] .section-head{ margin-left:auto; margin-right:0; } [dir="rtl"] .section-head.center{ margin-left:auto; margin-right:auto; } [dir="rtl"] .profile-header{ text-align:right; } [dir="rtl"] .review-row{ text-align:right; }