/* ==========================================================================
   RTL / Arabic overrides for the Trnspot theme
   Loaded only when the active locale is Arabic (dir="rtl").
   ========================================================================== */

body,
.trnspot-font,
h1, h2, h3, h4, h5, h6,
p, a, span, li, input, textarea, select, button,
.sec-title__title,
.sec-title__tagline h4 {
    font-family: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
}

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

/* Generic alignment */
html[dir="rtl"] .text-left { text-align: right !important; }
html[dir="rtl"] .text-right { text-align: left !important; }

/* Float helpers used across the theme */
html[dir="rtl"] .float-left,
html[dir="rtl"] .pull-left { float: right !important; }
html[dir="rtl"] .float-right,
html[dir="rtl"] .pull-right { float: left !important; }

/* Lists */
html[dir="rtl"] ul { padding-right: 0; }

/* ---- Header / Main menu ---------------------------------------------------- */
/* Logo sits on the right in RTL, so mirror the decorative base-colour block that
   normally extends to the far left — otherwise it paints over (hides) the menu. */
html[dir="rtl"] .main-header-one__bottom-left::before { left: 150px; right: -999999px; }
html[dir="rtl"] .logo-one { padding-right: 0; padding-left: 100px; }
html[dir="rtl"] .logo-one::before,
html[dir="rtl"] .logo-one::after { clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); }

/* Menu item spacing (mirror the left margin used in LTR) */
html[dir="rtl"] .main-menu .main-menu__list > li + li,
html[dir="rtl"] .stricky-header .main-menu__list > li + li { margin-left: 0; margin-right: 50px; }

/* Dropdowns open to the right and the caret flips to the left */
html[dir="rtl"] .main-menu .main-menu__list > li > ul,
html[dir="rtl"] .stricky-header .main-menu__list > li > ul { left: auto; right: 0; text-align: right; }
html[dir="rtl"] .main-menu .main-menu__list > li.dropdown > a { padding-right: 0; padding-left: 16px; }
html[dir="rtl"] .main-menu .main-menu__list > li.dropdown > a:after { right: auto; left: 0; }

/* Language switch pill */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

/* ---- Buttons -------------------------------------------------------------- */
html[dir="rtl"] .thm-btn i,
html[dir="rtl"] .thm-btn .icon-next { transform: scaleX(-1); }

/* ---- Sections: keep icon/text order sensible ------------------------------ */
html[dir="rtl"] .sec-title:not(.center):not(.text-center) {
    text-align: right;
}
html[dir="rtl"] .sec-title:not(.center):not(.text-center) .sec-title__tagline {
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
}
html[dir="rtl"] .sec-title__title,
html[dir="rtl"] .sec-title__title .split-line {
    text-align: right !important;
}
html[dir="rtl"] .sec-title__tagline .text-box {
    flex-shrink: 0;
}
html[dir="rtl"] .sec-title__tagline .right-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    line-height: 1;
}
html[dir="rtl"] .sec-title__tagline .right-icon span::before {
    margin-left: 0;
    margin-right: 6px;
    top: 0;
    transform: rotate(-90deg);
}
html[dir="rtl"] .sec-title__tagline .left-icon span::before {
    transform: rotate(90deg);
}
/* float-bob-x animations move +X which breaks plane direction in RTL — mirror them */
@keyframes float-bob-x3-rtl {
    0%   { transform: translateX(15px); }
    50%  { transform: translateX(5px); }
    100% { transform: translateX(15px); }
}
html[dir="rtl"] .sec-title__tagline .left-icon.float-bob-x3 {
    animation-name: float-bob-x3-rtl;
}
/* float-bob-x4 moves +X which slides the icon into the text in RTL — mirror it */
@keyframes float-bob-x4-rtl {
    0%   { transform: translateX(-15px); }
    50%  { transform: translateX(-5px); }
    100% { transform: translateX(-15px); }
}
html[dir="rtl"] .sec-title__tagline .right-icon.float-bob-x4 {
    animation-name: float-bob-x4-rtl;
}

