/* ═══════════════════════════════════════════
   BG Music Player — Front-end Styles v2.0
   ═══════════════════════════════════════════ */

.bgmp-player {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    background:      transparent;
}

/* ── Circle button ──────────────────────────── */
.bgmp-mute-btn {
    position:        relative;
    width:           56px;
    height:          56px;
    border:          none;
    border-radius:   50%;
    background:      var(--bgmp-color, #6f42c1);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0;
    box-shadow:      0 6px 20px rgba(0,0,0,0.28),
                     0 2px 6px  rgba(0,0,0,0.18);
    transition:      transform 0.15s ease, box-shadow 0.15s ease;
    outline:         none;
    -webkit-tap-highlight-color: transparent;
}

.bgmp-mute-btn:hover {
    transform:  scale(1.09);
    box-shadow: 0 10px 28px rgba(0,0,0,0.32),
                0 4px 10px  rgba(0,0,0,0.2);
}

.bgmp-mute-btn:active {
    transform:  scale(0.94);
    box-shadow: 0 3px 10px rgba(0,0,0,0.22);
}

/* Muted state — desaturate slightly */
.bgmp-mute-btn.is-muted {
    opacity: 0.72;
}

/* Pulse ring while unmuted + playing */
.bgmp-mute-btn:not(.is-muted)::before {
    content:        '';
    position:       absolute;
    inset:          -5px;
    border-radius:  50%;
    border:         2px solid var(--bgmp-color, #6f42c1);
    opacity:        0.4;
    animation:      bgmp-pulse 2s ease-out infinite;
    pointer-events: none;
}

@keyframes bgmp-pulse {
    0%   { transform: scale(1);   opacity: 0.45; }
    100% { transform: scale(1.4); opacity: 0;    }
}

/* ── SVG icons ──────────────────────────────── */
.bgmp-mute-btn svg {
    width:       24px;
    height:      24px;
    fill:        var(--bgmp-icon, #ffffff);
    flex-shrink: 0;
    display:     block;
}