/* ─── LASC Persistent Footer Player ──────────────────────────────────────── */
/* Fixed at bottom of every page. Slides up when a track is loaded.          */

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER CONTAINER
   ══════════════════════════════════════════════════════════════════════════ */
#lasc-footer-player {
    position:   fixed;
    bottom:     0;
    left:       0;
    right:      0;
    height:     88px;
    z-index:    9990;

    display:     flex;
    align-items: center;

    background:  rgba(8, 12, 14, 0.97);
    border-top:  1px solid rgba(16, 220, 205, 0.22);
    backdrop-filter:          blur(22px) saturate(1.5);
    -webkit-backdrop-filter:  blur(22px) saturate(1.5);
    box-shadow:  0 -2px 48px rgba(16, 220, 205, 0.07),
                 0 -1px 0   rgba(16, 220, 205, 0.08);

    /* Slide in from below */
    transform:  translateY(100%);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);

    color:       #eef4ff;
    font-family: inherit;
    box-sizing:  border-box;
    overflow:    hidden;
}

#lasc-footer-player.lasc-fp-visible {
    transform: translateY(0);
}

/* Body gets this class so content isn't hidden under the footer */
body.lasc-fp-open {
    padding-bottom: 88px !important;
}

/* Subtle cyan left-edge glow when playing */
#lasc-footer-player.is-playing::before {
    content:    '';
    position:   absolute;
    left:       0; top: 0; bottom: 0;
    width:      2px;
    background: linear-gradient(180deg, transparent, #10dccd 40%, transparent);
    opacity:    0.7;
}

/* ══════════════════════════════════════════════════════════════════════════
   INNER LAYOUT (the .lasc-fp-custom wrapper)
   ══════════════════════════════════════════════════════════════════════════ */
.lasc-fp-custom {
    display:     flex;
    align-items: center;
    width:       100%;
    height:      100%;
    padding:     0 24px;
    gap:         20px;
    box-sizing:  border-box;
}

/* ══════════════════════════════════════════════════════════════════════════
   TRACK INFO  (left side)
   ══════════════════════════════════════════════════════════════════════════ */
.lasc-fp-info {
    min-width:   150px;
    max-width:   220px;
    flex-shrink: 0;
}

.lasc-fp-title {
    display:        block;
    font-size:      14px;
    font-weight:    600;
    color:          #eef4ff;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    letter-spacing: 0.01em;
    line-height:    1.3;
}

.lasc-fp-artist {
    display:        block;
    font-size:      11px;
    color:          #9fb7c0;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    margin-top:     3px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

/* ══════════════════════════════════════════════════════════════════════════
   TRANSPORT CONTROLS  (prev / play-pause / next)
   ══════════════════════════════════════════════════════════════════════════ */
.lasc-fp-controls {
    display:     flex;
    align-items: center;
    gap:         2px;
    flex-shrink: 0;
}

.lasc-fp-controls button {
    background:   transparent;
    border:       none;
    color:        rgba(255, 255, 255, 0.5);
    cursor:       pointer;
    padding:      7px;
    border-radius: 50%;
    display:      flex;
    align-items:  center;
    justify-content: center;
    transition:   color 0.15s, background 0.15s;
    line-height:  1;
}

.lasc-fp-controls button:hover {
    color:      #10dccd;
    background: rgba(16, 220, 205, 0.1);
}

.lasc-fp-controls button svg {
    width:  18px;
    height: 18px;
    pointer-events: none;
    display: block;
}

/* Larger play/pause button */
.lasc-fp-play-btn {
    width:   46px !important;
    height:  46px !important;
    padding: 0   !important;
    border:  1.5px solid rgba(16, 220, 205, 0.45) !important;
    color:   rgba(16, 220, 205, 0.9) !important;
    border-radius: 50% !important;
}

.lasc-fp-play-btn:hover {
    background:   rgba(16, 220, 205, 0.12) !important;
    border-color: rgba(16, 220, 205, 0.8)  !important;
    color:        #10dccd                  !important;
}

#lasc-footer-player.is-playing .lasc-fp-play-btn {
    box-shadow:   0 0 20px rgba(16, 220, 205, 0.28);
    border-color: rgba(16, 220, 205, 0.7) !important;
}

.lasc-fp-play-btn .lasc-fp-btn-icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:  20px;
    height: 20px;
}

.lasc-fp-play-btn .lasc-fp-btn-icon svg {
    width:  20px;
    height: 20px;
}

