/* The Dev Elementor Carousel — Widget Styles */

.the-dev-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    --the-dev-slide-gap: 10px;
}

/* Slides: each child is a real Elementor container (.e-con) wearing .swiper-slide. */
.the-dev-carousel > .swiper-wrapper > .swiper-slide,
.the-dev-carousel > .swiper-wrapper > .the-dev-carousel-slide {
    height: auto;          /* let Elementor container drive height */
    min-width: 0;          /* allow flex shrink */
    box-sizing: border-box;
}

/* When Swiper has not yet initialised (or in editor before init), present slides
   as a horizontal row so the user sees the structure. */
.the-dev-carousel:not(.swiper-initialized) > .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--the-dev-slide-gap);
}

.the-dev-carousel:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide {
    flex: 0 0 auto;
    width: calc((100% - var(--the-dev-slide-gap) * 2) / 3);
}

@media (max-width: 1023px) {
    .the-dev-carousel:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide {
        width: calc((100% - var(--the-dev-slide-gap)) / 2);
    }
}
@media (max-width: 767px) {
    .the-dev-carousel:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide {
        width: 100%;
    }
}

/* Arrows */
.the-dev-carousel > .the-dev-carousel-prev,
.the-dev-carousel > .the-dev-carousel-next {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: 0;
    cursor: pointer;
    line-height: 1;
    transform: translateY(-50%);
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.the-dev-carousel > .the-dev-carousel-prev::after,
.the-dev-carousel > .the-dev-carousel-next::after {
    content: none; /* override Swiper's default arrow glyph */
}

.the-dev-carousel-arrows-inside .the-dev-carousel-prev { left: 10px; }
.the-dev-carousel-arrows-inside .the-dev-carousel-next { right: 10px; }

.the-dev-carousel-arrows-outside .the-dev-carousel-prev { left: -3.5em; }
.the-dev-carousel-arrows-outside .the-dev-carousel-next { right: -3.5em; }

.the-dev-carousel-arrows-outside { padding-inline: 3.75em; overflow: visible; }

.the-dev-carousel > .the-dev-carousel-prev.swiper-button-disabled,
.the-dev-carousel > .the-dev-carousel-next.swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Pagination */
.the-dev-carousel > .swiper-pagination {
    position: relative;
    margin-top: 20px;
    text-align: center;
}

.the-dev-carousel .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 4px;
}

.the-dev-carousel .swiper-pagination-progressbar {
    position: relative;
    height: 3px;
    margin-top: 20px;
    background: rgba(0, 0, 0, 0.15);
}

.the-dev-carousel .swiper-pagination-fraction {
    font-size: 14px;
}

/* Marquee mode — continuous water-flow scroll.
   `prefix_class` adds .the-dev-carousel-marquee-yes onto the widget wrapper
   when Smooth Marquee Mode is enabled. Force linear timing so the slides
   move at a constant pace instead of Swiper's default ease-out curve. */
.the-dev-carousel-marquee-yes .the-dev-carousel .swiper-wrapper {
    transition-timing-function: linear !important;
}

.the-dev-carousel-marquee-yes .the-dev-carousel {
    /* Hide pointer cursor; marquee disables drag in JS. */
    cursor: default;
}

/* RTL helper */
.the-dev-carousel[dir="rtl"] .the-dev-carousel-arrows-inside .the-dev-carousel-prev { left: auto; right: 10px; }
.the-dev-carousel[dir="rtl"] .the-dev-carousel-arrows-inside .the-dev-carousel-next { right: auto; left: 10px; }