/* wpForo VNN Listen Mini */
.wpfvlm, .wpfvlm * { box-sizing: border-box; }
.wpfvlm {
    width: 100%;
    max-width: 100%;
    margin: 0 0 15px;
    background: #f3f1f1;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    font-size: 13px;
    color: #444;
}

.wpfvlm-now {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    padding: 6px 14px;
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    border-bottom: 1px solid #e2dede;
}
.wpfvlm-select {
    flex: 0 0 auto;
    max-width: 200px;
    background: #fff;
    color: #7a1515;
    border: 1px solid #b9b0b0;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 12px;
    height: auto;
    line-height: 1.3;
}
.wpfvlm-np-label { color: #888; flex: 0 0 auto; }
.wpfvlm-np-count { color: #888; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.wpfvlm-np-title { color: #7a1515; font-weight: 600; overflow: hidden; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.wpfvlm-np-text { display: inline-block; white-space: nowrap; }
.wpfvlm-np-text.wpfvlm-scroll { animation: wpfvlm-tick var(--dur, 8s) linear infinite alternate; }
@keyframes wpfvlm-tick { 0%, 15% { transform: translateX(0); } 85%, 100% { transform: translateX(var(--shift, 0)); } }
@media (prefers-reduced-motion: reduce) {
    .wpfvlm-np-title { text-overflow: ellipsis; }
    .wpfvlm-np-text.wpfvlm-scroll { animation: none; }
}

.wpfvlm-now .wpfvlm-pop { width: 22px; height: 22px; }
html.wpfvlm-popout-page, html.wpfvlm-popout-page body { margin: 0; padding: 0; background: #f3f1f1; }
html.wpfvlm-popout-page .wpfvlm { margin: 0; border: 0; border-radius: 0; }

.wpfvlm-controls {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 10px;
    background: #f3f1f1;
}
#wpfvlm .wpfvlm-controls { padding: 7px 14px 10px !important; height: auto; overflow: visible; }

.wpfvlm-btn {
    background: #444;
    border: 1px solid #2b2b2b;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
    width: 26px;
    height: 26px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
}
#wpfvlm .wpfvlm-btn,
#wpfvlm .wpfvlm-btn:hover,
#wpfvlm .wpfvlm-btn:focus,
#wpfvlm .wpfvlm-btn.wpfvlm-on { color: #fff !important; text-shadow: none; }
.wpfvlm-btn:hover { background: #2b2b2b; border-color: #111; }
.wpfvlm-btn.wpfvlm-on { background: #2b2b2b; border-color: #7a1515; color: #fff; }

.wpfvlm-seek, .wpfvlm-vol {
    position: relative;
    height: 26px;
    background: #fff;
    border: 1px solid #c9c0c0;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    touch-action: none;
}
#wpfvlm .wpfvlm-seek { flex: 1 1 0; min-width: 40px; width: auto; }
#wpfvlm .wpfvlm-vol  { flex: 0 0 100px; width: 100px; min-width: 0; }
.wpfvlm-seek-dot, .wpfvlm-vol-dot {
    position: absolute;
    display: block;
    top: calc(50% - 6.5px);
    width: 13px;
    height: 13px;
    margin: 0 0 0 -6.5px;
    padding: 0;
    border-radius: 50%;
    pointer-events: none;
}
.wpfvlm-seek-dot { background: #7a1515; left: 14px; }
.wpfvlm-vol-dot  { background: #555; left: calc(8px + (100% - 16px) * 0.85); }

.wpfvlm-time {
    flex-shrink: 0;
    font-size: 11px;
    color: #666;
    font-variant-numeric: tabular-nums;
    min-width: 75px;
    text-align: center;
}
.wpfvlm-vol-icon { flex-shrink: 0; color: #7a1515; font-size: 14px; }

@media (max-width: 600px) {
    .wpfvlm-vol, .wpfvlm-vol-icon { display: none; }
    .wpfvlm-select { max-width: 120px; }
}