/* ==================================== */
/* 🚀 Ticker Container (The Viewport) */
/* ==================================== */
.mj-gsap-ticker-container {
    /* Critical for hiding scrolling content */
    overflow: hidden;
    /* width: 100%; (Already there, good) */
    /* white-space: nowrap; (We'll move this control to the inner wrapper) */
    
    width: 100%;
    padding: 12px 0;
    box-sizing: border-box;
    position: relative;
    transition: background-color .3s ease;
    cursor: pointer;
    /* Optional: Sets a baseline for vertical alignment */
    line-height: 1; 
}

/* Hover effect on the entire bar */
.mj-gsap-ticker-container:hover {
    background-color: var(--hover-bg, transparent) !important;
}

/* ==================================== */
/* ✨ NEW: Inner Wrapper (The Moving Element) */
/* ==================================== */
.mj-gsap-ticker-inner {
    /* CRITICAL FIX 1: Make the original and clone sit side-by-side */
    display: flex;
    /* CRITICAL FIX 2: Prevent wrapping when the animation content is wider */
    white-space: nowrap;
    /* Optimize animation performance */
    will-change: transform;
    /* Ensure no unexpected spacing at the beginning */
    margin-left: 0;
}


/* ==================================== */
/* 📜 Ticker Content (Original and Clone) */
/* ==================================== */
/* Both the original and clone elements will have this class */
.mj-gsap-ticker {
    /* CRITICAL FIX 3: Ensure this element only takes up the space of its content */
    display: inline-flex; /* Use inline-flex to simplify spacing and alignment within */
    flex-shrink: 0; /* Prevents the items from squishing in the flex container */
    
    /* will-change: transform; (Moved this to the inner wrapper) */
}

/* ==================================== */
/* 🏷️ Ticker Items and Separators */
/* ==================================== */
.mj-gsap-ticker a,
.mj-gsap-ticker span,
.mj-gsap-ticker .mj-separator-text,
.mj-gsap-ticker .mj-separator-icon {
    /* Ensure all items align in the middle vertically */
    display: inline-block;
    vertical-align: middle; 
    
    /* Keep these for visual control */
    padding: 0 5px; 
    line-height: 1;
    color: inherit !important;
}

.mj-gsap-ticker a {
    text-decoration: none;
}

/* Separators (Minor optimization to combine selectors) */
.mj-gsap-ticker .mj-separator-icon svg {
    height: 1em;
    width: 1em;
    vertical-align: middle;
    fill: currentColor;
}

/* No text selection */
.mj-gsap-ticker-container * {
    user-select: none;
}