/* ═══════════════════════════════════════════════════════════════════════════ Haytham Junaid — RTL / Arabic Overrides ═══════════════════════════════════════════════════════════════════════════ RULE: dir="rtl" on causes CSS flex-direction:row to flow RIGHT→LEFT automatically in all modern browsers. Adding row-reverse ON TOP of this creates a double-negation (RTL+reverse = LTR again) — which is WRONG. row-reverse is used ONLY for elements where we need to explicitly override the natural RTL order (e.g. icon-before-text in reading direction). ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Base ────────────────────────────────────────────────────────────────── */ body.lang-ar { text-align: right; } /* ─── HEADER / NAV ────────────────────────────────────────────────────────── */ /* Natural RTL flow (NO overrides needed): .header-inner → Logo(right) | Nav(center) | Actions(left) ✓ .nav-menu → الرئيسية(right) … تواصل(left) ✓ .header-actions→ lang-switcher | CTA | hamburger ✓ */ /* Lang switcher only: reverse so active language (عر) appears on the RIGHT */ body.lang-ar .lang-switcher { flex-direction: row-reverse; } /* Dropdown: center under parent using right anchor in RTL */ body.lang-ar .dropdown-menu { left: auto; right: 50%; transform: translateX(50%) translateY(8px); } body.lang-ar .has-dropdown:hover .dropdown-menu { transform: translateX(50%) translateY(0); } /* Dropdown text alignment */ body.lang-ar .dropdown-menu li a { text-align: right; } /* ─── MOBILE MENU ─────────────────────────────────────────────────────────── */ /* In RTL: inset-inline-end:0 resolves to left:0 (menu on LEFT side). We just need to fix the hide transform direction. border-inline-start in RTL = right border on the left-side menu. ✓ */ body.lang-ar .mobile-menu { transform: translateX(-110%); /* hide off-screen to the LEFT */ } body.lang-ar .mobile-menu.open { transform: translateX(0); } body.lang-ar .mobile-nav-list a { text-align: right; } body.lang-ar .mobile-lang { flex-direction: row-reverse; } /* ─── HERO ────────────────────────────────────────────────────────────────── */ body.lang-ar .hero-text { text-align: right; } body.lang-ar .hero-description { text-align: right; } /* Align CTA buttons to the right (flex-start = right in RTL) */ body.lang-ar .hero-cta { justify-content: flex-start; } /* Scroll indicator — stay centered */ body.lang-ar .scroll-indicator { left: 50%; right: auto; } /* ─── SECTION HEADERS ─────────────────────────────────────────────────────── */ body.lang-ar .section-header { text-align: right; } body.lang-ar .cta-inner { text-align: right; } body.lang-ar .page-hero { text-align: right; } body.lang-ar .about-lead, body.lang-ar .about-text { text-align: right; } /* ─── SERVICES ────────────────────────────────────────────────────────────── */ /* Service link: reverse so arrow (→ flipped to ←) is on RIGHT (reading start). Renders as: [← icon][text] reading right→left = "← text" */ body.lang-ar .service-link { flex-direction: row-reverse; } body.lang-ar .service-link-arrow, body.lang-ar .btn-icon { transform: scaleX(-1); } /* Card corner: top-left for RTL */ body.lang-ar .card-corner { right: auto; left: 0; border-right: none; border-left: 2px solid var(--clr-orange); border-top: 2px solid var(--clr-orange); border-radius: var(--radius) 0 0 0; } /* ─── ABOUT ───────────────────────────────────────────────────────────────── */ body.lang-ar .about-cta { justify-content: flex-start; } body.lang-ar .about-badge { right: auto; left: 24px; } /* Feature list: reverse so check-icon is on RIGHT (reading start) */ body.lang-ar .about-feature-item { flex-direction: row-reverse; } /* Tech ring animation stays LTR */ body.lang-ar .about-tech-ring { direction: ltr; } /* ─── PORTFOLIO ───────────────────────────────────────────────────────────── */ body.lang-ar .portfolio-link { flex-direction: row-reverse; } body.lang-ar .portfolio-link svg { transform: scaleX(-1); } body.lang-ar .portfolio-cat, body.lang-ar .portfolio-title, body.lang-ar .portfolio-desc, body.lang-ar .portfolio-tech { text-align: right; } /* ─── STATS ───────────────────────────────────────────────────────────────── */ /* Keep numbers LTR so digits render correctly */ body.lang-ar .stat-value, body.lang-ar .stat-number, body.lang-ar .stat-suffix { direction: ltr; } body.lang-ar .stat-label { text-align: right; } body.lang-ar .stats-bg-line { background: linear-gradient(to left, transparent, var(--clr-orange), transparent); } /* ─── TESTIMONIALS ────────────────────────────────────────────────────────── */ body.lang-ar .testimonial-text { text-align: right; } /* Author: avatar on RIGHT (start) in RTL */ body.lang-ar .testimonial-author { flex-direction: row-reverse; } body.lang-ar .author-info { text-align: right; } /* ─── CTA SECTION ─────────────────────────────────────────────────────────── */ body.lang-ar .cta-desc { text-align: right; } body.lang-ar .cta-buttons { justify-content: flex-start; } /* ─── CONTACT ─────────────────────────────────────────────────────────────── */ /* Contact info items: icon on RIGHT naturally (first in DOM = right in RTL) ✓ */ body.lang-ar .contact-info-label, body.lang-ar .contact-info-value { text-align: right; } /* Working hours */ body.lang-ar .working-hours { text-align: right; } /* Form */ body.lang-ar .form-group label { text-align: right; } body.lang-ar .form-group input, body.lang-ar .form-group textarea, body.lang-ar .form-group select { direction: rtl; text-align: right; } body.lang-ar .form-group input::placeholder, body.lang-ar .form-group textarea::placeholder { text-align: right; } /* ─── FOOTER ──────────────────────────────────────────────────────────────── */ body.lang-ar .footer-grid { direction: rtl; } body.lang-ar .footer-tagline, body.lang-ar .footer-col-title, body.lang-ar .copyright { text-align: right; } body.lang-ar .footer-links { text-align: right; } /* Footer contact: icon on RIGHT naturally in RTL (no row-reverse needed) */ body.lang-ar .footer-contact-list { text-align: right; } /* Footer bottom: copyright(right) | links(left) in RTL = natural ✓ */ /* ─── TICKET PAGE ─────────────────────────────────────────────────────────── */ /* Two-column grid: in RTL the form (right) should come after the list (left) */ body.lang-ar .ticket-grid { direction: rtl; } /* Text alignment inside panels */ body.lang-ar .ticket-form-panel, body.lang-ar .ticket-list-panel, body.lang-ar .ticket-auth-message { text-align: right; } /* Card head: status badge on LEFT (reading end) in RTL */ body.lang-ar .ticket-card-head { flex-direction: row-reverse; } /* Meta items stay LTR for ticket number digit readability */ body.lang-ar .ticket-card-meta { direction: ltr; justify-content: flex-end; } /* Ticket detail header: back link on RIGHT, status on LEFT in RTL */ body.lang-ar .ticket-detail-header { flex-direction: row-reverse; } /* Auth action buttons align right */ body.lang-ar .ticket-auth-actions { justify-content: flex-end; } /* Form inputs/selects */ body.lang-ar .ticket-form .form-group input, body.lang-ar .ticket-form .form-group textarea, body.lang-ar .ticket-form .form-group select { direction: rtl; text-align: right; } /* ─── RESPONSIVE ──────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { body.lang-ar .hero-content { text-align: right; } body.lang-ar .hero-cta { justify-content: flex-start; } body.lang-ar .cta-buttons { justify-content: center; } body.lang-ar .section-header { text-align: right; } } @media (max-width: 640px) { body.lang-ar .cta-buttons { flex-direction: column; align-items: flex-end; } body.lang-ar .hero-cta { flex-direction: column; align-items: flex-start; } }