/* ===== Text with Icon Carousel ===== */
.wr-tic-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Edge fade overlays */
.wr-tic-wrapper.wr-tic-fade::before,
.wr-tic-wrapper.wr-tic-fade::after {
    content: '';
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.wr-tic-wrapper.wr-tic-fade::before {
    left: 0;
    background: linear-gradient(to right, #ffffff, transparent);
}

.wr-tic-wrapper.wr-tic-fade::after {
    right: 0;
    background: linear-gradient(to left, #ffffff, transparent);
}

.wr-tic-track {
    display: flex;
    width: max-content;
    max-width: none; /* Prevent flex container from shrinking to parent width */
}

.wr-tic-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: #e8e6e1;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    flex-shrink: 0;
}

.wr-tic-item:hover {
    transform: translateY(-1px);
}

.wr-tic-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1;
}

.wr-tic-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.wr-tic-text {
    line-height: 1.4;
}
/* ===== Sticky Behaviour ===== */

/*
 * .wr-tic-sticky-placeholder  — sits in the normal document flow to
 *   reserve the space the wrapper occupied before it was pulled out.
 *   Height is written by JS once the wrapper is measured.
 */
.wr-tic-sticky-placeholder {
    display: none;          /* hidden until JS activates sticky */
    width: 100%;
}

/*
 * Applied by JS when sticky is active.
 * `top` and `z-index` are set inline by JS (per-device responsive values).
 */
.wr-tic-sticky.wr-tic-sticky-active {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    /* transition duration is set inline by JS from the control value */
    transition-property: transform;
    transition-timing-function: ease;
    transform: translateY(0);
    will-change: transform;
}

/* Slide out upward when the user scrolls down */
.wr-tic-sticky.wr-tic-sticky-active.wr-tic-sticky--hidden {
    transform: translateY(-110%);
}

/* ===== Infinite scroll keyframes — JS sets duration based on speed setting ===== */
@keyframes wr-tic-scroll-ltr {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes wr-tic-scroll-rtl {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}