/* ══════════════════════════════════════════════════════════════════════════
   CENTER: WAVEFORM + SCRUB BAR + TIMES
   ══════════════════════════════════════════════════════════════════════════ */
.lasc-fp-center {
    flex:           1;
    display:        flex;
    flex-direction: column;
    justify-content: center;
    gap:            4px;
    min-width:      0;
}

/* ── Waveform bar cluster ─────────────────────────────────────────────────── */
.lasc-fp-wave-wrap {
    position:        relative;
    height:          40px;
    cursor:          pointer;
    user-select:     none;
    -webkit-user-select: none;
    border-radius:   3px;
    overflow:        hidden;
}

.lasc-fp-wave {
    display:     flex;
    align-items: center;
    height:      100%;
    gap:         1.5px;
    pointer-events: none;
}

.lasc-fp-bar {
    flex:          1;
    min-width:     1px;
    max-width:     5px;
    border-radius: 1.5px;
    background:    rgba(255, 255, 255, 0.11);
    transition:    background 0.06s;
}

.lasc-fp-bar.played {
    background: rgba(16, 220, 205, 0.42);
}

.lasc-fp-bar.current {
    background: #10dccd;
    box-shadow: 0 0 6px rgba(16, 220, 205, 0.75);
}

/* Click anywhere on the waveform wrap to seek */
.lasc-fp-wave-wrap:hover .lasc-fp-bar.played {
    background: rgba(16, 220, 205, 0.6);
}

/* ── Thin progress / scrub bar ───────────────────────────────────────────── */
.lasc-fp-progress {
    position:      relative;
    height:        3px;
    background:    rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    cursor:        pointer;
}

.lasc-fp-progress:hover {
    height: 4px;
}

.lasc-fp-fill {
    height:        100%;
    width:         0%;
    background:    linear-gradient(90deg, #10dccd 0%, rgba(16, 220, 205, 0.55) 100%);
    border-radius: 2px;
    pointer-events: none;
    transition:    width 0.12s linear;
}

/* ── Times ───────────────────────────────────────────────────────────────── */
.lasc-fp-times {
    display:         flex;
    justify-content: space-between;
    font-size:       10px;
    color:           rgba(255, 255, 255, 0.3);
    font-family:     'SF Mono', 'JetBrains Mono', monospace;
    pointer-events:  none;
    line-height:     1;
}

/* ══════════════════════════════════════════════════════════════════════════
   VOLUME CONTROL  (right side)
   ══════════════════════════════════════════════════════════════════════════ */
.lasc-fp-vol-wrap {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-shrink: 0;
}

.lasc-fp-vol-icon {
    flex-shrink: 0;
    opacity:     0.4;
    display:     block;
}

.lasc-fp-vol {
    -webkit-appearance: none;
    appearance:     none;
    width:          76px;
    height:         3px;
    background:     rgba(255, 255, 255, 0.15);
    border-radius:  2px;
    outline:        none;
    cursor:         pointer;
}

.lasc-fp-vol::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:        12px;
    height:       12px;
    border-radius: 50%;
    background:   #10dccd;
    cursor:       pointer;
    box-shadow:   0 0 5px rgba(16, 220, 205, 0.45);
}

.lasc-fp-vol::-moz-range-thumb {
    width:        12px;
    height:       12px;
    border-radius: 50%;
    background:   #10dccd;
    cursor:       pointer;
    border:       none;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — progressively collapse on small screens
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .lasc-fp-custom   { padding: 0 16px; gap: 14px; }
    .lasc-fp-info     { min-width: 110px; max-width: 160px; }
    .lasc-fp-vol-wrap { display: none; }
}

@media (max-width: 540px) {
    .lasc-fp-times    { display: none; }
    .lasc-fp-wave-wrap { height: 32px; }
    .lasc-fp-info     { max-width: 120px; }
}

@media (max-width: 380px) {
    .lasc-fp-info { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MIXES PAGE OVERRIDE
   When Sonaar's own transport bar is present, hide it — our footer replaces it.
   (This rule lives here so it is also present on non-upload-plugin pages
    that happen to embed the player shortcode.)
   ══════════════════════════════════════════════════════════════════════════ */
.lasc-mixes-page #jswp-jsplayer-transport,
.lasc-mixes-page .jswp-jsplayer-transport {
    /* Hidden — footer player takes over */
    display: none !important;
}

/* Give the track list bottom breathing room so footer doesn't overlap */
.lasc-mixes-page .jswp-jsplayer,
.lasc-mixes-page .jswp-jsplayer-shell {
    padding-bottom: 88px !important;
}