/* ══════════════════════════════════════════════════════════════════
   MIT Solutions — Arabic / right-to-left layer
   Loaded only by the generated ar/ pages (tools/i18n/build_ar.py), after
   every other stylesheet. Flex and grid already mirror under dir="rtl";
   this file flips what is physical (left/right offsets, margin-left:auto
   pushes, text-align:left, hover nudges, accent edges) and fixes Arabic
   typography. Decorative scatter (orbs, sketches, chips) is left as is.
   ══════════════════════════════════════════════════════════════════ */

/* ── Typography ───────────────────────────────────────────────────── */
/* --font-main asks for 'Dubai', but the vendored dubai-font.css only
   registers 'Dubai-Bold', 'Dubai-Regular'… so Arabic fell back to whatever
   the OS had. Register one weighted 'Dubai' family here, limited to Arabic
   code points: Arabic gets Dubai, Latin keeps the English pages' look. */
@font-face { font-family: 'Dubai'; font-weight: 100 349; font-display: swap;
    src: url('../../vendor/dubai-font/fonts/Dubai-Light.woff2') format('woff2'), url('../../vendor/dubai-font/fonts/Dubai-Light.woff') format('woff');
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'Dubai'; font-weight: 350 449; font-display: swap;
    src: url('../../vendor/dubai-font/fonts/Dubai-Regular.woff2') format('woff2'), url('../../vendor/dubai-font/fonts/Dubai-Regular.woff') format('woff');
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'Dubai'; font-weight: 450 599; font-display: swap;
    src: url('../../vendor/dubai-font/fonts/Dubai-Medium.woff2') format('woff2'), url('../../vendor/dubai-font/fonts/Dubai-Medium.woff') format('woff');
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'Dubai'; font-weight: 600 1000; font-display: swap;
    src: url('../../vendor/dubai-font/fonts/Dubai-Bold.woff2') format('woff2'), url('../../vendor/dubai-font/fonts/Dubai-Bold.woff') format('woff');
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
/* mock-up HUDs are monospace; Arabic in a mono fallback breaks apart */
[dir="rtl"] .pde-hud, [dir="rtl"] .pdg-table, [dir="rtl"] .pds-label, [dir="rtl"] .lx-url {
    font-family: 'Dubai', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Arabic letters join; tracking breaks the joins, so none anywhere… */
[dir="rtl"] *, [dir="rtl"] *::before, [dir="rtl"] *::after { letter-spacing: normal !important; }
/* …except big numerals, which were drawn tight on purpose. */
[dir="rtl"] .pr-price b { letter-spacing: -4px !important; }
[dir="rtl"] .pr-total-top b, [dir="rtl"] .bx-summary-price { letter-spacing: -0.5px !important; }

/* Display headlines were set at line-height ~1 for Latin caps; Arabic
   ascenders and descenders need more room or two-line titles collide. */
[dir="rtl"] .hero-title, [dir="rtl"] .section-title, [dir="rtl"] .sx-title, [dir="rtl"] .lx-title,
[dir="rtl"] .pr-title, [dir="rtl"] .pr-big, [dir="rtl"] .pd-name, [dir="rtl"] .ps-side-title,
[dir="rtl"] .pl.is-active .pl-name, [dir="rtl"] .bxp-title, [dir="rtl"] .cm-title { line-height: 1.3; }

/* Gradient text (background-clip: text) only paints inside the box, and
   the dots under ي / ب / ج sit below an inline span's content area — they
   vanished, so "الرقمي" read as "الرقمى". Inline vertical padding widens the
   painted area without moving the line. */
[dir="rtl"] .hero-title-gradient, [dir="rtl"] .pr-title span, [dir="rtl"] .pr-big em,
[dir="rtl"] .lx-title span, [dir="rtl"] .sx-title span, [dir="rtl"] .bx-title-ink,
[dir="rtl"] .empathy-reassure b {
    padding-block: .25em;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Latin snippets that must keep their own order inside Arabic text */
[dir="rtl"] code, [dir="rtl"] .pv-code, [dir="rtl"] .bxi-url, [dir="rtl"] .lx-url,[dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"] { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"] { text-align: right; }
[dir="rtl"] .pv-code { text-align: left; }
/* inline SVG labels are positioned for left-to-right anchoring */
[dir="rtl"] svg { direction: ltr; }

/* Icons that point "forward" were swapped to arrow_back by the build;
   the ones drawn in CSS or set by JS are mirrored here. */
[dir="rtl"] .lead-arrow, [dir="rtl"] .lx-knob .material-icons-round, [dir="rtl"] .lx-flyer .material-icons-round,
[dir="rtl"] .footer-pill-arrow { transform: scaleX(-1); }

/* ── Text alignment ───────────────────────────────────────────────── */
[dir="rtl"] .suggestion-chip, [dir="rtl"] .proc-step, [dir="rtl"] .footer-pill-text, [dir="rtl"] .bx-namer,
[dir="rtl"] .bx-compare th[scope="row"], [dir="rtl"] .bx-compare tfoot th, [dir="rtl"] .pl-tab,
[dir="rtl"] .ai-tab { text-align: right; }
[dir="rtl"] .aw-bar b { text-align: left; }
@media (max-width: 860px) { [dir="rtl"] .proc-step { text-align: right; } }

/* ── margin-*-auto pushes to the end of a row ─────────────────────── */
[dir="rtl"] .footer-pill-arrow, [dir="rtl"] .chat-context-clear, [dir="rtl"] .bx-qty, [dir="rtl"] .bxi-cart,
[dir="rtl"] .bx-badge, [dir="rtl"] .bx-site-links, [dir="rtl"] .bx-store-cart, [dir="rtl"] .bx-unit span,
[dir="rtl"] .bx-editor-bar em, [dir="rtl"] .bx-faq summary::after, [dir="rtl"] .bx-nl-head small,
[dir="rtl"] .ai-live, [dir="rtl"] .ai-input b, [dir="rtl"] .pv-unit b {
    margin-left: 0; margin-right: auto;
}
@media (max-width: 900px) { [dir="rtl"] .pl-ico { margin-left: 0; margin-right: auto; } }
@media (max-width: 1240px) { [dir="rtl"] .nav-actions { margin-left: var(--space-sm); margin-right: auto; } }
@media (max-width: 768px) { [dir="rtl"] .navbar .nav-actions { margin-left: var(--space-sm); margin-right: auto; } }

/* ── small side gaps ──────────────────────────────────────────────── */
[dir="rtl"] .bx-new, [dir="rtl"] .bx-summary-price span:first-child, [dir="rtl"] .lx-tools em { margin-right: 0; margin-left: 8px; }
[dir="rtl"] .bx-summary-price span:first-child { margin-left: 4px; }
[dir="rtl"] .bx-compare th[scope="row"] .material-icons-round,
[dir="rtl"] .bx-compare th[scope="row"] .fa-brands { margin-right: 0; margin-left: 8px; }
[dir="rtl"] .bx-switch button span, [dir="rtl"] .pd-cta small, [dir="rtl"] .pr-pay small { margin-left: 0; margin-right: 4px; }
[dir="rtl"] .bxi-url, [dir="rtl"] .lx-url { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .wl-cta a { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .pr-replay { margin-left: 0; margin-right: 10px; }
[dir="rtl"] .ai-caret { margin-left: 0; margin-right: 2px; }
[dir="rtl"] select.form-input { padding-right: 16px; padding-left: 40px; background-position: left 16px center; }
@media (max-width: 640px) { [dir="rtl"] .bx-tile-head .bx-badge { margin-left: 0; margin-right: 44px; } }

/* ── hover nudges travel toward the reading end (left) ────────────── */
[dir="rtl"] .contact-method:hover { transform: translateX(-4px); }
[dir="rtl"] .pl-link:hover .material-icons-round, [dir="rtl"] .wl-cta a:hover .material-icons-round,
[dir="rtl"] .ps-link:hover .material-icons-round, [dir="rtl"] .pr-link:hover .material-icons-round { transform: translateX(-4px); }

/* ── accent edges ─────────────────────────────────────────────────── */
[dir="rtl"] .stat-item:not(:last-child)::after { right: auto; left: 0; }
[dir="rtl"] .journey-rail { left: auto; right: 27px; }
[dir="rtl"] .ai-tab[aria-selected="true"]::before { left: auto; right: 0; border-radius: 4px 0 0 4px; }

/* ── floating buttons move to the left edge ───────────────────────── */
[dir="rtl"] .back-to-top, [dir="rtl"] .whatsapp-float, [dir="rtl"] .theme-toggle { right: auto; left: 24px; }

/* ── marquees: the loops translate by -50%, so their tracks stay LTR ─ */
[dir="rtl"] .hero-ticker, [dir="rtl"] .clients-marquee, [dir="rtl"] .wl-row { direction: ltr; }
[dir="rtl"] .hero-ticker .hero-chip, [dir="rtl"] .client-pill, [dir="rtl"] .wl-item { direction: rtl; }

/* ── bundle mock-ups ──────────────────────────────────────────────── */
[dir="rtl"] .bx-toast { right: auto; left: 30px; }
@media (max-width: 640px) { [dir="rtl"] .bx-toast { left: 14px; } }

/* ── "You build it. We deploy it." — slider and flight run right → left */
[dir="rtl"] .lx-fill { left: auto; right: 0; }
[dir="rtl"] .lx-knob { left: auto; right: 4px; animation-name: lxNudgeRtl; }
[dir="rtl"] .lx-lbl-from { left: auto; right: 74px; }
[dir="rtl"] .lx-lbl-to { right: auto; left: 22px; }
[dir="rtl"] .lx-slider.done .lx-lbl-to { right: auto; left: 70px; }
[dir="rtl"] .lx-slider.snap .lx-knob, [dir="rtl"] .lx-slider.snap .lx-fill {
    transition: right .45s cubic-bezier(.22,1,.36,1), width .45s cubic-bezier(.22,1,.36,1);
}
@keyframes lxNudgeRtl { 0%, 70%, 100% { transform: translateX(0); } 80% { transform: translateX(-14px); } 90% { transform: translateX(0); } }
@media (max-width: 640px) {
    [dir="rtl"] .lx-lbl-from { left: auto; right: 66px; }
    [dir="rtl"] .lx-lbl-to { right: auto; left: 14px; }
}
[dir="rtl"] .lx-arc { transform: scaleX(-1); }
[dir="rtl"] .lx-flyer { left: 80%; }
[dir="rtl"] .launch-section.is-flying .lx-flyer { animation-name: lxFlyRtl; }
[dir="rtl"] .launch-section.is-live .lx-flyer { left: 20%; }
[dir="rtl"] .lx-bit { left: 30%; }
@keyframes lxFlyRtl {
    0%   { left: 80%; top: 50px; transform: rotate(0) scale(1); }
    50%  { left: 50%; top: 10px; transform: rotate(-10deg) scale(1.15); }
    90%  { left: 22%; top: 60px; transform: rotate(-30deg) scale(.9); opacity: 1; }
    100% { left: 20%; top: 64px; transform: rotate(-35deg) scale(.4); opacity: 0; }
}

/* ── Journey banner CTAs ──────────────────────────────────────────── */
/* "استكشف إطلاق الأعمال بالذكاء الاصطناعي" is wider than a small phone;
   .btn never wraps, so let these wrap rather than run off-screen. */
@media (max-width: 480px) {
    [dir="rtl"] .journey-banner .btn { white-space: normal; padding-inline: 22px; }
}