/**
 * IES Trust Bar widget
 * Gradient bar with icon + text items; static row (≤4) on desktop, continuous slider on mobile.
 * Full viewport width (breaks out of Elementor container).
 */

.ies-trust-bar {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    box-sizing: border-box;
}

/* Must stay positioned: it is the containing block for the flare below. Without
 * it the flare resolves against the Elementor container (which Elementor sets
 * position: relative) — and because that container is an ancestor of
 * .ies-trust-bar, the bar's overflow clip no longer applies, so the flare
 * escapes upward out of the bar. */
.ies-trust-bar__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    background: linear-gradient(
        83.52deg,
        var(--ies-primary-dark, #4D4285) 0.7%,
        var(--ies-primary, #5D43DE) 85.38%,
        var(--ies-primary-mid, #A4A2E6) 99.65%
    );
    padding: 16px 24px;
    box-sizing: border-box;
}

/* Decorative glow bleeding in from the top-right, clipped to the bar by
 * .ies-trust-bar's overflow: hidden. Figma node 619-4309 paints it beneath the
 * item row, hence z-index 0 against the row's 1.
 *
 * Doubled up on .ies-trust-bar deliberately. Four pages still carry a legacy
 * `.teal-flare-bg .ies-trust-bar__inner:after` block in container Custom CSS,
 * which styles this same pseudo-element at equal specificity and loads after
 * this file — its z-index: 222 would otherwise put the glow over the text. The
 * extra class outranks it without needing !important. */
.ies-trust-bar.ies-trust-bar--flare .ies-trust-bar__inner::after {
    content: '';
    position: absolute;
    top: -50px;
    right: -80px;
    width: 291px;
    height: 291px;
    background: var(--ies-trust-bar-flare, #6DCAC3);
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}

.ies-trust-bar__items {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 50px;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 100%;
}

.ies-trust-bar__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    white-space: nowrap;
}

.ies-trust-bar__icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ies-trust-bar__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ies-trust-bar__text {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--ies-white, #fff);
}

/* Slider mode (5+ items, or mobile for ≤4 items) */
.ies-trust-bar__items.ies-trust-bar__items--slider,
.ies-trust-bar__items.ies-trust-bar__items--slider-mobile.slick-initialized {
    display: block;
    max-width: 100%;
}

.ies-trust-bar__items.ies-trust-bar__items--slider .ies-trust-bar__item,
.ies-trust-bar__items.ies-trust-bar__items--slider-mobile.slick-initialized .ies-trust-bar__item {
    white-space: nowrap;
}

.ies-trust-bar__items.ies-trust-bar__items--slider .slick-list,
.ies-trust-bar__items.ies-trust-bar__items--slider-mobile.slick-initialized .slick-list {
    margin: 0 -25px;
    overflow: hidden;
}

.ies-trust-bar__items.ies-trust-bar__items--slider .slick-slide,
.ies-trust-bar__items.ies-trust-bar__items--slider-mobile.slick-initialized .slick-slide {
    padding: 0 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ies-trust-bar__items.ies-trust-bar__items--slider .slick-track,
.ies-trust-bar__items.ies-trust-bar__items--slider-mobile.slick-initialized .slick-track {
    display: flex;
    align-items: center;
}

/* No arrows or dots – continuous carousel, pause on hover */
.ies-trust-bar__items.ies-trust-bar__items--slider .slick-prev,
.ies-trust-bar__items.ies-trust-bar__items--slider .slick-next,
.ies-trust-bar__items.ies-trust-bar__items--slider .slick-dots,
.ies-trust-bar__items.ies-trust-bar__items--slider-mobile .slick-prev,
.ies-trust-bar__items.ies-trust-bar__items--slider-mobile .slick-next,
.ies-trust-bar__items.ies-trust-bar__items--slider-mobile .slick-dots {
    display: none !important;
}

.ies-trust-bar__set {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 50px;
    padding-inline-end: 50px;
}

.ies-trust-bar__items.ies-trust-bar__items--marquee {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    max-width: none;
    width: max-content;
    gap: 0;
    animation: ies-trust-bar-scroll var(--trust-bar-speed, 22s) linear infinite;
    will-change: transform;
}

.ies-trust-bar:hover .ies-trust-bar__items--marquee {
    animation-play-state: paused;
}

@keyframes ies-trust-bar-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 767px) {
    .ies-trust-bar__inner {
        padding-left: 0;
        padding-right: 0;
        overflow: hidden;
    }

    .ies-trust-bar__items.ies-trust-bar__items--slider-mobile:not(.slick-initialized):not(.ies-trust-bar__items--marquee) {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow: hidden;
    }
}