/* =========================================================
   FLEETAXIS — RTL
========================================================= */

/*
   IMPORTANT:
   We DO NOT put direction: rtl on the main navbar grid.

   The grid remains LTR so that its areas stay predictable.
   RTL physically swaps the three navbar groups.
*/


/* =========================================================
   GENERAL RTL
========================================================= */

html[dir="rtl"] body {
    text-align: right;
}

html[dir="rtl"] {
    direction: rtl;
}


/* =========================================================
   DESKTOP RTL
========================================================= */

@media (min-width: 1024px) {

    /* -----------------------------------------
       PHYSICAL GROUP SWAP
    ----------------------------------------- */

    html[dir="rtl"] .fx-navbar-inner {

        direction: ltr;

        grid-template-areas:
            "actions nav brand";
    }


    /* -----------------------------------------
       BRAND → RIGHT
    ----------------------------------------- */

    html[dir="rtl"] .fx-brand {

        grid-area: brand;

        justify-self: end;

        direction: ltr;

        flex-direction: row;
    }


    /* -----------------------------------------
       CENTER NAVIGATION
    ----------------------------------------- */

    html[dir="rtl"] .fx-desktop-nav {

        grid-area: nav;

        direction: rtl;

        justify-content: center;
    }


    /* -----------------------------------------
       ACTIONS → LEFT
    ----------------------------------------- */

    html[dir="rtl"] .fx-desktop-actions {

        grid-area: actions;

        justify-self: start;

        direction: ltr;

        flex-direction: row;
    }


    /* -----------------------------------------
       DROPDOWN
    ----------------------------------------- */

    html[dir="rtl"] .fx-dropdown-menu {

        inset-inline-start: auto;

        inset-inline-end: 0;

        text-align: right;
    }


    html[dir="rtl"] .fx-dropdown-link {

        justify-content: flex-start;

        text-align: right;
    }
}


/* =========================================================
   MOBILE RTL
========================================================= */

@media (max-width: 1023px) {

    /* -----------------------------------------
       BRAND → RIGHT
       ACTIONS → LEFT
    ----------------------------------------- */

    html[dir="rtl"] .fx-navbar-inner {

        direction: ltr;

        grid-template-columns:
            auto
            1fr;

        grid-template-areas:
            "mobile brand";
    }


    html[dir="rtl"] .fx-brand {

        grid-area: brand;

        justify-self: end;

        direction: ltr;

        flex-direction: row;
    }


    html[dir="rtl"] .fx-mobile-actions {

        grid-area: mobile;

        justify-self: start;

        direction: ltr;

        display: flex;

        flex-direction: row;
    }


    /*
       RTL MOBILE ORDER:

       HAMBURGER | RTL | DARK
    */

    html[dir="rtl"] .fx-menu-toggle {
        order: 1;
    }

    html[dir="rtl"] .fx-rtl-button {
        order: 2;
    }

    html[dir="rtl"] .fx-icon-button {
        order: 3;
    }


    /* -----------------------------------------
       MOBILE MENU
    ----------------------------------------- */

    html[dir="rtl"] .fx-mobile-menu-panel {

        inset-inline-start: 0;

        inset-inline-end: auto;

        transform:
            translateX(-100%);

        direction: rtl;
    }


    html[dir="rtl"]
    .fx-mobile-menu.open
    .fx-mobile-menu-panel {

        transform:
            translateX(0);
    }


    /* -----------------------------------------
       MOBILE HEADER
    ----------------------------------------- */

    html[dir="rtl"] .fx-mobile-menu-header {

        direction: rtl;
    }


    /* -----------------------------------------
       MOBILE NAV
    ----------------------------------------- */

    html[dir="rtl"] .fx-mobile-nav {

        direction: rtl;

        text-align: right;
    }


    html[dir="rtl"] .fx-mobile-nav-link,
    html[dir="rtl"] .fx-mobile-dropdown-toggle {

        text-align: right;

        direction: rtl;
    }


    html[dir="rtl"] .fx-mobile-dropdown-menu {

        padding-inline-start: 0;

        padding-inline-end: 15px;

        direction: rtl;
    }


    html[dir="rtl"] .fx-mobile-dropdown-link {

        text-align: right;

        direction: rtl;
    }


    html[dir="rtl"] .fx-mobile-login {

        direction: rtl;
    }
}


/* =========================================================
   RTL PAGE TEXT
========================================================= */

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] p,
html[dir="rtl"] li {
    text-align: right;
}


/* =========================================================
   RTL BUTTONS
========================================================= */

html[dir="rtl"] .fx-login-button {
    direction: rtl;
}

/* =========================================================
   HERO — RTL
========================================================= */

html[dir="rtl"] .fx-hero { --hero-dir: -1; }

html[dir="rtl"] .fx-hero-copy,
html[dir="rtl"] .fx-caption-text { text-align: right; }

/* vehicles face the text block, so mirror them */
html[dir="rtl"] .fx-veh img { transform: scaleX(-1); animation-name: fxFloatRtl; }

/* arrows and play icon point the reading direction */
html[dir="rtl"] .fx-btn-primary .fa-arrow-right { transform: scaleX(-1); }
html[dir="rtl"] .fx-btn-ghost .fa-play { transform: scaleX(-1); }

html[dir="rtl"] .fx-hero-title { letter-spacing: 0; }
html[dir="rtl"] .fx-hero-orb { transform: translateY(-50%) scaleX(-1); }

@keyframes fxFloatRtl {
    0%, 100% { transform: scaleX(-1) translateY(0); }
    50%      { transform: scaleX(-1) translateY(-9px); }
}


/* =========================================================
   FLEETAXIS — HOME 1 · SECTIONS 02 & 03 — RTL
   Paste at the end of your existing rtl.css.
========================================================= */

html[dir="rtl"] .fx-solutions,
html[dir="rtl"] .fx-journey-sec {
    --hero-dir: -1;
    --fx-dir: -1;
}


/* ---------- shared ---------- */

html[dir="rtl"] .fx-sec-title { letter-spacing: 0; }

html[dir="rtl"] .fx-btn .fa-arrow-right { transform: scaleX(-1); }

html[dir="rtl"] .fx-btn-light:hover .fa-arrow-right { transform: scaleX(-1) translateX(4px); }


/* ---------- section 02 ---------- */

html[dir="rtl"] .fx-sec-head-copy,
html[dir="rtl"] .fx-sol-body,
html[dir="rtl"] .fx-cta-text { text-align: right; }

html[dir="rtl"] .fx-sec-head-copy .fx-sec-title,
html[dir="rtl"] .fx-sec-head-copy .fx-sec-text,
html[dir="rtl"] .fx-sol-kicker,
html[dir="rtl"] .fx-sol-title,
html[dir="rtl"] .fx-sol-text { text-align: right; }

html[dir="rtl"] .fx-sol-link .fa-arrow-right { transform: scaleX(-1); }
html[dir="rtl"] .fx-sol:hover .fx-sol-link .fa-arrow-right { transform: scaleX(-1) translateX(5px); }

html[dir="rtl"] .fx-sol-title { letter-spacing: 0; }
html[dir="rtl"] .fx-sol-num { letter-spacing: 0; }

/* the tractor faces the text block, so mirror it */
html[dir="rtl"] .fx-sol-d .fx-sol-stage img { scale: -1 1; }

@media (max-width: 767px) {
    html[dir="rtl"] .fx-sol-d .fx-sol-stage img { scale: 1 1; }
}


/* ---------- section 03 ---------- */

html[dir="rtl"] .fx-jr-head,
html[dir="rtl"] .fx-jr-head .fx-sec-title,
html[dir="rtl"] .fx-jr-head .fx-sec-text,
html[dir="rtl"] .fx-stop-body,
html[dir="rtl"] .fx-stop-body h3,
html[dir="rtl"] .fx-stop-body p { text-align: center; }

html[dir="rtl"] .fx-jr-orb { transform: translate(50%, -50%); }

html[dir="rtl"] .fx-stop-step { letter-spacing: 0; }

html[dir="rtl"] .fx-metric strong,
html[dir="rtl"] .fx-metric > span { text-align: right; }

@media (max-width: 767px) {

    html[dir="rtl"] .fx-stop.is-up .fx-stop-body,
    html[dir="rtl"] .fx-stop.is-down .fx-stop-body,
    html[dir="rtl"] .fx-stop.is-up .fx-stop-body h3,
    html[dir="rtl"] .fx-stop.is-down .fx-stop-body h3,
    html[dir="rtl"] .fx-stop.is-up .fx-stop-body p,
    html[dir="rtl"] .fx-stop.is-down .fx-stop-body p { text-align: right; }
}



/* =========================================================
   FLEETAXIS — HOME 1 · SECTIONS 04 & 05 — RTL
   Appended. Nothing above this line is modified.
========================================================= */

html[dir="rtl"] .fx-cmd,
html[dir="rtl"] .fx-lease {
    --hero-dir: -1;
    --fx-dir: -1;
}


/* ---------- SECTION 04 ---------- */

html[dir="rtl"] .fx-cmd-num,
html[dir="rtl"] .fx-lease-num { letter-spacing: 0; }

html[dir="rtl"] .fx-cmd-head,
html[dir="rtl"] .fx-cmd .fx-sec-title,
html[dir="rtl"] .fx-cmd .fx-sec-text,
html[dir="rtl"] .fx-cmd-feat-copy,
html[dir="rtl"] .fx-cmd-feat-copy strong,
html[dir="rtl"] .fx-cmd-feat-copy span,
html[dir="rtl"] .fx-cmd-readout-kicker,
html[dir="rtl"] .fx-cmd-bar-label,
html[dir="rtl"] .fx-cmd-stat strong,
html[dir="rtl"] .fx-cmd-stat > span,
html[dir="rtl"] .fx-cmd-tick { text-align: right; }

/* keep the map instrument cluster LTR so the SVG routes stay put */
html[dir="rtl"] .fx-cmd-stage,
html[dir="rtl"] .fx-cmd-map-top,
html[dir="rtl"] .fx-cmd-telemetry,
html[dir="rtl"] .fx-cmd-ticker { direction: ltr; }

html[dir="rtl"] .fx-cmd-map-top { flex-direction: row-reverse; }
html[dir="rtl"] .fx-cmd-readout { direction: rtl; }

html[dir="rtl"] .fx-cmd .fx-btn-primary i { transform: none; }

/* convoys travel right-to-left in RTL */
html[dir="rtl"] .fx-cmd-convoy img { transform: scaleX(-1); }


/* ---------- SECTION 05 ---------- */

html[dir="rtl"] .fx-lease-head,
html[dir="rtl"] .fx-lease-name,
html[dir="rtl"] .fx-lease-desc,
html[dir="rtl"] .fx-lease-list li,
html[dir="rtl"] .fx-lease-ribbon-grid li { text-align: center; }

html[dir="rtl"] .fx-lease-list li { padding-inline-start: 0; padding-inline-end: 26px; }
html[dir="rtl"] .fx-lease-list li::before { inset-inline-start: auto; inset-inline-end: 0; }

html[dir="rtl"] .fx-lease-label,
html[dir="rtl"] .fx-lease-amount { text-align: right; }

html[dir="rtl"] .fx-lease-cta i,
html[dir="rtl"] .fx-lease-nav i { transform: scaleX(-1); }
html[dir="rtl"] .fx-lease-cta:hover i { transform: scaleX(-1) translateX(4px); }

html[dir="rtl"] .fx-lease-quote .fx-btn-primary i { transform: scaleX(-1); }

/* numbers keep LTR direction inside the quote bar */
html[dir="rtl"] .fx-lease-amount,
html[dir="rtl"] .fx-lease-price { direction: ltr; justify-content: flex-end; }

@media (max-width: 767px) {
    html[dir="rtl"] .fx-lease-amount,
    html[dir="rtl"] .fx-lease-price { justify-content: center; }
}


/* =========================================================
   FLEETAXIS — VEHICLE BRANDS · RTL
   Section only
========================================================= */

html[dir="rtl"] .fx-brands-section {
    direction: rtl;
}


/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

html[dir="rtl"] .fx-brands-head {
    text-align: right;
}


html[dir="rtl"] .fx-brands-intro {
    text-align: right;
}


html[dir="rtl"] .fx-brands-view-icon {
    transform: scaleX(-1);
}


html[dir="rtl"] .fx-brands-view:hover
.fx-brands-view-icon {
    transform:
        scaleX(-1)
        rotate(4deg);
}


/* ---------------------------------------------------------
   BRAND CARDS
--------------------------------------------------------- */

html[dir="rtl"] .fx-brand-card {
    text-align: right;
}


html[dir="rtl"] .fx-brand-arrow {
    transform: scaleX(-1);
}


html[dir="rtl"] .fx-brand-card:hover
.fx-brand-arrow,
html[dir="rtl"] .fx-brand-card:focus-visible
.fx-brand-arrow {
    transform:
        scaleX(-1)
        translate(2px, -2px);
}


/* ---------------------------------------------------------
   CARD ACCENT
--------------------------------------------------------- */

html[dir="rtl"] .fx-brand-card::before {
    inset-inline-start: auto;

    inset-inline-end: 0;
}


/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */

html[dir="rtl"] .fx-brands-footer p {
    text-align: center;
}


html[dir="rtl"] .fx-brands-footer-icon {
    justify-self: start;
}


/* ---------------------------------------------------------
   MOBILE RTL
--------------------------------------------------------- */

