/* ================================================================
   Car Color Slider  v4.1
   ================================================================ */

.ccs-slider {
    position: relative;
    width: 100%;
    display: block; /* гарантируем block, не flex/grid item collapse */
}

/* ── Track ──
   JS устанавливает явный height в px (не padding-top %),
   чтобы Elementor Flexbox-контейнер не схлопнул высоту в 0.
*/
.ccs-track {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    /* Fallback до загрузки JS: 16:9 */
    min-height: 200px;
}

/* ── Slides ── */
.ccs-slide {
    position: absolute;
    inset: 0;
    visibility: hidden;
    z-index: 0;
}
.ccs-slide.is-active {
    visibility: visible;
    z-index: 2;
    clip-path: inset(0 0% 0 0);
    will-change: clip-path;
}
.ccs-slide.is-leaving {
    visibility: visible;
    z-index: 2;
    will-change: clip-path;
}
.ccs-slide.is-entering {
    visibility: visible;
    z-index: 1;
    clip-path: none;
}

.ccs-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
}

.ccs-car {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 72%;
    max-width: 1050px;
    height: auto;
    object-fit: contain;
    object-position: right bottom;
    transform: translateX(2%);
    z-index: 1;
}

/* ── Dot ball: sphere via radial-gradient ── */
.ccs-dot {
    display: inline-block;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: transform 0.18s ease, filter 0.18s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.28));
}
.ccs-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(
        circle at 35% 35%,
        rgba(255,255,255,0.55) 0%,
        rgba(255,255,255,0.10) 40%,
        rgba(0,0,0,0.00)       60%,
        rgba(0,0,0,0.22)      100%
    );
    pointer-events: none;
}
.ccs-dot-item:hover .ccs-dot,
.ccs-dot-item.is-active .ccs-dot,
.ccs-dots-row .ccs-dot:hover,
.ccs-dots-row .ccs-dot.is-active {
    transform: scale(1.22);
    filter: drop-shadow(0 3px 7px rgba(0,0,0,0.36));
}

/* ── Desktop / Tablet dots (inside track, absolute) ── */
.ccs-dots-wrap {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 140px;
    z-index: 10;
}
.ccs-dots-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}
.ccs-dot-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.ccs-color-name {
    white-space: nowrap;
    font-size: 14px;
    color: #333;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    user-select: none;
}
.ccs-color-name.is-visible          { opacity: 1; }
.ccs-dot-item:hover .ccs-color-name { opacity: 1; }

/* ── Mobile dots wrapper: hidden on desktop ── */
.ccs-dots-mobile-wrap {
    display: none;
}

/* ── Tablet ≤ 1024px ── */
@media (max-width: 1024px) {
    .ccs-car { width: 76%; }
}

/* ================================================================
   MOBILE ≤ 767px

   .ccs-track   — position:relative, overflow:hidden, height задан JS.
                  Это нормальный block в потоке — даёт реальную высоту.
   .ccs-dots-mobile-wrap — display:block ПОСЛЕ трека, в потоке.
                  Занимает свою высоту, не перекрывает ничего.

   НЕ используем position:static/.ccs-slider — это не нужно и
   мешало bounding rect расчётам в JS.
   ================================================================ */
@media (max-width: 767px) {

    .ccs-slider {
        /* position:relative оставляем — нужен для JS getBoundingClientRect */
        display: block;
        width: 100%;
    }

    .ccs-track {
        display: block;
        width: 100%;
        /* height задаётся JS в px — это реальная высота в потоке */
    }

    .ccs-car {
        width: 94%;
        left: 50%;
        right: auto;
        bottom: 0;
        transform: translateX(-50%);
    }

    /* Скрываем вертикальную колонку */
    .ccs-dots-wrap { display: none !important; }

    /* Мобильные dots — обычный блок в потоке ПОСЛЕ трека */
    .ccs-dots-mobile-wrap {
        display: block;
        width: 100%;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .ccs-dots-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        padding: 4px 16px;
    }
    .ccs-dots-row::-webkit-scrollbar { display: none; }

    .ccs-dots-row .ccs-dot {
        flex-shrink: 0;
        scroll-snap-align: center;
        /* Убираем drop-shadow — на светлом фоне виден прямоугольный клип */
        filter: none;
    }
    .ccs-dots-row .ccs-dot::after {
        background: radial-gradient(
            circle at 35% 35%,
            rgba(255,255,255,0.45) 0%,
            rgba(255,255,255,0.08) 45%,
            rgba(0,0,0,0.00)       60%,
            rgba(0,0,0,0.12)      100%
        );
    }
    .ccs-dots-row .ccs-dot:hover,
    .ccs-dots-row .ccs-dot.is-active {
        filter: none;
    }

    .ccs-mobile-label {
        text-align: center;
        margin-top: 8px;
        min-height: 1.4em;
        padding: 0 16px;
    }
}