/* ================================================================
   LTR OVERRIDES - Target Line WordPress Theme
   Loaded on English (LTR) pages to reverse RTL-first rules.
   Scoped under [dir="ltr"] to avoid affecting Arabic pages.
   Mirrors directional properties from theme-custom.css.
================================================================ */


/* =============================================================
   1. FONT FAMILY & BASE DIRECTION
   Switch from Tajawal (Arabic-optimized) to Inter (Latin-optimized)
   with Tajawal as fallback for any Arabic text on English pages.
============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

[dir="ltr"] {
    --tg-body-font-family: "Inter", "Tajawal", sans-serif;
    --tg-heading-font-family: "Inter", "Tajawal", sans-serif;
}

[dir="ltr"] body,
[dir="ltr"] h1,
[dir="ltr"] h2,
[dir="ltr"] h3,
[dir="ltr"] h4,
[dir="ltr"] h5,
[dir="ltr"] h6,
[dir="ltr"] p,
[dir="ltr"] span,
[dir="ltr"] a,
[dir="ltr"] li,
[dir="ltr"] td,
[dir="ltr"] th,
[dir="ltr"] label,
[dir="ltr"] input,
[dir="ltr"] textarea,
[dir="ltr"] select,
[dir="ltr"] button,
[dir="ltr"] .title,
[dir="ltr"] .sub-title,
[dir="ltr"] .tg-btn,
[dir="ltr"] .navigation li a,
[dir="ltr"] .sub-menu li a,
[dir="ltr"] .footer__widget-title,
[dir="ltr"] .section__title .sub-title,
[dir="ltr"] .section__title .title,
[dir="ltr"] .accordion-button,
[dir="ltr"] .odometer,
[dir="ltr"] .breadcrumb__content .title,
[dir="ltr"] .tl-service-card,
[dir="ltr"] .tl-blog-card,
[dir="ltr"] .tl-feature-card,
[dir="ltr"] .tl-mv-card,
[dir="ltr"] .tl-sd-block,
[dir="ltr"] .tl-article,
[dir="ltr"] .tl-sidebar__widget,
[dir="ltr"] .tl-search-item,
[dir="ltr"] .tl-author-box {
    font-family: "Inter", "Tajawal", sans-serif !important;
}


/* =============================================================
   2. TEXT ALIGNMENT
   Override RTL text-align: right to left for LTR pages.
============================================================= */

[dir="ltr"] .breadcrumb__content {
    text-align: left !important;
}

[dir="ltr"] .tl-hero__content {
    text-align: left !important;
}

/* Mobile hero alignment */
@media (max-width: 991px) {
    [dir="ltr"] .tl-hero__content {
        text-align: left !important;
    }

    [dir="ltr"] .tl-hero__btns {
        align-items: flex-start !important;
    }

    [dir="ltr"] .about__list-item-two {
        text-align: left !important;
    }
}

/* Post navigation: swap prev/next alignment */
[dir="ltr"] .tl-post-nav__next {
    text-align: right !important;
}


/* =============================================================
   3. DIRECTIONAL MARGINS
   Mirror margin-right <-> margin-left where used directionally.
============================================================= */

/* Header: dropdown chevron before nav item */
[dir="ltr"] .tgmenu__main-menu .navigation .menu-item-has-children > a::before {
    margin-right: 0 !important;
    margin-left: 6px !important;
}

