/**
 * VMPlayer Frontend Styles
 *
 * Renders the main player. Uses CSS custom properties for theme
 * colors so admin color changes flow through without file edits.
 * Fully responsive: landscape layout on wide screens, portrait
 * layout below 768px viewport.
 *
 * @package VMPlayer
 */

/* ==================================================================
 * Design tokens
 * =============================================================== */

.vmplayer {
    /* Theme colors: overridden by inline style tag with admin values */
    --vmp-primary: #a855f7;
    --vmp-secondary: #3b82f6;

    /* Structural tokens */
    --vmp-onair: #ef4444;
    --vmp-bg: #0a0a0f;
    --vmp-surface: #0f0f18;
    --vmp-surface-hover: #16162a;
    --vmp-border: #1f1f2e;
    --vmp-text: #f8fafc;
    --vmp-text-dim: #94a3b8;
    --vmp-text-muted: #64748b;
    --vmp-radius: 20px;
    --vmp-radius-pill: 999px;

    /* Base */
    box-sizing: border-box;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
    color: var(--vmp-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    background: var(--vmp-bg);
    border-radius: var(--vmp-radius);
    border: 1px solid var(--vmp-border);
    overflow: hidden;

    /* Enable container queries. The player responds to its own
       available width rather than the viewport, so it lays out
       correctly inside constrained parents like Elementor sections,
       theme content columns, or sidebars. */
    container-type: inline-size;
    container-name: vmplayer;
}

.vmplayer *,
.vmplayer *::before,
.vmplayer *::after {
    box-sizing: inherit;
}

.vmplayer__inner {
    padding: 24px 32px 20px;
}

/* ==================================================================
 * Top bar: ON AIR + clock
 * =============================================================== */

.vmplayer__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.vmplayer__onair {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--vmp-radius-pill);
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: var(--vmp-onair);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: opacity 0.3s;
}

.vmplayer__onair[data-state="off"] {
    opacity: 0.35;
}

.vmplayer__onair-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vmp-onair);
    box-shadow: 0 0 8px var(--vmp-onair);
}

.vmplayer__onair[data-state="on"] .vmplayer__onair-dot {
    animation: vmp-pulse 1.5s ease-in-out infinite;
}

@keyframes vmp-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.vmplayer__clock {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--vmp-text);
}

.vmplayer__clock-icon {
    color: var(--vmp-primary);
    display: flex;
}

.vmplayer__time {
    font-size: 22px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.vmplayer__date {
    color: var(--vmp-text-dim);
    font-size: 13px;
    margin-left: 8px;
}

/* ==================================================================
 * Main body: artwork | info | visualizer
 * =============================================================== */

.vmplayer__body {
    display: grid;
    grid-template-columns: 280px 1fr auto;
    gap: 28px;
    align-items: start;
    margin-bottom: 24px;
}

.vmplayer__artwork-wrap {
    width: 280px;
    height: 280px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--vmp-surface);
    border: 1px solid var(--vmp-border);
}

.vmplayer__artwork {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.vmplayer__artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vmplayer__artwork-placeholder {
    color: var(--vmp-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Info column */

.vmplayer__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}

.vmplayer__now-playing-label {
    margin: 0;
    color: var(--vmp-primary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Main-variant LIVE badge sits inline with the NOW PLAYING label so
   it reads like a status flag on the current program. Hidden by
   default; JS unhides when live-broadcast detection fires. Pulses
   subtly to reinforce that it is a live indicator. */
.vmplayer__live-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    animation: vmplayer-live-pulse 2s ease-in-out infinite;
}

.vmplayer__live-badge[hidden] {
    display: none;
}

/* Main-variant listener count chip lives inline in the stream info
   footer, alongside genre, bitrate, sample rate, and channels.
   Hidden by default; JS unhides when the admin enabled the toggle
   AND the server reported a positive count. */
.vmplayer__listener-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--vmp-secondary);
    font-weight: 600;
}

.vmplayer__listener-count[hidden] {
    display: none;
}

.vmplayer__track-title {
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--vmp-text);
    overflow-wrap: break-word;
}

.vmplayer__artist {
    margin: 0 0 8px 0;
    font-size: 22px;
    font-weight: 500;
    color: var(--vmp-primary);
}

.vmplayer__stream-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 4px 0 8px 0;
    color: var(--vmp-text-dim);
    font-size: 14px;
}

.vmplayer__stream-info-icon {
    color: var(--vmp-secondary);
    display: flex;
    align-items: center;
}

.vmplayer__stream-info-sep {
    color: var(--vmp-text-muted);
    opacity: 0.6;
}

