.wpb-carousel-container {
    position: relative;
    width: 100%;
    margin-bottom: 50px;
    /* Ensure space for bottom arrows */
    overflow: visible;
    /* CRITICAL: Ensure arrows outside are visible */
}

.wpb-carousel-swiper {
    width: 100%;
    height: 100%;
}

.wpb-carousel-swiper .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide content vertically */
    display: flex;
    justify-content: center;
    align-items: center;
}

.wpb-carousel-swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* desktop drag fix */
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    /* Let clicks pass through to Swiper wrapper if needed, but this disables right click etc. */
}

/* Arrow Customization */
.wpb-carousel-container .swiper-button-prev::after,
.wpb-carousel-container .swiper-button-next::after {
    display: none;
    /* Hide default Swiper arrows */
}

.wpb-carousel-container .swiper-button-prev,
.wpb-carousel-container .swiper-button-next {
    /* Allow custom sizing */
    width: 40px;
    /* Default size if not set */
    height: 40px;
    z-index: 10;
    /* Default visibility if no color set */
    color: #333;
    font-size: 24px;
}

/* Positioning classes */
.wpb-carousel-container.arrow-pos-top-right .swiper-button-prev,
.wpb-carousel-container.arrow-pos-top-right .swiper-button-next {
    top: -40px;
    right: 0;
    left: auto;
    margin: 0;
}

.wpb-carousel-container.arrow-pos-top-right .swiper-button-prev {
    right: 50px;
    /* Offset for next button */
}

.wpb-carousel-container.arrow-pos-bottom-right .swiper-button-prev,
.wpb-carousel-container.arrow-pos-bottom-right .swiper-button-next {
    top: auto;
    bottom: -40px;
    right: 0;
    left: auto;
    margin: 0;
}

.wpb-carousel-container.arrow-pos-bottom-right .swiper-button-prev {
    right: 50px;
}

.wpb-carousel-container.arrow-pos-bottom-center .swiper-button-prev,
.wpb-carousel-container.arrow-pos-bottom-center .swiper-button-next {
    top: auto;
    bottom: -40px;
    margin: 0;
}

.wpb-carousel-container.arrow-pos-bottom-center .swiper-button-prev {
    left: calc(50% - 30px);
    /* Center minus half gap */
    transform: none;
}

.wpb-carousel-container.arrow-pos-bottom-center .swiper-button-next {
    right: calc(50% - 30px);
    transform: none;
    left: auto;
}

/* Middle is default Swiper behavior usually, but let's ensure */
.wpb-carousel-container.arrow-pos-middle .swiper-button-prev {
    left: 10px;
}

.wpb-carousel-container.arrow-pos-middle .swiper-button-next {
    right: 10px;
}