/* Contenedor Principal */
.ms-text-ticker-custom {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center; /* Centrado vertical */
}

/* El Wrapper */
.ms-tt-wrap {
    display: flex;
    flex-wrap: nowrap;
    /* Importante: Dejamos que el contenido fluya */
    width: max-content; 
    will-change: transform;
}

/* Las Listas (UL) */
.ms-tt {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    
    /* LA SOLUCIÓN: */
    /* Nunca forzamos un ancho fijo, dejamos que sea el máximo del contenido */
    width: max-content; 
    flex-shrink: 0; /* Prohibido encogerse */
}

/* Items */
.ms-tt__text {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-shrink: 0; /* Prohibido aplastarse entre sí */
    white-space: nowrap;
    margin: 0; /* El margen lo controla el PHP/JS en el gap */
}

/* Imágenes */
.ms-tt__text.img {
    height: 100%; /* Sigue la altura del control deslizante */
}

.ms-tt__text.img img {
    height: 100%; 
    width: auto; /* Mantiene proporción */
    max-width: none; /* Evita que CSS del tema las limite */
    display: block;
    object-fit: contain;
}

/* --- ANIMACIÓN --- */
/* Animamos todo el wrapper hacia la izquierda un 50% (la mitad exacta) */
@keyframes ticker-scroll {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

.ms-tt-wrap.ticker-active {
    animation: ticker-scroll var(--ticker-duration, 20s) linear infinite;
}

/* Dirección Derecha */
.ms-tt-wrap[data-direction="right"] {
    flex-direction: row-reverse;
}
.ms-tt-wrap[data-direction="right"].ticker-active {
    animation-direction: reverse;
}

/* Pausa al Hover */
.ms-tt-wrap[data-hover="stop"]:hover {
    animation-play-state: paused;
}