/* Arabic/RTL foundation. Loaded only when LANGUAGE_ID === "ar". */

@font-face {
    font-family: 'Noto Sans Arabic';
    src: url('/local/templates/csg/fonts/NotoSansArabic/NotoSansArabic-Arabic.woff2') format('woff2');
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: 'Noto Sans Arabic';
    src: url('/local/templates/csg/fonts/NotoSansArabic/NotoSansArabic-Latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
    font-family: 'Noto Sans Arabic', 'WixMadeforDisplay', Tahoma, Arial, sans-serif;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button {
    font-family: inherit;
}

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

/* Keep inherently LTR values readable inside the RTL document. */
html[dir="rtl"] [lang="en"],
html[dir="rtl"] [dir="ltr"],
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"] {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Header and navigation. */
html[dir="rtl"] .header__logo {
    justify-self: start;
}

html[dir="rtl"] .header__tools {
    justify-self: end;
}

html[dir="rtl"] .burger {
    left: auto;
    right: 0;
    transform: translateX(-100%);
}

html[dir="rtl"] .burger--active {
    transform: translateX(0);
}

html[dir="rtl"] .burger__header {
    padding-right: 20px;
    padding-left: 10px;
}

html[dir="rtl"] .header__language-mobile-dropdown {
    right: auto;
    left: 0;
}

html[dir="rtl"] .header__nav ul {
    gap: clamp(14px, 2vw, 32px);
}

html[dir="rtl"] .header__tools {
    gap: 25px;
}

/* Fixed interface controls must leave the RTL reading edge free. */
html[dir="rtl"] .switch {
    right: auto;
    left: 40px;
}

html[dir="rtl"] .widget-contacts {
    right: auto;
    left: 50px;
}

html[dir="rtl"] .popup-cookie {
    right: auto;
    left: 155px;
    margin-right: 15px;
    margin-left: 0;
}

html[dir="rtl"] .popup-cookie__close {
    right: auto;
    left: 3px;
}

/* Inline links animate from the reading start edge. */
html[dir="rtl"] .csg__link::after {
    left: auto;
    right: 0;
    transform-origin: left;
}

html[dir="rtl"] .csg__link:hover::after {
    transform-origin: right;
}

/* Common page headings, breadcrumbs and content blocks. */
html[dir="rtl"] :is(
    .about__breadcrumbs,
    .contacts__breadcrumbs,
    .directions__breadcrumbs,
    .news__breadcrumbs,
    .projects__breadcrumbs,
    .vacancy__breadcrumbs,
    .template__breadcrumbs,
    .document__breadcrumbs,
    .news-detail__breadcrumbs
) {
    direction: rtl;
}

html[dir="rtl"] :is(
    .projects__title,
    .direction__title,
    .contacts__title,
    .news__title,
    .vacancy__title,
    .document__title,
    .page-document__title,
    .page-document__subtitle,
    .template-content__inner,
    .template-about__text
) {
    text-align: right;
}

html[dir="rtl"] .about__breadcrumbs ol {
    margin-right: -40px;
    margin-left: 0;
}

/* Oversized background captions start at the Arabic reading edge. */
html[dir="rtl"] :is(
    .direction__title,
    .projects__title,
    .news__title,
    .vacancy__title,
    .contacts__title
) > span {
    left: auto;
    right: 15px;
}

html[dir="rtl"] .news__title > span {
    right: -10px;
}

html[dir="rtl"] :is(
    .directions__category-text,
    .vacancy__category-text,
    .toggle-text,
    .projects__sort-option,
    .projects__sort-button,
    .projects .projects__empty,
    .service-landing__empty,
    .footer__title,
    .footer__items,
    .footer__link,
    .reviews__card,
    .reviews__title,
    .slogan__title-ru,
    .slogan__text,
    th,
    td
) {
    text-align: right;
}

/* Lists that used physical left padding in the LTR templates. */
html[dir="rtl"] :is(
    .additional-list,
    .page-document__list,
    .info-block__list
) {
    padding-right: 20px;
    padding-left: 0;
}

html[dir="rtl"] .info-block__list li {
    padding-right: 16px;
    padding-left: 0;
}

/* Legal documents remain in English on the Arabic version. */
html[dir="rtl"] .document__content {
    direction: ltr;
    text-align: left;
}

html[dir="rtl"] .document__content :is(
    .document__title,
    .page-document__title,
    .page-document__subtitle,
    .page-document__text,
    th,
    td
) {
    text-align: left;
}

html[dir="rtl"] .document__content .page-document__list {
    padding-right: 0;
    padding-left: 20px;
}

html[dir="rtl"] .info-block__list li::before {
    right: 0;
    left: auto;
}

/* Page filters and dropdowns. */
html[dir="rtl"] .projects__category--all {
    margin-right: 15px;
    margin-left: 0;
}

html[dir="rtl"] .projects__sort-dropdown {
    margin-right: auto;
    margin-left: 0;
}

html[dir="rtl"] .projects__sort-menu {
    right: auto;
    left: 40px;
}

html[dir="rtl"] .service-detail__content {
    margin-right: 15%;
    margin-left: 0;
}

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

html[dir="rtl"] .news-detail__content-date {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: right;
}

html[dir="rtl"] .faq {
    margin-right: 40px;
    margin-left: 20px;
}

html[dir="rtl"] .faq__question {
    padding-right: 0;
    padding-left: 20px;
}

/* Flex and grid rows mirror through the document direction. Swiper reads this
   initial direction and uses its native RTL translate logic. */
html[dir="rtl"] .swiper {
    direction: rtl;
}

html[dir="rtl"] :is(
    .swiper-button-prev,
    .swiper-button-next,
    .portfolio__button,
    .slider-projects__button,
    .news-slider__button
) svg {
    transform: scaleX(-1);
}

html[dir="rtl"] .template-reels .template-reels__button--prev {
    right: 15px;
    left: auto;
}

html[dir="rtl"] .template-reels .template-reels__button--next {
    right: auto;
    left: 15px;
}

html[dir="rtl"] :is(
    .office__button,
    .news-detail__gallery-button,
    .template-reels__button
) svg {
    transform: scaleX(-1);
}

/* Hover scaling must preserve the mirrored arrow direction. */
html[dir="rtl"] :is(
    .office__button,
    .portfolio__button,
    .slider-projects__button,
    .news-slider__button
):hover:not(.swiper-button-disabled) svg {
    transform: scaleX(-1) scale(1.08);
}

/* Project cards: text and badges swap physical sides. */
html[dir="rtl"] :is(
    .projects-grid__title,
    .projects-grid__subtitle,
    .projects-grid__tags,
    .slider-projects__item-title,
    .slider-projects__item-subtitle,
    .slider-projects__item-tags
) {
    right: 25px;
    left: auto;
    text-align: right;
}

html[dir="rtl"] :is(
    .projects-grid__badge,
    .projects-grid__date,
    .slider-projects__item-badge
) {
    right: auto;
    left: 25px;
}

html[dir="rtl"] :is(
    .projects-grid__side-text,
    .projects-grid__item-meta-warning,
    .slider-projects__item-meta-warning
) {
    right: auto;
    left: 10px;
}

html[dir="rtl"] :is(
    .projects-grid__logo--right,
    .slider-projects__item-logo
) {
    right: auto;
    left: 0;
    justify-content: flex-start;
}

html[dir="rtl"] .projects-grid__logo--left {
    right: 0;
    left: auto;
}

html[dir="rtl"] :is(
    .projects-grid__item:nth-child(8n+1),
    .projects-grid__item:nth-child(8n+4),
    .projects-grid__item:nth-child(8n+5),
    .projects-grid__item:nth-child(8n+7),
    .projects-grid__item:nth-child(13n+1),
    .projects-grid__item:nth-child(13n+4),
    .projects-grid__item:nth-child(13n+5),
    .projects-grid__item:nth-child(13n+7),
    .projects-grid__item:nth-child(13n+11),
    .projects-grid__item:nth-child(13n+12),
    .projects-grid__item:nth-child(13n+13),
    .projects-grid__item.is-wide-card
):has(.projects-grid__logo--left) .projects-grid__image--desktop {
    right: 42%;
    left: auto;
}

/* Physical accents that represent the start edge of a text block. */
html[dir="rtl"] .document__link--active span,
html[dir="rtl"] .document__link:hover:not(.document__link--active) span {
    border-left: 0;
    padding-left: 0;
    border-right: 1px solid #EFEFEF;
    padding-right: 15px;
}

html[dir="rtl"] .document__link--active span {
    border-right-width: 2px;
}

html[dir="rtl"] .about-brand__stat {
    border-left: 0;
    border-right: 1px solid #FFFFFF;
    padding-left: 0;
    padding-right: clamp(10px, calc(-17px + 3vw), 40px);
}

html[dir="rtl"] .about-brand__content {
    border-radius: 0 60px 0 0;
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 0;
}

@media (min-width: 901px) {
    html[dir="rtl"] .about-brand__slogan {
        margin-right: 40px;
        margin-left: 0;
    }
}

@media (max-width: 900px) {
    html[dir="rtl"] .about-brand__content {
        border-radius: 60px 60px 40px 40px;
    }
}

/* The animated slogan is English even on translated pages. Its DOM text and
   the reveal canvas must share the same physical origin. */
html[dir="rtl"] .about-brand__slogan-content {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
}

/* The marquee animation is authored as two LTR sets moving by -50%.
   Isolate it from the page direction so the duplicated set remains seamless. */
html[dir="rtl"] .clients__content,
html[dir="rtl"] .clients__track {
    direction: ltr;
}

html[dir="rtl"] .main-banner__stat-line {
    margin-right: 0;
    margin-left: clamp(15px, 3.65vw, 70px);
}

/* About page uses the same main-banner class names as the home component. */
html[dir="rtl"] .main-banner:not(#homeMainBanner) .main-banner__logo {
    right: auto;
    left: 0;
    justify-content: flex-start;
}

html[dir="rtl"] .main-banner:not(#homeMainBanner) .main-banner__logo img {
    object-position: left bottom;
}

html[dir="rtl"] .main-banner:not(#homeMainBanner) :is(
    .main-banner__heading,
    .main-banner__title,
    .main-banner__description,
    .main-banner__text,
    .main-banner__stat-label
) {
    text-align: right;
}

html[dir="rtl"] .why-us__heading {
    padding-right: 20px;
    padding-left: 0;
}

html[dir="rtl"] .direction__title h1 {
    right: 20px;
    left: auto;
}

html[dir="rtl"] .direction__active-content {
    right: 0;
    left: auto;
    padding-right: 30px;
    padding-left: 15px;
}

/*
 * The service arrows and their labels are one pre-positioned composition.
 * Mirroring the whole container replaces the individual translateX values of
 * the labels and separates them from the arrow endpoints. Keep the artwork in
 * its original coordinate system; only the Arabic text direction changes.
 */
html[dir="rtl"] .direction__active-options {
    direction: ltr;
    transform: none;
}

html[dir="rtl"] .direction__active-option span {
    direction: rtl;
    unicode-bidi: plaintext;
    text-align: center;
}

html[dir="rtl"] :is(
    .direction__inactive-title,
    .direction__active-title,
    .direction__active-description
) {
    text-align: right;
}

html[dir="rtl"] :is(.team__title-ru, .why-us__title-ru) {
    right: 10px;
    left: auto;
}

html[dir="rtl"] .clients__title {
    right: 32px;
    left: auto;
}

html[dir="rtl"] .clients__title h1 {
    right: 7px;
    left: auto;
}

html[dir="rtl"] .slogan__comet {
    right: 0;
    left: auto;
    transform: rotate(-2.89deg) translateX(0) scale(0.5);
}

html[dir="rtl"] .plug__content {
    border-left: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 0 60px 0 0;
}

/* Project and news detail templates. */
html[dir="rtl"] .template-banner__info {
    right: 40px;
    left: auto;
    align-items: flex-start;
}

html[dir="rtl"] .template-about__title span {
    right: -44px;
    left: auto;
}

html[dir="rtl"] .news-detail__breadcrumbs {
    right: 20px;
    left: auto;
}

html[dir="rtl"] .vacancy-archived-badge {
    right: auto;
    left: 50px;
}

/* Footer follows the mirrored page silhouette. */
html[dir="rtl"] .footer__top {
    margin-right: 0;
    margin-left: auto;
}

html[dir="rtl"] .footer__middle {
    border-radius: 27px 0 0 0;
}

html[dir="rtl"] .footer__link:hover {
    transform: translateX(-4px);
}

html[dir="rtl"] .footer__link--bottom:hover {
    transform: none;
}

/* Dialogs and form controls. */
html[dir="rtl"] .popup-close {
    right: auto;
    left: 10px;
}

html[dir="rtl"] .input-group label {
    right: 0;
    left: auto;
}

html[dir="rtl"] .input-group-static-label input {
    padding-right: 0;
    padding-left: 30px;
}

html[dir="rtl"] .input-icon {
    right: auto;
    left: 0;
}

html[dir="rtl"] :is(.service-btn, .entity-btn) {
    height: auto;
    min-height: 42px;
    white-space: normal;
    text-align: center;
}

html[dir="rtl"] .popup-content,
html[dir="rtl"] .section-title,
html[dir="rtl"] .error-message,
html[dir="rtl"] .checkbox-label,
html[dir="rtl"] .file-hint {
    text-align: right;
}

/* Semantic arrows should point in the mirrored reading direction. */
html[dir="rtl"] :is(
    .projects__filter-arrow,
    .slider-projects__arrow,
    .news-slider__arrow
) {
    transform: scaleX(-1);
}

/* Preserve deliberately centered content. */
html[dir="rtl"] :is(
    #homeMainBanner .main-banner__content,
    #homeMainBanner .main-banner__title,
    #homeMainBanner .main-banner__subtitle,
    .error-404__content,
    .faq__title,
    .office__title,
    .office__address
) {
    text-align: center;
}

@media (max-width: 1024px) {
    html[dir="rtl"] .header__tools--mobile {
        justify-self: end;
        align-self: center;
        align-items: center;
        height: 35px;
    }

    /* У логотипа собственный визуальный центр внутри SVG. */
    html[dir="rtl"] .header__logo {
        transform: translateY(-2px);
    }

    /* Не зависим от baseline Noto Sans Arabic и браузерных отступов button. */
    html[dir="rtl"] .header__language-mobile-wrapper,
    html[dir="rtl"] .header__language-mobile,
    html[dir="rtl"] .header__burger {
        height: 35px;
        display: flex;
        align-items: center;
    }

    html[dir="rtl"] .header__language-mobile {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1;
    }

    html[dir="rtl"] .header__language-mobile-current {
        display: block;
        line-height: 18px;
        transform: translateY(-1px);
    }

    html[dir="rtl"] .header__language-mobile svg,
    html[dir="rtl"] .header__burger svg {
        display: block;
        flex: 0 0 auto;
    }

    html[dir="rtl"] .header__burger {
        width: 30px;
        padding: 0;
        justify-content: center;
        line-height: 0;
    }

    html[dir="rtl"] .service-detail__content {
        margin-right: 8%;
        margin-left: 0;
    }

    html[dir="rtl"] .template-banner__info {
        right: auto;
        left: auto;
    }

    html[dir="rtl"] .template-about__title span {
        right: -20px;
        left: auto;
    }

    html[dir="rtl"] .vacancy-archived-badge {
        right: 0;
        left: auto;
    }
}

@media (max-width: 768px) {
    html[dir="rtl"] .switch {
        right: auto;
        left: 25px;
    }

    html[dir="rtl"] .widget-contacts {
        right: auto;
        left: 25px;
    }

    html[dir="rtl"] .popup-cookie {
        right: auto;
        left: 120px;
        margin-right: 15px;
        margin-left: 0;
    }

    html[dir="rtl"] :is(.directions__filter, .vacancy__filter) {
        padding-right: 0;
        padding-left: 15px;
    }

    html[dir="rtl"] :is(
        .direction__title,
        .projects__title,
        .vacancy__title
    ) > span {
        right: 10px;
        left: auto;
    }

    html[dir="rtl"] .direction__title h1 {
        right: 5px;
        left: auto;
    }

    html[dir="rtl"] .direction__active-content {
        padding-right: 20px;
        padding-left: 20px;
    }

    html[dir="rtl"] .news__title > span {
        right: -6px;
        left: auto;
    }

    html[dir="rtl"] .about__breadcrumbs ol {
        margin-right: -10px;
        margin-left: 0;
    }

    html[dir="rtl"] .news__sort {
        position: relative;
        justify-content: flex-start;
    }

    html[dir="rtl"] .news__years {
        display: none;
    }

    html[dir="rtl"] .news__years.is-open {
        min-width: 160px;
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 12px;
        background: #232323;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        z-index: 20;
    }

    html[dir="rtl"] .news__years.is-open li {
        display: block;
        margin: 0;
    }

    html[dir="rtl"] .news__years.is-open li::after {
        display: none;
    }

    html[dir="rtl"] .projects__category--all {
        margin: 0;
    }

    html[dir="rtl"] .projects__sort-menu {
        right: auto;
        left: 15px;
    }

    html[dir="rtl"] :is(
        .projects-grid__title,
        .projects-grid__subtitle,
        .projects-grid__tags,
        .slider-projects__item-title,
        .slider-projects__item-subtitle,
        .slider-projects__item-tags
    ) {
        right: 15px;
        left: auto;
    }

    html[dir="rtl"] :is(
        .projects-grid__badge,
        .projects-grid__date,
        .slider-projects__item-badge
    ) {
        right: auto;
        left: 15px;
    }

    html[dir="rtl"] .main-banner__stat-line {
        margin-right: 0;
        margin-left: 15px;
    }

    html[dir="rtl"] .clients__title {
        right: 12px;
        left: auto;
    }

    html[dir="rtl"] .clients__title h1 {
        right: 3px;
        left: auto;
    }

    html[dir="rtl"] .service-detail__content {
        margin: 0;
    }

    html[dir="rtl"] .template-banner__info {
        right: auto;
        left: auto;
    }

    html[dir="rtl"] .template-about__title span {
        right: 0;
        left: auto;
    }

    html[dir="rtl"] .news-detail__breadcrumbs {
        right: 0;
        left: auto;
    }

    html[dir="rtl"] .footer__top {
        margin: 0;
    }

    html[dir="rtl"] .footer__middle {
        border-radius: 0;
    }
}

@media (max-width: 480px) {
    html[dir="rtl"] :is(
        .projects-grid__title,
        .projects-grid__subtitle,
        .projects-grid__tags,
        .slider-projects__item-title,
        .slider-projects__item-subtitle,
        .slider-projects__item-tags
    ) {
        right: 12px;
        left: auto;
    }

    html[dir="rtl"] :is(
        .projects-grid__badge,
        .projects-grid__date,
        .slider-projects__item-badge
    ) {
        right: auto;
        left: 12px;
    }
}