/**
 * UNIFIED MARQUEE CSS
 * For both Lottery Winners and Ticker Items
 * Both use the same animation and speed logic
 */

 :root {
    --marquee-speed: 20s; /* Fallback if dynamic speed not set */
}

/* ============================================
   SHARED MARQUEE ANIMATION
   ============================================ */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* ============================================
   WINNERS STATIC TEXT (No Animation)
   ============================================ */
.winners-static-text {
    width: 100%;
    padding: 15px 0 0;
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    color: #00bcd4;
    background: #ffffff;
}

.winners-static-text span {
    padding: 0 8px;
}

.winners-static-text .separator {
    color: #00bcd4;
}

/* ============================================
   LOTTERY WINNERS MARQUEE
   ============================================ */
.lottery-winners-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    background: #ffffff;
    position: relative;
    padding: 20px 0;
}

.lottery-winners-list.instant-wins {
    display: flex !important;
    flex-wrap: nowrap !important;
    animation: scroll var(--marquee-speed) linear infinite;
    width: fit-content !important;
    align-items: center;
}

.lottery-winners-list.instant-wins:hover {
    animation-play-state: paused;
}

.lottery-winners-list.instant-wins .instant-win {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    margin-bottom: 0 !important;
    display: inline-flex !important;
    position: relative;
}

.lottery-winners-list.instant-wins .instant-win.instant-won {
    background-color: #00b0f0 !important;
    opacity: 1 !important;
    padding: 0;
}

.lottery-winners-list.instant-wins .instant-win:nth-child(1) {
    border-left: 0 !important;
}

/* ============================================
   TICKER ITEMS MARQUEE
   ============================================ */
.ticker-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    padding: 15px 0;
}

.ticker-marquee-wrapper .slick.marquee {
    display: flex !important;
    flex-wrap: nowrap !important;
    animation: scroll var(--marquee-speed) linear infinite;
    width: fit-content !important;
    align-items: center;
}

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

.ticker-marquee-wrapper .slick-slide {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    margin-right: 15px;
    display: inline-block !important;
}

.ticker-marquee-wrapper .slick-slide .inner.slick-inner {
    white-space: nowrap;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .winners-static-text {
        font-size: 20px;
    }
    
    .lottery-winners-marquee-wrapper {
        padding: 15px 0;
    }
    
    .ticker-marquee-wrapper {
        padding: 10px 0;
    }
    
}

@media (max-width: 480px) {
    .winners-static-text {
        font-size: 18px;
        padding: 10px 0;
    }
    
    .winners-static-text span {
        padding: 0 5px;
    }
}

/* ============================================
   NOTES
   ============================================
   
   Both marquees now use:
   1. Same animation (@keyframes scroll)
   2. Same speed variable (--marquee-speed)
   3. Same calculation logic in PHP
   4. Same behavior (pause on hover, seamless loop)
   
   Speed is set dynamically via inline style:
   style="--marquee-speed: 25s;"
   
   This ensures consistent speed across all marquees
   based on their individual content counts.
   
   ============================================ */