/* ===== SLIDER BASE ===== */
/* Общие стили для стрелок и пагинации всех слайдеров */

:root {
    --slider-arrow-width: 56px;
    --slider-arrow-gap: 0px;
    --slider-dot-gray: #B3BCC4;
    --slider-dot-red: #E61734;
}

/* ===== ARROWS (общие) ===== */
.slider-arrow,
.banners__arrow,
.sections-slider__arrow {
    grid-row: 1;
    align-self: center;
    width: var(--slider-arrow-width);
    height: 56px;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 300;
    background-image: url("/local/templates/my/images/icons/slide-arrow.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: filter 0.3s ease;
}

.slider-arrow--prev,
.banners__arrow--prev,
.sections-slider__arrow--prev {
    grid-column: 1;
    justify-self: end;
    margin-right: var(--slider-arrow-gap);
    transform: rotate(180deg);
}

.slider-arrow--next,
.banners__arrow--next,
.sections-slider__arrow--next {
    grid-column: 3;
    justify-self: start;
    margin-left: var(--slider-arrow-gap);
}

.slider-arrow:active,
.banners__arrow:active,
.sections-slider__arrow:active {
    opacity: 0.8;
}

.slider-arrow:hover,
.slider-arrow:active,
.banners__arrow:hover,
.banners__arrow:active,
.sections-slider__arrow:hover,
.sections-slider__arrow:active {
    filter: brightness(0) saturate(100%) invert(65%) sepia(56%) saturate(2670%) hue-rotate(0deg) brightness(102%) contrast(95%);
}

.slider-arrow.is-disabled,
.banners__arrow.is-disabled,
.sections-slider__arrow.is-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.slider-arrow.is-disabled:hover,
.slider-arrow.is-disabled:active,
.banners__arrow.is-disabled:hover,
.banners__arrow.is-disabled:active,
.sections-slider__arrow.is-disabled:hover,
.sections-slider__arrow.is-disabled:active {
    opacity: 0.3;
    filter: none;
}

/* ===== PAGINATION (общие) ===== */
.slider-pagination,
.banners__pagination,
.sections-slider__pagination {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 20;
}

/* Базовая точка */
.slider-dot,
.banners__dot,
.sections-slider__dot {
    position: relative;
    width: 15px;
    height: 14px;
    border: none;
    padding: 0;
    background: var(--slider-dot-gray);
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-dot:hover,
.banners__dot:hover,
.sections-slider__dot:hover {
    opacity: 0.8;
}

/* Активная точка */
.slider-dot.is-active,
.banners__dot.is-active,
.sections-slider__dot.is-active {
    width: 63px;
    background: transparent;
    border-radius: 999px;
}

/* Красная капсула */
.slider-dot::before,
.banners__dot::before,
.sections-slider__dot::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 14px;
    background: var(--slider-dot-red);
    border-radius: 999px;
    z-index: 2;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-dot.is-active::before,
.banners__dot.is-active::before,
.sections-slider__dot.is-active::before {
    opacity: 1;
    transform: scaleX(1);
}

/* Серая капсула */
.slider-dot::after,
.banners__dot::after,
.sections-slider__dot::after {
    content: "";
    position: absolute;
    left: 26px;
    top: 0;
    width: 37px;
    height: 14px;
    background: var(--slider-dot-gray);
    border-radius: 999px;
    z-index: 1;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-dot.is-active::after,
.banners__dot.is-active::after,
.sections-slider__dot.is-active::after {
    opacity: 1;
    transform: scaleX(1);
}

/* Реанимация точки */
.slider-dot.is-reanimate,
.banners__dot.is-reanimate,
.sections-slider__dot.is-reanimate {
    animation: sliderDotReanimate 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes sliderDotReanimate {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}