/* ZIL RTL overrides — loaded for [dir="rtl"] only. */

/* Neutralise word-by-word color reveal animations in RTL — except on the
   brand cards page (.page-template-template-brand), where the card-stack
   animation already works correctly and should not be touched. */
html[dir="rtl"] body:not(.page-template-template-brand) [class*="-word"],
html[dir="rtl"] body:not(.page-template-template-brand) [class*="word-"],
html[dir="rtl"] body:not(.page-template-template-brand) .word,
html[dir="rtl"] body:not(.page-template-template-brand) .about-word,
html[dir="rtl"] body:not(.page-template-template-brand) .explore-range-word {
    color: inherit !important;
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
}
html[dir="rtl"] .about--pinned,
html[dir="rtl"] [class*="--pinned"] {
    --reveal-progress: 1 !important;
}

/* Global base. */
html[dir="rtl"] body {
    direction: rtl;
}

/* Clip horizontal overflow on body only (NOT html — breaks Lenis/ScrollTrigger). */
html[dir="rtl"] body {
    overflow-x: hidden !important;
}

/* Text alignment utility flips. */
html[dir="rtl"] .text-left   { text-align: right !important; }
html[dir="rtl"] .text-right  { text-align: left  !important; }
@media (min-width: 768px) {
    html[dir="rtl"] .md\:text-left { text-align: right !important; }
}
@media (min-width: 1024px) {
    html[dir="rtl"] .lg\:text-left { text-align: right !important; }
}

