/* ============================================================
   Echoholics Player — player.css
   Dark theme built for black-background project pages.
   Font variables:
     --ech-p-heading: 'Gunterz', sans-serif   (post 2630)
     --ech-p-body:    'Just Sanz', sans-serif  (post 2628)
   Override these in your Elementor Global CSS if the exact
   registered names differ from what appears here.
   ============================================================ */

:root {
    --ech-p-heading:  'Gunterz', 'Arial Black', sans-serif;
    --ech-p-body:     'Just Sanz', 'Inter', sans-serif;

    --ech-p-bg:       #000000;
    --ech-p-surface:  #111114;
    --ech-p-surface2: #1a1a1f;
    --ech-p-surface3: #222228;
    --ech-p-border:   rgba(255,255,255,0.08);
    --ech-p-border2:  rgba(255,255,255,0.14);

    --ech-p-text:     #f0f0f4;
    --ech-p-muted:    #888896;
    --ech-p-faint:    #44444e;

    --ech-p-accent:   #2563eb;
    --ech-p-accent2:  #3b7dff;
    --ech-p-accent-d: rgba(37,99,235,0.18);

    --ech-p-explicit: #e05252;
    --ech-p-radius:   10px;
    --ech-p-radius-sm:6px;
    --ech-p-trans:    0.16s ease;

    /* Mini player height — body gets padding-bottom to avoid content overlap */
    --ech-mp-height:  72px;
}

/* ── Base reset for player elements ─────────────────────────  */
.ech-player,
.ech-mini-player {
    box-sizing:  border-box !important;
    width:       100% !important;
    max-width:   100% !important;
    overflow-x:  hidden !important;
}
.ech-player *,
.ech-mini-player * {
    box-sizing: border-box;
    font-family: var(--ech-p-body);
}

.ech-player h1, .ech-player h2, .ech-player h3,
.ech-fp-title, .ech-pp-project-title, .ech-pp-artist {
    font-family: var(--ech-p-heading) !important;
}

/* ── Control buttons — aggressive reset against theme inheritance ─  */
.ech-ctrl-btn,
.ech-ctrl-btn:link,
.ech-ctrl-btn:visited,
.ech-ctrl-btn:hover,
.ech-ctrl-btn:active,
.ech-ctrl-btn:focus,
.ech-mini-player .ech-ctrl-btn,
.ech-mini-player .ech-ctrl-btn:hover,
.ech-featured-playlist .ech-ctrl-btn,
.ech-featured-playlist .ech-ctrl-btn:hover,
.ech-project-player .ech-ctrl-btn,
.ech-project-player .ech-ctrl-btn:hover {
    appearance:      none !important;
    -webkit-appearance: none !important;
    background:      none !important;
    border:          none !important;
    border-radius:   50% !important;
    box-shadow:      none !important;
    color:           var(--ech-p-text) !important;
    cursor:          pointer !important;
    padding:         8px !important;
    margin:          0 !important;
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    transition:      background var(--ech-p-trans), color var(--ech-p-trans) !important;
    flex-shrink:     0 !important;
    line-height:     1 !important;
    text-decoration: none !important;
    font-size:       inherit !important;
    font-family:     inherit !important;
    width:           auto !important;
    height:          auto !important;
    min-width:       0 !important;
    min-height:      0 !important;
    outline:         none !important;
}
.ech-ctrl-btn svg { width: 22px !important; height: 22px !important; display: block !important; fill: currentColor !important; }
.ech-ctrl-btn:hover { background: var(--ech-p-surface3) !important; color: var(--ech-p-text) !important; }
.ech-ctrl-btn:active { transform: scale(0.93) !important; }

.ech-ctrl-btn--sm svg { width: 18px !important; height: 18px !important; }
.ech-ctrl-btn--md svg { width: 26px !important; height: 26px !important; }

