/* ============================================
   Beats Sample Player – player.css v1.3.0
   ============================================ */

:root {
    --bsp-btn-bg:   #1a6b3a;
    --bsp-btn-text: #ffffff;
    --bsp-radius:   50%;
    --bsp-size:     40px;
}

/* ── Wrapper ── */
.bsp-play-wrap {
    position:     relative;
    display:      flex;
    align-items:  center;
    gap:          10px;
    margin:       8px 0 6px;
    z-index:      2;
    pointer-events: auto;
}

/* ── Icon-only circular button ── */
.bsp-play-btn {
    display:        flex;
    align-items:    center;
    justify-content: center;
    width:          var(--bsp-size);
    height:         var(--bsp-size);
    background:     var(--bsp-btn-bg);
    color:          var(--bsp-btn-text);
    border:         none;
    border-radius:  var(--bsp-radius);
    cursor:         pointer;
    flex-shrink:    0;
    transition:     transform .15s, box-shadow .15s, filter .2s;
    box-shadow:     0 3px 10px rgba(0,0,0,.22);
    padding:        0;
}

.bsp-play-btn:hover {
    transform:  translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.30);
    filter:     brightness(1.12);
}

.bsp-play-btn:active {
    transform:  scale(.93);
    box-shadow: 0 2px 6px rgba(0,0,0,.20);
}

/* Playing pulse ring */
.bsp-play-btn.bsp-playing {
    animation: bsp-pulse 1.8s ease-in-out infinite;
}

@keyframes bsp-pulse {
    0%,100% { box-shadow: 0 0 0 0   rgba(26,107,58,.55); }
    50%      { box-shadow: 0 0 0 8px rgba(26,107,58,0);   }
}

/* ── Icon wrappers ── */
.bsp-icon {
    display:     flex;
    align-items: center;
    line-height: 1;
}

/* nudge play icon 1px right so it looks optically centred */
.bsp-icon-play { padding-left: 2px; }

/* ── Loading spinner overlay ── */
.bsp-play-btn.bsp-loading .bsp-icon svg { opacity: 0; }
.bsp-play-btn.bsp-loading::after {
    content:       '';
    position:      absolute;
    width:         16px;
    height:        16px;
    border:        2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation:     bsp-spin .7s linear infinite;
}
@keyframes bsp-spin { to { transform: rotate(360deg); } }

/* ── Progress bar ── */
.bsp-progress-bar {
    flex:          1;
    height:        4px;
    background:    rgba(0,0,0,.12);
    border-radius: 4px;
    overflow:      hidden;
    cursor:        pointer;
    min-width:     40px;
}
.bsp-progress-fill {
    height:        100%;
    width:         0%;
    background:    var(--bsp-btn-bg);
    border-radius: 4px;
    transition:    width .25s linear;
}

/* ── Time ── */
.bsp-time {
    font-size:      10px;
    font-weight:    600;
    color:          #555;
    min-width:      30px;
    text-align:     right;
    letter-spacing: .04em;
}

/* ============================================
   Single Product Page – Full Player
   ============================================ */

.bsp-single-player {
    background:    linear-gradient(135deg, #f8fdf9 0%, #edf7f1 100%);
    border:        2px solid var(--bsp-btn-bg);
    border-radius: 12px;
    padding:       16px 20px;
    margin:        18px 0 22px;
}

.bsp-single-header { margin-bottom: 12px; }

.bsp-single-label {
    font-size:      11px;
    font-weight:    800;
    letter-spacing: .12em;
    color:          var(--bsp-btn-bg);
    text-transform: uppercase;
}

.bsp-single-wrap {
    flex-wrap:   nowrap;
    gap:         14px;
    align-items: center;
}

/* Larger circle for single product */
.bsp-play-btn--large {
    width:  52px;
    height: 52px;
}

.bsp-single-right {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.bsp-progress-bar--large { height: 6px; }

.bsp-single-meta {
    display:         flex;
    justify-content: space-between;
    font-size:       11px;
    font-weight:     600;
    color:           #666;
    letter-spacing:  .04em;
}

@media (max-width: 480px) {
    .bsp-single-wrap  { flex-wrap: wrap; }
    .bsp-single-right { width: 100%; }
}