/* Logo Showcase Widget Styles */
.logo-showcase-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: block;
}

.logo-item {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.logo-inner {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-item img {
    display: block;
    max-width: 100%;
    height: auto;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Grayscale and Hover color reveal controls */
.logo-showcase-grayscale-yes .logo-item img {
    filter: grayscale(100%);
    opacity: 0.7;
}

.logo-showcase-grayscale-yes.logo-showcase-hover-reveal-yes .logo-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Grid Layout */
.logo-showcase-grid {
    display: grid;
    align-items: center;
    justify-items: center;
}

/* Justified Layout */
.logo-showcase-justified {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* Carousel / Marquee */
.logo-layout-carousel.swiper,
.logo-layout-carousel.swiper-container {
    overflow: hidden;
    width: 100%;
}

.logo-layout-carousel .swiper-wrapper {
    display: flex;
    align-items: center;
    overflow: visible !important;
}

.logo-layout-carousel .swiper-slide {
    flex-shrink: 0;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Geen transition op de slides van het carousel, anders animeren de breedtes bij de start */
.logo-layout-carousel .logo-item {
    transition: none !important;
}

/* Verberg het carousel tot alles klaarstaat */
.logo-layout-carousel {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.logo-layout-carousel.is-ready {
    opacity: 1;
}

.elementor-editor-active .logo-layout-carousel {
    opacity: 1;
}

/* Slider Custom Navigation triggers styling */
.slider-nav-trigger {
    cursor: pointer;
    user-select: none;
    display: inline-block;
}