.vmplayer__stream-info-sep.is-hidden,
.vmplayer__stream-info span:empty {
    display: none;
}

.vmplayer__description {
    margin: 4px 0 12px 0;
    color: var(--vmp-text-dim);
    font-size: 14px;
    line-height: 1.5;
    max-width: 640px;
}

/* Streaming via */

.vmplayer__streaming-via {
    margin-top: 8px;
}

.vmplayer__streaming-via-label {
    margin: 0 0 10px 0;
    color: var(--vmp-primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
}

.vmplayer__format-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vmplayer__format-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 10px;
    background: var(--vmp-surface);
    border: 1px solid var(--vmp-border);
    color: var(--vmp-text-dim);
    font-size: 13px;
    font-weight: 500;
    opacity: 0.55;
    transition: opacity 0.2s, background 0.2s;
}

.vmplayer__format-badge.is-active {
    opacity: 1;
    background: var(--vmp-surface-hover);
    color: var(--vmp-text);
    border-color: rgba(168, 85, 247, 0.35);
}

.vmplayer__format-badge[data-format="shoutcast"].is-active {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.35);
}

.vmplayer__format-badge[data-format="icecast"].is-active {
    color: #60a5fa;
}

.vmplayer__format-badge[data-format="hls"].is-active {
    color: var(--vmp-primary);
}

.vmplayer__format-badge[data-format="direct"].is-active {
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.35);
}

/* Visualizer column */

.vmplayer__visualizer-wrap {
    align-self: start;
    padding-top: 40px;
    width: 260px;
}

.vmplayer__visualizer {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 90px;
}

.vmplayer__visualizer-bar {
    width: 6px;
    height: 20%;
    border-radius: 3px;
    background: linear-gradient(to top, var(--vmp-primary), var(--vmp-secondary));
    transition: height 0.08s linear;
    transform-origin: bottom;
}

/* CSS fallback animation mode */

.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar {
    animation: vmp-eq-bounce 0.9s ease-in-out infinite;
}

.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar:nth-child(3n) {
    animation-duration: 1.1s;
}
.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar:nth-child(3n+1) {
    animation-duration: 0.7s;
}
.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar:nth-child(1)  { animation-delay: 0.00s; }
.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar:nth-child(2)  { animation-delay: 0.10s; }
.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar:nth-child(3)  { animation-delay: 0.20s; }
.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar:nth-child(4)  { animation-delay: 0.05s; }
.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar:nth-child(5)  { animation-delay: 0.15s; }
.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar:nth-child(6)  { animation-delay: 0.25s; }
.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar:nth-child(7)  { animation-delay: 0.30s; }
.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar:nth-child(8)  { animation-delay: 0.08s; }
.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar:nth-child(9)  { animation-delay: 0.18s; }
.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar:nth-child(10) { animation-delay: 0.35s; }
.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar:nth-child(11) { animation-delay: 0.03s; }
.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar:nth-child(12) { animation-delay: 0.22s; }
.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar:nth-child(13) { animation-delay: 0.12s; }
.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar:nth-child(14) { animation-delay: 0.28s; }
.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar:nth-child(15) { animation-delay: 0.06s; }
.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar:nth-child(16) { animation-delay: 0.16s; }
.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar:nth-child(17) { animation-delay: 0.26s; }
.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar:nth-child(18) { animation-delay: 0.13s; }
.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar:nth-child(19) { animation-delay: 0.32s; }
.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar:nth-child(20) { animation-delay: 0.09s; }
.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar:nth-child(21) { animation-delay: 0.19s; }
.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar:nth-child(22) { animation-delay: 0.24s; }
.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar:nth-child(23) { animation-delay: 0.04s; }
.vmplayer__visualizer.is-css-mode .vmplayer__visualizer-bar:nth-child(24) { animation-delay: 0.14s; }

.vmplayer__visualizer.is-paused .vmplayer__visualizer-bar {
    animation-play-state: paused;
    height: 20% !important;
}

@keyframes vmp-eq-bounce {
    0%, 100% { height: 20%; }
    30%      { height: 85%; }
    60%      { height: 45%; }
}

/* ==================================================================
 * Transport controls
 * =============================================================== */

.vmplayer__transport {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    padding: 18px 0;
    border-top: 1px solid var(--vmp-border);
    border-bottom: 1px solid var(--vmp-border);
    margin-bottom: 20px;
}