/* Play button — blue filled circle */
.ech-ctrl-btn--play,
.ech-ctrl-btn--play:link,
.ech-ctrl-btn--play:visited,
.ech-mini-player .ech-ctrl-btn--play,
.ech-featured-playlist .ech-ctrl-btn--play,
.ech-project-player .ech-ctrl-btn--play {
    background:      var(--ech-p-accent) !important;
    color:           #fff !important;
    border-radius:   50% !important;
    width:           48px !important;
    height:          48px !important;
    padding:         0 !important;
}
.ech-ctrl-btn--play:hover,
.ech-mini-player .ech-ctrl-btn--play:hover,
.ech-featured-playlist .ech-ctrl-btn--play:hover,
.ech-project-player .ech-ctrl-btn--play:hover {
    background:      var(--ech-p-accent2) !important;
    color:           #fff !important;
}
.ech-ctrl-btn--play.ech-ctrl-btn--md,
.ech-mini-player .ech-ctrl-btn--play.ech-ctrl-btn--md {
    width:  44px !important;
    height: 44px !important;
}

/* ── Volume slider ───────────────────────────────────────────  */
.ech-volume-wrap {
    display:     flex;
    align-items: center;
    gap:         6px;
    margin-left: auto;
}
.ech-volume-slider {
    -webkit-appearance: none;
    appearance:  none;
    width:       80px;
    height:      4px;
    border-radius:2px;
    background:  var(--ech-p-surface3);
    outline:     none;
    cursor:      pointer;
}
.ech-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:  13px; height: 13px;
    border-radius: 50%;
    background:   var(--ech-p-accent);
    cursor:       pointer;
    transition:   transform var(--ech-p-trans);
}
.ech-volume-slider:hover::-webkit-slider-thumb { transform: scale(1.25); }
.ech-volume-slider--sm { width: 60px; }

/* ── Explicit badge — blue ───────────────────────────────────  */
.ech-explicit-badge {
    display:       inline-flex !important;
    align-items:   center !important;
    justify-content: center !important;
    background:    var(--ech-p-accent) !important;
    color:         #fff !important;
    font-size:     9px !important;
    font-weight:   800 !important;
    letter-spacing:.04em !important;
    width:         16px !important; height: 16px !important;
    border-radius: 3px !important;
    vertical-align:middle !important;
    margin-left:   5px !important;
    flex-shrink:   0 !important;
    line-height:   1 !important;
}

/* ══════════════════════════════════════════════════════════════
   FULL PROJECT PLAYER  [ech_project_player]
   ══════════════════════════════════════════════════════════════ */

.ech-project-player {
    background:   var(--ech-p-bg);
    color:        var(--ech-p-text);
    padding:      0;
    max-width:    100%;
}

/* ── Hero: cover + info ──────────────────────────────────────  */
.ech-pp-hero {
    display:    flex;
    gap:        28px;
    padding:    28px 0 24px;
    align-items:flex-start;
    flex-wrap:  wrap;
}

.ech-pp-cover-wrap { flex-shrink: 0; }
.ech-pp-cover {
    width:        200px;
    height:       200px;
    object-fit:   cover;
    border-radius:var(--ech-p-radius);
    display:      block;
    box-shadow:   0 8px 40px rgba(0,0,0,0.6);
}
.ech-pp-cover--empty {
    width:        200px; height: 200px;
    background:   var(--ech-p-surface2);
    border-radius:var(--ech-p-radius);
    display:      flex;
    align-items:  center;
    justify-content: center;
    font-size:    64px;
}

.ech-pp-info {
    flex: 1;
    min-width: 0;
    display:   flex;
    flex-direction: column;
    gap:       10px;
    padding-top: 4px;
}

.ech-pp-project-title {
    font-size:    clamp(22px, 3.5vw, 36px);
    font-weight:  800;
    letter-spacing:-0.02em;
    color:        var(--ech-p-text);
    line-height:  1.1;
    margin:       0;
}

.ech-pp-artist {
    font-size:    16px;
    font-weight:  600;
    color:        var(--ech-p-muted);
    margin:       0;
}

