/**
 * swiper-fix.css
 * Fixes Elementor image carousel (Swiper) layout in corephp context.
 *
 * Problem: Without overflow:hidden + proper flex rules on the Swiper container,
 * all slides render stacked vertically (height = N × slide height), creating
 * a massive white gap instead of a scrolling carousel.
 */

/* --- Container: clip overflowing slides --- */
.elementor-image-carousel-wrapper.swiper {
    overflow: hidden !important;
    width: 100% !important;
    display: block !important;
    position: relative !important;
}

/* --- Wrapper: horizontal flex row, no wrapping --- */
.elementor-image-carousel-wrapper.swiper .swiper-wrapper,
.elementor-image-carousel.swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    will-change: transform;
}

/* --- Each slide: take full width of container, never shrink --- */
.elementor-image-carousel-wrapper.swiper .swiper-slide {
    flex-shrink: 0 !important;
    width: 100% !important;
    height: auto !important;
}

/* --- Image inside slide: fill the slide --- */
.swiper-slide-inner {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.swiper-slide-image {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
}

/* --- Navigation arrows: ensure they are positioned and visible --- */
.elementor-arrows-position-inside .elementor-swiper-button {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    cursor: pointer !important;
    width: 35px !important;
    height: 35px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0,0,0,0.4) !important;
    border-radius: 50% !important;
}

.elementor-arrows-position-inside .elementor-swiper-button-prev {
    left: 10px !important;
}

.elementor-arrows-position-inside .elementor-swiper-button-next {
    right: 10px !important;
}

.elementor-swiper-button svg {
    width: 18px !important;
    height: 18px !important;
    fill: #fff !important;
}