/* ============================================================
   SoundCloud Player v2 — player.css
   ============================================================ */

/* ── Variables ───────────────────────────────────────────── */
.scp-player {
    --scp-accent:     #ff5500;
    --scp-bg:         #0d0d0d;
    --scp-bg2:        rgba(255,255,255,.04);
    --scp-bg3:        rgba(255,255,255,.08);
    --scp-glass:      rgba(13,13,13,.82);
    --scp-border:     rgba(255,255,255,.1);
    --scp-text:       #f0f0f0;
    --scp-muted:      rgba(255,255,255,.45);
    --scp-radius:     14px;
    --scp-bar-radius: 4px;
    --scp-font:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.scp-player.scp-theme-light {
    --scp-bg:    #f2f2f2;
    --scp-bg2:   rgba(0,0,0,.04);
    --scp-bg3:   rgba(0,0,0,.08);
    --scp-glass: rgba(242,242,242,.88);
    --scp-border:rgba(0,0,0,.1);
    --scp-text:  #111;
    --scp-muted: rgba(0,0,0,.45);
}

/* ── Base ────────────────────────────────────────────────── */
.scp-player {
    position:      relative;
    display:       flex;
    flex-direction:column;
    font-family:   var(--scp-font);
    font-size:     14px;
    color:         var(--scp-text);
    background:    var(--scp-bg);
    border-radius: var(--scp-radius);
    overflow:      hidden;
    min-height:    280px;
    box-sizing:    border-box;
    isolation:     isolate;
}

.scp-player *, .scp-player *::before, .scp-player *::after { box-sizing: inherit; }

/* ── Backdrop ────────────────────────────────────────────── */
.scp-backdrop {
    position:           absolute;
    inset:              0;
    background-size:    cover;
    background-position:center;
    filter:             blur(32px) saturate(1.4);
    transform:          scale(1.15);
    opacity:            .28;
    z-index:            0;
    pointer-events:     none;
}

/* ── Header ──────────────────────────────────────────────── */
.scp-header {
    position:    relative;
    z-index:     2;
    display:     flex;
    align-items: center;
    justify-content: space-between;
    gap:         12px;
    padding:     14px 18px;
    background:  var(--scp-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--scp-border);
    flex-shrink: 0;
}

.scp-header-left {
    display:     flex;
    align-items: center;
    gap:         12px;
    overflow:    hidden;
    min-width:   0;
}

.scp-avatar {
    width:          44px;
    height:         44px;
    border-radius:  8px;
    background-size:cover;
    background-position: center;
    flex-shrink:    0;
    border:         1px solid var(--scp-border);
}

.scp-meta {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    overflow:       hidden;
    min-width:      0;
}

.scp-title {
    font-size:     15px;
    font-weight:   600;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    color:         var(--scp-text);
}

.scp-author {
    font-size:       12px;
    color:           var(--scp-accent);
    text-decoration: none;
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
    transition:      opacity .15s;
}
.scp-author:hover { opacity: .75; }

.scp-sc-logo { color: var(--scp-muted); display: flex; align-items: center; }

/* ── Hidden iframe ───────────────────────────────────────── */
/* Covers full player container — Widget API needs it accessible */
.scp-iframe {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    border:   none;
    opacity:  0;
    pointer-events: none;
    z-index:  1;
}

.scp-iframe.scp-iframe-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ── Visualiser Stage ────────────────────────────────────── */
/* Stage is a flex child — sits in the natural flow above iframe */
.scp-stage {
    position:    relative;
    z-index:     2;
    flex:        1;
    overflow:    hidden;
    min-height:  80px;
    width:       100%;
    pointer-events: none;
}

/* Canvas fills the stage exactly */
.scp-viz-canvas {
    display:        block;
    position:       absolute;
    inset:          0;
    width:          100%;
    height:         100%;
    pointer-events: none;
}

/* ── Loading ring ────────────────────────────────────────── */
.scp-loading-ring {
    position: absolute;
    inset:    0;
    display:  flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity .3s;
}

.scp-player.scp-ready .scp-loading-ring { opacity: 0; pointer-events: none; }

.scp-loading-ring::after {
    content:      '';
    width:        48px;
    height:       48px;
    border:       3px solid var(--scp-border);
    border-top-color: var(--scp-accent);
    border-radius:50%;
    animation:    scp-spin .7s linear infinite;
}

@keyframes scp-spin { to { transform: rotate(360deg); } }

/* ── Controls ────────────────────────────────────────────── */
.scp-controls {
    position:    relative;
    z-index:     2;
    padding:     10px 18px 14px;
    background:  var(--scp-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top:  1px solid var(--scp-border);
    flex-shrink: 0;
}

/* Progress */
.scp-progress {
    margin-bottom: 10px;
    cursor:        pointer;
    user-select:   none;
}

.scp-progress-track {
    position:      relative;
    height:        3px;
    background:    var(--scp-bg3);
    border-radius: 2px;
    overflow:      visible;
}

.scp-progress-buffer {
    position:      absolute;
    left:          0;
    top:           0;
    height:        100%;
    width:         0%;
    background:    var(--scp-bg3);
    border-radius: inherit;
    pointer-events:none;
}

.scp-progress-fill {
    position:      absolute;
    left:          0;
    top:           0;
    height:        100%;
    width:         0%;
    background:    var(--scp-accent);
    border-radius: inherit;
    pointer-events:none;
    transition:    width .25s linear;
}

.scp-progress-thumb {
    position:      absolute;
    top:           50%;
    left:          0%;
    width:         13px;
    height:        13px;
    background:    #fff;
    border:        2.5px solid var(--scp-accent);
    border-radius: 50%;
    transform:     translate(-50%, -50%);
    opacity:       0;
    transition:    opacity .15s, left .25s linear;
    pointer-events:none;
}

.scp-progress:hover .scp-progress-track { height: 5px; }
.scp-progress:hover .scp-progress-thumb,
.scp-progress:focus-visible .scp-progress-thumb { opacity: 1; }

.scp-time-wrap {
    display:         flex;
    justify-content: space-between;
    margin-top:      5px;
    font-size:       11px;
    color:           var(--scp-muted);
    pointer-events:  none;
}

/* Button row */
.scp-btn-row {
    display:     flex;
    align-items: center;
    gap:         6px;
}

.scp-btn {
    background:    none;
    border:        none;
    color:         var(--scp-text);
    cursor:        pointer;
    padding:       6px;
    border-radius: 8px;
    display:       flex;
    align-items:   center;
    justify-content:center;
    transition:    background .15s, color .15s, transform .1s;
    flex-shrink:   0;
}
.scp-btn svg { width: 18px; height: 18px; display: block; }

.scp-btn:hover       { background: var(--scp-bg3); color: var(--scp-accent); }
.scp-btn:active      { transform: scale(.93); }
.scp-btn:focus-visible { outline: 2px solid var(--scp-accent); outline-offset: 2px; }

/* Play/pause — bigger */
.scp-play-pause {
    width:         44px;
    height:        44px;
    background:    var(--scp-accent) !important;
    color:         #fff !important;
    border-radius: 50% !important;
    flex-shrink:   0;
}
.scp-play-pause svg { width: 20px; height: 20px; }
.scp-play-pause:hover  { filter: brightness(1.12); }
.scp-play-pause:active { transform: scale(.93); }

/* Volume */
.scp-vol-wrap {
    display:     flex;
    align-items: center;
    gap:         4px;
}

.scp-volume {
    -webkit-appearance: none;
    appearance:         none;
    width:              70px;
    height:             3px;
    background:         linear-gradient(to right, var(--scp-accent) var(--vol, 80%), var(--scp-bg3) var(--vol, 80%));
    border-radius:      2px;
    cursor:             pointer;
    outline:            none;
}

.scp-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:              12px;
    height:             12px;
    border-radius:      50%;
    background:         #fff;
    border:             2px solid var(--scp-accent);
    cursor:             pointer;
}

.scp-volume::-moz-range-thumb {
    width:        12px;
    height:       12px;
    border-radius:50%;
    background:   #fff;
    border:       2px solid var(--scp-accent);
    cursor:       pointer;
}

/* Track info */
.scp-track-info {
    display:        flex;
    flex-direction: column;
    gap:            1px;
    overflow:       hidden;
    flex:           1;
    min-width:      0;
    padding:        0 6px;
}

.scp-playing-title {
    font-size:     13px;
    font-weight:   500;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    color:         var(--scp-text);
}

.scp-playing-user {
    font-size:  11px;
    color:      var(--scp-muted);
    white-space:nowrap;
    overflow:   hidden;
    text-overflow: ellipsis;
}

/* SC external link */
.scp-sc-link {
    color:           var(--scp-muted);
    text-decoration: none;
    display:         flex;
    align-items:     center;
    padding:         6px;
    border-radius:   8px;
    flex-shrink:     0;
    transition:      color .15s, background .15s;
}
.scp-sc-link:hover { color: var(--scp-accent); background: var(--scp-bg3); }

/* ── Error ───────────────────────────────────────────────── */
.scp-error {
    padding:       14px 18px;
    background:    rgba(200,60,60,.12);
    color:         #ff6b6b;
    border:        1px solid rgba(200,60,60,.3);
    border-radius: var(--scp-radius);
    font-size:     13px;
}

/* ── Elementor editor preview ─────────────────────────────── */
.scp-editor-preview {
    display:         flex;
    align-items:     center;
    justify-content: center;
}
.scp-editor-placeholder {
    text-align: center;
    color: var(--scp-muted);
    line-height: 1.8;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 440px) {
    .scp-volume, .scp-time-wrap { display: none; }
    .scp-btn-row                { gap: 4px; }
    .scp-play-pause             { width: 40px; height: 40px; }
}