.nexura-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.nexura-carousel-track {
    display: flex;
    transition: transform 0.5s ease;
}

.nexura-carousel-track.continuous {
    display: flex;
    width: calc(100% * (var(--total-items) + var(--items-per-view)) / var(--items-per-view));
    animation: carousel-scroll var(--scroll-duration, 20s) linear infinite;
}

@keyframes carousel-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Move only the width of the originals */
        transform: translateX(calc(-100% * var(--total-items) / (var(--total-items) + var(--items-per-view))));
    }
}

.nexura-carousel-item {
    flex: 0 0 auto;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.nexura-carousel-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: all 0.3s ease;
}

/* Grayscale Effect */
.nexura-carousel.grayscale .nexura-carousel-item img {
    filter: grayscale(100%);
}

.nexura-carousel.grayscale .nexura-carousel-item:hover img {
    filter: grayscale(0%);
}

/* Opacity Effect */
.nexura-carousel.opacity .nexura-carousel-item img {
    opacity: 0.6;
}

.nexura-carousel.opacity .nexura-carousel-item:hover img {
    opacity: 1;
}

/* Navigation Arrows */
.nexura-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}

.nexura-carousel-arrow:hover {
    background: rgba(0, 0, 0, 0.8);
}

.nexura-carousel-arrow.prev {
    left: -50px;
}

.nexura-carousel-arrow.next {
    right: -50px;
}

.nexura-carousel:hover .nexura-carousel-arrow.prev {
    left: 10px;
}

.nexura-carousel:hover .nexura-carousel-arrow.next {
    right: 10px;
}

/* Editor Specific Styles - Better Preview */
.elementor-editor-active .nexura-carousel,
.nexura-carousel.editor-preview {
    overflow: visible;
}

/*.elementor-editor-active .nexura-carousel-track,*/
/*.nexura-carousel.editor-preview .nexura-carousel-track {*/
/*    display: flex;*/
/*    animation: none !important;*/
/*    width: 100% !important;*/
/*    overflow-x: auto;*/
/*    overflow-y: hidden;*/
/*    scrollbar-width: thin;*/
/*}*/

.elementor-editor-active .nexura-carousel-track.continuous {
    animation-play-state: running !important;
}

.elementor-editor-active .nexura-carousel-track::-webkit-scrollbar {
    height: 8px;
}

.elementor-editor-active .nexura-carousel-track::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.elementor-editor-active .nexura-carousel-track::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.elementor-editor-active .nexura-carousel-item,
.nexura-carousel.editor-preview .nexura-carousel-item {
    flex: 0 0 calc(100% / var(--items-per-view, 4));
    min-width: 120px;
    box-sizing: border-box;
}

/* Responsive behavior in editor */
@media (max-width: 1024px) {
    .elementor-editor-active .nexura-carousel-item,
    .nexura-carousel.editor-preview .nexura-carousel-item {
        flex: 0 0 calc(100% / var(--items-tablet, 3));
    }
}

@media (max-width: 767px) {
    .elementor-editor-active .nexura-carousel-item,
    .nexura-carousel.editor-preview .nexura-carousel-item {
        flex: 0 0 calc(100% / var(--items-mobile, 2));
    }
}