/* Margin utility flips. */
html[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
html[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: 0.5rem  !important; }
html[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 0.75rem !important; }
html[dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1rem    !important; }
html[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
html[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: 0.5rem  !important; }
html[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 0.75rem !important; }
html[dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1rem    !important; }
html[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; }
html[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }

/* Header. */
html[dir="rtl"] .header { left: auto; right: 0; }
html[dir="rtl"] .header__search-icon { left: auto !important; right: 0.75rem !important; }
html[dir="rtl"] .header__search-input { padding-left: 0.75rem !important; padding-right: 2.25rem !important; text-align: right; }
html[dir="rtl"] .header__search-clear { right: auto !important; left: 0.75rem !important; }
html[dir="rtl"] .header__search-dropdown { right: auto !important; left: 0 !important; }
html[dir="rtl"] .header__lang-dropdown { right: auto !important; left: 0 !important; }
html[dir="rtl"] .header__lang-item { text-align: right !important; }

/* Mobile menu — slide in from the right. */
html[dir="rtl"] .mobile-menu { transform: translateX(100%) !important; }
html[dir="rtl"] .mobile-menu.active { transform: translateX(0) !important; }
html[dir="rtl"] .mobile-menu__search .absolute.left-4 { left: auto !important; right: 1rem !important; }
html[dir="rtl"] .mobile-search-input { padding-left: 1rem !important; padding-right: 2.75rem !important; text-align: right; }
html[dir="rtl"] .mobile-menu__link,
html[dir="rtl"] .mobile-menu__dropdown-link {
    text-align: right !important;
}
html[dir="rtl"] .mobile-menu__item { text-align: right; }
html[dir="rtl"] .mobile-menu__item--has-children > div { padding-right: 0; padding-left: 0.5rem; }
html[dir="rtl"] .mobile-menu__list,
html[dir="rtl"] .mobile-menu__container {
    text-align: right;
}
html[dir="rtl"] .mobile-menu__lang { text-align: right; }
html[dir="rtl"] .mobile-menu__lang > p { text-align: right; }
html[dir="rtl"] [data-lang-switcher-mobile] > div,
html[dir="rtl"] .mobile-menu__lang > div,
html[dir="rtl"] .mobile-menu__lang .flex {
    justify-content: flex-start !important;
}

/* Home: Hero — centered on mobile, right-aligned at md+. */
html[dir="rtl"] .hero__heading-ex {
    direction: ltr;
    unicode-bidi: isolate;
}
@media (min-width: 768px) {
    html[dir="rtl"] .hero__left { text-align: right; }
    html[dir="rtl"] .hero__left .md\:items-start { align-items: flex-end !important; }
    html[dir="rtl"] .hero__heading-ex { text-align: right; }
}
html[dir="rtl"] .hero__overlay-image { right: auto !important; left: 0 !important; }

/* Home: About. */
html[dir="rtl"] .about__container,
html[dir="rtl"] .about__text-ex {
    text-align: right;
    direction: ltr;
    unicode-bidi: isolate;
}

/* Home: Awards / Brands. */
html[dir="rtl"] .awards__label-col,
html[dir="rtl"] .awards__label {
    text-align: right;
    direction: ltr;
    unicode-bidi: isolate;
}
html[dir="rtl"] .awards__label-col { justify-content: flex-end; }
html[dir="rtl"] .awards__item { direction: ltr; }
html[dir="rtl"] .awards__item-content { direction: ltr; }
html[dir="rtl"] .brands__title-ex,
html[dir="rtl"] .brands__container {
    text-align: right;
    direction: ltr;
    unicode-bidi: isolate;
}
html[dir="rtl"] .brands__container { text-align: right; }
html[dir="rtl"] .brands__title-ex { display: block; text-align: right; }

/* Force Swiper containers to stay LTR so marquees don't go blank. */
html[dir="rtl"] .awards__swiper,
html[dir="rtl"] .brands__swiper,
html[dir="rtl"] .cta__slider--1,
html[dir="rtl"] .cta__slider--2,
html[dir="rtl"] .cta__slider--3,
html[dir="rtl"] .ali-legacy__swiper {
    direction: ltr;
}
html[dir="rtl"] .awards__swiper .swiper-wrapper,
html[dir="rtl"] .brands__swiper .swiper-wrapper,
html[dir="rtl"] .cta__slider--1 .swiper-wrapper,
html[dir="rtl"] .cta__slider--2 .swiper-wrapper,
html[dir="rtl"] .cta__slider--3 .swiper-wrapper,
html[dir="rtl"] .ali-legacy__swiper .swiper-wrapper {
    direction: ltr;
}

/* Home: Features. */
html[dir="rtl"] .features__container { text-align: right; }
html[dir="rtl"] .features__title-ex,
html[dir="rtl"] .features__text-ex {
    text-align: right;
    direction: ltr;
    unicode-bidi: isolate;
}
html[dir="rtl"] .features__header {
    display: inline-flex !important;
    gap: 16px !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    align-self: flex-end !important;
}
html[dir="rtl"] .features__header > .features__icon,
html[dir="rtl"] .features__header > .features__title-ex {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
html[dir="rtl"] .features__item {
    align-items: flex-end !important;
    text-align: right !important;
}
html[dir="rtl"] .features__item .features__text-ex {
    align-self: flex-end !important;
    width: 100%;
    text-align: right !important;
}

/* Home: Video. */
html[dir="rtl"] .video__overlay-icon { right: auto !important; left: 0 !important; }
html[dir="rtl"] .video .video__content,
html[dir="rtl"] .video__container .video__content {
    align-items: flex-end !important;
    text-align: right !important;
}
html[dir="rtl"] .video .video__title,
html[dir="rtl"] .video__container .video__title {
    align-self: flex-end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    text-align: right !important;
    direction: ltr;
    unicode-bidi: isolate;
}
html[dir="rtl"] .video .video__play-btn,
html[dir="rtl"] .video__container .video__play-btn {
    align-self: flex-end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    display: block;
}

/* Home: Mission/Vision — keep dir:rtl so CSS Grid mirrors columns. */
html[dir="rtl"] .mission-vision__container,
html[dir="rtl"] .mission-vision__title,
html[dir="rtl"] .mission-vision__description {
    text-align: right;
}

/* Home: Values. */
html[dir="rtl"] .values__container,
html[dir="rtl"] .values__title-ex,
html[dir="rtl"] .values__item-title-ex,
html[dir="rtl"] .values__item-text {
    text-align: right;
    direction: ltr;
    unicode-bidi: isolate;
}
html[dir="rtl"] .values__icon {
    display: block;
    margin-left: auto !important;
    margin-right: 0 !important;
}
html[dir="rtl"] .values__grid {
    flex-direction: row-reverse;
}

/* Home: Showcase. */
html[dir="rtl"] .showcase__container,
html[dir="rtl"] .showcase__title-ex,
html[dir="rtl"] .showcase__text-ex,
html[dir="rtl"] .showcase__stat-title,
html[dir="rtl"] .showcase__stat-text {
    text-align: right;
    direction: ltr;
    unicode-bidi: isolate;
}

/* Home: CTA. */
html[dir="rtl"] .cta__card,
html[dir="rtl"] .cta__title-ex,
html[dir="rtl"] .cta__text-ex {
    text-align: center;
    direction: ltr;
    unicode-bidi: isolate;
}
html[dir="rtl"] .cta__btn-ex { direction: ltr; }

/* Home: Video modal close button. */
html[dir="rtl"] #videoModalClose { right: auto !important; left: 1rem !important; }

/* Generic absolute offset helpers (kept narrow — left-0/right-0 NOT flipped). */
html[dir="rtl"] .left-3 { left: auto !important; right: 0.75rem !important; }
html[dir="rtl"] .right-3 { right: auto !important; left: 0.75rem !important; }
html[dir="rtl"] .left-4 { left: auto !important; right: 1rem !important; }
html[dir="rtl"] .right-4 { right: auto !important; left: 1rem !important; }

/* Lightboxes (team + albums) — keep exact LTR behavior in RTL too. */
html[dir="rtl"] #galleryLightbox,
html[dir="rtl"] #mediaLightbox,
html[dir="rtl"] #galleryLightbox *,
html[dir="rtl"] #mediaLightbox * {
    direction: ltr !important;
    unicode-bidi: isolate !important;
}
html[dir="rtl"] #lightboxCounter,
html[dir="rtl"] #mediaLightboxCounter {
    white-space: pre !important;
    direction: ltr !important;
    unicode-bidi: bidi-override !important;
    text-align: center !important;
}

/* Albums / Media tab pair corner rounding. */
html[dir="rtl"] .media-tab.rounded-l-\[12px\] {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}
html[dir="rtl"] .media-tab.rounded-r-\[12px\] {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
}

/* Brand page: CTA arrow direction. */
html[dir="rtl"] .brand-item__cta svg {
    transform: scaleX(-1);
    transition: transform 0.3s ease;
}
@media (min-width: 1280px) {
    html[dir="rtl"] .brand-item__cta:hover svg {
        transform: scaleX(-1) translateX(0.25rem);
    }
}

/* Brand page: breadcrumb. */
html[dir="rtl"] .page-hero__breadcrumb {
    left: auto !important;
    right: 0 !important;
}

/* Contact form: inputs + placeholders start from the right. */
html[dir="rtl"] .contact-form__input,
html[dir="rtl"] .contact-form__textarea,
html[dir="rtl"] .contact-form__form input,
html[dir="rtl"] .contact-form__form textarea,
html[dir="rtl"] .wpcf7 .contact-form__input,
html[dir="rtl"] .wpcf7 .contact-form__textarea,
html[dir="rtl"] .wpcf7 input[type="text"],
html[dir="rtl"] .wpcf7 input[type="email"],
html[dir="rtl"] .wpcf7 input[type="tel"],
html[dir="rtl"] .wpcf7 textarea {
    direction: rtl !important;
    text-align: right !important;
}
html[dir="rtl"] .contact-form__input::placeholder,
html[dir="rtl"] .contact-form__textarea::placeholder,
html[dir="rtl"] .contact-form__form input::placeholder,
html[dir="rtl"] .contact-form__form textarea::placeholder,
html[dir="rtl"] .wpcf7 .contact-form__input::placeholder,
html[dir="rtl"] .wpcf7 .contact-form__textarea::placeholder,
html[dir="rtl"] .wpcf7 input::placeholder,
html[dir="rtl"] .wpcf7 textarea::placeholder {
    text-align: right;
}

/* Careers page: search input layout. */
html[dir="rtl"] .career-opportunities__search-input {
    padding-left: 50px !important;
    padding-right: 26px !important;
    text-align: right;
    direction: ltr;
    unicode-bidi: isolate;
}
html[dir="rtl"] .career-opportunities__search-placeholder {
    left: auto !important;
    right: 26px !important;
    text-align: right;
}
html[dir="rtl"] .career-opportunities__search-btn {
    right: auto !important;
    left: 10px !important;
}

/* Investor / Documents page: search + reset-filter X. */
html[dir="rtl"] #document-search,
html[dir="rtl"] #document-search-mobile {
    padding-left: 20px !important;
    padding-right: 50px !important;
    text-align: right;
    direction: ltr;
    unicode-bidi: isolate;
}
html[dir="rtl"] #document-search ~ svg,
html[dir="rtl"] #document-search-mobile ~ svg {
    left: auto !important;
    right: 18px !important;
}
html[dir="rtl"] #document-reset-filters {
    left: auto !important;
    right: -58px !important;
}

