/* ========================================================= Citoyenneté Caraïbes — RTL overrides (Arabic) Loaded only when . Keeps style.css untouched and flips/adjusts only what doesn't behave naturally under RTL. ========================================================= */ html[dir="rtl"] body { font-family: 'Tajawal', 'Segoe UI', Tahoma, 'Geneva', Arial, sans-serif; text-align: right; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 { font-family: 'Amiri', 'Times New Roman', Georgia, serif; line-height: 1.4; } /* The hero / sections have their own letter-spacing rules that look wrong in Arabic. */ html[dir="rtl"] .eyebrow { letter-spacing: 0.05em; } html[dir="rtl"] .footer-title { letter-spacing: 0.05em; } /* Logo */ html[dir="rtl"] .logo { text-align: right; } html[dir="rtl"] .logo-sub { letter-spacing: 0.05em; } /* Topbar */ html[dir="rtl"] .topbar-inner { direction: rtl; } /* Header dropdown should open from the right edge */ html[dir="rtl"] .dropdown { left: auto; right: 0; } /* Check-list bullets — flip from left to right */ html[dir="rtl"] .check-list li, html[dir="rtl"] .feature-list li { padding: 0.5rem 2rem 0.5rem 0; } html[dir="rtl"] .check-list li::before { left: auto; right: 0; } /* Invest-card checks */ html[dir="rtl"] .invest-card li { padding: 0.5rem 1.75rem 0.5rem 0; } html[dir="rtl"] .invest-card li::before { left: auto; right: 0; } /* Cards with gold accent border-top stays the same, no flip needed */ /* Country card / hero KPIs alignment */ html[dir="rtl"] .kpi { text-align: right; } /* Comparison table */ html[dir="rtl"] .comp-table th, html[dir="rtl"] .comp-table td { text-align: right; } /* FAQ — flip the + indicator to the left side */ html[dir="rtl"] .faq summary { padding-right: 1.5rem; padding-left: 3rem; } html[dir="rtl"] .faq summary::after { right: auto; left: 1.5rem; } /* Breadcrumb separator */ html[dir="rtl"] .breadcrumb li + li::before { content: '\\'; margin-right: 0; margin-left: 0.5rem; } html[dir="rtl"] .breadcrumb ol { direction: rtl; } /* Process steps — flip the numbered circle */ html[dir="rtl"] .step::before { left: auto; right: 1.5rem; } /* Forms */ html[dir="rtl"] .form-group label { text-align: right; } html[dir="rtl"] .form-group input, html[dir="rtl"] .form-group select, html[dir="rtl"] .form-group textarea { text-align: right; direction: rtl; } html[dir="rtl"] .form-group input[type="email"], html[dir="rtl"] .form-group input[type="tel"] { text-align: right; direction: ltr; } html[dir="rtl"] .checkbox-row { flex-direction: row-reverse; text-align: right; } /* Alerts (left-border indicator → right-border in RTL) */ html[dir="rtl"] .alert-success { border-left: none; border-right: 4px solid #1b6b32; } html[dir="rtl"] .alert-error { border-left: none; border-right: 4px solid #a82121; } html[dir="rtl"] .alert-warning { border-left: none; border-right: 4px solid var(--primary); } html[dir="rtl"] .alert-info { border-left: none; border-right: 4px solid var(--primary-light); } /* Footer — align right + flip the legal-links separator visual */ html[dir="rtl"] .footer-grid { direction: rtl; } html[dir="rtl"] .footer-legal { justify-content: flex-end; } /* Logo + nav still need horizontal flex order to feel native */ html[dir="rtl"] .header-inner { direction: rtl; } /* Phone number must stay LTR (digits) but with the right side of the header */ html[dir="rtl"] .header-tel { direction: ltr; unicode-bidi: isolate; } html[dir="rtl"] .footer-tel { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* Skip-link */ html[dir="rtl"] .skip-link { left: auto; right: -9999px; } html[dir="rtl"] .skip-link:focus { right: 0; left: auto; } /* Mobile nav toggle */ html[dir="rtl"] .nav-list { right: 0; left: 0; } /* Card hover transform — already symmetric (translateY) */ /* CTA banner is centered, no flipping needed */ /* Price numbers in tables/cards stay LTR-readable */ html[dir="rtl"] .price-cell, html[dir="rtl"] .investment-from, html[dir="rtl"] .price { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* Country flag — flush right */ html[dir="rtl"] .country-card .country-flag, html[dir="rtl"] .hero-flag { margin-left: auto; margin-right: 0; }