/* ── Pink Radio — global player bar reskin (#QWplayerbar) ──
   Site-wide, persists across AJAX nav (lives outside #vice-ajaxcontents).
   Real ids/data-attrs are untouched so qt-main.js keeps working — this
   file only restyles the existing markup from part-playlist.php. */

#QWplayerbar.qw-footer-bar {
    --pr-pink: #e8005a;
    --pr-text: #f0f0f0;
    --pr-muted: #888;
    --pr-h: 74px;

    height: var(--pr-h);
    padding: 0 1.5rem;
    background: rgba(13,13,13,.92);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(232,0,90,.25);
    bottom: calc(var(--pr-h) * -1);
}
#QWplayerbar.qw-footer-bar.open { bottom: 0; }

#QWplayerbar.qw-footer-bar::before {
    content: '';
    position: absolute; top: -1px; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--pr-pink), transparent);
    pointer-events: none;
}

#QWplayerbar.qw-footer-bar .row,
body.qw-menutype1 #QWplayerbar.qw-footer-bar .row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.25rem;
    /* Reset Bootstrap's generic .row { margin: 0 -12.5px } (main.css) — it
       was making the row 25px wider than the bar and shifted left, so the
       track/right groups weren't flush with the bar's padding edges. */
    margin: 0;
    width: 100%;
}
#QWplayerbar.qw-footer-bar .row::before,
#QWplayerbar.qw-footer-bar .row::after { content: none !important; }
/* Keep the player at full visual strength — it's the whole point of the site */
@media (min-width: 750px) {
    .qw-is_desktop.qw-mouse-still #QWplayerbar.qw-footer-bar .row { opacity: 1; }
    .qw-is_desktop #QWplayerbar.qw-footer-bar { height: var(--pr-h); padding: 0 1.5rem; }
}

/* === Track info (art + show/host) === */
.pr-player-track {
    display: flex; align-items: center; gap: 12px;
    min-width: 0; max-width: 360px;
}
#qwPlayerCover.pr-player-art {
    width: 46px; height: 46px; margin: 0; padding: 0;
    border-radius: 8px; overflow: hidden; flex-shrink: 0;
    background: #202020;
}
#qwPlayerCover.pr-player-art img,
#qwPlayerCover.pr-player-art a { display: block; width: 100%; height: 100%; }
#qwPlayerCover.pr-player-art img { object-fit: cover; }

.pr-player-meta { min-width: 0; }
.pr-player-meta .qw-player-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px; font-weight: 500; color: var(--pr-text);
    text-transform: none; line-height: 1.4;
    display: block; width: auto;
    white-space: normal; overflow: visible; text-overflow: clip;
}
.pr-player-meta .qw-player-author {
    display: block; width: auto;
    white-space: normal; overflow: visible; text-overflow: clip;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px; font-weight: 300; color: var(--pr-muted);
    text-transform: none; line-height: 1.4;
}

@keyframes prPlayerBlink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.pr-live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--pr-pink); flex-shrink: 0;
    animation: prPlayerBlink 1.6s ease-in-out infinite;
}

/* === Center: play button + live badge === */
.pr-player-center {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    justify-self: center;
}
.pr-player-controls { display: flex; align-items: center; gap: 14px; }
#qwPlayerPlay.qw-ui-button {
    width: 42px; height: 42px; font-size: 16px;
    border-radius: 50%; background: var(--pr-pink);
    align-items: center; justify-content: center;
    transition: transform .2s, box-shadow .2s;
}
#qwPlayerPlay.qw-ui-button:hover {
    transform: scale(1.06); box-shadow: 0 0 24px rgba(232,0,90,.4);
}
#qwPlayerPlay.qw-ui-button span.pr-player-icon-wrap {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
}
/* qticon-play/qticon-pause inject their own glyph via ::before — we only
   want the SVG, so strip the icon-font glyph but keep the classes (qt-main.js
   toggles them to track play/pause state). */
#qwPlayerPlay .pr-player-icon-wrap::before { content: none; }
.pr-player-icon { width: 18px; height: 18px; fill: #fff; margin-left: 2px; }
.pr-player-icon .pr-icon-pause { display: none; }
#qwPlayerPlay span.qticon-pause .pr-icon-play { display: none; }
#qwPlayerPlay span.qticon-pause .pr-icon-pause { display: block; }

.pr-player-live {
    display: flex; align-items: center; gap: 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--pr-pink); font-weight: 500;
}

