/* ═══════════════════════════════════════════════════════════════ AhmedXD – RTL (Right-to-Left) Layout Overrides Applied automatically when is set. ═══════════════════════════════════════════════════════════════ */ /* ── Arabic Font ─────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap'); [dir="rtl"] { font-family: 'Tajawal', 'Inter', system-ui, sans-serif; } /* ── Base direction ──────────────────────────────────────────── */ [dir="rtl"] * { direction: rtl; unicode-bidi: embed; } /* ── Header ──────────────────────────────────────────────────── */ [dir="rtl"] .header-inner { flex-direction: row-reverse; } [dir="rtl"] .desktop-nav { flex-direction: row-reverse; margin-left: unset; margin-right: auto; } [dir="rtl"] .header-actions { flex-direction: row-reverse; } [dir="rtl"] .logo-link { flex-direction: row-reverse; } /* ── Profile dropdown ────────────────────────────────────────── */ [dir="rtl"] .profile-btn { flex-direction: row-reverse; } [dir="rtl"] .profile-dropdown { right: unset; left: 0; } [dir="rtl"] .profile-dropdown a, [dir="rtl"] .profile-dropdown span { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .nav-courses-section { text-align: right; } /* ── Notification dropdown ───────────────────────────────────── */ [dir="rtl"] .notif-dropdown { right: unset; left: 0; } [dir="rtl"] .notif-header { flex-direction: row-reverse; } /* ── Mobile nav ──────────────────────────────────────────────── */ [dir="rtl"] .mobile-nav { text-align: right; } /* ── Language toggle ─────────────────────────────────────────── */ [dir="rtl"] .lang-toggle { margin-left: unset; margin-right: 0; } /* ── Footer ──────────────────────────────────────────────────── */ [dir="rtl"] .footer-grid { direction: rtl; } [dir="rtl"] .footer-brand p, [dir="rtl"] .footer-col h4, [dir="rtl"] .footer-col a, [dir="rtl"] .footer-col p { text-align: right; } [dir="rtl"] .footer-social { justify-content: flex-end; } [dir="rtl"] .footer-bottom { text-align: center; } /* ── Forms – floating labels ─────────────────────────────────── */ [dir="rtl"] .form-group.floating label { left: unset; right: 1rem; transform-origin: right top; } [dir="rtl"] .form-group.floating .form-control { padding-left: unset; text-align: right; } [dir="rtl"] .form-group.floating .form-control:not(:placeholder-shown) ~ label, [dir="rtl"] .form-group.floating .form-control:focus ~ label { right: 0.75rem; left: unset; transform: translateY(-1.5rem) scale(0.8); transform-origin: right top; } /* ── Form field icons (right side in LTR → left side in RTL) ── */ [dir="rtl"] .field-icon { left: 1rem; right: unset; } [dir="rtl"] .form-group.floating .form-control { padding-right: 1rem; padding-left: 2.75rem; } /* Field with icon on right (like email suffix) ── */ [dir="rtl"] .field-suffix { right: unset; left: 0.875rem; } /* ── Password show/hide button ───────────────────────────────── */ [dir="rtl"] .show-pass-btn { right: unset; left: 0.5rem; } /* ── Checkbox labels ─────────────────────────────────────────── */ [dir="rtl"] .checkbox-label { flex-direction: row-reverse; justify-content: flex-end; gap: 0.5rem; } /* ── Auth form row ───────────────────────────────────────────── */ [dir="rtl"] .form-row-space { flex-direction: row-reverse; } /* ── Auth panel (left branding) ──────────────────────────────── */ [dir="rtl"] .auth-container { flex-direction: row-reverse; } [dir="rtl"] .panel-features, [dir="rtl"] .panel-steps { text-align: right; } [dir="rtl"] .panel-feature { flex-direction: row-reverse; } [dir="rtl"] .panel-step { flex-direction: row-reverse; } /* ── Auth redirect ───────────────────────────────────────────── */ [dir="rtl"] .auth-redirect { direction: rtl; } /* ── Auth divider ────────────────────────────────────────────── */ [dir="rtl"] .auth-divider { direction: rtl; } /* ── Buttons – icon + text ───────────────────────────────────── */ [dir="rtl"] .btn i:first-child { margin-left: 0.4rem; margin-right: 0; } [dir="rtl"] .btn i:last-child { margin-right: 0.4rem; margin-left: 0; transform: scaleX(-1); } /* ── Course cards ────────────────────────────────────────────── */ [dir="rtl"] .course-card { text-align: right; } [dir="rtl"] .course-meta { flex-direction: row-reverse; } [dir="rtl"] .course-footer { flex-direction: row-reverse; } [dir="rtl"] .course-badges { flex-direction: row-reverse; } [dir="rtl"] .course-meta span i { margin-right: 0; margin-left: 5px; } /* ── Section headings ────────────────────────────────────────── */ [dir="rtl"] .section-head { text-align: center; } /* ── Hero section ────────────────────────────────────────────── */ [dir="rtl"] .hero-content { text-align: right; } [dir="rtl"] .hero-stats { flex-direction: row-reverse; } [dir="rtl"] .hero-actions { flex-direction: row-reverse; justify-content: flex-start; } [dir="rtl"] .hero-social { flex-direction: row-reverse; justify-content: flex-start; } /* ── Profile / Dashboard cards ───────────────────────────────── */ [dir="rtl"] .profile-section, [dir="rtl"] .dash-card, [dir="rtl"] .stat-card { text-align: right; } [dir="rtl"] .info-row { flex-direction: row-reverse; } /* ── Lessons sidebar ─────────────────────────────────────────── */ [dir="rtl"] .lessons-layout { flex-direction: row-reverse; } [dir="rtl"] .lesson-item { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .lesson-meta { flex-direction: row-reverse; } /* ── Exam page ───────────────────────────────────────────────── */ [dir="rtl"] .exam-header { flex-direction: row-reverse; } [dir="rtl"] .exam-meta-cards { flex-direction: row-reverse; } [dir="rtl"] .question-text { text-align: right; } [dir="rtl"] .option-label { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .exam-nav { flex-direction: row-reverse; } [dir="rtl"] .exam-nav .btn-prev i { transform: scaleX(-1); } [dir="rtl"] .exam-nav .btn-next i { transform: scaleX(-1); } /* ── Toast notifications ─────────────────────────────────────── */ [dir="rtl"] .iziToast { direction: rtl; text-align: right; } /* ── Admin buttons (ab) – keep LTR in admin ─────────────────── */ .container-admin [dir="rtl"] * { direction: ltr; } /* ── SweetAlert2 ─────────────────────────────────────────────── */ [dir="rtl"] .swal2-popup { direction: rtl; text-align: right; } [dir="rtl"] .swal2-title, [dir="rtl"] .swal2-html-container { text-align: right; } /* ── Select / Dropdown ───────────────────────────────────────── */ [dir="rtl"] select.form-control, [dir="rtl"] .form-select { text-align-last: right; direction: rtl; padding-right: 1rem; padding-left: 2rem; background-position: left 0.75rem center; } /* ── Scrollbar positioning in RTL ────────────────────────────── */ [dir="rtl"] ::-webkit-scrollbar { /* keep scrollbar on the left in RTL */ } /* ── Filter bar / search ─────────────────────────────────────── */ [dir="rtl"] .filter-bar { flex-direction: row-reverse; } [dir="rtl"] .search-wrap { flex-direction: row-reverse; } [dir="rtl"] .search-wrap i { left: unset; right: 0.75rem; } [dir="rtl"] .search-inp { padding-left: 1rem; padding-right: 2.25rem; text-align: right; } /* ── Table direction ─────────────────────────────────────────── */ [dir="rtl"] table { direction: rtl; } [dir="rtl"] th, [dir="rtl"] td { text-align: right; } /* ── Progress bar ────────────────────────────────────────────── */ [dir="rtl"] .progress-bar-fill { float: right; } /* ── Breadcrumb / nav arrows ─────────────────────────────────── */ [dir="rtl"] .breadcrumb-sep { transform: scaleX(-1); } /* ── Enrollment / TMA status badges ─────────────────────────── */ [dir="rtl"] .sb, [dir="rtl"] .badge { direction: rtl; } /* ── Modal ───────────────────────────────────────────────────── */ [dir="rtl"] .axd-modal .axd-box { direction: rtl; text-align: right; } [dir="rtl"] .axd-box-header { flex-direction: row-reverse; } /* ── Input placeholder alignment ─────────────────────────────── */ [dir="rtl"] input::placeholder, [dir="rtl"] textarea::placeholder { text-align: right; } /* ── Arabic Question Tooltip (?) ─────────────────────────────── */ .q-ar-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary, #6366f1); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; border: none; padding: 0; margin-inline-start: 8px; flex-shrink: 0; vertical-align: middle; position: relative; transition: background 0.2s, transform 0.15s; font-family: 'Tajawal', sans-serif; line-height: 1; /* prevent text selection on double-tap */ -webkit-user-select: none; user-select: none; } .q-ar-btn:hover { background: var(--primary-dark, #4f46e5); transform: scale(1.12); } /* ── Tooltip bubble (shared styles) ─────────────────────────── */ .q-ar-tooltip { position: absolute; z-index: 9999; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: #1e1b4b; color: #e0e7ff; font-family: 'Tajawal', 'Inter', sans-serif; font-size: 0.9rem; line-height: 1.7; padding: 10px 14px; border-radius: 10px; white-space: normal; width: max-content; min-width: 200px; max-width: 320px; text-align: right; direction: rtl; box-shadow: 0 8px 28px rgba(0,0,0,0.4); pointer-events: none; opacity: 0; transition: opacity 0.18s ease; } /* Arrow pointing up */ .q-ar-tooltip::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: #1e1b4b; } /* ── Desktop: show on hover/focus only ──────────────────────── */ @media (hover: hover) and (pointer: fine) { .q-ar-btn:hover .q-ar-tooltip, .q-ar-btn:focus-visible .q-ar-tooltip { opacity: 1; } } /* ── Mobile/Touch: hide the inline tooltip (shown via overlay) ── */ @media (hover: none), (pointer: coarse) { .q-ar-tooltip { display: none !important; } } /* ── Arabic Bottom Sheet Overlay (mobile only) ───────────────── */ #ar-tooltip-overlay { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, 0); transition: background 0.25s ease; align-items: flex-end; justify-content: center; } #ar-tooltip-overlay.ar-ov-open { display: flex; background: rgba(0, 0, 0, 0.45); } #ar-tooltip-sheet { background: #1e1b4b; color: #e0e7ff; font-family: 'Tajawal', 'Inter', sans-serif; font-size: 1.05rem; line-height: 1.8; direction: rtl; text-align: right; width: 100%; max-width: 600px; border-radius: 20px 20px 0 0; padding: 0 0 env(safe-area-inset-bottom, 16px); box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); } #ar-tooltip-overlay.ar-ov-open #ar-tooltip-sheet { transform: translateY(0); } #ar-tooltip-bar { width: 44px; height: 5px; background: rgba(255, 255, 255, 0.3); border-radius: 3px; margin: 12px auto 4px; cursor: pointer; } #ar-tooltip-body { padding: 12px 22px 24px; }