/* ── Player Radio v2 – Frontend ──────────────────────────────────── */
/*
 * Filosofia: zero dependência do tema.
 * Usa CSS custom properties para adaptar cor/fundo ao contexto.
 * Fallback seguro para temas antigos sem suporte a `color-scheme`.
 */

/* Escopo: tudo dentro de .pr-player é isolado */
.pr-player {
    /* Tokens sobrescritíveis pelo tema via :root ou seletor pai */
    --pr-radius:        12px;
    --pr-gap:           18px;
    --pr-border-color:  rgba(128 128 128 / .22);
    --pr-muted:         rgba(128 128 128 / .5);
    --pr-surface:       rgba(128 128 128 / .06);

    /* Herda cor do texto e fonte do tema — compatibilidade total */
    font-family: inherit;
    font-size:   inherit;
    color:       inherit;

    border:        1px solid var(--pr-border-color);
    border-radius: var(--pr-radius);
    padding:       20px 18px 16px;
    max-width:     360px;
    min-width:     240px;
    margin:        0 auto;
    position:      relative;
    overflow:      hidden;
    box-sizing:    border-box;

    /* Garante contexto de empilhamento próprio */
    isolation: isolate;
}

/* Reset base de botões — remove qualquer estilo vindo do tema */
.pr-player button {
    all:         unset; /* reset completo — mais robusto que propriedades avulsas */
    font-family: inherit;
    color:       inherit;
    cursor:      pointer;
    line-height: 1;
    box-sizing:  border-box;
    -webkit-tap-highlight-color: transparent;
}

/* Acessibilidade: restaura o outline de foco após o `all:unset` */
.pr-player button:focus-visible {
    outline:        2px solid currentColor;
    outline-offset: 3px;
    border-radius:  4px;
}

/* ── Cabeçalho ───────────────────────────────────────────────────── */
.pr-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             8px;
    margin-bottom:   14px;
    flex-wrap:       wrap;
}

.pr-live-row {
    display:     flex;
    align-items: center;
    gap:         7px;
}

/* Indicador "ao vivo" */
.pr-live-dot {
    width:       8px;
    height:      8px;
    border-radius: 50%;
    background:  currentColor;
    opacity:     .22;
    flex-shrink: 0;
    transition:  opacity .3s, box-shadow .3s;
}
.pr-player.pr-playing .pr-live-dot {
    opacity:    .9;
    box-shadow: 0 0 0 3px rgba(128 128 128 / .2);
    animation:  prPulseDot 1.6s ease-in-out infinite;
}
@keyframes prPulseDot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(128 128 128 / .2); }
    50%       { box-shadow: 0 0 0 7px rgba(128 128 128 / .05); }
}

.pr-live-label {
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .7px;
    text-transform: uppercase;
    opacity:        .3;
    transition:     opacity .3s;
}
.pr-player.pr-playing .pr-live-label { opacity: .75; }

/* Nome da rádio */
.pr-station-name {
    font-size:      13px;
    font-weight:    600;
    opacity:        .65;
    flex:           1;
    text-align:     center;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    min-width:      0;
}

/* Badge de estado (Conectando / Conectado / Erro) */
.pr-status-badge {
    font-size:      9px;
    font-weight:    700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding:        2px 8px;
    border-radius:  20px;
    border:         1px solid currentColor;
    opacity:        .4;
    transition:     opacity .3s;
    flex-shrink:    0;
    white-space:    nowrap;
}

/* ── Visualizador de barras ───────────────────────────────────────── */
.pr-visualizer {
    display:         flex;
    align-items:     flex-end;
    justify-content: center;
    gap:             4px;
    height:          36px;
    margin-bottom:   18px;
}

.pr-bar {
    display:       block;
    width:         5px;
    height:        4px;
    background:    currentColor;
    opacity:       .12;
    border-radius: 3px 3px 0 0;
    transition:    height .1s ease;
    will-change:   height;
}
.pr-player.pr-playing .pr-bar {
    opacity:   .45;
    animation: prBarAnim 1s ease-in-out infinite alternate;
}

/* Delays escalonados por nth-child para movimento orgânico */
.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: 30px; }
}

/* Respeita preferência do usuário por movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    .pr-player.pr-playing .pr-bar,
    .pr-player.pr-playing .pr-live-dot {
        animation: none;
    }
    .pr-bar { transition: none; }
}

/* ── Controles ───────────────────────────────────────────────────── */
.pr-controls {
    display:     flex;
    align-items: center;
    gap:         var(--pr-gap);
    margin-bottom: 14px;
}

/* Botão Play/Parar */
.pr-play-wrap {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            5px;
    flex-shrink:    0;
}

