/* * ═══════════════════════════════════════════════════════ * RTL (Right-to-Left) Comprehensive Stylesheet * Medicine For All | الدواء للجميع * Supports: Arabic, Urdu, Persian, and all RTL languages * ═══════════════════════════════════════════════════════ */ /* ─── Base Direction ─── */ [dir="rtl"] { direction: rtl; text-align: right; } [dir="rtl"] body { font-family: 'Noto Sans Arabic', 'Cairo', 'Segoe UI', Tahoma, sans-serif; } /* ─── Typography & Text ─── */ [dir="rtl"] .nav-logo-subtitle, [dir="rtl"] .footer-brand div[dir="rtl"], [dir="rtl"] [lang="ar"] { font-family: 'Noto Sans Arabic', 'Cairo', sans-serif; letter-spacing: 0; } /* ═══════════════════════════════════════════════════════ PUBLIC LAYOUT — NAVBAR Note: With dir="rtl" on , flex-direction:row already renders items right-to-left. Do NOT add flex-direction:row-reverse — that double-reverses back to LTR. ═══════════════════════════════════════════════════════ */ [dir="rtl"] .nav-logo-text { text-align: right; } [dir="rtl"] .nav-link svg { margin-left: 0; margin-right: 2px; } /* ─── Dropdown Menus ─── */ [dir="rtl"] .dropdown-menu { text-align: right; } [dir="rtl"] .nav-has-dropdown .dropdown-menu { text-align: right; } /* ─── Mobile Nav ─── */ [dir="rtl"] .mobile-nav-link { text-align: right; } [dir="rtl"] .mobile-nav-footer { text-align: right; } /* ═══════════════════════════════════════════════════════ SEARCH ═══════════════════════════════════════════════════════ */ [dir="rtl"] .search-result-item { text-align: right; } /* ═══════════════════════════════════════════════════════ BREADCRUMBS ═══════════════════════════════════════════════════════ */ [dir="rtl"] .breadcrumb-nav { text-align: right; } [dir="rtl"] .breadcrumb-sep { transform: scaleX(-1); } /* ═══════════════════════════════════════════════════════ HERO SECTIONS (Home, About, Contact, Donate, etc.) ═══════════════════════════════════════════════════════ */ [dir="rtl"] .hero-content, [dir="rtl"] .hero-section *, [dir="rtl"] .about-hero-content, [dir="rtl"] .contact-hero-content, [dir="rtl"] .donate-hero-content, [dir="rtl"] .events-hero-content, [dir="rtl"] .volunteer-hero-content, [dir="rtl"] .help-hero-content { text-align: right; } [dir="rtl"] .hero-actions, [dir="rtl"] .hero-cta-group { justify-content: flex-start; } /* ═══════════════════════════════════════════════════════ CARDS & GRIDS ═══════════════════════════════════════════════════════ */ [dir="rtl"] .campaign-card, [dir="rtl"] .event-card, [dir="rtl"] .job-card, [dir="rtl"] .blog-card, [dir="rtl"] .team-card { text-align: right; } [dir="rtl"] .card-badge { right: auto; left: 0.75rem; } /* ═══════════════════════════════════════════════════════ FORMS (All form types) ═══════════════════════════════════════════════════════ */ [dir="rtl"] .form-group { text-align: right; } [dir="rtl"] .form-input, [dir="rtl"] .form-textarea, [dir="rtl"] .form-select, [dir="rtl"] input[type="text"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="number"], [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; direction: rtl; } /* Keep LTR for email/URL inputs */ [dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"] { direction: ltr; text-align: left; } [dir="rtl"] .form-label { text-align: right; } [dir="rtl"] .form-card { text-align: right; } [dir="rtl"] .form-check { padding-left: 0; padding-right: 1.25rem; } [dir="rtl"] .form-check input[type="checkbox"], [dir="rtl"] .form-check input[type="radio"] { float: right; margin-left: 0.25rem; margin-right: -1.25rem; } [dir="rtl"] .form-help { text-align: right; } [dir="rtl"] .form-error { text-align: right; } /* ─── File Upload ─── */ [dir="rtl"] .file-upload, [dir="rtl"] .upload-area { text-align: right; } /* ═══════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════ */ [dir="rtl"] .btn svg, [dir="rtl"] .nav-donate-btn svg { margin-right: 0; margin-left: 0.5rem; } /* ═══════════════════════════════════════════════════════ CAMPAIGN DETAIL PAGE ═══════════════════════════════════════════════════════ */ [dir="rtl"] .campaign-detail-grid { direction: rtl; } [dir="rtl"] .campaign-sidebar { order: -1; } [dir="rtl"] .campaign-meta-item svg { margin-right: 0; margin-left: 0.5rem; } [dir="rtl"] .progress-bar { direction: ltr; } /* ═══════════════════════════════════════════════════════ DONATE PAGE ═══════════════════════════════════════════════════════ */ [dir="rtl"] .donation-widget { text-align: right; } [dir="rtl"] .donation-amount-grid { direction: rtl; } [dir="rtl"] .donation-summary { text-align: right; } [dir="rtl"] .donation-summary dt { text-align: right; } [dir="rtl"] .donation-summary dd { text-align: left; } [dir="rtl"] .payment-methods { text-align: right; } /* ═══════════════════════════════════════════════════════ DONOR PORTAL ═══════════════════════════════════════════════════════ */ [dir="rtl"] .donor-sidebar { border-right: none; border-left: 1px solid #e2e8f0; } [dir="rtl"] .donor-sidebar-link { text-align: right; } [dir="rtl"] .donor-sidebar-link svg { margin-right: 0; margin-left: 0.5rem; } [dir="rtl"] .donor-stat-card { text-align: right; } [dir="rtl"] .ticket-status { margin-left: 0; margin-right: auto; } /* ═══════════════════════════════════════════════════════ EVENTS PAGE ═══════════════════════════════════════════════════════ */ [dir="rtl"] .event-meta-item svg { margin-right: 0; margin-left: 0.5rem; } [dir="rtl"] .event-sidebar { order: -1; } [dir="rtl"] .event-countdown { direction: ltr; } /* ═══════════════════════════════════════════════════════ HELP REQUEST PAGE ═══════════════════════════════════════════════════════ */ [dir="rtl"] .help-request-form { text-align: right; } [dir="rtl"] .help-step-connector { transform: scaleX(-1); } [dir="rtl"] .tracking-timeline { border-left: none; border-right: 3px solid #e2e8f0; padding-left: 0; padding-right: 2rem; } [dir="rtl"] .tracking-timeline::before { left: auto; right: -8px; } [dir="rtl"] .timeline-item::before { left: auto; right: -2.5rem; } /* ═══════════════════════════════════════════════════════ BLOG & ARTICLES ═══════════════════════════════════════════════════════ */ [dir="rtl"] .blog-post-content { text-align: right; } [dir="rtl"] .blog-author-info { text-align: right; } [dir="rtl"] .blog-sidebar { order: -1; } [dir="rtl"] .comment { text-align: right; } [dir="rtl"] .comment-avatar { margin-right: 0; margin-left: 1rem; } /* ═══════════════════════════════════════════════════════ JOBS / CAREERS ═══════════════════════════════════════════════════════ */ [dir="rtl"] .job-meta-item svg { margin-right: 0; margin-left: 0.5rem; } /* ═══════════════════════════════════════════════════════ VOLUNTEER PAGE ═══════════════════════════════════════════════════════ */ [dir="rtl"] .benefit-card { text-align: right; } [dir="rtl"] .benefit-card-icon { margin-right: 0; margin-left: 1rem; } /* ═══════════════════════════════════════════════════════ TABS & ACCORDIONS ═══════════════════════════════════════════════════════ */ [dir="rtl"] .accordion-header svg { margin-left: 0; margin-right: auto; } [dir="rtl"] .accordion-body { text-align: right; } /* ═══════════════════════════════════════════════════════ PAGINATION ═══════════════════════════════════════════════════════ */ [dir="rtl"] .pagination .page-link svg { transform: scaleX(-1); } /* ═══════════════════════════════════════════════════════ ALERTS & NOTIFICATIONS ═══════════════════════════════════════════════════════ */ [dir="rtl"] [role="alert"] { text-align: right; } [dir="rtl"] .alert { text-align: right; } [dir="rtl"] .alert svg { margin-right: 0; margin-left: 0.75rem; } /* ═══════════════════════════════════════════════════════ COOKIE / CONSENT BANNER ═══════════════════════════════════════════════════════ */ [dir="rtl"] .cookie-banner { text-align: right; } [dir="rtl"] #cookieConsent p { text-align: right; } [dir="rtl"] #cookieConsent > div > div > div { text-align: right; } /* ═══════════════════════════════════════════════════════ NEWSLETTER SECTION ═══════════════════════════════════════════════════════ */ [dir="rtl"] .newsletter-input { border-radius: 0 12px 12px 0; } [dir="rtl"] .newsletter-btn { border-radius: 12px 0 0 12px; } /* ═══════════════════════════════════════════════════════ STATS SECTION ═══════════════════════════════════════════════════════ */ [dir="rtl"] .stat-item { text-align: right; } /* ═══════════════════════════════════════════════════════ FOOTER Note: With dir="rtl" on , flex and grid already render items right-to-left. No row-reverse needed. ═══════════════════════════════════════════════════════ */ [dir="rtl"] .footer-links { text-align: right; } [dir="rtl"] .footer-brand { text-align: right; } [dir="rtl"] .footer-title { text-align: right; } [dir="rtl"] .footer-links li { text-align: right; } [dir="rtl"] .footer-contact-item { text-align: right; } /* ─── Footer Bottom ─── */ [dir="rtl"] .footer-bottom a { text-align: right; } [dir="rtl"] .footer-copyright { text-align: right; } /* ═══════════════════════════════════════════════════════ ADMIN PANEL ═══════════════════════════════════════════════════════ */ [dir="rtl"] .admin-layout { direction: rtl; } [dir="rtl"] .admin-sidebar { left: auto; right: 0; border-right: none; border-left: 1px solid rgba(255,255,255,0.06); } [dir="rtl"] .admin-content { margin-left: 0; margin-right: 260px; } [dir="rtl"] .admin-nav-link { text-align: right; } [dir="rtl"] .admin-nav-link svg { margin-right: 0; margin-left: 0.625rem; } [dir="rtl"] .admin-page-title { text-align: right; } [dir="rtl"] .admin-page-subtitle { text-align: right; } /* ─── Admin Cards ─── */ [dir="rtl"] .admin-stat-card { text-align: right; } [dir="rtl"] .admin-form-grid { direction: rtl; } /* ─── Admin Modals ─── */ [dir="rtl"] .modal-dialog { text-align: right; } [dir="rtl"] .modal-title { text-align: right; } [dir="rtl"] .modal-close { right: auto; left: 1rem; } /* ═══════════════════════════════════════════════════════ TABLES (Public & Admin) ═══════════════════════════════════════════════════════ */ [dir="rtl"] table, [dir="rtl"] .admin-table { text-align: right; } [dir="rtl"] th, [dir="rtl"] td { text-align: right; } [dir="rtl"] th:last-child, [dir="rtl"] td:last-child { text-align: left; } /* ═══════════════════════════════════════════════════════ BADGES & TAGS ═══════════════════════════════════════════════════════ */ [dir="rtl"] .badge { margin-left: 0; margin-right: 0; } /* ═══════════════════════════════════════════════════════ SPACING OVERRIDES ═══════════════════════════════════════════════════════ */ [dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; } [dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; } [dir="rtl"] .mr-4 { margin-right: 0; margin-left: 1rem; } [dir="rtl"] .ml-4 { margin-left: 0; margin-right: 1rem; } [dir="rtl"] .pr-2 { padding-right: 0; padding-left: 0.5rem; } [dir="rtl"] .pl-2 { padding-left: 0; padding-right: 0.5rem; } /* Logical property fallbacks for inline styles */ [dir="rtl"] [style*="margin-left:"] { --rtl-note: "Consider using margin-inline-start"; } [dir="rtl"] [style*="padding-left:"] { --rtl-note: "Consider using padding-inline-start"; } /* ═══════════════════════════════════════════════════════ ICONOGRAPHY & ARROWS ═══════════════════════════════════════════════════════ */ [dir="rtl"] .icon-arrow-right { transform: scaleX(-1); } [dir="rtl"] .icon-chevron-right { transform: scaleX(-1); } [dir="rtl"] [style*="text-align: left"] { text-align: right !important; } /* ═══════════════════════════════════════════════════════ LIST ITEMS WITH ICONS ═══════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════ AUTH PAGES (Login / Register / Reset) ═══════════════════════════════════════════════════════ */ [dir="rtl"] .auth-card { text-align: right; } [dir="rtl"] .auth-card .form-group { text-align: right; } /* ═══════════════════════════════════════════════════════ RESPONSIVE OVERRIDES ═══════════════════════════════════════════════════════ */ @media (max-width: 768px) { [dir="rtl"] .admin-content { margin-right: 0; } [dir="rtl"] .campaign-detail-grid, [dir="rtl"] .event-detail-grid { display: flex; flex-direction: column; } [dir="rtl"] .campaign-sidebar, [dir="rtl"] .event-sidebar, [dir="rtl"] .blog-sidebar { order: 0; } [dir="rtl"] .footer-grid { text-align: right; } [dir="rtl"] .footer-bottom { flex-direction: column; align-items: flex-end; } [dir="rtl"] .hero-actions { flex-direction: column; align-items: stretch; } } @media (max-width: 480px) { [dir="rtl"] .donation-amount-grid { grid-template-columns: 1fr 1fr; } [dir="rtl"] .btn-group { flex-direction: column; } } /* Force LTR direction on telephone links and numbers to preserve formatting */ [dir="rtl"] a[href^="tel:"], [dir="rtl"] [dir="ltr"] { direction: ltr !important; unicode-bidi: embed; display: inline-block; }