/*==========================================================================
    STELLA LAB - Right-to-Left stylesheet (Arabic)
    Loaded only when app()->getLocale() is an RTL locale, after style.css.
    Every rule is scoped to [dir="rtl"] so the EN/FR builds are untouched.
==========================================================================*/

/*--------------------------------------
    1. Base direction & typography
--------------------------------------*/
[dir="rtl"] body {
    direction: rtl;
    text-align: right;
    font-family: "Cairo", "Lexend", sans-serif;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] .navbar,
[dir="rtl"] .btn,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] .heading-title,
[dir="rtl"] .heading-subtitle,
[dir="rtl"] .heading-desc {
    font-family: "Cairo", "Lexend", sans-serif;
}

/* Arabic glyphs sit taller than Latin - give lines a little more room */
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] .heading-desc,
[dir="rtl"] .fancybox-desc,
[dir="rtl"] .service-desc,
[dir="rtl"] .post-desc {
    line-height: 1.9;
}

[dir="rtl"] .heading-title,
[dir="rtl"] .pagetitle-heading,
[dir="rtl"] .slide-title {
    line-height: 1.45;
}

/*--------------------------------------
    2. Directional spacing utilities
    (theme defines these with !important)
--------------------------------------*/
[dir="rtl"] .mr-0  { margin-right: 0 !important; margin-left: 0 !important; }
[dir="rtl"] .mr-10 { margin-right: 0 !important; margin-left: 10px !important; }
[dir="rtl"] .mr-20 { margin-right: 0 !important; margin-left: 20px !important; }
[dir="rtl"] .mr-30 { margin-right: 0 !important; margin-left: 30px !important; }
[dir="rtl"] .mr-40 { margin-right: 0 !important; margin-left: 40px !important; }
[dir="rtl"] .mr-50 { margin-right: 0 !important; margin-left: 50px !important; }

[dir="rtl"] .ml-0  { margin-left: 0 !important; margin-right: 0 !important; }
[dir="rtl"] .ml-10 { margin-left: 0 !important; margin-right: 10px !important; }
[dir="rtl"] .ml-20 { margin-left: 0 !important; margin-right: 20px !important; }
[dir="rtl"] .ml-30 { margin-left: 0 !important; margin-right: 30px !important; }
[dir="rtl"] .ml-4  { margin-left: 0 !important; margin-right: 1.5rem !important; }

[dir="rtl"] .pl-15 { padding-left: 0 !important; padding-right: 15px !important; }
[dir="rtl"] .pr-15 { padding-right: 0 !important; padding-left: 15px !important; }

[dir="rtl"] .text-start,
[dir="rtl"] .text-left  { text-align: right !important; }
[dir="rtl"] .text-end,
[dir="rtl"] .text-right { text-align: left !important; }
[dir="rtl"] .text-center { text-align: center !important; }

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

/*--------------------------------------
    3. Header / navigation
--------------------------------------*/
[dir="rtl"] .header-topbar .contact-list li {
    margin-right: 0;
    margin-left: 30px;
}

[dir="rtl"] .header-topbar .contact-list li:last-child {
    margin-left: 0;
}

[dir="rtl"] .header-topbar .contact-list li > i {
    margin-right: 0;
    margin-left: 8px;
}

[dir="rtl"] .header-topbar-links li {
    margin-right: 0;
    margin-left: 20px;
}

[dir="rtl"] .navbar .nav-item {
    margin-right: 0;
    margin-left: 25px;
}

[dir="rtl"] .navbar .nav-item .nav-item-link {
    padding-right: 0;
    padding-left: 15px;
}

[dir="rtl"] .navbar .dropdown-menu {
    right: 0;
    left: auto;
    text-align: right;
}

[dir="rtl"] .navbar .dropdown-menu .nav-item > .nav-item-link {
    padding-right: 0;
    padding-left: 0;
}

[dir="rtl"] .navbar .has-dropdown > .nav-item-link:after {
    margin-right: 6px;
    margin-left: 0;
}