.pr-play-btn {
    display:      flex;
    align-items:  center;
    justify-content: center;
    width:        60px;
    height:       60px;
    border-radius: 50%;
    border:       2px solid currentColor !important;
    opacity:      .7;
    transition:   opacity .2s, transform .15s, background .2s;
}
.pr-play-btn:hover  { opacity: .95; transform: scale(1.06); background: var(--pr-surface); }
.pr-play-btn:active { transform: scale(.93); }
.pr-play-btn svg    { width: 26px; height: 26px; fill: currentColor; flex-shrink: 0; }
.pr-player.pr-playing .pr-play-btn { opacity: 1; }

.pr-play-label {
    font-size:  11px;
    font-weight: 600;
    opacity:    .42;
    letter-spacing: .3px;
}

/* Volume */
.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 {
    display:      flex;
    align-items:  center;
    justify-content: center;
    width:        30px;
    height:       30px;
    border-radius: 50%;
    border:       1px solid currentColor !important;
    opacity:      .42;
    transition:   opacity .2s, background .2s;
    flex-shrink:  0;
}
.pr-mute-btn:hover { opacity: .85; background: var(--pr-surface); }
.pr-mute-btn svg   { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }

.pr-vol-label {
    font-size: 11px;
    opacity:   .38;
    letter-spacing: .3px;
}

/* Slider de volume — compatível com todos os browsers modernos */
.pr-volume {
    -webkit-appearance: none;
    appearance:         none;
    width:              100%;
    height:             4px;
    border-radius:      2px;
    background:         var(--pr-border-color);
    outline:            none;
    cursor:             pointer;
    border:             none !important; /* zera possível border do tema */
}
/* Thumb – WebKit */
.pr-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:       14px;
    height:      14px;
    border-radius: 50%;
    background:  currentColor;
    cursor:      pointer;
    box-shadow:  0 1px 3px rgba(0 0 0 / .25);
    transition:  transform .15s;
}
.pr-volume::-webkit-slider-thumb:hover { transform: scale(1.3); }
/* Thumb – Firefox */
.pr-volume::-moz-range-thumb {
    width:       14px;
    height:      14px;
    border:      none;
    border-radius: 50%;
    background:  currentColor;
    cursor:      pointer;
}
/* Foco */
.pr-volume:focus-visible {
    outline:        2px solid currentColor;
    outline-offset: 4px;
    border-radius:  2px;
}

/* ── Barra de status ─────────────────────────────────────────────── */
.pr-status-bar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             8px;
    padding-top:     12px;
    border-top:      1px solid var(--pr-border-color);
    min-height:      24px;
}

.pr-status-text {
    font-size:  12px;
    opacity:    .38;
    transition: opacity .3s;
    line-height: 1.4;
}
.pr-player.pr-playing .pr-status-text { opacity: .65; }

.pr-retry-btn {
    border:        1px solid currentColor !important;
    border-radius: 6px;
    font-size:     11px;
    font-weight:   600;
    padding:       3px 10px;
    white-space:   nowrap;
    opacity:       .65;
    transition:    opacity .2s, background .2s;
    flex-shrink:   0;
}
.pr-retry-btn:hover { opacity: 1; background: var(--pr-surface); }

/* Mensagem de config ausente */
.pr-empty {
    font-style: italic;
    font-size:  13px;
    opacity:    .5;
}

/* ── Link Google Play Store ──────────────────────────────────────── */
.pr-playstore {
    margin-top:  12px;
    padding-top: 12px;
    border-top:  1px solid var(--pr-border-color);
    display:     flex;
    justify-content: center;
}

/* Botão sem borda — o badge SVG já tem todo o visual */
.pr-player .pr-playstore-link {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    background:    transparent !important;
    border:        none !important;
    padding:       0 !important;
    border-radius: 5px;
    box-shadow:    none !important;
    outline:       none !important;
    transition:    opacity .2s, transform .15s, box-shadow .2s;
}
.pr-player .pr-playstore-link:hover {
    opacity:    .88;
    transform:  translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.18) !important;
}
.pr-player .pr-playstore-link:active  { transform: translateY(0); box-shadow: none !important; }
.pr-player .pr-playstore-link:focus-visible {
    outline:        2px solid currentColor !important;
    outline-offset: 3px !important;
}

/* Badge SVG fluida */
.pr-playstore-badge {
    display:   block;
    height:    40px;
    width:     auto;
    max-width: 100%;
}

/* ── Responsividade ─────────────────────────────────────────────── */
@media (max-width: 320px) {
    .pr-player {
        padding:   14px 12px 12px;
        min-width: 200px;
    }
    .pr-play-btn { width: 50px; height: 50px; }
    .pr-play-btn svg { width: 22px; height: 22px; }
}