/* ═══ NIO Highlights — coverflow-карусель (es9) ═════════════ */

.nio-hl{
    --nio-hl-ease: cubic-bezier(.55,.05,.25,1);
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.nio-hl *,
.nio-hl *::before,
.nio-hl *::after{ box-sizing: border-box; }

/* ── Вьюпорт + трек ─────────────────────────────────────── */
.nio-hl__viewport{
    position: relative;
    width: 100%;
    overflow: hidden;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}
.nio-hl__viewport.is-grabbing{ cursor: grabbing; }

.nio-hl__track{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 24px;
    will-change: transform;
}

/* ── Слайд ──────────────────────────────────────────────── */
.nio-hl__slide{
    position: relative;
    flex: 0 0 auto;
    width: 52%;
    height: 540px;
    overflow: hidden;
    border-radius: 0;
    background: #0b0b0c;
}
.nio-hl__media{ position: absolute; inset: 0; }
.nio-hl__media img,
.nio-hl__media video,
.nio-hl__media picture{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
/* затемнение соседних слайдов.
   Цвет вынесен в переменную (контрол «Цвет затемнения»); дефолт #000 —
   как было раньше, чтобы уже настроенные слайдеры не изменились. */
.nio-hl__slide::after{
    content: "";
    position: absolute; inset: 0;
    background: var(--nio-hl-dim-c, #000);
    opacity: .55;
    transition: opacity .5s var(--nio-hl-ease);
    pointer-events: none;
    z-index: 2;
}
.nio-hl__slide.is-active::after{ opacity: 0; }

/* ── Оверлей по центральному слайду (десктоп) ───────────── */
.nio-hl__overlay{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 5;
}

/* стрелки на краях центрального слайда */
.nio-hl__arrow{
    -webkit-appearance: none; appearance: none;
    border: 0; background: transparent; padding: 0; margin: 0;
    cursor: pointer; line-height: 0;
    color: #fff;
    transition: opacity .25s ease, transform .25s ease;
}
.nio-hl__arrow svg{ display: block; }
.nio-hl__arrow--over{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
    opacity: .9;
}
.nio-hl__arrow--over svg{ width: 32px; height: 32px; }
.nio-hl__arrow--over:hover{ opacity: 1; }
.nio-hl__arrow--over.nio-hl__arrow--prev{ left: 24px; }
.nio-hl__arrow--over.nio-hl__arrow--next{ right: 24px; }
.nio-hl__arrow[disabled]{ opacity: .25; cursor: default; pointer-events: none; }

/* ── Альтернативные стили стрелок (контрол «Стиль стрелок») ──
   Правила навешены на ОТДЕЛЬНЫЕ классы-модификаторы, поэтому стандартные
   стрелки (.nio-hl__arrow--over/--round без модификатора) не затрагиваются. */

/* ONVO: круг с фростед-блюром. Блюр даём CSS-ом на кнопку (в SVG через
   foreignObject он не отрисовывается при вставке как <img> и ненадёжен). */
.nio-hl__arrow--onvo{
    border-radius: 50%;
    overflow: hidden;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 1;
}
.nio-hl__arrow--onvo svg{ display: block; width: 36px; height: 36px; }
.nio-hl--stage .nio-hl__arrow--onvo,
.nio-hl--hstage .nio-hl__arrow--onvo{ opacity: 1; }

/* Свои изображения */
.nio-hl__arrow--custom img{ display: block; width: 36px; height: 36px; object-fit: contain; }

/* на планшете/моб альтернативные стрелки по умолчанию 44px (как круглые штатные) */
@media (max-width: 1024px){
    .nio-hl__arrow--round.nio-hl__arrow--onvo svg,
    .nio-hl__arrow--round.nio-hl__arrow--custom img{ width: 44px; height: 44px; }
}

/* заголовок/подзаголовок снизу-слева — ЧАСТЬ слайда (десктоп):
   едет вместе со слайдом, виден только на центральном, проявляется при подъезде к центру */
.nio-hl__cap-in{
    position: absolute;
    left: 36px;
    bottom: 36px;
    max-width: 70%;
    text-align: left;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    transition: opacity .5s ease;             /* мягко гаснет, когда слайд уезжает */
}
.nio-hl__slide.is-active .nio-hl__cap-in{
    opacity: 1;
    transition: opacity .65s ease var(--nio-hl-cap-delay, 260ms); /* мягко проявляется при подъезде к центру */
}
.nio-hl__title{
    margin: 0 0 12px;
    color: #fff;
    line-height: 1.15;
    font-size: 26px;
    font-weight: 600;
}
.nio-hl__subtitle{
    margin: 0;
    color: rgba(255,255,255,.82);
    line-height: 1.45;
    font-size: 15px;
}
.nio-hl__cap-in .nio-hl__subtitle{ max-width: 340px; }

/* буллеты-полоски снизу-справа */
.nio-hl__bullets{
    display: flex;
    align-items: center;
    gap: 8px;
}
.nio-hl__bullets--over{
    position: absolute;
    right: 36px;
    bottom: 36px;
    pointer-events: auto;
    z-index: 4;
}
.nio-hl__bullet{
    -webkit-appearance: none; appearance: none;
    border: 0; padding: 0; margin: 0;
    width: 24px; height: 3px;
    border-radius: 999px;        /* скруглённые концы полосок */
    background: rgba(255,255,255,.35);
    cursor: pointer;
    transition: background-color .3s ease;
}
.nio-hl__bullet.is-active{ background: #fff; }

/* ── Блок управления снизу (планшет/моб) ────────────────── */
.nio-hl__below{ display: none; }

/* дорожка подписей — едет синхронно со слайдами + нежный fade */
.nio-hl__cap-viewport{
    width: 100%;
    overflow: hidden;
    opacity: 1;
    transition: opacity .4s ease;
}
.nio-hl__cap-viewport.is-fading{ opacity: 0; }
.nio-hl__cap-track{
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
}
.nio-hl__cap{
    flex: 0 0 100%;
    width: 100%;
    padding: 0 16px;
    text-align: center;
    pointer-events: none;
}
.nio-hl__cap .nio-hl__subtitle{ max-width: 92%; margin-left: auto; margin-right: auto; }

.nio-hl__nav{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}
.nio-hl__arrow--round svg{ width: 44px; height: 44px; }
.nio-hl__arrow--round{ opacity: .9; }
.nio-hl__arrow--round:hover{ opacity: 1; }

/* ── Адаптив: планшет/моб ───────────────────────────────── */
@media (max-width: 1024px){
    .nio-hl__overlay{ display: none; }
    /* По умолчанию подписи на слайдах скрыты, а дорожка подписей снизу видна.
       Контрол «Текст поверх слайдов (планшет/моб)» переключает эти переменные,
       не трогая разметку — важно, чтобы не ломать nio_stage/nio_hstage,
       которые подменяют класс корня регуляркой. */
    .nio-hl__cap-in{ display: var(--nio-hl-capin-m, none); }
    .nio-hl__cap-viewport{ display: var(--nio-hl-capview-m, block); }
    .nio-hl__track{ gap: 12px; }
    .nio-hl__slide{ width: 84%; height: 460px; }

    /* Режим «текст поверх слайда»: подпись прижата к низу слайда и центрирована.
       !important здесь обязателен: контрол «Отступ текста от края слайда» —
       responsive, и Elementor генерит для него left/bottom в т.ч. внутри
       мобильного медиазапроса со своей высокой специфичностью.
       Для nio_stage/nio_hstage безвредно: там подпись position:static,
       поэтому left/right/bottom игнорируются. */
    .nio-hl__cap-in{
        left:   var(--nio-hl-capin-x, 16px) !important;
        right:  var(--nio-hl-capin-x, 16px) !important;
        bottom: var(--nio-hl-capin-y, 24px) !important;
        max-width: none;
        text-align: center;
    }
    .nio-hl__cap-in .nio-hl__subtitle{ margin-left: auto; margin-right: auto; }

    .nio-hl__below{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 22px 16px 8px;                   /* нижний отступ — контрол below_nav_bottom */
    }
    .nio-hl__bullets--below{ justify-content: center; }
    .nio-hl__cap-viewport{ margin-top: 40px; }   /* отступ над заголовком (контрол below_cap_top) */
    .nio-hl__nav{ margin-top: 32px; }             /* отступ над стрелками (контрол below_nav_top) */
}
@media (max-width: 767px){
    .nio-hl__track{ gap: 8px; }
    .nio-hl__slide{ width: 90%; }
}