@media (max-width: 1023px) {

    html[dir="rtl"] .fx-brands-head {
        align-items: flex-end;
    }

    html[dir="rtl"] .fx-brands-view {
        align-self: flex-end;
    }

}


@media (max-width: 480px) {

    html[dir="rtl"] .fx-brands-footer p {
        text-align: right;
    }

    html[dir="rtl"] .fx-brands-footer-icon {
        justify-self: auto;
    }

}

/* =========================================================
   FLEETAXIS — INTERACTIVE FLEET OPERATIONS SLIDER
   RTL — SECTION ONLY
========================================================= */

html[dir="rtl"] .fx-fleet-slider {
    direction: rtl;
}


/* Header */

html[dir="rtl"] .fx-fleet-slider-heading {
    text-align: right;
}


html[dir="rtl"] .fx-fleet-slider-intro {
    text-align: right;
}


/* Slider information */

html[dir="rtl"] .fx-fleet-slider-panel {
    text-align: right;

    transform: translateX(-45px);
}


html[dir="rtl"] .fx-fleet-slider-panel.is-active {
    transform: translateX(0);
}


/* Vehicle visual */

html[dir="rtl"] .fx-fleet-slider-art-item {
    transform:
        translateX(-80px)
        scale(.965);
}


html[dir="rtl"] .fx-fleet-slider-art-item.is-active {
    transform:
        translateX(0)
        scale(1);
}


/* Keep vehicle artwork facing correctly */
html[dir="rtl"]
.fx-fleet-slider-art-item[data-art="0"] img,
html[dir="rtl"]
.fx-fleet-slider-art-item[data-art="1"] img,
html[dir="rtl"]
.fx-fleet-slider-art-item[data-art="2"] img,
html[dir="rtl"]
.fx-fleet-slider-mixed img {
    transform: scaleX(-1);
}


/* Photo slide should not be mirrored */
html[dir="rtl"]
.fx-fleet-slider-art-item[data-art="3"] img {
    transform: none;
}


/* Controls */

html[dir="rtl"] .fx-fleet-slider-arrow:first-child i {
    transform: scaleX(-1);
}


html[dir="rtl"] .fx-fleet-slider-arrow:last-child i {
    transform: scaleX(-1);
}


/* Bottom labels */

html[dir="rtl"] .fx-fleet-slider-vehicle-caption {
    direction: rtl;
}


/* Process arrows */

html[dir="rtl"] .fx-fleet-slider-process i {
    transform: scaleX(-1);
}


/* Route remains visually directional */
html[dir="rtl"] .fx-fleet-slider-route {
    direction: rtl;
}


/* Bottom fleet strip */
html[dir="rtl"] .fx-fleet-slider-strip {
    direction: rtl;
}


/* =========================================================
   RTL MOBILE
========================================================= */

@media (max-width: 767px) {

    html[dir="rtl"] .fx-fleet-slider-panel {
        transform: translateX(-35px);
    }

    html[dir="rtl"] .fx-fleet-slider-panel.is-active {
        transform: translateX(0);
    }

    html[dir="rtl"] .fx-fleet-slider-art-item {
        transform:
            translateX(-60px)
            scale(.97);
    }

    html[dir="rtl"] .fx-fleet-slider-art-item.is-active {
        transform:
            translateX(0)
            scale(1);
    }

}

/* =========================================================
   FLEETAXIS — FINAL CTA · RTL
   Scoped component only
========================================================= */

html[dir="rtl"] .fx-final-cta {
    direction: rtl;
}


html[dir="rtl"] .fx-final-cta-content {
    text-align:
        center;
}


html[dir="rtl"] .fx-final-cta-title,
html[dir="rtl"] .fx-final-cta-description,
html[dir="rtl"] .fx-final-cta-eyebrow,
html[dir="rtl"] .fx-final-cta-status-row {
    text-align:
        center;
}


html[dir="rtl"] .fx-final-cta-actions {
    direction:
        rtl;
}


html[dir="rtl"] .fx-final-cta-button {
    direction:
        rtl;
}


html[dir="rtl"] .fx-final-cta-button i {
    transform:
        scaleX(-1);
}


html[dir="rtl"] .fx-final-cta-button:hover i {
    transform:
        scaleX(-1)
        translateX(4px);
}


html[dir="rtl"] .fx-final-cta-metrics {
    direction:
        rtl;
}


html[dir="rtl"] .fx-final-cta-metric {
    direction:
        rtl;

    text-align:
        right;
}


html[dir="rtl"] .fx-final-cta-metric-copy {
    text-align:
        right;
}


@media (max-width: 767px) {

    html[dir="rtl"] .fx-final-cta-metric {
        justify-content:
            center;

        text-align:
            right;
    }

    html[dir="rtl"] .fx-final-cta-metric-copy {
        text-align:
            right;
    }

}

/* =========================================================
   FLEETAXIS — FOOTER · RTL
   Scoped component only
========================================================= */

html[dir="rtl"] .fx-footer {
    direction:
        rtl;

    text-align:
        right;
}


/* =========================================================
   TOP
========================================================= */

html[dir="rtl"] .fx-footer-brand {
    direction:
        rtl;
}


html[dir="rtl"] .fx-footer-newsletter {
    direction:
        rtl;
}


html[dir="rtl"] .fx-footer-newsletter-form {
    direction:
        rtl;
}


html[dir="rtl"] .fx-footer-newsletter-form input {
    text-align:
        right;
}


html[dir="rtl"] .fx-footer-newsletter-form button {
    direction:
        rtl;
}


html[dir="rtl"] .fx-footer-newsletter-form button i {
    transform:
        scaleX(-1);
}


html[dir="rtl"] .fx-footer-newsletter-form button:hover i {
    transform:
        scaleX(-1)
        translateX(3px);
}


/* =========================================================
   COLUMNS
========================================================= */

html[dir="rtl"] .fx-footer-column {
    text-align:
        right;
}


html[dir="rtl"] .fx-footer-column li a:hover {
    transform:
        translateX(-2px);
}


/* =========================================================
   CONTACT
========================================================= */

html[dir="rtl"] .fx-footer-contact-item {
    direction:
        rtl;

    text-align:
        right;
}


html[dir="rtl"] .fx-footer-contact-item > span:last-child {
    text-align:
        right;
}


/* =========================================================
   OPERATIONS
========================================================= */

html[dir="rtl"] .fx-footer-dashboard-link {
    direction:
        rtl;
}


html[dir="rtl"] .fx-footer-dashboard-link i {
    transform:
        scaleX(-1);
}


html[dir="rtl"] .fx-footer-dashboard-link:hover i {
    transform:
        scaleX(-1)
        translateX(3px);
}


/* =========================================================
   BOTTOM
========================================================= */

html[dir="rtl"] .fx-footer-bottom {
    direction:
        rtl;
}


html[dir="rtl"] .fx-footer-socials {
    justify-content:
        flex-start;
}


html[dir="rtl"] .fx-footer-legal {
    direction:
        rtl;
}


@media (max-width: 1023px) {

    html[dir="rtl"] .fx-footer-socials {
        justify-content:
            flex-start;
    }

}


@media (max-width: 767px) {

    html[dir="rtl"] .fx-footer {
        text-align:
            center;
    }

    html[dir="rtl"] .fx-footer-brand,
    html[dir="rtl"] .fx-footer-newsletter,
    html[dir="rtl"] .fx-footer-newsletter-form,
    html[dir="rtl"] .fx-footer-contact-item,
    html[dir="rtl"] .fx-footer-dashboard-link {
        direction:
            rtl;
    }

    html[dir="rtl"] .fx-footer-column {
        text-align:
            right;
    }

    html[dir="rtl"] .fx-footer-newsletter-copy {
        text-align:
            right;
    }

    html[dir="rtl"] .fx-footer-newsletter-form input {
        text-align:
            right;
    }

    html[dir="rtl"] .fx-footer-bottom {
        direction:
            rtl;

        text-align:
            center;
    }

    html[dir="rtl"] .fx-footer-socials {
        justify-content:
            center;
    }

    html[dir="rtl"] .fx-footer-legal {
        justify-content:
            center;
    }

}

/* =========================================================
   FLEETAXIS USER DASHBOARD — FIX RTL NAVBAR CONTROLS
   RTL order: Logout / Hamburger → RTL → Dark Mode
========================================================= */

html[dir="rtl"] body.fx-user-dashboard-body
.fx-ud-topbar .fx-ud-topbar-inner {
    position: relative;
    justify-content: flex-start !important;
}

/* Move the complete control group to the LEFT corner */
html[dir="rtl"] body.fx-user-dashboard-body
.fx-ud-topbar .fx-ud-top-actions {
    position: absolute !important;
    top: 50%;
    left: 0 !important;
    right: auto !important;

    margin: 0 !important;
    padding: 0;

    display: flex;
    flex-direction: row-reverse !important;
    direction: ltr !important;

    align-items: center;
    justify-content: flex-start;
    gap: 6px;

    transform: translateY(-50%);
}

/* Keep each control visible and in its correct position */
html[dir="rtl"] body.fx-user-dashboard-body
.fx-ud-top-actions > * {
    position: relative;
    flex-shrink: 0;
}

/* Desktop: Logout → RTL → Dark mode */
@media (min-width: 1024px) {
    html[dir="rtl"] body.fx-user-dashboard-body
    .fx-ud-top-actions {
        flex-direction: row-reverse !important;
    }
}

/* Mobile and tablet: Hamburger → RTL → Dark mode */
@media (max-width: 1023px) {
    html[dir="rtl"] body.fx-user-dashboard-body
    .fx-ud-topbar .fx-ud-topbar-inner {
        width: calc(100% - 32px);
    }

    html[dir="rtl"] body.fx-user-dashboard-body
    .fx-ud-topbar .fx-ud-top-actions {
        left: 0 !important;
        right: auto !important;
        gap: 4px;
        flex-direction: row-reverse !important;
    }

    html[dir="rtl"] body.fx-user-dashboard-body
    .fx-ud-top-actions .fx-ud-logout-desktop {
        display: none;
    }

    html[dir="rtl"] body.fx-user-dashboard-body
    .fx-ud-top-actions .fx-ud-hamburger {
        display: inline-flex;
    }
}

/* =========================================================
   FLEETAXIS — HOME 2 · HERO — RTL
   Paste at the end of your existing rtl.css.
========================================================= */

html[dir="rtl"] .fx-h2-hero { --fx-h2-dir: -1; }

/* centred headline block (beats the global RTL text-align rule) */
html[dir="rtl"] .fx-h2-copy,
html[dir="rtl"] .fx-h2-copy .fx-h2-title,
html[dir="rtl"] .fx-h2-copy .fx-h2-eyebrow { text-align: center; }

html[dir="rtl"] .fx-h2-title { letter-spacing: 0; }

html[dir="rtl"] .fx-h2-para,
html[dir="rtl"] .fx-h2-stats li,
html[dir="rtl"] .fx-h2-badge-text { text-align: right; }

html[dir="rtl"] .fx-h2-btn .fa-arrow-right,
html[dir="rtl"] .fx-h2-submit .fa-arrow-right { transform: scaleX(-1); }

html[dir="rtl"] .fx-h2-btn:hover .fa-arrow-right,
html[dir="rtl"] .fx-h2-submit:hover .fa-arrow-right { transform: scaleX(-1) translateX(4px); }

html[dir="rtl"] .fx-h2-field select { direction: rtl; text-align: right; }

html[dir="rtl"] .fx-h2-field-label,
html[dir="rtl"] .fx-h2-eyebrow { letter-spacing: 0; }

@media (max-width: 1023px) {
    html[dir="rtl"] .fx-h2-para { justify-self: start; }
}

@media (max-width: 767px) {
    html[dir="rtl"] .fx-h2-para { text-align: center; }
}

/* =========================================================
   FLEETAXIS ADMIN DASHBOARD — RTL
========================================================= */

html[dir="rtl"] .fx-ad-app {
    grid-template-columns: minmax(0,1fr) 270px;
    grid-template-areas: "main sidebar";
}

html[dir="rtl"] .fx-ad-sidebar,
html[dir="rtl"] .fx-ad-nav {
    direction: rtl;
}

html[dir="rtl"] .fx-ad-brand-row,
html[dir="rtl"] .fx-ad-profile,
html[dir="rtl"] .fx-ad-sidebar-support {
    direction: rtl;
}

