/* ================================================================ RTL (Arabic) OVERRIDES — only active when Most of the mirroring (flex/grid item order, default text-align) happens automatically once `dir` is set; this file only fixes the handful of physical (non-logical) values that don't auto-flip, and swaps in an Arabic-friendly typeface (tight Latin letter-spacing breaks Arabic's connected script). Admin.html never sets dir="rtl", so none of this touches the admin UI. ================================================================ */ html[dir="rtl"] body, html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select, html[dir="rtl"] button{ font-family:'Tajawal','Inter',sans-serif; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] .about-quote, html[dir="rtl"] .recap-row b, html[dir="rtl"] .mobile-menu a{ font-family:'Tajawal','Inter',sans-serif; } /* the brand wordmark itself stays in Latin script/type */ html[dir="rtl"] .wordmark{ font-family:'Archivo',sans-serif; letter-spacing:-0.045em; direction:ltr; } /* letter-spacing tuned for Latin type breaks Arabic's connected letterforms */ html[dir="rtl"] .eyebrow, html[dir="rtl"] .hero-eyebrow, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] .nav-cta, html[dir="rtl"] .btn, html[dir="rtl"] .footer-col b, html[dir="rtl"] .status-pill, html[dir="rtl"] .masonry-cap, html[dir="rtl"] .field label, html[dir="rtl"] .pkg-hero-badge, html[dir="rtl"] .lang-pill-toggle button, html[dir="rtl"] .svc-group-label{ letter-spacing:normal; } /* physical left/right offsets that don't flip automatically with dir */ html[dir="rtl"] .nav-links a::after{left:auto;right:0;} html[dir="rtl"] .svc-select{text-align:right;} html[dir="rtl"] .confirm-card{text-align:right;} html[dir="rtl"] .svc-select .check{right:auto;left:14px;} html[dir="rtl"] .step-dot i{transform-origin:right;} html[dir="rtl"] .toast-wrap{right:auto;left:20px;} html[dir="rtl"] .toast{animation:toastInRtl .4s var(--ease);} html[dir="rtl"] .toast.out{animation:toastOutRtl .4s var(--ease) forwards;} @keyframes toastInRtl{from{transform:translateX(-40px);opacity:0;}to{transform:translateX(0);opacity:1;}} @keyframes toastOutRtl{to{transform:translateX(-40px);opacity:0;}} /* package bullet checkmarks + flagship glow, mirrored */ html[dir="rtl"] .pkg-list li, html[dir="rtl"] .pkg-hero-list li{padding-left:0;padding-right:20px;} html[dir="rtl"] .pkg-hero-list li{padding-right:26px;} html[dir="rtl"] .pkg-list li::before, html[dir="rtl"] .pkg-hero-list li::before{left:auto;right:0;} html[dir="rtl"] .pkg-hero::before{background:radial-gradient(circle at 15% 15%, rgba(191,166,122,.25), transparent 55%);}