.racechip-slider {
    position: relative;
    background: #0a0a0a;
    overflow: hidden;
}
.racechip-slider__track {
    position: relative;
    display: grid;
    grid-template-areas: "stack";
}
.racechip-slider__slide {
    grid-area: stack;
    position: relative;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease;
    pointer-events: none;
}
.racechip-slider__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.racechip-slider__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.racechip-slider__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.6) 50%, rgba(10,10,10,0.3) 100%);
}
/* Arrows */
.racechip-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: background .2s;
}
.racechip-slider__arrow:hover { background: rgba(255, 255, 255, 0.18); }
.racechip-slider__arrow--prev { left: 20px; }
.racechip-slider__arrow--next { right: 20px; }
/* Footer */
.racechip-slider__footer {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
}
.racechip-slider__counter {
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: .02em;
}
.racechip-slider__counter span { color: #EC5B13; }
.racechip-slider__progress {
    display: flex;
    gap: 8px;
    flex: 1;
    max-width: 280px;
    margin-left: 30px;
}
.racechip-slider__dot {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.15);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background .3s;
}
.racechip-slider__dot.is-active { background: #EC5B13; }

@media (max-width: 768px) {
    .racechip-slider__arrow { width: 40px; height: 40px; font-size: 24px; }
    .racechip-slider__arrow--prev { left: 10px; }
    .racechip-slider__arrow--next { right: 10px; }
    .racechip-slider__footer { padding: 0 20px; bottom: 12px; }
    .racechip-slider__counter { font-size: 20px; }
    .racechip-slider__progress { max-width: 140px; margin-left: 16px; }
}