body[dir="rtl"] * {
    font-family: "Almarai", sans-serif !important;
    text-transform: capitalize;
}

body[dir="rtl"] a[href^="mailto:"],
body[dir="rtl"] a[href^="mailto:"] * {
    text-transform: none;
}

/* emails are lowercase: keep the typed value and the placeholder as they are */
body[dir="rtl"] input[type="email"],
body[dir="rtl"] input[type="email"]::placeholder {
    text-transform: none;
}

    body[dir="rtl"] input {
        text-transform: none;
    }

    body[dir="rtl"] .fa,
    body[dir="rtl"] .fas,
    body[dir="rtl"] .far,
    body[dir="rtl"] .fa-solid,
    body[dir="rtl"] .fa-regular,
    body[dir="rtl"] .fa-classic {
        font-family: "Font Awesome 6 Free" !important;
    }

    body[dir="rtl"] .fab,
    body[dir="rtl"] .fa-brands {
        font-family: "Font Awesome 6 Brands" !important;
    }
    /* ==========================================================================
   1. HEADER, MENUS & SEARCH
   ========================================================================== */
    /* FontAwesome chevrons point the other way in RTL */
    body[dir="rtl"] svg[class*="fa-chevron-"],
    body[dir="rtl"] i.fa-chevron-left,
    body[dir="rtl"] i.fa-chevron-right {
        transform: scaleX(-1);
    }

    body[dir="rtl"] .instructor-bio-toggle.expanded svg[class*="fa-chevron-"] {
        transform: scaleX(-1) rotate(180deg);
    }

    body[dir="rtl"] .cart-certs-toggle.is-open .cart-certs-chevron {
        transform: scaleX(-1) rotate(180deg);
    }

    body[dir="rtl"] .form-select {
        background-position: right .75rem center;
    }

    body[dir="rtl"] .form-select {
        background-position: left .75rem center;
    }

    body[dir="rtl"] .pio-signup-form .form-floating > label {
        left: unset;
    }

    body[dir="rtl"] .pio-signup-form .btn-showPassword {
        right: unset;
        left: 0;
    }

    body[dir="rtl"] .phone-code-input > span {
        right: 10px;
        left: unset;
    }

    body[dir="rtl"] .phone-code-input > input {
        padding-left: unset !important;
        padding-right: 60px !important;
    }

    body[dir="rtl"] .phone-code-input > input,
    body[dir="rtl"] .pio-signup-form .form-control {
        direction: rtl;
    }

    body[dir="rtl"] .pio-signup-form input:not([type='checkbox']),
    body[dir="rtl"] .pio-signup-form select {
        padding: 0.5rem 0.75rem 0.5rem 1.8rem;
    }
    /* validated select: chevron + validation icon positions */
    body[dir="rtl"] .form-select.is-valid:not([multiple]):not([size]),
    body[dir="rtl"] .form-select.is-valid:not([multiple])[size="1"],
    body[dir="rtl"] .was-validated .form-select:valid:not([multiple]):not([size]),
    body[dir="rtl"] .was-validated .form-select:valid:not([multiple])[size="1"],
    body[dir="rtl"] .form-select.is-invalid:not([multiple]):not([size]),
    body[dir="rtl"] .form-select.is-invalid:not([multiple])[size="1"],
    body[dir="rtl"] .was-validated .form-select:invalid:not([multiple]):not([size]),
    body[dir="rtl"] .was-validated .form-select:invalid:not([multiple])[size="1"] {
        padding-right: 10px;
        background-position: left .75rem center, center left 2.25rem;
    }
    /* validation icon: every field except password */
    body[dir="rtl"] .pio-signup-form .form-control.is-invalid:not(.password),
    body[dir="rtl"] .pio-signup-form.was-validated .form-control:invalid:not(.password),
    body[dir="rtl"] .pio-signup-form .form-control.is-valid:not(.password),
    body[dir="rtl"] .pio-signup-form.was-validated .form-control:valid:not(.password) {
        background-position: left calc(.375em + .1875rem) center;
    }
    /* validation icon: password field (leaves room for the eye button) */
    body[dir="rtl"] .pio-signup-form .password.form-control.is-invalid,
    body[dir="rtl"] .pio-signup-form.was-validated .password.form-control:invalid,
    body[dir="rtl"] .pio-signup-form .password.form-control.is-valid,
    body[dir="rtl"] .pio-signup-form.was-validated .password.form-control:valid {
        background-position: left calc(2rem + .1875rem) center;
    }
    /* NOTE: the 2nd and 4th selectors here are NOT rtl-scoped (they apply in
   both directions). Kept exactly as written to preserve behavior. */
    body[dir="rtl"] .form-control.is-invalid, .was-validated .form-control:invalid,
    body[dir="rtl"] .form-control.is-valid, .was-validated .form-control:valid {
        padding-right: 10px;
    }

    [dir="rtl"] .popover-custom {
        right: 305px;
        left: unset;
    }

    body[dir="rtl"] .country-select svg {
        top: 50%;
        right: unset;
        left: 15px;
        transform: translateY(-50%) !important;
        pointer-events: none;
    }
    /* ==========================================================================
   4. PRODUCT PAGES & MODE SWITCH (Live / Recorded)
   ========================================================================== */
    /* NOTE: .login-type-toggle here is NOT rtl-scoped (applies in both
   directions). Kept exactly as written to preserve behavior. */
    body[dir="rtl"] .toggle-container, .login-type-toggle {
        width: 140px;
    }

    [dir="rtl"] .toggle-container.interactive .toggle-highlight {
        left: unset;
        right: 0;
    }

    [dir="rtl"] .toggle-container.recorded .toggle-highlight {
        left: unset;
        right: 52%;
    }

    body[dir="rtl"] .mode-switch .active-frame {
        transition: inset-inline-end 0.4s ease-in-out;
    }
    /* active frame position per mode */
    body[dir="rtl"] .mode-switch.recorded .active-frame {
        inset-inline-end: var(-\-toggle-space);
    }

    body[dir="rtl"] .mode-switch.interactive .active-frame {
        inset-inline-end: calc( 50% - var(-\-toggle-space) );
    }

    body[dir="rtl"] .mode-switch.mode-switch--labelled.interactive .active-frame {
        inset-inline-end: 50%;
    }

    body[dir="rtl"] .interactive .mode-option:not(.active) {
        color: var(-\-pio-primary-color);
    }

    body[dir="rtl"] .recorded .mode-option:not(.active) {
        color: var(-\-pio-blue-color);
    }
    /* optional-certificate stamp: mirrored + Arabic artwork */
    body[dir="rtl"] .certificate.optional .img-container::after {
        left: unset;
        right: -4px;
        background-image: url(../../assets/optionalCertificate-ar.svg);
    }
    /* objective-list bullets */
    body[dir="rtl"] .alternating-colors li::before {
        left: unset;
        right: -17px;
    }

    body[dir="rtl"] .bento-spinner .spinner {
        width: 36px;
        height: 36px;
        border: 3px solid #e9ecef;
        border-top-color: white;
    }
    /* ==========================================================================
   5. CARDS, FILTERS & COMPONENTS
   ========================================================================== */
    body[dir="rtl"] .go-corner {
        left: 0;
        right: unset;
        border-radius: 0px 4px 32px 0px;
    }

    body[dir="rtl"] .go-arrow {
        margin-right: 2px;
    }

    body[dir="rtl"] .card1::before {
        left: -16px;
        right: unset;
    }

    body[dir="rtl"] .filtersChosed {
        padding-inline-start: 25px;
        padding-inline-end: 10px;
    }

    body[dir="rtl"] .filter-dropdown-container {
        left: unset;
        right: 0;
    }
    /* keen slider arrows (base; widened again at >= 992px below) */
    body[dir="rtl"] .keen-slider-buttons {
        padding-left: unset;
        padding-right: 2.5rem;
    }
    /* ==========================================================================
   6. HOME HERO SCENE (space animation)
   Transforms don't flip with direction, so each layer is mirrored by hand.
   ========================================================================== */
    /* earth exits downward at phase 3 (section transition) */
    body[dir="rtl"] .hero-section-dark[data-animation-phase="3"] .hero-earth {
        transform: translate(0, 100vh);
    }

    body[dir="rtl"] .hero-moon {
        transform: scaleX(-1);
    }

    body[dir="rtl"] .hero-weird-planet {
        transition: transform 1s ease-in-out, opacity 1s ease-in-out;
        /* keep the parallax drift working in RTL */
        transform: translate(0, calc(var(-\-planet-parallax, 0e0px) + var(-\-hero-wiggle, 0e0px) * -0.3)) scaleX(1);
    }
    /* weird planet exits at phase 3 */
    body[dir="rtl"] .hero-section-dark[data-animation-phase="3"] .hero-weird-planet {
        transform: translate(0, 100vh) scaleX(1);
    }

    body[dir="rtl"] .hero-spaceman {
        transform: scaleX(1);
    }

    body[dir="rtl"] .hero-spaceman-shadow {
        transform: translateX(-20%);
    }

    body[dir="rtl"] .hero-overlay {
        background: linear-gradient( 270deg, rgba(7, 11, 26, 0.82) 0%, rgba(7, 11, 26, 0.55) 40%, rgba(7, 11, 26, 0.10) 70%, transparent 100% );
    }
    /* ==========================================================================
   7. RESPONSIVE RTL OVERRIDES (matches the ladder in responsive.css)
   ========================================================================== */
    /* ---------- >= 576px ---------- */
    @media screen and (min-width: 576px) {
        /* NOTE: two rules on purpose - the cascade keeps the SECOND one
       (0.3rem). The 7rem rule is a leftover; kept for identical behavior. */
        body[dir="rtl"] .padding-subject-courses {
            padding-right: 7rem;
        }

        body[dir="rtl"] .padding-subject-courses {
            padding-left: unset;
            padding-right: 0.3rem;
        }
    }
    /* ---------- >= 768px ---------- */
    @media screen and (min-width: 768px) {
        body[dir="rtl"] .pio-b2b-header {
            clip-path: polygon(0% 0, 100% 0, 100% 80%, 0% 100%);
        }

        body[dir="rtl"] .inPerson-section-content {
            left: unset;
            right: 0;
        }
    }
    /* ---------- >= 992px ---------- */
    @media screen and (min-width: 992px) {
        body[dir="rtl"] .keen-slider-buttons {
            padding-left: unset;
            padding-right: 6rem;
        }

        body[dir="rtl"] .padding-subject-courses {
            padding-left: unset;
            padding-right: 1.5rem;
        }
    }
    /* ==========================================================================
   Mirrored hero photo
   ==========================================================================
   .pio-background-img paints its photo with `background: url(...)`, and a
   background-image cannot be transformed on its own. So the BOX is mirrored
   and everything drawn on top of it is mirrored back - the net effect is that
   only the photo flips.

   Both counter-flips are needed:
     > *       the content (headings, buttons) would otherwise read backwards
     ::before  the overlay gradient is directional; flipping it back keeps the
               dark side under the text in both languages

   Each counter-flip creates a containing block for its subtree, so a
   position:fixed descendant of the hero would anchor to the hero instead of
   the viewport. There are none today - worth checking if one is ever added.
   ========================================================================== */
    body[dir="rtl"] .pio-background-img {
        transform: scaleX(-1);
    }

        body[dir="rtl"] .pio-background-img > *,
        body[dir="rtl"] .pio-background-img::before {
            transform: scaleX(-1);
        }
        /* ── the counter-flip has one blind spot: children that carry their OWN transform ──

   The Live/Recorded toggle wrapper is `.translate-middle-y`, and bootstrap defines
   that as `transform: translateY(-50%) !important`. Same property, and !important,
   so it beats the counter-flip above outright - that wrapper is the one direct child
   of the hero that never gets un-mirrored, and every label inside it renders
   backwards. "Live" came out as "eviL".

   Restating BOTH transforms in one declaration is the fix; a transform is a single
   property, so the counter-flip cannot be added separately - it has to be part of
   the same value. !important to match what it is overriding.

   Order matters: translateY first, then scaleX. Transforms apply left to right, and
   scaling first would flip the axis the translate then moves along. */
        body[dir="rtl"] .pio-background-img > .translate-middle-y {
            transform: translateY(-50%) scaleX(-1) !important;
        }
    /* The Back arrow in the payment step points at the inline start, which is the
   right-hand side in Arabic. It is a hand-inlined FontAwesome path rather than
   an <i class="fa-*">, so it has no RTL behaviour of its own to inherit. */
    body[dir="rtl"] .pay-back-arrow {
        transform: scaleX(-1);
    }

    @media (min-width: 992px) {
        body[dir="rtl"] .header-hero .mode-switch {
            transform: translateX(-6rem);
        }

        body[dir="rtl"] .pio-hero-banner-img {
            min-height: var(-\-pio-hero-h);
        }
    }
    /* ==========================================================================
   INDEX HERO - PHOTO BANNER (mirrored)
   ==========================================================================
   The <img> carries no children, so the element itself can be flipped with no
   counter-flip anywhere. The photo's flat area then lands on the inline-start
   side, under the copy, in both languages.
   ========================================================================== */
    body[dir="rtl"] .pio-hero-banner-img {
        transform: scaleX(-1);
        object-fit: cover;
        object-position: 100% 100%;
    }