[dir="rtl"] .miniPopup-language-trigger {
    padding: 10px 0 10px 20px;
    border-radius: 10px 0 0 0;
    margin-left: 0;
    margin-right: 40px;
}

[dir="rtl"] .miniPopup-language {
    right: auto;
    left: 0;
    text-align: right;
}

[dir="rtl"] .miniPopup-language li a {
    flex-direction: row;
}

/* Mobile off-canvas menu slides in from the right */
[dir="rtl"] .close-mobile-menu {
    right: auto;
    left: 15px;
}

/*--------------------------------------
    4. Buttons & inline icons
--------------------------------------*/
[dir="rtl"] .btn i,
[dir="rtl"] .btn .icon-arrow-right,
[dir="rtl"] .btn .icon-arrow-long {
    margin-right: 0;
    margin-left: 8px;
}

/* Arrow glyphs point the wrong way once the axis flips */
[dir="rtl"] .btn .icon-arrow-right,
[dir="rtl"] .btn .icon-arrow-long,
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before,
[dir="rtl"] #scrollTopBtn .icon-arrow-long {
    display: inline-block;
    transform: scaleX(-1);
}

[dir="rtl"] .plus-icon {
    margin-right: 0;
    margin-left: 6px;
}

/*--------------------------------------
    5. Breadcrumb
--------------------------------------*/
[dir="rtl"] .breadcrumb {
    padding-right: 0;
}

[dir="rtl"] .breadcrumb-item + .breadcrumb-item {
    padding-right: 0.5rem;
    padding-left: 0;
}

[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    float: right;
    padding-right: 0;
    padding-left: 0.5rem;
}

/*--------------------------------------
    6. Icon + text list components
--------------------------------------*/
[dir="rtl"] .feature-item .feature-icon {
    margin-right: 0;
    margin-left: 30px;
}

[dir="rtl"] .features-list-layout2 .feature-item .feature-icon,
[dir="rtl"] .features-list-layout3 .feature-item .feature-icon {
    margin-right: 0;
    margin-left: 18px;
}

[dir="rtl"] .features-list-layout3 .feature-item .feature-icon {
    margin-left: 10px;
}

[dir="rtl"] .features-list-layout4 {
    padding-right: 0;
}

[dir="rtl"] .contact-phone .contact-icon,
[dir="rtl"] .footer .contact-list li a .contact-icon {
    margin-right: 0;
    margin-left: 15px;
}

[dir="rtl"] .note .note-icon {
    margin-right: 0;
    margin-left: 20px;
}

[dir="rtl"] .cta-layout1 .cta-icon {
    margin-right: 0;
    margin-left: 25px;
}

/*--------------------------------------
    7. Cards, decorations & absolute bits
--------------------------------------*/
[dir="rtl"] .fancybox-layout1 .fancybox-item .fancybox-icon,
[dir="rtl"] .fancybox-layout4 .fancybox-item .fancybox-icon {
    right: auto;
    left: 40px;
}

[dir="rtl"] .fancybox-layout5 .fancybox-item .fancybox-icon,
[dir="rtl"] .fancybox-layout6 .fancybox-item .fancybox-icon {
    right: auto;
    left: 30px;
}

[dir="rtl"] .service-item .service-shape {
    left: auto;
    right: 50px;
}

[dir="rtl"] .banner-layout3 .banner-icon {
    right: auto;
    left: -110px;
}

[dir="rtl"] .post-item .post-meta > * {
    margin-right: 0;
    margin-left: 8px;
    padding-right: 0;
    padding-left: 8px;
}

[dir="rtl"] .post-item .post-meta > *:after {
    right: auto;
    left: -2px;
}

[dir="rtl"] .post-item .post-meta > *:last-child {
    padding-left: 0;
    margin-left: 0;
}

[dir="rtl"] .post-meta-cat a {
    margin-right: 0;
    margin-left: 8px;
}

