/* ================================================================
   NIO Carousel Tabs — style.css  v2.2
   ================================================================ */

/* ── Обёртка ──────────────────────────────────────────────────── */
.nio-ct {
    position: relative;
    width: 100%;
    -webkit-user-select: none;
    user-select: none;
}

/* ================================================================
   СЛАЙДЕР

   БАГ 1 FIX — Архитектура:
   .nio-ct__slider  → position:relative (для стрелок)
   .nio-ct__track   → position:relative; высота = высота .nio-ct__media
                      через JS: track.style.height = media.offsetHeight
   .nio-ct__slide   → position:absolute; top:0; left:0; 100%×100%
   .nio-ct__media   → height задаётся Elementor-контролом media_height
                      JS читает offsetHeight медиа и пишет в трек
   ================================================================ */
.nio-ct__slider {
    position: relative;
}

.nio-ct__track {
    position: relative;
    width: 100%;
    /* Высота устанавливается из JS при инициализации и resize.
       До инициализации — берём дефолт из .nio-ct__media ниже */
    overflow: hidden;
}

/* Якорь высоты до инициализации JS: первый слайд не absolute */
.nio-ct__slide:first-child {
    position: relative;
}

/* После инициализации JS добавляет класс .nio-ct--ready к корню,
   и все слайды становятся абсолютными */
.nio-ct--ready .nio-ct__slide {
    position: absolute;
    top: 0;
    left: 0;
}

/* Все слайды */
.nio-ct__slide {
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

/* Первый слайд до ready — виден, занимает место в потоке */
.nio-ct__slide:first-child {
    opacity: 1;
    pointer-events: auto;
}

/* Активный слайд */
.nio-ct__slide.is-active {
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}

/* ── Медиа-контейнер ──────────────────────────────────────────── */
.nio-ct__media {
    width: 100%;
    height: 640px;   /* дефолт; переопределяется Elementor (media_height) */
    overflow: hidden;
}

@media (max-width: 1023px) {
    .nio-ct__media { height: 428px; }
}

.nio-ct__picture {
    display: block;
    width: 100%;
    height: 100%;
}

.nio-ct__picture img,
.nio-ct__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-user-drag: none;
}

/* ── Оверлей мягкого перехода (лёгкое осветление, не полная белая вспышка) ── */
.nio-ct__flash {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    z-index: 20;
    pointer-events: none;
}
.nio-ct__flash.is-flashing {
    opacity: 0.45;  /* полупрозрачный — не полная вспышка */
}

/* ================================================================
   СТРЕЛКИ
   position:absolute относительно .nio-ct__slider
   top:50% = середина медиа (трек = высоте медиа)
   ================================================================ */
.nio-ct__arrow {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* цвет hsla(0,0%,50%,.5) — из задания */
    background-color: hsla(0, 0%, 50%, .5);
    color: hsla(0, 0%, 50%, .5);
    transition: background-color .2s ease, color .2s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    flex-shrink: 0;
}

.nio-ct__arrow:hover {
    background-color: hsla(0, 0%, 35%, .75);
    color: hsla(0, 0%, 35%, .75);
}

.nio-ct__arrow svg {
    width: 36px;
    height: 36px;
    display: block;
    flex-shrink: 0;
}

.nio-ct__arrow svg circle { fill: currentColor; }

.nio-ct__arrow--prev { left: 40px; }
.nio-ct__arrow--next { right: 40px; }

@media (max-width: 1023px) {
    /* на планшете/моб стрелки скрыты — листание свайпом/перетаскиванием */
    .nio-ct__arrow { display: none; }
}

/* ================================================================
   БЛОК ТАБОВ

   БАГ 3 FIX:
   .nio-ct__tabs-container  → overflow:hidden; position:relative
   .nio-ct__tabs            → overflow-x:auto; touch-action:pan-x
   Контейнер скрывает вылезающее содержимое, список скроллится.
   ================================================================ */
.nio-ct__tabs-wrap {
    /* отступы из Elementor */
}

.nio-ct__tabs-container {
    position: relative;
    overflow: hidden;
    /* замыкаем контекст наложения: линия активного таба (z-index:100) остаётся
       ВНУТРИ виджета и не всплывает поверх липкого бара меню над ним */
    isolation: isolate;
}

/* Когда есть overflow — добавляем padding справа для стрелки */
.nio-ct__tabs-container.has-overflow {
    padding-right: 20px;
    box-sizing: border-box;
}

/* Список табов */
.nio-ct__tabs {
    display: flex;
    flex-direction: row;
    justify-content: center;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    position: relative;
    /* ВАЖНО: width:100% чтобы список не выходил за контейнер */
    width: 100%;
    margin: 36px 0 0;
    padding: 0;
    border: none;
    list-style: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-sizing: border-box;
}

.nio-ct__tabs::-webkit-scrollbar { display: none; }

/* При переполнении — выравниваем по левому краю */
.nio-ct__tabs-container.has-overflow .nio-ct__tabs {
    justify-content: flex-start;
}

/* Стрелка-уголок (из NIO .Tabs_rightBorder__lK6Nz:after)
   top считаем от верха контейнера: 36px margin-top списка + половина высоты таба.
   Высота таба = padding 20px*2 + line-height ~20px = ~60px → половина = 30px
   Итого: 36 + 30 = 66px от верха контейнера */
