/**
 * SFX Audio Proxy — Secure Player Styles  v1.0.2
 *
 * Visual design mirrors Product Sound Table v3.10.4+:
 *  - Laser ring  : spinning neon-green/purple arc via ::after on the play button
 *  - Buffering pill : dark floating pill with "Buffering" + three bouncing dots
 *
 * Loaded on single product pages only when secure mode is active.
 */

/* ── Play button: base positioning for ::after ring ─────────────────────── */
/* position:relative is required so the inset:-4px ::after ring is positioned
   relative to the button face, not a distant ancestor. Safe to apply globally —
   has no visible effect without the .sfx-btn-loading class. */
.play-btn-rounded {
    position: relative !important;
}

/* The ring is always present in the DOM (empty ::after), invisible by default.
   transition on opacity gives a clean fade-in when the class is added. */
.play-btn-rounded::after {
    content: '';
    position: absolute;
    inset: -4px;                  /* ring sits 4 px outside the button edge   */
    border-radius: 50%;
    border: 3px solid transparent;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}

/* ── Loading state: laser ring ───────────────────────────────────────────── */
/* Matches PST's .pst-btn-loading::after exactly: neon-green leading edge,
   purple trailing tail, faint green bottom arc. */
.play-btn-rounded.sfx-btn-loading {
    cursor: default !important;
    pointer-events: none;         /* belt-and-suspenders alongside btn.disabled */
}
.play-btn-rounded.sfx-btn-loading::after {
    border-top-color: #00ff88;                    /* vivid neon-green leading edge */
    border-right-color: #a855f7;                  /* purple trailing tail          */
    border-bottom-color: rgba(0, 255, 136, 0.15); /* faint green arc               */
    /* border-left stays transparent — creates the open-arc "laser" look */
    animation: sfx-laser 0.5s linear infinite;
    opacity: 1 !important;
}
@keyframes sfx-laser {
    to { transform: rotate(360deg); }
}

/* ── Buffering pill ──────────────────────────────────────────────────────── */
/* Sits to the right of the button in the flex row (margin-left gap).
   Visibility is opacity-driven so display:inline-flex is always set;
   JS adds/removes .sfx-buf-visible which transitions opacity 0 -> 1. */
.sfx-loading-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 14px;
    background: rgba(0, 0, 0, 0.68);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.03em;
    padding: 4px 11px 4px 9px;
    border-radius: 100px;
    pointer-events: none;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    /* Hidden by default — JS adds sfx-buf-visible to fade in */
    opacity: 0;
    transition: opacity 0.18s ease;
}
.sfx-loading-indicator.sfx-buf-visible {
    opacity: 1;
}

/* ── Bouncing dots ───────────────────────────────────────────────────────── */
.sfx-buf-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.sfx-buf-dots span {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    animation: sfx-buf-bounce 1.0s infinite ease-in-out both;
}
.sfx-buf-dots span:nth-child(1) { animation-delay: 0.00s; }
.sfx-buf-dots span:nth-child(2) { animation-delay: 0.16s; }
.sfx-buf-dots span:nth-child(3) { animation-delay: 0.32s; }
@keyframes sfx-buf-bounce {
    0%, 80%, 100% { transform: scale(0.5); opacity: 0.3; }
    40%           { transform: scale(1.0); opacity: 1.0; }
}