/* ==========================================================================
   rtl.css - right-to-left corrections (PLAN-v4 section 6.7, item 2).

   Loaded last by the four layouts (incl. Views/Share/_ShareLayout) only when the page language is right-to-left (Arabic: <html dir="rtl">), together
   with the Noto Sans Arabic web font. The stylesheets already use logical properties (margin-inline-start,
   inset-inline-end, text-align: start ...), so the layout mirrors by itself: the shell grid puts the sidebar on the right,
   flex rows reverse, borders and paddings follow the reading direction. What is left here cannot be expressed
   logically: transforms, transform origins, directional icons and glyphs, rotated CSS chevrons, and typography.
   Every rule is scoped to html[dir="rtl"], so this file is inert on a left-to-right page.
   ========================================================================== */

/* -- typography --------------------------------------------------------------- */
html[dir="rtl"] {
    --mum-font-sans: "Noto Sans Arabic", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
    --mum-font-mono: "JetBrains Mono", "Noto Sans Arabic", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --pf-font-sans: "Noto Sans Arabic", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
    --pf-font-mono: "JetBrains Mono", "Noto Sans Arabic", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html[dir="rtl"] .mum-app {
    font-family: var(--mum-font-sans);
    line-height: 1.7;
}

html[dir="rtl"] .pfp-shell { font-family: var(--pf-font-sans); }

/* Arabic is a joined script: tracking breaks the letter connections, and capitals do not exist. */
html[dir="rtl"] body,
html[dir="rtl"] body * {
    letter-spacing: normal !important;
}

/* Addresses, e-mail, phone numbers, codes and passwords are read left to right inside right-to-left text. */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[type="number"] {
    direction: ltr;
    text-align: end;
}

html[dir="rtl"] code,
html[dir="rtl"] kbd,
html[dir="rtl"] .pf-kbd,
html[dir="rtl"] .pf-mono,
html[dir="rtl"] .pfp-mono {
    unicode-bidi: isolate;
}

/* -- shell: the mobile drawer slides in from the right ------------------------------ */
@media (max-width: 1023.98px) {
    html[dir="rtl"] .mum-sidebar { transform: translateX(100%); }
    html[dir="rtl"] .mum-sidebar.is-open { transform: translateX(0); }
}

/* Pop-up menus grow from the corner they are anchored to (inset-inline-end: the left one here). */
html[dir="rtl"] .pf-usermenu__panel,
html[dir="rtl"] .pf-lang__panel,
html[dir="rtl"] :where(.mum-menu) {
    transform-origin: top left;
}

/* The toast enters from the reading start (the right edge here) */
html[dir="rtl"] .mum-toast { animation-name: pf-rtl-toast-in; }

@keyframes pf-rtl-toast-in {
    from {
        opacity: 0;
        transform: translateX(-1.5rem) scale(0.96);
    }
}

/* -- directional icons (Lucide renders <svg class="lucide lucide-{name}">) ------------- */
html[dir="rtl"] .lucide-arrow-right,
html[dir="rtl"] .lucide-arrow-left,
html[dir="rtl"] .lucide-chevron-right,
html[dir="rtl"] .lucide-chevron-left,
html[dir="rtl"] .lucide-chevrons-right,
html[dir="rtl"] .lucide-chevrons-left,
html[dir="rtl"] .lucide-arrow-up-right,
html[dir="rtl"] .lucide-move-right,
html[dir="rtl"] .lucide-move-left,
html[dir="rtl"] .lucide-corner-down-right,
html[dir="rtl"] .lucide-undo-2,
html[dir="rtl"] .lucide-redo-2,
html[dir="rtl"] .lucide-log-out,
html[dir="rtl"] .lucide-log-in,
html[dir="rtl"] .lucide-send,
html[dir="rtl"] .lucide-panel-left {
    transform: scaleX(-1);
}

/* Hover nudges keep the mirror and move toward the reading direction. */
html[dir="rtl"] .pf-rail-credit:hover .pf-rail-credit__cta svg,
html[dir="rtl"] .pf-link-arrow:hover svg,
html[dir="rtl"] .pf-related__item:hover .pf-related__arrow {
    transform: translateX(-3px) scaleX(-1);
}

/* -- CSS-drawn chevrons and arrow glyphs ------------------------------------------------ */
/* "→" pointer of the stat / KPI cards: mirrored by rotating the other way. */
html[dir="rtl"] a.pf-stat::after,
html[dir="rtl"] a.pf-kpi::after {
    transform: rotate(-45deg);
}

html[dir="rtl"] a.pf-stat:hover::after,
html[dir="rtl"] a.pf-kpi:hover::after {
    transform: translateX(-2px) rotate(-45deg);
}

/* Select chevron of the features page mock form (its borders are logical, so the rotation is mirrored too). */
html[dir="rtl"] .pfp-feat-field__ctrl--select::after {
    transform: translateY(-70%) rotate(-45deg);
}

/* "after you finish" steps on the home page are joined by arrows that follow the reading direction. */
html[dir="rtl"] .pfp-home-after__item:not(:last-child)::after {
    content: "←";
    content: "←" / "";
}

/* -- progress connectors: the fill runs from the previous step (on the right) ------------ */
/* The wizard stepper and the video status timeline place their connectors with inset-inline-*, so
   they already sit between the right steps; only the gradient direction and the anchor of the
   growing fill are physical. The vertical phone timeline (180deg) and the dashed "stopped"
   pattern are symmetric and need nothing. */
html[dir="rtl"] .pf-page .pf-stepper > li + li::before {
    background-image: linear-gradient(270deg, var(--mum-color-success), var(--mum-accent));
    background-position: right center;
}

@media (min-width: 768px) {
    html[dir="rtl"] .pf-page .pf-timeline__step.is-current::before {
        background: linear-gradient(270deg, var(--mum-color-success), var(--mum-accent));
    }
}

/* -- third-party widgets that only know left-to-right ---------------------------------- */
/* Map canvases (Leaflet / Google) keep their own coordinate system. */
html[dir="rtl"] .leaflet-container,
html[dir="rtl"] .gm-style {
    direction: ltr;
}