.wrsvp-music-control {
    --wrsvp-music-size: 56px;
    --wrsvp-music-icon-size: 22px;
    --wrsvp-music-offset: 20px;
    position: fixed;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.wrsvp-music-control.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.wrsvp-music-control[hidden] {
    display: none !important;
}

.wrsvp-pos-bottom-right {
    inset: auto max(var(--wrsvp-music-offset), env(safe-area-inset-right))
        max(var(--wrsvp-music-offset), env(safe-area-inset-bottom)) auto;
}

.wrsvp-pos-bottom-left {
    inset: auto auto max(var(--wrsvp-music-offset), env(safe-area-inset-bottom))
        max(var(--wrsvp-music-offset), env(safe-area-inset-left));
}

.wrsvp-pos-top-right {
    inset: max(var(--wrsvp-music-offset), env(safe-area-inset-top))
        max(var(--wrsvp-music-offset), env(safe-area-inset-right)) auto auto;
}

.wrsvp-pos-top-left {
    inset: max(var(--wrsvp-music-offset), env(safe-area-inset-top)) auto auto
        max(var(--wrsvp-music-offset), env(safe-area-inset-left));
}

.wrsvp-music-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max(44px, var(--wrsvp-music-size));
    height: max(44px, var(--wrsvp-music-size));
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50% !important;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
    position: relative;
    color: #fff;
    transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
    outline: none;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.wrsvp-music-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.wrsvp-music-btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.9);
    outline-offset: 3px;
}

.wrsvp-music-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.wrsvp-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(var(--wrsvp-music-icon-size), calc(var(--wrsvp-music-size) * 0.5));
    height: min(var(--wrsvp-music-icon-size), calc(var(--wrsvp-music-size) * 0.5));
    font-size: min(var(--wrsvp-music-icon-size), calc(var(--wrsvp-music-size) * 0.5));
    line-height: 1;
}

.wrsvp-icon-wrapper[hidden] {
    display: none !important;
}

.wrsvp-music-btn i,
.wrsvp-music-btn svg {
    display: block;
    pointer-events: none;
    line-height: 1;
}

.wrsvp-music-btn i {
    font-size: inherit !important;
}

.wrsvp-music-btn svg {
    width: 100% !important;
    height: 100% !important;
}

.wrsvp-show-play.wrsvp-has-selected-icon {
    transform: translateX(1px);
}

.wrsvp-music-playing[data-rotate="true"] .wrsvp-show-pause.wrsvp-has-selected-icon {
    animation: wrsvpMusicSpin 4s linear infinite;
}

.wrsvp-music-wave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    height: 100%;
}

.wrsvp-music-wave span {
    width: 2px;
    min-height: 4px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
}

.wrsvp-music-wave span:nth-child(1),
.wrsvp-music-wave span:nth-child(5) {
    height: 38%;
}

.wrsvp-music-wave span:nth-child(2),
.wrsvp-music-wave span:nth-child(4) {
    height: 68%;
}

.wrsvp-music-wave span:nth-child(3) {
    height: 100%;
}

.wrsvp-music-playing .wrsvp-show-pause.wrsvp-has-waveform .wrsvp-music-wave span {
    animation: wrsvpMusicWave 720ms ease-in-out infinite alternate;
}

.wrsvp-music-playing .wrsvp-music-wave span:nth-child(2) {
    animation-delay: -360ms;
}

.wrsvp-music-playing .wrsvp-music-wave span:nth-child(3) {
    animation-delay: -180ms;
}

.wrsvp-music-playing .wrsvp-music-wave span:nth-child(4) {
    animation-delay: -540ms;
}

.wrsvp-music-paused {
    opacity: 0.88;
}

@keyframes wrsvpMusicSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes wrsvpMusicWave {
    from {
        transform: scaleY(0.45);
    }

    to {
        transform: scaleY(1);
    }
}

@media (max-width: 480px) {
    .wrsvp-music-control {
        --wrsvp-music-offset: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wrsvp-music-control,
    .wrsvp-music-btn,
    .wrsvp-music-playing[data-rotate="true"] .wrsvp-show-pause.wrsvp-has-selected-icon,
    .wrsvp-music-playing .wrsvp-show-pause.wrsvp-has-waveform .wrsvp-music-wave span {
        animation: none;
        transition: none;
    }
}