/* Process step connectors: steps run left→right on screen (1→2→3→4) — same plane
   direction as English; isolate from RTL so rotate/animation are not flipped. */
html[dir="rtl"] .working-process-one__single .plane-icon {
    direction: ltr;
}
html[dir="rtl"] .working-process-one__single .plane-icon span:before {
    transform: rotate(90deg);
}
html[dir="rtl"] .working-process-one__single .plane-icon.float-bob-x3 {
    animation-name: float-bob-x3;
}
html[dir="rtl"] .list-unstyled li,
html[dir="rtl"] .about-one__list li,
html[dir="rtl"] .why-choose-one__list li { padding-left: 0; padding-right: 30px; }
html[dir="rtl"] .about-one__list li span,
html[dir="rtl"] .why-choose-one__list li span { left: auto; right: 0; }

/* ---- Cards / content boxes ------------------------------------------------ */
html[dir="rtl"] .service-one__single-content,
html[dir="rtl"] .team-one__single-content,
html[dir="rtl"] .testimonial-one__single,
html[dir="rtl"] .faq-one__content,
html[dir="rtl"] .blog-one__single-content { text-align: right; }

/* ---- Footer --------------------------------------------------------------- */
html[dir="rtl"] .footer-widget__services-list li a span,
html[dir="rtl"] .footer-widget__services-list li a .icon-right-chevron { transform: scaleX(-1); margin-left: 6px; margin-right: 0; }
/* With direction:rtl the flex row already places the icon on the right; keep the
   natural row order (row-reverse would double-flip it back to the left). */
html[dir="rtl"] .footer-widget__contact-list li { text-align: right; }
html[dir="rtl"] .footer-widget__contact-list li .text-box { margin-left: 0; margin-right: 12px; }

/* ---- Forms ---------------------------------------------------------------- */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select { text-align: right; }

/* Phone / numbers stay LTR for readability */
html[dir="rtl"] .keep-ltr,
html[dir="rtl"] a[href^="tel:"] { direction: ltr; display: inline-block; }

/* ---- Mobile nav ----------------------------------------------------------- */
html[dir="rtl"] .mobile-nav__content { text-align: right; }
html[dir="rtl"] .mobile-nav__content .main-menu__list ul { padding-right: 20px; }

/* ---- Breadcrumb / page banner --------------------------------------------- */
html[dir="rtl"] .page-header__inner { text-align: center; }

/* ---- Misc utility spacing flips ------------------------------------------- */
html[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }
html[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; }

/* ---- Owl Carousel (force LTR engine; Arabic text stays RTL inside slides) ---- */
html[dir="rtl"] .services-one__carousel.owl-carousel,
html[dir="rtl"] .testimonials-one__carousel.owl-carousel {
    direction: ltr;
}

html[dir="rtl"] .services-one__carousel .owl-stage-outer,
html[dir="rtl"] .testimonials-one__carousel .owl-stage-outer,
html[dir="rtl"] .services-one__carousel .owl-stage,
html[dir="rtl"] .testimonials-one__carousel .owl-stage {
    direction: ltr;
}

html[dir="rtl"] .services-one__carousel.owl-theme .owl-nav,
html[dir="rtl"] .testimonials-one__carousel.owl-theme .owl-nav {
    direction: ltr;
    left: auto;
    right: -5px;
}

html[dir="rtl"] .services-one__carousel .owl-nav button.owl-prev,
html[dir="rtl"] .services-one__carousel .owl-nav button.owl-next,
html[dir="rtl"] .testimonials-one__carousel .owl-nav button.owl-prev,
html[dir="rtl"] .testimonials-one__carousel .owl-nav button.owl-next {
    direction: ltr;
}

/* Card copy inside slides remains RTL */
html[dir="rtl"] .services-one__carousel .services-one__single-content,
html[dir="rtl"] .testimonials-one__carousel .testimonials-one__single,
html[dir="rtl"] .testimonials-one__carousel .testimonials-one__single-text {
    direction: rtl;
    text-align: right;
}