/* ── Player Radio – Frontend ────────────────────────────────────── */

.pr-player {
    border-radius: 16px;
    padding: 22px 20px 18px;
    font-family: inherit;
    border: 1px solid rgba(0,0,0,.1);
    max-width: 360px;
    min-width: 260px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* ── Cabeçalho ───────────────────────────────────────────────────── */
.pr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.pr-live-row {
    display: flex;
    align-items: center;
    gap: 7px;
}
.pr-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
    opacity: .3;
    flex-shrink: 0;
    transition: opacity .3s, box-shadow .3s;
}
.pr-player.pr-playing .pr-live-dot {
    background: #e53e3e;
    opacity: 1;
    box-shadow: 0 0 0 3px rgba(229,62,62,.2);
    animation: prPulseDot 1.6s ease-in-out infinite;
}
@keyframes prPulseDot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(229,62,62,.2); }
    50%       { box-shadow: 0 0 0 6px rgba(229,62,62,.06); }
}
.pr-live-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    opacity: .45;
    transition: opacity .3s;
}
.pr-player.pr-playing .pr-live-label { opacity: .85; }

/* Badge de status */
.pr-status-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 20px;
    border: 1px solid currentColor;
    opacity: .5;
    transition: opacity .3s, color .3s;
}
.pr-status-offline { opacity: .35; }
.pr-status-loading { color: #b7791f; opacity: 1; }
.pr-status-online  { color: #276749; opacity: 1; }
.pr-status-error   { color: #c53030; opacity: 1; }

/* ── Barras de visualização ──────────────────────────────────────── */
.pr-visualizer {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    height: 40px;
    margin-bottom: 20px;
}
.pr-bar {
    display: block;
    width: 5px;
    height: 5px;
    background: currentColor;
    opacity: .15;
    border-radius: 3px 3px 0 0;
    transition: height .1s ease;
}
.pr-player.pr-playing .pr-bar {
    opacity: .6;
    animation: prBarAnim 1s ease-in-out infinite alternate;
}
.pr-player.pr-playing .pr-bar:nth-child(1)  { animation-duration: .65s; animation-delay: .00s; }
.pr-player.pr-playing .pr-bar:nth-child(2)  { animation-duration: .80s; animation-delay: .08s; }
.pr-player.pr-playing .pr-bar:nth-child(3)  { animation-duration: .55s; animation-delay: .04s; }
.pr-player.pr-playing .pr-bar:nth-child(4)  { animation-duration: .90s; animation-delay: .12s; }
.pr-player.pr-playing .pr-bar:nth-child(5)  { animation-duration: .70s; animation-delay: .16s; }
.pr-player.pr-playing .pr-bar:nth-child(6)  { animation-duration: .60s; animation-delay: .06s; }
.pr-player.pr-playing .pr-bar:nth-child(7)  { animation-duration: .85s; animation-delay: .10s; }
.pr-player.pr-playing .pr-bar:nth-child(8)  { animation-duration: .75s; animation-delay: .02s; }
.pr-player.pr-playing .pr-bar:nth-child(9)  { animation-duration: .95s; animation-delay: .14s; }
.pr-player.pr-playing .pr-bar:nth-child(10) { animation-duration: .68s; animation-delay: .18s; }
.pr-player.pr-playing .pr-bar:nth-child(11) { animation-duration: .82s; animation-delay: .07s; }
.pr-player.pr-playing .pr-bar:nth-child(12) { animation-duration: .72s; animation-delay: .11s; }
.pr-player.pr-playing .pr-bar:nth-child(13) { animation-duration: .58s; animation-delay: .05s; }
.pr-player.pr-playing .pr-bar:nth-child(14) { animation-duration: .88s; animation-delay: .09s; }
@keyframes prBarAnim {
    from { height: 4px; }
    to   { height: 34px; }
}

/* ── Controles ───────────────────────────────────────────────────── */
.pr-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
}
.pr-play-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.pr-play-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid currentColor;
    opacity: .7;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s, transform .15s, background .2s;
    padding: 0;
}
.pr-play-btn:hover  { opacity: 1; transform: scale(1.06); }
.pr-play-btn:active { transform: scale(.94); }
.pr-play-btn svg    { width: 28px; height: 28px; }
.pr-player.pr-playing .pr-play-btn {
    opacity: 1;
    background: currentColor;
}
.pr-player.pr-playing .pr-play-btn svg {
    mix-blend-mode: difference;
}
.pr-play-label {
    font-size: 11px;
    font-weight: 600;
    opacity: .5;
    letter-spacing: .3px;
}
.pr-volume-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pr-mute-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pr-mute-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid currentColor;
    opacity: .5;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s;
    padding: 0;
    flex-shrink: 0;
}
.pr-mute-btn:hover { opacity: .9; }
.pr-mute-btn svg   { width: 16px; height: 16px; }
.pr-vol-label {
    font-size: 11px;
    opacity: .45;
    letter-spacing: .3px;
}

/* ── Slider de volume ────────────────────────────────────────────── */
.pr-volume {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: rgba(128,128,128,.25);
    outline: none;
    cursor: pointer;
}
.pr-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: currentColor;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    transition: transform .15s;
}
.pr-volume::-webkit-slider-thumb:hover { transform: scale(1.25); }
/* Firefox — border:0 em vez de border:none para evitar warning */
.pr-volume::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border: 0;
    border-radius: 50%;
    background: currentColor;
    cursor: pointer;
}

/* ── Barra de status ─────────────────────────────────────────────── */
.pr-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(128,128,128,.15);
    min-height: 26px;
}
.pr-status-text {
    font-size: 12px;
    opacity: .45;
    transition: opacity .3s;
    line-height: 1.4;
}
.pr-player.pr-playing .pr-status-text { opacity: .75; }
.pr-player.pr-loading .pr-status-text { opacity: .9; color: #b7791f; }
.pr-player.pr-error   .pr-status-text { opacity: .9; color: #c53030; }
.pr-retry-btn {
    background: transparent;
    border: 1px solid #c53030;
    color: #c53030;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, color .2s;
    flex-shrink: 0;
}
.pr-retry-btn:hover {
    background: #c53030;
    color: #fff;
}
.pr-empty { font-style: italic; font-size: 13px; opacity: .6; }