/* @author PeepConnect [Abel Odorico] - 2026-04-03 */
/* ============================================================
   PeepStreaming — Financial Ticker CSS
   ============================================================ */

.ps-ticker {
    background: var(--ps-bg-surface);
    border-bottom: 1px solid var(--ps-border-subtle);
    padding: 10px 0;
    overflow: hidden;
    position: relative;
    display: flex;
}

.ps-ticker__track {
    display: flex;
    white-space: nowrap;
    animation: ps-ticker 40s linear infinite;
    min-width: 100%;
}

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

.ps-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    border-right: 1px solid var(--ps-border-subtle);
}

.ps-ticker__label {
    font-family: var(--ps-font-heading);
    font-size: var(--ps-text-xs);
    color: var(--ps-text-muted);
    font-weight: 600;
    letter-spacing: 1px;
}

.ps-ticker__value {
    font-family: var(--ps-font-mono);
    font-size: var(--ps-text-small);
    color: var(--ps-text-primary);
    font-weight: 500;
}

.ps-ticker__change {
    font-family: var(--ps-font-mono);
    font-size: var(--ps-text-xxs);
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--ps-radius-sm);
}

.ps-ticker__change--up {
    color: var(--ps-accent-green);
    background: rgba(0, 200, 117, 0.1);
}

.ps-ticker__change--down {
    color: var(--ps-primary);
    background: rgba(229, 30, 42, 0.1);
}

.ps-ticker__updated {
    font-family: var(--ps-font-mono);
    font-size: var(--ps-text-xxs);
    color: var(--ps-text-disabled);
}

/* Fear and Greed Index */
.ps-btc-risk {
    gap: 12px !important;
}

.ps-btc-risk__gauge {
    width: 60px;
    height: 6px;
    background: var(--ps-border-strong);
    border-radius: 3px;
    overflow: hidden;
}

.ps-btc-risk__fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.ps-btc-risk__fill--fear {
    background: var(--ps-primary);
}

.ps-btc-risk__fill--neutral {
    background: var(--ps-accent-gold);
}

.ps-btc-risk__fill--greed {
    background: var(--ps-accent-green);
}

.ps-btc-risk__label {
    font-family: var(--ps-font-heading);
    font-size: var(--ps-text-xxs);
    font-weight: 600;
    text-transform: uppercase;
}

/* Animations */
@keyframes ps-ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
    .ps-ticker__item {
        padding: 0 16px;
        gap: 6px;
    }
    .ps-ticker__value {
        font-size: var(--ps-text-xs);
    }
}