/* Team page: search input. */
html[dir="rtl"] #team-search,
html[dir="rtl"] #team-search-mobile {
    padding-left: 12px !important;
    padding-right: 44px !important;
    text-align: right;
    direction: ltr;
    unicode-bidi: isolate;
}
html[dir="rtl"] #team-search ~ svg,
html[dir="rtl"] #team-search-mobile ~ svg {
    left: auto !important;
    right: 20px !important;
}
html[dir="rtl"] #team-search-mobile ~ svg {
    right: 16px !important;
}

/* Custom dropdowns (team / document filters). */
html[dir="rtl"] .custom-dropdown__trigger,
html[dir="rtl"] .custom-dropdown-mobile__trigger {
    text-align: right !important;
    padding-right: 12px !important;
}
html[dir="rtl"] .custom-dropdown__trigger { padding-left: 32px !important; }
html[dir="rtl"] .custom-dropdown-mobile__trigger { padding-left: 40px !important; }
html[dir="rtl"] .custom-dropdown__arrow {
    right: auto !important;
    left: 8px !important;
}
html[dir="rtl"] .custom-dropdown-mobile__arrow {
    right: auto !important;
    left: 12px !important;
}
html[dir="rtl"] .custom-dropdown__selected,
html[dir="rtl"] .custom-dropdown-mobile__selected {
    text-align: right;
}
html[dir="rtl"] .custom-dropdown__item,
html[dir="rtl"] .custom-dropdown-mobile__item {
    text-align: right;
    direction: ltr;
    unicode-bidi: isolate;
}
html[dir="rtl"] .custom-dropdown-mobile__menu {
    left: 0 !important;
    right: 0 !important;
}

/* Team page: bio modal — restore left padding lost when flex auto-mirrors. */
html[dir="rtl"] .team-modal {
    border-left: 0 !important;
    border-right: 6px solid #6A4D94 !important;
}
html[dir="rtl"] .team-modal__content-side {
    padding: 20px 25px 30px !important;
}
@media (min-width: 768px) {
    html[dir="rtl"] .team-modal__content-side {
        padding: 30px 0 30px 30px !important;
    }
}
html[dir="rtl"] .team-modal__close {
    right: auto !important;
    left: 15px !important;
}

/* Team page: member cards. */
html[dir="rtl"] .team-member__name-bar {
    left: 0 !important;
    right: 0 !important;
    text-align: right;
}
html[dir="rtl"] .team-member__name-bar h4 {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: right;
}
html[dir="rtl"] .team-member__overlay { text-align: right; }