/**
 * CMS frontend RTL overrides (Arabic / RTL layouts).
 * Loaded only when html[dir="rtl"].
 */

html[dir="rtl"] body {
    font-family: "Cairo", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" 0;
    line-height: 1.8;
    text-align: right;
}

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"] .block__title, html[dir="rtl"] .block__title--big {
    font-family: "Cairo", sans-serif;
    line-height: 1.6;
}

html[dir="rtl"] p, html[dir="rtl"] .block__paragraph, html[dir="rtl"] .block__paragraph--big {
    font-family: "Cairo", sans-serif;
    line-height: 1.8;
}

html[dir="rtl"] .hero {
    background: linear-gradient(to left, rgb(255, 228, 230), rgb(204, 251, 241));
}

/* ---------- Navbar / mobile menu ----------
 * IMPORTANT: do NOT override flex-direction on .hero-nav lists.
 *  - Outer ul.nav.w-100 uses default flex-direction: row.   With dir="rtl" it
 *    lays out logo on the right, hamburger on the left automatically.
 *  - Inner ul.nav--lg-side uses Bootstrap's flex-lg-row-reverse. With dir="rtl",
 *    row-reverse naturally produces the correct RTL order:
 *    Logo (right) | Home | … | Contact | login | CTA (left).
 *  - Bootstrap RTL CSS (loaded in app.blade.php) flips me-*, pe-*, px-*, text-end…
 * We only flip positional / transform / absolute-anchor properties below.
 */

/* Safety: keep the desktop navbar on one line and let the middle flex item shrink
 * (prevents the long Arabic labels from wrapping and overlapping the logo). */
@media (min-width: 992px) {
    html[dir="rtl"] .hero-nav > ul.nav.w-100 {
        flex-wrap: nowrap;
    }

    html[dir="rtl"] .hero-nav > ul.nav.w-100 > li:first-child {
        flex-shrink: 0;
    }

    html[dir="rtl"] #hero-menu {
        min-width: 0;
        flex: 1 1 0%;
    }

    html[dir="rtl"] .hero__menu-content,
    html[dir="rtl"] #hero-menu .nav.nav--lg-side {
        flex-wrap: nowrap;
        transform: none !important;
    }

    html[dir="rtl"] .hero__menu-content > li.flex-grow-1 {
        min-width: 0;
    }
}

/* Mobile slide-in panel: slides in from the right in RTL */
html[dir="rtl"] .ft-menu__slider {
    transform: translateX(100%);
}

html[dir="rtl"] .ft-menu--js-show .ft-menu__slider {
    transform: translateX(0);
}

/* Mobile close button: lives on the LEFT edge in RTL */
html[dir="rtl"] .ft-menu__close-btn {
    right: auto;
    left: 0;
    transform: translateX(-100%);
}

html[dir="rtl"] .ft-menu--js-show .ft-menu__close-btn {
    transform: translateX(0);
}

/* Desktop dropdown is anchored to the RIGHT edge of the trigger in RTL */
@media (min-width: 992px) {
    html[dir="rtl"] .hero-nav__dropdown {
        left: auto;
        right: 0;
        text-align: right;
        padding: 2.3rem 2rem 2rem 3rem;
    }

    html[dir="rtl"] .hero-nav__item--show-dropdown .hero-nav__dropdown {
        padding: 2.3rem 2rem 2rem 3rem;
    }
}

/* Flip the directional dropdown nudges */
html[dir="rtl"] .hero-nav__item--dropdown-left .hero-nav__dropdown {
    transform: translateX(15px) !important;
}

html[dir="rtl"] .hero-nav__item--dropdown-right .hero-nav__dropdown {
    left: 0;
    right: auto;
    transform: translateX(-15px) !important;
}

@media (min-width: 992px) {
    html[dir="rtl"] .hero-nav__item--lg-dropdown-left .hero-nav__dropdown {
        left: auto;
        right: 0;
        transform: translateX(15px) !important;
    }

    html[dir="rtl"] .hero-nav__item--lg-dropdown-right .hero-nav__dropdown {
        left: 0;
        right: auto;
        transform: translateX(-15px) !important;
    }

    html[dir="rtl"] .hero-nav__item--lg-dropdown-left .hero-nav__dropdown::before {
        right: 15%;
        left: auto;
    }

    html[dir="rtl"] .hero-nav__item--lg-dropdown-right .hero-nav__dropdown::before {
        right: auto;
        left: 15%;
    }
}

/* ---------- Hero (home header) ---------- */
html[dir="rtl"] .hero__body {
    text-align: right;
}

html[dir="rtl"] .hero__btns-container {
    margin-left: 0;
    margin-right: 0;
}

html[dir="rtl"] .hero__row {
    flex-direction: row-reverse;
}

html[dir="rtl"] .hero__empty-column {
    order: 2;
}