/* Live stream has no duration/seek — hide the progress bar */
#qwPlayerBar { display: none; }

/* === Prev / next episode buttons ===
   Only meaningful when a podcast episode is loaded — hidden during live radio. */
.pr-player-navbtn {
    -webkit-appearance: none; appearance: none;
    display: none;
    width: 30px; height: 30px; padding: 0; margin: 0;
    border: none; background: transparent; color: var(--pr-muted);
    align-items: center; justify-content: center;
    cursor: pointer; transition: color .2s;
    flex-shrink: 0;
}
.pr-player-navbtn svg { width: 16px; height: 16px; fill: currentColor; }
.pr-player-navbtn:hover { color: var(--pr-text); }
.pr-player-navbtn:disabled { opacity: .3; cursor: default; }
.pr-player-navbtn:disabled:hover { color: var(--pr-muted); }

/* === "Back to Live" button — swaps in for the live badge while a podcast plays === */
.pr-player-backtolive {
    -webkit-appearance: none; appearance: none;
    display: none; align-items: center; gap: 6px;
    border: none; background: transparent; padding: 0; margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--pr-muted); font-weight: 500;
    cursor: pointer; transition: color .2s;
}
.pr-player-backtolive svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.pr-player-backtolive:hover { color: var(--pr-pink); }

/* === Podcast mode: swap live badge for nav/back-to-live controls === */
#QWplayerbar.pr-mode-podcast .pr-player-live { display: none; }
#QWplayerbar.pr-mode-podcast .pr-player-navbtn,
#QWplayerbar.pr-mode-podcast .pr-player-backtolive { display: flex; }

/* === Episode seek bar ===
   Thin range input pinned to the top edge of the player bar, only shown
   while a podcast episode is loaded (#QWplayerbar.pr-mode-podcast). */
.pr-seek-range {
    -webkit-appearance: none; appearance: none;
    position: absolute; top: 0; left: 0; right: 0;
    width: 100%; height: 3px; margin: 0; padding: 0;
    background: rgba(255,255,255,.1);
    outline: none; cursor: pointer;
    display: none; overflow: hidden;
    z-index: 1;
}
#QWplayerbar.pr-mode-podcast .pr-seek-range { display: block; }
.pr-seek-range::-webkit-slider-runnable-track { background: transparent; }
.pr-seek-range::-moz-range-track { background: transparent; }
.pr-seek-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 3px; height: 12px; border-radius: 1px;
    background: var(--pr-pink); cursor: pointer;
    box-shadow: -1000px 0 0 996px var(--pr-pink);
}
.pr-seek-range::-moz-range-thumb {
    width: 3px; height: 12px; border: none; border-radius: 1px;
    background: var(--pr-pink); cursor: pointer;
    box-shadow: -1000px 0 0 996px var(--pr-pink);
}
.pr-seek-range::-moz-range-progress { background: var(--pr-pink); height: 3px; }

/* === Right-side controls: volume + hide/show toggle === */
.pr-player-right {
    display: flex; align-items: center; gap: 14px;
    justify-self: end;
}

/* === Volume === */
.pr-player-vol {
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
}
.pr-player-vol svg {
    width: 14px; height: 14px; flex-shrink: 0;
    stroke: var(--pr-muted); fill: none;
}
.pr-vol-range {
    -webkit-appearance: none; appearance: none;
    width: 90px; height: 3px; border-radius: 2px;
    background: rgba(255,255,255,.1); outline: none; cursor: pointer;
}
.pr-vol-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px; height: 13px; border-radius: 50%;
    background: var(--pr-text); cursor: pointer;
}
.pr-vol-range::-moz-range-thumb {
    width: 13px; height: 13px; border: none; border-radius: 50%;
    background: var(--pr-text); cursor: pointer;
}

/* === Hide / show toggle ===
   Base theme positions this absolutely, top-left (#qwHidePl{left:0}); override
   with higher specificity to bring it in-line with the right-side controls,
   styled like the mockup's .pb-expand — a small bordered square button. */