/*--------------------------------------
    8. Footer
--------------------------------------*/
[dir="rtl"] .footer-widget-nav ul,
[dir="rtl"] .footer .contact-list,
[dir="rtl"] .footer-legal-info,
[dir="rtl"] .footer-copyright-links {
    padding-right: 0;
}

[dir="rtl"] .footer-copyright-links li {
    margin-right: 0;
    margin-left: 25px;
}

[dir="rtl"] .social-icons li {
    margin-right: 0;
    margin-left: 10px;
}

[dir="rtl"] .social-icons li:last-of-type {
    margin-left: 0;
}

/*--------------------------------------
    9. Forms
--------------------------------------*/
[dir="rtl"] .form-control,
[dir="rtl"] .form-group label,
[dir="rtl"] select.form-control {
    text-align: right;
    direction: rtl;
}

/* Phone / email stay left-to-right even inside an RTL page */
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"] {
    direction: ltr;
    text-align: right;
}

[dir="rtl"] .search-popup-form-input {
    text-align: right;
    direction: rtl;
}

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

/*--------------------------------------
    10. Carousels

    slick's JavaScript always runs with `rtl: false` (its default - it does not
    read document.dir), so the track is positioned with left-to-right maths.
    But libraries.css ships `[dir=rtl] .slick-slide { float: right }`, which
    fires as soon as dir="rtl" is on <html>. That mismatch lays the slides out
    right-to-left while the track offsets assume left-to-right, pushing every
    slide outside the visible window - the carousel renders blank.

    Fix: keep the carousel internals left-to-right so the CSS agrees with the
    JS, and flip only the content inside each slide. The `html[dir="rtl"]`
    prefix outranks the vendor's `[dir=rtl]` selector regardless of load order.
--------------------------------------*/
html[dir="rtl"] .slick-slide {
    float: left;
}

[dir="rtl"] .slick-carousel,
[dir="rtl"] .slick-list,
[dir="rtl"] .slick-track {
    direction: ltr;
}

[dir="rtl"] .slick-slide {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .cert-carousel .slick-slide,
[dir="rtl"] .clients .slick-slide {
    text-align: center;
}

[dir="rtl"] .slick-dots {
    padding-right: 0;
    direction: ltr;
}

/*--------------------------------------
    11. Numbers, contact details & latin runs
    Phone numbers, emails and IDs must not be reordered by the RTL algorithm.
--------------------------------------*/
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] a[href*="wa.me"],
[dir="rtl"] .footer-legal-info li,
[dir="rtl"] .counter-number,
[dir="rtl"] .breadcrumb {
    direction: ltr;
    unicode-bidi: embed;
}

[dir="rtl"] .footer-legal-info li,
[dir="rtl"] .footer .contact-list li a {
    text-align: right;
}

[dir="rtl"] .counter-item,
[dir="rtl"] .counter-number {
    text-align: center;
}

/*--------------------------------------
    12. Misc alignment
--------------------------------------*/
[dir="rtl"] .list-unstyled {
    padding-right: 0;
}

[dir="rtl"] .heading-layout1,
[dir="rtl"] .heading-layout2,
[dir="rtl"] .about-text,
[dir="rtl"] .service-body,
[dir="rtl"] .post-body,
[dir="rtl"] .fancybox-body {
    text-align: right;
}

[dir="rtl"] .heading.text-center .heading-title,
[dir="rtl"] .heading-layout2.text-center,
[dir="rtl"] .text-center .heading-title,
[dir="rtl"] .text-center .heading-subtitle,
[dir="rtl"] .brand-slogan {
    text-align: center;
}

[dir="rtl"] .alert {
    text-align: right;
}

[dir="rtl"] .card-header .btn-link {
    text-align: right !important;
}

[dir="rtl"] .card-header .btn-link i {
    margin-right: 0;
    margin-left: 10px;
    transform: scaleX(-1);
    display: inline-block;
}