/** * RTL (Right-to-Left) Stylesheet for Arabic Pages * OnlineTranslation.ae * * COMPREHENSIVE RTL OVERRIDES * Using !important where necessary to override LTR defaults */ /* ============================================ BASE RTL SETUP ============================================ */ html[lang="ar"], html[dir="rtl"], [dir="rtl"] { direction: rtl !important; text-align: right !important; } body.rtl-page { direction: rtl !important; text-align: right !important; } /* ============================================ TYPOGRAPHY - Arabic Fonts ============================================ */ /* System Arabic font stack for instant fallback while Google Fonts load */ /* Order: Google Font → System Arabic → Generic Arabic → Fallback */ :root { --font-arabic: 'Noto Sans Arabic', 'Geeza Pro', 'Simplified Arabic', 'Tahoma', 'Arial', sans-serif; --font-arabic-heading: 'Noto Sans Arabic', 'Geeza Pro', 'Traditional Arabic', serif; } html[lang="ar"] body, html[lang="ar"] p, html[lang="ar"] li, html[lang="ar"] span, html[lang="ar"] a, html[lang="ar"] button, html[lang="ar"] input, html[lang="ar"] textarea, html[lang="ar"] select, html[lang="ar"] label, html[lang="ar"] td, html[lang="ar"] th { font-family: var(--font-arabic) !important; line-height: 1.8 !important; } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4, html[lang="ar"] h5 { font-family: var(--font-arabic-heading) !important; line-height: 1.6 !important; } /* ============================================ LTR ISLANDS - Numbers, Emails, URLs, Phone ============================================ */ html[lang="ar"] a[href^="tel:"], html[lang="ar"] a[href^="mailto:"], html[lang="ar"] .ltr-content, html[lang="ar"] [dir="ltr"] { direction: ltr !important; unicode-bidi: embed !important; text-align: left !important; } /* Brand name stays LTR - use isolate to prevent interference */ html[lang="ar"] .logo-text, html[lang="ar"] .logo-name, html[lang="ar"] .footer-logo-text .logo-name { direction: ltr !important; unicode-bidi: isolate !important; } /* ============================================ CONTAINER ALIGNMENT ============================================ */ html[lang="ar"] .container { text-align: right !important; } /* ============================================ HERO SECTION - RTL ============================================ */ html[lang="ar"] .hero-section { direction: rtl !important; } html[lang="ar"] .hero-content { text-align: right !important; } html[lang="ar"] .hero-text { align-items: flex-end !important; text-align: right !important; } html[lang="ar"] .hero-title, html[lang="ar"] .exodus-title { text-align: right !important; } html[lang="ar"] .hero-lead { text-align: right !important; } html[lang="ar"] .hero-bullets { text-align: right !important; padding-right: 0 !important; padding-left: 0 !important; list-style-position: inside !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; /* flex-start is RIGHT in RTL */ } html[lang="ar"] .hero-bullets li { display: flex !important; flex-direction: row !important; justify-content: flex-start !important; /* flex-start is RIGHT in RTL */ align-items: center !important; text-align: right !important; gap: 12px !important; width: auto !important; } html[lang="ar"] .hero-bullets li i { order: 2 !important; /* Icon goes after text (on left in RTL) */ margin-left: 0 !important; margin-right: 0 !important; flex-shrink: 0 !important; } html[lang="ar"] .hero-cta-group { display: flex !important; flex-direction: column !important; align-items: flex-start !important; /* flex-start is RIGHT in RTL */ gap: 16px !important; width: 100% !important; } html[lang="ar"] .hero-cta, html[lang="ar"] .exodus-cta { display: inline-flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; } html[lang="ar"] .hero-cta i, html[lang="ar"] .exodus-cta i { order: 2 !important; margin-left: 0 !important; margin-right: 10px !important; } html[lang="ar"] .hero-cta-secondary { text-align: right !important; display: block !important; } /* WhatsApp CTA - Must be green, not coral */ html[lang="ar"] .hero-cta[href*="wa.me"], html[lang="ar"] .hero-cta.exodus-cta[href*="wa.me"], html[lang="ar"] .hero-cta-group a[href*="wa.me"] { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important; color: #fff !important; } html[lang="ar"] .hero-cta[href*="wa.me"]:hover, html[lang="ar"] .hero-cta.exodus-cta[href*="wa.me"]:hover, html[lang="ar"] .hero-cta-group a[href*="wa.me"]:hover { background: linear-gradient(135deg, #128C7E 0%, #075E54 100%) !important; box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4) !important; } /* ============================================ OVERLAP CARDS - RTL ============================================ */ html[lang="ar"] .overlap-cards-wrapper { direction: rtl !important; } html[lang="ar"] .overlap-cards { display: flex !important; flex-direction: row-reverse !important; } html[lang="ar"] .overlap-card { display: flex !important; flex-direction: row-reverse !important; text-align: right !important; } html[lang="ar"] .overlap-card-icon { margin-left: 16px !important; margin-right: 0 !important; } html[lang="ar"] .overlap-card-content { text-align: right !important; align-items: flex-end !important; } /* ============================================ SECTION HEADERS - RTL ============================================ */ html[lang="ar"] .section-header { text-align: right !important; } html[lang="ar"] .section-label { text-align: right !important; } html[lang="ar"] .section-title { text-align: right !important; } html[lang="ar"] .section-divider { margin-right: 0 !important; margin-left: auto !important; } /* Section label accent line */ html[lang="ar"] .section-label::before, html[lang="ar"] .section-label::after { right: 0 !important; left: auto !important; } /* ============================================ SERVICES GRID - RTL ============================================ */ html[lang="ar"] .services-grid-enhanced { direction: rtl !important; } html[lang="ar"] .service-card-v2 { text-align: right !important; } html[lang="ar"] .service-card-v2 .card-body { text-align: right !important; } html[lang="ar"] .service-card-v2 .card-body h3 { text-align: right !important; } html[lang="ar"] .service-card-v2 .card-body p { text-align: right !important; } html[lang="ar"] .card-arrow { left: 20px !important; right: auto !important; transform: scaleX(-1) !important; } html[lang="ar"] .card-badge { right: auto !important; left: 16px !important; } /* ============================================ WHY SECTION - RTL ============================================ */ html[lang="ar"] .why-section { direction: rtl !important; } html[lang="ar"] .why-grid { direction: rtl !important; } html[lang="ar"] .why-card { text-align: right !important; } html[lang="ar"] .why-card i { margin-bottom: 16px !important; } html[lang="ar"] .why-card h3 { text-align: right !important; } html[lang="ar"] .why-card p { text-align: right !important; } /* ============================================ PROCESS STEPS - RTL ============================================ */ html[lang="ar"] .process-section { direction: rtl !important; } html[lang="ar"] .process-steps, html[lang="ar"] .exodus-process-steps { direction: rtl !important; } html[lang="ar"] .process-step, html[lang="ar"] .exodus-step { text-align: right !important; } html[lang="ar"] .step-header { display: flex !important; flex-direction: row-reverse !important; justify-content: flex-end !important; } html[lang="ar"] .step-index { margin-left: 16px !important; margin-right: 0 !important; } html[lang="ar"] .step-title { text-align: right !important; } html[lang="ar"] .step-desc { text-align: right !important; } /* ============================================ METRICS STRIP - RTL ============================================ */ html[lang="ar"] .ot-metrics { direction: rtl !important; } html[lang="ar"] .ot-metrics-inner { display: flex !important; flex-direction: row-reverse !important; } html[lang="ar"] .ot-metric { text-align: center !important; border-left: 1px solid rgba(255, 255, 255, 0.2) !important; border-right: none !important; } html[lang="ar"] .ot-metric:first-child { border-left: none !important; } /* ============================================ SPECIALISTS SECTION - RTL ============================================ */ html[lang="ar"] .specialists-section { direction: rtl !important; } html[lang="ar"] .specialists-grid { direction: rtl !important; } html[lang="ar"] .specialist-card { text-align: right !important; align-items: flex-end !important; } html[lang="ar"] .specialist-card h3 { text-align: right !important; } html[lang="ar"] .specialist-bullets { text-align: right !important; padding-right: 0 !important; padding-left: 0 !important; list-style: none !important; } html[lang="ar"] .specialist-bullets li { text-align: right !important; position: relative !important; padding-right: 20px !important; padding-left: 0 !important; } html[lang="ar"] .specialist-bullets li::before { content: '✓' !important; position: absolute !important; right: 0 !important; left: auto !important; color: var(--accent-coral, #FF1654) !important; } html[lang="ar"] .specialist-tags { display: flex !important; flex-wrap: wrap !important; justify-content: flex-end !important; gap: 8px !important; } html[lang="ar"] .team-cta-wrapper { text-align: right !important; } html[lang="ar"] .team-tagline { text-align: right !important; } html[lang="ar"] .team-cta { display: inline-flex !important; flex-direction: row-reverse !important; } html[lang="ar"] .team-cta i { margin-left: 8px !important; margin-right: 0 !important; } /* ============================================ LANGUAGES SECTION - RTL ============================================ */ html[lang="ar"] .languages-section { direction: rtl !important; } html[lang="ar"] .languages-grid { direction: rtl !important; } html[lang="ar"] .language-item { display: flex !important; flex-direction: row-reverse !important; justify-content: flex-start !important; text-align: right !important; } html[lang="ar"] .language-item i { margin-left: 8px !important; margin-right: 0 !important; } html[lang="ar"] .languages-note { text-align: center !important; } /* ============================================ ABOUT SECTION - RTL ============================================ */ html[lang="ar"] .about-section, html[lang="ar"] .exodus-about { direction: rtl !important; } html[lang="ar"] .about-grid, html[lang="ar"] .exodus-about-grid { direction: rtl !important; } @media (min-width: 992px) { html[lang="ar"] .about-grid, html[lang="ar"] .exodus-about-grid { display: grid !important; grid-template-columns: 1fr 1.2fr !important; } html[lang="ar"] .about-image, html[lang="ar"] .exodus-about-image { order: 2 !important; } html[lang="ar"] .about-content, html[lang="ar"] .exodus-about-content { order: 1 !important; } } html[lang="ar"] .about-content, html[lang="ar"] .exodus-about-content { text-align: right !important; } html[lang="ar"] .exodus-features-list { display: flex !important; flex-direction: column !important; align-items: flex-start !important; /* flex-start is RIGHT in RTL context */ } html[lang="ar"] .exodus-feature-item { display: flex !important; flex-direction: row !important; /* In RTL, row flows right-to-left */ gap: 10px !important; justify-content: flex-start !important; /* flex-start is RIGHT in RTL */ text-align: right !important; width: auto !important; } html[lang="ar"] .exodus-feature-item i { order: 2 !important; /* Icon goes after text (appears on left in RTL) */ margin-left: 0 !important; margin-right: 0 !important; } /* Mobile RTL for about/exodus section */ @media (max-width: 991px) { html[lang="ar"] .exodus-about-content, html[lang="ar"] .about-content { text-align: right !important; } html[lang="ar"] .exodus-features-list { width: 100% !important; align-items: flex-start !important; /* flex-start is RIGHT in RTL */ } html[lang="ar"] .exodus-feature-item { flex-direction: row !important; width: auto !important; justify-content: flex-start !important; } } html[lang="ar"] .experience-badge, html[lang="ar"] .exodus-badge { right: auto !important; left: 20px !important; } html[lang="ar"] .about-summary { text-align: right !important; } html[lang="ar"] .about-cta, html[lang="ar"] .exodus-cta-btn { display: inline-flex !important; flex-direction: row-reverse !important; } html[lang="ar"] .about-cta i, html[lang="ar"] .exodus-cta-btn i { margin-left: 8px !important; margin-right: 0 !important; } /* ============================================ FAQ SECTION - RTL ============================================ */ html[lang="ar"] .faq-section { direction: rtl !important; } html[lang="ar"] .faq-list { direction: rtl !important; } html[lang="ar"] .faq-item { text-align: right !important; } html[lang="ar"] .faq-question { display: flex !important; flex-direction: row-reverse !important; justify-content: space-between !important; text-align: right !important; width: 100% !important; padding: 20px !important; } html[lang="ar"] .faq-question i { margin-left: 0 !important; margin-right: auto !important; } html[lang="ar"] .faq-answer { text-align: right !important; padding: 0 20px 20px !important; } html[lang="ar"] .faq-answer p { text-align: right !important; } /* ============================================ CTA BANNER - RTL ============================================ */ html[lang="ar"] .cta-banner { direction: rtl !important; text-align: center !important; } html[lang="ar"] .cta-banner h2 { text-align: center !important; } html[lang="ar"] .cta-banner p { text-align: center !important; } html[lang="ar"] .cta-btn { display: inline-flex !important; flex-direction: row-reverse !important; } html[lang="ar"] .cta-btn i { margin-left: 8px !important; margin-right: 0 !important; } /* ============================================ CONTACT SECTION - RTL ============================================ */ html[lang="ar"] .contact-section { direction: rtl !important; } html[lang="ar"] .contact-wrapper { text-align: right !important; } html[lang="ar"] .contact-description { text-align: right !important; } html[lang="ar"] .contact-form { text-align: right !important; } html[lang="ar"] .form-row { display: flex !important; flex-direction: row-reverse !important; gap: 20px !important; } html[lang="ar"] .form-group { text-align: right !important; } html[lang="ar"] .form-group label { text-align: right !important; display: block !important; } html[lang="ar"] .form-group input, html[lang="ar"] .form-group textarea { text-align: right !important; direction: rtl !important; } /* Email and phone inputs should be LTR for typing */ html[lang="ar"] .form-group input[type="email"], html[lang="ar"] .form-group input[type="tel"] { direction: ltr !important; text-align: left !important; } html[lang="ar"] .submit-btn { display: inline-flex !important; flex-direction: row-reverse !important; } html[lang="ar"] .contact-buttons { display: flex !important; flex-direction: row-reverse !important; justify-content: center !important; gap: 16px !important; } html[lang="ar"] .contact-btn { display: inline-flex !important; flex-direction: row-reverse !important; } html[lang="ar"] .contact-btn i { margin-left: 8px !important; margin-right: 0 !important; } /* ============================================ TRUST BAR - RTL ============================================ */ html[lang="ar"] .trust-bar-title { text-align: center !important; } /* ============================================ TESTIMONIALS - RTL ============================================ */ html[lang="ar"] .testimonials-section { direction: rtl !important; } html[lang="ar"] .testimonial-card { text-align: right !important; } html[lang="ar"] .testimonial-quote { text-align: right !important; } html[lang="ar"] .testimonial-author { display: flex !important; flex-direction: row-reverse !important; justify-content: flex-end !important; } html[lang="ar"] .author-info { text-align: right !important; align-items: flex-end !important; } /* ============================================ FOOTER - RTL ============================================ */ html[lang="ar"] .footer { direction: rtl !important; } html[lang="ar"] .footer-grid { direction: rtl !important; } html[lang="ar"] .footer-brand { text-align: right !important; align-items: flex-end !important; } html[lang="ar"] .footer-logo { flex-direction: row-reverse !important; } html[lang="ar"] .footer-logo-text { text-align: right !important; } html[lang="ar"] .footer-brand > p { text-align: right !important; } html[lang="ar"] .footer-partnership { flex-direction: row-reverse !important; } html[lang="ar"] .footer-social { flex-direction: row-reverse !important; justify-content: flex-end !important; } html[lang="ar"] .footer-links, html[lang="ar"] .footer-contact { text-align: right !important; } html[lang="ar"] .footer-links h4, html[lang="ar"] .footer-contact h4 { text-align: right !important; } html[lang="ar"] .footer-links h4::after, html[lang="ar"] .footer-contact h4::after { left: auto !important; right: 0 !important; } html[lang="ar"] .footer-links ul, html[lang="ar"] .footer-contact ul { text-align: right !important; } html[lang="ar"] .footer-contact li { display: flex !important; flex-direction: row !important; direction: ltr !important; align-items: flex-start !important; gap: 10px !important; text-align: right !important; } html[lang="ar"] .footer-contact li a, html[lang="ar"] .footer-contact li span { direction: rtl !important; text-align: right !important; } html[lang="ar"] .footer-contact li a[dir="ltr"], html[lang="ar"] .footer-contact li a[href^="tel:"], html[lang="ar"] .footer-contact li a[href^="mailto:"] { direction: ltr !important; text-align: left !important; } html[lang="ar"] .footer-contact li i { margin-left: 0 !important; margin-right: 0 !important; } html[lang="ar"] .address-link { align-items: flex-end !important; } html[lang="ar"] .map-badge::before { content: '\f35d' !important; } html[lang="ar"] .footer-lang-row { flex-direction: row-reverse !important; } html[lang="ar"] .footer-bottom { text-align: center !important; } /* ============================================ GRIDS - RTL ============================================ */ html[lang="ar"] .grid { direction: rtl !important; } html[lang="ar"] .grid-3, html[lang="ar"] .grid-4 { direction: rtl !important; } /* ============================================ LISTS - RTL ============================================ */ html[lang="ar"] ul, html[lang="ar"] ol { padding-right: 0 !important; padding-left: 0 !important; text-align: right !important; } html[lang="ar"] li { text-align: right !important; } /* ============================================ BUTTONS WITH ICONS - RTL ============================================ */ html[lang="ar"] .btn i, html[lang="ar"] button i { margin-left: 8px !important; margin-right: 0 !important; } /* ============================================ MOBILE RESPONSIVE - RTL ============================================ */ @media (max-width: 991px) { html[lang="ar"] .hero-cta-group { flex-direction: column !important; align-items: stretch !important; } html[lang="ar"] .overlap-cards { flex-direction: column !important; } html[lang="ar"] .about-grid, html[lang="ar"] .exodus-about-grid { display: block !important; } html[lang="ar"] .form-row { flex-direction: column !important; } html[lang="ar"] .contact-buttons { flex-direction: column !important; align-items: center !important; } /* Mobile footer centered */ html[lang="ar"] .footer-grid { text-align: center !important; } html[lang="ar"] .footer-brand { align-items: center !important; } html[lang="ar"] .footer-logo { justify-content: center !important; } html[lang="ar"] .footer-links h4::after, html[lang="ar"] .footer-contact h4::after { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; } html[lang="ar"] .footer-contact li { justify-content: center !important; } html[lang="ar"] .footer-social { justify-content: center !important; } } @media (max-width: 768px) { html[lang="ar"] .ot-metrics-inner { flex-direction: column !important; } html[lang="ar"] .ot-metric { border-left: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } } /* ============================================ UTILITY OVERRIDES - RTL ============================================ */ html[lang="ar"] .text-center { text-align: center !important; } /* ============================================ FOOTER BAR LANGUAGE SWITCHER ============================================ */ html[lang="ar"] .footer-lang-switch { background: rgba(255, 255, 255, 0.1) !important; border-radius: 8px !important; } html[lang="ar"] .footer-lang-switch span { font-weight: 600 !important; letter-spacing: 0.5px !important; } /* ============================================ CORAL TOP BAR - RTL ============================================ */ html[lang="ar"] .coral-top-bar { direction: rtl !important; } html[lang="ar"] .coral-top-content { display: flex !important; flex-direction: row-reverse !important; justify-content: space-between !important; align-items: center !important; } html[lang="ar"] .coral-top-left { display: flex !important; flex-direction: row-reverse !important; gap: 20px !important; } html[lang="ar"] .coral-top-right { display: flex !important; flex-direction: row-reverse !important; } html[lang="ar"] .coral-top-link, html[lang="ar"] .coral-top-hours { display: flex !important; flex-direction: row-reverse !important; align-items: center !important; gap: 8px !important; } html[lang="ar"] .coral-top-link i, html[lang="ar"] .coral-top-hours i { margin-left: 0 !important; margin-right: 0 !important; } /* ============================================ HEADER NAVBAR - RTL ============================================ */ html[lang="ar"] .header-wrapper { direction: rtl !important; } html[lang="ar"] .header-row { display: grid !important; grid-template-columns: auto 1fr auto auto !important; direction: rtl !important; } html[lang="ar"] .header-column-logo { order: 1 !important; } html[lang="ar"] .header-column-nav { order: 2 !important; } html[lang="ar"] .header-column-actions { order: 3 !important; display: flex !important; flex-direction: row-reverse !important; gap: 8px !important; } html[lang="ar"] .header-column-sidebar { order: 4 !important; } /* Logo should NOT reverse - brand identity stays consistent */ html[lang="ar"] .header-logo { display: flex !important; flex-direction: row !important; /* Keep logo on left, text on right */ align-items: center !important; gap: 12px !important; } html[lang="ar"] .logo-text-block { text-align: left !important; /* Brand text stays LTR aligned */ } /* Ensure logo text renders correctly as LTR */ html[lang="ar"] .logo-text { direction: ltr !important; unicode-bidi: isolate !important; display: inline-block !important; } html[lang="ar"] .logo-text .logo-suffix, html[lang="ar"] .logo-text .logo-domain { direction: ltr !important; unicode-bidi: isolate !important; } html[lang="ar"] .nav.nav-pills { display: flex !important; flex-direction: row-reverse !important; } html[lang="ar"] .nav-link { display: flex !important; flex-direction: row-reverse !important; align-items: center !important; gap: 6px !important; } html[lang="ar"] .nav-chevron { margin-left: 0 !important; margin-right: 6px !important; } /* RTL Dropdown Menu */ html[lang="ar"] .dropdown-menu { left: auto !important; right: 0 !important; text-align: right !important; } html[lang="ar"] .dropdown-item { display: flex !important; flex-direction: row-reverse !important; justify-content: flex-start !important; text-align: right !important; } html[lang="ar"] .dropdown-item i { margin-left: 8px !important; margin-right: 0 !important; } html[lang="ar"] .dropdown-item .badge { margin-left: 0 !important; margin-right: auto !important; } html[lang="ar"] .dropdown-header { text-align: right !important; } html[lang="ar"] .dropdown-footer { display: flex !important; flex-direction: row-reverse !important; justify-content: center !important; align-items: center !important; } html[lang="ar"] .dropdown-footer i { margin-left: 0 !important; margin-right: 8px !important; transform: scaleX(-1) !important; } /* RTL Flyout Submenus */ html[lang="ar"] .dropdown-submenu > .dropdown-menu { left: auto !important; right: 100% !important; margin-left: 0 !important; margin-right: 2px !important; } /* ============================================ ARABIC TYPOGRAPHY - CRITICAL FIXES Letter-spacing breaks Arabic text rendering Arabic needs slightly larger sizes for readability ============================================ */ /* Disable letter-spacing globally for Arabic */ html[lang="ar"], html[lang="ar"] * { letter-spacing: 0 !important; } /* Arabic headings - increased line height */ html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4, html[lang="ar"] h5 { letter-spacing: 0 !important; line-height: 1.6 !important; } /* Arabic body text - better readability */ html[lang="ar"] p, html[lang="ar"] li, html[lang="ar"] span, html[lang="ar"] a { line-height: 1.9 !important; } /* Navigation links - slightly larger for Arabic */ html[lang="ar"] .nav-link { letter-spacing: 0 !important; font-size: 13px !important; } /* Hero text adjustments */ html[lang="ar"] .hero-title, html[lang="ar"] .exodus-title, html[lang="ar"] .page-title { line-height: 1.4 !important; letter-spacing: 0 !important; } html[lang="ar"] .hero-lead, html[lang="ar"] .page-lead { line-height: 1.9 !important; } /* Buttons - ensure Arabic text fits */ html[lang="ar"] .btn, html[lang="ar"] button { letter-spacing: 0 !important; line-height: 1.5 !important; } /* Cards and content blocks */ html[lang="ar"] .card, html[lang="ar"] .service-card, html[lang="ar"] .value-card { text-align: right !important; } html[lang="ar"] .card p, html[lang="ar"] .service-card p { line-height: 1.8 !important; } /* FAQ sections */ html[lang="ar"] .faq-question, html[lang="ar"] .faq-answer { line-height: 1.8 !important; } /* Section labels - uppercase doesn't work well for Arabic */ html[lang="ar"] .section-label { text-transform: none !important; letter-spacing: 0 !important; } /* Logo tagline adjustment */ html[lang="ar"] .logo-tagline { text-transform: none !important; letter-spacing: 0 !important; font-size: 11px !important; } /* ============================================ FORM INPUTS - LTR for data entry Email, phone, URLs must stay LTR ============================================ */ /* Already defined above, but ensuring specificity */ html[lang="ar"] input[type="email"], html[lang="ar"] input[type="tel"], html[lang="ar"] input[type="url"], html[lang="ar"] input[type="number"], html[lang="ar"] input[type="date"] { direction: ltr !important; text-align: left !important; } /* Code blocks stay LTR */ html[lang="ar"] code { direction: ltr !important; text-align: left !important; } /* ============================================ ICONS THAT SHOULD MIRROR Directional icons flip, symmetrical don't ============================================ */ /* Arrows should flip */ html[lang="ar"] .fa-arrow-right:not(.no-flip), html[lang="ar"] .fa-chevron-right:not(.no-flip), html[lang="ar"] .fa-angle-right:not(.no-flip), html[lang="ar"] .fa-caret-right:not(.no-flip) { transform: scaleX(-1) !important; } /* Quote icons flip */ html[lang="ar"] .fa-quote-left { transform: scaleX(-1) !important; } /* Icons that should NOT flip (add .no-flip class) */ html[lang="ar"] .fa-whatsapp, html[lang="ar"] .fa-phone, html[lang="ar"] .fa-envelope, html[lang="ar"] .fa-search, html[lang="ar"] .fa-bars, html[lang="ar"] .fa-times, html[lang="ar"] .fa-check, html[lang="ar"] .fa-star { transform: none !important; } /* ============================================ MIXED CONTENT (BiDi) HANDLING English text/numbers within Arabic context ============================================ */ /* Brand names stay LTR */ html[lang="ar"] .logo-text, html[lang="ar"] [dir="ltr"] { direction: ltr !important; unicode-bidi: isolate !important; } /* Numbers in specific contexts */ html[lang="ar"] .price, html[lang="ar"] .license-number { direction: ltr !important; unicode-bidi: isolate !important; } /* WhatsApp number always LTR */ html[lang="ar"] a[href^="tel:"], html[lang="ar"] a[href^="https://wa.me"] { direction: ltr !important; unicode-bidi: isolate !important; } /* ============================================ TEXT-BREAKING.CSS RTL OVERRIDES Visual relief utilities need RTL-aware borders/margins ============================================ */ /* Accent borders: flip left to right for RTL */ /* Hero split sections: flip borders */ html[lang="ar"] .hero-split > * { padding-left: 0 !important; padding-right: 1rem !important; border-left: none !important; border-right: 3px solid var(--accent-coral, #FF1654) !important; } /* Metric badges: flip margin */ /* Callout block: flip border */ html[lang="ar"] .callout-block { border-left: none !important; border-right: 4px solid var(--accent-coral, #FF1654) !important; border-radius: 8px 0 0 8px !important; } /* Service tags: flip margin */ html[lang="ar"] .service-tag { margin: 0.25rem 0 0.25rem 0.25rem !important; } /* Text breathe center: works same in RTL */ /* No changes needed */ /* Kicker labels: letter-spacing already disabled globally */ /* No changes needed */ /* Content divider accent: flip gradient direction */