/*
Theme Name: stars-tg
Author: WebDev
Description: Тема WordPress, созданная на основе HTML-шаблона для продажи звезд Telegram.
Version: 1.0
*/

/* Purchase ticker */
.purchase-ticker {
    background-color: #0F0F1A;
    border-bottom: 1px solid #2D2D3A;
    padding: 0.75rem 0;
    overflow: hidden;
    position: relative;
}

.purchase-ticker__viewport {
    position: relative;
    overflow: hidden;
}

.purchase-ticker__viewport::before,
.purchase-ticker__viewport::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 56px;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.2s ease-in-out;
}

.purchase-ticker__viewport::before {
    left: 0;
    background: linear-gradient(90deg, #0F0F1A 0%, rgba(15, 15, 26, 0) 100%);
}

.purchase-ticker__viewport::after {
    right: 0;
    background: linear-gradient(270deg, #0F0F1A 0%, rgba(15, 15, 26, 0) 100%);
}

.purchase-ticker__track {
    display: inline-flex;
    align-items: center;
    gap: 2.5rem;
    animation: purchase-ticker-scroll var(--purchase-ticker-duration, 36s) linear infinite;
    will-change: transform;
}

.purchase-ticker--empty .purchase-ticker__track {
    animation: none;
    justify-content: center;
}

.purchase-ticker--empty .purchase-ticker__viewport::before,
.purchase-ticker--empty .purchase-ticker__viewport::after {
    opacity: 0;
}

.purchase-ticker__viewport:hover .purchase-ticker__track {
    animation-play-state: paused;
}

.purchase-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(226, 232, 240, 0.9);
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.purchase-ticker__user {
    color: #ffffff;
    font-weight: 600;
}

.purchase-ticker__action {
    color: rgba(148, 163, 184, 0.9);
    font-weight: 500;
}

.purchase-ticker__stars {
    color: #8E6FF7;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.purchase-ticker__item i {
    color: #8E6FF7;
    font-size: 0.95rem;
}

.purchase-ticker__empty {
    color: rgba(148, 163, 184, 0.9);
    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;
    white-space: normal;
}

@keyframes purchase-ticker-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    .purchase-ticker {
        padding: 0.6rem 0;
    }

    .purchase-ticker__track {
        gap: 1.75rem;
    }

    .purchase-ticker__item {
        font-size: 0.85rem;
    }

    .purchase-ticker__viewport::before,
    .purchase-ticker__viewport::after {
        width: 40px;
    }
}

@media (max-width: 480px) {
    .purchase-ticker__track {
        gap: 1.25rem;
    }

    .purchase-ticker__viewport::before,
    .purchase-ticker__viewport::after {
        width: 28px;
    }
}