.marquee-ticker-container {
    --ticker-bg: #1c1c1c;
    --ticker-label-bg: #e15436;
    --ticker-label-color: #ffffff;
    --ticker-text-color: #ffffff;
    --ticker-text-hover: #e15436;
    --ticker-gap: 40px;
    --ticker-speed: 20s;
    --ticker-direction: normal;
    --ticker-sep-color: #e15436;

    display: flex;
    align-items: stretch;
    background-color: var(--ticker-bg);
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    font-family: inherit;
    width: 100%;
}

.ticker-label {
    background-color: var(--ticker-label-bg);
    color: var(--ticker-label-color);
    padding: 10px 20px;
    font-weight: bold;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-shadow: -3px 0 10px rgba(0, 0, 0, 0.2);
}

.marquee-ticker-wrapper {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
}

.marquee-ticker-inner {
    display: flex;
    width: 100%;
    align-items: center;
}

.marquee-ticker-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    animation: marqueeAnimationRTL_a53b21e1 var(--ticker-speed) linear infinite;
    animation-direction: var(--ticker-direction);
    gap: var(--ticker-gap);
    padding-right: var(--ticker-gap); /* Match the gap exactly to make it seamless */
}

.marquee-ticker-wrapper:hover .marquee-ticker-track {
    animation-play-state: paused;
}

.ticker-item {
    padding: 0;
    color: var(--ticker-text-color);
    text-decoration: none;
    transition: color 0.3s ease;
    cursor: default;
    display: inline-flex;
    align-items: center;
}

a.ticker-item {
    cursor: pointer;
}

a.ticker-item:hover {
    color: var(--ticker-text-hover);
}

.ticker-separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--ticker-gap);
    color: var(--ticker-sep-color);
}

.ticker-separator svg {
    fill: var(--ticker-sep-color);
    width: 1em;
    height: 1em;
    display: inline-block;
}

/* RTL: Move to left flawlessly, exact matching of 50% translates */
@keyframes marqueeAnimationRTL_a53b21e1 {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(50%, 0, 0); /* Moves right-to-left seamlessly in RTL */
    }
}

/* LTR Support just in case direction is normal/reversed */
[dir="ltr"] .marquee-ticker-track {
    animation: marqueeAnimationLTR_a53b21e1 var(--ticker-speed) linear infinite;
}

@keyframes marqueeAnimationLTR_a53b21e1 {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (max-width: 767px) {
    .ticker-label {
        padding: 8px 12px;
        font-size: 0.85em;
    }
    .ticker-item {
        font-size: 0.9em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-ticker-track {
        animation: none !important;
        overflow-x: auto;
        white-space: normal;
        flex-wrap: wrap;
    }
}