html[dir="rtl"] .hero__image-column {
    order: 1;
    direction: ltr;
    flex-direction: row;
}

/* ---------- Features (block-1) ---------- */
@media (min-width: 992px) {
    html[dir="rtl"] .block-1 #block__container {
        flex-direction: row-reverse !important;
    }
}

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

html[dir="rtl"] .card-1 .fr-icon {
    margin-right: 0;
    margin-left: auto;
}

/* ---------- Industries + Splide ---------- */
html[dir="rtl"] .block-2 .row.align-items-center {
    flex-direction: row-reverse;
}

html[dir="rtl"] .block-2-card {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .block-2-card .pe-3,
html[dir="rtl"] .block-2-card .pe-lg-4 {
    padding-right: 0 !important;
    padding-left: 1rem !important;
}

@media (min-width: 992px) {
    html[dir="rtl"] .block-2-card .pe-lg-4 {
        padding-left: 1.5rem !important;
    }
}

html[dir="rtl"] .block-2__splide {
    direction: ltr;
}

html[dir="rtl"] .block-2-card {
    direction: rtl;
}

html[dir="rtl"] .block-2__splide-btn {
    transform: rotate(-90deg);
}

@media (min-width: 992px) {
    html[dir="rtl"] .block-2__splide-btn {
        right: auto;
        left: 22%;
    }
}

@media (min-width: 1400px) {
    html[dir="rtl"] .block-2__splide-btn {
        left: 25%;
        right: auto;
    }
}

html[dir="rtl"] .block-2__dots-svg--left {
    transform: translate(15rem, 2rem) rotate(-90deg);
}

html[dir="rtl"] .block-2__dots-svg--right {
    right: auto;
    left: 0;
    transform: translate(-14.5rem, -8rem) rotate(-90deg);
}

/* ---------- Statistics ---------- */
html[dir="rtl"] .block-38,
html[dir="rtl"] .stats {
    text-align: center;
}

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

/* ---------- CTA (block-29) ---------- */
html[dir="rtl"] .block-29 .row {
    flex-direction: row-reverse;
}

html[dir="rtl"] .block-29__title,
html[dir="rtl"] .block-29__paragraph {
    text-align: right;
}

html[dir="rtl"] .block-29 .flex-row-reverse {
    flex-direction: row !important;
}

html[dir="rtl"] .block-29 .bi-arrow-right {
    transform: scaleX(-1);
}

/* ---------- Testimonials ---------- */
html[dir="rtl"] .block-20 .block__title--big,
html[dir="rtl"] .block-20 .block__paragraph--big {
    text-align: center;
}

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

html[dir="rtl"] .testimonial-card-1__paragraph {
    text-align: right;
}

/* ---------- FAQ ---------- */
html[dir="rtl"] .block-39 .content-block {
    text-align: right;
}

/* ---------- Footer ---------- */
html[dir="rtl"] .block-44 .row {
    flex-direction: row-reverse;
}

html[dir="rtl"] .block-44__extra-links {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

html[dir="rtl"] .block-41__copyrights.text-end,
html[dir="rtl"] .block-41__copyrights[class*='text-xxl-end'] {
    text-align: center !important;
}

@media (min-width: 768px) {
    html[dir="rtl"] .block-41__copyrights {
        text-align: left !important;
    }
}

/* ---------- Contact (block-27) ----------
 * LTR: image left (block-27__row), form right (flex-row-reverse).
 * RTL: dir="rtl" places the image on the right; keep flex-row-reverse so the
 * form and contact details sit on the left (do NOT undo to flex-direction: row).
 */
@media (min-width: 992px) {
    html[dir="rtl"] .block-27__row {
        flex-direction: row;
        justify-content: flex-start;
    }
}

html[dir="rtl"] .block-27 .text-center,
html[dir="rtl"] .block-27 .contact-form.text-center {
    text-align: right !important;
}

html[dir="rtl"] .block-27 .contact-form__title,
html[dir="rtl"] .block-27 .contact-form__paragraph,
html[dir="rtl"] .block-27 h4 {
    text-align: right;
}

html[dir="rtl"] .contact-form,
html[dir="rtl"] .contact-form__input {
    text-align: right;
}

html[dir="rtl"] .contact-form__input::placeholder {
    text-align: right;
}

html[dir="rtl"] .non-bullet-list {
    margin-inline-start: 0;
    padding-inline-start: 0;
    text-align: right;
}

html[dir="rtl"] .non-bullet-list li i {
    margin-inline-end: 0.35rem;
}

/* ---------- Blog / article ---------- */
html[dir="rtl"] .article-block,
html[dir="rtl"] .article {
    text-align: right;
}

html[dir="rtl"] .article-block__info {
    direction: rtl;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 0.35rem;
}

html[dir="rtl"] .card-body .d-flex.justify-content-between {
    flex-direction: row-reverse;
}

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