/* Widget: USP slider */

.cpx-usp-slider {
    /* Pas deze variabelen naar wens aan. */

    /* Ruimte tussen icoontje en tekst binnen één USP. */
    --cpx-usp-icon-gap: 12px;

    /* Ruimte tussen de USP's onderling. */
    --cpx-usp-gap: 64px;

    /* Icoon-afmeting. */
    --cpx-usp-icon-size: 26px;

    /* Kleuren. Icoon via inline-SVG, tekst standaard wit. */
    --cpx-usp-icon-color: #c9ac72;
    --cpx-usp-text-color: #ffffff;

    /* Marquee-snelheid (ms voor één doorloop; hoger = trager). */
    --cpx-usp-speed: 6000;

    width: 100%;
}

.cpx-usp-slider__swiper {
    width: 100%;
    overflow: hidden;
}

/* Lineair laten lopen i.p.v. easing — voor een vloeiende marquee. */
.cpx-usp-slider__swiper .swiper-wrapper {
    transition-timing-function: linear;
}

.cpx-usp-slider__slide {
    display: inline-flex;
    align-items: center;
    gap: var(--cpx-usp-icon-gap);
    width: auto;
}

/* Icoon-container. Inline SVG wordt gekleurd via currentColor / fill / stroke. */
.cpx-usp-slider__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--cpx-usp-icon-size);
    height: var(--cpx-usp-icon-size);
    color: var(--cpx-usp-icon-color);
}

.cpx-usp-slider__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
    stroke: currentColor;
}

.cpx-usp-slider__icon img {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: contain;
}

.cpx-usp-slider__text {
    color: var(--cpx-usp-text-color);
    white-space: nowrap;
}