/* Базовые стили слайдера */
    .custom-slider {
        position: relative;
        width: 100%;
        max-width: 482px;
        height: 192px;
        margin: 0 auto;
        overflow: hidden;
        background: #FFF;
        perspective: 1000px;
        padding-bottom: 40px;
        /* Нужно для 3D-эффекта flip */

    cursor: grab; /* Меняет курсор мыши на "руку", намекая на перетаскивание */
    user-select: none; /* Запрещает выделение элементов при свайпах */
    }

    .custom-slider:active {
    cursor: grabbing; /* Курсор сжатой руки в момент удержания клика */
}

    .slider-track {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 1;
        transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease-in-out;
    }

    .slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Активный слайд всегда на переднем плане */
    .slide.active {
        opacity: 1;
        z-index: 2;
        transform: translate(0, 0) scale(1) rotateY(0deg) !important;
    }

    /* --- НАШИ РАЗНООБРАЗНЫЕ ЭФФЕКТЫ ДЛЯ ПОЯВЛЕНИЯ --- */

    /* Эффект 1: Вылет справа налево */
    .slide.effect-slide-left {
        transform: translateX(100%);
    }

    /* Эффект 2: Вылет снизу вверх */
    .slide.effect-slide-up {
        transform: translateY(100%);
    }

    /* Эффект 3: Масштабирование (вырастает из глубины) */
    .slide.effect-zoom {
        transform: scale(0.5);
    }

    /* Эффект 4: 3D-Переворот (Flip) */
    .slide.effect-flip {
        transform: rotateY(-90deg);
        transform-origin: center left;
    }

    /* Эффект 5: Обычный плавный Fade (если классов нет, сработает базовый opacity) */
    .slide.effect-fade {
        transform: scale(1);
    }

    /* Точки навигации */
    .slider-dots {
        position: relative;
        bottom: 30px;
        /* padding-top: 20px; */
        left: 51%;
        transform: translateX(-50%);
        display: flex;
        /* gap: 3px; */
        z-index: 10;
    }


    /* Стрелки "Следующий" и "Предыдущий" */
.prev_slide_btn,
.next_slide_btn {
    position: absolute;
    top: 50%; /* Центрируем стрелки строго по вертикали слайдера */
    transform: translateY(-50%); /* Идеальный центр независимо от высоты */
    display: block;
    width: 30px;
    height: 30px;
    z-index: 15;
    background: url("https://liart.ru/media/files/script/nivo/arrows.png") no-repeat;
    cursor: pointer;
    /* Начальное состояние: стрелки полностью скрыты */
    opacity: 0;
    visibility: hidden;
    
    /* Анимация плавного появления стрелок при наведении */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Показываем стрелки, ТОЛЬКО когда мышь находится над слайдером */
.custom-slider:hover .prev_slide_btn,
.custom-slider:hover .next_slide_btn {
    opacity: 1;
    visibility: visible;
}

/* Эффект легкого затемнения самой стрелки при непосредственном наведении на неё */
.prev_slide_btn:hover,
.next_slide_btn:hover {
    opacity: 0.7 !important; /* !important нужен, чтобы перебить значение :hover от родителя */
}

.prev_slide_btn {
    left: 15px;
    background-position: 0 0;
}

.next_slide_btn {
    right: 15px;
    background-position: -30px 0; /* Сдвиг спрайта для правой стрелки */
}
/* Точки навигации */
.dot {
    display: block;
    width: 22px;
    height: 22px;
    background: url("https://liart.ru/media/files/script/nivo/bullets.png") no-repeat;
    border: 0;
    margin-right: 3px;
    cursor: pointer;
    /* Убрали старый float: left и text-indent, так как flex-контейнер сам их выстроит */
}

.dot.active {
    background-position: 0 -22px; /* Сдвиг спрайта для активной точки */
}