/* rtl.css — Arabic / RTL layout overrides Applied when is active. */ /* ── Arabic font ──────────────────────────────────────────── */ [dir="rtl"] body { font-family: 'Cairo', 'Noto Kufi Arabic', -apple-system, Arial, sans-serif; text-align: right; } /* ── Bootstrap flex / margin helpers ─────────────────────── */ [dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; } [dir="rtl"] .ms-lg-2 { margin-right: 0.5rem !important; margin-left: 0 !important; } [dir="rtl"] .ms-2 { margin-right: 0.5rem !important; margin-left: 0 !important; } [dir="rtl"] .ms-3 { margin-right: 1rem !important; margin-left: 0 !important; } [dir="rtl"] .me-1 { margin-left: 0.25rem !important; margin-right: 0 !important; } [dir="rtl"] .me-2 { margin-left: 0.5rem !important; margin-right: 0 !important; } [dir="rtl"] .me-3 { margin-left: 1rem !important; margin-right: 0 !important; } [dir="rtl"] .ps-3 { padding-right: 1rem !important; padding-left: 0 !important; } [dir="rtl"] .pe-3 { padding-left: 1rem !important; padding-right: 0 !important; } [dir="rtl"] .text-end { text-align: left !important; } [dir="rtl"] .text-start { text-align: right !important; } /* ── Navbar ───────────────────────────────────────────────── */ [dir="rtl"] .navbar-nav { padding-right: 0; } [dir="rtl"] .dropdown-menu { text-align: right; } [dir="rtl"] .dropdown-menu-end { right: auto !important; left: 0 !important; } [dir="rtl"] .dropdown-item { padding-right: 1.5rem; padding-left: 0.75rem; } [dir="rtl"] .navbar-brand { flex-direction: row-reverse; } /* Flip navbar-brand border separator to left side in RTL */ [dir="rtl"] .navbar-ssbmt .navbar-brand { padding-right: 0; padding-left: 20px; margin-right: 0; margin-left: 8px; border-right: none; border-left: 1px solid rgba(255,255,255,.18); } /* ── Back-navigation arrow flip ───────────────────────────── */ /* Mirror left-arrow icons used as "back" links */ [dir="rtl"] a .bi-arrow-left, [dir="rtl"] button .bi-arrow-left { display: inline-block; transform: scaleX(-1); } /* ── Lists ────────────────────────────────────────────────── */ /* Flip list indentation so markers appear on the correct side */ [dir="rtl"] ul, [dir="rtl"] ol { padding-right: 1.25rem !important; padding-left: 0 !important; } /* Exception: Bootstrap nav/utility lists that use padding-left:0 */ [dir="rtl"] .navbar-nav, [dir="rtl"] .dropdown-menu, [dir="rtl"] .list-unstyled, [dir="rtl"] .list-inline, [dir="rtl"] .pagination, [dir="rtl"] .breadcrumb { padding-right: 0 !important; padding-left: 0 !important; } /* ── Footer ───────────────────────────────────────────────── */ [dir="rtl"] .footer-ssbmt { text-align: right; } [dir="rtl"] .footer-ssbmt a { text-align: right; display: block; } [dir="rtl"] .footer-bottom { direction: rtl; } [dir="rtl"] .footer-bottom .col-md-6:last-child { justify-content: flex-start !important; } /* ── Hero section ─────────────────────────────────────────── */ [dir="rtl"] .hero-section { text-align: right; } [dir="rtl"] .hero-meta { justify-content: flex-end; } [dir="rtl"] .d-flex.gap-3 { justify-content: flex-start; } /* Flip hero-stat border separator */ [dir="rtl"] .hero-stat { border-right: none; border-left: 1px solid rgba(255,255,255,.2); } [dir="rtl"] .hero-stat:last-child { border-left: none; } /* ── Section headings (center-aligned stays center) ────────── */ [dir="rtl"] .section-title { text-align: center; } /* ── reg-section-title border (register.php) ──────────────── */ [dir="rtl"] .reg-section-title { border-left: none !important; border-right: 4px solid var(--reg-accent, var(--clr-secondary)); padding-left: 0 !important; padding-right: 12px !important; } /* ── Forms ────────────────────────────────────────────────── */ [dir="rtl"] .form-control, [dir="rtl"] .form-select, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea { text-align: right; direction: rtl; } [dir="rtl"] .form-label { text-align: right; display: block; } [dir="rtl"] .input-group { flex-direction: row-reverse; } /* ── Announcement event button ───────────────────────────── */ [dir="rtl"] .announcement-event-btn { text-align: right; } /* ── Portal / login page ─────────────────────────────────── */ /* "Forgot Password?" sits on end-side in both LTR and RTL */ [dir="rtl"] .portal-forgot-wrap { text-align: left; } /* ── Cards & lists ────────────────────────────────────────── */ [dir="rtl"] .org-card { text-align: right; } [dir="rtl"] .event-card { text-align: right; } [dir="rtl"] .cert-foot { flex-direction: row-reverse; } /* ── Language switcher button ─────────────────────────────── */ .lang-btn { display: inline-flex; align-items: center; justify-content: center; padding: 4px 12px; border-radius: 20px; border: 1px solid rgba(255,255,255,.45); color: rgba(255,255,255,.9); text-decoration: none; font-size: .78rem; font-weight: 700; letter-spacing: .5px; transition: background .2s, border-color .2s; white-space: nowrap; font-family: -apple-system, Arial, sans-serif; } .lang-btn:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.7); color: #fff; text-decoration: none; }