/* Now-playing track info */
.ech-pp-track-details {
    padding:      12px 0;
    border-top:   1px solid var(--ech-p-border);
}
.ech-pp-track-title {
    display:      block;
    font-size:    17px;
    font-weight:  700;
    color:        var(--ech-p-text);
    margin-bottom:4px;
}
.ech-pp-track-meta {
    font-size:    13px;
    color:        var(--ech-p-muted);
    font-family:  var(--ech-p-body);
}

/* Streaming links */
.ech-pp-streaming {
    display:      flex;
    flex-wrap:    wrap;
    gap:          8px;
    margin-top:   4px;
}
.ech-pp-stream-link {
    display:      inline-flex;
    align-items:  center;
    gap:          6px;
    background:   var(--ech-p-surface2);
    border:       1px solid var(--ech-p-border);
    border-radius:20px;
    padding:      5px 12px;
    font-size:    12px;
    font-weight:  600;
    color:        var(--ech-p-text);
    text-decoration: none;
    transition:   all var(--ech-p-trans);
}
.ech-pp-stream-link svg { width: 14px; height: 14px; flex-shrink: 0; }
.ech-pp-stream-link:hover {
    background: var(--ech-p-accent-d);
    border-color: var(--ech-p-accent);
    color: var(--ech-p-accent2);
}
/* Platform brand colours on hover */
.ech-pp-stream-spotify:hover    { border-color: #1DB954; color: #1DB954; background: rgba(29,185,84,0.1); }
.ech-pp-stream-apple:hover      { border-color: #FC3C44; color: #FC3C44; background: rgba(252,60,68,0.1); }
.ech-pp-stream-soundcloud:hover { border-color: #FF5500; color: #FF5500; background: rgba(255,85,0,0.1); }
.ech-pp-stream-youtube:hover    { border-color: #FF0000; color: #FF0000; background: rgba(255,0,0,0.1); }

/* Buy button */
.ech-pp-buy-btn {
    display:      inline-flex;
    align-items:  center;
    gap:          6px;
    background:   var(--ech-p-accent);
    color:        #fff;
    border-radius:var(--ech-p-radius-sm);
    padding:      9px 18px;
    font-size:    13px;
    font-weight:  700;
    text-decoration: none;
    transition:   background var(--ech-p-trans);
    width:        fit-content;
}
.ech-pp-buy-btn:hover { background: var(--ech-p-accent2); color: #fff; }

/* ── Controls wrap ───────────────────────────────────────────  */
.ech-pp-controls-wrap {
    padding:      16px 0 20px;
    border-top:   1px solid var(--ech-p-border);
}

/* Simulated waveform */
.ech-waveform {
    position:    relative;
    height:      56px;
    cursor:      pointer;
    margin-bottom:10px;
    overflow:    hidden;
}
.ech-waveform__bars {
    display:     flex;
    align-items: center;
    gap:         2px;
    height:      100%;
    position:    absolute;
    inset:       0;
}
.ech-wf-bar {
    flex:        1;
    height:      calc(var(--h, 0.5) * 100%);
    min-height:  3px;
    background:  rgba(255,255,255,0.15);
    border-radius:2px;
    transition:  background var(--ech-p-trans), height 0.3s ease;
    transform-origin: center;
}
/* Animated bounce when playing */
.ech-wf-bar--playing {
    animation: ech-wf-bounce 0.8s ease-in-out infinite alternate;
    animation-delay: calc(var(--i, 0) * 20ms);
}
@keyframes ech-wf-bounce {
    0%   { transform: scaleY(0.85); }
    100% { transform: scaleY(1.08); }
}
/* Progress overlay */
.ech-waveform__progress {
    position:    absolute;
    left:        0; top: 0; bottom: 0;
    background:  var(--ech-p-accent);
    opacity:     0.35;
    pointer-events: none;
    transition:  width 0.1s linear;
}

/* Time display */
.ech-pp-time {
    display:     flex;
    justify-content: space-between;
    font-size:   12px;
    color:       var(--ech-p-muted);
    margin-bottom:12px;
    font-variant-numeric: tabular-nums;
}

/* Transport controls row */
.ech-pp-controls {
    display:     flex;
    align-items: center;
    gap:         8px;
}

/* ── Tracklist ───────────────────────────────────────────────  */
.ech-pp-tracklist {
    border-top:  1px solid var(--ech-p-border);
    padding-top: 16px;
}
.ech-pp-tracklist-header {
    display:     grid;
    grid-template-columns: 40px 1fr auto 36px;
    gap:         0 12px;
    padding:     6px 12px;
    font-size:   11px;
    font-weight: 700;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:       var(--ech-p-faint);
    border-bottom:1px solid var(--ech-p-border);
    margin-bottom:4px;
}
.ech-tl-row {
    display:     grid;
    grid-template-columns: 40px 1fr auto 36px;
    gap:         0 12px;
    padding:     10px 12px;
    border-radius:var(--ech-p-radius-sm);
    align-items: center;
    cursor:      pointer;
    transition:  background var(--ech-p-trans);
}
.ech-tl-row:hover              { background: var(--ech-p-surface2); }
.ech-tl-row--active            { background: var(--ech-p-accent-d); }
.ech-tl-row--active .ech-tl-title { color: var(--ech-p-accent2); }

/* Track number / playing indicator */
.ech-tl-num {
    display:     flex;
    align-items: center;
    justify-content: flex-end;
    position:    relative;
}
.ech-tl-num__number {
    font-size:   14px;
    color:       var(--ech-p-muted);
    font-variant-numeric: tabular-nums;
}
.ech-tl-num__playing {
    width:  18px; height: 18px;
    color:  var(--ech-p-accent2);
}
/* Animated bars for now-playing indicator */
.ech-bar { transform-origin: bottom; }
.ech-tl-row--active .ech-bar-1 { animation: ech-bar-anim 0.8s ease-in-out infinite alternate; animation-delay: 0ms; }
.ech-tl-row--active .ech-bar-2 { animation: ech-bar-anim 0.8s ease-in-out infinite alternate; animation-delay: 150ms; }
.ech-tl-row--active .ech-bar-3 { animation: ech-bar-anim 0.8s ease-in-out infinite alternate; animation-delay: 80ms; }
.ech-tl-row--active .ech-bar-4 { animation: ech-bar-anim 0.8s ease-in-out infinite alternate; animation-delay: 220ms; }
@keyframes ech-bar-anim {
    0%   { transform: scaleY(0.4); }
    100% { transform: scaleY(1.0); }
}

.ech-tl-title {
    font-size:   14px;
    font-weight: 600;
    color:       var(--ech-p-text);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
    display:     flex;
    align-items: center;
}
.ech-tl-meta {
    display:     flex;
    gap:         8px;
    font-size:   11px;
    color:       var(--ech-p-muted);
    white-space: nowrap;
}
.ech-tl-bpm, .ech-tl-key, .ech-tl-genre {
    background:  var(--ech-p-surface3);
    border-radius: 3px;
    padding:     2px 6px;
}
.ech-tl-buy { display: flex; align-items: center; justify-content: center; }
.ech-tl-buy-icon {
    color:       var(--ech-p-muted);
    display:     inline-flex;
    padding:     4px;
    border-radius:4px;
    transition:  color var(--ech-p-trans), background var(--ech-p-trans);
    text-decoration: none;
}
.ech-tl-buy-icon svg { width: 16px; height: 16px; }
.ech-tl-buy-icon:hover { color: var(--ech-p-accent2); background: var(--ech-p-accent-d); }

/* ══════════════════════════════════════════════════════════════
   MINI PLAYER  [ech_mini_player]
   Fixed to bottom of viewport, never on wp-admin
   ══════════════════════════════════════════════════════════════ */

.ech-mini-player {
    position:   fixed;
    bottom:     0; left: 0; right: 0;
    height:     var(--ech-mp-height);
    background: #0a0a0e;
    border-top: 1px solid var(--ech-p-border2);
    z-index:    9999;
    display:    flex;
    align-items:center;
    gap:        16px;
    padding:    0 20px;
    box-shadow: 0 -4px 30px rgba(0,0,0,0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Push page content up so mini player doesn't overlap it */
body.ech-mini-player--visible {
    padding-bottom: var(--ech-mp-height);
}

/* Left: cover + track info */
.ech-mp-left {
    display:    flex;
    align-items:center;
    gap:        12px;
    min-width:  0;
    flex:       0 0 240px;
}
.ech-mp-cover {
    width:       48px; height: 48px;
    object-fit:  cover;
    border-radius:var(--ech-p-radius-sm);
    flex-shrink: 0;
}
.ech-mp-track-info {
    min-width: 0;
    overflow:  hidden;
}
.ech-mp-title-wrap {
    display:    flex;
    align-items:center;
    gap:        5px;
    overflow:   hidden;
}

/* Marquee container */
.ech-mp-title,
.ech-mp-artist {
    display:    block;
    white-space:nowrap;
    overflow:   hidden;
    text-overflow: ellipsis;
    font-size:  13px;
    font-weight:700;
    color:      var(--ech-p-text);
}
.ech-mp-artist {
    font-size:  12px;
    font-weight:400;
    color:      var(--ech-p-muted);
    margin-top: 2px;
}

/* Marquee animation — only on .ech-marquee--active */
.ech-marquee--active {
    text-overflow: unset !important;
    overflow:      hidden !important;
    animation:     ech-marquee 10s linear infinite;
    animation-delay: 2s; /* read delay before scrolling */
    animation-play-state: paused;
}
/* Only animate when something is actually playing */
body.ech-mini-player--visible .ech-marquee--active {
    animation-play-state: running;
}
@keyframes ech-marquee {
    0%   { transform: translateX(0); }
    15%  { transform: translateX(0); }             /* 2s pause at start (but delay handles this) */
    85%  { transform: translateX(-100%); }
    100% { transform: translateX(-100%); }         /* brief pause before reset */
}

/* Center: controls + progress */
.ech-mp-center {
    flex:       1;
    display:    flex;
    flex-direction: column;
    align-items:center;
    gap:        6px;
    min-width:  0;
}
.ech-mp-controls {
    display:    flex;
    align-items:center;
    gap:        6px;
}

/* Progress bar */
.ech-mp-progress-wrap {
    display:    flex;
    align-items:center;
    gap:        8px;
    width:      100%;
}
.ech-mp-time {
    font-size:  10px;
    color:      var(--ech-p-muted);
    flex-shrink:0;
    font-variant-numeric: tabular-nums;
    min-width:  32px;
}
.ech-mp-time:last-child { text-align: right; }
.ech-mp-progress-bar {
    flex:       1;
    height:     3px;
    background: var(--ech-p-surface3);
    border-radius:2px;
    cursor:     pointer;
    overflow:   hidden;
    position:   relative;
}
.ech-mp-progress-bar:hover { height: 5px; }
.ech-mp-progress-fill {
    height:     100%;
    background: var(--ech-p-accent);
    border-radius:2px;
    transition: width 0.1s linear;
}

/* Right: volume */
.ech-mp-right {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex:        0 0 120px;
    justify-content: flex-end;
}

/* ══════════════════════════════════════════════════════════════
   FEATURED PLAYLIST  [ech_featured_playlist]
   ══════════════════════════════════════════════════════════════ */

.ech-featured-playlist {
    background:  var(--ech-p-bg);
    color:       var(--ech-p-text);
    padding:     0;
    /* Contain to parent — prevent bleed past Elementor container */
    width:       100% !important;
    max-width:   100% !important;
    box-sizing:  border-box !important;
    overflow-x:  hidden !important;
}
.ech-fp-header {
    display:    flex;
    align-items:baseline;
    gap:        12px;
    margin-bottom: 16px;
    flex-wrap:  wrap;
}
/* Reset heading — Elementor large heading override */
.ech-fp-title {
    font-size:   22px !important;
    font-weight: 800 !important;
    margin:      0 !important;
    color:       var(--ech-p-text) !important;
    line-height: 1.2 !important;
    font-family: var(--ech-p-heading) !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}
.ech-fp-count {
    font-size:  13px;
    color:      var(--ech-p-muted);
}
.ech-fp-controls { margin-bottom: 16px; }

.ech-btn-play-all {
    display:    inline-flex !important;
    align-items:center !important;
    gap:        8px !important;
    font-size:  14px !important;
    font-weight:700 !important;
    letter-spacing:.02em !important;
    padding:    10px 20px 10px 16px !important;
    border-radius: 24px !important;
    border:     none !important;
}

.ech-fp-list {
    width:      100%;
    overflow-x: hidden;
}
.ech-fp-list-header {
    display:    grid;
    grid-template-columns: 40px 1fr 160px auto;
    gap:        0 12px;
    padding:    6px 12px;
    font-size:  11px;
    font-weight:700;
    letter-spacing:.07em;
    text-transform: uppercase;
    color:      var(--ech-p-faint);
    border-bottom: 1px solid var(--ech-p-border);
    margin-bottom: 4px;
}
.ech-tl-artist {
    font-size:  13px;
    color:      var(--ech-p-muted);
    white-space:nowrap;
    overflow:   hidden;
    text-overflow: ellipsis;
}
.ech-fp-row { grid-template-columns: 40px 1fr 160px auto; }

/* Pagination */
.ech-fp-pagination {
    display:    flex;
    gap:        6px;
    flex-wrap:  wrap;
    padding-top:20px;
    border-top: 1px solid var(--ech-p-border);
    margin-top: 12px;
}
.ech-fp-page-btn {
    display:    inline-flex;
    align-items:center;
    justify-content: center;
    width:      36px; height: 36px;
    border-radius:var(--ech-p-radius-sm);
    background: var(--ech-p-surface2);
    border:     1px solid var(--ech-p-border);
    color:      var(--ech-p-text);
    font-size:  13px;
    font-weight:700;
    text-decoration: none;
    transition: all var(--ech-p-trans);
}
.ech-fp-page-btn:hover        { background: var(--ech-p-accent-d); border-color: var(--ech-p-accent); color: var(--ech-p-accent2); }
.ech-fp-page-btn--active      { background: var(--ech-p-accent); border-color: var(--ech-p-accent); color: #fff; }

/* ── Misc ────────────────────────────────────────────────────  */
.ech-player-notice {
    color:   var(--ech-p-muted);
    font-size:14px;
    padding: 24px 0;
}

/* ── Responsive ──────────────────────────────────────────────  */
@media (max-width: 680px) {
    .ech-pp-hero   { gap: 16px; flex-direction: column; }
    .ech-pp-cover, .ech-pp-cover--empty { width: 100%; height: auto; aspect-ratio: 1; }

    .ech-pp-tracklist-header { grid-template-columns: 32px 1fr 36px; }
    .ech-pp-tracklist-header .ech-tl-col--meta { display: none; }
    .ech-tl-row    { grid-template-columns: 32px 1fr 36px; }
    .ech-tl-meta   { display: none; }

    .ech-fp-list-header { grid-template-columns: 32px 1fr auto; }
    .ech-fp-list-header .ech-tl-col--artist { display: none; }
    .ech-fp-row    { grid-template-columns: 32px 1fr auto; }
    .ech-tl-artist { display: none; }

    .ech-mini-player { padding: 0 12px; gap: 10px; }
    .ech-mp-left   { flex: 0 0 auto; max-width: 140px; }
    .ech-mp-right  { display: none; }
    .ech-volume-wrap { display: none; }
}