/* * rtl.css – RTL overrides for Arabic (ar) language * Loaded only when is set */ [dir="rtl"] { font-family: 'Noto Naskh Arabic', 'Noto Sans', serif; } /* ── Navbar ──────────────────────────────────────────── */ [dir="rtl"] .navbar-nav { flex-direction: row-reverse; } [dir="rtl"] .navbar-brand { margin-left: 1rem; margin-right: 0; } [dir="rtl"] .dropdown-menu { left: auto; right: 0; text-align: right; } [dir="rtl"] .lang-switcher { left: 1rem; right: auto; } /* ── Hero ────────────────────────────────────────────── */ [dir="rtl"] .hero-content { text-align: right; } [dir="rtl"] .hero-badge { text-align: right; } /* ── Progress bar ────────────────────────────────────── */ [dir="rtl"] .progress-stats { flex-direction: row-reverse; } /* ── Cards & Grid ────────────────────────────────────── */ [dir="rtl"] .tier-card { text-align: right; } [dir="rtl"] .news-card { text-align: right; } [dir="rtl"] .event-item { text-align: right; } [dir="rtl"] .event-item .event-date { margin-right: 0; margin-left: 1.5rem; } [dir="rtl"] .contact-info-card { text-align: right; } [dir="rtl"] .contact-info-card i { margin-right: 0 !important; margin-left: 0.5rem; } /* ── Footer ──────────────────────────────────────────── */ [dir="rtl"] .footer { text-align: right; } [dir="rtl"] .footer-links li { text-align: right; } [dir="rtl"] .footer-social { justify-content: flex-end; } /* ── Forms ────────────────────────────────────────────── */ [dir="rtl"] .form-control, [dir="rtl"] .form-select { text-align: right; } [dir="rtl"] .input-group > :first-child { border-radius: 0 0.375rem 0.375rem 0 !important; } [dir="rtl"] .input-group > :last-child { border-radius: 0.375rem 0 0 0.375rem !important; } /* ── Donation tiers ──────────────────────────────────── */ [dir="rtl"] .tier-icon { float: right; margin-left: 0.75rem; margin-right: 0; } /* ── Milestones timeline ─────────────────────────────── */ [dir="rtl"] .timeline::before { right: 18px; left: auto; } [dir="rtl"] .timeline-item { padding-right: 48px; padding-left: 0; } [dir="rtl"] .timeline-icon { right: 0; left: auto; } /* ── FAQ accordion ───────────────────────────────────── */ [dir="rtl"] .accordion-button { text-align: right; } [dir="rtl"] .accordion-button::after { margin-right: auto; margin-left: 0; } /* ── WhatsApp float button ───────────────────────────── */ [dir="rtl"] .whatsapp-float { right: auto; left: 1.5rem; } /* ── Utility overrides ───────────────────────────────── */ [dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } [dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } [dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; } [dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } [dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } [dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; } [dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; } [dir="rtl"] .pe-3 { padding-right: 0 !important; padding-left: 1rem !important; } [dir="rtl"] .ps-3 { padding-left: 0 !important; padding-right: 1rem !important; } [dir="rtl"] .text-start { text-align: right !important; } [dir="rtl"] .text-end { text-align: left !important; } [dir="rtl"] .float-start { float: right !important; } [dir="rtl"] .float-end { float: left !important; } [dir="rtl"] .border-start { border-left: none !important; border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } /* ── Share buttons row ───────────────────────────────── */ [dir="rtl"] .share-buttons { flex-direction: row-reverse; } /* ── IBAN copy block ─────────────────────────────────── */ [dir="rtl"] .bank-details .copy-btn { margin-right: 0.5rem; margin-left: 0; } /* ── Responsive adjustments ──────────────────────────── */ @media (max-width: 768px) { [dir="rtl"] .navbar-toggler { margin-left: 0; margin-right: auto; } }