.vmplayer__volume {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vmplayer__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: transparent;
    border: 1px solid var(--vmp-border);
    border-radius: 50%;
    color: var(--vmp-text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.vmplayer__btn:hover {
    background: var(--vmp-surface-hover);
    border-color: var(--vmp-primary);
}

.vmplayer__btn:focus-visible {
    outline: 2px solid var(--vmp-primary);
    outline-offset: 2px;
}

.vmplayer__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.vmplayer__mute-toggle .vmplayer__icon-vol-off,
.vmplayer__mute-toggle[data-muted="true"] .vmplayer__icon-vol-on {
    display: none;
}

.vmplayer__mute-toggle[data-muted="true"] .vmplayer__icon-vol-off {
    display: block;
}

.vmplayer__volume-slider {
    flex: 1;
    max-width: 220px;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, var(--vmp-primary) 0%, var(--vmp-secondary) var(--vmp-vol, 100%), var(--vmp-border) var(--vmp-vol, 100%));
    border-radius: var(--vmp-radius-pill);
    outline: none;
    cursor: pointer;
}

.vmplayer__volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--vmp-primary);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.vmplayer__volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--vmp-primary);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.vmplayer__playback {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.vmplayer__play-toggle {
    width: 68px;
    height: 68px;
    padding: 0;
    background: linear-gradient(135deg, var(--vmp-primary), var(--vmp-secondary));
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.35);
}

.vmplayer__play-toggle:hover {
    background: linear-gradient(135deg, var(--vmp-primary), var(--vmp-secondary));
    border-color: rgba(255, 255, 255, 0.35);
    transform: scale(1.05);
}

.vmplayer__play-toggle .vmplayer__icon-pause,
.vmplayer__play-toggle[data-state="playing"] .vmplayer__icon-play {
    display: none;
}

.vmplayer__play-toggle[data-state="playing"] .vmplayer__icon-pause {
    display: block;
}

.vmplayer__extras {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.vmplayer__popout-btn {
    border-radius: 12px;
    padding: 12px 20px;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.vmplayer__popout-label {
    display: inline-block;
}

.vmplayer__popout-btn.is-hidden {
    display: none !important;
}

/* Social links follow the same hide pattern. When JS renderSocial
   detects the current station lacks a platform, it adds is-hidden
   to that link. Without this rule the class toggle would be a no-op
   and buttons from the previous station would linger after switch. */
.vmplayer__social-link.is-hidden {
    display: none !important;
}

/* ==================================================================
 * Footer: brand | supports | follow us
 * =============================================================== */

.vmplayer__footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    padding-top: 4px;
}

.vmplayer__brand,
.vmplayer__follow {
    /* Without min-width: 0, grid children default to min-content width,
       which lets the middle "supports" column shove the outer columns
       past each other when the follow column grows with lots of social
       icons. Zero minimum lets them shrink gracefully instead. */
    min-width: 0;
}

.vmplayer__brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vmplayer__brand-logo {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--vmp-surface);
    border: 1px solid var(--vmp-border);
}

.vmplayer__brand-logo--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vmp-primary);
}

.vmplayer__brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.vmplayer__brand-name {
    color: var(--vmp-text);
    font-weight: 600;
    font-size: 15px;
}

.vmplayer__brand-tagline {
    color: var(--vmp-text-dim);
    font-size: 13px;
}

/* Station counter pill. Sits in the brand text column under the
   tagline. Only visible when more than one station is configured;
   the template omits it entirely for single-station setups. */

