/**
 * 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;
}

.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;
}

/* 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;
    }
}