.cs-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
}

.cs-slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-slider-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    gap: var(--cs-gap, 20px);
}

.cs-slide {
    flex: 0 0 var(--cs-slide-width, 70%);
    min-width: 400px;
    max-width: 900px;
    transition: all 0.5s ease;
    opacity: var(--cs-side-opacity, 0.4);
    transform: scale(0.88);
    filter: brightness(0.55);
}

.cs-slide.active {
    opacity: 1 !important;
    transform: scale(var(--cs-center-scale, 1.1)) !important;
    filter: brightness(1) grayscale(0%) !important;
    z-index: 20 !important;
}

.cs-slide img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.cs-slide a {
    display: block;
    text-decoration: none;
}

/* Fade nas laterais - slide ativo fica por cima */
.cs-slider-container::before,
.cs-slider-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20%;
    z-index: 5;
    pointer-events: none;
}

.cs-slider-container::before {
    left: 0;
    background: linear-gradient(90deg, var(--cs-fade-color, rgba(0,0,0,0.6)) 0%, transparent 100%);
}

.cs-slider-container::after {
    right: 0;
    background: linear-gradient(-90deg, var(--cs-fade-color, rgba(0,0,0,0.6)) 0%, transparent 100%);
}

/* Setas de navegação */
.cs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) !important;
    width: var(--cs-arrow-size, 50px) !important;
    height: var(--cs-arrow-size, 50px) !important;
    background: var(--cs-arrow-bg, rgba(0,0,0,0.5)) !important;
    color: var(--cs-arrow-color, #fff) !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: all 0.3s ease !important;
    font-size: calc(var(--cs-arrow-size, 50px) * 0.4) !important;
    padding: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
}

.cs-arrow:hover {
    background: var(--cs-arrow-bg-hover, rgba(0,0,0,0.7)) !important;
    transform: translateY(-50%) scale(1.1) !important;
    color: var(--cs-arrow-color, #fff) !important;
}

.cs-arrow.prev {
    left: 10px;
}

.cs-arrow.next {
    right: 10px;
}

.cs-arrow svg {
    width: 50%;
    height: 50%;
    fill: currentColor;
}

/* Dots de navegação */
.cs-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: var(--cs-dot-gap, 10px) !important;
    margin-top: 20px !important;
    padding: 10px 0 !important;
    flex-wrap: wrap !important;
}

.cs-dot {
    width: var(--cs-dot-size, 14px) !important;
    height: var(--cs-dot-size, 14px) !important;
    min-width: var(--cs-dot-size, 14px) !important;
    min-height: var(--cs-dot-size, 14px) !important;
    border-radius: 50% !important;
    background: var(--cs-dot-color, #ccc) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
    display: block !important;
    flex-shrink: 0 !important;
}

.cs-dot.active {
    background: var(--cs-dot-active-color, #333) !important;
    transform: scale(1.2) !important;
}

.cs-dot:hover {
    background: var(--cs-dot-active-color, #333) !important;
    opacity: 0.7 !important;
}

/* Responsivo */
@media (max-width: 768px) {
    .cs-slide {
        flex: 0 0 85%;
        min-width: 240px;
    }
    
    .cs-arrow {
        width: 44px !important;
        height: 44px !important;
        font-size: 18px !important;
    }
    
    .cs-slider-container::before,
    .cs-slider-container::after {
        width: 10%;
    }
}

@media (max-width: 480px) {
    .cs-slide {
        flex: 0 0 90%;
        min-width: 200px;
    }
    
    .cs-arrow {
        width: 40px !important;
        height: 40px !important;
    }
    
    .cs-arrow.prev {
        left: 5px;
    }
    
    .cs-arrow.next {
        right: 5px;
    }
}

/* Tema escuro para o fade */
.cs-slider-container.dark-theme::before {
    background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, transparent 100%);
}

.cs-slider-container.dark-theme::after {
    background: linear-gradient(-90deg, rgba(0,0,0,0.8) 0%, transparent 100%);
}