.vmplayer__station-counter {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: 4px;
    padding: 3px 10px;
    background: rgba(168, 85, 247, 0.12);
    color: var(--vmp-primary);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Hide the pill when only one station is configured. The template
   applies this class initially; the JS toggles it live when an admin
   adds a second station in another tab. */
.vmplayer__station-counter.is-hidden {
    display: none !important;
}

/* Disabled prev/next buttons for single-station setups. Dimmed and
   non-interactive so listeners understand there is nothing to cycle
   to. The template applies the disabled attribute; this styles the
   result. */

.vmplayer__btn:disabled,
.vmplayer__btn[aria-disabled="true"] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.vmplayer__supports {
    color: var(--vmp-text-muted);
    font-size: 13px;
    text-align: center;
}

.vmplayer__supports span {
    margin: 0 3px;
}

.vmplayer__supports .vmplayer__sep {
    color: var(--vmp-text-muted);
    opacity: 0.5;
    margin: 0 6px;
}

.vmplayer__follow {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.vmplayer__follow-label {
    color: var(--vmp-primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
}

.vmplayer__social {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vmplayer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    transition: transform 0.15s, opacity 0.15s;
}

.vmplayer__social-link:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.vmplayer__social-link[data-platform="facebook"]  { background: #1877f2; }
.vmplayer__social-link[data-platform="bsky"]      { background: #1185fe; }
.vmplayer__social-link[data-platform="instagram"] {
    background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}
.vmplayer__social-link[data-platform="youtube"]   { background: #ff0000; }
.vmplayer__social-link[data-platform="whatsapp"]  { background: #25d366; }
.vmplayer__social-link[data-platform="x"]         { background: #000; }

.vmplayer__kebab {
    padding: 10px;
    border-radius: 10px;
}

/* Admin notice for empty state */

.vmplayer-notice-admin {
    padding: 16px 20px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    color: #78350f;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.vmplayer-notice-admin a {
    color: #78350f;
    font-weight: 600;
}

/* ==================================================================
 * Responsive: below 1024px container width, shrink metrics
 * =============================================================== */

@container vmplayer (max-width: 1023px) {
    .vmplayer__body {
        grid-template-columns: 220px 1fr auto;
        gap: 20px;
    }

    .vmplayer__artwork-wrap {
        width: 220px;
        height: 220px;
    }

    .vmplayer__track-title {
        font-size: 28px;
    }

    .vmplayer__artist {
        font-size: 18px;
    }

    .vmplayer__visualizer-wrap {
        width: 200px;
    }
}

/* ==================================================================
 * Footer-only breakpoint. When the container has less than about
 * 1200px to work with, the three-column footer starts overlapping
 * once all social buttons are enabled. Break Supports out to its own
 * row so brand and follow can share the top row without fighting for
 * space. This kicks in before the general medium layout so the
 * artwork column stays at its full size.
 * =============================================================== */

@container vmplayer (max-width: 1199px) {
    .vmplayer__footer {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "brand   follow"
            "supports supports";
        row-gap: 14px;
    }

    .vmplayer__brand    { grid-area: brand; }
    .vmplayer__follow   { grid-area: follow; }
    .vmplayer__supports { grid-area: supports; text-align: center; }
}

/* ==================================================================
 * Responsive: below 768px container width, switch to portrait layout
 * =============================================================== */

@container vmplayer (max-width: 767px) {
    .vmplayer__inner {
        padding: 20px 16px 16px;
    }

    .vmplayer__top {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;
    }

    .vmplayer__clock {
        align-self: flex-end;
    }

    .vmplayer__time {
        font-size: 18px;
    }

    .vmplayer__date {
        font-size: 12px;
    }

    .vmplayer__body {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .vmplayer__artwork-wrap {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .vmplayer__info {
        text-align: left;
    }

    .vmplayer__track-title {
        font-size: 26px;
    }

    .vmplayer__artist {
        font-size: 18px;
    }

    .vmplayer__visualizer-wrap {
        width: 100%;
        padding-top: 8px;
    }

    .vmplayer__visualizer {
        height: 60px;
    }

    .vmplayer__format-badges {
        gap: 6px;
    }

    .vmplayer__format-badge {
        padding: 6px 10px;
        font-size: 11px;
    }

    .vmplayer__transport {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px 0;
    }

    .vmplayer__volume {
        justify-content: center;
    }

    .vmplayer__volume-slider {
        max-width: none;
    }

    .vmplayer__extras {
        justify-content: center;
    }

    .vmplayer__popout-label {
        display: none;
    }

    .vmplayer__popout-btn {
        padding: 12px;
        border-radius: 50%;
    }

    .vmplayer__footer {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }

    .vmplayer__brand {
        justify-content: center;
    }

    .vmplayer__supports {
        font-size: 12px;
        line-height: 1.8;
    }

    .vmplayer__follow {
        justify-content: center;
    }
}

/* ==========================================================================
   Compact variant
   Rendered by [vmplayer variant="compact"]. Two-row landscape card
   sized for sidebars, footer strips, and other secondary placements.
   All rules scoped under .vmplayer--compact so they never leak into
   the main variant.
   ========================================================================== */

.vmplayer.vmplayer--compact {
    max-width: 720px;
    min-height: 140px;
}

.vmplayer.vmplayer--compact .vmplayer__inner.vmplayer-compact__inner {
    padding: 14px 16px;
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.vmplayer-compact__row {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.vmplayer-compact__row--top {
    justify-content: space-between;
    min-height: 60px;
}

.vmplayer-compact__row--bottom {
    padding-top: 12px;
    border-top: 1px solid rgba(168, 85, 247, 0.15);
    min-height: 44px;
    flex-wrap: wrap;
}

.vmplayer-compact__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.vmplayer-compact__artwork {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--vmp-primary) 0%, var(--vmp-secondary) 100%);
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.25);
}

.vmplayer-compact__artwork-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vmplayer-compact__brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}

.vmplayer-compact__brand-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--vmp-text);
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.vmplayer-compact__brand-tagline {
    font-size: 11px;
    color: var(--vmp-text-dim);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.vmplayer-compact__brand-tagline:empty {
    display: none;
}

.vmplayer-compact__station-counter {
    margin-top: 2px;
    align-self: flex-start;
    font-size: 9px;
    padding: 2px 8px;
}

.vmplayer-compact__controls-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.vmplayer.vmplayer--compact .vmplayer__btn.vmplayer-compact__prev,
.vmplayer.vmplayer--compact .vmplayer__btn.vmplayer-compact__next {
    width: 32px;
    height: 32px;
    padding: 0;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: var(--vmp-primary);
}

.vmplayer.vmplayer--compact .vmplayer__btn.vmplayer-compact__prev:hover:not(:disabled),
.vmplayer.vmplayer--compact .vmplayer__btn.vmplayer-compact__next:hover:not(:disabled) {
    background: rgba(168, 85, 247, 0.2);
    border-color: var(--vmp-primary);
    transform: translateY(-1px);
}

.vmplayer.vmplayer--compact .vmplayer__btn.vmplayer-compact__prev:disabled,
.vmplayer.vmplayer--compact .vmplayer__btn.vmplayer-compact__next:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.vmplayer.vmplayer--compact .vmplayer__btn.vmplayer-compact__play {
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--vmp-primary);
    border: none;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(168, 85, 247, 0.4);
}

.vmplayer.vmplayer--compact .vmplayer__btn.vmplayer-compact__play:hover {
    background: var(--vmp-secondary);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.5);
}

.vmplayer.vmplayer--compact .vmplayer__btn.vmplayer-compact__popout,
.vmplayer.vmplayer--compact .vmplayer__btn.vmplayer-compact__kebab {
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--vmp-text-dim);
}

.vmplayer.vmplayer--compact .vmplayer__btn.vmplayer-compact__popout:hover,
.vmplayer.vmplayer--compact .vmplayer__btn.vmplayer-compact__kebab:hover {
    color: var(--vmp-primary);
    background: rgba(168, 85, 247, 0.1);
}

.vmplayer-compact__status {
    flex-shrink: 0;
}

.vmplayer-compact__onair.vmplayer__onair {
    padding: 3px 8px;
    font-size: 9px;
    gap: 5px;
}

.vmplayer-compact__nowplaying {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.vmplayer-compact__nowplaying-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--vmp-text-dim);
    text-transform: uppercase;
    flex-shrink: 0;
}

.vmplayer-compact__nowplaying-text {
    font-size: 13px;
    color: var(--vmp-text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}

/* LIVE badge replaces the track title when a live broadcast is
   detected. Hidden by default; the JS toggles it on when the
   metadata payload sets is_live_broadcast. */
.vmplayer-compact__live-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
    animation: vmplayer-live-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

.vmplayer-compact__live-badge[hidden] {
    display: none;
}

@keyframes vmplayer-live-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }
}

.vmplayer-compact__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: auto;
}

.vmplayer-compact__listener-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(59, 130, 246, 0.15);
    color: var(--vmp-secondary);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.vmplayer-compact__listener-count[hidden] {
    display: none;
}

.vmplayer-compact__format {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    background: rgba(168, 85, 247, 0.15);
    color: var(--vmp-primary);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.5px;
}

.vmplayer-compact__volume {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vmplayer.vmplayer--compact .vmplayer__btn.vmplayer-compact__mute {
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--vmp-text-dim);
}

.vmplayer.vmplayer--compact .vmplayer__btn.vmplayer-compact__mute:hover {
    color: var(--vmp-primary);
}

.vmplayer-compact__volume-slider {
    width: 70px;
    height: 4px;
}

/* Container queries: at narrow widths the meta chips wrap under the
   nowplaying text so nothing overflows. Below the smallest breakpoint
   the top row also stacks vertically. */
@container (max-width: 520px) {
    .vmplayer-compact__row--bottom {
        gap: 8px;
    }
    .vmplayer-compact__meta {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }
    .vmplayer-compact__volume-slider {
        width: 60px;
    }
}

@container (max-width: 400px) {
    .vmplayer.vmplayer--compact .vmplayer__inner.vmplayer-compact__inner {
        padding: 12px;
    }
    .vmplayer-compact__row--top {
        flex-wrap: wrap;
        gap: 10px;
    }
    .vmplayer-compact__brand {
        width: 100%;
    }
    .vmplayer-compact__controls-top {
        width: 100%;
        justify-content: center;
    }
    .vmplayer-compact__format {
        display: none;
    }
}