.nio-ct__tabs-container.has-overflow::after {
    content: "";
    position: absolute;
    top: calc(36px + 30px);   /* margin-top списка + пол-высоты таба */
    right: 2px;
    width: 8px;
    height: 8px;
    border-color: #979797;
    border-style: solid;
    border-width: 1px 1px 0 0;
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
    transition: opacity .2s;
}

/* Скрываем когда доскроллили до конца */
.nio-ct__tabs-container.at-end::after {
    opacity: 0;
    pointer-events: none;
}

/* ── Таб-элемент ──────────────────────────────────────────────── */
.nio-ct__tab-item {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    list-style: none;
}

@media (min-width: 1024px) {
    .nio-ct__tab-item { font-size: 16px; }
}

.nio-ct__tab-item:first-child { padding-left: 0; }
.nio-ct__tab-item:last-child  { padding-right: 0; }

/* Линия под ВСЕМИ табами (тонкая, цвет неактивного заголовка) */
.nio-ct__tab-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.2);
    /* Переопределяется Elementor через tab_color → .nio-ct__tab-item::after */
}

/* ── Лейбл таба ───────────────────────────────────────────────── */
.nio-ct__tab-label {
    display: block;
    position: relative;
    padding: 20px 0;
    color: rgba(0, 0, 0, .3);
    margin: 0;
    /* Сброс браузерных стилей заголовков (text-transform НЕ трогаем —
       у тегов нет дефолтного transform, а явная декларация мешала бы
       пользовательскому классу-утилите на этом же элементе) */
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

/* НЕТ стилей при hover — только явное переключение через JS */

/* ── Активный таб ─────────────────────────────────────────────── */
.nio-ct__tab-item.is-active .nio-ct__tab-label {
    color: #111;
    /* Переопределяется Elementor через tab_color_active */
}

/* Линия под активным табом — поверх общей серой (z-index > ::after таба) */
.nio-ct__tab-item.is-active .nio-ct__tab-label::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    display: block;
    background-color: #111;
    /* Переопределяется Elementor через tab_color_active */
    z-index: 100;
}

/* ================================================================
   ОПИСАНИЯ

   БАГ 2 FIX: Высота .nio-ct__desc-wrap фиксируется JS один раз
   при инициализации = самое высокое описание. Больше не меняется.
   Все описания absolute, fade in/out через opacity.
   Desktop: text-align:center; выравниваем по центру через left:50%+transform.
   Mobile:  text-align:left;   left:0; transform:none.
   ================================================================ */
.nio-ct__desc-wrap {
    position: relative;
    width: 100%;
    margin-top: 20px;
    /* Высота задаётся JS: фиксируется по максимальному описанию */
    overflow: hidden;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .nio-ct__desc-wrap { margin-top: 28px; }
}

/* Все описания абсолютные — стопкой */
.nio-ct__desc-item {
    position: absolute;
    top: 0;
    /* Desktop: центрируем по горизонтали */
    left: 50%;
    transform: translateX(-50%);
    width: 400px;   /* дефолт; задаётся Elementor через desc_width */
    box-sizing: border-box;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}

/* Активное описание */
.nio-ct__desc-item.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* Mobile / Tablet: выравниваем по левому краю */
@media (max-width: 1023px) {
    .nio-ct__desc-item {
        left: 0;
        transform: none;
    }
}

/* Текст */
.nio-ct__desc-text {
    box-sizing: border-box;
    color: #5a5a5a;
    font-size: 14px;
    line-height: 21px;
    text-align: center;   /* desktop */
    width: 100%;
    margin: 0;
    padding: 0;
}

@media (max-width: 1023px) {
    .nio-ct__desc-text { text-align: left; }
}

/* ================================================================
   ELEMENTOR EDITOR — фиксы для превью
   ================================================================ */
.elementor-editor-active .nio-ct__slide:first-child {
    position: relative;
    opacity: 1;
}
.elementor-editor-active .nio-ct__desc-item {
    position: relative !important;
    left: auto !important;
    transform: none !important;
    margin-left: auto !important;    /* центрируем блок описания (десктоп), как на фронте */
    margin-right: auto !important;
    opacity: 1 !important;
    display: none;
}
.elementor-editor-active .nio-ct__desc-item.is-active {
    display: block;
}
.elementor-editor-active .nio-ct__desc-wrap {
    height: auto !important;
    overflow: visible;
}

/* Mobile/Tablet в редакторе: описание по левому краю, как на фронте */
@media (max-width: 1023px) {
    .elementor-editor-active .nio-ct__desc-item {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}

/* ================================================================
   Курсор-рука на изображении (как в NIO Models). Над табами — не трогаем.
   ================================================================ */
.nio-ct__media { cursor: grab; }
.nio-ct__media:active { cursor: grabbing; }
.nio-ct__arrow { cursor: pointer; }

/* ================================================================
   Подсказка с заголовком слайда — один в один как в nio_models/nio_colors
   ================================================================ */
.nio-ct__tip {
    position: fixed;
    z-index: 1000;
    padding: 6px 11px;
    background: #1d1d1f;
    color: #fff;
    font-size: 10px;
    line-height: 1.4;
    white-space: nowrap;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
}
.nio-ct__tip.is-on { opacity: 1; }

/* подсказка только на десктопе */
@media (max-width: 1024px){ .nio-ct__tip{ display: none !important; } }