/* =====================================================================
   دکمه‌ی شناور موزیک پس‌زمینه — مشترک بین همه‌ی صفحات سایت
   -----------------------------------------------------------------
   یک دایره‌ی شیشه‌ای با آیکون پلی/پاوز وسطش. اولش مخفیه؛ با اولین
   کلیک کاربر روی صفحه، موزیک پخش می‌شه و همون لحظه دکمه ظاهر می‌شه.
   رنگ‌ها از theme.css/theme.php میان (رنگ برند) تا با تم زنده‌ی سایت
   هماهنگ بمونه.
===================================================================== */

.vira-music-player {
    position: fixed;
    bottom: 24px;
    right: 22px;
    z-index: 9999;
}

.vira-music-btn {
    position: relative;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
        rgba(var(--color-primary-rgb, 7, 114, 85), .92),
        rgba(var(--color-primary-light-rgb, 10, 171, 130), .92));
    box-shadow:
        0 8px 22px rgba(var(--color-primary-rgb, 7, 114, 85), .35),
        inset 0 1px 1px rgba(255, 255, 255, .3);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: scale(.5);
    pointer-events: none;
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease, opacity .3s ease;
}

/* با اولین کلیک، جاوااسکریپت این کلاس رو اضافه می‌کنه تا دکمه ظاهر بشه */
.vira-music-btn.is-visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.vira-music-btn.is-visible:hover  { transform: scale(1.08); }
.vira-music-btn.is-visible:active { transform: scale(.94); }

.vira-music-btn.is-playing {
    box-shadow:
        0 8px 26px rgba(var(--color-primary-rgb, 7, 114, 85), .5),
        inset 0 1px 1px rgba(255, 255, 255, .35),
        0 0 0 6px rgba(var(--color-primary-rgb, 7, 114, 85), .14);
}

/* ---------- آیکون پلی/پاوز وسط دکمه ---------- */
.vira-icon-wrap {
    position: relative;
    width: 18px;
    height: 18px;
    z-index: 2;
}

.vira-icon-wrap svg {
    position: absolute;
    inset: 0;
    width: 18px;
    height: 18px;
    color: #fff;
    transition: opacity .25s ease, transform .25s ease;
}

.vira-icon-play  { opacity: 1; transform: scale(1); }
.vira-icon-pause { opacity: 0; transform: scale(.6); }

.vira-music-btn.is-playing .vira-icon-play  { opacity: 0; transform: scale(.6); }
.vira-music-btn.is-playing .vira-icon-pause { opacity: 1; transform: scale(1); }

/* ---------- موبایل ---------- */
@media (max-width: 640px) {
    .vira-music-player { bottom: 18px; right: 5px; }

    .vira-music-btn { width: 48px; height: 48px; }

    .vira-icon-wrap,
    .vira-icon-wrap svg { width: 16px; height: 16px; }
}