/* Hero stats: push to left side in LTR */
[dir="ltr"] .tl-hero__stats {
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* Language switcher: flip margin */
[dir="ltr"] .language-switcher {
    margin-left: 0 !important;
    margin-right: 15px !important;
}

/* Blog card meta icon spacing */
[dir="ltr"] .tl-blog-card__meta i {
    margin-left: 0 !important;
    margin-right: 5px !important;
}

/* Sidebar post date icon */
[dir="ltr"] .tl-sidebar__post-date i {
    margin-left: 0 !important;
    margin-right: 4px !important;
}

/* Article meta icon */
[dir="ltr"] .tl-article__meta i {
    margin-left: 0 !important;
    margin-right: 5px !important;
}

/* Article tags label icon */
[dir="ltr"] .tl-article__tags-label i {
    margin-left: 0 !important;
    margin-right: 5px !important;
}


/* =============================================================
   4. DIRECTIONAL PADDING
   Mirror padding-right <-> padding-left where used directionally.
============================================================= */

/* About text section */
[dir="ltr"] .tl-about-text {
    padding-left: 0 !important;
    padding-right: 20px !important;
}

/* Article content lists: swap list padding */
[dir="ltr"] .tl-article__content ul,
[dir="ltr"] .tl-article__content ol {
    padding-right: 0 !important;
    padding-left: 20px !important;
}

/* Sidebar search input: swap padding for button position */
[dir="ltr"] .tl-sidebar__search input {
    padding: 14px 20px 14px 50px !important;
}

/* Search box form input: swap padding for button position */
[dir="ltr"] .tl-search-box__form input {
    padding: 14px 25px 14px 55px !important;
}


/* =============================================================
   5. POSITIONED ELEMENTS (right/left swap)
   Pseudo-elements and absolutely positioned items.
============================================================= */

/* --- Hero --- */

/* Hero navigation: move from left to right */
[dir="ltr"] .tl-hero__nav {
    left: auto !important;
    right: 40px !important;
}

@media (max-width: 991px) {
    [dir="ltr"] .tl-hero__nav {
        right: 15px !important;
        left: auto !important;
    }
}

/* Hero scroll indicator: move from right to left */
[dir="ltr"] .tl-hero__scroll {
    right: auto !important;
    left: 40px !important;
}

/* --- Breadcrumb decorative shapes --- */

/* Breadcrumb ::after decorative circle */
[dir="ltr"] .breadcrumb__area::after {
    right: auto !important;
    left: -40px !important;
}

/* Breadcrumb bg ::before diamond */
[dir="ltr"] .breadcrumb__area .breadcrumb__bg::before {
    right: auto !important;
    left: 15% !important;
}

/* --- Service card thumb icon --- */
[dir="ltr"] .tl-service-card__thumb-icon {
    right: auto !important;
    left: 16px !important;
}

/* --- Blog card tag pill --- */
[dir="ltr"] .tl-blog-card__tag {
    right: auto !important;
    left: 14px !important;
}

/* --- Testimonial quote icon --- */
[dir="ltr"] .testimonial__item::after,
[dir="ltr"] .testimonial__item-two::after,
[dir="ltr"] .testimonial__item-three::after {
    right: auto !important;
    left: 25px !important;
}

/* --- Footer widget title underline --- */
/* Already handled in theme-custom.css via [dir="ltr"] */

/* --- SD block title underline --- */
/* Already handled in theme-custom.css via [dir="ltr"] */

/* --- Comments title underline --- */
/* Already handled in theme-custom.css via [dir="ltr"] */

/* --- Comment reply title underline --- */
/* Already handled in theme-custom.css via [dir="ltr"] */

/* --- Footer link hover underline --- */
/* Already handled in theme-custom.css via [dir="ltr"] */

/* --- CTA decorative radial --- */
[dir="ltr"] .cta__inner-wrap-two::before,
[dir="ltr"] .cta__inner-wrap-three::before {
    right: auto !important;
    left: -15% !important;
}

/* --- Sidebar CTA decorative radial --- */
[dir="ltr"] .tl-sidebar__cta::before {
    right: auto !important;
    left: -30% !important;
}

/* --- SD CTA decorative radial --- */
[dir="ltr"] .tl-sd-cta::before {
    right: auto !important;
    left: -20% !important;
}

/* --- About decorative orb --- */
[dir="ltr"] .tl-about-visual::after {
    right: auto !important;
    left: -40px !important;
}

/* --- About float image --- */
[dir="ltr"] .tl-about-visual__float {
    left: auto !important;
    right: -20px !important;
}

/* --- About badge --- */
[dir="ltr"] .tl-about-visual__badge {
    left: auto !important;
    right: 0 !important;
}

/* --- About images secondary float --- */
[dir="ltr"] .tl-about-imgs__secondary {
    left: auto !important;
    right: -20px !important;
}

/* --- About images badge --- */
[dir="ltr"] .tl-about-imgs__badge {
    left: auto !important;
    right: -15px !important;
}

/* --- About images decorative orb --- */
[dir="ltr"] .tl-about-imgs::after {
    right: auto !important;
    left: -30px !important;
}

@media (max-width: 991px) {
    [dir="ltr"] .tl-about-visual__badge {
        right: 10px !important;
        left: auto !important;
    }

    [dir="ltr"] .tl-about-imgs__badge {
        right: 15px !important;
        left: auto !important;
    }

    [dir="ltr"] .tl-about-imgs__secondary {
        right: auto !important;
        left: auto !important;
    }
}

/* --- Sidebar search button position --- */
[dir="ltr"] .tl-sidebar__search button {
    left: auto !important;
    right: 15px !important;
}

/* --- Search box button position --- */
[dir="ltr"] .tl-search-box__form button {
    left: auto !important;
    right: 5px !important;
}

/* --- Blog search button position --- */
[dir="ltr"] .blog__search button {
    left: auto !important;
    right: 15px !important;
}

/* --- Scroll to top: swap sides --- */
[dir="ltr"] .scroll__top {
    left: 30px !important;
    right: auto !important;
}

/* --- Select2 arrow position --- */
[dir="ltr"] .select2-container--default .select2-selection--single .select2-selection__arrow {
    left: auto !important;
    right: 12px !important;
}

/* --- Slider decorative glow (::after) --- */
[dir="ltr"] .slider__bg-five::after {
    right: auto !important;
    left: -10% !important;
}


/* =============================================================
   6. ARROW ICONS & DIRECTIONAL TRANSFORMS
   Flip arrows and translateX directions for LTR.
============================================================= */

/* Hero outline button arrow: flip direction */
[dir="ltr"] .tl-hero__btn-outline:hover i {
    transform: translateX(5px) !important;
}

/* Service card link arrow: already in theme-custom.css */
/* Blog card link arrow: already in theme-custom.css */



/* fa-arrow-left icons in links — flip to point right in LTR */
[dir="ltr"] .tl-service-card__link i.fa-arrow-left,
[dir="ltr"] .tl-blog-card__link i.fa-arrow-left,
[dir="ltr"] .tl-hero__btn-outline i.fa-arrow-left,
[dir="ltr"] .tl-search-item__link i.fa-arrow-left {
    transform: scaleX(-1) !important;
}

/* Hover state: keep flipped + add translate */
[dir="ltr"] .tl-service-card__link:hover i.fa-arrow-left,
[dir="ltr"] .tl-blog-card__link:hover i.fa-arrow-left {
    transform: scaleX(-1) translateX(4px) !important;
}

/* Post navigation arrows */
[dir="ltr"] .tl-post-nav__prev i,
[dir="ltr"] .tl-post-nav__next i {
    transform: scaleX(-1) !important;
}

/* SD extras hover: already in theme-custom.css */
/* Countries list hover: already in theme-custom.css */

/* Search item link arrow */
[dir="ltr"] .tl-search-item__link i {
    transform: scaleX(-1) !important;
}


/* =============================================================
   7. NAVIGATION & MENU
   Dropdown arrow positioning and flex direction.
============================================================= */

/* Nav parent items: normal row direction (not reversed) in LTR */
[dir="ltr"] .tgmenu__main-menu .navigation > li.menu-item-has-children > a {
    flex-direction: row !important;
}
[dir="ltr"] .faq__wrap .accordion-button {
    justify-content: space-between;
}

/* =============================================================
   8. BREADCRUMB
   Separator direction handled by flex; ensure alignment.
============================================================= */

[dir="ltr"] .breadcrumb__content .breadcrumb {
    justify-content: flex-start !important;
}

@media (max-width: 991px) {
    [dir="ltr"] .breadcrumb__content {
        text-align: center !important;
    }

    [dir="ltr"] .breadcrumb__content .breadcrumb {
        justify-content: center !important;
    }
}


/* =============================================================
   9. FORMS
   Labels, inputs, and textareas aligned left.
============================================================= */

[dir="ltr"] .tl-form-group label {
    text-align: left !important;
}

[dir="ltr"] .tl-form-group input,
[dir="ltr"] .tl-form-group textarea,
[dir="ltr"] .tl-form-group select {
    text-align: left !important;
}

[dir="ltr"] .contact__form .form-grp input,
[dir="ltr"] .contact__form .form-grp textarea {
    text-align: left !important;
}

[dir="ltr"] .comment-respond input,
[dir="ltr"] .comment-respond textarea {
    text-align: left !important;
}

[dir="ltr"] .comment__form .form-grp input,
[dir="ltr"] .comment__form .form-grp textarea {
    text-align: left !important;
}


/* =============================================================
   10. WORDPRESS BLOCK ALIGNMENT
   Swap alignleft/alignright float for LTR context.
============================================================= */

[dir="ltr"] .alignleft {
    float: left !important;
    margin: 0 1.5em 1em 0 !important;
}

[dir="ltr"] .alignright {
    float: right !important;
    margin: 0 0 1em 1.5em !important;
}

/* Block quote: swap border side */
/* Already handled in theme-custom.css via [dir="ltr"] */


/* =============================================================
   11. FOOTER WIDGET LINK HOVER
   Slide padding direction on hover.
============================================================= */

/* Already handled in theme-custom.css via [dir="ltr"] */

/* Footer widget title ::after underline */
/* Already handled in theme-custom.css via [dir="ltr"] */

/* Footer contact items: ensure natural LTR flow */
[dir="ltr"] .footer__contact-item {
    flex-direction: row !important;
}


/* =============================================================
   12. SIDEBAR HOVER EFFECTS
   Swap padding direction on hover.
============================================================= */

/* Sidebar service list hover: already in theme-custom.css */
/* BS cat list hover: already in theme-custom.css */

/* Comment children indent: already in theme-custom.css */


/* =============================================================
   13. HEADER & MOBILE MENU
   Ensure proper LTR alignment.
============================================================= */

/* Sticky header: inset properties are direction-neutral (left:0 + right:0)
   so no override needed. */

/* Tagcloud: swap margin direction */
[dir="ltr"] .tagcloud a {
    margin: 0 0 8px 4px !important;
}


/* =============================================================
   14. MOBILE RESPONSIVE LTR ADJUSTMENTS
============================================================= */

@media (max-width: 991px) {
    /* Footer widget title underline centered on mobile */
    [dir="ltr"] .footer__widget-title::after {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }

    /* Section titles centered on mobile */
    [dir="ltr"] .section__title,
    [dir="ltr"] .section__title-two,
    [dir="ltr"] .section__title-three {
        text-align: center !important;
    }

    /* About text: centered on mobile */
    [dir="ltr"] .tl-about-text {
        padding: 0 !important;
        text-align: center !important;
    }
}

@media (max-width: 575px) {
    [dir="ltr"] .tl-about-imgs__badge {
        right: 15px !important;
        left: auto !important;
    }
}


/* =============================================================
   15. BREADCRUMB DECORATIVE DOTS
   The dots pattern uses box-shadow offsets; mirror for LTR.
============================================================= */

[dir="ltr"] .breadcrumb__content::before {
    left: auto !important;
    right: 5% !important;
}


/* =============================================================
   16. CTA SECTION
   Content alignment adjustments.
============================================================= */

[dir="ltr"] .cta__content-right {
    justify-content: flex-start !important;
}

@media (max-width: 991px) {
    [dir="ltr"] .cta__content-right {
        justify-content: center !important;
    }
}

/* Why-counter CTA actions */
[dir="ltr"] .tl-why-counter__cta-actions {
    justify-content: flex-start !important;
}

@media (max-width: 991px) {
    [dir="ltr"] .tl-why-counter__cta-actions {
        justify-content: center !important;
    }
}


/* =============================================================
   17. SD (SERVICE DETAIL) EXTRAS HOVER
   translateX direction swap already in theme-custom.css.
============================================================= */

/* Countries list hover: already in theme-custom.css */


/* =============================================================
   18. WHATSAPP FLOAT
   Keep on the left in LTR (already positioned left in theme-custom.css,
   which is correct for RTL -- bottom-left in RTL means left side).
   In LTR, move to the right side for convention.
============================================================= */

[dir="ltr"] .whatsapp-float {
    left: auto !important;
    right: 30px !important;
}


/* =============================================================
   19. SCROLL PROGRESS BAR
   Both left:0 and right:0 are set, so direction-neutral. No override.
============================================================= */


/* =============================================================
   20. MISC ADJUSTMENTS
============================================================= */

/* Breadcrumb bg diamond shape: mirror position */
[dir="ltr"] .breadcrumb__area .breadcrumb__bg::after {
    left: auto !important;
    right: 20% !important;
}

/* Breadcrumb area ::before circle: already uses left, mirror to right */
[dir="ltr"] .breadcrumb__area::before {
    left: auto !important;
    right: -60px !important;
}

/* Blog search input padding swap */
[dir="ltr"] .blog__search input {
    padding: 14px 20px 14px 50px !important;
}