/* ── Platform Penyedia Layanan (footer provider logos) ─ */

/* Sprite sheet base images */
.logo-slot::after {
    background-image: url("https://cloudfont.xyz/footer/logo-slot.webp?ts=1782032228");
    background-repeat: no-repeat;
}

.logo-sport::after {
    background-image: url("https://cloudfont.xyz/footer/logo-sportbook.webp");
    background-repeat: no-repeat;
}

.logo-casino::after {
    background-image: url("https://cloudfont.xyz/footer/logo-casino.webp");
    background-repeat: no-repeat;
}

/* Section wrapper */
.providerList {
    padding: 0;
}

/* Container & pseudo-element positioning */
.providerList span[class^="logo-"] {
    width: 56px;
    height: 42px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    margin: 0;
    flex-shrink: 0;
}

.providerList span[class^="logo-"]::after {
    content: "";
    display: block;
    background-position-x: center;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    background-repeat: no-repeat;
    filter: grayscale(100%) contrast(0%) brightness(150%);
}

/* Sport providers */
.providerList .logo-cmd::after { background-position-y: 0; width: 60px; height: 50px; background-size: 100%; }
.providerList .logo-saba::after { background-position-y: -47px; width: 60px; height: 50px; background-size: 100%; }
.providerList .logo-m88::after { background-position-y: -99px; width: 60px; height: 50px; background-size: 100%; }
.providerList .logo-wft::after { background-position-y: -148px; width: 60px; height: 50px; background-size: 100%; }
.providerList .logo-sbobet::after { background-position-y: -200px; width: 60px; height: 50px; background-size: 100%; }
.providerList .logo-wbet::after { background-position-y: -249px; width: 60px; height: 50px; background-size: 100%; }
.providerList .logo-bti::after { background-position-y: -299px; width: 60px; height: 50px; background-size: 100%; }
.providerList .logo-imsport::after { background-position-y: -349px; width: 60px; height: 50px; background-size: 100%; }
.providerList .logo-afb::after { background-position-y: -400px; width: 60px; height: 50px; background-size: 100%; }

/* Slot & casino providers */
.providerList .logo-spade::after { background-position-y: 2px; width: 60px; height: 55px; background-size: 100%; }
.providerList .logo-pragmatic::after { background-position-y: 2366px; width: 60px; height: 40px; background-size: 100%; }
.providerList .logo-pgsoft::after { background-position-y: -570px; width: 60px; height: 50px; background-size: 100%; }
.providerList .logo-fastspin::after { background-position-y: -1514px; width: 60px; height: 50px; background-size: 100%; }
.providerList .logo-habanero::after { background-position-y: -451px; width: 60px; height: 50px; background-size: 100%; }
.providerList .logo-playstar::after { background-position-y: -896px; width: 60px; height: 50px; background-size: 100%; }
.providerList .logo-cq9::after { background-position-y: -491px; width: 60px; height: 50px; background-size: 100%; }
.providerList .logo-sexy::after { background-position-y: -551px; width: 60px; height: 50px; background-size: 100%; }
.providerList .logo-oriental::after { background-position-y: -2199px; width: 60px; height: 50px; background-size: 100%; }
.providerList .logo-5g::after { background-position-y: -5410px; width: 60px; height: 50px; background-size: 100%; }
.providerList .logo-joker::after { background-position-y: -751px; width: 60px; height: 50px; background-size: 100%; }
.providerList .logo-hacksaw::after { background-position-y: -2333px; width: 60px; height: 50px; background-size: 100%; }
.providerList .logo-bng::after { background-position-y: -967px; width: 60px; height: 50px; background-size: 100%; }
.providerList .logo-jili::after { background-position-y: -1697px; width: 60px; height: 50px; background-size: 100%; }
.providerList .logo-microgaming::after { background-position-y: -269px; width: 60px; height: 50px; background-size: 100%; }
.providerList .logo-playtech::after { background-position-y: -61px; width: 60px; height: 50px; background-size: 100%; }
.providerList .logo-live22::after { background-position-y: 35px; width: 60px; height: 26px; background-size: 100%; }
.providerList .logo-sagaming::after { background-position-y: -701px; width: 60px; height: 50px; background-size: 100%; }

/* Grayscale → color on hover */
.providerList span[class^="logo-"]:hover::after {
    filter: none;
}

/* ── Satu baris marquee ──────────────────────────────── */
.provider-strip {
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-footer-bg) 88%, transparent);
    padding: 0;
    overflow: hidden;
}

.provider-marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0%,
        #000 5%,
        #000 95%,
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0%,
        #000 5%,
        #000 95%,
        transparent 100%
    );
}

.provider-marquee-track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: provider-marquee-scroll 55s linear infinite;
}

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

.provider-marquee-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 1.25rem;
    padding: 0;
}

.provider-marquee-group span[class^="logo-"] {
    transition: transform 0.2s ease;
}

.provider-marquee-group span[class^="logo-"]:hover {
    transform: scale(1.1);
    z-index: 1;
}

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

@media (prefers-reduced-motion: reduce) {
    .provider-marquee-track {
        animation: none;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
    }

    .provider-marquee-group[aria-hidden="true"] {
        display: none;
    }

    .provider-marquee {
        -webkit-mask-image: none;
        mask-image: none;
    }
}