/* ═══════════════════════════════════════════════════
   Marquee Ticker Widget — marquee-ticker.css
   ═══════════════════════════════════════════════════ */

.mt-ticker-wrap {
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #1a1a1a;
    padding: 10px 0;
    position: relative;
    /* Fade edges for a polished look */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 6%,
        black 94%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 6%,
        black 94%,
        transparent 100%
    );
}

/* ── Track: holds all duplicate sets side by side ── */
.mt-ticker-track {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
    /* JS sets the animation */
}

/* ── One set of items ── */
.mt-set {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    white-space: nowrap;
}

/* ── Individual item ── */
.mt-item {
    display: inline-flex;
    align-items: center;
    margin-right: 60px; /* overridden by Elementor control */
}

.mt-item-text {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1;
}

.mt-item-sep {
    margin-left: 60px; /* same as item margin-right so spacing is even */
    color: #e8b4b8;
    font-size: 14px;
    line-height: 1;
}

/* ── Pause on hover ── */
.mt-ticker-wrap[data-pause="yes"]:hover .mt-ticker-track {
    animation-play-state: paused !important;
}

/* ── Keyframes (both directions) ── */
@keyframes mt-scroll-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes mt-scroll-right {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}