html[dir="rtl"] .fx-ad-nav-item {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .fx-ad-nav-item.active {
    box-shadow: inset -3px 0 0 rgba(255,255,255,.24);
}

html[dir="rtl"] .fx-ad-main {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .fx-ad-page-header,
html[dir="rtl"] .fx-ad-welcome,
html[dir="rtl"] .fx-ad-panel-header,
html[dir="rtl"] .fx-ad-toolbar,
html[dir="rtl"] .fx-ad-table-toolbar {
    direction: rtl;
}

html[dir="rtl"] .fx-ad-kpi-top,
html[dir="rtl"] .fx-ad-priority-row,
html[dir="rtl"] .fx-ad-activity-row,
html[dir="rtl"] .fx-ad-provider-card,
html[dir="rtl"] .fx-ad-alert-item {
    direction: rtl;
}

html[dir="rtl"] .fx-ad-table {
    text-align: right;
}

html[dir="rtl"] .fx-ad-table th,
html[dir="rtl"] .fx-ad-table td {
    text-align: right;
}

html[dir="rtl"] .fx-ad-form-grid input,
html[dir="rtl"] .fx-ad-form-grid select,
html[dir="rtl"] .fx-ad-form-grid textarea,
html[dir="rtl"] .fx-ad-search input {
    text-align: right;
}

html[dir="rtl"] .fx-ad-search,
html[dir="rtl"] .fx-ad-filter-label,
html[dir="rtl"] .fx-ad-form-actions,
html[dir="rtl"] .fx-ad-settings-toggles > label {
    direction: rtl;
}

html[dir="rtl"] .fx-ad-summary-row,
html[dir="rtl"] .fx-ad-mix-row {
    direction: rtl;
}

html[dir="rtl"] .fx-ad-mix-row strong {
    text-align: left;
}

html[dir="rtl"] .fx-ad-chart {
    direction: rtl;
}

html[dir="rtl"] .fx-ad-chart-grid span {
    right: auto;
    left: calc(100% + 8px);
}

html[dir="rtl"] .fx-ad-main-footer {
    direction: rtl;
}

html[dir="rtl"] .fx-ad-link-button i,
html[dir="rtl"] .fx-ad-text-button i {
    transform: scaleX(-1);
}


/* =========================================================
   RTL NAVBAR CONTROL POSITION + ORDER
   LTR: dark → RTL → logout
   RTL: logout → RTL → dark, at the LEFT corner
========================================================= */

html[dir="rtl"] .fx-ad-topbar-inner {
    justify-content: flex-start;
}

html[dir="rtl"] .fx-ad-topbar-spacer {
    display: none;
}

html[dir="rtl"] .fx-ad-top-actions {
    margin-right: auto;
    margin-left: 0;
    flex-direction: row-reverse;
    direction: ltr;
}

/* =========================================================
   RTL MAP
========================================================= */

html[dir="rtl"] .fx-ad-map-roads,
html[dir="rtl"] .fx-ad-map-route {
    transform: scaleX(-1);
}

html[dir="rtl"] .fx-ad-map-label.label-one {
    right: 9%;
    left: auto;
}

html[dir="rtl"] .fx-ad-map-label.label-two {
    left: 11%;
    right: auto;
}

html[dir="rtl"] .fx-ad-map-label.label-three {
    right: 43%;
    left: auto;
}

html[dir="rtl"] .fx-ad-map-pin.pin-one {
    right: 27%;
    left: auto;
}

html[dir="rtl"] .fx-ad-map-pin.pin-two {
    right: 56%;
    left: auto;
}

html[dir="rtl"] .fx-ad-map-pin.pin-three {
    left: 17%;
    right: auto;
}

html[dir="rtl"] .fx-ad-map-pin.pin-four {
    left: 27%;
    right: auto;
}


/* =========================================================
   RTL MOBILE DRAWER
========================================================= */

@media (max-width: 1023px) {

    html[dir="rtl"] .fx-ad-app {
        display: block;
    }

    html[dir="rtl"] .fx-ad-sidebar {
        right: 0;
        left: auto;
        transform: translateX(102%);
    }

    html[dir="rtl"] .fx-ad-sidebar.is-open {
        transform: translateX(0);
    }

    html[dir="rtl"] .fx-ad-topbar-inner {
        justify-content: flex-start;
    }

    html[dir="rtl"] .fx-ad-top-actions {
        margin-right: auto;
        margin-left: 0;
        flex-direction: row-reverse;
    }

    html[dir="rtl"] .fx-ad-top-actions .fx-ad-logout-desktop {
        display: none;
    }
}


/* =========================================================
   RTL MOBILE SPACING
========================================================= */

@media (max-width: 767px) {

    html[dir="rtl"] .fx-ad-main-inner {
        text-align: right;
    }

    html[dir="rtl"] .fx-ad-page-heading,
    html[dir="rtl"] .fx-ad-toolbar,
    html[dir="rtl"] .fx-ad-welcome {
        text-align: right;
    }

    html[dir="rtl"] .fx-ad-page-actions {
        flex-direction: row;
    }

    html[dir="rtl"] .fx-ad-main-footer {
        align-items: flex-start;
    }
}

/* =========================================================
   FLEETAXIS — HOME 2 · SECTIONS 02 & 03 — RTL
   Paste at the end of your existing rtl.css.
========================================================= */

html[dir="rtl"] .fx-spot { --spot-dir: -1; }
html[dir="rtl"] .fx-sln  { --sln-dir: -1; }


/* ---------- arrows point the other way ---------- */

html[dir="rtl"] .fx-spot-arrow i,
html[dir="rtl"] .fx-spot-go i,
html[dir="rtl"] .fx-sln-btn i,
html[dir="rtl"] .fx-sln-link i,
html[dir="rtl"] .fx-sln-cta i { transform: scaleX(-1); }

html[dir="rtl"] .fx-sln-btn:hover i,
html[dir="rtl"] .fx-sln-link:hover i,
html[dir="rtl"] .fx-sln-cta:hover i { transform: scaleX(-1) translateX(4px); }

html[dir="rtl"] .fx-spot-go:hover { transform: translateX(-3px); }


/* ---------- letter spacing and alignment ---------- */

html[dir="rtl"] .fx-spot-title,
html[dir="rtl"] .fx-sln-title,
html[dir="rtl"] .fx-spot-name,
html[dir="rtl"] .fx-sln-card-title { letter-spacing: 0; }

html[dir="rtl"] .fx-spot-eyebrow,
html[dir="rtl"] .fx-sln-eyebrow,
html[dir="rtl"] .fx-spot-kicker,
html[dir="rtl"] .fx-sln-tag,
html[dir="rtl"] .fx-sln-mix-title,
html[dir="rtl"] .fx-sln-link-num { letter-spacing: 0; }

html[dir="rtl"] .fx-spot-trigger { text-align: center; }

@media (max-width: 1023px) {
    html[dir="rtl"] .fx-spot-trigger { text-align: right; }
}

/* the orb follows the pinned column */
html[dir="rtl"] .fx-sln-orb { transform: translate(50%, -50%); }

/* =========================================================
   FLEETAXIS LOGIN PAGE — RTL ONLY
========================================================= */

/* Keep the brand mark and logoname in their original order. */
html[dir="rtl"] .fx-login-brand {
    direction: ltr;
}


/* =========================================================
   MAIN TWO-COLUMN LAYOUT
========================================================= */

@media (min-width: 851px) {

    html[dir="rtl"] .fx-login-card {
        direction: rtl;

        grid-template-areas:
            "form brand";
    }

    html[dir="rtl"] .fx-login-form-panel {
        border-left: 0;
        border-right: 1px solid var(--fx-border);
    }

    html.dark-mode[dir="rtl"] .fx-login-form-panel {
        border-left: 0;
        border-right: 1px solid rgba(243,230,208,.13);
    }
}


/* =========================================================
   TOP CONTROL POSITION
   LTR: Dark mode → RTL, on the right
   RTL: RTL → Dark mode, on the left
========================================================= */

html[dir="rtl"] .fx-login-controls {
    left: 24px;
    right: auto;

    flex-direction: row-reverse;
    direction: ltr;
}


/* =========================================================
   BRAND PANEL TEXT
========================================================= */

html[dir="rtl"] .fx-login-brand-panel {
    text-align: right;
}

html[dir="rtl"] .fx-login-brand {
    align-self: flex-end;
}

html[dir="rtl"] .fx-login-intro {
    text-align: right;
}

html[dir="rtl"] .fx-login-eyebrow {
    letter-spacing: .02em;
}

html[dir="rtl"] .fx-login-capabilities {
    direction: rtl;
}

html[dir="rtl"] .fx-login-capability {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .fx-login-brand-bottom {
    direction: rtl;
}


/* Keep decorative vehicle composition stable. */
html[dir="rtl"] .fx-login-vehicle-stage {
    direction: ltr;
}


/* =========================================================
   FORM RTL
========================================================= */

html[dir="rtl"] .fx-login-form-panel {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .fx-login-form-heading {
    text-align: center;
}

html[dir="rtl"] .fx-login-form-heading h2,
html[dir="rtl"] .fx-login-form-heading p {
    direction: rtl;
}

html[dir="rtl"] .fx-login-field {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .fx-login-label-row {
    direction: rtl;
}

html[dir="rtl"] .fx-login-input-wrap {
    direction: rtl;
}

/* Keep email/password entry natural while surrounding controls
   follow RTL direction. */
html[dir="rtl"] .fx-login-input-wrap input {
    direction: ltr;
    text-align: left;
}

html[dir="rtl"] .fx-login-password-toggle {
    direction: ltr;
}

html[dir="rtl"] .fx-login-form-options {
    direction: rtl;
    justify-content: flex-start;
}

html[dir="rtl"] .fx-login-remember {
    direction: rtl;
}

html[dir="rtl"] .fx-login-socials {
    direction: rtl;
}

html[dir="rtl"] .fx-login-signup {
    direction: rtl;
    text-align: center;
}

html[dir="rtl"] .fx-login-trust-note {
    direction: rtl;
}


/* Reverse the directional arrow without reversing text. */
html[dir="rtl"] .fx-login-submit {
    direction: rtl;
}

html[dir="rtl"] .fx-login-submit i {
    transform: scaleX(-1);
}

html[dir="rtl"] .fx-login-submit:hover i {
    transform: scaleX(-1) translateX(3px);
}


/* =========================================================
   RTL MOBILE / TABLET
   Retain brand panel first, then login form.
========================================================= */

@media (max-width: 850px) {

    html[dir="rtl"] .fx-login-card {
        direction: rtl;

        grid-template-areas:
            "brand"
            "form";
    }

    html[dir="rtl"] .fx-login-form-panel {
        border-right: 0;
        border-left: 0;
        border-top: 1px solid var(--fx-border);
    }

    html.dark-mode[dir="rtl"] .fx-login-form-panel {
        border-right: 0;
        border-top-color: rgba(243,230,208,.13);
    }

    html[dir="rtl"] .fx-login-brand {
        align-self: flex-end;
    }

    html[dir="rtl"] .fx-login-capabilities {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
}


/* =========================================================
   RTL MOBILE-M / MOBILE-S
========================================================= */

@media (max-width: 480px) {

    html[dir="rtl"] .fx-login-controls {
        left: 11px;
        right: auto;
        flex-direction: row-reverse;
    }

    html[dir="rtl"] .fx-login-capabilities {
        grid-template-columns: minmax(0,1fr);
    }

    html[dir="rtl"] .fx-login-capability {
        justify-content: flex-start;
    }

    html[dir="rtl"] .fx-login-form-options {
        justify-content: flex-start;
    }
}

@media (max-width: 359px) {

    html[dir="rtl"] .fx-login-controls {
        left: 8px;
        right: auto;
    }
}

/* =========================================================
   FLEETAXIS LOGIN — MIRROR EXISTING LAYOUT IN RTL
   Tablet / Laptop / Laptop-L: reverse the two panels.
   Mobile-S / Mobile-M / Mobile-L: preserve vertical stack.
========================================================= */

/* TABLET AND ABOVE: 768px+ */
@media screen and (min-width: 768px) {

    html[dir="rtl"] body.fx-login-page .fx-login-card {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        /* Form on the left; brand panel on the right */
        grid-template-areas: "form brand" !important;

        direction: rtl !important;
        align-items: stretch !important;
    }

    html[dir="rtl"] body.fx-login-page .fx-login-brand-panel {
        grid-area: brand !important;

        grid-column: auto !important;
        grid-row: auto !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 100% !important;

        justify-self: stretch !important;
        align-self: stretch !important;
    }

    html[dir="rtl"] body.fx-login-page .fx-login-form-panel {
        grid-area: form !important;

        grid-column: auto !important;
        grid-row: auto !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 100% !important;

        justify-self: stretch !important;
        align-self: stretch !important;

        border-left: 0 !important;
        border-right: 1px solid var(--fx-border) !important;
        border-top: 0 !important;
    }

    html.dark-mode[dir="rtl"] body.fx-login-page
    .fx-login-form-panel {
        border-right-color: rgba(243, 230, 208, .13) !important;
    }
}


/* MOBILE: KEEP THE SAME STACKED LAYOUT */
@media screen and (max-width: 767px) {

    html[dir="rtl"] body.fx-login-page .fx-login-card {
        display: grid !important;

        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;

        grid-template-areas:
            "brand"
            "form" !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }

    html[dir="rtl"] body.fx-login-page .fx-login-brand-panel {
        grid-area: brand !important;
        grid-column: 1 !important;
        grid-row: 1 !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
    }

    html[dir="rtl"] body.fx-login-page .fx-login-form-panel {
        grid-area: form !important;
        grid-column: 1 !important;
        grid-row: 2 !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;

        border-left: 0 !important;
        border-right: 0 !important;
        border-top: 1px solid var(--fx-border) !important;
    }

    html.dark-mode[dir="rtl"] body.fx-login-page
    .fx-login-form-panel {
        border-top-color: rgba(243, 230, 208, .13) !important;
    }
}

/* =========================================================
   FLEETAXIS — HOME 2 · SECTIONS 04 & 05 — RTL
   Paste at the end of your existing rtl.css.

   Layout already uses logical properties (inset-inline-…,
   border-inline-…), so the timeline, tiles and today marker
   mirror on their own. These rules flip the button arrow
   direction, remove letter-spacing and keep numbers intact.
========================================================= */

html[dir="rtl"] .fx-mp,
html[dir="rtl"] .fx-lt { --hero-dir: -1; }


/* ---------- arrows point the other way ---------- */

html[dir="rtl"] .fx-mp .fx-arrow,
html[dir="rtl"] .fx-lt .fx-arrow { rotate: 180deg; }


/* ---------- letter spacing and casing ---------- */

html[dir="rtl"] .fx-mp-title,
html[dir="rtl"] .fx-lt-title,
html[dir="rtl"] .fx-mp-board-title,
html[dir="rtl"] .fx-lt-d-title,
html[dir="rtl"] .fx-mp-stat-num,
html[dir="rtl"] .fx-lt-stat-num { letter-spacing: 0; }

html[dir="rtl"] .fx-mp-eyebrow,
html[dir="rtl"] .fx-lt-eyebrow,
html[dir="rtl"] .fx-mp-board-kicker,
html[dir="rtl"] .fx-lt-kicker,
html[dir="rtl"] .fx-mp-time,
html[dir="rtl"] .fx-mp-day-name,
html[dir="rtl"] .fx-mp-today-tag,
html[dir="rtl"] .fx-lt-today b,
html[dir="rtl"] .fx-lt-axis span { letter-spacing: 0; }

html[dir="rtl"] .fx-mp-day-name { text-transform: none; }


/* ---------- numbers, times and dates stay left-to-right ---------- */

html[dir="rtl"] .fx-mp-stat-num,
html[dir="rtl"] .fx-lt-stat-num,
html[dir="rtl"] .fx-lt-meta dd,
html[dir="rtl"] .fx-mp-time {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: right;
}

html[dir="rtl"] .fx-mp-fill b { unicode-bidi: isolate; }

/* =========================================================
   FLEETAXIS SIGN-UP PAGE — DARK MODE
========================================================= */

html.dark-mode body.fx-signup-page {
    --fx-signup-error: #FF8E85;

    background: #171717;
    color: #F3EDE5;
}


/* Main container */

html.dark-mode body.fx-signup-page .fx-signup-card {
    border-color: rgba(243,230,208,.13);
    background: #111111;
    box-shadow: 0 25px 75px rgba(0,0,0,.35);
}


/* Keep the brand panel dark in both modes */

html.dark-mode body.fx-signup-page .fx-signup-brand-panel {
    background:
        linear-gradient(
            145deg,
            #202020 0%,
            #151515 58%,
            #211C17 100%
        );

    color: #F8F5F0;
}

html.dark-mode body.fx-signup-page .fx-signup-brand-panel::before {
    border-color: rgba(212,154,99,.16);
}

html.dark-mode body.fx-signup-page .fx-signup-brand-panel::after {
    opacity: .4;
}

html.dark-mode body.fx-signup-page .fx-signup-brand .fx-brand-name,
html.dark-mode body.fx-signup-page .fx-signup-intro h1 {
    color: #F8F5F0;
}

html.dark-mode body.fx-signup-page .fx-signup-brand .fx-logo-pin {
    fill: #B87333;
}

html.dark-mode body.fx-signup-page .fx-signup-brand .fx-logo-car {
    fill: #FFFFFF;
}

html.dark-mode body.fx-signup-page .fx-signup-brand .fx-logo-window,
html.dark-mode body.fx-signup-page .fx-signup-brand .fx-logo-wheel {
    fill: #D49A63;
}

html.dark-mode body.fx-signup-page .fx-signup-eyebrow,
html.dark-mode body.fx-signup-page .fx-signup-intro h1 span {
    color: #E2B487;
}

html.dark-mode body.fx-signup-page .fx-signup-intro > p {
    color: #C8C0B7;
}

html.dark-mode body.fx-signup-page .fx-signup-feature h3 {
    color: #F3EDE5;
}

html.dark-mode body.fx-signup-page .fx-signup-feature p,
html.dark-mode body.fx-signup-page .fx-signup-brand-bottom p {
    color: #AFA79D;
}

html.dark-mode body.fx-signup-page .fx-signup-feature-icon {
    border-color: rgba(212,154,99,.28);
    background: rgba(184,115,51,.09);
    color: #E2B487;
}

html.dark-mode body.fx-signup-page .fx-signup-feature-list {
    border-top-color: rgba(243,230,208,.14);
}


/* Right panel */

html.dark-mode body.fx-signup-page .fx-signup-form-panel {
    border-left-color: rgba(243,230,208,.13);
    background: #111111;
    color: #F3EDE5;
}

html.dark-mode body.fx-signup-page .fx-signup-form-heading h2 {
    color: #F8F5F0;
}

html.dark-mode body.fx-signup-page .fx-signup-form-heading > span {
    color: #E2B487;
}

html.dark-mode body.fx-signup-page .fx-signup-form-heading p {
    color: #B8B0A6;
}


/* Top controls */

html.dark-mode body.fx-signup-page .fx-signup-controls .fx-icon-button,
html.dark-mode body.fx-signup-page .fx-signup-controls .fx-rtl-button {
    border-color: rgba(243,230,208,.15);
    background: #1D1D1D;
    color: #F3EDE5;
}

html.dark-mode body.fx-signup-page .fx-signup-controls .fx-icon-button:hover,
html.dark-mode body.fx-signup-page .fx-signup-controls .fx-rtl-button:hover {
    border-color: #D49A63;
    background: #302A24;
    color: #E2B487;
}


/* Field labels */

html.dark-mode body.fx-signup-page .fx-signup-field > label {
    color: #F3EDE5;
}


/* Inputs */

html.dark-mode body.fx-signup-page .fx-signup-input-wrap {
    border-color: rgba(243,230,208,.17);
    background: #1D1D1D;
    color: #F3EDE5;
}

html.dark-mode body.fx-signup-page .fx-signup-input-wrap:focus-within {
    border-color: #D49A63;
    box-shadow: 0 0 0 3px rgba(212,154,99,.13);
}

html.dark-mode body.fx-signup-page .fx-signup-input-wrap > i:first-child {
    color: #E2B487;
}

html.dark-mode body.fx-signup-page .fx-signup-input-wrap input {
    background: transparent;
    color: #F8F5F0;
    caret-color: #E2B487;
}

html.dark-mode body.fx-signup-page .fx-signup-input-wrap input::placeholder {
    color: #AAA198;
    opacity: 1;
}

html.dark-mode body.fx-signup-page .fx-signup-field-hint {
    color: #B8B0A6;
}

html.dark-mode body.fx-signup-page .fx-signup-password-toggle {
    color: #B8B0A6;
}

html.dark-mode body.fx-signup-page .fx-signup-password-toggle:hover {
    background: #302A24;
    color: #E2B487;
}


/* Errors remain visible red */

html.dark-mode body.fx-signup-page .fx-signup-error,
html.dark-mode body.fx-signup-page .fx-signup-field.has-error .fx-signup-error {
    color: #FF8E85;
}

html.dark-mode body.fx-signup-page .fx-signup-field.has-error .fx-signup-input-wrap {
    border-color: #FF8E85;

    background:
        color-mix(in srgb,#FF8E85 6%,#1D1D1D);

    box-shadow: 0 0 0 2px rgba(255,142,133,.08);
}

html.dark-mode body.fx-signup-page .fx-signup-field.has-error .fx-signup-input-wrap > i:first-child {
    color: #FF8E85;
}

html.dark-mode body.fx-signup-page .fx-signup-terms.has-error > label {
    color: #FF8E85;
}

html.dark-mode body.fx-signup-page .fx-signup-terms.has-error input {
    outline-color: #FF8E85;
}

html.dark-mode body.fx-signup-page .fx-signup-message {
    border-color: rgba(212,154,99,.28);
    background: rgba(212,154,99,.09);
    color: #E2B487;
}

html.dark-mode body.fx-signup-page .fx-signup-message.is-error {
    border-color: rgba(255,142,133,.3);
    background: rgba(255,142,133,.08);
    color: #FFAAA3;
}

html.dark-mode body.fx-signup-page .fx-signup-message.is-success {
    border-color: rgba(121,177,126,.3);
    background: rgba(121,177,126,.09);
    color: #A9D4AD;
}


/* Terms and consent */

html.dark-mode body.fx-signup-page .fx-signup-terms > label {
    color: #B8B0A6;
}

html.dark-mode body.fx-signup-page .fx-signup-terms a,
html.dark-mode body.fx-signup-page .fx-signup-login-link a {
    color: #E2B487;
}

html.dark-mode body.fx-signup-page .fx-signup-terms a:hover,
html.dark-mode body.fx-signup-page .fx-signup-login-link a:hover {
    color: #F0C49D;
}

html.dark-mode body.fx-signup-page .fx-signup-terms input {
    accent-color: #D49A63;
}


/* Main action */

html.dark-mode body.fx-signup-page .fx-signup-submit {
    border-color: #B87333;
    background: #B87333;
    color: #FFFFFF;
}

html.dark-mode body.fx-signup-page .fx-signup-submit:hover {
    border-color: #985A25;
    background: #985A25;
    color: #FFFFFF;
}


/* Social sign-up */

html.dark-mode body.fx-signup-page .fx-signup-divider > span {
    background: rgba(243,230,208,.15);
}

html.dark-mode body.fx-signup-page .fx-signup-divider p {
    color: #AAA198;
}

html.dark-mode body.fx-signup-page .fx-signup-social {
    border-color: rgba(243,230,208,.15);
    background: #1D1D1D;
    color: #F3EDE5;
}

html.dark-mode body.fx-signup-page .fx-signup-social:hover {
    border-color: #D49A63;
    background: #302A24;
    color: #E2B487;
}


/* Footer-like message inside the form, not a website footer */

html.dark-mode body.fx-signup-page .fx-signup-login-link {
    color: #B8B0A6;
}

html.dark-mode body.fx-signup-page .fx-signup-security-note {
    border-top-color: rgba(243,230,208,.13);
    color: #AFA79D;
}

html.dark-mode body.fx-signup-page .fx-signup-security-note i {
    color: #E2B487;
}


/* Preserve borders while the stacked panels change */
@media (max-width: 850px) {
    html.dark-mode body.fx-signup-page .fx-signup-form-panel {
        border-top-color: rgba(243,230,208,.13);
        border-left: 0;
    }
}

/* =========================================================
   FLEETAXIS SIGNUP — RTL TOP CONTROLS POSITION FIX
   Only affects signup.html
========================================================= */

/* Detect RTL whether the direction is applied to html or body,
   or the existing RTL button indicates its active state. */

html[dir="rtl"] body.fx-signup-page .fx-signup-controls,
body[dir="rtl"].fx-signup-page .fx-signup-controls,
html.rtl body.fx-signup-page .fx-signup-controls,
html.rtl-mode body.fx-signup-page .fx-signup-controls,
body.fx-signup-page.rtl-mode .fx-signup-controls,
body.fx-signup-page.rtl .fx-signup-controls,
body.fx-signup-page:has(.fx-rtl-button[aria-pressed="true"]) .fx-signup-controls,
body.fx-signup-page:has(.fx-rtl-button.active) .fx-signup-controls {
    position: fixed !important;

    top: 18px !important;
    right: auto !important;
    left: 24px !important;

    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 7px !important;
    direction: ltr !important;

    z-index: 1000 !important;
}

@media (max-width: 850px) {
    html[dir="rtl"] body.fx-signup-page .fx-signup-controls,
    body[dir="rtl"].fx-signup-page .fx-signup-controls,
    html.rtl body.fx-signup-page .fx-signup-controls,
    html.rtl-mode body.fx-signup-page .fx-signup-controls,
    body.fx-signup-page.rtl-mode .fx-signup-controls,
    body.fx-signup-page.rtl .fx-signup-controls,
    body.fx-signup-page:has(.fx-rtl-button[aria-pressed="true"]) .fx-signup-controls,
    body.fx-signup-page:has(.fx-rtl-button.active) .fx-signup-controls {
        top: 12px !important;
        left: 17px !important;
        right: auto !important;
    }
}

@media (max-width: 480px) {
    html[dir="rtl"] body.fx-signup-page .fx-signup-controls,
    body[dir="rtl"].fx-signup-page .fx-signup-controls,
    html.rtl body.fx-signup-page .fx-signup-controls,
    html.rtl-mode body.fx-signup-page .fx-signup-controls,
    body.fx-signup-page.rtl-mode .fx-signup-controls,
    body.fx-signup-page.rtl .fx-signup-controls,
    body.fx-signup-page:has(.fx-rtl-button[aria-pressed="true"]) .fx-signup-controls,
    body.fx-signup-page:has(.fx-rtl-button.active) .fx-signup-controls {
        top: 10px !important;
        left: 10px !important;
        right: auto !important;
    }
}

@media (max-width: 359px) {
    html[dir="rtl"] body.fx-signup-page .fx-signup-controls,
    body[dir="rtl"].fx-signup-page .fx-signup-controls,
    html.rtl body.fx-signup-page .fx-signup-controls,
    html.rtl-mode body.fx-signup-page .fx-signup-controls,
    body.fx-signup-page.rtl-mode .fx-signup-controls,
    body.fx-signup-page.rtl .fx-signup-controls,
    body.fx-signup-page:has(.fx-rtl-button[aria-pressed="true"]) .fx-signup-controls,
    body.fx-signup-page:has(.fx-rtl-button.active) .fx-signup-controls {
        top: 8px !important;
        left: 8px !important;
        right: auto !important;
    }
}

/* =========================================================
   FLEETAXIS HOME 2 — SECTION 06 RTL
   Scoped exclusively to .fx-net
========================================================= */

html[dir="rtl"] .fx-net {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .fx-net .fx-net-head {
    direction: rtl;
}

html[dir="rtl"] .fx-net .fx-net-heading,
html[dir="rtl"] .fx-net .fx-net-title,
html[dir="rtl"] .fx-net .fx-net-intro {
    text-align: right;
}

html[dir="rtl"] .fx-net .fx-net-eyebrow {
    flex-direction: row;
    letter-spacing: 0;
}

html[dir="rtl"] .fx-net .fx-net-head-index {
    padding-right: 18px;
    padding-left: 0;
    border-right: 1px solid var(--fx-border);
    border-left: 0;
    direction: rtl;
}

html[dir="rtl"] .fx-net .fx-net-index-label {
    text-align: right;
}


/* Keep the image and physical hotspot positions unchanged.
   The image itself is not mirrored. */

html[dir="rtl"] .fx-net .fx-net-photo,
html[dir="rtl"] .fx-net .fx-net-photo-image,
html[dir="rtl"] .fx-net .fx-net-route {
    direction: ltr;
}

html[dir="rtl"] .fx-net .fx-net-switcher {
    direction: ltr;
}

html[dir="rtl"] .fx-net .fx-net-vehicle-select {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .fx-net .fx-net-option-top {
    direction: rtl;
}

html[dir="rtl"] .fx-net .fx-net-option-name,
html[dir="rtl"] .fx-net .fx-net-option-description {
    text-align: right;
}


/* Selected information reverses its reading layout */

html[dir="rtl"] .fx-net .fx-net-selected {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .fx-net .fx-net-selected-main,
html[dir="rtl"] .fx-net .fx-net-selected-copy {
    text-align: right;
}

html[dir="rtl"] .fx-net .fx-net-selected-facts {
    direction: rtl;
}

html[dir="rtl"] .fx-net .fx-net-selected-facts > div {
    padding-right: 13px;
    padding-left: 0;
    border-right: 1px solid var(--fx-border);
    border-left: 0;
}

html.dark-mode[dir="rtl"] .fx-net .fx-net-selected-facts > div {
    border-right-color: rgba(243,230,208,.14);
}


/* Operational timeline flows from right to left */

html[dir="rtl"] .fx-net .fx-net-process-head {
    direction: rtl;
}

html[dir="rtl"] .fx-net .fx-net-process-head > div,
html[dir="rtl"] .fx-net .fx-net-process-head > p {
    text-align: right;
}

html[dir="rtl"] .fx-net .fx-net-steps {
    direction: rtl;
}

html[dir="rtl"] .fx-net .fx-net-steps::after {
    animation-name: fxNetProcessTravelRtl;
}

@keyframes fxNetProcessTravelRtl {
    0%   { right: 12.5%; }
    100% { right: 67.5%; }
}

html[dir="rtl"] .fx-net .fx-net-step {
    direction: rtl;
    align-items: flex-start;
}

html[dir="rtl"] .fx-net .fx-net-step-copy {
    text-align: right;
}

html[dir="rtl"] .fx-net .fx-net-step-copy p {
    text-align: right;
}


/* Final CTA layout */

html[dir="rtl"] .fx-net .fx-net-outro {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .fx-net .fx-net-outro-copy {
    text-align: right;
}

html[dir="rtl"] .fx-net .fx-net-cta {
    direction: rtl;
}

html[dir="rtl"] .fx-net .fx-net-cta > i {
    transform: scaleX(-1);
}

html[dir="rtl"] .fx-net .fx-net-cta:hover > i {
    transform: scaleX(-1) translateX(3px);
}


/* Tablet and mobile: preserve physical image order */

@media (max-width: 1023px) {
    html[dir="rtl"] .fx-net .fx-net-head-index {
        padding-right: 12px;
        padding-left: 0;
    }

    html[dir="rtl"] .fx-net .fx-net-steps {
        direction: rtl;
    }

    html[dir="rtl"] .fx-net .fx-net-step {
        direction: rtl;
    }
}


/* Mobile: vertical timeline line moves to the right */

@media (max-width: 480px) {
    html[dir="rtl"] .fx-net .fx-net-selected-facts > div {
        padding-right: 0;
        border-right: 0;
        border-top: 1px solid var(--fx-border);
    }

    html.dark-mode[dir="rtl"] .fx-net .fx-net-selected-facts > div {
        border-top-color: rgba(243,230,208,.13);
    }

    html[dir="rtl"] .fx-net .fx-net-step {
        grid-template-columns: minmax(0, 1fr) 33px;
        direction: rtl;
    }

    html[dir="rtl"] .fx-net .fx-net-step-node {
        grid-column: 2;
        grid-row: 1;
    }

    html[dir="rtl"] .fx-net .fx-net-step-copy {
        grid-column: 1;
        grid-row: 1;
        text-align: right;
    }

    html[dir="rtl"] .fx-net .fx-net-outro {
        direction: rtl;
    }
}
/* Connected-fleet timeline: reverse only the moving highlight in RTL */
html[dir="rtl"] .fx-net .fx-net-steps::after {
    animation-name: fxNetProcessTravel;
    animation-direction: reverse;
}

/* =========================================================
   FLEETAXIS SERVICES HERO — RTL
========================================================= */

/* Controls move from top-right to top-left. */
html[dir="rtl"] body.fx-services-page .fxs-controls {
    right: auto;
    left: 24px;
    flex-direction: row-reverse;
    direction: ltr;
}


/* Desktop: reverse the two columns. */
@media (min-width: 1024px) {

    html[dir="rtl"] body.fx-services-page .fxs-layout {
        grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr);
        grid-template-areas: "visual copy";
        direction: rtl;
    }

    html[dir="rtl"] body.fx-services-page .fxs-copy {
        direction: rtl;
        text-align: right;
    }

    html[dir="rtl"] body.fx-services-page .fxs-eyebrow,
    html[dir="rtl"] body.fx-services-page .fxs-vehicle-tags,
    html[dir="rtl"] body.fx-services-page .fxs-actions,
    html[dir="rtl"] body.fx-services-page .fxs-service-note {
        direction: rtl;
    }

    html[dir="rtl"] body.fx-services-page .fxs-service-note p,
    html[dir="rtl"] body.fx-services-page .fxs-service-tile h2,
    html[dir="rtl"] body.fx-services-page .fxs-service-tile > p {
        text-align: right;
    }

    html[dir="rtl"] body.fx-services-page .fxs-tile-number {
        direction: ltr;
    }
}


/* Image composition remains LTR so image points stay aligned. */
html[dir="rtl"] body.fx-services-page .fxs-visual,
html[dir="rtl"] body.fx-services-page .fxs-visual-frame,
html[dir="rtl"] body.fx-services-page .fxs-fleet-image,
html[dir="rtl"] body.fx-services-page .fxs-route {
    direction: ltr;
}

html[dir="rtl"] body.fx-services-page .fxs-image-top {
    flex-direction: row-reverse;
}

html[dir="rtl"] body.fx-services-page .fxs-image-label,
html[dir="rtl"] body.fx-services-page .fxs-image-status {
    direction: ltr;
}

html[dir="rtl"] body.fx-services-page .fxs-floating-copy {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] body.fx-services-page .fxs-image-tile {
    direction: rtl;
}

html[dir="rtl"] body.fx-services-page .fxs-tile-lease {
    right: 17px;
    left: auto;
}

html[dir="rtl"] body.fx-services-page .fxs-tile-care {
    right: auto;
    left: 17px;
}

html[dir="rtl"] body.fx-services-page .fxs-image-bottom {
    direction: rtl;
}

html[dir="rtl"] body.fx-services-page .fxs-image-bottom > div {
    text-align: right;
}

html[dir="rtl"] body.fx-services-page .fxs-visual-footer {
    direction: rtl;
}

html[dir="rtl"] body.fx-services-page .fxs-button {
    direction: rtl;
}

html[dir="rtl"] body.fx-services-page .fxs-arrow-icon {
    transform: scaleX(-1);
}

html[dir="rtl"] body.fx-services-page .fxs-button-primary:hover .fxs-arrow-icon {
    transform: scaleX(-1) translateX(3px);
}


/* Tablet: retain a single-column layout. */
@media (max-width: 1023px) {

    html[dir="rtl"] body.fx-services-page .fxs-layout {
        grid-template-columns: minmax(0,1fr);
        grid-template-areas:
            "copy"
            "visual";
    }

    html[dir="rtl"] body.fx-services-page .fxs-copy {
        direction: rtl;
        text-align: right;
    }

    html[dir="rtl"] body.fx-services-page .fxs-vehicle-tags,
    html[dir="rtl"] body.fx-services-page .fxs-actions,
    html[dir="rtl"] body.fx-services-page .fxs-service-note {
        direction: rtl;
    }

    html[dir="rtl"] body.fx-services-page .fxs-image-label,
    html[dir="rtl"] body.fx-services-page .fxs-image-status {
        direction: ltr;
    }
}


/* Mobile controls and floating cards */
@media (max-width: 767px) {

    html[dir="rtl"] body.fx-services-page .fxs-controls {
        right: auto;
        left: 16px;
    }

    html[dir="rtl"] body.fx-services-page .fxs-tile-lease {
        right: 8px;
        left: auto;
    }

    html[dir="rtl"] body.fx-services-page .fxs-tile-care {
        right: auto;
        left: 8px;
    }
}

@media (max-width: 359px) {
    html[dir="rtl"] body.fx-services-page .fxs-controls {
        right: auto;
        left: 9px;
    }
}
/* =========================================================
   HOME 2 · SECTION 4 · FLEET SCAN : RTL
   The grid, tiles and copy mirror on their own through the
   direction. These rules cover what does not.
========================================================= */

html[dir="rtl"] .fx-scan { --scan-dir: -1; }

html[dir="rtl"] .fx-scan-tile,
html[dir="rtl"] .fx-scan-copy { text-align: right; }

html[dir="rtl"] .fx-scan-title { letter-spacing: 0; }
html[dir="rtl"] .fx-scan-btn .fa-arrow-right { transform: scaleX(-1); }
html[dir="rtl"] .fx-scan-bar i { transform-origin: right; }
html[dir="rtl"] .fx-scan-eyebrow { letter-spacing: 0; }

@media (min-width: 1024px) {
    html[dir="rtl"] .fx-scan-copy::before { background: linear-gradient(270deg, #0E0E0E 45%, transparent); }
    html[dir="rtl"].dark-mode .fx-scan-copy::before { background: linear-gradient(270deg, #0A0A0A 45%, transparent); }
}

/* =========================================================
   FLEETAXIS SERVICES — SECTIONS 01 + 02 / RTL
   Keep all photos in their original orientation
========================================================= */

html[dir="rtl"] body.fx-services-page .fxs2-overview,
html[dir="rtl"] body.fx-services-page .fxs2-lease {
    direction: rtl;
}

html[dir="rtl"] body.fx-services-page .fxs2-section-head,
html[dir="rtl"] body.fx-services-page .fxs2-lease-intro {
    direction: rtl;
}

html[dir="rtl"] body.fx-services-page .fxs2-eyebrow,
html[dir="rtl"] body.fx-services-page .fxs2-lease-benefits,
html[dir="rtl"] body.fx-services-page .fxs2-filter-buttons,
html[dir="rtl"] body.fx-services-page .fxs2-filter-intro,
html[dir="rtl"] body.fx-services-page .fxs2-filter-panel-top,
html[dir="rtl"] body.fx-services-page .fxs2-filter-feedback,
html[dir="rtl"] body.fx-services-page .fxs2-lease-card-heading,
html[dir="rtl"] body.fx-services-page .fxs2-lease-card-actions,
html[dir="rtl"] body.fx-services-page .fxs2-overview-bottom,
html[dir="rtl"] body.fx-services-page .fxs2-shortlist-panel {
    direction: rtl;
}

html[dir="rtl"] body.fx-services-page .fxs2-section-title,
html[dir="rtl"] body.fx-services-page .fxs2-section-lede,
html[dir="rtl"] body.fx-services-page .fxs2-head-aside,
html[dir="rtl"] body.fx-services-page .fxs2-service-card-copy,
html[dir="rtl"] body.fx-services-page .fxs2-lease-intro-copy,
html[dir="rtl"] body.fx-services-page .fxs2-lease-card-content,
html[dir="rtl"] body.fx-services-page .fxs2-filter-intro,
html[dir="rtl"] body.fx-services-page .fxs2-control,
html[dir="rtl"] body.fx-services-page .fxs2-shortlist-copy,
html[dir="rtl"] body.fx-services-page .fxs2-no-results {
    text-align: right;
}

html[dir="rtl"] body.fx-services-page .fxs2-eyebrow > span {
    order: 2;
}

html[dir="rtl"] body.fx-services-page .fxs2-filter-buttons {
    justify-content: flex-start;
}

html[dir="rtl"] body.fx-services-page .fxs2-filter-panel-top {
    flex-direction: row;
}

html[dir="rtl"] body.fx-services-page .fxs2-input-wrap input,
html[dir="rtl"] body.fx-services-page .fxs2-control select {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] body.fx-services-page .fxs2-filter-feedback-note {
    margin-inline-start: 0;
    margin-inline-end: auto;
}

html[dir="rtl"] body.fx-services-page .fxs2-card-link {
    flex-direction: row-reverse;
}

html[dir="rtl"] body.fx-services-page .fxs2-card-link:hover {
    gap: 14px;
}

html[dir="rtl"] body.fx-services-page .fxs2-inline-cta,
html[dir="rtl"] body.fx-services-page .fxs2-shortlist-cta {
    flex-direction: row-reverse;
}

html[dir="rtl"] body.fx-services-page .fxs2-overview-bottom > p {
    text-align: right;
}

html[dir="rtl"] body.fx-services-page .fxs2-shortlist-copy > strong {
    flex-direction: row;
}

html[dir="rtl"] body.fx-services-page .fxs2-details-toggle {
    text-align: right;
}

html[dir="rtl"] body.fx-services-page .fxs2-lease-more {
    border-radius: 7px 0 0 7px;
}

/* Keep image orientation unchanged in RTL mode. */
html[dir="rtl"] body.fx-services-page .fxs2-card-image,
html[dir="rtl"] body.fx-services-page .fxs2-card-image img,
html[dir="rtl"] body.fx-services-page .fxs2-lease-card-media,
html[dir="rtl"] body.fx-services-page .fxs2-lease-card-media img,
html[dir="rtl"] body.fx-services-page .fxs2-lease-feature,
html[dir="rtl"] body.fx-services-page .fxs2-lease-feature > img {
    direction: ltr;
}

html[dir="rtl"] body.fx-services-page .fxs2-image-tag,
html[dir="rtl"] body.fx-services-page .fxs2-option-tag {
    right: 12px;
    left: auto;
}

@media (max-width: 767px) {
    html[dir="rtl"] body.fx-services-page .fxs2-filter-buttons {
        justify-content: flex-start;
    }

    html[dir="rtl"] body.fx-services-page .fxs2-shortlist-cta {
        justify-self: stretch;
    }

    html[dir="rtl"] body.fx-services-page .fxs2-shortlist-copy > strong {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================
   SERVICES HERO — TILES BELOW THE PHOTO : RTL
   Paste at the very END of assets/css/rtl.css.
   Mirrors the side-by-side tiles (the photo frame itself
   stays LTR, as in your existing RTL rules).
========================================================= */

@container fxsframe (min-width: 620px) {

    html[dir="rtl"] body.fx-services-page #fxsVisualFrame > .fxs-tile-lease {
        grid-column: 2;
        margin: 10px 10px 10px 5px;
    }

    html[dir="rtl"] body.fx-services-page #fxsVisualFrame > .fxs-tile-care {
        grid-column: 1;
        margin: 10px 5px 10px 10px;
    }
}

/* =========================================================
   FLEETAXIS SERVICES — SECTIONS 03 + 04 / RTL
========================================================= */

html[dir="rtl"] body.fx-services-page .fxs34-maintenance,
html[dir="rtl"] body.fx-services-page .fxs34-categories {
    direction: rtl;
}

html[dir="rtl"] body.fx-services-page .fxs34-heading,
html[dir="rtl"] body.fx-services-page .fxs34-category-heading,
html[dir="rtl"] body.fx-services-page .fxs34-maintenance-content,
html[dir="rtl"] body.fx-services-page .fxs34-maintenance-content-head,
html[dir="rtl"] body.fx-services-page .fxs34-maintenance-detail,
html[dir="rtl"] body.fx-services-page .fxs34-category-detail,
html[dir="rtl"] body.fx-services-page .fxs34-category-considerations,
html[dir="rtl"] body.fx-services-page .fxs34-category-footer {
    text-align: right;
}

html[dir="rtl"] body.fx-services-page .fxs34-eyebrow {
    flex-direction: row;
}

html[dir="rtl"] body.fx-services-page .fxs34-maintenance-grid,
html[dir="rtl"] body.fx-services-page .fxs34-category-stage {
    direction: rtl;
}

html[dir="rtl"] body.fx-services-page .fxs34-maintenance-option {
    text-align: right;
}

html[dir="rtl"] body.fx-services-page .fxs34-option-text {
    align-items: flex-start;
}

html[dir="rtl"] body.fx-services-page .fxs34-maintenance-option.is-active {
    box-shadow: inset -3px 0 0 var(--fx-copper);
}

html[dir="rtl"] body.fx-services-page .fxs34-category-tab {
    text-align: right;
}

html[dir="rtl"] body.fx-services-page .fxs34-category-image-bottom {
    right: 23px;
    left: 23px;
    align-items: flex-start;
}

/* Leave vehicle photographs in their original orientation. */
html[dir="rtl"] body.fx-services-page .fxs34-maintenance-photo,
html[dir="rtl"] body.fx-services-page .fxs34-maintenance-photo img,
html[dir="rtl"] body.fx-services-page .fxs34-category-image-wrap,
html[dir="rtl"] body.fx-services-page .fxs34-category-image-wrap img {
    direction: ltr;
}

/* Flip directional arrows, not vehicle/service icons. */
html[dir="rtl"] body.fx-services-page .fxs34-cta > i,
html[dir="rtl"] body.fx-services-page .fxs34-category-footer > a > i,
html[dir="rtl"] body.fx-services-page .fxs34-care-flow-steps > i {
    transform: scaleX(-1);
}

html[dir="rtl"] body.fx-services-page .fxs34-category-considerations li {
    text-align: right;
}

html[dir="rtl"] body.fx-services-page .fxs34-category-considerations li::before {
    order: 0;
}

html[dir="rtl"] body.fx-services-page .fxs34-category-note {
    direction: rtl;
}

html[dir="rtl"] body.fx-services-page .fxs34-category-footer > p {
    text-align: right;
}

@media (max-width: 767px) {
    html[dir="rtl"] body.fx-services-page .fxs34-maintenance-grid,
    html[dir="rtl"] body.fx-services-page .fxs34-category-stage {
        grid-template-areas:
            "visual"
            "content";
    }

    html[dir="rtl"] body.fx-services-page .fxs34-care-flow-steps {
        justify-content: flex-start;
    }

    html[dir="rtl"] body.fx-services-page .fxs34-category-footer {
        align-items: stretch;
    }

    html[dir="rtl"] body.fx-services-page .fxs34-category-footer > a {
        align-self: stretch;
    }
}

/* =========================================================
   FLEETAXIS — ABOUT · HERO — RTL
   Paste at the end of your existing rtl.css.
========================================================= */

html[dir="rtl"] .fx-ab { --ab-dir: -1; }

/* dark colour stays under the stats, which now sit on the right */
html[dir="rtl"] .fx-ab-panel {
    background: linear-gradient(270deg, var(--ab-a) 0 50%, var(--ab-b) 50% 100%);
}

@media (max-width: 767px) {
    html[dir="rtl"] .fx-ab-panel { background: var(--ab-a); }
}

/* centred headline block (beats the global RTL text-align rule) */
html[dir="rtl"] .fx-ab-copy,
html[dir="rtl"] .fx-ab-copy .fx-ab-title,
html[dir="rtl"] .fx-ab-copy .fx-ab-eyebrow { text-align: center; }

html[dir="rtl"] .fx-ab-title,
html[dir="rtl"] .fx-ab-eyebrow,
html[dir="rtl"] .fx-ab-stats li > span { letter-spacing: 0; }

html[dir="rtl"] .fx-ab-para,
html[dir="rtl"] .fx-ab-stats li,
html[dir="rtl"] .fx-ab-badge-text { text-align: right; }

/* arrows point the other way */
html[dir="rtl"] .fx-ab-cta .fa-arrow-right { transform: scaleX(-1); }
html[dir="rtl"] .fx-ab-cta:hover .fa-arrow-right { transform: scaleX(-1) translateX(4px); }

html[dir="rtl"] .fx-ab-cell-text,
html[dir="rtl"] .fx-ab-cell-text strong,
html[dir="rtl"] .fx-ab-cell-text small { text-align: right; }

@media (max-width: 1023px) {
    html[dir="rtl"] .fx-ab-para { justify-self: start; }
}

@media (max-width: 767px) {
    html[dir="rtl"] .fx-ab-para { text-align: center; }

    html[dir="rtl"] .fx-ab-cell-text,
    html[dir="rtl"] .fx-ab-cell-text strong { text-align: center; }
}

/* =========================================================
   FLEETAXIS — CONTACT PAGE · HERO — RTL
   Paste at the end of your existing rtl.css
   (or link this file after rtl.css).

   The layout already uses logical properties, so the copy
   column, glow and display mirror on their own. Gauges and
   warning lights stay as drawn, like a real dashboard.
========================================================= */

html[dir="rtl"] .fx-ct { --ct-dir: -1; }


/* ---------- arrows point the other way ---------- */

html[dir="rtl"] .fx-ct-btn .fx-ct-arrow { transform: scaleX(-1); }
html[dir="rtl"] .fx-ct-btn-primary:hover .fx-ct-arrow,
html[dir="rtl"] .fx-ct-lcd .fx-ct-btn:hover .fx-ct-arrow { transform: scaleX(-1) translateX(4px); }


/* ---------- letter spacing ---------- */

html[dir="rtl"] .fx-ct-title,
html[dir="rtl"] .fx-ct-eyebrow,
html[dir="rtl"] .fx-ct-brand,
html[dir="rtl"] .fx-ct-ready,
html[dir="rtl"] .fx-ct-lcd small { letter-spacing: 0; }


/* ---------- background grid follows the reading direction ---------- */

html[dir="rtl"] .fx-ct-grid {
    -webkit-mask-image: radial-gradient(ellipse at 28% 50%, #000 0, transparent 70%);
            mask-image: radial-gradient(ellipse at 28% 50%, #000 0, transparent 70%);
}

@media (max-width: 1023px) {
    html[dir="rtl"] .fx-ct-grid {
        -webkit-mask-image: radial-gradient(ellipse at 50% 70%, #000 0, transparent 72%);
                mask-image: radial-gradient(ellipse at 50% 70%, #000 0, transparent 72%);
    }
}


/* ---------- the cluster: dials stay left-to-right, the trip display reads right-to-left ---------- */

html[dir="rtl"] .fx-ct-gauges,
html[dir="rtl"] .fx-ct-lights,
html[dir="rtl"] .fx-ct-bin-top { direction: ltr; }

html[dir="rtl"] .fx-ct-lcd { direction: rtl; }

/* times, numbers and readouts keep their digit order */
html[dir="rtl"] .fx-ct-ro b,
html[dir="rtl"] .fx-ct-live b,
html[dir="rtl"] .fx-ct-stats strong {
    direction: ltr;
    unicode-bidi: isolate;
}

html[dir="rtl"] .fx-ct-stats strong { text-align: right; }

/* =========================================================
   FLEETAXIS SERVICES — SECTION 06 + FAQ + CTA / RTL
========================================================= */

html[dir="rtl"] body.fx-services-page .fxs6-section,
html[dir="rtl"] body.fx-services-page .fxfaq-section,
html[dir="rtl"] body.fx-services-page .fxfinal-section {
    direction: rtl;
}

html[dir="rtl"] body.fx-services-page .fxs6-header,
html[dir="rtl"] body.fx-services-page .fxfaq-header {
    direction: rtl;
}

html[dir="rtl"] body.fx-services-page .fxs6-heading,
html[dir="rtl"] body.fx-services-page .fxs6-intro,
html[dir="rtl"] body.fx-services-page .fxfaq-header > div {
    text-align: right;
}

html[dir="rtl"] body.fx-services-page .fxs6-eyebrow,
html[dir="rtl"] body.fx-services-page .fxfaq-eyebrow {
    flex-direction: row;
}

html[dir="rtl"] body.fx-services-page .fxs6-text-link,
html[dir="rtl"] body.fx-services-page .fxs6-footer-link {
    flex-direction: row-reverse;
}

html[dir="rtl"] body.fx-services-page .fxs6-text-link i,
html[dir="rtl"] body.fx-services-page .fxs6-footer-link i {
    transform: scaleX(-1);
}

/* Horizontal timeline runs from right to left. */
html[dir="rtl"] body.fx-services-page .fxs6-track-progress {
    transform-origin: right center;
}

html[dir="rtl"] body.fx-services-page .fxs6-step {
    direction: rtl;
}

/* On tablet/mobile the vertical spine moves to the right. */
@media (max-width: 900px) {
    html[dir="rtl"] body.fx-services-page .fxs6-track {
        left: auto;
        right: 17px;
    }

    html[dir="rtl"] body.fx-services-page .fxs6-track-progress {
        transform-origin: center top;
    }

    html[dir="rtl"] body.fx-services-page .fxs6-step {
        direction: rtl;
        text-align: right;
    }

    html[dir="rtl"] body.fx-services-page .fxs6-step-content {
        align-items: flex-start;
        text-align: right;
    }
}

@media (max-width: 480px) {
    html[dir="rtl"] body.fx-services-page .fxs6-track {
        right: 16px;
    }
}

@media (max-width: 359px) {
    html[dir="rtl"] body.fx-services-page .fxs6-track {
        right: 14px;
    }
}

/* FAQ: swap the opposing answer-slide directions. */
html[dir="rtl"] body.fx-services-page .fxfaq-row[data-faq-side="left"] {
    --fxfaq-slide-x: 24px;
}

html[dir="rtl"] body.fx-services-page .fxfaq-row[data-faq-side="right"] {
    --fxfaq-slide-x: -24px;
}

html[dir="rtl"] body.fx-services-page .fxfaq-question {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] body.fx-services-page .fxfaq-answer-inner p {
    padding-inline: 64px 52px;
    text-align: right;
}

html[dir="rtl"] body.fx-services-page .fxfaq-symbol {
    direction: ltr;
}

@media (max-width: 767px) {
    html[dir="rtl"] body.fx-services-page .fxfaq-answer-inner p {
        padding-inline: 42px 0;
    }
}

@media (max-width: 480px) {
    html[dir="rtl"] body.fx-services-page .fxfaq-answer-inner p {
        padding-inline: 33px 0;
    }
}

@media (max-width: 359px) {
    html[dir="rtl"] body.fx-services-page .fxfaq-answer-inner p {
        padding-inline: 29px 0;
    }
}

/* CTA direction and arrow mirroring */
html[dir="rtl"] body.fx-services-page .fxfinal-content {
    direction: rtl;
}

html[dir="rtl"] body.fx-services-page .fxfinal-actions {
    direction: rtl;
}

html[dir="rtl"] body.fx-services-page .fxfinal-button i:last-child {
    transform: scaleX(-1);
}

html[dir="rtl"] body.fx-services-page .fxfinal-benefits {
    direction: rtl;
}

html[dir="rtl"] body.fx-services-page .fxfinal-benefit {
    text-align: right;
}

html[dir="rtl"] body.fx-services-page .fxfinal-closing-line {
    direction: rtl;
}

/* =========================================================
   HOME 2 — FINAL CTA / DARK MODE
========================================================= */

html.dark-mode body.fx-home2-page .fxfinal-section {
    background: var(--fx-off-white);
    border-color: var(--fx-border);
}

html.dark-mode body.fx-home2-page .fxfinal-panel {
    border-color: rgba(212, 154, 99, .35);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(184, 115, 51, .10), transparent 56%),
        linear-gradient(145deg, #202020, #151515 72%);
    color: #F3EDE5;
}

html.dark-mode body.fx-home2-page .fxfinal-content h2 {
    color: #FFFFFF;
}

html.dark-mode body.fx-home2-page .fxfinal-content h2 > span,
html.dark-mode body.fx-home2-page .fxfinal-eyebrow,
html.dark-mode body.fx-home2-page .fxfinal-benefit-icon {
    color: #D49A63;
}

html.dark-mode body.fx-home2-page .fxfinal-eyebrow-dot,
html.dark-mode body.fx-home2-page .fxfinal-closing-line > span {
    background: #D49A63;
}

html.dark-mode body.fx-home2-page .fxfinal-description {
    color: #D0C8BE;
}

html.dark-mode body.fx-home2-page .fxfinal-button-primary {
    border-color: #B87333;
    background: #B87333;
    color: #FFFFFF;
}

html.dark-mode body.fx-home2-page .fxfinal-button-primary:hover {
    border-color: #985A25;
    background: #985A25;
    color: #FFFFFF;
}

html.dark-mode body.fx-home2-page .fxfinal-button-secondary {
    border-color: rgba(243, 230, 208, .3);
    background: rgba(255, 255, 255, .035);
    color: #F3EDE5;
}

html.dark-mode body.fx-home2-page .fxfinal-button-secondary:hover {
    border-color: #D49A63;
    background: rgba(212, 154, 99, .10);
    color: #FFFFFF;
}

html.dark-mode body.fx-home2-page .fxfinal-divider {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(243, 230, 208, .23) 20%,
        rgba(243, 230, 208, .23) 80%,
        transparent
    );
}

html.dark-mode body.fx-home2-page .fxfinal-benefit strong {
    color: #F3EDE5;
}

html.dark-mode body.fx-home2-page .fxfinal-benefit small,
html.dark-mode body.fx-home2-page .fxfinal-closing-line {
    color: #B8B0A6;
}

html.dark-mode body.fx-home2-page .fxfinal-benefit-icon {
    border-color: rgba(212, 154, 99, .32);
    background: rgba(212, 154, 99, .09);
}

html.dark-mode body.fx-home2-page .fxfinal-benefit-separator {
    background: rgba(243, 230, 208, .16);
}

html.dark-mode body.fx-home2-page .fxfinal-eyebrow-line {
    background: rgba(212, 154, 99, .65);
}

html.dark-mode body.fx-home2-page .fxfinal-panel::before {
    border-color: rgba(212, 154, 99, .08);
}

html.dark-mode body.fx-home2-page .fxfinal-button:focus-visible {
    outline-color: #E2B487;
}

/* =========================================================
   FLEETAXIS 404 — DARK MODE
   No effect outside body.fx-404-page
========================================================= */

html.dark-mode body.fx-404-page {
    background: var(--fx-champagne-light);
    color: var(--fx-text);
}

html.dark-mode body.fx-404-page .fx404-main::before,
html.dark-mode body.fx-404-page .fx404-main::after {
    border-color: rgba(212, 154, 99, .12);
}

html.dark-mode body.fx-404-page .fx404-tool {
    border-color: rgba(243, 230, 208, .15);
    background: #202020;
    color: #F3EDE5;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .16);
}

html.dark-mode body.fx-404-page .fx404-tool:hover {
    border-color: #D49A63;
    background: #302A24;
    color: #E2B487;
}

html.dark-mode body.fx-404-page .fx404-eyebrow,
html.dark-mode body.fx-404-page .fx404-bottom-line > span:first-child {
    color: #E2B487;
}

html.dark-mode body.fx-404-page .fx404-eyebrow-slash {
    color: #D49A63;
}

html.dark-mode body.fx-404-page .fx404-number,
html.dark-mode body.fx-404-page .fx404-digit {
    color: #F3EDE5;
}

html.dark-mode body.fx-404-page .fx404-zero {
    border-color: #D49A63;
    background: rgba(212, 154, 99, .07);
}

html.dark-mode body.fx-404-page .fx404-zero-character {
    color: #D49A63;
}

html.dark-mode body.fx-404-page .fx404-pin {
    color: #E2B487;
}

html.dark-mode body.fx-404-page .fx404-road-base {
    stroke: rgba(212, 154, 99, .2);
}

html.dark-mode body.fx-404-page .fx404-road-dashes {
    stroke: #D49A63;
}

html.dark-mode body.fx-404-page .fx404-marker-start,
html.dark-mode body.fx-404-page .fx404-marker-end {
    color: #D49A63;
}

html.dark-mode body.fx-404-page .fx404-lost-vehicle {
    border-color: rgba(212, 154, 99, .35);
    background: #252321;
    color: #E2B487;
    box-shadow: 0 5px 17px rgba(0, 0, 0, .18);
}

html.dark-mode body.fx-404-page .fx404-route-label {
    border-color: rgba(243, 230, 208, .15);
    background: #202020;
    color: #C1B8AD;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .17);
}

html.dark-mode body.fx-404-page .fx404-route-label i,
html.dark-mode body.fx-404-page .fx404-spark {
    color: #D49A63;
}

html.dark-mode body.fx-404-page .fx404-status {
    border-color: rgba(212, 154, 99, .25);
    background: rgba(212, 154, 99, .08);
    color: #E2B487;
}

html.dark-mode body.fx-404-page .fx404-status > span {
    background: #D49A63;
}

html.dark-mode body.fx-404-page .fx404-copy h1 {
    color: #F3EDE5;
}

html.dark-mode body.fx-404-page .fx404-copy h1 > span {
    color: #D49A63;
}

html.dark-mode body.fx-404-page .fx404-description,
html.dark-mode body.fx-404-page .fx404-helper,
html.dark-mode body.fx-404-page .fx404-bottom-line {
    color: #C1B8AD;
}

html.dark-mode body.fx-404-page .fx404-helper i {
    color: #D49A63;
}

html.dark-mode body.fx-404-page .fx404-home-button {
    border-color: #B87333;
    background: #B87333;
    color: #FFFFFF;
}

html.dark-mode body.fx-404-page .fx404-home-button:hover {
    border-color: #985A25;
    background: #985A25;
    color: #FFFFFF;
}

html.dark-mode body.fx-404-page .fx404-home-button:focus-visible,
html.dark-mode body.fx-404-page .fx404-tool:focus-visible {
    outline-color: #E2B487;
}

html.dark-mode body.fx-404-page .fx404-bottom-dot {
    background: #D49A63;
}

html[dir="rtl"] body.fx-404-page .fx404-home-button:hover .fx404-button-arrow {
    transform: scaleX(-1) translateX(4px);
}

/* =========================================================
   FLEETAXIS COMING SOON — RTL
   Scoped to body.fx-comingsoon-page only
========================================================= */

html[dir="rtl"] body.fx-comingsoon-page {
    direction: rtl;
    text-align: center;
}

html[dir="rtl"] body.fx-comingsoon-page .fxcs-tools {
    right: auto;
    left: 24px;
    direction: ltr;
}

/* Keep the route illustration oriented consistently. */
html[dir="rtl"] body.fx-comingsoon-page .fxcs-artwork,
html[dir="rtl"] body.fx-comingsoon-page .fxcs-road,
html[dir="rtl"] body.fx-comingsoon-page .fxcs-road-svg,
html[dir="rtl"] body.fx-comingsoon-page .fxcs-countdown {
    direction: ltr;
}

/* Center the message and keep text alignment consistent. */
html[dir="rtl"] body.fx-comingsoon-page .fxcs-content,
html[dir="rtl"] body.fx-comingsoon-page .fxcs-eyebrow,
html[dir="rtl"] body.fx-comingsoon-page .fxcs-message,
html[dir="rtl"] body.fx-comingsoon-page .fxcs-countdown-heading,
html[dir="rtl"] body.fx-comingsoon-page .fxcs-countdown-note,
html[dir="rtl"] body.fx-comingsoon-page .fxcs-bottom {
    text-align: center;
    justify-content: center;
}

/* Reverse the navigation arrow, but not the home icon. */
html[dir="rtl"] body.fx-comingsoon-page .fxcs-home-arrow {
    transform: scaleX(-1);
}

html[dir="rtl"] body.fx-comingsoon-page
.fxcs-home-button:hover .fxcs-home-arrow {
    transform: scaleX(-1) translateX(4px);
}

/* Narrow-screen control placement */
@media (max-width: 767px) {
    html[dir="rtl"] body.fx-comingsoon-page .fxcs-tools {
        right: auto;
        left: 15px;
    }
}

@media (max-width: 480px) {
    html[dir="rtl"] body.fx-comingsoon-page .fxcs-tools {
        right: auto;
        left: 12px;
    }
}

@media (max-width: 359px) {
    html[dir="rtl"] body.fx-comingsoon-page .fxcs-tools {
        right: auto;
        left: 9px;
    }
}

/* FLEETAXIS CONTACT SECTIONS — RTL EXTENSION ONLY.
   Responds to the existing project's html[dir="rtl"] convention. */
html[dir="rtl"] .fxcs-contact-sections { direction: rtl; text-align: right; }
html[dir="rtl"] .fxcs-contact-sections .fxcs-contact-panel,
html[dir="rtl"] .fxcs-contact-sections .fxcs-form-side-note,
html[dir="rtl"] .fxcs-contact-sections .fxcs-map-aside-email,
html[dir="rtl"] .fxcs-contact-sections .fxcs-cta-content { text-align: right; }
html[dir="rtl"] .fxcs-contact-sections .fxcs-text-link svg,
html[dir="rtl"] .fxcs-contact-sections .fxcs-outline-link svg,
html[dir="rtl"] .fxcs-contact-sections .fxcs-submit-button svg,
html[dir="rtl"] .fxcs-contact-sections .fxcs-process-link svg,
html[dir="rtl"] .fxcs-contact-sections .fxcs-cta-actions svg,
html[dir="rtl"] .fxcs-contact-sections .fxcs-channel-arrow { transform: scaleX(-1); }
html[dir="rtl"] .fxcs-contact-sections .fxcs-text-link:hover svg,
html[dir="rtl"] .fxcs-contact-sections .fxcs-outline-link:hover svg { transform: scaleX(-1) translateX(3px); }
html[dir="rtl"] .fxcs-contact-sections .fxcs-map-tag { inset-inline-start: auto; inset-inline-end: 17px; }
html[dir="rtl"] .fxcs-contact-sections .fxcs-image-number { inset-inline-start: auto; inset-inline-end: 11px; }
html[dir="rtl"] .fxcs-contact-sections .fxcs-process-heading { text-align: center; }
html[dir="rtl"] .fxcs-contact-sections .fxcs-process-connector svg { transform: scaleX(-1); }
html[dir="rtl"] .fxcs-contact-sections .fxcs-cta-benefits { justify-content: flex-start; }
html[dir="rtl"] .fxcs-contact-sections .fxcs-cta-orbit-one { inset-inline-end: auto; inset-inline-start: 30px; }
html[dir="rtl"] .fxcs-contact-sections .fxcs-cta-orbit-two { inset-inline-end: auto; inset-inline-start: 94px; }
html[dir="rtl"] .fxcs-contact-sections .fxcs-select-wrap > svg { inset-inline-end: auto; inset-inline-start: 12px; }
@media (max-width: 1023px) {
  html[dir="rtl"] .fxcs-contact-sections .fxcs-process-connector { transform: rotate(-90deg); }
  html[dir="rtl"] .fxcs-contact-sections .fxcs-process-connector svg { transform: scaleX(1); }
}
@media (max-width: 480px) {
  html[dir="rtl"] .fxcs-contact-sections .fxcs-map-tag { inset-inline-start: auto; inset-inline-end: 10px; }
  html[dir="rtl"] .fxcs-contact-sections .fxcs-image-number { inset-inline-start: auto; inset-inline-end: 11px; }
}


/* =========================================================
   FLEETAXIS ABOUT — RTL FOR SECTIONS 04–07
   Scope: .fxa-about-sections only
========================================================= */

html[dir="rtl"] .fxa-about-sections {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .fxa-about-sections .fxa-story-heading,
html[dir="rtl"] .fxa-about-sections .fxa-team-heading {
    text-align: right;
}

html[dir="rtl"] .fxa-about-sections .fxa-story-narrative,
html[dir="rtl"] .fxa-about-sections .fxa-story-tab,
html[dir="rtl"] .fxa-about-sections .fxa-team-copy,
html[dir="rtl"] .fxa-about-sections .fxa-ecosystem-node,
html[dir="rtl"] .fxa-about-sections .fxa-ecosystem-detail,
html[dir="rtl"] .fxa-about-sections .fxa-difference-pane {
    text-align: right;
}

/* Mirror the decorative story chips, but keep the hub centered. */
html[dir="rtl"] .fxa-about-sections .fxa-vehicle-chip-one {
    left: auto;
    right: 6%;
}

html[dir="rtl"] .fxa-about-sections .fxa-vehicle-chip-two {
    left: auto;
    right: 4%;
}

html[dir="rtl"] .fxa-about-sections .fxa-vehicle-chip-three {
    right: auto;
    left: 4%;
}

html[dir="rtl"] .fxa-about-sections .fxa-scene-tag-one {
    right: auto;
    left: 8%;
}

html[dir="rtl"] .fxa-about-sections .fxa-scene-tag-two {
    left: auto;
    right: 8%;
}

html[dir="rtl"] .fxa-about-sections .fxa-scene-tag-three {
    right: auto;
    left: 8%;
}

html[dir="rtl"] .fxa-about-sections .fxa-team-art-label {
    text-align: right;
}

/* Reorder the ecosystem sides in RTL. */
html[dir="rtl"] .fxa-about-sections .fxa-ecosystem-board {
    grid-template-areas:
        "right hub left"
        "detail detail detail";
}

html[dir="rtl"] .fxa-about-sections .fxa-ecosystem-node-arrow,
html[dir="rtl"] .fxa-about-sections .fxa-story-tab > svg,
html[dir="rtl"] .fxa-about-sections .fxa-team-focus svg {
    transform: scaleX(-1);
}

html[dir="rtl"] .fxa-about-sections .fxa-ecosystem-node:hover .fxa-ecosystem-node-arrow,
html[dir="rtl"] .fxa-about-sections .fxa-ecosystem-node.is-active .fxa-ecosystem-node-arrow {
    transform: scaleX(-1) translateX(3px);
}

/* Keep the comparison illustration in its intended physical layout,
   while placing RTL text and its comparison handle correctly. */
html[dir="rtl"] .fxa-about-sections .fxa-difference-board {
    direction: rtl;
}

html[dir="rtl"] .fxa-about-sections .fxa-difference-after {
    clip-path: inset(0 var(--fxa-compare-position) 0 0);
}

html[dir="rtl"] .fxa-about-sections .fxa-difference-divider {
    left: auto;
    right: var(--fxa-compare-position);
    transform: translateX(50%);
}

html[dir="rtl"] .fxa-about-sections .fxa-difference-handle svg {
    transform: scaleX(-1);
}

html[dir="rtl"] .fxa-about-sections .fxa-difference-range {
    direction: ltr;
}

html[dir="rtl"] .fxa-about-sections .fxa-difference-range-label {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

@media (max-width: 767px) {
    html[dir="rtl"] .fxa-about-sections .fxa-vehicle-chip-one {
        left: auto;
        right: 3%;
    }

    html[dir="rtl"] .fxa-about-sections .fxa-vehicle-chip-two {
        left: auto;
        right: 3%;
    }

    html[dir="rtl"] .fxa-about-sections .fxa-vehicle-chip-three {
        right: auto;
        left: 3%;
    }

    html[dir="rtl"] .fxa-about-sections .fxa-scene-tag-one {
        right: auto;
        left: 5%;
    }

    html[dir="rtl"] .fxa-about-sections .fxa-scene-tag-two {
        left: auto;
        right: 5%;
    }

    html[dir="rtl"] .fxa-about-sections .fxa-scene-tag-three {
        right: auto;
        left: 5%;
    }

    html[dir="rtl"] .fxa-about-sections .fxa-ecosystem-board {
        grid-template-areas:
            "hub"
            "left"
            "right"
            "detail";
    }
}

/* =========================================================
   FLEETAXIS OUR TEAM — RTL ONLY
   Scoped to .fxat-team-section.
========================================================= */

html[dir="rtl"] .fxat-team-section {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .fxat-team-section .fxat-team-heading,
html[dir="rtl"] .fxat-team-section .fxat-team-intro,
html[dir="rtl"] .fxat-team-section .fxat-team-footer-copy,
html[dir="rtl"] .fxat-team-section .fxat-card-content {
    text-align: right;
}

html[dir="rtl"] .fxat-team-section .fxat-team-index {
    align-items: flex-start;
}

html[dir="rtl"] .fxat-team-section .fxat-image-index {
    inset-inline-start: auto;
    inset-inline-end: 15px;
}

html[dir="rtl"] .fxat-team-section .fxat-image-topline {
    inset-inline-end: auto;
    inset-inline-start: 15px;
    text-align: start;
}

html[dir="rtl"] .fxat-team-section .fxat-card-bottom svg {
    transform: scaleX(-1);
}

html[dir="rtl"] .fxat-team-section .fxat-team-footer-copy {
    text-align: right;
}

html[dir="rtl"] .fxat-team-section .fxat-capability-tags {
    justify-content: flex-start;
}

html[dir="rtl"] .fxat-team-section .fxat-corner-mark {
    inset-inline-start: auto;
    inset-inline-end: 0;
    border-inline-start: 0;
    border-inline-end: 2px solid #D49A63;
}

@media (max-width: 1023px) {
    html[dir="rtl"] .fxat-team-section .fxat-team-header {
        text-align: right;
    }
}

@media (max-width: 767px) {
    html[dir="rtl"] .fxat-team-section .fxat-team-intro {
        text-align: right;
    }

    html[dir="rtl"] .fxat-team-section .fxat-capability-tags {
        justify-content: flex-start;
    }
}

/* =========================================================
   FLEETAXIS ABOUT — MISSION / VISION / GOALS RTL
   Scoped only to .fxmv-section.
========================================================= */

html[dir="rtl"] .fxmv-section {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .fxmv-section .fxmv-heading-row,
html[dir="rtl"] .fxmv-section .fxmv-panel,
html[dir="rtl"] .fxmv-section .fxmv-bottom-note {
    direction: rtl;
}

html[dir="rtl"] .fxmv-section .fxmv-tabs {
    direction: rtl;
}

html[dir="rtl"] .fxmv-section .fxmv-tabs::before {
    right: 5px;
    left: auto;
    transform: translateX(calc(var(--fxmv-active-index) * -100%));
}

html[dir="rtl"] .fxmv-section .fxmv-tab {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .fxmv-section .fxmv-tab-arrow,
html[dir="rtl"] .fxmv-section .fxmv-copy-footer svg {
    transform: scaleX(-1);
}

html[dir="rtl"] .fxmv-section .fxmv-tab:hover .fxmv-tab-arrow,
html[dir="rtl"] .fxmv-section .fxmv-tab.is-active .fxmv-tab-arrow {
    transform: scaleX(-1) translateX(3px);
}

html[dir="rtl"] .fxmv-section .fxmv-visual-caption,
html[dir="rtl"] .fxmv-section .fxmv-copy,
html[dir="rtl"] .fxmv-section .fxmv-principles,
html[dir="rtl"] .fxmv-section .fxmv-bottom-note {
    text-align: right;
}

html[dir="rtl"] .fxmv-section .fxmv-copy-topline {
    flex-direction: row;
}

html[dir="rtl"] .fxmv-section .fxmv-visual-index {
    inset-inline-start: auto;
    inset-inline-end: 17px;
}

html[dir="rtl"] .fxmv-section .fxmv-principles li {
    flex-direction: row;
}

html[dir="rtl"] .fxmv-section .fxmv-panel.fxmv-enter-forward {
    animation-name: fxmvPanelEnterBackward;
}

html[dir="rtl"] .fxmv-section .fxmv-panel.fxmv-enter-backward {
    animation-name: fxmvPanelEnterForward;
}

@media (max-width: 429px) {
    html[dir="rtl"] .fxmv-section .fxmv-visual-index {
        inset-inline-end: 12px;
    }
}

/* =========================================================
   FLEETAXIS ABOUT — OUR HISTORY RTL
   Scoped only to .fxht-history-section.
========================================================= */

html[dir="rtl"] .fxht-history-section {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .fxht-history-section .fxht-heading-row {
    direction: rtl;
}

html[dir="rtl"] .fxht-history-section .fxht-wave-svg {
    transform: scaleX(-1);
    transform-origin: center;
}

html[dir="rtl"] .fxht-history-section .fxht-milestone {
    left: auto;
    right: var(--fxht-x);
}

html[dir="rtl"] .fxht-history-section .fxht-milestone-content {
    text-align: right;
}

html[dir="rtl"] .fxht-history-section .fxht-content-accent {
    transform-origin: right center;
}

html[dir="rtl"] .fxht-history-section .fxht-milestone:hover .fxht-content-accent,
html[dir="rtl"] .fxht-history-section .fxht-milestone:focus-within .fxht-content-accent,
html[dir="rtl"] .fxht-history-section .fxht-milestone.is-active .fxht-content-accent {
    transform: scaleX(1);
}

html[dir="rtl"] .fxht-history-section .fxht-progress-fill {
    transform-origin: right center;
}

html[dir="rtl"] .fxht-history-section .fxht-current-chapter {
    direction: rtl;
}

@media (max-width: 767px) {
    html[dir="rtl"] .fxht-history-section .fxht-wave-svg {
        display: none;
    }

    html[dir="rtl"] .fxht-history-section .fxht-mobile-rail {
        left: 15px;
        right: auto;
    }

    html[dir="rtl"] .fxht-history-section .fxht-milestone,
    html[dir="rtl"] .fxht-history-section .fxht-milestone-top,
    html[dir="rtl"] .fxht-history-section .fxht-milestone-bottom {
        left: auto;
        right: auto;
        grid-template-columns: minmax(0, 1fr) 32px;
        direction: rtl;
    }

    html[dir="rtl"] .fxht-history-section .fxht-node {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        left: auto;
        right: auto;
    }

    html[dir="rtl"] .fxht-history-section .fxht-milestone-content {
        grid-column: 1;
        grid-row: 1;
        left: auto;
        right: auto;
        text-align: right;
        transform: none;
    }
}

@media (max-width: 429px) {
    html[dir="rtl"] .fxht-history-section .fxht-mobile-rail {
        left: 15px;
        right: auto;
    }

    html[dir="rtl"] .fxht-history-section .fxht-milestone,
    html[dir="rtl"] .fxht-history-section .fxht-milestone-top,
    html[dir="rtl"] .fxht-history-section .fxht-milestone-bottom {
        grid-template-columns: minmax(0, 1fr) 29px;
    }
}

/* =========================================================
   FLEETAXIS — ABOUT TESTIMONIALS / RTL
========================================================= */

html[dir="rtl"] .fxt-testimonials .fxt-testimonial-heading {
    text-align: center;
}

html[dir="rtl"] .fxt-testimonials .fxt-testimonial-eyebrow {
    letter-spacing: 0;
}

html[dir="rtl"] .fxt-testimonials .fxt-testimonial-title {
    letter-spacing: 0;
}

html[dir="rtl"] .fxt-testimonials .fxt-testimonial-card {
    direction: rtl;
    text-align: right;
}

/* Keep the animation physically moving from right to left,
   even when the page's reading direction is RTL. */

html[dir="rtl"] .fxt-testimonials .fxt-marquee-track,
html[dir="rtl"] .fxt-testimonials .fxt-marquee-group {
    direction: ltr;
}

html[dir="rtl"] .fxt-testimonials .fxt-card-profile {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .fxt-testimonials .fxt-profile-copy {
    text-align: right;
}

html[dir="rtl"] .fxt-testimonials .fxt-profile-name,
html[dir="rtl"] .fxt-testimonials .fxt-profile-role,
html[dir="rtl"] .fxt-testimonials .fxt-card-quote {
    text-align: right;
}

html[dir="rtl"] .fxt-testimonials .fxt-bottom-label {
    letter-spacing: 0;
}

/* =========================================================
   FLEETAXIS — ABOUT PAGE CTA / RTL
========================================================= */

html[dir="rtl"] .fxab-cta {
    direction: rtl;
}

html[dir="rtl"] .fxab-cta .fxab-cta-content,
html[dir="rtl"] .fxab-cta .fxab-cta-title,
html[dir="rtl"] .fxab-cta .fxab-cta-description,
html[dir="rtl"] .fxab-cta .fxab-cta-eyebrow,
html[dir="rtl"] .fxab-cta .fxab-cta-actions,
html[dir="rtl"] .fxab-cta .fxab-cta-status-row {
    text-align: center;
}

html[dir="rtl"] .fxab-cta .fxab-cta-eyebrow {
    letter-spacing: 0.06em;
}

html[dir="rtl"] .fxab-cta .fxab-cta-title {
    letter-spacing: 0;
}

html[dir="rtl"] .fxab-cta .fxab-cta-metrics {
    direction: rtl;
}

html[dir="rtl"] .fxab-cta .fxab-cta-metric {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .fxab-cta .fxab-cta-metric-copy {
    text-align: right;
}

html[dir="rtl"] .fxab-cta .fxab-cta-button i {
    transform: scaleX(-1);
}

html[dir="rtl"] .fxab-cta .fxab-cta-button:hover i {
    transform: scaleX(-1) translateX(4px);
}

@media (max-width: 767px) {
    html[dir="rtl"] .fxab-cta .fxab-cta-metric {
        justify-content: flex-start;
        text-align: right;
    }

    html[dir="rtl"] .fxab-cta .fxab-cta-metric-copy {
        text-align: right;
    }
}