/* ============================================================
   rtl.css — RTL overrides for custom.css (Arabic support)
   Applied only when <html dir="rtl"> is set.
   ============================================================ */

/* ----------------------------------------
   GSAP SplitText animation fix
   SplitText wraps every character in its own <span class="char">.
   With dir="rtl", inline spans flow right-to-left, making character
   order appear reversed.  Force ltr on the element so char spans
   always flow L→R (matches the order SplitText creates them).
   When you replace the English text with Arabic, use a word/line
   level animation class instead of text-anime-style-* for that element.
   ---------------------------------------- */
[dir="rtl"] .text-anime-style-1,
[dir="rtl"] .text-anime-style-2,
[dir="rtl"] .text-anime-style-3 {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ----------------------------------------
   Typography — Arabic font
   ---------------------------------------- */
[dir="rtl"],
[dir="rtl"] body {
    font-family: 'Cairo', sans-serif;
}

/* ----------------------------------------
   Bootstrap 5 RTL overrides
   (Bootstrap LTR is always loaded; these selectors flip it for RTL)
   ---------------------------------------- */

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

/* Float */
[dir="rtl"] .float-start { float: right !important; }
[dir="rtl"] .float-end   { float: left  !important; }

/* Margin logical */
[dir="rtl"] .ms-auto { margin-right: auto   !important; margin-left: 0      !important; }
[dir="rtl"] .me-auto { margin-left:  auto   !important; margin-right: 0     !important; }
[dir="rtl"] .ms-1    { margin-right: .25rem !important; margin-left: 0      !important; }
[dir="rtl"] .ms-2    { margin-right: .5rem  !important; margin-left: 0      !important; }
[dir="rtl"] .ms-3    { margin-right: 1rem   !important; margin-left: 0      !important; }
[dir="rtl"] .ms-4    { margin-right: 1.5rem !important; margin-left: 0      !important; }
[dir="rtl"] .ms-5    { margin-right: 3rem   !important; margin-left: 0      !important; }
[dir="rtl"] .me-1    { margin-left:  .25rem !important; margin-right: 0     !important; }
[dir="rtl"] .me-2    { margin-left:  .5rem  !important; margin-right: 0     !important; }
[dir="rtl"] .me-3    { margin-left:  1rem   !important; margin-right: 0     !important; }
[dir="rtl"] .me-4    { margin-left:  1.5rem !important; margin-right: 0     !important; }
[dir="rtl"] .me-5    { margin-left:  3rem   !important; margin-right: 0     !important; }

/* Padding logical */
[dir="rtl"] .ps-1 { padding-right: .25rem !important; padding-left: 0 !important; }
[dir="rtl"] .ps-2 { padding-right: .5rem  !important; padding-left: 0 !important; }
[dir="rtl"] .ps-3 { padding-right: 1rem   !important; padding-left: 0 !important; }
[dir="rtl"] .ps-4 { padding-right: 1.5rem !important; padding-left: 0 !important; }
[dir="rtl"] .ps-5 { padding-right: 3rem   !important; padding-left: 0 !important; }
[dir="rtl"] .pe-1 { padding-left:  .25rem !important; padding-right: 0 !important; }
[dir="rtl"] .pe-2 { padding-left:  .5rem  !important; padding-right: 0 !important; }
[dir="rtl"] .pe-3 { padding-left:  1rem   !important; padding-right: 0 !important; }
[dir="rtl"] .pe-4 { padding-left:  1.5rem !important; padding-right: 0 !important; }
[dir="rtl"] .pe-5 { padding-left:  3rem   !important; padding-right: 0 !important; }

/* Border logical */
[dir="rtl"] .border-start { border-right: 1px solid !important; border-left: none !important; }
[dir="rtl"] .border-end   { border-left:  1px solid !important; border-right: none !important; }

/* Navbar */
[dir="rtl"] .navbar-nav    { padding-right: 0; }
[dir="rtl"] .navbar-brand  { margin-right: 0; margin-left: 1rem; }
[dir="rtl"] .dropdown-menu { right: 0; left: auto; text-align: right; }

/* ----------------------------------------
   Buttons — .btn-default
   Swap padding side and flip arrow pseudo-el
   ---------------------------------------- */
[dir="rtl"] .btn-default {
    padding: 18px 24px 18px 55px;
}

[dir="rtl"] .btn-default::before {
    right: auto;
    left: 7px;
}

[dir="rtl"] .btn-default::after {
    right: auto;
    left: 0;
}

[dir="rtl"] .btn-default:hover::after {
    right: 0;
    left: auto;
    width: 100%;
}

/* ----------------------------------------
   Readmore / arrow links
   ---------------------------------------- */
[dir="rtl"] .readmore-btn {
    padding-right: 0;
    padding-left: 28px;
}

[dir="rtl"] .readmore-btn::before,
[dir="rtl"] .readmore-btn::after {
    right: auto;
    left: 0;
}

/* ----------------------------------------
   Navbar — flip submenu open direction
   ---------------------------------------- */
[dir="rtl"] .main-menu .navbar-nav {
    padding-right: 0;
}

[dir="rtl"] .navbar-nav .submenu > ul {
    left: auto;
    right: 0;
    text-align: right;
}

/* Nested submenu opens to the left in RTL */
[dir="rtl"] .navbar-nav .submenu .submenu > ul {
    left: auto;
    right: 100%;
}

/* ----------------------------------------
   Header actions spacing
   ---------------------------------------- */
[dir="rtl"] .header-actions {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .header-btn {
    margin-left: 0;
    margin-right: 15px;
}

/* ----------------------------------------
   Section titles / kickers with left border
   ---------------------------------------- */
[dir="rtl"] .section-title,
[dir="rtl"] .section-kicker {
    text-align: right;
}

[dir="rtl"] .section-title::before,
[dir="rtl"] .section-kicker::before {
    left: auto;
    right: 0;
}

/* ----------------------------------------
   Pseudo-element decorators (left-side bars)
   Commonly used on headings and list items
   ---------------------------------------- */
[dir="rtl"] [class*="-content"] h2::before,
[dir="rtl"] [class*="-content"] h3::before,
[dir="rtl"] [class*="-box"] h3::before {
    left: auto;
    right: 0;
    padding-left: 0;
    padding-right: 30px;
}

/* Left-padded items with a left-edge decoration */
[dir="rtl"] .about-content,
[dir="rtl"] .service-content,
[dir="rtl"] .feature-content {
    padding-left: 0;
    padding-right: 30px;
}

[dir="rtl"] .about-content::before,
[dir="rtl"] .service-content::before,
[dir="rtl"] .feature-content::before {
    left: auto;
    right: 0;
}

/* ----------------------------------------
   Icon spacing (icon + text combos)
   ---------------------------------------- */
[dir="rtl"] .icon-box,
[dir="rtl"] .feature-icon {
    margin-right: 0;
    margin-left: 8px;
}

/* ----------------------------------------
   Pagination — float direction
   ---------------------------------------- */
[dir="rtl"] .pagination {
    float: left;
}

/* ----------------------------------------
   Swiper / Slider navigation
   ---------------------------------------- */
[dir="rtl"] .swiper-button-next,
[dir="rtl"] .swiper-button-prev {
    transform: scaleX(-1);
}

/* ----------------------------------------
   Counter / stat items
   ---------------------------------------- */
[dir="rtl"] .counter-item,
[dir="rtl"] .funfact-item {
    text-align: right;
}

/* ----------------------------------------
   Search modal
   ---------------------------------------- */
[dir="rtl"] .site-search-header {
    text-align: right;
}

[dir="rtl"] .site-search-input {
    text-align: right;
    padding-right: 20px;
    padding-left: 60px;
}

[dir="rtl"] .site-search-input-wrap .icon-button {
    right: auto;
    left: 0;
}

[dir="rtl"] .site-search-keywords {
    justify-content: flex-end;
}

/* ----------------------------------------
   Testimonial / blog card text alignment
   ---------------------------------------- */
[dir="rtl"] .testimonial-content,
[dir="rtl"] .blog-content,
[dir="rtl"] .team-content,
[dir="rtl"] .pricing-content {
    text-align: right;
}

/* ----------------------------------------
   Footer
   ---------------------------------------- */
[dir="rtl"] .footer-widget {
    text-align: right;
}

[dir="rtl"] .footer-widget ul li a::before {
    left: auto;
    right: 0;
    margin-right: 0;
    margin-left: 8px;
}

[dir="rtl"] .footer-menu li {
    margin-right: 0;
    margin-left: 20px;
}

/* ----------------------------------------
   Form inputs
   ---------------------------------------- */
[dir="rtl"] .form-control,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
    text-align: right;
}

/* ----------------------------------------
   sv-button — flip fill-sweep direction
   (::before bar is centred, so no change needed)
   ---------------------------------------- */
[dir="rtl"] .sv-button::after {
    right: auto;
    left: 0;
    width: 0;
}

[dir="rtl"] .sv-button:hover::after,
[dir="rtl"] .sv-button:focus::after {
    left: auto;
    right: 0;
    width: 100%;
}

/* ----------------------------------------
   Absolute-positioned decorative elements
   that use left/right coordinates
   ---------------------------------------- */
[dir="rtl"] .sv-modal-content::before {
    right: auto;
    left: -5%;
}

/* ----------------------------------------
   Sticky scrolled header — RTL adjustments
   ---------------------------------------- */
[dir="rtl"] header.main-header .header-sticky.scrolled {
    border-radius: 0 0 20px 20px; /* symmetric — same in RTL */
}

[dir="rtl"] header.main-header .header-sticky.scrolled .sv-button::after {
    right: auto;
    left: 0;
    width: 0;
}

[dir="rtl"] header.main-header .header-sticky.scrolled .sv-button:hover::after,
[dir="rtl"] header.main-header .header-sticky.scrolled .sv-button:focus::after {
    left: auto;
    right: 0;
    width: 100%;
}