#QWplayerbar.qw-footer-bar #qwHidePl {
    position: static;
    width: 34px; height: 34px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,.07);
    background: transparent;
    color: var(--pr-muted);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: color .2s;
}
#QWplayerbar.qw-footer-bar #qwHidePl:hover { color: var(--pr-text); }
#qwHidePl span.glyphicon { font-size: 14px; }

/* === "Show player" tab ===
   #qwHidePl moves off-screen along with the rest of #QWplayerbar when it's
   hidden, so it can't be used to bring the bar back. #qwShowPl is a separate
   element placed right after #QWplayerbar in the markup (a top-level sibling,
   not affected by the bar's own position) and pinned to the viewport — shown
   only while the bar is hidden. Reuses the bar's own toggle mechanism
   (data-toggleclass="open" data-target="QWplayerbar"). */
#qwShowPl {
    display: none;
    position: fixed;
    bottom: 14px;
    right: 24px;
    width: 34px; height: 34px; border-radius: 8px;
    border: 1px solid rgba(232,0,90,.25);
    background: rgba(13,13,13,.92);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    color: #888;
    align-items: center; justify-content: center;
    text-decoration: none;
    z-index: 502;
    transition: color .2s;
}
#qwShowPl:hover { color: #f0f0f0; }
#qwShowPl span.glyphicon { font-size: 14px; }
#QWplayerbar.qw-footer-bar:not(.open) ~ #qwShowPl { display: flex; }

@media (max-width: 768px) {
    #QWplayerbar.qw-footer-bar { --pr-h: 60px; padding: 0 1rem; gap: .5rem; }
    #QWplayerbar.qw-footer-bar .row { grid-template-columns: 1fr auto auto; }
    .pr-player-track { max-width: none; }
    .pr-player-meta .qw-player-author { display: none; }
    .pr-player-center { flex-direction: row; gap: 0; }
    .pr-player-live { display: none; }
    .pr-player-vol svg { display: none; }
    .pr-vol-range { width: 60px; }
    .pr-player-navbtn { width: 24px; }
    .pr-player-backtolive-label { display: none; }
    #QWplayerbar.pr-mode-podcast .pr-player-backtolive { padding: 0 4px; }
}

/* === Chat FAB ===
   Floating button that sits above the sticky player bar, persists across
   AJAX nav (lives outside #vice-ajaxcontents alongside #qwShowPl). Reuses
   the .chat-popup-link click handler from functions-register-styles.php
   (popup window on desktop, AJAX nav on mobile). */
.pr-chat-fab {
    position: fixed;
    right: 24px;
    bottom: calc(74px + 18px);
    z-index: 500;
    display: flex; align-items: center; gap: 9px;
    padding: 13px 20px 13px 16px;
    border-radius: 99px;
    background: #e8005a;
    color: #fff;
    border: none;
    text-decoration: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .8px;
    box-shadow: 0 8px 24px rgba(232,0,90,.35);
    transition: bottom .3s ease, transform .2s, box-shadow .2s;
}
.pr-chat-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(232,0,90,.45); color: #fff; }
.pr-chat-fab svg { width: 18px; height: 18px; stroke: currentColor; fill: none; flex-shrink: 0; }
.pr-chat-fab-status {
    width: 8px; height: 8px; border-radius: 50%;
    background: #3cff7a; flex-shrink: 0;
    animation: prChatPulse 2s ease-out infinite;
}
@keyframes prChatPulse {
    0% { box-shadow: 0 0 0 0 rgba(60,255,122,.55); }
    70% { box-shadow: 0 0 0 8px rgba(60,255,122,0); }
    100% { box-shadow: 0 0 0 0 rgba(60,255,122,0); }
}

/* Player hidden — drop the FAB to the bottom corner, clear of #qwShowPl */
#QWplayerbar.qw-footer-bar:not(.open) ~ .pr-chat-fab {
    bottom: 18px;
    right: 74px;
}

@media (max-width: 768px) {
    .pr-chat-fab {
        right: 14px;
        bottom: calc(60px + 14px);
        padding: 14px;
        border-radius: 50%;
    }
    .pr-chat-fab-label { display: none; }
    #QWplayerbar.qw-footer-bar:not(.open) ~ .pr-chat-fab {
        bottom: 14px;
        right: 64px;
    }
}